@extends('sponsor.layouts.sponsor')
@section('title')
Sponsor | Event Cart & Payment Procedure
@endsection

@section('styles')
<style type="text/css">
  @media only screen and (max-width: 768px){
    .cart-message {
      text-align: center!important;
    }
  }
</style>
@endsection

@section('content')
<!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h4 class="m-0 text-dark">{{ isset($sponsorCartCount)&&$sponsorCartCount?"Upload logo for selected Event(s)":'' }} </h4>
        </div><!-- /.col -->
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ route('sponsor.dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="#">Events</a></li> 
            <li class="breadcrumb-item"><a href="{{ route('sponsor.events.nearbyEvent') }}">Nearby Events</a></li>
            <li class="breadcrumb-item active">Cart</li>
          </ol>
        </div><!-- /.col -->
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>     

<section class="content">
  <div class="container-fluid">        
    <div class="row">          
      <div class="col-md-12">
        <div class="card card-primary">
          @if ($errors->any())            
              <div class="alert alert-danger">
                  <ul>
                      @foreach ($errors->all() as $error)
                          <li>{{ $error }}</li>
                      @endforeach
                  </ul>
              </div>
          @endif
        </div>
      </div>

      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            <!-- <h3 class="card-title">&nbsp;</h3> -->
            <div class="row">
              <div class="col-md-10"><h4><i class="fa fa-shopping-cart" aria-hidden="true"></i> Cart</h4></div>
              <div class="col-md-2 pb-md-0 pb-3">
                <a href="{{ route('sponsor.events.nearbyEvent') }}" class="btn btn-primary col-sm-12 btn-lg btn-flat">Add more Events</a>
              </div>
            </div>
          </div>

          <div class="card-body">
            <div class="row">
              <div class="col-md-12 col-lg-12 order-2 order-md-1">

                <div class="row">
                  <div class="col-md-1 text-center">
                    <label>Sl No.</label>
                  </div>
                  <div class="col-md-5">
                    <label>Event Details</label>
                  </div>
                  <div class="col-md-2 text-center">
                    <label>Event Date(s)</label>
                  </div>
                  <div class="col-md-3 text-center">
                    <label>Event Promotion Date(s)</label>
                  </div>
                  <div class="col-md-1 text-center">
                    <label>Action</label>
                  </div>
                </div>
                <hr>

                @if($cartItemList['items'])
                  @foreach($cartItemList['items'] as $key => $cartItem)                  
                    <div class="row">
                      <div class="col-md-1 text-center">
                        <p>{{ $key+1??'' }}</p>
                      </div>
                      <div class="col-md-5">
                        <a href="{{ url('sponsor/events/nearbyEvent/showEvent/'.encript_decript_data( $cartItem['event_id'], 'encript', 2 )) }}"><span class="text-primary">{{ $cartItem['event_ID']??'' }}</span></a><br>
                        <a href="{{ url('sponsor/events/nearbyEvent/showEvent/'.encript_decript_data( $cartItem['event_id'], 'encript', 2 )) }}"><span class="text-danger">{{ $cartItem['event_name']??'' }}</span></a><br>
                        <span class="">{{ $cartItem['place']??'' }}</span>
                      </div>
                      <div class="col-md-2 text-center">
                        <p>{{ $cartItem['event_date']??'' }}</p>
                      </div>
                      <div class="col-md-3 text-center">
                        <span class="text-primary font-weight-bold">{{ $cartItem['promotion_date']??'' }}</span><br>
                        <span class="text-default">{{ $cartItem['pickup_time']??'' }}</span><br>
                        @if($cartItem['is_available'] == 0)
                          <span class="text-danger blink_me font-weight-bold">Promotion is over</span>
                        @endif

                      </div>
                      <div class="col-md-1 text-center">
                        <a title="Remove Event" href="{{ url('sponsor/events/nearbyEvent/event/'.encript_decript_data( $cartItem['cart_id'], 'encript', 2 )) }}" class="btn btn-danger btn-xs" onclick="return confirm('Are you sure to remove?')"><i class="fa fa-trash" aria-hidden="true"></i></a>
                      </div>
                    </div>
                    <hr>
                  @endforeach
                @else
                  <div class="row">
                      <div class="col-md-12 text-center">No item found</div>
                  </div>
                @endif

              </div>
            </div>
          </div>

        </div>
      </div>

      @if($cartItemList['is_available'] == 1 && $sponsorCartCount> 0)
      <div class="col-md-12">
        <div class="card card-primary">
          <div class="card-body">
            <div class="card-header"><h3 class="card-title">Secure Payment Procedure</h3></div>

              <p class="lead">You can select any package and upload a logo which will print on food purchased invoices with hyperlink(if needed).</p>
               
              <form role="form" method="post" action="{{ url('sponsor/events/nearbyEvent/showEvent/submission') }}" enctype="multipart/form-data" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="{{ env('STRIPE_PUBLIC_KEY') }}" id="payment-form">
                @csrf
                <input type="hidden" name="tz" id="tz" value="">
                <input type="hidden" name="itemCount" id="itemCount" value="{{ encript_decript_data( $sponsorCartCount, 'encript', 2 ) }}">
                <input type="hidden" name="cartCount" id="cartCount" value="{{ $sponsorCartCount??0 }}">
                <input type="hidden" name="packagePrice" id="packagePrice" value="0">
                <input type="hidden" name="totalPrice" id="totalPrice" value="0">

                <div class="row">
                  <div class="col-md-4 order-md-2 mb-4">
                    <h4 class="d-flex justify-content-between align-items-center mb-3">
                      <span class="text-muted">Your cart</span>
                      <span class="badge badge-secondary badge-pill">{{ $sponsorCartCount??0 }}</span>
                    </h4>
                    <ul class="list-group mb-3 package-price">
                      <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                          <h6 class="my-0">Package price</h6>
                        </div>
                        <span class="text-muted">$<span class="package-base-price">0</span></span>
                      </li>
                      <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                          <h6 class="my-0">Sub Total</h6>
                        </div>
                        <span class="text-muted">$<span class="package-sub-total-price">0</span></span>
                      </li>
                      <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                          <h6 class="my-0">Tax (<span class="sponsor-tax-percentage">{{ get_setting('tax-sponsor-logo') }}</span>%)</h6>                          
                        </div>
                        <span class="text-muted">$<span class="package-tax-price">0</span></span>
                      </li>                      
                      <li class="list-group-item d-flex justify-content-between">
                        <span>Total (USD)</span>
                        <strong>$<span class="package-final-price">0</span></strong>
                      </li>
                    </ul>
                  </div>

                  <div class="col-md-8 order-md-1">
                    <h4 class="mb-3">Packages information</h4>
                      <div class="mb-3">
                        <label for="username">Packages <span class="text-danger">*</span></label>
                        <div class="{{ $errors->has('packages_lavel')?' is-invalid':'' }}">
                          <div class="input-group ">
                            <select class="form-control {{ $errors->has('packages_lavel')?' is-invalid':'' }}" name="packages_lavel" required="" >
                              <option value="">-- Select any package --</option>
                              @foreach($sponsorPackages as $key => $package)
                                <option value="{{ $package->package_slug}}" price="{{$package->price}}">{{ $package->package_name}}</option>
                              @endforeach                          
                            </select>
                            
                          </div>
                          @if ($errors->has('packages_lavel'))
                            <span class="form-control-feedback text-danger" role="alert">
                              <strong>{{ $errors->first('packages_lavel') }}</strong>
                            </span>
                          @endif
                        </div>
                      </div>

                      <div class="mb-3 hyperlink-url" style="display: none;">
                        <label for="address">Enter hyperlink</label>
                        <input type="text" class="form-control" name="logo_link" placeholder="Add Hyperlink" autocomplete="off" >
                        <span class="text-primary">* Hyperlink must start with <span class="font-weight-bold">http://</span> or <span class="font-weight-bold">https://</span></span>
                      </div>

                      <div class="mb-3">
                        <label for="">Select Logo image <span class="text-danger">*</span></label>
                        <div class="{{ $errors->has('logo_image')?' is-invalid':'' }}">
                          <div class="custom-file">
                            <input type="file" class="custom-file-input {{ $errors->has('logo_image')?' is-invalid':'' }}" name="logo_image" id="logo_image" required>
                            <label class="custom-file-label">Choose file</label>
                          </div>
                          <div class="row">
                            <div class="col-md-6 col-sm-12 text-primary">* Logo format: jpeg, jpg, png only</div>
                            <div class="col-md-6 col-sm-12 text-primary">
                              <p class="text-right">Logo size must be within <b>{{ get_setting('sponsor-logo-size') }}(px)</b></p>
                            </div>
                          </div>
                           @if ($errors->has('logo_image'))
                            <span class="form-control-feedback text-danger" role="alert">
                              <strong>{{ $errors->first('logo_image') }}</strong>
                            </span>
                          @endif
                        </div>
                      </div>

                      <hr class="mb-4">

                      <h4 class="mb-3">Payment</h4>

                      <div class="d-none my-3">
                        <div class="custom-control custom-radio" >
                          <input id="credit" name="paymentMethod" type="radio" value="credit" class="custom-control-input" checked="" required="">
                          <label class="custom-control-label" for="credit">Credit card</label>
                        </div>
                        <div class="custom-control custom-radio">
                          <input id="debit" name="paymentMethod" type="radio" value="debit" class="custom-control-input" required="">
                          <label class="custom-control-label" for="debit">Debit card</label>
                        </div>
                      </div>

                      <div class="row">
                        <div class="col-md-6 mb-3">
                          <label for="cc-name">Name on card</label>
                          <div class="{{ $errors->has('name_on_card')?' is-invalid':'' }}">
                            <input type="text" class="form-control required {{ $errors->has('name_on_card')?' is-invalid':'' }}" id="cc-name" name="name_on_card" placeholder="Name on card" autocomplete="off" required="">
                            <small class="text-muted">Full name as displayed on card</small><br>
                            @if ($errors->has('name_on_card'))
                              <span class="form-control-feedback text-danger" role="alert">
                                <strong>{{ $errors->first('name_on_card') }}</strong>
                              </span>
                            @endif
                          </div>
                        </div>
                        <div class="col-md-6 mb-3">
                          <label for="cc-number">Card number</label>
                          <div class="{{ $errors->has('card_number')?' is-invalid':'' }}">
                            <input type="text" class="form-control input-element card-number required {{ $errors->has('card_number')?' is-invalid':'' }}" name="card_number" id="card_number2" autocomplete="off" placeholder="1111-2222-3333-4444" required="">
                            @if ($errors->has('card_number'))
                              <span class="form-control-feedback text-danger" role="alert">
                                <strong>{{ $errors->first('card_number') }}</strong>
                              </span>
                            @endif
                          </div>
                        </div>
                      </div>

                      <div class="row">
                        <div class="col-md-3 mb-3">
                          <label for="cc-expiration">Expiration</label>
                          <div class="{{ $errors->has('expiration_date')?' is-invalid':'' }}">
                            <input type="text" class="form-control expire-date required {{ $errors->has('expiration_date')?' is-invalid':'' }}" name="expiration_date" placeholder="MM/YYYY" autocomplete="off" required="">
                            @if ($errors->has('expiration_date'))
                              <span class="form-control-feedback text-danger" role="alert">
                                <strong>{{ $errors->first('expiration_date') }}</strong>
                              </span>
                            @endif
                          </div>
                        </div>
                        <div class="col-md-3 mb-3">
                          <label for="cc-expiration">CVV</label>
                          <div class="{{ $errors->has('cvc')?' is-invalid':'' }}">
                            <input type="password" class="form-control password card-cvc required {{ $errors->has('cvc')?' is-invalid':'' }}" name="cvc" id="cc-cvv" autocomplete="off" placeholder="CVC or CVV" required="">
                            @if ($errors->has('cvc'))
                              <span class="form-control-feedback text-danger" role="alert">
                                <strong>{{ $errors->first('cvc') }}</strong>
                              </span>
                            @endif
                          </div>
                        </div>
                      </div>




                      <div class='row'>
                        <div class='col-md-12 error form-group hide'>
                            <div class='alert-danger alert'>Please correct the errors and try
                                again.</div>
                        </div>
                      </div>










                      <hr class="mb-4">
                      <div class="row">
                        <div class="col-md-12 mb-3 text-center">
                          <input type="submit" class="btn btn-primary btn-lg btn-block" value="Pay">
                          <img src="{{ asset('images/loader.gif')}}" class="submit-loader" style="max-width: 30px; display: none">
                        </div>
                      </div>                      
                      
                  </div>
                </div>

              </form>
            </div>             
            </div>          
          <!-- /.card -->
      </div>
      @endif
        <!-- /.col -->
    </div>
  </div><!-- /.container-fluid -->
  <button id="scrollTopBtn" class="scrollTopBtn" title="Go to top">Top</button>
</section>

@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.28/moment-timezone-with-data.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.5.7/cleave.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

<script type="text/javascript">
  $('select[name=packages_lavel]').change(function() {
      var selected = $(this).val();
      var packagePrice = 0;
      var taxPercentage = $('span.sponsor-tax-percentage').text();
      var totalItemCount = $("#cartCount").val();
      var subTotalPrice = 0;
      var taxPrice = 0;
      var finalPrice = 0;
      $('.hyperlink-url').hide().find('input').val('');

      if(selected !== "") {
        packagePrice = $('option:selected', this).attr('price');
        subTotalPrice = parseFloat(packagePrice)*parseInt(totalItemCount);
        taxPrice = (subTotalPrice*taxPercentage / 100);
        taxPrice = (Math.ceil(taxPrice * 100)/100).toFixed(2);
        finalPrice = parseFloat(subTotalPrice) + parseFloat(taxPrice);
      }
      
      $('#packagePrice').val(packagePrice);
      $("#totalPrice").val(finalPrice.toFixed(2));
      $('span.package-base-price').text(parseFloat(packagePrice).toFixed(2));
      $('span.package-sub-total-price').text(parseFloat(subTotalPrice).toFixed(2));
      $('span.package-tax-price').text(parseFloat(taxPrice).toFixed(2));
      $('span.package-final-price').text(finalPrice.toFixed(2));

      if(selected == 'logo-with-hyperlink') {
        $('.hyperlink-url').show();        
      }
  });

  // $("input[type=submit").on("click", function() {
  //   $(this).closest('form').submit();
  //   $(this).prop("disabled", true);
  //   $(".submit-loader").show();
  // });
</script>
<script type="text/javascript">
  $(document).ready(function() {
    moment.tz.setDefault(moment.tz.guess()); // now we've set the default time zone
    $('#tz').val(moment.tz.guess());
  });
</script>
<script>
  var cleave = new Cleave('.expire-date', {
      date: true,
      datePattern: ['m', 'Y']
  });

  var cleave = new Cleave('.input-element', {
      creditCard: true,
      onCreditCardTypeChanged: function (type) {
      }
  });

  var cleave = new Cleave('.password', {
      delimiter: '',
      blocks: [3],
      uppercase: true
  });

  $(".custom-file-input").on("change", function() {
    var fileName = $(this).val().split("\\").pop();
    $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
  });
</script>

<script type="text/javascript">
  $(function() {
    var $form = $(".require-validation");

    $('form.require-validation').bind('submit', function(e) {
      $(this).find('input[type=submit]').prop("disabled", true);
      $(".submit-loader").show();

      var $form         = $(".require-validation"),
          inputSelector = ['input[type=email]', 'input[type=password]',
                           'input[type=text]', 'input[type=file]',
                           'textarea'].join(', '),
          $inputs       = $form.find('.required').find(inputSelector),
          $errorMessage = $form.find('div.error'),
          valid         = true;
          $errorMessage.addClass('hide');
   
          $('.has-error').removeClass('has-error');

      $inputs.each(function(i, el) {
        var $input = $(el);
        if ($input.val() === '') {
          $input.parent().addClass('has-error');
          $errorMessage.removeClass('hide');
          e.preventDefault();
        }
      });
    
      if (!$form.data('cc-on-file')) {
        e.preventDefault();
        Stripe.setPublishableKey($form.data('stripe-publishable-key'));

        var expiry_date = $('.expire-date').val();
        //console.log($('.expire-date').val()
        //console.log($('.expire-date').val())

        var card_date = expiry_date.split('/');
        //alert( result[2] );
        //console.log(card_date)



        Stripe.createToken({
          number: $('.card-number').val(),
          cvc: $('.card-cvc').val(),
          exp_month: card_date[0],
          exp_year: card_date[1]
        }, stripeResponseHandler);
      }  
    });

    function stripeResponseHandler(status, response) {
        if (response.error) {
            $('.error')
                .removeClass('hide')
                .find('.alert')
                .text(response.error.message);
        } else {
            // token contains id, last4, and card type
            var token = response['id'];
            // insert the token into the form so it gets submitted to the server
            $form.find('input[type=text]').empty();
            $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
            $form.get(0).submit();
        }
    }

  });


</script>

@endsection