@extends('frontend.layouts.default-app')
@section('content')
<!-- cart start -->
@php 
//dd($student);
@endphp
<section class="cart_bg">
  <div class="container">
    {!! Form::open(['url' => url('iOS-subscriptions/payment'), 'method' => 'post', 'id'=>'payment_form']) !!}
    <div class="mob_ckout">
      <a href="" class="text-white mob_bk">
        <i class="fa fa-angle-double-left" aria-hidden="true"></i>
      </a>
    </div>
    <div class="row mob_main d-flex justify-content-center">
      <div class="col-md-6 col-sm-12 cart_col_right">
        <div class="card_cart_rgt">
          <div class="">
            <h4><b>Your Subscription</b></h4>
            @if($subscription)
            @if($subscription_type=='private_student')
            <div class="col-12 my-3 my-md-3">
              <p class="" style="padding:10px 0px;font-weight:600;color:inherit;">{{ $subscription->name }}
                <span class="white-space">£ {{ $subscription->amount}}</span>
              </p>
            </div>
            <div class="col-12 my-3 my-md-3">
              <div class="form-group">
                {!! Form::select('curriculum', $subscription->curriculam_lists,'', ['class' => 'form-control','placeholder'=>'Choose Exam Board','style'=>'font-size:16px']) !!}
                <small class="alert text-danger text-left error_show"
                  id="curriculum_error"></small>
              </div>
            </div>
            @else
            <input type="hidden" name="curriculum" value="{{ $student->curriculum_id}}">
            @endif

            @php
            if(Session::has('coupon_code')){
            $coupon_code = SESSION::get('coupon_code');
            }
            @endphp
            @if(!$coupon_code)
            <div class="col-12 my-3 my-md-3">
              <div class="mob_disc">
                <!-- <input type="" name="" placeholder="Enter Discount Code"> -->
                {!! Form::text('coupon_code','', ['class' => 'form-control','placeholder'=>'Enter discount code','id'=>'promo_code']) !!}
                <button type="button" class="btn btn-disc" onclick="applyCoupon()">
                  <!-- <i class="fa fa-check" aria-hidden="true"></i> -->
                  Apply
                </button>
                
              </div>
              <small class="alert text-danger text-left error_show" id="promo_code_error"></small>
            </div>
            @else
            <div class="col-12 my-3 my-md-3">
              <div class="mob_disc">
                <p class="ch_prc">Coupon discounts: <b class="text-success">{{ $coupon_code }}</b>
                  <a href="{{ url('iOS-subscriptions/remove/coupon') }}"
                    class="mb-0">
                  <i class="fa fa-times-circle"></i></a>
                  <span>-
                  &pound;{{ number_format($discount_price,2) }}</span>
                </p>
              </div>
              
            </div>
            @endif

            {!! Form::hidden('first_name', $student->fname ?? '') !!}
                {!! Form::hidden('last_name', $student->lname ?? '') !!}
                {!! Form::hidden('email', $student->user->email ?? '') !!}
                {!! Form::hidden('subscription',$subscription->id, ['id'=>'subscription']) !!}
            
            @if($total_price!=0)
            <div class="col-12 my-3 my-md-3">
              <div class="mob_card">
                <div class="d-flex justify-content-between">
                  <p>Add Card Details</p>
                  <img src="{{ asset('frontend/img/cards.png') }}" class="img-fluid" height="25"/>
                </div><br>
                <span class="payment-errors"></span>
                <script src="https://js.stripe.com/v3/"></script>
                <div class="form-group fg1">
                

                  {!! 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 class="form-group fg1" id="card-element">
                </div>
                <small class="alert text-danger text-left error_show" id="card-errors"></small>
                <div class="d-flex justify-content-between">
                  <p><strong>Total:</strong></p>
                  <p id="total_amount_sp">£ {{ $total_price }}</p>
                </div>
              </div>
            </div>
            

            <div class="form-group fg1 text-center d-flex justify-content-between">
              <p>This is a secure checkout processed by
                <img src="{{ asset('frontend/img/stripe.png') }}" class="img-fluid" height="25"/>
              </p>
              
            </div>
            @endif
            <input hidden name="intent" id="payment_intent" value="{{ $intent_key }}">
            <input hidden name="total_price" id="total_price" value="{{ $total_price }}">

            @if($coupon_code=='')
            <!-- <div class="col-12 my-3 my-md-3"><br>
              <a href="javascript:void(0)" class="mb-0 text-primary"
                id="apply_discount_text"
                onclick="$('#apply_discount').show();$('#apply_discount_text').hide()">
              Click To Use Discount Code</a>
              <div class="mb-0" id="apply_discount"
                style="display: none">
                <div class="form-group fg1 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-discount btn-primary">
                    Apply
                    </button>&nbsp;&nbsp;
                    <button type="button" class="btn 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> -->
            @else
            <!-- <p>Coupon discounts: <b class="text-success">{{ $coupon_code }}</b>
              <a href="{{ url('remove/coupon') }}"
                class="mb-0">
              <i class="fa fa-times-circle"></i></a>
              <span>-
              &pound;{{ number_format($discount_price,2) }}</span>
            </p> -->
            @endif
          </div>
          @endif
          @if($intent_key!='' && $total_price!=0)
          <!-- <h4><b>Add Card Details</b></h4>
          <div class="col-12 my-3 my-md-3">
            <span class="payment-errors"></span>
            <script src="https://js.stripe.com/v3/"></script>
            <div class="form-group fg1">
              {!! Form::text('cardholder-name', '', ['class' => 'form-control','placeholder'=>'Card Holder Name*','id'=>'cardholder-name']) !!}
              <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 text-center d-flex justify-content-between">
              <p>This is a secure checkout processed by
                <img src="{{ asset('frontend/img/stripe.png') }}" class="img-fluid" height="25"/>
              </p>
              <img src="{{ asset('frontend/img/cards.png') }}" class="img-fluid" height="25"/>
            </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> -->
          @else
          <!-- <div class="">
            <button type="submit" class="btn btn-checkout">
              <span id="total_amount_sp">£ {{ $total_price }}</span>
              <b>Pay Now&nbsp;<i class="fa fa-arrow-right"></i></b>
            </button> -->
          @endif

          <div class="">
            <button type="submit" class="btn btn-checkout">
              <span id="total_amount_sp">£ {{ $total_price }}</span>
              <b>Pay Now&nbsp;<i class="fa fa-arrow-right"></i></b>
            </button>
        </div>
      </div>
    </div>
    {!! Form::close() !!}
  </div>
</section>

<!-- cart end -->
@endsection
@push('page-css')
<style>
  @media (max-width: 767px){
    .mob_ckout {
      display: none;
  }
  .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/npm/sweetalert2@11"></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
  $("body").on("submit", "#payment_form", function (e) {
  e.preventDefault();
  $('.error').hide();
  var formData = new FormData($(this)[0]);
  @if($total_price!=0)
  $.ajax({
      url: '{{ url("iOS-subscriptions/validate") }}',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
  // data: form.serialize(),
      success: paymentSuccess,
      error: ajaxError
  });
  @else
  //proccedPayment();
  $.ajax({
      url: '{{ url("iOS-subscriptions/validater") }}',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
  // data: form.serialize(),
      success: proccedPayment,
      error: ajaxError
  });
  @endif
  });
  
  function paymentSuccess(html) {
  if (html.error === false) {
  
    @if($subscription_type=='private_student')
      Swal.fire({
          title: 'Confirm?',
          text: "Please confirm the curriculum selected!",
          icon: 'info',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Confrm'
      }).then((result) => {
          if (result.isConfirmed) {
              @if($intent_key!='' && $total_price!=0)
                  var secret = $('#payment_intent').val();
                  stripe.handleCardPayment(
                      secret, card, {
                          payment_method_data: {
                              billing_details: {name: cardholderName.value}
                          }
                      }
                  ).then(function (result) {
                      if (result.error) {
                          $('#card-errors').html(result.error.message);
                          $('#card-errors').show();
                      } else {
                          proccedPayment();
                      }
                  });
              @else
              proccedPayment();
              @endif
          }
      });
  @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) {
            setTimeout(function () {
                  window.location.href = 'iOS-subscriptions/failed';
              }, 1000);
          } else {
              setTimeout(function () {
                  window.location.href = 'iOS-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('iOS-subscriptions/apply/coupon') }}",
          type: "POST",
          dataType: "html",
          data: {
              "coupon_code": coupon_code,
              "_token": "