@extends('frontend.layouts.template-base')

@section('meta_tags')
  @include('frontend.layouts.meta-tags', ['title' => 'Product details', 'page' => 'category-details'])
@endsection

@section('styles')
@endsection


@section('content')
  <div class="page-wrapper prod-details-sec">
    <div class="container-fluid">

      <div class="breadcrumb-nav pt-4">
        <a href="{{ url('/') }}">Home</a> <i class="fa-solid fa-chevron-right"></i><a
          href="{{ route('frontend.category') }}">Categories</a><i class="fa-solid fa-chevron-right black-icon"></i>
        <span>Aashirvaad</span>
      </div>

      <div class="row g-3 align-items-start">
        <div class="col-lg-6">
          <div class="d-flex gap-4 thumbnail-main-sec">

            <div class="thumbnail-col">
              <div class="thumb active" onclick="setImage(0)"><img src="{{asset('assets/images/img/prod-wheat.png') }}"
                  alt="1"></div>
              <div class="thumb" onclick="setImage(1)"><img src="{{asset('assets/images/img/product-1.png') }}" alt="2">
              </div>
              <div class="thumb" onclick="setImage(2)"><img src="{{asset('assets/images/img/prod-wheat.png') }}" alt="3">
              </div>
              <div class="thumb" onclick="setImage(3)"><img src="{{asset('assets/images/img/product-1.png') }}" alt="4">
              </div>
            </div>

            <div style="flex:1; min-width:0;">
              <div class="img-main-wrap" id="imgWrap" onmouseenter="showZoom()" onmouseleave="hideZoom()"
                onmousemove="moveZoom(event)">
                <div class="slider-track" id="sliderTrack">
                  <!-- <img id="mainImg" src="{{asset('assets/images/img/wheat.png') }}" alt="Product"> -->
                </div>

                <div class="zoom-lens" id="zoomLens"></div>
                <span class="pro-orange-badge">Best Choice</span>
                <button class="wishlist-btn">
                  <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none" stroke-width="5"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path
                      d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                  </svg>

                </button>
                <button class="share-icon-sec">
                  <img class="share-icon" src="{{asset('assets/images/icon/share.png') }}" alt="Product">

                </button>

                <div class="auto-dot-row">
                  <div class="auto-dot active" onclick="setImage(0)"></div>
                  <div class="auto-dot" onclick="setImage(1)"></div>
                  <div class="auto-dot" onclick="setImage(2)"></div>
                  <div class="auto-dot" onclick="setImage(3)"></div>
                </div>
              </div>

              <!-- cart button below image -->
              <div class="left-cart-area">
                <button class="btn-add-cart" id="btnAddCart" onclick="addToCart()">Add to Cart</button>
                <div class="cart-controls" id="cartControls">
                  <a href="javascript:void(0);" class="btn-view-cart">
                    <img src="{{asset('assets/images/icon/cart.svg') }}" width="20" alt="">
                    View Cart
                    <div class="cart-badge" id="cartBadge">1</div>
                  </a>
                  <div class="qty-toggle">
                    <button onclick="changeQty(-1)">
                      <i class="fa-solid fa-minus"></i>
                    </button>
                    <div class="qty-num" id="cartQtyNum">1</div>
                    <button onclick="changeQty(1)">
                      <i class="fa-solid fa-plus"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-6">
          <div class="right-col-wrap">
            <div class="zoom-overlay" id="zoomOverlay">
              <img id="zoomImg" src="{{asset('assets/images/img/wheat.png') }}" alt="Zoomed">
            </div>

            <div class="details-card">
              <div class="product-title">Aashirvaad Superior MP Atta</div>
              <div class="bought-badge"><strong>10K+ bought </strong> <span>in past month </span> </div>

              <div class="price-row">
                <span class="price-now" id="priceNow">&#8377;249</span>
                <div class="d-flex flex-column">
                  <span class="price-mrp" id="priceMrp">&#8377;299</span>
                  <span class="save-tag" id="priceSave">You Save &#8377;50</span>
                </div>
              </div>
              <div class="off-badge"><span> 50% OFF </span>
                <img class="offer-icon" src="{{asset('assets/images/icon/offer-icon.png') }}" alt="Zoomed">
              </div>
              <div class="qty-header-row">
                <div class="qty-label-group">
                  <div class="qty-section-label"><span>Select Quantity:</span> <strong>5Kg</strong> </div>
                  <span class="qty-selected-tag" id="qtyTag">Most Bought</span>
                </div>
                <button class="qty-next-btn" onclick="slideNext()" title="Scroll next">
                  <i class="fa-solid fa-chevron-right fs-6"></i>
                </button>
              </div>
              <div class="qty-scroll-wrapper" id="qtyScroll">
                <div class="qty-cards-row">
                  <div class="qty-card" onclick="selectQty(this,45,90,45,'1kg')">
                    <div class="ql">1kg</div>
                    <div class="d-flex gap-1 align-items-center">
                      <div class="qp">&#8377;45</div>
                      <div class="qm">&#8377;90</div>
                    </div>
                    <div class="qs">You save &#8377;45</div>
                  </div>
                  <div class="qty-card" onclick="selectQty(this,90,190,60,'2kg')">
                    <div class="ql">2kg</div>
                    <div class="d-flex gap-1 align-items-center">
                      <div class="qp">&#8377;90</div>
                      <div class="qm">&#8377;190</div>
                    </div>
                    <div class="qs">You save &#8377;60</div>
                  </div>
                  <div class="qty-card selected" onclick="selectQty(this,225,285,60,'5kg')">
                    <div class="ql">5kg </div>
                    <div class="d-flex gap-1 align-items-center">
                      <div class="qp">&#8377;225</div>
                      <div class="qm">&#8377;285</div>
                    </div>
                    <div class="qs">You save &#8377;60</div>
                  </div>
                  <div class="qty-card" onclick="selectQty(this,460,599,139,'10kg')">
                    <div class="ql">10kg</div>
                    <div class="d-flex gap-1 align-items-center">
                      <div class="qp">&#8377;460</div>
                      <div class="qm">&#8377;599</div>
                    </div>
                    <div class="qs">You save &#8377;139</div>
                  </div>
                  <div class="qty-card" onclick="selectQty(this,850,1100,250,'20kg')">
                    <div class="ql">20kg</div>
                    <div class="d-flex gap-1 align-items-center">
                      <div class="qp">&#8377;850</div>
                      <div class="qm">&#8377;1100</div>
                    </div>
                    <div class="qs">You save &#8377;250</div>
                  </div>
                </div>
              </div>

              <div>
                <h3 class="prod-title">Hide Product Details</h3>
                <div class="info-section">
                  <div class="info-header" onclick="toggleInfo('keyInfo')">
                    Key Information <span class="info-arrow" id="keyInfoArrow">
                      <i class="fa-solid fa-chevron-down fs-6"></i>
                    </span>
                  </div>
                  <div class="info-body" id="keyInfo">
                    <table class="info-table">
                      <tr>
                        <td>Brand</td>
                        <td>Aashirvaad</td>
                      </tr>
                      <tr>
                        <td>Product Type</td>
                        <td>Whole Wheat Atta</td>
                      </tr>
                      <tr>
                        <td>Model Name</td>
                        <td>Superior MP</td>
                      </tr>
                      <tr>
                        <td>Organic</td>
                        <td>No</td>
                      </tr>
                      <tr>
                        <td>Key Features</td>
                        <td>Made from Whole Wheat, No Maida included, High in Dietary Fiber, Soft and Fluffy Rotis</td>
                      </tr>
                      <tr>
                        <td>Weight</td>
                        <td>1 kg</td>
                      </tr>
                      <tr>
                        <td>Material Type Free</td>
                        <td>Maida-free</td>
                      </tr>
                      <tr>
                        <td>Ingredients</td>
                        <td>Whole Wheat</td>
                      </tr>
                      <tr>
                        <td>Used For</td>
                        <td>Cooking</td>
                      </tr>
                    </table>
                  </div>
                </div>

                <div class="info-section">
                  <div class="info-header" onclick="toggleInfo('aboutInfo')">
                    About this Product <span class="info-arrow" id="aboutInfoArrow">
                      <i class="fa-solid fa-chevron-down fs-6"></i>
                    </span>
                  </div>
                  <div class="info-body" id="aboutInfo">
                    <table class="info-table">
                      <tr>
                        <td>Allergen Info</td>
                        <td>Contains: Wheat</td>
                      </tr>
                      <tr>
                        <td>Fssai License</td>
                        <td>10012031000312</td>
                      </tr>
                      <tr>
                        <td>Nutrition Info</td>
                        <td>Energy 338 kcal, Protein 10.7g, Carbs 76g, Fibre 10.4g, Fat 1.3g, Sodium 1.5mg</td>
                      </tr>
                      <tr>
                        <td>Dietary Preference</td>
                        <td>Veg</td>
                      </tr>
                      <tr>
                        <td>Unit</td>
                        <td>1 pack (1 kg)</td>
                      </tr>
                      <tr>
                        <td>Packaging Type</td>
                        <td>Pouch</td>
                      </tr>
                      <tr>
                        <td>Storage Instruction</td>
                        <td>Transfer to airtight container after opening. Store in cool, dry place away from sunlight.
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>

      <section class="space-x pro-cate-sec">
      <div class="row my-4 freq-title-sec align-items-center">
        <div class="col-8 col-md-6 col-lg-8 ">
          <h3 class="order-title">Frequently Bought Together</h3>
        </div>
        <div class="col-4 col-md-6 col-lg-4 d-flex justify-content-end">
          <a href="javascript:void(0);" class="navi-link">See all <i class="fas fa-arrow-right ms-2"></i>

          </a>
        </div>
      </div>

      <div class="row frequent-sec">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">

             <!-- Slide 1 -->
              <div class="swiper-slide">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/wheat.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                       <div class="qty-dropdown">
                <button class="qty-selected" type="button">
                  <span class="selected-text">1 kg</span>
                  <i class="fas fa-chevron-down"></i>
                </button>

                <ul class="qty-menu">
                  <li data-value="1 kg" class="active">1 kg</li>
                  <li data-value="5 kg">5 kg</li>
                  <li data-value="10 kg">10 kg</li>
                  <li data-value="500 g">500 g</li>
                </ul>
              </div>
                  </div>
                </div>
              </div>

              <!-- Slide 2 -->
              <div class="swiper-slide">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/oil.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                        <div class="qty-dropdown">
                <button class="qty-selected" type="button">
                  <span class="selected-text">1 lt</span>
                  <i class="fas fa-chevron-down"></i>
                </button>

                <ul class="qty-menu">
                  <li data-value="1 kg" class="active">1 lt</li>
                  <li data-value="5 kg">5 lt</li>
                  <li data-value="10 kg">10 lt</li>
                  <li data-value="500 g">500 ml</li>
                </ul>
              </div>
                  </div>
                </div>

              </div>

              <!-- Slide 3 -->
              <div class="swiper-slide">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/salt.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                     <div class="qty-dropdown">
                <button class="qty-selected" type="button">
                  <span class="selected-text">1 kg</span>
                  <i class="fas fa-chevron-down"></i>
                </button>

                <ul class="qty-menu">
                  <li data-value="1 kg" class="active">1 kg</li>
                  <li data-value="5 kg">5 kg</li>
                  <li data-value="10 kg">10 kg</li>
                  <li data-value="500 g">500 g</li>
                </ul>
              </div>
                  </div>
                </div>

              </div>
              <!-- Slide 4-->
              <div class="swiper-slide">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/biscuit.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                          <div class="prod-qty">
                       <span> 1 kg </span>
                      </div>
                  </div>
                </div>

              </div>
              <!-- Slide 5 -->
              <div class="swiper-slide">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/onion.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                      <div class="qty-dropdown">
                <button class="qty-selected" type="button">
                  <span class="selected-text">1 kg</span>
                  <i class="fas fa-chevron-down"></i>
                </button>

                <ul class="qty-menu">
                  <li data-value="1 kg" class="active">1 kg</li>
                  <li data-value="5 kg">5 kg</li>
                  <li data-value="10 kg">10 kg</li>
                  <li data-value="500 g">500 g</li>
                </ul>
              </div>
                  </div>
                </div>

              </div>
              <!-- Slide 6-->
              <div class="swiper-slide">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/ice-cream.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                         <div class="prod-qty">
                       <span> 1 kg </span>
                      </div>
                  </div>
                </div>

              </div>
              <!-- Slide 7-->
              <div class="swiper-slide">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/wheat.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                       <div class="qty-dropdown">
                <button class="qty-selected" type="button">
                  <span class="selected-text">1 kg</span>
                  <i class="fas fa-chevron-down"></i>
                </button>

                <ul class="qty-menu">
                  <li data-value="1 kg" class="active">1 kg</li>
                  <li data-value="5 kg">5 kg</li>
                  <li data-value="10 kg">10 kg</li>
                  <li data-value="500 g">500 g</li>
                </ul>
              </div>
                  </div>
                </div>

              </div>
              <!-- Slide 8 -->
              <div class="swiper-slide">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/oil.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                      <div class="qty-dropdown">
                <button class="qty-selected" type="button">
                  <span class="selected-text">1 lt</span>
                  <i class="fas fa-chevron-down"></i>
                </button>

                <ul class="qty-menu">
                  <li data-value="1 kg" class="active">1 lt</li>
                  <li data-value="5 kg">5 lt</li>
                  <li data-value="10 kg">10 lt</li>
                  <li data-value="500 g">500 ml</li>
                </ul>
              </div>
                  </div>
                </div>

              </div>
              <!-- Slide 9 -->
              <div class="swiper-slide">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/salt.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                     <div class="qty-dropdown">
                <button class="qty-selected" type="button">
                  <span class="selected-text">1 kg</span>
                  <i class="fas fa-chevron-down"></i>
                </button>

                <ul class="qty-menu">
                  <li data-value="1 kg" class="active">1 kg</li>
                  <li data-value="5 kg">5 kg</li>
                  <li data-value="10 kg">10 kg</li>
                  <li data-value="500 g">500 g</li>
                </ul>
              </div>
                  </div>
                </div>

              </div>
              <!-- Slide 10 -->
              <div class="swiper-slide">
                <div class="card product-card">
                  <div class="img-area">
                    <div class="img-placeholder">
                      <img src="{{asset('assets/images/img/onion.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                      <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                          d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                      </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                      <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                      </div>

                      <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                          <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                          <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                      </div>

                    </div>
                  </div>
                  <div class="info">
                    <div class="price-row">
                      <span class="price-now">₹249</span>
                      <span class="price-old">₹299</span>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                      <div class="qty-dropdown">
                <button class="qty-selected" type="button">
                  <span class="selected-text">1 kg</span>
                  <i class="fas fa-chevron-down"></i>
                </button>

                <ul class="qty-menu">
                  <li data-value="1 kg" class="active">1 kg</li>
                  <li data-value="5 kg">5 kg</li>
                  <li data-value="10 kg">10 kg</li>
                  <li data-value="500 g">500 g</li>
                </ul>
              </div>
                  </div>
                </div>

              </div>


          </div>

          <!-- Navigation -->
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>

          <!-- Pagination -->
          <div class="swiper-pagination"></div>
        </div>

      </div>
      </section>
    </div>
  </div>
@endsection

@section('scripts')
  <script>


    function getImgs() {
      return Array.from(document.querySelectorAll('.thumb img'))
        .map(img => img.src);
    }

    let curImg = 0;
    let autoTimer;

    function buildSlider() {
      const imgs = getImgs();
      const track = document.getElementById('sliderTrack');
      track.innerHTML = '';

      // 🔁 Clone LAST image (put at beginning)
      const lastClone = document.createElement('img');
      lastClone.src = imgs[imgs.length - 1];
      track.appendChild(lastClone);

      // Real images
      imgs.forEach((src, i) => {
        const img = document.createElement('img');
        img.src = src;
        img.onclick = () => setImage(i);
        track.appendChild(img);
      });

      // 🔁 Clone FIRST image (put at end)
      const firstClone = document.createElement('img');
      firstClone.src = imgs[0];
      track.appendChild(firstClone);

      // Start from first real image
      curImg = 1;

      const trackEl = document.getElementById('sliderTrack');
      trackEl.style.transform = `translateX(-${curImg * 100}%)`;

      updateActive();
    }
    function slideTo(index) {
      const track = document.getElementById('sliderTrack');
      const total = getImgs().length;

      // HALF STEP
      track.style.transition = "transform 0.9s ease";
      track.style.transform = `translateX(-${index * 100 + 50}%)`;

      setTimeout(() => {
        // FULL STEP
        track.style.transition = "transform 1s ease";
        track.style.transform = `translateX(-${index * 100}%)`;

        curImg = index;

        updateActive();

        // 🔥 LOOP FIX
        if (curImg === total + 1) {
          // reached cloned first
          setTimeout(() => {
            track.style.transition = "none";
            curImg = 1;
            track.style.transform = `translateX(-${curImg * 100}%)`;
          }, 350);
        }

        if (curImg === 0) {
          // reached cloned last
          setTimeout(() => {
            track.style.transition = "none";
            curImg = total;
            track.style.transform = `translateX(-${curImg * 100}%)`;
          }, 350);
        }

      }, 250);
    }

    function setImage(i) {
      clearInterval(autoTimer);

      // because of clone, real index = i + 1
      slideTo(i + 1);

      startAuto();
    }

    function updateActive() {
      const imgs = getImgs();
      const total = imgs.length;

      let realIndex = curImg - 1;

      if (curImg === 0) realIndex = total - 1;
      if (curImg === total + 1) realIndex = 0;

      document.getElementById('zoomImg').src = imgs[realIndex];

      document.querySelectorAll('.thumb').forEach((t, j) =>
        t.classList.toggle('active', j === realIndex)
      );
    }

    function startAuto() {
      autoTimer = setInterval(() => {
        slideTo(curImg + 1);
      }, 3000);
    }

    // Init
    buildSlider();
    startAuto();

    const ZOOM_FACTOR = 3;

    function showZoom() {
      document.getElementById('zoomLens').style.display = 'block';
      document.getElementById('zoomOverlay').classList.add('active');
    }

    function hideZoom() {
      document.getElementById('zoomLens').style.display = 'none';
      document.getElementById('zoomOverlay').classList.remove('active');
    }

    function moveZoom(e) {
      const wrap = document.getElementById('imgWrap');
      const lens = document.getElementById('zoomLens');
      const overlay = document.getElementById('zoomOverlay');
      const zImg = document.getElementById('zoomImg');

      const rect = wrap.getBoundingClientRect();
      const lensW = lens.offsetWidth;
      const lensH = lens.offsetHeight;

      let x = e.clientX - rect.left - lensW / 2;
      let y = e.clientY - rect.top - lensH / 2;
      x = Math.max(0, Math.min(x, rect.width - lensW));
      y = Math.max(0, Math.min(y, rect.height - lensH));

      lens.style.left = x + 'px';
      lens.style.top = y + 'px';

      const oW = overlay.offsetWidth || 400;
      const oH = overlay.offsetHeight || 400;

      const scaledW = rect.width * (oW / rect.width) * ZOOM_FACTOR;
      const scaledH = rect.height * (oH / rect.height) * ZOOM_FACTOR;

      const tx = -(x / rect.width) * scaledW;
      const ty = -(y / rect.height) * scaledH;

      zImg.style.width = scaledW + 'px';
      zImg.style.height = scaledH + 'px';
      zImg.style.transform = `translate(${tx}px, ${ty}px)`;
      zImg.style.transformOrigin = '0 0';
    }

    const sc = document.getElementById('qtyScroll');
    let dn = false, sx, sl;
    sc.addEventListener('mousedown', e => { dn = true; sc.classList.add('grabbing'); sx = e.pageX - sc.offsetLeft; sl = sc.scrollLeft; });
    sc.addEventListener('mouseleave', () => { dn = false; sc.classList.remove('grabbing'); });
    sc.addEventListener('mouseup', () => { dn = false; sc.classList.remove('grabbing'); });
    sc.addEventListener('mousemove', e => { if (!dn) return; e.preventDefault(); sc.scrollLeft = sl - (e.pageX - sc.offsetLeft - sx); });

    function slideNext() {
      const cw = (document.querySelector('.qty-card').offsetWidth || 90) + 10;
      sc.style.scrollBehavior = 'smooth';
      sc.scrollLeft += cw * 2;
    }

    function selectQty(el, price, mrp, save, label) {
      document.querySelectorAll('.qty-card').forEach(c => c.classList.remove('selected'));
      el.classList.add('selected');
      document.getElementById('priceNow').textContent = '₹' + price;
      document.getElementById('priceMrp').textContent = '₹' + mrp;
      document.getElementById('priceSave').textContent = 'You Save ₹' + save;
      document.getElementById('qtyTag').textContent = label;
    }

    function toggleInfo(id) {
      document.getElementById(id).classList.toggle('open');
      document.getElementById(id + 'Arrow').classList.toggle('open');
    }

    let cQty = 0;
    function addToCart() {
      cQty = 1;
      document.getElementById('btnAddCart').style.display = 'none';
      document.getElementById('cartControls').style.display = 'flex';
      updateBadge();
    }
    function changeQty(d) {
      cQty = Math.max(0, cQty + d);
      if (cQty === 0) {
        document.getElementById('btnAddCart').style.display = 'block';
        document.getElementById('cartControls').style.display = 'none';
      } else { updateBadge(); }
    }
    function updateBadge() {
      document.getElementById('cartBadge').textContent = cQty;
      document.getElementById('cartQtyNum').textContent = cQty;
    }
  </script>
  <script>
    // Select all buttons inside product section
    document.querySelectorAll('.prod-details-sec button').forEach(btn => {

      btn.addEventListener('mouseenter', () => {
        hideZoom();  // ✅ hide zoom when hovering button
      });

    });
  </script>
  <script>
    const wishlistBtns = document.querySelectorAll(".wishlist-btn");

    wishlistBtns.forEach(btn => {
      btn.addEventListener("click", () => {
        btn.classList.toggle("active");
      });
    });
  </script>
  <script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 10,
      loop: true,

      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },

      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      breakpoints: {
        320: {
          slidesPerView: 2,
        },
        576: {
          slidesPerView: 3,
        },
        992: {
          slidesPerView: 7,
        }
      }
    });
  </script>
  <script>
    function toggleInfo(id) {

      // 🔒 Close all sections first
      document.querySelectorAll('.info-body').forEach(el => {
        if (el.id !== id) {
          el.classList.remove('open');
        }
      });

      // 🔽 Reset all arrows
      document.querySelectorAll('.info-arrow').forEach(el => {
        if (el.id !== id + 'Arrow') {
          el.classList.remove('open');
        }
      });

      // 🎯 Toggle current one
      document.getElementById(id).classList.toggle('open');
      document.getElementById(id + 'Arrow').classList.toggle('open');
    }
  </script>
   <script>
        document.querySelectorAll(".qty-dropdown").forEach(drop => {
            const btn = drop.querySelector(".qty-selected");
            const text = drop.querySelector(".selected-text");
            const items = drop.querySelectorAll(".qty-menu li");

            btn.addEventListener("click", function (e) {
                e.stopPropagation();
                document.querySelectorAll(".qty-dropdown").forEach(d => {
                    if (d !== drop) d.classList.remove("active");
                });
                drop.classList.toggle("active");
            });

            items.forEach(item => {
                item.addEventListener("click", function () {
                    items.forEach(i => i.classList.remove("active"));
                    item.classList.add("active");
                    text.textContent = item.dataset.value;
                    drop.classList.remove("active");
                });
            });
        });

        document.addEventListener("click", function () {
            document.querySelectorAll(".qty-dropdown").forEach(drop => {
                drop.classList.remove("active");
            });
        });
    </script>
@endsection