@extends('layouts.customer')
@section('body_attributes')

@endsection
@section('head')
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <title>Mangalore Stores</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/bootstrap.min.css') }}" >    
    <!-- Main Style -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/main.css') }}">
    <!-- Responsive Style -->
    <link rel="shortcut icon" href="{{ asset('Mangalore-Stores/assets/img/fashion/pro/fav.png') }}" type="image/x-icon">
    <!-- Responsive Style -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/responsive.css') }}">
    <!-- Fonts -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/fonts/font-awesome.min.css') }}">
    <!-- Icon -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/fonts/simple-line-icons.css') }}"> 
    <!-- Slicknav -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/slicknav.css') }}">
    <!-- Nivo Lightbox -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/nivo-lightbox.css') }}" > 
    <!-- Animate -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/animate.css') }}">
    <!-- Owl carousel -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/owl.carousel.css') }}">   
    
    <!-- Color CSS Styles  -->
    <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/colors/default.css') }}" media="screen" /> 

   <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

   <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
@endsection
@section('show_customer_categories', '1')
@section('content')
<section class="section ">
    <div class="container-fluid ">
      
        <div class="row">
          <div class="col-md-12 text-center">
            <div class="owl-carousel owl_menu_eight">

              <div class="item">
                <div class="cat_img_item">
                  <a href="">
                    <img src="{{ asset('Mangalore-Stores/assets/img/sub_cat/71.png') }}">
                    <h4>Traditional Sweets</h4>
                  </a>
                </div>
              </div>
              <div class="item">
                <div class="cat_img_item">
                  <a href="">
                    <img src="{{ asset('Mangalore-Stores/assets/img/sub_cat/72.png') }}">
                    <h4>Savory Snacks</h4>
                  </a>
                </div>
              </div>
              <div class="item">
                <div class="cat_img_item">
                  <a href="">
                    <img src="{{ asset('Mangalore-Stores/assets/img/sub_cat/73.png') }}">
                    <h4>Festival Specials</h4>
                  </a>
                </div>
              </div>
              <div class="item">
                <div class="cat_img_item">
                  <a href="">
                    <img src="{{ asset('Mangalore-Stores/assets/img/sub_cat/74.png') }}">
                    <h4>Dry Fruit Sweets</h4>
                  </a>
                </div>
              </div>
              
              <div class="item">
                <div class="cat_img_item">
                  <a href="">
                    <img src="{{ asset('Mangalore-Stores/assets/img/sub_cat/75.png') }}">
                    <h4>Namkeen</h4>
                  </a>
                </div>
              </div>
              
              
              
                          
              
              
            </div>
          </div>
        </div>
      </div>
    </section>
  <!--welcome section-->
  <section class="section ">
    <div class="container-fluid ">
      <div class="row">
        <div class="col-md-12">
          <div class="owl-carousel owl_menu_one">
            <div class="item">
              <div class="banner_box">
                <img src="{{ asset('Mangalore-Stores/assets/img/banner/e-18.jpg') }}">
              </div>
            </div>
           
          </div>
        </div>
      </div>
    </div>
  </section>


<section class="section ">
  <div class="container my-5">
    <div class="row g-3">
        
        <div class="col-11 col-sm-6 col-lg-3 mx-auto">
            <div class="feature-card d-flex align-items-center gap-3">
                <div class="icon-wrapper">
                    <i class="bi bi-shield-check"></i>
                </div>
                <div>
                    <h5 class="feature-title">Fresh & Hygienic</h5>
                    <p class="feature-desc">Sourced daily from trusted farms</p>
                </div>
            </div>
        </div>

        <div class="col-11 col-sm-6 col-lg-3 mx-auto">
            <div class="feature-card d-flex align-items-center gap-3">
                <div class="icon-wrapper">
                    <i class="bi bi-truck"></i>
                </div>
                <div>
                    <h5 class="feature-title">Fast Delivery</h5>
                    <p class="feature-desc">On-time delivery at your doorstep</p>
                </div>
            </div>
        </div>

        <div class="col-11 col-sm-6 col-lg-3 mx-auto">
            <div class="feature-card d-flex align-items-center gap-3">
                <div class="icon-wrapper">
                    <i class="bi bi-award"></i> 
                </div>
                <div>
                    <h5 class="feature-title">100% Quality</h5>
                    <p class="feature-desc">Best quality products guaranteed</p>
                </div>
            </div>
        </div>

        <div class="col-11 col-sm-6 col-lg-3 mx-auto">
            <div class="feature-card d-flex align-items-center gap-3">
                <div class="icon-wrapper">
                    <i class="bi bi-credit-card-2-front"></i>
                </div>
                <div>
                    <h5 class="feature-title">Safe Payment</h5>
                    <p class="feature-desc">Secure & encrypted transactions</p>
                </div>
            </div>
        </div>

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


<section class="section ">
  <div class="container-fluid ">
    <div class="row">
      <div class="col-md-3">
                  <div class="filter-sidebar">
                    <h2 class="filter-title">Sweets & Savory Filters</h2>

                    <!-- SEARCH -->
                    <div class="filter-box">
                        <h5>Search Sweets & Savory</h5>

                        <div class="search-box">
                            <input class="form-control" type="text" placeholder="Search sweets and snacks..." />
                        </div>
                    </div>

                    <!-- SORT BY -->
                    <div class="filter-box">
                        <h5>Sort By</h5>

                        <select id="sortProducts" class="form-select custom-select">
                            <option value="popularity">Popularity</option>
                            <option value="newest">Newest Arrivals</option>
                            <option value="low-high">Price: Low to High</option>
                            <option value="high-low">Price: High to Low</option>
                            <option value="bestselling">Best Selling</option>
                        </select>
                    </div>

                    <!-- CATEGORY -->
                    <div class="filter-box">
                        <h5>Category</h5>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="traditionalSweets" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="traditionalSweets">
                                    Traditional Sweets
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="savorySnacks" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="savorySnacks">
                                    Savory Snacks
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="festivalSpecials" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="festivalSpecials">
                                    Festival Specials
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>
                    </div>

                    <!-- POPULAR PRODUCTS -->
                    <div class="filter-box">
                        <h5>Popular Products</h5>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="laddu" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="laddu">
                                    Laddu
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="mysorePak" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="mysorePak">
                                    Mysore Pak
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="murukku" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="murukku">
                                    Murukku
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="mixture" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="mixture">
                                    Mixture
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>
                    </div>

                    <!-- PRICE -->
                    <div class="filter-box">
                        <h5>Price Range</h5>

                        <input id="priceRange" class="form-range" min="50" max="10000" value="10000" type="range" />

                        <div class="price-values">
      Rs. 50 -
      <span id="rangeValue">Rs. 10,000</span>
    </div>
                    </div>

                    <!-- SWEET TYPE -->
                    <div class="filter-box">
                        <h5>Sweet Type</h5>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="milkSweets" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="milkSweets">
                                    Milk Sweets
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="jaggeryBased" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="jaggeryBased">
                                    Jaggery Based
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="dryFruitSweets" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="dryFruitSweets">
                                    Dry Fruit Sweets
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>
                    </div>

                    <!-- SAVORY TYPE -->
                    <div class="filter-box">
                        <h5>Savory Type</h5>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="crispySnacks" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="crispySnacks">
                                    Crispy Snacks
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="spicyMixes" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="spicyMixes">
                                    Spicy Mixes
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="namkeen" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="namkeen">
                                    Namkeen
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>
                    </div>

                    <!-- PACK SIZE -->
                    <div class="filter-box">
                        <h5>Pack Size</h5>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="smallPack" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="smallPack">
                                    Up to 250g
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="mediumPack" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="mediumPack">
                                    250g - 500g
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="largePack" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="largePack">
                                    Above 500g
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>
                    </div>

                    <!-- INGREDIENTS -->
                    <div class="filter-box">
                        <h5>Ingredients</h5>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="gheeBased" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="gheeBased">
                                    Ghee Based
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="dryFruits" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="dryFruits">
                                    Dry Fruits
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="traditionalIngredients" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="traditionalIngredients">
                                    Traditional Ingredients
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>
                    </div>

                    <!-- BRANDS -->
                    <div class="filter-box">
                        <h5>Brands</h5>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="mangaloreStore" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="mangaloreStore">
                                    Mangalore Store
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="homemade" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="homemade">
                                    Homemade
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="artisanFoods" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="artisanFoods">
                                    Artisan Foods
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>
                    </div>

                    <!-- OFFERS -->
                    <div class="filter-box">
                        <h5>Offers & Availability</h5>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="discount" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="discount">
                                    Discount Offers
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="instock" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="instock">
                                    In Stock
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>

                        <div class="filter-option">
                            <div class="form-check">
                                <input id="bestseller" class="form-check-input" type="checkbox" />
                                <label class="form-check-label" for="bestseller">
                                    Best Sellers
                                </label>
                            </div>
                            <span class="count">0</span>
                        </div>
                    </div>
                </div>
              
      </div>
      <div class="col-md-9">
        <div class="row">
          <div class="col-md-6">
            <div class="nav_right_side">
              <ul id="left-icon-filter-list">
                <li>
                  <button type="button" class="btn filter_icon_btn d-none-disk" data-toggle="modal" data-target="#filter_orders" style="background-color:#e81623; color: #fff; margin-right: 10px;">
                    <i class="fa fa-filter" aria-hidden="true"></i> Filter
                  </button>
                </li>
                <li><button type="button" class="btn filter_button">Sell Price</button></li>
                <li><button type="button" class="btn filter_button">Organic Farm</button></li>
                <li><button type="button" class="btn filter_button">Local Farmers</button></li>
                
              </ul>
            </div>
          </div>
          <div class="col-md-6 ">
            <div class="nav_right_side move_right">
              <div class="right-filter-list-wrp">
                <ul id="right-filter-list" class="">
                  <li><a href="#"><i class="fa fa-sort-amount-desc"></i></a></li>
                  <li>Sort by:<a href="#"><span class="Popularity"> Popularity </span></a></li>
  
                  <li><a href="#"> Low to High</a></li>
                  <li><a href="#"> High to Low</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <br>
        <div class="row" id="productList">
          <div class="col-md-12"><p>Loading products...</p></div>
        </div>
        @if(false)
        <div class="row">

          <div class="col-md-3">
            <div class="cat_img_box">
              <a href="{{ route('customer.vegetable-view') }}">
                <img src="{{ asset('Mangalore-Stores/assets/img/veg/ss-1.webp') }}">
                <h4>Motichur Laddu</h4>
                <p>(500 gms)</p>
                <div class="price_flex_n">
                  <div class="price_box">
                    <p>Rs. 690.00 <del>Rs. 750.00</del></p>
                  </div>
                  <div class="price_box">
                    <button class="btn btn-add">Add to Cart</button>
                  </div>
                </div>
              </a>
            </div>
          </div>

          <div class="col-md-3">
            <div class="cat_img_box">
              <a href="{{ route('customer.vegetable-view') }}">
                <img src="{{ asset('Mangalore-Stores/assets/img/veg/ss-2.avif') }}">
                <h4>Kaju Katli</h4>
                <p>(500 gms)</p>
                <div class="price_flex_n">
                  <div class="price_box">
                    <p>Rs. 690.00 <del>Rs. 750.00</del></p>
                  </div>
                  <div class="price_box">
                    <button class="btn btn-add">Add to Cart</button>
                  </div>
                </div>
              </a>
            </div>
          </div>

          <div class="col-md-3">
            <div class="cat_img_box">
              <a href="{{ route('customer.vegetable-view') }}">
                <img src="{{ asset('Mangalore-Stores/assets/img/veg/ss-3.webp') }}">
                <h4>Ajmeri Kalakand</h4>
                <p>(500 gms)</p>
                <div class="price_flex_n">
                  <div class="price_box">
                    <p>Rs. 690.00 <del>Rs. 750.00</del></p>
                  </div>
                  <div class="price_box">
                    <button class="btn btn-add">Add to Cart</button>
                  </div>
                </div>
              </a>
            </div>
          </div>

          <div class="col-md-3">
            <div class="cat_img_box">
              <a href="{{ route('customer.vegetable-view') }}">
                <img src="{{ asset('Mangalore-Stores/assets/img/veg/ss-4.webp') }}">
                <h4>Ajmeri Kalakand</h4>
                <p>(500 gms)</p>
                <div class="price_flex_n">
                  <div class="price_box">
                    <p>Rs. 690.00 <del>Rs. 750.00</del></p>
                  </div>
                  <div class="price_box">
                    <button class="btn btn-add">Add to Cart</button>
                  </div>
                </div>
              </a>
            </div>
          </div>

          <div class="col-md-3">
            <div class="cat_img_box">
              <a href="{{ route('customer.vegetable-view') }}">
                <img src="{{ asset('Mangalore-Stores/assets/img/veg/ss-5.webp') }}">
                <h4>Boondi Laddu</h4>
                <p>(500 gms)</p>
                <div class="price_flex_n">
                  <div class="price_box">
                    <p>Rs. 690.00 <del>Rs. 750.00</del></p>
                  </div>
                  <div class="price_box">
                    <button class="btn btn-add">Add to Cart</button>
                  </div>
                </div>
              </a>
            </div>
          </div>

          <div class="col-md-3">
            <div class="cat_img_box">
              <a href="{{ route('customer.vegetable-view') }}">
                <img src="{{ asset('Mangalore-Stores/assets/img/veg/ss-6.webp') }}">
                <h4>Mangalore Kajjaya </h4>
                <p>(500 gms)</p>
                <div class="price_flex_n">
                  <div class="price_box">
                    <p>Rs. 690.00 <del>Rs. 750.00</del></p>
                  </div>
                  <div class="price_box">
                    <button class="btn btn-add">Add to Cart</button>
                  </div>
                </div>
              </a>
            </div>
          </div>

          

          

          

          

          

          

        </div>
        @endif
      </div>
    </div>
  </div>
</section>
@endsection
@push('scripts')
{{-- 
Page Script:
File: traditional.js
Location: public/common/js/customer/traditional.js
Used For: traditional page specific actions.
--}}
<script src="{{ asset('common/js/customer/traditional.js') }}"></script>
<script src="{{ asset('common/js/customer/collection.js') }}"></script>
<!-- =====================================================
JS FILE CONNECTIONS FOR THIS CUSTOMER BLADE FILE
Page: Customer Traditional.blade
Blade File: resources/views/customer/traditional.blade.php

1. JS File:
   public/common/js/api.js
   Loaded from layouts/customer.blade.php
   Purpose:
   - Shared customer API helper
   - Customer token and route helpers

2. JS File:
   public/common/js/customer/auth-check.js
   Loaded from layouts/customer.blade.php
   Purpose:
   - Customer auth/profile handling
   - Header auth text/profile link handling when the shared header is shown

3. JS Vendor Bundle:
   public/Mangalore-Stores/assets/js/*.js
   Loaded from layouts/customer.blade.php
   Purpose:
   - Shared customer UI plugins and legacy theme scripts

4. JS File:
   public/common/js/customer/legacy-pages.js
   Loaded from layouts/customer.blade.php
   Purpose:
   - Legacy shared customer behavior for non-migrated customer pages
===================================================== -->
@endpush