@extends('layouts.app')

@section('content')
<nav aria-label="breadcrumb">
    <div class="container">
        <ol class="breadcrumb custom-breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ url('/products') }}">Blinds</a></li>
            @if(!empty($single_cat))
                <li class="breadcrumb-item active">{{ $single_cat->name }}</li>
					
            @endif
        </ol>
    </div>
</nav>

<section class="flat-spacing-24 product_list_des">
    <div class="container">
        <div class="row">
		  <!-- Luxury Section -->
		@if ($single_cat !== '' && isset($single_cat))
        <section class="luxury-section">
            <div class="container">
                <div class="row align-items-center ewewe">
                    <!-- Left Content -->
                    <div class="col-lg-8 luxury-content">
                        <h2></h2>
                        
                        <!-- Buttons -->
                        <div>
						@if(isset($single_cat->tags))

						@if($single_cat->tags->isNotEmpty())
							@foreach($single_cat->tags as $tag)
								 <button class="luxury-btn">
									{{ $tag->name }}
							   </button>
							@endforeach
						@endif
						@endif
                        </div>
                    </div>

                    <!-- Right Image -->
                    <div class="col-lg-4 luxury-image mt-4 mt-lg-0">
						@if($single_cat->category_image)
							<img src="{{ asset('storage/'.$single_cat->category_image)}}"
								alt="{{$single_cat->name}}" />
						@else
							<img src="https://www.swiftdirectblinds.co.uk/media/wysiwyg/plp/kitchen_plp.jpg"
								alt="{{$single_cat->name}}" />
						@endif
                    </div>

                </div>
            </div>
        </section>
		@endif
		 <!--<div class="canvas-header d-flex d-xl-none">
				<span class="title">Filter</span>
				<span class="icon-close icon-close-popup close-filter"></span>
			</div>-->
			<!-- Filter Header (Sticky) -->
<div id="filter-header" class="filter-header">
    <div class="row w-100 align-items-center">
    <div class="col-xl-3">
        <div class="filter-header-left">
        <h6>Filter</h6>
        <span id="filter-count">({{ $allProductsCount }})</span>
    </div>
    </div>
    <div class="col-xl-3">
        <h3> @if(isset($single_cat) && !empty($single_cat))
			{{ $single_cat->name }}
		@endif


</h3>
    </div>
        <div class="col-xl-6 text-end padding_right padding_left">
        <div class="row">
         <div class="col-xl-10 col-lg-10 padding_right">
            <div class="filter-header-right">
            <div id="selected-filters" class="selected-filters"></div>
             </div>
        </div>  
        <div class="col-xl-2 col-lg-2 padding_right">
    <div class="filter-header-right">
    <button type="button" id="clear-filters" class="clear-filters-btn">
        Clear filters
    </button>
    </div>
        </div>
         </div>
        
        </div>
    </div>
    
     
 

</div>
            <!-- Filters Sidebar -->
            <div class="col-xl-3">
                <div id="mySidenav" class="sidenav">
                <!--<a href="javascript:void(0)" class="closebtn"><i class="bi bi-x-lg"></i></a>-->
                
                <div class="canvas-sidebar">
                <div class="canvas-header d-flex d-xl-none">
                <span class="title">Filter</span>
                <span class="icon-close icon-close-popup close-filter" onclick="closeNav()"></span>
              </div>
               </div>
                <div class="sidebar-filter">
				<div class="widget-facet">
                    <div class="facet-title text-xl fw-medium" data-bs-target="#productType"
                        data-bs-toggle="collapse" aria-expanded="true" aria-controls="productType">
                        <span>Categories</span>
                        <span class="icon icon-arrow-up"></span>
                    </div>
                    <div id="productType" class="collapse show">
                        <ul class="product-type-list">

                            {{-- All Products --}}
                            <li>
							

                               <a href="{{ url('products') }}"  class="type-btn {{ empty($single_cat) ? 'active' : '' }}">
                                    All Products
                                    <span>({{ $allProductsCount }})</span>
                                </a>
                            </li>

                            {{-- Category Tree --}}
                            @include('pages.product.category-tree', [
                                'categories' => $categories,
                                'level' => 1,
                            ])
                        </ul>
                    </div>

                </div>
                    @if(isset($colors))
                    <div class="widget-facet">
				 <div class="facet-title text-xl fw-medium" data-bs-target="#colorFilter"  data-bs-toggle="collapse" aria-expanded="false" aria-controls="productType">
                            <span>Color</span>
                            <span class="icon icon-arrow-up"></span>
                    </div>
                    <div id="colorFilter" class="collapse">
                        <div class="collapse-body filter-color-box" id="colorFilterBox">
                        <div class="visible-colors"></div>
                         <div class="hidden-colors" style="display:none;"></div>
                            @foreach($colors as $c)
<button class="filter-btn" data-group="color" data-filter="{{ $c->id }}">
    {{ $c->name }}
    <span class="color-count">({{ $c->products_count }})</span>
</button>                            @endforeach
                        </div>
                         <!-- 👇 ye button ZAROORI hai -->
                <button type="button" id="toggleColorsBtn" class="view-more-btn">Show More Colours +</button>
                    </div>
                   
                </div>
                @endif

                @if(isset($materials) && !empty($materials))
                <div class="widget-facet">
             <div class="facet-title text-xl fw-medium" data-bs-target="#materialFilter" data-bs-toggle="collapse" aria-expanded="false" aria-controls="productType">
                <span>Materials</span>
                <span class="icon icon-arrow-up"></span>
            </div>
                <div id="materialFilter" class="collapse">
                    <div class="collapse-body filter-size-box">
                        @foreach($materials as $s)
                            <button class="btn btn-outline-primary filter-btn" data-group="material" data-filter="{{$s}}">{{$s}}</button>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
			
@if(isset($slat_sizes) && count($slat_sizes) > 1)
            <div class="widget-facet">
				<div class="facet-title text-xl fw-medium" data-bs-target="#sizeFilter" data-bs-toggle="collapse" aria-expanded="false" aria-controls="productType">
					<span>Slat Sizes</span>
					<span class="icon icon-arrow-up"></span>
				</div>
                <div id="sizeFilter" class="collapse">
                    <div class="collapse-body filter-size-box">
                        @foreach($slat_sizes as $s)
                            <button class="btn btn-outline-primary filter-btn" data-group="size" data-filter="{{$s}}">{{$s}}</button>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
			
			@if(isset($opacity) && !empty($opacity))
                <div class="widget-facet">
             <div class="facet-title text-xl fw-medium" data-bs-target="#sizeFilter" data-bs-toggle="collapse" aria-expanded="false" aria-controls="productType">
                <span>Opacity</span>
                <span class="icon icon-arrow-up"></span>
            </div>
                <div id="sizeFilter" class="collapse">
                    <div class="collapse-body filter-size-box">
                        @foreach($materials as $s)
                            <button class="btn btn-outline-primary filter-btn" data-group="size" data-filter="{{$s->id}}">{{$s->name}} </button>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
			
                <div class="widget-facet">
             <div class="facet-title text-xl fw-medium" data-bs-target="#featuresFilter" data-bs-toggle="collapse" aria-expanded="false" aria-controls="productType">
                <span>Features</span>
                <span class="icon icon-arrow-up"></span>
            </div>
                <div id="featuresFilter" class="collapse">
                    <div class="collapse-body filter-size-box">
                            <button class="btn btn-outline-primary filter-btn" data-group="child_safety" data-filter="Y">Child Safety</button>
                            <button class="btn btn-outline-primary filter-btn" data-group="easy_wipe" data-filter="Y">Easy Wipe</button>
                            <button class="btn btn-outline-primary filter-btn" data-group="fire_resistant" data-filter="Y">Fire Resistant</button>
                            <button class="btn btn-outline-primary filter-btn" data-group="uv_resistant" data-filter="Y">UV Resistant</button>
                            <button class="btn btn-outline-primary filter-btn" data-group="low_voc" data-filter="Y">Low VOC</button>
                            <button class="btn btn-outline-primary filter-btn" data-group="recyclable" data-filter="Y">Recyclable</button>
							<button class="btn btn-outline-primary filter-btn" data-group="allergy_frendy" data-filter="Y">Allergy Friendly</button>

                    </div>
                </div>
            </div>
			@if(isset($properties) && !empty($properties))
                <div class="widget-facet">
             <div class="facet-title text-xl fw-medium" data-bs-target="#opacityFilter" data-bs-toggle="collapse" aria-expanded="false" aria-controls="productType">
                <span>Properties</span>
                <span class="icon icon-arrow-up"></span>
            </div>
                <div id="opacityFilter" class="collapse">
                    <div class="collapse-body filter-size-box">
                             @foreach($properties as $s)
                            <button class="btn btn-outline-primary filter-btn" data-group="fabric_properties" data-filter="{{$s}}">{{$s}}</button>
                        @endforeach
                    </div>
                </div>
            </div>
			@endif
        </div>
            </div>
        </div>

            <!-- Products List -->
            <div class="col-xl-9">
                <div class="mobile_product_filter_bar">
                <button type="button" class="tf-btn-filter d-flex d-xl-none" onclick="openNav()">
                <span class="icon icon-filter"></span><span class="text">Filter</span>
              </button>
                 
                </div>
                <div id="product-wrapper">
                    @include('pages.product.product-list', ['products' => $products])
                </div>
				<div id="infinite-loader" class="text-center my-4" style="display:none;">
					<span class="spinner-border text-primary"></span>
				</div>

            </div>

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

@endsection

@section('scripts')
<script>
/* ===========================
   GLOBAL STATE
=========================== */
let page = 1;               // 🔥 Laravel pagination starts at 1
let isLoading = false;
let canLoadMore = true;

let activeFilters = {
    color: 'all',
    size: 'all',
    material: 'all',
    child_safety: 'all',
    easy_wipe: 'all',
    fire_resistant: 'all',
    uv_resistant: 'all',
    low_voc: 'all',
    recyclable: 'all',
    fabric_properties: 'all'
};

/* ===========================
   BUILD QUERY PARAMS
=========================== */
function buildParams(pageNo) {
    const params = new URLSearchParams(activeFilters);
    params.set('page', pageNo);

  @if(isset($brand) && $brand)
    params.set('brand', '{{ $brand->slug }}');
@elseif(isset($single_cat) && $single_cat)
    params.set('category_id', '{{ $single_cat->slug }}');
@endif

    return params;
}

/* ===========================
   FETCH PRODUCTS (AJAX)
=========================== */
function fetchFilteredProducts(pageNo = 1) {

    if (isLoading) return;

    isLoading = true;
    $('#infinite-loader').fadeIn();

    fetch("{{ route('products.filter') }}?" + buildParams(pageNo).toString(), {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(res => res.json())
    .then(data => {

        // First page → replace
        if (pageNo === 1) {
            $('#product-wrapper').html(data.html);
            canLoadMore = true;
        } 
        // Next pages → append
        else {
            if (!data.html || data.html.trim() === '') {
                canLoadMore = false;
                return;
            }
            $('.row.g-4').append(data.html);
        }

        $('#filter-count').text(`(${data.count})`);
        isLoading = false;
        $('#infinite-loader').fadeOut();
    })
    .catch(() => {
        isLoading = false;
        $('#infinite-loader').fadeOut();
    });
}

/* ===========================
   INFINITE SCROLL
=========================== */
$(window).off('scroll').on('scroll', function () {

    if (isLoading || !canLoadMore) return;

    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 300) {
        page++;                 // 🔥 page 2, 3, 4...
        fetchFilteredProducts(page);
    }
});

/* ===========================
   FILTER BUTTONS
=========================== */
document.querySelectorAll('.filter-btn').forEach(btn => {
    btn.addEventListener('click', function () {

        const group = this.dataset.group;
        const value = this.dataset.filter;

        activeFilters[group] = value;

        // 🔥 RESET STATE
        page = 1;
        canLoadMore = true;
        isLoading = false;

        document.querySelectorAll(`.filter-btn[data-group="${group}"]`)
            .forEach(b => b.classList.remove('active'));
        this.classList.add('active');

        fetchFilteredProducts(1);
        updateSelectedFilters();
    });
});

/* ===========================
   SELECTED FILTER CHIPS
=========================== */
function updateSelectedFilters() {
    const container = document.getElementById('selected-filters');
    container.innerHTML = '';

    Object.keys(activeFilters).forEach(group => {
        if (activeFilters[group] !== 'all') {
            const btn = document.querySelector(
                `.filter-btn[data-group="${group}"][data-filter="${activeFilters[group]}"]`
            );
            if (!btn) return;

            const chip = document.createElement('div');
            chip.className = 'selected-filter-chip';
            chip.innerHTML = `${btn.innerText} <span data-group="${group}">&times;</span>`;
            container.appendChild(chip);
        }
    });
}

/* ===========================
   REMOVE FILTER CHIP
=========================== */
document.addEventListener('click', function (e) {
    const closeBtn = e.target.closest('.selected-filter-chip span');
    if (!closeBtn) return;

    const group = closeBtn.dataset.group;

    // Reset filter state
    activeFilters[group] = 'all';
    page = 1;
    canLoadMore = true;

    // 🔥 REMOVE active class from buttons of this group
    document.querySelectorAll(`.filter-btn[data-group="${group}"]`)
        .forEach(btn => btn.classList.remove('active'));

    updateSelectedFilters();
    fetchFilteredProducts(1);
});
</script>
<script>
function openNav() {
  const nav = document.getElementById("mySidenav");
  nav.style.display = "block";

  // next frame me animation trigger
  requestAnimationFrame(() => {
    nav.style.transform = "translateX(0)";
  });
}

function closeNav() {
  const nav = document.getElementById("mySidenav");
  nav.style.transform = "translateX(-100%)";

  // animation complete hone ke baad hide
  setTimeout(() => {
    nav.style.display = "none";
  }, 350); // same as CSS transition time
}
</script>

<!--==========class add on color button open js=========-->
<script>	
document.querySelectorAll('.filter-btn[data-group="color"]').forEach(btn => {

    const colorName = btn.childNodes[0].textContent.trim().toLowerCase();

    const span = document.createElement('span');
    span.className = `color-dot color-${colorName}`;
    span.title = colorName;

    // Preserve existing text (name + count)
    const text = btn.innerHTML;

    btn.innerHTML = '';
    btn.appendChild(span);
    btn.insertAdjacentHTML('beforeend', ' ' + text);
});

</script>
<!--==========class add on color button close js=========-->

<!--==========button limitation show and view more button color button close js=========-->
<script>
document.addEventListener('DOMContentLoaded', function () {

    const box = document.getElementById('colorFilterBox');
    const toggleBtn = document.getElementById('toggleColorsBtn');

    if (!box || !toggleBtn) return;

    const allButtons = Array.from(box.querySelectorAll('.filter-btn'));
    const visibleBox = box.querySelector('.visible-colors');
    const hiddenBox = box.querySelector('.hidden-colors');

    const initialCount = 15;

    // Move buttons into respective divs
    allButtons.forEach((btn, index) => {
        if (index < initialCount) {
            visibleBox.appendChild(btn);
        } else {
            hiddenBox.appendChild(btn);
        }
    });

    // Show / Hide button logic
    toggleBtn.style.display = allButtons.length > initialCount
        ? 'inline-block'
        : 'none';

    toggleBtn.addEventListener('click', function () {

        const isHiddenVisible = hiddenBox.style.display === 'block';

        if (isHiddenVisible) {
            hiddenBox.style.display = 'none';
            toggleBtn.innerText = 'Show More Colours +';
        } else {
            hiddenBox.style.display = 'block';
            toggleBtn.innerText = 'Show Less Colours −';
        }
    });

});
</script>

<!--==========button limitation show and view more button color button close js=========-->


@endsection