<template>
    <!-- Submit your Celebration Story here -->
<section class="container mx-auto px-4 xl:px-24 pt-16">
<h1 id="submitCelebration" class="h1-text text-blue-700 font-semibold">Submit your Celebration Story here</h1>

<div class=" bg-gray-300  rounded-tl-3xl rounded-br-3xl mt-4">
    <div  class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 place-items-center " v-if="celebrationstory">
        <div class="grid place-items-center py-16 rounded-tl-3xl rounded-br-3xl">
            <div class="grid">
                <div class="w-full max-w-xs gap-4 drop-shadow-2xl">
                    <div>
                        <input type="text" v-model="scsname" placeholder="Full Name..">
                        <input type="text" v-model="scsnumber" placeholder="Mobile Number">
                        <input type="text" v-model="scsemail" name="lastname" placeholder="Email ID">
                        <input type="text" v-model="scsschoolname" placeholder="School Name">
                        <input type="text" v-model="scsglink" placeholder="Place your Google Drive File Link">
                    </div>
                </div>
            </div>
        </div>
        <div class="grid place-items-center px-4 ">
            <div class="flex place-content-end ">
                <h1 class="justify-center pt-4 text-xl font-semibold "> Occassion:&nbsp;</h1>
                <select class="select max-w-xs text-base" v-model="scsOccetion">
                    <option disabled value="">Select your Occassion</option>
                    <option>Good Friday</option>
                    <option>Easter</option>
                    <option>Christmas</option>
                    <option>Thanksgiving</option>
                    <option>Good Friday</option>
                </select>
            </div>
            <div class="form-control w-full">
                <textarea class="w-full rounded-lg" v-model="scsdescription" rows="8" cols="50" placeholder="Write the description here....."></textarea>
                <!-- <textarea v-model="scsdescription" class="textarea textarea-bordered text-lg shadow-2xl" style="width:300px; height: 270px;" placeholder="Write the description here....."></textarea> -->
            </div>
        </div>
        <div class="py-4 lg:pt-0"><button @click="savecelebrationstory" class="text-lg bg-blue-700 text-white p-2 px-3 rounded-tl-lg rounded-br-lg">Publish Story</button></div>
    </div>
    <div v-else="savecelebrationstory"><h2 class="text-2xl text-center py-48"> Thank You <br>Published your Story Shortly.......</h2></div>


    

</div>

 
</section>
</template>
<style scoped>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* box-sizing: border-box; */
}

.text-color-1 {
color: #7c4c23
}
@media screen and (min-width: 801px) {
      .h1-text {
        font-size: 40px;
        
        
      } 
    }
    
    @media screen and (max-width: 800px) {
      .h1-text {
        font-size: 25px;
        
      }
    }
</style>
<script>
export default {
data() {
return {
isLoading: true,
scsname:null,
scsnumber:null,
scsemail:null,
celebrationstory:true,
scsOccetion:'',
scsschoolname:null,
scsglink:null,
scsdescription:null,

//   contact_form:{}
}
},
mounted: function () {
// this.getItemByCategory()
// console.log(this.smProducts)
// console.log(this.$route.query.cat)
// console.log(this.fruits)

},
methods: {
savecelebrationstory() {
let formData = new FormData();
formData.append('Name', this.scsname);
formData.append('Phone', this.scsnumber);
formData.append('Email', this.scsemail);
formData.append('MessageDetails', 'Occassion: ' + this.scsOccetion +' Description: '+this.scsdescription+' school name: '+this.scsschoolname+' FileLink: '+this.scsglink);
formData.append('formName', 'tb-educators-Need-Help-Planning-Curriculum');
fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/', 
    {
        method: 'POST',
        // headers: { 
        // 'Content-Type': 'multipart/form-data',
        // // 'Authorization': 'Bearer my-token',
        // // 'My-Custom-Header': 'foobar'
        // },
        body: formData,
    }
)
.then(response => response.json())
.then(data => {
    // console.log(this.scsOccetion)
    // console.log(data)
});
// formData=""
this.celebrationstory=false
},

}
}
</script>