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

@section('meta_tags')
  @include('frontend.layouts.meta-tags', ['title' => 'My Salad', 'page' => 'Categories Detail'])
@endsection

@section('styles')

@endsection

@section('content')
  <section class="salad-sec-details">
      <div class="container-fluid px-5">

        <nav class="custom-breadcrumb mb-4">
            <a href="/">Health</a>
            <span class="separator">
                <img src="{{ asset('assets/images/icon/right-arrow .svg') }}" class="salad-arrow-right" alt="Arrow right">
            </span>
            <span class="active">Salad details</span>
        </nav>

        <div class="row g-3">
          <div class="col-lg-6">
            <!-- Product Image Swiper -->
              <div class="salad-details-gallery">
                  <div class="swiper salad-thumb-swiper">
                      <div class="swiper-wrapper">
                          <div class="swiper-slide">
                              <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                          </div>
                          <div class="swiper-slide">
                              <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                          </div>
                          <div class="swiper-slide">
                              <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                          </div>
                      </div>
                  </div>

                  <div class="slider-container">
                    <span class="badge-custom">Customizable</span>
                    <div class="slider-mini-btn d-flex align-items-center gap-2 position-absolute">
                      
                      <button class="like-btn-mini" onclick="toggleLike(this, event)">
                        <img src="{{ asset('assets/images/icon/like-inactive.svg') }}" class="like-off" alt="like">
                        <img src="{{ asset('assets/images/icon/like-active.svg') }}" class="like-on" alt="like">
                    </button>

                      <button class="share-btn-mini">
                        <img src="{{ asset('assets/images/icon/share.png') }}" alt="Share">
                      </button>
                    </div>
                      <div class="swiper salad-main-swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                            </div>
                        </div>

                        <div class="swiper-pagination salad-main-pagination py-3"></div>

                    </div>

                  </div>
              </div>

            <div class="cart-action-bar mt-3">
              <!-- View Cart -->
              <button class="btn-view-cart">
                  <img src="{{ asset('assets/images/icon/cart.svg') }}" alt="icon">
                  View Cart
                  <span class="cart-count">1</span>
              </button>
              <!-- Qty Control -->
              <div class="pd-detail-qty-box">
                <button class="pd-detail-qty-btn pd-detail-minus px-4" onclick="pdDetailChangeQty(-1)">−</button>
                <span class="pd-detail-qty-value" id="pdDetailQtyValue">1</span>
                <button class="pd-detail-qty-btn pd-detail-plus px-4" onclick="pdDetailChangeQty(1)">+</button>
            </div>
          </div>

          </div>
          <div class="col-lg-6">
            {{-- Customization Swiper Start --}}
            <div class="salad-customize-card">

              <div class="salad-card-header">
                <div>
                  <div class="d-flex align-items-center justify-content-between">
                    <h4 class="mb-0 salad-card-title">Creamy Truffle Caesar </h4>
                    <img src="{{ asset('assets/images/icon/veg-icon.svg') }}" alt="icon">
                  </div>
                  <div class="salad-car-badge my-2">22g protein 300 kcal</div>
                </div>

                <div class="salad-card-pricing d-flex flex-row align-items-center gap-2 pt-3 border-top-light">
                  <div>
                    <h2>₹249</h2>
                  </div>
                  <div>
                    <span class="text-decoration-line-through ">₹299</span>
                    <h6>You Save ₹50</h6>
                  </div>

                </div>
                <span class="salad-badge-discount my-3">
                  30% OFF 
                  <span> <img src="{{ asset('assets/images/icon/discount-lightyellow.svg') }}" alt="Discount"></span>
                </span>

                <div>
                  <div class="salad-select-qty py-3 border-top-light">
                     <h6>Select Quantity: <span class="fw-bold">500g</span></h6> <span class="salad-select-badge">Most Bought</span>
                  </div>
                  <div class="qty-card-wrap mb-4">
                      <div class="qty-card active" onclick="selectQty(this)">
                          <div class="qty-title">Small (500g)</div>
                          <h5>₹45 <span>₹90</span></h5>
                          <p>You save ₹45</p>
                      </div>

                      <div class="qty-card" onclick="selectQty(this)">
                          <div class="qty-title">Medium (750g)</div>
                          <h5>₹60 <span>₹120</span></h5>
                          <p>You save ₹60</p>
                      </div>

                      <div class="qty-card" onclick="selectQty(this)">
                          <div class="qty-title">Large (1kg)</div>
                          <h5>₹90 <span>₹150</span></h5>
                          <p>You save ₹60</p>
                      </div>
                  </div>
                </div>
              </div>

                <div class="salad-customize-header">
                    <h6>Customization For Salads <span>(Select up to 4 Items each category)</span></h6>
                </div>

                <!-- Veggies -->
                <div class="salad-category-block active-category" id="VeggiesBlock">
                    <div class="d-flex align-items-center justify-content-between">
                        <h6 class="salad-category-title">Veggies</h6>
                        <div class="salad-customize-arrows">
                            <button class="salad-addon-prev veg-prev">
                              <img src="{{ asset('assets/images/icon/right-arrow .svg') }}" class="salad-addon-arrow" alt="Arrow left">
                            </button>
                            <button class="salad-addon-next veg-next">
                              <img src="{{ asset('assets/images/icon/right-arrow .svg') }}" class="salad-addon-arrow" alt="Arrow left">
                            </button>
                        </div>
                    </div>

                    <div class="swiper salad-addon-swiper" id="VeggiesSwiper">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide">
                              <div class="salad-addon-item">
                                  <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                                  <button class="outline" onclick="toggleAddon(this)">Add</button>
                                  <p>Paneer</p>
                                  <strong>+₹20</strong>
                              </div>
                          </div>
                          <div class="swiper-slide">
                              <div class="salad-addon-item">
                                  <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                                  <button class="outline" onclick="toggleAddon(this)">Add</button>
                                  <p>Paneer</p>
                                  <strong>+₹20</strong>
                              </div>
                          </div>
                          <div class="swiper-slide">
                              <div class="salad-addon-item">
                                  <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                                  <button class="outline" onclick="toggleAddon(this)">Add</button>
                                  <p>Paneer</p>
                                  <strong>+₹20</strong>
                              </div>
                          </div>
                          <div class="swiper-slide">
                              <div class="salad-addon-item">
                                  <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                                  <button class="outline" onclick="toggleAddon(this)">Add</button>
                                  <p>Paneer</p>
                                  <strong>+₹20</strong>
                              </div>
                          </div>
                          <div class="swiper-slide">
                              <div class="salad-addon-item">
                                  <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                                  <button class="outline" onclick="toggleAddon(this)">Add</button>
                                  <p>Paneer</p>
                                  <strong>+₹20</strong>
                              </div>
                          </div>
                          <div class="swiper-slide">
                              <div class="salad-addon-item">
                                  <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                                  <button>Added</button>
                                  <p>Paneer</p>
                                  <strong>+₹20</strong>
                              </div>
                          </div>

                          <div class="swiper-slide">
                              <div class="salad-addon-item">
                                  <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                                  <button class="outline">Add</button>
                                  <p>Carrot</p>
                                  <strong>+₹20</strong>
                              </div>
                          </div>
                      </div>
                    </div>
                </div>

                <!-- Non-Veg -->
                <div class="salad-category-block d-none" id="ProteinBlock">
                    <div class="d-flex align-items-center justify-content-between">
                        <h6 class="salad-category-title">Non - Veg</h6>
                        <div class="salad-customize-arrows">
                            <button class="salad-addon-prev protein-prev">
                              <img src="{{ asset('assets/images/icon/right-arrow .svg') }}" class="salad-addon-arrow" alt="Arrow left">
                            </button>
                            <button class="salad-addon-next protein-next">
                              <img src="{{ asset('assets/images/icon/right-arrow .svg') }}" class="salad-addon-arrow" alt="Arrow left">
                            </button>
                        </div>
                    </div>

                    <div class="swiper salad-addon-swiper" id="ProteinSwiper">
                       <div class="swiper-wrapper">
                          <div class="swiper-slide">
                              <div class="salad-addon-item">
                                  <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                                  <button class="outline" onclick="toggleAddon(this)">Add</button>
                                  <p>Chicken</p>
                                  <strong>+₹40</strong>
                              </div>
                          </div>
                          <div class="swiper-slide">
                              <div class="salad-addon-item">
                                  <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                                  <button class="outline" onclick="toggleAddon(this)">Add</button>
                                  <p>Chicken</p>
                                  <strong>+₹40</strong>
                              </div>
                          </div>
                          <div class="swiper-slide">
                              <div class="salad-addon-item">
                                  <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                                  <button class="outline" onclick="toggleAddon(this)">Add</button>
                                  <p>Chicken</p>
                                  <strong>+₹40</strong>
                              </div>
                          </div>
                          <div class="swiper-slide">
                              <div class="salad-addon-item">
                                  <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                                  <button class="outline" onclick="toggleAddon(this)">Add</button>
                                  <p>Chicken</p>
                                  <strong>+₹40</strong>
                              </div>
                          </div>
                          <div class="swiper-slide">
                              <div class="salad-addon-item">
                                  <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                                  <button class="outline" onclick="toggleAddon(this)">Add</button>
                                  <p>Chicken</p>
                                  <strong>+₹40</strong>
                              </div>
                          </div>
                          <div class="swiper-slide">
                              <div class="salad-addon-item">
                                  <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                                  <button class="outline" onclick="toggleAddon(this)">Add</button>
                                  <p>Chicken</p>
                                  <strong>+₹40</strong>
                              </div>
                          </div>
                          <div class="swiper-slide">
                              <div class="salad-addon-item">
                                  <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="">
                                  <button class="outline" onclick="toggleAddon(this)">Add</button>
                                  <p>Chicken</p>
                                  <strong>+₹40</strong>
                              </div>
                          </div>
                      </div>
                    </div>
                </div>

                <button class="salad-view-more-category d-flex gap-2" type="button" onclick="showNextAddonSwiper()">
                    View More Category 
                  <img src="{{ asset('assets/images/icon/right-arrow .svg') }}" class="salad-arrow-down" alt="Arrow down">
                </button>
            </div>
            {{-- Customization Swiper end --}}

            {{-- View Salad Details Accordion Start --}}
            <div class="accordion salad-details-accordion" id="SaladDetailsAccordion">
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#SaladDetailsCollapse">
                            View Salad Details
                        </button>
                    </h2>

                    <div id="SaladDetailsCollapse" class="accordion-collapse collapse" data-bs-parent="#SaladDetailsAccordion">
                        <div class="accordion-body pt-0">

                            <div class="accordion salad-inner-accordion" id="SaladInnerAccordion">

                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" data-bs-target="#HealthBenefits">
                                            Health Benefits
                                        </button>
                                    </h2>
                                    <div id="HealthBenefits" class="accordion-collapse  border-top" data-bs-parent="#SaladInnerAccordion">
                                        <div class="accordion-body">
                                            <ul class="mb-0 custom-bullets">
                                                <li>High in Fiber</li>
                                                <li>Rich in Vitamins</li>
                                                <li>Low Calories</li>
                                                <li>Boosts Immunity</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#AboutSalad">
                                            About this Salad
                                        </button>
                                    </h2>
                                    <div id="AboutSalad" class="accordion-collapse collapse border-top" data-bs-parent="#SaladInnerAccordion">
                                        <div class="accordion-body">
                                            <div class="salad-info-row">
                                                <strong>Description</strong>
                                                <p>Freshly prepared salad made using carefully selected farm-fresh ingredients to ensure natural taste, quality, and freshness in every bite. Packed with essential vitamins, minerals, and dietary fiber, this salad supports immunity.</p>
                                            </div>

                                            <div class="salad-info-row">
                                                <strong>Return Policy</strong>
                                                <p>This item is non-returnable due to its perishable nature. In case of quality issues, you can request a refund within 24 hours of delivery.</p>
                                            </div>

                                            <div class="salad-info-row">
                                                <strong>Packaging</strong>
                                                <p>Packed in eco-friendly mesh bag</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
            
            {{-- View Salad Details Accordion end --}}

          </div>
        </div>

        {{-- products listing Start --}}
        <div class="product-listing-main salad-sec mt-3">
            <div class="product-listing-header d-flex align-items-center justify-content-between pb-4">
                <h3 class="mb-0">Explore More Salads</h3>
                <div class="nav-see-all d-flex flex-row align-items-center gap-2">
                    <a href="{{ route('frontend.salad') }}" class="fs-18">See all</a>
                    <img src="{{ asset('assets/images/icon/right-arrow .svg') }}" class="salad-arrow-right" alt="Arrow right">
                </div>
            </div>
            <div id="salads">
                <div class="row g-3">

                    <div class="col-lg-6">
                            <!-- Card 1 -->
                        <div class="bowl-card" data-name="Golden Sunrise Blend">
                            <div class="row g-1">
                            <div class="col-md-4">
                                <div class="card-img-block">
                                <span class="badge-custom">Customizable</span>
                                <div class="slider-mini-btn d-flex align-items-center gap-2 position-absolute">
                                    <button class="like-btn-mini" onclick="toggleLike(this, event)">
                                        <img src="{{ asset('assets/images/icon/like-inactive.svg') }}" class="like-off" alt="like">
                                        <img src="{{ asset('assets/images/icon/like-active.svg') }}" class="like-on" alt="like">
                                    </button>
                                </div>
                                <div class="bowl-card-img-wrapper">
                                    <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="Product-Image">
                                </div>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="card-body-block">
                                <div>
                                    <span class="badge-discount">
                                    30% OFF 
                                    <Span> <img src="{{ asset('assets/images/icon/discount-lightyellow.svg') }}" alt="Discount"></Span>
                                    </span>
                                    <div class="card-title">Golden Sunrise Blend</div>
                                    <div class="card-desc">Turmeric-infused pineapple and mango smoothie with a touch of creamy coconut.</div>
                                    <div class="card-weight">350g</div>
                                </div>
                                <div class="card-footer-row">
                                    <div class="price-block">
                                    <span class="price-now">₹50</span>
                                    <span class="price-old">₹120</span>
                                    </div>
                                    <div class="btn-group-card">
                                    <a href="{{route('frontend.salad-details')}}" class="btn-view">View Details</a>
                                    <div class="qty-ctrl"><button class="btn-add" onclick="addItem(this)">+ Add</button><div class="qty-counter" style="display:none"><button class="qty-btn minus" onclick="changeQty(this,-1)">−</button><span class="qty-num">1</span><button class="qty-btn plus" onclick="changeQty(this,1)">+</button></div></div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-lg-6">
                            <!-- Card 2 -->
                        <div class="bowl-card" data-name="Golden Sunrise Blend">
                        <div class="row g-1">
                            <div class="col-md-4">
                            <div class="card-img-block">
                                <div class="slider-mini-btn d-flex align-items-center gap-2 position-absolute">
                                    <button class="like-btn-mini" onclick="toggleLike(this, event)">
                                        <img src="{{ asset('assets/images/icon/like-inactive.svg') }}" class="like-off" alt="like">
                                        <img src="{{ asset('assets/images/icon/like-active.svg') }}" class="like-on" alt="like">
                                    </button>
                                </div>
                                <div class="bowl-card-img-wrapper">
                                <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="Product-Image">
                                </div>
                            </div>
                            </div>
                            <div class="col-md-8">
                            <div class="card-body-block">
                                <div>
                                <div class="card-title">Golden Sunrise Blend</div>
                                <div class="card-desc">Turmeric-infused pineapple and mango smoothie with a touch of creamy coconut.</div>
                                <div class="card-weight">350g</div>
                                </div>
                                <div class="card-footer-row">
                                <div class="price-block">
                                    <span class="price-now">₹50</span>
                                    <span class="price-old">₹120</span>
                                </div>
                                <div class="btn-group-card">
                                    <a href="{{route('frontend.salad-details')}}" class="btn-view">View Details</a>
                                    <div class="qty-ctrl"><button class="btn-add" onclick="addItem(this)">+ Add</button><div class="qty-counter" style="display:none"><button class="qty-btn minus" onclick="changeQty(this,-1)">−</button><span class="qty-num">1</span><button class="qty-btn plus" onclick="changeQty(this,1)">+</button></div></div>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        </div>

                    </div>
                    
                    <div class="col-lg-6">
                            <!-- Card 3 -->
                        <div class="bowl-card" data-name="Golden Sunrise Blend">
                        <div class="row g-1">
                            <div class="col-md-4">
                            <div class="card-img-block">
                                <div class="slider-mini-btn d-flex align-items-center gap-2 position-absolute">
                                    <button class="like-btn-mini" onclick="toggleLike(this, event)">
                                        <img src="{{ asset('assets/images/icon/like-inactive.svg') }}" class="like-off" alt="like">
                                        <img src="{{ asset('assets/images/icon/like-active.svg') }}" class="like-on" alt="like">
                                    </button>
                                </div>
                                <div class="bowl-card-img-wrapper">
                                <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="Product-Image">
                                </div>
                            </div>
                            </div>
                            <div class="col-md-8">
                            <div class="card-body-block">
                                <div>
                                <div class="card-title">Golden Sunrise Blend</div>
                                <div class="card-desc">Turmeric-infused pineapple and mango smoothie with a touch of creamy coconut.</div>
                                <div class="card-weight">350g</div>
                                </div>
                                <div class="card-footer-row">
                                <div class="price-block">
                                    <span class="price-now">₹50</span>
                                    <span class="price-old">₹120</span>
                                </div>
                                <div class="btn-group-card">
                                    <a href="{{route('frontend.salad-details')}}" class="btn-view">View Details</a>
                                    <div class="qty-ctrl"><button class="btn-add" onclick="addItem(this)">+ Add</button><div class="qty-counter" style="display:none"><button class="qty-btn minus" onclick="changeQty(this,-1)">−</button><span class="qty-num">1</span><button class="qty-btn plus" onclick="changeQty(this,1)">+</button></div></div>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        </div>

                    </div>

                    <div class="col-lg-6">
                            <!-- Card 4 -->
                        <div class="bowl-card" data-name="Golden Sunrise Blend">
                        <div class="row g-1">
                            <div class="col-md-4">
                            <div class="card-img-block">
                                <span class="badge-custom">Customizable</span>
                                <div class="slider-mini-btn d-flex align-items-center gap-2 position-absolute">
                                    <button class="like-btn-mini" onclick="toggleLike(this, event)">
                                        <img src="{{ asset('assets/images/icon/like-inactive.svg') }}" class="like-off" alt="like">
                                        <img src="{{ asset('assets/images/icon/like-active.svg') }}" class="like-on" alt="like">
                                    </button>
                                </div>
                                <div class="bowl-card-img-wrapper">
                                <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="Product-Image">
                                </div>
                            </div>
                            </div>
                            <div class="col-md-8">
                            <div class="card-body-block">
                                <div>
                                <span class="badge-discount">
                                    30% OFF 
                                    <Span> <img src="{{ asset('assets/images/icon/discount-lightyellow.svg') }}" alt="Discount"></Span>
                                </span>
                                <div class="card-title">Golden Sunrise Blend</div>
                                <div class="card-desc">Turmeric-infused pineapple and mango smoothie with a touch of creamy coconut.</div>
                                <div class="card-weight">350g</div>
                                </div>
                                <div class="card-footer-row">
                                <div class="price-block">
                                    <span class="price-now">₹50</span>
                                    <span class="price-old">₹120</span>
                                </div>
                                <div class="btn-group-card">
                                    <a href="{{route('frontend.salad-details')}}" class="btn-view">View Details</a>
                                    <div class="qty-ctrl"><button class="btn-add" onclick="addItem(this)">+ Add</button><div class="qty-counter" style="display:none"><button class="qty-btn minus" onclick="changeQty(this,-1)">−</button><span class="qty-num">1</span><button class="qty-btn plus" onclick="changeQty(this,1)">+</button></div></div>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
        {{-- products listing End --}}
      </div>

      {{-- toast add to cart / whish list --}}
        <div class="custom-toast-wrap">
            <div class="custom-toast-card" id="cartToast">
                <div class="row g-0 align-items-center justify-content-between w-100">
                    <div class="col-7">
                        <h6 class="toast-title mb-0"></h6>
                    </div>

                    <div class="col-5">
                        <div class="d-flex gap-3 align-items-center justify-content-end">
                            <p class="toast-sub d-flex flex-column mb-0">
                                Cart <span id="cartCount">1 Item</span>
                            </p>

                            <div class="toast-img-group">
                                <img src="{{ asset('assets/images/icon/product-back-frame.svg') }}" class="toast-img">

                                {{-- product image in toast --}}
                                <img src="{{ asset('assets/images/home/products/product-1.png') }}" alt="product" class="toast-product-img">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  </section>
@endsection

@section('scripts')
<script defer>
document.addEventListener('DOMContentLoaded', () => {
    const thumbSlider = document.querySelector('.salad-thumb-swiper');
    const mainSlider = document.querySelector('.salad-main-swiper');

    if (!thumbSlider || !mainSlider) return;

    const saladThumbSwiper = new Swiper(thumbSlider, {
        direction: 'vertical',
        slidesPerView: 3,
        spaceBetween: 12,
        watchSlidesProgress: true,
        watchOverflow: true,
    });

    new Swiper(mainSlider, {
        spaceBetween: 10,
        speed: 500,
        watchOverflow: true,

        pagination: {
            el: mainSlider.querySelector('.salad-main-pagination'),
            clickable: true,
        },

        thumbs: {
            swiper: saladThumbSwiper,
        },
    });
});
</script>

<script defer>
    document.addEventListener('DOMContentLoaded', () => {

        const createCategorySwiper = (
            sliderSelector,
            nextSelector,
            prevSelector
        ) => {

            const slider = document.querySelector(sliderSelector);

            if (!slider) return;

            return new Swiper(slider, {
                slidesPerView: 3,
                spaceBetween: 14,
                speed: 500,
                watchOverflow: true,

                navigation: {
                    nextEl: nextSelector,
                    prevEl: prevSelector,
                },

                breakpoints: {
                    576: {
                        slidesPerView: 4,
                    },

                    992: {
                        slidesPerView: 5,
                    },
                },
            });
        };

        // Veg
        createCategorySwiper(
            '#VeggiesSwiper',
            '.veg-next',
            '.veg-prev'
        );

        // Protein
        createCategorySwiper(
            '#ProteinSwiper',
            '.protein-next',
            '.protein-prev'
        );

    });
</script>

<script>
  function toggleAddon(btn) {
    if (btn.classList.contains('outline')) {
        //  Add → Added
        btn.classList.remove('outline');
        btn.textContent = 'Added';
    } else {
        //  Added → Add
        btn.classList.add('outline');
        btn.textContent = 'Add';
    }
}
</script>

<script>
  let isExpanded = false;

    function showNextAddonSwiper() {
        const veg = document.getElementById("VeggiesBlock");
        const nonVeg = document.getElementById("ProteinBlock");
        const btn = document.querySelector(".salad-view-more-category");

        if (!isExpanded) {
            //  Show Non-Veg
            nonVeg.classList.remove("d-none");
            btn.innerHTML = 'Less view categories <img src="{{ asset('assets/images/icon/right-arrow .svg') }}" class="salad-arrow-up" alt="Arrow up">';
            isExpanded = true;
        } else {
            //  Hide Non-Veg
            nonVeg.classList.add("d-none");
            btn.innerHTML = 'View more category <img src="{{ asset('assets/images/icon/right-arrow .svg') }}" class="salad-arrow-down" alt="Arrow down">';
            isExpanded = false;
        }
    }
</script>

<script>
let pdDetailQty = 1;

function pdDetailChangeQty(val) {
    pdDetailQty += val;

    if (pdDetailQty < 1) pdDetailQty = 1;

    document.getElementById("pdDetailQtyValue").textContent = pdDetailQty;
}
</script>

<script>
  // active qty size
  function selectQty(card) {
    document.querySelectorAll(".qty-card").forEach(c => {
        c.classList.remove("active");
    });

    card.classList.add("active");
}
</script>

<script>
function changeQty(btn, val) {
    let counter = btn.closest('.qty-counter');
    let qtyEl = counter.querySelector('.qty-num');

    let qty = parseInt(qtyEl.innerText);
    qty += val;

    let ctrl = btn.closest('.qty-ctrl');
    let addBtn = ctrl.querySelector('.btn-add');

    if (qty <= 0) {
        // hide counter, show +Add
        counter.style.display = "none";
        addBtn.style.display = "block";
        qty = 1;
    } else {
        qtyEl.innerText = qty;
    }
}
</script>

<script>
function addItem(btn) {
    let card = btn.closest('.bowl-card');
    let counter = btn.closest('.qty-ctrl').querySelector('.qty-counter');

    let name = card.getAttribute('data-name') || "Item";

    btn.style.display = "none";
    counter.style.display = "flex";

    // send message
    showCustomToast(name + " Added to Cart", 1);
}

let toastTimer;

function showCustomToast(message, count = 1) {
    const toast = document.getElementById('cartToast');

    toast.classList.remove('show');
    void toast.offsetWidth;

    // use message directly
    toast.querySelector('.toast-title').innerText = message;

    document.getElementById('cartCount').innerText =
        count + (count > 1 ? " Items" : " Item");

    toast.classList.add('show');

    clearTimeout(toastTimer);

    toastTimer = setTimeout(() => {
        toast.classList.remove('show');
    }, 2000);
}
</script>

<script>
function toggleLike(btn, e) {
    e.stopPropagation(); 

    btn.classList.toggle("active");

    let card = btn.closest('.bowl-card');
    let name = card ? card.getAttribute('data-name') : "Item";

    let isLiked = btn.classList.contains("active");

    if (isLiked) {
        showCustomToast(name + " Added to Wishlist", 1);
    } else {
        showCustomToast(name + " Removed from Wishlist", 1);
    }
}
</script>

<script>
    document.querySelectorAll('.salad-inner-accordion .accordion-button').forEach(btn => {
    btn.addEventListener('click', function () {
        const targetId = this.dataset.bsTarget;
        const target = document.querySelector(targetId);

        const isOpen = target.classList.contains('open');

        // Close all inner panels
        document.querySelectorAll('.salad-inner-accordion .accordion-collapse').forEach(pane => {
            pane.classList.remove('open');
        });
        document.querySelectorAll('.salad-inner-accordion .accordion-button').forEach(b => {
            b.classList.add('collapsed');
        });

        // If it wasn't open, open it
        if (!isOpen) {
            target.classList.add('open');
            this.classList.remove('collapsed');
        }
    });
});

</script>
@endsection