@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;
      }

   </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($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

                              {{--<div class="price">{{$price[$weights[0]]}} {{__('KWD')}}</div>--}}

                          

                        </div>

                        <div class="stock-block">

                           <span class="stock-text {{ (app()->getLocale() == 'en') ? ($quantity[$weights[0]] > 0 ? 'instock' : 'out-stock') : ($quantity[$weights[0]] > 0 ? 'المخزون' : 'غير متوفر في المخزون') }}">
                              {{(app()->getLocale() == 'en') ? ($quantity[$weights[0]] > 0 ? __('Stock') : __('Out of Stock')) : ($quantity[$weights[0]] > 0 ? __('المخزون') : __('غير متوفر في المخزون'))}}
                          </span>
                          
                        </div>

                     </div>

                     <form method="post" action="{{route('add.to.cart')}}">

                        @csrf

                        <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">
                                 

                                 @foreach($weights as $weight)

                                    <option value="{{$weight}}" data-price="{{$price[$weight]}}" data-sale-price="{{$sale_price[$weight]}}" data-qty="{{$quantity[$weight]}}">{{$weight}}</option>

                                 @endforeach

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

                        </div>

                        <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">

                              <a href="#" data-bs-toggle="modal" data-bs-target="#extra-special"  class="btn cart-btn primery-btn bdr-radius {{$quantity[$weights[0]]>0?'':'disabled-cart-btn'}}">

                              <i class="bi bi-cart3"></i>{{__('Add to Cart')}} 

                              </a>

                           </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">

                                       @foreach($addons as $akey=>$addon)

                                          @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="checkbox" 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

                                       @endforeach

                                    </div>

                                 </div>

                                 <div class="modal-footer">

                                    <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="{{ ($sale_price[$weights[0]])?$sale_price[$weights[0]]:$price[$weights[0]] }}" class="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->dsale_price)

                           @php

                              $percent = (($product->dprice-$product->dsale_price)/$product->dprice) * 100;

                              

                              $percent = ceil($percent);

                           @endphp

                        @endif

                        @php

                         $percent = (($product->dprice-$product->dsale_price)/$product->dprice) * 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->dsale_price < $product->dprice)

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

                                 @else

                                    <div class="price">{{$product->dprice}} {{__('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
         <div class="col-sm-12">
         </div>
      </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();

      });



      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(type!='' && type!=undefined)

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

         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(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