@extends('layouts.app')

@section('title', 'Gestión Logística')

@section('content')
    <div class="flex justify-between items-end mb-6">
        <div>
            <h2 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-2 tracking-tight">
                Rutas de <span
                    class="bg-clip-text text-transparent bg-gradient-to-r from-brand-orange to-brand-wine dark:from-orange-400 dark:to-pink-500">Entrega</span>
            </h2>
            <p class="text-sm text-slate-500 dark:text-slate-400 font-medium mt-1">Asignación y monitoreo de flota en tiempo real</p>
        </div>
        <button
            class="bg-berry-red hover:bg-berry-red/90 text-white px-6 py-2.5 rounded-xl font-bold shadow-md transition-all transform hover:-translate-y-0.5 flex items-center gap-2">
            <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 6v6m0 0v6m0-6h6m-6 0H6"></path>
            </svg>
            Crear Ruta
        </button>
    </div>

    <!-- Tabla Rutas Reconstruida -->
    <x-table>
        <x-table.thead>
            <tr>
                <x-table.th>Ruta</x-table.th>
                <x-table.th>Domiciliario</x-table.th>
                <x-table.th class="text-center">Progreso de Entrega</x-table.th>
                <x-table.th class="text-right">Control Financiero</x-table.th>
                <x-table.th class="text-center">Estado</x-table.th>
                <x-table.th class="text-center">Acciones</x-table.th>
            </tr>
        </x-table.thead>
        <x-table.tbody>
            @forelse($rutas as $ruta)
                <x-table.tr :index="$loop->index">
                    <!-- Información de la Ruta -->
                    <x-table.td>
                        <div class="flex flex-col">
                            <div class="flex items-center gap-2">
                                <span class="font-bold text-slate-800 dark:text-slate-200 text-base">{{ $ruta->nombre_ruta }}</span>
                                @if($ruta->numero_salida > 0)
                                    <span class="px-2 py-0.5 bg-indigo-50 text-indigo-600 text-[9px] font-black rounded-lg border border-indigo-100 uppercase tracking-tighter">
                                        Salida #{{ $ruta->numero_salida }}
                                    </span>
                                @endif
                            </div>
                            <span class="text-[10px] text-slate-400 font-black uppercase tracking-widest mt-1 flex items-center gap-1">
                                <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 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>
                                {{ $ruta->fecha_programada->format('d M, Y') }}
                            </span>
                        </div>
                    </x-table.td>

                    <!-- Domiciliario Asignado -->
                    <x-table.td>
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 rounded-2xl bg-indigo-50 text-indigo-600 flex items-center justify-center font-black text-xs border border-indigo-100 shadow-sm">
                                {{ substr($ruta->domiciliario->nombre ?? '?', 0, 2) }}
                            </div>
                            <div class="flex flex-col">
                                <span class="text-sm text-slate-700 dark:text-slate-300 font-black uppercase tracking-tight">{{ $ruta->domiciliario->nombre ?? 'Sin asignar' }}</span>
                                <span class="text-[10px] text-slate-400 font-bold italic">{{ $ruta->domiciliario->placa ?? 'Sin placa' }}</span>
                            </div>
                        </div>
                    </x-table.td>

                    <!-- Progreso de Entrega -->
                    <x-table.td class="text-center">
                        @php
                            $total = $ruta->pedidos->count();
                            $entregados = $ruta->pedidos->where('pivot.estado_entrega', 'entregado')->count();
                            $porcentaje = $total > 0 ? ($entregados / $total) * 100 : 0;
                        @endphp
                        <div class="flex flex-col items-center gap-1">
                            <div class="flex items-baseline gap-1">
                                <span class="text-sm font-black text-slate-800">{{ $entregados }}</span>
                                <span class="text-[10px] text-slate-400 font-bold uppercase">/ {{ $total }}</span>
                            </div>
                            <div class="w-24 h-1.5 bg-slate-100 rounded-full overflow-hidden">
                                <div class="h-full bg-fresh-green transition-all duration-1000" style="width: {{ $porcentaje }}%"></div>
                            </div>
                        </div>
                    </x-table.td>

                    <!-- Control Financiero (Recaudado vs Esperado) -->
                    <x-table.td class="text-right">
                        <div class="flex flex-col items-end">
                            <div class="flex items-center gap-2">
                                <span class="text-xs font-black text-slate-800">${{ number_format($ruta->total_recaudado, 0) }}</span>
                                <span class="text-[9px] font-bold text-slate-400 uppercase tracking-tighter">Recibido</span>
                            </div>
                            @if($ruta->total_recaudado < $ruta->total_esperado)
                                <div class="flex items-center gap-1 mt-1">
                                    <span class="text-[10px] font-black text-rose-500">-${{ number_format($ruta->total_esperado - $ruta->total_recaudado, 0) }}</span>
                                    <span class="px-1.5 py-0.5 bg-rose-50 text-rose-500 text-[8px] font-black rounded uppercase tracking-tighter">Faltante</span>
                                </div>
                            @else
                                <span class="text-[8px] font-black text-emerald-500 uppercase tracking-widest mt-1">Cuadre Completo</span>
                            @endif
                        </div>
                    </x-table.td>

                    <!-- Estado de la Ruta -->
                    <x-table.td class="text-center">
                        @php
                            $colors = [
                                'planificacion' => 'bg-amber-50 text-amber-700 border-amber-200',
                                'en_curso' => 'bg-blue-50 text-blue-700 border-blue-200',
                                'finalizada' => 'bg-emerald-50 text-emerald-700 border-emerald-200'
                            ];
                        @endphp
                        <span class="px-3 py-1.5 rounded-xl text-[10px] font-black border uppercase tracking-widest {{ $colors[$ruta->estado] ?? 'bg-slate-100 text-slate-600 border-slate-200' }}">
                            {{ str_replace('_', ' ', $ruta->estado) }}
                        </span>
                    </x-table.td>

                    <!-- Acciones -->
                    <x-table.td class="text-center">
                        <div class="flex items-center justify-center gap-2">
                            <button @click="$dispatch('open-route-modal', { id: {{ $ruta->id }}, view: 'evidencias' })"
                                    class="p-2 bg-indigo-50 text-indigo-600 hover:bg-indigo-600 hover:text-white rounded-xl transition-all shadow-sm"
                                    title="Ver Evidencias y Fotos">
                                <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="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>
                            </button>
                            <button @click="$dispatch('open-route-modal', { id: {{ $ruta->id }}, view: 'detalles' })"
                                    class="p-2 bg-slate-50 text-slate-600 hover:bg-slate-800 hover:text-white rounded-xl transition-all border border-slate-100 shadow-sm" 
                                    title="Ver Detalles de la Ruta">
                                <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                            </button>
                        </div>
                    </x-table.td>
                </x-table.tr>
            @empty
                <x-table.tr>
                    <x-table.td colspan="6" class="py-16 text-center">
                        <div class="flex flex-col items-center justify-center text-slate-400">
                            <svg class="w-12 h-12 mb-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 7m0 13V7"></path></svg>
                            <p class="text-sm italic">No hay rutas programadas activas.</p>
                        </div>
                    </x-table.td>
                </x-table.tr>
            @endforelse
        </x-table.tbody>
    </x-table>

    <div class="mt-6">
        {{ $rutas->links() }}
    </div>

    <!-- Modal Dinámico: Detalles y Evidencias de Ruta -->
    <template x-teleport="body">
        <div x-data="{ 
                isOpen: false, 
                currentView: 'detalles',
                rutaId: null, 
                rutaData: null,
                loading: false,
                previewPhoto: null,
                async loadRouteData(id, initialView = 'detalles') {
                    this.loading = true;
                    this.rutaId = id;
                    this.currentView = initialView;
                    this.isOpen = true;
                    try {
                        const res = await fetch(`{{ url('/rutas') }}/${id}/detalles`, {
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        });
                        if (!res.ok) throw new Error('Error al cargar datos de la ruta');
                        this.rutaData = await res.json();
                    } catch (e) {
                        console.error(e);
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: 'No se pudo cargar la información de la ruta.', type: 'error' } }));
                    } finally {
                        this.loading = false;
                    }
                },
                get evidenceOrders() {
                    if (!this.rutaData?.pedidos) return [];
                    return this.rutaData.pedidos.filter(p => p.evidencia_foto_url);
                }
            }"
            @open-route-modal.window="loadRouteData($event.detail.id, $event.detail.view || 'detalles')"
            x-show="isOpen" 
            x-cloak
            class="fixed inset-0 z-[300] flex items-center justify-center p-4">
            
            <div class="absolute inset-0 bg-slate-900/80 backdrop-blur-sm" @click="isOpen = false"></div>
            
            <div class="relative bg-white dark:bg-slate-800 w-full max-w-5xl rounded-[2.5rem] shadow-2xl overflow-hidden flex flex-col max-h-[90vh] border border-slate-100 dark:border-slate-700">
                <!-- Header con Switch de Vistas -->
                <div class="bg-indigo-600 p-6 sm:p-8 text-white flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 shrink-0">
                    <div>
                        <div class="flex items-center gap-3">
                            <h3 class="text-xl sm:text-2xl font-black uppercase tracking-tight">Ruta #<span x-text="rutaId"></span></h3>
                            <span class="px-2.5 py-1 bg-white/20 text-white rounded-lg text-[9px] font-black uppercase tracking-widest" x-text="rutaData?.estado ? rutaData.estado.replace('_', ' ') : 'Cargando...'"></span>
                        </div>
                        <p class="text-xs text-indigo-100 font-bold mt-1">
                            <span x-text="rutaData?.domiciliario ? 'Domiciliario: ' + rutaData.domiciliario.nombre : 'Sin domiciliario'"></span>
                            <span class="mx-2">&bull;</span>
                            <span x-text="'Fecha: ' + (rutaData?.fecha_programada || '--')"></span>
                        </p>
                    </div>

                    <div class="flex items-center gap-3 self-end sm:self-center">
                        <div class="flex bg-white/10 p-1 rounded-xl border border-white/20">
                            <button @click="currentView = 'detalles'" 
                                    class="px-4 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all"
                                    :class="currentView === 'detalles' ? 'bg-white text-indigo-600 shadow-md' : 'text-white/70 hover:text-white'">
                                Listado de Pedidos
                            </button>
                            <button @click="currentView = 'evidencias'" 
                                    class="px-4 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all flex items-center gap-1.5"
                                    :class="currentView === 'evidencias' ? 'bg-white text-indigo-600 shadow-md' : 'text-white/70 hover:text-white'">
                                <span>Evidencias y Fotos</span>
                                <span class="px-1.5 py-0.2 bg-indigo-500/50 rounded-full text-[9px]" x-text="evidenceOrders.length"></span>
                            </button>
                        </div>
                        <button @click="isOpen = false" class="p-2 hover:bg-white/10 rounded-xl transition-all text-white">
                            <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>
                </div>

                <!-- Body (Scroll) -->
                <div class="p-6 sm:p-8 overflow-y-auto bg-slate-50 dark:bg-slate-900 flex-1">
                    <div x-show="loading" class="flex flex-col items-center justify-center py-24">
                        <div class="animate-spin rounded-full h-12 w-12 border-4 border-indigo-600 border-t-transparent mb-4"></div>
                        <p class="text-xs font-black text-slate-500 uppercase tracking-widest">Consultando pedidos y evidencias...</p>
                    </div>

                    <div x-show="!loading && rutaData">
                        <!-- VISTA 1: TABLA DETALLADA DE PEDIDOS (Ordenada por orden_entrega) -->
                        <div x-show="currentView === 'detalles'" class="space-y-4">
                            <div class="overflow-x-auto rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 shadow-sm">
                                <table class="w-full text-left border-collapse">
                                    <thead>
                                        <tr class="bg-slate-100/60 dark:bg-slate-800/80 border-b border-slate-100 dark:border-slate-700">
                                            <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center"># Parada</th>
                                            <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Código</th>
                                            <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Cliente</th>
                                            <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Dirección y Barrio</th>
                                            <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Productos</th>
                                            <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Hora Entrega</th>
                                            <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Total</th>
                                            <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Foto</th>
                                            <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Estado</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700/60 text-slate-700 dark:text-slate-300">
                                        <template x-for="(p, pIndex) in rutaData?.pedidos || []" :key="p.id">
                                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40 transition-colors">
                                                <td class="p-4 text-center">
                                                    <span class="w-6 h-6 rounded-lg bg-indigo-50 dark:bg-indigo-950/40 text-indigo-600 dark:text-indigo-400 font-black text-xs inline-flex items-center justify-center" x-text="pIndex + 1"></span>
                                                </td>
                                                <td class="p-4">
                                                    <span class="text-xs font-black text-indigo-600 uppercase" x-text="'#' + p.codigo_seguimiento"></span>
                                                </td>
                                                <td class="p-4">
                                                    <p class="text-xs font-black text-slate-800 dark:text-white uppercase" x-text="p.cliente?.nombre"></p>
                                                    <p class="text-[9px] text-slate-400 font-bold uppercase" x-text="p.cliente?.telefono ? '📞 ' + p.cliente.telefono : 'S.T'"></p>
                                                </td>
                                                <td class="p-4">
                                                    <p class="text-[11px] font-bold text-slate-700 dark:text-slate-200" x-text="p.direccion?.direccion + (p.direccion?.detalles ? ' (' + p.direccion.detalles + ')' : '')"></p>
                                                    <span class="inline-block mt-1 px-2 py-0.5 bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 text-[8px] font-black uppercase rounded border border-indigo-100/50" x-text="p.direccion?.barrio"></span>
                                                </td>
                                                <td class="p-4 text-center">
                                                    <span class="px-2.5 py-1 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-lg text-xs font-black inline-block" 
                                                          :title="(p.productos || []).map(d => `${d.cantidad}x ${d.nombre}`).join('\n')"
                                                          x-text="`${p.total_cajas} cajas`">
                                                    </span>
                                                </td>
                                                <td class="p-4">
                                                    <template x-if="p.hora_llegada">
                                                        <div class="flex items-center gap-1.5 text-xs font-black text-slate-700 dark:text-slate-200">
                                                            <svg class="w-3.5 h-3.5 text-emerald-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                                            <span x-text="p.hora_llegada"></span>
                                                        </div>
                                                    </template>
                                                    <template x-if="!p.hora_llegada">
                                                        <span class="text-[10px] text-slate-400 italic">--:--</span>
                                                    </template>
                                                </td>
                                                <td class="p-4 text-xs font-black text-slate-800 dark:text-white" x-text="'$' + new Intl.NumberFormat('es-CO').format(p.total_pagar)"></td>
                                                <td class="p-4 text-center">
                                                    <template x-if="p.evidencia_foto_url">
                                                        <button @click="previewPhoto = p.evidencia_foto_url" 
                                                                class="p-1.5 bg-indigo-50 text-indigo-600 hover:bg-indigo-600 hover:text-white rounded-xl transition-all shadow-sm"
                                                                title="Ver Foto de Entrega">
                                                            <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="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>
                                                        </button>
                                                    </template>
                                                    <template x-if="!p.evidencia_foto_url">
                                                        <span class="text-[9px] text-slate-300 font-bold uppercase tracking-tight">Sin foto</span>
                                                    </template>
                                                </td>
                                                <td class="p-4">
                                                    <template x-if="p.estado === 'entregado'">
                                                        <span class="px-2 py-1 bg-emerald-50 dark:bg-emerald-950/20 text-emerald-600 dark:text-emerald-400 text-[9px] font-black uppercase rounded-lg border border-emerald-100/50">Entregado</span>
                                                    </template>
                                                    <template x-if="p.estado === 'cancelado'">
                                                        <span class="px-2 py-1 bg-rose-50 dark:bg-rose-950/20 text-rose-600 dark:text-rose-400 text-[9px] font-black uppercase rounded-lg border border-rose-100/50">Cancelado</span>
                                                    </template>
                                                    <template x-if="p.estado === 'atencion_requerida'">
                                                        <span class="px-2 py-1 bg-amber-50 dark:bg-amber-950/20 text-amber-600 dark:text-amber-400 text-[9px] font-black uppercase rounded-lg border border-amber-100/50">Novedad</span>
                                                    </template>
                                                    <template x-if="['pendiente', 'confirmado', 'en_empaque', 'en_ruta'].includes(p.estado)">
                                                        <span class="px-2 py-1 bg-blue-50 dark:bg-blue-950/20 text-blue-600 dark:text-blue-400 text-[9px] font-black uppercase rounded-lg border border-blue-100/50" x-text="p.estado === 'en_ruta' ? 'En Ruta' : p.estado"></span>
                                                    </template>
                                                </td>
                                            </tr>
                                        </template>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- VISTA 2: GALERÍA DE EVIDENCIAS Y FOTOS -->
                        <div x-show="currentView === 'evidencias'" class="space-y-4">
                            <template x-if="evidenceOrders.length === 0">
                                <div class="py-16 text-center bg-white dark:bg-slate-800 rounded-3xl border border-dashed border-slate-200 dark:border-slate-700">
                                    <div class="w-16 h-16 bg-slate-50 dark:bg-slate-900 rounded-2xl flex items-center justify-center mx-auto mb-3 text-slate-300">
                                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                                    </div>
                                    <h4 class="text-sm font-black text-slate-700 dark:text-slate-300 uppercase">Sin fotos registradas aún</h4>
                                    <p class="text-xs text-slate-400 mt-1 max-w-sm mx-auto">Las evidencias fotográficas subidas por el domiciliario al momento de entregar aparecerán en esta galería.</p>
                                </div>
                            </template>

                            <template x-if="evidenceOrders.length > 0">
                                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                                    <template x-for="p in evidenceOrders" :key="p.id">
                                        <div class="bg-white dark:bg-slate-800 rounded-3xl overflow-hidden border border-slate-100 dark:border-slate-700 shadow-sm hover:shadow-md transition-all flex flex-col group">
                                            <!-- Miniatura con botón de zoom -->
                                            <div class="relative h-48 bg-slate-100 dark:bg-slate-900 overflow-hidden cursor-pointer" @click="previewPhoto = p.evidencia_foto_url">
                                                <img :src="p.evidencia_foto_url" :alt="'Evidencia Pedido #' + p.codigo_seguimiento" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                                                <div class="absolute inset-0 bg-slate-900/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-white">
                                                    <span class="px-3 py-1.5 bg-slate-900/80 rounded-xl text-xs font-black uppercase tracking-wider backdrop-blur-sm flex items-center gap-1.5">
                                                        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path></svg>
                                                        Ampliar Foto
                                                    </span>
                                                </div>
                                                <span class="absolute top-3 left-3 px-2 py-1 bg-black/60 backdrop-blur-sm text-white rounded-lg text-[9px] font-black uppercase" x-text="'#' + p.codigo_seguimiento"></span>
                                            </div>

                                            <!-- Metadata de la entrega -->
                                            <div class="p-4 flex-1 flex flex-col justify-between">
                                                <div>
                                                    <div class="flex items-center justify-between gap-2 mb-1">
                                                        <h5 class="text-xs font-black text-slate-800 dark:text-white uppercase truncate" x-text="p.cliente?.nombre"></h5>
                                                        <span class="text-[9px] font-black text-emerald-600 bg-emerald-50 dark:bg-emerald-950/20 px-1.5 py-0.5 rounded uppercase">Entregado</span>
                                                    </div>
                                                    <p class="text-[10px] text-slate-500 font-bold uppercase truncate" x-text="p.direccion?.barrio + ' - ' + p.direccion?.direccion"></p>
                                                </div>

                                                <div class="mt-3 pt-3 border-t border-slate-100 dark:border-slate-700/60 flex items-center justify-between text-[10px]">
                                                    <span class="text-slate-400 font-medium">Hora registrada:</span>
                                                    <span class="font-black text-slate-700 dark:text-slate-200 flex items-center gap-1">
                                                        <svg class="w-3 h-3 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                                        <span x-text="p.hora_llegada || '--:--'"></span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
                
                <!-- Footer -->
                <div class="p-6 bg-white dark:bg-slate-800 border-t border-slate-100 dark:border-slate-700 shrink-0 flex justify-between items-center">
                    <div class="text-xs text-slate-400 font-bold" x-show="rutaData">
                        Total pedidos: <span class="font-black text-slate-700 dark:text-slate-200" x-text="rutaData?.pedidos?.length || 0"></span>
                        <span class="mx-2">&bull;</span>
                        Total recaudado: <span class="font-black text-slate-700 dark:text-slate-200" x-text="'$' + new Intl.NumberFormat('es-CO').format(rutaData?.total_recaudado || 0)"></span>
                    </div>
                    <button @click="isOpen = false" class="px-8 py-3 bg-slate-800 text-white rounded-2xl font-black uppercase tracking-widest text-[10px] hover:bg-slate-900 transition-all shadow-md ml-auto">
                        Cerrar Monitor
                    </button>
                </div>
            </div>

            <!-- Modal Zoom Foto (Anidado) -->
            <div x-show="previewPhoto" 
                 x-cloak 
                 class="fixed inset-0 z-[400] flex items-center justify-center p-4 bg-slate-950/85 backdrop-blur-md"
                 @click="previewPhoto = null">
                <div class="relative max-w-3xl w-full bg-slate-900 rounded-3xl overflow-hidden shadow-2xl p-2 border border-white/10" @click.stop>
                    <div class="flex justify-between items-center p-3 text-white">
                        <span class="text-xs font-black uppercase tracking-widest">Evidencia Fotográfica de Entrega</span>
                        <button @click="previewPhoto = null" class="p-1.5 hover:bg-white/10 rounded-xl text-white transition-all">
                            <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="M6 18L18 6M6 6l12 12"></path></svg>
                        </button>
                    </div>
                    <div class="max-h-[75vh] flex items-center justify-center bg-black/40 rounded-2xl overflow-hidden p-2">
                        <img :src="previewPhoto" alt="Evidencia" class="max-h-[70vh] w-auto max-w-full rounded-xl object-contain">
                    </div>
                    <div class="p-3 text-center">
                        <a :href="previewPhoto" target="_blank" class="text-xs font-black text-indigo-400 hover:text-indigo-300 uppercase tracking-widest">
                            Abrir Imagen en Pestaña Completa &nearr;
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </template>
@endsection