@extends('dashboard.layouts.app')

@section('title', 'Salida Registrada - Confirmación')

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-2xl w-full mx-4">
        
        <!-- Encabezado de Éxito -->
        <div class="text-center mb-8">
            <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 dark:bg-green-900 mb-4">
                <i data-lucide="check-circle" class="h-8 w-8 text-green-600 dark:text-green-400"></i>
            </div>
            
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                ✅ Salida Registrada Exitosamente
            </h1>
            
            <p class="text-lg text-gray-600 dark:text-gray-400">
                El vehículo puede proceder a la salida de la cochera
            </p>
        </div>

        <!-- Información del Ticket -->
        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 mb-6">
            <h2 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>
                Resumen del Ticket
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Número de Ticket</p>
                    <p class="text-lg font-mono font-semibold text-gray-900 dark:text-white">#{{ $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>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Fecha de Ingreso</p>
                    <p class="text-sm text-gray-900 dark:text-white">{{ $ticket->fecha_ingreso->format('d/m/Y H:i') }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Fecha de Salida</p>
                    <p class="text-sm text-gray-900 dark:text-white">{{ $ticket->fecha_salida->format('d/m/Y H:i') }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Tiempo Total</p>
                    <p class="text-lg font-semibold text-gray-900 dark:text-white">
                        {{ $duracion['dias'] }}d {{ $duracion['horas'] }}h {{ $duracion['minutos'] }}m
                    </p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Estado del Pago</p>
                    <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>
                        Cliente Abonado - {{ ucfirst($ticket->estado_pago) }}
                    </span>
                </div>
            </div>

            @if($ticket->observaciones_salida)
            <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-600">
                <p class="text-sm text-gray-500 dark:text-gray-400">Observaciones</p>
                <p class="text-sm text-gray-900 dark:text-white">{{ $ticket->observaciones_salida }}</p>
            </div>
            @endif
        </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 mb-6">
            <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">
                    <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">
                        Información del Proceso
                    </h3>
                    <div class="mt-2 text-sm text-blue-700 dark:text-blue-300">
                        <ul class="list-disc list-inside space-y-1">
                            <li><strong>No se generó comprobante</strong> - El servicio está cubierto por el abono {{ $ticket->vehiculoAbonado ? $ticket->vehiculoAbonado->tipo_abono : 'mensual' }}</li>
                            <li><strong>Monto cobrado:</strong> S/ {{ number_format($ticket->monto_cobrado ?? 0, 2) }} (Cliente abonado vigente)</li>
                            <li><strong>Método de pago:</strong> {{ $ticket->metodo_pago ? ucfirst($ticket->metodo_pago) : 'Abono vigente' }}</li>
                            <li><strong>Estado del ticket:</strong> {{ ucfirst($ticket->estado_ticket) }}</li>
                            <li><strong>Estado del pago:</strong> {{ ucfirst($ticket->estado_pago) }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Botones de Acción -->
        <div class="flex flex-col sm:flex-row gap-3 justify-center">
            <a href="{{ route('dashboard.cochera.salida.buscar') }}" 
               class="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-6 py-3 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>
                Procesar Otra Salida
            </a>
            
            <a href="{{ route('dashboard.cochera.quick.historial') }}" 
               class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-6 py-3 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="list" class="h-4 w-4"></i>
                Ver Historial
            </a>
            
            <a href="{{ route('dashboard.index') }}" 
               class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-6 py-3 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="home" class="h-4 w-4"></i>
                Ir al Dashboard
            </a>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-redirect after 30 seconds (optional)
    // setTimeout(function() {
    //     window.location.href = "{{ route('dashboard.cochera.salida.buscar') }}";
    // }, 30000);
});
</script>
@endsection