@props(['action', 'search' => '', 'flagSend' => '', 'selectedMonth' => ''])

<form id="filterForm" action="{{ $action }}" method="GET" class="flex flex-col md:flex-row items-stretch md:items-center gap-3 w-full mb-6 bg-gray-50/50 p-4 rounded-xl border border-border-light">
    <div class="relative flex items-center flex-1 min-w-[200px]">
        <input type="text" id="searchInput" name="search" value="{{ $search }}" placeholder="Tìm MSNV hoặc Email..." class="form-input !py-1.5 !text-sm !pl-10 !pr-10 w-full border-border-medium rounded bg-white">
        <svg class="w-4 h-4 text-text-light absolute left-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="pointer-events: none;">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
        <button type="button" id="btnClearSearch" class="{{ empty($search) ? 'hidden' : '' }} absolute right-3 text-text-light hover:text-text-dark focus:outline-none">
            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>
    
    <select name="flag_send" id="flagSendFilter" class="form-input !py-1.5 !text-sm w-full md:w-auto border-border-medium rounded bg-white min-w-[150px]">
        <option value="" {{ is_null($flagSend) || $flagSend === '' ? 'selected' : '' }}>Quyền gửi: Tất cả</option>
        <option value="1" {{ $flagSend === '1' ? 'selected' : '' }}>Được gửi</option>
        <option value="0" {{ $flagSend === '0' ? 'selected' : '' }}>Không được gửi</option>
    </select>

    <input type="month" name="month" id="monthFilter" value="{{ $selectedMonth }}" class="form-input !py-1.5 !text-sm w-full md:w-auto border-border-medium rounded bg-white">

    <div class="flex items-center gap-2 w-full md:w-auto">
        <button type="submit" id="btnFilter" class="btn-primary !py-1.5 !px-4 text-sm rounded shadow-sm hover:translate-y-[-1px] flex items-center justify-center min-w-[70px] flex-1 md:flex-none">Tìm</button>
        <button type="button" id="btnClearFilters" class="btn-secondary !py-1.5 !px-4 text-sm rounded border border-border-medium hover:bg-gray-100 flex items-center justify-center min-w-[100px] flex-1 md:flex-none">Xóa bộ lọc</button>
    </div>
</form>
