@extends('layouts.checkout')
@section('content')

    <div class="container mt-5">
        <div class="row-justify-content-center">
            <div class="d-flex flex-row-reverse">
                <div class="p-2">
                    <input type="submit" id="brl" class="traslate" value="">
                </div>
                <div class="p-2">
                    <input type="submit" id="esp" class="traslate" value="">
                </div>
                <div class="p-2">
                    <input type="submit" id="eua" class="traslate" value="">
                </div>
            </div>
            <div class="d-flex justify-content-center">
                @include('alerts.stripeCheckout')
                <div class="p-2">
                    <form action="{{ route('payment.stripe.store') }}" method="post" id="payment-form">
                        <div class="form-group">
                            <h5 class="text-azul mb-3 lang-text" key="text-checkout">
                                Tarjeta de Credito o Debito
                            </h5>
                            <div id="card-element" class="form-control">
                                <!-- Elements will create input elements here -->
                            </div>
                        </div>
                        <!-- Used to display form errors. -->
                        <div id="card-errors" role="alert"></div>
                        <div class="form-group mt-4">
                            <button type="submit" class="btn btn-azul btn-lg btn-block do-request" id="navegar">
                                Pay<small> {{ $cliente->monto_a_pagar }} {{ strtoupper($cliente->moneda) }}</small>
                                <div id="boxLoading"></div>
                            </button>
                        </div>
                    </form>
                </div>
                
            </div>
        </div>
        
    </div>


@section('lenguaje')
    <script src="{{ asset('js/lenguaje.js') }}"  charset="utf-8"></script>
@endsection





@section('form-checkout')
    <script src="https://js.stripe.com/v3/"></script>

    <script>
        // Create a Stripe client.
        var stripe = Stripe('pk_test_Rki7wvMx2DnH78MUeZaNJFzM00NPNm5yi0');

        // Create an instance of Elements.
        var elements = stripe.elements();

        // 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: '#061474',
                lineHeight: '30px',
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: 'antialiased',
                fontSize: '16px',
                '::placeholder': {
                    color: '#061474'
                }
            },
            invalid: {
                color: '#fa755a',
                iconColor: '#fa755a'
            }
        };

        // Create an instance of the card Element.
        var 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.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.createToken(card).then(function(result) {
                if (result.error) {
                    // Inform the user if there was an error.
                    var errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                } else {
                    // Send the token to your server.
                    stripeTokenHandler(result.token);
                }
            });
        });

        function stripeTokenHandler(token) {
            // 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', 'stripeToken');
            hiddenInput.setAttribute('value', token.id);
            form.appendChild(hiddenInput);

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

@endsection