@extends('layouts.app')

@section('content')

    <x-alerts />

    <!-- Main Content -->
    <main class="px-6 py-6 bg-white transition-colors duration-200" x-data="closedRequestsData()">

        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h1 class="text-3xl font-bold text-secondary mb-2">Solicitudes Finalizadas</h1>
                    <p class="text-gray-600">Historial de solicitudes completadas</p>
                </div>
                <a href="{{ route('request.index') }}" class="flex items-center gap-2 px-4 py-2 bg-primary text-secondary rounded-lg font-semibold hover:bg-primary/90 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="M9 19l-7-7m0 0l7-7m-7 7h16"></path>
                    </svg>
                    Volver al Panel
                </a>
            </div>

            <!-- Stats Cards -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6 border border-green-200">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-green-600 font-semibold mb-1">Total Finalizadas</p>
                            <p class="text-3xl font-bold text-green-700" x-text="requests.length"></p>
                        </div>
                        <div class="p-3 bg-green-200 rounded-lg">
                            <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 border border-blue-200">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-blue-600 font-semibold mb-1">Este Mes</p>
                            <p class="text-3xl font-bold text-blue-700" x-text="thisMonthCount"></p>
                        </div>
                        <div class="p-3 bg-blue-200 rounded-lg">
                            <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6 border border-purple-200">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-purple-600 font-semibold mb-1">Promedio Días</p>
                            <p class="text-3xl font-bold text-purple-700" x-text="averageDays"></p>
                        </div>
                        <div class="p-3 bg-purple-200 rounded-lg">
                            <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="bg-white rounded-xl border border-gray-200 p-6 mb-6">
            <form method="GET" action="{{ route('request.closed') }}" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <!-- Search -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Buscar por Radicado o Título</label>
                    <input 
                        type="text" 
                        name="search"
                        value="{{ request('search') }}"
                        placeholder="Ej: SOL_000001"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"
                    >
                </div>

                <!-- Date From -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Desde</label>
                    <input 
                        type="date" 
                        name="created_date"
                        value="{{ request('created_date') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"
                    >
                </div>

                <!-- Date To -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Hasta</label>
                    <input 
                        type="date" 
                        name="closed_date"
                        value="{{ request('closed_date') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"
                    >
                </div>

                <!-- Submit Button -->
                <div class="flex items-end">
                    <button 
                        type="submit"
                        class="w-full px-4 py-2 bg-primary text-secondary rounded-lg font-semibold hover:bg-primary/90 transition-colors"
                    >
                        Filtrar
                    </button>
                </div>
            </form>
        </div>

        <!-- Grid View -->
        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-5">
            <template x-for="request in filteredRequests" :key="request.id">
                <div class="bg-white rounded-2xl border border-gray-200 hover:border-primary hover:shadow-lg transition-all duration-200 overflow-hidden flex flex-col">
                    <!-- Card Header -->
                    <div class="px-5 pt-4 pb-3 border-b border-gray-100 flex items-start justify-between gap-3 bg-gradient-to-r from-green-50 to-transparent">
                        <div class="space-y-0.5">
                            <h3 class="text-base sm:text-lg font-bold text-secondary leading-tight" x-text="request.folio"></h3>
                            <p class="text-xs sm:text-sm text-gray-700 font-bold truncate" x-text="request.titulo"></p>
                            <p class="text-[11px] text-gray-500" x-text="request.tipo"></p>
                        </div>
                        <div class="flex flex-col items-end gap-1">
                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[11px] font-semibold bg-green-100 text-green-700">
                                Finalizado
                            </span>
                            <template x-if="request.urgente">
                                <span class="px-4 py-0.5 text-[11px] font-semibold bg-red-500 text-white rounded-full self-end text-center">
                                    Urgente
                                </span>
                            </template>
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="px-5 py-4 space-y-2.5 flex-1">
                        <div class="flex items-center gap-2 text-xs sm:text-sm">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                            </svg>
                            <span class="text-gray-500 font-semibold mr-1">Solicitante:</span>
                            <span class="text-secondary font-medium truncate" x-text="request.solicitante"></span>
                        </div>

                        <div class="flex items-center gap-2 text-xs sm:text-sm">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                            <span class="text-gray-500 font-semibold mr-1">Creación:</span>
                            <span class="text-gray-700" x-text="request.fecha"></span>
                        </div>

                        <div class="flex items-center gap-2 text-xs sm:text-sm">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <span class="text-gray-500 font-semibold mr-1">Finalización:</span>
                            <span class="text-gray-700" x-text="request.fecha_finalizacion"></span>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="px-5 py-3 border-t border-gray-100 bg-gray-50">
                        <button
                            type="button"
                            @click="$dispatch('open-details-modal', request)"
                            class="w-full px-4 py-2 bg-primary text-secondary rounded-lg text-xs sm:text-sm font-semibold tracking-wide hover:bg-primary/90 transition-colors"
                        >
                            Ver detalles
                        </button>
                    </div>
                </div>
            </template>

            <!-- Empty State -->
            <template x-if="filteredRequests.length === 0">
                <div class="col-span-full text-center py-12">
                    <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
                    <p class="text-gray-500 text-lg font-medium">No hay solicitudes finalizadas</p>
                    <p class="text-gray-400 text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
                </div>
            </template>
        </div>

        <!-- Componente Modal de Detalles -->
        <x-request-details-modal />

    </main>

        <!-- Paginación -->
        <x-pagination :requests="$closedRequests" />

    </main>

    <script>
        function closedRequestsData() {
            return {
                requests: @json($closedRequestsData),
                searchTerm: '',
                dateFrom: '',
                dateTo: '',

                get filteredRequests() {
                    return this.requests;
                },

                get thisMonthCount() {
                    const now = new Date();
                    const currentMonth = now.getMonth();
                    const currentYear = now.getFullYear();

                    return this.requests.filter(request => {
                        const date = new Date(request.fecha);
                        return date.getMonth() === currentMonth && date.getFullYear() === currentYear;
                    }).length;
                },

                get averageDays() {
                    if (this.requests.length === 0) return 0;
                    const total = this.requests.reduce((sum, request) => sum + parseInt(request.dias_transcurridos), 0);
                    return Math.round(total / this.requests.length);
                }
            }
        }
    </script>

@endsection