@extends('dashboard.layouts.default')
@section('content')
<section class="top-section checkout">
  <div class="container">
  {!! Form::open(['url' => url('subscriptions/payment'), 'method' => 'post', 'id'=>'payment_form']) !!}
<div class="row justify-content-center mt-5">
      <div class="col-md-6">
        <div class="card shadow h-100">
          <div class="card-body">
            <img  src="{{ url('frontend/img/logo.png') }}" class="img-fluid" width="220px">
						<hr>
            <h3 class="fw-bold" id="totalamount">£ {{ $subscription->amount }}  @if($subscription->user_type == 'private student') per {{$subscription_duration }} @endif</h3>
            @if($subscription->user_type == 'private student')<h5>Join our online group tuition with KayScience video access</h5> @endif
           @if($subscription->user_type == 'student') 
           <ul>
              <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">Our grade 8-9 money back guarantee</li>
              <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">Unlimited videos for your specification</li>
              <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">Download the KayScience Android and iPhone app</li>
              <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">1000s of self marking questions</li>
              <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">Access to all our exam practice booklets and past papers</li>
              <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">KayScience is cheaper than one private tuition season!</li>
            </ul>
            @else
            <ul>
              <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">Minimum of 4 online live tuition sessions per week</li>
              <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">Biology, chemistry, physics and maths tuition</li>
              <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">Delivered by expert and experienced teachers with a track record of success</li>
              <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">850+ videos with exam practice booklets and quizzes</li>
            </ul>
            @endif
            <h6 class="fw-semibold text-center">KayScience <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> | <a href="{{ url('frontend/KayScience Terms and Conditions and Privacy Policy V1.3.pdf') }}" target="_blank" style="text-decoration: underline">Privacy Notice</a></h5>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card shadow h-100">
          <div class="card-body">
            <div class="row">
              <div class="col-md-12">
                <div class="form-control mb-1" >
                {!! Form::hidden('first_name', $student->fname ?? '') !!}
                  {!! Form::hidden('last_name', $student->lname ?? '') !!}
                  {!! Form::hidden('email', $student->user->email ?? '') !!}
                    Email: {{$student->user->email}}
                </div>
                <div class="form-control mb-1">
                  <div class="ch_prc d-flex justify-content-between itemtext align-items-center">
										<span class="d-flex align-items-center">
										<b><span class="tooltip" style="display:none">0</span>&nbsp;&nbsp;{{$subscription->name}}:</b></span>
										<span><b>£ {{ $subscription->amount }}</b></span>
									</div>          
                </div>
                @if(!isset($price_id))
								<div class="row g-1 align-items-center mb-1">
									<div class="col">
										{!! Form::text('coupon_code','', ['class' => 'form-control border_field','placeholder'=>'Discount code','id'=>'promo_code']) !!}
										{!! Form::hidden('subscription',$subscription->id, ['id'=>'subscription']) !!}
									</div>
									<div class="col-auto">
										<button type="button" onclick="applyCoupon()" class="btn btn-primary btn-sm float-end">Apply code</button>
									</div>
								</div>
                @endif
								<small class="alert text-danger text-left error_show" id="promo_code_error"></small>
              </div>
							@if($subscription)
							@if($subscription_type=='private_student')
							<div class="col-12 my-3 my-md-3 px-0" hidden>
								<p class="ch_prc">Student name
									<span>{{ $student->fname.' '.$student->lname }}</span>
								</p>
							</div>
                            @else
                            <input type="hidden" name="curriculum" value="{{ $student->curriculum_id}}">
							@endif
							<div class="col-12 my-3 my-md-3 px-0" hidden>
								<p class="ch_prc d-flex justify-content-between">{{ $subscription->name }}
									<span >£ {{ $subscription->amount}}</span>
								</p>
							</div>
							<div id="coupon_cards" style="display:none">
								<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>
										<small class="alert text-danger text-left error_show"
											id="promo_code_error"></small>
									</div>
								</div>
							</div>
							<div class="col-md-12" id="applied_coupon_card" style="display:none">
								<p class="ch_prc d-flex justify-content-between">Coupon discounts: <b style="font-size: 14px !important;" 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 style="font-size: 14px !important;">-
									&pound; {{ number_format($discount_price,2) }}</span>
								</p>
							</div>
							<div class="col-md-12">
								<div class="form-control mb-1">
									<span class="ch_prc d-flex justify-content-between itemtext align-items-center">
										<b>Total:</b><span><h5 class="mb-0" id="total_amount_sp">£ {{ $total_price}}</h5> 
										<input type="hidden" id="grandprice" name="grandprice" value="{{ $total_price }}">           
									</span>     
								</div>
							</div>
							</div>
							@endif
							<div class="card" style="background: #f4f4f4;">
								<div class="card-body">
									<span class="payment-errors"></span>
									<script src="https://js.stripe.com/v3/"></script>
									<div class="row g-1 cardinfo justify-content-center">
										<div class="col-md-12"><h5>Card Information</h5></div>
										<div class="col-md-12"> 
											{!! Form::text('cardholder-name', '', ['class' => 'form-control','placeholder'=>'Name on card','id'=>'cardholder-name']) !!}
										</div>
										<div class="col-md-12"><div class="form-control py-0" id="card-element-number"></div></div>
										<div class="col-md-12">
											<div class="row g-1">
												<div class="col-md-8"><div class="form-control py-0" id="card-element-expiry"></div></div>
												<div class="col-md-4"><div class="form-control py-0" id="card-element-cvc"></div></div>
											</div>
										</div>
										<div class="col-md-12"><div class="form-control py-0" id="card-element-postcode"></div></div>
									</div>
								</div>
							</div>
							<small class="alert text-danger text-center error_show" id="card-errors"></small>
							<input hidden name="intent" id="payment_intent" value="{{ $intent_key }}">
              @if(isset($price_id))
                            <input type="hidden" name="price_id" id="price_id" value="{{ $price_id }}" />
              @endif              
                            @if(isset($subscription_id))
                            <button type="submit" class="subscribeinfo btn btn-pay w-100">Subscribe</button>
                            @else
							<button type="submit" class="cardinfo btn btn-pay w-100">Pay Now</button>
							<button type="submit" class="confirmbutton btn btn-pay w-100 mt-2" style="display: none;">Confirm</button>
							@endif
                            <div class="text-center pt-3">
								<p style="font-size: 12px !important;">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>
						<!--  <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>
				</div>
			</div>
    </div>
    {!! Form::close() !!}
  </div>
</section>
<!-- cart end -->
@endsection
@push('page-scripts')
<script>
   {{-- @if($intent_key!='' && $total_price!=0) --}}
  var stripe = Stripe('{{ config('services.stripe.key') }}');
  var displayError = $('#card-errors');
  @if(isset($client_secret))
  const options = {
    clientSecret: '{{$client_secret}}',
  };
  var elements = stripe.elements(options);
  @else
  var elements = stripe.elements();
  @endif
  var style = {
  base: {
      color: '#555',
      lineHeight: '35px',
      fontFamily: 'inherit',
      fontSmoothing: 'antialiased',
      fontSize: '15px',
      '::placeholder': {
          color: '#aaa'
      },
  },
  invalid: {
      color: '#fa755a',
      iconColor: '#fa755a'
  }
  };
  var elementClasses = {
    focus: 'focused',
    empty: 'empty',
    invalid: 'invalid',
  };
  var cardNumber = elements.create('cardNumber', {
    style: style,
    classes: elementClasses,
    showIcon: true,
    placeholder: 'Card number',
  });
  cardNumber.mount('#card-element-number');
  cardNumber.addEventListener('change', function (event) {
  if (event.error) {
      displayError.html(event.error.message)
  } else {
      displayError.html('');
  }
  });
  var cardExpiry = elements.create('cardExpiry', {
    style: style,
    classes: elementClasses,
    placeholder: 'MM / YY',
  });
  cardExpiry.mount('#card-element-expiry');
  cardExpiry.addEventListener('change', function (event) {
  if (event.error) {
      displayError.html(event.error.message)
  } else {
      displayError.html('');
  }
  });
  var cardCvc = elements.create('cardCvc', {
    style: style,
    classes: elementClasses,
    placeholder: 'CVC',
  });
  cardCvc.mount('#card-element-cvc');
  cardCvc.addEventListener('change', function (event) {
  if (event.error) {
      displayError.html(event.error.message)
  } else {
      displayError.html('');
  }
  });
  var cardpostalCode = elements.create('postalCode', {
    style: style,
    classes: elementClasses,
    placeholder: 'Post code',
  });
  cardpostalCode.mount('#card-element-postcode');
  cardpostalCode.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 --}}


// $(document).ready(function() {
//    $("#form").validate();
// });

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


            },
            messages: {
                //curriculum: {
                  //  required: "Please choose Exam Board",
                //},
                'cardholder-name': {
                    required: "Please enter cardholder name",
                    
                }
                
            },
            submitHandler: function (formData, e) {
              e.preventDefault();
              var formData = new FormData($('#payment_form')[0]);
              $.ajax({
                  url: "{{ url('subscriptions/validate') }}",
                  type: 'POST',
                  data: formData,
                  processData: false,
                  contentType: false,
              // data: form.serialize(),
                  success: paymentSuccess,
                  error: ajaxError
              });
             // $('.subscribeinfo').prop('disabled', true);
              return false;
              // var form = $("#payment_form");
              //   form.submit();
                // $.ajax({
                //     url: "{{ url ('subscriptions/payment') }}",
                //     type: 'POST',
                //     data: $("#schoolForm").serialize(),
                //     dataType: "json",
                //     cache: false,

                // })
                //     .done(function (data) {
                //         if (data.flagError == true) {
                //             swal("Error", data.message, "error");
                //         } else {
                //             document.getElementById('schoolForm').reset();
                //             $('#school-log-modal').modal('hide');
                //             swal(data.title, data.message, "success");
                //         }
                //     });
            }
        });




  // $("body").on("submit", "#payment_form", function (e) {
  // e.preventDefault();
  // $('.error').hide();
  // var formData = new FormData($(this)[0]);
  // $.ajax({
  //     url: '{{ url('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);   
  var cardholderName = $('#cardholder-name').val();
  if (html.error === false) {
         @if($intent_key!='' && $total_price!=0)
         if(intent_key !='')
         {
     var secret = $('#payment_intent').val();
     stripe.handleCardPayment(
         secret, cardNumber, {
             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");
  var paymentAmount = $('#grandprice').val();    
  if(parseFloat(paymentAmount) > 0) 
  {
  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 = '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('apply/coupon') }}",
          type: "POST",
          dataType: "html",
          data: {
              "coupon_code": coupon_code,
              "_token": "