<template>
    <div>
        <section class="container-fluid bg3 shadow-2xl">
        <div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
          <div class="flex flex-col px-6 w-full justify-center">
            <h1 class="text-blue-700 hero-text font-bold">Check out our Premium Plans</h1>
            <p class="font-20px text-color-2">We have plans according to everyone's needs.</p>
            <p class="font-20px text-color-2">Check out our plans and what work's for you the best</p>
          </div>
          <div class="flex w-fit justify-center place-items-center">
            <img class="w-fit h-fit  rounded-3xl cursor-none" src="/img/price1.png" alt="">
          </div> 
        </div>
    </section>
    <section class="container mx-auto px-4 xl:px-24">
        <div class="grid grid-cols-1 md:grid-cols-2 place-items-center my-24 gap-16">
            <div class="grid box1 relative">
                <div id="d-wrapper">
                    <div class="zig-zag-bottom absolute inset-x-0 top-0 ">
                        <h1 class="text-center text-4xl text-white ">Educator’s License</h1>
                    </div>
                </div>
                <h1 class="text-center mt-48 text-2xl text3">For Individual Educators</h1>
                <h1 class="text-center mt-4 text-3xl text3">1 Teacher’s Account</h1>
                <h1 class="text-center mt-4 text-3xl text3">Free Resources</h1>
                <div class="mt-28 flex justify-center">
                    <a href="/educators-license"><h1 class="text-center text-3xl bg2 rounded-3xl py-4 text-white font-semibold w-fit px-16">GET QUOTE</h1></a>
                </div>
            </div>
            <div class="grid box2 relative">
                <div id="d-wrapper2" class="bg3">
                    <div class="zig-zag-bottom  absolute inset-x-0 top-0">
                        <h1 class="text-center text-4xl text-white">School License</h1>
                        
                    </div>
                </div>
                <h1 class="text-center mt-40 text-2xl text3">For Preschools</h1>
                <h1 class="text-center mt-4 text-3xl text3">Multiple Teacher’s Accounts</h1>
                <h1 class="text-center mt-4 text-2xl text3">10 Children Accounts/ Teacher</h1>
                <h1 class="text-center mt-4 text-3xl text3">Free Resources</h1>
                <div class="mt-10 flex justify-center">
                    <a href="/teachers-license"><h1 class="text-center text-3xl bg4 rounded-3xl py-4 text-white font-semibold w-fit px-16">GET QUOTE</h1></a>
                </div>
            </div>
        </div>
    </section>
    <section class="container mx-auto px-4 xl:px-24 mb-16">
        <details>
            <summary> 
                <div class="grid grid-cols-3 place-items-center ">
                    <div class="grid  text1 text-xl ">Educator's License</div>
                    <div class="grid  text-black">VS</div>
                    <div class="grid  text2 text-xl">School License</div>
                </div>
            </summary>
            <div class="grid grid-cols-2 place-items-center ">
                <div class="grid">
                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
                </div>
                <div class="grid">
                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
                </div>
            </div>
        </details>

        </section>
        <section class="container mx-auto px-4 xl:px-24">
                <div class="flex flex-col lg:flex-row place-items-center justify-center">
                    <div class="flex flex-col justify-center md:px-28 lg:px-0">
                        <div class="bg-gray-100 text-center border-radius px-20 lg:px-20">
                            <h1 class="text-3xl md:text-4xl text-center pt-32 p-3 text-blue-700 font-semibold">Talk to Us ></h1>
                                <h1 class="text-xl lg:text-2xl  lg:w-96">If you want to know which plan works for you the best, write to us and we’ll get back to you with best advice</h1>
                            </div> 
                        <!-- <img class="h-auto" src="/img/get-in-touch.png" alt="" > -->
                    </div>
                    <div class="flex flex-col ">
                        <div class="block p-6 rounded-xl shadow-lg bg-white w-96 border-2 py-14 text-xl">
                            <div v-if="isLoading">
                                <div class="form-group mb-1">
                                    <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
                                    <input type="text" v-model="name" 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 type="email" v-model="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 type="text" v-model="phone"  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="exampleInputYourAddress" class="form-label inline-block mb-2 text-gray-700">Your Address</label>
                                    <input type="text" v-model="address"  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 form-check mb-6"><input v-model="flag" type="checkbox" value="whatsapp"  class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer">
                                    <label  class="form-check-label inline-block text-gray-800" >Keep me updated on WhatsApp</label>
                                </div>
                                <button @click="saveContactForm" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight rounded 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">Contact Us</button>
                            </div>
                            <div v-else>
                                <h2 class="text-center py-40 text-4xl">Thank You!</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
    </div>
</template>
<style scoped>
details {
    border: 1px solid #d4d4d4;    
    padding: .75em .75em 0;
	/* margin-top: 10px; */
	/* box-shadow:0 0 8px #d4d4d4; */
}

summary {	
    font-weight: bold;
    margin: -.75em -.75em 0;
    padding: .75em;
    background-color: #F9F9F9;
    color: #fff;
}

details[open] {
    padding: .75em;
	border-bottom: 1px solid #d4d4d4;
}

details[open] summary {
    border-bottom: 1px solid #d4d4d4;
    margin-bottom: 10px;
}

.font-20px {
    font-size: 20px;
}
@media screen and (min-width: 801px) {
  .hero-text {
    font-size: 50px;
  }
}

@media screen and (max-width: 800px) {
  .hero-text {
    font-size: 30px;
    
  }
}
.bg3 {
  background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
}
    .bg0 {
        background-color: #00CD08;
    }
    .text {
        color: #00CD08;
    }
.border-radius{
    border-top-left-radius: 200px;
    height: 400px;
}
    .text1 {
        color: #FFA25F;
    }
    .text2{
        color:#5F008C;
}
.text3 {
    color: #666666;
}

.bg2 {
    background-color: #FFA25F;
}
.bg4 {
    background-color: #5F008C;
}

.box {
    background-color: #dfdedf;
    border-top-left-radius: 200px;

}
#d-wrapper {
background-color: #fff;
}
#d-wrapper * {

margin:0;
padding:0;}

#d-wrapper	div.sep {
		min-height: 200px;
}
#d-wrapper	div > * {
		margin: 0 40px;
	}
#d-wrapper	.zig-zag-bottom{
		margin: 32px 0;
		margin-top: 0;
		background: #FFA25F;
        width: 100%;
	}
#d-wrapper	.zig-zag-bottom,
#d-wrapper	.zig-zag-top{
			  padding: 32px 0;
	}
#d-wrapper2	.zig-zag-bottom,
#d-wrapper2	.zig-zag-top{
			  padding: 32px 0;
	}
#d-wrapper	.zig-zag-bottom:after{
		background: 
        linear-gradient(-45deg, transparent 16px, #FFA25F 0), 
        linear-gradient(45deg, transparent 16px, #FFA25F  0);
        background-size: 24px 32px;
        content: "";
        display: block;

		width: 100%;
		height: 32px;

 	    position: relative;
		top:50px;
		left:0px;
	}
    #d-wrapper2	.zig-zag-bottom:after{
		background: 
        linear-gradient(-45deg, transparent 16px, #9B00FA 0), 
        linear-gradient(45deg, transparent 16px, #9B00FA  0);
        background-size: 24px 32px;
        content: "";
        display: block;

		width: 100%;
		height: 32px;

 	    position: relative;
		top:50px;
		left:0px;
	}
    #d-wrapper2	.zig-zag-bottom{
		margin: 32px 0;
		margin-top: 0;
		background: #9B00FA;
        width: 100%;
	}
    .box1 {
    width: 90%;
    height: 550px;
    /* padding: 25px; */
    border: 1px solid #FFA25F;
}
.box2 {
  width: 90%;
  height: 550px;
  /* padding: 25px; */
  border: 1px solid #9B00FA;
}
</style>
<script>
export default {
  data() {
    return {
      isLoading: true,
      name:null,
      email:null,
      phone:null,
      address:null,
      flag:null,
      contact_form:{}
    }
  },
  mounted: function () {
    // this.getItemByCategory()
    // console.log(this.smProducts)
    // console.log(this.$route.query.cat)
    // console.log(this.fruits)
  },
  methods: {
    saveContactForm() {
        let formData={
            "name":this.name,
            "email":this.email,
            "phone":this.phone,
            "address":this.address,
            "flag":this.flag,
        }
        let dataToSave = {
        method: 'POST',
        headers: { 
        'Content-Type': 'application/json',
        // 'Authorization': 'Bearer my-token',
        // 'My-Custom-Header': 'foobar'
        },
        body: JSON.stringify(formData)
    };
    fetch('https://curriculum-app-api.beanstalkedu.com/items/contact_form', dataToSave)
        .then(response => response.json())
        .then(data => this.contact_form = data.data);
        // console.log(this.contact_form)
        this.isLoading=false
    }
  }
}
</script>

