@include('layouts.header')

        <div class="page-banner-section section bg-image">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <div class="page-banner text-start">
                            <!--<h2>Shop</h2>-->
                            <ul class="page-breadcrumb">
                                <li><a href="javascript:void(0)">Home</a></li>

                                @if(request('child_cat'))
                                <li><a href="javascript:void(0)">{{ $category->name . '/' .  ucwords(str_replace('-', ' ', request('sub_cat'))) . '/' . ucwords(str_replace('-', ' ', request('child_cat'))) }}</a></li>
                                @elseif(request('sub_cat'))
                                <li><a href="javascript:void(0)">{{ request('sub_cat') ? $category->name . '/' . ucwords(str_replace('-', ' ', request('sub_cat'))) : ($category->name ?? '') }}</a></li>
                                @else
                                <li><a href="javascript:void(0)">{{ $category->name ?? ''}}</a></li>
                                @endif

                            </ul>
                        </div>

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


        <!-- Page Banner Section Start -->
        <!--<div class="page-banner-section section bg-image" data-bg="assets/images/bg/breadcrumb.png">-->
        <!--    <div class="container">-->
        <!--        <div class="row">-->
        <!--            <div class="col">-->

        <!--                <div class="page-banner text-start">-->
        <!--                    <h2>Shop</h2>-->
        <!--                    <ul class="page-breadcrumb">-->
        <!--                        <li><a href="index.php">Home</a></li>-->
        <!--                        <li>Shop</li>-->
        <!--                    </ul>-->
        <!--                </div>-->

        <!--            </div>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--</div>-->
        <!-- Page Banner Section End -->
        <!-- Shop Section Start -->
        <div class="shop-section section pt-0 pt-lg-0 pt-md-30 pt-sm-0 pt-xs-0  pb-70 pb-lg-0 pb-md-40 pb-sm-10 pb-xs-50">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="shop-area">
                            <div class="row">
                                <div class="col-12">
                                    <div class="category_section product__category_section section  pt-0 mt-1 pt-lg-0 pt-md-10 pt-sm-10 pt-xs-0 pb-10 pb-lg-10 pb-md-10 pb-sm-15 pb-xs-5">
                                    <div class="container">
                                        <div class="row">
                                             <div class="col-12 mb-4">
                                                <div class="section-title cate__heading text-left mb-1">
                                                    <h5 class="mb-0">Wall Accents & Hangings</h5>
                                                    <ul>
                                                        <li>220 Products</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row product__category">
                                            <div class="col-2">
                                                <div class="cate-image text-center  mb-30">
                                                    <a href="javascript:void(0)">
                                                        <img src="{{ asset('assets/images/banner/02.webp') }}" alt="">
                                                        <p class="mb-0 mt-2">World Maps</p>
                                                    </a>
                                                </div>
                                            </div>

                                             <div class="col-2">
                                                <div class="cate-image text-center mb-30">
                                                    <a href="javascript:void(0)">
                                                        <img src="{{ asset('assets/images/banner/03.webp') }}" alt="">
                                                         <p class="mb-0 mt-2">Wall Clocks</p>
                                                    </a>
                                                </div>
                                            </div>

                                             <div class="col-2">
                                                <div class="cate-image text-center mb-30">
                                                    <a href="javascript:void(0)">
                                                        <img src="{{ asset('assets/images/banner/004.webp') }}" alt="">
                                                        <p class="mb-0 mt-2">Lamps & Mirrors</p>
                                                    </a>
                                                </div>
                                            </div>

                                             <div class="col-2">
                                                <div class="cate-image text-center mb-30">
                                                    <a href="javascript:void(0)">
                                                        <img src="{{ asset('assets/images/banner/5.png') }}" alt="">
                                                           <p class="mb-0 mt-2">Wall Decors</p>
                                                    </a>
                                                </div>
                                            </div>

                                             <div class="col-2">
                                                <div class="cate-image text-center mb-30">
                                                    <a href="javascript:void(0)">
                                                        <img src="{{ asset('assets/images/banner/006.webp') }}" alt="">
                                                           <p class="mb-0 mt-2">Photo Frames</p>
                                                    </a>
                                                </div>
                                            </div>

                                             <div class="col-2">
                                                <div class="cate-image text-center mb-30">
                                                    <a href="javascript:void(0)">
                                                        <img src="{{ asset('assets/images/banner/007.webp') }}" alt="">
                                                           <p class="mb-0 mt-2">Giftings</p>
                                                    </a>
                                                </div>
                                            </div>
                                             <div class="col-2">
                                                <div class="cate-image text-center mb-30">
                                                    <a href="javascript:void(0)">
                                                        <img src="{{ asset('assets/images/banner/004.webp') }}" alt="">
                                                        <p class="mb-0 mt-2">Lamps & Mirrors</p>
                                                    </a>
                                                </div>
                                            </div>

                                             <div class="col-2">
                                                <div class="cate-image text-center mb-30">
                                                    <a href="javascript:void(0)">
                                                        <img src="{{ asset('assets/images/banner/03.webp') }}" alt="">
                                                         <p class="mb-0 mt-2">Wall Clocks</p>
                                                    </a>
                                                </div>
                                            </div>

                                             <div class="col-2">
                                                <div class="cate-image text-center  mb-30">
                                                    <a href="javascript:void(0)">
                                                        <img src="{{ asset('assets/images/banner/02.webp') }}" alt="">
                                                        <p class="mb-0 mt-2">World Maps</p>
                                                    </a>
                                                </div>
                                            </div>
                                             <div class="col-2">
                                                <div class="cate-image text-center mb-30">
                                                    <a href="javascript:void(0)">
                                                        <img src="{{ asset('assets/images/banner/006.webp') }}" alt="">
                                                           <p class="mb-0 mt-2">Photo Frames</p>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <div class="cate-image text-center mb-30">
                                                    <a href="javascript:void(0)">
                                                        <img src="{{ asset('assets/images/banner/004.webp') }}" alt="">
                                                        <p class="mb-0 mt-2">Lamps & Mirrors</p>
                                                    </a>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                </div>
                                <div class="col-12">
                                    <!-- Grid & List View Start -->
                                    <div class="shop-topbar-wrapper d-flex justify-content-between align-items-center">
                                        <div class="grid-list-option d-flex">
                                            <ul class="nav">
                                                <li>
                                                    <a class="active show" data-bs-toggle="tab" href="#grid"><i class="fa fa-th"></i></a>
                                                </li>
                                            </ul>
                                            <p>Showing 1–9 of 41 results</p>
                                        </div>
                                        <!--Toolbar Short Area Start-->
                                        <div class="toolbar-short-area d-md-flex align-items-center">
                                            <div class="sidebar__filter"><a href="#" class="open_filter"><i class="fa fa-filter" aria-hidden="true"></i>  Filter </a></div>
                                            <div class="toolbar-shorter ">
                                                <label>Sort By:</label>
                                                <select class="wide js-filter" name="sort">
                                                    <option data-display="Select">Nothing</option>

                                                    <option value="low_high">Price, low to high</option>
                                                    <option value="high_low">Price, high to low</option>
                                                    <option value="old_new">Date, old to new</option>
                                                    <option value="new_old">Date, new to old</option>
                                                </select>
                                            </div>
                                        </div>
                                        <!--Toolbar Short Area End-->
                                    </div>
                                    <!-- Grid & List View End -->
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-3 order-lg-1 order-2 pe-4 shop_sidebar">
                                    <div class="sidebar_overlay"></div>
                                    <div class="shop_sidebar_header">
                                        <a href="javascript:void(0)" class="filter_close"><i class="fa fa-times"></i></a>
                                    </div>

                                    <!-- Single Sidebar Start  -->
                                    <div class="common-sidebar-widget">
                                        <h3 class="sidebar-title">Filter by price</h3>
                                        <div class="sidebar-price">
                                            <div id="price-range" class="mb-20"></div>
                                            <button type="button" class="btn" id="price-filter-btn">Filter</button>
                                            <input type="text" id="price-amount" class="price-amount" readonly>
                                        </div>
                                    </div>

                                                                    
                                    <!-- Single Sidebar End  -->
                                    <!-- Single Sidebar Start  -->
                                    <div class="common-sidebar-widget">
                                        <h3 class="sidebar-title">Filter by Color</h3>
                                        <div class="color-check search-field multi-select accordion-body px-0 pb-0 check-label">
                                            @if($colors)
                                            @foreach($colors as $color)
                                            <label> 
                                                <input type="checkbox" class="js-filter" data-color = "{{ $color }}"/>   {{ ucwords($color) ?? '' }} 
                                            </label>
                                            @endforeach
                                            @endif
                                            
                                        </div>
                                    </div>
                                    <div class="common-sidebar-widget">
                                        <h3 class="sidebar-title">Filter by Size</h3>
                                       
                                        <div class="size-check search-field multi-select accordion-body px-0 pb-0 check-label">
                                            @if($sizes)
                                            @foreach($sizes as $size)
                                            <label> 
                                                <input type="checkbox" class="js-filter" data-size = "{{ $size }}"/>   {{ ucwords($size) ?? '' }} 
                                            </label>
                                            @endforeach
                                            @endif
                                           
                                        </div>
                                    </div>
                                    <!-- Single Sidebar End  -->
                                    <!-- Single Sidebar Start  -->
                                    <div class="common-sidebar-widget">
                                        <h3 class="sidebar-title">Product tags</h3>
                                        <ul class="sidebar-tag">
                                            <li><a href="#">blouse</a></li>
                                            <li><a href="#">clothes</a></li>
                                            <li><a href="#">fashion</a></li>
                                            <li><a href="#">handbag</a></li>
                                            <li><a href="#">laptop</a></li>
                                        </ul>
                                    </div>
                                    <!-- Single Sidebar End  -->
                                </div>
                                <div class="col-lg-9 order-lg-2 order-1" id = "data-load">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="shop-product">
                                                <div id="myTabContent-2" class="tab-content">
                                                    <div id="grid" class="tab-pane fade active show">
                                                        <div class="product-grid-view">
                                                            <div class="row">
                                                                @if($product->isEmpty())
                                                                <div class="product-card-wrapper trans">
                                                                    <h3>No data found.</h3>
                                                                </div>
                                                                @else
                                                                @foreach($product as $item)
                                                                <div class="col-xxl-3 col-xl-3 col-lg-4 col-md-4 col-sm-6 col-6">
                                                                    <div class="single-grid-product mb-40">
                                                                        <div class="product-image">
                                                                            @php
                                                                                $images = json_decode($item->bulk_images, true); // true = array
                                                                            @endphp
                                                                            <a href="{{ route('product.details') }}">
                                                                               <!-- <img src="{{ asset('assets/images/product/dec-pro-2.webp') }}" class="img-fluid" alt=""> -->
                                                                               <img src="{{ asset('uploads/products/' . $item->featured_image) }}" alt="{{ $item->name ?? ''}}" height="210px" width="210px">
                                                                                @if(!empty($images) && isset($images[0]))
                                                                                    <img src="{{ asset('uploads/products/' . $images[0]) }}"
                                                                                        height="210px"
                                                                                        width="210px"
                                                                                        alt="{{ $images[0] }}">
                                                                                @endif

                                                                            </a>
                                                                        </div>
                                                                        <div class="product-content">
                                                                            <h3 class="title"> <a href="{{ route('product.details') }}">{{ ucwords($item->name ?? '')}}</a></h3>
                                                                            <div class="d-flex justify-content-between">
                                                                                <p class="product-price">
                                                                                    @if(isset($item->selling_price) && $item->selling_price != 0)
                                                                                    <span class="discounted-price">₹{{ $item->selling_price ?? ''}}</span>
                                                                                    <span class="main-price discounted">₹{{ $item->mrp ?? ''}}</span></p>
                                                                                    <span class="grid-product__price--savings">
                                                                                        save {{ rtrim(rtrim(number_format($item->discount, 2, '.', ''), '0'), '.') }}%
                                                                                    </span>
                                                                                    @else
                                                                                    <span class="discounted-price">Rs. {{ $item->mrp ?? ''}}</span>
                                                                                    @endif
                                                                                </p>
                                                                            </div>
                                                                            <a href="javascript:void(0)" class="btn_cart">Add to Cart</a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                @endforeach
                                                                @endif

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

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @if(!$product->isEmpty())
                                    <div class="row mb-30 mb-sm-40 mb-xs-30 mt-4">
                                        <div class="col">
                                            <ul class="page-pagination">
                                                <li><a href="{{ $product->previousPageUrl() }}">PREV</a></li>
                                                 @foreach ($product->getUrlRange(1, $product->lastPage()) as $page => $url)
                                                <li class="page-item">
                                                    <a class="btn-link px-1 mx-2 {{ $page == $product->currentPage() ? 'btn-link_active' : '' }}"
                                                    href="{{ $url }}">{{ $page }}</a>
                                                </li>
                                                @endforeach
                                                <li><a href="{{ $product->nextPageUrl() }}">Next</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Shop Section End -->

@include('layouts.footer')

<script>
$(document).ready(function () {
    let slug = "{{ $category->slug }}";

    @if(request('child_cat'))
        slug = "{{ $category->slug }}/{{ request('sub_cat') }}/{{ request('child_cat') }}";
    @elseif(request('sub_cat'))
        slug = "{{ $category->slug }}/{{ request('sub_cat') }}";
    @endif

    // ✅ Init slider
    $("#price-range").slider({
        range: true,
        min: {{ $min_price }},
        max: {{ $max_price }},
        values: [{{ request('min_price', $min_price) }}, {{ request('max_price', $max_price) }}],
        slide: function(event, ui) {
            $("#price-amount").val('Rs' + ui.values[0] + ' - Rs' + ui.values[1]);
        }
    });

    // Show initial values
    $("#price-amount").val(
        'Rs.' + $("#price-range").slider("values", 0) +
        ' - Rs.' + $("#price-range").slider("values", 1)
    );

    // ✅ Apply filters function
    function applyFilters() {
        let selectedColors = [];
        let selectedSizes = [];

        $('.js-filter:checked').each(function () {
            let color = $(this).data('color');
            let size = $(this).data('size');

            if (color) selectedColors.push(color);
            if (size) selectedSizes.push(size);
        });

        let sort = $('select[name="sort"]').val();

        // ✅ Price from slider
        let minPrice = $("#price-range").slider("values", 0);
        let maxPrice = $("#price-range").slider("values", 1);

        const urlParams = new URLSearchParams();
        if (selectedColors.length) urlParams.set('color', selectedColors.join(','));
        if (selectedSizes.length) urlParams.set('size', selectedSizes.join(','));
        if (sort) urlParams.set('sort', sort);
        if (minPrice && maxPrice) {
            urlParams.set('min_price', minPrice);
            urlParams.set('max_price', maxPrice);
        }

        const BASE_URL = "{{ env('APP_URL') }}";
        let url = `${BASE_URL}/collections/${slug}?${urlParams.toString()}`;

        $.ajax({
            url: url,
            type: 'GET',
            beforeSend: function () {
                $('#data-load').html(`
                    <div id="loading" class="text-center my-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                `);
            },
            success: function (res) {
                let html = $(res).find('#data-load').html();
                $('#data-load').html(html);
                window.history.pushState({}, '', url);
            },
            error: function () {
                alert('Failed to load filtered products.');
            }
        });
    }

    // ✅ Handlers
    $('.js-filter').on('change', function () {
        applyFilters();
    });

    $('select[name="sort"]').on('change', function () {
        applyFilters();
    });

    // ✅ Filter button click
    $('#price-filter-btn').on('click', function () {
        applyFilters();
    });
});
</script>