@extends('dashboard.layouts.app')

@section('title', 'Pago y Comprobante - 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.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">
                            💳 Pago y Comprobante - Proceso de Salida
                        </h1>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Procesa el pago y genera el comprobante para el 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="credit-card" class="h-3 w-3 mr-1"></i>
                        Pago
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <!-- 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 Ticket
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Ticket</p>
                    <p class="text-lg 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</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">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>
            <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                <!-- Desglose del cálculo -->
                <div class="space-y-2 mb-4">
                    
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600 dark:text-gray-400">Monto Base:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white">S/ {{ number_format($montoBase, 2) }}</span>
                    </div>
                    
                    @if($descuento > 0)
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600 dark:text-gray-400">Descuento:</span>
                        <span class="text-sm font-medium text-red-600 dark:text-red-400">- S/ {{ number_format($descuento, 2) }}</span>
                    </div>
                    @endif
                    
                    @if($cargoAdicional > 0)
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600 dark:text-gray-400">Cargo Adicional:</span>
                        <span class="text-sm font-medium text-orange-600 dark:text-orange-400">+ S/ {{ number_format($cargoAdicional, 2) }}</span>
                    </div>
                    @endif
                    
                    <div class="flex justify-between items-center pt-2 border-t border-gray-200 dark:border-gray-700">
                        <span class="text-lg font-medium text-gray-900 dark:text-white">Monto Total a Pagar:</span>
                        <span class="text-2xl font-bold text-green-600 dark:text-green-400">S/ {{ number_format($montoFinal, 2) }}</span>
                    </div>
                </div>
                
                <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                    <i data-lucide="info" class="h-4 w-4 inline mr-1"></i>
                    Cálculo: 
                    @if($tipoCalculo === 'solo_horas')
                        <span class="text-purple-600 dark:text-purple-400">Por horas</span>
                    @elseif($tipoCalculo === 'manual')
                        <span class="text-blue-600 dark:text-blue-400">Manual ({{ $diasManual }} días, {{ $horasManual }} horas)</span>
                    @else
                        @if($duracion['dias'] === 0)
                            <span class="text-orange-600 dark:text-orange-400">Automático - Por horas (mismo día)</span>
                        @else
                            <span class="text-green-600 dark:text-green-400">Automático - Por días completos ({{ $duracion['dias'] }} día{{ $duracion['dias'] > 1 ? 's' : '' }})</span>
                        @endif
                    @endif
                </div>
                @if($observaciones)
                <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                    <i data-lucide="message-square" class="h-4 w-4 inline mr-1"></i>
                    Observaciones: {{ $observaciones }}
                </div>
                @endif
            </div>
        </div>

        <!-- Payment and Receipt Form -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
            <form action="{{ route('dashboard.cochera.salida.pagar', $ticket->public_id) }}" method="POST" id="pagoForm">
                @csrf
                <input type="hidden" name="fecha_salida" value="{{ $fechaSalida->format('Y-m-d') }}">
                <input type="hidden" name="hora_salida" value="{{ $horaSalida }}">
                <input type="hidden" name="monto_final" value="{{ $montoFinal }}">
                <input type="hidden" name="observaciones_salida" value="{{ $observaciones }}">
                
                <div class="space-y-8">
                    <!-- Payment Method Section -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
                            💰 Método de Pago
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                            <label class="relative flex cursor-pointer rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 p-4 shadow-sm focus:outline-none">
                                <input type="radio" name="metodo_pago" value="efectivo" class="sr-only" checked>
                                <span class="flex flex-1">
                                    <span class="flex flex-col">
                                        <span class="block text-sm font-medium text-gray-900 dark:text-white">
                                            <i data-lucide="dollar-sign" class="h-5 w-5 inline mr-2 text-green-500"></i>
                                            Efectivo
                                        </span>
                                    </span>
                                </span>
                                <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
                            </label>

                            <label class="relative flex cursor-pointer rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 p-4 shadow-sm focus:outline-none">
                                <input type="radio" name="metodo_pago" value="tarjeta" class="sr-only">
                                <span class="flex flex-1">
                                    <span class="flex flex-col">
                                        <span class="block text-sm font-medium text-gray-900 dark:text-white">
                                            <i data-lucide="credit-card" class="h-5 w-5 inline mr-2 text-blue-500"></i>
                                            Tarjeta
                                        </span>
                                    </span>
                                </span>
                                <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
                            </label>

                            <label class="relative flex cursor-pointer rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 p-4 shadow-sm focus:outline-none">
                                <input type="radio" name="metodo_pago" value="transferencia" class="sr-only">
                                <span class="flex flex-1">
                                    <span class="flex flex-col">
                                        <span class="block text-sm font-medium text-gray-900 dark:text-white">
                                            <i data-lucide="banknote" class="h-5 w-5 inline mr-2 text-purple-500"></i>
                                            Transferencia
                                        </span>
                                    </span>
                                </span>
                                <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
                            </label>

                            <label class="relative flex cursor-pointer rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 p-4 shadow-sm focus:outline-none">
                                <input type="radio" name="metodo_pago" value="yape" class="sr-only">
                                <span class="flex flex-1">
                                    <span class="flex flex-col">
                                        <span class="block text-sm font-medium text-gray-900 dark:text-white">
                                            <i data-lucide="smartphone" class="h-5 w-5 inline mr-2 text-yellow-500"></i>
                                            Yape
                                        </span>
                                    </span>
                                </span>
                                <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
                            </label>
                        </div>

                        <!-- Cash Payment Fields -->
                        <div id="efectivoFields" class="mt-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="monto_cobrado" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Monto Cobrado *
                                    </label>
                                    <input type="number" 
                                           id="monto_cobrado" 
                                           name="monto_cobrado"
                                           step="0.01"
                                           min="{{ $montoFinal }}"
                                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:text-white dark:focus:ring-green-400 dark:focus:border-green-400"
                                           required>
                                </div>
                                <div>
                                    <label for="vuelto" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Vuelto
                                    </label>
                                    <input type="text" 
                                           id="vuelto" 
                                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-100 dark:bg-gray-600 dark:text-white"
                                           readonly>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Receipt Type Section -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
                            📄 Tipo de Comprobante
                        </h3>
                        <div class="space-y-4">
                            <!-- Boleta Simple -->
                            <label class="relative flex cursor-pointer rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 p-4 shadow-sm focus:outline-none">
                                <input type="radio" name="tipo_comprobante" value="boleta_simple" class="sr-only" checked>
                                <span class="flex flex-1">
                                    <span class="flex flex-col">
                                        <span class="block text-sm font-medium text-gray-900 dark:text-white">
                                            <i data-lucide="receipt" class="h-5 w-5 inline mr-2 text-blue-500"></i>
                                            Boleta Simple (Clientes Varios)
                                        </span>
                                        <span class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                            Sin registro de datos del cliente
                                        </span>
                                    </span>
                                </span>
                                <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
                            </label>

                            <!-- Boleta con Datos -->
                            <label class="relative flex cursor-pointer rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 p-4 shadow-sm focus:outline-none">
                                <input type="radio" name="tipo_comprobante" value="boleta_cliente" class="sr-only">
                                <span class="flex flex-1">
                                    <span class="flex flex-col">
                                        <span class="block text-sm font-medium text-gray-900 dark:text-white">
                                            <i data-lucide="user" class="h-5 w-5 inline mr-2 text-green-500"></i>
                                            Boleta con Datos del Cliente
                                        </span>
                                        <span class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                            Con DNI y nombre del cliente
                                        </span>
                                    </span>
                                </span>
                                <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
                            </label>

                            <!-- Factura -->
                            <label class="relative flex cursor-pointer rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 p-4 shadow-sm focus:outline-none">
                                <input type="radio" name="tipo_comprobante" value="factura" class="sr-only">
                                <span class="flex flex-1">
                                    <span class="flex flex-col">
                                        <span class="block text-sm font-medium text-gray-900 dark:text-white">
                                            <i data-lucide="building" class="h-5 w-5 inline mr-2 text-purple-500"></i>
                                            Factura
                                        </span>
                                        <span class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                            Con RUC y razón social
                                        </span>
                                    </span>
                                </span>
                                <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
                            </label>
                        </div>
                    </div>

                    <!-- Client Data Section -->
                    <div id="clientDataSection" class="hidden">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
                            👤 Datos del Cliente
                        </h3>
                        
                        <!-- Boleta Cliente Fields -->
                        <div id="boletaClienteFields" class="hidden">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="cliente_dni" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        DNI * <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" 
                                           id="cliente_dni" 
                                           name="cliente_dni"
                                           maxlength="8"
                                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:text-white dark:focus:ring-green-400 dark:focus:border-green-400">
                                </div>
                                <div>
                                    <label for="cliente_nombre" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Nombre Completo * <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" 
                                           id="cliente_nombre" 
                                           name="cliente_nombre"
                                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:text-white dark:focus:ring-green-400 dark:focus:border-green-400">
                                </div>
                            </div>
                        </div>

                        <!-- Factura Fields -->
                        <div id="facturaFields" class="hidden">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="cliente_ruc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        RUC * <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" 
                                           id="cliente_ruc" 
                                           name="cliente_ruc"
                                           maxlength="11"
                                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:text-white dark:focus:ring-green-400 dark:focus:border-green-400">
                                </div>
                                <div>
                                    <label for="cliente_razon_social" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Razón Social * <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" 
                                           id="cliente_razon_social" 
                                           name="cliente_razon_social"
                                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:text-white dark:focus:ring-green-400 dark:focus:border-green-400">
                                </div>
                            </div>
                        </div>

                        <!-- Common Address Field -->
                        <div class="mt-4">
                            <label for="cliente_direccion" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Dirección
                            </label>
                            <input type="text" 
                                   id="cliente_direccion" 
                                   name="cliente_direccion"
                                   class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:text-white dark:focus:ring-green-400 dark:focus:border-green-400">
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="flex justify-center pt-6">
                        <button type="submit" 
                                class="inline-flex items-center px-8 py-3 border border-transparent text-lg 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="check-circle" class="h-6 w-6 mr-2"></i>
                            Registrar Pago y Generar Comprobante
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Error Messages -->
        @if ($errors->any())
        <div class="mt-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i data-lucide="alert-circle" class="h-5 w-5 text-red-400"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800 dark:text-red-200">
                        Error en el proceso
                    </h3>
                    <div class="mt-2 text-sm text-red-700 dark:text-red-300">
                        <ul class="list-disc list-inside space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const montoFinal = {{ $montoFinal }};
    const montoCobradoInput = document.getElementById('monto_cobrado');
    const vueltoInput = document.getElementById('vuelto');
    const tipoComprobanteInputs = document.querySelectorAll('input[name="tipo_comprobante"]');
    const clientDataSection = document.getElementById('clientDataSection');
    const boletaClienteFields = document.getElementById('boletaClienteFields');
    const facturaFields = document.getElementById('facturaFields');
    const metodoPagoInputs = document.querySelectorAll('input[name="metodo_pago"]');
    const efectivoFields = document.getElementById('efectivoFields');

    // Calculate change for cash payments
    montoCobradoInput.addEventListener('input', function() {
        const montoCobrado = parseFloat(this.value) || 0;
        const vuelto = montoCobrado - montoFinal;
        vueltoInput.value = vuelto >= 0 ? `S/ ${vuelto.toFixed(2)}` : 'Monto insuficiente';
    });

    // Show/hide client data fields based on receipt type
    tipoComprobanteInputs.forEach(input => {
        input.addEventListener('change', function() {
            if (this.value === 'boleta_simple') {
                clientDataSection.classList.add('hidden');
                boletaClienteFields.classList.add('hidden');
                facturaFields.classList.add('hidden');
            } else if (this.value === 'boleta_cliente') {
                clientDataSection.classList.remove('hidden');
                boletaClienteFields.classList.remove('hidden');
                facturaFields.classList.add('hidden');
            } else if (this.value === 'factura') {
                clientDataSection.classList.remove('hidden');
                boletaClienteFields.classList.add('hidden');
                facturaFields.classList.remove('hidden');
            }
        });
    });

    // Show/hide cash fields based on payment method
    metodoPagoInputs.forEach(input => {
        input.addEventListener('change', function() {
            if (this.value === 'efectivo') {
                efectivoFields.classList.remove('hidden');
            } else {
                efectivoFields.classList.add('hidden');
            }
        });
    });

    // Radio button selection styling
    const radioGroups = [
        { name: 'metodo_pago', labels: document.querySelectorAll('input[name="metodo_pago"]') },
        { name: 'tipo_comprobante', labels: document.querySelectorAll('input[name="tipo_comprobante"]') }
    ];

    radioGroups.forEach(group => {
        group.labels.forEach(radio => {
            radio.addEventListener('change', function() {
                // Remove active styling from all labels in this group
                const name = this.name;
                document.querySelectorAll(`input[name="${name}"]`).forEach(r => {
                    const label = r.closest('label');
                    label.classList.remove('border-green-500', 'ring-2', 'ring-green-500');
                    label.classList.add('border-gray-300', 'dark:border-gray-600');
                });

                // Add active styling to selected label
                const label = this.closest('label');
                label.classList.remove('border-gray-300', 'dark:border-gray-600');
                label.classList.add('border-green-500', 'ring-2', 'ring-green-500');
            });
        });
    });

    // Set initial active states
    const initialMetodoPago = document.querySelector('input[name="metodo_pago"]:checked');
    const initialTipoComprobante = document.querySelector('input[name="tipo_comprobante"]:checked');
    
    if (initialMetodoPago) {
        const label = initialMetodoPago.closest('label');
        label.classList.remove('border-gray-300', 'dark:border-gray-600');
        label.classList.add('border-green-500', 'ring-2', 'ring-green-500');
    }
    
    if (initialTipoComprobante) {
        const label = initialTipoComprobante.closest('label');
        label.classList.remove('border-gray-300', 'dark:border-gray-600');
        label.classList.add('border-green-500', 'ring-2', 'ring-green-500');
    }
});
</script>
@endsection