@extends('front.master')



@section('content')
    @php

        $stripe_key = $setting->stripe_key;

    @endphp

    <div class="w-full h-[80vh] flex items-center justify-center bg-slate-100">
        <div class="container mx-auto">
            <div class="bg-white shadow-lg rounded-lg">
                <div class="px-6 py-8">
                    <div class="flex flex-wrap">
                        <!-- Payment Details Section -->
                        <div class="w-full md:w-5/12">
                            <h5 class="text-center mb-4 text-info font-semibold">
                                Payment Details
                            </h5>
                            <p class=" px-4 text-left text-base text-blue-900 border-b mb-4 bg-blue-100 font-bold">Visa
                                details</p>
                            <ul class="list-none space-y-3">
                                <li class="flex justify-between items-center border-b pb-3">
                                    <div>
                                        <h6 class="text-base font-medium capitalize">
                                            {{ $response->visa->name }}
                                        </h6>
                                    </div>
                                </li>
                                <li class="flex justify-between items-center border-b pb-3">
                                    <div>
                                        <h6 class="text-base font-medium capitalize">
                                            {{ $response->visa->category_id }}
                                        </h6>
                                    </div>
                                </li>
                                <li class="flex justify-between items-center border-b pb-3">
                                    <div>
                                        <h6 class="text-base font-medium capitalize">
                                            {{ \App\Models\VisaType::TYPE_ENTRY[$response->visa->entry_type] }}
                                        </h6>
                                    </div>
                                </li>
                                <li class="flex justify-between items-center border-b pb-3">
                                    <div>
                                        <h6 class="text-base font-medium capitalize">
                                            {{ $response->estimate->estimate->name }}
                                        </h6>
                                    </div>
                                </li>
                                <li class="flex justify-between items-center border-b pb-3">
                                    <div>
                                        <h6 class="text-base font-medium">Price</h6>
                                    </div>
                                    <span class="text-gray-500">{{ $response->visa->amount }}Tk</span>
                                </li>
                                <li class="flex justify-between items-center border-b pb-3">
                                    <div>
                                        <h6 class="text-base font-medium">
                                            {{ $response->estimate->estimate->name }}
                                        </h6>
                                    </div>
                                    <span class="text-gray-500">{{ $response->estimate->price }}Tk</span>
                                </li>
                                <li class="flex justify-between items-center font-semibold">
                                    <span>Total (Tk)</span>
                                    <strong>{{ $response->estimate_price }}Tk</strong>
                                    <input type="hidden" value="{{ $response->estimate_price }}" name="total">
                                </li>
                            </ul>
                        </div>

                        <!-- Spacer for layout -->
                        <div class="hidden md:block w-1/12"></div>

                        <!-- Payment Form Section -->
                        <div class="w-full md:w-5/12">
                            <div class="bg-gray-50 rounded-lg shadow-lg p-6">
                                <form action="{{ route('checkout.credit-card') }}" method="post" id="payment-form">
                                    @csrf
                                    <div class="form-group">
                                        <div class="mb-4">
                                            <label for="card-element" class="block text-gray-700 font-medium">
                                                Enter your Debit/Credit card information
                                            </label>
                                        </div>
                                        <div id="card-element" class="p-4 bg-white border border-gray-300 rounded-lg">
                                            <!-- A Stripe Element will be inserted here -->
                                        </div>
                                        <!-- Used to display form errors -->
                                        <div id="card-errors" role="alert" class="text-red-500 text-sm mt-2"></div>
                                        <input type="hidden" name="txnId" value="{{ $txn_id }}" />
                                    </div>
                                    <div class="mt-6">
                                        <button id="card-button"
                                            class="w-full bg-black text-white py-2 rounded-lg hover:bg-gray-800"
                                            type="submit" data-secret="{{ $intent }}">
                                            Pay Now
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection



@section('custom_script')
    <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('{{ $stripe_key }}', {
            locale: 'en'
        }); // 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.handleCardPayment(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);

                        form.submit();

                    }

                });

        });
    </script>
@endsection