@extends('layouts.app')

@section('titulo', 'Gestión de Zonas')

@section('content')
<div x-data="zonaManager()" class="container mx-auto px-4 py-8">
    <!-- Header & Filtros -->
    <div class="mb-8 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-2 tracking-tight">
                Zonas 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>
            </h1>
            <p class="text-slate-500 mt-1">Define las áreas geográficas y asígnales una tarifa estándar.</p>
        </div>
        
        <div class="flex items-center space-x-3">
            <button @click="openGlobalMap()" 
                    class="bg-white dark:bg-slate-800 text-indigo-600 dark:text-indigo-400 border border-indigo-100 dark:border-indigo-500/20 px-6 py-3 rounded-2xl font-bold shadow-lg transition-all flex items-center space-x-2 transform hover:-translate-y-0.5 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="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>Ver Mapa Global</span>
            </button>
            <button @click="openCreateModal()" 
                    class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-2xl font-bold shadow-lg shadow-indigo-500/20 transition-all flex items-center space-x-2 transform hover:-translate-y-0.5 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="M12 4v16m8-8H4" />
                </svg>
                <span>Nueva Zona</span>
            </button>
        </div>
    </div>

    <!-- Filtros (Glass Card) -->
    <div class="glass-card-premium p-6 mb-8 border border-indigo-500/20 shadow-indigo-100/20 rounded-3xl">
        <div class="flex flex-col md:flex-row gap-4 items-center justify-between">
            <div class="relative w-full md:w-96">
                <input type="text" x-model="search" @input.debounce.500ms="handleSearch()"
                       placeholder="Buscar zona por nombre..."
                       class="w-full bg-surface border-0 rounded-2xl py-3 pl-5 pr-12 text-slate-700 shadow-sm focus:ring-2 focus:ring-indigo-600 transition-all">
                <div class="absolute right-4 top-3 flex items-center gap-2">
                    <button x-show="search" @click="search = ''; handleSearch()" class="p-1 rounded-lg text-slate-300 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-900/30 transition-all" title="Limpiar búsqueda">
                        <svg 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="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                    <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                </div>
            </div>
            
            <div class="flex flex-wrap items-center gap-4 space-x-4">
                <!-- Filtro de ordenación dinámico -->
                <div class="flex items-center gap-2">
                    <label class="text-sm font-medium text-slate-600 dark:text-slate-400 whitespace-nowrap">Ordenar por:</label>
                    <select x-model="sortBy" @change="handleSortChange()" class="py-1.5 px-3 bg-white dark:bg-surface border border-slate-200 dark:border-slate-700 rounded-lg focus:ring-2 focus:ring-indigo-600 text-sm font-bold text-slate-700 dark:text-slate-200 shadow-sm transition-all">
                        <option value="nombre">Nombre</option>
                        <option value="clientes">Clientes</option>
                        <option value="prioridad">Prioridad</option>
                    </select>
                    <button type="button" @click="toggleSortOrder()" class="p-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-slate-650 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 transition-all shadow-sm active:scale-95" title="Cambiar orden">
                        <span x-show="sortOrder === 'asc'">
                            <!-- Icono A-Z / Menor a Mayor -->
                            <svg class="w-4 h-4 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
                            </svg>
                        </span>
                        <span x-show="sortOrder === 'desc'" style="display: none;">
                            <!-- Icono Z-A / Mayor a Menor -->
                            <svg class="w-4 h-4 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M3 4h13M3 8h9m-9 4h6m4 8l4 4m0 0l4-4m-4 4V8"></path>
                            </svg>
                        </span>
                    </button>
                </div>

                <div class="flex items-center gap-2">
                    <label class="text-sm font-medium text-slate-600 dark:text-slate-400 whitespace-nowrap">Mostrar:</label>
                    <select x-model="perPage" @change="handleSearch()" class="py-1.5 px-3 bg-white dark:bg-surface border border-slate-200 dark:border-slate-700 rounded-lg focus:ring-2 focus:ring-indigo-600 text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm transition-all text-center w-20">
                        <option value="10">10</option>
                        <option value="30">30</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
                
                <div class="flex items-center gap-2">
                    <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Estado:</span>
                <div class="flex bg-surface p-1 rounded-xl shadow-inner">
                    <button @click="status = 'Todos'; handleSearch()" 
                            :class="status === 'Todos' ? 'bg-white shadow text-indigo-600' : 'text-slate-500 hover:text-slate-700'"
                            class="px-4 py-1.5 rounded-lg text-sm font-bold transition-all">Todos</button>
                    <button @click="status = 'Activos'; handleSearch()" 
                            :class="status === 'Activos' ? 'bg-white shadow text-brand-green' : 'text-slate-500 hover:text-slate-700'"
                            class="px-4 py-1.5 rounded-lg text-sm font-bold transition-all">Activas</button>
                    <button @click="status = 'Inactivos'; handleSearch()" 
                            :class="status === 'Inactivos' ? 'bg-white shadow text-slate-700' : 'text-slate-500 hover:text-slate-700'"
                            class="px-4 py-1.5 rounded-lg text-sm font-bold transition-all">Inactivas</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de Zonas (Container for AJAX) -->
    <div id="zonas-table-container">
        @include('zonas.table')
    </div>

    @include('zonas.modals.zona-form')
    @include('zonas.modals.delete')
    @include('zonas.modals.global-map')
</div>

@push('scripts')
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_maps.key') }}&libraries=drawing,places"></script>
<script>
function zonaManager() {
    return {
        search: '',
        status: 'Todos',
        perPage: '10',
        sortBy: 'nombre',
        sortOrder: 'asc',
        loadingToggle: null,
        searchTimeout: null,
        showGlobalMap: false,
        allZonas: @json($allZonas),
        globalMap: null,
        globalPolygons: [],
        globalMarkers: [],
        modalZona: {{ $errors->any() ? 'true' : 'false' }},
        editing: false,
        zonaId: null,
        deleteModal: {
            open: false,
            action: '',
            nombre: ''
        },
        form: {
            nombre_zona: '',
            ciudad: '',
            tarifa_id: '',
            orden_prioridad: 0,
            activo: true,
            polygon_coords: '',
            pago_domiciliario: localStorage.getItem('last_pago_domiciliario') || 8000
        },
        nameCheck: {
            loading: false,
            available: true,
            message: ''
        },

        init() {
            // Cargar preferencia de paginación
            const savedPerPage = localStorage.getItem('zonas_per_page');
            if (savedPerPage && ['10', '30', '50', '100'].includes(savedPerPage)) {
                this.perPage = savedPerPage;
                // Si es diferente del default (10), recargar la tabla
                if (savedPerPage !== '10') {
                    this.fetchZonas();
                }
            }
            
            // Cargar pago domiciliario por defecto guardado
            const lastPago = localStorage.getItem('last_pago_domiciliario');
            if (lastPago) {
                this.form.pago_domiciliario = lastPago;
            }
        },

        async checkNameAvailability() {
            if (this.form.nombre_zona.length < 3) {
                this.nameCheck = { loading: false, available: true, message: '' };
                return;
            }

            this.nameCheck.loading = true;
            try {
                const response = await fetch('{{ route("zonas.check-name") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        nombre_zona: this.form.nombre_zona,
                        id: this.zonaId
                    })
                });
                const data = await response.json();
                this.nameCheck.available = data.available;
                this.nameCheck.message = data.message;
            } catch (error) {
                console.error('Error verificando nombre:', error);
            } finally {
                this.nameCheck.loading = false;
            }
        },
        mapLoaded: false,
        map: null,
        drawingManager: null,
        currentPolygon: null,

        generateColorFromName(name) {
            if (!name) return '#4f46e5'; // Default indigo-600
            let hash = 0;
            for (let i = 0; i < name.length; i++) {
                hash = name.charCodeAt(i) + ((hash << 5) - hash);
            }
            const h = Math.abs(hash) % 360;
            return `hsl(${h}, 70%, 50%)`;
        },

        initMap() {
            const mapContainer = document.getElementById('zona-map');
            if (!mapContainer) return;

            if (!this.map) {
                this.map = new google.maps.Map(mapContainer, {
                    center: { lat: 4.6097, lng: -74.0817 }, // Default Bogotá
                    zoom: 12,
                    mapTypeControl: false,
                    streetViewControl: false,
                    fullscreenControl: false
                });

                this.drawingManager = new google.maps.drawing.DrawingManager({
                    drawingMode: null,
                    drawingControl: true,
                    drawingControlOptions: {
                        position: google.maps.ControlPosition.TOP_CENTER,
                        drawingModes: [google.maps.drawing.OverlayType.POLYGON]
                    },
                    polygonOptions: {
                        fillColor: this.generateColorFromName(this.form.nombre_zona),
                        fillOpacity: 0.35,
                        strokeColor: this.generateColorFromName(this.form.nombre_zona),
                        strokeWeight: 2,
                        clickable: true,
                        editable: true,
                        zIndex: 1
                    }
                });

                this.drawingManager.setMap(this.map);

                // Al completar un polígono
                google.maps.event.addListener(this.drawingManager, 'polygoncomplete', (polygon) => {
                    if (this.currentPolygon) {
                        this.currentPolygon.setMap(null); // Remover el anterior
                    }
                    this.currentPolygon = polygon;
                    this.drawingManager.setDrawingMode(null); // Detener modo dibujo
                    this.updatePolygonCoords();
                    
                    // Actualizar si se edita el polígono
                    polygon.getPaths().forEach(path => {
                        google.maps.event.addListener(path, 'insert_at', () => this.updatePolygonCoords());
                        google.maps.event.addListener(path, 'remove_at', () => this.updatePolygonCoords());
                        google.maps.event.addListener(path, 'set_at', () => this.updatePolygonCoords());
                    });
                });
                
                // Vigilar el nombre para cambiar color dinámicamente
                this.$watch('form.nombre_zona', (value) => {
                    const color = this.generateColorFromName(value);
                    if (this.drawingManager) {
                        this.drawingManager.setOptions({
                            polygonOptions: Object.assign({}, this.drawingManager.get('polygonOptions'), {fillColor: color, strokeColor: color})
                        });
                    }
                    if (this.currentPolygon) {
                        this.currentPolygon.setOptions({fillColor: color, strokeColor: color});
                    }
                });

                this.initPlacesAutocomplete();
            }

            this.mapLoaded = true;
            // Forzar resize para evitar mapas grises/congelados en modals
            setTimeout(() => {
                if (this.map) {
                    google.maps.event.trigger(this.map, 'resize');
                }
            }, 100);
        },

        initPlacesAutocomplete() {
            const input = document.getElementById('map-search-box');
            if(!input) return;
            
            // Usar Geocoder API al presionar Enter evitando el submit del formulario
            input.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    e.stopPropagation();
                    this.searchAndDrawLocation();
                }
            });
        },

        searchAndDrawLocation() {
            const input = document.getElementById('map-search-box');
            if (!input || !input.value.trim()) return;

            const query = input.value.trim();
            const originalPlaceholder = input.placeholder;
            input.placeholder = "Buscando coordenadas de " + query + "...";
            input.disabled = true;

            const geocoder = new google.maps.Geocoder();
            geocoder.geocode({ address: query + ', Colombia' }, (results, status) => {
                input.disabled = false;
                input.placeholder = originalPlaceholder;

                if (status === 'OK' && results[0]) {
                    const geometry = results[0].geometry;
                    if (geometry.viewport) {
                        this.map.fitBounds(geometry.viewport);
                        this.createPolygonFromBounds(geometry.viewport);
                    } else {
                        this.map.setCenter(geometry.location);
                        this.map.setZoom(15);
                        const bounds = new google.maps.LatLngBounds();
                        const lat = geometry.location.lat();
                        const lng = geometry.location.lng();
                        bounds.extend(new google.maps.LatLng(lat - 0.012, lng - 0.012));
                        bounds.extend(new google.maps.LatLng(lat + 0.012, lng + 0.012));
                        this.createPolygonFromBounds(bounds);
                    }
                } else {
                    alert('No se pudo localizar el área exacta ("' + query + '"). Intenta ser más específico (Ej: Chapinero, Bogotá).');
                }
            });
        },

        startDrawingManual() {
            if (!this.drawingManager) return;
            if (this.currentPolygon) {
                if (!confirm('Ya tienes un área trazada. ¿Deseas reemplazarla y dibujar un nuevo polígono manual?')) {
                    return;
                }
                this.clearCurrentPolygon();
            }
            this.drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
        },

        clearCurrentPolygon() {
            if (this.currentPolygon) {
                this.currentPolygon.setMap(null);
                this.currentPolygon = null;
            }
            this.form.polygon_coords = '';
            if (this.drawingManager) {
                this.drawingManager.setDrawingMode(null);
            }
        },

        createPolygonFromBounds(bounds) {
            const ne = bounds.getNorthEast();
            const sw = bounds.getSouthWest();
            // Crear el rectángulo
            const coords = [
                { lat: ne.lat(), lng: sw.lng() }, // Arriba - Izquierda
                { lat: ne.lat(), lng: ne.lng() }, // Arriba - Derecha
                { lat: sw.lat(), lng: ne.lng() }, // Abajo - Derecha
                { lat: sw.lat(), lng: sw.lng() }  // Abajo - Izquierda
            ];

            if (this.currentPolygon) {
                this.currentPolygon.setMap(null);
            }

            const color = this.generateColorFromName(this.form.nombre_zona);

            this.currentPolygon = new google.maps.Polygon({
                paths: coords,
                fillColor: color,
                fillOpacity: 0.35,
                strokeColor: color,
                strokeWeight: 2,
                editable: true,
                map: this.map
            });

            this.updatePolygonCoords();

            // Vigilar cambios si el usuario arrastra las esquinas de la caja automática
            this.currentPolygon.getPaths().forEach(path => {
                google.maps.event.addListener(path, 'insert_at', () => this.updatePolygonCoords());
                google.maps.event.addListener(path, 'remove_at', () => this.updatePolygonCoords());
                google.maps.event.addListener(path, 'set_at', () => this.updatePolygonCoords());
            });
            
            if(this.drawingManager) this.drawingManager.setDrawingMode(null);
        },

        updatePolygonCoords() {
            if (!this.currentPolygon) {
                this.form.polygon_coords = '';
                return;
            }
            const vertices = this.currentPolygon.getPath();
            const coords = [];
            for (let i = 0; i < vertices.getLength(); i++) {
                const xy = vertices.getAt(i);
                coords.push({ lat: xy.lat(), lng: xy.lng() });
            }
            this.form.polygon_coords = JSON.stringify(coords);
        },
        
        loadExistingPolygon() {
            if (this.currentPolygon) {
                this.currentPolygon.setMap(null);
                this.currentPolygon = null;
            }
            
            if (this.form.polygon_coords) {
                try {
                    let coords = JSON.parse(this.form.polygon_coords);
                    // Prevenir doble codificación desde la base de datos
                    if (typeof coords === 'string') {
                        coords = JSON.parse(coords);
                    }
                    
                    if (coords && Array.isArray(coords) && coords.length > 0) {
                        this.currentPolygon = new google.maps.Polygon({
                            paths: coords,
                            fillColor: this.generateColorFromName(this.form.nombre_zona),
                            fillOpacity: 0.35,
                            strokeColor: this.generateColorFromName(this.form.nombre_zona),
                            strokeWeight: 2,
                            editable: true,
                            map: this.map
                        });
                        
                        // Centrar mapa
                        const bounds = new google.maps.LatLngBounds();
                        coords.forEach(coord => bounds.extend(new google.maps.LatLng(coord.lat, coord.lng)));
                        if (this.map) {
                            this.map.fitBounds(bounds);
                        }
                        
                        // Actualizar al editar
                        this.currentPolygon.getPaths().forEach(path => {
                            google.maps.event.addListener(path, 'insert_at', () => this.updatePolygonCoords());
                            google.maps.event.addListener(path, 'remove_at', () => this.updatePolygonCoords());
                            google.maps.event.addListener(path, 'set_at', () => this.updatePolygonCoords());
                        });
                        
                        if(this.drawingManager) this.drawingManager.setDrawingMode(null);
                    }
                } catch(e) {
                    console.error("Error al cargar coordenadas del polígono", e);
                }
            } else if (this.drawingManager) {
                 this.drawingManager.setDrawingMode(null);
            }
        },

        openCreateModal() {
            this.editing = false;
            this.zonaId = null;
            
            // Recuperar la última tarifa y pago de localStorage
            const lastTarifaId = localStorage.getItem('last_selected_tarifa_id');
            const lastPago = localStorage.getItem('last_pago_domiciliario') || 8000;
            
            this.form = {
                nombre_zona: '',
                ciudad: '',
                tarifa_id: lastTarifaId || '',
                orden_prioridad: 0,
                activo: true,
                es_zona_retirada: false,
                cupo_minimo_pedidos: 7,
                mensaje_personalizado_zona: '',
                polygon_coords: '',
                pago_domiciliario: lastPago
            };
            this.nameCheck = { loading: false, available: true, message: '' };
            this.modalZona = true;
            setTimeout(() => {
                this.initMap();
                this.loadExistingPolygon();
            }, 300);
        },

        openEditModal(zona) {
            this.editing = true;
            this.zonaId = zona.id;
            this.form = {
                nombre_zona: zona.nombre_zona,
                ciudad: zona.ciudad ?? '',
                tarifa_id: zona.tarifa_id,
                orden_prioridad: zona.orden_prioridad,
                activo: !!zona.activo,
                es_zona_retirada: !!zona.es_zona_retirada,
                cupo_minimo_pedidos: zona.cupo_minimo_pedidos ?? 7,
                mensaje_personalizado_zona: zona.mensaje_personalizado_zona ?? '',
                polygon_coords: (zona.polygon_coords && typeof zona.polygon_coords !== 'string') 
                                    ? JSON.stringify(zona.polygon_coords) 
                                    : (zona.polygon_coords || ''),
                pago_domiciliario: zona.pago_domiciliario ?? 8000
            };
            this.nameCheck = { loading: false, available: true, message: '' };
            this.modalZona = true;
            setTimeout(() => {
                this.initMap();
                this.loadExistingPolygon();
            }, 300);
        },

        confirmCancel() {
            if (this.currentPolygon) {
                this.currentPolygon.setMap(null);
                this.currentPolygon = null;
            }
            if (this.drawingManager) {
                this.drawingManager.setDrawingMode(null);
            }
            this.modalZona = false;
        },

        handleSearch() {
            // Guardar preferencia de paginación
            localStorage.setItem('zonas_per_page', this.perPage);
            
            clearTimeout(this.searchTimeout);
            this.searchTimeout = setTimeout(() => {
                this.fetchZonas();
            }, 500);
        },

        fetchZonas() {
            const params = new URLSearchParams({
                q: this.search,
                status: this.status,
                per_page: this.perPage,
                sort_by: this.sortBy,
                order: this.sortOrder
            });

            fetch(`{{ route('zonas.index') }}?${params.toString()}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(res => res.text())
            .then(html => {
                document.getElementById('zonas-table-container').innerHTML = html;
            })
            .catch(err => console.error('Error fetching:', err));
        },

        handleSortChange() {
            this.fetchZonas();
        },

        toggleSortOrder() {
            this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
            this.fetchZonas();
        },

        async toggleStatus(id) {
            this.loadingToggle = id;
            try {
                const res = await fetch(`/zonas/${id}/toggle-status`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                });
                const data = await res.json();
                if (data.success) {
                    this.fetchZonas();
                    window.dispatchEvent(new CustomEvent('notify', {
                        detail: { type: 'success', title: 'Actualizado', message: data.message }
                    }));
                }
            } catch (err) {
                console.error(err);
            } finally {
                this.loadingToggle = null;
            }
        },
        
        async fetchMarkers() {
            try {
                const response = await fetch('{{ route("zonas.markers") }}');
                this.globalMarkers = await response.json();
            } catch (error) {
                console.error('Error al cargar marcadores:', error);
            }
        },

        async openGlobalMap() {
            this.showGlobalMap = true;
            
            // Cargar marcadores asíncronamente
            await this.fetchMarkers();

            // Pequeño retardo para asegurar que el modal y el contenedor tengan dimensiones finales
            setTimeout(() => {
                this.initGlobalMap();
                // Segundo reajuste por si la transición de Alpine.js aún estaba en curso
                setTimeout(() => {
                    if (this.globalMap) {
                        google.maps.event.trigger(this.globalMap, 'resize');
                    }
                }, 300);
            }, 100);
        },

        initGlobalMap() {
            const mapContainer = document.getElementById('global-map-canvas');
            if (!mapContainer) return;

            // Centrar mapa inicialmente en Bogotá o punto medio si hay zonas
            this.globalMap = new google.maps.Map(mapContainer, {
                center: { lat: 4.6097, lng: -74.0817 },
                zoom: 12,
                styles: [
                    { "featureType": "poi", "stylers": [{ "visibility": "off" }] }
                ]
            });

            const bounds = new google.maps.LatLngBounds();
            let hasPoints = false;

            this.allZonas.forEach(zona => {
                if (!zona.polygon_coords) return;
                
                try {
                    // Los datos ya vienen como objeto/array gracias al casting de Laravel
                    let coords = zona.polygon_coords;
                    
                    // Si por alguna razón llegara como string (fallback de seguridad)
                    if (typeof coords === 'string') {
                        coords = JSON.parse(coords);
                    }
                    
                    if (Array.isArray(coords) && coords.length > 0) {
                        const color = this.generateColorFromName(zona.nombre_zona);
                        const polygon = new google.maps.Polygon({
                            paths: coords,
                            fillColor: color,
                            fillOpacity: 0.35,
                            strokeColor: color,
                            strokeWeight: 2,
                            map: this.globalMap
                        });

                        // InfoWindow con diseño mejorado
                        const tarifaNombre = zona.tarifa ? zona.tarifa.nombre : 'Sin tarifa';
                        const tarifaPrecio = zona.tarifa ? new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP' }).format(zona.tarifa.precio_base) : '$0';
                        const clientesCount = zona.direcciones_count || 0;
                        
                        const infoWindow = new google.maps.InfoWindow({
                            content: `
                                <div class="p-3 min-w-[200px]">
                                    <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Zona de Entrega</div>
                                    <div class="text-base font-bold text-slate-800 mb-2 border-b border-slate-100 pb-1">${zona.nombre_zona}</div>
                                    
                                    <div class="grid grid-cols-2 gap-2 mt-2">
                                        <div class="p-2 bg-indigo-50 rounded-xl">
                                            <div class="text-[9px] font-bold text-slate-400 uppercase leading-tight">Clientes</div>
                                            <div class="text-sm font-bold text-indigo-600">${clientesCount}</div>
                                        </div>
                                        <div class="p-2 bg-slate-50 rounded-xl">
                                            <div class="text-[9px] font-bold text-slate-400 uppercase leading-tight">Tarifa</div>
                                            <div class="text-sm font-bold text-slate-700">${tarifaPrecio}</div>
                                        </div>
                                    </div>
                                    
                                    <div class="mt-3 text-[10px] text-slate-400 italic">
                                        Tipo de tarifa: <span class="text-slate-600 font-medium">${tarifaNombre}</span>
                                    </div>
                                </div>
                            `
                        });

                        polygon.addListener('click', (event) => {
                            infoWindow.setPosition(event.latLng);
                            infoWindow.open(this.globalMap);
                        });

                        coords.forEach(c => {
                            if (c.lat && c.lng) {
                                bounds.extend(new google.maps.LatLng(c.lat, c.lng));
                                hasPoints = true;
                            }
                        });

                        this.globalPolygons.push(polygon);
                    }
                } catch(e) {
                    console.error("Error drawing polygon for", zona.nombre_zona, e);
                }
            });
            
            // Dibujar Marcadores de Clientes
            const markers = [];
            this.globalMarkers.forEach(m => {
                const color = this.generateColorFromName(this.allZonas.find(z => z.id == m.zona_id)?.nombre_zona);
                
                const marker = new google.maps.Marker({
                    position: { lat: m.lat, lng: m.lng },
                    map: this.globalMap,
                    title: m.cliente,
                    visible: this.globalMap.getZoom() >= 14, // Solo visibles si hay zoom suficiente
                    icon: {
                        path: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z",
                        fillColor: color,
                        fillOpacity: 1,
                        strokeColor: '#FFFFFF',
                        strokeWeight: 2,
                        scale: 1.5,
                        anchor: new google.maps.Point(12, 22)
                    }
                });

                const info = new google.maps.InfoWindow({
                    content: `
                        <div class="p-2">
                            <div class="text-xs font-bold text-slate-800">${m.cliente}</div>
                            <div class="text-[10px] text-slate-500 mt-1">${m.direccion}</div>
                        </div>
                    `
                });

                marker.addListener('click', () => info.open(this.globalMap, marker));
                markers.push(marker);
            });

            // Listener de Zoom para mostrar/ocultar puntos
            google.maps.event.addListener(this.globalMap, 'zoom_changed', () => {
                const isVisible = this.globalMap.getZoom() >= 14;
                markers.forEach(m => m.setVisible(isVisible));
            });

            if (hasPoints) {
                this.globalMap.fitBounds(bounds);
            }
        },

        confirmDelete(id, nombre) {
            this.deleteModal.action = `/zonas/${id}`;
            this.deleteModal.nombre = nombre;
            this.deleteModal.open = true;
        },

        submitForm(event) {
            // No permitir si no está disponible y se ha intentado validar
            if (this.form.nombre_zona.length >= 3 && !this.nameCheck.available) {
                return;
            }

            // Guardar en localStorage antes de enviar
            if (this.form.tarifa_id) {
                localStorage.setItem('last_selected_tarifa_id', this.form.tarifa_id);
            }
            if (this.form.pago_domiciliario) {
                localStorage.setItem('last_pago_domiciliario', this.form.pago_domiciliario);
            }
            event.target.submit();
        }
    }
}
</script>
@endpush
@endsection