@extends('layouts.site')
@section('title', 'Plan '.$plan->name)

@section('content')

<div class="container mx-auto py-8">
    <div class="grid grid-cols-12 gap-2  bg-white shadow-lg rounded-lg p-2 md:p-6">
        <div class="col-start-1 col-span-12  md:col-start-1 md:col-span-6 p-2 md:p-6">
            <div class="w-full  h-full  justify-center items-center" >
                <div class="w-full md:w-2/3 text-xl mx-auto">
                    <form action="{{ route('site.subscriptions.create') }}" method="post" id="payment-form"   >
                        <main>
                            @csrf
                            <div class="card-body">
                                <p class="text-center text-5xl"><i class="fas fa-credit-card rounded-full border p-6 text-white bg-gray-500"></i></p>
                                <div class="text-base">
                                    <h1 class="font-semibold  text-center my-8 text-xl">Mis Datos</h1>
                                    <p class=" bg-gray-200 p-4 rounded border my-4 "> {{ (is_null($User->name)) ? $User->fullname : $User->name  }}</p>
                                    <p class=" bg-gray-200 p-4 rounded border my-4">{{ $User->email }}</p>
                                </div>

                                <h1 class="font-semibold text-center my-8 text-xl">Información de Pago</h1>
                                <div id="card-element" class=" bg-gray-200 p-4 rounded border my-8 text-base"> <!-- A Stripe Element will be inserted here. --> </div>
                                <!-- Used to display form errors. -->
                                <div class="my-5" id="card-errors" role="alert"></div>
                                <input type="hidden" name="plan" value="{{ $plan->id }}" />
                            </div>
                            <div class="flex  justify-center items-center my-8">
                                <button
                                        id="card-button"
                                        class="mx-auto shadow-lg hover:shadow-md submit-button px-4 py-3 w-full text-xl transition-colors rounded bg-black text-white"
                                        type="submit"
                                        data-secret="{{ $intent->client_secret }}">
                                    Pagar  ${{ $plan->price }}
                                </button>
                            </div>
                        </main>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-start-1 col-span-12 md:col-start-7 md:col-span-6 p-2 md:px-6 border-t md:border-t-0 md:border-l">
            <div class="w-full  h-full  justify-center items-center text-center p-2 md:px-6" >
                <h1 class="text-3xl my-4 pb-4 border-b">{{ $plan->name }}</h1>
                <h2 class="text-xl my-4">Pagarás  </h2>
                <h3 class="text-2xl font-bold my-4">${{ number_format($plan->price, 2) }}  <span class="text-sm text-gray-500">/ {{ $plan->validity->name }}</span></h3>
                <h4 class="text-lg my-4">Después de {{ $plan->trialdays }} dias de prueba</h4>

                <ul class="text-left text-sm italic py-2">
                    @foreach($plan->features as $feature)
                        <li class="py-3"><i class="fas fa-check"></i> {{ $feature->name }}</li>
                    @endforeach
                </ul>
               <p class="border-l-2 indent-2 my-4">{{ $plan->desc }}</p>
            </div>
        </div>

    </div>
</div>

    <script src="https://js.stripe.com/v3/"></script>
    <script>
        // Custom styling can be passed to options when creating an Element.
        // (Note that this demo uses a wider set of styles than the guide below.)
        var style = {
            base: {
                color: '#32325d',
                lineHeight: '18px',
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: 'antialiased',
                fontSize: '16px',
                '::placeholder': {
                    color: '#aab7c4'
                }
            },
            invalid: {
                color: '#fa755a',
                iconColor: '#fa755a'
            }
        };

        const stripe = Stripe('{{ config("cashier.key") }}', { locale: 'es' }); // Create a Stripe client.
        const elements = stripe.elements(); // Create an instance of Elements.

        const cardElement = elements.create('card', { style: style }); // Create an instance of the card Element.
        const cardButton = document.getElementById('card-button');
        const clientSecret = cardButton.dataset.secret;

        cardElement.mount('#card-element'); // Add an instance of the card Element into the `card-element` <div>.

        // Handle real-time validation errors from the card Element.
        cardElement.addEventListener('change', function(event) {
            var displayError = document.getElementById('card-errors');
            if (event.error) {
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
        });

        // Handle form submission.
        var form = document.getElementById('payment-form');

        form.addEventListener('submit', function(event) {
            event.preventDefault();

            stripe.handleCardSetup(clientSecret, cardElement, {
                    payment_method_data: {
                        //billing_details: { name: cardHolderName.value }
                    }
                })
                .then(function(result) {
                    console.log(result);
                    if (result.error) {
                        // Inform the user if there was an error.
                        var errorElement = document.getElementById('card-errors');
                        errorElement.textContent = result.error.message;
                    } else {
                        console.log(result);
                        // Send the token to your server.
                        stripeTokenHandler(result.setupIntent.payment_method);
                    }
                });
        });

        // Submit the form with the token ID.
        function stripeTokenHandler(paymentMethod) {
            // Insert the token ID into the form so it gets submitted to the server
            var form = document.getElementById('payment-form');
            var hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', 'paymentMethod');
            hiddenInput.setAttribute('value', paymentMethod);
            form.appendChild(hiddenInput);

            // Submit the form
            form.submit();
        }
    </script>
@endsection