@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>
                            <button class="luxury-btn">Real Wooden Blinds</button>
                            <button class="luxury-btn">Faux Wooden Blinds</button>
                            <button class="luxury-btn">White Wooden Blinds</button>
                            <button class="luxury-btn">Next Day Delivery Blinds</button>
                        </div>
                    </div>

                    <!-- Right Image -->
                    <div class="col-lg-4 luxury-image mt-4 mt-lg-0">
					@if($single_cat->image)
						 <img src="https://famepixelsoft.site/decora/storage/app/public/{{$single_cat->image}}"
                            alt="Wooden Blinds" />
						@else
                        <img src="https://www.swiftdirectblinds.co.uk/media/wysiwyg/plp/kitchen_plp.jpg"
                            alt="Wooden Blinds" />
							@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>-->
			

            <!-- 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 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="true" aria-controls="productType">
                            <span>Color</span>
                            <span class="icon icon-arrow-up"></span>
                    </div>
                    <div id="colorFilter" class="collapse show">
                        <div class="collapse-body filter-color-box">
                            @foreach($colors as $c)
                                <button class="btn btn-outline-primary filter-btn" data-group="color" data-filter="{{$c->id}}">{{$c->name}}</button>
                            @endforeach
                        </div>
                    </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="true" aria-controls="productType">
                <span>Materials</span>
                <span class="icon icon-arrow-up"></span>
            </div>
                <div id="materialFilter" class="collapse show">
                    <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->id}}">{{$s->name}}</button>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
			
			@if(isset($slat_sizes) && !empty($slat_sizes))
            <div class="widget-facet">
				<div class="facet-title text-xl fw-medium" data-bs-target="#sizeFilter" data-bs-toggle="collapse" aria-expanded="true" aria-controls="productType">
					<span>Slat Sizes</span>
					<span class="icon icon-arrow-up"></span>
				</div>
                <div id="sizeFilter" class="collapse show">
                    <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="true" aria-controls="productType">
                <span>Opacity</span>
                <span class="icon icon-arrow-up"></span>
            </div>
                <div id="sizeFilter" class="collapse show">
                    <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="true" aria-controls="productType">
                <span>Features</span>
                <span class="icon icon-arrow-up"></span>
            </div>
                <div id="featuresFilter" class="collapse show">
                    <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="true" aria-controls="productType">
                <span>Properties</span>
                <span class="icon icon-arrow-up"></span>
            </div>
                <div id="featuresFilter" class="collapse show">
                    <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>

        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
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' };

document.querySelectorAll('.filter-btn').forEach(btn => {
    btn.addEventListener('click', function () {
        const group = this.dataset.group;
        const value = this.dataset.filter;

        activeFilters[group] = value;

        // Highlight active button
        this.closest('.collapse-body').querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');

        fetchFilteredProducts();
    });
});

function fetchFilteredProducts(page = 1) {
    const params = new URLSearchParams(activeFilters);
    params.append('page', page);

    fetch("{{ route('products.filter') }}?" + params.toString(), {
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(res => res.text())
    .then(html => {
        document.getElementById('product-wrapper').innerHTML = html;
        attachPaginationEvents();
    });
}

function attachPaginationEvents() {
    document.querySelectorAll('#product-wrapper .pagination a').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const page = new URL(this.href).searchParams.get('page');
            fetchFilteredProducts(page);
        });
    });
}

// Initial setup
attachPaginationEvents();

function openNav() {
  const sideNav = document.getElementById("mySidenav");
  sideNav.style.width = "300px";
  sideNav.style.display = "block";
}

function closeNav() {
  const sideNav = document.getElementById("mySidenav");
  sideNav.style.width = "0";
  sideNav.style.display = "none";
}

function openNav() {
  document.getElementById("mySidenav").style.transform = "translateX(0)";
}

function closeNav() {
  document.getElementById("mySidenav").style.transform = "translateX(-100%)";
}
</script>

@endsection