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

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

@section('styles')

@endsection

@section('content')
  <section class="my-cart-page">
    <div class="container-fluid">

      <div class="breadcrumb-bar">
        <a href="{{ url('/') }}">Home</a> <i class="fa-solid fa-chevron-right black-icon me-2"></i><span>My Cart</span>
      </div>

      <div class="cart-page">
        <div class="row">
          <div class="col-lg-7">
            <div class="left-col">
              <div class="cart-header">
                <div>
                  <div class="cart-title">My Cart</div>
                  <div class="cart-subtitle">5 items in your bag!</div>
                </div>
                <button class="schedule-btn" id="scheduleBtn" onclick="openSchedule()">
                  <img src="{{asset('assets/images/icon/calender.svg') }}" alt="">
                  <span id="scheduleBtnText">Schedule</span>
                </button>
              </div>

              <div class="cart-card">
                <div class="cart-items-scroll">
                  <div class="cart-item">
                    <div class="row ">
                      <div class="col-lg-2 col-md-2">
                        <div class="item-img">
                          <img src="{{asset('assets/images/img/wheat.png') }}" alt="Product Image">
                        </div>
                      </div>
                      <div class="col-lg-7 col-md-5">
                        <div class="item-info">
                          <div class="item-name">Aashirvaad Whole Wheat Atta</div>
                          <div class="item-size">5 kg</div>
                          <div class="item-price-row">
                            <span class="item-price">₹249</span>
                            <span class="item-mrp">₹299</span>
                          </div>
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-5 d-flex align-items-center align-items-lg-end  justify-content-start justify-content-lg-end">
                        <div class="qty-ctrl">
                          <button onclick="changeQty(this,-1)">
                            <i class="fa-solid fa-minus"></i>
                          </button>
                          <span>2</span>
                          <button onclick="changeQty(this,1)">
                            <i class="fa-solid fa-plus"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="cart-item">
                    <div class="row">
                      <div class="col-lg-2 col-md-2">
                        <div class="item-img">
                          <img src="{{asset('assets/images/img/salt.png') }}" alt="Product Image">
                        </div>
                      </div>
                      <div class="col-lg-7 col-md-5">
                        <div class="item-info">
                          <div class="item-name">Tata Salt Lite</div>
                          <div class="item-size">5 kg</div>
                          <div class="item-price-row">
                            <span class="item-price">₹249</span>
                            <span class="item-mrp">₹299</span>
                          </div>
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-5 d-flex align-items-center align-items-lg-end  justify-content-start justify-content-lg-end">
                        <div class="qty-ctrl">
                          <button onclick="changeQty(this,-1)">
                            <i class="fa-solid fa-minus"></i>
                          </button>
                          <span>2</span>
                          <button onclick="changeQty(this,1)">
                            <i class="fa-solid fa-plus"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="cart-item">
                    <div class="row">
                      <div class="col-lg-2 col-md-2">
                        <div class="item-img">
                          <img src="{{asset('assets/images/img/onion.png') }}" alt="Product Image">
                        </div>
                      </div>
                      <div class="col-lg-7 col-md-5">
                        <div class="item-info">
                          <div class="item-name">Fresh Onion</div>
                          <div class="item-size">1 kg</div>
                          <div class="item-price-row">
                            <span class="item-price">₹39</span>
                            <span class="item-mrp">₹50</span>
                          </div>
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-5 d-flex align-items-center align-items-lg-end  justify-content-start justify-content-lg-end">
                        <div class="qty-ctrl">
                          <button onclick="changeQty(this,-1)">
                            <i class="fa-solid fa-minus"></i>
                          </button>
                          <span>2</span>
                          <button onclick="changeQty(this,1)">
                            <i class="fa-solid fa-plus"></i>
                          </button>
                        </div>

                      </div>
                    </div>
                  </div>
                  <div class="cart-item">
                    <div class="row">
                      <div class="col-lg-2 col-md-2">
                        <div class="item-img">
                          <img src="{{asset('assets/images/img/oil.png') }}" alt="Product Image">
                        </div>
                      </div>
                      <div class="col-lg-7 col-md-5">
                        <div class="item-info">
                          <div class="item-name">Fortune Sunflower Oil</div>
                          <div class="item-size">1 L</div>
                          <div class="item-price-row">
                            <span class="item-price">₹135</span>
                            <span class="item-mrp">₹160</span>
                          </div>
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-5 d-flex align-items-center align-items-lg-end  justify-content-start justify-content-lg-end">
                        <div class="qty-ctrl">
                          <button onclick="changeQty(this,-1)">
                            <i class="fa-solid fa-minus"></i>
                          </button>
                          <span>2</span>
                          <button onclick="changeQty(this,1)">
                            <i class="fa-solid fa-plus"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="cart-item">
                    <div class="row">
                      <div class="col-lg-2 col-md-2">
                        <div class="item-img">
                          <img src="{{asset('assets/images/img/biscuit.png') }}" alt="Product Image">
                        </div>
                      </div>
                      <div class="col-lg-7 col-md-5 ">
                        <div class="item-info">
                          <div class="item-name">Good Day Butter Cookies</div>
                          <div class="item-size">1 pck</div>
                          <div class="item-price-row">
                            <span class="item-price">₹49</span>
                            <span class="item-mrp">₹70</span>
                          </div>
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-5 d-flex align-items-center align-items-lg-end justify-content-start justify-content-lg-end">
                        <div class="qty-ctrl">
                          <button onclick="changeQty(this,-1)">
                            <i class="fa-solid fa-minus"></i>
                          </button>
                          <span>2</span>
                          <button onclick="changeQty(this,1)">
                            <i class="fa-solid fa-plus"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="add-more-row">Forget something? <a href="javascript:void(0);">Add more items</a></div>
              </div>
            </div>

          </div>
          <div class="col-lg-5">
            <div class="right-col">

              <!-- Bag it for Free -->
              <div class="bag-card">
                <div class="bag-inner">
                  <div class="bag-icon-circle" id="bagCircle">
                    <img src="{{asset('assets/images/img/bag-icon.png') }}" width="20" alt="">
                  </div>
                  <div class="bag-text">
                    <div class="bag-title">Bag it for Free</div>
                    <div class="bag-sub">Reduce waste with eco-friendly packaging</div>
                  </div>
                  <label class="toggle-wrap">
                    <input type="checkbox" id="bagToggle" onchange="onBagToggle(this)" />
                    <span class="toggle-track"></span>
                  </label>
                </div>
              </div>

              <!-- Bill Summary + Savings + Tip -->
              <div class="bill-card">
                <div class="bill-scroll">

                  <div class="bill-top-sec">
                    <div class="bill-head">
                      <img src="{{asset('assets/images/icon/bill.svg') }}" alt="">
                      Bill Summary
                    </div>

                    <div class="bill-row">
                      <span class="lbl">Item total</span>
                      <span class="val"><s class="small-txt">₹199</s>&nbsp;₹149</span>
                    </div>

                    <div class="bill-row">
                      <span class="lbl">Handling Charges</span>
                      <span class="val">₹19</span>
                    </div>
                    <div class="bill-row">
                      <span class="lbl">Delivery Fee <span class="special-tag">Special for you +</span></span>
                      <span class="val free">FREE</span>
                    </div>
                    <div class="dashed-line"></div>
                    <div class="bill-total-row">
                      <div class="d-flex flex-column">
                        <span>Total</span>
                        <span class="bill-inclusive">Inclusive of all taxes and charges</span>
                      </div>

                      <span>₹168</span>
                    </div>

                    <div class="saving-pill">
                      <span>You're Saving in this order</span>
                      <span>₹50</span>
                    </div>
                  </div>
                  <!-- Saving Detail -->
                  <div class="bill-mid-sec">
                    <div class="saving-head">
                      <img src="{{asset('assets/images/icon/order.svg') }}" alt=""> Saving on This Order
                    </div>

                    <div class="saving-wrapper">
                      <div class="saving-row">
                        <div class="saving-icon">
                          <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff">
                            <!-- slash -->
                            <line x1="6" y1="18" x2="18" y2="6" stroke="#fff" stroke-width="2" stroke-linecap="round" />

                            <!-- top dot -->
                            <circle cx="8" cy="8" r="1.5" fill="#fff" />

                            <!-- bottom dot -->
                            <circle cx="16" cy="16" r="1.5" fill="#fff" />
                          </svg>
                        </div>
                        <div class="saving-info">
                          <div class="s-title">Discount on MRP</div>
                          <div class="s-sub">Including free gifts and deals</div>
                        </div>
                        <div class="saving-amount">₹168</div>
                      </div>
                      <div class="dashed-line"></div>
                      <div class="saving-row">
                        <div class="saving-icon">
                          <img src="{{asset('assets/images/icon/vehicle.svg') }}" alt="">
                        </div>
                        <div class="saving-info">
                          <div class="s-title">FREE Delivery savings</div>
                        </div>
                        <div class="saving-amount">₹168</div>
                      </div>
                      <div class="dashed-line"></div>
                      <div class="saving-row">
                        <div class="saving-icon">
                          ₹
                        </div>
                        <div class="saving-info">
                          <div class="s-title">Saving on handling fee</div>
                        </div>
                        <div class="saving-amount">₹168</div>
                      </div>
                    </div>
                  </div>
                  <!-- Tip Section -->
                  <div class="tip-section">
                    <div class="tip-head">
                      <img src="{{asset('assets/images/icon/smile.svg') }}" alt="">
                      <div class="d-flex flex-column ">
                        <span>Tip your delivery partner</span>
                        <div class="tip-sub">100% of the tip goes to the driver.</div>
                      </div>
                    </div>

                    <div class="tip-tabs">
                      <button class="tip-tab active" onclick="selectTip(this)">₹10</button>
                      <button class="tip-tab" onclick="selectTip(this)">₹20</button>
                      <button class="tip-tab" onclick="selectTip(this)">₹50</button>
                      <button class="tip-tab" onclick="selectTip(this)">100</button>
                    </div>
                  </div>

                </div>
              </div>


              <!-- Total Pay + Proceed -->
              <div class="total-card">
                <div class="total-pay-row">
                  Total pay: ₹168
                  <span class="mrp-cross">₹199</span>
                </div>
                <button class="proceed-btn open-modal-btn" onclick="openModal()">Add address to Proceed</button>
                <button class="proceed-btn open-modal-btn my-2" >Click to Pay ₹168  </button>
              </div>

              <div class="my-2 note-text">
                <p> <span class="orange-txt"><b>Note:</b> </span>Once order placed, any cancellation may result in a fee.
                  In case of unexpected delays leading to order cancellation,
                  a complete refund will be provided.</p>
              </div>

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


      <div class="cart-slider space-x">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

              </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

              </div>

            </div>

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

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

        </div>
      </div>

    </div>
  </section>

  <div class="cart-modal-overlay" id="scheduleOverlay">
    <div class="sched-modal">

      <div class="sched-modal-head">
        <h3>Schedule Your Order</h3>
        <button class="close-btn" onclick="closeSchedule()">✕</button>
      </div>
      <div class="sched-sub">Choose a delivery time that works best for you!</div>

      <div class="modal-tab">
        <div class="shipment-row">
          <div class="ship-box">
            <img src="{{asset('assets/images/icon/modal-circle.png') }}" alt="">
          </div>
          <div>
            <div class="ship-label">Shipment</div>
            <div class="ship-count">5 items</div>
          </div>
        </div>


        <div class="date-tabs">
          <button class="date-tab active" onclick="switchDate(this)">Today, 24 Mar</button>
          <button class="date-tab" onclick="switchDate(this)">Tomorrow, 25 Mar</button>
          <button class="date-tab" onclick="switchDate(this)">26 March</button>
        </div>

        <div class="slot-area">
          <div class="slot-label">
            <img src="{{asset('assets/images/icon/morn.png') }}" width="16" alt=""> Morning
          </div>
          <div class="slot-grid">
            <button class="slot-btn" onclick="selectSlot(this)">06:00 PM – 09:00 PM</button>
            <button class="slot-btn" onclick="selectSlot(this)">09:00 PM – 12:00 PM</button>
          </div>
          <div class="field-divider"></div>
          <div class="slot-label">
            <img src="{{asset('assets/images/icon/eve.png') }}" width="16" alt=""> Evening
          </div>
          <div class="slot-grid">
            <button class="slot-btn" onclick="selectSlot(this)">04:00 AM – 06:00 PM</button>
            <button class="slot-btn" onclick="selectSlot(this)">06:00 PM – 09:00 PM</button>
          </div>
        </div>
      </div>

      <div class="modal-bottom">

        <div class="cancel-note">
          <img src="{{asset('assets/images/icon/exclam.svg') }}" width="20" alt="">
          You can cancel up to 30 min prior out for delivery.
        </div>

        <button class="confirm-btn" id="confirmBtn" onclick="confirmSchedule()">Confirm Scheduling</button>
      </div>
    </div>
  </div>

  <div class="modal-overlay address-flow" id="modalOverlay" style="display:none" onclick="handleOverlayClick(event)">
    <div class="addr-modal" id="addrModal">

      <!-- ════ STEP 1: Location Information (Map) ════ -->
      <div class="addr-step active" id="step1">
        <div class="modal-hdr">
          <h2>Location information</h2>
          <button class="close-x" onclick="closeModal()">&#x2715;</button>
        </div>

        <div class="search-wrap" style="cursor:pointer">
          <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"
            viewBox="0 0 24 24">
            <circle cx="11" cy="11" r="8" />
            <line x1="21" y1="21" x2="16.65" y2="16.65" />
          </svg>
          <input type="text" placeholder="Search an area or address" readonly style="cursor:pointer">
        </div>

        <!-- Map -->
        <div class="map-area">
          <div class="map-bg">
            <!-- Tooltip -->
            <div class="map-tooltip">
              Order will be delivered here
              <span>Place the pin to your exact location</span>
            </div>

          </div>

          <!-- Tooltip -->
          <div class="map-tooltip">
            Order will be delivered here <br>
            <span>Place the pin to your exact location</span>
          </div>

          <!-- Pin -->
          <div class="map-pin" id="mapPin1">
            <div class="pin-head"></div>
            <div class="pin-stem"></div>
            <div class="pin-shadow"></div>
          </div>

          <!-- Crosshair -->
          <!-- <button class="crosshair-btn" title="My location">
            <svg width="15" height="15" fill="none" stroke="#555" stroke-width="2" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="3"/>
              <line x1="12" y1="2" x2="12" y2="7"/><line x1="12" y1="17" x2="12" y2="22"/>
              <line x1="2" y1="12" x2="7" y2="12"/><line x1="17" y1="12" x2="22" y2="12"/>
            </svg>
          </button> -->
        </div>

        <div class="modal-bottom">
          <div class="delivery-label">Select a delivery Location</div>
          <div class="modal-footer-btns">
            <button class="btn-outline-orange" onclick="goStep(2)">Search
              Location</button>
            <button class="btn-fill-orange">Current Location</button>
          </div>
        </div>
      </div>

      <!-- ════ STEP 2: Your Location (Search) ════ -->
      <div class="addr-step" id="step2">
        <div class="modal-hdr">
          <h2>Your Location</h2>
          <button class="close-x" onclick="closeModal()">&#x2715;</button>
        </div>

        <div class="search-item">
          <div class="search-wrap">
            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"
              viewBox="0 0 24 24">
              <circle cx="11" cy="11" r="8" />
              <line x1="21" y1="21" x2="16.65" y2="16.65" />
            </svg>
            <input type="text" id="searchInput" placeholder="Search an area or address" oninput="handleSearch(this.value)"
              autocomplete="off">
            <button class="clear-x" id="clearBtn" onclick="clearSearch()">&#x2715;</button>
          </div>
        </div>

        <!-- Current location row -->
        <div class="current-loc-row" id="currentLocRow">
          <div class="cur-left" onclick="showCurrentLocationResults()">
            <img src="{{asset('assets/images/icon/location.svg') }}" alt="">
            <div>
              <div class="cur-title">Use my Current Location</div>
              <div class="cur-sub">Enable your current location for better
                services</div>
            </div>
          </div>
          <button class="enable-btn" onclick="showCurrentLocationResults()">Enable</button>
        </div>

        <!-- Nearby label (shown only after current location detect) -->
        <div id="nearbyLabel"
          style="display:none; padding:4px 16px 4px; font-size:11.5px; font-weight:700; color:#555; letter-spacing:0.3px; text-transform:uppercase; border-top:1px solid #eee;">

        </div>

        <!-- Search results -->
        <div class="search-results" id="searchResults">
          <div class="result-item" onclick="selectResult('Gandhipuram', 'Gandhipuram, Tamil Nadu, India')">
            <svg class="pin-ico" width="20" height="20" fill="none" stroke="#5C5C5C" stroke-width="1.5"
              viewBox="0 0 24 24">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
              <circle cx="12" cy="10" r="3" />
            </svg>
            <div>
              <div class="result-title">Gandhipuram</div>
              <div class="result-sub">Gandhipuram, Tamil Nadu, India</div>
            </div>
          </div>
          <div class="dashed-line"></div>
          <div class="result-item"
            onclick="selectResult('Gandhipuram Bus Stand to SRP mill','Gandhipuram, Bus Stand to SRP mil, Saravanampatty, Bharathiyar Road, ATT Colony, Gopalapuram, New Siddhapudur, Tamil Nadu, India')">
            <svg class="pin-ico" width="20" height="20" fill="none" stroke="#5C5C5C" stroke-width="1.5"
              viewBox="0 0 24 24">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
              <circle cx="12" cy="10" r="3" />
            </svg>
            <div>
              <div class="result-title">Gandhipuram Bus Stand to SRP
                mill</div>
              <div class="result-sub">Gandhipuram, Bus Stand to
                SRP mil, Saravanampatty, Bharathiyar Road, ATT Colony,
                Gopalapuram, New Siddhapudur, Tamil Nadu, India</div>
            </div>
          </div>
          <div class="dashed-line"></div>
          <div class="result-item" onclick="selectResult('Gandhipuram','Gandhipuram, Tamil Nadu, India')">
            <svg class="pin-ico" width="20" height="20" fill="none" stroke="#5C5C5C" stroke-width="1.5"
              viewBox="0 0 24 24">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
              <circle cx="12" cy="10" r="3" />
            </svg>
            <div>
              <div class="result-title">Gandhipuram</div>
              <div class="result-sub">Gandhipuram, Tamil Nadu, India</div>
            </div>
          </div>
          <div class="dashed-line"></div>
          <div class="result-item" onclick="selectResult('Gandhipuram','Gandhipuram, Tamil Nadu, India')">
            <svg class="pin-ico" width="20" height="20" fill="none" stroke="#5C5C5C" stroke-width="1.5"
              viewBox="0 0 24 24">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
              <circle cx="12" cy="10" r="3" />
            </svg>
            <div>
              <div class="result-title">Gandhipuram</div>
              <div class="result-sub">Gandhipuram, Tamil Nadu, India</div>
            </div>
          </div>
          <div class="dashed-line"></div>
          <div class="result-item" onclick="selectResult('Gandhipuram','Gandhipuram, Tamil Nadu, India')">
            <svg class="pin-ico" width="20" height="20" fill="none" stroke="#5C5C5C" stroke-width="1.5"
              viewBox="0 0 24 24">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
              <circle cx="12" cy="10" r="3" />
            </svg>
            <div>
              <div class="result-title">Gandhipuram</div>
              <div class="result-sub">Gandhipuram, Tamil Nadu, India</div>
            </div>
          </div>
        </div>
      </div>

      <!-- ════ STEP 3: Location Info with Selected Address ════ -->
      <div class="addr-step" id="step3">
        <div class="modal-hdr">
          <h2>Location information</h2>
          <button class="close-x" onclick="closeModal()">&#x2715;</button>
        </div>

        <div class="search-wrap" onclick="goStep(2)" style="cursor:pointer">
          <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"
            viewBox="0 0 24 24">
            <circle cx="11" cy="11" r="8" />
            <line x1="21" y1="21" x2="16.65" y2="16.65" />
          </svg>
          <input type="text" placeholder="Search an area or address" readonly style="cursor:pointer">
        </div>

        <!-- Map -->
        <div class="map-area">

          <div class="map-tooltip">
            Order will be delivered here
            <span>Place the pin to your exact location</span>
          </div>

          <div class="map-pin">
            <div class="pin-head"></div>
            <div class="pin-stem"></div>
            <div class="pin-shadow"></div>
          </div>

          <button class="crosshair-btn">
            <img src="{{asset('assets/images/icon/location.svg') }}" alt="">
          </button>
        </div>

        <div class="modal-bottom bot-2">
          <div class="addr-bar">
            <div class="place-name" id="selectedName">Xcut</div>
            <div class="place-sub" id="selectedSub">Woodland, 495/496, xcut,
              Coimbatore, Coimbatore, TN, India</div>
          </div>

          <div class="modal-footer-btns">
            <button class="btn-fill-orange full" onclick="goStep(4)">Confirm
              &amp; Continue</button>
          </div>
        </div>
      </div>

      <!-- ════ STEP 4: Add Address Details ════ -->
      <div class="addr-step" id="step4">
        <div class="modal-hdr">
          <h2>Add Address Details</h2>
          <button class="close-x" onclick="closeModal()">&#x2715;</button>
        </div>

        <div class="form-scroll">
          <!-- Mini address bar -->
          <div class="addr-mini-bar">
            <div class="addr-mini-map-thumb">
              <svg width="22" height="22" fill="none" stroke="#2d7a2d" stroke-width="2.2" viewBox="0 0 24 24">
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                <circle cx="12" cy="10" r="3" />
              </svg>
            </div>
            <div class="addr-mini-text">
              <div class="t-name" id="miniName">Xcut</div>
              <div class="t-sub" id="miniSub">Woodland, 495/496, xcut,
                Coimbatore...</div>
            </div>
            <button class="edit-btn" onclick="goStep(3)">Edit</button>
          </div>

          <!-- Save as -->
          <div class="tab-sec">
            <div class="section-lbl">Save Address as</div>
            <div class="type-tabs">
              <button class="type-tab" id="tabHome" onclick="selectType('home')">
                <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24">
                  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
                  <polyline points="9 22 9 12 15 12 15 22" />
                </svg>
                Home
              </button>
              <button class="type-tab" id="tabWork" onclick="selectType('work')">
                <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24">
                  <rect x="2" y="7" width="20" height="14" rx="2" />
                  <path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" />
                </svg>
                Work
              </button>
              <button class="type-tab" id="tabOthers" onclick="selectType('others')">
                <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                  <circle cx="12" cy="10" r="3" />
                </svg>
                Others
              </button>
            </div>
            <div class="dashed-line"></div>

            <!-- ── HOME FIELDS ── -->
            <div id="homeFields">
              <div class="section-lbl">Type of
                Building</div>
              <div class="sub-tabs">
                <button class="sub-tab" id="subSociety" onclick="selectSubHome('society')">
                  <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <rect x="2" y="2" width="9" height="9" rx="1" />
                    <rect x="13" y="2" width="9" height="9" rx="1" />
                    <rect x="2" y="13" width="9" height="9" rx="1" />
                    <rect x="13" y="13" width="9" height="9" rx="1" />
                  </svg>
                  Society
                </button>
                <button class="sub-tab" id="subIndependent" onclick="selectSubHome('independent')">
                  <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
                  </svg>
                  Independent house
                </button>
              </div>
              <div class="dashed-line"></div>
              <div class="field-group">
                <div class="float-field">
                  <input type="text" id="flatNo" placeholder="Flat No./ Floor" oninput="validateForm()">
                  <label for="flatNo">Flat No./ Floor <span class="req-star">*</span></label>
                </div>
              </div>
              <div class="field-group">
                <div class="float-field">
                  <input type="text" id="buildingName" placeholder="Building name*" oninput="validateForm()">
                  <label for="buildingName">Building name <span class="req-star">*</span></label>
                </div>
              </div>
              <div class="field-group" style=" padding-bottom:4px">
                <div class="float-field">
                  <input type="text" id="landmark" placeholder="Landmark" oninput="validateForm()">
                  <label for="landmark">Landmark <span class="req-star">*</span></label>
                </div>
              </div>
            </div>

            <!-- ── WORK FIELDS ── -->
            <div id="workFields" style="display:none">
              <div class="work-field-1">
                <div class="field-group">
                  <div class="float-field">
                    <input type="text" id="companyFloor" placeholder="Company name / Floor*" oninput="validateForm()">
                    <label for="companyFloor">Company name / Floor <span class="req-star">*</span></label>
                  </div>
                </div>
                <div class="field-group">
                  <div class="float-field">
                    <input type="text" id="workBuilding" placeholder="Building name*" oninput="validateForm()">
                    <label for="workBuilding">Building name</label>
                  </div>
                </div>
                <div class="field-group">
                  <div class="float-field">
                    <input type="text" id="workLandmark" placeholder="Landmark*" oninput="validateForm()">
                    <label for="workLandmark">Landmark</label>
                  </div>

                </div>
              </div>

              <div class="work-field-2">
                <div class="field-group">
                  <div class="float-field">
                    <input type="text" id="receiverName" placeholder="Receiver Name*" oninput="validateForm()">
                    <label for="receiverName">Receiver Name <span class="req-star">*</span></label>
                  </div>
                </div>
                <div class="field-group" style="margin-top:8px; padding-bottom:4px">
                  <div class="float-field">
                    <input type="text" id="receiverNumber" placeholder="Receiver Number*" oninput="validateForm()">
                    <label for="receiverNumber">Receiver Number <span class="req-star">*</span></label>
                  </div>
                </div>
              </div>
            </div>

            <!-- ── OTHERS FIELDS ── -->
            <div id="othersFields" style="display:none">
              <div class="section-lbl">Type of
                Building</div>

              <div class="sub-tabs">
                <button class="sub-tab" id="subSocietyO" onclick="selectSubOthers('society')">
                  <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <rect x="2" y="2" width="9" height="9" rx="1" />
                    <rect x="13" y="2" width="9" height="9" rx="1" />
                    <rect x="2" y="13" width="9" height="9" rx="1" />
                    <rect x="13" y="13" width="9" height="9" rx="1" />
                  </svg>
                  Society
                </button>
                <button class="sub-tab" id="subIndependentO" onclick="selectSubOthers('independent')">
                  <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
                  </svg>
                  Independent house
                </button>
              </div>
              <div class="dashed-line"></div>
              <div id="othersSubFields">
                <div class="field-group">
                  <div class="float-field">
                    <input type="text" id="completeAddr" placeholder="Complete Address*" oninput="validateForm()">
                    <label for="completeAddr">Complete Address <span class="req-star">*</span></label>
                  </div>
                </div>
                <div class="field-group">
                  <div class="float-field">
                    <input type="text" id="otherBuilding" placeholder="Building name" oninput="validateForm()">
                    <label for="otherBuilding">Building name</label>
                  </div>
                </div>
                <div class="field-group" style="margin-top:8px; padding-bottom:4px">
                  <div class="float-field">
                    <input type="text" id="otherLandmark" placeholder="Landmark" oninput="validateForm()">
                    <label for="otherLandmark">Landmark</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Save Button -->
          <div class="save-btn">
            <button class="btn-fill-orange full" id="saveAddrBtn" data-bs-dismiss="modal" disabled
              onclick="saveAddress()">Save Address</button>
          </div>
        </div>
      </div>
    </div><!-- .addr-modal -->
  </div>
  <div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3" style="z-index: 9999;">
    <div id="wishlistToast" class="toast align-items-center text-white border-0" role="alert">
      <div class="d-flex">
        <div class="toast-body" id="toastMessage">
          Product Added to Wishlist
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
      </div>
    </div>
  </div>
@endsection

@section('scripts')
  <script>
    const wishlistBtns = document.querySelectorAll(".wishlist-btn");
    const wishlistToast = document.getElementById("wishlistToast");
    const toastMessage = document.getElementById("toastMessage");

    wishlistBtns.forEach(btn => {
      btn.addEventListener("click", () => {
        btn.classList.toggle("active");

        // Get product name dynamically
        const card = btn.closest(".product-card");
        const productName = card ? card.querySelector(".prod-name a").innerText.trim() : "Product";

        // Set message based on toggle state
        if (btn.classList.contains("active")) {
          toastMessage.textContent = `${productName} Added to Wishlist`;
        } else {
          toastMessage.textContent = `${productName} Removed `;
        }

        // Show Bootstrap toast
        const toast = new bootstrap.Toast(wishlistToast, {
          delay: 3000  // auto hides after 3 seconds
        });
        toast.show();
      });
    });
  </script>
  <script>
    function openSchedule() {
      document.getElementById('scheduleOverlay').classList.add('show');
    }
    function closeSchedule() {
      document.getElementById('scheduleOverlay').classList.remove('show');
    }
    document.getElementById('scheduleOverlay').addEventListener('click', function (e) {
      if (e.target === this) closeSchedule();
    });

    function switchDate(el) {
      document.querySelectorAll('.date-tab').forEach(t => t.classList.remove('active'));
      el.classList.add('active');
      // Reset slots
      document.querySelectorAll('.slot-btn').forEach(b => b.classList.remove('active'));
      var cb = document.getElementById('confirmBtn');
      cb.classList.remove('enabled');
      cb.style.cursor = 'not-allowed';
    }

    var chosenSlotText = '';
    function selectSlot(el) {
      document.querySelectorAll('.slot-btn').forEach(b => b.classList.remove('active'));
      el.classList.add('active');
      chosenSlotText = el.textContent.trim();
      var cb = document.getElementById('confirmBtn');
      cb.classList.add('enabled');
      cb.style.cursor = 'pointer';
    }

    function confirmSchedule() {
      var cb = document.getElementById('confirmBtn');
      if (!cb.classList.contains('enabled')) return;
      var dateText = document.querySelector('.date-tab.active').textContent.trim();
      var parts = dateText.split(',');
      var shortDate = parts.length > 1 ? parts[1].trim() : dateText;
      var btn = document.getElementById('scheduleBtn');
      btn.classList.add('scheduled');
      document.getElementById('scheduleBtnText').textContent ="Arriving on " + shortDate + ', ' + chosenSlotText;
      closeSchedule();
    }

    function selectTip(el) {
      document.querySelectorAll('.tip-tab').forEach(t => t.classList.remove('active'));
      el.classList.add('active');
    }

    function changeQty(btn, delta) {
      var span = btn.parentElement.querySelector('span');
      var val = parseInt(span.textContent) + delta;
      if (val < 1) val = 1;
      span.textContent = val;
    }
  </script>

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

    wishlistBtns.forEach(btn => {
      btn.addEventListener("click", () => {
        btn.classList.toggle("active");
      });
    });
  </script>

  <script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 10,
      loop: true,

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

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

      breakpoints: {
        320: {
          slidesPerView: 2,
        },
        576: {
          slidesPerView: 3,
        },
        992: {
          slidesPerView: 8,
        }
      }
    });
  </script>
  <script>
    /* ─────── State ─────── */
    var activeType = null;   // home | work | others
    var activeSubHome = null;   // society | independent
    var activeSubOth = null;   // society | independent

    /* ─────── Modal open/close ─────── */
    function openModal() { document.getElementById('modalOverlay').style.display = 'flex'; }
    function closeModal() { document.getElementById('modalOverlay').style.display = 'none'; }
    function handleOverlayClick(e) {
      if (e.target === document.getElementById('modalOverlay')) closeModal();
    }

    /* ─────── Step navigation ─────── */
    function goStep(n) {
      document.querySelectorAll('.addr-step').forEach(function (el) { el.classList.remove('active'); });
      document.getElementById('step' + n).classList.add('active');
      if (n === 4) validateForm();
    }

    /* ─────── Step 2: Current Location → show results list ─────── */
    function showCurrentLocationResults() {
      var res = document.getElementById('searchResults');
      var cur = document.getElementById('currentLocRow');
      var clr = document.getElementById('clearBtn');
      var nb = document.getElementById('nearbyLabel');
      var inp = document.getElementById('searchInput');

      /* Brief "detecting" pulse, then show the address list */
      inp.value = 'Detecting location…';
      inp.style.color = '#aaa';
      inp.readOnly = true;

      setTimeout(function () {
        inp.value = '';
        inp.style.color = '';
        inp.readOnly = false;
        nb.style.display = 'block';
        res.style.display = 'block';
        cur.style.display = 'none';
        clr.style.display = 'block';
      }, 700);
    }

    /* ─────── Step 2: Search ─────── */
    function handleSearch(val) {
      var res = document.getElementById('searchResults');
      var cur = document.getElementById('currentLocRow');
      var clr = document.getElementById('clearBtn');
      var nb = document.getElementById('nearbyLabel');
      if (val.trim().length > 0) {
        res.style.display = 'block';
        cur.style.display = 'none';
        clr.style.display = 'block';
        nb.style.display = 'none';
      } else {
        res.style.display = 'none';
        cur.style.display = 'flex';
        clr.style.display = 'none';
        nb.style.display = 'none';
      }
    }

    function clearSearch() {
      var inp = document.getElementById('searchInput');
      inp.value = '';
      inp.style.color = '';
      inp.readOnly = false;
      document.getElementById('nearbyLabel').style.display = 'none';
      handleSearch('');
      inp.focus();
    }

    function selectResult(name, sub) {
      document.getElementById('selectedName').textContent = name;
      document.getElementById('selectedSub').textContent = sub;
      document.getElementById('miniName').textContent = name;
      document.getElementById('miniSub').textContent = sub.length > 42 ? sub.slice(0, 42) + '...' : sub;
      goStep(3);
    }

    /* ─────── Step 4: Tab selection ─────── */
    function selectType(t) {
      activeType = t;
      activeSubHome = null;
      activeSubOth = null;

      /* Tab highlight */
      ['home', 'work', 'others'].forEach(function (k) {
        document.getElementById('tab' + k.charAt(0).toUpperCase() + k.slice(1))
          .classList.toggle('active', k === t);
      });

      /* Show/hide panels */
      document.getElementById('homeFields').style.display = t === 'home' ? 'block' : 'none';
      document.getElementById('workFields').style.display = t === 'work' ? 'block' : 'none';
      document.getElementById('othersFields').style.display = t === 'others' ? 'block' : 'none';

      /* Reset sub-tabs */
      ['subSociety', 'subIndependent', 'subSocietyO', 'subIndependentO'].forEach(function (id) {
        document.getElementById(id).classList.remove('active');
      });
      // document.getElementById('othersSubFields').style.display = 'none';

      validateForm();
    }

    function selectSubHome(s) {
      activeSubHome = s;
      document.getElementById('subSociety').classList.toggle('active', s === 'society');
      document.getElementById('subIndependent').classList.toggle('active', s === 'independent');
      document.getElementById('flatNo').placeholder = s === 'independent' ? 'House No. / Street' : 'Flat No./ Floor';
      validateForm();
    }

    function selectSubOthers(s) {
      activeSubOth = s;
      document.getElementById('subSocietyO').classList.toggle('active', s === 'society');
      document.getElementById('subIndependentO').classList.toggle('active', s === 'independent');
      document.getElementById('othersSubFields').style.display = 'block';
      validateForm();
    }

    /* ─────── Form validation ─────── */
    function validateForm() {
      var btn = document.getElementById('saveAddrBtn');
      var valid = false;

      if (activeType === 'home') {
        var flat = document.getElementById('flatNo').value.trim();
        valid = flat.length > 0;
      } else if (activeType === 'work') {
        var co = document.getElementById('companyFloor').value.trim();
        var rn = document.getElementById('receiverName').value.trim();
        var rnum = document.getElementById('receiverNumber').value.trim();
        valid = co.length > 0 && rn.length > 0 && rnum.length > 0;
      } else if (activeType === 'others' && activeSubOth) {
        var ca = document.getElementById('completeAddr').value.trim();
        valid = ca.length > 0;
      }

      btn.disabled = !valid;
      btn.style.background = valid ? '#e07800' : '#d5d5d5';
    }

    /* ─────── Save ─────── */
    // function saveAddress() { goStep(5); }
    function saveAddress() {
      // your save logic here

      const modalEl = document.getElementById('modalOverlay'); // replace with your modal ID
      const modal = bootstrap.Modal.getInstance(modalEl);
      modal.hide();
    }


    /* ─────── Reset for "add another" ─────── */
    function resetAndOpen() {
      /* Clear all inputs */
      document.querySelectorAll('#step4 input').forEach(function (i) { i.value = ''; });
      activeType = activeSubHome = activeSubOth = null;
      ['tabHome', 'tabWork', 'tabOthers', 'subSociety', 'subIndependent', 'subSocietyO', 'subIndependentO']
        .forEach(function (id) { document.getElementById(id).classList.remove('active'); });
      document.getElementById('homeFields').style.display = 'none';
      document.getElementById('workFields').style.display = 'none';
      document.getElementById('othersFields').style.display = 'none';
      document.getElementById('othersSubFields').style.display = 'none';
      document.getElementById('searchInput').value = '';
      document.getElementById('searchInput').style.color = '';
      document.getElementById('searchInput').readOnly = false;
      document.getElementById('nearbyLabel').style.display = 'none';
      handleSearch('');
      goStep(1);
    }
  </script>
    <script>
    document.querySelectorAll(".qty-dropdown").forEach(drop => {
      const btn = drop.querySelector(".qty-selected");
      const text = drop.querySelector(".selected-text");
      const items = drop.querySelectorAll(".qty-menu li");

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

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

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