@section('metas') 

    <title>MorePaws Perks - Subscribe</title>
    <meta name="description" content="Subscribe Description">
    <meta name="keywords" content="MorePaws pricing, MorePaws perks registration, MorePaws perks sign-up">

@endsection

<x-app-layout>

 @error('message') <span class="error text-sm text-red-400">{{ $message }}</span> @enderror
 @error('error') <span class="error text-sm text-red-400">{{ $message }}</span> @enderror
 @if (session()->has('error'))
 <div class="bg-red-100 border border-red-400 text-maingreen px-4 py-3 rounded relative" role="alert">
     <strong class="font-bold">{{ Session::get('error') }}</strong>
     <span wire:click="closeMessage" class="absolute top-0 bottom-0 right-0 px-4 py-3">
     <svg class="fill-current h-6 w-6 text-maingreenhover" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
     </span>
 </div>
@endif
{{-- ova e za subscribeto --}}
<div class="overflow-hidden w-full relative">
    <section class="py-10 md:py-12">
        <form id="payment-form">
            @csrf    
            <input type="hidden" name="paymentMethod" id="paymentMethod">
            <div class="w-full max-w-[600px] lg:max-w-[1270px] px-[20px] md:px-[25px] mx-auto relative">
                <p class="mb-5 md:mb-8">
                    <a href="{{ route('pricing.index') }}" class="inline-block bg-mainbrown text-white font-bold text-xl leading-6 min-h-[48px] rounded-lg py-3 px-5 md:px-10 hover:bg-mainbrownhover transition-all shadow-brownshadow"><img src="{{ Vite::asset('resources/images/icon-arrow-left-white.svg')}}"  width="13" height="14" alt="" class="align-middle mr-3 inline-block -mt-1">Back to packages</a>
                </p>
                <div class="flex flex-row flex-wrap -mx-6 xl:-mx-[75px]">
                    <div class="px-6 xl:px-[75px] w-full lg:w-5/12  mb-7 lg:mb-0">
                        <div class="block mb-6">
                            <p class="text-xl md:text-2xl font-bold text-mainblack mb-3 md:mb-4">Personal info</p>
                            <p class="relative pl-9 md:order-last text-base md:text-lg text-maingray mb-1">
                                <svg class="fill-[#6B7280] absolute left-0.5 top-0.5 z-10" width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path  d="M13.7085 11.7096C14.6889 10.9383 15.4045 9.88056 15.7558 8.68358C16.107 7.4866 16.0765 6.2099 15.6683 5.0311C15.2602 3.85231 14.4948 2.83003 13.4786 2.10649C12.4624 1.38296 11.246 0.994141 9.99853 0.994141C8.75108 0.994141 7.53465 1.38296 6.51846 2.10649C5.50228 2.83003 4.73688 3.85231 4.32874 5.0311C3.92061 6.2099 3.89004 7.4866 4.24129 8.68358C4.59254 9.88056 5.30814 10.9383 6.28853 11.7096C4.60861 12.3827 3.14282 13.499 2.04742 14.9396C0.95203 16.3801 0.268095 18.0909 0.0685318 19.8896C0.0540864 20.021 0.0656484 20.1538 0.102557 20.2807C0.139466 20.4075 0.200999 20.5259 0.283643 20.629C0.450551 20.8371 0.693315 20.9705 0.958532 20.9996C1.22375 21.0288 1.48969 20.9514 1.69786 20.7845C1.90602 20.6176 2.03936 20.3749 2.06853 20.1096C2.28812 18.1548 3.22022 16.3494 4.68675 15.0384C6.15328 13.7274 8.05143 13.0027 10.0185 13.0027C11.9856 13.0027 13.8838 13.7274 15.3503 15.0384C16.8168 16.3494 17.7489 18.1548 17.9685 20.1096C17.9957 20.3554 18.113 20.5823 18.2976 20.7467C18.4823 20.911 18.7213 21.0011 18.9685 20.9996H19.0785C19.3407 20.9695 19.5803 20.8369 19.7451 20.6309C19.9099 20.4248 19.9866 20.162 19.9585 19.8996C19.758 18.0958 19.0704 16.3806 17.9694 14.9378C16.8684 13.4951 15.3954 12.3791 13.7085 11.7096ZM9.99853 10.9996C9.20741 10.9996 8.43405 10.765 7.77625 10.3255C7.11845 9.88599 6.60576 9.26128 6.30301 8.53037C6.00026 7.79947 5.92105 6.9952 6.07539 6.21928C6.22973 5.44335 6.61069 4.73062 7.1701 4.17121C7.72951 3.6118 8.44225 3.23084 9.21817 3.0765C9.99409 2.92215 10.7984 3.00137 11.5293 3.30412C12.2602 3.60687 12.8849 4.11956 13.3244 4.77736C13.7639 5.43515 13.9985 6.20851 13.9985 6.99964C13.9985 8.0605 13.5771 9.07792 12.827 9.82806C12.0768 10.5782 11.0594 10.9996 9.99853 10.9996Z"/>
                                </svg>
                                {{ $user->fullName() }}
                            </p>
                            <p class="relative pl-9 md:order-last text-base md:text-lg text-maingray">
                                <svg  class="fill-[#6B7280] absolute left-0.5 top-1.5 z-10" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V13C0 13.7956 0.316071 14.5587 0.87868 15.1213C1.44129 15.6839 2.20435 16 3 16H17C17.7956 16 18.5587 15.6839 19.1213 15.1213C19.6839 14.5587 20 13.7956 20 13V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM16.59 2L10.71 7.88C10.617 7.97373 10.5064 8.04812 10.3846 8.09889C10.2627 8.14966 10.132 8.1758 10 8.1758C9.86799 8.1758 9.73728 8.14966 9.61542 8.09889C9.49356 8.04812 9.38296 7.97373 9.29 7.88L3.41 2H16.59ZM18 13C18 13.2652 17.8946 13.5196 17.7071 13.7071C17.5196 13.8946 17.2652 14 17 14H3C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V3.41L7.88 9.29C8.4425 9.8518 9.205 10.1674 10 10.1674C10.795 10.1674 11.5575 9.8518 12.12 9.29L18 3.41V13Z"/>
                                </svg>
                                {{ $user->email }}
                            </p>
                        </div>

                        <p class="text-xl md:text-2xl font-bold text-mainblack mb-3 md:mb-4">Payment Details</p>

                        <div class="w-full rounded-md border border-solid border-maingreen py-2 px-3 mb-4">
                            <div class="flex flex-row flex-wrap justify-between items-center -mx-2 mb-2">
                                <div class="px-2 py-1">
                                    <div class="block">
                                        <label for="credit_card" class="flex items-center">
                                            <input type="radio" class="h-5 w-5 rounded-full  text-maingreen shadow-sm appearance-none focus:outline-none focus:ring-0  border-gray-200 focus:border-indigo-500 focus:ring-indigo-500 mr-2" id="credit_card" name="remember" checked>
                                            <span class="text-lg md:text-xl font-bold text-mainblack">Credit Card</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="px-2 py-1">
                                    <div class="flex flex-row shrink-1 -mx-2">
                                        <div class="px-2">
                                            <img src="{{ Vite::asset('resources/images/icon-visa.svg')}}"  width="39" height="27" alt="">
                                        </div>
                                        <div class="px-2">
                                            <img src="{{ Vite::asset('resources/images/icon-mastercard.svg')}}"  width="39" height="27" alt="">
                                        </div>
                                        <div class="px-2">
                                            <img src="{{ Vite::asset('resources/images/icon-maestro.svg')}}" width="39" height="27" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="mb-0 text-maingray text-base !leading-tight">Safe money transfer using your bank account. Visa, Mastercard, Maestro</p>
                        </div>
                        <div id="card-element" class="flex flex-row flex-wrap -mx-2">
                            <div class="px-2 py-1 w-full">
                                <div class="mt-0">
                                    <div class="relative z-0 w-full group">
                                        <label for="cardholder-name" class="text-base leading-snug mb-2 pl-2">Cardholder name</label>
                                        <input id="cardholder-name" type="text" name="cardholder-name" class="w-full border-px border-white border-solid bg-white p-4 rounded-lg shadow-brownshadow min-h-[56px] placeholder:text-maingray text-black font-medium text-lg leading-tight focus:border-mainbrown !ring-transparent peer" required="" autofocus="" autocomplete="username" placeholder=" ">
                                    </div>
                                </div>
                            </div>
                            <div class="px-2 py-1 w-full">
                                <div class="mt-0">
                                    <label for="card-number" class="text-base leading-snug mb-2 pl-2">Card number</label>
                                    <div id="card-number" class="w-full border-px border-white border-solid bg-white p-4 rounded-lg shadow-brownshadow min-h-[56px] placeholder:text-maingray text-black font-medium text-lg leading-tight focus:border-mainbrown !ring-transparent peer" required="" autofocus="" autocomplete="username" placeholder=" ">
                                    </div>
                                </div>
                            </div>
                            <div class="px-2 py-1 w-full sm:w-1/2 md:w-1/3">
                                <div class="mt-0">
                                    <label for="card-expiry" class="text-base leading-snug mb-2 pl-2">Expiration date</label>
                                    <div id="card-expiry" class="w-full border-px border-white border-solid bg-white p-4 rounded-lg shadow-brownshadow min-h-[56px] placeholder:text-maingray text-black font-medium text-lg leading-tight focus:border-mainbrown !ring-transparent peer" required="" autofocus="" autocomplete="username" placeholder="MM/YY">
                                    </div>
                                </div>
                            </div>
                            <div class="px-2 py-1 w-full sm:w-1/2 md:w-1/3">
                                <div class="mt-0">
                                    <label for="card-cvc" class="text-base leading-snug mb-2 pl-2">CCV</label>
                                    <div class="input-container relative">
                                        <div id="card-cvc" class="w-full border-px border-white border-solid bg-white p-4 pr-10 rounded-lg shadow-brownshadow min-h-[56px] placeholder:text-maingray text-black font-medium text-lg leading-tight focus:border-mainbrown !ring-transparent peer" required="" autofocus="" autocomplete="username"></div>
                                        <label for="card-cvc" class="svg-label absolute right-3.5 bottom-6">
                                            <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M5 10.9287H8C8.26522 10.9287 8.51957 10.8234 8.70711 10.6358C8.89464 10.4483 9 10.1939 9 9.92871C9 9.66349 8.89464 9.40914 8.70711 9.2216C8.51957 9.03407 8.26522 8.92871 8 8.92871H5C4.73478 8.92871 4.48043 9.03407 4.29289 9.2216C4.10536 9.40914 4 9.66349 4 9.92871C4 10.1939 4.10536 10.4483 4.29289 10.6358C4.48043 10.8234 4.73478 10.9287 5 10.9287ZM17 0.928711H3C2.20435 0.928711 1.44129 1.24478 0.87868 1.80739C0.316071 2.37 0 3.13306 0 3.92871V12.9287C0 13.7244 0.316071 14.4874 0.87868 15.05C1.44129 15.6126 2.20435 15.9287 3 15.9287H17C17.7956 15.9287 18.5587 15.6126 19.1213 15.05C19.6839 14.4874 20 13.7244 20 12.9287V3.92871C20 3.13306 19.6839 2.37 19.1213 1.80739C18.5587 1.24478 17.7956 0.928711 17 0.928711ZM18 12.9287C18 13.1939 17.8946 13.4483 17.7071 13.6358C17.5196 13.8234 17.2652 13.9287 17 13.9287H3C2.73478 13.9287 2.48043 13.8234 2.29289 13.6358C2.10536 13.4483 2 13.1939 2 12.9287V6.92871H18V12.9287ZM18 4.92871H2V3.92871C2 3.66349 2.10536 3.40914 2.29289 3.2216C2.48043 3.03407 2.73478 2.92871 3 2.92871H17C17.2652 2.92871 17.5196 3.03407 17.7071 3.2216C17.8946 3.40914 18 3.66349 18 3.92871V4.92871Z" fill="#6B7280"/>
                                            </svg>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="w-full">
                                <div id="card-errors" role="alert" class="text-red-500 ml-2"></div>
                            </div>
                        </div>

                    </div>
                    <div class="px-6 xl:px-[75px] w-full lg:w-7/12">
                        
                        <div class="w-full border border-solid border-gray-200 p-5 md:p-8 lg:p-10 xl:p-16 xxl:p-20">

                            @livewire('pricing.checkout-plan', ['user' => $user, 'plan' =>$plan], key($user->id))
                            
                            
                            <p class="mb-0">
                                <button id="submit-button" type="submit" class="block w-full text-center bg-mainbrown text-white font-bold text-xl leading-6 min-h-[48px] rounded-lg py-3 px-5 hover:bg-mainbrownhover transition-all shadow-brownshadow">Checkout</button>
                            </p>

                            <p style="display: none;" id="activated-button" class="block w-full text-center bg-maingreen text-white font-bold text-xl leading-6 min-h-[48px] rounded-lg py-3 px-10 hover:bg-maingreenhover transition-all shadow-brownshadow">Activated</p>
                        </div>
                        
                    </div>
                </div>
            </div>
        </form>
    </section>

</div>

<script src="https://js.stripe.com/v3/"></script>

<script>

const stripe = Stripe('{{ config('services.stripe.key') }}');
const elements = stripe.elements();

// Create separate instances for card number, cardExpiry, and cardCvc
const cardNumber = elements.create('cardNumber');
const cardExpiry = elements.create('cardExpiry');
const cardCvc = elements.create('cardCvc');

// Mount each element to the corresponding div
cardNumber.mount('#card-number');
cardExpiry.mount('#card-expiry');
cardCvc.mount('#card-cvc');

// Handle real-time validation errors from the card elements
[cardNumber, cardExpiry, cardCvc].forEach((element) => {
    element.addEventListener('change', function (event) {
        const displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    });
});

// Variable to store referral code (initially empty)
let referralCode = '';

// Listen for referral code sent from Livewire
document.addEventListener('livewire:load', () => {
    Livewire.on('sendReferalCode', (code) => {
        referralCode = code; // Set referralCode dynamically
    });
});


document.addEventListener('livewire:load', () => {
    Livewire.on('activeCheckoutPlan', (code) => {
       if(code){

        document.getElementById('submit-button').style.display = 'none';
        document.getElementById('activated-button').style.display = 'block';
       }else{
        document.getElementById('submit-button').style.display = 'block';
        document.getElementById('activated-button').style.display = 'none';
       }
    });
});

// Handle form submission
const form = document.getElementById('payment-form');
form.addEventListener('submit', async function(event) {
    event.preventDefault();

    // Fetch the SetupIntent client_secret from the backend
    const response = await fetch('/create-setup-intent', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        }
    });
    const { client_secret } = await response.json();

    // Confirm the card setup with 3D Secure if necessary
    const result = await stripe.confirmCardSetup(client_secret, {
        payment_method: {
            card: cardNumber, // Use cardNumber here since we're using separate elements
            billing_details: {
                name: document.getElementById('cardholder-name').value // Get the cardholder name from the form
            }
        }
    });

    if (result.error) {
        Livewire.emit('showPaymentErrorPopup', result.error.message);
    } else {
        // The payment method has been confirmed. Send the payment_method ID to your backend
        var paymentMethodId = result.setupIntent.payment_method;

        // Create the subscription on the backend
        createSubscription(paymentMethodId);
    }
});

async function createSubscription(paymentMethodId) {
    const response = await fetch('/create-subscription', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({
            payment_method: paymentMethodId,
            plan_id: '{{$plan->stripe_plan}}',
            user_id: '{{$user->id}}',
            referral_code: referralCode 
        })
    });

    const result = await response.json();
    if (result.error) {
        // Handle subscription creation errors
        console.log(result.error);
    } else {
        // Subscription created successfully
        console.log('Subscription created:', result.subscription);
        Livewire.emit('showPaymentSuccessPopup', result);
    }
}
</script>


</x-app-layout>