@extends('layouts.main')

@section('content')
<div class="container-fluid p-0">
    {{-- === Indicadores === --}}
    <div id="offlineStatus" class="alert alert-warning position-fixed p-2 px-3" style="top:10px; right:10px; z-index:10000; display:none;">
        <i class='bx bx-wifi-off'></i> Modo sin conexión
    </div>
    <div id="syncBadge" class="badge badge-info position-fixed" style="bottom:20px; right:20px; z-index:10000; display:none; cursor:pointer;">
        <i class='bx bx-sync'></i> <span id="syncCount">0</span> pendientes
    </div>

    {{-- === FORMULARIO DE REGISTRO === --}}
    <div class="bg-white shadow-sm p-3 mb-2 rounded position-relative z-10">
        <h6><i class='bx bx-map-pin text-primary'></i> Registrar estructura</h6>
        <div class="row">
            <div class="col-md-3 mb-2">
                <label class="small">Código tipo de estructura:</label>
                <select id="tipoEstructura" class="form-control form-control-sm">
                    <option value="">Seleccione...</option>
                    <option value="1">1. Alcaldía municipal</option>
                    <option value="2">2. Centro escolar</option>
                    <option value="3">3. Centro de salud</option>
                    <option value="4">4. Banco</option>
                    <option value="5">5. Gasolinera</option>
                    <option value="6">6. Iglesia</option>
                    <option value="7">7. Mercado</option>
                    <option value="8">8. Vivienda</option>
                    <option value="9">9. Edificio</option>
                    <option value="10">10. Otra estructura</option>
                </select>
            </div>
            <div class="col-md-3 mb-2">
                <label class="small">Estructura elegible:</label>
                <select id="elegible" class="form-control form-control-sm" disabled>
                    <option value="">Seleccione...</option>
                    <option value="1">Sí</option>
                    <option value="0">No</option>
                </select>
            </div>
            <div class="col-md-3 mb-2">
                <label class="small">Número de casa:</label>
                <input id="numCasa" type="text" class="form-control form-control-sm" placeholder="Ej: 12-A" disabled>
            </div>
	        <div class="col-md-3 mb-2">
		        <label class="small">Completa la información:</label>
	            <button id="btnNiveles" class="btn btn-sm btn-outline-purple w-100 mb-2" style="display:none;">
    		        <i class='bx bxs-buildings'></i> Definir niveles
	        	</button>
	        </div>
            <div class="col-md-3 d-flex align-items-end">
                <small id="geoAviso" class="text-muted">Click en el mapa para registrar la ubicación.</small>
            </div>
        </div>
    </div>

    {{-- === MAPA === --}}
    <div id="map" style="width: 100%; height: 60vh;" class="rounded border"></div>
    <div class="mt-2 text-muted small">
        <i class="bx bxs-square" style="color:#bfdbfe"></i> Área permitida para el encuestador (50 m alrededor del segmento)
    </div>

    {{-- === TABLA DE ESTRUCTURAS === --}}
    <div class="p-3">
        <h6><i class='bx bx-list-ul text-primary'></i> Estructuras registradas</h6>
        <table id="tablaEstructuras" class="table table-bordered table-striped table-hover text-center">
            <thead class="bg-purple text-white">
                <tr>
                    <th>No.</th>
                    <th>Tipo</th>
                    <th>Elegible</th>
                    <th>Número de casa</th>
                    <th>Latitud</th>
                    <th>Longitud</th>
                    <th>Acción</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

{{-- === MODAL DE NIVELES === --}}
@include('supervisor.mapping.partials.modal_niveles')

@endsection

@push('scripts')
<link rel="stylesheet" href="{{ asset('mapping_files/leaflet/leaflet.css') }}">
<script src="{{ asset('mapping_files/leaflet/leaflet.js') }}"></script>
<script src="{{ asset('mapping_files/js/togeojson.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.1.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.1.2/js/buttons.print.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", async function() {
    const segmento = new URLSearchParams(window.location.search).get('segmento') || '6683';
    const kmlUrl = "{{ asset('mapping_files/data') }}/" + segmento + ".kml";
    const RANGO_MAXIMO_METROS = 50;
    const niveles = [];
    let nivelActual = 1;
    let segmentoPolygon = null;
    let userMarker = null;
    const markersByRowId = {};
    let contador = 0;

    const tipoNombres = {
        1:'Alcaldía municipal',2:'Centro escolar',3:'Centro de salud',4:'Banco',5:'Gasolinera',
        6:'Iglesia',7:'Mercado',8:'Vivienda',9:'Edificio',10:'Otra estructura'
    };
    const iconBox = {
        1:'bxs-castle',2:'bxs-school',3:'bxs-clinic',4:'bxs-bank',5:'bx-gas-pump',6:'bx-church',
        7:'bx-basket',8:'bx-home',9:'bxs-buildings',10:'bx-map'
    };

    const tipoSelect = document.getElementById('tipoEstructura');
    const elegibleSelect = document.getElementById('elegible');
    const numCasaInput = document.getElementById('numCasa');
    const btnNiveles = document.getElementById('btnNiveles');
    const geoAviso = document.getElementById('geoAviso');
    const syncBadge = document.getElementById('syncBadge');
    const syncCount = document.getElementById('syncCount');

    const map = L.map('map').setView([13.7, -89.2], 14);
    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png').addTo(map);

    // === Inicialización de DataTable ===
    const tabla = $('#tablaEstructuras').DataTable({
        language:{url:'//cdn.datatables.net/plug-ins/2.1.8/i18n/es-MX.json'},
        pageLength:25, scrollY:'45vh', scrollCollapse:true,
        dom:'Bfrtip',
        buttons:[
            {extend:'excel',text:'Excel',className:'btn btn-success btn-sm'},
            {extend:'csv',text:'CSV',className:'btn btn-primary btn-sm'},
            {extend:'pdf',text:'PDF',className:'btn btn-danger btn-sm'}
        ],
        columns:[
            {data:'num'},{data:'tipo'},{data:'elegible'},{data:'num_casa'},{data:'lat'},{data:'lng'},
            {data:'acciones',orderable:false,searchable:false}
        ]
    });

    // === Cambios dinámicos en el formulario ===
    tipoSelect.addEventListener('change',()=>{
        const tipo=tipoSelect.value;
        elegibleSelect.disabled=!(tipo==='8'||tipo==='9'||tipo==='10');
        numCasaInput.disabled=tipo!=='8';
        if(tipo!=='8') numCasaInput.value='';
        btnNiveles.style.display=tipo==='9'?'block':'none';
    });
    $('#btnNiveles').click(()=>$('#modalNiveles').modal('show'));

    // === Cache del KML ===
    async function cargarKMLOffline(kmlUrl){
        const key=`kml_${kmlUrl}`;
        const cached=localStorage.getItem(key);
        if(!navigator.onLine&&cached)return cached;
        try{
            const res=await fetch(kmlUrl);
            const text=await res.text();
            localStorage.setItem(key,text);
            return text;
        }catch(err){
            if(cached)return cached;
            throw err;
        }
    }

    // === Cargar polígono del segmento ===
    const kmlText=await cargarKMLOffline(kmlUrl);
    const geojson=toGeoJSON.kml(new DOMParser().parseFromString(kmlText,'text/xml'));
    const layer=L.geoJson(geojson,{style:{color:'#7e22ce',fillColor:'#c084fc',fillOpacity:0.3}}).addTo(map);
    map.fitBounds(layer.getBounds());
    segmentoPolygon=geojson.features.find(f=>f.geometry.type.includes('Polygon'));
    if(segmentoPolygon){
        const buffer=turf.buffer(segmentoPolygon,RANGO_MAXIMO_METROS/1000,{units:'kilometers'});
        L.geoJson(buffer,{style:{color:"#60a5fa",weight:1,fillColor:"#bfdbfe",fillOpacity:0.25,dashArray:"4,6"}}).addTo(map);
    }
    // === Cargar estructuras existentes desde la base de datos ===
    async function cargarEstructuras(segmento) {
    try {
        const res = await fetch(`/mapping?segmento=${segmento}&json=1`);
        if (!res.ok) throw new Error("Error al obtener estructuras");
        const data = await res.json();
        if (!Array.isArray(data)) return;

        data.forEach((e) => {
            contador++;
            const iconHtml = `<i class='bx ${iconBox[e.tipo] ?? "bx-map-pin"} bx-sm text-primary'></i>`;
            const marker = L.marker([e.lat, e.lng], {
                icon: L.divIcon({
                    className: 'custom-marker',
                    html: iconHtml,
                    iconSize: [24, 24],
                    iconAnchor: [12, 24],
                })
            }).addTo(map);

            let popupHtml = `<b>Estructura ${contador}</b><br>${tipoNombres[e.tipo] ?? e.tipo}`;
            if (e.tipo == 8) popupHtml += `<br>Elegible: ${e.elegible == 1 ? 'Sí' : 'No'}<br>N° casa: ${e.num_casa ?? '—'}`;
            if (e.tipo == 9 && e.total_niveles && e.total_unidades) {
                popupHtml += `<br><b>Niveles:</b> ${e.total_niveles}<br><b>Unidades:</b> ${e.total_unidades}`;
            }

            marker.bindPopup(popupHtml);
            markersByRowId[e.id] = marker;

            tabla.row.add({
                num: contador,
                tipo: tipoNombres[e.tipo] ?? e.tipo,
                elegible: e.tipo == 8 ? (e.elegible == 1 ? 'Sí' : 'No') : '—',
                num_casa: e.tipo == 8 ? (e.num_casa ?? '—') : '—',
                lat: e.lat,
                lng: e.lng,
                acciones: `
                    <div class="btn-group" role="group">
                        <button class="btn btn-sm btn-info btn-view" data-id="${e.id}" title="Ver en mapa">
                            <i class='bx bx-show-alt'></i>
                        </button>
                        <button class="btn btn-sm btn-danger btn-delete" data-id="${e.id}" title="Eliminar">
                            <i class='bx bx-trash'></i>
                        </button>
                    </div>
                `
            });
        });

        tabla.draw(false);
        console.log(`✅ ${data.length} estructuras cargadas desde la base de datos.`);
    } catch (err) {
        console.error('⚠️ Error al cargar estructuras:', err);
    }
    }

    // Llamar carga inicial
    cargarEstructuras(segmento);

    // === Mostrar ubicación actual del encuestador ===
    if(navigator.geolocation){
        navigator.geolocation.watchPosition(pos=>{
            const {latitude,longitude}=pos.coords;
            const latlng=[latitude,longitude];
            if(!userMarker){
                userMarker=L.circleMarker(latlng,{radius:6,color:'#2563eb',fillColor:'#3b82f6',fillOpacity:0.9}).addTo(map);
            }else userMarker.setLatLng(latlng);
        });
    }

    // === Almacenamiento offline ===
    function guardarEstructuraOffline(data){
        const arr=JSON.parse(localStorage.getItem('estructuras_pendientes'))||[];
        arr.push(data);
        localStorage.setItem('estructuras_pendientes',JSON.stringify(arr));
        actualizarSyncBadge();
    }
    function actualizarSyncBadge(){
        const pendientes=JSON.parse(localStorage.getItem('estructuras_pendientes'))||[];
        if(pendientes.length>0){
            syncBadge.style.display='block';
            syncCount.textContent=pendientes.length;
        }else syncBadge.style.display='none';
    }
    async function sincronizarPendientes(){
        const arr=JSON.parse(localStorage.getItem('estructuras_pendientes'))||[];
        if(arr.length===0)return;
        const restantes=[];
        for(const data of arr){
            try{
                const res=await fetch('/mapping',{
                    method:'POST',
                    headers:{'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},
                    body:JSON.stringify(data)
                });
                const resp=await res.json();
                if(!resp.success)throw new Error(resp.error||'Error desconocido');
                console.log('✅ Sincronizado:',resp.data.id);
            }catch(err){
                restantes.push(data);
            }
        }
        localStorage.setItem('estructuras_pendientes',JSON.stringify(restantes));
        actualizarSyncBadge();
    }
    window.addEventListener('online',sincronizarPendientes);
    syncBadge.addEventListener('click',sincronizarPendientes);
    actualizarSyncBadge();

    // === Función auxiliar para dibujar estructura local ===
    function agregarEstructuraMapaLocal(data,id=Date.now()){
        contador++;
        const iconHtml=`<i class='bx ${iconBox[data.tipo]??"bx-map-pin"} bx-sm text-primary'></i>`;
        const marker=L.marker([data.lat,data.lng],{
            icon:L.divIcon({className:'custom-marker',html:iconHtml,iconSize:[24,24],iconAnchor:[12,24]})
        }).addTo(map);
        let popup=`<b>Estructura ${contador}</b><br>${tipoNombres[data.tipo]}`;
        if(data.tipo==8)popup+=`<br>Elegible: ${data.elegible==1?'Sí':'No'}<br>N° casa: ${data.num_casa}`;
        marker.bindPopup(popup);
        markersByRowId[id]=marker;
        tabla.row.add({
            num:contador,tipo:tipoNombres[data.tipo],
            elegible:(data.tipo==8||data.tipo==9||data.tipo==10)?(data.elegible==1?'Sí':'No'):'—',
            num_casa:data.tipo==8?data.num_casa:'—',
            lat:data.lat.toFixed(6),lng:data.lng.toFixed(6),
            acciones:`<div class="btn-group">
                <button class="btn btn-sm btn-info btn-view" data-id="${id}" title="Ver en mapa"><i class='bx bx-show-alt'></i></button>
                <button class="btn btn-sm btn-danger btn-delete" data-id="${id}" title="Eliminar"><i class='bx bx-trash'></i></button>
            </div>`
        }).draw(false);
    }

    // === Validar y agregar estructura ===
    map.on('click',e=>{
        const tipo=tipoSelect.value,elegible=elegibleSelect.value,numCasa=numCasaInput.value.trim();
        if(!tipo)return alert('Seleccione tipo de estructura.');
        if((tipo==8||tipo==9||tipo==10)&&!elegible)return alert('Seleccione si la estructura es elegible.');
        if(tipo==='8'&&!numCasa)return alert('Ingrese número de casa.');
        if(tipo==='9'&&niveles.length<2)return alert('Debe definir al menos 2 niveles antes de registrar un edificio.');

        const lat=e.latlng.lat,lng=e.latlng.lng;
        const punto=turf.point([lng,lat]);
        if(!turf.booleanPointInPolygon(punto,segmentoPolygon))
            return alert('❌ Solo puede registrar estructuras dentro del segmento.');

        const data={
            segmento,tipo,elegible:(tipo==8||tipo==9||tipo==10)?elegible:0,
            num_casa:tipo==8?numCasa:null,lat,lng,
            niveles:tipo==9?niveles:[]
        };

        if(!navigator.onLine){
            guardarEstructuraOffline(data);
            agregarEstructuraMapaLocal(data);
            return alert('⚠️ Sin conexión. Estructura guardada localmente.');
        }

        fetch('/mapping',{
            method:'POST',
            headers:{'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},
            body:JSON.stringify(data)
        })
        .then(r=>r.json())
        .then(resp=>{
            if(!resp.success)throw new Error(resp.error);
            agregarEstructuraMapaLocal(data,resp.data.id);
        })
        .catch(err=>alert('Error al guardar estructura: '+err.message));
    });
	// === EVENTOS DE ACCIÓN (ver / eliminar) ===
// Usamos delegación global sobre el documento, no sobre tbody
// === ELIMINAR ESTRUCTURA (online/offline) ===
$(document).on('click', '.btn-delete', function () {
    const id = $(this).data('id');
    const fila = tabla.row($(this).closest('tr'));

    if (!id) return alert('No se pudo identificar la estructura.');
    if (!confirm('¿Eliminar esta estructura permanentemente?')) return;

    // --- Si está offline ---
    if (!navigator.onLine) {
        console.warn('🚫 Sin conexión: marcando estructura como pendiente de eliminación.');

        // Quitar del mapa y DataTable
        if (markersByRowId[id]) {
            map.removeLayer(markersByRowId[id]);
            delete markersByRowId[id];
        }
        fila.remove().draw(false);

        // Guardar en lista de eliminaciones pendientes
        const eliminacionesPendientes = JSON.parse(localStorage.getItem('estructuras_eliminadas') || '[]');
        eliminacionesPendientes.push({ id });
        localStorage.setItem('estructuras_eliminadas', JSON.stringify(eliminacionesPendientes));

        alert('🗑️ Eliminado localmente. Se sincronizará cuando vuelva la conexión.');
        return;
    }

    // --- Si está online ---
    fetch(`/mapping/${id}`, {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    })
    .then(r => r.json())
    .then(resp => {
        if (resp.success) {
            if (markersByRowId[id]) {
                map.removeLayer(markersByRowId[id]);
                delete markersByRowId[id];
            }
            fila.remove().draw(false);
            reenumerarTabla();
            console.log(`🗑️ Estructura ${id} eliminada correctamente`);
        } else {
            alert('No se pudo eliminar en el servidor.');
        }
    })
    .catch(err => {
        console.error('Error al eliminar estructura:', err);
        alert('Error de conexión o respuesta inesperada.');
    });
});

function reenumerarTabla() {
    contador = 0;
    tabla.rows().every(function () {
        contador++;
        const data = this.data();
        data.num = contador;
        this.data(data);
    });
    tabla.draw(false);
}

// === SINCRONIZAR ELIMINACIONES AL VOLVER ONLINE ===
window.addEventListener('online', async () => {
    const pendientes = JSON.parse(localStorage.getItem('estructuras_eliminadas') || '[]');
    if (pendientes.length === 0) return;

    alert(`🔄 Recuperada conexión: sincronizando ${pendientes.length} eliminaciones pendientes...`);

    for (const item of pendientes) {
        try {
            const res = await fetch(`/mapping/${item.id}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            });
            const data = await res.json();
            if (data.success) {
                console.log(`✅ Estructura ${item.id} eliminada del servidor.`);
            } else {
                console.warn(`⚠️ No se pudo eliminar estructura ${item.id}.`);
            }
        } catch (err) {
            console.error(`❌ Error al sincronizar eliminación ${item.id}:`, err);
        }
    }

    localStorage.removeItem('estructuras_eliminadas');
});

// === VER ESTRUCTURA EN MAPA ===
$(document).on('click', '.btn-view', function () {
    const id = $(this).data('id');
    const marker = markersByRowId[id];

    if (!marker) {
        alert('No se encontró el marcador en el mapa.');
        return;
    }

    // Centrar y abrir popup
    map.setView(marker.getLatLng(), 18, { animate: true });
    marker.openPopup();

    // Efecto visual para ubicarlo mejor
    const circle = L.circleMarker(marker.getLatLng(), {
        color: 'yellow',
        fillColor: 'yellow',
        fillOpacity: 0.6,
        radius: 15
    }).addTo(map);

    setTimeout(() => map.removeLayer(circle), 1500);
});

});
</script>

<script>
function updateConnectionStatus(){
    const el=document.getElementById('offlineStatus');
    el.style.display=navigator.onLine?'none':'block';
}
window.addEventListener('online',updateConnectionStatus);
window.addEventListener('offline',updateConnectionStatus);
updateConnectionStatus();
</script>
<script>
// === Evitar recarga o cierre mientras está sin conexión ===
let avisoMostrado = false;

window.addEventListener('beforeunload', function (e) {
    // Si no hay conexión, prevenir el cierre o recarga
    if (!navigator.onLine) {
        // Mostrar solo una vez el aviso
        if (!avisoMostrado) {
            alert('⚠️ No puedes recargar ni cerrar esta página mientras no tengas conexión.\nTu información aún no se ha sincronizado.');
            avisoMostrado = true;
        }

        // Cancelar el evento de recarga/cierre
        e.preventDefault();
        e.returnValue = ''; // necesario para algunos navegadores
        return ''; // necesario para Chrome
    }
});

// También podemos mostrar aviso visual constante
window.addEventListener('offline', () => {
    const el = document.getElementById('offlineStatus');
    if (el) {
        el.style.display = 'block';
        el.textContent = '⚠️ Modo sin conexión — No recargues ni cierres la página.';
    }
});
</script>

<style>
.bg-purple { background-color: #7e22ce !important; }
.custom-marker i { line-height: 24px; }
#syncBadge { background: #2563eb; color: white; padding: 8px 12px; border-radius: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
</style>
@endpush