@extends('layout.default')
@section('content')
<!-- cart start -->
<section class="cart_bg">
  <div class="container">
    {!! Form::open(['url' => url('tutor/subscriptions/payment'), 'method' => 'post', 'id'=>'payment_form']) !!}
    <div class="row d-flex justify-content-center flex-wrap">
      @include('layout.left-ads')
      <!-- <div class="col-md-4 col-sm-12 cart_col_right">
        <div class="card_cart_rgt">
            <div class="check_out_card">
                <h4><b>Billing Details</b></h4>
                <div class="row">
                    <div class="form-group fg1 col-sm-6">
                        {!! Form::text('first_name', $tutor->fname ?? '', ['class' => 'form-control','placeholder'=>'First Name*']) !!}
                        <small class="alert text-danger text-left error_show" id="first_name_error"></small>
                    </div>
                    <div class="form-group fg1 col-sm-6">
                        {!! Form::text('last_name', $tutor->lname ?? '', ['class' => 'form-control','placeholder'=>'Last Name']) !!}
                        <small class="alert text-danger text-left error_show" id="last_name_error"></small>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group fg1 col-sm-12">
                        {!! Form::text('address1', $tutor->address1 ?? '', ['class' => 'form-control','placeholder'=>'Address*']) !!}
                        <small class="alert text-danger text-left error_show" style="display:none"
                               id="address1_error"></small>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group fg1 col-sm-6">
                        {!! Form::text('city', $tutor->city ?? '', ['class' => 'form-control','placeholder'=>'City/Town*']) !!}
                        <small class="alert text-danger text-left error_show" id="city_error"></small>
                    </div>
                    <div class="form-group fg1 col-sm-6">
                        {!! Form::text('county', $tutor->county ?? '', ['class' => 'form-control','placeholder'=>'County*']) !!}
                        <small class="alert text-danger text-left error_show" id="county_error"></small>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group fg1 col-sm-6">
                        {!! Form::text('postcode', $tutor->postcode ?? '', ['class' => 'form-control','placeholder'=>'Postcode*']) !!}
                        <small class="alert text-danger text-left error_show" id="postcode_error"></small>
                    </div>
                    <div class="form-group fg1 col-sm-6">
                        {!! Form::select('country', ['United Kingdom'=>'United Kingdom'],'United Kingdom', ['class' => 'form-control']) !!}
                        <small class="alert text-danger text-left error_show" id="country_error"></small>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group fg1 col-sm-4">
                        {!! Form::text('phone', $tutor->phone ?? '', ['class' => 'form-control','placeholder'=>'Telephone']) !!}
                        <small class="alert text-danger text-left error_show" id="phone_error"></small>
                    </div>
                    <div class="form-group fg1 col-sm-8">
                        {!! Form::email('email', $tutor->email ?? '', ['class' => 'form-control','placeholder'=>'Email*']) !!}
                        <small class="alert text-danger text-left error_show" id="email_error"></small>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group fg1 col-sm-12">
        
                        {!! Form::checkbox('agree', 1, null,  ['id' => 'agree']) !!}
                        Please view our <a
                            href="https://app.termly.io/document/terms-of-use-for-website/e3d75291-8adc-4cfb-91a4-546f6fa5e51e"
                            target="_blank" style="text-decoration: underline">Terms and Conditions</a>
                        and/or <a href="{{ url('faq') }}"
                                  target="_blank" style="text-decoration: underline">FAQ</a>
                        before making a purchase
        
                        <small class="alert text-danger text-left error_show"
                               style="width:100%;display: block" id="agree_error"></small>
                    </div>
                </div>
            </div>
        </div>
        </div> -->
      <div class="col-md-6 col-sm-12 cart_col_right">
        <div class="card_cart_rgt">
          <div class="check_out_card">
            <h4><b>Achieve grades 9-8 or your money back when you sign up to a 12 month KayScience subscription:</b></h4>
            <ul>
              <li><i class="fa fa-check" aria-hidden="true"></i>800+ Biology, Chemistry & Physics videos</li>
              <li><i class="fa fa-check" aria-hidden="true"></i>An app to use on any device</li>
              <li><i class="fa fa-check" aria-hidden="true"></i>1000s of self-marking quiz questions</li>
              <li><i class="fa fa-check" aria-hidden="true"></i>Exam-question booklets for every topic</li>
              <li><i class="fa fa-check" aria-hidden="true"></i>Exam-questions & answers in every video</li>
              <li><i class="fa fa-check" aria-hidden="true"></i>Physics formula practice to get exam ready</li>
            </ul>
            <div class="text-center">
              <h4><b>12 month subscription cheaper than one tuition session!<!--<br>contact us at <a href="mailto:info@kayscience.com">info@kayscience.com</a>--></b>
              </h4>
              <div class="row d-flex justify-content-center mt-8 mb-5">
                <div class="col-md-8"> 
                  <div class="form-control">
                  {!! Form::hidden('first_name', $tutor->fname ?? '') !!}
                  {!! Form::hidden('last_name', $tutor->lname ?? '') !!}
                  {!! Form::hidden('email', $tutor->email ?? '') !!}
                    Email: <b>{{$tutor->email}}</b>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <!-- <div class="form-group fg1 col-sm-12">
                {!! Form::checkbox('agree', 1, null,  ['id' => 'agree']) !!}
                Please view our <a
                  href="https://app.termly.io/document/terms-of-use-for-website/e3d75291-8adc-4cfb-91a4-546f6fa5e51e"
                  target="_blank" style="text-decoration: underline">Terms and Conditions</a>
                and/or <a href="{{ url('faq') }}"
                  target="_blank" style="text-decoration: underline">FAQ</a>
                before making a purchase
                <small class="alert text-danger text-left error_show"
                  style="width:100%;display: block" id="agree_error"></small>
              </div> -->
              <div class="col-sm-12 terms">
                Please view and agree to our <a href="https://app.termly.io/document/terms-of-use-for-website/e3d75291-8adc-4cfb-91a4-546f6fa5e51e"
                  target="_blank" style="text-decoration: underline">Terms & Conditions</a>
                before making a purchase
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-sm-12 cart_col_right">
        <div class="card_cart_rgt">
          <div class="check_out_card">
            <h4><b>Your Subscription</b></h4>
            @if($subscription)
            @if($subscription_type=='student')
            <div class="col-12 my-3 my-md-3 px-0">
              <p class="ch_prc">Student name
                <span>{{ $studentDt->fname.' '.$studentDt->lname }}</span>
              </p>
            </div>
            @endif
            <div class="col-12 my-3 my-md-3 px-0">
              <p class="ch_prc d-flex justify-content-between">{{ $subscription->name }}
                <span >£ {{ $subscription->amount}}</span>
              </p>
            </div>
            <div id="coupon_card" @if($coupon_code!='') style="display:none" @endif>
            <div class="col-12 my-3 my-md-3 px-0 mb-0">
              <div class="my-5" id="apply_discount_text">
                <a href="javascript:void(0)" class="my-3 text-primary" onclick="$('#apply_discount').show();$('#apply_discount_text').hide()">
                Click To Use Discount Code</a>
              </div>
              <div id="apply_discount"
                style="display: none">
                <div class="form-group fg1 mt-0 mb-1 row d-flex align-items-end">
                  <div class="col-sm-8">
                    {!! Form::text('coupon_code','', ['class' => 'form-control','placeholder'=>'Enter discount code','id'=>'promo_code']) !!}
                    {!! Form::hidden('subscription',$subscription->id, ['id'=>'subscription']) !!}
                  </div>
                  <div class="col-sm-4">
                    <button type="button" onclick="applyCoupon()"
                      class="btn btn-sm btn-discount btn-primary">
                    Apply
                    </button>
                    <button type="button" class="btn btn-sm btn-discount btn-danger ml-2"
                      onclick="$('#apply_discount_text').show();$('#apply_discount').hide()">
                    Cancel
                    </button>
                  </div>
                </div>
                <small class="alert text-danger text-left error_show"
                  id="promo_code_error"></small>
              </div>
            </div>
          </div>
          <div id="applied_coupon_card" @if($coupon_code=='') style="display:none" @endif>
          <p class="ch_prc d-flex justify-content-between">Coupon discounts: <b class="text-success">{{ $coupon_code }}</b>
            <a href="javascript:void(0)" onclick="removeCoupon()"
              class="mb-0">
            <i class="fa fa-times-circle"></i></a>
            <span>-
            &pound; {{ number_format($discount_price,2) }}</span>
          </p>
        </div>
        <!-- <div id="coupon_card">
          <p class="ch_prc">Coupon discounts: <b class="text-success">{{ $coupon_code }}</b>
              <a href="javascript:void(0)" onclick="removeCoupon()"
                 class="mb-0">
                  <i class="fa fa-times-circle"></i></a>
              <span>-
                  &pound;{{ number_format($discount_price,2) }}</span></p>
          </div> -->
      </div>
      <hr>
      <h4 class="ch_prc"><b>Total:
        <span id="total_amount_sp">£ {{ $total_price }}</span>
        </b>
      </h4>
      @endif
      <hr/>
      <div id="card_section" @if($intent_key=='' && $total_price==0) style="display:none;" @endif>
      <h4><b>Add Card Details</b></h4>
      <div class="col-12 mt-3 mt-md-3 px-0">
        <span class="payment-errors"></span>
        <script src="https://js.stripe.com/v3/"></script>
        <div class="form-group fg1">
          <div id="cardholder">
            {!! Form::text('cardholder-name', '', ['class' => 'form-control','placeholder'=>'Card Holder Name*','id'=>'cardholder-name']) !!}
          </div>
          <small class="alert text-danger text-left error_show"
            id="cardholder-name_error"></small>
        </div>
        <div class="form-group fg1" id="card-element">
        </div>
        <div class="form-group fg1 d-flex justify-content-between text-center">
          <p>This is a secure checkout processed by
            <img src="{{ asset('frontend/img/stripe.png') }}" class="img-fluid" style="height: 25px;"/>
          </p>
          <img src="{{ asset('frontend/img/cards.png') }}" style="height: 25px;"/>
        </div>
        <small class="alert text-danger text-left error_show" id="card-errors"></small>
        <input hidden name="intent" id="payment_intent" value="{{ $intent_key }}">
        <button type="submit" class="btn btn-checkout"><b>Pay Now</b></button>
      </div>
    </div>
    <div id="pay_now" @if($intent_key!='' && $total_price!=0) style="display:none;" @endif>
    <button type="submit" class="btn btn-checkout"><b>Pay Now</b></button>
  </div>
  <!-- <button type="submit" class="btn btn-checkout">Pay Now</button> -->
  </div>
  </div>
  @include('layout.right-ads')
  </div>
  {!! Form::close() !!}
  </div>
</section>
<!-- cart end -->
@endsection
@push('page-css')
<link href="{{ url('css/tutor.style.css')}}" rel="stylesheet" type="text/css"/>
<style>
  .error_show {
  display: none;
  }
  .StripeElement {
  background-color: white;
  width: 100%;
  margin-top: 10px;
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  }
  .StripeElement--focus {
  box-shadow: 0;
  }
  .StripeElement--invalid {
  border-color: #fa755a;
  }
  .StripeElement--webkit-autofill {
  background-color: #ffffff !important;
  }
  .ElementsApp .InputElement::-webkit-input-placeholder {
  / Edge / color: #495057;
  }
  .ElementsApp .InputElement:-ms-input-placeholder {
  / Internet Explorer / color: #495057;
  }
  .ElementsApp .InputElement::placeholder {
  color: #495057;
  }
  .card_cart_rgt .btn-checkout {
  background-color: #449d44;
  }
</style>
@endpush
@push('page-scripts')
<script src="//cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script>
  {{-- @if($intent_key!='' && $total_price!=0) --}}
  var stripe = Stripe('{{ config('services.stripe.key') }}');
  var displayError = $('#card-errors');
  var elements = stripe.elements();
  var style = {
  base: {
      color: '#555',
      lineHeight: '45px',
      fontFamily: 'inherit',
      fontSmoothing: 'antialiased',
      fontSize: '15px',
      '::placeholder': {
          color: '#aaa'
      },
  },
  invalid: {
      color: '#fa755a',
      iconColor: '#fa755a'
  }
  };
  
  var card = elements.create('card', {style: style});
  card.mount('#card-element');
  
  card.addEventListener('change', function (event) {
  if (event.error) {
      displayError.html(event.error.message)
  } else {
      displayError.html('');
  }
  });
  
  var cardholderName = document.getElementById('cardholder-name');
  var cardButton = document.getElementById('card-button');
  {{-- @endif --}}

  $("#payment_form").validate({
            rules: {
                
               
                'cardholder-name': "required",


            },
            messages: {
              
                'cardholder-name': {
                    required: "Please enter cardholder name",
                    
                }
                
            },
            submitHandler: function (formData, e) {
              e.preventDefault();
              var formData = new FormData($('#payment_form')[0]);
              $.ajax({
                  url: "{{ url('tutor/subscriptions/validate') }}",
                  type: 'POST',
                  data: formData,
                  processData: false,
                  contentType: false,
              // data: form.serialize(),
                  success: paymentSuccess,
                  error: ajaxError
              });
              return false;
            }
        });

  // $("body").on("submit", "#payment_form", function (e) {
  // e.preventDefault();
  // $('.error').hide();
  // var formData = new FormData($(this)[0]);
  // $.ajax({
  //     url: '{{ url('tutor/subscriptions/validate') }}',
  //     type: 'POST',
  //     data: formData,
  //     processData: false,
  //     contentType: false,
  // // data: form.serialize(),
  //     success: paymentSuccess,
  //     error: ajaxError
  // });
  // });
  
  function paymentSuccess(html) {
  var intent_key = $('body').find('#payment_intent').val();
  console.log('intent:'+intent_key);
  if (html.error === false) {
          @if($intent_key!='' && $total_price!=0)
          if(intent_key !='')
          {
      var secret = $('#payment_intent').val();
      console.log('intent:'+secret);
      stripe.handleCardPayment(
          secret, card, {
              payment_method_data: {
                  billing_details: {name: cardholderName}
              }
          }
      ).then(function (result) {
          if (result.error) {
              $('#card-errors').html(result.error.message);
              $('#card-errors').show();
          } else {
              proccedPayment();
          }
      });
  }else{
      proccedPayment();
  }
      @else
      proccedPayment();
      @endif
  }
  }
  
  function proccedPayment() {
  var paymentForms = $("#payment_form");
  Swal.fire({
      icon: 'info',
      width: 600,
      padding: '3em',
      title: 'After Payment Page will automatically redirect. Don\'t refresh the page...',
      showConfirmButton: false
  })
  $.ajax({
      url: paymentForms.attr('action'),
      type: paymentForms.attr('method'),
      data: paymentForms.serialize(),
      dataType: "html"
  })
      .done(function (a) {
          var data = JSON.parse(a);
          if (data.flagError == true) {
          } else {
              setTimeout(function () {
                  window.location.href = "{{ url('tutor/subscriptions/thank-you') }}";
              }, 1000);
          }
      });
  }
  
  function ajaxError(html) {
  var msg;
  if (html.status === 422) {
      var errors = html.responseJSON.errors;
      var i = 1;
      $.each(errors, function (key, value) {
          $("input[name=" + key + "]").addClass('is-invalid');
          var id = "#" + key + "_error";
          $(id).html(value);
          $(id).show();
      });
      $(".form-control").keyup(function () {
          $(this).closest(".error").hide();
      });
      msg = "Sorry, looks like there are some errors detected, please try again.";
  } else if (html.status === 403) {
      msg = "User not authorised";
  } else {
      msg = "Some thing went wrong, Please try Again";
  }
  showAlert(msg, "error");
  }
  
  function applyCoupon() {
  $('.error_show').hide();
  var coupon_code = $("#promo_code").val();
  if (coupon_code != '') {
      $.ajax({
          url: "{{ url('tutor/apply/coupon') }}",
          type: "POST",
          dataType: "html",
          data: {
              "coupon_code": coupon_code,
              "_token": "