{{--
    OVERLAY: MAPA DE CALOR GEOESPACIAL
    Inyecta un mapa unificado (`x-teleport="body"`) donde se solapan 
    todas las zonas tarifarias para detectar huecos de cobertura.
--}}
<template x-teleport="body">
    <div x-show="showGlobalMap" 
         x-cloak
         class="fixed inset-0 z-[100] overflow-y-auto" 
         aria-labelledby="modal-title" role="dialog" aria-modal="true">
        
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <!-- Background overlay -->
            <div x-show="showGlobalMap" 
                 x-transition:enter="ease-out duration-300"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="ease-in duration-200"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 @click="showGlobalMap = false"
                 class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity" aria-hidden="true"></div>

            <!-- This element is to trick the browser into centering the modal contents. -->
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

            <!-- Modal panel -->
            <div x-show="showGlobalMap"
                 x-transition:enter="ease-out duration-300"
                 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave="ease-in duration-200"
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 class="inline-block align-bottom bg-white dark:bg-slate-900 rounded-3xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle w-full max-w-6xl h-[85vh] relative z-[110] border border-white/10">
                
                <div class="flex flex-col h-full">
                    <!-- Header -->
                    <div class="px-6 py-4 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between bg-white dark:bg-slate-900 sticky top-0 z-10">
                        <div>
                            <h3 class="text-xl font-bold text-slate-800 dark:text-white flex items-center gap-2">
                                <span class="p-2 bg-indigo-50 dark:bg-indigo-500/10 rounded-xl">
                                    <svg class="w-5 h-5 text-indigo-600" 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.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7l5-2.5 5.553 2.776a1 1 0 01.447.894v10.764a1 1 0 01-1.447.894L14 17l-5 3z" />
                                    </svg>
                                </span>
                                Mapa Global de Cobertura
                            </h3>
                            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Vista panorámica de todas las zonas de entrega.</p>
                        </div>
                        
                        <button @click="showGlobalMap = false" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-colors">
                            <svg class="w-6 h-6 text-slate-400" 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" />
                            </svg>
                        </button>
                    </div>

                    <!-- Map Container -->
                    <div class="relative bg-slate-100 dark:bg-slate-950 border-y border-slate-100 dark:border-slate-800"
                         style="height: calc(85vh - 140px); min-height: 400px;">
                        <div id="global-map-canvas" class="absolute inset-0 w-full h-full" style="z-index: 1;"></div>
                        
                        <!-- Legend Floating Card -->
                        <div class="absolute bottom-6 left-6 p-4 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md rounded-2xl shadow-xl border border-white/20 z-[2] max-h-48 overflow-y-auto w-64">
                            <h4 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3">Cobertura por Zonas</h4>
                            <div class="space-y-2">
                                <template x-for="zona in allZonas" :key="zona.id">
                                    <div class="flex items-center gap-2" x-show="zona.polygon_coords">
                                        <div class="w-3 h-3 rounded-full shadow-sm" :style="`background-color: ${generateColorFromName(zona.nombre_zona)}`"></div>
                                        <span class="text-[11px] font-bold text-slate-700 dark:text-slate-200 tracking-tight" x-text="zona.nombre_zona"></span>
                                    </div>
                                </template>
                                <template x-if="allZonas.filter(z => z.polygon_coords).length === 0">
                                    <p class="text-[10px] text-slate-400 italic text-center py-2">No hay zonas con polígonos trazados.</p>
                                </template>
                            </div>
                        </div>
                    </div>

                    <!-- Footer / Tools -->
                    <div class="px-8 py-5 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-100 dark:border-slate-800 flex justify-end">
                        <button @click="showGlobalMap = false" 
                                class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-indigo-500/30 transition-all uppercase tracking-wide transform hover:-translate-y-0.5 active:scale-95">
                            Cerrar Vista
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>