@use('App\Enums\AssetRequestStatus')
<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-xl font-bold tracking-tight text-slate-900">
                    My Requests
                </h2>
                <div class="flex items-center gap-2 text-xs text-slate-500 mt-1">
                    <span class="font-medium">{{ config('app.name', 'Asset Management') }}</span>
                    <span class="text-slate-300">/</span>
                    <span>Requests</span>
                </div>
            </div>
            <x-ui.button variant="primary" href="{{ route('ministry.requests.create') }}">
                + New Request
            </x-ui.button>
        </div>
    </x-slot>

    <div class="space-y-6">
        <div class="space-y-6">

            <!-- Request Filters -->
            <x-ui.card class="p-6">
                <h3 class="text-lg font-bold text-slate-900 mb-6">Request Filters</h3>
                <form action="{{ route('ministry.requests.index') }}" method="GET">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                        <!-- By Request ID -->
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">By Request ID</label>
                            <input type="text" name="id" value="{{ request('id') }}"
                                class="w-full text-sm border-slate-200 rounded-lg bg-slate-50 focus:bg-white focus:border-green-500 placeholder:text-slate-400"
                                placeholder="e.g. 12">
                        </div>

                        <!-- By Title -->
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">By Title</label>
                            <input type="text" name="title" value="{{ request('title') }}"
                                class="w-full text-sm border-slate-200 rounded-lg bg-slate-50 focus:bg-white focus:border-green-500 placeholder:text-slate-400"
                                placeholder="e.g. Laptops">
                        </div>

                        <!-- By Status -->
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">By Status</label>
                            <select name="status"
                                class="w-full text-sm border-slate-200 rounded-lg bg-slate-50 focus:bg-white focus:border-green-500 text-slate-600">
                                <option value="">Select Status</option>
                                @foreach (AssetRequestStatus::cases() as $status)
                                    <option value="{{ $status->value }}"
                                        {{ request('status') == $status->value ? 'selected' : '' }}>
                                        {{ $status->label() }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- By Category -->
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">By Category</label>
                            <select name="category_id"
                                class="w-full text-sm border-slate-200 rounded-lg bg-slate-50 focus:bg-white focus:border-green-500 text-slate-600">
                                <option value="">Select Category</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}"
                                        {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- From Date -->
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">From Date</label>
                            <input type="date" name="date_from" value="{{ request('date_from') }}"
                                class="w-full text-sm border-slate-200 rounded-lg bg-slate-50 focus:bg-white focus:border-green-500 text-slate-600">
                        </div>

                        <!-- To Date -->
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">To Date</label>
                            <input type="date" name="date_to" value="{{ request('date_to') }}"
                                class="w-full text-sm border-slate-200 rounded-lg bg-slate-50 focus:bg-white focus:border-green-500 text-slate-600">
                        </div>
                    </div>

                    <div class="flex gap-3">
                        <button type="submit"
                            class="bg-green-700 text-white px-6 py-2 rounded-lg text-sm font-medium hover:bg-green-800 transition">
                            Search
                        </button>
                        {{-- Export button (visual only for now as requested by UI task) --}}
                        <button type="button" disabled
                            class="border border-slate-200 text-slate-400 px-6 py-2 rounded-lg text-sm font-medium flex items-center gap-2 cursor-not-allowed">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                                </path>
                            </svg>
                            Export
                        </button>
                        @if (request()->anyFilled(['id', 'title', 'status', 'category_id', 'date_from', 'date_to']))
                            <a href="{{ route('ministry.requests.index') }}"
                                class="text-sm text-slate-500 hover:text-red-600 self-center underline">Clear
                                Filters</a>
                        @endif
                    </div>
                </form>
            </x-ui.card>

            <!-- Request List -->
            <x-ui.card class="p-6">
                <h3 class="text-lg font-bold text-slate-900 mb-6">Request List</h3>

                <div class="p-0">
                    {{-- Mobile Cards --}}
                    <div class="md:hidden space-y-4">
                        @forelse($requests as $request)
                            <div class="bg-white p-5 rounded-xl border border-slate-100 shadow-xs">
                                <div class="flex justify-between items-start mb-3">
                                    <div>
                                        <span
                                            class="text-[10px] font-bold uppercase tracking-widest text-slate-400 block mb-1">Request
                                            ID</span>
                                        <span
                                            class="font-mono text-sm font-semibold text-slate-900">{{ $request->request_code }}</span>
                                    </div>
                                    <x-ui.badge :variant="$request->status->badgeVariant()">
                                        {{ $request->status->label() }}
                                    </x-ui.badge>
                                </div>
                                <h4 class="text-base font-bold text-slate-900">{{ $request->title ?? 'N/A' }}</h4>
                                <p class="text-sm text-slate-500 mt-1">{{ $request->category->name }}</p>

                                <div class="flex items-center justify-between pt-3 mt-3 border-t border-slate-50">
                                    <div>
                                        <span
                                            class="text-[10px] font-bold uppercase tracking-widest text-slate-400 block">Submitted</span>
                                        <span
                                            class="text-sm font-medium text-slate-700">{{ $request->created_at->format('M d, Y') }}</span>
                                    </div>
                                    <x-ui.button variant="faint" size="sm"
                                        href="{{ route('ministry.requests.show', $request) }}">
                                        View
                                    </x-ui.button>
                                </div>
                            </div>
                        @empty
                            <div class="bg-white p-8 text-center rounded-xl border border-dashed border-slate-200">
                                <x-ui.empty-state icon="search" title="No requests found"
                                    description="We couldn't find any requests matching your filters." />
                            </div>
                        @endforelse
                    </div>

                    {{-- Desktop Table --}}
                    <div class="hidden md:block overflow-x-auto">
                        <table class="w-full text-sm text-left">
                            <thead>
                                <tr
                                    class="border-b border-dashed border-slate-200 text-xs text-slate-400 uppercase tracking-wider">
                                    <th class="pb-3 font-semibold">S/N</th>
                                    <th class="pb-3 font-semibold">Request ID</th>
                                    <th class="pb-3 font-semibold">Title</th>
                                    <th class="pb-3 font-semibold">Category</th>
                                    <th class="pb-3 font-semibold">Status</th>
                                    <th class="pb-3 font-semibold">Submitted</th>
                                    <th class="pb-3 font-semibold text-right">Action</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-50">
                                @forelse($requests as $request)
                                    <tr class="group hover:bg-slate-50/50 transition-colors">
                                        <td class="py-4 font-medium text-slate-500">{{ $loop->iteration }}</td>
                                        <td class="py-4 font-medium text-slate-900">{{ $request->request_code }}</td>
                                        <td class="py-4 text-slate-600">{{ $request->title ?? 'N/A' }}</td>
                                        <td class="py-4 text-slate-600">{{ $request->category->name }}</td>
                                        <td class="py-4">
                                            <x-ui.badge :variant="$request->status->badgeVariant()">
                                                {{ $request->status->label() }}
                                            </x-ui.badge>
                                        </td>
                                        <td class="py-4 text-slate-500">{{ $request->created_at->format('M d, Y') }}
                                        </td>
                                        <td class="py-4 text-right">
                                            <x-ui.button variant="faint" size="sm"
                                                href="{{ route('ministry.requests.show', $request) }}">View</x-ui.button>

                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7">
                                            <x-ui.empty-state icon="search" title="No requests found"
                                                description="We couldn't find any requests matching your filters." />
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                @if ($requests->hasPages())
                    <div class="pt-6 border-t border-slate-50 mt-4">
                        {{ $requests->links() }}
                    </div>
                @endif
            </x-ui.card>
        </div>
</x-app-layout>