@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>ORDER ID :</label>
                    <strong>{{$product['orderItemId']}}</strong>
                  </div>
                </div>
                <div class="order-control d-flex">
                  <div class="order-total-count">
                    <div class="product-code" id="itemCost">{{config('constants.CURRENCY_SYMBOL'). $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" 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>{{$data['totalPrice']}}</strong></td>
                  </tr>
                  <tr>
                    <td>DELIVERY FEE : </td>
                    <td><strong>{{$data['deliveryFee']}}</strong></td>
                  </tr>
                  <tr>
                    <td>VAT {{config('constants.VAT_PERCENTAGE')}}% : </td>
                    <td id="vat_amount"><strong>{{$data['totalPrice'] *  (config('constants.VAT_PERCENTAGE')/100)}}</strong></td>
                  </tr>
                  <tr>
                    <td><strong class="text-blue">TOTAL : </strong></td>
                    <td id="totalPrice"><strong class="text-blue">{{$data['totalPrice'] + $data['deliveryFee']+$data['totalPrice'] *  (config('constants.VAT_PERCENTAGE')/100)}}</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') }}"><button type="button" class="btn btn-blue mb-20">ADD MORE ITEMS</button></a>
              <button type="button" class="btn btn-green mb-20" onclick="location.href='{{url('user/deliveryType') }}'">CHECKOUT</button>
              @else
              <a href="{{ url('user/home') }}"><button type="button" class="btn btn-blue mb-20">ADD MORE ITEMS</button></a>
              <button type="button" class="btn btn-green mb-20" onclick="location.href='{{url('user/login') }}'">SIGNIN & CHECKOUT</button>
              <button type="button" class="btn btn-green mb-20" onclick="location.href='{{url('user/deliveryType') }}'">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">
      @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>
  </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

@endsection
@section('js')

<script>
  $(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: "