@extends('dashboard.layouts.default')
@section('content')
<section class="top-section checkout">
  <div class="container">
    {!! Form::open(['url' => url('tutor/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 }}</h3>
            <h5>Annual Subscription</h5>
            <ul>
             <!-- <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">Add one student/tutee for free</li> -->
              <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">Set your tutees trackable homework</li>
              <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">Unlimited videos from OCR, AQA, Edexcel specifications</li>
              <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">Retrieval Quiz maker</li>
              <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">Access to all our exam pratice booklets</li>
              <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">Add additional tutees for £19.99</li>
              <li><img src="{{ url('frontend/img/payment_logo.png') }}" class="img-fluid me-2" width="20px">Reduce your workload</li>
            </ul>
            <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', $tutor->fname ?? '') !!}
                  {!! Form::hidden('last_name', $tutor->lname ?? '') !!}
                  {!! Form::hidden('email', $tutor->email ?? '') !!}
                  Email: {{$tutor->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">
                                        @if($subscription_type!='student')   
                                        <i class="bx bxs-info-circle text-primary" data-bs-toggle="tooltip" data-bs-title="{{$subscription->details}}" id="{{$subscription->details}}" data-bs-html="true" data-bs-placement="left" data-bs-custom-class="custom-tooltip"></i>
                                        @endif
										<b><span class="tooltip" style="display:none">0</span>&nbsp;&nbsp;{{$subscription->name}}:</b></span>
										<span><b>£ {{ $subscription->amount }}</b></span>
									</div>          
                </div>
								<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>
								<small class="alert text-danger text-left error_show" id="promo_code_error"></small>
              </div>
							@if($subscription)
							@if($subscription_type=='student')
							<div class="col-12 my-3 my-md-3 px-0" hidden>
								<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" 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 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 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 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>
							@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 }}">
							<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>
							<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>
  $(function() {
  $("#payment_form").submit(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
   });
  });
  });
  
  {{-- @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: '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 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');
  console.log(cardholderName);
  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,
                 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);   
  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 = "{{ 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": "