<template>
  <div id="contactForm" class="flex flex-col justify-center w-full">
    <form @submit="saveFormData" id="formSection" action="">
      <div v-if="userQuery">
        <p class="text-2xl">Write your Query</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="email" 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 Query:<span class="text-red-500">*</span></label>
          <textarea v-model="message" id="message" name="message" rows="7" placeholder="Write your Query" 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: "",
        userQuery: true,
        domain: '',
        owner: 'Holy Wisdom Public School',
        referrer: '',
      };
    },
    
    mounted() {
      // Assign window-dependent values in mounted hook
      if (typeof window !== 'undefined') {
          this.domain = window.location.origin;
          this.referrer = document.referrer;
        }
      },
    
    methods: {
      saveFormData(e) {
        e.preventDefault();
        let formData = {
          data: {
            name: this.name,
            phone: this.phone,
            email: this.email,
            message: this.message
          },
          owner: this.owner,
          domain: this.domain,
          referrer: this.referrer
        };
        // console.log(formData);
        fetch(`https://api.siliconpin.com/v3/contact-form-processor/`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(formData)
        })
        .then(response => response.json())
        .then(resData => {
          // console.log("Saved Form resData", resData.success);
          if(resData.success === true){
            this.userQuery = false;
          }
          this.clearForm();
        })
        .catch(error => {
          console.error("Error:", error);
        });
      },
      clearForm() {
        this.name = "";
        this.phone = "";
        this.email = "";
        this.message = "";
      }
    }
  };
</script>
