@extends('dashboard.layouts.app')

@section('title', 'Comprobante Generado - Proceso de Salida')

@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.quick.historial') }}" 
                       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">
                            ✅ Proceso Completado - Comprobante Generado
                        </h1>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            El ticket #{{ $ticket->numero_ticket }} ha sido procesado exitosamente
                        </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="check-circle" class="h-3 w-3 mr-1"></i>
                        Completado
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <!-- Success Message -->
        <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">
                <div class="flex-shrink-0">
                    <i data-lucide="check-circle" class="h-6 w-6 text-green-400"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-lg font-medium text-green-800 dark:text-green-200">
                        ¡Proceso Completado Exitosamente!
                    </h3>
                    <div class="mt-2 text-sm text-green-700 dark:text-green-300">
                        <p>El ticket ha sido procesado y el comprobante ha sido generado correctamente.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Ticket Summary -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
            <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
                📋 Resumen del Proceso
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-3">Información del Ticket</h3>
                    <div class="space-y-2">
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Número:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">#{{ $ticket->numero_ticket }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Placa:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $ticket->placa_camion }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Ingreso:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ \Carbon\Carbon::parse($ticket->fecha_ingreso)->format('d/m/Y H:i') }}
                            </span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Salida:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ \Carbon\Carbon::parse($ticket->fecha_salida)->format('d/m/Y H:i') }}
                            </span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Duración:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ $duracion['dias'] }}d {{ $duracion['horas'] }}h {{ $duracion['minutos'] }}m
                            </span>
                        </div>
                    </div>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-3">Información de Pago</h3>
                    <div class="space-y-2">
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Método:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">
                                @switch($ticket->metodo_pago)
                                    @case('efectivo')
                                        <i data-lucide="dollar-sign" class="h-4 w-4 inline mr-1 text-green-500"></i>Efectivo
                                        @break
                                    @case('tarjeta')
                                        <i data-lucide="credit-card" class="h-4 w-4 inline mr-1 text-blue-500"></i>Tarjeta
                                        @break
                                    @case('transferencia')
                                        <i data-lucide="banknote" class="h-4 w-4 inline mr-1 text-purple-500"></i>Transferencia
                                        @break
                                    @case('yape')
                                        <i data-lucide="smartphone" class="h-4 w-4 inline mr-1 text-yellow-500"></i>Yape
                                        @break
                                @endswitch
                            </span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Monto Total:</span>
                            <span class="text-sm font-bold text-green-600 dark:text-green-400">S/ {{ number_format($ticket->monto_total, 2) }}</span>
                        </div>
                        @if($ticket->metodo_pago === 'efectivo' && $ticket->monto_cobrado)
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Monto Cobrado:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">S/ {{ number_format($ticket->monto_cobrado, 2) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Vuelto:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">S/ {{ number_format($ticket->monto_cobrado - $ticket->monto_total, 2) }}</span>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Comprobante Information -->
        @if($comprobante)
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
            <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
                📄 Comprobante Generado
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-3">Información del Comprobante</h3>
                    <div class="space-y-2">
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Tipo:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">
                                @switch($comprobante->tipo_comprobante_id)
                                    @case(1)
                                        <i data-lucide="receipt" class="h-4 w-4 inline mr-1 text-blue-500"></i>Boleta
                                        @break
                                    @case(2)
                                        <i data-lucide="file-text" class="h-4 w-4 inline mr-1 text-purple-500"></i>Factura
                                        @break
                                @endswitch
                            </span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Número:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $comprobante->numero_completo }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Fecha:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ \Carbon\Carbon::parse($comprobante->fecha_emision)->format('d/m/Y H:i') }}
                            </span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Estado:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">
                                @switch($comprobante->estado)
                                    @case('pendiente')
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
                                            <i data-lucide="clock" class="h-3 w-3 mr-1"></i>Pendiente
                                        </span>
                                        @break
                                    @case('enviado')
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                            <i data-lucide="send" class="h-3 w-3 mr-1"></i>Enviado
                                        </span>
                                        @break
                                    @case('aceptado')
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                            <i data-lucide="check" class="h-3 w-3 mr-1"></i>Aceptado
                                        </span>
                                        @break
                                    @case('rechazado')
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
                                            <i data-lucide="x" class="h-3 w-3 mr-1"></i>Rechazado
                                        </span>
                                        @break
                                @endswitch
                            </span>
                        </div>
                    </div>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-3">Cliente</h3>
                    <div class="space-y-2">
                        @if($ticket->cliente_id && $cliente)
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Nombre:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $cliente->razon_social }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Documento:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ $cliente->tipo_documento_id == 1 ? 'DNI' : 'RUC' }}: {{ $cliente->numero_documento }}
                            </span>
                        </div>
                        @if($cliente->direccion)
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Dirección:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $cliente->direccion }}</span>
                        </div>
                        @endif
                        @else
                        <div class="text-sm text-gray-500 dark:text-gray-400">
                            <i data-lucide="users" class="h-4 w-4 inline mr-1"></i>
                            Clientes Varios
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- Action Buttons -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            @if($comprobante)
            <a href="{{ route('dashboard.comprobantes.show', $comprobante->public_id) }}" 
               class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
                <i data-lucide="eye" class="h-5 w-5 mr-2"></i>
                Ver Comprobante
            </a>
            <a href="{{ route('dashboard.comprobantes.download', $comprobante->public_id) }}" 
               class="inline-flex items-center justify-center px-6 py-3 border border-green-500 bg-green-500 text-base font-medium rounded-lg text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors duration-200">
                <i data-lucide="file-text" class="h-5 w-5 mr-2"></i>
                Descargar PDF
            </a>
            @endif
            <a href="{{ route('dashboard.cochera.quick.historial') }}" 
               class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 text-base font-medium rounded-lg text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors duration-200">
                <i data-lucide="list" class="h-5 w-5 mr-2"></i>
                Ir al Historial
            </a>
            <a href="{{ route('dashboard.cochera.salida.buscar') }}" 
               class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors duration-200">
                <i data-lucide="log-out" class="h-5 w-5 mr-2"></i>
                Registrar Salida
            </a>
        </div>

        <!-- Additional Information -->
        <div class="mt-8 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-400"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">
                        Información Adicional
                    </h3>
                    <div class="mt-2 text-sm text-blue-700 dark:text-blue-300">
                        <ul class="list-disc list-inside space-y-1">
                            <li>El ticket ha sido marcado como <strong>cerrado</strong> y <strong>pagado</strong></li>
                            <li>El comprobante ha sido generado y registrado en el sistema</li>
                            <li>Puedes descargar el PDF o ver el comprobante completo</li>
                            <li>El proceso ha sido registrado en la auditoría del sistema</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection