@extends('front.layouts.main')

@section('content')

<section class="pt-30">
  <div class="container">
    <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']/1.18)*16)/100}}</strong></td>
              </tr>
              <tr>
                <td>CTL {{config('constants.CTL_PERCENTAGE')}}% : </td>
                <td id="vat_amount"><strong>{{(($data['totalPrice']/1.18)*2)/100}}</strong></td>
              </tr>
              <tr>
                <td><strong class="text-blue">TOTAL : </strong></td>
                <td id="totalPrice"><strong class="text-blue">{{$data['totalPrice'] + $data['deliveryFee']}}</strong></td>
              </tr>
            </tbody>
          </table>
        </div>
        <center><strong style="color:green">
            <p id="success_message"> </p>
          </strong></center>
        <div class="btn-inline mt-20">
          <button type="button" class="btn btn-gray mb-20" data-popup-open="redeem_points_popup">REDEEM POINTS</button>
          @if(session()->has('id'))
          <button type="button" class="btn btn-gray mb-20" data-popup-open="promocode_popup">PROMOCODE</button>
          @endif
          @if(session()->has('id'))
          <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">
          <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">CHECKOUT</button>
        </div>
      </div>
    </div>

    @else
    <center>
      <h3>CART IS EMPTY!</h3>
    </center>
    @endif

  </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>
@endif

<!-- 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 -->
@if(session()->has('id'))
<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: "