@extends('layout.frontend.master')
@section('meta-title', 'Cart - LEREVE')

@push('asset-top')
@endpush

@section('content')
   <section class="page-content ">
      <section class="shopping-cart">
         <div class="container-fluid">
            <div class="row">
               <div class="hero-content page-head">
                   <h2>{{__('MY SHOPPING CART')}} </h2>
               </div>
            </div>
            @if(count($cart['cart']))
               <div class="row cart-cont">
                  <div class=" col-lg-12 col-md-12">
                     <div class="cart-block">
                        <form class="" method="post" action="{{route('update.cart')}}">
                           <ul class="list-group list-group-lg list-group-flush-x mb-6">
                              <li class="list-group-item cart-head">
                                 <div class="row align-items-center">
                                    <div class="col-lg-6 col-md-6">{{ __('Product Name')}} </div>                               
                                    <div class="col-lg-2 col-md-2 text-right">
                                       <div class="price-heading"> {{__('Price')}}  </div>                                   
                                    </div>
                                    <div class="col-lg-2 col-md-2 text-right">{{__('QTY')}}</div>
                                    <div class="col-lg-2 col-md-2 text-right">{{__('Subtotal')}}</div>
                                 </div>
                              </li>
                              @csrf
                              @foreach($cart['cart'] as $key=>$row)
                                 @php
                                 @endphp
                                 <li class="list-group-item">
                                    <div class="row align-items-center">
                                       <div class="col-lg-6 col-md-6">
                                          <div class=" product-part-top">
                                             <div class="product-cart-img">
                                                <a href="{{route('single.product', ['slug'=>$row['product']['slug']])}}">
                                                   <img src="/gallery/products/images/{{$row['product']['thumbnail']}}" alt="" class="img-fluid">
                                                </a>
                                                <a class=" remove-btn  ml-auto" href="{{route('delete.cart', ['id'=>$row['id']])}}">
                                                   <i class="bi bi-trash"></i>
                                                </a>
                                             </div>
                                             <div class="d-flex  h6 product-cart">
                                                <a class="text-body" href="{{route('single.product', ['slug'=>$row['product']['slug']])}}">
                                                   <h3>{{(app()->currentLocale()=='en')?$row['product']['name_en']:$row['product']['name_ar']}}</h3>
                                                </a>
                                                <div class="attribute">
                                                   {{__('Weight')}} : {{$row['weight']}}
                                                </div>
                                                <ul class="product-delvery-dtls">
                                                   <li class="date">{{session('deliveryType')}}</li>
                                                   @if(session('deliveryType')=='Delivery')
                                                      <li class="date">{{(app()->currentLocale()=='en')?$row['area']['name_en']:$row['area']['name_ar']}}</li>
                                                      <li class="date">{{$row['delivery_date']}}</li>
                                                      <li class="time">{{date('h:i A', strtotime($row['slot']['start']))}} - {{date('h:i A', strtotime($row['slot']['end']))}}</li>
                                                   @else
                                                      <li class="date">{{$row['branch']['name']}}</li>
                                                   @endif
                                                   <li class="message"> {{$row['message']}}</li>
                                                </ul>
                                             </div>
                                          </div>
                                       </div>
                                       <div class="col-lg-2 col-md-2">
                                          <div class="price text-right">{{$row['price']}} {{__('KWD')}}</div>
                                       </div>
                                       <div class="col-lg-2 col-md-2">
                                          <div class="d-flex align-items-end justify-content-end">
                                             <div class="qty-count">
                                                <span class="input-group-btn">
                                                   <button type="button" class="btn-number  minus" disabled="disabled" data-type="minus" data-field="quantity[{{$row['id']}}]">
                                                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-lg" viewBox="0 0 16 16">
                                                         <path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z"/>
                                                      </svg>
                                                   </button>
                                                </span>
                                                <input type="text" name="quantity[{{$row['id']}}]" class="input-number" value="{{$row['quantity']}}" min="1" max="10">
                                                <span class="input-group-btn">
                                                   <button type="button" class="btn-number plus" data-type="plus" data-field="quantity[{{$row['id']}}]">
                                                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
                                                         <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                                                      </svg>
                                                   </button>
                                                </span>
                                             </div>
                                          </div>
                                       </div>
                                       <div class="col-lg-2 col-md-2 text-right">
                                          <div class="ml-auto price">{{$row['quantity'] * $row['price']}} {{__('KWD')}}</div>
                                       </div>
                                    </div>
                                    @if($row['addons'])
                                       <div class="addons-list">
                                          <h4>{{__('Add Ons')}} </h4>
                                          <ul class="list-group list-group-lg list-group-flush-x mb-6">
                                             @foreach($row['addons'] as $addon)
                                                <li class="list-group-item">
                                                   <div class="row align-items-center">
                                                      <div class="col-lg-6 col-md-6">
                                                         <div class=" product-part-top">
                                                            <div class="product-cart-img">
                                                               <a href="{{ route('single.product', ['slug' => $row['product']['slug']]) }}">
                                                                  <img src="/gallery/addon/{{$addon['addon']['thumbnail']}}" alt="" class="img-fluid">
                                                               </a>
                                                               <a class=" remove-btn  ml-auto" href="{{route('delete.addon.cart',['id'=>$row['id'], 'addonid'=>$addon['addon']['id']])}}">
                                                                  <i class="bi bi-trash"></i>
                                                               </a>
                                                            </div>
                                                            <div class="d-flex  h6 product-cart">
                                                               <h3>{{(app()->currentLocale()=='en')?$addon['addon']['name_en']:$addon['addon']['name_ar']}}</h3>
                                                            </div>
                                                         </div>
                                                      </div>
                                                      <div class="col-lg-2 col-md-2">
                                                         <div class="price text-right"> {{$addon['price']}} {{__('KWD')}}</div>
                                                      </div>
                                                      <div class="col-lg-2 col-md-2">
                                                         <div class="d-flex align-items-end justify-content-end">
                                                            <div class="qty-count">
                                                               <span class="input-group-btn">
                                                                  <button type="button" class="btn-number  minus" disabled="disabled" data-type="minus" data-field="qty[{{$row['id']}}][{{$addon['addon']['id']}}]">
                                                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-lg" viewBox="0 0 16 16">
                                                                        <path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z"/>
                                                                     </svg>
                                                                  </button>
                                                               </span>
                                                               <input type="text" name="qty[{{$row['id']}}][{{$addon['addon']['id']}}]" class="input-number" value="{{$addon['qty']}}" min="1" max="10">
                                                               <span class="input-group-btn">
                                                                  <button type="button" class="btn-number plus" data-type="plus" data-field="qty[{{$row['id']}}][{{$addon['addon']['id']}}]" >
                                                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
                                                                        <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                                                                     </svg>
                                                                  </button>
                                                               </span>
                                                            </div>
                                                         </div>
                                                      </div>
                                                      <div class="col-lg-2 col-md-2 text-right">
                                                         <div class="ml-auto price"> {{ $addon['qty']*$addon['price'] }} {{__('KWD')}}</div>
                                                      </div>
                                                   </div>
                                                </li>
                                             @endforeach
                                          </ul>
                                       </div>
                                    @endif
                                 </li>
                              @endforeach 
                           </ul>
                           <div class="col-12 col-md-12 text-right">
                              <button class="btn line-button-dark">{{__('Update')}}</button>
                           </div>
                        </form>
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-lg-8 col-md-12 ">
                     <div class="coupon-box">
                        <h4 class="cupon-head">{{__('APPLY DISCOUNT CODE')}}</h4>
                        <div class="coupon-field">
                           <input class="form-control" id="cartCouponCode" name="couponCode" type="text" placeholder="Enter coupon code" value="{{
                              (count($cart['cart'])) ? 
                                 ( array_key_exists('coupon',$cart['cart'][0]) ? $cart['cart'][0]['coupon']:''):''}}">
                           <div class="coupon-button">
                              <button class="btn primery-btn coupon-apply" type="submit">{{__('Apply')}}</button>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-4 col-md-12 ">
                     <div class="cart-right mt-0"> 
                        <div class="card  ">
                           <div class="card-body">
                              <ul class="list-group list-group-sm list-group-flush-y list-group-flush-x">
                                 <li class="list-group-item d-flex">
                                    <span>{{__('Total')}}  </span> <span class="ml-auto font-size-sm price"><span class="subtotal">{{$cart['cart'][0]['subtotal']}}</span> {{__('KWD')}}</span>
                                 </li>
                                 <li class="list-group-item d-flex">
                                    <span>{{__('Discount Code')}}  </span> <span class="ml-auto font-size-sm price">-<span class="discount">{{($cart['cart'][0]['discount'])?$cart['cart'][0]['discount']:0}}</span> {{__('KWD')}}</span>
                                 </li>
                                 <li class="list-group-item d-flex subtotal">
                                    <span>{{__('Grand Total')}}</span> <span class="ml-auto font-size-sm price"><span class="grand-total"> {{ (float)$cart['cart'][0]['subtotal'] - (float)$cart['cart'][0]['discount'] }}</span> {{__('KWD')}}</span>
                                 </li>
                              </ul>
                           </div>
                        </div>
                        <div class=" cart-btm">
                           <a class="btn primery-btn w-100 float-right" href="{{(auth()->check())?((session('deliveryType')=='Pickup')?route('pickup'):route('checkout')):'#'}}"
                              {{
                                 (!auth()->check()) ? 'data-bs-toggle=modal data-bs-target=#loginPopup' :''
                              }}
                              >{{__('Proceed to Checkout')}}</a>
                        </div>
                     </div>
                  </div>
               </div>
            @else
               <a class="btn  mt-3  w-30 line-button-dark" >
                  {{__('No Product In cart')}}
               </a>
            @endif
            <a class="btn  mt-3  w-100  line-button-dark line-button-dark" href="{{route('products')}}">
               <i class="bi bi-arrow-left"></i>{{__('Continue Shopping')}}
            </a>

         </div>            

      </section>

   </section>

@endsection

@push('asset-bottom')

   <script type="text/javascript">

      jQuery('body').on('click', '.coupon-apply', function(e){

         e.preventDefault();

         jQuery('.error-class').remove();

         code = jQuery('#cartCouponCode').val();

         if(code==''||code=='undefined'){

            jQuery('.coupon-box').append('<div class="error-class text-center text-danger help-block form-text with-errors form-control-feedback">Invalid coupon code!!</div>')

         } else {

            jQuery.ajax({

               url: "/check-coupon/"+code,

               success: function(res){

                  if(res.result=='error'){

                     jQuery('.coupon-box').append('<div class="error-class text-center text-danger help-block form-text with-errors form-control-feedback">'+res.msg+'</div>')

                  } else {

                     jQuery('span.subtotal').text(res.data.subtotal);

                     jQuery('.discount').text(res.data.discount);

                     jQuery('.subtotal .grand-total').text((res.data.subtotal-res.data.discount).toFixed(3));

                     jQuery('.coupon-box').append('<div class="error-class text-center text-success help-block form-text with-errors form-control-feedback">'+res.msg+'</div>')

                  }

                  console.log(res);

               },

               error: function(err){

                  console.log(err);

               }

            });

         }

      });

   </script>

@endpush