@extends('layouts.layout-auth')

@section('content')
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <h1 class="text-center">Stripe Payment Demo</h1>
            <hr>
            @if (session()->has('error'))
                <div class="text-danger font-italic">{{ session()->get('error') }}</div>
            @endif
            <form action="{{ url('payments') }}" method="post" id="payment-form">
            {!! csrf_field() !!}
            <div class="row form-group">
                    <div class="col-md-12">
                        <label for="name">Name</label>
                        
                        <input type="text" name="name" id="name" class="form-control" value="{{ old('name') }}">
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12">
                        <label for="email">Email</label>
                        
                        <input type="text" name="email" id="email" class="form-control" value="{{ old('email') }}">
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12">
                        <label>Billing Amount in US Dollars</label> <br>
                        <h2 class="text-muted">$10</h2>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12">
                        <!-- Display errors returned by createToken -->
                        <label>Card Number</label>
                        <div id="paymentResponse" class="text-danger font-italic"></div>
                        <div id="card_number" class="field form-control"></div>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-3">
                        <label>Expiry Date</label>
                        <div id="card_expiry" class="field form-control"></div>
                    </div>
                    <div class="col-md-3">
                        <label>CVC Code</label>
                        <div id="card_cvc" class="field form-control"></div>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12">
                        <div class="form-check form-check-inline custom-control custom-checkbox">
                            <input type="checkbox" name="terms_conditions" id="terms_conditions" class="custom-control-input">
                            <label for="terms_conditions" class="custom-control-label">
                                I agree to terms & conditions
                            </label>
                        </div>
                        
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12 small text-muted">
                        <div class="alert alert-warning">
                            <strong>NOTE: </strong> All the payments are handled by <a target="_blank"
                                href="https://stripe.com">STRIPE</a>. We don't store any of your data.
                        </div>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12">
                        <div class="text-danger font-italic generic-errors"></div>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-6">
                        <input type="submit" value="Pay via Stripe" class="btn btn-primary pay-via-stripe-btn">
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('scripts')
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://js.stripe.com/v3/"></script>
<script>
    // Create an instance of the Stripe object
    // Set your publishable API key
    var stripe = Stripe('{{ env("STRIPE_PUBLISH_KEY") }}');

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

    var style = {
        base: {
            fontWeight: 400,
            fontFamily: '"DM Sans", Roboto, Open Sans, Segoe UI, sans-serif',
            fontSize: '16px',
            lineHeight: '1.4',
            color: '#1b1642',
            padding: '.75rem 1.25rem',
            '::placeholder': {
                color: '#ccc',
            },
        },
        invalid: {
            color: '#dc3545',
        }
    };

    var cardElement = elements.create('cardNumber', {
        style: style
    });
    cardElement.mount('#card_number');

    var exp = elements.create('cardExpiry', {
        'style': style
    });
    exp.mount('#card_expiry');

    var cvc = elements.create('cardCvc', {
        'style': style
    });
    cvc.mount('#card_cvc');

    // Validate input of the card elements
    var resultContainer = document.getElementById('paymentResponse');
    cardElement.addEventListener('change', function (event) {
        if (event.error) {
            // resultContainer.innerHTML = '<p>' + event.error.message + '</p>';
        } else {
            resultContainer.innerHTML = '';
        }
    });

    // Get payment form element
    var form = document.getElementById('payment-form');
    console.log(form);

    // Create a token when the form is submitted.
    form.addEventListener('submit', function (e) {
        console.log("ADfadfadfadfadfadf");
        e.preventDefault();
        createToken();
    });

    // Create single-use token to charge the user
    function createToken() {
        console.log("ENTEREd");
        stripe.createToken(cardElement).then(function (result) {
            if (result.error) {
                console.log("YES");
                // Inform the user if there was an error
                // resultContainer.innerHTML = '<p>' + result.error.message + '</p>';
            } else {
                console.log("YES");

                // Send the token to your server
                stripeTokenHandler(result.token);
            }
        });
    }

    // Callback to handle the response from stripe
    function stripeTokenHandler(token) {
        // Insert the token ID into the form so it gets submitted to the server
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'stripeToken');
        hiddenInput.setAttribute('value', token.id);
        form.appendChild(hiddenInput);

        // Submit the form
        form.submit();
    }

    $('.pay-via-stripe-btn').on('click', function () {
        var payButton   = $(this);
        var name        = $('#name').val();
        var email       = $('#email').val();

        if (name == '' || name == 'undefined') {
            $('.generic-errors').html('Name field required.');
            return false;
        }
        if (email == '' || email == 'undefined') {
            $('.generic-errors').html('Email field required.');
            return false;
        }

        if(!$('#terms_conditions').prop('checked')){
            $('.generic-errors').html('The terms conditions must be accepted.');
            return false;
        }
    });

</script>
@endpush