@extends('layouts.layout-auth')

@section('content')
<!-- Page Top Search / START -->
<div class="container-fluid top-status-bar bottom-shadow">
  <div class="scti-container-in">
    <div class="secure-note">100% SECURE</div>
  </div>
</div>
<!-- Page Top Search / END -->
<div class="scti-container-in top-bot-spacer-40" ng-controller="cartController" data-ng-init="loadCart()">
  <div class="your-cart-header"> <a href="{{ route('frontend.shop.cart') }}" class="status-cart-in"><span class="tag-pill-cart3" ng-cloak>0<% cartCount %></span></a>
    <h2>Your Cart <span ng-cloak>( <% cartCount %> items )</span></h2>
  </div>
  <div class="cart-det-wrap">
    <div id="cart-det">
      <div class="cardtype-course-list no-margin">
        <table class="table table-responsive">
          <thead class="th-bg-cart">
            <tr>
              <th width="74%" colspan="1" class="boarder-r2">Course Name</th>
              <th width="10%" class="boarder-r2">Qty</th>
              <th width="16%" class="boarder-r3">Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="item in cartItems">
                <!--<td width="10%">
                    <div class="empprof-wrap">
                        <div class="empprof">
                          <img ng-if="item.course_image" ng-src="{{ asset('uploads/medias') }}/<% item.course_image_entity_type %>/<% item.course_image_entity_id %>/thumbs/<% item.course_image %>" alt="" class="img-responsive">
                          <img ng-if="!item.course_image" ng-src="{{ asset('images/thumb-noimage.jpeg') }}" alt="" class="img-responsive">
                        </div>
                    </div>
                </td>-->
                <td width="64%" class="boarder-r">
                    <div class="c-booked-hd" ng-cloak>
                        <% item.name %><br>
                        <span><% item.county %> | (<% item.start_date %>)
                        <!--<select id="" class="selectpicker selectlocation" title="">
                            <option data-tokens="first">06-06-2017</option>
                            <option>18-07-2017</option>
                            <option>22-08-2017</option>
                            <option>30-09-2017</option>
                        </select>-->
                        </span>
                        <a href="" ng-click="removeCartItem(item.itemKey)">Remove</a>
                    </div>
                </td>
                <td class="boarder-r c-qty">
                    <input type="text" class="col-md-10" id="qty" name="qty" ng-model="qty" ng-init="qty = item.qty" ng-change="updateCartQty(item.itemKey, qty, item.seats_vacant)">
                    <!--<select id="qty" name="qty" class="selectpicker" title="">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>-->
                </td>
                <td class="cartamount" ng-cloak><span class="euro-sym1">€ </span> <% item.price %></td>
            </tr>

            <!--<tr>
              <td><div class="empprof-wrap">
                  <div class="empprof"><img src="images/wishlist-2.jpg" alt="" class="img-responsive"></div>
                </div></td>
              <td class="boarder-r"><div class="c-booked-hd">Art and Education in Applied Social Care<br>
                  <span>Dublin |
                  <select id="" class="selectpicker selectlocation" title="">
                    <option data-tokens="first">05-10-2017</option>
                    <option>18-07-2017</option>
                    <option>22-08-2017</option>
                    <option>30-09-2017</option>
                  </select>
                  </span> </div></td>
              <td class="boarder-r c-qty"><select id="" class="selectpicker selectlocation" title="">
                  <option data-tokens="first">1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>10</option>
                </select></td>
              <td class="cartamount"><span class="euro-sym1">€ </span> 21</td>
            </tr>-->
          </tbody>
        </table>
        <div class="clearfix"></div>
      </div>
    </div>
    <div id="cart-amount">
   <button type="button" class="btn applycoupon" ng-init="couponForm=false" ng-click="couponForm=!couponForm">Apply Coupons</button>
      <div class="row" ng-show="couponForm">
        <div class="col-md-8">
          <input id="couponCode" name="couponCode" ng-model="couponCode" placeholder="Coupon Code" class="form-control" type="text">
          <button type="button" class="btn btn-primary" ng-click="applyCoupon(couponCode)">Apply</button>
          <span><% couponMsg %></span>
        </div>
      </div>
      <div class="checkbox checkbox-success">
        <input id="checkbox10" class="styled" type="checkbox">
        <!--<label for="checkbox10">Redeem your reward points<br>
          <span>(You have    10 to redeem)</span></label>-->
      </div>
      <!--<select id="" class="selectpicker selectlocation width100" title="Special Request">
        <option data-tokens="first">Request 1</option>
        <option>Request 2</option>
      </select>-->
      <h2>Price Details</h2>
      <div class="row">
        <div class="col-md-8 f-size18">Sub Total</div>
        <div class="col-md-4 cartamount text-right f-weight300" ng-cloak><span class="euro-sym1">€ </span> <% sub_total %></div>
        <!--<div class="col-md-8 f-size18">Coupon Discount</div>
        <div class="col-md-4 cartamount text-right f-weight300"><span class="euro-sym1">€ </span> <% couponDiscount %></div>-->
        <!--<div class="col-md-8 f-size18">Point Discount</div>
        <div class="col-md-4 cartamount text-right f-weight300"><span class="euro-sym1">€ </span> 10</div>-->
        <div class="spacer-gry"></div>
        <div class="col-md-8 f-size18"><strong>Grand Total</strong></div>
        <div class="col-md-4 cartamount text-right f-weight300" ng-cloak><strong><span class="euro-sym1">€ </span> <% grand_total %></strong></div>
      </div>
      @if (!isset(Auth::user()->id))
        <a href="#logPopup" data-toggle="modal" data-dismiss="modal" class="btn savebtn">Proceed to Checkout</a>
      @endif
      @if (isset(Auth::user()->id))
        <!--<button type="button" ng-click="proceedCheckout()" ng-disabled="errorflag" class="btn savebtn">Proceed to Checkout</button>-->
        <button type="button" id="payButtonId" ng-disabled="errorflag" class="btn savebtn" onclick="checkoutProceed();ga('send', 'event', 'buy', 'Click', 'pay now')">Proceed to Checkout</button>
        <!--<button type="button" id="payButtonId">Checkout Now</button>-->
      @endif
    </div>
  </div>
  <div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div id="stripePopup" class="modal fade" role="dialog" aria-hidden="true" ng-controller="usersCtrl">
  <div class="modal-dialog fadeInUpQuick animated">
    <img class="payment_modal_close" src="{{asset('images/close.png')}}"/>
    <div class="modal-content">
      <div class="modal-header">

        <div id="stripe-popup">
        <form id='stripeCheckoutfrm'>
          <div class="row" id="rxp-header">          
          <div class="col-lg-12" id="rxp-header-title">
            <h1 class="rxp-title"><span>Pay with card</span></h1>
          </div>
          </div>
          <div class="row" style="margin-top:15px;">
            <div class="col-xs-12">
              <h2>SHIPPING AND BILLING INFORMATION</h2>
            </div>
          </div>
          {!! csrf_field() !!}
          <div class="row" >
                  <div class="col-xs-12">
                    <label class="control-label" for="cardholder-name">Name</label>
                  </div>
                  <div class="col-xs-12">
                    <input name="cardholder_name" id="cardholder-name" class="form-control"  value="{{$profile ? ($profile->user ? $profile->user->display_name : '') : ''}}" >
                    <span class="help-inline" id="name-errors"></span>
                  </div>
          </div>
          <div class="row" >
            <div class="col-xs-12">
              <label class="control-label" for="pas_ccname">Email</label>
            </div>
            <div class="col-xs-12">

            <input name="cardholder_email" class="form-control" id="pas_ccname" maxlength="100" type="email"  aria-required="true" value="{{$profile ? ($profile->user ? $profile->user->personal_email : '') : ''}}">

              <span class="help-inline" id="ccname-errors"></span>
              </div>
          </div>
          <div class="row" >
                <div class="form-group">
                  <div class="col-xs-12">
                    <label class="control-label" for="pas_name">Phone</label>
                  </div>
                  <div class="col-xs-12">
                  <input name="cardholder_phone" class="field form-control" id="cardholder-phone"  type="tel" value="{{$profile ? $profile->phone : ''}}">
                    <span class="help-inline" id="tel-errors"></span>
                    </div>
                </div>
          </div>
          <div class="row" >
                <div class="form-group">
                  <div class="col-xs-12">
                    <label class="control-label" for="pas_name">Address</label>
                  </div>
                  <div class="col-xs-12">

                  <input name="cardholder_address" class="form-control" id="pas_add" maxlength="100"   type="text" placeholder="" aria-required="true" value="{{$profile ? $profile->address_line1 . ' ' . $profile->address_line2  : ''}}">
                    <span class="help-inline" id="add-errors"></span>
                    </div>
                </div>
          </div>
          <div class="row" >
          <div class="col-xs-6">
                <div class="form-group mb0">
                    <label class="control-label" for="pas_name">City</label>
                    <input class="form-control" id="pas_city" maxlength="100" name="cardholder_city"  type="text" placeholder="" aria-required="true" value="{{$profile ? $profile->city : ''}}">
                    <span class="help-inline" id="city-errors"></span>
                </div>
          </div>
          <div class="col-xs-6">
                <div class="form-group mb0">
                    <label class="control-label" for="pas_name">County</label>
                    <input class="form-control" id="pas_state" maxlength="100" name="cardholder_state"  type="text" placeholder="" aria-required="true" value="{{$profile ? $profile->county : ''}}">
                    <span class="help-inline" id="state-errors"></span>
                </div>
          </div>
          </div>
          <div class="row" >
            <div class="col-xs-6">
                  <div class="form-group">
                      <label class="control-label" for="pas_name">Eircode</label>
                      <input class="form-control" id="pas_zip" maxlength="100" name="cardholder_zip"  type="text" placeholder="" aria-required="true" value="{{$profile ? $profile->post_code : ''}}">
                      <span class="help-inline" id="zip-errors"></span>
                  </div>
            </div>
            <div class="col-xs-6">
                  <div class="form-group">
                      <label class="control-label" for="pas_name">Country</label>
                      <input type="hidden" id = 'current_country' value = "{{$profile ? $profile->country_code : ''}}">
                      <select class="form-control" id="pas_cntry" maxlength="100" name="cardholder_country"    aria-required="true" >
                        @foreach($countries as $key => $value)
                          <option value="{{$key}}">{{$value}}</option>
                        @endforeach
                      </select>
                      <span class="help-inline" id="cntry-errors"></span>
                  </div>
            </div>
          </div>

          <h2>Payment information</h2>

          <div class="row" >
            <div class="col-xs-12">
              <label for="card-element">Card</label>
            </div>
            <div class="col-xs-12">
              <div id="card-element" class="form-control"></div>
            </div>
            <div class="col-xs-12">
              <div class="outcome">
                <div class="error"></div>
              </div>
            </div> 
          </div>
          <div class="row" >
            <div class="col-xs-12">
              <button id="stripePaymentBtn" class="btn btn-hpp-a form-control" type="submit" data-secret="">PAY €{{Cart::subtotal()}}</button>
            </div>
          </div>
        </form>

        <div class="row" id="rxp-footer">
          <div class="col-xs-12" id="rxp-footer-logo-byrealex-box">
            <img alt="Stripe" src="{{ asset('images/stripe-powered.png') }}" /> 
          </div>
        </div>

        <div class="outcome">
          <div class="error"></div>
        </div>

        </div>
        <div class="loader"></div>
      </div>
    </div>
    </div>
  </div>
@endsection

@push('scripts')
<script>
$(document).ready(function(){
  $(".payment_modal_close").on('click', hidePaymentPopup);
  currentCountry = $('#current_country').val();
  $('#pas_cntry').val(currentCountry).attr('selected','selected');
	//$("#offerPopup").modal('show');
 });
</script>
    <script>
      function checkoutProceed() {
        $.ajax({url: '{!! route('frontend.cart.validate') !!}', type: 'GET', success: function(result){
            if (result == 1) {
              swal({
                title: "Cart item",
                text: "Seem's there is update in product price",
                icon: "warning",
                buttons: false,
                dangerMode: true,
              });
              window.location = './your-cart';
            } else {
              $.post('create-intent', {
                "_token": "{{ csrf_token() }}"
              }).done(function (data, status) {
                const cardButton = $('#stripePaymentBtn');
                cardButton.data('secret',data);
              })
              .fail(function (data, status) {
                window.location.href = './your-cart';
              });
              showPaymentPopup();
            }
        }});
    }            

    function showPaymentPopup() {
      $("#stripePopup").modal('show');
    }

    function hidePaymentPopup() {
      $("#stripePopup").modal('hide');
    }

    function setOutcome(result) {
      var apiError = 0;
      if(result.error) {
        if(result.error.type != 'validation_error') {
          apiError = 1;
        }
      }
      if(result.error && apiError == 0) { //Checking card format errors
        $('.loader').hide();
        var errorElement = document.querySelector('.error');
        errorElement.classList.remove('visible');   
        errorElement.textContent = result.error.message;
        errorElement.classList.add('visible');
        $('#stripePaymentBtn').removeAttr('disabled');
      } else if (result.paymentIntent || apiError == 1) { //Checking Payment errors
        
        $.post("payments",
        {
          "_token": "{{ csrf_token() }}",
          "result": result,
        })
        .done(function (data, status) {
          window.location.href = data;
        })
        .fail(function (data, status) {
          window.location.href = data;
        })
        .always(function () {
          $('.loader').hide();
        });       
      }
    }

      $(document).ready(function(){

        var stripe = Stripe('{{ env("STRIPE_PUBLISH_KEY") }}');
        var elements = stripe.elements({
          fonts: [
            {
              family: 'Open Sans',
              weight: 400,
              src: 'local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format("woff2")',
              unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215',
            },
          ]
        });

        var card = elements.create('card', {
          hidePostalCode: true,
          style: {
            base: {
              iconColor: '#F99A52',
              color: '#555',
              lineHeight: '1.429',
              borderRadius: '2px',
              borderColor: '#ECECEC',
              fontWeight: 400,
              padding: '6px',
              marginBottom: '5px',
              fontFamily: '"Open Sans", "Helvetica Neue", "Helvetica", sans-serif',
              fontSize: '14px',
              '::placeholder': {
                color: '#968e8e',
              }
            },
          }
        });
        card.mount('#card-element');

        card.on('change', function(event) {
          setOutcome(event);
        });

        document.getElementById('stripeCheckoutfrm').addEventListener('submit', function(e) {
          errors=document.getElementsByClassName("help-inline"); 
          for(var i = 0; i < errors.length; i++){
            errors[i].innerText=""; 
          }
          e.preventDefault();
          var form = document.getElementById('stripeCheckoutfrm');
          if(validateForm(form)) {
            $('.loader').show();
            $.post("save-payment-data",
            {
              "_token" : "{{csrf_token()}}",
              "email": $("#pas_ccname").val(),
              "name": $("#cardholder-name").val(),
              "phone": $("#cardholder-phone").val(),
              "city": $("#pas_city").val(),
              "country_code": $('#pas_cntry').val(),
              "address": $("#pas_add").val(),
              "post_code": $("#pas_zip").val(),
              "county": $("#pas_state").val()

            });
            $('#stripePaymentBtn').attr('disabled', true);
            const cardButton = $('#stripePaymentBtn');
            const clientSecret = cardButton.data('secret');
            stripe.handleCardPayment(clientSecret, card, {
                payment_method_data: {
                  "billing_details": {
                    "address": {
                      "city": $("#pas_city").val(),
                      "country": $('#pas_cntry').val(), //Need to make this dynamic
                      "line1": $("#pas_add").val(),
                      "postal_code": $("#pas_zip").val(),
                      "state": $("#pas_state").val()
                    },
                    "email": $("#pas_ccname").val(),
                    "name": $("#cardholder-name").val(),
                    "phone": $("#cardholder-phone").val(),
                  },
                }
            })
            .then(setOutcome);
          }
          else {
            $('.loader').hide();
          }
        });
    });

    function validateForm(form)
    { 
      var validity = 1;
      fields = document.forms["stripeCheckoutfrm"].getElementsByTagName("input").value;
      name = form.querySelector('input[name=cardholder_name]').value;
      email = form.querySelector('input[name=cardholder_email]').value;
      phone = form.querySelector('input[name=cardholder_phone]').value;
      address = form.querySelector('input[name=cardholder_address]').value;
      state = form.querySelector('input[name=cardholder_state]').value;
      country = form.querySelector('select[name=cardholder_country]').value;
      city = form.querySelector('input[name=cardholder_city]').value;
      zip = form.querySelector('input[name=cardholder_zip]').value;

      if(name == '' || name == null) {
        document.getElementById('name-errors').innerHTML = 'Name is required';
        validity = 0;
      }
      if((message = checkEmail(email)) != '') {
        document.getElementById('ccname-errors').innerHTML = message;
        validity = 0;
      }
      if(phone == ''  || phone == null) {
        document.getElementById('tel-errors').innerHTML = 'Phone is required';
        validity = 0;
      }
      if(address == '' || address == null) {
        document.getElementById('add-errors').innerHTML = 'Address is required';
        validity = 0;
      }
      if(city == '' || city == null) {
        document.getElementById('city-errors').innerHTML = 'City  is required';
        validity = 0;
      }
      if(state == '' || state == null) {
        document.getElementById('state-errors').innerHTML = 'County is required';
        validity = 0;
      }
      if(zip == ''  || zip == null) {
        document.getElementById('zip-errors').innerHTML = 'EirCode is required';
        validity = 0;
      }
      if(country == '' || country == null) {
        document.getElementById('cntry-errors').innerHTML = 'Country  is required';
        validity = 0;
      }
      return validity;
    }

    function checkEmail(email)
    {
      message = '';
      if(email == '' || email == null) {
        message = "Email is required";
      }
      else {
        let email_format = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if(!email_format.test(email)) {
          message = 'Invalid email address.';
        }
      }
      return message;
    }

    </script>
@endpush