@extends('dashboard.layouts.app')

@section('title', 'Períodos de Facturación')

@section('content')
<div class="min-h-screen p-6">
    <div class="mx-auto max-w-screen-2xl">
        <!-- Header -->
        <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Períodos de Facturación</h1>
                <p class="text-sm text-gray-600 dark:text-gray-400">Gestión de períodos para facturación de clientes abonados</p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('dashboard.cochera-periodos.create') }}" 
                   class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600 focus:ring-4 focus:ring-brand-500/20 dark:bg-brand-600 dark:hover:bg-brand-700">
                    <i data-lucide="plus" class="h-4 w-4"></i>
                    Nuevo Período
                </a>
            </div>
        </div>

        <!-- Filtros -->
        <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
            <form method="GET" action="{{ route('dashboard.cochera-periodos.index') }}" class="space-y-4">
                <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-6">
                    <!-- Búsqueda general -->
                    <div class="lg:col-span-2">
                        <label for="search" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Búsqueda</label>
                        <input 
                            type="text" 
                            name="search" 
                            id="search"
                            value="{{ request('search') }}"
                            placeholder="Buscar por cochera, tipo o observaciones..."
                            class="h-11 appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                        >
                    </div>

                    <!-- Filtro por cochera -->
                    <div>
                        <label for="cochera_id" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Cochera</label>
                        <div class="relative">
                            <select 
                                name="cochera_id" 
                                id="cochera_id"
                                class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                            >
                                <option value="">Todas las cocheras</option>
                                @foreach($cocheras as $cochera)
                                    <option value="{{ $cochera->id }}" {{ request('cochera_id') == $cochera->id ? 'selected' : '' }}>
                                        {{ $cochera->nombre }}
                                    </option>
                                @endforeach
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <i data-lucide="chevron-down" class="h-4 w-4 text-gray-400"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Filtro por tipo -->
                    <div>
                        <label for="tipo_periodo" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Tipo</label>
                        <div class="relative">
                            <select 
                                name="tipo_periodo" 
                                id="tipo_periodo"
                                class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                            >
                                <option value="">Todos los tipos</option>
                                <option value="mensual" {{ request('tipo_periodo') == 'mensual' ? 'selected' : '' }}>Mensual</option>
                                <option value="quincenal" {{ request('tipo_periodo') == 'quincenal' ? 'selected' : '' }}>Quincenal</option>
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <i data-lucide="chevron-down" class="h-4 w-4 text-gray-400"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Filtro por estado -->
                    <div>
                        <label for="estado" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Estado</label>
                        <div class="relative">
                            <select 
                                name="estado" 
                                id="estado"
                                class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                            >
                                <option value="">Todos los estados</option>
                                <option value="abierto" {{ request('estado') == 'abierto' ? 'selected' : '' }}>Abierto</option>
                                <option value="cerrado" {{ request('estado') == 'cerrado' ? 'selected' : '' }}>Cerrado</option>
                                <option value="facturado" {{ request('estado') == 'facturado' ? 'selected' : '' }}>Facturado</option>
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <i data-lucide="chevron-down" class="h-4 w-4 text-gray-400"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Filtro por año -->
                    <div>
                        <label for="año" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Año</label>
                        <div class="relative">
                            <select 
                                name="año" 
                                id="año"
                                class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                            >
                                <option value="">Todos los años</option>
                                @foreach($años as $año)
                                    <option value="{{ $año }}" {{ request('año') == $año ? 'selected' : '' }}>
                                        {{ $año }}
                                    </option>
                                @endforeach
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <i data-lucide="chevron-down" class="h-4 w-4 text-gray-400"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Botones -->
                    <div class="flex items-end gap-2">
                        <button 
                            type="submit"
                            class="inline-flex h-11 items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600 focus:ring-4 focus:ring-brand-500/20 dark:bg-brand-600 dark:hover:bg-brand-700"
                        >
                            <i data-lucide="search" class="h-4 w-4"></i>
                            Buscar
                        </button>
                        <a 
                            href="{{ route('dashboard.cochera-periodos.index') }}"
                            class="inline-flex h-11 items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
                        >
                            <i data-lucide="x" class="h-4 w-4"></i>
                            Limpiar
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <!-- Tabla -->
        <div class="rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900">
            <div class="overflow-x-auto">
                <table class="w-full table-auto">
                    <thead class="bg-gray-50 dark:bg-gray-800">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                Cochera
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                Tipo
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                Período
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                Estado
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                Vehículos
                            </th>
                            <th class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                Acciones
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
                        @forelse($periodos as $periodo)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
                                <td class="whitespace-nowrap px-6 py-4">
                                    <div class="text-sm font-medium text-gray-900 dark:text-white">
                                        {{ $periodo->cochera->nombre }}
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-6 py-4">
                                    <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 
                                        {{ $periodo->tipo_periodo === 'mensual' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' }}">
                                        {{ ucfirst($periodo->tipo_periodo) }}
                                    </span>
                                </td>
                                <td class="whitespace-nowrap px-6 py-4">
                                    <div class="text-sm text-gray-900 dark:text-white">
                                        {{ \Carbon\Carbon::parse($periodo->fecha_inicio)->format('d/m/Y') }}
                                        -
                                        {{ \Carbon\Carbon::parse($periodo->fecha_fin)->format('d/m/Y') }}
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-6 py-4">
                                    <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 
                                        @if($periodo->estado === 'abierto') bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                                        @elseif($periodo->estado === 'cerrado') bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200
                                        @else bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200
                                        @endif">
                                        {{ ucfirst($periodo->estado) }}
                                    </span>
                                </td>
                                <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                                    {{ $periodo->vehiculos_abonados_count ?? 0 }}
                                </td>
                                <td class="whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-2">
                                        <!-- Ver -->
                                        <a href="{{ route('dashboard.cochera-periodos.show', $periodo) }}" 
                                           class="inline-flex items-center gap-1 rounded-md bg-blue-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-600 focus:ring-4 focus:ring-blue-500/20">
                                            <i data-lucide="eye" class="h-3 w-3"></i>
                                            Ver
                                        </a>

                                        @if($periodo->estado === 'abierto')
                                            <!-- Editar -->
                                            <a href="{{ route('dashboard.cochera-periodos.edit', $periodo) }}" 
                                               class="inline-flex items-center gap-1 rounded-md bg-yellow-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-yellow-600 focus:ring-4 focus:ring-yellow-500/20">
                                                <i data-lucide="edit-3" class="h-3 w-3"></i>
                                                Editar
                                            </a>

                                            <!-- Cerrar -->
                                            <form action="{{ route('dashboard.cochera-periodos.cerrar', $periodo->id) }}" 
                                                  method="POST" 
                                                  class="inline-block"
                                                  onsubmit="return confirm('¿Está seguro de cerrar este período?')">
                                                @csrf
                                                @method('PATCH')
                                                <button type="submit" 
                                                        class="inline-flex items-center gap-1 rounded-md bg-orange-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-orange-600 focus:ring-4 focus:ring-orange-500/20">
                                                    <i data-lucide="lock" class="h-3 w-3"></i>
                                                    Cerrar
                                                </button>
                                            </form>
                                        @endif

                                        @if($periodo->estado === 'cerrado')
                                            <!-- Marcar como facturado -->
                                            <form action="{{ route('dashboard.cochera-periodos.facturar', $periodo->id) }}" 
                                                  method="POST" 
                                                  class="inline-block"
                                                  onsubmit="return confirm('¿Está seguro de marcar como facturado este período?')">
                                                @csrf
                                                @method('PATCH')
                                                <button type="submit" 
                                                        class="inline-flex items-center gap-1 rounded-md bg-green-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-green-600 focus:ring-4 focus:ring-green-500/20">
                                                    <i data-lucide="check-circle" class="h-3 w-3"></i>
                                                    Facturar
                                                </button>
                                            </form>
                                        @endif

                                        @if($periodo->estado === 'abierto')
                                            <!-- Eliminar -->
                                            <form action="{{ route('dashboard.cochera-periodos.destroy', $periodo) }}" 
                                                  method="POST" 
                                                  class="inline-block"
                                                  onsubmit="return confirm('¿Está seguro de eliminar este período?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" 
                                                        class="inline-flex items-center gap-1 rounded-md bg-red-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-600 focus:ring-4 focus:ring-red-500/20">
                                                    <i data-lucide="trash-2" class="h-3 w-3"></i>
                                                    Eliminar
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-12 text-center">
                                    <div class="flex flex-col items-center">
                                        <i data-lucide="calendar-x" class="h-12 w-12 text-gray-400 dark:text-gray-600 mb-4"></i>
                                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
                                            No hay períodos de facturación
                                        </h3>
                                        <p class="text-gray-500 dark:text-gray-400 mb-4">
                                            Comience creando su primer período de facturación.
                                        </p>
                                        <a href="{{ route('dashboard.cochera-periodos.create') }}" 
                                           class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white hover:bg-brand-600 focus:ring-4 focus:ring-brand-500/20 dark:bg-brand-600 dark:hover:bg-brand-700">
                                            <i data-lucide="plus" class="h-4 w-4"></i>
                                            Crear período
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($periodos->hasPages())
                <div class="border-t border-gray-200 bg-white px-4 py-3 dark:border-gray-700 dark:bg-gray-900">
                    {{ $periodos->appends(request()->query())->links() }}
                </div>
            @endif
        </div>
    </div>
</div>
@endsection