---
import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import SchoolLicenseSlider from "../components/SchoolLicenseSlider.vue";
import SchoolLicenseForm from "../components/SchoolLicenseForm.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/>
    <SchoolLicenseSlider client:visible/>
    <main>
        <div>
            <!-- <h1>{data.country}</h1> -->
            <section class="container mx-auto my-16 px-4 xl:px-24">
                <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center justify-center my-4 gap-x-16 gap-y-6">
                    <div class="grid grid-rows-2 w-full h-fit">
                        <div class="grid background place-items-center rounded-lg py-8">
                            <h1 class="text-3xl text-white h-fit font-bold">Monthly</h1>
                        </div>
                        <div class="grid shadow-2xl rounded-b-lg 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: #124BBD; 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:#124BBD;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 h-fit">
                        <div class="grid background place-items-center rounded-lg">
                            <h1 class="text-3xl text-white font-bold">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: #124BBD; 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:#124BBD;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 font-bold">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: #124BBD; 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:#124BBD;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 id="error-message"></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">Pay Now</button></div> -->
            </section>
        </div>
    </main>
    <SchoolLicenseForm client:visible/>
    <Footer client:visible/>
</Layout>

<script  is:inline src="https://js.stripe.com/v3"></script>
<script is:inline>
(function() {
var stripe =
Stripe('pk_live_51Jp9QPSJqIKN8UICMumatjNFXJzcfLKv8BVLTiGsvlMGBQrrquId2zeMbqnk5wr4YVYr6ZUvZ9vpo3N9Li98cEDL00x4eazfLT');
var checkoutButton = document.getElementById('checkout-button-price_1MUNBLSJqIKN8UICnyrOswxg');
checkoutButton.addEventListener('click', function () {
/*
* When the customer clicks on the button, redirect
* them to Checkout.
*/
stripe.redirectToCheckout({
lineItems: [{price: 'price_1MUNBLSJqIKN8UICnyrOswxg', quantity: 1}],
mode: 'payment',
/*
* Do not rely on the redirect to the successUrl for fulfilling
* purchases, customers may not always reach the success_url after
* a successful payment.
* Instead use one of the strategies described in
* https://stripe.com/docs/payments/checkout/fulfill-orders
*/
successUrl: 'https://teenybeanspreschoolcurriculum.com/',
cancelUrl: 'https://teenybeanspreschoolcurriculum.com/',
})
.then(function (result) {
if (result.error) {
/*
* If `redirectToCheckout` fails due to a browser or network
* error, display the localized error message to your customer.
*/
var displayError = document.getElementById('error-message');
displayError.textContent = result.error.message;
}
});
});
})();
</script>
<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;
      width: 50%;
    }
    
    
    
    /* .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;
        width: 100%;
    }
        .background {
            background-color: #124BBD;
        }
        .text-color-1 {
            color:  #333333;
        }
        .text-color-2 {
            color: #124BBD;
        }
        .text-color-3 {
            color: #124BBD;
        }
        
    </style>