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



    
    




    

    <!--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-5 pt-1 fw-bold">Best Deals</h3>
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
        @foreach($get_offer_products as $key => $product)
    <div class="swiper-slide">
        <div class="card">
            <div class="badge">Best Deals</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="{{ $product['product_name_en'] }}" />
            </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">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>
    

    
    
    
     <!--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-5 pt-1 fw-bold">Latest offers</h3>
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
        @foreach($latest_offer_products as $key => $product)
    <div class="swiper-slide">
        <div class="card">
            <div class="badge">Latest Deals</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="{{ $product['product_name_en'] }}" />
            </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">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