@props(['subcategories'])
<a href="" class="btn w-100 filter-btn shadow-none border mb-2 d-md-none d-block">
    Product Filters
    <i class='bx bx-filter'></i>
</a>
<div class="sidebar text-capitalize">
    <a href=""
        class="btn w-100 filter-btn shadow-none border d-flex justify-content-between align-itmes-center mb-2 d-md-none d-block bg-danger text-white">
        Close Filter Categories <i class='bx bx-x fs-4'></i>
    </a>

    {{-- <div class="dropdown">
        <a class="btn btn-secondary  w-100 mb-2" style="background:#7f385e;border:0;" href="#" role="button"
            id="sortBy" data-bs-toggle="dropdown" aria-expanded="false">
            <span id="sort_label">Sort By</span>
            <i class='bx bxs-down-arrow ps-lg-4' style="font-size: 13px;"></i>
        </a>
        <ul class="dropdown-menu" aria-labelledby="sortBy">
            <li>
                <label class="dropdown-item">
                    <input type="radio" style="height: 15px;width:15px;" class="sorting" name="sorting"
                        data-column="is_best_seller" data-sort="desc" value="best_seller">
                    <span class="ps-2">Best Seller</span>
                </label>
            </li>
            <li>
                <label class="dropdown-item">
                    <input type="radio" style="height: 15px;width:15px;" class="sorting" name="sorting"
                        data-column="created_at" data-sort="desc" value="created_at">
                    <span class="ps-2">Newest First</span>
                </label>
            </li>
            <li>
                <label class="dropdown-item">
                    <input type="radio" style="height: 15px;width:15px;" class="sorting" name="sorting" value="price"
                        data-column="price" data-sort="asc">
                    <span class="ps-2">Price low to high</span>
                </label>
            </li>
            <li>
                <label class="dropdown-item">
                    <input type="radio" style="height: 15px;width:15px;" class="sorting" name="sorting" value="price"
                        data-column="price" data-sort="desc">
                    <span class="ps-2">Price High to low</span>
                </label>
            </li>
            <li>
                <label class="dropdown-item">
                    <input type="radio" style="height: 15px;width:15px;" class="sorting" name="sorting" value="name"
                        data-column="name" data-sort="asc">
                    <span class="ps-2">From A-Z</span>
                </label>
            </li>
            <li>
                <label class="dropdown-item">
                    <input type="radio" style="height: 15px;width:15px;" class="sorting" name="sorting" value="name"
                        data-column="name" data-sort="desc">
                    <span class="ps-2">From Z-A</span>
                </label>
            </li>
        </ul>
    </div>
    <ul class="list-group">
        @if ($subcategories->count() != 0)
            <li class="list-group-item">
                <a class="btn btn-category" data-bs-toggle="collapse" href="#subcategory" role="button"
                    aria-expanded="true" aria-controls="subcategory">Sub Categories
                    <i class='bx bx-chevron-down pt-1 float-end'></i>
                </a>
                <div class="collapse show" id="subcategory">
                    <div class="card card-body bg-white">
                        @foreach ($subcategories as $category)
                            <div class="form-check">
                                <a href="{{ route('productByCategory', $category->slug) }}">{{ $category->name }}</a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </li>
        @endif
        <li class="list-group-item">
            <a class="btn btn-category" data-bs-toggle="collapse" href="#category_flt" role="button"
                aria-expanded="true" aria-controls="category_flt">All Categories
                <i class='bx bx-chevron-down pt-1 float-end'></i>
            </a>
        </li>
    </ul> --}}
    <div class="collapse show" id="category_flt">
        <div class="card card-body bg-white">
            @foreach ($categories as $category)
                <div class="form-check p-0">
                    <a href="{{ route('productByCategory', $category->slug) }}" class="">
                        <span>
                            <i class="fal fa-arrow-right"></i>
                        </span>
                        {{ $category->name }}
                    </a>
                </div>
            @endforeach
        </div>
    </div>
</div>
<style>
    .form-check a{
        width: 100%;
        display: inline-block;
        border: 1px solid #7f385e;
        padding: 5px 10px;
        border-radius: 15px;
    }
    .form-check a:hover{
        background: #7f385e;
        color: #fff;
    }
    .form-check a span{
        padding-right: 10px;
    }
</style>
@push('scripts')
    <script>
        var accordionButtons = document.querySelectorAll('.arcdion-btn');
        accordionButtons.forEach(function(button) {
            button.addEventListener('click', function() {
                var collapseId = button.getAttribute('href');
                var collapse = document.querySelector(collapseId);
                if (collapse.classList.contains('show')) {
                    collapse.classList.remove('show');
                } else {
                    var collapses = document.querySelectorAll('.arcdi.show');
                    collapses.forEach(function(collapse) {
                        collapse.classList.remove('show');
                    });
                    collapse.classList.add('show');
                }
            });
        });
    </script>
    <script>
        var table = {
            is_new: '',
            is_best_seller: '',
            brand: '',
            price: '',
            sale: '',
            mode: '',
            sortBy: '',
            sortOrder: '',
            paginate: null,
            flavour: '',
            source: '',
            form: '',
        }

        $(document).ready(function() {
            let is_new = new URLSearchParams(window.location.search).get("is_new");
            let is_best_seller = new URLSearchParams(window.location.search).get("is_best_seller");
            let brands = new URLSearchParams(window.location.search).get("brand");
            let mode = new URLSearchParams(window.location.search).get("mode");
            let paginate = new URLSearchParams(window.location.search).get("paginate");
            let sort = new URLSearchParams(window.location.search).get("sort");
            let order = new URLSearchParams(window.location.search).get("order");


            table.paginate = paginate ? paginate : null;
            if (paginate) {
                $(".per_page").each(function() {
                    if ($(this).val() === paginate) {
                        $(this).prop('checked', true);
                    }
                });
                var checkedLabel = $('input[name="limit"]:checked').next('span').text();
                $('#limit_label').text(checkedLabel);
            } else {
                $(".per_page[value='100']").prop('checked', true);
            }

            if (sort && order && sort !== "" && order !== "") {
                $('.sorting').each(function() {
                    if ($(this).data('column') === sort && $(this).data('sort') === order) {
                        $(this).prop('checked', true);
                    }
                });
                updateSortLabel();
            }
        });

        $('.per_page').on('change', function() {
            let paginate = $(this).val();
            table.paginate = paginate;
            filter('paginate', paginate);
        });

        $(document).on('click', '.sorting', function() {
            var column = $(this).data('column');
            var sort = $(this).data('sort');
            table.sortBy = column;
            table.sortOrder = sort;
            applyFilters();
        });

        function updateSortLabel() {
            var checkedLabel = $('input[name="sorting"]:checked').next('span').text();
            $('#sort_label').text(checkedLabel);
        }


        function filter(key, value) {
            let uri = window.location.href
            let url = '';
            var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
            var separator = uri.indexOf('?') !== -1 ? "&" : "?";
            if (uri.match(re)) {
                url = uri.replace(re, '$1' + key + "=" + value + '$2');
            } else {
                url = uri + separator + key + "=" + value;
            }
            window.location.href = url;
        }

        function applyFilters() {
            let uri = window.location.href;
            let params = new URLSearchParams(window.location.search);
            if (table.is_best_seller) params.set("is_best_seller", table.is_best_seller);
            if (table.is_new) params.set("is_new", table.is_new);
            if (table.brand) params.set("brand", table.brand);
            if (table.price) params.set("price", table.price);
            if (table.sale) params.set("sale", table.sale);
            if (table.mode) params.set("mode", table.mode);
            if (table.sortOrder !== '') params.set("order", table.sortOrder);
            if (table.sortBy !== '') params.set("sort", table.sortBy);
            window.location.href = uri.split('?')[0] + '?' + params.toString();
        }

        $(document).ready(function() {
            $(".filter-btn").click(function(e) {
                e.preventDefault();
                $(".sidebar").toggleClass("open");
            });
        });
    </script>
@endpush