@extends('frontend.frontend_layout')
@section('content')
<!--Page Header Start-->
<section class="page-header">
    <div class="page-header-bg" style="background-image: url({{ asset('common/upload/donation-breadcrumb.jpg') }})">
    </div>
    <div class="container">
        <div class="page-header__inner">
            <ul class="thm-breadcrumb list-unstyled">
                <li><a href="index.html">Home</a></li>
                <li><span>/</span></li>
                <li>Payment</li>
            </ul>
            <h2>Payment</h2>
        </div>
    </div>
</section>
<!--Page Header End-->

<!--Donate One Start-->
<section class="donate-one mt-5">
    <div class="container">
        <div class="row">
            <div class="col-md-7 mx-auto text-center mt-3">
                <h3 class="mb-5">PLEASE MAKE PAYMENT FOR DONATION</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="phone" value="{{ $data['phone'] }}">
                    <input type="hidden" name="name" value="{{ $data['name'] }}">
                    <input type="hidden" name="email" value="{{ $data['email'] }}">
                    <input type="hidden" name="payment_method" value="{{ $data['payment_method'] }}">
                    <input type="hidden" name="message" value="{{ $data['message'] }}">
                    <input type="hidden" name="amount" value="{{ $data['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="btn btn-success" type="submit">Pay Now</button>
                        </div>
                    </div>
                </form>
            </div>                
        </div>
    </div>
</section>
    <!-- End About Section -->
@endsection

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