@extends('dashboard.layouts.app')

@section('title', 'Editar 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">Editar Factura Periódica</h1>
            <p class="text-sm text-gray-600 dark:text-gray-400">
                Modificar factura de {{ $factura->vehiculoAbonado->placa_camion ?? 'Sin placa' }} - 
                Estado: <span class="font-medium @if($factura->estado === 'pendiente') text-yellow-600 @elseif($factura->estado === 'facturado') text-green-600 @else text-red-600 @endif">{{ ucfirst($factura->estado) }}</span>
            </p>
        </div>

        @if($factura->estado !== 'pendiente')
            <!-- Alerta de solo lectura -->
            <div class="mb-6 rounded-lg bg-yellow-50 p-4 border border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-800">
                <div class="flex">
                    <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">
                            Factura no editable
                        </h3>
                        <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
                            <p>Solo se pueden editar facturas en estado "Pendiente". Esta factura está {{ $factura->estado }}.</p>
                        </div>
                        <div class="mt-4">
                            <div class="flex space-x-2">
                                <a href="{{ route('dashboard.cochera-facturas-periodicas.show', $factura) }}" 
                                   class="rounded-md bg-yellow-100 px-2 py-1.5 text-sm font-medium text-yellow-800 hover:bg-yellow-200 dark:bg-yellow-800 dark:text-yellow-200 dark:hover:bg-yellow-700">
                                    Ver detalles
                                </a>
                                <a href="{{ route('dashboard.cochera-facturas-periodicas.index') }}" 
                                   class="rounded-md bg-white px-2 py-1.5 text-sm font-medium text-yellow-800 hover:bg-gray-50 dark:bg-gray-800 dark:text-yellow-200 dark:hover:bg-gray-700">
                                    Volver al listado
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- 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.update', $factura) }}" method="POST" class="space-y-6">
                    @csrf
                    @method('PUT')

                    <!-- 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
                                    {{ $factura->estado !== 'pendiente' ? 'disabled' : '' }}
                                    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 {{ $factura->estado !== 'pendiente' ? 'opacity-50 cursor-not-allowed' : '' }}"
                                >
                                    <option value="">Seleccionar cochera</option>
                                    @foreach($cocheras as $cochera)
                                        <option value="{{ $cochera->id }}" {{ (old('cochera_id', $factura->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
                                    {{ $factura->estado !== 'pendiente' ? 'disabled' : '' }}
                                    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 {{ $factura->estado !== 'pendiente' ? 'opacity-50 cursor-not-allowed' : '' }}"
                                >
                                    <option value="">Seleccionar vehículo</option>
                                    @foreach($vehiculosAbonados as $vehiculo)
                                        <option value="{{ $vehiculo->id }}" 
                                                data-cochera="{{ $vehiculo->cochera_id }}"
                                                data-monto="{{ $vehiculo->monto_abono }}"
                                                data-cliente="{{ $vehiculo->cliente->nombre ?? 'Sin cliente' }}"
                                                data-conductor="{{ $vehiculo->conductor_nombre ?? 'Sin conductor' }}"
                                                {{ (old('vehiculo_abonado_id', $factura->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"
                                    {{ $factura->estado !== 'pendiente' ? 'disabled' : '' }}
                                    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 {{ $factura->estado !== 'pendiente' ? 'opacity-50 cursor-not-allowed' : '' }}"
                                >
                                    <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', $factura->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', number_format($factura->monto_total, 2, '.', '')) }}"
                                    required
                                    {{ $factura->estado !== 'pendiente' ? 'readonly' : '' }}
                                    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 {{ $factura->estado !== 'pendiente' ? 'opacity-50 cursor-not-allowed' : '' }}"
                                    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"
                            {{ $factura->estado !== 'pendiente' ? 'readonly' : '' }}
                            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 {{ $factura->estado !== 'pendiente' ? 'opacity-50 cursor-not-allowed' : '' }}"
                            placeholder="Observaciones adicionales sobre la factura..."
                        >{{ old('observaciones', $factura->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', $factura->marcar_periodo_facturado ?? true) ? 'checked' : '' }}
                                {{ $factura->estado !== 'pendiente' ? 'disabled' : '' }}
                                class="mt-1 h-4 w-4 rounded border-gray-300 text-brand-500 focus:ring-brand-500 {{ $factura->estado !== 'pendiente' ? 'opacity-50 cursor-not-allowed' : '' }}"
                            >
                            <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="{{ $factura->vehiculoAbonado ? '' : '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">
                                    {{ $factura->vehiculoAbonado->cliente->nombre ?? 'Sin cliente' }}
                                </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">
                                    {{ $factura->vehiculoAbonado->conductor_nombre ?? 'Sin conductor' }}
                                </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">
                                    S/. {{ number_format($factura->vehiculoAbonado->monto_abono ?? 0, 2) }}
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- Información del estado -->
                    <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800">
                        <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-3">
                            <i data-lucide="file-text" class="inline h-4 w-4 mr-1"></i>
                            Estado de la Factura
                        </h4>
                        <div class="grid grid-cols-1 gap-3 text-sm md:grid-cols-3">
                            <div>
                                <span class="font-medium text-gray-700 dark:text-gray-300">Estado actual:</span>
                                <span class="ml-1 @if($factura->estado === 'pendiente') text-yellow-600 @elseif($factura->estado === 'facturado') text-green-600 @else text-red-600 @endif font-medium">
                                    {{ ucfirst($factura->estado) }}
                                </span>
                            </div>
                            <div>
                                <span class="font-medium text-gray-700 dark:text-gray-300">Tickets registrados:</span>
                                <span class="ml-1 text-gray-600 dark:text-gray-400">{{ $factura->cantidad_tickets }}</span>
                            </div>
                            <div>
                                <span class="font-medium text-gray-700 dark:text-gray-300">Fecha creación:</span>
                                <span class="ml-1 text-gray-600 dark:text-gray-400">{{ $factura->created_at->format('d/m/Y H:i') }}</span>
                            </div>
                        </div>
                        
                        @if($factura->comprobante)
                            <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
                                <span class="font-medium text-gray-700 dark:text-gray-300">Comprobante generado:</span>
                                <span class="ml-1 text-blue-600 dark:text-blue-400 font-medium">
                                    {{ $factura->comprobante->serie }}-{{ str_pad($factura->comprobante->numero, 8, '0', STR_PAD_LEFT) }}
                                </span>
                                <span class="ml-2 text-gray-600 dark:text-gray-400">
                                    ({{ $factura->fecha_facturacion ? \Carbon\Carbon::parse($factura->fecha_facturacion)->format('d/m/Y') : '' }})
                                </span>
                            </div>
                        @endif
                    </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>
                        
                        @if($factura->estado === 'pendiente')
                            <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 Factura
                            </button>
                        @endif
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@if($factura->estado === 'pendiente')
<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');

    // Función para actualizar información del vehículo
    function updateVehiculoInfo() {
        const selectedOption = vehiculoSelect.options[vehiculoSelect.selectedIndex];
        
        if (vehiculoSelect.value && selectedOption.dataset.cliente) {
            const cliente = selectedOption.dataset.cliente;
            const conductor = selectedOption.dataset.conductor;
            const monto = selectedOption.dataset.monto || '0.00';
            
            document.getElementById('info-cliente').textContent = cliente;
            document.getElementById('info-conductor').textContent = conductor;
            document.getElementById('info-monto').textContent = 'S/. ' + parseFloat(monto).toFixed(2);
            
            vehiculoInfo.classList.remove('hidden');
        } else {
            vehiculoInfo.classList.add('hidden');
        }
    }

    // Inicializar información del vehículo
    updateVehiculoInfo();

    // Resto del JavaScript similar al create...
    // (funcionalidad de filtrado y validación)
});
</script>
@endif
@endsection