@props([
    'title',
    'name' => null,
    'options' => [],
    'searchable' => false,
    'selected' => [],
    'inputName' => null,
])

@php
    $filterName = $name ?? Str::slug($title, '-');
    $selectedValues = collect($selected ?? [])->map(fn ($value) => (string) $value)->all();
    $inputFieldName = $inputName ?? ($filterName . '[]');
    $totalOptions = count($options);
    $selectedCount = collect($options)->filter(fn ($option) => empty($selectedValues) || in_array((string) $option, $selectedValues, true))->count();
    $isAllSelected = $totalOptions > 0 ? $selectedCount === $totalOptions : true;
@endphp

<div class="sphf-filter-item relative" data-filter-name="{{ $filterName }}">
    <button type="button" class="sphf-filter-btn" data-filter-toggle>
        <span class="sphf-filter-title">{{ $title }}</span> <i class="ki-filled ki-down"></i>
    </button>

    <div class="sphf-filter-dropdown">
        @if ($searchable ?? false)
            <div style="padding: 8px 12px; border-bottom: 1px solid #edf2f1; background: #f9fbfb;">
                <input type="text" class="dropdown-search" placeholder="Search..."
                    style="width: 100%; border: 1px solid #ccdad6; border-radius: 4px; padding: 6px 10px; font-size: 13px; outline: none; color: #315d56;">
            </div>
        @endif

        <ul class="dropdown-list p-1" style="max-height: 250px; overflow-y: auto; margin: 0; list-style: none;">
            <li class="dropdown-list-item flex items-center gap-2.5 px-3 py-2 mx-1 my-0.5 rounded-md hover:bg-[#eaf5ef] cursor-pointer transition-colors duration-150">
                <input id="{{ $filterName }}-all" type="checkbox" class="filter-all w-4 h-4 rounded border-gray-300 text-[#0a9a4c] focus:ring-[#0a9a4c] cursor-pointer" {{ $isAllSelected ? 'checked' : '' }}>
                <label for="{{ $filterName }}-all" class="cursor-pointer flex-1 text-[13px] font-semibold text-[#1e293b] select-none m-0">Select All</label>
            </li>

            @foreach ($options as $option)
                <li class="dropdown-list-item flex items-center gap-2.5 px-3 py-2 mx-1 my-0.5 rounded-md hover:bg-[#eaf5ef] cursor-pointer transition-colors duration-150">
                    <input id="{{ $filterName }}-{{ Str::slug($option) }}" type="checkbox" class="filter-item w-4 h-4 rounded border-gray-300 text-[#0a9a4c] focus:ring-[#0a9a4c] cursor-pointer" value="{{ $option }}" name="{{ $inputFieldName }}" {{ (empty($selectedValues) || in_array((string) $option, $selectedValues, true)) ? 'checked' : '' }}>
                    <label for="{{ $filterName }}-{{ Str::slug($option) }}" class="cursor-pointer flex-1 text-[13px] font-semibold text-[#1e293b] select-none m-0">{{ $option }}</label>
                </li>
            @endforeach
        </ul>
    </div>
</div>