@extends('layouts.frontend')

@section('title', 'Products - Stitched & Unstitched Garments | Rathore Collection')

@section('content')
@push('styles')
<style>
  .filter-sidebar {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: sticky;
    top: 20px;
    overflow: visible;
  }
  
  .filter-content {
    overflow: visible;
    max-width: 100%;
  }
  
  .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 1rem;
    cursor: pointer;
    user-select: none;
  }
  
  .filter-header h6 {
    margin: 0;
    font-weight: 600;
    color: #36251d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
  }
  
  .filter-header .toggle-icon {
    transition: transform 0.3s ease;
    color: #36251d;
  }
  
  .filter-header.collapsed .toggle-icon {
    transform: rotate(-90deg);
  }
  
  .filter-content {
    max-height: none;
    overflow: visible;
    transition: max-height 0.3s ease;
    width: 100%;
  }
  
  .filter-content.collapsed {
    max-height: 0;
    overflow: hidden;
    margin: 0;
  }
  
  .filter-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    width: 100%;
    position: relative;
  }
  
  .filter-option:hover {
    background: #f8f8f8;
    border-color: #e0e0e0;
  }
  
  .filter-option > .d-flex {
    display: flex;
    align-items: center;
    width: 100%;
    flex: 1;
  }
  
  .filter-option input[type="radio"] {
    margin-right: 0.75rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #d9d577;
    flex-shrink: 0;
  }
  
  .filter-option label {
    margin: 0;
    cursor: pointer;
    flex: 1;
    font-size: 0.95rem;
    color: #333;
  }
  
  .filter-option.subcategory {
    margin-left: 1.5rem;
    margin-top: 0.25rem;
    padding-left: 0.5rem;
    border-left: 2px solid #e0e0e0;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .subcategory-list {
    display: none;
    margin-top: 0.5rem;
    padding-left: 0;
    width: 100%;
    overflow: hidden;
  }

  .subcategory-list.open {
    display: block;
  }
  
  /* Ensure parent category option contains subcategories properly */
  .filter-option[data-category-parent] {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  
  .filter-option[data-category-parent] > .d-flex {
    flex: 0 0 100%;
    width: 100%;
  }
  
  /* Prevent overflow from sidebar */
  .filter-section {
    width: 100%;
    overflow: visible;
  }
  
  .filter-sidebar {
    max-width: 100%;
    box-sizing: border-box;
  }

  .subcategory-toggle {
    border: none;
    background: transparent;
    color: #36251d;
    font-weight: 600;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.9rem;
    display: inline-block;
    pointer-events: auto;
    z-index: 10;
    position: relative;
  }

  .subcategory-toggle:hover {
    background: #f8f8f8;
  }
  
  .subcategory-toggle.open {
    transform: rotate(90deg);
  }
  
  /* Ensure button is clickable */
  .filter-option[data-category-parent] .subcategory-toggle {
    pointer-events: auto;
  }

  .category-hidden {
    display: none;
  }

  .show-more-btn {
    margin-top: 0.5rem;
    padding: 0.45rem 0.75rem;
    text-align: center;
    font-size: 0.85rem;
    color: #36251d;
    cursor: pointer;
    border: 1px dashed #d9d577;
    border-radius: 6px;
    transition: all 0.2s ease;
    background: #fefef8;
    width: 100%;
  }

  .show-more-btn:hover {
    background: #f8f8f8;
    border-color: #c9c567;
    color: #c9c567;
  }
  
  .price-range {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
  }
  
  .price-input {
    width: 100%;
    padding: 0.6rem 0.65rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
    min-width: 0;
  }
  
  .price-input:focus {
    outline: none;
    border-color: #d9d577;
  }
  
  .sort-options {
    display: grid;
    gap: 0.5rem;
  }
  
  .sort-option {
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    font-size: 0.9rem;
  }
  
  .sort-option:hover {
    border-color: #d9d577;
    background: #fefef8;
  }
  
  .sort-option input[type="radio"]:checked + label {
    color: #36251d;
    font-weight: 600;
  }
  
  .sort-option input[type="radio"] {
    display: none;
  }
  
  .sort-option.active {
    border-color: #d9d577;
    background: #fefef8;
  }
  
  .filter-actions {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #f0f0f0;
  }
  
  .btn-filter {
    width: 100%;
    padding: 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
  }
  
  .btn-filter-clear {
    background: #f8f8f8;
    color: #666;
    border: 2px solid #e0e0e0;
  }
  
  .btn-filter-clear:hover {
    background: #e8e8e8;
    border-color: #d0d0d0;
  }
  
  .active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  
  .active-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: #d9d577;
    color: #36251d;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
  }
  
  .active-filter-badge .remove {
    cursor: pointer;
    font-weight: bold;
    opacity: 0.7;
  }
  
  .active-filter-badge .remove:hover {
    opacity: 1;
  }
  
  @media (max-width: 768px) {
    .filter-sidebar {
      position: relative;
      top: 0;
      margin-bottom: 2rem;
    }
  }
  
  /* Pagination Styles */
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
  }
  
  .pagination .page-item {
    margin: 0;
  }
  
  .pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #36251d;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  
  .pagination .page-link:hover {
    color: #36251d;
    background-color: #f8f8f8;
    border-color: #d9d577;
    transform: translateY(-1px);
  }
  
  .pagination .page-item.active .page-link {
    color: #fff;
    background-color: #d9d577;
    border-color: #d9d577;
    font-weight: 600;
    z-index: 1;
  }
  
  .pagination .page-item.disabled .page-link {
    color: #999;
    background-color: #f5f5f5;
    border-color: #e0e0e0;
    cursor: not-allowed;
    opacity: 0.6;
  }
  
  .pagination .page-item.disabled .page-link:hover {
    transform: none;
    background-color: #f5f5f5;
    border-color: #e0e0e0;
  }
  
  .pagination .page-link:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(217, 213, 119, 0.25);
  }
  
  @media (max-width: 576px) {
    .pagination .page-link {
      min-width: 32px;
      height: 32px;
      padding: 0.25rem 0.5rem;
      font-size: 0.8rem;
    }
  }
</style>
@endpush

<div class="container py-4 py-md-5">
  <!-- Filter Button for Mobile -->
  <div class="d-lg-none mb-3">
    <button class="btn btn-outline-primary w-100" type="button" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvas" aria-controls="filterOffcanvas">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 8px; vertical-align: middle;">
        <use xlink:href="#filter"></use>
      </svg>
      Filters
      @if(request('category') || request('section') || request('collection') || request('min_price') || request('max_price'))
        <span class="badge bg-primary ms-2">{{ (request('category') ? 1 : 0) + (request('section') ? 1 : 0) + (request('collection') ? 1 : 0) + (request('min_price') || request('max_price') ? 1 : 0) }}</span>
      @endif
    </button>
  </div>

  <div class="row g-3">
    <!-- Desktop Sidebar -->
    <div class="col-12 col-lg-3 col-md-4 d-none d-lg-block">
      <div class="filter-sidebar">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h5 class="text-uppercase mb-0" style="color: #36251d; font-weight: 600;">Filters</h5>
          @if(request('category') || request('section') || request('collection') || request('min_price') || request('max_price'))
            <a href="{{ route('products.index') }}" class="text-decoration-none" style="color: #666; font-size: 0.85rem;">Clear All</a>
          @endif
        </div>
        
        @if(request('category') || request('section') || request('collection') || request('min_price') || request('max_price'))
        <div class="active-filters mb-3">
          @if(request('category'))
            @php
              $catId = request('category');
              $cat = null;
              foreach($categories as $category) {
                if($category->id == $catId) {
                  $cat = $category;
                  break;
                }
                foreach($category->children as $child) {
                  if($child->id == $catId) {
                    $cat = $child;
                    break 2;
                  }
                }
              }
            @endphp
            @if($cat)
              <span class="active-filter-badge">
                Category: {{ $cat->name }}
                <a href="{{ route('products.index', request()->except('category')) }}" class="remove text-decoration-none" style="color: #36251d;">×</a>
              </span>
            @endif
          @endif
          @if(request('section'))
            @php
              $sec = $sections->firstWhere('id', request('section'));
            @endphp
            @if($sec)
              <span class="active-filter-badge">
                Section: {{ $sec->title }}
                <a href="{{ route('products.index', request()->except('section')) }}" class="remove text-decoration-none" style="color: #36251d;">×</a>
              </span>
            @endif
          @endif
          @if(request('collection'))
            @php
              $col = $collections->firstWhere('id', request('collection'));
            @endphp
            @if($col)
              <span class="active-filter-badge">
                Collection: {{ $col->title }}
                <a href="{{ route('products.index', request()->except('collection')) }}" class="remove text-decoration-none" style="color: #36251d;">×</a>
              </span>
            @endif
          @endif
          @if(request('min_price') || request('max_price'))
            <span class="active-filter-badge">
              Price: 
              @if(request('min_price')){{ number_format(request('min_price'), 2) }}@endif
              @if(request('min_price') && request('max_price')) - @endif
              @if(request('max_price')){{ number_format(request('max_price'), 2) }}@endif
              <a href="{{ route('products.index', request()->except(['min_price', 'max_price'])) }}" class="remove text-decoration-none" style="color: #36251d;">×</a>
            </span>
          @endif
        </div>
        @endif
        
        <form method="GET" action="{{ route('products.index') }}" id="filterForm">
          <!-- Category Filter -->
          <div class="filter-section mb-4">
            <div class="filter-header" data-toggle="filter" data-target="categoryFilter">
              <h6>Category</h6>
              <span class="toggle-icon">▼</span>
            </div>
            <div class="filter-content" id="categoryFilter">
              <div class="filter-option" style="flex-direction: row;">
                <input type="radio" name="category" id="category_all" value="" {{ !request('category') ? 'checked' : '' }}>
                <label for="category_all">All Categories</label>
              </div>
              @php
                $categoryLimit = 6;
                $categoryCount = 0;
              @endphp
              @foreach($categories as $category)
                <div class="filter-option {{ $categoryCount >= $categoryLimit ? 'category-hidden' : '' }}" data-category-parent>
                  <div class="d-flex align-items-center justify-content-between w-100">
                    <div class="d-flex align-items-center">
                      <input type="radio" name="category" id="category_{{ $category->id }}" value="{{ $category->id }}" {{ (string)request('category') === (string)$category->id ? 'checked' : '' }}>
                      <label for="category_{{ $category->id }}">{{ $category->name }}</label>
                    </div>
                    @if($category->children->count() > 0)
                      <button type="button" class="subcategory-toggle" data-child-target="category-children-{{ $category->id }}">▸</button>
                    @endif
                  </div>
                  @if($category->children->count() > 0)
                    <div class="subcategory-list" id="category-children-{{ $category->id }}">
                      @foreach($category->children as $child)
                        <div class="filter-option subcategory">
                          <input type="radio" name="category" id="category_{{ $child->id }}" value="{{ $child->id }}" {{ (string)request('category') === (string)$child->id ? 'checked' : '' }}>
                          <label for="category_{{ $child->id }}">{{ $child->name }}</label>
                        </div>
                      @endforeach
                    </div>
                  @endif
                </div>
                @php $categoryCount++; @endphp
              @endforeach
              @if($categoryCount > $categoryLimit)
                <button type="button" class="show-more-btn" data-show-more="category" data-limit="{{ $categoryLimit }}">
                  Show More ({{ $categoryCount - $categoryLimit }})
                </button>
              @endif
            </div>
          </div>
          
          <!-- Section Filter -->
          @if($sections->count() > 0)
          <div class="filter-section mb-4">
            <div class="filter-header" data-toggle="filter" data-target="sectionFilter">
              <h6>Section</h6>
              <span class="toggle-icon">▼</span>
            </div>
            <div class="filter-content" id="sectionFilter">
              <div class="filter-option">
                <input type="radio" name="section" id="section_all" value="" {{ !request('section') ? 'checked' : '' }}>
                <label for="section_all">All Sections</label>
              </div>
              @foreach($sections as $section)
                <div class="filter-option">
                  <input type="radio" name="section" id="section_{{ $section->id }}" value="{{ $section->id }}" {{ (string)request('section') === (string)$section->id ? 'checked' : '' }}>
                  <label for="section_{{ $section->id }}">{{ $section->title }}</label>
                </div>
              @endforeach
            </div>
          </div>
          @endif
          
          <!-- Collection Filter -->
          @if($collections->count() > 0)
          <div class="filter-section mb-4">
            <div class="filter-header" data-toggle="filter" data-target="collectionFilter">
              <h6>Collection</h6>
              <span class="toggle-icon">▼</span>
            </div>
            <div class="filter-content" id="collectionFilter">
              <div class="filter-option">
                <input type="radio" name="collection" id="collection_all" value="" {{ !request('collection') ? 'checked' : '' }}>
                <label for="collection_all">All Collections</label>
              </div>
              @foreach($collections as $collection)
                <div class="filter-option">
                  <input type="radio" name="collection" id="collection_{{ $collection->id }}" value="{{ $collection->id }}" {{ (string)request('collection') === (string)$collection->id ? 'checked' : '' }}>
                  <label for="collection_{{ $collection->id }}">{{ $collection->title }}</label>
                </div>
              @endforeach
            </div>
          </div>
          @endif
          
          <!-- Price Range -->
          <div class="filter-section mb-4">
            <div class="filter-header" data-toggle="filter" data-target="priceFilter">
              <h6>Price Range</h6>
              <span class="toggle-icon">▼</span>
            </div>
            <div class="filter-content" id="priceFilter">
              <div class="price-range">
                <input type="number" name="min_price" class="price-input" id="filterMinPrice" value="{{ request('min_price') }}" placeholder="Min" min="0" step="0.01">
                <span style="color: #999;">-</span>
                <input type="number" name="max_price" class="price-input" id="filterMaxPrice" value="{{ request('max_price') }}" placeholder="Max" min="0" step="0.01">
              </div>
            </div>
          </div>
          
          <!-- Sort Options -->
          <div class="filter-section mb-4">
            <div class="filter-header" data-toggle="filter" data-target="sortFilter">
              <h6>Sort By</h6>
              <span class="toggle-icon">▼</span>
            </div>
            <div class="filter-content" id="sortFilter">
              <div class="sort-options">
                <label class="sort-option {{ request('sort', 'newest') == 'newest' ? 'active' : '' }}">
                  <input type="radio" name="sort" value="newest" {{ request('sort', 'newest') == 'newest' ? 'checked' : '' }}>
                  <span>Newest First</span>
                </label>
                <label class="sort-option {{ request('sort') == 'price_low' ? 'active' : '' }}">
                  <input type="radio" name="sort" value="price_low" {{ request('sort') == 'price_low' ? 'checked' : '' }}>
                  <span>Price: Low to High</span>
                </label>
                <label class="sort-option {{ request('sort') == 'price_high' ? 'active' : '' }}">
                  <input type="radio" name="sort" value="price_high" {{ request('sort') == 'price_high' ? 'checked' : '' }}>
                  <span>Price: High to Low</span>
                </label>
                <label class="sort-option {{ request('sort') == 'name' ? 'active' : '' }}">
                  <input type="radio" name="sort" value="name" {{ request('sort') == 'name' ? 'checked' : '' }}>
                  <span>Name A-Z</span>
                </label>
              </div>
        </div>
        </div>
          
          <input type="hidden" name="search" value="{{ request('search') }}">
      </form>
      </div>
    </div>

    <!-- Mobile Offcanvas Sidebar -->
    <div class="offcanvas offcanvas-start" tabindex="-1" id="filterOffcanvas" aria-labelledby="filterOffcanvasLabel" style="width: 85%;">
      <div class="offcanvas-header border-bottom">
        <h5 class="offcanvas-title" id="filterOffcanvasLabel">Filters</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body p-0">
        <div class="filter-sidebar" style="position: relative; top: 0; padding: 1rem; box-shadow: none;">
          <div class="d-flex justify-content-between align-items-center mb-3 px-3 pt-3">
            <h5 class="text-uppercase mb-0" style="color: #36251d; font-weight: 600;">Filters</h5>
            @if(request('category') || request('section') || request('collection') || request('min_price') || request('max_price'))
              <a href="{{ route('products.index') }}" class="text-decoration-none" style="color: #666; font-size: 0.85rem;">Clear All</a>
            @endif
          </div>
          
          @if(request('category') || request('section') || request('collection') || request('min_price') || request('max_price'))
          <div class="active-filters mb-3 px-3">
            @if(request('category'))
              @php
                $catId = request('category');
                $cat = null;
                foreach($categories as $category) {
                  if($category->id == $catId) {
                    $cat = $category;
                    break;
                  }
                  foreach($category->children as $child) {
                    if($child->id == $catId) {
                      $cat = $child;
                      break 2;
                    }
                  }
                }
              @endphp
              @if($cat)
                <span class="active-filter-badge">
                  Category: {{ $cat->name }}
                  <a href="{{ route('products.index', request()->except('category')) }}" class="remove text-decoration-none" style="color: #36251d;">×</a>
                </span>
              @endif
            @endif
            @if(request('section'))
              @php
                $sec = $sections->firstWhere('id', request('section'));
              @endphp
              @if($sec)
                <span class="active-filter-badge">
                  Section: {{ $sec->title }}
                  <a href="{{ route('products.index', request()->except('section')) }}" class="remove text-decoration-none" style="color: #36251d;">×</a>
                </span>
              @endif
            @endif
            @if(request('collection'))
              @php
                $col = $collections->firstWhere('id', request('collection'));
              @endphp
              @if($col)
                <span class="active-filter-badge">
                  Collection: {{ $col->title }}
                  <a href="{{ route('products.index', request()->except('collection')) }}" class="remove text-decoration-none" style="color: #36251d;">×</a>
                </span>
              @endif
            @endif
            @if(request('min_price') || request('max_price'))
              <span class="active-filter-badge">
                Price: 
                @if(request('min_price'))${{ number_format(request('min_price'), 2) }}@endif
                @if(request('min_price') && request('max_price')) - @endif
                @if(request('max_price'))${{ number_format(request('max_price'), 2) }}@endif
                <a href="{{ route('products.index', request()->except(['min_price', 'max_price'])) }}" class="remove text-decoration-none" style="color: #36251d;">×</a>
              </span>
            @endif
          </div>
          @endif

          <form method="GET" action="{{ route('products.index') }}" id="filterFormMobile">
            <!-- Category Filter -->
            <div class="filter-section mb-4 px-3">
              <div class="filter-header" data-toggle="filter" data-target="categoryFilterMobile">
                <h6>Category</h6>
                <span class="toggle-icon">▼</span>
              </div>
              <div class="filter-content" id="categoryFilterMobile">
                <div class="filter-option" style="flex-direction: row;">
                  <input type="radio" name="category" id="category_all_mobile" value="" {{ !request('category') ? 'checked' : '' }}>
                  <label for="category_all_mobile">All Categories</label>
                </div>
                @php
                  $categoryLimit = 6;
                  $categoryCount = 0;
                @endphp
                @foreach($categories as $category)
                  <div class="filter-option {{ $categoryCount >= $categoryLimit ? 'category-hidden' : '' }}" data-category-parent>
                    <div class="d-flex align-items-center justify-content-between w-100">
                      <div class="d-flex align-items-center">
                        <input type="radio" name="category" id="category_{{ $category->id }}_mobile" value="{{ $category->id }}" {{ (string)request('category') === (string)$category->id ? 'checked' : '' }}>
                        <label for="category_{{ $category->id }}_mobile">{{ $category->name }}</label>
                      </div>
                      @if($category->children->count() > 0)
                        <button type="button" class="subcategory-toggle" data-child-target="category-children-{{ $category->id }}-mobile">▸</button>
                      @endif
                    </div>
                    @if($category->children->count() > 0)
                      <div class="subcategory-list" id="category-children-{{ $category->id }}-mobile">
                        @foreach($category->children as $child)
                          <div class="filter-option subcategory">
                            <input type="radio" name="category" id="category_{{ $child->id }}_mobile" value="{{ $child->id }}" {{ (string)request('category') === (string)$child->id ? 'checked' : '' }}>
                            <label for="category_{{ $child->id }}_mobile">{{ $child->name }}</label>
                          </div>
                        @endforeach
                      </div>
                    @endif
                  </div>
                  @php $categoryCount++; @endphp
                @endforeach
                @if($categoryCount > $categoryLimit)
                  <button type="button" class="show-more-btn" data-show-more="category-mobile" data-limit="{{ $categoryLimit }}">
                    Show More ({{ $categoryCount - $categoryLimit }})
                  </button>
                @endif
              </div>
            </div>
            
            <!-- Section Filter -->
            @if($sections->count() > 0)
            <div class="filter-section mb-4 px-3">
              <div class="filter-header" data-toggle="filter" data-target="sectionFilterMobile">
                <h6>Section</h6>
                <span class="toggle-icon">▼</span>
              </div>
              <div class="filter-content" id="sectionFilterMobile">
                <div class="filter-option">
                  <input type="radio" name="section" id="section_all_mobile" value="" {{ !request('section') ? 'checked' : '' }}>
                  <label for="section_all_mobile">All Sections</label>
                </div>
                @foreach($sections as $section)
                  <div class="filter-option">
                    <input type="radio" name="section" id="section_{{ $section->id }}_mobile" value="{{ $section->id }}" {{ (string)request('section') === (string)$section->id ? 'checked' : '' }}>
                    <label for="section_{{ $section->id }}_mobile">{{ $section->title }}</label>
                  </div>
                @endforeach
              </div>
            </div>
            @endif
            
            <!-- Collection Filter -->
            @if($collections->count() > 0)
            <div class="filter-section mb-4 px-3">
              <div class="filter-header" data-toggle="filter" data-target="collectionFilterMobile">
                <h6>Collection</h6>
                <span class="toggle-icon">▼</span>
              </div>
              <div class="filter-content" id="collectionFilterMobile">
                <div class="filter-option">
                  <input type="radio" name="collection" id="collection_all_mobile" value="" {{ !request('collection') ? 'checked' : '' }}>
                  <label for="collection_all_mobile">All Collections</label>
                </div>
                @foreach($collections as $collection)
                  <div class="filter-option">
                    <input type="radio" name="collection" id="collection_{{ $collection->id }}_mobile" value="{{ $collection->id }}" {{ (string)request('collection') === (string)$collection->id ? 'checked' : '' }}>
                    <label for="collection_{{ $collection->id }}_mobile">{{ $collection->title }}</label>
                  </div>
                @endforeach
              </div>
            </div>
            @endif
            
            <!-- Price Range -->
            <div class="filter-section mb-4 px-3">
              <div class="filter-header" data-toggle="filter" data-target="priceFilterMobile">
                <h6>Price Range</h6>
                <span class="toggle-icon">▼</span>
              </div>
              <div class="filter-content" id="priceFilterMobile">
                <div class="price-range">
                  <input type="number" name="min_price" class="price-input" id="filterMinPriceMobile" value="{{ request('min_price') }}" placeholder="Min" min="0" step="0.01">
                  <span style="color: #999;">-</span>
                  <input type="number" name="max_price" class="price-input" id="filterMaxPriceMobile" value="{{ request('max_price') }}" placeholder="Max" min="0" step="0.01">
                </div>
              </div>
            </div>
            
            <!-- Sort Options -->
            <div class="filter-section mb-4 px-3">
              <div class="filter-header" data-toggle="filter" data-target="sortFilterMobile">
                <h6>Sort By</h6>
                <span class="toggle-icon">▼</span>
              </div>
              <div class="filter-content" id="sortFilterMobile">
                <div class="sort-options">
                  <label class="sort-option {{ request('sort', 'newest') == 'newest' ? 'active' : '' }}">
                    <input type="radio" name="sort" value="newest" {{ request('sort', 'newest') == 'newest' ? 'checked' : '' }}>
                    <span>Newest First</span>
                  </label>
                  <label class="sort-option {{ request('sort') == 'price_low' ? 'active' : '' }}">
                    <input type="radio" name="sort" value="price_low" {{ request('sort') == 'price_low' ? 'checked' : '' }}>
                    <span>Price: Low to High</span>
                  </label>
                  <label class="sort-option {{ request('sort') == 'price_high' ? 'active' : '' }}">
                    <input type="radio" name="sort" value="price_high" {{ request('sort') == 'price_high' ? 'checked' : '' }}>
                    <span>Price: High to Low</span>
                  </label>
                  <label class="sort-option {{ request('sort') == 'name' ? 'active' : '' }}">
                    <input type="radio" name="sort" value="name" {{ request('sort') == 'name' ? 'checked' : '' }}>
                    <span>Name A-Z</span>
                  </label>
                </div>
              </div>
            </div>
            
            <input type="hidden" name="search" value="{{ request('search') }}">
          </form>
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-9 col-md-8">
      <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 mb-md-4">
        <h4 class="text-uppercase mb-2 mb-md-0" style="color: #36251d;">Products</h4>
        <span class="text-muted">{{ $products->total() }} products found</span>
      </div>
      <div class="row g-3">
        @forelse($products as $product)
          <div class="col-12 col-sm-6 col-md-4 mb-3 mb-md-4">
            @include('frontend.components.product-card', ['product' => $product])
          </div>
        @empty
          <div class="col-12">
            <p class="text-center">No products found at Rathore Collection.</p>
            <p class="text-center text-muted">Try adjusting your filters to discover our premium stitched and unstitched garments for men, women, and children.</p>
          </div>
        @endforelse
      </div>
      <div class="mt-4 d-flex justify-content-center">
        {{ $products->links() }}
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const filterForm = document.getElementById('filterForm');
    const filterFormMobile = document.getElementById('filterFormMobile');
    
    // Helper function to get the form for an element
    function getFormForElement(element) {
        return element.closest('form') || filterForm;
    }
    
    // Collapsible filter sections
    document.querySelectorAll('[data-toggle="filter"]').forEach(header => {
        header.addEventListener('click', function() {
            const target = document.getElementById(this.dataset.target);
            const isCollapsed = target.classList.contains('collapsed');
            
            if (isCollapsed) {
                target.classList.remove('collapsed');
                this.classList.remove('collapsed');
            } else {
                target.classList.add('collapsed');
                this.classList.add('collapsed');
            }
        });
    });
    
    // Subcategory toggles - use event delegation for better reliability
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('subcategory-toggle') || e.target.closest('.subcategory-toggle')) {
            const btn = e.target.classList.contains('subcategory-toggle') ? e.target : e.target.closest('.subcategory-toggle');
            const targetId = btn.getAttribute('data-child-target');
            
            if (!targetId) return;
            
            const target = document.getElementById(targetId);
            if (!target) return;
            
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            
            const isOpen = target.classList.contains('open');
            
            if (isOpen) {
                target.classList.remove('open');
                btn.classList.remove('open');
            } else {
                target.classList.add('open');
                btn.classList.add('open');
            }
            
            return false;
        }
    }, true);
    
    // Initialize: Open subcategories if a child is selected
    document.querySelectorAll('.subcategory-toggle').forEach(btn => {
        const targetId = btn.getAttribute('data-child-target');
        if (!targetId) return;
        
        const target = document.getElementById(targetId);
        if (!target) return;

        const hasSelectedChild = Array.from(target.querySelectorAll('input[type="radio"]')).some(r => r.checked);
        if (hasSelectedChild) {
            target.classList.add('open');
            btn.classList.add('open');
        }
    });
    
    // Show more for categories (no scrollbars) - handle both desktop and mobile
    document.querySelectorAll('[data-show-more="category"], [data-show-more="category-mobile"]').forEach(showMoreBtn => {
        const container = showMoreBtn.closest('.filter-content');
        const hiddenItems = Array.from(container.querySelectorAll('.category-hidden'));
        hiddenItems.forEach(el => el.style.display = 'none');

        let expanded = false;
        const hiddenCount = hiddenItems.length;

        showMoreBtn.addEventListener('click', function() {
            expanded = !expanded;
            hiddenItems.forEach(el => el.style.display = expanded ? 'flex' : 'none');
            this.textContent = expanded ? 'Show Less' : `Show More (${hiddenCount})`;
        });
    });
    
    // Subcategory toggle functionality
    document.querySelectorAll('.subcategory-toggle').forEach(toggle => {
        toggle.addEventListener('click', function(e) {
            e.stopPropagation();
            const targetId = this.dataset.childTarget;
            const subcategoryList = document.getElementById(targetId);
            
            if (subcategoryList) {
                const isOpen = subcategoryList.classList.contains('open');
                if (isOpen) {
                    subcategoryList.classList.remove('open');
                    this.classList.remove('open');
                } else {
                    subcategoryList.classList.add('open');
                    this.classList.add('open');
                }
            }
        });
    });
    
    // Auto-expand subcategories if a child is selected
    document.querySelectorAll('input[type="radio"][name="category"]').forEach(radio => {
        if (radio.checked && !radio.id.includes('_all')) {
            const categoryOption = radio.closest('[data-category-parent]');
            if (categoryOption) {
                const toggle = categoryOption.querySelector('.subcategory-toggle');
                const subcategoryList = categoryOption.querySelector('.subcategory-list');
                if (toggle && subcategoryList) {
                    subcategoryList.classList.add('open');
                    toggle.classList.add('open');
                }
            }
        }
    });
    
    // Auto-submit on radio button change (both forms)
    document.querySelectorAll('input[type="radio"][name="category"], input[type="radio"][name="section"], input[type="radio"][name="collection"], input[type="radio"][name="sort"]').forEach(radio => {
        radio.addEventListener('change', function() {
            const form = getFormForElement(this);
            if (form) {
                // Close offcanvas on mobile after selection
                if (form.id === 'filterFormMobile') {
                    const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('filterOffcanvas'));
                    if (offcanvas) {
                        setTimeout(() => {
                            offcanvas.hide();
                        }, 300);
                    }
                }
                form.submit();
            }
        });
    });
    
    // Auto-submit on price input change (with debounce) - both forms
    let priceTimeout;
    ['filterMinPrice', 'filterMaxPrice', 'filterMinPriceMobile', 'filterMaxPriceMobile'].forEach(id => {
        const element = document.getElementById(id);
        if (element) {
            element.addEventListener('input', function() {
                clearTimeout(priceTimeout);
                priceTimeout = setTimeout(function() {
                    const form = getFormForElement(element);
                    if (form) {
                        // Close offcanvas on mobile after price change
                        if (form.id === 'filterFormMobile') {
                            const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('filterOffcanvas'));
                            if (offcanvas) {
                                setTimeout(() => {
                                    offcanvas.hide();
                                }, 300);
                            }
                        }
                        form.submit();
                    }
                }, 800); // Wait 800ms after user stops typing
            });
        }
    });
});
</script>
@endpush
@endsection