@extends('layouts.app')

@section('title', 'Liquidación de Planillas')

@section('content')
<div class="h-full flex flex-col space-y-6" x-data="planillaManager()">
    <!-- Encabezado Premium con KPIs Generales -->
    <div class="relative overflow-hidden bg-white dark:bg-slate-900 rounded-[2.5rem] p-8 border border-slate-100 dark:border-slate-800 shadow-sm no-print">
        <div class="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-brand-orange/10 rounded-full blur-[100px] animate-pulse"></div>
        <div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 bg-brand-wine/5 rounded-full blur-[100px]"></div>
        
        <div class="relative flex flex-col lg:flex-row justify-between items-start lg:items-center gap-8">
            <div class="flex items-center gap-6">
                <div class="relative group">
                    <div class="absolute -inset-1 bg-gradient-to-r from-brand-orange to-brand-wine rounded-2xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
                    <div class="relative w-16 h-16 rounded-2xl bg-white dark:bg-slate-800 flex items-center justify-center text-brand-wine shadow-xl border border-slate-50 dark:border-slate-700">
                        <svg class="w-8 h-8 text-brand-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                    </div>
                </div>
                <div>
                    <h1 class="text-3xl font-black text-slate-800 dark:text-white uppercase tracking-tight leading-none">
                        Liquidación de <span class="bg-clip-text text-transparent bg-gradient-to-r from-brand-orange to-brand-wine">Planillas</span>
                    </h1>
                    <div class="flex items-center gap-2 mt-2">
                        <span class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></span>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em]">Cálculo de Nómina y Conciliación de Rutas</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Panel de Filtros -->
    <div class="bg-white dark:bg-slate-900 rounded-3xl p-6 border border-slate-100 dark:border-slate-800 shadow-sm no-print">
        <form @submit.prevent="fetchPlanillas" class="space-y-6">
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-4 items-end">
                <div class="space-y-2">
                    <label class="text-[10px] font-black text-slate-500 uppercase tracking-widest">Domiciliario</label>
                    <select x-model="filters.domiciliario_id" @change="fetchPlanillas" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl py-3 px-4 text-sm focus:ring-2 focus:ring-brand-orange text-slate-700 dark:text-white font-semibold">
                        <option value="">Todos los Domiciliarios</option>
                        @foreach($domiciliarios as $dom)
                            <option value="{{ $dom->id }}">{{ $dom->nombre }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="space-y-2">
                    <label class="text-[10px] font-black text-slate-500 uppercase tracking-widest">Fecha Desde</label>
                    <input type="date" x-model="filters.fecha_desde" @change="fetchPlanillas" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl py-3 px-4 text-sm focus:ring-2 focus:ring-brand-orange text-slate-700 dark:text-white">
                </div>

                <div class="space-y-2">
                    <label class="text-[10px] font-black text-slate-500 uppercase tracking-widest">Fecha Hasta</label>
                    <input type="date" x-model="filters.fecha_hasta" @change="fetchPlanillas" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl py-3 px-4 text-sm focus:ring-2 focus:ring-brand-orange text-slate-700 dark:text-white">
                </div>

                <div class="space-y-2">
                    <label class="text-[10px] font-black text-slate-500 uppercase tracking-widest">Estado Liquidación</label>
                    <select x-model="filters.estado_liquidacion" @change="fetchPlanillas" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl py-3 px-4 text-sm focus:ring-2 focus:ring-brand-orange text-slate-700 dark:text-white font-semibold">
                        <option value="">Todos</option>
                        <option value="pendiente">Pendiente</option>
                        <option value="liquidada">Liquidada (Cerrada)</option>
                    </select>
                </div>

                <div class="space-y-2">
                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Mostrar</label>
                    <select x-model="filters.per_page" @change="fetchPlanillas" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl py-3 px-4 text-sm focus:ring-2 focus:ring-brand-orange text-slate-700 dark:text-white font-semibold">
                        <option value="15">15 registros</option>
                        <option value="30">30 registros</option>
                        <option value="50">50 registros</option>
                        <option value="100">100 registros</option>
                    </select>
                </div>
            </div>

            <div class="flex justify-end gap-3 pt-2 border-t border-slate-100 dark:border-slate-800">
                <button type="button" @click="resetFilters" class="px-6 py-3 rounded-2xl font-black uppercase text-[10px] tracking-[0.2em] transition-all bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-500 dark:text-white">
                    Limpiar Filtros
                </button>
                <button type="submit" class="px-6 py-3 rounded-2xl font-black uppercase text-[10px] tracking-[0.2em] transition-all bg-indigo-600 hover:bg-indigo-700 text-white shadow-lg shadow-indigo-500/20">
                    Filtrar Planillas
                </button>
            </div>
        </form>
    </div>

    <!-- Listado de Planillas con Componentes Standard de la Plataforma -->
    <div class="bg-white dark:bg-slate-900 rounded-3xl border border-slate-100 dark:border-slate-800 shadow-sm overflow-hidden no-print">
        <div class="p-6 border-b border-slate-50 dark:border-slate-800 flex justify-between items-center">
            <h2 class="text-lg font-bold text-slate-800 dark:text-white">Planillas de Rutas por Domiciliario (Consolidado Diario)</h2>
        </div>

        <x-table>
            <x-table.thead>
                <x-table.th>Fecha Programada</x-table.th>
                <x-table.th>Domiciliario</x-table.th>
                <x-table.th>Rutas Consolidadas</x-table.th>
                <x-table.th class="text-center">Pedidos</x-table.th>
                <x-table.th class="text-right">Efectivo Recaudado</x-table.th>
                <x-table.th class="text-center">Estado</x-table.th>
                <x-table.th class="text-center">Liquidación</x-table.th>
                <x-table.th class="text-right">Acciones</x-table.th>
            </x-table.thead>
            <x-table.tbody>
                @forelse($rutas as $ruta)
                    <x-table.tr>
                        <x-table.td class="font-bold text-slate-850 dark:text-slate-200">
                            {{ $ruta->fecha_programada?->format('d/m/Y') }}
                        </x-table.td>
                        <x-table.td class="text-slate-600 dark:text-slate-300">
                            {{ $ruta->domiciliario?->nombre ?? 'Sin Asignar' }}
                        </x-table.td>
                        <x-table.td class="text-xs text-slate-500">
                            <span class="font-semibold text-slate-700 dark:text-slate-200">{{ $ruta->all_routes_names }}</span>
                        </x-table.td>
                        <x-table.td class="text-center">
                            <span class="px-2.5 py-1 bg-slate-100 dark:bg-slate-800 rounded-full font-bold text-xs">
                                {{ $ruta->total_pedidos_count }} Pedidos
                            </span>
                        </x-table.td>
                        <x-table.td class="text-right font-bold text-slate-800 dark:text-white">
                            ${{ number_format($ruta->total_recaudado_dia, 0, ',', '.') }}
                        </x-table.td>
                        <x-table.td class="text-center">
                            <span class="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider
                                @if($ruta->estado === 'finalizada' || $ruta->estado === 'cerrada') bg-emerald-500/10 text-emerald-600 dark:text-emerald-400
                                @elseif($ruta->estado === 'en_ruta') bg-blue-500/10 text-blue-600 dark:text-blue-400
                                @else bg-amber-500/10 text-amber-600 dark:text-amber-400 @endif">
                                {{ $ruta->estado }}
                            </span>
                        </x-table.td>
                        <x-table.td class="text-center">
                            <span class="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider
                                @if($ruta->estado_liquidacion === 'liquidada') bg-indigo-500/10 text-indigo-600 dark:text-indigo-400
                                @else bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 @endif">
                                {{ $ruta->estado_liquidacion ?? 'pendiente' }}
                            </span>
                        </x-table.td>
                        <x-table.td class="text-right">
                            <button @click="openSettlementModal({{ $ruta->id }})" class="bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-600 hover:text-white px-4 py-2 rounded-xl text-xs font-bold transition-all">
                                {{ $ruta->estado_liquidacion === 'liquidada' ? 'Ver Detalles' : 'Liquidar' }}
                            </button>
                        </x-table.td>
                    </x-table.tr>
                @empty
                    <x-table.tr>
                        <x-table.td colspan="8" class="py-8 text-center text-slate-400 font-medium">
                            No se encontraron planillas de rutas en el sistema.
                        </x-table.td>
                    </x-table.tr>
                @endforelse
            </x-table.tbody>
        </x-table>
        
        <div class="p-6 border-t border-slate-50 dark:border-slate-800">
            {{ $rutas->links() }}
        </div>
    </div>

    <!-- MODAL DE LIQUIDACIÓN PREMIUM -->
    <template x-teleport="body">
        <div x-show="modalOpen" 
             class="fixed inset-0 z-50 overflow-y-auto no-print" 
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             style="display: none;">
            
            <!-- Backdrop (Static backdrop: do not close when clicked outside) -->
            <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm"></div>

            <!-- Content wrapper -->
            <div class="relative min-h-screen flex items-center justify-center p-4">
                <div class="relative bg-white dark:bg-slate-900 rounded-3xl max-w-5xl w-full shadow-2xl border border-slate-100 dark:border-slate-800 overflow-hidden"
                     x-transition:enter="transition ease-out duration-300 transform"
                     x-transition:enter-start="opacity-0 translate-y-4 scale-95"
                     x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                     x-transition:leave="transition ease-in duration-200 transform"
                     x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                     x-transition:leave-end="opacity-0 translate-y-4 scale-95">

                    <!-- Header standard con icono rotado y titulo claro -->
                    <div class="bg-indigo-600 px-6 py-4 flex items-center justify-between relative overflow-hidden">
                        <div class="absolute -right-4 -top-4 opacity-10 rotate-12 text-white">
                            <svg class="w-24 h-24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                        </div>
                        <div class="flex items-center space-x-3 relative z-10">
                            <div class="bg-white/20 p-2 rounded-xl backdrop-blur-md">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                </svg>
                            </div>
                            <div>
                                <div class="flex items-center gap-3">
                                    <h3 class="text-xl font-bold text-white tracking-tight">Planilla de Liquidación del Día</h3>
                                    <span class="px-2.5 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider bg-white/25 text-white" x-text="ruta.estado_liquidacion"></span>
                                </div>
                                <p class="text-[10px] text-indigo-200 mt-0.5 font-bold uppercase tracking-wider">
                                    Rutas: <span class="text-white" x-text="ruta.nombre_ruta"></span> 
                                    | Domiciliario: <span class="text-white" x-text="ruta.domiciliario_nombre"></span>
                                    | Fecha: <span class="text-white" x-text="formatDate(ruta.fecha_programada)"></span>
                                </p>
                            </div>
                        </div>
                        <button type="button" @click="modalOpen = false" class="text-white/80 hover:text-white transition-colors relative z-10">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>

                    <!-- Modal Body (con padding extra para compensar cabecera) -->
                    <div class="p-6 max-h-[70vh] overflow-y-auto pr-2 space-y-8">
                    
                    <!-- 1. Tabla de Pedidos -->
                    <div class="space-y-3">
                        <h4 class="text-xs font-black uppercase text-slate-400 tracking-wider">Detalle de Pedidos en Rutas del Día</h4>
                        <div class="border border-slate-100 dark:border-slate-800 rounded-2xl overflow-hidden bg-slate-50/50 dark:bg-slate-900/50 overflow-x-auto">
                            <table class="w-full text-left border-collapse text-xs">
                                <thead>
                                    <tr class="bg-slate-100 dark:bg-slate-800 text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                                        <th class="py-3 px-2 text-center w-6">NO</th>
                                        <th class="py-3 px-2">Código / Cliente</th>
                                        <th class="py-3 px-2">Dirección / Barrio</th>
                                        <th class="py-3 px-2 text-center">Estado</th>
                                        <th class="py-3 px-2 text-center">Medio Pago</th>
                                        <th class="py-3 px-2 text-right">Total Pedido</th>
                                        <th class="py-3 px-2 text-right">Efectivo Recogido</th>
                                        <th class="py-3 px-2 text-center">¿Recaudado Dom?</th>
                                        <th class="py-3 px-2 text-center" style="width: 120px;">Pago Dom. ($)</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                                    <template x-for="(ped, index) in pedidos" :key="ped.id">
                                        <tr class="hover:bg-slate-100/40 dark:hover:bg-slate-800/40 transition-all">
                                            <td class="py-3 px-2 text-center font-bold" x-text="index + 1"></td>
                                            <td class="py-3 px-2">
                                                <div class="flex items-center gap-1.5">
                                                    <span class="font-bold text-slate-800 dark:text-white" x-text="ped.codigo_seguimiento"></span>
                                                    <span x-show="ped.estado_pago === 'pagado' && !isLocked" class="px-1.5 py-0.5 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded text-[8px] font-bold">Liquidado</span>
                                                </div>
                                                <div class="text-[10px] text-slate-400 truncate max-w-[130px]" x-text="ped.cliente"></div>
                                                <div class="text-[9px] text-slate-500" x-text="ped.telefono"></div>
                                            </td>
                                            <td class="py-3 px-2">
                                                <div class="font-bold text-slate-700 dark:text-slate-300" x-text="ped.barrio"></div>
                                                <div class="text-[10px] text-slate-400 truncate max-w-[150px]" x-text="ped.direccion"></div>
                                            </td>
                                            <td class="py-3 px-2 text-center">
                                                <span class="px-2 py-0.5 rounded-full font-bold uppercase tracking-wider text-[9px]"
                                                      :class="ped.estado_entrega === 'entregado' ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400' : 'bg-red-500/10 text-red-600 dark:text-red-400'"
                                                      x-text="ped.estado_entrega">
                                                </span>
                                            </td>
                                            <td class="py-3 px-2 text-center">
                                                <button type="button" 
                                                        @click="toggleMetodoPago(ped)" 
                                                        :disabled="isLocked"
                                                        class="px-2.5 py-1 rounded-lg text-[9px] font-black uppercase tracking-wider transition-all"
                                                        :class="[
                                                            isLocked ? 'opacity-85' : 'cursor-pointer hover:scale-105 active:scale-95',
                                                            ped.metodo_pago === 'efectivo' 
                                                                ? 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400' 
                                                                : (ped.metodo_pago === 'transferencia' 
                                                                    ? 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-400'
                                                                    : 'bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-350')
                                                        ]">
                                                    <span x-text="ped.metodo_pago"></span>
                                                </button>
                                            </td>
                                            
                                            <td class="py-3 px-2 text-right font-bold text-slate-700 dark:text-slate-300" x-text="formatMoney(ped.total_pagar)"></td>
                                            <td class="py-3 px-2 text-right font-bold text-slate-700 dark:text-slate-300" x-text="formatMoney(ped.monto_pagado)"></td>
                                            <td class="py-3 px-2 text-center">
                                                <button type="button"
                                                        @click="toggleRecaudado(ped)"
                                                        :disabled="isLocked || ped.metodo_pago !== 'efectivo'"
                                                        class="w-5 h-5 rounded flex items-center justify-center mx-auto transition-all border"
                                                        :class="[
                                                            ped.metodo_pago !== 'efectivo' ? 'opacity-30 cursor-not-allowed border-slate-200 bg-slate-100 dark:border-slate-800 dark:bg-slate-900' : 'cursor-pointer',
                                                            ped.metodo_pago === 'efectivo' && ped.recaudado_por_domiciliario 
                                                                ? 'bg-emerald-500 border-emerald-600 text-white shadow-sm shadow-emerald-500/20' 
                                                                : 'bg-white border-slate-300 text-transparent hover:border-emerald-500 dark:bg-slate-950 dark:border-slate-700'
                                                        ]"
                                                        :title="ped.metodo_pago !== 'efectivo' ? 'No aplica' : (ped.recaudado_por_domiciliario ? 'Retenido por el domiciliario' : 'Entregado a administración')">
                                                    <svg x-show="ped.recaudado_por_domiciliario && ped.metodo_pago === 'efectivo'" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                                                    </svg>
                                                </button>
                                            </td>
                                            <td class="py-3 px-2 text-center">
                                                <input type="number" 
                                                       x-model.number="ped.pago_domiciliario" 
                                                       class="w-full bg-yellow-50/40 dark:bg-yellow-950/10 border border-yellow-250/50 dark:border-yellow-900/30 rounded-lg px-2 py-1 text-center text-xs font-bold text-slate-700 dark:text-white focus:ring-1 focus:ring-yellow-400"
                                                       :disabled="isLocked">
                                            </td>
                                        </tr>
                                    </template>

                                    <!-- Fila de Totales de la Matriz de Despacho -->
                                    <tr class="bg-slate-50 dark:bg-slate-800/60 font-black text-[10px] text-slate-650 dark:text-slate-300 border-t-2 border-slate-200 dark:border-slate-700">
                                        <td colspan="5" class="py-3 px-2 text-right uppercase tracking-wider">Totales Despacho:</td>
                                        
                                        <td class="py-3 px-2 text-right border-l border-slate-200 dark:border-slate-800 font-extrabold" x-text="formatMoney(pedidos.reduce((sum, p) => sum + p.total_pagar, 0))"></td>
                                        <td class="py-3 px-2 text-right border-l border-slate-200 dark:border-slate-800 font-extrabold" x-text="formatMoney(pedidos.reduce((sum, p) => sum + p.monto_pagado, 0))"></td>
                                        <td colspan="2" class="py-3 px-2 border-l border-slate-200 dark:border-slate-800"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 1.b Cruce de Pedidos Pendientes en Efectivo de Fechas Anteriores -->
                    <div class="space-y-3" x-show="pedidos_pendientes_pasados.length > 0">
                        <div class="flex justify-between items-center">
                            <h4 class="text-xs font-black uppercase text-indigo-600 tracking-wider">Cruce de Pedidos Pendientes de Fechas Anteriores (Efectivo)</h4>
                            <span class="text-[10px] text-slate-400 font-bold" x-text="`${ruta.pedidos_cruzados.length} pedidos seleccionados`"></span>
                        </div>
                        <div class="border border-indigo-100 dark:border-indigo-900/30 rounded-2xl overflow-hidden bg-indigo-50/10 dark:bg-indigo-900/10 max-h-[180px] overflow-y-auto">
                            <table class="w-full text-left border-collapse text-xs">
                                <thead>
                                    <tr class="bg-indigo-50/50 dark:bg-indigo-900/20 text-[10px] font-black text-indigo-600/80 dark:text-indigo-400 uppercase tracking-wider border-b border-indigo-100/50 dark:border-indigo-900/40">
                                        <th class="py-3 px-4 w-12 text-center">Cruzar</th>
                                        <th class="py-3 px-4">Código / Cliente</th>
                                        <th class="py-3 px-4 text-center">Fecha Entrega</th>
                                        <th class="py-3 px-4 text-right">Monto a Rendir</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-indigo-100/30 dark:divide-indigo-900/20">
                                    <template x-for="pPasado in pedidos_pendientes_pasados" :key="pPasado.id">
                                        <tr class="hover:bg-indigo-50/30 dark:hover:bg-indigo-900/30 transition-all">
                                            <td class="py-3 px-4 text-center">
                                                <input type="checkbox" 
                                                       :value="pPasado.id" 
                                                       x-model="ruta.pedidos_cruzados" 
                                                       class="rounded border-indigo-300 dark:border-indigo-700 text-indigo-650 focus:ring-indigo-500 h-4 w-4"
                                                       :disabled="isLocked">
                                            </td>
                                            <td class="py-3 px-4">
                                                <div class="font-bold text-slate-800 dark:text-white" x-text="pPasado.codigo_seguimiento"></div>
                                                <div class="text-[10px] text-slate-500" x-text="pPasado.cliente"></div>
                                            </td>
                                            <td class="py-3 px-4 text-center text-slate-600 dark:text-slate-400" x-text="formatDate(pPasado.fecha_entrega_programada)"></td>
                                            <td class="py-3 px-4 text-right font-extrabold text-slate-850 dark:text-slate-200" x-text="formatMoney(pPasado.total_pagar)"></td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 2. Auxilio combustible y Ajustes -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="space-y-4">
                            <h4 class="text-xs font-black uppercase text-slate-400 tracking-wider">Datos y Compensaciones</h4>
                            
                            <!-- Auxilio combustible -->
                            <div class="flex justify-between items-center p-4 bg-slate-50 dark:bg-slate-800/40 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm">
                                <div>
                                    <span class="text-xs font-bold text-slate-700 dark:text-slate-300">Auxilio de Combustible</span>
                                    <p class="text-[10px] text-slate-400">Auxilio por ruta realizada</p>
                                </div>
                                <div class="w-36">
                                    <input type="number" 
                                           x-model.number="ruta.auxilio_combustible" 
                                           @change="checkAuxilioChange()"
                                           class="w-full bg-yellow-50/40 dark:bg-yellow-950/10 border border-yellow-250/50 dark:border-yellow-900/30 rounded-xl px-3 py-2 text-right font-bold text-sm text-slate-700 dark:text-white focus:ring-2 focus:ring-yellow-400"
                                           :disabled="isLocked">
                                </div>
                            </div>

                            <!-- Fecha de Liquidación -->
                            <div class="flex justify-between items-center p-4 bg-slate-50 dark:bg-slate-800/40 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm">
                                <div>
                                    <span class="text-xs font-bold text-slate-700 dark:text-slate-300">Fecha de Liquidación</span>
                                    <p class="text-[10px] text-slate-400">Fecha de efectividad del pago</p>
                                </div>
                                <div class="w-44">
                                    <input type="date" 
                                           x-model="ruta.fecha_liquidacion" 
                                           class="w-full bg-yellow-50/40 dark:bg-yellow-950/10 border border-yellow-250/50 dark:border-yellow-900/30 rounded-xl px-3 py-2 text-center font-bold text-sm text-slate-700 dark:text-white focus:ring-2 focus:ring-yellow-400"
                                           :disabled="isLocked">
                                </div>
                            </div>
                        </div>

                        <!-- Ajustes varios (novedades + / -) -->
                        <div class="space-y-4">
                            <div class="flex justify-between items-center">
                                <h4 class="text-xs font-black uppercase text-slate-400 tracking-wider">Ajustes Adicionales (Novedades)</h4>
                                <button type="button" 
                                        @click="addAjuste" 
                                        class="px-2.5 py-1 bg-slate-100 dark:bg-slate-800 text-[10px] font-bold text-slate-600 dark:text-slate-400 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-700 transition-all flex items-center gap-1"
                                        :disabled="isLocked">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"></path>
                                    </svg>
                                    Agregar Ajuste
                                </button>
                            </div>

                            <div class="space-y-2.5 max-h-[180px] overflow-y-auto pr-1">
                                <template x-for="(ajuste, idx) in ruta.ajustes" :key="idx">
                                    <div class="flex gap-3 items-center">
                                        <select x-model="ajuste.tipo"
                                                class="w-32 bg-yellow-50/40 dark:bg-yellow-950/10 border border-yellow-250/50 dark:border-yellow-900/30 rounded-xl px-2 py-2 text-[10px] font-bold text-slate-700 dark:text-white focus:ring-2 focus:ring-yellow-400"
                                                :disabled="isLocked">
                                            <option value="nomina">Nómina</option>
                                            <option value="efectivo">Caja / Recaudo</option>
                                        </select>
                                        <input type="text" 
                                               x-model="ajuste.descripcion" 
                                               placeholder="Descripción (ej: Peaje, Descuento daño)" 
                                               class="flex-1 bg-yellow-50/40 dark:bg-yellow-950/10 border border-yellow-250/50 dark:border-yellow-900/30 rounded-xl px-3 py-2 text-xs text-slate-700 dark:text-white focus:ring-2 focus:ring-yellow-400"
                                               :disabled="isLocked">
                                        <input type="text" 
                                               x-model="ajuste.valor" 
                                               @input="ajuste.valor = $event.target.value.replace(/[^0-9.-]/g, '')"
                                               placeholder="Valor" 
                                               class="w-28 bg-yellow-50/40 dark:bg-yellow-950/10 border border-yellow-250/50 dark:border-yellow-900/30 rounded-xl px-3 py-2 text-xs text-right font-bold text-slate-700 dark:text-white focus:ring-2 focus:ring-yellow-400"
                                               :disabled="isLocked">
                                        <button type="button" 
                                                @click="removeAjuste(idx)" 
                                                class="p-2 text-red-500 hover:bg-red-500/10 rounded-xl transition-all"
                                                :disabled="isLocked">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </template>
                                <p x-show="!ruta.ajustes || ruta.ajustes.length === 0" class="text-xs text-slate-400 italic text-center py-4 bg-slate-50/50 dark:bg-slate-800/10 rounded-2xl border border-dashed border-slate-100 dark:border-slate-800">
                                    Sin ajustes agregados.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- 3. Totales de Liquidación e Ingresos -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 pt-4 border-t border-slate-100 dark:border-slate-800">
                        
                        <!-- Panel de Pago al Domiciliario -->
                        <div class="p-6 bg-gradient-to-br from-slate-50 to-white dark:from-slate-800/20 dark:to-slate-900/40 rounded-3xl border border-slate-100 dark:border-slate-800 shadow-sm relative overflow-hidden group">
                            <div class="absolute top-0 right-0 w-24 h-24 bg-brand-orange/5 rounded-full -mr-12 -mt-12"></div>
                            <h5 class="text-xs font-black uppercase text-brand-orange tracking-wider mb-4 flex items-center gap-2">
                                <span class="w-1.5 h-1.5 rounded-full bg-brand-orange"></span>
                                Resumen de Pago (Nómina)
                            </h5>

                            <div class="space-y-2.5 text-xs text-slate-600 dark:text-slate-400">
                                <div class="flex justify-between">
                                    <span>Subtotal Domicilios (<span x-text="totalEntregados()"></span>)</span>
                                    <span class="font-bold text-slate-800 dark:text-white" x-text="formatMoney(subtotalPayout())"></span>
                                </div>
                                <div class="flex justify-between">
                                    <span>Auxilio Combustible</span>
                                    <span class="font-bold text-slate-800 dark:text-white" x-text="formatMoney(ruta.auxilio_combustible)"></span>
                                </div>
                                <div class="flex justify-between">
                                    <span>Ajustes Nómina</span>
                                    <span class="font-bold text-slate-800 dark:text-white" x-text="formatMoney(sumAjustesNomina())"></span>
                                </div>
                                <div class="flex justify-between items-center pt-3 border-t border-slate-100 dark:border-slate-800 text-sm font-black text-slate-800 dark:text-white">
                                    <span>Total a Pagar al Domiciliario</span>
                                    <span class="text-xl font-extrabold text-slate-800 dark:text-white" x-text="formatMoney(totalAPagar())"></span>
                                </div>
                            </div>
                        </div>

                        <!-- Panel de Conciliación de Efectivo -->
                        <div class="p-6 bg-gradient-to-br from-slate-50 to-white dark:from-slate-800/20 dark:to-slate-900/40 rounded-3xl border border-slate-100 dark:border-slate-800 shadow-sm relative overflow-hidden group">
                            <div class="absolute top-0 right-0 w-24 h-24 bg-indigo-500/5 rounded-full -mr-12 -mt-12"></div>
                            <h5 class="text-xs font-black uppercase text-indigo-500 tracking-wider mb-4 flex items-center gap-2">
                                <span class="w-1.5 h-1.5 rounded-full bg-indigo-500"></span>
                                Conciliación de Efectivo (Recaudo)
                            </h5>

                            <div class="space-y-3.5 text-xs text-slate-600 dark:text-slate-400">
                                <div class="flex justify-between items-center">
                                    <span>Recaudo Pedidos (Efectivo)</span>
                                    <span class="font-bold text-slate-800 dark:text-white" x-text="formatMoney(totalEfectivoPedidos())"></span>
                                </div>
                                
                                <div class="flex justify-between items-center">
                                    <span>Base Cambios Entregada</span>
                                    <div class="w-32">
                                        <input type="number" 
                                               x-model.number="ruta.base_efectivo" 
                                               class="w-full bg-yellow-50/40 dark:bg-yellow-950/10 border border-yellow-250/50 dark:border-yellow-900/30 rounded-lg px-2 py-1 text-right text-xs font-bold text-slate-700 dark:text-white focus:ring-1 focus:ring-yellow-400"
                                               :disabled="isLocked">
                                    </div>
                                </div>

                                <div class="flex justify-between items-center">
                                    <div>
                                        <span class="text-xs font-bold text-slate-700 dark:text-slate-300">Efectivo Rutas Pasadas Cruzado</span>
                                        <p class="text-[10px] text-slate-400">Consolidado cruzado en tabla superior</p>
                                    </div>
                                    <span class="font-extrabold text-sm text-slate-800 dark:text-white" x-text="formatMoney(sumPedidosCruzados())"></span>
                                </div>

                                <div class="flex justify-between items-center">
                                    <span>Ajustes Caja / Recaudo</span>
                                    <span class="font-bold text-slate-800 dark:text-white" x-text="formatMoney(sumAjustesEfectivo())"></span>
                                </div>

                                <div class="flex justify-between items-center pt-2 border-t border-slate-100 dark:border-slate-800 text-sm font-black text-slate-800 dark:text-white">
                                    <span>Efectivo Total a Entregar</span>
                                    <span class="text-xl text-indigo-600 dark:text-indigo-400" x-text="formatMoney(totalEfectivoEntregar())"></span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- Observaciones (Ubicado debajo del resumen y la conciliación) -->
                    <div class="space-y-2 pt-4 border-t border-slate-100 dark:border-slate-800">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Observaciones de Liquidación</label>
                        <textarea x-model="ruta.observaciones_liquidacion" 
                                  rows="3" 
                                  class="w-full bg-yellow-50/40 dark:bg-yellow-950/10 border border-yellow-250/50 dark:border-yellow-900/30 rounded-2xl py-3 px-4 text-xs focus:ring-2 focus:ring-yellow-400 text-slate-700 dark:text-white"
                                  placeholder="Detalles sobre retrasos, novedades, etc..."
                                  :disabled="isLocked"></textarea>
                    </div>

                    <!-- Balance Neto Final Box -->
                    <div class="p-6 bg-slate-50 dark:bg-slate-800/40 rounded-3xl border border-slate-150 dark:border-slate-800 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                        <div>
                            <h5 class="text-sm font-black text-slate-800 dark:text-white uppercase tracking-tight">Conciliación Neta Final</h5>
                            <p class="text-xs text-slate-400">Cruce de caja: Efectivo total a entregar por el domiciliario menos su pago neto de nómina.</p>
                        </div>
                        <div class="text-right">
                            <span class="text-2xl font-black block" 
                                  :class="totalEfectivoEntregar() >= totalAPagar() ? 'text-indigo-600 dark:text-indigo-400' : 'text-rose-600 dark:text-rose-400'"
                                  x-text="formatMoney(Math.abs(totalEfectivoEntregar() - totalAPagar()))"></span>
                            <span class="text-[10px] font-black uppercase tracking-widest px-2.5 py-0.5 rounded-full"
                                  :class="totalEfectivoEntregar() >= totalAPagar() ? 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/50 dark:text-indigo-300' : 'bg-rose-100 text-rose-800 dark:bg-rose-900/50 dark:text-rose-300'"
                                  x-text="totalEfectivoEntregar() >= totalAPagar() ? 'Domiciliario Entrega a Caja' : 'Caja Paga a Domiciliario'"></span>
                        </div>
                    </div>

                    </div>

                    <!-- Footer / Actions -->
                    <div class="px-6 py-4 bg-slate-50 dark:bg-slate-800/40 border-t border-slate-100 dark:border-slate-700 flex flex-wrap gap-3 justify-between items-center">
                        <div>
                            <button type="button" 
                                    @click="printPlanilla" 
                                    class="px-5 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-white font-bold text-xs rounded-xl transition-all flex items-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
                                </svg>
                                Imprimir Planilla
                            </button>
                        </div>

                        <div class="flex gap-3 items-center">
                            <button type="button" @click="modalOpen = false"
                                    class="px-5 py-2.5 text-slate-500 hover:text-berry-red hover:bg-red-50 dark:hover:bg-red-950/20 font-bold text-xs rounded-xl transition-all uppercase tracking-wider">
                                Cancelar
                            </button>

                            <!-- Guardar Borrador (solo si no está cerrada) -->
                            <button type="button" 
                                    x-show="!isLocked"
                                    @click="savePlanilla(false)" 
                                    class="px-5 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-white font-bold text-xs rounded-xl transition-all"
                                    :disabled="saving">
                                <span x-text="saving ? 'Guardando...' : 'Guardar Borrador'"></span>
                            </button>

                            <!-- Cerrar / Liquidar -->
                            <button type="button" 
                                    @click="toggleLock" 
                                    class="px-6 py-2.5 font-bold text-xs rounded-xl transition-all shadow-md"
                                    :class="isLocked ? 'bg-amber-600 hover:bg-amber-700 text-white' : 'bg-indigo-600 hover:bg-indigo-700 text-white'"
                                    :disabled="saving">
                                <span x-text="isLocked ? 'Reabrir Liquidación' : 'Cerrar y Liquidar'"></span>
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </template>

    <!-- SECCIÓN DE IMPRESIÓN DINÁMICA (SOLO IMPRIME ESTE BLOQUE) -->
    <div id="print-area" class="print-only font-sans text-slate-900 bg-white">
        <!-- Cabecera Profesional con Logo -->
        <div class="flex justify-between items-center border-b-2 border-slate-400 pb-2">
            <div class="flex items-center gap-3">
                <img src="{{ asset('images/logo-premium.png') }}" alt="Logo" class="h-10 w-10 rounded-full object-cover border border-slate-300">
                <div>
                    <h1 class="text-sm font-black uppercase tracking-tight text-slate-900 leading-none">JOINTRUST S.A.S.</h1>
                    <p class="text-[7px] text-slate-500 font-bold uppercase tracking-wider mt-0.5">Servicios Integrales de Alimentación</p>
                </div>
            </div>
            <div class="text-right">
                <h2 class="text-xs font-black uppercase tracking-wider text-slate-800 leading-none">PLANILLA DE DESPACHO Y LIQUIDACIÓN</h2>
                <div class="text-[7px] text-slate-500 font-bold mt-1">
                    FECHA PROGRAMADA: <span class="text-slate-900" x-text="formatDate(ruta.fecha_programada)"></span>
                    | IMPRESIÓN: <span class="text-slate-900">{{ now()->format('d/m/Y H:i') }}</span>
                </div>
            </div>
        </div>

        <!-- Info General Domiciliario y Ruta -->
        <div class="grid grid-cols-3 gap-4 py-1.5 bg-slate-100 rounded-xl px-4 border border-slate-200 text-[9px] mt-2">
            <div>
                <span class="text-[7px] font-black text-slate-500 uppercase tracking-widest block leading-none">Domiciliario</span>
                <span class="font-bold text-slate-900" x-text="ruta.domiciliario_nombre"></span>
            </div>
            <div>
                <span class="text-[7px] font-black text-slate-500 uppercase tracking-widest block leading-none">Rutas / Salidas</span>
                <span class="font-bold text-slate-900" x-text="ruta.nombre_ruta"></span>
            </div>
            <div>
                <span class="text-[7px] font-black text-slate-500 uppercase tracking-widest block leading-none">Estado Liquidación</span>
                <span class="font-bold text-slate-900 uppercase" x-text="ruta.estado_liquidacion"></span>
            </div>
        </div>

        <!-- Detalle de Entregas -->
        <div class="space-y-1 mt-2">
            <table class="w-full text-[8px] border-collapse border border-slate-450 bg-white">
                <thead>
                    <tr class="bg-slate-800 text-white text-[8px]">
                        <th class="p-0.5 border border-slate-600 text-center font-black w-5">NO</th>
                        <th class="p-0.5 border border-slate-600 text-center font-black w-12">ESTADO</th>
                        <th class="p-0.5 border border-slate-600 text-center font-black w-16">CELULAR</th>
                        <th class="p-0.5 border border-slate-600 text-left font-black">DIRECCIÓN</th>
                        <th class="p-0.5 border border-slate-600 text-left font-black">NOMBRE</th>
                        
                        <!-- Columnas Dinámicas de Productos -->
                        <template x-for="prod in productos" :key="prod.id">
                            <th class="p-0.5 border border-slate-600 text-center font-black uppercase vertical-text w-5">
                                <span x-text="prod.codigo"></span>
                            </th>
                        </template>

                        <th class="p-0.5 border border-slate-600 text-right font-black uppercase w-16">DEBE $</th>
                        <th class="p-0.5 border border-slate-600 text-center font-black bg-slate-200 text-slate-900 w-5">E</th>
                        <th class="p-0.5 border border-slate-600 text-center font-black bg-slate-200 text-slate-900 w-5">D</th>
                        <th class="p-0.5 border border-slate-600 text-center font-black bg-slate-200 text-slate-900 w-5">PE</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="(ped, index) in pedidos" :key="ped.id">
                        <tr class="hover:bg-slate-50 text-[8px]">
                            <td class="p-0.5 border border-slate-300 text-center font-bold" x-text="index + 1"></td>
                            <td class="p-0.5 border border-slate-300 text-center uppercase font-bold text-[7px]" x-text="ped.metodo_pago === 'efectivo' ? 'EFECTIVO' : 'TRANSF'"></td>
                            <td class="p-0.5 border border-slate-300 text-center" x-text="ped.telefono"></td>
                            <td class="p-0.5 border border-slate-300 text-left text-[7px]" x-text="ped.direccion + ' (' + ped.barrio + ')'"></td>
                            <td class="p-0.5 border border-slate-300 text-left font-bold uppercase text-[7px]" x-text="ped.cliente"></td>
                            
                            <!-- Celdas Matriciales de Productos -->
                            <template x-for="prod in productos" :key="prod.id">
                                <td class="p-0.5 border border-slate-300 text-center font-bold text-[8px]" :class="ped.productos[prod.id] > 0 ? 'bg-indigo-50/20' : ''">
                                    <span x-text="ped.productos[prod.id] || ''"></span>
                                </td>
                            </template>

                            <td class="p-0.5 border border-slate-300 text-right font-bold" x-text="formatMoney(ped.total_pagar).replace('$', '')"></td>
                            <!-- Columnas E, D, PE marcadas con X -->
                            <td class="p-0.5 border border-slate-300 text-center font-black text-[9px] bg-slate-50/30" x-text="ped.metodo_pago === 'efectivo' && !ped.recaudado_por_domiciliario ? 'X' : ''"></td>
                            <td class="p-0.5 border border-slate-300 text-center font-black text-[9px] bg-slate-50/30" x-text="ped.metodo_pago === 'transferencia' ? 'X' : ''"></td>
                            <td class="p-0.5 border border-slate-300 text-center font-black text-[9px] bg-slate-50/30" x-text="ped.recaudado_por_domiciliario ? 'X' : ''"></td>
                        </tr>
                    </template>
                    <!-- Fila de Totales de la Matriz de Despacho en Impresión -->
                    <tr class="bg-slate-100 font-black text-[8px] border-t-2 border-slate-400">
                        <td colspan="5" class="p-0.5 border border-slate-300 text-right uppercase font-bold">Totales Despacho:</td>
                        
                        <template x-for="prod in productos" :key="prod.id">
                            <td class="p-0.5 border border-slate-300 text-center font-black text-slate-900" x-text="totales_productos[prod.id] || 0"></td>
                        </template>
                        
                        <td class="p-0.5 border border-slate-300 text-right font-extrabold text-slate-900" x-text="formatMoney(pedidos.reduce((sum, p) => sum + p.total_pagar, 0)).replace('$', '')"></td>
                        <td colspan="3" class="p-0.5 border border-slate-300"></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Bloque de Liquidación y Totales (Compilado para no saltar de página) -->
        <div class="avoid-break space-y-2 mt-2">
            
            <!-- Pedidos cruzados de fechas anteriores (compacto) -->
            <div x-show="ruta.pedidos_cruzados && ruta.pedidos_cruzados.length > 0" class="space-y-1">
                <span class="text-[8px] font-black uppercase text-slate-500 tracking-wider">Pedidos Cruzados de Fechas Anteriores (Efectivo)</span>
                <table class="w-full text-left border-collapse text-[8px] border border-slate-300">
                    <thead>
                        <tr class="bg-slate-50 text-[7px] font-black text-slate-650 uppercase border-b border-slate-300">
                            <th class="py-1 px-2">Código</th>
                            <th class="py-1 px-2">Cliente</th>
                            <th class="py-1 px-2 text-center">Fecha Entrega</th>
                            <th class="py-1 px-2 text-right">Monto Recibido</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="pPasado in pedidos_pendientes_pasados" :key="pPasado.id">
                            <tr class="border-b border-slate-200" x-show="ruta.pedidos_cruzados.includes(pPasado.id)">
                                <td class="py-0.5 px-2 font-bold" x-text="pPasado.codigo_seguimiento"></td>
                                <td class="py-0.5 px-2" x-text="pPasado.cliente"></td>
                                <td class="py-0.5 px-2 text-center" x-text="formatDate(pPasado.fecha_entrega_programada)"></td>
                                <td class="py-0.5 px-2 text-right font-bold" x-text="formatMoney(pPasado.total_pagar)"></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>

            <!-- Resúmenes Financieros -->
            <div class="grid grid-cols-2 gap-4">
                
                <!-- Resumen de Pago (Nómina) -->
                <div class="p-2 border border-slate-350 rounded-xl space-y-1 text-[8.5px]">
                    <h4 class="font-black uppercase text-slate-800 border-b pb-1 mb-1 leading-none">Resumen de Liquidación (Nómina)</h4>
                    <div class="flex justify-between leading-tight">
                        <span>Subtotal Domicilios (<span x-text="totalEntregados()"></span>)</span>
                        <span class="font-bold text-slate-900" x-text="formatMoney(subtotalPayout())"></span>
                    </div>
                    <div class="flex justify-between leading-tight">
                        <span>Auxilio Combustible</span>
                        <span class="font-bold text-slate-900" x-text="formatMoney(ruta.auxilio_combustible)"></span>
                    </div>
                    <div class="flex justify-between leading-tight">
                        <span>Ajustes Nómina</span>
                        <span class="font-bold text-slate-900" x-text="formatMoney(sumAjustesNomina())"></span>
                    </div>
                    <!-- Desglose de Ajustes Nómina -->
                    <div class="pl-2.5 border-l border-slate-300 text-[7px] text-slate-500 space-y-0.5 mt-0.5" x-show="ruta.ajustes && ruta.ajustes.filter(a => (a.tipo || 'nomina') === 'nomina').length > 0">
                        <template x-for="(ajuste, idx) in ruta.ajustes.filter(a => (a.tipo || 'nomina') === 'nomina')" :key="'nom-'+idx">
                            <div class="flex justify-between">
                                <span x-text="ajuste.descripcion || 'Ajuste ' + (idx + 1)"></span>
                                <span class="font-semibold text-slate-850" x-text="formatMoney(ajuste.valor)"></span>
                            </div>
                        </template>
                    </div>
                    <div class="flex justify-between items-center pt-1 border-t font-black text-[9px] text-slate-950 mt-1">
                        <span>Total Neto a Pagar al Domiciliario</span>
                        <span class="font-extrabold text-[10px]" x-text="formatMoney(totalAPagar())"></span>
                    </div>
                </div>

                <!-- Conciliación Caja -->
                <div class="p-2 border border-slate-350 rounded-xl space-y-1 text-[8.5px]">
                    <h4 class="font-black uppercase text-slate-800 border-b pb-1 mb-1 leading-none">Conciliación de Caja (Recaudo)</h4>
                    <div class="flex justify-between leading-tight">
                        <span>Efectivo Pedidos Entregados</span>
                        <span class="font-bold text-slate-900" x-text="formatMoney(totalEfectivoPedidos())"></span>
                    </div>
                    <div class="flex justify-between leading-tight">
                        <span>Base Cambios Entregada</span>
                        <span class="font-bold text-slate-900" x-text="formatMoney(ruta.base_efectivo)"></span>
                    </div>
                    <div class="flex justify-between leading-tight">
                        <span>Efectivo Rutas Pasadas Cruzado</span>
                        <span class="font-bold text-slate-900" x-text="formatMoney(sumPedidosCruzados())"></span>
                    </div>
                    <div class="flex justify-between leading-tight">
                        <span>Ajustes Caja / Recaudo</span>
                        <span class="font-bold text-slate-900" x-text="formatMoney(sumAjustesEfectivo())"></span>
                    </div>
                    <!-- Desglose de Ajustes Caja -->
                    <div class="pl-2.5 border-l border-slate-300 text-[7px] text-slate-500 space-y-0.5 mt-0.5" x-show="ruta.ajustes && ruta.ajustes.filter(a => a.tipo === 'efectivo').length > 0">
                        <template x-for="(ajuste, idx) in ruta.ajustes.filter(a => a.tipo === 'efectivo')" :key="'eff-'+idx">
                            <div class="flex justify-between">
                                <span x-text="ajuste.descripcion || 'Ajuste ' + (idx + 1)"></span>
                                <span class="font-semibold text-slate-850" x-text="formatMoney(ajuste.valor)"></span>
                            </div>
                        </template>
                    </div>
                    <div class="flex justify-between items-center pt-1 border-t font-black text-[9px] text-slate-950 mt-1">
                        <span>Efectivo Total a Recibir en Caja</span>
                        <span class="font-extrabold text-[10px]" x-text="formatMoney(totalEfectivoEntregar())"></span>
                    </div>
                </div>

            </div>

            <!-- Balance Neto Consolidado -->
            <div class="p-2 bg-slate-100 border border-slate-350 rounded-xl flex justify-between items-center text-[8.5px] leading-tight">
                <div>
                    <span class="font-black uppercase text-slate-800 block">Balance Neto Consolidado</span>
                    <span class="text-slate-500 text-[7.5px]">Cruce total de dinero: Efectivo a entregar menos pago neto de nómina</span>
                </div>
                <div class="text-right">
                    <span class="text-xs font-black block text-slate-950" x-text="formatMoney(Math.abs(totalEfectivoEntregar() - totalAPagar()))"></span>
                    <span class="font-black uppercase text-[7px] px-2 py-0.5 rounded bg-slate-200 text-slate-800" x-text="totalEfectivoEntregar() >= totalAPagar() ? 'Domiciliario Entrega a Caja' : 'Caja Paga a Domiciliario'"></span>
                </div>
            </div>

            <!-- Observaciones y Firmas -->
            <div class="grid grid-cols-3 gap-4 pt-1">
                <div class="col-span-1 p-2 border border-slate-300 rounded-xl text-[8px] space-y-0.5 h-12 overflow-y-auto">
                    <span class="font-black uppercase text-slate-500 block leading-none">Observaciones</span>
                    <p x-text="ruta.observaciones_liquidacion || 'Sin observaciones.'" class="italic text-slate-700 leading-tight"></p>
                </div>
                
                <div class="col-span-2 grid grid-cols-2 gap-8 pt-8">
                    <div class="text-center border-t border-slate-500 pt-1 text-[8px]">
                        <span class="font-black block uppercase text-slate-800">Firma del Domiciliario</span>
                        <span class="text-slate-500 text-[7px]">C.C. ___________________</span>
                    </div>
                    <div class="text-center border-t border-slate-500 pt-1 text-[8px]">
                        <span class="font-black block uppercase text-slate-800">Firma Coordinador / Caja</span>
                        <span class="text-slate-500 text-[7px]">JoinTrust Logistics</span>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

@push('styles')
<style>
    #print-area {
        display: none;
    }
    @media print {
        @page { size: letter landscape; margin: 0.3cm; }
        
        /* Reset layout and heights for print to prevent clipping */
        html, body, main, .min-h-screen, .h-screen, .p-8 {
            height: auto !important;
            overflow: visible !important;
            min-height: auto !important;
            max-height: none !important;
            position: static !important;
            background: white !important;
            color: black !important;
        }
        
        /* Hide layout and system UI */
        .no-print, 
        aside, 
        nav, 
        header, 
        footer,
        #sidebar,
        .sidebar,
        .topbar {
            display: none !important;
        }
        
        #print-area {
            display: block !important;
            visibility: visible !important;
            position: relative !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        body {
            font-size: 7.5pt !important;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto;
            margin-top: 4px;
        }
        
        th, td {
            border: 1px solid #000 !important;
            padding: 2px 3px !important;
            text-align: center;
            line-height: 1.1;
        }

        .vertical-text {
            height: 50px;
            white-space: nowrap;
        }

        .vertical-text span {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            display: inline-block;
        }

        .text-left-print {
            text-align: left !important;
            padding-left: 4px !important;
        }
        
        /* Evitar saltos de página dentro de secciones clave */
        .avoid-break {
            page-break-inside: avoid;
            break-inside: avoid;
        }
    }
    .vertical-text span {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        display: inline-block;
        max-height: 80px;
    }
</style>
@endpush

<!-- Script de Alpine.js para la liquidación interactiva -->
<script>
function planillaManager() {
    return {
        filters: {
            domiciliario_id: '{{ request('domiciliario_id', '') }}',
            fecha_desde: '{{ request('fecha_desde', '') }}',
            fecha_hasta: '{{ request('fecha_hasta', '') }}',
            estado_liquidacion: '{{ request('estado_liquidacion', '') }}',
            per_page: '{{ request('per_page', '15') }}'
        },
        modalOpen: false,
        saving: false,
        updateFutureDefaults: false,
        isLocked: false,
        ruta: {
            id: null,
            nombre_ruta: '',
            fecha_programada: '',
            estado: '',
            domiciliario_nombre: '',
            auxilio_combustible: 15000,
            base_efectivo: 0,
            efectivo_rutas_pasadas: 0,
            pedidos_cruzados: [],
            ajustes: [],
            estado_liquidacion: 'pendiente',
            observaciones_liquidacion: '',
            fecha_liquidacion: ''
        },
        pedidos: [],
        pedidos_pendientes_pasados: [],
        productos: [],
        totales_productos: {},

        resetFilters() {
            this.filters = {
                domiciliario_id: '',
                fecha_desde: '',
                fecha_hasta: '',
                estado_liquidacion: '',
                per_page: '15'
            };
            this.fetchPlanillas();
        },

        fetchPlanillas() {
            const queryParams = new URLSearchParams(this.filters).toString();
            window.location.search = queryParams;
        },

        openSettlementModal(rutaId) {
            this.modalOpen = true;
            this.pedidos = [];
            this.pedidos_pendientes_pasados = [];
            this.productos = [];
            this.totales_productos = {};
            this.updateFutureDefaults = false;
            
            fetch(`/planillas/${rutaId}`)
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        this.ruta = data.ruta;
                        if (this.ruta.ajustes) {
                            this.ruta.ajustes = this.ruta.ajustes.map(a => ({
                                descripcion: a.descripcion || '',
                                valor: a.valor || 0,
                                tipo: a.tipo || 'nomina'
                            }));
                        }
                        this.pedidos = data.pedidos;
                        this.pedidos_pendientes_pasados = data.pedidos_pendientes_pasados || [];
                        this.productos = data.productos || [];
                        this.totales_productos = data.totales_productos || {};
                        this.isLocked = this.ruta.estado_liquidacion === 'liquidada';
                    } else {
                        window.dispatchEvent(new CustomEvent('notify', {
                            detail: { type: 'error', title: 'Error', message: data.message || 'Error al cargar la planilla' }
                        }));
                        this.modalOpen = false;
                    }
                })
                .catch(err => {
                    console.error(err);
                    window.dispatchEvent(new CustomEvent('notify', {
                        detail: { type: 'error', title: 'Error', message: 'Error de conexión al cargar la planilla.' }
                    }));
                    this.modalOpen = false;
                });
        },

        addAjuste() {
            if (!this.ruta.ajustes) {
                this.ruta.ajustes = [];
            }
            this.ruta.ajustes.push({ descripcion: '', valor: 0, tipo: 'nomina' });
        },

        removeAjuste(index) {
            this.ruta.ajustes.splice(index, 1);
        },

        toggleMetodoPago(pedido) {
            if (this.isLocked) return;
            if (pedido.estado_pago === 'pagado') {
                window.dispatchEvent(new CustomEvent('notify', {
                    detail: { type: 'warning', title: 'Advertencia', message: 'No se puede alterar un pago que ya está registrado.' }
                }));
                return;
            }
            if (pedido.metodo_pago === 'efectivo') {
                pedido.metodo_pago = 'transferencia';
                pedido.recaudado_por_domiciliario = false;
                pedido.monto_pagado = 0;
            } else {
                pedido.metodo_pago = 'efectivo';
                pedido.recaudado_por_domiciliario = false;
                if (!pedido.monto_pagado || pedido.monto_pagado === 0) {
                    pedido.monto_pagado = pedido.total_pagar;
                }
            }
        },

        toggleRecaudado(pedido) {
            if (this.isLocked) return;
            if (pedido.estado_pago === 'pagado') {
                window.dispatchEvent(new CustomEvent('notify', {
                    detail: { type: 'warning', title: 'Advertencia', message: 'No se puede alterar un pago que ya está registrado.' }
                }));
                return;
            }
            if (pedido.metodo_pago !== 'efectivo') return;
            pedido.recaudado_por_domiciliario = !pedido.recaudado_por_domiciliario;
        },

        checkAuxilioChange() {
            if (this.isLocked) return;
            this.updateFutureDefaults = false;
            window.dispatchEvent(new CustomEvent('open-confirm', {
                detail: {
                    title: 'Cambiar Valor por Defecto',
                    message: '¿Desea establecer este nuevo valor de auxilio de combustible por defecto para todas las planillas sin liquidar a partir de esta fecha?',
                    type: 'warning',
                    callback: () => {
                        this.updateFutureDefaults = true;
                    }
                }
            }));
        },

        totalEntregados() {
            return this.pedidos.length;
        },

        subtotalPayout() {
            return this.pedidos
                .reduce((sum, p) => sum + (parseFloat(p.pago_domiciliario) || 0), 0);
        },

        sumAjustes() {
            if (!this.ruta.ajustes) return 0;
            return this.ruta.ajustes.reduce((sum, a) => sum + (parseFloat(a.valor) || 0), 0);
        },

        sumAjustesNomina() {
            if (!this.ruta.ajustes) return 0;
            return this.ruta.ajustes
                .filter(a => (a.tipo || 'nomina') === 'nomina')
                .reduce((sum, a) => sum + (parseFloat(a.valor) || 0), 0);
        },

        sumAjustesEfectivo() {
            if (!this.ruta.ajustes) return 0;
            return this.ruta.ajustes
                .filter(a => a.tipo === 'efectivo')
                .reduce((sum, a) => sum + (parseFloat(a.valor) || 0), 0);
        },

        totalAPagar() {
            return this.subtotalPayout() + (parseFloat(this.ruta.auxilio_combustible) || 0) + this.sumAjustesNomina();
        },

        totalEfectivoPedidos() {
            return this.pedidos
                .filter(p => p.metodo_pago === 'efectivo' && !p.recaudado_por_domiciliario)
                .reduce((sum, p) => sum + (parseFloat(p.monto_pagado) || 0), 0);
        },

        sumPedidosCruzados() {
            if (!this.ruta.pedidos_cruzados || !this.pedidos_pendientes_pasados) return 0;
            return this.pedidos_pendientes_pasados
                .filter(p => this.ruta.pedidos_cruzados.includes(p.id))
                .reduce((sum, p) => sum + (parseFloat(p.total_pagar) || 0), 0);
        },

        totalEfectivoEntregar() {
            return this.totalEfectivoPedidos() + (parseFloat(this.ruta.base_efectivo) || 0) + this.sumPedidosCruzados() + this.sumAjustesEfectivo();
        },

        savePlanilla(closeAfter = false) {
            this.saving = true;
            
            // Format orders payout array
            const ordersPayload = this.pedidos.map(p => ({
                id: p.id,
                pago_domiciliario: p.pago_domiciliario,
                metodo_pago: p.metodo_pago,
                recaudado_por_domiciliario: p.recaudado_por_domiciliario
            }));

            // Sync sumPedidosCruzados with the model field
            this.ruta.efectivo_rutas_pasadas = this.sumPedidosCruzados();

            const payload = {
                auxilio_combustible: this.ruta.auxilio_combustible,
                base_efectivo: this.ruta.base_efectivo,
                efectivo_rutas_pasadas: this.ruta.efectivo_rutas_pasadas,
                pedidos_cruzados: this.ruta.pedidos_cruzados,
                ajustes: (this.ruta.ajustes || []).map(a => ({
                    descripcion: a.descripcion,
                    valor: parseFloat(a.valor) || 0,
                    tipo: a.tipo || 'nomina'
                })),
                observaciones_liquidacion: this.ruta.observaciones_liquidacion,
                pedidos_pago: ordersPayload,
                update_future_defaults: this.updateFutureDefaults,
                fecha_liquidacion: this.ruta.fecha_liquidacion
            };

            const token = '{{ csrf_token() }}';

            fetch(`/planillas/${this.ruta.id}/save`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': token
                },
                body: JSON.stringify(payload)
            })
            .then(res => res.json())
            .then(data => {
                this.saving = false;
                if (data.success) {
                    this.updateFutureDefaults = false;
                    if (closeAfter) {
                        this.executeToggleStatus();
                    } else {
                        window.dispatchEvent(new CustomEvent('notify', {
                            detail: { type: 'success', title: 'Éxito', message: data.message }
                        }));
                    }
                } else {
                    window.dispatchEvent(new CustomEvent('notify', {
                        detail: { type: 'error', title: 'Error', message: data.message || 'Error al guardar la planilla' }
                    }));
                }
            })
            .catch(err => {
                this.saving = false;
                console.error(err);
                window.dispatchEvent(new CustomEvent('notify', {
                    detail: { type: 'error', title: 'Error', message: 'Error al guardar la planilla.' }
                }));
            });
        },

        toggleLock() {
            if (this.isLocked) {
                window.dispatchEvent(new CustomEvent('open-confirm', {
                    detail: {
                        title: 'Reabrir Liquidación',
                        message: '¿Desea reabrir esta liquidación? Esto desbloqueará todos los campos.',
                        type: 'warning',
                        callback: () => {
                            this.executeToggleStatus();
                        }
                    }
                }));
            } else {
                window.dispatchEvent(new CustomEvent('open-confirm', {
                    detail: {
                        title: 'Cerrar y Liquidar',
                        message: '¿Desea cerrar y liquidar esta planilla? Esto bloqueará los campos para evitar modificaciones.',
                        type: 'info',
                        callback: () => {
                            this.savePlanilla(true);
                        }
                    }
                }));
            }
        },

        executeToggleStatus() {
            const token = '{{ csrf_token() }}';
            
            fetch(`/planillas/${this.ruta.id}/toggle`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': token
                },
                body: JSON.stringify({
                    fecha_liquidacion: this.ruta.fecha_liquidacion
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    this.ruta.estado_liquidacion = data.estado_liquidacion;
                    this.isLocked = data.estado_liquidacion === 'liquidada';
                    window.dispatchEvent(new CustomEvent('notify', {
                        detail: { type: 'success', title: 'Éxito', message: data.message }
                    }));
                    
                    // Reload index after a small delay
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    window.dispatchEvent(new CustomEvent('notify', {
                        detail: { type: 'error', title: 'Error', message: data.message || 'Error al cambiar estado de liquidación' }
                    }));
                }
            })
            .catch(err => {
                console.error(err);
                window.dispatchEvent(new CustomEvent('notify', {
                    detail: { type: 'error', title: 'Error', message: 'Error al cambiar el estado.' }
                }));
            });
        },

        printPlanilla() {
            const originalTitle = document.title;
            let formattedDate = '';
            if (this.ruta.fecha_programada) {
                formattedDate = this.ruta.fecha_programada.replace(/-/g, '');
            } else {
                formattedDate = new Date().toISOString().slice(0, 10).replace(/-/g, '');
            }
            
            let cleanDriverName = 'SinAsignar';
            if (this.ruta.domiciliario_nombre) {
                cleanDriverName = this.ruta.domiciliario_nombre
                    .normalize("NFD")
                    .replace(/[\u0300-\u036f]/g, "") // remove accents
                    .replace(/[^a-zA-Z0-9]/g, "");   // remove spaces and special characters
            }
            
            document.title = `${formattedDate}_Plan-${cleanDriverName}`;
            window.print();
            
            setTimeout(() => {
                document.title = originalTitle;
            }, 250);
        },

        formatDate(dateStr) {
            if (!dateStr) return '';
            const parts = dateStr.split('-');
            if (parts.length === 3) {
                return `${parts[2]}/${parts[1]}/${parts[0]}`;
            }
            return dateStr;
        },

        formatMoney(value) {
            const num = parseFloat(value);
            return '$' + new Intl.NumberFormat('es-CO', {
                minimumFractionDigits: 0,
                maximumFractionDigits: 0
            }).format(isNaN(num) ? 0 : num);
        }
    };
}
</script>
@endsection