@section('title')
    {{ 'Dashboard - Reply reviews' }}
@endsection
@php
    $planName = $user->subscription->plan->name;

    $now = \carbon\Carbon::now();
    $expire = \carbon\Carbon::create($user->subscription->expired_at);
    $planExpired = $now->greaterThanOrEqualTo($expire);

@endphp
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Dashboard') }}
        </h2>

    </x-slot>

    <section class="padding-y-lg pb-12 pt-5">
        <div class="max-w-7xl mx-auto py-1 px-4 sm:px-6 lg:px-8">
            <div id="alert"> </div>



            <!-- Hero Content -->
            <div
                class="flex   space-y-16 lg:space-y-0 text-center lg:text-left container xl:max-w-7xl mx-auto px-4 py-16 lg:px-8 lg:py-16 bg-white border border-gray-200 rounded-lg shadow sm:p-8 dark:bg-gray-800 dark:border-gray-700">



                <div class="lg:w-3/5  items-center  justify-center">
                    <div class="text-center">

                        <div class="flex flex-row gap-4 justify-center">
                            <img src="{{ asset('img/logo.png') }}" style="height:50px;" />






                        </div>
                        <h1 class="text-xl md:text-2xl font-extrabold mb-0 mt-1">
                            REPLY.REVIEWS
                        </h1>
                        <p class="mb-4 text-black-600 text-xs">AI POWERED REPLIES </p>

                        <p>Current Plan: <b>{{ $user->subscription->plan->name }} </b></p>

                        <p>Remaining Credits :<b> {{ $user->getRemainingCharges('ai-replies') }} </b> </p>
                        <p>Total Reply Credits :<b> {{ $user->getTotalCharges('ai-replies') }} /month </b> </p>
                        <p class="mb-6 mt-4">
                            <a href="{{ url('plan') }}"
                                class="text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Upgrade
                                Plan</a>
                        </p>

                        <p class="mb-6 mt-4">
                            <a class="underline-offset-2 underline"
                                href="https://chrome.google.com/webstore/detail/reply-to-google-reviews/nnlapinnlakdekodfepkeiakidelgfoa"
                                target="_blank">

                                Add Reply Extension to Chrome

                            </a>
                        </p>



                    </div>
                </div>

                <div class="lg:w-2/5 lg:mr-16 lg:flex lg:justify-center lg:items-center">
                    <div class="lg:w-11/12 relative">
                        <div
                            class="absolute pattern-dots-xl text-blue-100 top-0 left-0 w-32 h-48 md:h-96 transform -translate-y-12 -translate-x-16 -rotate-3">
                        </div>
                        <div
                            class="absolute pattern-dots-xl text-blue-100 bottom-0 right-0 w-32 h-48 md:h-96 transform translate-y-12 translate-x-16 rotate-3">
                        </div>
                        <div
                            class="absolute rounded-full top-0 right-0 w-32 h-32 bg-yellow-200 bg-opacity-50 -mt-12 -mr-12">
                        </div>
                        <div
                            class="absolute rounded-xl bottom-0 left-0 w-32 h-32 bg-blue-200 bg-opacity-50 -mb-10 -ml-10 transform rotate-3">
                        </div>
                        <div class="aspect-video relative rounded-lg mx-auto shadow-lg">
                            <iframe class="w-full h-full relative rounded-lg mx-auto shadow-lg"
                                src="https://www.youtube.com/embed/tkIrhBcY8YI" frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen>
                            </iframe>
                        </div>

                    </div>
                </div>


            </div>


        </div>



    </section>

    </div>






</x-app-layout>
<script src="https://www.paypal.com/sdk/js?client-id={{ env('PAYPAL_CLIENT_ID') }}&vault=true&intent=subscription"
    data-sdk-integration-source="button-factory"></script>

<script>
    const btnMonthPrice = document.getElementById("btnMonthPrice");
    const btnAnnualPrice = document.getElementById("btnAnnualPrice");
    const monthPrice = document.getElementById("monthPrice");
    const annualPrice = document.getElementById("annualPrice");

    btnMonthPrice.addEventListener("click", function() {
        monthPrice.style.display = "block";
        annualPrice.style.display = "none";
    });

    btnAnnualPrice.addEventListener("click", function() {
        monthPrice.style.display = "none";
        annualPrice.style.display = "block";
    });


    var csrfMeta = document.querySelector('meta[name="csrf-token"]');
    var csrfToken = csrfMeta.getAttribute('content');
    var alertCon = document.getElementById('alert');

    async function subscribe(data) {
        const url = "{{ route('plan.subscribe') }}"; // Replace with the actual Laravel route URL

        try {
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify(data)
            });

            if (response.ok) {
                const result = await response.json();
                if (result.success) {
                    alertCon.innerHTML =
                        ` <x-alert level="success" message="Your Subscription updated successfully!" /> `;
                } else {
                    alertCon.innerHTML =
                        ` <x-alert level="Danger" message="There is some problem. Please try again!" /> `;
                }

                //console.log(result); // Process the response data as needed
            } else {
                alertCon.innerHTML =
                    ` <x-alert level="Danger" message="There is some problem. Please try again!" /> `;
            }

            setTimeout(function() {
                location.reload();
            }, 2000);
        } catch (error) {
            alertCon.innerHTML = ` <x-alert level="Danger" message="There is some problem. Please try again!" /> `;
        }
    }



    let pMonthly = document.getElementById('paypal-monthly');
    if (pMonthly) {


        paypal.Buttons({
            style: {
                shape: 'pill',
                color: 'blue',
                layout: 'vertical',
                label: 'subscribe'
            },
            createSubscription: function(data, actions) {
                return actions.subscription.create({
                    /* Creates the subscription */
                    plan_id: "{{ env('PAYPAL_MONTHLY_PLAN_A') }}",
                    quantity: 1 // The quantity of the product for a subscription
                });
            },
            onApprove: function(data, actions) {
                console.log(data);
                console.log(actions);
                let postdata = {
                    plan: 'Pro Monthly',
                    paypal: data
                }



                subscribed = subscribe(postdata);

                //alert(data.subscriptionID); // You can add optional success message for the subscriber here
            }
        }).render('#paypal-monthly'); // Renders the PayPal button
    }

    let pMultiMonthly = document.getElementById('paypal-multi-monthly');
    if (pMultiMonthly) {


        paypal.Buttons({
            style: {
                shape: 'pill',
                color: 'blue',
                layout: 'vertical',
                label: 'subscribe'
            },
            createSubscription: function(data, actions) {
                return actions.subscription.create({
                    /* Creates the subscription */
                    plan_id: "{{ env('PAYPAL_MONTHLY_PLAN_B') }}",
                    quantity: 1 // The quantity of the product for a subscription
                });
            },
            onApprove: function(data, actions) {
                console.log(data);
                console.log(actions);
                let postdata = {
                    plan: 'Pro Monthly',
                    paypal: data
                }



                subscribed = subscribe(postdata);

                //alert(data.subscriptionID); // You can add optional success message for the subscriber here
            }
        }).render('#paypal-multi-monthly'); // Renders the PayPal button
    }


    let pYearly = document.getElementById('paypal-yearly');
    if (pYearly) {

        paypal.Buttons({
            style: {
                shape: 'pill',
                color: 'blue',
                layout: 'vertical',
                label: 'subscribe'
            },
            createSubscription: function(data, actions) {
                return actions.subscription.create({
                    /* Creates the subscription */
                    plan_id: "{{ env('PAYPAL_YEARLY_PLAN_A') }}",
                    quantity: 1 // The quantity of the product for a subscription
                });
            },
            onApprove: function(data, actions) {
                console.log(data);
                console.log(actions);
                let postdata = {
                    plan: 'Pro Yearly',
                    paypal: data
                }



                subscribed = subscribe(postdata);
                if (subscribed) {
                    //show success pop
                    console.log(subscribed);
                }
                //alert(data.subscriptionID); // You can add optional success message for the subscriber here
            }
        }).render('#paypal-yearly');
    }

    let pMultiYearly = document.getElementById('paypal-multi-yearly');
    if (pMultiYearly) {

        paypal.Buttons({
            style: {
                shape: 'pill',
                color: 'blue',
                layout: 'vertical',
                label: 'subscribe'
            },
            createSubscription: function(data, actions) {
                return actions.subscription.create({
                    /* Creates the subscription */
                    plan_id: "{{ env('PAYPAL_YEARLY_PLAN_B') }}",
                    quantity: 1 // The quantity of the product for a subscription
                });
            },
            onApprove: function(data, actions) {
                console.log(data);
                console.log(actions);
                let postdata = {
                    plan: 'Pro Yearly',
                    paypal: data
                }



                subscribed = subscribe(postdata);
                if (subscribed) {
                    //show success pop
                    console.log(subscribed);
                }
                //alert(data.subscriptionID); // You can add optional success message for the subscriber here
            }
        }).render('#paypal-multi-yearly');
    }
</script>