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

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

@section('styles')

@endsection


@section('content')

  <section class="health-banner space-y">
    <div class="container-fluid ">
      <div class="row d-flex align-items-center justify-content-center">
        <div class="col-lg-7 col-md-12 col-12">
          <div class="content">
            <h1>HEALTHY CHOICES, FRESHLY MADE</h1>
            <p class="sub">Discover nutritious salads, refreshing smoothies, and wholesome meals made with fresh
              ingredients for your everyday lifestyle.</p>
            <a class="cta" href="#">
              Explore Offer
            </a>
          </div>

        </div>
        <div class="col-lg-5 col-md-12 col-12">
          <div class="scene" id="scene">
            <!-- <div class="bg-circle"></div> -->
            <img class="arc-image" id="arcSvg" src="{{ asset('assets/images/img/arc-img.png') }}" alt="Arc Shape">
            <!-- <svg class="arc-svg" id="arcSvg" xmlns="http://www.w3.org/2000/svg"></svg> -->
            <div class="bowl-stage" id="bowlStage"></div>
            <div class="inds" id="inds"></div>
          </div>
        </div>
      </div>
    </div>
  </section>


  <section class="salad-sec space health-sec">
    <div class="container-fluid ">
      <!-- Tab Toggle -->
      <div class="tab-toggle">
        <button class="active" onclick="switchTab('salads', this)">Salads</button>
        <button onclick="switchTab('smoothies', this)">Smoothies</button>
      </div>

      <!-- Section Header -->
      <div class="section-header flex-wrap pt-lg-5 pt-4">
        <h2>The Harvest Bowls</h2>
        <span class="total">Total Items -120</span>
      </div>

      <!-- Salads Tab -->
      <div id="salads" class="tab-pane active">
        <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>
                      <div class="offer-badge-sec">
                        <div class="badge-inner">
                          <span class="pct">50%</span>
                          <span class="txt">OFF</span>
                        </div>
                      </div>
                      <div class="card-title">Golden Sunrise Blend...
                        <span class="veg-icon">▲</span>
                      </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 class="veg-badge">
                          <div class="veg-circle"></div>
                        </div>
                      </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 class="veg-badge">
                          <div class="veg-circle"></div>
                        </div>
                      </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>
                      <div class="card-title">Golden Sunrise Blend...
                        <div class="veg-badge">
                          <div class="veg-circle"></div>
                        </div>
                      </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>

      <!-- Smoothies Tab -->
      <div id="smoothies" class="tab-pane">
        <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>
                      <div class="offer-badge-sec">
                        <div class="badge-inner">
                          <span class="pct">50%</span>
                          <span class="txt">OFF</span>
                        </div>
                      </div>
                      <div class="card-title">Golden Sunrise Blend...
                        <div class="veg-badge">
                          <div class="veg-circle"></div>
                        </div>
                      </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 class="veg-badge">
                          <div class="veg-circle"></div>
                        </div>
                      </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 class="veg-badge">
                          <div class="veg-circle"></div>
                        </div>
                      </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>
                      <div class="card-title">Golden Sunrise Blend...
                        <div class="veg-badge">
                          <div class="veg-circle"></div>
                        </div>
                      </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>
  </section>
  <section class=" health-cta space-x">
    <div class="container-fluid">
      <div class="banner-container">
        <div class="brush-box">
          <h1 class="banner-text">Fresh & Healthy</h1>
        </div>
      </div>
    </div>
  </section>

  <section class="salad-sec health-sec space">
    <div class="container-fluid">
      <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>
                    <div class="card-title">Golden Sunrise Blend...
                      <div class="veg-badge">
                        <div class="veg-circle"></div>
                      </div>
                    </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 class="veg-badge">
                        <div class="veg-circle"></div>
                      </div>
                    </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 class="veg-badge">
                        <div class="veg-circle"></div>
                      </div>
                    </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>
                    <div class="card-title">Golden Sunrise Blend...
                      <div class="veg-badge">
                        <div class="veg-circle"></div>
                      </div>
                    </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>
  </section>



  {{-- toast add to cart / whish list --}}
  {{-- <div class="custom-toast-wrap custom-toast-wrap-1 ">
    <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">

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

  <div class="cart-toast-wrap category-sec" id="cartToastWrap">
        <div class="cart-toast">

            <div class="toast-text">
                <div class="toast-title" id="toastTitle"></div>
                <div class="toast-label">Added to Cart</div>
            </div>
            <div class="toast-right">
                <div class="toast-cart-label">Cart</div>
                <div class="toast-items"><span id="toastCount">0</span> Items</div>
            </div>
            <div class="stack-box one" id="stackBox">
                <div class="s-card" id="sc0"></div>
                <div class="s-card" id="sc1"></div>
                <div class="s-card" id="sc2"></div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
  <script>
    function switchTab(id, btn) {
      document.querySelectorAll('.tab-toggle button').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
      document.getElementById(id).classList.add('active');
    }

    function addItem(btn) {
      const ctrl = btn.closest('.qty-ctrl');
      btn.style.display = 'none';
      const counter = ctrl.querySelector('.qty-counter');
      counter.style.display = 'flex';
      ctrl.querySelector('.qty-num').textContent = '1';
    }

    function changeQty(btn, delta) {
      const ctrl = btn.closest('.qty-ctrl');
      const numEl = ctrl.querySelector('.qty-num');
      let val = parseInt(numEl.textContent) + delta;
      if (val <= 0) {
        ctrl.querySelector('.qty-counter').style.display = 'none';
        ctrl.querySelector('.btn-add').style.display = '';
      } else {
        numEl.textContent = val;
      }
    }
  </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>
    const baseUrl = "{{ asset('assets/images/img') }}";

    const meals = [
      { src: `${baseUrl}/health-prod-1.png`, label: 'Power Salad' },
      { src: `${baseUrl}/health-prod-2.png`, label: 'Fruit Bowl' },
      { src: `${baseUrl}/health-prod-3.png`, label: 'Fresh Veggies' },
      { src: `${baseUrl}/health-prod-4.png`, label: 'Smoothie Bowl' },
      { src: `${baseUrl}/health-prod-5.png`, label: 'Grain Bowl' },
    ];

    /* ═══════════════════════════════════════════
       CONSTANTS
    ═══════════════════════════════════════════ */
    const N = meals.length;
    const BOWL_D = 340;
    const T_SIZE = 56;

    const SWAP_MS = 820;
    const STEP_MS = 700;
    const AUTO_MS = 3400;
    const REVERSE_MS = 100;

    let POS_MAIN_X = 0,
      POS_MAIN_Y = 0;
    let POS_NEXT_X = 0,
      POS_NEXT_Y = 0;
    let arcCX = 0,
      arcCY = 0;

    const ARC_R = 280;
    const ARC_SPAN = 140;
    const ARC_START = 140;

    /* ═══════════════════════════════════════════
       STATE
    ═══════════════════════════════════════════ */
    let curMain = 0;
    let arcOffset = 0;
    let busy = false;
    let autoTimer = null;
    let cycleCount = 0;

    /* ═══════════════════════════════════════════
       DOM SETUP
    ═══════════════════════════════════════════ */
    const scene = document.getElementById('scene');
    const bowlStage = document.getElementById('bowlStage');
    const arcSvg = document.getElementById('arcSvg');
    const indsEl = document.getElementById('inds');

    const bowlEls = meals.map(m => {
      const img = document.createElement('img');
      img.className = 'bowl';
      img.src = m.src;
      img.alt = m.label;
      img.style.cssText =
        'opacity:0;transform:scale(0.3);transition:none;left:-9999px;top:-9999px;z-index:4;';
      bowlStage.appendChild(img);
      return img;
    });

    const thumbEls = meals.map(m => {
      const img = document.createElement('img');
      img.className = 'thumb';
      img.src = m.src;
      img.alt = m.label;

      img.addEventListener('click', () => {
        if (!busy) runNext();
      });

      scene.appendChild(img);
      return img;
    });

    const indEls = meals.map((_, i) => {
      const d = document.createElement('div');
      d.className = 'ind' + (i === 0 ? ' on' : '');
      indsEl.appendChild(d);
      return d;
    });

    /* ═══════════════════════════════════════════
       GEOMETRY
    ═══════════════════════════════════════════ */
    function initGeometry() {
      const sw = scene.offsetWidth;
      const sh = scene.offsetHeight;

      POS_MAIN_X = sw * 0.56;
      POS_MAIN_Y = sh * 0.52;

      POS_NEXT_X = sw + BOWL_D * 0.7;
      POS_NEXT_Y = POS_MAIN_Y;

      arcCX = POS_MAIN_X - ARC_R * 0.18;
      arcCY = POS_MAIN_Y - 50;

      arcSvg.innerHTML = `
      <circle
        cx="${arcCX}"
        cy="${arcCY}"
        r="${ARC_R}"
        fill="none"
        stroke="#88bb88"
        stroke-width="1.5"
        stroke-dasharray="5 9"
        opacity=".5"
      />
    `;
    }

    /* ═══════════════════════════════════════════
       THUMB PLACEMENT
    ═══════════════════════════════════════════ */
    function thumbAngle(i) {
      const spacing = ARC_SPAN / (N - 1);
      return ARC_START + i * spacing + arcOffset;
    }

    function placeThumbs(animated = true, duration = STEP_MS) {
      thumbEls.forEach((el, i) => {
        const deg = thumbAngle(i);
        const rad = deg * Math.PI / 180;

        const x = arcCX + ARC_R * Math.cos(rad);
        const y = arcCY + ARC_R * Math.sin(rad);

        if (!animated) {
          el.style.transition = 'none';
          void el.offsetWidth;
        } else {
          el.style.transition = `
          left ${duration}ms cubic-bezier(.4,0,.2,1),
          top ${duration}ms cubic-bezier(.4,0,.2,1),
          opacity .35s ease
        `;
        }

        el.style.left = (x - T_SIZE / 2) + 'px';
        el.style.top = (y - T_SIZE / 2) + 'px';

        const norm = ((deg % 360) + 360) % 360;
        const hide = norm < 135 || norm > 358;

        el.style.opacity = hide ? '0' : '1';
        el.style.pointerEvents = hide ? 'none' : 'auto';
      });
    }

    /* ═══════════════════════════════════════════
       BOWL HELPERS
    ═══════════════════════════════════════════ */
    function applyBowl(el, config) {
      const {
        x,
        y,
        scale,
        rot,
        opacity,
        animated,
        dur = SWAP_MS,
        ease = 'cubic-bezier(.4,0,.2,1)'
      } = config;

      if (animated) {
        el.style.transition = `
        left ${dur}ms ${ease},
        top ${dur}ms ${ease},
        transform ${dur}ms ${ease},
        opacity ${Math.round(dur * .65)}ms ease
      `;
      } else {
        el.style.transition = 'none';
        void el.offsetWidth;
      }

      el.style.left = (x - BOWL_D / 2) + 'px';
      el.style.top = (y - BOWL_D / 2) + 'px';
      el.style.transform = `scale(${scale}) rotate(${rot}deg)`;
      el.style.opacity = String(opacity);
    }

    function snapMain(idx) {
      applyBowl(bowlEls[idx], {
        x: POS_MAIN_X,
        y: POS_MAIN_Y,
        scale: 1,
        rot: 0,
        opacity: 1,
        animated: false
      });

      bowlEls[idx].style.zIndex = '6';
    }

    function snapStandby(idx) {
      applyBowl(bowlEls[idx], {
        x: POS_NEXT_X,
        y: POS_NEXT_Y,
        scale: 0.6,
        rot: 0,
        opacity: 0,
        animated: false
      });

      bowlEls[idx].style.zIndex = '4';
    }

    /* ═══════════════════════════════════════════
       MAIN IMAGE SWAP
    ═══════════════════════════════════════════ */
    function crossSwap(nextIdx, dur = SWAP_MS) {

      return new Promise(resolve => {

        const outEl = bowlEls[curMain];
        const inEl = bowlEls[nextIdx];

        outEl.style.zIndex = "14";
        inEl.style.zIndex = "16";

        // prepare incoming element (hidden start position)
        applyBowl(inEl, {
          x: POS_NEXT_X,
          y: POS_MAIN_Y,
          scale: 0.72,
          rot: -180,
          opacity: 0,
          animated: false
        });

        requestAnimationFrame(() => {
          requestAnimationFrame(() => {

            // OUT animation (exit)
            applyBowl(outEl, {
              x: POS_NEXT_X,
              y: POS_MAIN_Y,
              scale: 0.72,
              rot: 180,
              opacity: 0,
              animated: true,
              dur
            });

            // IN animation (enter)
            applyBowl(inEl, {
              x: POS_MAIN_X,
              y: POS_MAIN_Y,
              scale: 1,
              rot: -360,
              opacity: 1,
              animated: true,
              dur
            });

          });
        });

        setTimeout(() => {

          // reset old element
          snapStandby(curMain);

          outEl.style.zIndex = "4";
          inEl.style.zIndex = "6";

          curMain = nextIdx;

          indEls.forEach((d, i) =>
            d.classList.toggle("on", i === curMain)
          );

          resolve();

        }, dur + 80);
      });
    }

    /* ═══════════════════════════════════════════
       REVERSE ARC MOVEMENT
    ═══════════════════════════════════════════ */
    async function reverseThumbs() {
      const spacing = ARC_SPAN / (N - 1);

      for (let i = 0; i < N - 1; i++) {
        arcOffset += spacing;

        placeThumbs(true, REVERSE_MS);

        await new Promise(resolve =>
          setTimeout(resolve, REVERSE_MS)
        );
      }

      // exact reset position
      arcOffset = 0;
      placeThumbs(false);
    }

    /* ═══════════════════════════════════════════
       STEP
    ═══════════════════════════════════════════ */
    async function step() {

      const nextIdx = (curMain + 1) % N;

      const spacing = ARC_SPAN / (N - 1);

      // move arc (your system kept intact)
      arcOffset -= spacing;

      placeThumbs(true, SWAP_MS);

      // wait a bit so thumb motion feels synced
      await new Promise(r => setTimeout(r, 120));

      // main swap (now using fixed reference-style animation)
      await crossSwap(nextIdx, SWAP_MS);

      cycleCount++;

      // SINGLE reverse sweep (kept from your logic)
      if (cycleCount >= N - 1) {
        cycleCount = 0;
        await reverseThumbs();
      }
    }
    /* ═══════════════════════════════════════════
       AUTO / MANUAL
    ═══════════════════════════════════════════ */
    async function runNext() {
      if (busy) return;

      busy = true;
      stopAuto();

      await step();

      busy = false;
      startAuto();
    }

    function startAuto() {
      autoTimer = setInterval(runNext, AUTO_MS);
    }

    function stopAuto() {
      clearInterval(autoTimer);
      autoTimer = null;
    }

    /* ═══════════════════════════════════════════
       INIT
    ═══════════════════════════════════════════ */
    function init() {
      initGeometry();

      meals.forEach((_, i) => snapStandby(i));
      snapMain(0);

      placeThumbs(false);

      startAuto();
    }

    requestAnimationFrame(init);

    window.addEventListener('resize', () => {
      initGeometry();

      snapMain(curMain);

      meals.forEach((_, i) => {
        if (i !== curMain) snapStandby(i);
      });

      placeThumbs(false);
    });
  </script>

{{-- toast card popup --}}
  <script>
    (function () {

    /* ── Cart state ── */
    const cartState = {};
    let toastTimer = null;

    /* ── Helpers ── */
    function totalItems() {
        return Object.values(cartState).reduce((s, v) => s + v, 0);
    }

    function updateStack() {
        const keys = Object.keys(cartState).filter(k => cartState[k] > 0);
        const box = document.getElementById('stackBox');
        const cards = ['sc0', 'sc1', 'sc2'].map(id => document.getElementById(id));

        const last3 = keys.slice(-3);
        const filled = [
            last3[last3.length - 3],
            last3[last3.length - 2],
            last3[last3.length - 1]
        ];

        filled.forEach((idx, slot) => {
            if (idx !== undefined) {
                const bowlCards = document.querySelectorAll('.bowl-card');
                const img = bowlCards[idx]
                    ? bowlCards[idx].querySelector('.bowl-card-img-wrapper img')
                    : null;

                cards[slot].innerHTML = img ? `<img src="${img.src}" alt="">` : '';
            } else {
                cards[slot].innerHTML = '';
            }
        });

        box.className = 'stack-box';
        if (keys.length === 1) box.classList.add('one');
        else if (keys.length === 2) box.classList.add('two');
    }

    function showToast(productName) {
        updateStack();

        document.getElementById('toastTitle').textContent = productName;
        document.getElementById('toastCount').textContent = totalItems();

        const wrap = document.getElementById('cartToastWrap');
        wrap.classList.remove('show');
        void wrap.offsetWidth;
        wrap.classList.add('show');

        if (toastTimer) clearTimeout(toastTimer);
        toastTimer = setTimeout(() => wrap.classList.remove('show'), 3200);
    }

    /* ── Wire up every .bowl-card ── */
    document.querySelectorAll('.bowl-card').forEach(function (card, index) {

        const productName = card.dataset.name
            || card.querySelector('.card-title')?.firstChild?.textContent?.trim()
            || 'Product';

        const qtyCtrl  = card.querySelector('.qty-ctrl');
        const addBtn   = card.querySelector('.btn-add');
        const minusBtn = card.querySelector('.qty-btn.minus');
        const plusBtn  = card.querySelector('.qty-btn.plus');
        const qtyNum   = card.querySelector('.qty-num');

        let count = 1;

        /* ── + Add button ── */
        addBtn.addEventListener('click', function () {
            count = 1;
            qtyNum.textContent = count;
            addBtn.style.display  = 'none';
            qtyCtrl.style.display = 'flex';

            cartState[index] = count;
            showToast(productName);
        });

        /* ── Plus (+) button ── */
        plusBtn.addEventListener('click', function () {
            count++;
            qtyNum.textContent = count;

            cartState[index] = count;
            showToast(productName);
        });

        /* ── Minus (−) button ── */
        minusBtn.addEventListener('click', function () {
            if (count > 1) {
                count--;
                qtyNum.textContent = count;
                cartState[index] = count;
                showToast(productName);
            } else {
                // Reset back to "+ Add" state
                count = 1;
                delete cartState[index];
                qtyCtrl.style.display = 'none';
                addBtn.style.display  = 'inline-flex';
            }
        });
    });

})();
  </script>
@endsection