@extends('dashboard.layouts.app')

@section('title', 'Salida Rápida - Cliente Abonado')

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- Header -->
    <div class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center space-x-3">
                    <a href="{{ route('dashboard.cochera.salida.buscar') }}" 
                       class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                        <i data-lucide="arrow-left" class="h-5 w-5"></i>
                    </a>
                    <div>
                        <h1 class="text-xl font-semibold text-gray-900 dark:text-white">
                            🚀 Salida Rápida - Cliente Abonado
                        </h1>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Registro de salida sin comprobante - Ticket #{{ $ticket->numero_ticket }}
                        </p>
                    </div>
                </div>
                <div class="flex items-center space-x-2">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                        <i data-lucide="shield-check" class="h-3 w-3 mr-1"></i>
                        Abonado Vigente
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        
        <!-- 🏦 Advertencia de Caja -->
        @if(!$cajaAbierta)
        <div class="mb-6 rounded-lg border border-warning-200 bg-warning-50 p-4 dark:border-warning-800 dark:bg-warning-900/30">
            <div class="flex items-center gap-2">
                <i data-lucide="alert-triangle" class="w-5 h-5 text-warning-600 dark:text-warning-400"></i>
                <div>
                    <p class="text-sm font-medium text-warning-800 dark:text-warning-200">
                        ⚠️ No tienes una caja abierta
                    </p>
                    <p class="text-sm text-warning-700 dark:text-warning-300">
                        Debes abrir una caja antes de procesar esta salida. 
                        <a href="{{ route('dashboard.cajas.create') }}" class="font-medium underline hover:no-underline">
                            Abrir caja ahora
                        </a>
                    </p>
                </div>
            </div>
        </div>
        @endif
        
        <!-- Estado del Abono -->
        <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6 mb-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i data-lucide="shield-check" class="h-8 w-8 text-green-500"></i>
                </div>
                <div class="ml-4 flex-1">
                    <h2 class="text-lg font-medium text-green-800 dark:text-green-200">
                        ✅ Cliente Abonado Vigente
                    </h2>
                    <p class="mt-1 text-sm text-green-700 dark:text-green-300">
                        {{ $estadoAbono['motivo'] }}
                    </p>
                    @if($estadoAbono['vehiculo_abonado'])
                        <div class="mt-2 text-xs text-green-700 dark:text-green-300">
                            <p>
                                <strong>Tipo:</strong> {{ ucfirst($estadoAbono['vehiculo_abonado']->tipo_abono) }} |
                                <strong>Monto:</strong> S/ {{ number_format($estadoAbono['vehiculo_abonado']->monto_abono, 2) }} |
                                <strong>Vigencia:</strong> hasta {{ \Carbon\Carbon::parse($estadoAbono['vehiculo_abonado']->fecha_vencimiento)->format('d/m/Y') }}
                            </p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            
            <!-- Información del Ticket -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center">
                    <i data-lucide="ticket" class="h-5 w-5 mr-2 text-blue-500"></i>
                    Información del Ticket
                </h3>
                <div class="space-y-4">
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Número de Ticket</p>
                        <p class="text-lg font-semibold text-gray-900 dark:text-white font-mono">#{{ $ticket->numero_ticket }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Placa del Vehículo</p>
                        <p class="text-lg font-semibold text-gray-900 dark:text-white">{{ $ticket->placa_camion }}</p>
                    </div>
                    @if($ticket->placa_carreta)
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Placa de la Carreta</p>
                        <p class="text-lg font-semibold text-gray-900 dark:text-white">{{ $ticket->placa_carreta }}</p>
                    </div>
                    @endif
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Fecha y Hora de Ingreso</p>
                        <p class="text-lg font-semibold text-gray-900 dark:text-white">
                            {{ \Carbon\Carbon::parse($ticket->fecha_ingreso)->format('d/m/Y H:i') }}
                        </p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Tiempo de Permanencia</p>
                        <p class="text-lg font-semibold text-gray-900 dark:text-white">
                            {{ $duracion['dias'] }}d {{ $duracion['horas'] }}h {{ $duracion['minutos'] }}m
                        </p>
                    </div>
                    @if($ticket->conductor_nombre)
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Conductor</p>
                        <p class="text-lg font-semibold text-gray-900 dark:text-white">{{ $ticket->conductor_nombre }}</p>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Formulario de Salida -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center">
                    <i data-lucide="log-out" class="h-5 w-5 mr-2 text-green-500"></i>
                    Registrar Salida
                </h3>

                <form action="{{ route('dashboard.cochera.salida.rapida.procesar', $ticket->public_id) }}" method="POST" id="salidaForm">
                    @csrf
                    
                    <div class="space-y-6">
                        <!-- Fecha y Hora de Salida -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="fecha_salida" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Fecha de Salida *
                                </label>
                                <input type="date" 
                                       id="fecha_salida" 
                                       name="fecha_salida"
                                       value="{{ date('Y-m-d') }}"
                                       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_salida') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @enderror"
                                       required>
                                @error('fecha_salida')
                                    <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="hora_salida" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Hora de Salida *
                                </label>
                                <input type="time" 
                                       id="hora_salida" 
                                       name="hora_salida"
                                       value="{{ date('H:i') }}"
                                       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('hora_salida') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @enderror"
                                       required>
                                @error('hora_salida')
                                    <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Observaciones -->
                        <div>
                            <label for="observaciones_salida" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Observaciones (Opcional)
                            </label>
                            <textarea 
                                id="observaciones_salida" 
                                name="observaciones_salida"
                                rows="3"
                                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"
                                placeholder="Observaciones adicionales sobre la salida..."
                            >{{ old('observaciones_salida') }}</textarea>
                        </div>

                        <!-- Información importante -->
                        <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i data-lucide="info" class="h-5 w-5 text-blue-500"></i>
                                </div>
                                <div class="ml-3">
                                    <h4 class="text-sm font-medium text-blue-800 dark:text-blue-200">
                                        Información sobre la salida rápida
                                    </h4>
                                    <div class="mt-2 text-sm text-blue-700 dark:text-blue-300">
                                        <ul class="list-disc list-inside space-y-1">
                                            <li>No se generará comprobante (el servicio ya está pagado con el abono)</li>
                                            <li>El ticket se marcará como cerrado automáticamente</li>
                                            <li>La salida quedará registrada en el historial</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Botones de Acción -->
                        <div class="flex justify-between items-center pt-4">
                            <a href="{{ route('dashboard.cochera.salida.buscar') }}" 
                               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="arrow-left" class="h-4 w-4"></i>
                                Volver
                            </a>
                            <button type="submit" 
                                    class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-6 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="log-out" class="h-4 w-4"></i>
                                Registrar Salida
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set current time as default if not set
    const horaInput = document.getElementById('hora_salida');
    if (!horaInput.value) {
        const now = new Date();
        const currentTime = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
        horaInput.value = currentTime;
    }
    
    // Form validation
    document.getElementById('salidaForm').addEventListener('submit', function(e) {
        const fechaSalida = document.getElementById('fecha_salida').value;
        const horaSalida = document.getElementById('hora_salida').value;
        
        if (!fechaSalida || !horaSalida) {
            e.preventDefault();
            alert('Por favor complete la fecha y hora de salida.');
            return;
        }
        
        // Confirm submission
        if (!confirm('¿Está seguro de registrar la salida de este vehículo abonado?')) {
            e.preventDefault();
        }
    });
});
</script>
@endsection