@extends('layouts.app')

@section('title', 'Gestión de Cobros')

@section('content')
<div class="h-full flex flex-col space-y-6 no-print" x-data="cobroManager()">
    <!-- Encabezado Premium con KPIs Dinámicos -->
    <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 mb-2">
        <!-- Decoración de Fondo -->
        <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.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
                <div>
                    <h1 class="text-3xl font-black text-slate-800 dark:text-white uppercase tracking-tight leading-none">
                        Gestión de <span class="bg-clip-text text-transparent bg-gradient-to-r from-brand-orange to-brand-wine">Cobros</span>
                    </h1>
                    <div class="flex items-center gap-2 mt-2">
                        <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em]">Control de Cartera en Tiempo Real</p>
                    </div>
                </div>
            </div>

            <!-- KPIs de Cartera con Glassmorphism -->
            <div class="flex flex-wrap items-center gap-4">
                <div class="px-8 py-5 bg-gradient-to-br from-slate-50 to-white dark:from-slate-800 dark:to-slate-900 rounded-[2rem] border border-slate-100 dark:border-slate-700 shadow-lg shadow-slate-200/50 dark:shadow-none relative overflow-hidden group">
                    <div class="absolute top-0 right-0 w-12 h-12 bg-brand-wine/5 rounded-full -mr-6 -mt-6 group-hover:scale-150 transition-transform duration-700"></div>
                    <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5 block">Total Pendiente</span>
                    <span class="text-2xl font-black text-slate-800 dark:text-white flex items-center gap-2">
                        <span class="text-brand-orange">$</span>{{ number_format($kpis['total_pendiente'], 0, ',', '.') }}
                    </span>
                </div>
                
                <div class="px-8 py-5 bg-emerald-50/50 dark:bg-emerald-500/5 rounded-[2rem] border border-emerald-100 dark:border-emerald-500/20 flex flex-col min-w-[160px] relative overflow-hidden group">
                    <div class="absolute -right-2 -bottom-2 w-12 h-12 bg-emerald-500/10 rounded-full group-hover:scale-150 transition-transform duration-700"></div>
                    <span class="text-[9px] font-black text-emerald-600 dark:text-emerald-400 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
                        <div class="w-1.5 h-1.5 rounded-full bg-emerald-500"></div>
                        Transferencias
                    </span>
                    <span class="text-2xl font-black text-emerald-700 dark:text-emerald-300">
                        {{ $kpis['con_transferencia'] }} <small class="text-xs opacity-60">Pedidos</small>
                    </span>
                </div>

                <div class="px-8 py-5 bg-amber-50/50 dark:bg-amber-500/5 rounded-[2rem] border border-amber-100 dark:border-amber-500/20 flex flex-col min-w-[160px] relative overflow-hidden group">
                    <div class="absolute -right-2 -bottom-2 w-12 h-12 bg-amber-500/10 rounded-full group-hover:scale-150 transition-transform duration-700"></div>
                    <span class="text-[9px] font-black text-amber-600 dark:text-amber-400 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
                        <div class="w-1.5 h-1.5 rounded-full bg-amber-500"></div>
                        Efectivo
                    </span>
                    <span class="text-2xl font-black text-amber-700 dark:text-amber-300">
                        {{ $kpis['en_efectivo'] }} <small class="text-xs opacity-60">Pedidos</small>
                    </span>
                </div>
                <!-- Nuevo KPI: Recaudo Domiciliarios -->
                <div class="flex flex-col border-l border-slate-100 dark:border-slate-800 pl-6">
                    <span class="text-[8px] font-black text-slate-400 uppercase tracking-widest mb-1 flex items-center gap-1">
                        <div class="w-1 h-1 rounded-full bg-brand-orange"></div>
                        En poder Domiciliarios
                    </span>
                    <span class="text-2xl font-black text-indigo-600 dark:text-indigo-400">
                        ${{ number_format($kpis['monto_domiciliarios'], 0, ',', '.') }}
                    </span>
                </div>

                <!-- Caja Dinámica: Balance del Filtro Activo (Estilo Plano sin Degradado) -->
                <div class="px-7 py-5 bg-white dark:bg-slate-800 rounded-[2rem] border-2 border-indigo-100 dark:border-slate-700 shadow-lg shadow-slate-200/50 dark:shadow-none flex flex-col justify-center min-w-[280px]">
                    <div class="flex items-center justify-between gap-3 mb-2">
                        <span class="text-[9px] font-black text-indigo-600 dark:text-indigo-400 uppercase tracking-widest flex items-center gap-1.5">
                            <span class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></span>
                            Balance Filtro / Fechas
                        </span>
                        <span class="text-[9px] font-black text-slate-500 dark:text-slate-300 uppercase bg-slate-100 dark:bg-slate-700 px-2.5 py-0.5 rounded-lg" 
                              x-text="(filterTotals.cantidad_pedidos || 0) + ' pedidos'"></span>
                    </div>
                    <div class="flex items-baseline gap-4">
                        <div class="flex flex-col">
                            <span class="text-[9px] uppercase tracking-wider text-slate-400 font-bold">Cartera Neta:</span>
                            <span class="text-xl font-black text-rose-600 dark:text-rose-400 tracking-tight" 
                                  x-text="formatCurrency(filterTotals.total_pendiente || 0)"></span>
                        </div>
                        <div class="h-8 w-px bg-slate-200 dark:bg-slate-700"></div>
                        <div class="flex flex-col">
                            <span class="text-[9px] uppercase tracking-wider text-slate-400 font-bold">Abonado / Recaudo:</span>
                            <span class="text-xs font-black text-emerald-600 dark:text-emerald-400 tracking-tight" 
                                  x-text="formatCurrency(filterTotals.total_abonado || 0)"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pestañas de Navegación -->
    <div class="flex flex-wrap items-center gap-4 no-print">
        <button @click="estado_pago = 'pendiente'; recaudo_domiciliario = false; por_conciliar = false; applyFilters()" 
                :class="estado_pago === 'pendiente' && !recaudo_domiciliario && !por_conciliar ? 'bg-brand-orange text-white shadow-lg shadow-brand-orange/20' : 'bg-white dark:bg-slate-800 text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-700'"
                class="px-6 py-3 rounded-2xl font-black uppercase text-[10px] tracking-[0.2em] transition-all flex items-center gap-3 border border-slate-100 dark:border-slate-700 shadow-sm">
            <div class="w-2 h-2 rounded-full" :class="estado_pago === 'pendiente' && !recaudo_domiciliario && !por_conciliar ? 'bg-white animate-pulse' : 'bg-brand-orange'"></div>
            Por Cobrar (Cartera)
        </button>
        <button @click="estado_pago = 'pagado'; recaudo_domiciliario = false; por_conciliar = false; applyFilters()" 
                :class="estado_pago === 'pagado' && !recaudo_domiciliario && !por_conciliar ? 'bg-emerald-600 text-white shadow-lg shadow-emerald-600/20' : 'bg-white dark:bg-slate-800 text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-700'"
                class="px-6 py-3 rounded-2xl font-black uppercase text-[10px] tracking-[0.2em] transition-all flex items-center gap-3 border border-slate-100 dark:border-slate-700 shadow-sm">
            <div class="w-2 h-2 rounded-full" :class="estado_pago === 'pagado' && !recaudo_domiciliario && !por_conciliar ? 'bg-white animate-pulse' : 'bg-emerald-500'"></div>
            Cobrados (Historial)
        </button>
        <button @click="estado_pago = 'pagado'; por_conciliar = true; recaudo_domiciliario = false; applyFilters()" 
                :class="por_conciliar ? 'bg-amber-500 text-white shadow-lg shadow-amber-500/20' : 'bg-white dark:bg-slate-800 text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-700'"
                class="px-6 py-3 rounded-2xl font-black uppercase text-[10px] tracking-[0.2em] transition-all flex items-center gap-3 border border-slate-100 dark:border-slate-700 shadow-sm">
            <div class="w-2 h-2 rounded-full" :class="por_conciliar ? 'bg-white animate-pulse' : 'bg-amber-500'"></div>
            Pagos por Conciliar
        </button>
        <button @click="estado_pago = 'pagado'; recaudo_domiciliario = true; por_conciliar = false; applyFilters()" 
                :class="recaudo_domiciliario ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-600/20' : 'bg-white dark:bg-slate-800 text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-700'"
                class="px-6 py-3 rounded-2xl font-black uppercase text-[10px] tracking-[0.2em] transition-all flex items-center gap-3 border border-slate-100 dark:border-slate-700 shadow-sm">
            <div class="w-2 h-2 rounded-full" :class="recaudo_domiciliario ? 'bg-white animate-pulse' : 'bg-indigo-600'"></div>
            En Domiciliarios
        </button>
    </div>

    <!-- Filtros y Tabla -->
    <div class="space-y-6 flex-1 flex flex-col">
        <!-- Barra de Herramientas Premium -->
        <div class="glass-card-premium p-6 border-brand-orange/20 shadow-lg shadow-brand-orange/5">
            <div class="flex flex-col lg:flex-row justify-between items-center gap-6">
                <div class="relative w-full lg:w-[400px] group">
                    <input type="text" 
                           x-model="search"
                           @input.debounce.1000ms="applyFilters"
                           placeholder="Buscar por código o cliente..." 
                           class="w-full bg-surface dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-2xl py-4 pl-12 pr-10 text-sm font-bold text-slate-700 dark:text-white placeholder-slate-400 focus:ring-4 focus:ring-brand-orange/10 focus:border-brand-orange transition-all shadow-inner">
                    <div class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center">
                        <template x-if="!search">
                            <div class="text-slate-300 group-focus-within:text-brand-orange transition-colors">
                                <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.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                            </div>
                        </template>
                        <template x-if="search">
                            <button type="button" 
                                    @click="search = ''; applyFilters()" 
                                    class="p-1.5 rounded-xl text-slate-400 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-950/40 transition-all cursor-pointer shadow-2xs"
                                    title="Borrar texto ingresado">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"></path></svg>
                            </button>
                        </template>
                    </div>
                </div>

                <div class="flex flex-wrap items-center justify-end gap-3 w-full lg:w-auto">
                    <!-- Selector Tipo de Fecha -->
                    <select x-model="tipo_fecha" @change="applyFilters"
                            class="bg-surface dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-2xl py-3 px-4 text-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-300 focus:ring-4 focus:ring-brand-orange/10 focus:border-brand-orange shadow-sm cursor-pointer"
                            title="Selecciona si deseas filtrar por la fecha programada de entrega o por la fecha real de pago">
                        <option value="">📅 F. PROGRAMADA</option>
                        <option value="fecha_pago">💰 F. DE PAGO</option>
                    </select>

                    <!-- Filtros de Fecha con Estilo Naranja -->
                    <div class="flex items-center gap-2 px-4 py-2 bg-surface dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm hover:border-brand-orange/30 transition-colors">
                        <svg class="w-4 h-4 text-brand-orange shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                        <input type="date" x-model="fecha_desde" @change="applyFilters" 
                               class="bg-transparent border-none p-0 text-[10px] font-black uppercase text-slate-600 dark:text-slate-300 focus:ring-0 cursor-pointer">
                        <span class="text-slate-300 font-black">→</span>
                        <input type="date" x-model="fecha_hasta" @change="applyFilters" 
                               class="bg-transparent border-none p-0 text-[10px] font-black uppercase text-slate-600 dark:text-slate-300 focus:ring-0 cursor-pointer">
                        <template x-if="fecha_desde || fecha_hasta">
                            <button type="button" @click="fecha_desde = ''; fecha_hasta = ''; applyFilters()" 
                                    class="ml-1 p-1 rounded-lg text-slate-400 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-950/40 transition-all cursor-pointer"
                                    title="Limpiar rango de fechas">
                                <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="3" d="M6 18L18 6M6 6l12 12"></path></svg>
                            </button>
                        </template>
                    </div>

                    <!-- Selector de Banco Origen -->
                    <select x-model="banco_origen" @change="applyFilters"
                            class="bg-surface dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-2xl py-3 px-4 text-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-300 focus:ring-4 focus:ring-brand-orange/10 focus:border-brand-orange shadow-sm cursor-pointer">
                        <option value="">🏦 BANCO ORIGEN</option>
                        <option value="BANCOLOMBIA">BANCOLOMBIA</option>
                        <option value="NEQUI">NEQUI</option>
                        <option value="BANCO DAVIVIENDA">BANCO DAVIVIENDA</option>
                        <option value="DAVIPLATA">DAVIPLATA</option>
                        <option value="BANCO NU">BANCO NU / NU COLOMBIA</option>
                        <option value="BANCO CAJA SOCIAL">BANCO CAJA SOCIAL</option>
                        <option value="BANCO DE BOGOTA">BANCO DE BOGOTA</option>
                        <option value="BANCO BBVA COLOMBIA S.A.">BANCO BBVA</option>
                        <option value="BANCO DE OCCIDENTE">BANCO DE OCCIDENTE</option>
                        <option value="BANCO AV VILLAS">BANCO AV VILLAS</option>
                        <option value="BANCO POPULAR">BANCO POPULAR</option>
                        <option value="BANCO AGRARIO">BANCO AGRARIO</option>
                        <option value="SCOTIABANK COLPATRIA">SCOTIABANK COLPATRIA</option>
                        <option value="BANCO ITAU">BANCO ITAÚ</option>
                        <option value="LULO BANK">LULO BANK</option>
                        <option value="RappiPay / DAVIPLATA">RappiPay</option>
                        <option value="BOLD">BOLD</option>
                        <option value="PIPPAY / MPAGOS">MERCADO PAGO</option>
                        <option value="BANCO FALABELLA">BANCO FALABELLA</option>
                        <option value="BANCO PICHINCHA">BANCO PICHINCHA</option>
                        <option value="BANCO SANTANDER">BANCO SANTANDER</option>
                        <option value="BANCO SERFINANZA">BANCO SERFINANZA</option>
                        <option value="BANCAMIA S.A.">BANCAMÍA S.A.</option>
                        <option value="BANCO COOPCENTRAL">BANCO COOPCENTRAL</option>
                        <option value="COOFINEP">COOFINEP</option>
                        <option value="CFA COOPERATIVA">CFA COOPERATIVA</option>
                        <option value="CONFIAR COOPERATIVA">CONFIAR COOPERATIVA</option>
                        <option value="COOTREMEDAL">COOTREMEDAL</option>
                        <option value="EFECTY">EFECTY / CORRESPONSAL</option>
                        <option value="OTROS">OTROS</option>
                    </select>

                    <!-- Selector de Banco Destino -->
                    <select x-model="banco_destino" @change="applyFilters"
                            class="bg-surface dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-2xl py-3 px-4 text-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-300 focus:ring-4 focus:ring-brand-orange/10 focus:border-brand-orange shadow-sm cursor-pointer">
                        <option value="">🏦 BANCO DESTINO</option>
                        <option value="8875-DAVIPLATA">8875-DAVIPLATA</option>
                        <option value="BANCO NU">BANCO NU</option>
                        <option value="BANCO CAJA SOCIAL">BANCO CAJA SOCIAL</option>
                        <option value="BANCOLOMBIA">BANCOLOMBIA</option>
                        <option value="NEQUI">NEQUI</option>
                        <option value="BANCO DAVIVIENDA">BANCO DAVIVIENDA</option>
                    </select>

                    <!-- Selector de Domiciliario -->
                    <select x-model="domiciliario_id" @change="applyFilters"
                            class="bg-surface dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-2xl py-3 px-4 text-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-300 focus:ring-4 focus:ring-brand-orange/10 focus:border-brand-orange shadow-sm cursor-pointer">
                        <option value="">DOMICILIARIOS</option>
                        @foreach($domiciliarios as $dom)
                            <option value="{{ $dom->id }}">{{ $dom->nombre }}</option>
                        @endforeach
                    </select>

                    <!-- Método de Pago -->
                    <select x-model="metodo_pago" 
                            @change="applyFilters"
                            class="bg-surface dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-2xl py-3 px-4 text-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-300 focus:ring-4 focus:ring-brand-orange/10 focus:border-brand-orange shadow-sm cursor-pointer">
                        <option value="">MÉTODOS</option>
                        <option value="efectivo">💵 EFECTIVO</option>
                        <option value="transferencia">💳 TRANSFERENCIA</option>
                        <option value="contraentrega">🚚 CONTRAENTREGA</option>
                    </select>

                    <!-- Selector Tipo de Transferencia -->
                    <select x-model="tipo_transferencia" @change="applyFilters"
                            class="bg-surface dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-2xl py-3 px-4 text-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-300 focus:ring-4 focus:ring-brand-orange/10 focus:border-brand-orange shadow-sm cursor-pointer"
                            title="Filtrar por Transferencias Habituales o por Llave (Transfiya)">
                        <option value="">🔑 TIPO TRANSF.</option>
                        <option value="llave">🔑 SOLO POR LLAVE (TRANSFIYA)</option>
                        <option value="cuenta">🏦 TRANSFERENCIA HABITUAL</option>
                    </select>

                    <!-- Selector Descuentos y Saldos Usados -->
                    <select x-model="con_descuento" @change="applyFilters"
                            class="bg-surface dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-2xl py-3 px-4 text-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-300 focus:ring-4 focus:ring-brand-orange/10 focus:border-brand-orange shadow-sm cursor-pointer"
                            title="Filtra pedidos que tengan descuento manual aplicado o saldo a favor de cliente usado">
                        <option value="">🏷️ DESCUENTOS Y SALDOS</option>
                        <option value="con_descuento_manual">⚠️ CON DESCUENTO MANUAL</option>
                        <option value="con_saldo_usado">💰 CON SALDO USADO</option>
                        <option value="con_ajuste">🚨 CUALQUIER DESCUENTO / SALDO</option>
                    </select>

                    <!-- Botón Filtro Domiciliario -->
                    <button x-show="estado_pago === 'pagado'" 
                            @click="recaudo_domiciliario = !recaudo_domiciliario; applyFilters()"
                            :class="recaudo_domiciliario ? 'bg-indigo-600 text-white shadow-indigo-200' : 'bg-surface dark:bg-slate-900 text-slate-500 border-slate-200 dark:border-slate-700'"
                            class="px-4 py-3 rounded-2xl border text-[10px] font-black uppercase tracking-widest transition-all shadow-sm 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.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        Solo Domiciliarios
                    </button>

                    <!-- Registros por Página -->
                    <select x-model="per_page" 
                            @change="applyFilters"
                            class="bg-surface dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-2xl py-3 px-6 text-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-300 focus:ring-4 focus:ring-brand-orange/10 focus:border-brand-orange shadow-sm cursor-pointer">
                        <option value="15">15 REG</option>
                        <option value="30">30 REG</option>
                        <option value="50">50 REG</option>
                        <option value="100">100 REG</option>
                    </select>

                    <!-- Botón Pago Consolidado -->
                    <button x-show="selectedOrders.length > 0" 
                            @click="openBulkPaymentModal()" 
                            class="px-6 py-3 bg-brand-orange hover:bg-brand-wine text-white rounded-2xl font-black uppercase text-[10px] tracking-[0.2em] transition-all flex items-center gap-2 border border-brand-orange/20 shadow-lg shadow-brand-orange/15 animate-pulse no-print">
                        <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.5" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                        Cobrar Seleccionados (<span x-text="selectedOrders.length"></span>)
                    </button>


                    <button @click="exportData" class="p-4 bg-brand-wine hover:bg-brand-orange text-white rounded-2xl transition-all shadow-lg hover:scale-105 active:scale-95 group" title="Exportar Reporte">
                        <svg class="w-5 h-5 group-hover:animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                    </button>
                </div>
            </div>
        </div>

        <div id="cobros-table-container" class="mt-6">
            @include('cobros.partials.table')
        </div>
    </div>

    <!-- Modal Registrar Pago Premium -->
    <template x-teleport="body">
        <div x-show="showPaymentModal" 
             class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/80 backdrop-blur-sm"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100"
             x-cloak>
            
            <div class="bg-white dark:bg-slate-900 w-full max-w-lg max-h-[90vh] rounded-[3rem] shadow-2xl border border-white/20 overflow-hidden transform transition-all animate-fade-in-up flex flex-col">
                
                <!-- Header del Modal Immersivo -->
                <div class="relative h-32 bg-brand-wine flex items-center px-10 overflow-hidden">
                    <div class="absolute top-0 right-0 -mr-16 -mt-16 w-48 h-48 bg-brand-orange/20 rounded-full blur-3xl animate-pulse"></div>
                    <div class="absolute bottom-0 left-0 -ml-8 -mb-8 w-32 h-32 bg-white/5 rounded-full blur-2xl"></div>
                    
                    <div class="relative flex items-center gap-5">
                        <div class="w-14 h-14 rounded-2xl bg-white/10 flex items-center justify-center border border-white/20 shadow-xl">
                            <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.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        </div>
                        <div class="flex flex-col">
                            <h3 class="text-2xl font-black text-white uppercase tracking-tight">
                                <span x-text="selectedPedidosData.length === 1 && selectedPedidosData[0].estado_pago === 'pagado' ? 'Editar' : 'Registro de'"></span>
                                <span class="text-brand-orange">Cobro</span>
                            </h3>
                            <div class="flex items-center gap-2 mt-1">
                                <span class="text-[10px] font-black text-brand-orange bg-white/10 px-2 py-0.5 rounded border border-white/10" x-text="selectedPedidosData.length === 1 ? selectedPedidosData[0].codigo_seguimiento : 'Pago Múltiple'"></span>
                                <span class="text-[10px] font-bold text-white/70 uppercase truncate max-w-[200px]" x-text="selectedPedidosData.length === 1 ? selectedPedidosData[0].cliente?.nombre_completo : selectedPedidosData.length + ' Pedidos'"></span>
                            </div>
                        </div>
                    </div>

                    <button @click="showPaymentModal = false" class="absolute top-8 right-8 w-10 h-10 flex items-center justify-center rounded-xl bg-white/5 text-white/50 hover:bg-white/10 hover:text-white transition-all border border-white/10 shadow-lg">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>

                <div class="p-10 space-y-8 overflow-y-auto custom-scrollbar flex-1" x-show="selectedPedidosData.length > 0">
                    <!-- Resumen del Cobro con Glassmorphism -->
                    <div class="relative group">
                        <div class="absolute -inset-2 bg-gradient-to-r from-brand-orange/20 to-brand-wine/20 rounded-[2rem] blur-xl opacity-50 group-hover:opacity-100 transition duration-1000"></div>
                        <div class="relative bg-slate-50 dark:bg-slate-800/80 backdrop-blur-xl rounded-3xl p-6 border border-white/20 dark:border-slate-700/50 flex flex-col gap-4 shadow-inner">
                            
                            <!-- Caso 1: Un solo pedido -->
                            <template x-if="selectedPedidosData.length === 1">
                                <div class="flex items-center justify-between w-full">
                                    <div>
                                        <p class="text-[9px] font-black text-slate-400 uppercase tracking-[0.2em] mb-1">Monto a Conciliar</p>
                                        <p class="text-3xl font-black text-slate-800 dark:text-white flex items-baseline gap-1">
                                            <span class="text-brand-orange text-sm">$</span>
                                            <span x-text="formatCurrency(selectedPedidosData[0].total_pagar - (selectedPedidosData[0].monto_pagado || 0)).replace('$', '')"></span>
                                        </p>
                                    </div>
                                    <div class="text-right">
                                        <div class="px-3 py-1 bg-brand-orange/10 rounded-lg inline-block mb-1">
                                            <p class="text-[10px] font-black text-brand-orange tracking-widest" x-text="selectedPedidosData[0].codigo_seguimiento"></p>
                                        </div>
                                        <p class="text-[8px] font-black text-slate-400 uppercase tracking-widest" x-text="selectedPedidosData[0].cliente?.nombre_completo"></p>
                                    </div>
                                </div>
                            </template>

                            <!-- Caso 2: Múltiples pedidos (Consolidado) -->
                            <template x-if="selectedPedidosData.length > 1">
                                <div class="w-full space-y-3">
                                    <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-700 pb-2">
                                        <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Distribución del Pago</span>
                                        <span class="text-xs font-black text-brand-orange" x-text="selectedPedidosData.length + ' Pedidos Seleccionados'"></span>
                                    </div>
                                    <div class="space-y-2 max-h-[160px] overflow-y-auto custom-scrollbar pr-1">
                                        <template x-for="p in selectedPedidosData" :key="p.id">
                                            <div class="flex justify-between items-center bg-white dark:bg-slate-900 p-3 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm">
                                                <div class="flex flex-col">
                                                    <span class="text-[10px] font-black text-brand-wine dark:text-brand-orange uppercase" x-text="p.codigo_seguimiento"></span>
                                                    <span class="text-[8px] text-slate-400 font-bold" x-text="'Saldo: ' + formatCurrency(p.total_pagar - (p.monto_pagado || 0))"></span>
                                                </div>
                                                <div class="w-28 relative">
                                                    <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-[9px] font-bold text-slate-400">$</span>
                                                    <input type="number" x-model.number="p.monto_aplicado" @input="updateTotalPaymentAmount()"
                                                           class="w-full text-right bg-white dark:bg-slate-950 border-slate-200 dark:border-slate-800 rounded-xl py-1.5 pl-6 pr-2.5 text-[10px] font-black focus:ring-2 focus:ring-brand-orange">
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <!-- Panel de Saldo de Cuenta del Cliente -->
                    <template x-if="selectedPedidosData.length === 1 && selectedPedidosData[0].cliente?.saldo != 0">
                        <div class="p-5 rounded-[2rem] border animate-fade-in-down"
                             :class="selectedPedidosData[0].cliente?.saldo > 0 ? 'bg-emerald-50/50 border-emerald-100 dark:bg-emerald-500/5 dark:border-emerald-500/20' : 'bg-rose-50/50 border-rose-100 dark:bg-rose-500/5 dark:border-rose-500/20'">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-2xl flex items-center justify-center shadow-sm"
                                         :class="selectedPedidosData[0].cliente?.saldo > 0 ? 'bg-emerald-100 text-emerald-600' : 'bg-rose-100 text-rose-600'">
                                        <template x-if="selectedPedidosData[0].cliente?.saldo > 0">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path></svg>
                                        </template>
                                        <template x-if="selectedPedidosData[0].cliente?.saldo < 0">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                                        </template>
                                    </div>
                                    <div>
                                        <p class="text-[10px] font-black uppercase tracking-widest"
                                           :class="selectedPedidosData[0].cliente?.saldo > 0 ? 'text-emerald-700 dark:text-emerald-400' : 'text-rose-700 dark:text-rose-400'">
                                            Saldo de Cuenta del Cliente
                                        </p>
                                        <p class="text-[8px] font-bold uppercase opacity-70"
                                           x-text="selectedPedidosData[0].cliente?.saldo > 0 ? 'El cliente tiene dinero a favor para este cobro' : 'El cliente tiene una deuda pendiente'"></p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="text-lg font-black tracking-tighter"
                                       :class="selectedPedidosData[0].cliente?.saldo > 0 ? 'text-emerald-600' : 'text-rose-600'"
                                       x-text="(selectedPedidosData[0].cliente?.saldo > 0 ? '+' : '') + formatCurrency(selectedPedidosData[0].cliente?.saldo || 0)"></p>
                                </div>
                            </div>
                        </div>
                    </template>

                    <!-- Formulario de Registro -->
                    <div class="space-y-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-2">
                                <label class="block text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Valor Recibido</label>
                                <div class="relative group">
                                    <div class="absolute left-4 top-1/2 -translate-y-1/2 w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 font-black group-focus-within:bg-brand-orange group-focus-within:text-white transition-all">$</div>
                                    <input type="number" 
                                           x-model="paymentAmount"
                                           class="w-full bg-slate-50 dark:bg-slate-950/40 border-slate-200 dark:border-slate-800 rounded-2xl py-4 pl-14 pr-4 text-sm font-black text-slate-800 dark:text-white focus:ring-4 focus:ring-brand-orange/10 focus:border-brand-orange transition-all shadow-sm">
                                </div>
                            </div>

                            <div class="space-y-2">
                                <label class="block text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Fecha Efectiva</label>
                                <div class="relative group">
                                    <div class="absolute left-4 top-1/2 -translate-y-1/2 w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 group-focus-within:bg-brand-orange group-focus-within:text-white transition-all">
                                        <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.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                    </div>
                                    <input type="date" 
                                           x-model="fechaPago"
                                           class="w-full bg-slate-50 dark:bg-slate-950/40 border-slate-200 dark:border-slate-800 rounded-2xl py-4 pl-14 pr-4 text-sm font-black text-slate-800 dark:text-white focus:ring-4 focus:ring-brand-orange/10 focus:border-brand-orange transition-all shadow-sm">
                                </div>
                            </div>
                        </div>

                        <div class="space-y-2">
                            <label class="block text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Medio de Pago</label>
                            <div class="flex p-1 bg-slate-100 dark:bg-slate-950/40 rounded-2xl border border-slate-200 dark:border-slate-800">
                                <button @click="paymentMethod = 'efectivo'"
                                        :class="paymentMethod === 'efectivo' ? 'bg-white dark:bg-slate-800 text-brand-orange shadow-md' : 'text-slate-400'"
                                        class="flex-1 py-3.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all flex items-center justify-center gap-2">
                                    💵 Efectivo
                                </button>
                                <button @click="paymentMethod = 'transferencia'"
                                        :class="paymentMethod === 'transferencia' ? 'bg-white dark:bg-slate-800 text-brand-wine dark:text-brand-orange shadow-md' : 'text-slate-400'"
                                        class="flex-1 py-3.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all flex items-center justify-center gap-2">
                                    💳 Transf.
                                </button>
                                <button @click="paymentMethod = 'consignacion'"
                                        :class="paymentMethod === 'consignacion' ? 'bg-white dark:bg-slate-800 text-brand-wine dark:text-brand-orange shadow-md' : 'text-slate-400'"
                                        class="flex-1 py-3.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all flex items-center justify-center gap-2">
                                    📝 Consig.
                                </button>
                            </div>
                        </div>

                        <template x-if="selectedPedidosData.length === 1 && selectedPedidosData[0].cliente?.saldo > 0">
                            <div class="p-6 bg-emerald-50/50 dark:bg-emerald-900/10 rounded-[2rem] border border-emerald-100 dark:border-emerald-800/30 flex items-center justify-between group hover:border-emerald-500/50 transition-all cursor-pointer"
                                 @click="toggleSaldo()">
                                <div class="flex items-center gap-4">
                                    <div class="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-600 transition-transform group-hover:scale-110">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path></svg>
                                    </div>
                                    <div>
                                        <p class="text-[10px] font-black uppercase text-emerald-900 dark:text-emerald-200">Usar Saldo a Favor</p>
                                        <p class="text-[8px] text-emerald-600/70 font-bold uppercase tracking-tighter" x-text="'Aplicar ' + formatCurrency(selectedPedidosData[0].cliente?.saldo) + ' a este pago'"></p>
                                    </div>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer pointer-events-none">
                                    <input type="checkbox" x-model="usarSaldo" class="sr-only peer">
                                    <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-emerald-600"></div>
                                </label>
                            </div>
                        </template>

                        <!-- Panel de Transferencia/Consignación Dinámico -->
                        <div x-show="paymentMethod === 'transferencia' || paymentMethod === 'consignacion'" 
                             x-transition:enter="transition ease-out duration-300"
                             x-transition:enter-start="opacity-0 -translate-y-4 scale-95"
                             x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                             class="p-6 bg-slate-50 dark:bg-slate-950/20 rounded-[2rem] border border-slate-100 dark:border-slate-800/50 space-y-5">
                            
                            <div class="grid grid-cols-2 gap-5">
                                <div class="space-y-2">
                                    <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest ml-1">Cuenta Receptora</label>
                                    <select x-model="bancoDestino" class="w-full bg-white dark:bg-slate-900 border-slate-100 dark:border-slate-800 rounded-xl py-3 px-4 text-[11px] font-black text-slate-700 dark:text-slate-300 focus:ring-4 focus:ring-brand-orange/10">
                                        <option value="">Seleccionar...</option>
                                        <option value="8875-DAVIPLATA">8875-DAVIPLATA</option>
                                        <option value="BANCO NU">BANCO NU</option>
                                        <option value="BANCO CAJA SOCIAL">BANCO CAJA SOCIAL</option>
                                        <option value="BANCOLOMBIA">BANCOLOMBIA</option>
                                        <option value="NEQUI">NEQUI</option>
                                        <option value="BANCO DAVIVIENDA">BANCO DAVIVIENDA</option>
                                    </select>
                                </div>
                                <div class="space-y-2">
                                    <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest ml-1">Banco Origen</label>
                                    <select x-model="bancoOrigen" class="w-full bg-white dark:bg-slate-900 border-slate-100 dark:border-slate-800 rounded-xl py-3 px-4 text-[11px] font-black text-slate-700 dark:text-slate-300 focus:ring-4 focus:ring-brand-orange/10">
                                        <option value="">Seleccionar...</option>
                                        <option value="BANCO CAJA SOCIAL">BANCO CAJA SOCIAL</option>
                                        <option value="BANCOLOMBIA">BANCOLOMBIA</option>
                                        <option value="NEQUI">NEQUI</option>
                                        <option value="BANCO DAVIVIENDA">BANCO DAVIVIENDA</option>
                                        <option value="BANCO NU">BANCO NU</option>
                                        <option value="DAVIPLATA">DAVIPLATA</option>
                                        <option value="BANCAMIA S.A.">BANCAMIA S.A.</option>
                                        <option value="BANCO AGRARIO">BANCO AGRARIO</option>
                                        <option value="BANCO AV VILLAS">BANCO AV VILLAS</option>
                                        <option value="BANCO BBVA COLOMBIA S.A.">BANCO BBVA COLOMBIA S.A.</option>
                                        <option value="BANCO COOPERATIVO COOPCENTRAL">BANCO COOPERATIVO COOPCENTRAL</option>
                                        <option value="BANCO DE BOGOTA">BANCO DE BOGOTA</option>
                                        <option value="BANCO DE OCCIDENTE">BANCO DE OCCIDENTE</option>
                                        <option value="BANCO FALABELLA">BANCO FALABELLA</option>
                                        <option value="BANCO GNB SUDAMERIS">BANCO GNB SUDAMERIS</option>
                                        <option value="BANCO ITAU">BANCO ITAU</option>
                                        <option value="BANCO PICHINCHA S.A.">BANCO PICHINCHA S.A.</option>
                                        <option value="BANCO POPULAR">BANCO POPULAR</option>
                                        <option value="BANCO PROCREDIT">BANCO PROCREDIT</option>
                                        <option value="BANCO SANTANDER COLOMBIA">BANCO SANTANDER COLOMBIA</option>
                                        <option value="BANCO SERFINANZA">BANCO SERFINANZA</option>
                                        <option value="BANCOOMEVA S.A.">BANCOOMEVA S.A.</option>
                                        <option value="CFA COOPERATIVA FINANCIERA">CFA COOPERATIVA FINANCIERA</option>
                                        <option value="CITIBANK">CITIBANK</option>
                                        <option value="COLTEFINANCIERA">COLTEFINANCIERA</option>
                                        <option value="CONFIAR COOPERATIVA FINANCIERA">CONFIAR COOPERATIVA FINANCIERA</option>
                                        <option value="CORRESPONSAL BANCARIO">CORRESPONSAL BANCARIO</option>
                                        <option value="COTRAFA">COTRAFA</option>
                                        <option value="RAPPIPAY">RAPPIPAY</option>
                                        <option value="SCOTIABANK COLPATRIA">SCOTIABANK COLPATRIA</option>
                                        <option value="OTROS">OTROS</option>
                                    </select>
                                </div>
                            </div>

                            <div class="grid grid-cols-2 gap-5">
                                <div class="space-y-2">
                                    <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest ml-1">Referencia / CUS</label>
                                    <input type="text" x-model="comprobantePago" placeholder="000000" 
                                           class="w-full bg-white dark:bg-slate-900 border-slate-100 dark:border-slate-800 rounded-xl py-3 px-4 text-[11px] font-black text-slate-700 dark:text-slate-200 focus:ring-4 focus:ring-brand-orange/10">
                                </div>
                                <div class="space-y-2">
                                    <div class="flex items-center justify-between ml-1">
                                        <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Cuenta / Llave</label>
                                        <button type="button" 
                                                @click="numeroCuenta = numeroCuenta.startsWith('LLAVE:') ? numeroCuenta.replace('LLAVE:', '') : ('LLAVE:' + numeroCuenta.replace('LLAVE:', ''))"
                                                :class="numeroCuenta.startsWith('LLAVE:') ? 'bg-amber-500 text-white' : 'bg-slate-200 dark:bg-slate-800 text-slate-500'"
                                                class="px-1.5 py-0.5 rounded text-[8px] font-black uppercase transition-all shadow-2xs">
                                            🔑 Llave
                                        </button>
                                    </div>
                                    <input type="text" x-model="numeroCuenta" placeholder="*0000 o Llave..." 
                                           class="w-full bg-white dark:bg-slate-900 border-slate-100 dark:border-slate-800 rounded-xl py-3 px-4 text-[11px] font-black text-slate-700 dark:text-slate-200 focus:ring-4 focus:ring-brand-orange/10">
                                </div>
                            </div>
                        </div>

                        <!-- Notas / Anotaciones -->
                        <div class="space-y-2">
                            <label class="block text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Notas / Anotaciones</label>
                            <textarea x-model="paymentNotes" placeholder="Escribe anotaciones sobre la transferencia o abono..." rows="3"
                                      class="w-full bg-slate-50 dark:bg-slate-950/40 border-slate-200 dark:border-slate-800 rounded-2xl py-3 px-4 text-xs font-bold text-slate-800 dark:text-white placeholder-slate-400 focus:ring-4 focus:ring-brand-orange/10 focus:border-brand-orange transition-all shadow-sm"></textarea>
                        </div>

                        <!-- Opción de Recaudo por Domiciliario -->
                        <div class="p-6 bg-indigo-50/50 dark:bg-indigo-900/10 rounded-[2rem] border border-indigo-100 dark:border-indigo-800/30 flex items-center justify-between">
                            <div class="flex items-center gap-4">
                                <div class="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-600">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                                </div>
                                <div>
                                    <p class="text-[10px] font-black uppercase text-indigo-900 dark:text-indigo-200">Dinero con Domiciliario</p>
                                    <p class="text-[8px] text-indigo-600/70 font-bold uppercase tracking-tighter">¿El efectivo lo tiene el conductor?</p>
                                </div>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" x-model="recaudadoConductor" class="sr-only peer">
                                <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div>
                            </label>
                        </div>
                    </div>

                    <!-- Historial de Abonos / Pagos (Solo si es un solo pedido) -->
                    <template x-if="selectedPedidosData.length === 1 && paymentHistory.length > 0">
                        <div class="mt-8 space-y-3 pt-6 border-t border-slate-100 dark:border-slate-800">
                            <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Historial de Abonos / Pagos</h4>
                            <div class="space-y-2 max-h-[160px] overflow-y-auto custom-scrollbar pr-1">
                                <template x-for="pago in paymentHistory" :key="pago.id">
                                    <div class="flex justify-between items-center p-4 bg-slate-50 dark:bg-slate-950/20 rounded-2xl border border-slate-100 dark:border-slate-800">
                                        <div class="flex flex-col">
                                            <div class="flex items-center gap-2">
                                                <span class="text-xs font-black text-slate-700 dark:text-slate-200" x-text="formatCurrency(pago.monto_aplicado)"></span>
                                                <span class="px-2 py-0.5 rounded text-[8px] font-black uppercase text-white bg-slate-850" x-text="pago.metodo_pago.toUpperCase()"></span>
                                                <template x-if="pago.conciliado">
                                                    <span class="px-1.5 py-0.5 rounded text-[7px] font-black uppercase text-emerald-600 bg-emerald-100">Verificado</span>
                                                </template>
                                            </div>
                                            <span class="text-[8px] text-slate-400 font-bold mt-1.5" x-text="'Fecha: ' + pago.fecha_pago"></span>
                                            <template x-if="pago.notes || pago.notas">
                                                <span class="text-[8px] text-indigo-500 font-bold mt-1 italic" x-text="'Nota: ' + (pago.notes || pago.notas)"></span>
                                            </template>
                                        </div>
                                        <button @click="annulPaymentFromHistory(pago.id)" class="p-2 text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-950/30 rounded-lg transition-all" title="Anular Abono">
                                            <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" /></svg>
                                        </button>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </template>

                    <!-- Botón de Acción Inmersivo -->
                    <div class="pt-2">
                        <button @click="savePayment"
                                :disabled="saving"
                                class="relative w-full group overflow-hidden rounded-2xl py-4 bg-slate-900 dark:bg-brand-orange shadow-2xl transition-all hover:scale-[1.02] active:scale-95 disabled:opacity-50">
                            <div class="absolute inset-0 bg-gradient-to-r from-brand-orange to-brand-wine opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                            <span class="relative text-[11px] font-black text-white uppercase tracking-[0.3em] flex items-center justify-center gap-3">
                                <span x-text="selectedPedidosData.length === 1 && selectedPedidosData[0].estado_pago === 'pagado' ? 'Actualizar Información' : 'Sincronizar y Registrar Pago'"></span>
                                <span x-show="saving">Procesando...</span>
                                <svg x-show="!saving" class="w-4 h-4 animate-bounce-x" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- Modal de Confirmación Premium (Para Anulaciones y Acciones Críticas) -->
    <template x-teleport="body">
        <div x-show="showConfirmModal" 
             class="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-slate-900/90 backdrop-blur-md"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100"
             x-cloak>
            
            <div class="bg-white dark:bg-slate-900 w-full max-w-md rounded-[2.5rem] shadow-2xl border border-white/10 overflow-hidden transform transition-all flex flex-col">
                <div class="p-8 text-center">
                    <!-- Icono de Advertencia Animado -->
                    <div class="w-20 h-20 bg-rose-50 dark:bg-rose-500/10 rounded-3xl flex items-center justify-center mx-auto mb-6 text-rose-500 shadow-inner group">
                        <svg class="w-10 h-10 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                        </svg>
                    </div>
                    
                    <h3 class="text-xl font-black text-slate-800 dark:text-white uppercase tracking-tight mb-2" x-text="confirmTitle"></h3>
                    <p class="text-xs text-slate-500 dark:text-slate-400 font-medium leading-relaxed px-4" x-text="confirmMessage"></p>
                </div>

                <div class="p-8 pt-0 flex flex-col gap-3" x-init="$watch('showConfirmModal', val => { if(val) $nextTick(() => $refs.btnConfirmCobroAction?.focus()) })">
                    <button x-ref="btnConfirmCobroAction" @click="executeConfirmAction()" 
                            class="w-full py-4 bg-rose-600 hover:bg-rose-700 text-white rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] shadow-lg shadow-rose-600/20 transition-all hover:scale-[1.02] active:scale-95 focus:ring-4 focus:ring-rose-400/50 outline-none">
                        Sí, Proceder con la Anulación
                    </button>
                    <button @click="showConfirmModal = false" 
                            class="w-full py-4 bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] transition-all hover:bg-slate-100 dark:hover:bg-slate-700 flex items-center justify-center gap-2">
                        Cancelar y Regresar
                    </button>
                </div>
            </div>
        </div>
    </template>

    <!-- Modal Planilla (Premium & Printable) -->
    <template x-teleport="body">
        <div x-show="showPlanillaModal" 
             class="fixed inset-0 z-50 flex items-center justify-center p-0 sm:p-4"
             style="z-index: 9999;"
             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"
             x-init="$watch('showPlanillaModal', value => { if (value) document.body.classList.add('overflow-hidden'); else document.body.classList.remove('overflow-hidden'); })"
             x-cloak>
            
            <div class="absolute inset-0 bg-slate-950/95 backdrop-blur-xl no-print" @click="showPlanillaModal = false"></div>
            
            <div class="relative bg-white dark:bg-slate-900 w-full max-w-[95vw] h-full sm:h-[90vh] rounded-none sm:rounded-[2rem] shadow-2xl overflow-hidden flex flex-col border border-white/10">
                
                <div class="bg-brand-orange p-6 text-white flex justify-between items-center shrink-0 no-print">
                    <div class="flex items-center gap-4">
                        <div class="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
                            <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.5" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"></path></svg>
                        </div>
                        <div>
                            <h3 class="text-xl font-black uppercase leading-none">Planilla de Despacho</h3>
                            <p class="text-[9px] font-bold opacity-70 uppercase mt-1 tracking-widest" x-text="formatDateLong(fecha_desde)"></p>
                        </div>
                    </div>
                    <div class="flex gap-3">
                        <button @click="exportPlanillaCSV" class="px-6 py-2 bg-brand-wine text-white rounded-xl font-black uppercase text-[10px] hover:scale-105 transition-all flex items-center gap-2 border border-white/20 shadow-lg">
                            <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.5" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                            Exportar CSV
                        </button>
                        <button @click="printPlanilla" class="px-6 py-2 bg-white text-brand-orange rounded-xl font-black uppercase text-[10px] hover:scale-105 transition-all flex items-center gap-2 shadow-lg">
                            <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.5" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 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
                        </button>
                        <button @click="showPlanillaModal = false" class="w-10 h-10 flex items-center justify-center rounded-xl bg-white/10 hover:bg-white/20 transition-all">✕</button>
                    </div>
                </div>

                <div class="flex-1 overflow-auto p-4 sm:p-8 custom-scrollbar">
                    <div x-show="planillaLoading" class="flex justify-center py-20">
                        <div class="w-10 h-10 border-4 border-brand-orange border-t-transparent rounded-full animate-spin"></div>
                    </div>
                    
                    <div x-show="!planillaLoading" class="animate-fade-in">
                        <div id="printable-planilla">
                            <div class="print-only mb-4 hidden justify-between items-center border-b pb-2">
                                <h1 class="text-xl font-bold uppercase">Planilla de Despacho</h1>
                                <div class="text-right">
                                    <p class="text-sm font-bold" x-text="domiciliarioNombre"></p>
                                    <p class="text-[10px] text-slate-500" x-text="formatDateLong(fecha_desde)"></p>
                                </div>
                            </div>

                            <div class="overflow-x-auto">
                                <table class="w-full text-[9px] border-collapse border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-xl">
                                    <thead>
                                        <tr class="bg-slate-800 text-white">
                                            <th class="p-1 border border-slate-600 text-center font-black w-6">NO</th>
                                            <th class="p-1 border border-slate-600 text-center font-black w-16">ESTADO</th>
                                            <th class="p-1 border border-slate-600 text-center font-black w-20">CELULAR</th>
                                            <th class="p-1 border border-slate-600 text-left font-black">DIRECCIÓN</th>
                                            <th class="p-1 border border-slate-600 text-left font-black">NOMBRE</th>
                                            
                                            <template x-for="prod in planillaData.productos" :key="prod.id">
                                                <th class="p-1 border border-slate-600 text-center font-black uppercase vertical-text">
                                                    <span x-text="prod.codigo"></span>
                                                </th>
                                            </template>

                                            <th class="p-1 border border-slate-600 text-right font-black uppercase bg-brand-wine text-white w-20">DEBE $</th>
                                            <th class="p-1 border border-slate-600 text-center font-black bg-slate-100 text-slate-800 w-6">E</th>
                                            <th class="p-1 border border-slate-600 text-center font-black bg-slate-100 text-slate-800 w-6">D</th>
                                            <th class="p-1 border border-slate-600 text-center font-black bg-slate-100 text-slate-800 w-6">PE</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <template x-for="(item, index) in planillaData.pedidos" :key="item.id">
                                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
                                                <td class="p-1 border border-slate-200 dark:border-slate-700 text-center font-bold" x-text="index + 1"></td>
                                                <td class="p-1 border border-slate-200 dark:border-slate-700 text-center text-[8px] uppercase font-bold">
                                                    <template x-if="item.saldo_usado >= item.total_pagar">
                                                        <span class="px-1 py-0.5 bg-emerald-600 text-white rounded font-black text-[7px] block shadow-2xs">💰 SALDO FAVOR</span>
                                                    </template>
                                                    <template x-if="!(item.saldo_usado >= item.total_pagar)">
                                                        <span x-text="item.metodo_pago === 'efectivo' ? 'EFECTIVO' : (item.metodo_pago === 'transferencia' ? 'TRANSF' : item.metodo_pago)"></span>
                                                    </template>
                                                </td>
                                                <td class="p-1 border border-slate-200 dark:border-slate-700 text-center" x-text="item.telefono"></td>
                                                <td class="p-1 border border-slate-200 dark:border-slate-700 text-left text-[8px]" x-text="item.direccion"></td>
                                                <td class="p-1 border border-slate-200 dark:border-slate-700 text-left font-bold uppercase text-[8px]" x-text="item.cliente"></td>
                                                
                                                <template x-for="prod in planillaData.productos" :key="prod.id">
                                                    <td class="p-1 border border-slate-200 dark:border-slate-700 text-center font-bold text-[9px]" :class="item.productos[prod.id] > 0 ? 'bg-indigo-50/10' : ''">
                                                        <span x-text="item.productos[prod.id] || ''"></span>
                                                    </td>
                                                </template>

                                                <td class="p-1 border border-slate-200 dark:border-slate-700 text-right font-black"
                                                    :class="item.saldo_usado >= item.total_pagar || (item.total_pagar - item.monto_pagado) <= 0 ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-600 dark:text-emerald-400' : 'text-slate-900 dark:text-white'">
                                                    <template x-if="item.saldo_usado >= item.total_pagar">
                                                        <span class="text-[8px] font-black text-emerald-600 dark:text-emerald-400 uppercase tracking-tighter">$0 (SALDO CUBIERTO)</span>
                                                    </template>
                                                    <template x-if="!(item.saldo_usado >= item.total_pagar)">
                                                        <span x-text="formatCurrency(item.total_pagar - item.monto_pagado).replace('$', '')"></span>
                                                    </template>
                                                </td>
                                                <td class="p-1 border border-slate-200 dark:border-slate-700"></td>
                                                <td class="p-1 border border-slate-200 dark:border-slate-700"></td>
                                                <td class="p-1 border border-slate-200 dark:border-slate-700"></td>
                                            </tr>
                                        </template>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- Modal Notificación Rápida WhatsApp tras Guardar Pago -->
    <template x-teleport="body">
        <div x-show="showPaymentSuccessModal" 
             class="fixed inset-0 z-[120] flex items-center justify-center p-4 bg-slate-900/80 backdrop-blur-sm"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100"
             x-cloak>
            
            <div class="bg-white dark:bg-slate-900 w-full max-w-lg rounded-[2.5rem] shadow-2xl border border-white/20 overflow-hidden flex flex-col">
                <div class="p-8 text-center bg-gradient-to-br from-emerald-500 to-teal-600 text-white relative">
                    <div class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center mx-auto mb-4 backdrop-blur-md shadow-lg">
                        <svg class="w-8 h-8 text-white animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-black uppercase tracking-tight">¡Pago Registrado!</h3>
                    <p class="text-xs font-bold text-emerald-100 mt-1 uppercase tracking-widest" x-text="'Pedido: ' + paymentSuccessModalData.code + ' - ' + paymentSuccessModalData.clientName"></p>
                    <p class="text-[10px] bg-white/10 py-1 px-3 rounded-full inline-block mt-3 font-bold border border-white/20">
                        📋 El mensaje de confirmación se ha copiado a tu portapapeles
                    </p>
                </div>

                <div class="p-6 space-y-4 bg-slate-50 dark:bg-slate-950">
                    <div class="p-4 bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-inner">
                        <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Vista Previa del Mensaje Copiado:</p>
                        <p class="text-xs font-medium text-slate-700 dark:text-slate-300 whitespace-pre-line leading-relaxed italic" x-text="paymentSuccessModalData.message"></p>
                    </div>

                    <div class="flex flex-col gap-3 pt-2">
                        <a :href="'https://api.whatsapp.com/send?phone=57' + paymentSuccessModalData.phone + '&text=' + encodeURIComponent(paymentSuccessModalData.message)"
                           target="_blank"
                           @click="showPaymentSuccessModal = false"
                           class="w-full py-4 bg-emerald-600 hover:bg-emerald-700 text-white rounded-2xl font-black uppercase text-[10px] tracking-[0.2em] shadow-lg shadow-emerald-600/20 transition-all hover:scale-[1.02] flex items-center justify-center gap-2">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                            Abrir WhatsApp del Cliente
                        </a>
                        <button @click="showPaymentSuccessModal = false" 
                                class="w-full py-3.5 bg-slate-200 dark:bg-slate-800 text-slate-600 dark:text-slate-300 rounded-2xl font-black uppercase text-[10px] tracking-[0.2em] hover:bg-slate-300 transition-all">
                            Cerrar y Continuar
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- Modal Resumen Completo de Pedido y Costos -->
    <template x-teleport="body">
        <div x-show="showOrderSummaryModal" 
             class="fixed inset-0 z-[115] flex items-center justify-center p-4 bg-slate-900/80 backdrop-blur-sm"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100"
             x-cloak>
            
            <div class="bg-white dark:bg-slate-900 w-full max-w-3xl max-h-[90vh] rounded-[2.5rem] shadow-2xl border border-white/20 overflow-hidden flex flex-col">
                
                <!-- Header -->
                <div class="bg-gradient-to-r from-brand-wine via-brand-wine to-brand-orange p-6 text-white flex justify-between items-center shrink-0 shadow-lg">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 rounded-2xl bg-white/20 backdrop-blur-md flex items-center justify-center border border-white/30 shadow-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.5" d="M9 12h6m-6 4h6m2 5H7a2 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-2 flex-wrap">
                                <h3 class="text-2xl font-black uppercase tracking-tight" x-text="orderSummaryData ? 'Pedido: ' + orderSummaryData.codigo_seguimiento : 'Cargando Resumen...'"></h3>
                                <template x-if="orderSummaryData">
                                    <span class="px-2.5 py-0.5 rounded-lg text-[9px] font-black uppercase bg-white/20 border border-white/30 text-white backdrop-blur-md" x-text="orderSummaryData.estado"></span>
                                </template>
                            </div>
                            <p class="text-[11px] text-orange-100 font-bold uppercase tracking-widest mt-0.5" x-text="orderSummaryData ? '👤 ' + (orderSummaryData.cliente?.nombre_completo || 'Cliente General') : ''"></p>
                        </div>
                    </div>
                    <button @click="showOrderSummaryModal = false" class="p-2.5 hover:bg-white/20 rounded-2xl transition-all border border-transparent hover:border-white/20" title="Cerrar modal">
                        <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.5" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>

                <!-- Body (Scrollable) -->
                <div class="p-6 overflow-y-auto custom-scrollbar flex-1 space-y-6 bg-slate-50 dark:bg-slate-950">
                    <div x-show="orderSummaryLoading" class="py-16 flex flex-col items-center justify-center space-y-3">
                        <div class="w-10 h-10 border-4 border-brand-orange border-t-transparent rounded-full animate-spin"></div>
                        <p class="text-[11px] font-black text-slate-400 uppercase tracking-widest">Obteniendo detalles del pedido...</p>
                    </div>

                    <template x-if="!orderSummaryLoading && orderSummaryData">
                        <div class="space-y-5 animate-fade-in">
                            
                            <!-- Tarjetas Informativas -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="p-4 bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-xs space-y-2">
                                    <div class="flex items-center gap-1.5 border-b border-slate-100 dark:border-slate-800 pb-1.5">
                                        <span class="w-1.5 h-1.5 rounded-full bg-brand-orange"></span>
                                        <span class="text-[9px] font-black text-brand-orange uppercase tracking-widest block">Cliente y Dirección</span>
                                    </div>
                                    <p class="text-xs font-black text-slate-900 dark:text-white uppercase tracking-tight" x-text="orderSummaryData.cliente?.nombre_completo"></p>
                                    <p class="text-[11px] font-bold text-slate-500 dark:text-slate-400 flex items-center gap-1.5" x-text="'📱 ' + (orderSummaryData.cliente?.telefono || 'Sin teléfono')"></p>
                                    <p class="text-[11px] font-bold text-slate-700 dark:text-slate-300 flex items-start gap-1.5" x-text="'📍 ' + (orderSummaryData.direccion?.direccion || 'Dirección no especificada') + (orderSummaryData.direccion?.barrio ? ' (' + orderSummaryData.direccion.barrio + ')' : '')"></p>
                                    <p class="text-[11px] font-black text-indigo-600 dark:text-indigo-400 uppercase tracking-wide" x-text="'🗺️ Zona: ' + (orderSummaryData.direccion?.zona?.nombre_zona || 'No Asignada')"></p>
                                </div>

                                <div class="p-4 bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-xs space-y-2">
                                    <div class="flex items-center gap-1.5 border-b border-slate-100 dark:border-slate-800 pb-1.5">
                                        <span class="w-1.5 h-1.5 rounded-full bg-brand-wine"></span>
                                        <span class="text-[9px] font-black text-brand-wine dark:text-brand-orange uppercase tracking-widest block">Programación de Entrega</span>
                                    </div>
                                    <div class="flex items-center gap-1.5 flex-wrap">
                                        <span class="text-[9px] font-black uppercase px-2.5 py-0.5 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-slate-700" x-text="'Estado: ' + orderSummaryData.estado"></span>
                                        <span class="text-[9px] font-black uppercase px-2.5 py-0.5 rounded-lg" :class="orderSummaryData.estado_pago === 'pagado' ? 'bg-emerald-100 text-emerald-700 border border-emerald-200' : 'bg-rose-100 text-rose-700 border border-rose-200'" x-text="'Pago: ' + orderSummaryData.estado_pago"></span>
                                    </div>
                                    <p class="text-[11px] font-bold text-slate-600 dark:text-slate-300 flex items-center gap-1.5" x-text="'📅 Programado: ' + formatDateLong(orderSummaryData.fecha_entrega_programada)"></p>
                                    <template x-if="orderSummaryData.rutas && orderSummaryData.rutas.length > 0">
                                        <p class="text-[11px] font-black text-emerald-600 dark:text-emerald-400 uppercase tracking-wide flex items-center gap-1.5" x-text="'🛵 Repartidor: ' + (orderSummaryData.rutas[0].domiciliario?.nombre || 'No asignado')"></p>
                                    </template>
                                </div>
                            </div>

                            <!-- Tabla de Productos Incluidos -->
                            <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 overflow-hidden shadow-xs">
                                <div class="p-3 bg-slate-100/70 dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center">
                                    <h4 class="text-[10px] font-black text-slate-700 dark:text-slate-200 uppercase tracking-widest">📦 Productos Incluidos</h4>
                                    <span class="text-[9px] font-black bg-white dark:bg-slate-900 px-2 py-0.5 rounded-lg border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300" x-text="(orderSummaryData.detalles || []).length + ' Ítems'"></span>
                                </div>
                                <table class="w-full text-left text-[11px]">
                                    <thead class="bg-slate-50 dark:bg-slate-950 text-[9px] font-black text-slate-400 uppercase border-b border-slate-100 dark:border-slate-800">
                                        <tr>
                                            <th class="p-2.5">Producto</th>
                                            <th class="p-2.5 text-center">Cant</th>
                                            <th class="p-2.5 text-right">P. Unitario</th>
                                            <th class="p-2.5 text-right">Subtotal</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                                        <template x-for="item in (orderSummaryData.detalles || [])" :key="item.id">
                                            <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-800/40 transition-colors">
                                                <td class="p-2.5 font-bold text-slate-800 dark:text-slate-200">
                                                    <div class="flex items-center gap-1.5">
                                                        <span class="text-sm" x-text="item.producto?.icono || '📦'"></span>
                                                        <span class="font-black text-[11px] uppercase" x-text="item.producto?.nombre || 'Producto'"></span>
                                                        <span x-show="item.es_obsequio" class="text-[8px] font-black text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded-md border border-amber-200 uppercase tracking-wider">(Obsequio)</span>
                                                    </div>
                                                </td>
                                                <td class="p-2.5 text-center">
                                                    <span class="px-2 py-0.5 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-100 font-black text-[11px]" x-text="item.cantidad"></span>
                                                </td>
                                                <td class="p-2.5 text-right font-bold text-slate-500 dark:text-slate-400" x-text="formatCurrency(item.precio_unitario_venta)"></td>
                                                <td class="p-2.5 text-right font-black text-slate-900 dark:text-white" x-text="formatCurrency(item.precio_unitario_venta * item.cantidad)"></td>
                                            </tr>
                                        </template>
                                    </tbody>
                                </table>
                            </div>

                            <!-- Desglose de Costos Financieros y Saldos -->
                            <div class="p-4 bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-xs space-y-3">
                                <h4 class="text-[10px] font-black text-brand-orange uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 pb-2 flex items-center justify-between">
                                    <span>💳 Desglose Financiero y Saldos</span>
                                    <span class="text-[9px] font-bold text-slate-400" x-text="'ID Pedido: #' + orderSummaryData.id"></span>
                                </h4>
                                <div class="space-y-2 text-[11px] font-bold text-slate-600 dark:text-slate-300">
                                    <div class="flex justify-between">
                                        <span>Subtotal Productos:</span>
                                        <span class="font-black text-slate-800 dark:text-white" x-text="formatCurrency(orderSummaryData.total_productos)"></span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span>Costo Domicilio / Envío:</span>
                                        <span class="font-black text-slate-800 dark:text-white" x-text="formatCurrency(orderSummaryData.costo_domicilio)"></span>
                                    </div>

                                    <!-- Descuento Manual -->
                                    <template x-if="orderSummaryData.descuento > 0">
                                        <div class="flex justify-between items-center text-amber-600 dark:text-amber-400 bg-amber-50/70 dark:bg-amber-950/30 p-2 rounded-xl border border-amber-200 dark:border-amber-800">
                                            <div class="flex items-center gap-1.5">
                                                <span class="text-xs">⚠️</span>
                                                <span class="font-black uppercase text-[10px]">Descuento Manual Aplicado:</span>
                                            </div>
                                            <span class="font-black" x-text="'- ' + formatCurrency(orderSummaryData.descuento)"></span>
                                        </div>
                                    </template>

                                    <!-- Saldo a Favor Utilizado -->
                                    <template x-if="orderSummaryData.saldo_usado > 0">
                                        <div class="flex justify-between items-center text-emerald-600 dark:text-emerald-400 bg-emerald-50/70 dark:bg-emerald-950/30 p-2 rounded-xl border border-emerald-200 dark:border-emerald-800">
                                            <div class="flex items-center gap-1.5">
                                                <span class="text-xs">💰</span>
                                                <span class="font-black uppercase text-[10px]">Saldo a Favor de Cliente Utilizado:</span>
                                            </div>
                                            <span class="font-black" x-text="'- ' + formatCurrency(orderSummaryData.saldo_usado)"></span>
                                        </div>
                                    </template>

                                    <div class="flex justify-between text-sm font-black text-slate-900 dark:text-white pt-2 border-t border-slate-100 dark:border-slate-800">
                                        <span>Total Valor Pedido:</span>
                                        <span class="text-brand-orange text-base" x-text="formatCurrency(orderSummaryData.total_pagar)"></span>
                                    </div>

                                    <div class="flex justify-between text-[11px] font-black text-emerald-600 dark:text-emerald-400 pt-0.5">
                                        <span>Total Abonado / Pagado:</span>
                                        <span x-text="formatCurrency(orderSummaryData.monto_pagado || 0)"></span>
                                    </div>

                                    <!-- Explicación de Saldo Aplicado en el Pago -->
                                    <template x-if="orderSummaryData.saldo_usado > 0">
                                        <div class="p-3 bg-emerald-50/90 dark:bg-emerald-950/40 rounded-xl border border-emerald-200 dark:border-emerald-800 text-[10px] font-bold text-emerald-800 dark:text-emerald-300 space-y-1">
                                            <div class="flex items-center gap-1.5 font-black uppercase text-emerald-700 dark:text-emerald-400">
                                                <span>💡 Explicación del Pago Registrado:</span>
                                            </div>
                                            <p class="leading-relaxed">
                                                Para este pedido se aplicaron <strong class="text-emerald-600 dark:text-emerald-400" x-text="formatCurrency(orderSummaryData.saldo_usado)"></strong> de saldo a favor acumulado del cliente. Por esta razón, el dinero recibido o transferido fue únicamente <strong x-text="formatCurrency((orderSummaryData.total_pagar || 0) - (orderSummaryData.saldo_usado || 0))"></strong>.
                                            </p>
                                        </div>
                                    </template>
                                    
                                    <div class="p-3 rounded-xl mt-2 flex justify-between items-center border"
                                         :class="(orderSummaryData.total_pagar - (orderSummaryData.monto_pagado || 0)) > 0 ? 'bg-rose-50/70 dark:bg-rose-950/30 border-rose-200 dark:border-rose-800 text-rose-700 dark:text-rose-300' : 'bg-emerald-50/70 dark:bg-emerald-950/30 border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-300'">
                                        <span class="text-[11px] font-black uppercase tracking-wider">Saldo Pendiente por Cobrar:</span>
                                        <span class="text-sm font-black" x-text="formatCurrency(orderSummaryData.total_pagar - (orderSummaryData.monto_pagado || 0))"></span>
                                    </div>
                                </div>
                            </div>

                            <!-- Alerta de Pago Consolidado Agrupado -->
                            <template x-if="orderSummaryData && orderSummaryData.pagos && orderSummaryData.pagos.some(p => p.pedidos && p.pedidos.length > 1)">
                                <div class="p-4 bg-indigo-50/70 dark:bg-indigo-950/30 rounded-2xl border border-indigo-200 dark:border-indigo-800/60 space-y-2 shadow-xs">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm">🔗</span>
                                        <span class="text-[10px] font-black text-indigo-700 dark:text-indigo-400 uppercase tracking-widest block">Pago Consolidado Agrupado</span>
                                    </div>
                                    <p class="text-[11px] font-bold text-slate-700 dark:text-slate-300">
                                        Este pedido fue cubierto mediante una única transacción bancaria de 
                                        <span class="font-black text-indigo-600 dark:text-indigo-400" x-text="formatCurrency(orderSummaryData.pagos.find(p => p.pedidos && p.pedidos.length > 1)?.monto || 0)"></span>.
                                    </p>
                                    <div class="flex items-center gap-1.5 flex-wrap pt-1">
                                        <span class="text-[9px] font-black text-slate-400 uppercase">Pedidos incluidos en este comprobante:</span>
                                        <template x-for="pSib in (orderSummaryData.pagos.find(p => p.pedidos && p.pedidos.length > 1)?.pedidos || [])" :key="pSib.id">
                                            <button type="button" 
                                                    @click="openOrderSummaryModal(pSib.id);" 
                                                    class="px-2 py-0.5 bg-white dark:bg-slate-900 border border-indigo-200 dark:border-indigo-800 rounded-lg text-[9px] font-black uppercase text-indigo-600 dark:text-indigo-400 hover:bg-indigo-600 hover:text-white transition-all shadow-2xs"
                                                    :class="pSib.id === orderSummaryData.id ? 'ring-2 ring-indigo-500 font-extrabold' : ''"
                                                    x-text="pSib.codigo_seguimiento">
                                            </button>
                                        </template>
                                    </div>
                                </div>
                            </template>

                            <!-- Observaciones del Registro del Pedido -->
                            <div class="p-4 bg-amber-50/60 dark:bg-amber-950/20 rounded-2xl border border-amber-200/60 dark:border-amber-900/30 space-y-1 shadow-xs">
                                <span class="text-[9px] font-black text-amber-700 dark:text-amber-400 uppercase tracking-widest block">📝 Observaciones del Registro del Pedido:</span>
                                <p class="text-[11px] text-slate-700 dark:text-slate-300 font-medium italic leading-relaxed" x-text="orderSummaryData.observaciones || orderSummaryData.mensaje_regalo || 'Sin observaciones registradas en la creación.'"></p>
                            </div>

                            <!-- Observaciones de la Entrega -->
                            <div class="p-4 bg-indigo-50/60 dark:bg-indigo-950/20 rounded-2xl border border-indigo-200/60 dark:border-indigo-900/30 space-y-1 shadow-xs">
                                <span class="text-[9px] font-black text-indigo-700 dark:text-indigo-400 uppercase tracking-widest block">🚚 Observaciones y Novedades de Entrega en Campo:</span>
                                <p class="text-[11px] text-slate-700 dark:text-slate-300 font-medium italic leading-relaxed" x-text="orderSummaryData.observacion_entrega || orderSummaryData.motivo_cancelacion || (orderSummaryData.rutas && orderSummaryData.rutas.length > 0 ? orderSummaryData.rutas[0].pivot?.observaciones : null) || 'Sin novedades registradas en la entrega.'"></p>
                            </div>

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

                <!-- Footer -->
                <div class="p-4 bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 shrink-0 flex justify-between items-center gap-3">
                    <template x-if="orderSummaryData && orderSummaryData.cliente?.telefono">
                        <a :href="'https://api.whatsapp.com/send?phone=57' + orderSummaryData.cliente.telefono.replace(/\D/g, '') + '&text=' + encodeURIComponent('Hola ' + orderSummaryData.cliente.nombre_completo + ', te compartimos el resumen de tu pedido ' + orderSummaryData.codigo_seguimiento + ' por un total de ' + formatCurrency(orderSummaryData.total_pagar) + '. Saldo pendiente: ' + formatCurrency(orderSummaryData.total_pagar - (orderSummaryData.monto_pagado || 0)) + '.')"
                           target="_blank"
                           class="px-4 py-2.5 bg-emerald-50 dark:bg-emerald-950/30 text-emerald-600 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800 hover:bg-emerald-600 hover:text-white rounded-xl font-black uppercase tracking-widest text-[9px] transition-all flex items-center gap-2 shadow-2xs">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                            Enviar a WhatsApp
                        </a>
                    </template>
                    <button @click="showOrderSummaryModal = false" class="px-6 py-2.5 bg-rose-50 text-rose-600 dark:bg-rose-950/40 dark:text-rose-400 border border-rose-200 dark:border-rose-800/60 hover:bg-rose-600 hover:text-white rounded-xl font-black uppercase tracking-widest text-[9px] transition-all shadow-2xs">
                        Cerrar Resumen
                    </button>
                </div>
            </div>
        </div>
    </template>

    <!-- Modal Ajustar y Administrar Saldo de Cliente -->
    <template x-teleport="body">
        <div x-show="showSaldoModal" 
             class="fixed inset-0 z-[125] flex items-center justify-center p-4 bg-slate-900/80 backdrop-blur-sm"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100"
             x-cloak>
            
            <div class="bg-white dark:bg-slate-900 w-full max-w-md rounded-[2.5rem] shadow-2xl border border-white/20 overflow-hidden flex flex-col">
                
                <!-- Header -->
                <div class="bg-gradient-to-r from-emerald-600 to-teal-700 p-6 text-white flex justify-between items-center shrink-0">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-2xl bg-white/10 flex items-center justify-center border border-white/20 shadow-lg">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        </div>
                        <div>
                            <h3 class="text-lg font-black uppercase tracking-tight">Administrar Saldo</h3>
                            <p class="text-[10px] text-emerald-100 font-bold uppercase tracking-widest mt-0.5" x-text="saldoModalData.nombre"></p>
                        </div>
                    </div>
                    <button @click="showSaldoModal = false" class="p-2 hover:bg-white/10 rounded-xl transition-all">
                        <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.5" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>

                <!-- Body -->
                <div class="p-6 space-y-5 bg-slate-50 dark:bg-slate-950">
                    <!-- Resumen Saldo Actual -->
                    <div class="p-4 bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm flex items-center justify-between">
                        <div>
                            <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest block">Saldo Registrado Actual:</span>
                            <span class="text-lg font-black" :class="saldoModalData.saldoActual > 0 ? 'text-emerald-600' : (saldoModalData.saldoActual < 0 ? 'text-rose-600' : 'text-slate-500')" x-text="(saldoModalData.saldoActual > 0 ? '+' : '') + formatCurrency(saldoModalData.saldoActual)"></span>
                        </div>
                        <button type="button" @click="saldoModalData.nuevoSaldo = 0" class="px-3 py-1.5 bg-rose-50 dark:bg-rose-950/30 text-rose-600 dark:text-rose-400 border border-rose-200 dark:border-rose-800 rounded-xl text-[9px] font-black uppercase tracking-wider hover:bg-rose-600 hover:text-white transition-all flex items-center gap-1">
                            <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" 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>
                            Resetear a $0
                        </button>
                    </div>

                    <!-- Botones de Ajuste Rápido -->
                    <div class="space-y-1.5">
                        <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest block">Ajustes Rápidos de Saldo a Favor:</label>
                        <div class="grid grid-cols-3 gap-2">
                            <button type="button" @click="saldoModalData.nuevoSaldo = (parseFloat(saldoModalData.nuevoSaldo || 0) + 10000)" class="py-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl text-[10px] font-black text-emerald-600 hover:bg-emerald-50 transition-all">+ $10.000</button>
                            <button type="button" @click="saldoModalData.nuevoSaldo = (parseFloat(saldoModalData.nuevoSaldo || 0) + 20000)" class="py-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl text-[10px] font-black text-emerald-600 hover:bg-emerald-50 transition-all">+ $20.000</button>
                            <button type="button" @click="saldoModalData.nuevoSaldo = (parseFloat(saldoModalData.nuevoSaldo || 0) + 50000)" class="py-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl text-[10px] font-black text-emerald-600 hover:bg-emerald-50 transition-all">+ $50.000</button>
                        </div>
                    </div>

                    <!-- Campo Nuevo Saldo -->
                    <div class="space-y-1.5">
                        <label class="text-[10px] font-black text-slate-700 dark:text-slate-300 uppercase tracking-wider block">Nuevo Saldo del Cliente ($):</label>
                        <input type="number" step="any" x-model="saldoModalData.nuevoSaldo" class="w-full bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-xl py-3 px-4 text-base font-black text-slate-800 dark:text-white focus:ring-2 focus:ring-emerald-500 shadow-sm" placeholder="Ingresa valor (ej. 15000 o -5000)">
                        <p class="text-[9px] font-bold text-slate-400">Valores positivos (+): Saldo a favor del cliente. Valores negativos (-): Deuda pendiente.</p>
                    </div>

                    <!-- Campo Motivo de Ajuste -->
                    <div class="space-y-1.5">
                        <label class="text-[10px] font-black text-slate-700 dark:text-slate-300 uppercase tracking-wider block">Motivo / Observación del Cambio:</label>
                        <textarea x-model="saldoModalData.motivo" rows="2" placeholder="Ej. Ajuste por excedente en transferencia, devolución o saldo acordado..." class="w-full bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-xl p-3 text-xs font-semibold text-slate-800 dark:text-white focus:ring-2 focus:ring-emerald-500 shadow-sm"></textarea>
                    </div>
                </div>

                <!-- Footer -->
                <div class="p-5 bg-white dark:bg-slate-900 border-t border-slate-100 dark:border-slate-800 shrink-0 flex justify-end gap-3">
                    <button type="button" @click="showSaldoModal = false" class="px-5 py-3 bg-slate-200 dark:bg-slate-800 text-slate-600 dark:text-slate-300 rounded-2xl font-black uppercase tracking-widest text-[9px] hover:bg-slate-300 transition-all">
                        Cancelar
                    </button>
                    <button type="button" @click="saveClienteSaldo()" :disabled="savingSaldo" class="px-7 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-2xl font-black uppercase tracking-widest text-[9px] transition-all shadow-md flex items-center gap-2">
                        <span x-show="!savingSaldo">Guardar Saldo</span>
                        <span x-show="savingSaldo">Guardando...</span>
                    </button>
                </div>
            </div>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
    function cobroManager() {
        return {
            search: '{{ request('search') }}',
            metodo_pago: '{{ request('metodo_pago') }}',
            estado_pago: '{{ $estadoPago }}',
            bogotaToday: '{{ \Carbon\Carbon::now('America/Bogota')->toDateString() }}',
            fecha_desde: '{{ request('fecha_desde', '') }}',
            fecha_hasta: '{{ request("fecha_hasta", '') }}',
            tipo_fecha: '{{ request("tipo_fecha", '') }}',
            banco_origen: '{{ request("banco_origen", "") }}',
            banco_destino: '{{ request("banco_destino", "") }}',
            pago_registro_id: '{{ request("pago_registro_id", "") }}',
            con_descuento: '{{ request("con_descuento", "") }}',
            domiciliario_id: '{{ request("domiciliario_id", "") }}',
            recaudo_domiciliario: {{ request("recaudo_domiciliario") ? 'true' : 'false' }},
            por_conciliar: {{ request("por_conciliar") ? 'true' : 'false' }},
            sort_by: '{{ request("sort_by", "") }}',
            sort_order: '{{ request("sort_order", "asc") }}',
            per_page: '{{ $pedidos->perPage() }}',
            filterTotals: @json($filterTotals),
            
            toggleSort(column) {
                if (this.sort_by === column) {
                    this.sort_order = (this.sort_order === 'asc') ? 'desc' : 'asc';
                } else {
                    this.sort_by = column;
                    this.sort_order = 'asc';
                }
                this.applyFilters();
            },
            
            // Planilla
            showPlanillaModal: false,
            planillaLoading: false,
            planillaData: { productos: [], pedidos: [], totales: {} },
            domiciliarioNombre: 'Todos',

            showPaymentModal: false,
            selectedPedido: null,
            paymentAmount: 0,
            paymentMethod: 'efectivo',
            bancoDestino: '',
            bancoOrigen: '',
            comprobantePago: '',
            numeroCuenta: '',
            fechaPago: '{{ \Carbon\Carbon::now('America/Bogota')->toDateString() }}',
            saving: false,
            usarSaldo: false,
            recaudadoConductor: false,
            waTemplates: {},
            baseUrl: '{{ url("/") }}',
            pedidosList: @json($pedidos->items()),
            clickedButtons: [],

            // Multi-pagos / Abonos
            selectedOrders: [],
            selectedPedidosData: [],
            paymentNotes: '',
            paymentHistory: [],

            // Confirmación Premium
            showConfirmModal: false,
            confirmTitle: '',
            confirmMessage: '',
            confirmAction: null,

            // Modal de Notificación Directa al Registrar Pago
            showPaymentSuccessModal: false,
            paymentSuccessModalData: { message: '', phone: '', code: '', clientName: '' },

            // Modal de Resumen y Desglose del Pedido
            showOrderSummaryModal: false,
            orderSummaryLoading: false,
            orderSummaryData: null,

            // Modal de Edición Directa de Saldo de Cliente
            showSaldoModal: false,
            savingSaldo: false,
            saldoModalData: { id: null, nombre: '', telefono: '', saldoActual: 0, nuevoSaldo: 0, motivo: '' },

            openEditSaldoModal(cliente) {
                this.saldoModalData = {
                    id: cliente.id,
                    nombre: cliente.nombre,
                    telefono: cliente.telefono || '',
                    saldoActual: parseFloat(cliente.saldo || 0),
                    nuevoSaldo: parseFloat(cliente.saldo || 0),
                    motivo: ''
                };
                this.showSaldoModal = true;
            },

            async saveClienteSaldo() {
                if (!this.saldoModalData.id) return;
                this.savingSaldo = true;
                try {
                    const response = await fetch(`${this.baseUrl}/cobros/cliente-saldo/${this.saldoModalData.id}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            saldo: this.saldoModalData.nuevoSaldo,
                            motivo: this.saldoModalData.motivo
                        })
                    });
                    const data = await response.json();
                    if (data.success) {
                        this.showSaldoModal = false;
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Saldo Actualizado', message: data.message, type: 'success' } }));
                        this.submitForm();
                    } else {
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: data.message || 'Error al actualizar el saldo', type: 'error' } }));
                    }
                } catch (e) {
                    console.error("Error al guardar saldo de cliente:", e);
                    window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: 'Ocurrió un error inesperado al actualizar el saldo.', type: 'error' } }));
                } finally {
                    this.savingSaldo = false;
                }
            },

            async openOrderSummaryModal(id) {
                this.showOrderSummaryModal = true;
                this.orderSummaryLoading = true;
                this.orderSummaryData = null;
                try {
                    const response = await fetch(`${this.baseUrl}/cobros/pedido-resumen/${id}`, {
                        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                    });
                    const data = await response.json();
                    if (data.success) {
                        this.orderSummaryData = data.pedido;
                    }
                } catch (e) {
                    console.error("Error al cargar resumen del pedido:", e);
                } finally {
                    this.orderSummaryLoading = false;
                }
            },

            executeConfirmAction() {
                if (this.confirmAction) this.confirmAction();
                this.showConfirmModal = false;
            },

            markAsClicked(id, type) {
                const key = `${id}-${type}`;
                if (!this.clickedButtons.includes(key)) {
                    this.clickedButtons.push(key);
                }
            },

            async init() {
                this.$watch('usarSaldo', (value) => {
                    if (!this.selectedPedido) return;
                    
                    const deudaTotal = this.selectedPedido.total_pagar - (this.selectedPedido.monto_pagado || 0);
                    const saldoCliente = parseFloat(this.selectedPedido.cliente?.saldo || 0);

                    if (value) {
                        this.paymentAmount = Math.max(0, deudaTotal - Math.max(0, saldoCliente));
                    } else {
                        this.paymentAmount = deudaTotal;
                    }
                });

                this.$watch('paymentAmount', (value) => {
                    if (this.selectedPedidosData.length > 1) {
                        const currentSum = this.selectedPedidosData.reduce((sum, p) => sum + (parseFloat(p.monto_aplicado) || 0), 0);
                        if (Math.abs(currentSum - parseFloat(value)) > 0.01) {
                            this.distributePayment(value);
                        }
                    }
                });

                try {
                    const res = await fetch(`${this.baseUrl}/settings/whatsapp-templates`, {
                        headers: { 
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                    this.waTemplates = await res.json();
                } catch (e) {
                    console.error("Error loading WhatsApp templates", e);
                }

                // Interceptar clics en la paginación para preservar todos los criterios y filtros activos vía AJAX
                const tableContainer = document.getElementById('cobros-table-container');
                if (tableContainer) {
                    tableContainer.addEventListener('click', (e) => {
                        const link = e.target.closest('a');
                        if (!link) return;
                        
                        // Verificar si el enlace está dentro de la barra de paginación
                        const isPaginationLink = link.closest('.pagination') || link.closest('nav[role="navigation"]');
                        if (isPaginationLink && link.href) {
                            e.preventDefault();
                            try {
                                const url = new URL(link.href, window.location.origin);
                                const page = url.searchParams.get('page') || 1;
                                this.submitForm(page);
                            } catch (err) {
                                console.error('Error parsing pagination URL:', err);
                            }
                        }
                    });
                }
            },

            applyFilters() {
                this.submitForm(1);
            },

            submitForm(page = 1) {
                const rawParams = {
                    search: this.search,
                    metodo_pago: this.metodo_pago,
                    estado_pago: this.estado_pago || 'pendiente',
                    fecha_desde: this.fecha_desde,
                    fecha_hasta: this.fecha_hasta,
                    tipo_fecha: this.tipo_fecha,
                    banco_origen: this.banco_origen,
                    banco_destino: this.banco_destino,
                    tipo_transferencia: this.tipo_transferencia,
                    numero_cuenta: this.numero_cuenta_filtro,
                    pago_registro_id: this.pago_registro_id,
                    con_descuento: this.con_descuento,
                    domiciliario_id: this.domiciliario_id,
                    recaudo_domiciliario: this.recaudo_domiciliario ? 1 : '',
                    por_conciliar: this.por_conciliar ? 1 : '',
                    sort_by: this.sort_by,
                    sort_order: this.sort_order,
                    per_page: this.per_page,
                    page: page
                };

                const params = new URLSearchParams();
                Object.keys(rawParams).forEach(key => {
                    if (rawParams[key] !== null && rawParams[key] !== undefined && rawParams[key] !== '') {
                        params.append(key, rawParams[key]);
                    }
                });

                fetch(`${window.location.pathname}?${params.toString()}`, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.text())
                .then(html => {
                    document.getElementById('cobros-table-container').innerHTML = html;
                    
                    // Sync Alpine state with new JSON data
                    const newDataTag = document.getElementById('pedidos-data-json');
                    if (newDataTag) {
                        this.pedidosList = JSON.parse(newDataTag.textContent);
                    }

                    const newTotalsTag = document.getElementById('filter-totals-json');
                    if (newTotalsTag && newTotalsTag.textContent) {
                        try {
                            const parsedTotals = JSON.parse(newTotalsTag.textContent);
                            if (parsedTotals) {
                                this.filterTotals = parsedTotals;
                            }
                        } catch (e) {
                            console.error('Error parsing filter totals:', e);
                        }
                    }

                    // Update URL without reloading
                    window.history.pushState({}, '', `?${params.toString()}`);
                })
                .catch(error => {
                    console.error('Error refreshing table:', error);
                });
            },

            exportData() {
                window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'En Desarrollo', message: 'La exportación estará disponible próximamente.', type: 'info' } }));
            },

            toggleSaldo() {
                this.usarSaldo = !this.usarSaldo;
                if (this.usarSaldo && this.selectedPedido) {
                    const total = parseFloat(this.selectedPedido.total_pagar);
                    const saldo = parseFloat(this.selectedPedido.cliente?.saldo || 0);
                    // El nuevo valor recibido es el total menos el saldo, mínimo 0
                    this.paymentAmount = Math.max(0, total - saldo);
                } else if (this.selectedPedido) {
                    // Si desmarca, vuelve al total original
                    this.paymentAmount = this.selectedPedido.total_pagar - (this.selectedPedido.monto_pagado || 0);
                }
            },

            toggleSelectAll(event) {
                if (event.target.checked) {
                    this.selectedOrders = this.pedidosList.map(p => p.id);
                } else {
                    this.selectedOrders = [];
                }
            },

            openBulkPaymentModal() {
                if (this.selectedOrders.length === 0) return;
                
                this.selectedPedidosData = this.pedidosList
                    .filter(p => this.selectedOrders.includes(p.id))
                    .map(p => {
                        const deudor = p.total_pagar - (p.monto_pagado || 0);
                        return {
                            ...p,
                            monto_aplicado: deudor
                        };
                    });
                
                const totalDeuda = this.selectedPedidosData.reduce((sum, p) => sum + p.monto_aplicado, 0);
                this.paymentAmount = totalDeuda;
                
                this.paymentMethod = 'transferencia';
                this.bancoDestino = '';
                this.bancoOrigen = '';
                this.comprobantePago = '';
                this.numeroCuenta = '';
                this.fechaPago = this.bogotaToday;
                this.recaudadoConductor = false;
                this.paymentNotes = '';
                this.paymentHistory = [];
                this.usarSaldo = false;
                
                this.showPaymentModal = true;
            },

            updateTotalPaymentAmount() {
                const total = this.selectedPedidosData.reduce((sum, p) => sum + (parseFloat(p.monto_aplicado) || 0), 0);
                this.paymentAmount = total;
            },

            distributePayment(amount) {
                let remaining = parseFloat(amount) || 0;
                this.selectedPedidosData.forEach(p => {
                    const maxDeuda = Math.max(0, p.total_pagar - (p.monto_pagado || 0));
                    if (remaining >= maxDeuda) {
                        p.monto_aplicado = maxDeuda;
                        remaining -= maxDeuda;
                    } else {
                        p.monto_aplicado = remaining;
                        remaining = 0;
                    }
                });
                if (remaining > 0 && this.selectedPedidosData.length > 0) {
                    this.selectedPedidosData[this.selectedPedidosData.length - 1].monto_aplicado += remaining;
                }
            },

            async openPaymentModal(id) {
                const pedido = typeof id === 'object' ? id : this.pedidosList.find(p => p.id === id);
                if (!pedido) return;
                
                this.selectedPedido = pedido;
                this.selectedPedidosData = [pedido];
                
                // Si ya está pagado, cargamos sus datos actuales para edición
                if (pedido.estado_pago === 'pagado') {
                    this.paymentAmount = pedido.monto_pagado;
                    this.paymentMethod = pedido.metodo_pago;
                    this.bancoDestino = pedido.banco_destino || '';
                    this.bancoOrigen = pedido.banco_origen || '';
                    this.comprobantePago = pedido.comprobante_pago || '';
                    this.numeroCuenta = pedido.numero_cuenta || '';
                    this.fechaPago = pedido.fecha_pago || this.bogotaToday;
                    this.recaudadoConductor = !!pedido.recaudado_por_domiciliario;
                    this.paymentNotes = pedido.notes || pedido.notas || '';
                } else {
                    this.paymentAmount = pedido.total_pagar - (pedido.monto_pagado || 0);
                    this.paymentMethod = pedido.metodo_pago || 'efectivo';
                    this.bancoDestino = '';
                    this.bancoOrigen = '';
                    this.comprobantePago = '';
                    this.numeroCuenta = '';
                    this.fechaPago = this.bogotaToday;
                    this.recaudadoConductor = false;
                    this.usarSaldo = false;
                    this.paymentNotes = '';
                }

                this.showPaymentModal = true;
                
                // Cargar historial de abonos
                this.fetchPaymentHistory(pedido.id);

                // Cargar datos del último pago si es transferencia o consignación
                if (this.paymentMethod === 'transferencia' || this.paymentMethod === 'consignacion') {
                    try {
                        const response = await fetch(`${this.baseUrl}/cobros/ultimo-pago-cliente/${pedido.cliente_id}`, {
                            headers: { 
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        });
                        const data = await response.json();
                        if (data.success && data.ultimo_pago) {
                            this.bancoOrigen = data.ultimo_pago.banco_origen || '';
                            this.bancoDestino = data.ultimo_pago.banco_destino || '';
                            this.numeroCuenta = data.ultimo_pago.numero_cuenta || '';
                        }
                    } catch (e) {
                        console.error("No se pudo cargar el historial de pagos", e);
                    }
                }
            },

            async fetchPaymentHistory(pedidoId) {
                this.paymentHistory = [];
                try {
                    const response = await fetch(`${this.baseUrl}/cobros/pedidos/${pedidoId}/historial-pagos`, {
                        headers: { 
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                    const data = await response.json();
                    if (data.success) {
                        this.paymentHistory = data.pagos || [];
                    }
                } catch (e) {
                    console.error("Error al obtener el historial de pagos:", e);
                }
            },

            async annulPaymentFromHistory(pagoId) {
                this.confirmTitle = '¿Anular este abono?';
                this.confirmMessage = 'El abono se restará del total pagado del pedido. Si hubo un excedente, se ajustará el saldo del cliente.';
                
                this.confirmAction = async () => {
                    try {
                        const response = await fetch(`${this.baseUrl}/cobros/pago/${pagoId}/anular`, {
                            method: 'POST',
                            headers: { 
                                'Content-Type': 'application/json', 
                                'X-CSRF-TOKEN': '{{ csrf_token() }}' 
                            }
                        });
                        const data = await response.json();
                        if (data.success) {
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Anulado', message: data.message, type: 'success' } }));
                            if (this.selectedPedido) {
                                await this.fetchPaymentHistory(this.selectedPedido.id);
                            }
                            this.showPaymentModal = false;
                            this.submitForm();
                        } else {
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: data.message, type: 'error' } }));
                        }
                    } catch (e) {
                        console.error(e);
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: 'No se pudo anular el pago', type: 'error' } }));
                    }
                };

                this.showConfirmModal = true;
            },

            formatCurrency(amount) {
                if (amount === null || amount === undefined) return '$0';
                return new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP', maximumFractionDigits: 0 }).format(amount);
            },

            formatDateLong(dateStr) {
                if (!dateStr) return '';
                const date = new Date(dateStr + 'T00:00:00');
                return new Intl.DateTimeFormat('es-CO', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' }).format(date);
            },

            async savePayment() {
                if (this.paymentAmount < 0) return;
                if (this.paymentAmount == 0 && !this.usarSaldo) {
                    window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Atención', message: 'Debes ingresar un valor o usar el saldo del cliente.', type: 'warning' } }));
                    return;
                }
                this.saving = true;
                
                try {
                    let url, body;
                    if (this.selectedPedidosData.length > 1) {
                        url = `${this.baseUrl}/cobros/registrar-pago-multiple`;
                        body = JSON.stringify({
                            pedidos: this.selectedPedidosData.map(p => ({
                                id: p.id,
                                monto_aplicado: parseFloat(p.monto_aplicado) || 0
                            })),
                            monto_total: this.paymentAmount,
                            metodo_pago: this.paymentMethod,
                            banco_destino: this.bancoDestino,
                            banco_origen: this.bancoOrigen,
                            comprobante_pago: this.comprobantePago,
                            numero_cuenta: this.numeroCuenta,
                            fecha_pago: this.fechaPago,
                            recaudado_por_domiciliario: this.recaudadoConductor,
                            usar_saldo: this.usarSaldo,
                            notas: this.paymentNotes
                        });
                    } else {
                        url = `${this.baseUrl}/cobros/${this.selectedPedido.id}/registrar-pago`;
                        body = JSON.stringify({
                            monto: this.paymentAmount,
                            metodo_pago: this.paymentMethod,
                            banco_destino: this.bancoDestino,
                            banco_origen: this.bancoOrigen,
                            comprobante_pago: this.comprobantePago,
                            numero_cuenta: this.numeroCuenta,
                            fecha_pago: this.fechaPago,
                            recaudado_por_domiciliario: this.recaudadoConductor,
                            usar_saldo: this.usarSaldo,
                            notas: this.paymentNotes
                        });
                    }

                    const response = await fetch(url, {
                        method: 'POST',
                        headers: { 
                            'Content-Type': 'application/json', 
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}' 
                        },
                        body: body
                    });
                    const responseText = await response.text();
                    let data;
                    try {
                        data = JSON.parse(responseText);
                    } catch (e) {
                        console.error("Respuesta NO-JSON detectada:", responseText);
                        window.dispatchEvent(new CustomEvent('notify', { 
                            detail: { title: 'Error de Servidor', message: 'El servidor devolvió una respuesta inesperada. Revisa la consola (F12).', type: 'error' } 
                        }));
                        return;
                    }

                    if (data.success) {
                        const targetPedido = this.selectedPedido || (this.selectedPedidosData.length > 0 ? this.selectedPedidosData[0] : null);
                        this.showPaymentModal = false;

                        // Generar mensaje de confirmación de pago y auto-copiar
                        if (targetPedido) {
                            const amountPaidNow = parseFloat(this.paymentAmount) > 0 
                                ? parseFloat(this.paymentAmount) 
                                : (parseFloat(targetPedido.total_pagar || 0) - parseFloat(targetPedido.monto_pagado || 0));

                            const totalMontoPagado = (parseFloat(targetPedido.monto_pagado) || 0) + (amountPaidNow > 0 ? amountPaidNow : parseFloat(targetPedido.total_pagar || 0));

                            const pClone = {
                                ...targetPedido,
                                estado_pago: 'pagado',
                                metodo_pago: this.paymentMethod || targetPedido.metodo_pago || 'efectivo',
                                monto_pagado: totalMontoPagado > 0 ? totalMontoPagado : (targetPedido.total_pagar || 0)
                            };
                            const msg = this.getMessageForPedido(pClone);
                            const phone = (pClone.cliente?.telefono || '').replace(/\D/g, '');

                            if (navigator.clipboard && navigator.clipboard.writeText) {
                                navigator.clipboard.writeText(msg).catch(e => console.error("Clipboard copy error:", e));
                            } else {
                                const textArea = document.createElement("textarea");
                                textArea.value = msg;
                                document.body.appendChild(textArea);
                                textArea.select();
                                document.execCommand("copy");
                                document.body.removeChild(textArea);
                            }

                            this.paymentSuccessModalData = {
                                message: msg,
                                phone: phone,
                                code: pClone.codigo_seguimiento,
                                clientName: pClone.cliente?.nombre_completo || 'Cliente'
                            };
                            this.showPaymentSuccessModal = true;
                        }

                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: '¡Pago Registrado!', message: 'El pago se registró y el mensaje fue copiado al portapapeles.', type: 'success' } }));
                        this.submitForm();
                    } else {
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: data.message || 'Error al procesar el pago', type: 'error' } }));
                    }
                } catch (e) {
                    console.error("Error en savePayment:", e);
                    window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: 'Ocurrió un error inesperado al guardar el pago.', type: 'error' } }));
                } finally {
                    this.saving = false;
                }
            },

            async fetchPlanilla() {
                const select = document.querySelector('select[x-model="domiciliario_id"]');
                this.domiciliarioNombre = select && select.value ? select.options[select.selectedIndex].text : 'Todos';
                
                this.showPlanillaModal = true;
                this.planillaLoading = true;
                const params = new URLSearchParams({
                    search: this.search,
                    metodo_pago: this.metodo_pago,
                    estado_pago: this.estado_pago,
                    fecha_desde: this.fecha_desde,
                    fecha_hasta: this.fecha_hasta,
                    domiciliario_id: this.domiciliario_id,
                    recaudo_domiciliario: this.recaudo_domiciliario ? 1 : 0,
                    per_page: this.per_page
                });
                try {
                    const response = await fetch(`${this.baseUrl}/cobros/planilla?${params}`, {
                        headers: { 
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                    this.planillaData = await response.json();
                } catch (e) {
                    console.error("Error fetching planilla:", e);
                } finally {
                    this.planillaLoading = false;
                }
            },

            printPlanilla() {
                const style = document.createElement('style');
                style.innerHTML = `@media print { .no-print { display: none !important; } }`;
                document.head.appendChild(style);
                window.print();
            },

            exportPlanillaCSV() {
                if (!this.planillaData.pedidos.length) {
                    window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Sin Datos', message: 'No hay pedidos para exportar en este filtro.', type: 'warning' } }));
                    return;
                }
                
                // BOM for Excel UTF-8 support
                let csv = '\uFEFF';
                csv += 'Cliente;Dirección;Zona;Domiciliario;Método Pago;Total Pagar;';
                this.planillaData.productos.forEach(p => {
                    csv += `${p.codigo};`;
                });
                csv += '\n';

                this.planillaData.pedidos.forEach(item => {
                    csv += `${item.cliente};${item.direccion};${item.zona};${item.domiciliario};${item.metodo_pago};${item.total_pagar};`;
                    this.planillaData.productos.forEach(p => {
                        csv += `${item.productos[p.id] || 0};`;
                    });
                    csv += '\n';
                });

                const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
                const link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download', `planilla_${this.fecha_desde}.csv`);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            },

            async verifyPayment(id) {
                const pedido = typeof id === 'object' ? id : this.pedidosList.find(p => p.id === id);
                if (!pedido) return;
                
                this.confirmTitle = '¿Verificar este pago?';
                this.confirmMessage = 'Confirma que has validado el ingreso del dinero en tu extracto bancario. Esta acción marcará el pago como conciliado.';
                
                this.confirmAction = async () => {
                    try {
                        const response = await fetch(`${this.baseUrl}/cobros/${pedido.id}/conciliar`, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                        });
                        const data = await response.json();
                        if (data.success) {
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Verificado', message: data.message, type: 'success' } }));
                            this.submitForm();
                        }
                    } catch (e) {
                        console.error(e);
                    }
                };

                this.showConfirmModal = true;
            },

            async unverifyPayment(id) {
                const pedido = typeof id === 'object' ? id : this.pedidosList.find(p => p.id === id);
                if (!pedido) return;
                
                this.confirmTitle = '¿Desmarcar Verificación?';
                this.confirmMessage = 'El pedido volverá al estado "Por Verificar / No Conciliado" sin alterar los montos pagados.';
                
                this.confirmAction = async () => {
                    try {
                        const response = await fetch(`${this.baseUrl}/cobros/${pedido.id}/desconciliar`, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                        });
                        const data = await response.json();
                        if (data.success) {
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Desmarcado', message: data.message, type: 'info' } }));
                            this.submitForm();
                        } else {
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: data.message, type: 'error' } }));
                        }
                    } catch (e) {
                        console.error(e);
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: 'No se pudo desmarcar el pago', type: 'error' } }));
                    }
                };

                this.showConfirmModal = true;
            },

            async toggleLlaveQuick(id) {
                const pedido = typeof id === 'object' ? id : this.pedidosList.find(p => p.id === id);
                if (!pedido) return;
                
                try {
                    const response = await fetch(`${this.baseUrl}/cobros/${pedido.id}/toggle-llave`, {
                        method: 'POST',
                        headers: { 
                            'Content-Type': 'application/json', 
                            'X-CSRF-TOKEN': '{{ csrf_token() }}' 
                        }
                    });
                    const data = await response.json();
                    if (data.success) {
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Tipo de Transferencia', message: data.message, type: 'success' } }));
                        this.submitForm();
                    } else {
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: data.message, type: 'error' } }));
                    }
                } catch (e) {
                    console.error(e);
                }
            },

            async revertPayment(id) {
                this.confirmTitle = '¿Anular este pago?';
                this.confirmMessage = 'El pedido volverá a estado PENDIENTE. Si hubo un excedente, se restará del saldo del cliente. Si se usó saldo a favor, se le devolverá automáticamente para que no se pierda.';
                
                this.confirmAction = async () => {
                    try {
                        const response = await fetch(`${this.baseUrl}/cobros/${id}/anular`, {
                            method: 'POST',
                            headers: { 
                                'Content-Type': 'application/json', 
                                'X-CSRF-TOKEN': '{{ csrf_token() }}' 
                            }
                        });
                        const data = await response.json();
                        if (data.success) {
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Anulado', message: data.message, type: 'success' } }));
                            this.submitForm();
                        } else {
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: data.message, type: 'error' } }));
                        }
                    } catch (e) {
                        console.error(e);
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: 'No se pudo anular el pago', type: 'error' } }));
                    }
                };

                this.showConfirmModal = true;
            },

            async togglePaymentMethod(id) {
                const pedido = typeof id === 'object' ? id : this.pedidosList.find(p => p.id === id);
                if (!pedido) return;
                
                try {
                    const response = await fetch(`${this.baseUrl}/pedidos/${pedido.id}/payment-method`, {
                        method: 'PATCH',
                        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                    });
                    const data = await response.json();
                    if (data.success) {
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Actualizado', message: data.message, type: 'success' } }));
                        this.submitForm();
                    }
                } catch (e) {
                    console.error(e);
                }
            },

            getMessageForPedido(pedido) {
                let message = '';
                const fechaEntrega = this.formatDateSpanish(pedido.fecha_entrega_programada || pedido.fecha_entrega);
                const valPagado = (pedido.monto_pagado && parseFloat(pedido.monto_pagado) > 0) 
                    ? pedido.monto_pagado 
                    : ((parseFloat(this.paymentAmount) > 0) ? parseFloat(this.paymentAmount) : (pedido.total_pagar || 0));
                
                const metodoPagoReal = pedido.metodo_pago || this.paymentMethod || 'efectivo';

                if (pedido.estado_pago === 'pagado') {
                    // Verificar si el cliente tiene otros pedidos pendientes de pago
                    const otherPending = (pedido.cliente.pedidos || []).filter(p => p.id !== pedido.id && p.estado_pago !== 'pagado');
                    const otherPendingTotal = otherPending.reduce((sum, p) => sum + (p.total_pagar - (p.monto_pagado || 0)), 0);
                    
                    let estadoCuentaTexto = '';
                    if (otherPending.length > 0) {
                        estadoCuentaTexto = "\n\n📌 *Estado de cuenta:* Te recordamos que aún tienes pendiente(s):\n";
                        otherPending.forEach(po => {
                            const fechaPo = this.formatDateShort(po.fecha_entrega_programada);
                            const debePo = po.total_pagar - (po.monto_pagado || 0);
                            estadoCuentaTexto += `• ${po.codigo_seguimiento} (${fechaPo}): ${this.formatCurrency(debePo)}\n`;
                        });
                        estadoCuentaTexto += `💰 *Saldo total pendiente:* *${this.formatCurrency(otherPendingTotal)}*`;
                    }

                    if (pedido.conciliado) {
                        // Pago Verificado
                        let template = this.waTemplates.pago_verificado || "¡Pago verificado! ✅ Hemos validado con el extracto el ingreso de *{total}* por tu pedido *#{orden}*.{estado_cuenta} ¡Muchas gracias por tu compra! 🤠🍓";
                        message = template.replace(/{orden}|{pedido}|{no_orden}/g, pedido.codigo_seguimiento)
                                         .replace(/{total}/g, this.formatCurrency(valPagado))
                                         .replace(/{fecha}/g, fechaEntrega)
                                         .replace(/{estado_cuenta}/g, estadoCuentaTexto);
                    } else if (metodoPagoReal === 'efectivo') {
                        // Pago Efectivo
                        let template = this.waTemplates.confirmacion_pago_efectivo || "Gracias por el pago en Efectivo de *{total}* del pedido *#{orden}* entregado el *{fecha}*.{estado_cuenta} 🤠🍓";
                        message = template.replace(/{orden}|{pedido}|{no_orden}/g, pedido.codigo_seguimiento)
                                         .replace(/{total}/g, this.formatCurrency(valPagado))
                                         .replace(/{fecha}/g, fechaEntrega)
                                         .replace(/{estado_cuenta}/g, estadoCuentaTexto);
                    } else {
                        // Pago Transferencia
                        let template = this.waTemplates.confirmacion_pago_transferencia || "Gracias por compartir el soporte de Transferencia de *{total}* del pedido *#{orden}*. Estamos en proceso de verificación con el extracto bancario.{estado_cuenta} ¡Muchas gracias! 🤠🍓";
                        message = template.replace(/{orden}|{pedido}|{no_orden}/g, pedido.codigo_seguimiento)
                                         .replace(/{total}/g, this.formatCurrency(valPagado))
                                         .replace(/{fecha}/g, fechaEntrega)
                                         .replace(/{estado_cuenta}/g, estadoCuentaTexto);
                    }

                    // Si la plantilla personalizada no tiene {estado_cuenta} explícito pero hay pedidos pendientes, anexarlo cordialmente
                    if (estadoCuentaTexto && !message.includes(estadoCuentaTexto) && !message.includes('📌 *Estado de cuenta:*')) {
                        message += estadoCuentaTexto;
                    }
                } else {
                    // Recordatorio de Saldo
                    const totalDebePedido = pedido.total_pagar - (pedido.monto_pagado || 0);
                    let finalToPay = totalDebePedido;
                    let balanceNote = '';
                    
                    const pendingOrders = (pedido.cliente.pedidos || []).filter(p => p.id !== pedido.id);
                    const totalPending = pendingOrders.reduce((sum, p) => sum + (p.total_pagar - (p.monto_pagado || 0)), 0);

                    if (pendingOrders.length > 0) {
                        finalToPay += totalPending;
                        balanceNote = "\n\n*Este cobro incluye el saldo de los pedidos anteriores no cancelados:*\n";
                        pendingOrders.forEach(po => {
                            const fechaPo = this.formatDateShort(po.fecha_entrega_programada);
                            const debePo = po.total_pagar - (po.monto_pagado || 0);
                            balanceNote += `• ${po.codigo_seguimiento} (${fechaPo}): ${this.formatCurrency(debePo)}\n`;
                        });
                    }

                    let template = this.waTemplates.cobro_saldo || "Sr(a). {cliente}, buenos días.\n\nLe recordamos realizar la transferencia por *{total}*{balance_note} del pedido [{orden}] entregado el {fecha} y enviarnos el soporte.\n\n*Gracias*";
                    
                    message = template.replace(/{cliente}/g, pedido.cliente.nombre_completo)
                                     .replace(/{total}/g, this.formatCurrency(finalToPay))
                                     .replace(/{orden}|{pedido}|{no_orden}/g, pedido.codigo_seguimiento)
                                     .replace(/{fecha}/g, fechaEntrega)
                                     .replace(/{balance_note}/g, balanceNote)
                                     .replace(/{datos_banco}/g, 'nuestras cuentas autorizadas');
                }

                let urlActualizacion = pedido.cliente?.url_actualizacion_datos || '';
                if (!urlActualizacion && (!pedido.cliente?.datos_verificados || !pedido.cliente?.numero_documento)) {
                    if (pedido.cliente?.token_actualizacion) {
                        urlActualizacion = `${window.location.origin}/actualizar-datos/${pedido.cliente.token_actualizacion}`;
                    }
                }
                const actualizacionTexto = urlActualizacion
                    ? `\n\n📝 *Estamos haciendo ajustes en contabilidad. Agradecemos nos colabores confirmando tus datos aquí:* ${urlActualizacion}`
                    : '';

                // Solo se incluye si el usuario puso explícitamente {url_actualizacion} en la plantilla de cobro
                if (message.includes('{url_actualizacion}')) {
                    message = message.replace(/{url_actualizacion}/g, actualizacionTexto);
                }

                return message;
            },

            async registerNotificationTracking(pedidoId) {
                try {
                    const response = await fetch(`${this.baseUrl}/pedidos/${pedidoId}/register-reminder`, {
                        method: 'POST',
                        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                    });
                    const data = await response.json();
                    if (data.success) {
                        // Actualizar datos locales sin refrescar toda la tabla
                        const pedido = this.pedidosList.find(p => p.id === pedidoId);
                        if (pedido) {
                            pedido.conteo_recordatorios = data.conteo;
                            pedido.ultimo_recordatorio_humano = data.ultimo;
                        }
                    }
                } catch (e) { console.error("Error tracking notification", e); }
            },

            sendReminder(id) {
                const pedido = typeof id === 'object' ? id : this.pedidosList.find(p => p.id === id);
                if (!pedido) return;
                const message = this.getMessageForPedido(pedido);
                const phone = (pedido.cliente.telefono || '').replace(/\D/g, '');
                window.open(`https://api.whatsapp.com/send?phone=57${phone}&text=${encodeURIComponent(message)}`, '_blank');
                this.markAsClicked(pedido.id, 'wa');
                this.registerNotificationTracking(pedido.id);
            },

            copyReminder(id) {
                const pedido = typeof id === 'object' ? id : this.pedidosList.find(p => p.id === id);
                if (!pedido) return;
                const message = this.getMessageForPedido(pedido);
                
                if (navigator.clipboard && navigator.clipboard.writeText) {
                    navigator.clipboard.writeText(message).then(() => {
                        window.dispatchEvent(new CustomEvent('notify', { 
                            detail: { title: 'Copiado con Éxito', message: 'El mensaje de WhatsApp ya está en tu portapapeles listo para pegar.', type: 'success' } 
                        }));
                    });
                } else {
                    const textArea = document.createElement("textarea");
                    textArea.value = message;
                    document.body.appendChild(textArea);
                    textArea.select();
                    document.execCommand("copy");
                    document.body.removeChild(textArea);
                    window.dispatchEvent(new CustomEvent('notify', { 
                        detail: { title: 'Copiado', message: 'Mensaje copiado al portapapeles.', type: 'success' } 
                    }));
                }
                this.markAsClicked(pedido.id, 'copy');
                this.registerNotificationTracking(pedido.id);
            },

            formatDateShort(dateString) {
                if (!dateString) return 'n/a';
                // Solo tomar la parte de la fecha YYYY-MM-DD
                const cleanDate = dateString.split('T')[0];
                const date = new Date(cleanDate + 'T12:00:00');
                return new Intl.DateTimeFormat('es-ES', { 
                    day: '2-digit', 
                    month: 'short'
                }).format(date);
            },

            formatDateSpanish(dateString) {
                if (!dateString) return 'n/a';
                // Solo tomar la parte de la fecha YYYY-MM-DD
                const cleanDate = dateString.split('T')[0];
                const date = new Date(cleanDate + 'T12:00:00');
                return new Intl.DateTimeFormat('es-ES', { 
                    weekday: 'long', 
                    day: '2-digit', 
                    month: 'long', 
                    year: 'numeric' 
                }).format(date);
            },
        };
    }
</script>
@endpush

@push('styles')
<style>
    [x-cloak] { display: none !important; }
    @media print {
        @page { size: letter landscape; margin: 0.5cm; }
        .no-print { display: none !important; }
        .print-only { display: block !important; }
        body { background: white !important; font-size: 7pt !important; color: black !important; }
        .print-area { width: 100% !important; padding: 0 !important; margin: 0 !important; }
        table { width: 100%; border-collapse: collapse; table-layout: auto; }
        th, td { border: 1px solid #000 !important; padding: 1px 2px !important; text-align: center; line-height: 1.1; }
        .vertical-text { height: 70px; 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; }
    }
    .vertical-text span { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; max-height: 80px; }
</style>
@endpush