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

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

@section('styles')

@endsection

@section('content')
  <section class="salad-sec">
        <div class="container-fluid px-5">
  <!-- 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>
                    <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>

  <!-- 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>
                    <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>
    </section>

    {{-- 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>

@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>
  
@endsection