@extends('dashboard.layouts.app')

@section('title', 'Registrar Salida - Cálculo de Tarifa')

@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">
                            💰 Cálculo de Tarifa - Ticket #{{ $ticket->numero_ticket }}
                        </h1>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Ajusta y calcula el monto final a cobrar
                        </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="calculator" class="h-3 w-3 mr-1"></i>
                        Cálculo Flexible
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-6xl 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
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            
            <!-- Panel Izquierdo: Información del Ticket -->
            <div class="lg:col-span-1">
                <!-- Ticket Information -->
                <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 flex items-center">
                        <i data-lucide="ticket" class="h-5 w-5 mr-2 text-blue-500"></i>
                        Información del Ticket
                    </h2>
                    <div class="space-y-4">
                        <div>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Número</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">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">Conductor</p>
                            <p class="text-lg font-semibold text-gray-900 dark:text-white">
                                {{ $ticket->conductor_nombre ?? 'No registrado' }}
                            </p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Carga</p>
                            <p class="text-lg font-semibold text-gray-900 dark:text-white">
                                {{ $ticket->descripcion_carga ?? 'No especificada' }}
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Tariff Information -->
                @if($tarifa)
                <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                    <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200 mb-3 flex items-center">
                        <i data-lucide="info" class="h-4 w-4 mr-2"></i>
                        Tarifa Vigente
                    </h3>
                    <div class="space-y-2 text-sm text-blue-700 dark:text-blue-300">
                        <div class="flex justify-between">
                            <span>Por hora:</span>
                            <span class="font-semibold">S/ {{ number_format($tarifa->tarifa_por_hora, 2) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span>Por día:</span>
                            <span class="font-semibold">S/ {{ number_format($tarifa->tarifa_por_dia, 2) }}</span>
                        </div>
                        <div class="pt-2 border-t border-blue-200 dark:border-blue-700">
                            <span class="text-xs">{{ $tarifa->nombre_tarifa }}</span>
                        </div>
                    </div>
                </div>
                @endif
                
                <!-- Estado del Abono -->
                <div class="mt-6">
                    @if($estadoAbono['tiene_abono'])
                        @if($estadoAbono['abono_vigente'])
                            <!-- Abono Vigente -->
                            <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0">
                                        <i data-lucide="shield-check" class="h-5 w-5 text-green-500"></i>
                                    </div>
                                    <div class="ml-3 flex-1">
                                        <h3 class="text-sm font-medium text-green-800 dark:text-green-200">
                                            🎫 Cliente Abonado - VIGENTE
                                        </h3>
                                        <div class="mt-1 text-xs text-green-700 dark:text-green-300">
                                            <p>{{ $estadoAbono['motivo'] }}</p>
                                            @if($estadoAbono['vehiculo_abonado'])
                                                <p class="mt-1">
                                                    <span class="font-medium">Tipo:</span> {{ ucfirst($estadoAbono['vehiculo_abonado']->tipo_abono) }} |
                                                    <span class="font-medium">Monto:</span> S/ {{ number_format($estadoAbono['vehiculo_abonado']->monto_abono, 2) }}
                                                </p>
                                                <p>
                                                    <span class="font-medium">Vigencia:</span> 
                                                    {{ \Carbon\Carbon::parse($estadoAbono['vehiculo_abonado']->fecha_inicio)->format('d/m/Y') }} - 
                                                    {{ \Carbon\Carbon::parse($estadoAbono['vehiculo_abonado']->fecha_vencimiento)->format('d/m/Y') }}
                                                </p>
                                            @endif
                                        </div>
                                        <div class="mt-2 bg-green-100 dark:bg-green-900/30 px-3 py-2 rounded text-xs">
                                            <strong>💰 Tarifa Aplicada: S/ 0.00</strong> (Cliente abonado - período ya pagado)
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @elseif($estadoAbono['abono_vencido'])
                            <!-- Abono Vencido -->
                            <div class="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0">
                                        <i data-lucide="shield-alert" class="h-5 w-5 text-orange-500"></i>
                                    </div>
                                    <div class="ml-3 flex-1">
                                        <h3 class="text-sm font-medium text-orange-800 dark:text-orange-200">
                                            ⚠️ Cliente Abonado - VENCIDO
                                        </h3>
                                        <div class="mt-1 text-xs text-orange-700 dark:text-orange-300">
                                            <p>{{ $estadoAbono['motivo'] }}</p>
                                            @if($estadoAbono['vehiculo_abonado'])
                                                <p class="mt-1">
                                                    <span class="font-medium">Tipo:</span> {{ ucfirst($estadoAbono['vehiculo_abonado']->tipo_abono) }} |
                                                    <span class="font-medium">Monto original:</span> S/ {{ number_format($estadoAbono['vehiculo_abonado']->monto_abono, 2) }}
                                                </p>
                                                <p>
                                                    <span class="font-medium">Venció el:</span> 
                                                    {{ \Carbon\Carbon::parse($estadoAbono['vehiculo_abonado']->fecha_vencimiento)->format('d/m/Y') }}
                                                </p>
                                            @endif
                                        </div>
                                        <div class="mt-2 bg-orange-100 dark:bg-orange-900/30 px-3 py-2 rounded text-xs">
                                            <strong>💰 Tarifa Aplicada: Tarifa Normal</strong> (Regla RC-01.1: Abono vencido)
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @else
                        <!-- Cliente Ocasional -->
                        <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 items-center">
                                <div class="flex-shrink-0">
                                    <i data-lucide="user" class="h-5 w-5 text-blue-500"></i>
                                </div>
                                <div class="ml-3 flex-1">
                                    <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">
                                        👤 Cliente Ocasional
                                    </h3>
                                    <div class="mt-1 text-xs text-blue-700 dark:text-blue-300">
                                        <p>{{ $estadoAbono['motivo'] }}</p>
                                    </div>
                                    <div class="mt-2 bg-blue-100 dark:bg-blue-900/30 px-3 py-2 rounded text-xs">
                                        <strong>💰 Tarifa Aplicada: Tarifa Normal</strong> (Según tiempo de permanencia)
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Panel Central: Cálculo y Ajustes -->
            <div class="lg:col-span-2">
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                    <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-6 flex items-center">
                        <i data-lucide="calculator" class="h-5 w-5 mr-2 text-green-500"></i>
                        Cálculo y Ajustes
                    </h2>

                    <form action="{{ route('dashboard.cochera.salida.calcular', $ticket->public_id) }}" method="POST" id="calculoForm">
                        @csrf
                        
                        <!-- Fecha y Hora de Salida -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                            <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="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"
                                       required>
                            </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="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"
                                       required>
                            </div>
                        </div>

                        <!-- Tipo de Cálculo -->
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                                Tipo de Cálculo
                            </label>
                            <div class="grid grid-cols-1 md:grid-cols-3 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="tipo_calculo" value="automatico" 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="zap" class="h-5 w-5 inline mr-2 text-green-500"></i>
                                                Automático
                                            </span>
                                            <span class="mt-1 flex items-center text-sm text-gray-500 dark:text-gray-400">
                                                Mismo día = horas, Diferente día = días
                                            </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="tipo_calculo" value="manual" 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="settings" class="h-5 w-5 inline mr-2 text-blue-500"></i>
                                                Manual
                                            </span>
                                            <span class="mt-1 flex items-center text-sm text-gray-500 dark:text-gray-400">
                                                Ajustar días y horas manualmente
                                            </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="tipo_calculo" value="solo_horas" 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="clock" class="h-5 w-5 inline mr-2 text-purple-500"></i>
                                                Solo Horas
                                            </span>
                                            <span class="mt-1 flex items-center text-sm text-gray-500 dark:text-gray-400">
                                                Calcular únicamente por horas
                                            </span>
                                        </span>
                                    </span>
                                    <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
                                </label>
                            </div>
                        </div>

                        <!-- Ajustes Manuales (oculto por defecto) -->
                        <div id="ajustesManuales" class="hidden mb-6">
                            <h3 class="text-md font-medium text-gray-900 dark:text-white mb-4">Ajustes Manuales</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="dias_manual" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Días
                                    </label>
                                    <input type="number" 
                                           id="dias_manual" 
                                           name="dias_manual"
                                           min="0"
                                           value="0"
                                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                </div>
                                <div>
                                    <label for="horas_manual" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Horas
                                    </label>
                                    <input type="number" 
                                           id="horas_manual" 
                                           name="horas_manual"
                                           min="0"
                                           step="0.5"
                                           value="0"
                                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                </div>
                            </div>
                        </div>

                        <!-- Descuentos y Cargos -->
                        <div class="mb-6">
                            <h3 class="text-md font-medium text-gray-900 dark:text-white mb-4">Descuentos y Cargos</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="descuento" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Descuento (S/)
                                    </label>
                                    <input type="number" 
                                           id="descuento" 
                                           name="descuento"
                                           min="0"
                                           step="0.01"
                                           value="0"
                                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 dark:bg-gray-700 dark:text-white">
                                </div>
                                <div>
                                    <label for="cargo_adicional" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Cargo Adicional (S/)
                                    </label>
                                    <input type="number" 
                                           id="cargo_adicional" 
                                           name="cargo_adicional"
                                           min="0"
                                           step="0.01"
                                           value="0"
                                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white">
                                </div>
                            </div>
                        </div>

                        <!-- Observaciones -->
                        <div class="mb-6">
                            <label for="observaciones" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Observaciones
                            </label>
                            <textarea id="observaciones" 
                                      name="observaciones"
                                      rows="3"
                                      placeholder="Observaciones sobre el cálculo o ajustes realizados..."
                                      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"></textarea>
                        </div>

                        <!-- Resumen del Cálculo -->
                        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-6">
                            <h3 class="text-md font-medium text-gray-900 dark:text-white mb-4 flex items-center">
                                <i data-lucide="receipt" class="h-4 w-4 mr-2 text-green-500"></i>
                                Resumen del Cálculo
                            </h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                                <div>
                                    <p class="text-gray-500 dark:text-gray-400">Tiempo Calculado:</p>
                                    <p class="font-semibold text-gray-900 dark:text-white" id="tiempoCalculado">-</p>
                                </div>
                                <div>
                                    <p class="text-gray-500 dark:text-gray-400">Subtotal:</p>
                                    <p class="font-semibold text-gray-900 dark:text-white" id="subtotal">S/ 0.00</p>
                                </div>
                                <div>
                                    <p class="text-gray-500 dark:text-gray-400">Descuento:</p>
                                    <p class="font-semibold text-red-600 dark:text-red-400" id="descuentoMostrado">S/ 0.00</p>
                                </div>
                                <div>
                                    <p class="text-gray-500 dark:text-gray-400">Cargo Adicional:</p>
                                    <p class="font-semibold text-orange-600 dark:text-orange-400" id="cargoMostrado">S/ 0.00</p>
                                </div>
                            </div>
                            <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-600">
                                <div class="flex justify-between items-center">
                                    <span class="text-lg font-medium text-gray-900 dark:text-white">Total a Cobrar:</span>
                                    <span class="text-2xl font-bold text-green-600 dark:text-green-400" id="totalFinal">S/ 0.00</span>
                                </div>
                            </div>
                        </div>

                        <!-- Botones de Acción -->
                        <div class="flex justify-between items-center">
                            <button type="button" 
                                    onclick="calcularTarifa()"
                                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm 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="refresh-cw" class="h-4 w-4 mr-2"></i>
                                Recalcular
                            </button>
                            <button type="submit" 
                                    class="inline-flex items-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="arrow-right" class="h-5 w-5 mr-2"></i>
                                Continuar al Pago
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </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 cálculo
                    </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>
// Variables globales
let tarifaPorHora = {{ $tarifa ? $tarifa->tarifa_por_hora : 0 }};
let tarifaPorDia = {{ $tarifa ? $tarifa->tarifa_por_dia : 0 }};
let fechaIngreso = '{{ $ticket->fecha_ingreso }}';
let toleranciaMinutos = {{ $toleranciaMinutos }};

// Estado del abono
let estadoAbono = {
    tiene_abono: {{ $estadoAbono['tiene_abono'] ? 'true' : 'false' }},
    abono_vigente: {{ $estadoAbono['abono_vigente'] ? 'true' : 'false' }},
    abono_vencido: {{ $estadoAbono['abono_vencido'] ? 'true' : 'false' }},
    aplicar_tarifa_normal: {{ $estadoAbono['aplicar_tarifa_normal'] ? 'true' : 'false' }},
    motivo: '{{ $estadoAbono['motivo'] }}'
};

// Inicialización
document.addEventListener('DOMContentLoaded', function() {
    // Set default time to current time
    const now = new Date();
    const currentTime = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
    
    if (!document.getElementById('hora_salida').value) {
        document.getElementById('hora_salida').value = currentTime;
    }

    // Event listeners
    document.querySelectorAll('input[name="tipo_calculo"]').forEach(radio => {
        radio.addEventListener('change', toggleAjustesManuales);
        radio.addEventListener('change', updateRadioButtonStyling);
    });

    // Aplicar estilo inicial al radio button seleccionado
    updateRadioButtonStyling();

    document.getElementById('dias_manual').addEventListener('input', calcularTarifa);
    document.getElementById('horas_manual').addEventListener('input', calcularTarifa);
    document.getElementById('descuento').addEventListener('input', calcularTarifa);
    document.getElementById('cargo_adicional').addEventListener('input', calcularTarifa);
    document.getElementById('fecha_salida').addEventListener('change', calcularTarifa);
    document.getElementById('hora_salida').addEventListener('change', calcularTarifa);

    // Calcular inicialmente
    calcularTarifa();
});

function toggleAjustesManuales() {
    const tipoCalculo = document.querySelector('input[name="tipo_calculo"]:checked').value;
    const ajustesDiv = document.getElementById('ajustesManuales');
    
    if (tipoCalculo === 'manual') {
        ajustesDiv.classList.remove('hidden');
    } else {
        ajustesDiv.classList.add('hidden');
    }
    
    calcularTarifa();
}

function calcularTarifa() {
    const fechaSalida = document.getElementById('fecha_salida').value;
    const horaSalida = document.getElementById('hora_salida').value;
    const tipoCalculo = document.querySelector('input[name="tipo_calculo"]:checked').value;
    const diasManual = parseFloat(document.getElementById('dias_manual').value) || 0;
    const horasManual = parseFloat(document.getElementById('horas_manual').value) || 0;
    const descuento = parseFloat(document.getElementById('descuento').value) || 0;
    const cargoAdicional = parseFloat(document.getElementById('cargo_adicional').value) || 0;

    if (!fechaSalida || !horaSalida) {
        return;
    }

    let subtotal = 0;
    let tiempoCalculado = '';

    if (tipoCalculo === 'manual') {
        // Cálculo manual
        subtotal = (diasManual * tarifaPorDia) + (horasManual * tarifaPorHora);
        tiempoCalculado = `${diasManual} días, ${horasManual} horas`;
    } else if (tipoCalculo === 'solo_horas') {
        // Solo horas
        const duracion = calcularDuracion(fechaSalida + ' ' + horaSalida);
        const totalMinutos = duracion.total_horas * 60;
        
        if (duracion.total_horas <= 1) {
            // Primera hora: se paga completa
            subtotal = tarifaPorHora;
            tiempoCalculado = `${duracion.total_horas.toFixed(1)} horas → 1 hora completa`;
        } else {
            // A partir de la segunda hora: aplicar regla de 10 minutos
            const minutosExtra = totalMinutos - 60;
            
            if (minutosExtra > toleranciaMinutos) {
                const horasACobrar = Math.ceil(duracion.total_horas);
                subtotal = horasACobrar * tarifaPorHora;
                tiempoCalculado = `${duracion.total_horas.toFixed(1)} horas → ${horasACobrar} hora(s) completa(s)`;
            } else {
                subtotal = tarifaPorHora; // Solo la primera hora
                tiempoCalculado = `${duracion.total_horas.toFixed(1)} horas → 1 hora (tolerancia ${toleranciaMinutos} min)`;
            }
        }
    } else {
        // Automático
        const duracion = calcularDuracion(fechaSalida + ' ' + horaSalida);
        if (duracion.dias === 0) {
            const totalMinutos = duracion.total_horas * 60;
            
            if (duracion.total_horas <= 1) {
                // Primera hora: se paga completa
                subtotal = tarifaPorHora;
                tiempoCalculado = `${duracion.total_horas.toFixed(1)} horas → 1 hora completa (mismo día)`;
            } else {
                // A partir de la segunda hora: aplicar regla de 10 minutos
                const minutosExtra = totalMinutos - 60;
                
                if (minutosExtra > toleranciaMinutos) {
                    const horasACobrar = Math.ceil(duracion.total_horas);
                    subtotal = horasACobrar * tarifaPorHora;
                    tiempoCalculado = `${duracion.total_horas.toFixed(1)} horas → ${horasACobrar} hora(s) completa(s) (mismo día)`;
                } else {
                    subtotal = tarifaPorHora; // Solo la primera hora
                    tiempoCalculado = `${duracion.total_horas.toFixed(1)} horas → 1 hora (tolerancia ${toleranciaMinutos} min)`;
                }
            }
        } else {
            subtotal = duracion.dias * tarifaPorDia;
            tiempoCalculado = `${duracion.dias} días completos`;
        }
    }

    // 🚨 APLICAR REGLA DEL ABONO
    let subtotalFinal = subtotal;
    let observacionAbono = '';
    
    if (estadoAbono.tiene_abono && estadoAbono.abono_vigente) {
        // Cliente abonado vigente: monto S/ 0.00
        subtotalFinal = 0;
        observacionAbono = ' (Abonado vigente)';
        tiempoCalculado += ' → Cliente abonado: S/ 0.00';
    } else if (estadoAbono.tiene_abono && estadoAbono.abono_vencido) {
        // Cliente abonado vencido: tarifa normal
        observacionAbono = ' (Abono vencido - Regla RC-01.1)';
        tiempoCalculado += ' → Abono vencido: tarifa normal';
    } else {
        // Cliente ocasional: tarifa normal
        observacionAbono = ' (Cliente ocasional)';
    }

    const total = subtotalFinal - descuento + cargoAdicional;

    // Actualizar interfaz
    document.getElementById('tiempoCalculado').textContent = tiempoCalculado;
    document.getElementById('subtotal').textContent = `S/ ${subtotalFinal.toFixed(2)}${observacionAbono}`;
    document.getElementById('descuentoMostrado').textContent = `S/ ${descuento.toFixed(2)}`;
    document.getElementById('cargoMostrado').textContent = `S/ ${cargoAdicional.toFixed(2)}`;
    document.getElementById('totalFinal').textContent = `S/ ${total.toFixed(2)}`;

    // Agregar campos ocultos al formulario
    agregarCamposOcultos(subtotalFinal, total, descuento, cargoAdicional);
}

function calcularDuracion(fechaSalida) {
    const ingreso = new Date(fechaIngreso);
    const salida = new Date(fechaSalida);
    
    const diffMs = salida - ingreso;
    const diffHours = diffMs / (1000 * 60 * 60);
    const diffDays = Math.floor(diffHours / 24);
    const remainingHours = diffHours % 24;
    
    return {
        dias: diffDays,
        horas: remainingHours,
        total_horas: diffHours
    };
}

function agregarCamposOcultos(subtotal, total, descuento, cargoAdicional) {
    // Remover campos ocultos existentes
    document.querySelectorAll('input[name="subtotal"], input[name="total_final"], input[name="descuento_final"], input[name="cargo_final"]').forEach(el => el.remove());
    
    // Agregar nuevos campos ocultos
    const form = document.getElementById('calculoForm');
    
    const campos = [
        { name: 'subtotal', value: subtotal },
        { name: 'total_final', value: total },
        { name: 'descuento_final', value: descuento },
        { name: 'cargo_final', value: cargoAdicional }
    ];
    
    campos.forEach(campo => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = campo.name;
        input.value = campo.value;
        form.appendChild(input);
    });
}

function updateRadioButtonStyling() {
    // Remover estilos activos de todos los radio buttons
    document.querySelectorAll('input[name="tipo_calculo"]').forEach(radio => {
        const label = radio.closest('label');
        label.classList.remove('border-green-500', 'ring-2', 'ring-green-500');
        label.classList.add('border-gray-200', 'dark:border-gray-600');
    });
    
    // Aplicar estilo activo al radio button seleccionado
    const selectedRadio = document.querySelector('input[name="tipo_calculo"]:checked');
    if (selectedRadio) {
        const label = selectedRadio.closest('label');
        label.classList.remove('border-gray-200', 'dark:border-gray-600');
        label.classList.add('border-green-500', 'ring-2', 'ring-green-500');
    }
}
</script>
@endsection