{{--
    Advanced Filter Drawer — with Virtual Scroll + Search Dropdowns
    
    Usage:
    @include('admin.partials.advanced-filter', [
        'filters' => [
            [
                'col'         => 'col-md-3',
                'text_id'     => 'brand-filter-text',
                'menu_id'     => 'brandFilterMenu',
                'placeholder' => 'Select Brand',
                'search'      => true,          // enable search + virtual scroll
                'ajax_url'    => route('admin.brands.search'),  // GET ?q=&page=
                'options'     => [],            // leave empty when using ajax_url
            ],
            [
                'col'         => 'col-md-2',
                'text_id'     => 'type-filter-text',
                'menu_id'     => 'typeFilterMenu',
                'placeholder' => 'Select Type',
                'search'      => false,         // static dropdown (old behaviour)
                'options'     => [
                    ['label' => 'Residential', 'value' => 'Residential'],
                    ['label' => 'Commercial',  'value' => 'Commercial'],
                ],
            ],
        ]
    ])
--}}

<div id="advancedFilterDrawer" class="advanced-filter-drawer">
    <div class="row g-3 align-items-end">

        @foreach ($filters as $filter)
            @php $hasSearch = !empty($filter['search']); @endphp

            <div class="{{ $filter['col'] ?? 'col-md-3' }}">

                @if ($hasSearch)
                    <div class="vs-dropdown" data-menu-id="{{ $filter['menu_id'] }}"
                        data-text-id="{{ $filter['text_id'] }}" data-placeholder="{{ $filter['placeholder'] }}"
                        @if (!empty($filter['ajax_url'])) data-ajax-url="{{ $filter['ajax_url'] }}" @endif>
                        <input type="hidden" id="{{ $filter['menu_id'] }}" class="vs-selected-value">
                        <button type="button" class="btn filter-inner-btn vs-dropdown-toggle w-100"
                            id="{{ $filter['menu_id'] }}_btn">

                            <span id="{{ $filter['text_id'] }}" class="text-truncate">
                                {{ $filter['placeholder'] }}
                            </span>

                            <i class="bi bi-chevron-down arrow-icon opacity-50 small ms-auto flex-shrink-0"></i>
                        </button>

                        <div class="vs-dropdown-panel" id="{{ $filter['menu_id'] }}_panel" style="display:none;">

                            <div class="vs-search-wrap">
                                <i class="bi bi-search vs-search-icon"></i>
                                <input type="text" class="vs-search-input" placeholder="Search…" autocomplete="off">
                            </div>

                            <ul class="vs-list" id="{{ $filter['menu_id'] }}_list">
                                {{-- items injected by JS --}}
                            </ul>

                            <div class="vs-loading" style="display:none;">
                                <span class="vs-spinner"></span>
                            </div>

                            <div class="vs-empty" style="display:none;">No results found.</div>

                            @if (!empty($filter['options']))
                                <script type="application/json" class="vs-static-data">
                            {!! json_encode($filter['options']) !!}
                        </script>
                            @endif

                        </div>
                    </div>
                @else
                    <div class="dropdown">
                        <button class="btn filter-inner-btn dropdown-toggle w-100" type="button"
                            data-bs-toggle="dropdown">

                            <span id="{{ $filter['text_id'] }}">
                                {{ $filter['placeholder'] }}
                            </span>

                            <i class="bi bi-chevron-down arrow-icon opacity-50 small"></i>
                        </button>

                        <ul class="dropdown-menu rows-menu-modern" id="{{ $filter['menu_id'] }}">
                            <li>
                                <a class="dropdown-item active" data-value="{{ $filter['placeholder'] }}">
                                    {{ $filter['placeholder'] }}
                                </a>
                            </li>

                            @foreach ($filter['options'] as $option)
                                <li>
                                    <a class="dropdown-item" data-value="{{ $option['value'] }}">
                                        {{ $option['label'] }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        @endforeach

        {{-- Start Date --}}
        <div class="col-md-3">
            <div class="filter-date-wrapper">
                <i class="bi bi-calendar3"></i>
                <input type="text" id="startDatePicker" class="filter-date-input" placeholder="Select Start Date"
                    readonly>
            </div>
        </div>

        {{-- End Date --}}
        <div class="col-md-3">
            <div class="filter-date-wrapper">
                <i class="bi bi-calendar3"></i>
                <input type="text" id="endDatePicker" class="filter-date-input" placeholder="Select End Date"
                    readonly>
            </div>
        </div>

        {{-- Clear --}}
        <div class="col-md-1">
            <button class="btn-filter-clear w-100" id="btnClearFilters">
                <i class="bi bi-arrow-counterclockwise"></i> Clear
            </button>
        </div>

    </div>
</div>