@php
    $categories = App\Models\Category::where('status', 1)->latest()->get();
@endphp
<div class="d-flex flex-wrap gap--16 justify-content-between align-items-center">
    <h4 class="mb-0">{{__($pageTitle)}}</h4>
    <div class="item-btn--wrap d-flex flex-wrap gap--16 justify-content-between justify-content-sm-end flex-shrink-0">
        <button class="btn btn--base btn--lg flex-shrink-0" data-bs-toggle="modal" data-bs-target="#exampleModal"><i
                class="fa-solid fa-sliders"></i>
            @lang('Filter')
        </button>
        <div>
            <form action="{{ route('search') }}" method="get" id="filterFormType">
                <select class="form--control form-select form--select" name="sort_direction" id="sortSelect">
                    <option>@lang('Sort By')</option>
                    <option value="desc">@lang('Sort by latest')</option>
                    <option value="asc">@lang('Sort by oldest')</option>
                </select>
            </form>

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

<!-- Modal -->
<div class="modal fade modal--base" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">@lang('Filter')</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('search') }}" method="get">
                    <div class="row gy-3">
                        {{-- Search Input --}}
                        <div class="col-lg-6">
                            <div class="input--group search--input d-flex flex-nowrap position-relative">
                                <input type="text" name="search" class="form--control"
                                    placeholder="Search" id="search"
                                    value="{{ request('search') }}">
                                <button class="search-btn">
                                    <i class="las la-search"></i>
                                </button>
                            </div>
                        </div>

                        {{-- Sort Direction --}}
                        <div class="col-lg-6">
                            <select class="form--control form-select form--select" name="sort_direction">
                                <option value="desc" {{ request('sort_direction', 'desc') == 'desc' ? 'selected' : '' }}>
                                    @lang('Sort by latest')
                                </option>
                                <option value="asc" {{ request('sort_direction') == 'asc' ? 'selected' : '' }}>
                                    @lang('Sort by oldest')
                                </option>
                            </select>
                        </div>

                        {{-- Categories --}}
                        <div class="col-lg-6">
                            <div class="base--card radius--12 mb-4 ai">
                                <h6>@lang('Categories')</h6>
                                @foreach ($categories as $index => $category)
                                    <div class="item d-flex justify-content-between align-items-center flex-wrap
                                        {{ $index >= 5 ? 'd-none more-category' : '' }}">
                                        <div class="form--check mb-2">
                                            <input class="form-check-input" type="checkbox" name="categories[]"
                                                value="{{ $category->id }}"
                                                id="category-{{ $category->id }}"
                                                {{ in_array($category->id, (array) request('categories', [])) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="category-{{ $category->id }}">
                                                {{ $category->name }}
                                            </label>
                                        </div>
                                    </div>
                                @endforeach

                                @if(count($categories) > 5)
                                    <div class="text-center mt-2">
                                        <button type="button" class="btn-link p-0 see-more-btn"
                                            style="font-size: 0.9rem;">
                                            @lang('See More')
                                        </button>
                                        <button type="button" class="btn-link p-0 see-less-btn d-none"
                                            style="font-size: 0.9rem;">
                                            @lang('See Less')
                                        </button>
                                    </div>
                                @endif
                            </div>
                        </div>

                        {{-- Ratings --}}
                        <div class="col-lg-6">
                            <div class="base--card radius--12 mb-4 ai rating-icon">
                                <h6>@lang('Rating')</h6>
                                @for ($i = 5; $i >= 1; $i--)
                                    <div class="check-item">
                                        <div class="form--check rating--search categories-search mb-2">
                                            <input class="form-check-input" name="star[]" type="checkbox"
                                                value="{{ $i }}" id="rating-{{ $i }}"
                                                {{ in_array($i, (array) request('star', [])) ? 'checked' : '' }}>
                                            <label for="rating-{{ $i }}" class="form-check-label">
                                                @for ($j = 1; $j <= $i; $j++)
                                                    <i class="fas fa-star"></i>
                                                @endfor
                                            </label>
                                        </div>
                                    </div>
                                @endfor
                            </div>
                        </div>

                        {{-- Filter Button --}}
                        <div class="col-lg-12 text-end">
                            <button type="submit" class="btn btn--base btn--lg">@lang('Filter')</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


@push('script')
    <script>
        'use strict';
        function initializeCategoryToggle(seeMoreBtnSelector, seeLessBtnSelector, hiddenCategorySelector) {
            const seeMoreBtn = document.querySelector(seeMoreBtnSelector);
            const seeLessBtn = document.querySelector(seeLessBtnSelector);

            if (seeMoreBtn && seeLessBtn) {
                seeMoreBtn.onclick = function () {
                    document.querySelectorAll(hiddenCategorySelector).forEach(item => {
                        item.classList.remove('d-none');
                    });
                    seeMoreBtn.classList.add('d-none');
                    seeLessBtn.classList.remove('d-none');
                };

                seeLessBtn.onclick = function () {
                    document.querySelectorAll(hiddenCategorySelector).forEach(item => {
                        item.classList.add('d-none');
                    });
                    seeMoreBtn.classList.remove('d-none');
                    seeLessBtn.classList.add('d-none');
                };
            }
        }

        // Usage example
        document.addEventListener('DOMContentLoaded', function () {
            initializeCategoryToggle('.see-more-btn', '.see-less-btn', '.more-category');
        });

        // search submit
        document.addEventListener('DOMContentLoaded', function () {
            const sortSelect = document.getElementById('sortSelect');
            if (sortSelect) {
                sortSelect.addEventListener('change', function () {
                    document.getElementById('filterFormType').submit();
                });
            }
        });

    </script>
@endpush