@extends('layouts.auth')

@section('content')

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style type="text/css">
    .panel-title {
        display: inline;
        font-weight: bold;
    }
    .display-table {
        display: table;
    }
    .display-tr {
        display: table-row;
    }
    .display-td {
        display: table-cell;
        vertical-align: middle;
        width: 61%;
    }
    .hide{
        display: none;
    }
</style>

<div class="row">
        <div class="row">
            
            <div class="panel-body">
                @if (Session::has('success'))
                    <div class="alert alert-success text-center">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                        <p>{{ Session::get('success') }}</p>
                    </div>
                @endif
                <form
                    role="form"
                    action="{{ route('payment.post', $user->id) }}"
                    method="post"
                    class="require-validation"
                    data-cc-on-file="false"
                    data-stripe-publishable-key="{{ env('STRIPE_KEY') }}"
                    id="payment-form">
                    @csrf
                    
                    @if(Auth::check())
                    <input type="hidden" name="package_id" value="{{ request()->id }}">
                    @endif

                    <div class='form-row row'>
                        <div class='col-xs-12 form-group required'>
                            <label class='control-label'>Name on Card</label> 
                            <input class='form-control' size='4' type='text'>
                        </div>
                    </div>
                    <br>
                    <div class='form-row row'>
                        <div class='col-xs-12 form-group card required' style="background-color: transparent;border:none;">
                            <label class='control-label'>Card Number</label> 
                            <input autocomplete='off' class='form-control card-number' name="card_number" size='20'
                             type='text'>
                        </div>
                    </div>
                    <br>
                    <div class='form-row row'>
                        <div class='col-xs-12 col-md-12 form-group cvc required'>
                            <label class='control-label'>CVC</label> 
                            <input autocomplete='off' class='form-control card-cvc' name="cvc" placeholder='ex. 311' size='4' type='text'>
                        </div>
                    </div>
                    <br>

                    <div class='form-row row'>
                        <div class='col-xs-12 col-md-12 form-group expiration required'>
                            <label class='control-label'>Expiration Month</label> 
                            <input class='form-control card-expiry-month' name="exp_month" placeholder='MM' size='2' type='text'>
                        </div>
                    </div>
                    <br>

                    <div class='form-row row'>
                        <div class='col-xs-12 col-md-12 form-group expiration required'>
                            <label class='control-label'>Expiration Year</label> 
                            <input class='form-control card-expiry-year' name="exp_year" placeholder='YYYY' size='4' type='text'>
                        </div>
                    </div>
                    <br>
                    <div class='form-row row'>
                       <div class='col-md-12 error form-group hide'>
                          <div class='alert-danger alert'>Please correct the errors and try
                             again.
                          </div>
                       </div>
                    </div>
                    <br>
                    <div class="row">
                       <div class="col-xs-12">
                          <button class="btn btn-primary btn-lg btn-block" type="submit">Pay Now (${{ $package->price }})</button>
                       </div>
                    </div>
                </form>
            </div>
        </div>
</div>


   <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
   <script type="text/javascript">
        $(function() {
            var $form = $(".require-validation");
            $('form.require-validation').bind('submit', function(e) {
            var $form = $(".require-validation"),
                inputSelector = ['input[type=email]', 'input[type=password]',
                    'input[type=text]', 'input[type=file]',
                    'textarea'
                ].join(', '),
                $inputs = $form.find('.required').find(inputSelector),
                $errorMessage = $form.find('div.error'),
                valid = true;
            $errorMessage.addClass('hide');
            $('.has-error').removeClass('has-error');
            $inputs.each(function(i, el) {
                var $input = $(el);
                if ($input.val() === '') {
                    $input.parent().addClass('has-error');
                    $errorMessage.removeClass('hide');
                    e.preventDefault();
                }
            });
            if (!$form.data('cc-on-file')) {
                e.preventDefault();
                Stripe.setPublishableKey($form.data('stripe-publishable-key'));
                Stripe.createToken({
                    number: $('.card-number').val(),
                    cvc: $('.card-cvc').val(),
                    exp_month: $('.card-expiry-month').val(),
                    exp_year: $('.card-expiry-year').val()
                }, stripeResponseHandler);
            }
        });

        function stripeResponseHandler(status, response) {
            if (response.error) {
                $('.error')
                    .removeClass('hide')
                    .find('.alert')
                    .text(response.error.message);
            } else {
                /* token contains id, last4, and card type */
                var token = response['id'];
                $form.find('input[type=text]').empty();
                $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
                $form.get(0).submit();
            }
        }
    });
   </script>

@endsection