@extends('user.layouts.master')

@push('css')
<style>
    .account.payment-confirm .account-wrapper{
        width: 800px;
    }
    @media only screen and (max-width: 991px){
    .account.payment-confirm .account-wrapper {
        width: 100%;
        padding: 15px
    }
    }
</style>
@endpush

@section('breadcrumb')
    @include('user.components.breadcrumb',['breadcrumbs' => [
        [
            'name'  => __("Dashboard"),
            'url'   => setRoute("user.dashboard"),
        ]
    ], 'active' => __(@$page_title)])
@endsection


@section('content')
    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Start Payment-preview
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="body-wrapper">

    <section class="checkout-section" >


        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="checkout-wrapper">
                        <div class="checkout-top-area">
                         
                            <div class="logo-area">
                                <img src="{{ get_fav($basic_settings) }}" alt="logo">
                            </div>
                            <span class="price-area">{{ get_amount($amount,$currency,3)  }}</span>
                        </div>
                       <form role="form" class="checkout-form require-validation" method="POST" action="{{ url('user/add-money/submit/payment') }}" id="payment-form" data-cc-on-file="false" data-stripe-publishable-key="{{ env('STRIPE_KEY') }}">
                            @csrf
                            <input class='form-control' type='hidden' name="amount" value="{{$amount}}">
                            <input class='form-control' type='hidden' name="currency" value="{{$currency}}">
                            <input class='form-control' type='hidden' name="token" value="{{$reference}}">      
                                    <div class='form-row row'>
                                        <div class='col-xs-12 col-md-12 form-group required'>
                                            <label class='control-label'>Name on Card</label> 
                                            <input class='form-control' size='4' type='text' name="holderName">
                                        </div>
                                    </div>
                                    <div class='form-row row'>
                                    <div class='col-xs-12 col-md-12 form-group required'>
                                        <label class='control-label'>Card Number</label> 
                                        <input autocomplete='off' class='form-control stripe-card-number' size='20' type='text' name="cardNumber">
                                    </div>                           
                                    </div>  
                                    <div class='form-row row'>
                                    <div class='col-xs-12 col-md-4 form-group cvc required'>
                                        <label class='control-label'>CVC</label> 
                                        <input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4' type='text' name="cardCVC" >
                                    </div>
                                    <div class='col-xs-12 col-md-4 form-group expiration required'>
                                        <label class='control-label'>Expiration Month</label> 
                                        <input class='form-control card-expiry-month' placeholder='MM' size='2' type='text' name="expMonth">
                                    </div>
                                    <div class='col-xs-12 col-md-4 form-group expiration required'>
                                        <label class='control-label'>Expiration Year</label> 
                                        <input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text' name="expYear">
                                    </div>
                                    </div>
                                    <div class="form-row row">
                                        <button class="btn btn--base btn-lg btn-block" type="submit">Pay Now<i class="las la-angle-right ms-1"></i></button>
                                    </div>
                        </form>
                            
                         
                             
                            </div>


                        
                           
                        
                           
                           
                           
                           
                    </div>
                </div>
            </div>
        </div>
     
        </div>
    </section>
    </div>
    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        End Payment-preview
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

@endsection


@push('script')

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>


<script type="text/javascript">

  var $form = $(".require-validation");

  $('form.require-validation').bind('submit', function(e) {

    var card = $('.stripe-card-number').val()
    if(card){
        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: $('.stripe-card-number').val(),
              cvc: $('.card-cvc').val(),
              exp_month: $('.card-expiry-month').val(),
              exp_year: $('.card-expiry-year').val()
          },ResponseHandler);
        }
    }
  });

  function ResponseHandler(status, response) {
      if (response.error) {
         $('.error').text(response.error.message);
         console.log(response.error.message);
        //   $('.error')
        //       .find('.alert')
             
      } 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>


<script src="{{ asset('public/frontend/') }}/js/card.js"></script>

@endpush