@extends('layouts.new-layout')
@section('title', 'Prom & Bridal Dress Appointments | Alterations & Tuxedo Rentals in Prince George, BC')

@section('content')


<!-- ============================================-->
<section class="pt-5 pb-5 ">
    <div class="container">
        <div class="row">
           
    <div class="col-md-12" data-aos="fade-up"
    data-aos-anchor-placement="top-bottom">
        <div id="filtered-items">
            @if($items)
            @include('all-items', ['items' => $items])
            @endif
        </div>
    </div>
    </div>
</section>
<!-- <section> close ============================-->

<!-- ============================================-->
<style>
.line1 {
    background: #ff705c;
    width: 90px;
    height: 5px;
    margin-bottom: 0px;
    display: inline-block;
}

.image-over {
    position: absolute;
    top: 30px;
    z-index: 99;
    left: 15px;
}

.imm:hover .main-text-img p,
.imm:hover .main-text-img h3 {
    color: #fff
}

.imm:after {
    content: '';
    background: linear-gradient(180deg, rgb(255 255 255 / 92%), transparent);
    transition: all 1.5s;
    position: absolute;
    z-index: 9;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 1.5s;
}

.imm.active .main-text-img p,
.imm.active .main-text-img h3 {
    color: #fff
}

.imm.active:after {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgb(0 0 0 / 21%), rgb(0 0 0 / 21%));
    position: absolute;
    left: 0;
}

.imm:hover:after {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgb(0 0 0 / 21%), rgb(0 0 0 / 21%));
    position: absolute;
    left: 0;
}

.imm {
    overflow: hidden;
}

.imm img {
    transition: all 1.5s;
    /* filter: grayscale(100%); */
}

.imm:hover img {
    transform: scale(1.1);
    /* filter: grayscale(0%); */
}

.immb .imm img {
    transition: all 1.5s;
    /* filter: grayscale(100%); */
}

.immb:hover .imm img {
    transform: scale(1.1);
    /* filter: grayscale(0%); */
}

.immb:hover .imm:after {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgb(0 0 0 / 21%), rgb(0 0 0 / 21%));
    position: absolute;
    left: 0;
}

.immb:hover .imm .main-text-img p,
.immb:hover .imm .main-text-img h3 {
    color: #fff;
}

.imm.active img {
    transform: scale(1.1);
    /* filter: grayscale(0%); */
}

.main-banner {
    background: url(/new-assets/img/gallery/banner-5.jpg);
    padding-top: 100px;
    background-position: center;
}
</style>
<!-- jQuery for Filter Functionality -->
<!-- <script>
    $(function() {
        // Price Range Slider
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 1000, // Adjust as per requirement
            values: [100, 500], // Default values
            slide: function(event, ui) {
                $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
            },
            change: function(event, ui) {
                filterProducts(); // Call filter function when price range changes
            }
        });

        $("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));

        // Handle filter change for category and brand
        $('.category-filter, .brand-filter').on('change', function() {
            filterProducts(); // Call filter function on checkbox change
        });

        // AJAX filter function to get filtered products
        function filterProducts() {
            var selectedCategories = [];
            var selectedBrands = [];
            var minPrice = $("#slider-range").slider("values", 0);
            var maxPrice = $("#slider-range").slider("values", 1);

            // Get selected categories
            $('.category-filter:checked').each(function() {
                selectedCategories.push($(this).val());
            });

            // Get selected brands
            $('.brand-filter:checked').each(function() {
                selectedBrands.push($(this).val());
            });

            // AJAX request to filter products
            $.ajax({
                url: '{{ route("filter.products") }}',
                method: 'GET',
                data: {
                    categories: selectedCategories,
                    brands: selectedBrands,
                    min_price: minPrice,
                    max_price: maxPrice
                },
                success: function(response) {
                    $('#filtered-items').html(response); // Update filtered items
                }
            });
        }
    });
</script>
<script>
   $(function() {
       $("#slider-range").slider({
           range: true,
           min: 100,
           max: 25000,
           values: [10, 25000],
           slide: function(event, ui) {
               $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
           }
       });
       $("#amount").val(
           "$" +
           $("#slider-range").slider("values", 0) +
           " - $" +
           $("#slider-range").slider("values", 1)
       );
   });
</script> -->

<!-- jQuery for Filter Functionality -->
<script>
function filterProducts() {
    // var selectedCategories = [];
    // var selectedBrands = [];
    var selectedCategory = $('input[name="category"]:checked').val();
    var selectedSubcategory = $('input[name="subcategory"]:checked').val();
    var selectedBrand = $('input[name="brand"]:checked').val();
    var minPrice = $("#slider-range").slider("values", 0);
    var maxPrice = $("#slider-range").slider("values", 1);
    var minSeats = $("#seats-range").slider("values", 0);
    var maxSeats = $("#seats-range").slider("values", 1);
    //alert(selectedSubcategory);
    // AJAX request to filter products
    $.ajax({
        url: '{{ route("filter.products") }}',
        method: 'GET',
        data: {
            category_id: selectedCategory,
            subcategory: selectedSubcategory,
            brand_id: selectedBrand,
            min_price: minPrice,
            max_price: maxPrice,
            min_seats: minSeats,
            max_seats: maxSeats
        },
        success: function(response) {
            //alert('kk');
            $('#filtered-items').html(response);
        }
    });
}

// When a subcategory is selected
$(document).on('change', 'input[name="subcategory"]', function() {
    filterProducts(); // Call the filter function whenever a subcategory is selected
});
$(function() {
    // Price Range Slider
    $("#slider-range").slider({
        range: true,
        min: 1,
        max: 10000,
        values: [1, 10000],
        slide: function(event, ui) {
            $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
        },
        change: function(event, ui) {
            filterProducts();
        }
    });
    $("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values",
        1));
    // Seats Range Slider
    $("#seats-range").slider({
        range: true,
        min: 1,
        max: 12,
        values: [1, 12],
        slide: function(event, ui) {
            $("#seats-amount").val(ui.values[0] + " - " + ui.values[1] + " Seats");
        },
        change: function(event, ui) {
            filterProducts();
        }
    });
    $("#seats-amount").val($("#seats-range").slider("values", 0) + " - " + $("#seats-range").slider("values",
        1) + " Seats");
    // Handle filter change for category and brand
    // $('.category-filter, .brand-filter').on('change', function() {
    //     filterProducts();
    // });
    const urlParams = new URLSearchParams(window.location.search);
    const categoryParam = urlParams.get('category');
    const subcategoryParam = urlParams.get('subcategory');

    // Function to filter products and select the subcategory
    function selectSubcategoryAfterCategory() {
        // Check for the subcategory only after the category selection
       
            $('input[name="subcategory"]').each(function() {
                const subLabelText = $(this).next('label').text().trim();
                // Match specific subcategory values under Rental Products
                if (subcategoryParam === 'Hot-tubs' && subLabelText === "Hot tubs") {
                    $(this).prop('checked', true).trigger('change'); // Trigger change for subcategory
                    filterProducts(); // Call filter after selecting subcategory
                }
                if (subcategoryParam === 'Cold-Plunges' && subLabelText === "Cold Plunges") {
                    $(this).prop('checked', true).trigger('change'); // Trigger change for subcategory
                    filterProducts(); // Call filter after selecting subcategory
                }
                if (subcategoryParam === 'Hot-tub-accessories' && subLabelText === "Hot tub accessories") {
                    $(this).prop('checked', true).trigger('change'); // Trigger change for subcategory
                    filterProducts(); // Call filter after selecting subcategory
                }
                // Add more subcategories as needed
            });
      
    }

    // Handle 'rental' category
    if (categoryParam === 'rental') {
        $('input[name="category"]').each(function() {
            const labelText = $(this).next('label').text().trim();

            // Select Rental Products category
            if (labelText === "Rental Products") {
                $(this).prop('checked', true).trigger('change'); // Check the category
                
                // Fetch the subcategories based on the selected category
                fetchSubcategories($(this).val(), function() {
                    // Call the function to handle subcategory selection after subcategories are loaded
                    if (subcategoryParam) {
                    selectSubcategoryAfterCategory();
                    }
                    else{
                        filterProducts();
                    }
                });
            }
        });
    } 
    // Handle 'softtub' category (without subcategories)
    else if (categoryParam === 'softtub') {
        $('input[name="category"]').each(function() {
            const labelText = $(this).next('label').text().trim();

            // Select Softubs category
            if (labelText === "Softubs") {
                $(this).prop('checked', true).trigger('change');
                filterProducts(); // Call filter after selecting category
            }
        });
    }

    // When a category is selected
    $('input[name="category"]').on('change', function() {
        var categoryId = $(this).val();

        // Fetch the subcategories based on the selected category
        fetchSubcategories(categoryId);
    });

    // Function to fetch subcategories
    function fetchSubcategories(categoryId, callback) {
        $.ajax({
            url: '{{ route("subcategories.fetch") }}', // Define this route in your web.php
            method: 'GET',
            data: {
                category_id: categoryId
            },
            success: function(response) {
                // Clear the subcategory container
                $('#subcategory-container').empty();
                // Append the subcategories
                $.each(response.subcategories, function(index, subcategory) {
                    $('#subcategory-container').append(
                        '<div class="form-check m-3 gray1">' +
                        '<input name="subcategory" class="form-check-input subcategory-filter" type="radio" value="' +
                        subcategory.id + '" id="subcategory' + subcategory.id + '">' +
                        '<label class="form-check-label" for="subcategory' + subcategory.id + '">' +
                        subcategory.name +
                        '</label>' +
                        '</div>'
                    );
                });
                // Call the callback if provided
                if (callback) {
                    callback();
                }
            },
            error: function(xhr, status, error) {
                console.error("Error fetching subcategories:", error);
            }
        });
    }
    $('input[name="category"], input[name="brand"]').on('change', function() {
        //alert('nk');
        filterProducts();
    });

    // Clear Filters Button Click
    $('#clear-filters').on('click', function() {
        // Reset radio buttons
        $('input[name="category"], input[name="brand"]').prop('checked', false);
        // Reset price and seats sliders
        $("#slider-range").slider("values", [1, 10000]);
        $("#seats-range").slider("values", [1, 12]);
        $("#amount").val("$" + 1 + " - $" + 10000);
        $("#seats-amount").val("1 - 12 Seats");
        // Trigger the filter to show all products
        filterProducts();
    });

});
</script>
@endsection