@extends('layouts.app')

@section('title', 'Mi Ruta')

@section('content')
<div x-data="domiciliarioApp()" x-init="init()" class="w-full max-w-xl md:max-w-2xl lg:max-w-4xl mx-auto pb-24 px-4">
    
    @if(isset($isAdminView) && $isAdminView)
        <div class="bg-yellow-500 text-white p-3 text-center text-[10px] font-black uppercase tracking-[0.2em] sticky top-0 z-[100] shadow-xl -mx-4 mb-4">
            Modo Administrador - Solo Lectura
        </div>
    @endif

    <!-- Selector de Pestañas Superior -->
    <div class="grid grid-cols-2 gap-2 p-1.5 bg-slate-100 dark:bg-slate-800 rounded-3xl mb-6 shadow-sm border border-slate-200/50 dark:border-slate-700/50">
        <button @click="activeTab = 'ruta'" 
                :class="activeTab === 'ruta' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-700/50'"
                class="py-3 px-4 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all">
            Ruta Activa
        </button>
        <button @click="activeTab = 'historial'" 
                :class="activeTab === 'historial' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-700/50'"
                class="py-3 px-4 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all">
            Historial de Entregas
        </button>
    </div>

    <!-- Pestaña 1: Ruta Activa -->
    <div x-show="activeTab === 'ruta'">
        @if(!$ruta)
        <div class="flex flex-col items-center justify-center h-64 text-center p-6 bg-white rounded-[3rem] shadow-sm mt-8">
            <div class="bg-slate-100 p-6 rounded-full mb-6">
                <svg class="w-12 h-12 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>
            <h3 class="text-2xl font-black text-slate-800 tracking-tight">Sin ruta asignada</h3>
            <p class="text-slate-500 mt-2 font-medium">No tienes entregas programadas para hoy.</p>
            <form action="{{ route('logout') }}" method="POST" class="mt-8">
                @csrf
                <button type="submit" class="px-8 py-4 bg-rose-50 text-rose-600 rounded-[1.5rem] text-[10px] font-black uppercase tracking-widest border border-rose-100 hover:bg-rose-600 hover:text-white transition-all flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
                    Cerrar Sesión
                </button>
            </form>
        </div>
    @else
        <!-- Header Ruta -->
        <div class="bg-indigo-600 text-white p-8 -mx-4 -mt-8 mb-8 rounded-b-[4rem] shadow-2xl relative overflow-hidden">
            <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32 blur-3xl"></div>
            <div class="relative z-10">
                <div class="flex justify-between items-start mb-4">
                    <div class="flex items-center gap-2">
                        <div class="h-2 w-2 rounded-full bg-emerald-400 animate-pulse"></div>
                        <p class="text-[10px] text-indigo-100 uppercase tracking-[0.4em] font-black">Plan de Operación</p>
                    </div>
                    @if($ruta->numero_salida > 0)
                        <span class="px-3 py-1.5 bg-white/20 rounded-xl text-[9px] font-black uppercase tracking-widest border border-white/10 backdrop-blur-sm">
                            Salida #{{ $ruta->numero_salida }}
                        </span>
                    @endif
                </div>
                <h1 class="text-3xl font-black tracking-tight leading-tight mb-8">{{ $ruta->nombre_ruta ?? 'Ruta del Día' }}</h1>
                
                <div class="grid grid-cols-3 gap-1 bg-white/10 p-1 rounded-2xl backdrop-blur-md border border-white/10">
                    <div class="text-center py-4 bg-white/5 rounded-xl">
                        <p class="text-[8px] text-indigo-200 uppercase font-black tracking-widest mb-1">Pedidos</p>
                        <p class="text-xl font-black">{{ $ruta->pedidos->where('pivot.estado_entrega', 'pendiente')->count() }}</p>
                    </div>
                    <div class="text-center py-4">
                        <p class="text-[8px] text-indigo-200 uppercase font-black tracking-widest mb-1">Cajas</p>
                        <p class="text-xl font-black">{{ $ruta->pedidos->sum(function($p) { return $p->detalles->sum('cantidad'); }) }}</p>
                    </div>
                    <div class="text-center py-4 bg-white/5 rounded-xl">
                        <p class="text-[8px] text-indigo-200 uppercase font-black tracking-widest mb-1">Estado</p>
                        <p class="text-xs font-black uppercase tracking-tighter">{{ $ruta->estado }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- SECCIÓN: RESUMEN DE CARGA Y EMPAQUE (MODULAR) -->
        <div class="mb-10 space-y-4">
            <div class="flex items-center justify-between px-2">
                <div class="flex items-center gap-2">
                    <svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                    <h3 class="text-[10px] font-black text-slate-400 uppercase tracking-[0.25em]">Carga y Empaque de Mercancía</h3>
                </div>
                <div class="h-px flex-1 bg-slate-100 ml-4"></div>
            </div>
            
            <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-xl p-6 space-y-6">
                @php
                    $totales = [];
                    foreach($ruta->pedidos as $p) {
                        foreach($p->detalles as $det) {
                            $nombre = $det->producto->nombre ?? 'Producto';
                            $totales[$nombre] = ($totales[$nombre] ?? 0) + $det->cantidad;
                        }
                    }
                @endphp

                @if($ruta->estado === 'aprobada' || $ruta->estado === 'planificacion')
                    <!-- FASE 1: PENDIENTE DE EMPAQUE -->
                    <div class="p-6 bg-indigo-50/50 rounded-2xl border border-indigo-100 space-y-4">
                        <div class="flex items-center gap-3 text-indigo-900">
                            <svg class="w-6 h-6 text-indigo-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
                            <h4 class="text-sm font-black uppercase tracking-tight">Fase 1: Pendiente de Empaque</h4>
                        </div>
                        <p class="text-xs text-slate-600 font-medium leading-relaxed">
                            A continuación se muestra el listado preliminar de mercancía requerida para esta ruta. Para iniciar el proceso de verificación caja por caja y activar el checklist de carga, presiona el botón inferior.
                        </p>
                    </div>

                    <div class="grid grid-cols-1 gap-2 bg-slate-50 p-4 rounded-2xl border border-slate-100/80">
                        <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest px-2 mb-1">Mercancía a reunir:</p>
                        @foreach($totales as $producto => $cantidad)
                            <div class="flex items-center justify-between p-3 bg-white rounded-xl shadow-xs border border-slate-100">
                                <span class="text-xs font-bold text-slate-700 uppercase">{{ $producto }}</span>
                                <span class="text-xs font-black text-indigo-600 bg-indigo-50 px-2.5 py-1 rounded-lg">{{ $cantidad }}</span>
                            </div>
                        @endforeach
                    </div>

                    <div class="space-y-3 pt-2">
                        <button @click="iniciarEmpaque()" 
                                class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-black py-5 rounded-[2rem] shadow-xl shadow-indigo-200 uppercase tracking-[0.2em] text-[11px] flex items-center justify-center gap-3 transition-all active:scale-95">
                            <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="M5 13l4 4L19 7"></path></svg>
                            Iniciar Empaque de Mercancía
                        </button>
                    </div>

                @else
                    <!-- FASE 2: EN EMPAQUE / EN RUTA -->
                    <div class="p-4 bg-emerald-50/50 rounded-2xl border border-emerald-100 flex items-center justify-between gap-4">
                        <div class="flex items-center gap-3 text-emerald-900">
                            <svg class="w-6 h-6 text-emerald-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path></svg>
                            <h4 class="text-xs font-black uppercase tracking-wider">Checklist de Carga Activo</h4>
                        </div>
                        <span class="text-[10px] font-black uppercase px-2.5 py-1 bg-emerald-500 text-white rounded-xl shadow-sm">
                            {{ $ruta->estado === 'en_ruta' ? 'En Ruta' : 'En Empaque' }}
                        </span>
                    </div>

                    <div class="grid grid-cols-1 gap-3">
                        @foreach($totales as $producto => $cantidad)
                            <div @click="toggleCheck('{{ $producto }}')" 
                                 class="flex items-center justify-between p-4 rounded-2xl border-2 transition-all cursor-pointer select-none"
                                 :class="checklist['{{ $producto }}'] ? 'bg-emerald-50 border-emerald-500/30 shadow-inner scale-[0.98]' : 'bg-slate-50 border-slate-100/50 shadow-sm'">
                                <div class="flex items-center gap-3">
                                    <div class="w-7 h-7 rounded-full border-2 flex items-center justify-center transition-all"
                                         :class="checklist['{{ $producto }}'] ? 'bg-emerald-500 border-emerald-500 text-white' : 'border-slate-300 bg-white'">
                                        <svg x-show="checklist['{{ $producto }}']" class="w-4 h-4" 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>
                                    <span class="text-[11px] font-black uppercase transition-all leading-tight"
                                          :class="checklist['{{ $producto }}'] ? 'text-emerald-800 line-through opacity-60' : 'text-slate-700'">{{ $producto }}</span>
                                </div>
                                <span class="text-sm font-black transition-all"
                                      :class="checklist['{{ $producto }}'] ? 'text-emerald-600' : 'text-indigo-600'">{{ $cantidad }}</span>
                            </div>
                        @endforeach
                    </div>

                    <!-- Botón Acción Salida (Solo si checklist completo y no está en ruta) -->
                    @if($ruta->estado !== 'en_ruta')
                        <div x-show="isChecklistComplete" x-transition class="pt-4">
                            <button @click="iniciarRuta()" 
                                    class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-black py-5 rounded-[2rem] shadow-xl shadow-emerald-200 uppercase tracking-[0.2em] text-[11px] flex items-center justify-center gap-3 animate-bounce transition-all active:scale-95">
                                <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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                                Iniciar Despacho (Salida a Ruta)
                            </button>
                        </div>
                    @endif

                    <!-- Botón Secundario: Devolver a Asignación / Cancelar Empaque o Salida -->
                    <div class="pt-2 border-t border-slate-100">
                        <button @click="devolverAsignacion()" 
                                class="w-full bg-amber-50 hover:bg-amber-100 text-amber-700 border border-amber-200 font-black py-4 rounded-[1.5rem] shadow-sm uppercase tracking-widest text-[9px] flex items-center justify-center gap-2 transition-all active:scale-95">
                            <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="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                            {{ $ruta->estado === 'en_ruta' ? 'Devolver a Asignación (Cancelar Salida)' : 'Devolver a Asignación (Cancelar Empaque)' }}
                        </button>
                    </div>
                @endif
            </div>
        </div>

        <!-- SECCIÓN: ITINERARIO (MODULAR) -->
        <div class="space-y-6">
            <div class="flex items-center justify-between px-2">
                <div class="flex items-center gap-2">
                    <svg class="w-4 h-4 text-brand-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A2 2 0 013 15.485V5.414a2 2 0 012.894-1.789L10 6l5.447-2.724A2 2 0 0118 5.065v10.07a2 2 0 01-1.106 1.789L11 20l-2-1z"></path></svg>
                    <h3 class="text-[10px] font-black text-slate-400 uppercase tracking-[0.25em]">Itinerario de Entregas</h3>
                </div>
                <div class="h-px flex-1 bg-slate-100 ml-4"></div>
            </div>

            @php
                $pedidosOrdenados = $ruta->pedidos->sort(function($a, $b) {
                    $hasTimeA = !empty($a->hora_preferente_entrega) || stripos($a->observacion_entrega ?? '', 'antes de') !== false;
                    $hasTimeB = !empty($b->hora_preferente_entrega) || stripos($b->observacion_entrega ?? '', 'antes de') !== false;
                    if ($hasTimeA && !$hasTimeB) return -1;
                    if (!$hasTimeA && $hasTimeB) return 1;
                    return $a->pivot->orden_entrega <=> $b->pivot->orden_entrega;
                });
            @endphp

            @foreach($pedidosOrdenados as $pedido)
                @php
                    $isPending = $pedido->pivot->estado_entrega === 'pendiente';
                    $isUrgent = !empty($pedido->hora_preferente_entrega) || stripos($pedido->observacion_entrega ?? '', 'antes de') !== false;
                @endphp

                <div x-data="{ expanded: false }" 
                     class="bg-white rounded-[2.5rem] border border-slate-100 shadow-lg overflow-hidden transition-all relative"
                     :class="expanded ? 'ring-2 ring-indigo-500 scale-[1.02] z-20 shadow-2xl' : 'z-10'">
                    
                    @if($isUrgent && $isPending)
                        <div class="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-brand-orange to-amber-400"></div>
                    @endif

                    <div @click="expanded = !expanded" 
                         class="p-6 flex items-center gap-4 cursor-pointer active:bg-slate-50 transition-colors"
                         :class="'{{ $isUrgent && $isPending }}' ? 'bg-amber-50/30' : ''">
                        
                        <div class="w-12 h-12 rounded-[1.25rem] bg-slate-100 flex flex-col items-center justify-center shrink-0 border border-slate-200/50"
                             :class="!expanded && !{{ $isPending ? 'true' : 'false' }} ? 'bg-emerald-50 border-emerald-100 text-emerald-600' : 'text-slate-500'">
                            <span class="text-[7px] font-black uppercase mb-1 opacity-60">Parada</span>
                            <span class="text-base font-black">#{{ $pedido->pivot->orden_entrega }}</span>
                        </div>

                        <div class="min-w-0 flex-1">
                            <div class="flex items-center gap-2 mb-1">
                                <div class="flex flex-col w-full">
                                    @if($isUrgent && $isPending)
                                        <div class="mb-2 px-3 py-1.5 bg-rose-50 dark:bg-rose-950/20 border border-rose-100 dark:border-rose-900/30 text-rose-700 dark:text-rose-300 rounded-xl inline-flex items-center gap-2 w-fit shadow-xs">
                                            <span class="relative flex h-2 w-2">
                                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
                                                <span class="relative inline-flex rounded-full h-2 w-2 bg-rose-500"></span>
                                            </span>
                                            <span class="text-[9px] font-black uppercase tracking-wider flex items-center gap-1">
                                                ⏰ Entrega Urgente: 
                                                <span class="font-extrabold underline decoration-rose-300 decoration-2 underline-offset-2">
                                                    @if(!empty($pedido->hora_preferente_entrega))
                                                        {{ \Carbon\Carbon::parse($pedido->hora_preferente_entrega)->format('g:i A') }}
                                                    @else
                                                        @php
                                                            $obs = $pedido->observacion_entrega ?? '';
                                                            $extract = strlen($obs) > 30 ? substr($obs, 0, 30) . '...' : $obs;
                                                        @endphp
                                                        {{ !empty($extract) ? $extract : 'Hora pactada' }}
                                                    @endif
                                                </span>
                                            </span>
                                        </div>
                                    @endif

                                    <h3 class="text-sm font-black text-slate-950 dark:text-slate-50 uppercase truncate">{{ $pedido->cliente->nombre_completo }}</h3>
                                </div>
                                @if($isUrgent && $isPending)
                                    <div class="flex h-2 w-2 relative shrink-0"><span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span><span class="relative inline-flex rounded-full h-2 w-2 bg-rose-500"></span></div>
                                @endif
                            </div>
                            <p class="text-[11px] text-slate-900 dark:text-slate-100 font-extrabold uppercase leading-normal">{{ $pedido->direccion->direccion }}{{ $pedido->direccion->detalles ? ' (' . $pedido->direccion->detalles . ')' : '' }}</p>
                            @if($pedido->direccion->barrio)
                                <p class="text-[10px] text-slate-600 dark:text-slate-300 font-bold uppercase mt-0.5">Barrio: {{ $pedido->direccion->barrio }} • Zona: {{ $pedido->direccion->zona->nombre_zona ?? '' }}</p>
                            @endif

                            <!-- Observaciones de la entrega sin truncar -->
                            @if(!empty($pedido->observacion_entrega))
                                <div class="mt-2 p-3 bg-amber-50 dark:bg-amber-950/20 border border-amber-100 dark:border-amber-900/50 rounded-2xl text-[10px] text-slate-900 dark:text-slate-100 font-bold leading-relaxed">
                                    <span class="font-black uppercase text-[8px] block mb-0.5 text-amber-850 dark:text-amber-400">📝 Indicaciones de Entrega:</span>
                                    {{ $pedido->observacion_entrega }}
                                </div>
                            @endif

                            <!-- Datos de regalo/destinatario final completo -->
                            @php
                                $esRegalo = $pedido->es_regalo;
                                $destNombre = $pedido->destinatario_final_nombre;
                                $destPhone = $pedido->destinatario_final_telefono;
                                $msgRegalo = $pedido->mensaje_regalo;
                                $reqBolsa = $pedido->requiere_bolsa_regalo;
                                $souvenirsList = [];
                                if (!empty($pedido->souvenirs) && is_array($pedido->souvenirs)) {
                                    $souvenirsList = \App\Models\Souvenir::whereIn('id', $pedido->souvenirs)->pluck('nombre')->toArray();
                                }
                            @endphp

                            @if($esRegalo || !empty($destNombre))
                                <div class="mt-2 p-3 bg-rose-50/50 dark:bg-rose-950/10 border border-rose-100/50 dark:border-rose-900/20 rounded-2xl text-[10px] text-rose-800 dark:text-rose-300 leading-normal">
                                    @if($esRegalo)
                                        <span class="font-black uppercase text-[8px] block mb-1 text-rose-600 dark:text-rose-400">🎁 DETALLES DE REGALO:</span>
                                        <p class="font-bold">Para: {{ $destNombre ?: 'Alguien especial' }} @if($destPhone) ({{ $destPhone }}) @endif</p>
                                        @if($reqBolsa)
                                            <p class="text-[9px] font-black uppercase text-indigo-600 mt-0.5">🛍️ Empaque: Bolsa de regalo</p>
                                        @endif
                                        @if(count($souvenirsList) > 0)
                                            <p class="text-[9px] font-bold text-amber-600 mt-0.5">✨ Adicionales: {{ implode(', ', $souvenirsList) }}</p>
                                        @endif
                                        @if(!empty($msgRegalo))
                                            <div class="mt-1.5 p-2 bg-white dark:bg-slate-800 rounded-xl border border-rose-100 text-[9px] italic text-slate-600 dark:text-slate-400 font-medium">
                                                💌 "{{ $msgRegalo }}"
                                            </div>
                                        @endif
                                    @else
                                        <span class="font-black uppercase text-[8px] block mb-1 text-slate-600 dark:text-slate-400">👤 ENTREGAR A OTRA PERSONA:</span>
                                        <p class="font-bold">{{ $destNombre }} @if($destPhone) ({{ $destPhone }}) @endif</p>
                                    @endif
                                </div>
                            @endif
                        </div>

                        <div class="shrink-0">
                            <div class="w-8 h-8 rounded-full flex items-center justify-center transition-all" :class="expanded ? 'bg-indigo-100 text-indigo-600' : 'bg-slate-50 text-slate-300'">
                                <svg class="w-5 h-5 transition-transform" :class="expanded ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"></path></svg>
                            </div>
                        </div>
                    </div>

                    <div x-show="expanded" x-collapse class="border-t border-slate-50 bg-slate-50/50 p-8 space-y-6">
                        <!-- Detalles del Pedido y Acciones -->
                        <div class="bg-white rounded-3xl border border-slate-100 p-6 space-y-4 shadow-sm">
                            @foreach($pedido->detalles as $det)
                                <div class="flex justify-between items-center gap-4 py-1">
                                    <span class="text-xs font-extrabold text-slate-900 dark:text-slate-100 uppercase">{{ $det->producto->nombre ?? 'Producto' }}</span>
                                    <span class="text-base font-black text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-950/40 px-3 py-1.5 rounded-xl border border-indigo-100 dark:border-indigo-900/30">x{{ $det->cantidad }}</span>
                                </div>
                            @endforeach
                            <div class="pt-4 border-t border-slate-50 flex justify-between items-center">
                                <p class="text-2xl font-black text-slate-800 tracking-tighter">${{ number_format($pedido->total_pagar, 0) }}</p>
                                <div class="flex items-center gap-3">
                                    <button @click="toggleMetodoPago({{ $pedido->id }}, '{{ $pedido->metodo_pago }}')" 
                                            class="px-4 py-2 rounded-xl text-[10px] font-black uppercase transition-all shadow-sm flex items-center gap-2"
                                            :class="'{{ $pedido->metodo_pago }}' === 'efectivo' ? 'bg-emerald-100 text-emerald-700 border border-emerald-200' : 'bg-indigo-100 text-indigo-700 border border-indigo-200'">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
                                        {{ $pedido->metodo_pago === 'transferencia' ? 'TRANSF.' : 'EFECTIVO' }}
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Detalles de Entrega en el bloque expandido del domiciliario -->
                        @if(!empty($pedido->observacion_entrega) || $pedido->es_regalo || !empty($pedido->destinatario_final_nombre))
                            <div class="bg-white rounded-3xl border border-slate-100 p-6 space-y-3 shadow-sm">
                                <h4 class="text-[9px] font-black uppercase text-slate-400 tracking-wider">Detalles de Entrega</h4>
                                @if(!empty($pedido->observacion_entrega))
                                    <div>
                                        <span class="text-[8px] font-black uppercase text-slate-400 block">Indicaciones:</span>
                                        <p class="text-[11px] font-bold text-slate-700">{{ $pedido->observacion_entrega }}</p>
                                    </div>
                                @endif
                                @if($pedido->es_regalo)
                                    <div>
                                        <span class="text-[8px] font-black uppercase text-rose-500 block">🎁 Regalo para:</span>
                                        <p class="text-[11px] font-bold text-rose-700">
                                            {{ $pedido->destinatario_final_nombre ?: $pedido->cliente->nombre_completo }}
                                            @if($pedido->destinatario_final_telefono) ({{ $pedido->destinatario_final_telefono }}) @endif
                                        </p>
                                        @if($pedido->requiere_bolsa_regalo)
                                            <p class="text-[9px] font-black uppercase text-indigo-600 mt-1">🛍️ Requiere bolsa de regalo</p>
                                        @endif
                                        @if(count($souvenirsList) > 0)
                                            <p class="text-[9px] font-black uppercase text-amber-600 mt-0.5">✨ Souvenirs: {{ implode(', ', $souvenirsList) }}</p>
                                        @endif
                                        @if(!empty($pedido->mensaje_regalo))
                                            <div class="mt-1 p-3 bg-rose-50 dark:bg-rose-950/20 rounded-xl border border-rose-100 text-[10px] italic text-rose-800 dark:text-rose-300 font-semibold">
                                                💌 "{{ $pedido->mensaje_regalo }}"
                                            </div>
                                        @endif
                                    </div>
                                @elseif(!empty($pedido->destinatario_final_nombre))
                                    <div>
                                        <span class="text-[8px] font-black uppercase text-indigo-500 block">👤 Entregar a:</span>
                                        <p class="text-[11px] font-bold text-indigo-700">
                                            {{ $pedido->destinatario_final_nombre }}
                                            @if($pedido->destinatario_final_telefono) ({{ $pedido->destinatario_final_telefono }}) @endif
                                        </p>
                                    </div>
                                @endif
                            </div>
                        @endif

                        @if($isPending)
                            @include('rutas.partials.mobile-delivery-actions', ['pedido' => $pedido])
                        @else
                            @if($pedido->estado === 'atencion_requerida')
                                <div class="p-6 bg-amber-50 rounded-[2rem] border-2 border-amber-100/50 flex items-center gap-4">
                                    <div class="w-12 h-12 rounded-full bg-amber-500 text-white flex items-center justify-center shadow-lg shrink-0"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
                                    <div class="min-w-0 flex-1">
                                        <p class="text-[11px] font-black text-amber-800 uppercase tracking-widest">Devuelto a Revisión</p>
                                        <p class="text-[9px] text-amber-900 dark:text-amber-300 font-bold mt-0.5 truncate">{{ $pedido->observacion_entrega }}</p>
                                    </div>
                                </div>
                            @elseif($pedido->estado === 'cancelado')
                                <div class="p-6 bg-rose-50 rounded-[2rem] border-2 border-rose-100/50 flex items-center gap-4">
                                    <div class="w-12 h-12 rounded-full bg-rose-500 text-white flex items-center justify-center shadow-lg shrink-0"><svg class="w-6 h-6" 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></div>
                                    <div class="min-w-0 flex-1">
                                        <p class="text-[11px] font-black text-rose-800 uppercase tracking-widest">Pedido Cancelado</p>
                                        <p class="text-[9px] text-rose-950 dark:text-rose-300 font-bold mt-0.5 truncate">{{ $pedido->observacion_entrega }}</p>
                                    </div>
                                </div>
                            @else
                                <div class="p-6 bg-emerald-50 rounded-[2rem] border-2 border-emerald-100/50 flex items-center gap-4">
                                    <div class="w-12 h-12 rounded-full bg-emerald-500 text-white flex items-center justify-center shadow-lg shrink-0"><svg class="w-6 h-6" 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>
                                    <div><p class="text-[11px] font-black text-emerald-800 uppercase tracking-widest">Entrega Realizada</p></div>
                                </div>
                            @endif
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    @endif
    </div>

    <!-- Pestaña 2: Historial de Entregas -->
    <div x-show="activeTab === 'historial'" x-cloak class="space-y-6">
        <!-- Selector de Fecha -->
        <div class="bg-white dark:bg-slate-900 rounded-[2.5rem] border border-slate-100 dark:border-slate-800 shadow-xl p-6 space-y-4">
            <span class="text-[9px] font-black text-indigo-500 dark:text-indigo-400 uppercase tracking-[0.25em] block">Filtrar Entregas por Fecha</span>
            <div class="relative">
                <input type="date" x-model="historyDate" @change="fetchHistory()" 
                       class="w-full bg-slate-50 dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-700 rounded-2xl p-4 text-sm font-black text-slate-800 dark:text-slate-100 focus:ring-indigo-500 focus:border-indigo-500">
            </div>
        </div>

        <!-- Indicador de Carga -->
        <div x-show="loadingHistory" class="flex flex-col items-center justify-center py-12">
            <svg class="animate-spin h-10 w-10 text-indigo-600 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Cargando Historial...</span>
        </div>

        <!-- Lista de Rutas y Pedidos -->
        <div x-show="!loadingHistory" class="space-y-6">
            <!-- Sin Datos -->
            <template x-if="historyData.length === 0">
                <div class="flex flex-col items-center justify-center py-16 text-center bg-white dark:bg-slate-900 rounded-[2.5rem] border border-slate-100 dark:border-slate-800 shadow-sm">
                    <div class="bg-slate-100 dark:bg-slate-800 p-6 rounded-full mb-6">
                        <svg class="w-10 h-10 text-slate-400" 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>
                    </div>
                    <h4 class="text-lg font-black text-slate-800 dark:text-slate-100">No hay entregas registradas</h4>
                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-semibold">No se encontraron planillas o rutas de entrega para esta fecha.</p>
                </div>
            </template>

            <!-- Con Datos -->
            <template x-for="rutaItem in historyData" :key="rutaItem.id">
                <div class="space-y-4">
                    <!-- Cabecera de la Ruta del Historial -->
                    <div class="bg-indigo-50 dark:bg-indigo-950/20 border border-indigo-100/30 dark:border-indigo-900/30 p-5 rounded-[2rem] flex justify-between items-center">
                        <div>
                            <span class="text-[8px] font-black text-indigo-500 dark:text-indigo-400 uppercase tracking-[0.2em] block mb-1">Ruta Asignada</span>
                            <h4 class="text-sm font-black text-indigo-900 dark:text-indigo-200 uppercase leading-none" x-text="rutaItem.nombre_ruta"></h4>
                        </div>
                        <span class="px-3 py-1 bg-white dark:bg-slate-800 border border-indigo-100/50 dark:border-indigo-900/50 rounded-xl text-[9px] font-black text-indigo-600 dark:text-indigo-400 uppercase tracking-widest shadow-xs" x-text="rutaItem.estado"></span>
                    </div>

                    <!-- Listado de Pedidos de esta Ruta -->
                    <div class="space-y-3">
                        <template x-for="pedidoItem in rutaItem.pedidos" :key="pedidoItem.id">
                            <div @click="openHistoryOrder(pedidoItem)"
                                 class="bg-white dark:bg-slate-900 rounded-[2.5rem] border border-slate-100 dark:border-slate-800 shadow-md p-6 flex items-center gap-4 cursor-pointer hover:shadow-lg hover:border-slate-200 dark:hover:border-slate-700 active:scale-[0.99] transition-all relative">
                                
                                <!-- Status bar color -->
                                <div class="absolute left-0 top-6 bottom-6 w-1 rounded-r-lg" 
                                     :class="pedidoItem.estado_entrega === 'entregado' ? 'bg-emerald-500' : (pedidoItem.estado_entrega === 'fallido' ? 'bg-rose-500' : 'bg-slate-400')"></div>

                                <!-- Thumb o Icono de Evidencia -->
                                <div class="w-12 h-12 rounded-[1.25rem] bg-slate-100 dark:bg-slate-800 flex items-center justify-center shrink-0 border border-slate-200/50 dark:border-slate-700/50 overflow-hidden">
                                    <template x-if="pedidoItem.evidencia_foto_url">
                                        <img :src="pedidoItem.evidencia_foto_url" class="w-full h-full object-cover">
                                    </template>
                                    <template x-if="!pedidoItem.evidencia_foto_url">
                                        <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path></svg>
                                    </template>
                                </div>

                                <div class="min-w-0 flex-1">
                                    <div class="flex items-center justify-between gap-2 mb-1">
                                        <h3 class="text-xs font-black text-slate-800 dark:text-slate-200 uppercase truncate" x-text="pedidoItem.cliente_nombre"></h3>
                                        <span class="text-[9px] font-black uppercase px-2 py-0.5 rounded-md" 
                                              :class="pedidoItem.estado_entrega === 'entregado' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/20 dark:text-emerald-400' : (pedidoItem.estado_entrega === 'fallido' ? 'bg-rose-50 text-rose-700 dark:bg-rose-950/20 dark:text-rose-400' : 'bg-slate-50 text-slate-600 dark:bg-slate-800 dark:text-slate-400')"
                                              x-text="pedidoItem.estado_entrega === 'entregado' ? 'ENTREGADO' : (pedidoItem.estado_entrega === 'fallido' ? 'FALLIDO/NOVEDAD' : 'PENDIENTE')"></span>
                                    </div>
                                    <p class="text-[10px] text-slate-900 dark:text-slate-100 font-extrabold uppercase leading-normal" x-text="pedidoItem.direccion"></p>
                                    <p class="text-[9px] text-slate-600 dark:text-slate-300 font-bold uppercase mt-0.5">
                                        Barrio: <span x-text="pedidoItem.barrio"></span> • Zona: <span x-text="pedidoItem.zona"></span>
                                    </p>
                                    <div class="mt-2 flex items-center justify-between text-[10px] font-bold text-slate-500 dark:text-slate-400 pt-2 border-t border-slate-100/50 dark:border-slate-800/50">
                                        <span class="font-extrabold text-slate-800 dark:text-slate-200" x-text="'$' + Number(pedidoItem.total_pagar).toLocaleString('es-CO')"></span>
                                        <span class="text-[8px] font-black uppercase tracking-wider px-1.5 py-0.5 bg-slate-100 dark:bg-slate-800 rounded text-slate-600 dark:text-slate-300" x-text="pedidoItem.metodo_pago"></span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
        </div>

        <!-- MODAL DETALLE DE HISTORIAL (AlpineJS) -->
        <template x-teleport="body">
            <div x-show="showHistoryModal" 
                 class="fixed inset-0 flex items-end sm:items-center justify-center p-0 sm:p-4"
                 style="z-index: 999999 !important;"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 translate-y-20"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 x-cloak>
                <div class="fixed inset-0 bg-slate-900/90 backdrop-blur-md" style="z-index: -1;" @click="showHistoryModal = false"></div>
                <div class="relative bg-white dark:bg-slate-900 w-full max-w-lg rounded-t-[3rem] sm:rounded-[3rem] shadow-[0_-20px_50px_-12px_rgba(0,0,0,0.5)] overflow-hidden max-h-[95vh] flex flex-col border border-white/20 dark:border-slate-800">
                    
                    <!-- Header Modal -->
                    <div class="bg-indigo-600 p-8 text-white relative shrink-0 sticky top-0 z-50 shadow-lg">
                        <div class="relative z-10 flex justify-between items-start">
                            <div>
                                <span class="text-[9px] font-black uppercase tracking-widest text-indigo-200 block mb-1" x-text="selectedHistoryOrder?.codigo_seguimiento"></span>
                                <h3 class="text-2xl font-black uppercase tracking-tight mb-1" x-text="selectedHistoryOrder?.cliente_nombre"></h3>
                                <div class="flex flex-col gap-2">
                                    <div class="flex items-start gap-2 text-indigo-100">
                                        <svg class="w-4 h-4 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                                        <div class="flex flex-col">
                                            <p class="text-[10px] font-bold uppercase tracking-wide leading-tight" x-text="selectedHistoryOrder?.direccion"></p>
                                            <p class="text-[8px] font-medium text-indigo-200 uppercase tracking-widest mt-0.5">
                                                <span x-text="selectedHistoryOrder?.barrio"></span> • <span x-text="selectedHistoryOrder?.zona"></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" @click="showHistoryModal = false" class="bg-white/20 hover:bg-white/30 p-4 rounded-2xl transition-colors shadow-lg border border-white/10">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"></path></svg>
                            </button>
                        </div>
                    </div>

                    <!-- Contenido Modal -->
                    <div class="p-8 overflow-y-auto space-y-8 pb-12 custom-scrollbar dark:text-slate-100">
                        <!-- Estado de la entrega -->
                        <div class="p-5 rounded-[2rem] border flex items-center gap-4"
                             :class="selectedHistoryOrder?.estado_entrega === 'entregado' ? 'bg-emerald-50 dark:bg-emerald-950/20 border-emerald-100 dark:border-emerald-900/30' : 'bg-rose-50 dark:bg-rose-950/20 border-rose-100 dark:border-rose-900/30'">
                            <div class="w-12 h-12 rounded-full flex items-center justify-center shadow-lg shrink-0 text-white"
                                 :class="selectedHistoryOrder?.estado_entrega === 'entregado' ? 'bg-emerald-500' : 'bg-rose-500'">
                                <svg x-show="selectedHistoryOrder?.estado_entrega === 'entregado'" class="w-6 h-6" 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>
                                <svg x-show="selectedHistoryOrder?.estado_entrega !== 'entregado'" class="w-6 h-6" 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>
                            </div>
                            <div>
                                <p class="text-[11px] font-black uppercase tracking-widest"
                                   :class="selectedHistoryOrder?.estado_entrega === 'entregado' ? 'text-emerald-800 dark:text-emerald-400' : 'text-rose-800 dark:text-rose-400'"
                                   x-text="selectedHistoryOrder?.estado_entrega === 'entregado' ? 'Entrega Confirmada' : 'Novedad Reportada'"></p>
                                <p class="text-[9px] font-bold text-slate-500 dark:text-slate-400 mt-0.5" x-text="'Hora: ' + (selectedHistoryOrder?.hora_llegada || 'No registrada')"></p>
                            </div>
                        </div>

                        <!-- Indicaciones de Entrega / Notas del Historial -->
                        <div x-show="selectedHistoryOrder?.observaciones || selectedHistoryOrder?.observacion_entrega" class="space-y-2">
                            <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest block">Notas y Observaciones</span>
                            <div class="p-6 bg-slate-50 dark:bg-slate-800 rounded-[2rem] border border-slate-100 dark:border-slate-700 text-xs font-bold leading-relaxed text-slate-700 dark:text-slate-300 shadow-inner">
                                <p x-text="selectedHistoryOrder?.observaciones || selectedHistoryOrder?.observacion_entrega"></p>
                            </div>
                        </div>

                        <!-- Evidencia Fotográfica -->
                        <div class="space-y-3">
                            <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest block">Evidencia de Entrega</span>
                            <div class="relative w-full aspect-square rounded-[2rem] overflow-hidden bg-slate-900 border border-slate-200 dark:border-slate-700 shadow-inner">
                                <template x-if="selectedHistoryOrder?.evidencia_foto_url">
                                    <img :src="selectedHistoryOrder?.evidencia_foto_url" class="w-full h-full object-contain">
                                </template>
                                <template x-if="!selectedHistoryOrder?.evidencia_foto_url">
                                    <div class="w-full h-full flex flex-col items-center justify-center text-slate-500">
                                        <svg class="w-12 h-12 text-slate-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                        <span class="text-[10px] font-black uppercase tracking-widest">Sin Foto de Evidencia</span>
                                    </div>
                                </template>
                            </div>
                        </div>

                        <!-- Resumen Financiero -->
                        <div class="p-6 bg-slate-900 rounded-[2.5rem] shadow-2xl space-y-4">
                            <div class="flex justify-between items-center text-slate-400 text-[10px] font-black uppercase tracking-widest">
                                <span>Metodo de Pago:</span>
                                <span class="bg-white/10 text-white px-2 py-0.5 rounded" x-text="selectedHistoryOrder?.metodo_pago"></span>
                            </div>
                            <div class="h-px bg-white/10"></div>
                            <div class="flex justify-between items-baseline">
                                <span class="text-[9px] font-black text-indigo-400 uppercase tracking-widest">Monto Recaudado</span>
                                <span class="text-3xl font-black text-white" x-text="'$' + Number(selectedHistoryOrder?.monto_pagado || 0).toLocaleString('es-CO')"></span>
                            </div>
                            <div class="flex justify-between items-baseline opacity-60">
                                <span class="text-[8px] font-black text-slate-400 uppercase tracking-widest">Total Esperado</span>
                                <span class="text-sm font-black text-white" x-text="'$' + Number(selectedHistoryOrder?.total_pagar || 0).toLocaleString('es-CO')"></span>
                            </div>
                        </div>

                        <!-- Detalle de Productos -->
                        <div class="space-y-3">
                            <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest block">Productos Entregados</span>
                            <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-100 dark:border-slate-700 p-6 space-y-4 shadow-sm">
                                <template x-for="prod in selectedHistoryOrder?.productos" :key="prod.nombre">
                                    <div class="flex justify-between items-start gap-4">
                                        <span class="text-[11px] font-bold text-slate-700 dark:text-slate-300 uppercase" x-text="prod.nombre"></span>
                                        <span class="text-base font-black text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-950/40 px-3 py-1 rounded-xl border border-indigo-100 dark:border-indigo-900/30" x-text="'x' + prod.cantidad"></span>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>

                    <!-- Footer Modal -->
                    <div class="p-8 bg-white dark:bg-slate-900 border-t border-slate-100 dark:border-slate-800 shrink-0">
                        <button type="button" @click="showHistoryModal = false"
                                class="w-full bg-slate-950 text-white font-black py-5 rounded-[2rem] shadow-2xl uppercase tracking-[0.25em] text-[11px] active:scale-95 transition-all">
                            Cerrar Historial
                        </button>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>

<!-- SCRIPTS MODULARES -->
@push('scripts')
<script>
function domiciliarioApp() {
    return {
        activeTab: 'ruta',
        checklist: {},
        totalItems: {{ count($totales ?? []) }},
        historyDate: '{{ \Carbon\Carbon::now("America/Bogota")->toDateString() }}',
        historyData: [],
        loadingHistory: false,
        selectedHistoryOrder: null,
        showHistoryModal: false,
        
        init() {
            const stored = localStorage.getItem('jointrust_checklist_{{ $ruta->id ?? 0 }}');
            if (stored) this.checklist = JSON.parse(stored);
            
            // Cargar historial inicial para hoy
            this.fetchHistory();
        },

        async fetchHistory() {
            this.loadingHistory = true;
            try {
                const url = `{{ route('rutas.mobile.history-data') }}?fecha=${this.historyDate}` + 
                            `{{ isset($domiciliarioId) ? '&domiciliario_id=' . $domiciliarioId : '' }}`;
                const response = await fetch(url);
                if (response.ok) {
                    this.historyData = await response.json();
                } else {
                    console.error('Error fetching history:', response.statusText);
                }
            } catch (e) {
                console.error('Connection error fetching history:', e);
            } finally {
                this.loadingHistory = false;
            }
        },

        openHistoryOrder(order) {
            this.selectedHistoryOrder = order;
            this.showHistoryModal = true;
        },

        toggleCheck(prod) {
            this.checklist[prod] = !this.checklist[prod];
            localStorage.setItem('jointrust_checklist_{{ $ruta->id ?? 0 }}', JSON.stringify(this.checklist));
        },

        get isChecklistComplete() {
            const checkedCount = Object.values(this.checklist).filter(v => v).length;
            return checkedCount >= this.totalItems && this.totalItems > 0;
        },

        async iniciarRuta() {
            window.dispatchEvent(new CustomEvent('open-confirm', {
                detail: {
                    title: '¿SALIR A RUTA?',
                    message: '¿Confirmas que has cargado todos los productos y estás listo para iniciar el despacho?',
                    callback: async () => {
                        try {
                            const response = await fetch('{{ route('rutas.actualizar-estado', $ruta->id ?? 0) }}', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                body: JSON.stringify({ estado: 'en_ruta' })
                            });
                            
                            const data = await response.json();
                            if (data.success) {
                                window.location.reload();
                            } else {
                                window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: 'No se pudo iniciar la ruta.', type: 'error' } }));
                            }
                        } catch (e) {
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: 'Fallo de conexión al servidor.', type: 'error' } }));
                        }
                    }
                }
            }));
        },

        async iniciarEmpaque() {
            window.dispatchEvent(new CustomEvent('open-confirm', {
                detail: {
                    title: '¿INICIAR EMPAQUE?',
                    message: '¿Deseas pasar esta ruta y sus pedidos al estado "En Empaque" para iniciar la verificación de mercancía?',
                    callback: async () => {
                        try {
                            const response = await fetch('{{ route('rutas.actualizar-estado', $ruta->id ?? 0) }}', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                body: JSON.stringify({ estado: 'en_empaque' })
                            });
                            
                            const data = await response.json();
                            if (data.success) {
                                window.location.reload();
                            } else {
                                window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: 'No se pudo actualizar la ruta.', type: 'error' } }));
                            }
                        } catch (e) {
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: 'Fallo de conexión al servidor.', type: 'error' } }));
                        }
                    }
                }
            }));
        },

        async devolverAsignacion() {
            window.dispatchEvent(new CustomEvent('open-confirm', {
                detail: {
                    title: '¿DEVOLVER A ASIGNACIÓN?',
                    message: '¿Confirmas que deseas cancelar el empaque/salida y devolver la ruta a su estado inicial de asignación (Aprobada / Confirmado)?',
                    callback: async () => {
                        try {
                            const response = await fetch('{{ route('rutas.actualizar-estado', $ruta->id ?? 0) }}', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                body: JSON.stringify({ estado: 'aprobada' })
                            });
                            
                            const data = await response.json();
                            if (data.success) {
                                window.location.reload();
                            } else {
                                window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: 'No se pudo revertir la ruta.', type: 'error' } }));
                            }
                        } catch (e) {
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: 'Fallo de conexión al servidor.', type: 'error' } }));
                        }
                    }
                }
            }));
        },

        async toggleMetodoPago(pedidoId, current) {
            const nuevo = current === 'efectivo' ? 'transferencia' : 'efectivo';
            try {
                const response = await fetch(`{{ url('/pedidos') }}/${pedidoId}/payment-method`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ metodo_pago: nuevo })
                });
                
                if (response.ok) {
                    location.reload();
                }
            } catch (error) {
                alert('Error al actualizar método de pago');
            }
        }
    }
}
</script>
@endpush

<style>
    .custom-scrollbar::-webkit-scrollbar { width: 4px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.05); border-radius: 10px; }
</style>
@endsection