@extends('front.layout.app')
@section('title', 'Our Team')


@section('content')
<style>
    .loader_cart {
        position: absolute;
        top: 28%;
        left: 6%;
        transform: translate(-50%, -50%);
        background-color: transparent;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: none;
        border-top: 3px solid #000;
        border-right: 3px solid transparent;
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
        z-index: 9999;
    }

    button {
        position: relative;
    }

    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    } 
</style>


    <section class="check-out-section">
        <div class="container">
            <div class="check-out-form check-out-3">
                <h2 class="primary-heading">Payment Methods </h2>


                {{-- <form action="{{ route('front.payment') }}" role="form" method="POST" data-cc-on-file="false" --}}
                <form action="{{ route('front.payment', ['orderId' => $order->id]) }}" role="form" method="POST" data-cc-on-file="false"

                    data-stripe-publishable-key="pk_test_51LAz2nKTcgvTpzOsXtOkcr4iHRd58HHTrWQlggzKPhhWul3l6TI6THmqScGG75CseVyvwRmDW6qFDXYPODR1IKH900c3WBia5R" id="payment-form" class="contactForm">
                    @csrf
                    <div class="contactForm">
                        <h3>Payment Methods</h3>
                        <div class="row">
                            <div class="col-6">
                                <input type="text" placeholder="Cardholder Name" name="cardholder_name "
                                    class="form-control" required>
                                    @error('payment_method_id')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                            </div>
                            <div class="col-6">
                                <input type="text" placeholder="Card Number" name="card_number"
                                    class="card-number form-control "required>
                            </div>
                            <div class="col-md-3">
                                <input type="text" placeholder="MM" name="exp_month"
                                    class="card-expiry-month form-control" required>
                            </div>
                            <input type="hidden" name="amount">
                            <div class="col-md-3">
                                <input type="text" placeholder="YYYY" name="exp_year"
                                    class="card-expiry-year form-control" required>
                            </div>
                            <div class="col-md-6">
                                <input type="text" placeholder="CVC" name="cvv" class="card-cvc form-control"
                                    required>
                            </div>
                        </div>
                        <div class="col-md-12 text-center">
                            <input type="hidden" name="amount" value="{{ $amount ?? 100 }}">
                            <span id="button-loader-checkout" class="loader_cart" style="display: none;"></span>
                            <button type="submit" class="themeBtn themeBtn1">Proceed Now
                            </button>
                        </div>
                    </div>
                </form>


            </div>

        </div>
    </section>

@endsection

@section('scripts')

<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

<script type="text/javascript">

        //  $(function() {
        //     var stripePublishableKey = "{{ env('STRIPE_KEY') }}";
        //     // var stripePublishableKey = "pk_test_51LAz2nKTcgvTpzOsXtOkcr4iHRd58HHTrWQlggzKPhhWul3l6TI6THmqScGG75CseVyvwRmDW6qFDXYPODR1IKH900c3WBia5R";


        //     if (!stripePublishableKey) {
        //         console.error("Stripe publishable key is missing.");
        //         return;
        //     }

        //     Stripe.setPublishableKey(stripePublishableKey);

        //     $('#payment-form').on('submit', function(e) {
        //         e.preventDefault();

        //         const $button = $('#proceed-now-button');

        //         $button.prop('disabled', true);

                
        //         let cardNumber = $('.card-number').val();
        //         let cardCVC = $('.card-cvc').val();
        //         let cardExpMonth = $('.card-expiry-month').val();
        //         let cardExpYear = $('.card-expiry-year').val();

        //         var $form = $(this);
        //         var $errorMessage = $form.find('div.error');
        //         $errorMessage.addClass('hide');
        //         $('.has-error').removeClass('has-error');

        //         if (cardNumber === '' || cardCVC === '' || cardExpMonth === '' || cardExpYear === '') {
        //             return;
        //         }

        //         Stripe.card.createToken({
        //             number: cardNumber,
        //             cvc: cardCVC,
        //             exp_month: cardExpMonth,
        //             exp_year: cardExpYear,
        //         }, function(status, response) {
        //             console.log('Tokenization response:', response);

        //             if (response.error) {
        //                 console.log('Error', response);
        //                 $('.error')
        //                     .removeClass('hide')
        //                     .removeAttr('style')
        //                     .find('.alert')
        //                     .text(response.error.message);
        //             } else {
        //                 console.log(response);

        //                 $form.append("<input type='hidden' name='payment_method_id' value='" + response.id + "'/>");
        //                 $form.get(0).submit();
        //             }
        //         });
        //     });
        // });
        $(function() {
    var stripePublishableKey = "{{ env('STRIPE_KEY') }}";

    if (!stripePublishableKey) {
        console.error("Stripe publishable key is missing.");
        return;
    }

    Stripe.setPublishableKey(stripePublishableKey);

    $('#payment-form').on('submit', function(e) {
        e.preventDefault();

        const $button = $('#proceed-now-button');
        const $loader = $('#button-loader-checkout'); // Show loader
        const $form = $(this);

        // Show the loader and disable the button to prevent multiple clicks
        $button.prop('disabled', true);
        // $loader.show();
        $('.loader_cart').css('display', 'inline-block');

        let cardNumber = $('.card-number').val();
        let cardCVC = $('.card-cvc').val();
        let cardExpMonth = $('.card-expiry-month').val();
        let cardExpYear = $('.card-expiry-year').val();

        var $errorMessage = $form.find('div.error');
        $errorMessage.addClass('hide');
        $('.has-error').removeClass('has-error');

        if (cardNumber === '' || cardCVC === '' || cardExpMonth === '' || cardExpYear === '') {
            // $loader.hide();
            $('.loader_cart').css('display', 'none');
            $button.prop('disabled', false); 
            return;
        }

        Stripe.card.createToken({
            number: cardNumber,
            cvc: cardCVC,
            exp_month: cardExpMonth,
            exp_year: cardExpYear,
        }, function(status, response) {
            console.log('Tokenization response:', response);

            if (response.error) {
                console.log('Error', response);
                $('.loader_cart').css('display', 'none');
                $button.prop('disabled', false); // Re-enable the button
                $('.error')
                    .removeClass('hide')
                    .removeAttr('style')
                    .find('.alert')
                    .text(response.error.message);
            } else {
                console.log(response);

                $form.append("<input type='hidden' name='payment_method_id' value='" + response.id + "'/>");

                // Simulate a delay before submitting the form to show the loader
                setTimeout(function() {
                    $form.get(0).submit();
                }, 1000); // 1 second delay before form submission
            }
        });
    });
});

    </script>

@endsection