@extends('layouts.user-home')
  @section('content')  


    <!-- Main Slider Start -->
    <!--<div class="ec-main-slider section section-space-p-30">-->
    <!--    <div class="ec-slider swiper-container main-slider-nav main-slider-dot">-->
    <!--         Main slider -->
    <!--        <div class="swiper-wrapper">-->
    <!--            @foreach($sliders as $slid)-->
    <!--            <div class="ec-slide-item swiper-slide d-flex slide-1" style="background-image:url({{asset('/uploads/sliders/'.$slid->s_image)}})">-->
    <!--                <div class="overlay colo-main"></div>-->
    <!--                <div class="container align-self-center">-->
    <!--                    <div class="row">-->
    <!--                        <div class="col-sm-12 align-self-center">-->
    <!--                            <div class="ec-slide-content slider-animation">-->

    <!--                                <h1 class="ec-slide-title">{{ $slid->s_title }}</h1>-->
    <!--                                <div class="ec-slide-desc">-->

    <!--                                    <p>{!! $slid->s_desc !!}</p>-->
    <!--                                    <a href="{{ $slid->s_link }}" class="btn btn-lg btn-primary">Explore Now </a>-->
    <!--                                </div>-->
    <!--                            </div>-->
    <!--                        </div>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            @endforeach-->
    <!--        </div>-->
    <!--        <div class="swiper-pagination swiper-pagination-white"></div>-->
    <!--        <div class="swiper-buttons">-->
    <!--            <div class="swiper-button-next"></div>-->
    <!--            <div class="swiper-button-prev"></div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</div>-->
    <!-- Main Slider End -->
    
    

        <!-- Main Slider Start -->
        
            <section class="main-banner">
                    <div class="container-fluid banner px-3 pb-3 border-5 d-flex justify-content-center">
      <div class="swiper mySwiper10 pb-5">
        <div class="swiper-wrapper">
          @foreach($sliders as $slid)
          <div class="swiper-slide" >
            <img src="{{asset('/uploads/sliders/'.$slid->s_image)}}" alt="" />
          </div>
          <!--<div class="swiper-slide">-->
          <!--  <img src="{{ asset('frontend/assets/images/Slide1.webp') }}" alt="" />-->
          <!--</div>-->
          <!--<div class="swiper-slide">-->
          <!--  <img src="{{ asset('frontend/assets/images/Slide1.webp') }}" alt="" />-->
          <!--</div>-->
          @endforeach
        </div>
        <div class="swiper-button-next">
          <i class="fa-solid fa-angle-right"></i>
        </div>
        <div class="swiper-button-prev">
          <i class="fa-solid fa-angle-left"></i>
        </div>
        <div class="swiper-paginationq d-flex justify-content-center"></div>
      </div>
    </div>

            </section>
    
        <!-- Main Slider End --> 
        
        <!--shop by category starts here-->
    
<section class="shop-by-catreegory pt-5 pb-4">
  <div class="container">
    <h3 class="text-center pb-5 fw-bold">Shop By Category</h3>
    <div class="swiper  categorySlider">
      <div class="swiper-wrapper">
           @foreach($category as $cats)
        <div class="swiper-slide">
            <a href="{{ $cats->category_link }}">
          <div class="d-flex flex-column align-items-center">
            <img widht="100%" src="{{asset('/uploads/category_images/'.$cats->category_image)}}" alt="">
            <span >{{ $cats->category_name }}</span>
          </div>
          </a>
        </div>
         @endforeach
        
      </div>
      <div class="swiper-button-next">
        <i class="fa-solid fa-angle-right"></i>
      </div>
      <div class="swiper-button-prev">
        <i class="fa-solid fa-angle-left"></i>
      </div>
    </div>
  </div>
</section>

<!--3 payment section-->
    <section class="container-fluid paymemt py-3 ">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12 col-md-12 col-lg-8 d-flex payment-main-container">
             <div class="col-12 col-md-4 d-flex justify-content-center align-items-center">
            <img
              alt="Express Delivery"
              class="mr-3"
              style="width: 30px; height: 30px"
              src="https://mcprod.jumbo.ae/media/dynamicdashboard/images/items/_/1/_1664697126693_693_1__1664607539923_923_1_delivery_2__1_.svg"
            />
            <div>
              <h6 class="text-xs text-md-sm font-weight-bold"> Free Delivery & Installation</h6>
              <p class="text-xs text-md-sm">For Minimum Spend of 1,000 Qrs.</p>
            </div>
          </div>
          <div class="col-12 col-md-4 d-flex justify-content-center align-items-center">
            <img
              alt="Click &amp; Collect"
              class="mr-3"
              style="width: 30px; height: 30px"
              src="https://mcprod.jumbo.ae/media/dynamicdashboard/images/items/_/1/_1664697126221_221_0__1664607539216_216_0_car_2__1_.svg"
            />
            <div>
              <h6 class="text-xs text-md-sm font-weight-bold"> Cash or Card on Delivery</h6>
              <p class="text-xs text-md-sm">Hassle free Payment</p>
            </div>
          </div>
         
          <div class="col-12 col-md-4 d-flex justify-content-center align-items-center">
            <img
              alt="Secure Payment"
              class="mr-3"
              style="width: 30px; height: 30px"
              src="https://mcprod.jumbo.ae/media/dynamicdashboard/images/items/_/1/_1664697127189_189_2__1664607540461_461_2_secure_payment_2__1_.svg"
            />
            <div>
              <h6 class="text-xs text-md-sm font-weight-bold">Secure Payment</h6>
              <p class="text-xs text-md-sm">Shop safe with us</p>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-12 col-lg-4 d-flex justify-content-center align-items-center pt--5 pt-md-5 pt-lg-0">
          <section style="widht : fit-content" >
            <h6 class="text-sm-center fw-bold">We Proudly Accept</h6>
            <div class="">
              <img
                alt="We Proudly Accept"
                src="{{ asset('frontend/assets/images/3_payment-logos-03_2.png') }}"
              />
            </div>
          </section>
        </div>
      </div>
    </div>
    </section>

<!--3 payment section end here-->

    
     <!--shop by category end here-->

    <!--best sellers starts here-->
    
    <section class="best-sellers px-lg-5 px-md-0 px-0" style="margin-top : 5rem;">
    <div class="container-fluid py-3">
      <h3 class="text-center pb-4 pt-3 fw-bold">BEST SELLERS</h3>
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            @foreach($productsall as $product)
          <div class="swiper-slide">
             
            <div class="card">
              <div class="badge">Best Seller</div>

              <div class="heart-container" title="Like">
                 <input type="checkbox" class="checkbox" id="heartwish{{$product->product_id}}" 
           @if($product->wish_list == 'true') checked @endif
           onclick="add_wishlist_fn({{$product->product_id}})" />
                <div class="svg-container">
                  <svg viewBox="0 0 24 24" class="svg-outline" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z"
                    ></path>
                  </svg>
                  <svg viewBox="0 0 24 24" class="svg-filled" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z"
                    ></path>
                  </svg>
                  <svg
                    class="svg-celebrate"
                    width="100"
                    height="100"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <polygon points="10,10 20,20"></polygon>
                    <polygon points="10,50 20,50"></polygon>
                    <polygon points="20,80 30,70"></polygon>
                    <polygon points="90,10 80,20"></polygon>
                    <polygon points="90,50 80,50"></polygon>
                    <polygon points="80,80 70,70"></polygon>
                  </svg>
                </div>
              </div>

             <a href="{{ $product-> product_permalink}}"> <img src="{{ asset('uploads/product_img/' . $product->product_title_img) }}" alt="Weber Pulse 2000 Electric Grill" />  </a>
              <div class="content">
                <a href="{{ $product-> product_permalink}}"><h2 class="py-2 text-center px-2">{{ $product-> product_name_en}}</h2></a>
                <div class="inner-content pe-2">
                  @php
    // Fetch the active offer containing this product
  $offer = \App\Models\offerModel::where('offer_active_status', 0)
    ->whereJsonContains('offer_products', $product->product_id) // Best if stored as JSON
    ->first();

                
   
@endphp

@if($offer)
    <div class="discount-banner">Save QRS {{ $offer->offer_value }}</div>
@endif

                  <div class="price ">
                      <!--<del>QRS. 4,499.00</del>-->
                  <span class="text-dark fw-bold ps-2">QRS. {{$product -> product_price}}</span></div>
                </div>
              </div>
              <a onclick="add_to_cart(1,{{$product->product_id}},3)" href="javascript:void(0);" class="add-to-cart m-3">ADD TO CART</a>
            </div>
          
          </div>
           @endforeach
          <!--<div class="swiper-slide">-->
          <!--  <div class="card">-->
          <!--    <div class="badge">Best Seller</div>-->

          <!--    <div class="heart-container" title="Like">-->
          <!--      <input type="checkbox" class="checkbox" id="Give-It-An-Id" />-->
          <!--      <div class="svg-container">-->
          <!--        <svg viewBox="0 0 24 24" class="svg-outline" xmlns="http://www.w3.org/2000/svg">-->
          <!--          <path-->
          <!--            d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z"-->
          <!--          ></path>-->
          <!--        </svg>-->
          <!--        <svg viewBox="0 0 24 24" class="svg-filled" xmlns="http://www.w3.org/2000/svg">-->
          <!--          <path-->
          <!--            d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z"-->
          <!--          ></path>-->
          <!--        </svg>-->
          <!--        <svg-->
          <!--          class="svg-celebrate"-->
          <!--          width="100"-->
          <!--          height="100"-->
          <!--          xmlns="http://www.w3.org/2000/svg"-->
          <!--        >-->
          <!--          <polygon points="10,10 20,20"></polygon>-->
          <!--          <polygon points="10,50 20,50"></polygon>-->
          <!--          <polygon points="20,80 30,70"></polygon>-->
          <!--          <polygon points="90,10 80,20"></polygon>-->
          <!--          <polygon points="90,50 80,50"></polygon>-->
          <!--          <polygon points="80,80 70,70"></polygon>-->
          <!--        </svg>-->
          <!--      </div>-->
          <!--    </div>-->

          <!--    <img src="{{ asset('frontend/assets/images/product.webp') }}" alt="Weber Pulse 2000 Electric Grill" />-->
          <!--    <div class="content">-->
          <!--      <h2 class="py-2 text-center px-2">Weber Pulse 2000 Electric Grill</h2>-->
          <!--      <div class="inner-content pe-2">-->
          <!--        <div class="discount-banner">Save QRS 500.00</div>-->
          <!--        <div class="price"><del>QRS. 4,499.00</del><span class="text-dark fw-bold">QRS. 3,999.00</span></div>-->
          <!--      </div>-->
          <!--    </div>-->
          <!--    <button class="add-to-cart m-3">ADD TO CART</button>-->
          <!--  </div>-->
          <!--</div>-->
          <!--<div class="swiper-slide">-->
          <!--  <div class="card">-->
          <!--    <div class="badge">Best Seller</div>-->

          <!--    <div class="heart-container" title="Like">-->
          <!--      <input type="checkbox" class="checkbox" id="Give-It-An-Id" />-->
          <!--      <div class="svg-container">-->
          <!--        <svg viewBox="0 0 24 24" class="svg-outline" xmlns="http://www.w3.org/2000/svg">-->
          <!--          <path-->
          <!--            d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z"-->
          <!--          ></path>-->
          <!--        </svg>-->
          <!--        <svg viewBox="0 0 24 24" class="svg-filled" xmlns="http://www.w3.org/2000/svg">-->
          <!--          <path-->
          <!--            d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z"-->
          <!--          ></path>-->
          <!--        </svg>-->
          <!--        <svg-->
          <!--          class="svg-celebrate"-->
          <!--          width="100"-->
          <!--          height="100"-->
          <!--          xmlns="http://www.w3.org/2000/svg"-->
          <!--        >-->
          <!--          <polygon points="10,10 20,20"></polygon>-->
          <!--          <polygon points="10,50 20,50"></polygon>-->
          <!--          <polygon points="20,80 30,70"></polygon>-->
          <!--          <polygon points="90,10 80,20"></polygon>-->
          <!--          <polygon points="90,50 80,50"></polygon>-->
          <!--          <polygon points="80,80 70,70"></polygon>-->
          <!--        </svg>-->
          <!--      </div>-->
          <!--    </div>-->

          <!--    <img src="{{ asset('frontend/assets/images/product.webp') }}" alt="Weber Pulse 2000 Electric Grill" />-->
          <!--    <div class="content">-->
          <!--      <h2 class="py-2 text-center px-2">Weber Pulse 2000 Electric Grill</h2>-->
          <!--      <div class="inner-content pe-2 ">-->
          <!--        <div class="discount-banner">Save QRS 500.00</div>-->
          <!--        <div class="price"><del>QRS. 4,499.00</del><span class="text-dark fw-bold">QRS. 3,999.00</span></div>-->
          <!--      </div>-->
          <!--    </div>-->
          <!--    <button class="add-to-cart m-3">ADD TO CART</button>-->
          <!--  </div>-->
          <!--</div>-->

          <!--<div class="swiper-slide">-->
          <!--  <div class="card">-->
          <!--    <div class="badge">Best Seller</div>-->

          <!--    <div class="heart-container" title="Like">-->
          <!--      <input type="checkbox" class="checkbox" id="Give-It-An-Id" />-->
          <!--      <div class="svg-container">-->
          <!--        <svg viewBox="0 0 24 24" class="svg-outline" xmlns="http://www.w3.org/2000/svg">-->
          <!--          <path-->
          <!--            d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z"-->
          <!--          ></path>-->
          <!--        </svg>-->
          <!--        <svg viewBox="0 0 24 24" class="svg-filled" xmlns="http://www.w3.org/2000/svg">-->
          <!--          <path-->
          <!--            d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z"-->
          <!--          ></path>-->
          <!--        </svg>-->
          <!--        <svg-->
          <!--          class="svg-celebrate"-->
          <!--          width="100"-->
          <!--          height="100"-->
          <!--          xmlns="http://www.w3.org/2000/svg"-->
          <!--        >-->
          <!--          <polygon points="10,10 20,20"></polygon>-->
          <!--          <polygon points="10,50 20,50"></polygon>-->
          <!--          <polygon points="20,80 30,70"></polygon>-->
          <!--          <polygon points="90,10 80,20"></polygon>-->
          <!--          <polygon points="90,50 80,50"></polygon>-->
          <!--          <polygon points="80,80 70,70"></polygon>-->
          <!--        </svg>-->
          <!--      </div>-->
          <!--    </div>-->

          <!--    <img src="{{ asset('frontend/assets/images/product.webp') }}" alt="Weber Pulse 2000 Electric Grill" />-->
          <!--    <div class="content">-->
          <!--      <h2 class="py-2 text-center px-2">Weber Pulse 2000 Electric Grill</h2>-->
          <!--      <div class="inner-content pe-2">-->
          <!--        <div class="discount-banner">Save QRS 500.00</div>-->
          <!--        <div class="price"><del>QRS. 4,499.00</del><span class="text-dark fw-bold">QRS. 3,999.00</span></div>-->
          <!--      </div>-->
          <!--    </div>-->
          <!--    <button class="add-to-cart m-3">ADD TO CART</button>-->
          <!--  </div>-->
          <!--</div>-->

          <!--<div class="swiper-slide">-->
          <!--  <div class="card">-->
          <!--    <div class="badge">Best Seller</div>-->

          <!--    <div class="heart-container" title="Like">-->
          <!--      <input type="checkbox" class="checkbox" id="Give-It-An-Id" />-->
          <!--      <div class="svg-container">-->
          <!--        <svg viewBox="0 0 24 24" class="svg-outline" xmlns="http://www.w3.org/2000/svg">-->
          <!--          <path-->
          <!--            d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z"-->
          <!--          ></path>-->
          <!--        </svg>-->
          <!--        <svg viewBox="0 0 24 24" class="svg-filled" xmlns="http://www.w3.org/2000/svg">-->
          <!--          <path-->
          <!--            d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z"-->
          <!--          ></path>-->
          <!--        </svg>-->
          <!--        <svg-->
          <!--          class="svg-celebrate"-->
          <!--          width="100"-->
          <!--          height="100"-->
          <!--          xmlns="http://www.w3.org/2000/svg"-->
          <!--        >-->
          <!--          <polygon points="10,10 20,20"></polygon>-->
          <!--          <polygon points="10,50 20,50"></polygon>-->
          <!--          <polygon points="20,80 30,70"></polygon>-->
          <!--          <polygon points="90,10 80,20"></polygon>-->
          <!--          <polygon points="90,50 80,50"></polygon>-->
          <!--          <polygon points="80,80 70,70"></polygon>-->
          <!--        </svg>-->
          <!--      </div>-->
          <!--    </div>-->

          <!--    <img src="{{ asset('frontend/assets/images/product.webp') }}" alt="Weber Pulse 2000 Electric Grill" />-->
          <!--    <div class="content">-->
          <!--      <h2 class="py-2 text-center px-2">Weber Pulse 2000 Electric Grill</h2>-->
          <!--      <div class="inner-content pe-2">-->
          <!--        <div class="discount-banner">Save QRS 500.00</div>-->
          <!--        <div class="price"><del>QRS. 4,499.00</del><span class="text-dark fw-bold">QRS. 3,999.00</span></div>-->
          <!--      </div>-->
          <!--    </div>-->
          <!--    <button class="add-to-cart m-3">ADD TO CART</button>-->
          <!--  </div>-->
          <!--</div>-->

          <!--<div class="swiper-slide">-->
          <!--  <div class="card">-->
          <!--    <div class="badge ">Best Seller</div>-->

          <!--    <div class="heart-container" title="Like">-->
          <!--      <input type="checkbox" class="checkbox" id="Give-It-An-Id" />-->
          <!--      <div class="svg-container">-->
          <!--        <svg viewBox="0 0 24 24" class="svg-outline" xmlns="http://www.w3.org/2000/svg">-->
          <!--          <path-->
          <!--            d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z"-->
          <!--          ></path>-->
          <!--        </svg>-->
          <!--        <svg viewBox="0 0 24 24" class="svg-filled" xmlns="http://www.w3.org/2000/svg">-->
          <!--          <path-->
          <!--            d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z"-->
          <!--          ></path>-->
          <!--        </svg>-->
          <!--        <svg-->
          <!--          class="svg-celebrate"-->
          <!--          width="100"-->
          <!--          height="100"-->
          <!--          xmlns="http://www.w3.org/2000/svg"-->
          <!--        >-->
          <!--          <polygon points="10,10 20,20"></polygon>-->
          <!--          <polygon points="10,50 20,50"></polygon>-->
          <!--          <polygon points="20,80 30,70"></polygon>-->
          <!--          <polygon points="90,10 80,20"></polygon>-->
          <!--          <polygon points="90,50 80,50"></polygon>-->
          <!--          <polygon points="80,80 70,70"></polygon>-->
          <!--        </svg>-->
          <!--      </div>-->
          <!--    </div>-->

          <!--    <img src="{{ asset('frontend/assets/images/product.webp') }}" alt="Weber Pulse 2000 Electric Grill" />-->
          <!--    <div class="content">-->
          <!--      <h2 class="py-2 text-center px-2">Weber Pulse 2000 Electric Grill</h2>-->
          <!--      <div class="inner-content pe-2">-->
          <!--        <div class="discount-banner">Save QRS 500.00</div>-->
          <!--        <div class="price"><del>QRS. 4,499.00</del><span class="text-dark fw-bold">QRS. 3,999.00</span></div>-->
          <!--      </div>-->
          <!--    </div>-->
          <!--    <button class="add-to-cart m-3">ADD TO CART</button>-->
          <!--  </div>-->
          <!--</div>-->

          <!--<div class="swiper-slide">-->
          <!--  <div class="card">-->
          <!--    <div class="badge">Best Seller</div>-->

          <!--    <div class="heart-container" title="Like">-->
          <!--      <input type="checkbox" class="checkbox" id="Give-It-An-Id" />-->
          <!--      <div class="svg-container">-->
          <!--        <svg viewBox="0 0 24 24" class="svg-outline" xmlns="http://www.w3.org/2000/svg">-->
          <!--          <path-->
          <!--            d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z"-->
          <!--          ></path>-->
          <!--        </svg>-->
          <!--        <svg viewBox="0 0 24 24" class="svg-filled" xmlns="http://www.w3.org/2000/svg">-->
          <!--          <path-->
          <!--            d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z"-->
          <!--          ></path>-->
          <!--        </svg>-->
          <!--        <svg-->
          <!--          class="svg-celebrate"-->
          <!--          width="100"-->
          <!--          height="100"-->
          <!--          xmlns="http://www.w3.org/2000/svg"-->
          <!--        >-->
          <!--          <polygon points="10,10 20,20"></polygon>-->
          <!--          <polygon points="10,50 20,50"></polygon>-->
          <!--          <polygon points="20,80 30,70"></polygon>-->
          <!--          <polygon points="90,10 80,20"></polygon>-->
          <!--          <polygon points="90,50 80,50"></polygon>-->
          <!--          <polygon points="80,80 70,70"></polygon>-->
          <!--        </svg>-->
          <!--      </div>-->
          <!--    </div>-->

          <!--    <img src="{{ asset('frontend/assets/images/product.webp') }}" alt="Weber Pulse 2000 Electric Grill" />-->
          <!--    <div class="content">-->
          <!--      <h2 class="py-2 text-center px-2">Weber Pulse 2000 Electric Grill</h2>-->
          <!--      <div class="inner-content pe-2">-->
          <!--        <div class="discount-banner">Save QRS 500.00</div>-->
          <!--        <div class="price"><del>QRS. 4,499.00</del><span class="text-dark fw-bold">QRS. 3,999.00</span></div>-->
          <!--      </div>-->
          <!--    </div>-->
          <!--    <button class="add-to-cart m-3">ADD TO CART</button>-->
          <!--  </div>-->
          <!--</div>-->

          <!--<div class="swiper-slide">-->
          <!--  <div class="card">-->
          <!--    <div class="badge">Best Seller</div>-->

          <!--    <div class="heart-container" title="Like">-->
          <!--      <input type="checkbox" class="checkbox" id="Give-It-An-Id" />-->
          <!--      <div class="svg-container">-->
          <!--        <svg viewBox="0 0 24 24" class="svg-outline" xmlns="http://www.w3.org/2000/svg">-->
          <!--          <path-->
          <!--            d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z"-->
          <!--          ></path>-->
          <!--        </svg>-->
          <!--        <svg viewBox="0 0 24 24" class="svg-filled" xmlns="http://www.w3.org/2000/svg">-->
          <!--          <path-->
          <!--            d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z"-->
          <!--          ></path>-->
          <!--        </svg>-->
          <!--        <svg-->
          <!--          class="svg-celebrate"-->
          <!--          width="100"-->
          <!--          height="100"-->
          <!--          xmlns="http://www.w3.org/2000/svg"-->
          <!--        >-->
          <!--          <polygon points="10,10 20,20"></polygon>-->
          <!--          <polygon points="10,50 20,50"></polygon>-->
          <!--          <polygon points="20,80 30,70"></polygon>-->
          <!--          <polygon points="90,10 80,20"></polygon>-->
          <!--          <polygon points="90,50 80,50"></polygon>-->
          <!--          <polygon points="80,80 70,70"></polygon>-->
          <!--        </svg>-->
          <!--      </div>-->
          <!--    </div>-->

          <!--    <img src="{{ asset('frontend/assets/images/product.webp') }}" alt="Weber Pulse 2000 Electric Grill" />-->
          <!--    <div class="content">-->
          <!--      <h2 class="py-2 text-center px-2">Weber Pulse 2000 Electric Grill</h2>-->
          <!--      <div class="inner-content pe-2">-->
          <!--        <div class="discount-banner">Save QRS 500.00</div>-->
          <!--        <div class="price"><del>QRS. 4,499.00</del><span class="text-dark fw-bold">QRS. 3,999.00</span></div>-->
          <!--      </div>-->
          <!--    </div>-->
          <!--    <button class="add-to-cart m-3">ADD TO CART</button>-->
          <!--  </div>-->
          <!--</div>-->
        </div>
        <div class="swiper-button-next">
          <i class="fa-solid fa-angle-right"></i>
        </div>
        <div class="swiper-button-prev">
          <i class="fa-solid fa-angle-left"></i>
        </div>
      </div>
    </div>

    </section>
    

    
    
    
     <!--best sellers end here-->
     
      <!--previuos viwed products starts here-->
      
    <section class="best-sellers px-lg-5 px-md-0 px-0" style="margin-top : 5rem;">
    <div class="container-fluid py-3">
      <h3 class="text-center pb-4 pt-3 fw-bold">LATEST PRODUCTS</h3>
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            @foreach($product_latest as $product)
          <div class="swiper-slide">
             
            <div class="card">
              <div class="badge">Latest Products</div>

              <div class="heart-container" title="Like">
               <input type="checkbox" class="checkbox" id="heartwish{{$product->product_id}}" 
           @if($product->wish_list == 'true') checked @endif
           onclick="add_wishlist_fn({{$product->product_id}})" />
                <div class="svg-container">
                  <svg viewBox="0 0 24 24" class="svg-outline" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z"
                    ></path>
                  </svg>
                  <svg viewBox="0 0 24 24" class="svg-filled" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z"
                    ></path>
                  </svg>
                  <svg
                    class="svg-celebrate"
                    width="100"
                    height="100"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <polygon points="10,10 20,20"></polygon>
                    <polygon points="10,50 20,50"></polygon>
                    <polygon points="20,80 30,70"></polygon>
                    <polygon points="90,10 80,20"></polygon>
                    <polygon points="90,50 80,50"></polygon>
                    <polygon points="80,80 70,70"></polygon>
                  </svg>
                </div>
              </div>

             <a href="{{ $product-> product_permalink}}"> <img src="{{ asset('uploads/product_img/' . $product->product_title_img) }}" alt="Weber Pulse 2000 Electric Grill" />  </a>
              <div class="content">
                <a href="{{ $product-> product_permalink}}"><h2 class="py-2 text-center px-2">{{ $product-> product_name_en}}</h2></a>
                <div class="inner-content pe-2">
                  <!--<div class="discount-banner ">Save QRS 500.00</div>-->
                  <div class="price ">
                      <!--<del>QRS. 4,499.00</del>-->
                      <span class="text-dark fw-bold ps-2">QRS. {{$product -> product_price}}</span></div>
                </div>
              </div>
              <a onclick="add_to_cart(1,{{$product->product_id}},3)" href="javascript:void(0);" class="add-to-cart m-3">ADD TO CART</a>
            </div>
          
          </div>
           @endforeach
    
     </div>
        <div class="swiper-button-next">
          <i class="fa-solid fa-angle-right"></i>
        </div>
        <div class="swiper-button-prev">
          <i class="fa-solid fa-angle-left"></i>
        </div>
      </div>
    </div>

    </section>
    
    

   
 

    

    <!--end section-->



@endsection