@extends('front.layouts.main')

@section('content')

<section class="pt-30">

    <div class="container">
        <div class="tab-container responsive-tab mb-30">
            <ul class="tab-menu d-flex flex-wrap">
                <li class="current" data-tab="cart" style="cursor: default;">Cart</li>
                <li class="" data-tab="delivery-type" style="cursor: default;">Delivery type</li>
                <li class="" data-tab="address" style="cursor: default;">Address</li>
            </ul>
            <div class="tab-content-wrapper">
                <div class="responsive-title current">Cart</div>
                <h2 class="col">MY CART</h2>
                @if(count($data['data']) > 0)
                <div class="cart-page-wrapper col">
                    @foreach($data['data'] as $key => $product)
                    <div id="item-{{$key}}" class="cart-item-row d-flex flex-wrap">
                        <div class="s4">
                            <figure class="product-det-thumb">
                                <img src="{{$product['jsonData']['data']['orderItemDetail']['image']}}" class="center-box" alt="{{$product['jsonData']['data']['orderItemDetail']['productName']}}" />
                            </figure>
                        </div>
                        <div class="s8">
                            <div class="order-detail d-flex flex-space-between flex-column">
                                <div class="order-info">
                                    <div class="order-row">
                                        <label>ITEM :</label>
                                        <strong>{{$product['jsonData']['data']['orderItemDetail']['productName']}}</strong>
                                    </div>
                                </div>
                                <div class="order-control d-flex">
                                    <div class="order-total-count">
                                        <div class="product-code" id="itemCost">{{config('constants.CURRENCY_SYMBOL')." ". number_format($product['subTotal'])}}</div>
                                        <div class="d-flex flex-align-end flex-space-between">
                                            <a href="{{url('user/cartItemDetails/'.base64_encode($product['orderItemId']))}}" class="view-det">VIEW DETAILS</a>
                                            <div class="d-flex">
                                                <div class="value-button decrease val" data-id="{{base64_encode($product['orderItemId'])}}">-</div>
                                                <input type="number" name="quantity" disabled class="number" value="{{$product['quantity']}}" />
                                                <div class="value-button increase val" data-id="{{base64_encode($product['orderItemId'])}}">+</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="remove-btn-wrap">
                                        <button data-id="{{base64_encode($product['orderItemId'])}}" type="button" class="btn btn-pink">REMOVE</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                <div class="cart-price-wrapper d-flex flex-end pb-10 mb-30">
                    <div class="s8 col">
                        <div class="table-responsive">
                            <table class="table">
                                <tbody class="fs-18">
                                    <tr>
                                        <td>SUB TOTAL : </td>
                                        <td id="subTotal"><strong>{{number_format($data['totalPrice'])}}</strong></td>
                                    </tr>
                                    <tr>
                                        <td>DELIVERY FEE : </td>
                                        <td><strong>{{number_format($data['deliveryFee'])}}</strong></td>
                                    </tr>
                                    <tr>
                                        <td>VAT {{config('constants.VAT_PERCENTAGE')}}% : </td>
                                        <td id="vat_amount"><strong>{{number_format($data['totalPrice'] - round(($data['totalPrice']/1.18)))}}</strong></td>
                                    </tr>
                                    <tr>
                                        <td><strong class="text-blue">TOTAL : </strong></td>
                                        <td id="totalPrice"><strong  class="text-blue">{{number_format($data['totalPrice'])}}</strong></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <center><strong style="color:green"><p id="success_message"> </p> </strong></center>
                        <div class="btn-inline mt-20">
                            @if(session()->has('id'))
                            <button type="button" class="btn btn-gray mb-20" data-popup-open="redeem_points_popup">REDEEM POINTS</button>
                            <button type="button" class="btn btn-gray mb-20" data-popup-open="promocode_popup">PROMOCODE</button>
                            <button type="button" class="btn btn-gray mb-20" data-popup-open="gift_card_popup">APPLY GIFT CARD</button>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="cart-price-wrapper border-bot-none d-flex flex-end  mb-20">
                    <div class="s8 col">
                        <div class="btn-inline">
                            @if(session()->has('id'))
                            <a href="{{ url('user/home') }}"  class="btn btn-green mb-20">ADD MORE ITEM</a>
                            @if($checkTiming['isOpen'])
                            <a href="{{ url('user/deliveryType') }}"  class="btn btn-green mb-20">CHECKOUT</a>
                            @else
                            <a data-popup-open="cafe_closed" class="btn btn-green mb-20">CHECKOUT</a>
                            @endif
                            @else
                            <a href="{{ url('user/home') }}"  class="btn btn-green mb-20">ADD MORE ITEMS</a>
                            @if($checkTiming['isOpen'])
                            <a href="{{ url('user/login') }}"  class="btn btn-green mb-20">SIGNIN & CHECKOUT</a>
                            @else
                            <a data-popup-open="cafe_closed" class="btn btn-green mb-20">SIGNIN & CHECKOUT</a>
                            @endif
                            @if($checkTiming['isOpen'])
                            <!--<a class="btn btn-green mb-20" data-popup-open="guest_info_popup">CHECKOUT AS GUEST</a>-->
                            @else
                            <!--<a data-popup-open="cafe_closed" class="btn btn-green mb-20">CHECKOUT AS GUEST</a>-->
                            @endif
                            <!--                  <a href=""  class="btn btn-green mb-20">CHECKOUT AS GUEST</a>-->

                            <!--<button type="button" class="btn btn-gray mb-20" data-popup-open="guest_info_popup">CHECKOUT AS GUEST</button>-->
                            @endif
                        </div>
                    </div>
                </div>
                @else
                <center><h3>CART IS EMPTY!</h3></center>
                @endif
            </div>
        </div>
    </div>
</section>

@if(count($data2['products']) > 0)
<section class="pt-20 related-product-block">
    <div class="container">
        <h2 class="col">YOU MIGHT ALSO BE  INTERESTED IN:</h2>
        <div class="product-list-wrapper d-flex flex-wrap" id="suggestedProductDiv">
            @foreach($data2['products'] as $product)
            <div class="col xs6 m4">
                <div class="product-card mb-40">
                    <div class="product-thumbnail">

                        <a href="{{url('user/productDetails/'.base64_encode($product['productId']))}}"><img src="{{$product['image']}}" alt="{{$product['productName']}}" /></a>
                    </div>
                    <div class="product-info">
                        <div class="product-name"><a href="{{url('user/productDetails/'.base64_encode($product['productId']))}}">{{$product['productName']}}</a></div>
                        <div class="product-price text-blue">{{config('constants.CURRENCY_SYMBOL'). $product['price']}}</div>
                        <a href="{{url('user/productDetails/'.base64_encode($product['productId']))}}" class="btn btn-green">ORDER</a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <a id="load_suggested_products" class="btn btn-green" style="float:right" href="javascript:void(0)">LOAD MORE</a>
        <div id="suggested_products_error" class="error-text" style="display:none;color:red;"></div>
    </div>
</section>


@else

@endif

<!-- Apply Gift Card Popup -->
@if(session()->has('id'))
<div class="popup" id="gift_card_popup" data-popup="gift_card_popup">
    <div class="popup-inner">
        <div class="popup-header"><h3 class="mt-0 fs-20 mb-10">APPLY GIFT CARD</h3></div>
        <div class="popup-max-hgt">
            <form>
                <div class="form-row mb-15">
                    <input type="text" id="gift_card_code" class="form-input" placeholder="ENTER YOUR CODE"/>
                    <div id="gift_card_error" class="error-text" style="display:none;color:red;"></div>
                </div>
                <button type="button" id="apply_gift_card" class="btn btn-green mt-10">APPLY</button>
                <button type="button" class="btn btn-green mt-10" data-popup-close="gift_card_popup">CANCEL</button>
            </form>
        </div>
        <a class="popup-close" data-popup-close="gift_card_popup" href="#"><i class="icon-cross"></i></a>
    </div>
    <div class="overlay overlay-click"></div>
</div>

<!-- Redeem Points Popup -->
<div class="popup" id="redeem_points_popup" data-popup="redeem_points_popup">
    <div class="popup-inner">
        <div class="popup-header"><h3 class="mt-0 fs-20 mb-10">APPLY REDEEM POINTS</h3></div>
        <div class="popup-max-hgt">
            <form>
                <div class="form-row mb-15">
                    <input type="text" id="redeem_points_value" class="form-input" placeholder="ENTER YOUR POINTS"/>
                    <div id="loyalty_points_error" class="error-text" style="display:none;color:red;"></div>
                </div>
                <button type="button" id="redeem_points" class="btn btn-green mt-10">APPLY</button>
                <button type="button" class="btn btn-green mt-10" data-popup-close="redeem_points_popup">CANCEL</button>
            </form>
        </div>
        <a class="popup-close" data-popup-close="redeem_points_popup" href="#"><i class="icon-cross"></i></a>
    </div>
    <div class="overlay overlay-click"></div>
</div>

<!-- Apply Promo Code Popup -->
<div class="popup" id="promocode_popup" data-popup="promocode_popup">
    <div class="popup-inner">
        <div class="popup-header"><h3 class="mt-0 fs-20 mb-10">APPLY PROMOCODE</h3></div>
        <div class="popup-max-hgt">
            <form>
                <div class="form-row mb-15">
                    <input type="text" class="form-input" id="promocode_value" placeholder="ENTER PROMOCODE"/>
                    <div id="promocode_error" class="error-text" style="display:none;color:red;"></div>
                </div>
                <button type="button" id="apply_promo_code" class="btn btn-green mt-10">APPLY</button>
                <button type="button" class="btn btn-green mt-10" data-popup-close="promocode_popup">CANCEL</button>
            </form>
        </div>
        <a class="popup-close" data-popup-close="promocode_popup" href="#"><i class="icon-cross"></i></a>
    </div>
    <div class="overlay overlay-click"></div>
</div>
@endif

<div class="popup" id="guest_info_popup" data-popup="guest_info_popup">
    <div class="popup-inner">
        <div class="popup-header"><h3 class="mt-0 fs-20 mb-10">GUEST INFORMATION</h3></div>
        <div class="popup-max-hgt">
            <form style="margin-top: 15px;">
                <div class="form-row mb-15">
                    <input type="text" class="form-input" id="firstname_value" placeholder="First Name"/>
                    <div id="firstname_error" class="error-text" style="display:none;color:red;"></div>
                </div>
                <div class="form-row mb-15">
                    <input type="text" class="form-input" id="lastname_value" placeholder="Last Name"/>
                    <div id="lastname_error" class="error-text" style="display:none;color:red;"></div>
                </div>
                <div class="form-row mb-15">
                    <input type="email" class="form-input" id="email_value" placeholder="Email"/>
                    <div id="email_error" class="error-text" style="display:none;color:red;"></div>
                </div>
                <div class="form-row mb-15">
                    <input type="text" onkeypress="return isNumberKey(event)" class="form-input" id="phone_value" placeholder="Phone Number" maxlength="12"/>
                    <div id="phone_error" class="error-text" style="display:none;color:red;" ></div>
                </div>
                <button type="button"  id="add_guest_information" class="btn btn-green mt-10">NEXT</button>

            </form>
        </div>
        <a class="popup-close" data-popup-close="guest_info_popup" href="#"><i class="icon-cross"></i></a>
    </div>
    <div class="overlay overlay-click"></div>
</div>
<div class="popup" id="cafe_closed" data-popup="cafe_closed">
    <div class="popup-inner">
        <div class="popup-header"><h3 class="mt-0 fs-20 mb-10">Café Javas is Closed Now!</h3></div>
        <div class="popup-max-hgt">

        </div>
        <a class="popup-close" data-popup-close="cafe_closed" href="#"><i class="icon-cross"></i></a>
    </div>
    <div class="overlay overlay-click"></div>
</div>
@endsection
@section('js')

<script>
          function isNumberKey(evt){
          var charCode = (evt.which) ? evt.which : event.keyCode
                  if (charCode > 31 && (charCode < 48 || charCode > 57))
                  return false;
                  return true;
          }
  $(document).ready(function(){
  //****  function for increasing cart item value  ****//
  $('.increase.val').click(function(e){
  e.preventDefault();
          var currentVal = parseInt($(this).prev('.number').val());
          if (!isNaN(currentVal)) {
  $(this).prev('.number').val(currentVal + 1);
          var quantity = currentVal + 1;
          var productId = $(this).attr("data-id");
          $.ajax({
          url: "