@extends('web.app')

@section('main-content')
<div class="container">
  <div class="col-md-12 col-xs-12">
    <div align="center">
      <div class="col-md-12">
        <form action="{{ url('/payment') }}"  method="POST">
          {{ csrf_field() }}
          <div class="shopping-cart-list">
            <div class="cart-title">
              <h1 class="title1">Order Detail</h1>
            </div>
            @foreach ($cartDetail as $orderDetail)
            
            <input type="hidden" name="bike_id" value="{{ $orderDetail->id }}">
            <input type="hidden" name="bike_id" value="{{ $orderDetail->bike_id }}">
            <input type="hidden" name="ticket_price" value="{{ $orderDetail->bike->ticket_price }}">

            <div class="cart-item">           
              <div class="cart-image">
                <img src="{{ url('/public/uploads/bike/') }}/{{ $orderDetail->bike->image }}" alt="" />
              </div>           
              <div class="cart-description">
                <span>{{ $orderDetail->bike->name }}</span>
              </div>
              <div class="cart-quantity">
                <a class="change qtyminus"></a>
                <input type="text" id="ticketQuantity" name="ticket_qty" class="quntity-input" value="{{ $orderDetail->quantity }}">
                <a class="change qtyplus"></a>
              </div>
              <div class="cart-total-price total_amount">
                ₹ {{ $orderDetail->quantity*$orderDetail->bike->ticket_price }}
              </div>
            </div>
            @endforeach
            @if(count($cartDetail) > 0)
              <div class="col-md-12 text-right">              
                @if(!empty($cartDetail->phone1))                
                  <input type="hidden" name="phone1" value="{{ $cartDetail->phone1 }}">
                @else
                  <span class="mobile">Mobile No :</span>
                  <input type="text" class="mobile-no" name="phone1">
                @endif
              </div>
              <div class="col-md-12 text-right">
                <span id="phone1Error"></span>
              </div>            
              <div class="col-md-12 text-right">              
                <input type="submit" name="submit" value="proceed" class="cart-submit submit">              
              </div>
            @else              
              <div class="empty-shopping-cart">
                <i class="fa fa-shopping-cart" aria-hidden="true" id="cart-icon"></i>
                <div class="empty-text">
                  Shopping Cart Is Empty
                </div>
              </div>
            @endif            
          </div>
        </form>
        
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">

  $("input[name=ticket_qty]").keyup(function(){

    var ticket_qty = $(this).val().trim();
    var ticket_price = $("input[name=ticket_price]").val().trim();
    $(".total_amount").html("₹"+ticket_qty*ticket_price);
    if(ticket_qty.length == 0) {
      $('#QtyError').html('please enter quantity');
      return false;
    }
    
    if(!$.isNumeric(ticket_qty)) {
      $('#QtyError').html('Please enter numeric value only');
      return false;
    }

    $('#QtyError').html('');
  });

  $("input[name=phone1]").keyup(function(){
    var phone1 = $(this).val().trim();
    var numbers = /^[0-9]+$/;  
    if(phone1.length == 0) {
      $('#phone1Error').html('');
      return false;
    }
    if(!phone1.match(numbers))  {  
      $('#phone1Error').html('please enter valid phone number');
      return false;
    }

    if(phone1.length > 12) {
      $('#phone1Error').html('please enter valid phone number');
      return false;
    }
    $('#phone1Error').html('');
  });

  $('.submit').click(function(){
    var ticket_qty = $('input[name="ticket_qty"]').val().trim();  
    var phone1 = $('input[name="phone1"]').val().trim();
    var phoneno = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/;
    
    if(ticket_qty == "") {
      $('#QtyError').html('please enter quantity');
      return false;
    }

    if(!$.isNumeric(ticket_qty)) {
      $('#QtyError').html('Please enter numeric value only');
      return false;
    }

    if(ticket_qty.length < 0) {
      $('#QtyError').html('please enter quantity more than zero');
      return false;
    }

    if(phone1 == "") {
      $('#phone1Error').html('please enter phone number');
          return false;
    }
    if(phone1.length < 10) {
      if(!phone1.match(phoneno)) {  
        $('#phone1Error').html('please enter valid phone number');
        return false;  
      }
    }
  });
  
  $(".qtyminus").click(function(event) {
    if ($('.quntity-input').val() > 1) {
        $('.quntity-input').val(parseInt($('.quntity-input').val()) - 1);
        $('.total_amount').html("₹"+(parseInt($('.quntity-input').val()))*($('input[name=ticket_price]').val()));
    }
  });
  $(".qtyplus").click(function(event) {
      $('.quntity-input').val(parseInt($('.quntity-input').val()) + 1);
      $('.total_amount').html("₹"+(parseInt($('.quntity-input').val()))*($('input[name=ticket_price]').val()));
  });
</script>
@endpush