<template>
    <div>
        <section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
            <div class="flex flex-col xl:flex-row container mx-auto xl:px-24">
                <div class="flex flex-col px-6 w-full justify-center">
                    <h1 class="text-color-1 hero-text font-semibold w-full">Educate Conveniently by  </h1>
                    <span class="text-blue-700 h2 font-semibold body">Acquiring Resources Smoothly!</span>
                    <p class="font-20px  text-justify pt-8">Teaching children with the right knowledge becomes easy with our PSA curriculum, where you get access to countless resources for teaching your kids at home, school or both. Plan continuous lessons that are curated professionally for the stimulating development needs. With the right lesson plan, you supply the accurate knowledge to the little ones.</p>
                    <div class="grid md:text-base place-items-center py-2 w-fit pt-8"> 
                        <div @click="showAbModal('abModal')" class="rounded-tl-full rounded-br-full bg-blue-700 text-white text-base font-semibold px-6 py-2 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><button>Reach Us</button></div>
                    </div>
                </div>
                <div class="flex w-fit justify-center place-items-center">
                    <img class="w-fit h-fit" src="/img/educators1e.png" alt="Educate Conveniently by">
                </div> 
            </div>
        </section>
        <!-- <div @click="showAbModal('abModal')"> Show Modal</div> -->
                  <!-- Modal -->
      <div v-if="abModal" id="ytModal" class="flex justify-center abModal">
          <div class="modal-content" @click="doNothing()">
              <span  @click="hideAbModal" class="close">&times;</span>
              <div>
                <div class="block p-6  shadow-lg bg-white border-2  2xl:w-96 text-xl" style="background-color: #f5f6d7;">
                    <p class="text-blue-700 text-3xl font-semibold p-1">Get in Touch</p>
                    <div v-if="BlogQry">
                        <div class="form-group mb-1">
                            <label  for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
                            <input v-model="edrname" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
                        </div>
                        <div class="form-group mb-1">
                            <label  for="exampleInputEmail" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
                            <input v-model="edremail" type="email" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
                        </div>
                        <div class="form-group mb-1">
                            <label  for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Your Phone Number</label>
                            <input v-model="edrnumber" type="text"   class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
                        </div>
                        <div class="form-group mb-1">
                            <label  for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Write your Description....</label>
                            <textarea v-model="edrdescription" type="text"   class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"></textarea>
                        </div>
                        <div class="flex justify-end pt-2">
                            <button @click="saveBlogQry" class="px-2  py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded-tl-xl rounded-br-xl shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Send</button>
                        </div>
                    </div>
                    <div v-else> 
                        <h1 class="text-center p-16 py-32 text-3xl text-color-1">Thank You</h1>
                    </div>
                </div>
              </div>
          </div>
      </div>
    </div>
    
</template>
<script>

export default {

  data() {
      return {
            abModal:false,
            abID:'',
            edrname: null,
            edremail: null,
            edrnumber: null,
            BlogQry: true,
            edrdescription:null,

      }
  },
  methods: {
      showAbModal(abID){
          this.abModal=true
          this.abID=abID
      },
      hideAbModal(){
          this.abModal=false
      //     // this.abID=abID
      },
      doNothing(){
        // alert();
      },
      saveBlogQry(){
        let formData = new FormData();
        formData.append('Name', this.edrname);
        formData.append('Email', this.edremail);
        formData.append('Phone', this.edrnumber);
        formData.append('Message', this.edrdescription);
        formData.append('formName', 'educators-reach-us');
        fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/', 
            {
                method: 'POST',
                body: formData,
            }
        )
        .then(response => response.json())
        .then(data => {
            // console.log(data)
        });
        // formData=""
        this.BlogQry=false
    }
 
  },
      mounted: function () {
        //   this.getVideos()
      }   
}
</script>
<style scoped>

.abModal {
/* display: none;  */
position: fixed;
width: 80%;
z-index: 999991;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
  /* background-color: aliceblue; */
  padding: 20px;
  /* border: 1px solid #888; */
  width: fit-content;
  margin: 0 auto;
}
.close {
  color: rgb(40, 99, 226);
  float: right;
  font-size: 28px;
  padding: 10px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: rgb(40, 99, 226);
  text-decoration: none;
  padding: 10px;
  cursor: pointer;
  font-size: 28px;
  background-color: rgb(237, 240, 239);
  border-radius: 100%;
}
</style>