@extends('frontend::layouts.master')

@php
$assetPath = 'frontend_assets';
$langCode = session('lang_code', 'en');
$isRtl = ($direction ?? 'ltr') === 'rtl';

// Build currently selected category IDs array
$activeCategoryIds = array_filter(array_map('intval', (array) request('categories', [])));
if (request('category') && !$activeCategoryIds) {
$activeCategoryIds = [(int) request('category')];
}

$decimalPoints = $currentCountry->decimal_points ?? 0;
$step = $decimalPoints > 0 ? '0.' . str_repeat('0', $decimalPoints - 1) . '1' : '1';
@endphp

<script>
  window.pageName = 'product_listing';
</script>

<style>
  .cat-hidden-check {
    display: none !important;
  }

  .cat-filter-label {
    cursor: pointer;
    transition: all 0.2s ease;
    color: #686868;
    font-size: 13px;
    display: block;
    padding: 2px 0;
  }

  .cat-filter-child {
    cursor: pointer;
    transition: all 0.2s ease;
    color: #686868;
    font-size: 13px;
    display: block;
    padding: 2px 0;
  }

  .cat-filter-active {
    color: #E30613 !important;
    font-weight: 700 !important;
  }

  .per-page-box {
    background: #F5F5F5;
    border: 1px solid #EAEAEA;
    border-radius: 4px;
    padding: 4px 10px;
    font-weight: 600;
    font-size: 13px;
    color: #333;
  }

  .page-number-box {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #F5F5F5;
    color: #333;
    margin: 0 2px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
  }

  @media (min-width: 576px) {
    .page-number-box {
      width: 32px;
      height: 32px;
      font-size: 14px;
      margin: 0 4px;
    }
  }

  .page-number-box.active {
    background: #010F07;
    color: #fff;
  }

  .nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
  }

  .nav-arrow img {
    width: 12px;
  }

  @media (min-width: 576px) {
    .nav-arrow {
      padding: 8px;
    }

    .nav-arrow img {
      width: 14px;
    }
  }

  .nav-arrow.disabled {
    cursor: default;
    opacity: 0.3;
  }

  .pagination-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
  }
</style>

@section('content')
  <div class="container-fluid px-lg-5 mt-1">
    <div class="main-header-bar d-flex justify-content-between align-items-center">
      <div class="d-flex align-items-center">
        <a href="javascript:history.back()" class="back-btn me-2">
          <img src="{{ asset($assetPath . '/icons/back.png') }}">
        </a>
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="py-3">
          <ol class="breadcrumb m-0">
            <li class="breadcrumb-item item-nav"><a href="{{ url('/') }}" data-translate="home">{{ webTrans('home', 'product_listing', 'Home') }}</a></li>
            <li class="breadcrumb-item item-nav active">
              <a href="{{ url()->full() }}" data-translate="product_listing">
                {{ webTrans('product_listing', 'product_listing', 'Product Listing') }}
              </a>
            </li>
          </ol>
        </nav>
      </div>

      {{-- Mobile Filter Toggle Button --}}
      <div class="d-lg-none">
        <button class="btn btn-filter-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvasTop" aria-controls="filterOffcanvasTop">
          <img src="{{ asset($assetPath . '/icons/filter3.png') }}" alt="Filter" style="width: 24px;">
        </button>
      </div>
    </div>
  </div>

  <section class="product-listing-section">
    <div class="container-fluid px-2 px-lg-5">
      <div class="row g-md-5">

        {{-- ========================= DESKTOP FILTER SIDEBAR ========================= --}}
        <div class="col-md-2 border-end pe-4 my-5 py-2 d-none d-md-block">

          <h5 class="filtered-heading mb-4" data-translate="filtered_by">{{ webTrans('filtered_by', 'product_listing', 'Filtered By') }}</h5>

          <form action="{{ route('frontend.product_list') }}" method="GET" id="filterForm">
            @if(request('sort'))
            <input type="hidden" name="sort" value="{{ request('sort') }}">
            @endif
            @if(request('q'))
            <input type="hidden" name="q" value="{{ request('q') }}">
            @endif

            {{-- CATEGORY (Multi-select) --}}
            <div class="filter-group border-bottom pb-4 mb-3">
              <div class="d-flex justify-content-between align-items-center cursor-pointer"
                data-bs-toggle="collapse" data-bs-target="#categoryCollapse" role="button">
                <span class="filter-title-1" data-translate="category">{{ webTrans('category', 'product_listing') }}</span>
                <img src="{{ asset($assetPath . '/icons/Arrow1.png') }}">
              </div>

              <div class="collapse mt-3 ps-2 {{ !empty($activeCategoryIds) ? 'show' : '' }}" id="categoryCollapse">
                @foreach($categories as $category)
                @php
                $hasCategoryChildren = $category->children->count() > 0;
                $isCategoryActive = in_array($category->id, $activeCategoryIds);
                $isChildActive = $hasCategoryChildren && $category->children->pluck('id')->intersect($activeCategoryIds)->isNotEmpty();
                @endphp

                <div class="category-filter-item mb-2" id="cat-item-{{ $category->id }}">
                  {{-- Hidden checkbox for the parent category --}}
                  <input type="checkbox" id="cat-check-{{ $category->id }}" name="categories[]"
                    value="{{ $category->id }}" class="cat-hidden-check"
                    {{ $isCategoryActive ? 'checked' : '' }}>

                  <div class="d-flex align-items-center justify-content-between">
                    {{-- Clicking this label: selects parent, marks red, opens children. REMOVED 'for' to avoid double-toggle --}}
                    <label class="cat-filter-label mb-0 {{ $isCategoryActive ? 'cat-filter-active' : '' }}"
                      @if($hasCategoryChildren)
                      onclick="toggleCatParent('{{ $category->id }}', 'cat-check', 'cat-children-{{ $category->id }}', this)"
                      @else
                      onclick="toggleCatParent('{{ $category->id }}', 'cat-check', null, this)"
                      @endif>
                      {{ ucwords(strtolower($category->getTranslation('name', $langCode, true))) }}
                    </label>
                    @if($hasCategoryChildren)
                    <img src="{{ asset($assetPath . '/icons/Arrow1.png') }}"
                      class="cursor-pointer collapse-arrow {{ ($isChildActive || $isCategoryActive) ? '' : 'collapsed' }}"
                      data-bs-toggle="collapse" data-bs-target="#cat-children-{{ $category->id }}"
                      style="width:10px;height:6px; {{ ($isCategoryActive || $isChildActive) ? 'filter:invert(13%) sepia(91%) saturate(7460%) hue-rotate(352deg) brightness(89%) contrast(108%);' : '' }}">
                    @endif
                  </div>

                  @if($hasCategoryChildren)
                  <div class="collapse ps-3 mt-1 {{ ($isChildActive || $isCategoryActive) ? 'show' : '' }}" id="cat-children-{{ $category->id }}">
                    @foreach($category->children as $child)
                    <div class="mb-2">
                      <input type="checkbox" id="cat-check-{{ $child->id }}" name="categories[]"
                        value="{{ $child->id }}" class="cat-hidden-check"
                        {{ in_array($child->id, $activeCategoryIds) ? 'checked' : '' }}>
                      <label for="cat-check-{{ $child->id }}"
                        class="cat-filter-child {{ in_array($child->id, $activeCategoryIds) ? 'cat-filter-active' : '' }}">
                        {{ ucfirst(strtolower($child->getTranslation('name', $langCode, true))) }}
                      </label>
                    </div>
                    @endforeach
                  </div>
                  @endif
                </div>
                @endforeach
              </div>
            </div>

            {{-- DYNAMIC ATTRIBUTES (size, colour, etc.) --}}
            @foreach($groupedAttributes as $attr)
            @php
            $isColor = in_array(strtolower($attr['name']), ['colour', 'color', 'لون']);
            $isSize = in_array(strtolower($attr['name']), ['size', 'مقاس']);
            $collapseId = 'attrCollapse-' . $attr['id'];
            $selectedVals = (array) request('attributes.' . $attr['id'], []);
            @endphp

            <div class="filter-group border-bottom pb-4 mb-3">
              <div class="d-flex justify-content-between align-items-center cursor-pointer"
                data-bs-toggle="collapse" data-bs-target="#{{ $collapseId }}" role="button">
                <span class="filter-title-1">{{ $attr['name'] }}</span>
                <img src="{{ asset($assetPath . '/icons/Arrow1.png') }}">
              </div>

              <div class="collapse mt-3 {{ !empty($selectedVals) ? 'show' : '' }}" id="{{ $collapseId }}">
                @if($isColor || $isSize)
                <div class="d-flex flex-wrap gap-3 ps-1">
                  @foreach($attr['values'] as $val)
                  @if($isColor)
                  <div class="color-item">
                    <input type="checkbox"
                      id="attr-{{ $attr['id'] }}-{{ $val['id'] }}"
                      name="attributes[{{ $attr['id'] }}][]"
                      value="{{ $val['id'] }}"
                      class="color-input filter-multicheck"
                      onchange=""
                      {{ in_array($val['id'], $selectedVals) ? 'checked' : '' }}>
                    <label for="attr-{{ $attr['id'] }}-{{ $val['id'] }}"
                      class="color-label {{ in_array(strtolower(trim($val['code'] ?? '')), ['#ffffff', '#fff', 'white']) ? 'white-color-border' : '' }}"
                      style="--btn-color: {{ $val['code'] ?? '#000' }};"
                      title="{{ $val['name'] }}"></label>
                  </div>
                  @else
                  <div class="size-filter-item">
                    <input type="checkbox"
                      id="attr-{{ $attr['id'] }}-{{ $val['id'] }}"
                      name="attributes[{{ $attr['id'] }}][]"
                      value="{{ $val['id'] }}"
                      class="size-checkbox-input filter-multicheck"
                      onchange=""
                      {{ in_array($val['id'], $selectedVals) ? 'checked' : '' }}>
                    <label for="attr-{{ $attr['id'] }}-{{ $val['id'] }}" class="size-checkbox-label">
                      <span class="custom-box"></span>
                      <span class="size-text">{{ $val['name'] }}</span>
                    </label>
                  </div>
                  @endif
                  @endforeach
                </div>
                @else
                <div class="row g-3 ps-1">
                  @foreach($attr['values'] as $val)
                  <div class="col-12 py-1">
                    <input type="checkbox"
                      id="attr-{{ $attr['id'] }}-{{ $val['id'] }}"
                      name="attributes[{{ $attr['id'] }}][]"
                      value="{{ $val['id'] }}"
                      class="cat-hidden-check"
                      onchange=""
                      {{ in_array($val['id'], $selectedVals) ? 'checked' : '' }}>
                    <label for="attr-{{ $attr['id'] }}-{{ $val['id'] }}"
                      class="cat-filter-label {{ in_array($val['id'], $selectedVals) ? 'cat-filter-active' : '' }}">
                      {{ $val['name'] }}
                    </label>
                  </div>
                  @endforeach
                </div>
                @endif
              </div>
            </div>
            @endforeach

            {{-- PRICE RANGE (submits on change after user finishes typing) --}}
            <div class="filter-group pb-4 mb-3">
              <div class="d-flex justify-content-between align-items-center cursor-pointer"
                data-bs-toggle="collapse" data-bs-target="#priceCollapse" role="button">
                <span class="filter-title-1" data-translate="price_range">{{ webTrans('price_range', 'product_listing') }}</span>
                <img src="{{ asset($assetPath . '/icons/Arrow1.png') }}">
              </div>

              <div class="collapse mt-3 ps-2 {{ request('min_price') || request('max_price') ? 'show' : '' }}" id="priceCollapse">
                <div class="d-flex align-items-center justify-content-between mb-3">
                  <label class="filter-title-3 mb-0" data-translate="min_price">
                    {{ webTrans('min_price', 'product_listing', 'Min Price') }}
                  </label>
                  <div class="price-input-wrapper">
                    <input type="number" name="min_price" class="price-pill-input"
                      placeholder="500" value="{{ request('min_price') }}" step="{{ $step }}">
                  </div>
                </div>

                <div class="d-flex align-items-center justify-content-between mb-3">
                  <label class="filter-title-3 mb-0" data-translate="max_price">
                    {{ webTrans('max_price', 'product_listing', 'Max Price') }}
                  </label>
                  <div class="price-input-wrapper">
                    <input type="number" name="max_price" class="price-pill-input"
                      placeholder="1000" value="{{ request('max_price') }}" step="{{ $step }}">
                  </div>
                </div>
              </div>
            </div>

            {{-- APPLY & CLEAR FILTERS --}}
            <div class="mt-4 d-flex flex-column gap-2">

              <button type="submit"
                class="btn btn-clear-filter w-100 d-flex align-items-center justify-content-center"
                style="background: linear-gradient(118deg,#E30613 2%,#9B0710 100%); color:#fff; border:none; height:30px;">
                {{ webTrans('apply_filters', 'product_listing', 'Apply Filters') }}
              </button>

              <a href="{{ route('frontend.product_list') }}"
                class="btn btn-clear-filter w-100 noLink d-flex align-items-center justify-content-center"
                style="height:30px;">
                <img src="{{ asset($assetPath . '/icons/filter-btn.png') }}" class="filter-icon-svg me-2" alt="">
                {{ webTrans('clear_filter', 'product_listing', 'Clear filter') }}
              </a>

            </div>

          </form>
        </div>

        {{-- ========================= PRODUCT GRID ========================= --}}
        <div class="col-12 col-md-10">
          @if($products->count() > 0)
          <div class="row g-4 g-md-4">
            @foreach($products as $product)
            <div class="col-6 col-md-4 col-lg-3 col-xl-3">
              @include('frontend::home.sections._product_card', [
              'product' => $product,
              'pageName' => 'product_listing',
              ])
            </div>
            @endforeach
          </div>

          {{-- PAGINATION --}}
          <div class="pagination-container d-flex flex-column flex-sm-row justify-content-sm-between align-items-center gap-3 mt-5 pb-4 px-2">

            {{-- Count label --}}
            <div class="d-flex align-items-center">
              <span class="pagination-text me-2 d-none d-sm-inline" data-translate="showing">{{ webTrans('showing', 'product_listing', 'Showing') }}</span>
              <div class="per-page-box">{{ $products->count() }}</div>
              <span class="pagination-text ms-2 d-none d-sm-inline" data-translate="products_per_page">{{ webTrans('products_per_page', 'product_listing', 'Products per page') }}</span>
              <span class="pagination-text ms-2 d-sm-none" data-translate="products">{{ webTrans('products', 'product_listing', 'Products') }}</span>
            </div>

            {{-- Page links --}}
            <div class="pagination-inner">
              {{ $products->links('frontend::partials.pagination') }}
            </div>

          </div>

          @else
          <div class="d-flex flex-column align-items-center justify-content-center text-center p-5 bg-white w-100">
            <img src="{{ asset($assetPath . '/images/Group2044.png') }}" class="img-fluid mb-4" style="max-width: 300px;">
            <h4 class="text-muted fw-normal" style="font-size: 1.25rem;">
              {{ webTrans('no_products_found', 'product_listing', 'No products found matching your criteria') }}
            </h4>
          </div>
          @endif
        </div>
      </div>
    </div>
  </section>

{{-- ========================= MOBILE FILTER OFFCANVAS (Slides from Right) ========================= --}}
<div class="offcanvas offcanvas-end offcanvas-expandable-right d-lg-none" tabindex="-1" id="filterOffcanvasTop" aria-labelledby="filterOffcanvasTopLabel">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title fw-bold" id="filterOffcanvasTopLabel">{{ webTrans('filters', 'product_listing', 'Filters') }}</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>

  <div class="offcanvas-body">
    <form action="{{ route('frontend.product_list') }}" method="GET" id="mobileFilterForm">
      {{-- Persist search and sort state --}}
      @if(request('q')) <input type="hidden" name="q" value="{{ request('q') }}"> @endif
      @if(request('sort')) <input type="hidden" name="sort" value="{{ request('sort') }}"> @endif

      <h5 class="filtered-heading mb-4">{{ webTrans('filtered_by', 'product_listing', 'Filtered By') }}</h5>

      {{-- CATEGORIES --}}
      <div class="filter-group border-bottom pb-4 mb-3">
        <div class="d-flex justify-content-between align-items-center cursor-pointer"
          data-bs-toggle="collapse" data-bs-target="#categoryCollapseMobile" role="button">
          <span class="filter-title-1">{{ webTrans('category', 'product_listing') }}</span>
          <img src="{{ asset($assetPath . '/icons/Arrow1.png') }}">
        </div>

        <div class="collapse mt-3 ps-3 {{ !empty($activeCategoryIds) ? 'show' : '' }}" id="categoryCollapseMobile">
          @foreach($categories as $category)
          @php
          $hasChildren = $category->children->count() > 0;
          $isActive = in_array($category->id, $activeCategoryIds);
          $isChildActive = $hasChildren && $category->children->pluck('id')->intersect($activeCategoryIds)->isNotEmpty();
          $collapseId = 'mob-cat-collapse-' . $category->id;
          @endphp

          <div class="category-item-mobile mb-2">
            {{-- Hidden checkbox --}}
            <input type="checkbox" id="mob-cat-{{ $category->id }}" name="categories[]" value="{{ $category->id }}"
              class="cat-hidden-check" {{ $isActive ? 'checked' : '' }}>

            <div class="d-flex justify-content-between align-items-center mb-1">
              {{-- REMOVED 'for' to avoid double-toggle --}}
              <label class="cat-filter-label mb-0 {{ $isActive ? 'cat-filter-active' : '' }}"
                @if($hasChildren)
                onclick="toggleCatParent('{{ $category->id }}', 'mob-cat', '{{ $collapseId }}', this)"
                @else
                onclick="toggleCatParent('{{ $category->id }}', 'mob-cat', null, this)"
                @endif>
                {{ ucwords(strtolower($category->getTranslation('name', $langCode, true))) }}
              </label>
              @if($hasChildren)
              <img src="{{ asset($assetPath . '/icons/Arrow1.png') }}"
                class="cursor-pointer collapse-arrow {{ ($isActive || $isChildActive) ? '' : 'collapsed' }}"
                data-bs-toggle="collapse" data-bs-target="#{{ $collapseId }}"
                style="width:10px;height:6px; {{ ($isActive || $isChildActive) ? 'filter:invert(13%) sepia(91%) saturate(7460%) hue-rotate(352deg) brightness(89%) contrast(108%);' : '' }}">
              @endif
            </div>

            @if($hasChildren)
            <div class="collapse ps-3 {{ ($isActive || $isChildActive) ? 'show' : '' }}" id="{{ $collapseId }}">
              <ul class="list-unstyled mb-0">
                @foreach($category->children as $child)
                @php $isChildChecked = in_array($child->id, $activeCategoryIds); @endphp
                <li class="mb-2">
                  <input type="checkbox" id="mob-cat-{{ $child->id }}" name="categories[]" value="{{ $child->id }}"
                    class="cat-hidden-check" {{ $isChildChecked ? 'checked' : '' }}>
                  <label for="mob-cat-{{ $child->id }}" class="cat-filter-child {{ $isChildChecked ? 'cat-filter-active' : '' }}">
                    {{ ucfirst(strtolower($child->getTranslation('name', $langCode, true))) }}
                  </label>
                </li>
                @endforeach
              </ul>
            </div>
            @endif
          </div>
          @endforeach
        </div>
      </div>

      {{-- ATTRIBUTES --}}
      @foreach($groupedAttributes as $attr)
      @php
      $isColor = in_array(strtolower($attr['name']), ['colour', 'color', 'لون']);
      $isSize = in_array(strtolower($attr['name']), ['size', 'مقاس']);
      $collapseId = 'mob-attr-collapse-' . $attr['id'];
      $selectedVals = (array) request('attributes.' . $attr['id'], []);
      @endphp

      <div class="filter-group border-bottom pb-4 mb-3">
        <div class="d-flex justify-content-between align-items-center cursor-pointer"
          data-bs-toggle="collapse" data-bs-target="#{{ $collapseId }}" role="button">
          <span class="filter-title-1">{{ $attr['name'] }}</span>
          <img src="{{ asset($assetPath . '/icons/Arrow1.png') }}">
        </div>

        <div class="collapse {{ !empty($selectedVals) ? 'show' : '' }} mt-3" id="{{ $collapseId }}">
          <div class="{{ ($isColor || $isSize) ? 'd-flex flex-wrap gap-3 ps-1' : 'row g-3 ps-1' }}">
            @foreach($attr['values'] as $val)
            @php $isChecked = in_array($val['id'], $selectedVals); @endphp

            @if($isSize)
            <div class="size-filter-item">
              <input type="checkbox" id="mob-attr-{{ $val['id'] }}" name="attributes[{{ $attr['id'] }}][]"
                value="{{ $val['id'] }}" class="size-checkbox-input" {{ $isChecked ? 'checked' : '' }}>
              <label for="mob-attr-{{ $val['id'] }}" class="size-checkbox-label">
                <span class="custom-box"></span>
                <span class="size-text">{{ $val['name'] }}</span>
              </label>
            </div>
            @elseif($isColor)
            <div class="color-item">
              <input type="checkbox" id="mob-attr-{{ $val['id'] }}" name="attributes[{{ $attr['id'] }}][]"
                value="{{ $val['id'] }}" class="color-input" {{ $isChecked ? 'checked' : '' }}>
              <label for="mob-attr-{{ $val['id'] }}" class="color-label {{ in_array(strtolower(trim($val['code'] ?? '')), ['#ffffff', '#fff', 'white']) ? 'white-color-border' : '' }}"
                style="--btn-color: {{ $val['code'] ?? '#000' }};"></label>
            </div>
            @else
            <div class="col-6">
              <div class="custom-check-group">
                <input type="checkbox" id="mob-attr-{{ $val['id'] }}" name="attributes[{{ $attr['id'] }}][]"
                  value="{{ $val['id'] }}" class="custom-check-input" {{ $isChecked ? 'checked' : '' }}>
                <label for="mob-attr-{{ $val['id'] }}" class="custom-check-label">
                  <span class="custom-check-box {{ $isChecked ? 'item-active' : '' }}"></span>
                  <span class="filter-label-text {{ $isChecked ? 'cat-filter-active' : '' }}">{{ $val['name'] }}</span>
                </label>
              </div>
            </div>
            @endif
            @endforeach
          </div>
        </div>
      </div>
      @endforeach

      {{-- PRICE --}}
      <div class="filter-group border-bottom pb-4 mb-3">
        <div class="d-flex justify-content-between align-items-center cursor-pointer"
          data-bs-toggle="collapse" data-bs-target="#mob-price-collapse" role="button">
          <span class="filter-title-1">Price</span>
          <img src="{{ asset($assetPath . '/icons/Arrow1.png') }}">
        </div>
        <div class="collapse mt-3 ps-2 {{ (request('min_price') || request('max_price')) ? 'show' : '' }}" id="mob-price-collapse">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <label class="filter-title-3 mb-0">Minimum Price</label>
            <div class="price-input-wrapper">
              <input type="number" name="min_price" value="{{ request('min_price') }}" class="price-pill-input" placeholder="500" step="{{ $step }}">
            </div>
          </div>

          <div class="d-flex align-items-center justify-content-between mb-2">
            <label class="filter-title-3 mb-0">Maximum Price</label>
            <div class="price-input-wrapper">
              <input type="number" name="max_price" value="{{ request('max_price') }}" class="price-pill-input" placeholder="1000" step="{{ $step }}">
            </div>
          </div>
        </div>
      </div>

      {{-- ACTIONS --}}
      <div class="mt-4 d-flex flex-column gap-3">
        <button type="submit" class="btn btn-clear-filter w-100 fw-bold" style="background: linear-gradient(118deg,#E30613 2%,#9B0710 100%); color:#fff; border:none; style:20px">
          {{ webTrans('apply_filters', 'product_listing', 'Apply Filters') }}
        </button>

        <a href="{{ route('frontend.product_list') }}" class="btn btn-clear-filter w-100 noLink">
          <img src="{{ asset($assetPath . '/icons/filter-btn.png') }}" class="filter-icon-svg" alt="">
          {{ webTrans('clear_filter', 'product_listing', 'Clear filter') }}
        </a>
      </div>
    </form>
  </div>
</div>


<script>
  /**
   * toggleCatParent — called by onclick on parent category labels.
   * Toggles the checkbox + red active class. Form submits via Apply Filters button.
   * @param {string} catId       - category id
   * @param {string} prefix      - 'cat-check' (desktop) | 'mob-cat' (mobile)
   * @param {string} collapseId  - id of child-collapse div (optional)
   * @param {Element} labelEl    - the label element that was clicked (pass `this`)
   */
  function toggleCatParent(catId, prefix, collapseId, labelEl) {
    prefix = prefix || 'cat-check';
    var checkbox = document.getElementById(prefix + '-' + catId);
    if (!checkbox) return;

    // Toggle checkbox state
    checkbox.checked = !checkbox.checked;

    // Immediately update the red active class on the clicked label
    if (labelEl) {
      labelEl.classList.toggle('cat-filter-active', checkbox.checked);
    }

    // If newly checked and has children, open the accordion
    if (checkbox.checked && collapseId) {
      var collapseEl = document.getElementById(collapseId);
      if (collapseEl) {
        var bsCollapse = bootstrap.Collapse.getInstance(collapseEl) ||
          new bootstrap.Collapse(collapseEl, {
            toggle: false
          });
        bsCollapse.show();
      }
    }
    // NOTE: No form.submit() — user clicks "Apply Filters" to submit.
  }

  document.addEventListener('DOMContentLoaded', function() {

    // ── Sync child-category label active class on page load & on change ──
    document.querySelectorAll('.cat-hidden-check').forEach(function(chk) {
      var lbl = document.querySelector('label[for="' + chk.id + '"]');
      if (lbl && chk.checked) lbl.classList.add('cat-filter-active');

      // When child checkbox is toggled via its label, sync the red style
      chk.addEventListener('change', function() {
        if (lbl) lbl.classList.toggle('cat-filter-active', this.checked);
      });
    });

    // ── Expand accordion when parent label is clicked and has children ──
    document.querySelectorAll('.cat-filter-label').forEach(function(label) {
      label.addEventListener('click', function() {
        var container = this.closest('.category-filter-item, .category-item-mobile');
        if (!container) return;
        var arrow = container.querySelector('.collapse-arrow');
        if (arrow && arrow.classList.contains('collapsed')) {
          var targetId = arrow.dataset.bsTarget;
          var collapseEl = document.querySelector(targetId);
          if (collapseEl) {
            var bsCollapse = bootstrap.Collapse.getInstance(collapseEl) ||
              new bootstrap.Collapse(collapseEl, {
                toggle: false
              });
            bsCollapse.show();
          }
        }
      });
    });

  });
</script>

@endsection