{{ header }}
<!-- BREADCRUMB AREA START -->
<script type="text/javascript">
    window.filter_url = "{{filter_url}}&filter={{filter}}";
    function updatefilterurl(obj) {
        if (jQuery(obj).val()) {
            window.filter_url = "{{filter_url}}&filter=" + jQuery(obj).val();
        } else {
            window.filter_url = "{{filter_url}}";
        }
    }

    function submitsearch() {
        window.location = window.filter_url;
    }
</script>
<style type="text/css">
    ul.pagination {
        text-align: end;
    }

    ul.pagination a {
        border: none !important;

    }

    .ltn__pagination ul li a {
        height: 28px;
        width: 28px;
        line-height: 26px;
    }

    .slick-list.draggable {
        width: 1010px;
        margin: 0 auto;
    }

    .ltn__pagination ul li {
        margin-top: 0;
    }

    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -7px;
        left: -1px;
        position: relative;
        background-color: #ffb713;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

    button.btn-outline-secondary.ser {
        background-color: #C15B27;
        font-size: 20px;
        margin-right: 0px;
        line-height: 0px;
        color: #fff;
        position: absolute;
        right: 0;
        top: 50%;
        z-index: 1111;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        height: 39px;
        padding: 0 15px;
    }

    .ltn__shop-options .short-by .nice-select {
        border: 1px solid #c15b2754;
        height: 40px;
        line-height: 37px;
        max-width: 174px;
        min-width: 174px;
    }

    .showing-product-number span {
        font-size: 16px;
    }

    @media (max-width: 425px) {

        .ltn__shop-options .short-by .nice-select,
        .category_search_in {
            padding: 0 10px !important;
            min-width: 146px;
            font-size: 12px;
        }

        .ltn__shop-options .short-by .nice-select {
            min-width: 146px;
        }
    }

    @media (max-width: 420px) {
        .category_search_in {
            padding: 0 20px;
            font-size: 13px !important;
        }
    }

    @media (max-width: 767px) {
        .container {
            max-width: 98%;
        }
    }

    @media (max-width: 375px) {
        .ltn__shop-options.mb-3.col-12.p-0.justify-content-end.justify-content-between.justify-content-lg-end.justify-content-md-end.d-flex {
            flex-direction: column;
        }

        .mr-2.position-sticky {
            margin-bottom: 8px;
        }

        .cate_title_div {
            width: 299px !important;
        }
    }
</style>
<br><br>
<!-- <div class="ltn__breadcrumb-area ltn__breadcrumb-area-2 ltn__breadcrumb-color-white bg-overlay-theme-black-90 bg-image plr--9---" data-bg="{{ base }}catalog/view/theme/vb/img/banner/B1.png">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="ltn__breadcrumb-inner ltn__breadcrumb-inner-2 justify-content-between">
                    <div class="section-title-area ltn__section-title-2">
                        <h6 class="section-subtitle ltn__secondary-color">// Welcome to v Believers sarvjeet</h6>
                        <h1 class="section-title white-color">Shop</h1>
                        <div class="ltn__breadcrumb-list">
                            <ul>
                                <li><a href="{{base}}">Home</a></li>
                                <li><a href="#">Shop</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> -->
<!-- BREADCRUMB AREA END -->
<div class="container ltn__product-area-wrapper mb-2" style="width: 100%;display: flex;">
    <div class="ltn__product-area ltn__product-gutter" style="width: 25%;float: left;">

        <div class="container">
            <div class="navigation-bar">
                <h3>Filter By</h3>

                <!-- Apply Button -->
                <div class="filter-btn-wrapper">
                    <button class="theme-btn-1 btn btn-effect-1" id="applyFiltersBtn">Apply</button>
                    <button class="theme-btn-1 btn btn-effect-1" style="background-color: #C15B27;"
                        id="resetFiltersBtn">Reset</button>
                </div>

                {% if categories|length > 0 %}
                <div class="filter-group">
                    <div class="filter-group-header">
                        <h4>Category</h4>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="size-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                        </svg>
                    </div>
                    <div class="filter-group-body">
                        {% for category in categories %}
                        <label><input type="checkbox" class="filter" data-filter="category"
                                value="{{ category.category_id }}"> {{ category.name }}</label>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <div class="filter-group">
                    <div class="filter-group-header">
                        <h4>Size</h4>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="size-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                        </svg>
                    </div>
                    <div class="filter-group-body">
                        {% for size in sizes %}
                        <label><input type="checkbox" class="filter" data-filter="size" value="{{ size.attribute_id }}">
                            {{ size.attribute_name }}</label>
                        {% endfor %}
                    </div>
                </div>

                <div class="filter-group">
                    <div class="filter-group-header">
                        <h4>Color</h4>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="size-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                        </svg>
                    </div>
                    <div class="filter-group-body">
                        {% for color in colors %}
                        <label><input type="checkbox" class="filter" data-filter="color"
                                value="{{ color.attribute_id }}"> {{ color.attribute_name }}</label>
                        {% endfor %}
                    </div>
                </div>

                <div class="filter-group">
                    <div class="filter-group-header">
                        <h4>Brand</h4>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="size-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                        </svg>
                    </div>
                    <div class="filter-group-body">
                        {% for brand in brands %}
                        <label><input type="checkbox" class="filter" data-filter="brand"
                                value="{{ brand.attribute_id }}"> {{ brand.attribute_name }}</label>
                        {% endfor %}
                    </div>
                </div>

                <div class="filter-group">
                    <div class="filter-group-header">
                        <h4>Price</h4>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="size-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                        </svg>
                    </div>
                    <div class="filter-group-body">
                        <div class="filter-price-wrapper">
                            <div>
                                <label for="minPrice">Min Price: </label>
                                <input type="number" id="minPrice" placeholder="0"
                                    style="margin-left: 10px; width: -webkit-fill-available;">
                            </div>
                            <div>
                                <label for="maxPrice">Max Price: </label>
                                <input type="number" id="maxPrice" placeholder="200"
                                    style="margin-left: 10px; width: -webkit-fill-available;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <style type="text/css">
                .navigation-bar {
                    padding: 15px;
                    border-right: 0;
                    background: #F6EEE0;
                    border-radius: 4px;
                }

                .navigation-bar h3 {
                    font-size: 20px;
                }

                .filter-group {
                    margin-bottom: 0px;
                }

                .filter-btn-wrapper {
                    margin-bottom: 10px;
                    display: flex;
                    flex-wrap: wrap;
                    gap: 6px;
                }

                .filter-btn-wrapper button {
                    flex: 1;
                    padding: 8px 15px !important;
                    font-size: 16px;
                }

                .filter-group-header {
                    display: flex;
                    justify-content: space-between;
                    padding: 10px 0;
                    cursor: pointer;
                }

                .filter-group-header.active svg {
                    transform: rotate(-180deg);
                }

                .filter-group-header h4 {
                    margin-bottom: 0;
                    font-size: 16px;
                }

                .filter-group-header svg {
                    width: 20px;
                    transition: all .3s ease-in-out;
                }

                .filter-group-body {
                    display: none;
                }

                .filter-group-body input[type="checkbox"] {
                    width: 16px;
                    height: 16px;
                    accent-color: #C15B27;
                    border-color: #C15B27;
                    margin-right: 4px;
                    position: relative;
                    top: 2px;
                }

                .filter-group label {
                    display: block;
                    /* Ensure each option is on a new line */
                    margin-bottom: 6px;
                    /* Add space between each option */
                    margin-left: 10px;
                }

                .filter-price-wrapper {
                    display: flex;
                    gap: 6px
                }

                .filter-price-wrapper>div {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                }

                .filter-price-wrapper label {
                    margin-left: 0;
                }

                .filter-price-wrapper input {
                    width: 100% !important;
                    border: 1px solid #C15B27 !important;
                    padding-left: 10px;
                }

                @media screen and (max-width:991px) {

                    .container:has(.ltn__product-area) {
                        max-width: 100%;
                    }
                }

                @media screen and (max-width:767px) {

                    .ltn__product-area-wrapper {
                        flex-direction: column-reverse;
                        margin-bottom: 40px;
                    }

                    .ltn__product-area-wrapper>div {
                        width: 100% !important;
                    }

                    .ltn__product-area .tab-content {
                        padding-inline: 0;
                    }

                    ul.pagination {
                        text-align: center;
                    }

                    .container:has(> .ltn__product-area) {
                        padding: 0;
                    }
                }
            </style>
            <script type="text/javascript">
                $(".filter-group-body").hide();
                $(".filter-group-header").click(function () {
                    var body = $(this).next(".filter-group-body");
                    $(this).toggleClass("active");
                    //$(".filter-group-body").not(body).slideUp().prev(".filter-group-header").removeClass("active");
                    body.stop(true, true).slideToggle();
                });
                document.addEventListener('DOMContentLoaded', () => {
                    const filters = document.querySelectorAll('.filter');
                    const minPriceInput = document.getElementById('minPrice');
                    const maxPriceInput = document.getElementById('maxPrice');
                    const applyFiltersBtn = document.getElementById('applyFiltersBtn');
                    const resetFiltersBtn = document.getElementById('resetFiltersBtn');

                    // Parse the current URL to get query parameters
                    const urlParams = new URLSearchParams(window.location.search);

                    // Set default values from the URL query params for filters
                    filters.forEach(filter => {
                        const filterType = filter.getAttribute('data-filter');
                        const filterValue = filter.value;
                        const paramValues = urlParams.getAll(`${filterType}[]`); // Get all values for array-type params

                        // If the filter value exists in the URL parameters, mark it as checked
                        if (paramValues.includes(filterValue)) {
                            filter.checked = true;
                            // Trigger click on the filter group header if this filter is in a selected group
                            const filterGroupHeader = filter.closest('.filter-group').querySelector('.filter-group-header');
                            console.log(filterGroupHeader);
                            filterGroupHeader.click();
                        }
                    });

                    // Set minPrice and maxPrice from URL query params if available
                    if (urlParams.has('minPrice')) {
                        minPriceInput.value = urlParams.get('minPrice');
                    }
                    if (urlParams.has('maxPrice')) {
                        maxPriceInput.value = urlParams.get('maxPrice');
                    }

                    // Function to create the URL with filters without updating it in the browser
                    function createUrlWithFilters() {
                        const newParams = new URLSearchParams(window.location.search); // Get existing query params

                        // Remove existing filter params (category, size, color, brand, minPrice, maxPrice) to avoid duplication
                        ['category[]', 'size[]', 'color[]', 'brand[]', 'minPrice', 'maxPrice'].forEach(param => {
                            newParams.delete(param);
                        });

                        // Collect active checkbox filters and append them as arrays (e.g., category[] for multiple categories)
                        filters.forEach(filter => {
                            if (filter.checked) {
                                const filterType = filter.getAttribute('data-filter');
                                newParams.append(`${filterType}[]`, filter.value); // Add as array type param (e.g., category[])
                            }
                        });

                        // Add min and max price to URL if set
                        if (minPriceInput.value) {
                            newParams.set('minPrice', minPriceInput.value);
                        }
                        if (maxPriceInput.value) {
                            newParams.set('maxPrice', maxPriceInput.value);
                        }

                        // Remove the 'page' parameter if present (to reset pagination when filters are applied)
                        newParams.delete('page');

                        // Create and return the new URL with updated query parameters
                        return window.location.pathname + '?' + newParams.toString();
                    }

                    // Apply button click event to gather filters and redirect to the new URL
                    applyFiltersBtn.addEventListener('click', () => {
                        const newUrl = createUrlWithFilters(); // Generate URL with filters
                        window.location.href = newUrl; // Redirect to the new URL
                    });

                    resetFiltersBtn.addEventListener('click', () => {
                        // Clear all checkboxes
                        filters.forEach(filter => {
                            filter.checked = false;
                        });

                        // Clear min and max price inputs
                        minPriceInput.value = '';
                        maxPriceInput.value = '';

                        // Remove all filter-related query parameters from the URL
                        const resetParams = new URLSearchParams(window.location.search);

                        // Remove existing filter params (category, size, color, brand, minPrice, maxPrice)
                        ['category[]', 'size[]', 'color[]', 'brand[]', 'minPrice', 'maxPrice'].forEach(param => {
                            resetParams.delete(param);
                        });

                        // Remove the 'page' parameter if present (to reset pagination)
                        resetParams.delete('page');

                        // Redirect to the URL without filters
                        window.location.href = window.location.pathname + '?' + resetParams.toString();
                    });
                });

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

    <!-- PRODUCT DETAILS AREA START -->
    <div class="ltn__product-area ltn__product-gutter" style="width: 75%;float: right;">
        <div class="container">
            <!-- Search & Sort -->
            <div class="row px-2 px-md-0">
                <div class="col-lg-12">
                    <div
                        class="ltn__shop-options mb-3 col-12 p-0 justify-content-end justify-content-between justify-content-lg-end justify-content-md-end d-flex">
                        <div class="mr-2 position-sticky">
                            <input style="border: 1px solid #c15b2754;height: 40px;min-width: max-content;"
                                onchange="updatefilterurl(this)" value="{{filter}}" type="text"
                                class="form-control category_search_in mb-0" placeholder="Search here...">
                            <div class="input-group-append">
                                <button class="btn-outline-secondary ser" type="button" onclick="submitsearch()"><i
                                        class="fa fa-search" aria-hidden="true"></i></button>
                            </div>
                        </div>
                        <div class="short-by text-center">
                            <select class="nice-select" onchange="location = this.value;">
                                {% for sorts in sorts %}
                                {% if sorts.value == '%s-%s'|format(sort, order) %}
                                <option value="{{ sorts.href }}" selected="selected">{{ sorts.text }}</option>
                                {% else %}
                                <option value="{{ sorts.href }}">{{ sorts.text }}</option>
                                {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Products -->
            <div class="row px-2 px-md-0">
                <div class="tab-content">
                    <div class="tab-pane fade active show" id="liton_product_grid">
                        <div class="ltn__product-area ltn__product-gutter">
                            <div class="container p-0">
                                <div class="row ltn__tab-product-slider-one-active--- slick-arrow-1">
                                    {% for product in products %}
                                    <div class="col-lg-4 col-md-6 col-sm-6 col-12 mb-4">
                                        <div class="product-grid-box">
                                            <a href="{{ product.href }}" class="img-block">
                                                <img src="{{ product.thumb }}" alt="{{ product.name }}">
                                            </a>
                                            <div class="content-block">
                                                <h4 class="text-truncate">{{ product.name }}</h4>
                                                <div
                                                    class="prices-box d-flex justify-content-between align-items-center">
                                                    {% if product.special %}
                                                    <h5 class="prices">{{ product.special }}<del>{{ product.price
                                                            }}</del></h5>
                                                    {% else %}
                                                    <h5 class="prices">{{ product.price }}</h5>
                                                    {% endif %}
                                                    <a class="whishlist-icons wishlist-btn"
                                                        data-product-id="{{ product.product_id }}">
                                                        <i class="bi bi-suit-heart"></i>
                                                    </a>
                                                </div>
                                                <div
                                                    class="seller-withreating d-flex justify-content-between align-items-center">
                                                    <div class="product-ratting">
                                                        <ul class="mb-0">
                                                            {% for i in 1..5 %}
                                                            {% if product.rating >= i %}
                                                            <li><i class="fas fa-star"></i></li>
                                                            {% elseif product.rating > (i - 1) and product.rating < i %}
                                                                <li><i class="fas fa-star-half-alt"></i></li>
                                                                {% else %}
                                                                <li><i class="far fa-star"></i></li>
                                                                {% endif %}
                                                                {% endfor %}
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="inline-btns d-flex gap-2">
                                                    <a onclick="cart.add('{{ product.product_id }}')"
                                                        class="add-to-cart-bnts btn btn-effect-1">ADD TO CART</a>
                                                    {#<a href="{{ product.href }}" class="btn btn-effect-1"
                                                        style="background-color:#C15B27;">Buy Now</a>#}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pagination -->
            <div class="row col-12 p-0 {% if categorydatach.data == ''%} mb-4{% endif%}">
                <div class="col-12 col-sm-6 pl-2 p-0 text-center text-sm-left">
                    Showing {{product_cur_count}} of {{product_tot_count}} results
                </div>
                <div class="col-12 col-sm-6 p-0">
                    <div class="ltn__pagination-area">
                        <div class="ltn__pagination text-center text-sm-right">
                            {{ pagination }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</div>
</div>
<!-- PRODUCT DETAILS AREA END -->
{{ footer }}