---
import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import EducatorsLicenseForm from "../components/EducatorsLicenseForm.vue";
import Footer from "../components/Footer.vue";

const response = await fetch('http://ip-api.com/json');
const data = await response.json();
const country = data.country;
---
<Layout title="">
    <Menu/>
    <main>
        <div>
            <section class="container mx-auto px-4 xl:px-24">
                <h1 class="text-color-3 text-5xl text-center py-16 font-semibold">Educator's License</h1>
                <div class="flex justify-center">
                    <div class="grid ">
                        <div class="wrapper flex flex-col lg:flex-row text-lg gap-4 place-items-center">
                        </div>
                        <div class="grid grid-cols-2 py-3">
                            <h1 class="grid ">Student Accounts</h1>
                            <div class="grid place-items-end"><strong class="">(30)</strong></div>
                        </div>
                    </div>
                </div>
                <div class="flex flex-col lg:flex-row justify-center gap-4 px-4">
                    <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="gtname" 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="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
                        <input type="text" v-model="gtname" 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>
                <div class="flex justify-center my-10"><button class="background text-white py-3 px-4 text-lg rounded-tl-xl rounded-br-xl">Calculate Quote</button></div>
            </section>
            <section class="container mx-auto px-4 xl:px-24 my-16">
                <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center my-4 gap-6">
                    <div class="grid grid-rows-2 w-full h-full">
                        <div class="grid background place-items-center rounded-lg py-8">
                            <h1 class="text-3xl text-white ">Monthly</h1>
                        </div>
                        <div class="grid shadow-2xl rounded-b-xl place-items-center">
                            {country=="India" ?
                                <div class="flex flex-col justify-center place-items-center">
                                    <p class="text-4xl font-bold">&#8377; 100</p>
                                    <p>(inclusive of all costs)</p>
                                    <a style=" width: 135px; border-radius: 8px; background-color: #00CD08; text-align: center; font-weight: 800; padding: 11px 0px; color: white; font-size: 18px; display: inline-block; text-decoration: none; " href='https://pmny.in/DJx35l8vrQAH' > Pay Now </a>
                                    <span class="py-4"></span>
                                </div>
                                :
                                <div>
                                    <h1 class="text-4xl p-1 text-center">&#36;100</h1>
                                    <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
                                    <button style="background-color:#00CD08;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em;cursor:pointer"id="checkout-button-price_1MUNBLSJqIKN8UICnyrOswxg"role="link" type="button"> Checkout</button>
                                    <span class="py-4"></span>
                                </div>
                            }
                        </div>
                    </div>
                    <div class="grid grid-rows-2 w-full">
                        <div class="grid background place-items-center rounded-lg">
                            <h1 class="text-3xl text-white ">Bi-Yearly</h1>
                        </div>
                        <div class="grid shadow-2xl rounded-b-xl place-items-center">
                            {country=="India" ?
                                <div class="flex flex-col justify-center place-items-center">
                                    <p class="text-4xl font-bold">&#8377; 540</p>
                                    <p>(inclusive of all costs)</p>
                                    <a style=" width: 135px; border-radius: 8px; background-color: #00CD08; text-align: center; font-weight: 800; padding: 11px 0px; color: white; font-size: 18px; display: inline-block; text-decoration: none; " href='https://pmny.in/DJx35l8vrQAH' > Pay Now </a>
                                    <span class="py-4"></span>
                                </div>
                                :
                                <div class="flex flex-col justify-center place-items-center">
                                    <h1 class="text-4xl p-1">
                                        <span class="line-through text-slate-400">&#36;600</span>&nbsp;&nbsp;&#36;540 
                                    </h1>
                                    <span class="text-lg text-color-2">(10% Discount)</span>
                                    <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
                                    <button style="background-color:#00CD08;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em;cursor:pointer"id="checkout-button-price_1MUNBLSJqIKN8UICnyrOswxg"role="link" type="button"> Checkout</button>
                                    <span class="py-4"></span>
                                </div>  
                            }
                        </div>
                    </div>
                    <div class="grid grid-rows-2 w-full">
                        <div class="grid background place-items-center rounded-lg">
                            <h1 class="text-3xl text-white ">Yearly</h1>
                        </div>
                        <div class="grid shadow-2xl rounded-b-xl place-items-center">
                            {country=="India" ? 
                                <div class="flex flex-col justify-center place-items-center">
                                    <p class="text-4xl font-bold">&#8377; 1020</p>
                                    <p>(inclusive of all costs)</p>
                                    <a style=" width: 135px; border-radius: 8px; background-color: #00CD08; text-align: center; font-weight: 800; padding: 11px 0px; color: white; font-size: 18px; display: inline-block; text-decoration: none; " href='https://pmny.in/DJx35l8vrQAH' > Pay Now </a>
                                    <span class="py-4"></span>
                                </div>
                                :
                                <div class="flex flex-col justify-center place-items-center">
                                    <h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;1200</span>&nbsp;&nbsp;&#36;1020 </h1>
                                    <span class="text-lg text-color-2">(15% Discount)</span>
                                    <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
                                    <button style="background-color:#00CD08;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em;cursor:pointer"id="checkout-button-price_1MUNBLSJqIKN8UICnyrOswxg"role="link" type="button"> Checkout</button>
                                    <span class="py-4"></span>
                                </div>
                            } 
                        </div>
                    </div>
                </div>
                <!-- <div class="flex justify-center my-16"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Subscribe Now</button></div> -->
            </section>
        </div>
    </main>
    <EducatorsLicenseForm client:visible/>
    <Footer client:visible/>
</Layout>

<style scoped>


    .slider {
      -webkit-appearance: none;
      height: 6px;
      border-radius: 16px;
      background: rgba(0, 0, 0, 0.3);
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }
    
    
    
    /* .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 2px;
      height: 2px;
      background: rgba(0, 102, 255, 1);
      border-radius: 50px;
      cursor: pointer;
    } */
    
    .slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: rgba(0, 102, 255, 1);
        border-radius: 50px;
        cursor: pointer;
    }
    .slider:hover::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: rgb(0, 102, 255, 1);
        border-radius: 50px;
        border-width: 6px;
        border-color: rgba(217, 214, 214, 1);
        cursor: pointer;
    }
    
    .border-radius{
        border-top-left-radius: 200px;
        height: 400px;
    }
        .background {
            background-color: #00CD08;
        }
        .text-color-1 {
            color:  #333333;
        }
        .text-color-2 {
            color: #00CD08;
        }
        .text-color-3 {
            color: #00CD08;
        }
        
    </style>