@extends('layout.frontend.master')

@php

   use App\Models\Area;
   use App\Models\Timeslot;

   $title = (app()->currentLocale()=='en')?$product->name_en:$product->name_ar;
   $gallery = ($product->gallery)?explode(',', $product->gallery):'';
   $weights = json_decode($product->measurements, true);
   $price = json_decode($product->price, true);
   $sale_price = json_decode($product->sale_price, true);
   $quantity = json_decode($product->quantity, true);
   $dbranch = '';

   foreach($pickups as $pickup){
      if(session('sel-branch') && session('sel-branch')==$pickup->id){
         $bname = $pickup->name;
      }
   }

   if(session('sel-area')){
      $selarea = Area::find(session('sel-area'));
      $selareaname = (app()->currentLocale()=='en')?$selarea->name_en:$selarea->name_ar;
   }

   if(session('sel-slot')){
      $selslot = Timeslot::find(session('sel-slot'));
   }

@endphp

@section('meta-title', 'LEREVE - '.$title)

@push('asset-top')
   <style type="text/css">
      .cart-btn.disabled-cart-btn{
         pointer-events: none !important;
         opacity: 0.7 !important;
      }
      span.selected-data {
          font-weight: 500;
      }
      li.hide-store {
         pointer-events: none;
         opacity: 0.5;
      }
      .var-offer-price{
         /*font-size: 1.5rem;*/
         color: #A0A0A0;
         text-decoration: line-through;
         font-weight: 300;
         margin-left: 10px;
      }
   </style>
@endpush

@section('content')
   <section class="page-content inner-block">
      <div class="product-details" >
         <section class="container-fluid">
            <div class="row">
               <div class="col-lg-6 col-xl-5  order-1 order-lg-1 photoswipe-gallery">
                  <div  class="product-fixed">
                     <div class="photo-gallery " >
                        <div class="zoom-show"></div>
                        <div class="slider slider-for my-gallery">
                           <div>
                              <figure itemprop="associatedMedia" itemscope>
                                 <a href="/gallery/products/images/{{$product->thumbnail}}" itemprop="contentUrl" data-size="1024x922">
                                 <img src="/gallery/products/images/{{$product->thumbnail}}" itemprop="thumbnail" alt="Image description" />
                                 </a>
                              </figure>
                           </div>
                           @if(!empty($gallery))
                              @foreach($gallery as $image)
                                 <div>
                                    <figure itemprop="associatedMedia" itemscope>
                                       <a href="/gallery/products/images/{{$image}}" itemprop="contentUrl" data-size="1024x922">
                                       <img src="/gallery/products/images/{{$image}}" itemprop="thumbnail" alt="Image description" />
                                       </a>
                                    </figure>
                                 </div>
                              @endforeach
                           @endif
                        </div>  
                        <div class="slider slider-nav ">
                           <div><img src="/gallery/products/images/{{$product->thumbnail}}" alt=""/></div>
                           @if(!empty($gallery))
                              @foreach($gallery as $image)
                                 <div><img src="/gallery/products/images/{{$image}}" alt=""/></div>
                              @endforeach
                           @endif
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-lg-6 col-xl-7 order-2 order-lg-2  product-right">
                  <div class="product-details-block">
                     <div class="product-dtls-top">
                        <h3 >{{$title}}</h3>
                        <p>{!! app()->currentLocale()=='en'?substr($product->description_en, 0,20):substr($product->description_ar, 0,20) !!}</p>                     
                     </div>
                     <div class="price-area">
                        <div class="price-block">
                           {{-- @if($sale_price[$weights[0]])
                              @else
                              @endif 
                           --}}
                           @if($product->single_sale_price!=null )
                              @if($product->single_sale_price < $product->single_price)
                                 <div class="price">{{$product->single_sale_price}} KWD<span class="offer-price">{{$product->single_price}} KWD</span></div>
                              @else
                                 <div class="price">{{$product->single_price}} KWD</div>   
                              @endif
                           @elseif($product->single_price!=null)
                              <div class="price">{{$product->single_price}} KWD</div>
                           @else
                              @if($sale_price!='null' && $weights!='null' && $weights!=null)
                                 @if(array_key_exists($weights[0], $sale_price))
                                    @if($sale_price[$weights[0]]&&$sale_price[$weights[0]] < $price[$weights[0]])
                                       <div class="price">{{$sale_price[$weights[0]]}} KWD<span class="offer-price">{{$price[$weights[0]]}} KWD</span></div>
                                    @else
                                       <div class="price">{{$price[$weights[0]]}} KWD</div>
                                    @endif
                                 @endif
                              @endif
                              {{--<div class="price">{{$price[$weights[0]]}} {{__('KWD')}}</div>--}}
                           @endif
                        </div>
                        <div class="stock-block">
                           <span class="stock-text 
                              {{--@if(array_key_exists($weights[0], $quantity))
                                 {{ (app()->getLocale() == 'en') ? ($quantity[$weights[0]] > 0 ? 'instock' : 'out-stock') : ($quantity[$weights[0]] > 0 ? 'المخزون' : 'غير متوفر في المخزون') }}
                              @else
                                 {{ (app()->getLocale() == 'en') ? ('out-stock') : ('غير متوفر في المخزون') }}
                              @endif --}}
                              @if($product->single_quantity)
                                 instock
                              @else
                                 out-stock
                              @endif ">
                              {{-- @if(array_key_exists($weights[0], $quantity))
                                 {{(app()->getLocale() == 'en') ? ($quantity[$weights[0]] > 0 ? __('Stock') : __('Out of Stock')) : ($quantity[$weights[0]] > 0 ? __('المخزون') : __('غير متوفر في المخزون'))}}
                              @else
                                 {{(app()->getLocale() == 'en') ? __('Out of Stock') : __('غير متوفر في المخزون')}}
                              @endif --}}
                              @if($product->single_quantity)
                                 {{(app()->getLocale() == 'en') ? __('Stock') : __('المخزون') }}
                              @else
                                 {{(app()->getLocale() == 'en') ? __('Out of Stock') : __('غير متوفر في المخزون')}}
                              @endif
                          </span>
                        </div>
                     </div>
                     <form method="post" action="{{route('add.to.cart')}}">
                        @csrf
                        @if($product->preparation_time)
                           <div class="attribute-block time" style="background: url({{asset('images/time.svg')}}) no-repeat left center; background-size: 25px;">
                              <h6 class="preparation-block" style="margin-left: 30px; color: #F00;">{{__('Preparation Time')}} : {{$product->preparation_time.' '.$product->units}}</h6>
                           </div>
                        @endif

                        @if($product->show_variation)
                           @if(count($variations))
                              @foreach($variations as $varid=>$variation)
                                 @php
                                    $varTitle = (app()->currentLocale()=='en') ? $variation['main']->name_en:$variation['main']->name_ar;
                                    $input_type = $variation['main']->input_type;
                                    $checkbox_qty = $variation['main']->checkbox_qty;
                                 @endphp
                                 <div class="attribute-block">
                                    <h4>{{$varTitle}} @if($input_type=='text') (+{{$variation['data'][$varid]['price']}} KWD) @endif</h4>
                                    @foreach($variation['maindata'] as $valid=>$varval)
                                       @php
                                          if($input_type!='text'){
                                             $varValTitle = (app()->currentLocale()=='en') ? $varval->name_en:(($varval->name_ar)?$varval->name_ar:$varval->name_en);
                                             $varValPrice = ($variation['data'][$valid]['price']) ? $variation['data'][$valid]['price'] : 0;
                                             $varValSPrice = $variation['data'][$valid]['sale_price'];
                                             $varValQty = $variation['data'][$valid]['quantity'];
                                             $input_name = ($input_type=='checkbox') ? 'variation['.$varid.'][]' : 'variation['.$varid.']';
                                          } else {
                                             $varValTitle = $varTitle;
                                             $varValPrice = ($variation['data'][$varid]['price']) ? $variation['data'][$varid]['price'] : 0;
                                             $varReq = (array_key_exists('text_req', $variation['data'][$varid])) ? $variation['data'][$varid]['text_req']:0;
                                             $input_name = 'variation['.$varid.']';
                                          }
                                       @endphp
                                       @if($input_type == 'text')
                                          <div class="row">
                                             <div class="col-12">
                                                <div class="form-group">
                                                   <input type="text" class="form-control var-text-input" {{$varReq}} name="{{$input_name}}" data-price="{{$varValPrice}}">
                                                   <input type="hidden" name="textprice[{{$varid}}]" value="{{$varValPrice}}">
                                                </div>
                                             </div>
                                          </div>
                                       @else
                                          <div class="row">
                                             <div class="col-6">
                                                <div class="form-check">
                                                   <label class="form-check-label">
                                                      <input 
                                                         class="form-check-input var-check" 
                                                         type="{{$input_type}}" 
                                                         name="{{$input_name}}" 
                                                         value="{{$valid}}" 
                                                         data-sale-price="{{$varValSPrice}}" 
                                                         data-price="{{$varValPrice}}" 
                                                         data-qty="{{$varValQty}}">
                                                      {{$varValTitle}} 
                                                      @if($input_type == 'checkbox')
                                                         @if($varValSPrice)
                                                            (+<span class="price">{{$varValSPrice}} KWD<span class="var-offer-price" style="text-decoration: line-through;">{{$varValPrice}} KWD</span></span>)
                                                         @else
                                                            (+<span class="price">{{$varValPrice}} KWD</span>)
                                                         @endif
                                                         <input type="hidden" name="var_price[{{$valid}}]" value="@if($varValSPrice) {{$varValSPrice}} @else {{$varValPrice}} @endif">
                                                         
                                                      @endif
                                                   </label>
                                                   @error('variation')
                                                   <div class="alert-danger text-start error-msg p-2">{{$message}}</div>
                                                   @enderror
                                                </div>
                                             </div>
                                             <div class="col-6">
                                                @if($checkbox_qty=='on')
                                                   <div class=" qty-btn-area">
                                                      <div class="qty-count var-qty disabled">
                                                         <span class="input-group-btn">
                                                            <button type="button"  class="btn-number  minus" disabled="disabled" data-type="minus" data-field="var_quantity[{{$valid}}]">
                                                               <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" disabled name="var_quantity[{{$valid}}]" class="input-number var-qty-input" value="1" min="1" max="10">
                                                         <span class="input-group-btn">
                                                            <button disabled type="button" class="btn-number plus" data-type="plus" data-field="var_quantity[{{$valid}}]">
                                                               <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>
                                                @endif
                                             </div>
                                          </div>
                                       @endif
                                    @endforeach
                                 </div>
                              @endforeach
                           @endif
                        @endif

                        @if($weights)
                           <div class="attribute-block">
                              <h4>{{ app()->currentLocale() == 'en' ? $category->name_en : $category->name_ar}} {{__('Weight')}}</h4>

                              <div class="select">
                                    
                                 <select class="form-select weight" name="weight" aria-label="Default select example">
                                    @if($weights)
                                       @foreach($weights as $weight)

                                          <option value="{{$weight}}" 
                                             data-price="{{(array_key_exists($weight,$price))?$price[$weight]:0}}" 
                                             data-sale-price="{{(array_key_exists($weight,$sale_price))?$sale_price[$weight]:0}}" 
                                             data-qty="{{(array_key_exists($weight,$quantity))?$quantity[$weight]:0}}">{{$weight}}</option>

                                       @endforeach
                                    @endif

                                 </select>
                       
                                 @error('weight')
                                 <div class="alert-danger text-start error-msg p-2">{{$message}}</div>
                                 @enderror
                              </div>
                           </div>
                        @endif
                        <div class="product-fetuers">
                           <ul class="bottom-list">
                              <li class="delivery-pickup" style="background: url({{asset('images/vehicle.svg')}}) no-repeat left center; background-size: 33px;">
                                 <div class="bottom-right ">
                                    <a class="delivery-link" data-bs-toggle="modal" data-bs-target="#deliveryPickup">
                                       {{__('Select Delivery/Pickup')}} <span class="selected-data selected-type">
                                       @if(session('deliveryType'))
                                          {{': '.session('deliveryType')}}
                                       @endif
                                       </span>
                                    </a>
                                    <div class="modal fade popup-store-list  time-popup" id="deliveryPickup" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="storeListLabel" aria-hidden="true">
                                       <div class="modal-dialog modal-dialog-centered  modal-dialog-scrollable">
                                          <div class="modal-content">
                                             <div class="modal-header">
                                                <h5 class="modal-title" id="staticBackdropLabel">{{ __('Select Delivery/Pickup') }}</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                             </div>
                                             <div class="modal-body">
                                                <ul class="timelist">
                                                   <li>
                                                      <div class="radio time">
                                                         <input id="type-1" class="deliveryType" name="deliveryType" type="radio" {{ (session('deliveryType')=='Delivery')?'checked':(session('deliveryType')?'':'checked') }} data-name="Delivery" value="Delivery">
                                                         <label for="type-1" class="radio-label">
                                                            {{__('Delivery')}}
                                                         </label>
                                                      </div>
                                                   </li>
                                                   <li>
                                                      <div class="radio time">
                                                         <input id="type-2" class="deliveryType" name="deliveryType" type="radio" {{ (session('deliveryType')=='Pickup')?'checked':'' }} data-name="Pickup" value="Pickup">
                                                         <label for="type-2" class="radio-label">
                                                            {{__('Pickup')}}
                                                         </label>
                                                      </div>
                                                   </li>
                                                </ul>
                                                <div class="msg-btn">
                                                   <button class="pickup-submit @if(session('deliveryType')) again-submit @endif primery-btn bdr-radius float-end mt-4" type="button" id="pickup-submit" data-bs-dismiss="modal"> {{__('Submit')}}</button>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 @error('deliveryType')
                                 <div class="alert-danger text-start error-msg p-2">{{$message}}</div>
                                 @enderror
                              </li>
                              {{-- <ul class="pickup-lists type-lists" @if(session('deliveryType')=='Delivery' || !array_key_exists('deliveryType',session()->all())) style="display: none;" @endif>
                                 @if(count($pickups)==0)
                                    <li class="area" style="background: url({{asset('images/shop.svg')}}) no-repeat left center;">
                                       <div class="bottom-right ">
                                          <a class="delivery-link" data-bs-toggle="modal" data-bs-target="#deliveryArea">
                                             {{__('No Branch Available')}}
                                          </a>
                                       </div>
                                    </li>
                                 @else
                                    <li class="area" style="background: url({{asset('images/shop.svg')}}) no-repeat left center;">
                                       <div class="bottom-right ">
                                          <a class="delivery-link" data-bs-toggle="modal" data-bs-target="#deliveryType">
                                             {{__('Select Area')}} 
                                             <span class="selected-data selected-branch">
                                                @if(session('sel-branch'))
                                                   : {{$bname}}
                                                @endif
                                             </span>
                                          </a>
                                          <div class="modal fade popup-store-list  time-popup" id="deliveryType" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="storeListLabel" aria-hidden="true">
                                             <div class="modal-dialog modal-dialog-centered  modal-dialog-scrollable">
                                                <div class="modal-content">
                                                   <div class="modal-header">

                                                      <h5 class="modal-title" id="staticBackdropLabel">{{ __('Select Pickup Branch') }}</h5>

                                                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                                                   </div>

                                                   <div class="modal-body">

                                                      <ul class="timelist">

                                                         @foreach($pickups as $key=>$branch)

                                                            <li @if($branch->store_busy) class="hide-store" @endif >

                                                               <div class="radio time">

                                                                  <input id="branch-{{$key}}" class="branch_id" name="branch" type="radio" 
                                                                  {{ (session('sel-branch')==$branch->id) ? 'checked' : ((!session('sel-branch') && $key==0 && $branch->store_busy==0)?'checked':'') }}

                                                                  {{($key==0 && $branch->store_busy==0)?'checked':''}} data-name="{{$branch->name}}" data-id="{{$branch->id}}" value="{{$branch->id}}">

                                                                  <label for="branch-{{$key}}" class="radio-label">

                                                                     {{$branch->name}}

                                                                  </label>

                                                               </div>

                                                            </li>

                                                         @endforeach

                                                      </ul>

                                                      <div class="msg-btn">

                                                         <button class="@if(session('sel-branch')) again-submit @endif branch-submit primery-btn bdr-radius float-end mt-4" id="sel-branch" type="button" data-bs-dismiss="modal"> {{__('Submit')}}</button>

                                                      </div>

                                                   </div>

                                                </div>

                                             </div>

                                          </div>

                                       </div>
                                       
                                       @error('branch')
                                       <div class="alert-danger text-start error-msg p-2">{{$message}}</div>
                                       @enderror
                                      
                                      
                                    </li>

                                 @endif
                                
                              </ul> --}}

                              <ul class="delivery-lists type-lists" @if(session('deliveryType')=='Pickup') style="display: none;" @endif>

                                 @if(count($areas)==0)

                                    <li class="area" style="background: url({{asset('images/shop.svg')}}) no-repeat left center;">

                                       <div class="bottom-right ">

                                          <a class="delivery-link" data-bs-toggle="modal" data-bs-target="#deliveryArea">

                                             {{__('No Area Available')}}

                                          </a>

                                       </div>

                                    </li>

                                 @else

                                    {{-- <li class="area" style="background: url({{asset('images/shop.svg')}}) no-repeat left center;">

                                       <div class="bottom-right ">

                                          <a class="delivery-link" data-bs-toggle="modal" data-bs-target="#deliveryArea">

                                             {{__('Select Area')}} 

                                             <span class="selected-data selected-area">

                                                @if(session('sel-area'))

                                                   : {{$selareaname}}

                                                @endif

                                             </span>

                                          </a>

                                          <div class="modal fade popup-store-list  time-popup" id="deliveryArea" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="storeListLabel" aria-hidden="true">

                                             <div class="modal-dialog modal-dialog-centered  modal-dialog-scrollable">

                                                <div class="modal-content">

                                                   <div class="modal-header">

                                                      <h5 class="modal-title" id="staticBackdropLabel">{{ __('Select Your Delivery Area') }}</h5>

                                                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                                                   </div>

                                                   <div class="modal-body">

                                                      <ul class="timelist" {{app()->currentLocale() == 'en' ? "dir='rtl'":''}}>

                                                         @foreach($areas as $branch => $narea)

                                                            @foreach($narea as $key => $area)

                                                                  @if($key == 0 && $dbranch == '')

                                                                     @php 

                                                                        $dbranch = $branch; 

                                                                     @endphp

                                                                  @endif

                                                                  

                                                             

                                                                  @if($area)

                                                                     @php

                                                                        // Extract the area name based on the locale

                                                                        if(app()->currentLocale() == 'en') {

                                                                              $aname = $area->name_en;

                                                                        } else {

                                                                              $aname = $area->name_ar;

                                                                        }

                                                                     @endphp



                                                                        <li>

                                                                           <div class="radio time">

                                                                                 <input id="radio-{{$key}}" class="area" name="area" type="radio" {{($key == 0 || session('sel-area')) ? 'checked' : ''  }} data-name="{{$aname}}" data-id="{{$branch}}" value="{{$area->id}}">

                                                                                 <label for="radio-{{$key}}" class="radio-label">

                                                                                    {{$aname}} 

                                                                                 </label>

                                                                           </div>
                                                                        
                                                                         
                                                                        </li>

                                                                     @endif

                                                               @endforeach

                                                            @endforeach

                                                         </ul>





                                                      <div class="msg-btn">

                                                         <button class="@if(session('sel-area')) again-submit @endif primery-btn bdr-radius float-end mt-4" id="sel-area" type="button" data-bs-dismiss="modal"> {{__('Submit')}}</button>

                                                      </div>

                                                   </div>

                                                </div>

                                             </div>

                                          </div>

                                       </div>
                                       @error('area')
                                       <div class="alert-danger text-start error-msg p-2">{{$message}}</div>
                                       @enderror
                                    </li> --}}

                                    {{-- <li class="calendar">

                                       <div class="bottom-right ">

                                          <a class="delivery-link" data-bs-toggle="modal" data-bs-target="#deliveryDate">

                                             {{__('Select Delivery date')}} 

                                             <span class="selected-data selected-date">

                                                @if(session('sel-date'))

                                                   : {{session('sel-date')}}

                                                @endif

                                             </span>

                                          </a>

                                          <div class="modal fade popup-store-list  time-popup" id="deliveryDate" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="storeListLabel" aria-hidden="true">

                                             <div class="modal-dialog modal-dialog-centered  modal-dialog-scrollable">

                                                <div class="modal-content">

                                                   <div class="modal-header">

                                                      <h5 class="modal-title" id="staticBackdropLabel"> {{__('Select Your Delivery date')}} </h5>

                                                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                                                   </div>
                                                   

                                                   <div class="modal-body">

                                                      <ul class="timelist">
                                                      <!-- @php
                                                             // Get the last timeslot
                                                             $lastTimeslot = $slots->last();
                                                             
                                                             // Initialize hoursDifference to avoid undefined variable issue
                                                             $hoursDifference = null;

                                                             // Check if there are any timeslots to avoid errors
                                                             if ($lastTimeslot) {
                                                                 // Get the end time of the last timeslot
                                                                 $endTime = \Carbon\Carbon::parse($lastTimeslot->end);
                                                             
                                                                 // Get the current time
                                                                 $currentTime = \Carbon\Carbon::now();
                                                             
                                                                 // Calculate the difference in hours
                                                                 $hoursDifference = $currentTime->diffInHours($endTime, false); // false for past time checking
                                                             }

                                                             // Check if it's still before 12:00 PM (noon) today
                                                             $isBeforeNoon = \Carbon\Carbon::now()->isBefore(\Carbon\Carbon::today()->setTime(12, 0));
                                                         @endphp

                                                         @if ($hoursDifference !== null && $hoursDifference > 4 && $isBeforeNoon)
                                                             <li>
                                                                 <div class="radio time">
                                                                     <input id="del-date-today" class="del-date" name="del_date" type="radio"
                                                                         data-name="{{ \Carbon\Carbon::today()->format('l, d, M') }}"
                                                                         value="{{ \Carbon\Carbon::today()->format('m/d/Y') }}">
                                                                     <label for="del-date-today" class="radio-label">
                                                                         {{ \Carbon\Carbon::today()->format('l, d, M') }}
                                                                     </label>
                                                                 </div>
                                                             </li>
                                                         @endif -->



                                                         @for($i = 0; $i < 4; $i++)
                                                            <li>
                                                               <div class="radio time">
                                                                  <input id="del-date-{{$i}}" class="del-date" name="del_date" type="radio" {{ ($i == 0) || session('sel-date') ? 'checked' : '' }} data-name="{{ date('l, d, M', strtotime('+' . ($i) . ' day')) }}" value="{{ date('m/d/Y', strtotime('+' . ($i) . ' day')) }}">
                                                                  <label for="del-date-{{$i}}" class="radio-label">{{ date('l, d, M', strtotime('+' . ($i) . ' day')) }}</label>
                                                               </div>
                                                            </li>
                                                         @endfor


                                                         <li>

                                                            <div class="input-group date" >

                                                               <input type='text' class="custom-field input_del_date" placeholder="Select Date" name="input_del_date" />

                                                               <span class="input-group-addon input-group-text"></span>

                                                            </div> 

                                                         </li>

                                                      </ul>

                                                      <div class="msg-btn">

                                                         <button class=" primery-btn bdr-radius float-end mt-4" type="button" data-bs-dismiss="modal"> {{__('Submit')}}</button>

                                                      </div>

                                                   </div>

                                                </div>

                                             </div>

                                          </div>

                                       </div>

                                       @error('del_date')
                                       <div class="alert-danger text-start error-msg p-2">{{$message}}</div>
                                       @enderror

                                    </li> --}}

                                    {{-- <li class="time">

                                       <div class="bottom-right">

                                          <a class="delivery-link" data-bs-toggle="modal" data-bs-target="#deliveryTime">

                                             {{__('Select Delivery Time')}} 

                                             <span class="selected-data selected-slot selected_slot_js">

                                                @if(session('sel-slot')) 
                                                : {{__('Between')}} {{date('h:i A', strtotime($selslot->start))}} {{__('To')}} {{date('h:i A', strtotime($selslot->end))}}
                                                @endif

                                             </span>

                                          </a>

                                          <div class="modal fade popup-store-list  time-popup" id="deliveryTime" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="storeListLabel" aria-hidden="true">

                                             <div class="modal-dialog modal-dialog-centered  modal-dialog-scrollable">

                                                <div class="modal-content">

                                                   <div class="modal-header">

                                                      <h5 class="modal-title" id="staticBackdropLabel">{{__('Select Delivery Time')}}</h5>

                                                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>                        

                                                   </div>

                                                   <div class="modal-body">

                                                      <ul class="timelist">

                                                         @php

                                                            $day = date('l', strtotime('+1 day'));

                                                         @endphp

                                                         @if(count($slots))

                                                            @foreach($slots as $i=>$slot)

                                                               <li>

                                                                  <div class="radio time">

                                                                     <input id="time-{{$i}}" name="slot" type="radio" {{($i==0)?'checked':''}} data-name="Between {{date('h:i A', strtotime($slot->start))}} To {{date('h:i A', strtotime($slot->end))}}" value="{{$slot->id}}">

                                                                     <label for="time-{{$i}}" class="radio-label">{{__('Between')}} {{date('h:i A', strtotime($slot->start))}} {{__('To')}} {{date('h:i A', strtotime($slot->end))}}</label>

                                                                  </div>

                                                               </li>

                                                            @endforeach

                                                         @else

                                                            <li>{{__('No Slots available')}}</li>

                                                         @endif

                                                      </ul>

                                                      <div class="msg-btn">

                                                         <button class=" primery-btn bdr-radius float-end mt-4 js_confirm" type="button" data-bs-dismiss="modal"> {{__('Submit')}}</button>

                                                      </div>

                                                   </div>

                                                </div>

                                             </div>

                                          </div>

                                       </div>

                                       @error('slot')
                                       <div class="alert-danger text-start error-msg p-2">{{$message}}</div>
                                       @enderror

                                    </li> --}}

                                 @endif

                              </ul>

                              <li class="message">

                                 <div class="bottom-right">

                                     <a class="delivery-link" data-bs-toggle="modal" data-bs-target="#cardMessage">

                                       {{__('Card message')}} <span class="selected-data selected-message"></span>

                                     </a>

                                     <div class="modal fade popup-store-list message-popup time-popup" id="cardMessage" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="storeListLabel" aria-hidden="true">

                                         <div class="modal-dialog modal-dialog-centered  modal-dialog-scrollable">

                                             <div class="modal-content">

                                                 <div class="modal-header">

                                                     <h5 class="modal-title" id="staticBackdropLabel">{{__('Write Your Message')}}</h5>

                                                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                                                 </div>

                                                 <div class="modal-body">

                                                   <div class="message-part">

                                                      <textarea class="pup-text-area" name="message" placeholder="Write Your Message (30 letters only )"></textarea></div>

                                                   <div class="msg-btn">

                                                      <button class=" primery-btn bdr-radius float-end mt-4" type="button" data-bs-dismiss="modal"> {{__('Submit')}}</button>

                                                   </div>

                                                 </div>

                                             </div>

                                         </div>

                                     </div>

                                 </div>
                                 
                              </li>

                           </ul>

                        </div>                      

                        <!-- <div class="modal fade popup-store-list  time-popup" id="deliveryPinCheck" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="storeListLabel" aria-hidden="true">

                           <div class="modal-dialog modal-dialog-centered  modal-dialog-scrollable">

                               <div class="modal-content">

                                   <div class="modal-header">

                                       <h5 class="modal-title" id="staticBackdropLabel">Check  our Delivery PIN codes</h5>

                                       <p>Select Your location  and  check our delivery PIN Codes</p>

                                       <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                                   </div>

                                   <div class="modal-body">

                                       <div class="pinfilter-block">

                                          <div class="row justify-content-center">

                                             <div class="col-lg-3">  <div class="select-style">                                 

                                                <select class="form-select">

                                                   <option data-tokens="Popularity">Select Outlet </option>

                                                   <option data-tokens="mavoor">Calicut - Mavoor Road  </option>

                                                   <option data-tokens="edapally">Ernakulam -Edapally </option>

                                                   <option data-tokens="mg">Ernakulam -Mg Road </option>

                                                </select>

                                             </div></div>

                                             <div class="col-lg-3">  <div class="select-style">                                 

                                                <select class="form-select">

                                                   <option data-tokens="Popularity">Select district </option>

                                                   <option data-tokens="India">Calicut </option>

                                                   <option data-tokens="Kannur">Kannur</option>

                                                   <option data-tokens="Malapuram">Malapuram</option>

                                                   <option data-tokens="thiruvananthapuram">thiruvananthapuram</option>

                                                </select>

                                             </div></div>

                                             <div class="col-lg-3">  <div class="select-style">                                 

                                                <select class="form-select">

                                                   <option data-tokens="Popularity">Select Area </option>

                                                   <option data-tokens="Attingal ">Attingal  </option>

                                                   <option data-tokens="Nedumangad ">Nedumangad </option>

                                                   <option data-tokens="Neyyattinkara ">Neyyattinkara </option>

                                                   <option data-tokens="Varkala  ">Varkala  </option>

                                                </select>

                                             </div></div>

                                             <div class="col-lg-12">

                                                <div class="d-flex find-btn">

                                                   <button class="primery-btn">Find Pin Codes </button>

                                                </div>

                                             </div>

                                          </div>

                                       </div>

                                       <div class="pin-filter-location">

                                          <ul class="pin-list">

                                             <li><div class="pin-box"><h4>695614</h4><p>Adayamon</p></div></li>

                                             <li><div class="pin-box"><h4>695102</h4><p>Alamcode</p></div></li>

                                             <li><div class="pin-box"><h4>695607</h4><p>Aliyadu</p></div></li>

                                             <li><div class="pin-box"><h4>695102</h4><p>Altharamoodu</p></div></li>

                                             <li><div class="pin-box"><h4>695606</h4><p>Anakudy</p></div></li>

                                             <li><div class="pin-box"><h4>695306</h4><p>Anathalavattom</p></div></li>

                                             <li><div class="pin-box"><h4>695029</h4><p>Anayara</p></div></li>

                                             <li><div class="pin-box"><h4>695584</h4><p>Andoorkonam</p></div></li>

                                             <li><div class="pin-box"><h4>695309</h4><p>Anjengo</p></div></li>

                                             <li><div class="pin-box"><h4>695023</h4><p>Attakulangara</p></div></li>

                                             <li><div class="pin-box"><h4>695103</h4><p>Anathalavattom</p></div></li>

                                             <li><div class="pin-box"><h4>695103</h4><p>Ayilam</p></div></li>

                                             <li><div class="pin-box"><h4>695306</h4><p>Anathalavattom</p></div></li>

                                          </ul>

                                       </div>

                                   </div>

                               </div>

                           </div>

                        </div> -->

                        <div class="cta-part">
                           <div class=" qty-btn-area">
                              <div class="qty-count">
                                 <span class="input-group-btn">
                                    <button type="button" class="btn-number  minus" disabled="disabled" data-type="minus" data-field="quantity">
                                       <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" class="input-number" value="1" min="1" max="10">
                                 <span class="input-group-btn">
                                    <button type="button" class="btn-number plus" data-type="plus" data-field="quantity">
                                       <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 class="product-details-btn">
                              @if($product->show_addon)
                                 <a href="#" data-bs-toggle="modal" data-bs-target="#extra-special"  class="btn cart-btn primery-btn bdr-radius @if($product->single_quantity<1 || $product->show_variation) disabled-cart-btn @endif">
                                 <i class="bi bi-cart3"></i>{{__('Add to Cart')}} 
                                 </a>
                              @else
                                 <button class="btn cart-btn primery-btn bdr-radius @if($product->single_quantity<1 ) disabled-cart-btn @endif add-to-cart">{{__('Add to Cart')}} </button>
                              @endif
                           </div>
                        </div>
                        <div class="product-accordion">

                           <div class="accordion" id="accordionExample">

                              <div class="accordion-item">

                                 <h2 class="accordion-header" id="product-accordion-tab1">

                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

                                       {{__('General Info')}}

                                    </button>

                                 </h2>

                                 <div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="product-accordion-tab1" data-bs-parent="#accordionExample">

                                    <div class="accordion-body">

                                       <p>

                                          {!! app()->currentLocale()=='en'?$product->description_en:$product->description_ar !!}

                                       </p>

                                    </div>

                                 </div>

                              </div>

                              <!-- <div class="accordion-item">

                                <h2 class="accordion-header" id="product-accordion-tab2">

                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

                                       Ingredients

                                    </button>

                                 </h2>

                                 <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="product-accordion-tab2" data-bs-parent="#accordionExample">

                                    <div class="accordion-body">

                                       <p> Quisque sapien augue, ornare id leo a, tristique elementum justo. Praesent non nulla sagittis, sollicitudin justo id, varius erat. Nunc sed pharetra nisl. Cras et suscipit felis, in lacinia sapien. Integer venenatis sagittis massa, eu eleifend nibh venenatis in. Pellentesque a aliquet urna. Curabitur tortor metus, ultrices sed mi at, sagittis imperdiet turpis. Suspendisse nec luctus nunc. Fusce in arcu quis lacus mollis ultrices.</p>

                                    </div>

                                 </div>

                              </div> -->

                           </div>

                        </div> 

                        <!-- Start  Add On extra special -->
                        <div class="modal fade popup-store-list popup-extra" id="extra-special" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="storeListLabel" aria-hidden="true">
                           <div class="modal-dialog modal-dialog-centered">
                              <div class="modal-content">
                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                 <div class="modal-header">
                                    <h5 class="modal-title" id="storeListLabel">{{__('Add on something to make it extra special!')}} </h5>
                                 </div>
                                 <div class="modal-body">
                                    <div class="row">
                                       @if($product->addon_val!=null && $product->addon_val!='null')
                                          @php $vals = json_decode($product->addon_val, true); @endphp
                                          
                                          @foreach($addons as $akey=>$addon)
                                             @if(in_array($addon['main']['id'], $vals))
                                                @php
                                                   $input = $addon['main']['input_type'];
                                                @endphp
                                                <h4>
                                                   {{(app()->currentLocale()=='en')?$addon['main']['name_en']:$addon['main']['name_ar']}} 
                                                   <small style="font-size: 0.7rem;">({{__('You can select')}}@if($input=='radio') {{__('only one')}} @else {{__('multiple')}} @endif )</small>
                                                </h4>

                                                @foreach($addon['value'] as $avkey=>$value)
                                                   <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                      <div class="extra-list">
                                                         <div class="extra-products-img">
                                                            @if($value->thumbnail)
                                                               <img src="/gallery/addon/{{$value->thumbnail}}" alt="Extra">
                                                            @else
                                                               <img src="{{asset('images/products/extra-1.jpg') }}" alt="Extra">
                                                            @endif
                                                         </div>
                                                         <div class="extra-content">
                                                            <h4>{{(app()->currentLocale()=='en')?$value->name_en:$value->name_ar}}</h4>
                                                            <div class="extra-bottom">
                                                               <div class="price">{{$value->price}} {{__('KWD')}}</div>
                                                               <div class="add-btn">
                                                                  <label class="container" for="extra[{{$value->id}}]">
                                                                     <input type="{{$input}}" name="addon[]" value="{{$value->id}}" id="extra[{{$value->id}}]">
                                                                     <input type="hidden" name="amount[{{$value->id}}]" value="{{$value->price}}">
                                                                     <span class="checkmark"></span>
                                                                     <div class="qty-count">
                                                                        <div class="qty-box">
                                                                           <span class="input-group-btn">
                                                                              <button type="button" class="btn-number  minus" disabled="disabled" data-type="minus" data-field="qty[{{$value->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[{{$value->id}}]" class="input-number" value="1" min="{{$addon['main']->minimum}}" max="{{$addon['main']->maximum}}">
                                                                           <span class="input-group-btn">
                                                                              <button type="button" class="btn-number plus" data-type="plus" data-field="qty[{{$value->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>
                                                                  </label>
                                                               </div>
                                                            </div>
                                                         </div>
                                                      </div>
                                                   </div>
                                                @endforeach
                                             @endif
                                          @endforeach
                                       @endif
                                    </div>
                                 </div>
                                 <div class="modal-footer">
                                    <!-- <div class="float-start"> <button class="btn primery-btn add-to-cart">{{__('SKIP & CONTINUE')}} </button></div> -->
                                    <div class="float-end"> <button class="btn primery-btn add-to-cart">{{__('CONTINUE')}} </button></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <!-- End  Add On extra special -->
                        <input type="hidden" name="product_id" value="{{$product->id}}">
                        <input type="hidden" name="branch_id" value="{{$dbranch}}" class="branch">
                        <input type="hidden" name="price" value="
                        {{--@if($product->show_variation)
                           0
                        @else --}}
                           {{$product->display_price}}
                        {{--@endif--}}
                        " class="price">
                        <input type="hidden" name="baseprice" value="{{$product->display_price}}">

                     </form>

                  </div>

               </div>

            </div>

         </section>



         <div class="recomend-product ">

            <div class="page-head">

               <h2>{{__('You Might Also Like')}}</h2>

            </div>

            <div class="product-listing">

               <div class="container-fluid">

                  <div class="product-slider main-slider row">

                     @foreach($recommended as $product)

                        @if($product->single_sale_price)

                           @php

                              $percent = (($product->single_price-$product->single_sale_price)/$product->single_price) * 100;

                              

                              $percent = ceil($percent);

                           @endphp

                        @endif

                        @php

                         $percent = (($product->single_price-$product->single_sale_price)/$product->single_price) * 100;

                              

                              $percent = ceil($percent);

                           $weights = json_decode($product->measurements, true);

                        @endphp

                        <div class="col-lg-6 product-col">

                           <div class="product">

                              <div class="product-image">

                                  

                                 @if($percent)

                                    <div class="ribbon offer">{{$percent}}% {{__('OFF')}}</div> 

                                 @endif

                                 <a  href="{{route('single.product', ['slug'=>$product->slug])}}"><img class="img-fluid" src="/gallery/products/images/{{$product->thumbnail}}" alt="product"></a>

                              </div>

                              <div class="product-content">

                                 <h4> 

                                    <a  href="{{route('single.product', ['slug'=>$product->slug])}}">{{ (app()->getlocale()=='en') ? $product->name_en : $product->name_ar }}</a>

                                 </h4>
                                 @if($product->single_sale_price < $product->single_price && $product->single_sale_price!='null' && $product->single_sale_price!=null)

                                    <div class="price">{{$product->single_sale_price}} {{__('KWD')}} <span class="offer-price">{{$product->single_price}} {{__('KWD')}}</span></div>

                                 @else

                                    <div class="price">{{$product->single_price}} {{__('KWD')}}</div>

                                 @endif

                              

                                 {{--<div class="add-cart">

                                    @if(count($weights)>1)

                                       <a href="{{route('single.product', ['slug'=>$product->slug])}}" class="primery-btn"> <span class="cart-icon"></span>{{__('Select Options')}}</a>

                                    @else

                                       <a href="{{route('single.product', ['slug'=>$product->slug])}}" class="primery-btn"> <span class="cart-icon"></span>{{__('Add To Cart')}}</a>

                                    @endif

                                 </div>--}}

                              </div>

                           </div>

                        </div>

                     @endforeach

                  </div>

               </div>

            </div>

         </div>



         <div class="recomend-product browsing-block">

            <div class="page-head">

               <h2>{{__('Keep Browsing')}}</h2>

            </div>   

            <div class="category-list">

               <div class="container-fluid">

                  <div class="category-slider main-slider">

                     @foreach($categories as $category)

                        <div class="cat-items">

                           <div class="cat-block">

                              <a href="{{route('product_cat', ['slug'=>$category->slug])}}">

                                 <div class="category-img">

                                    <img src="/gallery/category/{{$category->thumbnail}}" alt="category">

                                 </div>

                                 <div class="cate-head">

                                    <h3>  {{(app()->currentLocale()=='en')?$category->name_en:$category->name_ar}}  </h3>

                                    <div class="more-btn">{{__('Shop Now')}}</div>

                                 </div>

                              </a>

                           </div>

                        </div>

                     @endforeach

                  </div>

               </div>

            </div>

         </div>

      </div>

   </section>

   <section class="review_section">
      <div class="container-fluid">
      <div class="row">
         @if(Auth::check())
         <div class="col-sm-12">
            <div class="wrapper">
               <h3>{{__('Rate this ')}}{{(app()->currentLocale()=='en')?$product->name_en:$product->name_ar}}</h3>
               <form action="{{route('user.review.create')}}" method="post">
                  @csrf
                  <input type="hidden" name="product_id" value="{{$product->id}}">
                  <input type="hidden" name="puser_id" value="{{Auth::user()->id}}">
                  <div class="rating">
                     <input type="number" name="rating" hidden>
                     <i class='bx bx-star star' style="--i: 0;"></i>
                     <i class='bx bx-star star' style="--i: 1;"></i>
                     <i class='bx bx-star star' style="--i: 2;"></i>
                     <i class='bx bx-star star' style="--i: 3;"></i>
                     <i class='bx bx-star star' style="--i: 4;"></i>
                  </div>

                  <textarea name="opinion" cols="30" rows="5" placeholder="{{__('Your opinion...')}}"></textarea>
                  <div class="btn-group">
                     <button type="submit" class="btn cart-btn primery-btn bdr-radius ">{{__('Submit')}}</button>
                
                  </div>
               </form>
            </div>
         </div>
         @endif
         {{-- @if(count($review) > 0)
         <div class="col-sm-12">
            <ul>
               @foreach($review as $review)
               <li>{{$review->rating}} <br>
                  {{$review->review}}</li>
               @endforeach
            </ul>
         </div>
         @endif --}}
      </div>
      </div>
   </section>

@endsection 

@push('asset-bottom')
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/boxicons/2.1.1/css/boxicons.min.css" integrity="sha512-nOk7sj5T6Zi3Ond5VHhc+L4WHvRuRhV/cOcWWDl2mOyTetiIfuv56UJzD0yYhz9Kqwk1PpU0/PX5+qpX43hVWg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

   <script src='{{ asset("js/photoswipe.min.js") }}'></script>
   <script src='{{ asset("js/photoswipe-ui-default.min.js") }}'></script>
   <script src='{{ asset("js/script.js") }}'></script>
   <script type="text/javascript">

      $(document).ready(function() {   

         $(document).on('click', '.dropdown-menu', function(e) {

            e.stopPropagation();

         });

      });


      const allStar = document.querySelectorAll('.rating .star')
      const ratingValue = document.querySelector('.rating input')

      allStar.forEach((item, idx)=> {
         item.addEventListener('click', function () {
            let click = 0
            ratingValue.value = idx + 1

            allStar.forEach(i=> {
               i.classList.replace('bxs-star', 'bx-star')
               i.classList.remove('active')
            })
            for(let i=0; i<allStar.length; i++) {
               if(i <= idx) {
                  allStar[i].classList.replace('bx-star', 'bxs-star')
                  allStar[i].classList.add('active')
               } else {
                  allStar[i].style.setProperty('--i', click)
                  click++
               }
            }
         })
      })

   </script>
   <script>
      var val=''; var name=""; var btn='';
      $('#deliveryDate .date').datepicker({

         startDate: "+4d",
         todayBtn: "linked",
         autoclose: true,
         // todayHighlight: true

      });

      jQuery('body').on('change', '.weight', function(){
         $this = jQuery(this);
         // console.log($this);
         val = jQuery(this).val();
         // alert(val);
         price = $this.find('option[value="'+val+'"]').data('price');
         sprice = $this.find('option[value="'+val+'"]').data('sale-price');
         qty = $this.find('option[value="'+val+'"]').data('qty');
         // console.log(price);console.log(sprice);console.log(qty);
         if(sprice!='' && sprice!=undefined){
            phtml = '<div class="price">'+sprice+' KWD<span class="offer-price">'+price+' KWD</span></div>';
            jQuery('.price').val(sprice);
         }
         else{
            phtml = '<div class="price">'+price+'</div>';
            jQuery('.price').val(price);
         }
         if(qty){
            $cls = 'instock';
            $text = 'Stock';
            jQuery('.cart-btn').removeClass('disabled-cart-btn');
         } else {
            $cls = 'out-stock';
            $text = 'Out of stock';
            jQuery('.cart-btn').addClass('disabled-cart-btn');
         }
         shtml = '<span class="stock-text '+$cls+'">'+$text+'</span>';
         jQuery('.stock-block ').html(shtml);
         jQuery('.price-block').html(phtml);
      });

      jQuery('body').on('change', '.area, .del-date, .input_del_date', function(){

         displayData();

         getSlots();
      });
      jQuery('body').on('click', '.again-submit', function(){

         val = jQuery(this).closest('.modal-body').find('input:checked').val();

         name = jQuery(this).closest('.modal-body').find('input').attr('name');

         btn = jQuery(this).closest('.modal-body').find('button').attr('id');

         

         if(

            (name=='deliveryType' && val!="{{session('deliveryType')}}") ||

            (name=='area' && val!="{{session('sel-area')}}") ||

            (name=='branch' && val!="{{session('sel-branch')}}")

            )

            jQuery('#againPop').modal('show');
      });

      jQuery('body').on('change', 'input[name="slot"], textarea[name="message"]', function(){

         displayData();

      });

      jQuery('body').on('click', '.pickup-submit', function(){

         type = jQuery('.deliveryType:checked').val();

         jQuery('.type-lists').hide();

         jQuery('.'+type.toLowerCase()+'-lists').show();

         jQuery('.selected-type').text(': '+type);

      });

      jQuery('body').on('click', '.branch-submit', function(){

         displayData();

      });

      jQuery('body').on('click', '.var-check', function(){
         $this = jQuery(this);

         if($this.attr('type')=='radio'){
            price = $this.data('price');
            sprice = $this.data('sale-price');
            qty = $this.data('qty');
            if(sprice!='' && sprice!=undefined){
               phtml = '<div class="price">'+sprice+' KWD<span class="offer-price">'+price+' KWD</span></div>';
               jQuery('.price').val(sprice);
            }
            else{
               phtml = '<div class="price">'+price+' KWD</div>';
               jQuery('.price').val(price);
            }
            if(qty){
               $cls = 'instock';
               $text = 'Stock';
               jQuery('.cart-btn').removeClass('disabled-cart-btn');
            } else {
               $cls = 'out-stock';
               $text = 'Out of stock';
               jQuery('.cart-btn').addClass('disabled-cart-btn');
            }
            shtml = '<span class="stock-text '+$cls+'">'+$text+'</span>';
            jQuery('.stock-block ').html(shtml);
            jQuery('.price-block').html(phtml);
         } else {
            $row = jQuery(this).closest('.row');
            if(jQuery(this).is(':checked') && jQuery(this).data('qty')>0){
               $row.find('.var-qty').removeClass('disabled');
               $row.find('.var-qty').find('button').removeAttr('disabled');
               $row.find('.var-qty').find('input').removeAttr('disabled');
            } else {
               $row.find('.var-qty').addClass('disabled');
               $row.find('.var-qty').find('button').attr('disabled','disabled');
               $row.find('.var-qty').find('input').attr('disabled', 'disabled');
            } 
            updatePrices();
         }

      });

      jQuery('.var-qty-input, .var-text-input').change(function(){
         updatePrices();
      });

      function updatePrices(){
         $tprice = parseFloat(jQuery('input[name="baseprice"]').val());
         
         textVal = '';
         if(jQuery('.var-text-input').length){
            textVal = jQuery('.var-text-input').val();
            if(textVal!=''&& textVal!=undefined){
               tp = parseFloat(jQuery('.var-text-input').data('price'));
               $tprice = tp + $tprice;
            }
         }
         
         jQuery('.var-check').each(function(){
            $this = jQuery(this);
            $price = ($this.data('price'));
            $sprice = ($this.data('sale-price'));
            qty = $this.data('qty');

            if(jQuery(this).closest('.row').find('.var-qty-input').length)
               varqty = jQuery(this).closest('.row').find('.var-qty-input').val();
            else
               varqty = jQuery('input[name="quantity"]').val();
            
            if(varqty==qty){
               jQuery(this).closest('.row').find('.var-qty').addClass('disabled');
               jQuery(this).closest('.row').find('.var-qty').find('button').attr('disabled','disabled');
               jQuery(this).closest('.row').find('.var-qty').find('input').attr('disabled', 'disabled');
            }
            if(jQuery(this).is(':checked')){
               jQuery('.cart-btn').removeClass('disabled-cart-btn');
               console.log($sprice);
               if($sprice!='' && $sprice!=undefined) {
                  $tprice = $tprice + (varqty*parseFloat($sprice));
               } else {
                  $tprice = $tprice + (varqty*parseFloat($price));
               }
            } else {
               // if($sprice!='' && $sprice!=undefined) {
               //    $tprice = $tprice + $sprice;
               // } else {
               //    $tprice = $tprice + $price;
               // }
            }

         });
         if($tprice>0)
            jQuery('.cart-btn').removeClass('disabled-cart-btn');
         else
            jQuery('.cart-btn').addClass('disabled-cart-btn');

         phtml = '<div class="price">'+$tprice+' KWD</div>';
         jQuery('.price').val($tprice);
         jQuery('.price-block').html(phtml);

      }



      function displayData(){
         // const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
         // const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
         // area = jQuery('.area:checked').data('name');
         // branch = jQuery('.branch_id:checked').data('name');
         // dt = jQuery('.del-date:checked').data('name');
         // slot = jQuery('input[name="slot"]:checked').data('name');
         // indt = jQuery('.input_del_date').val();

         msg = jQuery('textarea[name="message"]').val();
         type = jQuery('.deliveryType:checked').val();
         // if(indt!='' && indt!=undefined){
         //    indt = new Date(indt);
         //    dt = days[indt.getDay()]+', '+indt.getDate()+', '+months[indt.getMonth()];;
         // }

         jQuery('.selected-data').text('');
         // if(branch!='' && branch!=undefined)
         //    jQuery('.selected-branch').text(': '+branch);
         // if(area!='' && area!=undefined)
         //    jQuery('.selected-area').text(': '+area);
         // if(dt!='' && dt!=undefined)
         //    jQuery('.selected-date').text(': '+dt);
         // if(slot!='' && slot!=undefined)
         //    jQuery('.selected-slot').text(': '+slot);

         if(type!='' && type!=undefined)
            jQuery('.selected-type').text(': '+type);

         if(msg!='' && msg!=undefined)
            jQuery('.selected-message').text(': '+msg);
      }



      // function getSlots(){
      //    area = jQuery('input[name="area"]:checked').val();
      //    branch = jQuery('input[name="area"]:checked').data('id');
      //    jQuery('.branch').val(branch);
      //    dt = jQuery('input[name="del_date"]:checked').val();
      //    indt = jQuery('input[name="input_del_date"]').val();

      //    if(indt!='' && indt!=undefined)
      //       dt = indt;

      //    jQuery.ajax({
      //       url: '{{route("getSlots")}}',
      //       method: 'get',
      //       data: {
      //          branch: branch,
      //          del_dt: dt,
      //       },
      //       dataType: 'JSON',
      //       success: function(res){
      //          jQuery('#deliveryTime ul').html(res.html);
      //       },
      //       error: function(err){
      //          console.log(err);
      //       }
      //    });
      // }
      // this is for the main
   </script>

@endpush