@extends('dashboard.layouts.app')

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

@section('content')
<div class="min-h-screen p-6">
    <div class="mx-auto max-w-4xl">
        <!-- Header -->
        <div class="mb-6">
            <div class="flex items-center gap-3 mb-2">
                <a href="{{ route('dashboard.cochera-periodos.index') }}" 
                   class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700">
                    <i data-lucide="arrow-left" class="w-4 h-4"></i>
                </a>
                <div>
                    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Editar Período de Facturación</h1>
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        {{ $periodo->cochera->nombre }} - {{ $periodo->getNombrePeriodo() }}
                    </p>
                </div>
            </div>
        </div>

        <!-- Formulario -->
        <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
            <form method="POST" action="{{ route('dashboard.cochera-periodos.update', $periodo->id) }}" class="space-y-6">
                @csrf
                @method('PUT')
                
                <!-- Estado actual -->
                <div class="rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
                    <h3 class="text-sm font-medium text-gray-900 dark:text-white mb-2">Estado Actual</h3>
                    <div class="flex items-center gap-4">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                            {{ $periodo->estado === 'abierto' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 
                               ($periodo->estado === 'cerrado' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' : 
                               'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200') }}">
                            {{ $periodo->getEstadoFormateado() }}
                        </span>
                        @if($periodo->estaEnCurso())
                            <span class="text-sm text-gray-600 dark:text-gray-400">
                                {{ $periodo->getDiasRestantes() }} días restantes
                            </span>
                        @endif
                    </div>
                </div>

                <!-- Cochera -->
                <div>
                    <label for="cochera_id" class="mb-2.5 block text-sm font-medium text-gray-800 dark:text-white/90">
                        Cochera <span class="text-red-500">*</span>
                    </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 @error('cochera_id') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @enderror"
                            required
                        >
                            <option value="">Seleccione una cochera</option>
                            @foreach($cocheras as $cochera)
                                <option value="{{ $cochera->id }}" 
                                    {{ old('cochera_id', $periodo->cochera_id) == $cochera->id ? 'selected' : '' }}>
                                    {{ $cochera->nombre }} - {{ $cochera->direccion }}
                                </option>
                            @endforeach
                        </select>
                        <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                            <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </div>
                    @error('cochera_id')
                        <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Tipo de período -->
                <div>
                    <label for="tipo_periodo" class="mb-2.5 block text-sm font-medium text-gray-800 dark:text-white/90">
                        Tipo de Período <span class="text-red-500">*</span>
                    </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 @error('tipo_periodo') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @enderror"
                            required
                        >
                            <option value="">Seleccione el tipo de período</option>
                            <option value="mensual" {{ old('tipo_periodo', $periodo->tipo_periodo) == 'mensual' ? 'selected' : '' }}>
                                Mensual
                            </option>
                            <option value="quincenal" {{ old('tipo_periodo', $periodo->tipo_periodo) == 'quincenal' ? 'selected' : '' }}>
                                Quincenal
                            </option>
                        </select>
                        <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                            <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </div>
                    @error('tipo_periodo')
                        <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Fechas -->
                <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                    <!-- Fecha de inicio -->
                    <div>
                        <label for="fecha_inicio" class="mb-2.5 block text-sm font-medium text-gray-800 dark:text-white/90">
                            Fecha de Inicio <span class="text-red-500">*</span>
                        </label>
                        <input 
                            type="date" 
                            name="fecha_inicio" 
                            id="fecha_inicio"
                            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 @error('fecha_inicio') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @enderror"
                            value="{{ old('fecha_inicio', $periodo->fecha_inicio->format('Y-m-d')) }}"
                            required
                        >
                        @error('fecha_inicio')
                            <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Fecha de fin -->
                    <div>
                        <label for="fecha_fin" class="mb-2.5 block text-sm font-medium text-gray-800 dark:text-white/90">
                            Fecha de Fin <span class="text-red-500">*</span>
                        </label>
                        <input 
                            type="date" 
                            name="fecha_fin" 
                            id="fecha_fin"
                            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 @error('fecha_fin') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @enderror"
                            value="{{ old('fecha_fin', $periodo->fecha_fin->format('Y-m-d')) }}"
                            required
                        >
                        @error('fecha_fin')
                            <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Observaciones -->
                <div>
                    <label for="observaciones" class="mb-2.5 block text-sm font-medium text-gray-800 dark:text-white/90">
                        Observaciones
                    </label>
                    <textarea 
                        name="observaciones" 
                        id="observaciones"
                        rows="4"
                        class="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 @error('observaciones') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @enderror"
                        placeholder="Observaciones adicionales sobre el período (opcional)"
                    >{{ old('observaciones', $periodo->observaciones) }}</textarea>
                    @error('observaciones')
                        <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                    @enderror
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                        Máximo 1000 caracteres
                    </p>
                </div>

                <!-- Estadísticas actuales -->
                <div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-900/20">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i data-lucide="bar-chart-3" class="h-5 w-5 text-blue-400"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">
                                Estadísticas del período
                            </h3>
                            <div class="mt-2 text-sm text-blue-700 dark:text-blue-300">
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <div>
                                        <span class="font-medium">Vehículos abonados:</span>
                                        <span class="block text-lg font-bold">{{ $periodo->total_vehiculos_abonados }}</span>
                                    </div>
                                    <div>
                                        <span class="font-medium">Facturas generadas:</span>
                                        <span class="block text-lg font-bold">{{ $periodo->total_facturas_generadas }}</span>
                                    </div>
                                    <div>
                                        <span class="font-medium">Progreso:</span>
                                        <span class="block text-lg font-bold">{{ $periodo->getProgreso() }}%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Advertencias -->
                @if($periodo->total_facturas_generadas > 0)
                    <div class="rounded-lg bg-yellow-50 p-4 dark:bg-yellow-900/20">
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <i data-lucide="alert-triangle" class="h-5 w-5 text-yellow-400"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
                                    Cuidado al modificar fechas
                                </h3>
                                <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
                                    Este período ya tiene {{ $periodo->total_facturas_generadas }} facturas asociadas. 
                                    Modificar las fechas podría afectar la validez de las facturas generadas.
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Botones -->
                <div class="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
                    <div class="flex items-center gap-3">
                        <a href="{{ route('dashboard.cochera-periodos.index') }}" 
                           class="inline-flex 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 hover:border-gray-400 dark:border-gray-600 dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.06] dark:hover:border-gray-500">
                            <i data-lucide="x" class="h-4 w-4"></i>
                            Cancelar
                        </a>
                        <a href="{{ route('dashboard.cochera-periodos.show', $periodo->id) }}" 
                           class="inline-flex 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 hover:border-gray-400 dark:border-gray-600 dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.06] dark:hover:border-gray-500">
                            <i data-lucide="eye" class="h-4 w-4"></i>
                            Ver Detalles
                        </a>
                    </div>
                    <button type="submit" 
                            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="save" class="h-4 w-4"></i>
                        Actualizar Período
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection