@extends('frontend.frontend_layout')

@section('content')
<main id="main">
    <!-- ======= About Section ======= -->
    <section class="pt-150">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <div class="section-title title-style-center_text style2">
                        <div class="title-header">
                            <h2 class="title">Proceed to Payment</h2>
                        </div>
                    </div>
                </div>

                <div class="col-md-7 mx-auto text-center mt-3">
                    <h3 class="mb-5">PLEASE MAKE PAYMENT FOR YOUR ORDER</h3>
                    <form role="form" action="{{ route('stripe.post') }}" method="post" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="{{ env('STRIPE_KEY') }}" id="payment-form">
                        @csrf
                        <input type="hidden" name="order_type" value="{{ $data['order_type'] }}">
                        <input type="hidden" name="phone" value="{{ $data['phone'] }}">
                        <input type="hidden" name="name" value="{{ $data['name'] }}">
                        <input type="hidden" name="email" value="{{ $data['email'] }}">
                        <input type="hidden" name="address" value="{{ $data['address'] }}">
                        <input type="hidden" name="city" value="{{ $data['city'] }}">
                        <input type="hidden" name="state" value="{{ $data['state'] }}">
                        <input type="hidden" name="zip_code" value="{{ $data['zip_code'] }}">
                        <input type="hidden" name="payment_method" value="{{ $data['payment_method'] }}">
                        <input type="hidden" name="amount" value="{{ Session::get('total_amount') }}">
                        <div class="row">
                            <div class="col-md-6">
                                <input class='form-control' placeholder="Name on Card" size='4' type='text'>
                            </div>
                            <div class='col-xs-12 col-md-6 form-group required'>
                                <input autocomplete='off' placeholder="Card Number" class='form-control card-number' size='20' type='text'>
                             </div>
                        </div>                                              
                        <div class='form-row row mt-3'>
                           <div class='col-xs-12 col-md-4 form-group cvc required'>
                              <input autocomplete='off' class='form-control card-cvc' placeholder='CVC' size='4' type='text'>
                           </div>
                           <div class='col-xs-12 col-md-4 form-group expiration required'>
                              <input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
                           </div>
                           <div class='col-xs-12 col-md-4 form-group expiration required'>
                              <input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
                           </div>
                        </div>                      
                        <div class="form-row row mt-4">
                           <div class="col-xs-12">
                              <button class="book-a-table-btn scrollto" type="submit">Pay Now</button>
                           </div>
                        </div>
                    </form>
                </div>
                
            </div>
        </div>
    </section>
    <!-- End About Section -->
</main>
<!-- End #main -->
@endsection

@section('page-scripts')
<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