@extends('dashboard.layouts.app')

@section('title', 'Nueva Factura Periódica')

@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-facturas-periodicas.index') }}" 
                   class="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200">
                    <i data-lucide="arrow-left" class="h-4 w-4"></i>
                    Volver al listado
                </a>
            </div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Nueva Factura Periódica</h1>
            <p class="text-sm text-gray-600 dark:text-gray-400">Crear una nueva factura periódica para un vehículo abonado</p>
        </div>

        <!-- Formulario -->
        <div class="rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900">
            <div class="p-6">
                <form action="{{ route('dashboard.cochera-facturas-periodicas.store') }}" method="POST" class="space-y-6">
                    @csrf

                    <!-- Información básica -->
                    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                        <!-- Cochera -->
                        <div>
                            <label for="cochera_id" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                                Cochera <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <select 
                                    name="cochera_id" 
                                    id="cochera_id"
                                    required
                                    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-red-500 @enderror"
                                >
                                    <option value="">Seleccionar cochera</option>
                                    @foreach($cocheras as $cochera)
                                        <option value="{{ $cochera->id }}" {{ old('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>
                            @error('cochera_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Vehículo Abonado -->
                        <div>
                            <label for="vehiculo_abonado_id" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                                Vehículo Abonado <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <select 
                                    name="vehiculo_abonado_id" 
                                    id="vehiculo_abonado_id"
                                    required
                                    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('vehiculo_abonado_id') border-red-500 @enderror"
                                >
                                    <option value="">Seleccionar vehículo</option>
                                    @foreach($vehiculosAbonados as $vehiculo)
                                        <option value="{{ $vehiculo->id }}" 
                                                data-cochera="{{ $vehiculo->cochera_id }}"
                                                data-monto="{{ $vehiculo->monto_abono }}"
                                                {{ old('vehiculo_abonado_id') == $vehiculo->id ? 'selected' : '' }}>
                                            {{ $vehiculo->placa_camion }} - {{ $vehiculo->cliente->nombre ?? 'Sin cliente' }}
                                        </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>
                            @error('vehiculo_abonado_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Período y Monto -->
                    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                        <!-- Período de Facturación (Opcional) -->
                        <div>
                            <label for="periodo_facturacion_id" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                                Período de Facturación
                            </label>
                            <div class="relative">
                                <select 
                                    name="periodo_facturacion_id" 
                                    id="periodo_facturacion_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('periodo_facturacion_id') border-red-500 @enderror"
                                >
                                    <option value="">Sin período específico</option>
                                    @foreach($periodosFacturacion as $periodo)
                                        <option value="{{ $periodo->id }}" 
                                                data-cochera="{{ $periodo->cochera_id }}"
                                                {{ old('periodo_facturacion_id') == $periodo->id ? 'selected' : '' }}>
                                            {{ $periodo->cochera->nombre }} - 
                                            {{ \Carbon\Carbon::parse($periodo->fecha_inicio)->format('M Y') }} 
                                            ({{ ucfirst($periodo->tipo_periodo) }})
                                        </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>
                            @error('periodo_facturacion_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                            <p class="mt-1 text-xs text-gray-500">
                                Opcional. Si se selecciona, se calcularán automáticamente los tickets del período.
                            </p>
                        </div>

                        <!-- Monto Total -->
                        <div>
                            <label for="monto_total" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                                Monto Total <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">S/.</span>
                                <input 
                                    type="number" 
                                    name="monto_total" 
                                    id="monto_total"
                                    step="0.01"
                                    min="0.01"
                                    value="{{ old('monto_total') }}"
                                    required
                                    class="h-11 appearance-none rounded-lg border bg-transparent pl-12 pr-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('monto_total') border-red-500 @enderror"
                                    placeholder="0.00"
                                >
                            </div>
                            @error('monto_total')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Observaciones -->
                    <div>
                        <label for="observaciones" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                            Observaciones
                        </label>
                        <textarea 
                            name="observaciones" 
                            id="observaciones"
                            rows="3"
                            class="h-24 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-red-500 @enderror"
                            placeholder="Observaciones adicionales sobre la factura..."
                        >{{ old('observaciones') }}</textarea>
                        @error('observaciones')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- NUEVO: Marcar período como facturado -->
                    <div class="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-700 dark:bg-blue-900/20">
                        <div class="flex items-start space-x-3">
                            <input 
                                type="checkbox" 
                                name="marcar_periodo_facturado" 
                                id="marcar_periodo_facturado"
                                value="1"
                                {{ old('marcar_periodo_facturado', true) ? 'checked' : '' }}
                                class="mt-1 h-4 w-4 rounded border-gray-300 text-brand-500 focus:ring-brand-500"
                            >
                            <div>
                                <label for="marcar_periodo_facturado" class="text-sm font-medium text-blue-900 dark:text-blue-200">
                                    Marcar el período como facturado
                                </label>
                                <p class="mt-1 text-xs text-blue-700 dark:text-blue-300">
                                    Al facturar esta factura, el sistema marcará automáticamente el período como "facturado" 
                                    y actualizará el estado de pago de todos los tickets del período.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Información del vehículo seleccionado -->
                    <div id="vehiculo-info" class="hidden rounded-lg bg-blue-50 p-4 dark:bg-blue-900/20">
                        <h4 class="text-sm font-medium text-blue-900 dark:text-blue-200 mb-2">
                            <i data-lucide="info" class="inline h-4 w-4 mr-1"></i>
                            Información del Vehículo
                        </h4>
                        <div class="grid grid-cols-1 gap-2 text-sm md:grid-cols-3">
                            <div>
                                <span class="font-medium text-blue-700 dark:text-blue-300">Cliente:</span>
                                <span id="info-cliente" class="text-blue-600 dark:text-blue-400"></span>
                            </div>
                            <div>
                                <span class="font-medium text-blue-700 dark:text-blue-300">Conductor:</span>
                                <span id="info-conductor" class="text-blue-600 dark:text-blue-400"></span>
                            </div>
                            <div>
                                <span class="font-medium text-blue-700 dark:text-blue-300">Monto Abono:</span>
                                <span id="info-monto" class="text-blue-600 dark:text-blue-400"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Botones -->
                    <div class="flex justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
                        <a href="{{ route('dashboard.cochera-facturas-periodicas.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 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>
                            Cancelar
                        </a>
                        <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>
                            Crear Factura
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const cocheraSelect = document.getElementById('cochera_id');
    const vehiculoSelect = document.getElementById('vehiculo_abonado_id');
    const periodoSelect = document.getElementById('periodo_facturacion_id');
    const montoInput = document.getElementById('monto_total');
    const vehiculoInfo = document.getElementById('vehiculo-info');

    // Filtrar vehículos por cochera
    cocheraSelect.addEventListener('change', function() {
        const cocheraId = this.value;
        const vehiculoOptions = vehiculoSelect.querySelectorAll('option');
        
        vehiculoSelect.value = '';
        vehiculoInfo.classList.add('hidden');
        montoInput.value = '';
        
        vehiculoOptions.forEach(option => {
            if (option.value === '') {
                option.style.display = 'block';
            } else {
                const vehiculoCochera = option.dataset.cochera;
                option.style.display = (!cocheraId || vehiculoCochera === cocheraId) ? 'block' : 'none';
            }
        });

        // Filtrar períodos por cochera
        const periodoOptions = periodoSelect.querySelectorAll('option');
        periodoSelect.value = '';
        
        periodoOptions.forEach(option => {
            if (option.value === '') {
                option.style.display = 'block';
            } else {
                const periodoCochera = option.dataset.cochera;
                option.style.display = (!cocheraId || periodoCochera === cocheraId) ? 'block' : 'none';
            }
        });
    });

    // Actualizar información del vehículo y monto
    vehiculoSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        
        if (this.value) {
            // Mostrar información del vehículo
            const cliente = selectedOption.textContent.split(' - ')[1] || 'Sin cliente';
            const monto = selectedOption.dataset.monto || '0.00';
            
            document.getElementById('info-cliente').textContent = cliente;
            document.getElementById('info-conductor').textContent = 'N/A'; // No tenemos esta info en el select
            document.getElementById('info-monto').textContent = 'S/. ' + parseFloat(monto).toFixed(2);
            
            // Auto-completar monto
            montoInput.value = parseFloat(monto).toFixed(2);
            
            vehiculoInfo.classList.remove('hidden');
            
            // Auto-seleccionar cochera si no está seleccionada
            const vehiculoCochera = selectedOption.dataset.cochera;
            if (!cocheraSelect.value && vehiculoCochera) {
                cocheraSelect.value = vehiculoCochera;
            }
        } else {
            vehiculoInfo.classList.add('hidden');
            montoInput.value = '';
        }
    });

    // Validación de compatibilidad cochera-período
    periodoSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const cocheraId = cocheraSelect.value;
        
        if (this.value && cocheraId) {
            const periodoCochera = selectedOption.dataset.cochera;
            if (periodoCochera !== cocheraId) {
                alert('El período seleccionado no corresponde a la cochera elegida');
                this.value = '';
            }
        }
    });

    // Validación de compatibilidad cochera-vehículo
    vehiculoSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const cocheraId = cocheraSelect.value;
        
        if (this.value && cocheraId) {
            const vehiculoCochera = selectedOption.dataset.cochera;
            if (vehiculoCochera !== cocheraId) {
                alert('El vehículo seleccionado no corresponde a la cochera elegida');
                this.value = '';
                vehiculoInfo.classList.add('hidden');
                montoInput.value = '';
            }
        }
    });
});
</script>
@endsection