@extends('front.layouts.main')

@section('content')
<style type="text/css">
    div.order-row {
      text-transform: uppercase;
    }
    #reedem_amount_row{
    display:none;
    }
</style>
<section class="pt-30">
    <div class="container">
        <h2 class="col">MY CART</h2>
        @if(count($data['data']) > 0)
        <div class="cart-page-wrapper">
            @foreach($data['data'] as $key => $product)
            <div id="item-{{$key}}" class="cart-item-row d-flex flex-wrap">
                <div class="m3 s4 col">
                    <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="m9 s8 col">
                    <div class="order-detail cart-item 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>-->

                        <td id="promo_amount" style="display: none;">0</td>
                        <td id="promo_id" style="display: none;">0</td>
                        <tr id="reedem_amount_row">
                            <td>Reedem Points Applied : </td>
                            <td id="reedem_amount"><strong>0</strong></td>
                        </tr>
                        <tr>
                            <td>VAT {{config('constants.VAT_PERCENTAGE')}}% : </td>
                            <td id="vat_amount"><strong>{{number_format((round($data['totalPrice']/1.18)*16)/100)}}</strong></td>
                        </tr>
                        <tr>
                            <td>CTL {{config('constants.CTL_PERCENTAGE')}}% : </td>
                            <td id="vat_amount"><strong>{{number_format((round($data['totalPrice']/1.18)*2)/100)}}</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-light-blue">TOTAL : </strong></td>
                            <td id="totalPrice"><strong  class="text-light-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 gift_card_open" data-popup-open="gift_card_popup">APPLY GIFT CARD</button>
                    @endif
                </div>
                <div class="btn-inline mt-20" style="font-size:18px;">
                    * Delivery charges will be applicable based on your chosen address
                </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/menu') }}"  class="btn btn-blue mb-20">ADD MORE ITEMS</a>
                    @if($checkTiming['isOpen'])
                    <!--<a href="{{ url('user/deliveryType') }}"  class="btn btn-green mb-20">CHECKOUT</a>-->
                    <a data-popup-open="delivery-popup" class="btn btn-green mb-20">CHECKOUT</a>

                    @else
                    <a data-popup-open="delivery-popup" class="btn btn-green mb-20">CHECKOUT</a>                    @endif
                    @else
                    <a href="{{ url('user/menu') }}"  class="btn btn-blue 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 href="{{ url('user/login') }}"  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 class="map-wrapper mb-20">
            <div id="map"></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 gift_card_open" 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" id="popup-close-promo2" class="btn btn-green mt-10" data-popup-close="promocode_popup">CANCEL</button>
            </form>
        </div>
        <a class="popup-close" id="popup-close-promo" 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="cart_item_remove_confirm" data-popup="cart_item_remove_confirm">
    <div class="popup-inner">
        <div class="popup-max-hgt">
            <div class="form-row mb-15">
                <h3>Are you sure you want to remove this item from your cart?</h3>
            </div>
            <button type="button" id="remove_cart_item" class="btn btn-green mt-10" data-popup-close="cart_item_remove_confirm">YES</button>
            <button type="button" class="btn btn-green mt-10" data-popup-close="cart_item_remove_confirm">NO</button>
        </div>
    </div>
    <div class="overlay overlay-click"></div>
</div>

<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>
<!-- Delivery Popup -->
<div class="popup" data-popup="delivery-popup">
    <div class="popup-inner">
        <div class="popup-header"><h3 class="mt-0 mb-10"></h3></div>
        <div class="popup-max-hgt font-brandon-text">
            <div class="text-center mb-40">
                <figure>
                    <img src="{{asset('root-assets/images/order-enroute.png')}}" alt="Delivery" />
                </figure>
                <!--<button type="button" class="btn btn-green mt-15">DELIVERY</button>-->
                <button type="button" class="btn btn-green mt-15" onclick="getDeliveryType('0')">DELIVERY</button>
            </div>
            <div class="text-center mb-20">
                <figure>
                    <img src="{{asset('root-assets/images/Vector Smart Object.png')}}" alt="Take Away" />
                </figure>
                <!--<button type="button" class="btn btn-green mt-15">TAKE AWAY</button>-->
                <button type="button" class="btn btn-green mt-15" onclick="getDeliveryType('1')">TAKE AWAY</button>
            </div>
        </div>
        <a class="popup-close" data-popup-close="delivery-popup" href="#"><i class="icon-cross"></i></a>
    </div>
    <div class="overlay overlay-click"></div>
</div>
<div class="popup" id="checkclosedRestaurant" data-popup="checkclosedRestaurant">
    <div class="popup-inner">
        <div class="popup-header"><h3 class="mt-0 fs-20 mb-10 text-dark-green" id="closeMsg">We are closed for the day. Please order your favorite meal @ 9:00AM tomorrow</h3></div>
        <div class="popup-max-hgt">

        </div>
        <a class="popup-close" data-popup-close="checkclosedRestaurant" 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 () {
        $('.gift_card_open').click(function(e){
            $('#gift_card_code').val('');
            $('#gift_card_error').html('');
        });
        $('#redeem_points_value').val('');
        //****  function for increasing cart item value  ****//
        $('.increase.val').click(function (e) {
            e.preventDefault();
            var currentVal = parseInt($(this).prev('.number').val());
            if (!isNaN(currentVal) && currentVal < 20) {
                $(this).prev('.number').val(currentVal + 1);
                var quantity = currentVal + 1;
                var productId = $(this).attr("data-id");
                var promo_amount = parseInt($('#promo_amount').text());
                $.ajax({
                    url: "