@extends('layouts.app')

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

{{--
    CENTRO DE COMANDOS DE CLIENTES (CRM)
    Integra múltiples modales y funcionalidades asíncronas para administrar la cartera de clientes.
    Destaca su integración con Google Maps para detectar zonas por colisión de polígonos.
--}}
@section('content')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('clientDashboardManager', () => ({
                // Estados de Modales
                openClientModal: false,
                openAddressModal: false,
                openExportClientsModal: false,
                openImportModal: false,
                loadingBulk: false,
                openDataDropdown: false,
                openViewDropdown: false, // Nuevo: para el dropdown de vista en filtros

                // Configuración de visualización de tabla
                tableColumns: {
                    numero: true,
                    cliente: true,
                    contacto: true,
                    ubicacion: true,
                    zona: true,
                    clasificacion: true,
                    acciones: true
                },
                sortBy: @json(request('sort_by', 'nombre_completo')),
                sortDir: @json(request('sort_dir', 'asc')),

                // Formulario Principal
                isEdit: false,
                activeTab: 'datos',

                // Datos del Negocio (Inyectados desde PHP)
                zonas: @js($zonas),
                clientData: {
                    id: null,
                    nombre_completo: '',
                    tipo_documento: 'CC',
                    numero_documento: '',
                    telefono: '',
                    email: '',
                    tipo_cliente: 'general',
                    es_recurrente: false,
                    tipo_recurrencia: 'manual',
                    config_recurrencia: {
                        frecuencia: 'semanal',
                        dias_semana: []
                    },
                    notas_internas: '',
                    direccion: '',
                    detalles: '',
                    barrio: '',
                    lat: null,
                    lng: null,
                    zona_id: ''
                },

                // Recurrencia y Plantillas
                recurrenceConfig: {
                    frecuencia: 'semanal',
                    dias_semana: []
                },
                plantillaItems: [],

                // Gestión de Direcciones Secundarias
                showForm: false,
                addresses: [],
                loadingAddresses: false,
                addressForm: {
                    id: null,
                    direccion: '',
                    detalles: '',
                    barrio: '',
                    zona_id: '',
                    lat: '',
                    lng: '',
                    contacto_nombre: '',
                    contacto_telefono: '',
                    es_principal: false
                },

                // Importador Masivo
                openImportModal: false,
                importData: '',
                previewData: [],

                // Modal de Confirmación Localizado
                localConfirm: {
                    open: false,
                    title: '',
                    message: '',
                    icon: 'warning',
                    confirmText: 'Confirmar',
                    confirmColor: 'indigo',
                    hideCancel: false,
                    type: 'action',
                    action: '',
                    onConfirm: null
                },

                // WhatsApp Templates
                waTemplates: { disponibilidad: '' },
                baseUrl: '{{ url("/") }}',

                // Gestión de Saldos
                openBalanceModal: false,
                selectedClient: null,
                balanceForm: {
                    monto: 0,
                    accion: 'add', // 'add' (sumar) o 'subtract' (restar) o 'set' (establecer)
                    motivo: ''
                },

                adjustBalance(cliente) {
                    this.selectedClient = cliente;
                    this.balanceForm.monto = 0;
                    this.balanceForm.accion = 'add';
                    this.balanceForm.motivo = '';
                    this.openBalanceModal = true;
                },

                async saveBalanceAdjustment() {
                    if (this.balanceForm.monto <= 0 && this.balanceForm.accion !== 'set') {
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Dato Inválido', message: 'El monto debe ser mayor a 0.', type: 'warning' } }));
                        return;
                    }

                    try {
                        const response = await fetch(`${this.baseUrl}/clientes/${this.selectedClient.id}/adjust-balance`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify(this.balanceForm)
                        });
                        
                        const data = await response.json();
                        if (data.success) {
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Éxito', message: 'Saldo actualizado correctamente.', type: 'success' } }));
                            this.openBalanceModal = false;
                            // Recargar la tabla para ver el nuevo saldo
                            this.performSearch();
                        } else {
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: data.message || 'Error al actualizar saldo.', type: 'error' } }));
                        }
                    } catch (e) {
                        console.error("Error ajustando saldo:", e);
                    }
                },

                async fetchWATemplates() {
                    try {
                        const res = await fetch(`${this.baseUrl}/settings/whatsapp-templates`);
                        this.waTemplates = await res.json();
                    } catch (e) {
                        console.error("Error fetching WA templates:", e);
                    }
                },

                async sendAvailability(cliente) {
                    if (!cliente.telefono) {
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Falta Teléfono', message: 'El cliente no tiene teléfono registrado.', type: 'error' } }));
                        return;
                    }

                    try {
                        // Obtener productos disponibles formateados
                        const res = await fetch(`${this.baseUrl}/whatsapp/availability`);
                        const data = await res.json();
                        
                        const productosFormateados = data.productos_formateados;

                        let template = this.waTemplates.disponibilidad;
                        if (!template || template.trim() === "") {
                            template = "Hola {cliente}, esta es nuestra disponibilidad para hoy {fecha}:\n{lista_productos}\n\n🏍️ _Domicilio {costo_domicilio}_\nQuedamos atentos a tomar ✍🏼 su pedido!";
                        }
                        
                        let message = template;
                        
                        // Cálculo dinámico del costo de domicilio según zona
                        const principalAddr = (cliente.direcciones || []).find(a => a.es_principal) || (cliente.direcciones || [])[0];
                        const costoDomicilio = principalAddr?.zona?.tarifa?.precio_base || data.costo_domicilio || 7500;
                        const costoFormateado = '$' + new Intl.NumberFormat('es-CO').format(costoDomicilio);

                        message = message.replace(/{cliente}/g, cliente.nombre_completo)
                                        .replace(/{fecha}/g, data.fecha)
                                        .replace(/{lista_productos}/g, productosFormateados)
                                        .replace(/{costo_domicilio}/g, costoFormateado);

                        const phone = (cliente.telefono || '').replace(/\D/g, '');
                        const url = `https://api.whatsapp.com/send?phone=57${phone}&text=${encodeURIComponent(message.trim())}`;
                        window.open(url, '_blank');
                    } catch (e) {
                        console.error("Error sending availability:", e);
                    }
                },

                async copyAvailability(cliente) {
                    try {
                        const res = await fetch(`${this.baseUrl}/whatsapp/availability`);
                        const data = await res.json();
                        
                        const productosFormateados = data.productos_formateados;

                        let template = this.waTemplates.disponibilidad;
                        if (!template || template.trim() === "") {
                            template = "Hola {cliente}, esta es nuestra disponibilidad para hoy {fecha}:\n{lista_productos}\n\n🏍️ _Domicilio {costo_domicilio}_\nQuedamos atentos a tomar ✍🏼 su pedido!";
                        }
                        
                        let message = template;
                        
                        const principalAddr = (cliente.direcciones || []).find(a => a.es_principal) || (cliente.direcciones || [])[0];
                        const costoDomicilio = principalAddr?.zona?.tarifa?.precio_base || data.costo_domicilio || 7500;
                        const costoFormateado = '$' + new Intl.NumberFormat('es-CO').format(costoDomicilio);

                        message = message.replace(/{cliente}/g, cliente.nombre_completo)
                                        .replace(/{fecha}/g, data.fecha)
                                        .replace(/{lista_productos}/g, productosFormateados)
                                        .replace(/{costo_domicilio}/g, costoFormateado);

                        await navigator.clipboard.writeText(message.trim());
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Copiado', message: 'Disponibilidad copiada al portapapeles.', type: 'success' } }));
                    } catch (e) {
                        console.error("Error copying availability:", e);
                    }
                },

                // Recursos Geográficos
                mainMap: null,
                mainMarker: null,
                addressAutocomplete: null,

                // Variables locales para búsquedas
                searchQuery: '',
                filterTipo: @json(request('tipo_cliente', '')),
                filterZona: @json(request('zona_id', '')),
                filterRecurrente: @json(request('es_recurrente', '')),
                filterSoloPendientes: @json(request('solo_pendientes', false)),
                perPage: @json(request('per_page', '15')),
                loadingSearch: false,
                asyncResults: [],
                hasAsyncResults: false,
                totalResults: {{ $clientes->total() }},
                
                // Progreso de procesos masivos
                bulkProgress: { total: 0, current: 0, updated: 0, failed: 0, noZone: 0, isRunning: false },
                bulkForceAll: false,

                init() {
                    console.log('clientDashboardManager inicializado exitosamente');
                    this.fetchWATemplates();
                    
                    // Inicializar búsqueda si hay un query en la URL (opcional)
                    const urlParams = new URLSearchParams(window.location.search);
                    if (urlParams.has('search')) {
                        this.searchQuery = urlParams.get('search');
                    }

                    if (urlParams.has('edit')) {
                        const editId = urlParams.get('edit');
                        fetch(`{{ url('clientes') }}/${editId}`, {
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        })
                        .then(res => res.json())
                        .then(data => {
                            if (data && data.id) {
                                this.prepareEdit(data);
                            }
                        })
                        .catch(err => console.error("Error cargando cliente para editar:", err));
                        
                        // Limpiar la URL
                        const newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
                        window.history.pushState({path:newUrl},'',newUrl);
                    }

                    this.$nextTick(() => {
                        setTimeout(() => this.runGeoAudit(), 1500);
                    });

                    this.$watch('openClientModal', value => {
                        if (value) {
                            this.activeTab = 'datos';
                            if (this.isEdit && this.clientData.id) {
                                this.loadClientAddresses();
                                this.loadRecurrenceData();
                            }
                        }
                    });

                    this.$watch('openAddressModal', value => {
                        if (value) {
                            this.showForm = false;
                            if (this.clientData && this.clientData.id) {
                                this.loadClientAddresses();
                            }
                        } else {
                            this.showForm = false;
                        }
                    });

                    this.$watch('activeTab', value => {
                        if (value === 'direccion') {
                            this.$nextTick(() => {
                                setTimeout(() => {
                                    this.setupMainMap();
                                }, 300);
                            });
                        }
                    });

                    this.$watch('showForm', value => {
                        if (value) {
                            this.$nextTick(() => {
                                setTimeout(() => {
                                    this.setupAddressManagerMap();
                                }, 300);
                            });
                        }
                    });
                },

                async performSearch() {
                    // Si el buscador tiene texto pero es muy corto, no hacemos nada (evitar ruido)
                    if (this.searchQuery.length > 0 && this.searchQuery.length < 2) return;
                    
                    this.loadingSearch = true;
                    try {
                        const url = new URL('{{ route("clientes.index") }}');
                        if (this.searchQuery) url.searchParams.set('search', this.searchQuery);
                        if (this.filterTipo) url.searchParams.set('tipo_cliente', this.filterTipo);
                        if (this.filterZona) url.searchParams.set('zona_id', this.filterZona);
                        if (this.filterRecurrente) url.searchParams.set('es_recurrente', this.filterRecurrente);
                        if (this.filterSoloPendientes) url.searchParams.set('solo_pendientes', '1');
                        if (this.perPage) url.searchParams.set('per_page', this.perPage);
                        
                        const response = await fetch(url.toString(), {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        });
                        
                        const html = await response.text();
                        const container = document.getElementById('clients-table-container');
                        if (container) {
                            container.innerHTML = html;
                            this.$nextTick(() => {
                                this.runGeoAudit();
                            });
                            // Sincronizar el total de resultados desde el input oculto en el HTML devuelto
                            const totalHidden = document.getElementById('total-results-hidden');
                            if (totalHidden) {
                                this.totalResults = totalHidden.value;
                            }
                        }
                        
                        this.hasAsyncResults = !!(this.searchQuery || this.filterTipo || this.filterZona || this.filterRecurrente || this.filterSoloPendientes);
                    } catch (e) {
                        console.error("Search error:", e);
                    } finally {
                        this.loadingSearch = false;
                    }
                },

                clearSearch() {
                    this.searchQuery = '';
                    this.filterTipo = '';
                    this.filterZona = '';
                    this.filterRecurrente = '';
                    this.filterSoloPendientes = false;
                    this.perPage = '15';
                    this.performSearch();
                },

                resetClientData() {
                    this.clientData = {
                        id: null,
                        nombre_completo: '',
                        tipo_documento: 'CC',
                        numero_documento: '',
                        telefono: '',
                        email: '',
                        tipo_cliente: 'general',
                        es_recurrente: false,
                        tipo_recurrencia: 'manual',
                        config_recurrencia: {
                            frecuencia: 'semanal',
                            dias_semana: []
                        },
                        notas_internas: '',
                        direccion: '',
                        detalles: '',
                        barrio: '',
                        lat: null,
                        lng: null,
                        zona_id: ''
                    };
                },

                prepareEdit(client) {
                    this.isEdit = true;
                    this.activeTab = 'datos';
                    let clientCopy = Object.assign({}, client);

                    // Procesar dirección principal si existe
                    if (clientCopy.direcciones && clientCopy.direcciones.length > 0) {
                        let mainAddr = clientCopy.direcciones.find(d => d.es_principal) || clientCopy.direcciones[0];
                        clientCopy.direccion = mainAddr.direccion;
                        clientCopy.detalles = mainAddr.detalles;
                        clientCopy.barrio = mainAddr.barrio;
                        clientCopy.lat = mainAddr.lat;
                        clientCopy.lng = mainAddr.lng;
                        clientCopy.zona_id = mainAddr.tarifa_zona_id;
                    }

                    // Asegurar estructura de recurrencia
                    clientCopy.tipo_recurrencia = clientCopy.tipo_recurrencia || 'manual';
                    if (!clientCopy.config_recurrencia || typeof clientCopy.config_recurrencia !== 'object') {
                        clientCopy.config_recurrencia = {
                            frecuencia: 'semanal',
                            dias_semana: []
                        };
                    }

                    // Sincronizar configurador visual de recurrencia
                    this.recurrenceConfig.frecuencia = clientCopy.config_recurrencia.frecuencia || 'semanal';
                    this.recurrenceConfig.dias_semana = Array.isArray(clientCopy.config_recurrencia.dias_semana) ? [...clientCopy.config_recurrencia.dias_semana] : [];

                    this.clientData = clientCopy;
                    this.openClientModal = true;
                },

                setupMainMap() {
                    const el = document.getElementById('client-mini-map');
                    if (!el || typeof google === 'undefined') return;

                    const pos = (this.clientData.lat && this.clientData.lng) ?
                        {
                            lat: parseFloat(this.clientData.lat),
                            lng: parseFloat(this.clientData.lng)
                        } :
                        {
                            lat: 6.2442,
                            lng: -75.5812
                        };

                    this.mainMap = new google.maps.Map(el, {
                        center: pos,
                        zoom: 16,
                        mapTypeControl: false,
                        streetViewControl: false
                    });

                    this.mainMarker = new google.maps.Marker({
                        position: pos,
                        map: this.mainMap,
                        draggable: true
                    });

                    const input = document.getElementById('address-input');
                    if (input && !this.addressAutocomplete) {
                        this.addressAutocomplete = new google.maps.places.Autocomplete(input, {
                            componentRestrictions: {
                                country: 'co'
                            },
                            fields: ['geometry', 'formatted_address']
                        });

                        this.addressAutocomplete.addListener('place_changed', () => {
                            const place = this.addressAutocomplete.getPlace();
                            if (place.geometry) {
                                this.clientData.direccion = place.formatted_address || '';
                                const newLoc = {
                                    lat: place.geometry.location.lat(),
                                    lng: place.geometry.location.lng()
                                };
                                this.updateMainLocation(newLoc.lat, newLoc.lng);
                            }
                        });
                    }

                    this.mainMarker.addListener('dragend', () => {
                        const p = this.mainMarker.getPosition();
                        this.updateMainLocation(p.lat(), p.lng());
                    });
                },

                updateMainLocation(lat, lng) {
                    this.clientData.lat = lat;
                    this.clientData.lng = lng;
                    this.mainMap.setCenter({
                        lat,
                        lng
                    });
                    this.mainMarker.setPosition({
                        lat,
                        lng
                    });
                    this.autoDetectZone(lat, lng);
                },

                autoDetectZone(lat, lng, target = 'clientData') {
                    if (typeof google === 'undefined' || !google.maps.geometry) return;
                    const pt = new google.maps.LatLng(lat, lng);
                    let detectedId = '';
                    for (let z of this.zonas) {
                        if (!z.polygon_coords) continue;
                        const poly = new google.maps.Polygon({
                            paths: z.polygon_coords
                        });
                        if (google.maps.geometry.poly.containsLocation(pt, poly)) {
                            detectedId = z.id;
                            break;
                        }
                    }
                    if (target === 'clientData') this.clientData.zona_id = detectedId;
                    else if (target === 'addressForm') this.addressForm.zona_id = detectedId;
                },

                toggleTableColumn(c) {
                    if (this.tableColumns.hasOwnProperty(c)) this.tableColumns[c] = !this.tableColumns[c];
                },

                setSort(c) {
                    const params = new URLSearchParams(window.location.search);
                    const currentSort = params.get('sort_by');
                    const currentDir = params.get('sort_dir') || 'asc';
                    params.set('sort_by', c);
                    params.set('sort_dir', (currentSort === c && currentDir === 'asc') ? 'desc' : 'asc');
                    window.location.search = params.toString();
                },

                async suggestZone() {
                    if (!this.clientData.barrio || this.clientData.barrio.length < 3) return;
                    try {
                        const response = await fetch(`${this.baseUrl}/zonas/suggest-by-neighborhood?barrio=${encodeURIComponent(this.clientData.barrio)}`);
                        if (response.ok) {
                            const data = await response.json();
                            if (data.success && data.zona) {
                                this.clientData.zona_id = data.zona.id;
                            }
                        }
                    } catch(e) {
                        console.error("Error auto-detectando zona:", e);
                    }
                },

                submitForm() {
                    if (!this.clientData.nombre_completo || !this.clientData.telefono) {
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Faltan Datos', message: 'Nombre y teléfono son requeridos.', type: 'warning' } }));
                        this.activeTab = 'datos';
                        return;
                    }
                    document.getElementById('clientForm').submit();
                },

                async loadClientAddresses() {
                    if (!this.clientData.id) return;
                    this.loadingAddresses = true;
                    try {
                        const r = await fetch(`{{ url('clientes') }}/${this.clientData.id}/addresses`);
                        this.addresses = await r.json();
                    } catch (e) {
                        console.error(e);
                    } finally {
                        this.loadingAddresses = false;
                    }
                },

                formatCurrency(n) {
                    return new Intl.NumberFormat('es-CO').format(n);
                },

                async markMainAddress(id) {
                    try {
                        const r = await fetch(`{{ url('direcciones-clientes') }}/${id}/set-main`, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            }
                        });
                        const d = await r.json();
                        if (d.success) this.loadClientAddresses();
                    } catch (e) {
                        console.error(e);
                    }
                },

                async saveNewAddress() {
                    if (!this.addressForm.direccion) {
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Campo Requerido', message: 'Dirección requerida', type: 'warning' } }));
                        return;
                    }
                    try {
                        const r = await fetch(`{{ url('clientes') }}/${this.clientData.id}/addresses`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify(this.addressForm)
                        });
                        const d = await r.json();
                        if (d.success) {
                            this.showForm = false;
                            this.loadClientAddresses();
                        } else {
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: d.message || 'Error al guardar', type: 'error' } }));
                        }
                    } catch (e) {
                        console.error(e);
                    }
                },

                async removeAddress(id) {
                    window.dispatchEvent(new CustomEvent('open-confirm', {
                        detail: {
                            title: 'Eliminar Dirección',
                            message: '¿Estás seguro de que deseas eliminar esta dirección de entrega? Esta acción no se puede deshacer.',
                            type: 'danger',
                            callback: async () => {
                                try {
                                    const r = await fetch(`{{ url('direcciones-clientes') }}/${id}`, {
                                        method: 'DELETE',
                                        headers: { 
                                            'Accept': 'application/json',
                                            'X-CSRF-TOKEN': '{{ csrf_token() }}' 
                                        }
                                    });
                                    const d = await r.json();
                                    if (d.success) {
                                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Eliminada', message: 'La dirección ha sido eliminada con éxito.', type: 'success' } }));
                                        await this.loadClientAddresses();
                                    } else {
                                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'No se pudo eliminar', message: d.message || 'No se pudo eliminar la dirección.', type: 'error' } }));
                                    }
                                } catch (e) {
                                    console.error('Error al eliminar dirección:', e);
                                    window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: 'Error de conexión con el servidor al eliminar.', type: 'error' } }));
                                }
                            }
                        }
                    }));
                },

                async loadRecurrenceData() {
                    if (!this.clientData.id) return;
                    try {
                        const r = await fetch(`{{ url('clientes') }}/${this.clientData.id}/plantilla`);
                        this.plantillaItems = await r.json();
                    } catch (e) {
                        console.error(e);
                    }
                },

                toggleRecurrenceDay(d) {
                    const i = this.recurrenceConfig.dias_semana.indexOf(d);
                    if (i > -1) this.recurrenceConfig.dias_semana.splice(i, 1);
                    else this.recurrenceConfig.dias_semana.push(d);
                },

                async saveRecurrence() {
                    if (!this.clientData.id) return;
                    this.clientData.config_recurrencia = {
                        frecuencia: this.recurrenceConfig.frecuencia,
                        dias_semana: this.recurrenceConfig.dias_semana
                    };
                    
                    try {
                        const r = await fetch(`{{ url('clientes') }}/${this.clientData.id}/recurrence`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                es_recurrente: this.clientData.es_recurrente,
                                tipo_recurrencia: this.clientData.tipo_recurrencia,
                                config_recurrencia: this.clientData.config_recurrencia
                            })
                        });
                        const d = await r.json();
                        if (d.success) {
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Guardado', message: 'Configuración guardada', type: 'success' } }));
                        }
                    } catch (e) {
                        console.error(e);
                    }
                },

                async savePlantilla() {
                    if (!this.clientData.id) return;
                    try {
                        const r = await fetch(`{{ url('clientes') }}/${this.clientData.id}/plantilla`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({ productos: this.plantillaItems })
                        });
                        const d = await r.json();
                        if (d.success) {
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Guardado', message: 'Plantilla guardada', type: 'success' } }));
                        }
                    } catch (e) {
                        console.error(e);
                    }
                },

                addToPlantilla(p) {
                    const e = this.plantillaItems.find(i => (i.producto_id || i.id) === p.id);
                    if (e) e.cantidad++;
                    else this.plantillaItems.push({ ...p,
                        producto_id: p.id,
                        cantidad: 1
                    });
                },

                setupAddressManagerMap() {
                    const el = document.getElementById('address-manager-map');
                    if (!el || typeof google === 'undefined') return;
                    const center = {
                        lat: 6.2442,
                        lng: -75.5812
                    };
                    const m = new google.maps.Map(el, {
                        center,
                        zoom: 13,
                        mapTypeControl: false
                    });
                    const mk = new google.maps.Marker({
                        map: m,
                        draggable: true,
                        position: center
                    });
                    const input = document.getElementById('mgr-address-input');
                    if (input) {
                        const auto = new google.maps.places.Autocomplete(input, {
                            componentRestrictions: {
                                country: 'co'
                            }
                        });
                        auto.addListener('place_changed', () => {
                            const p = auto.getPlace();
                            if (p.geometry) {
                                const l = p.geometry.location;
                                mk.setPosition(l);
                                m.setCenter(l);
                                this.addressForm.lat = l.lat();
                                this.addressForm.lng = l.lng();
                                this.autoDetectZone(l.lat(), l.lng(), 'addressForm');
                            }
                        });
                    }
                    mk.addListener('dragend', () => {
                        const p = mk.getPosition();
                        this.addressForm.lat = p.lat();
                        this.addressForm.lng = p.lng();
                        this.autoDetectZone(p.lat(), p.lng(), 'addressForm');
                    });
                },

                confirmDeletion(c) {
                    this.localConfirm = {
                        open: true,
                        title: '¿Eliminar Cliente?',
                        message: `Seguro que deseas eliminar a ${c.nombre_completo}?`,
                        icon: 'danger',
                        confirmText: 'Sí, Eliminar',
                        confirmColor: 'red',
                        type: 'delete',
                        action: `{{ url('clientes') }}/${c.id}`
                    };
                },

                confirmBulkZones() {
                    this.localConfirm = {
                        open: true,
                        title: 'Detección Masiva',
                        message: '¿Iniciar detección de zonas para todos los clientes sin zona asignada?',
                        icon: 'warning',
                        confirmText: 'Iniciar Proceso',
                        confirmColor: 'emerald',
                        type: 'action',
                        showExtra: 'bulkZones',
                        onConfirm: () => {
                            this.localConfirm.open = false;
                            this.executeBulkDetection();
                        }
                    };
                },

                async executeBulkDetection() {
                    if (!this.bulkProgress.isRunning) {
                        this.bulkProgress = { total: 0, current: 0, updated: 0, failed: 0, noZone: 0, isRunning: true };
                        this.loadingBulk = true;
                    }

                    try {
                        // El offset depende de si estamos forzando todo o solo procesando pendientes
                        // Si es forceAll, avanzamos por el total procesado. Si no, solo por los que fallaron (que siguen siendo NULL)
                        const offset = this.bulkForceAll ? this.bulkProgress.current : (this.bulkProgress.failed + this.bulkProgress.noZone);
                        
                        const r = await fetch(`{{ url('clientes/bulk-detect-zones') }}?batch_size=100&offset=${offset}&force_all=${this.bulkForceAll ? 1 : 0}`, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json'
                            }
                        });
                        const d = await r.json();

                        if (!d.success) throw new Error(d.message);
                        if (d.processed === 0) {
                            // Si no procesó nada pero d.remaining > 0, podría haber un problema de lógica en el offset
                            this.loadingBulk = false;
                            this.bulkProgress.isRunning = false;
                            return;
                        }

                        // Inicializar total en la primera vuelta
                        if (this.bulkProgress.total === 0) {
                            this.bulkProgress.total = d.processed + d.remaining;
                        }

                        // Acumular progreso
                        this.bulkProgress.current += d.processed;
                        this.bulkProgress.updated += d.stats.updated;
                        this.bulkProgress.failed += d.stats.failed_geocode;
                        this.bulkProgress.noZone += d.stats.no_zone;

                        // Si quedan registros, seguir procesando
                        if (d.remaining > 0) {
                            await this.executeBulkDetection();
                        } else {
                            // Proceso terminado
                            this.loadingBulk = false;
                            this.bulkProgress.isRunning = false;

                            this.localConfirm = {
                                open: true,
                                title: 'Proceso Masivo Finalizado',
                                message: `Se procesaron ${this.bulkProgress.total} registros:\n- Exitosos: ${this.bulkProgress.updated}\n- Sin coordenadas: ${this.bulkProgress.failed}\n- Sin zona encontrada: ${this.bulkProgress.noZone}`,
                                icon: 'success',
                                confirmText: 'Entendido',
                                confirmColor: 'emerald',
                                hideCancel: true,
                                type: 'action',
                                onConfirm: () => {
                                    this.localConfirm.open = false;
                                    location.reload();
                                }
                            };
                        }

                    } catch (e) {
                        console.error(e);
                        this.loadingBulk = false;
                        this.bulkProgress.isRunning = false;
                        
                        this.localConfirm = {
                            open: true,
                            title: 'Error en el Proceso',
                            message: 'El proceso se detuvo debido a un error: ' + e.message,
                            icon: 'danger',
                            confirmText: 'Cerrar',
                            confirmColor: 'red',
                            hideCancel: true,
                            type: 'action',
                            onConfirm: () => this.localConfirm.open = false
                        };
                    }
                },

                parseClientsData() {
                    if (!this.importData) {
                        this.previewData = [];
                        return;
                    }
                    const lines = this.importData.trim().split('\n');
                    this.previewData = lines
                        .map(line => line.split('\t'))
                        .filter(cols => cols.length > 1 || cols[0].trim().length > 0);
                },

                runGeoAudit() {
                    if (typeof google === 'undefined' || !google.maps.geometry) {
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Librería No Cargada', message: 'Google Maps Geometry no está lista.', type: 'error' } }));
                        return;
                    }

                    const cells = document.querySelectorAll('.geo-audit-cell');
                    
                    // 1. Agrupar por barrios para análisis de consistencia (Cluster)
                    const barrioClusters = {};
                    
                    cells.forEach(cell => {
                        const lat = parseFloat(cell.getAttribute('data-lat'));
                        const lng = parseFloat(cell.getAttribute('data-lng'));
                        const barrio = cell.getAttribute('data-barrio');
                        
                        if (!isNaN(lat) && !isNaN(lng) && barrio && barrio.length > 2) {
                            if (!barrioClusters[barrio]) barrioClusters[barrio] = [];
                            barrioClusters[barrio].push({ lat, lng });
                        }
                    });

                    // 2. Calcular centros de barrios (Promedios)
                    const barrioCenters = {};
                    for (let b in barrioClusters) {
                        const pts = barrioClusters[b];
                        const avgLat = pts.reduce((sum, p) => sum + p.lat, 0) / pts.length;
                        const avgLng = pts.reduce((sum, p) => sum + p.lng, 0) / pts.length;
                        barrioCenters[b] = { lat: avgLat, lng: avgLng };
                    }

                    // 3. Ejecutar Auditoría por Celda
                    cells.forEach(cell => {
                        const lat = parseFloat(cell.getAttribute('data-lat'));
                        const lng = parseFloat(cell.getAttribute('data-lng'));
                        const zonaId = cell.getAttribute('data-zona-id');
                        const barrio = cell.getAttribute('data-barrio');
                        const indicator = cell.querySelector('.geo-status-indicator');
                        
                        if (!indicator) return;

                        if (isNaN(lat) || isNaN(lng)) {
                            indicator.innerHTML = `<span title="Sin Coordenadas" class="cursor-help text-amber-500 text-sm">⚠️</span>`;
                            return;
                        }

                        const pt = new google.maps.LatLng(lat, lng);
                        let status = 'ok';
                        let warningDetail = '';

                        // A. Verificar Integridad de Zona (¿Está dentro del polígono?)
                        const assignedZone = this.zonas.find(z => z.id == zonaId);
                        if (assignedZone && assignedZone.polygon_coords) {
                            const poly = new google.maps.Polygon({ paths: assignedZone.polygon_coords });
                            if (!google.maps.geometry.poly.containsLocation(pt, poly)) {
                                status = 'error_zona';
                                warningDetail = 'Coordenadas fuera de la zona asignada.';
                            }
                        } else if (!zonaId) {
                            status = 'no_zone';
                        }

                        // B. Verificar Consistencia de Barrio (¿Está cerca de sus vecinos del mismo barrio?)
                        if (status === 'ok' && barrioCenters[barrio] && barrioClusters[barrio].length > 1) {
                            const center = barrioCenters[barrio];
                            // Cálculo de distancia simple (Haversine simplificado para distancias cortas)
                            const dist = Math.sqrt(Math.pow(lat - center.lat, 2) + Math.pow(lng - center.lng, 2)) * 111320; // Aprox metros
                            
                            if (dist > 1200) { // Si está a más de 1.2km del centro del barrio
                                status = 'outlier_barrio';
                                warningDetail = `Posible error: Ubicación muy lejana a otros puntos del barrio ${barrio.toUpperCase()} (${Math.round(dist)}m de distancia)`;
                            }
                        }

                        // C. Renderizar Resultado
                        if (status === 'ok') {
                            indicator.innerHTML = `<span title="Ubicación Correcta" class="text-emerald-500">✅</span>`;
                        } else if (status === 'no_zone') {
                            indicator.innerHTML = `<span title="Zona No Asignada" class="cursor-help text-slate-400">❓</span>`;
                        } else if (status === 'error_zona') {
                            indicator.innerHTML = `<span title="${warningDetail}" class="cursor-help text-rose-500 animate-pulse">🚩</span>`;
                        } else if (status === 'outlier_barrio') {
                            indicator.innerHTML = `<span title="${warningDetail}" class="cursor-help text-orange-500 drop-shadow-sm">📍</span>`;
                        }
                    });

                    window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Auditoría Finalizada', message: 'Se validaron zonas y consistencia de barrios.', type: 'info' } }));
                }
            }));
        });
    </script>

    <div x-data="clientDashboardManager" 
         @open-import-modal.window="openImportModal = true"
         @open-modal.window="if($event.detail === 'clientModal') { 
            isEdit = false; 
            activeTab = 'datos';
            resetClientData();
            openClientModal = true; 
         }"
          @open-modal-edit.window="prepareEdit($event.detail)"
         @open-addresses.window="clientData = Object.assign({}, $event.detail); openAddressModal = true;"
         @open-export-clients.window="openExportClientsModal = true"
         @open-balance-adjustment.window="adjustBalance($event.detail)"
         @send-wa-availability.window="sendAvailability($event.detail)"
         @copy-wa-availability.window="copyAvailability($event.detail)"
         @open-addresses-custom.window="clientData = Object.assign({}, $event.detail); openAddressModal = true;"
         @open-modal-edit-custom.window="prepareEdit($event.detail)"
         @confirm-deletion-custom.window="confirmDeletion($event.detail)"
         class="p-6 md:p-8 space-y-8 animate-fade-in">

        <!-- Cabecera de la Página -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
            <div>
                <h2 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-2 tracking-tight">
                    Gestión 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">Clientes</span>
                </h2>
                <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Administra tu base de datos de clientes CRM</p>
            </div>
            
            <div class="flex flex-wrap gap-3">
                <!-- Dropdown Opciones de Datos -->
                <div class="relative">
                    <button type="button" @click="openDataDropdown = !openDataDropdown" @click.outside="openDataDropdown = false"
                        class="flex items-center gap-2 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 transition shadow-sm hover:shadow-md px-4 py-2.5 rounded-xl font-medium">
                        <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path>
                        </svg>
                        Datos
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>

                    <div x-show="openDataDropdown" x-transition.origin.top.right class="absolute right-0 mt-2 w-48 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-100 dark:border-slate-700 z-50 overflow-hidden" x-cloak>
                        <div class="py-2 border-t border-slate-100 dark:border-slate-700 mt-1">
                            <button type="button" @click="runGeoAudit(); openDataDropdown = false"
                                class="w-full flex items-center gap-2 px-4 py-2 text-xs font-bold text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 transition">
                                <span class="text-indigo-500">📍</span>
                                Auditar Ubicaciones
                            </button>
                            <button type="button" @click="openExportClientsModal = true; openDataDropdown = false"
                                class="w-full flex items-center gap-2 px-4 py-2 text-xs font-bold text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 transition">
                                <span class="text-emerald-500">📊</span>
                                Exportar Clientes
                            </button>
                        </div>
                        <button type="button" @click="openImportModal = true; openDataDropdown = false"
                            class="w-full flex items-center gap-3 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700 transition text-sm text-slate-700 dark:text-slate-300 border-t border-slate-100 dark:border-slate-700">
                            <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                            </svg>
                            Importar Clientes
                        </button>
                    </div>
                </div>

                <!-- Botón Detectar Zonas -->
                <button type="button" @click="confirmBulkZones()" x-show="!loadingBulk"
                    class="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-5 py-2.5 rounded-xl font-bold transition shadow-md hover:shadow-lg">
                    <svg class="w-5 h-5 font-bold" 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>
                    </svg>
                    Asignar Zonas
                </button>
                <div x-show="loadingBulk" class="flex items-center gap-3 bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-300 px-5 py-2.5 rounded-xl font-bold border border-slate-200 dark:border-slate-600" x-cloak>
                    <svg class="animate-spin h-4 w-4 text-emerald-500" 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-xs">Procesando: <span x-text="bulkProgress.current"></span> / <span x-text="bulkProgress.total"></span></span>
                </div>

                <!-- Botón Nuevo Cliente -->
                <button type="button" @click="$dispatch('open-modal', 'clientModal')"
                    class="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-xl font-bold transition shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
                    style="background-color: #4F46E5;">
                    <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"></path>
                    </svg>
                    Nuevo Cliente
                </button>
            </div>
        </div>

        {{-- Mensajes Flash --}}
        @if (session('success'))
            <div class="glass-card-premium border-l-4 border-emerald-500 p-4 mb-6 flex items-center justify-between"
                x-data="{ show: true }" x-show="show">
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-emerald-100 rounded-full text-emerald-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                    </div>
                    <div>
                        <h4 class="font-bold text-emerald-800">Operación Exitosa</h4>
                        <p class="text-sm text-emerald-600">{{ session('success') }}</p>
                    </div>
                </div>
                <button @click="show = false" class="text-emerald-400 hover:text-emerald-600 transition-colors">
                    <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>
        @endif

        @if ($errors->any())
            <div class="glass-card-premium border-l-4 border-red-500 p-4 mb-6">
                <div class="flex items-start gap-3">
                    <div class="p-2 bg-red-100 rounded-full text-red-600 mt-1">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                        </svg>
                    </div>
                    <div>
                        <h4 class="font-bold text-red-800">Se encontraron errores</h4>
                        <ul class="list-disc list-inside text-sm text-red-600 mt-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        {{-- Filtros --}}
        @include('clientes.partials.filters')

        {{-- Contador de Resultados --}}
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-4 px-2">
            <div class="flex items-center gap-2">
                <span class="text-xs font-black text-slate-400 uppercase tracking-widest">
                    <span class="text-indigo-600 dark:text-indigo-400" x-text="totalResults"></span>
                    Cliente(s) encontrados
                </span>
            </div>
            
            <div class="flex items-center gap-4">
                {{-- Los indicadores se mueven a la tabla para actualizarse por AJAX --}}
            </div>
        </div>

        {{-- Tabla de Datos --}}
        <div id="clients-table-container" class="bg-white dark:bg-slate-800 rounded-3xl shadow-xl border border-slate-100 dark:border-slate-700 overflow-hidden">
            @include('clientes.partials.table')
        </div>

        {{-- Modales Teleportados --}}
        @include('clientes.modals.client-form')
        @include('clientes.modals.address-manager')
        @include('clientes.modals.import-clients')
        @include('clientes.modals.export')
        @include('clientes.modals.balance-adjustment')
        @include('clientes.modals.confirm-modal')

        <!-- Botón Flotante de Acción Rápida para ir a Pedidos -->
        <div class="fixed right-0 bottom-32 z-[100] group">
            <a href="{{ route('pedidos.index') }}?new=1" 
               class="flex items-center bg-brand-orange hover:bg-brand-wine text-white p-4 rounded-l-2xl shadow-2xl shadow-brand-orange/40 transition-all duration-500 hover:-translate-x-2 group-hover:shadow-brand-wine/40"
               title="Ir a Pedidos y Crear Nuevo">
                <div class="flex items-center gap-3">
                    <span class="text-[10px] font-black uppercase tracking-widest overflow-hidden max-w-0 group-hover:max-w-[120px] transition-all duration-500 whitespace-nowrap opacity-0 group-hover:opacity-100 hidden md:block">
                        Nuevo Pedido
                    </span>
                    <svg class="w-6 h-6 transform group-hover:rotate-90 transition-transform duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"></path>
                    </svg>
                </div>
            </a>
        </div>

    </div>

@endsection

@push('scripts')
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBOkGxPp3h-HJctX97nYSxD8diDJgSxWU&libraries=places,geometry&loading=async" async defer></script>
@endpush