@extends('layout.default')
@section('content')
@section('styles')
<link href="{{ url('css/student.style.css')}}" rel="stylesheet" type="text/css"/>
<style>
  .StripeElement {
  background-color: white;
  width: 100%;
  height: 38px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid #ced4da;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  color: #495057;
  margin-top: 10px;
  }
  .StripeElement--focus {
  box-shadow: 0 1px 3px 0 #ccc;
  }
  .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;
  }
</style>
@endsection
<!-- cart start -->
<section class="cart_bg ">
  <div class="container">
    <div class="row">
      <div class="col-12 cart_col_left">
        <h4>Your Subscription</h4>
        <div class="row cart_inner_row">
          <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-xs-12 cart_inner_left">
            <img src="{{ asset('frontend/img/banner-image.png') }}" class="img-responsive" alt="course img">
          </div>
          <div class="col-xl-5 col-lg-5 col-md-8 col-sm-12 col-xs-12 cart_inner_ceter">
            <h4>Advanced</h4>
            <p>High quality, personalised support that is more effective than private tutoring...</p>
          </div>
          <!--    <div class="col-xl-2 col-lg-2 col-md-6 col-sm-12 col-xs-12 cart_inner_price">
            <a href="" class="cart_link_btn">Remove</a>
            <a href="" class="cart_link_btn">Save for Later</a>
            </div> -->
          <div class="col-xl-2 col-lg-2 col-md-6 col-sm-12 col-xs-12 cart_inner_btn">
            <p class="color_p">&#163;{{$subscription->price}}</p>
            <!-- <p class="color_dull"><s>&#163;12,160</s></p> -->
          </div>
        </div>
      </div>
      <div class="col-md-6 col-sm-12 col-xs-12 cart_col_right">
        <div class="card_cart_rgt">
          <hr>
          <div class="check_out_card">
            <h4><b>Summary</b></h4>
            @if($subscription)
            <p class="ch_prc">Original price:<span>£ {{ $subscription->price}}</span></p>
            <hr>
            @if($coupons)
            @if($coupon_code=='')
            <div class="col-12 my-3 my-md-3">
              <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">
                {!! Form::open(['url' => url('school/apply/coupon'), 'method' => 'POST','id'=>'discount-form']) !!}
                <div class="form-group row">
                  <div class="col-sm-7">
                    {!! Form::text('coupon_code','', ['class' => 'form-control','placeholder'=>'Enter discount code','id'=>'promo_code_text','required']) !!}
                  </div>
                  <button type="submit" class="btn btn-discount btn-xs btn-primary">
                  Apply
                  </button>
                  <button type="button" class="btn btn-discount btn-danger ml-2"
                    onclick="$('#apply_discount_text').show();$('#apply_discount').hide()">
                  Cancel
                  </button>
                  <small class="alert text-danger text-left"
                    id="promo_code_error"></small>
                </div>
                {!! Form::close() !!}
                <hr>
                @if(count($coupons)>0)
                <h5><b>Available Coupons</b></h5>
                <ul style="list-style-type: circle">
                  @foreach($coupons as $coupon)
                  <li>
                    <p>
                      <button
                        class="btn btn-info btn-sm coupon_btn float-right"
                        onclick="$('#promo_code_text').val('{{ $coupon->coupon_code }}');$('#discount-form').submit()"
                        type="button">USE
                      </button>
                      Code : <b>{{$coupon->coupon_code}}</b> <br>
                      @if( ($coupon->discount != null) || ($coupon->discount != '') )
                      Get Up To {{$coupon->discount}} % Off from amount.
                      @else
                      Get £ {{$coupon->amount}} deduct from amount.
                      @endif
                    </p>
                  </li>
                  <hr>
                  @endforeach
                </ul>
                @endif
              </div>
            </div>
            @else
            <h4 class="d-flex justify-content-between ch_prc">
              <b>Coupon discounts: {{ $coupon_code }}
              <a href="{{ url('school/remove/coupon') }}"
                class="mb-0">
              <i class="fa fa-times-circle"></i></a></b>
              <span><b>-
              &pound;{{ number_format($discount_price,2) }}</b></span>
            </h4>
            @endif
          </div>
          @endif
          <hr>
          <h4 class="ch_prc"><b>Total:
            <span id="total_amount_sp">£ {{ $total_price }}</span>
            </b>
          </h4>
          <small>KayScience is required by law to collect applicable transaction
          taxes for purchases made in certain tax jurisdictions.
          <br>
          By completing your purchase you agree to these Terms of Service.</small>
          @endif
        </div>
      </div>
      <div class="col-md-6 col-sm-12 col-xs-12 cart_col_right">
        <div class="card_cart_rgt">
          <hr>
          <div class="check_out_card">
            <h4><b>Add Card Details</b></h4>
            {!! Form::open(['url' => url('school/subscriptions/payment'), 'method' => 'post', 'id'=>'payment_form']) !!}
            <div class="col-12 my-3 my-md-3">
              <span class="payment-errors"></span>
              <script src="https://js.stripe.com/v3/"></script>
              <input class="form-control" name="cardholder-name"
                id="cardholder-name" placeholder="Card Holder Name" required>
              <div id="card-element">
              </div>
              <small class="alert text-danger text-left" id="card-errors"></small><br/>
              <input hidden name="intent" id="payment_intent" value="{{ $intent_key }}">
              <button type="submit" class="btn btn-checkout">Pay Now</button>
            </div>
            {!! Form::close() !!}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- cart end -->
@endsection
@section('scripts')
<script>
  var stripe = Stripe('{{ config('services.stripe.key') }}');
  var displayError = $('#card-errors');
  var elements = stripe.elements();
  var style = {
      base: {
          color: '#495057',
          lineHeight: '38px',
          fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
          fontSmoothing: 'antialiased',
          fontSize: '16px',
          '::placeholder': {
              color: '#6a6b6b'
          }
      },
      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');
  
  $("body").on("submit", "#discount-form", function (e) {
      e.preventDefault();
      var forms = $("#discount-form");
      $.ajax({
          url: forms.attr('action'),
          type: forms.attr('method'),
          data: forms.serialize(),
          dataType: "html"
      })
          .done(function (a) {
              var data = JSON.parse(a);
              if (data.flagError == true) {
                  formValidate.showErrors(data.errors);
                  showAlert(data.message, "error");
              } else {
                  showAlert(data.message, "success");
                  setTimeout(function () {
                      location.reload();
                  }, 500);
              }
          });
  });
  
  $("body").on("submit", "#payment_form", function (e) {
      e.preventDefault();
      var paymentForms = $("#payment_form");
      var secret = $('#payment_intent').val();
      stripe.handleCardPayment(
          secret, card, {
              payment_method_data: {
                  billing_details: {name: cardholderName.value}
              }
          }
      ).then(function (result) {
          if (result.error) {
              displayError.html(result.error.message);
          } else {
              showAlert("After Payment Page will automatically redirect. Don't refresh the page...", "info");
              $.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) {
                          formValidate.showErrors(data.errors);
                          showAlert(data.message, "error");
                      } else {
                          showAlert(data.message, "success");
                          setTimeout(function () {
                              window.location.href = 'thank-you';
                          }, 1000);
                      }
                  });
  
          }
      });
  });
</script>
@endsection