@push('custom-css')
    <script src="https://js.stripe.com/v3/"></script>
@endpush
<div class="row">
    <div class="col-md-12 checkout-billing">
        <label for="cc-number">
            <span class="checkout-card-paytext">{{ __('payments.cc_num') }}</span>
            @if($checkout['stripe_mode'] === 'test')
                <button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#stripeTestCards">
                    {{ __('payments.test_cards') }}
                    <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="top" data-title="Click for more info"></i>
                </button>
                <a href="#" class="test-4242 btn btn-warning btn-xs" data-toggle="tooltip" data-placement="top" data-title="Copy To Clipboard" data-clipboard-action="copy" data-clipboard-text="4242 4242 4242 4242">Quick 4242</a>
            @endif
        </label>
        <span class="checkout-billing pull-right checkout-poweredby"><label>{{__('payments.powered_by')}}</label> <i class="fab fa-cc-stripe stripe-icon"></i> </span>
        <div id="card-element"></div>
        <div id="payment-errors" class="payment-errors alert alert-danger"></div>
        <button id="pay-now" type="submit" class="btn btn-3 btn-booksuccess btn-payments-bw btn-block">
            {{ __('core.pay').' '.money($checkout['total'], $checkout['currency']) }}
        </button>
        <div id="payment-request">
            <div id="payment-request-button"></div>
        </div>
        <div class="invalid-feedback">
            @if ($errors->any())
                <ul class="list-unstyled">
                    @foreach ($errors->all() as $error)
                        <li class="invalid-feedback d-block">{{ $error }}</li>
                    @endforeach
                </ul>
            @endif
            {{ __('payments.cc_req') }}
        </div>
    </div>
</div>
@if($checkout['stripe_mode'] === 'test')
    <div class="modal fade" id="stripeTestCards" tabindex="-1" role="dialog" aria-labelledby="stripeTestCardsLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="stripeTestCardsLabel">{{ __('payments.test_cards') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="note note-primary stripe">
                        <div class="note-icon"><i class="fab fa-cc-stripe"></i></div>
                        <div class="note-content">
                            <h4><b>{{ __('payments.test_cards') }}</b></h4>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="alert alert-warning">
                                        <p class="test-p"><b><i class="fa fa-exclamation-triangle"></i> TEST MODE</b></p>
                                        <p class="test-p"><small>Test Card: <a href="#" class="test-card" data-toggle="tooltip" data-placement="top" data-title="Copy To Clipboard" data-clipboard-action="copy" data-clipboard-text="4242 4242 4242 4242">4242 4242 4242 4242</a> - Succeeds and immediately processes the payment - any month date / 3 digits for the back of the card</small></p>
                                        <p class="test-p"><small>Test Card: <a href="#" class="test-card" data-toggle="tooltip" data-placement="top" data-title="Copy To Clipboard" data-clipboard-action="copy" data-clipboard-text="4000 0027 6000 3184">4000 0027 6000 3184</a> - Requires auth initally, and fails for subsequent payments (including off-session ones) with an authentication_required decline code.</small></p>
                                        <p class="test-p"><small>Test Card: <a href="#" class="test-card" data-toggle="tooltip" data-placement="top" data-title="Copy To Clipboard" data-clipboard-action="copy" data-clipboard-text="4000 0025 0000 3155">4000 0025 0000 3155</a> - Requires auth initally, but succeeds for subsequent payments (including off-session ones) as long as the card is setup with setup_future_usage</small></p>
                                        <p class="test-p"><small>Test Card: <a href="#" class="test-card" data-toggle="tooltip" data-placement="top" data-title="Copy To Clipboard" data-clipboard-action="copy" data-clipboard-text="4000 0082 6000 3178">4000 0082 6000 3178</a> - Requires auth initally, but fails for subsequent payments (including off-session ones) with an insufficient_funds decline code.</small></p>
                                        <p class="test-p"><small>Test Card: <a href="#" class="test-card" data-toggle="tooltip" data-placement="top" data-title="Copy To Clipboard" data-clipboard-action="copy" data-clipboard-text="4000 0000 0000 0341">4000 0000 0000 0341</a> - Succeeds when it initially attaches to Customer object, but fails on the first payment of a subscription with the payment_intent value of requires_payment_method</small></p>
                                        <p class="test-p"><small>Test Card: <a href="#" class="test-card" data-toggle="tooltip" data-placement="top" data-title="Copy To Clipboard" data-clipboard-action="copy" data-clipboard-text="4000 0038 0000 0446">4000 0038 0000 0446</a> - Requires auth for one-time and other on-session payments. However, all off-session payments will succeed as if the card has been previously set up.</small></p>
                                        <p class="test-p"><small>Test Card: <a href="#" class="test-card" data-toggle="tooltip" data-placement="top" data-title="Copy To Clipboard" data-clipboard-action="copy" data-clipboard-text="4000 0000 0000 9995">4000 0000 0000 9995</a> - Always fails (including the initial purchase) with a decline code of insufficient_funds</small></p>
                                        @if(setting('payments_stripe_iban'))
                                            <p class="test-p"><small>Test Iban: <b>IE29AIBK93115212345678</b> - The charge status transitions from pending to succeeded</small></p>
                                            <p class="test-p"><small>Test Iban: <b>IE02AIBK93115212345679</b> - The charge status transitions from pending to failed.</small></p>
                                            <p class="test-p"><small>Test Iban: <b>IE51AIBK93115212345670</b> - The charge status transitions from pending to succeeded, but a dispute is immediately created.</small></p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endif
<script>
    let stripe = Stripe('{{ $checkout['stripe_public_key'] }}');
    let cardErrorElement = $('#payment-errors');
    let paymentIntent;

    const email = $('#email').val();
    const phone = null;
    const name = $('#firstName').val() + $('#lastName').val();
    const btn = $('#pay-now');
    const billingAddress = {
        line1: $('#address').val(),
        postal_code: $('#zip').val(),
        state: $('#county').val(),
        country: $('#country option:selected').attr('data-code'),
    };

    $.post(site_root + 'payments/payment_intent', @json($checkout), 'json' ).then(function (response) {
        paymentIntent = response.intent;
        if(response.error){
            cardErrorElement.html(response.error);
            cardErrorElement.slideDown(function(){
                btn.replaceWith('<a href="' + site_root + 'payments/checkout" class="btn btn-3 btn-booksuccess btn-payments-bw">RELOAD THE FORM</a>');
            });
        }
    });
    // Create an instance of Elements.
    let elements = stripe.elements();
    // Custom styling can be passed to options when creating an Element.
    let style = {
        base: {
            iconColor: '#666ee8',
            color: '#31325f',
            fontWeight: 400,
            fontFamily:
                '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4',
            },
            ':-webkit-autofill': {
                color: '#666ee8',
            },
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a',
            ':-webkit-autofill': {
                color: '#fa755a',
            },
        }
    };
    /**************************************************************************/
    // Create an instance of the card Element.
    let card = elements.create('card', {style: style, hidePostalCode: true,});
    // Add an instance of the card Element into the `card-element` <div>.
    card.mount('#card-element');
    // Handle real-time validation errors from the card Element.
    card.on('change', function (event) {
        changeLoadingState(false);
        if (event.error) {
            cardErrorElement.html(event.error.message);
            cardErrorElement.slideDown();
        } else {
            cardErrorElement.slideUp(function(){
                cardErrorElement.html('');
            });
        }
    });

    let pay = document.getElementById('pay-now');
    pay.addEventListener('click', async (event) => {
        event.preventDefault();
        // Update Button
        changeLoadingState(true);

        const response = await stripe.confirmCardPayment(
            paymentIntent.client_secret,
            {
                payment_method: {
                    card,
                    billing_details: {
                        name,
                        address: billingAddress,
                        phone
                    },
                },
                setup_future_usage: 'off_session',
            }
        );

       handlePayment(response);
    });

    // Handle new PaymentIntent result
    const handlePayment = (paymentResponse) => {
        const {paymentIntent, error} = paymentResponse;
        if (error && error.type === 'validation_error') {
            changeLoadingState(false);
            cardErrorElement.slideDown(function() {
                Swal.close();
                cardErrorElement.html(error.message);
            });
        } else if (error) {
            changeLoadingState(false);
            cardErrorElement.slideDown(function() {
                Swal.close();
                cardErrorElement.html(error.message);
            });

        } else if (paymentIntent.status === 'succeeded') {
            // Success! Payment is confirmed. Update the interface to display the confirmation screen.
            processOrder(paymentIntent.id);
        } else if (paymentIntent.status === 'requires_payment_method') {
            // Failure. Requires new PaymentMethod, show last payment error message.
            let msg = paymentIntent.last_payment_error || 'Payment failed';
            changeLoadingState(false);
            cardErrorElement.slideDown(function() {
                Swal.close();
                cardErrorElement.html(msg);
            });
        } else {
            // Payment has failed
            changeLoadingState(false);
            cardErrorElement.slideDown(function() {
                Swal.close();
                cardErrorElement.html(error.message);
            });
        }
    };
    // Update Button and prevent double clicks
    let changeLoadingState = function(isLoading) {

        if (isLoading) {
            cardErrorElement.slideUp(function(){
                cardErrorElement.html('');
            });
            btn.attr('disabled', true);
            btn.html('<i class="fas fa-spinner fa-spin"></i> {{ __('core.processing') }}');
        } else {
            btn.attr('disabled', false);
            updateButtonLabel();
        }
    };
    // Update the main button to reflect the payment method being selected.
    const updateButtonLabel = () => {
        btn.html('Pay {{ money($checkout['total'], $checkout['currency']) }} with card');
    };
    // Process Order
    function processOrder(paymentIntent){

        let form = document.getElementById('checkout');
        let hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'payment_intent');
        hiddenInput.setAttribute('value', paymentIntent);
        form.appendChild(hiddenInput);
        $.each(@json($checkout),function(key,value){
            let hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', key);
            hiddenInput.setAttribute('value', value);
            form.appendChild(hiddenInput);
        });
        let data = $('#checkout').serializeArray();
        // Submit the form
        $.ajax({
            type:"POST",
            url: site_root + "payments/process",
            cache: false,
            data : data,
            success: function(response){

                if (!response.success) {
                    cardErrorElement.slideDown(function() {
                        cardErrorElement.html(response.message);
                    });
                } else {
                    btn.html('<i class="fa fa-check-circle"></i> Payment Completed!');
                    cardErrorElement.slideUp(function() {
                        cardErrorElement.html('');
                        location.href = site_root + 'cp/dashboard';
                    });
                }
            }
        });
    }
</script>