@props([
'title',
'name' => null, // Ensure $name is always defined
'api' => null,
'dependsOn' => null,
'options' => [],
'searchable' => false
])

@php
$filterName = $name ?? Str::slug($title, '-');
@endphp

<div class="kt-menu-item kt-menu-item-filter border-b-2 border-b-transparent 
    kt-menu-item-active:border-b-mono kt-menu-item-here:border-b-mono"
    data-filter-name="{{ $filterName }}"
    data-api="{{ $api ?? '' }}"
    data-depends-on="{{ $dependsOn ?? '' }}"
    data-kt-menu-item-placement="bottom-start"
    data-kt-menu-item-placement-rtl="bottom-end"
    data-kt-menu-item-toggle="dropdown"
    data-kt-menu-item-trigger="click|lg:hover">
    <div class="kt-menu-link gap-1.5 px-1" tabindex="0">
        <span class="kt-menu-title filter-title text-nowrap text-sm 
            kt-menu-item-active:font-medium kt-menu-item-here:font-medium">
            {{ $title }}
        </span>
        <span class="kt-menu-arrow">
            <i class="ki-filled ki-down text-xs text-muted-foreground"></i>
        </span>
    </div>

    <div class="kt-menu-dropdown kt-menu-default py-2 min-w-[220px] bg-white rounded-lg shadow-md">

        @if ($searchable ?? false)
        <div class="px-3 pb-2">
            <input type="text"
                class="form-control form-control-sm border border-gray-300 rounded px-2 py-1 w-full dropdown-search"
                placeholder="Search...">
        </div>
        @endif

        <ul class="divide-y divide-gray-200 dropdown-list">
            @foreach ($options as $option)
            <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                <input id="{{ Str::slug($title . '-' . $option) }}" type="checkbox"
                    class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0" checked>
                <label for="{{ Str::slug($title . '-' . $option) }}"
                    class="ms-2 text-gray-700 text-sm font-medium">{{ $option }}</label>
            </li>
            @endforeach
        </ul>
    </div>
</div>
@push('scripts')
@vite('resources/js/generic-filter.js')
@endpush