@props(['statuses' => []])

<div class="bg-white rounded-xl shadow-lg p-6 mb-6">
    <form method="GET" action="{{ request()->is('request/analyst*') ? route('request.analyst') : route('request.index') }}" class="flex flex-col lg:flex-row gap-4">
        <!-- Search: Radicado -->
        <div class="flex-1">
            <div class="relative">
                <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-secondary/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <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"></path>
                </svg>
                <input
                    type="text"
                    name="search"
                    value="{{ request('search') }}"
                    placeholder="Buscar por radicado"
                    class="w-full pl-10 pr-4 py-3 bg-white border border-gray-300 rounded-lg text-secondary placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                >
            </div>
        </div>

        <!-- Filters: Fechas y Estado -->
        <div class="flex flex-wrap items-end gap-3">
            <!-- Filtro de Estado -->
            <div class="flex flex-col gap-1">
                <span class="text-[11px] font-semibold text-secondary/80 leading-none">Estado</span>
                <select
                    name="status"
                    class="px-3 py-2.5 bg-white border border-gray-300 rounded-lg text-secondary text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                >
                    <option value="">Todos los estados</option>
                    @php
                        // Definir estados según el rol del usuario
                        $allowedStatuses = [];
                        if (auth()->user()->rol_id == 1) {
                            // Admin: Pendiente (1), En Revisión (4), En Iteración Externa (6)
                            $allowedStatuses = [1, 4, 6];
                        } elseif (auth()->user()->rol_id == 2) {
                            // Analista: En Gestión (2), En Iteración Interna (3)
                            $allowedStatuses = [2, 3];
                        }
                    @endphp
                    @foreach($statuses as $status)
                        @if(in_array($status->id, $allowedStatuses))
                            <option value="{{ $status->id }}" {{ request('status') == $status->id ? 'selected' : '' }}>
                                {{ $status->name }}
                            </option>
                        @endif
                    @endforeach
                </select>
            </div>

            <div class="flex flex-col gap-1">
                <span class="text-[11px] font-semibold text-secondary/80 leading-none">Creación</span>
                <input
                    type="date"
                    name="created_date"
                    value="{{ request('created_date') }}"
                    class="w-40 px-3 py-2.5 bg-white border border-gray-300 rounded-lg text-secondary text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none"
                >
            </div>

            <div class="flex flex-col gap-1">
                <span class="text-[11px] font-semibold text-secondary/80 leading-none">Vencimiento</span>
                <input
                    type="date"
                    name="due_date"
                    value="{{ request('due_date') }}"
                    class="w-40 px-3 py-2.5 bg-white border border-gray-300 rounded-lg text-secondary text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none"
                >
            </div>

            <!-- Botón Buscar -->
            <button type="submit" class="px-4 py-3 bg-primary hover:bg-primary/90 text-black rounded-lg font-semibold transition-colors">
                Buscar
            </button>

            <!-- Botón Limpiar -->
            @if(request()->hasAny(['search', 'created_date', 'due_date', 'status']))
                <a href="{{ request()->is('request/analyst*') ? route('request.analyst') : route('request.index') }}" class="px-4 py-3 bg-white border border-gray-300 hover:bg-gray-100 text-secondary rounded-lg font-medium transition-colors">
                    Limpiar
                </a>
            @endif

            <button @click="viewMode = 'grid'" :class="viewMode === 'grid' ? 'bg-primary text-secondary' : 'bg-white text-secondary'" class="px-4 py-3 border border-gray-300 rounded-lg hover:bg-primary/90 hover:text-secondary transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                </svg>
            </button>
        </div>
    </form>
</div>