<template>
    <div id="contactForm" class="flex flex-col justify-center w-full">
        <form @submit="saveFormData" id="formSection" action="">
          <div v-if="userQurie">
            <p class="text-2xl">Write your Qurie</p>
            <div class="py-3">
                <label for="name">Name:<span class=text-red-500>*</span></label>
                <input v-model="name" id="name" name="name" type="text" placeholder="Enter your Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
            </div>
            <div>
                <label for="phone">Mobile:<span class=text-red-500>*</span></label>
                <input v-model="phone" id="phone" name="phone" type="text" placeholder="Enter your Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
            </div>
            <div class="py-3">
                <label for="email">E-mail ID:<span class=text-red-500>*</span></label>
                <input v-model="email" id="email" name="email" type="text" placeholder="Enter your E-mail ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
            </div>
            <div>
                <label for="message">Write your Qurie:<span class=text-red-500>*</span></label>
                <textarea v-model="message" id="message" name="message" rows="7" placeholder="Write your Qurie" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required></textarea>
            </div>
            <div class="">
                <button class="bg-[#3084b5] text-white rounded-lg py-2.5 px-6 float-right" >Submit</button>
            </div>
          </div>
          <div v-else class="flex" >
              <h1 class="text-center text-black text-4xl p-16">Thank You</h1>
          </div>
        </form>
    </div>
</template>
<script>
  export default{
    data(){
      return{
        name: "",
        phone: "",
        email: "",
        message: "",
        userQurie: true,
      }
    },
    methods:{
      saveFormData(e){
        e.preventDefault();
        let formData = {
          name: this.name,
          mobile: this.phone,
          email: this.email,
          message: this.message
        }
        fetch(`https://api8.siliconpin.com/items/hps_contact`,
        {
          method: 'POST',
          headers: {
            'Content-Type' : 'application/json'
          },
          body: JSON.stringify(formData)
        })
        .then(response => response.json())
        .then(data => {
          console.log("Saved Form Data")
        })
        this.userQurie = false;
      }
    }
  }
</script>