@extends('layouts.main')

@section('content')
<div class="container-fluid p-0">

    {{-- Contenedor del mapa --}}
    <div id="map" style="width: 100%; height: 60vh;"></div>

    {{-- Controles flotantes --}}
    <div id="map-tools" class="bg-white shadow rounded p-3 position-absolute" 
         style="z-index:1000; top:10px; left:10px; width:260px;">
        <h6 class="mb-2"><i class='bx bx-map-pin text-primary'></i> Registrar estructura</h6>

        <label class="small mb-1">Código tipo de estructura:</label>
        <select id="tipoEstructura" class="form-control form-control-sm mb-2">
            <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. Establecimiento</option>
            <option value="10">10. Otra estructura</option>
        </select>

        <label class="small mb-1">Estructura elegible:</label>
        <select id="elegible" class="form-control form-control-sm mb-2">
            <option value="">Seleccione...</option>
            <option value="1">Sí</option>
            <option value="2">No</option>
        </select>

        <label class="small mb-1">Número de la casa:</label>
        <input id="numCasa" type="text" class="form-control form-control-sm mb-2" placeholder="Ej: 12-A">

        <small class="text-muted d-block">Click en el mapa para registrar la ubicación.</small>
    </div>

    {{-- Tabla de estructuras registradas --}}
    <div class="p-3">
        <h6><i class='bx bx-list-ul text-primary'></i> Estructuras registradas</h6>
        <table id="tablaEstructuras" class="table table-sm table-bordered 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>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

{{-- Leaflet --}}
<link rel="stylesheet" href="{{ asset('mapping_files/leaflet/leaflet.css') }}">
<script src="{{ asset('mapping_files/leaflet/leaflet.js') }}"></script>

{{-- togeojson --}}
<script src="{{ asset('mapping_files/js/togeojson.js') }}"></script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const segmento = new URLSearchParams(window.location.search).get('segmento') || '6683';
    const kmlUrl = "{{ asset('mapping_files/data') }}/" + segmento + ".kml";
    const map = L.map('map').setView([13.70, -89.20], 14);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: ''
    }).addTo(map);

    // --- Cargar el segmento KML ---
    fetch(kmlUrl)
        .then(res => res.text())
        .then(kmlText => {
            const parser = new DOMParser();
            const kmlDom = parser.parseFromString(kmlText, 'text/xml');
            const geojson = toGeoJSON.kml(kmlDom);

            const layer = L.geoJson(geojson, {
                style: {
                    color: "#7e22ce",
                    weight: 2,
                    fillColor: "#c084fc",
                    fillOpacity: 0.3
                }
            }).addTo(map);

            map.fitBounds(layer.getBounds());
        })
        .catch(err => console.error("Error cargando KML:", err));

    // --- Registro de estructuras ---
    const tablaBody = document.querySelector("#tablaEstructuras tbody");
    let contador = 0;

    map.on("click", function(e) {
        const tipo = document.getElementById("tipoEstructura").value;
        const elegible = document.getElementById("elegible").value;
        const numCasa = document.getElementById("numCasa").value.trim();

        if (!tipo) return alert("Seleccione el tipo de estructura.");
        if (!elegible) return alert("Indique si la estructura es elegible.");
        if (!numCasa) return alert("Ingrese el número de casa.");

        const lat = e.latlng.lat.toFixed(6);
        const lng = e.latlng.lng.toFixed(6);

        contador++;

        // Iconos Boxicons según tipo
        const iconBox = {
            1: 'bx-building-house',  // Alcaldía
            2: 'bx-book',            // Escuela
            3: 'bx-first-aid',       // Salud
            4: 'bx-credit-card',     // Banco
            5: 'bx-gas-pump',        // Gasolinera
            6: 'bx-church',          // Iglesia
            7: 'bx-basket',          // Mercado
            8: 'bx-home',            // Vivienda
            9: 'bx-store-alt',       // Establecimiento
            10: 'bx-map',            // Otra
        };

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

        marker.bindPopup(`<b>Estructura ${contador}</b><br>
            Tipo: ${tipo}<br>
            Elegible: ${elegible == 1 ? 'Sí' : 'No'}<br>
            Nº casa: ${numCasa}`);

        // Agregar fila a la tabla
        const fila = document.createElement("tr");
        fila.innerHTML = `
            <td>${contador}</td>
            <td>${tipo}</td>
            <td>${elegible == 1 ? 'Sí' : 'No'}</td>
            <td>${numCasa}</td>
            <td>${lat}</td>
            <td>${lng}</td>
        `;
        tablaBody.appendChild(fila);

        // Guardar local o en servidor
        guardarEstructura({ contador, tipo, elegible, numCasa, lat, lng });
    });

    // --- Guardar estructura ---
    function guardarEstructura(data) {
        console.log('💾 Guardando estructura:', data);

        if (!navigator.onLine) {
            const lista = JSON.parse(localStorage.getItem('estructurasPendientes') || '[]');
            lista.push(data);
            localStorage.setItem('estructurasPendientes', JSON.stringify(lista));
            alert('Guardado localmente (sin conexión)');
            return;
        }

        fetch('/api/estructuras', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                segmento: segmento,
                tipo: data.tipo,
                elegible: data.elegible,
                num_casa: data.numCasa,
                lat: data.lat,
                lng: data.lng
            })
        })
        .then(r => r.json())
        .then(resp => {
            console.log("✅ Estructura guardada:", resp);
        })
        .catch(err => {
            console.error("⚠ Error al guardar:", err);
            const lista = JSON.parse(localStorage.getItem('estructurasPendientes') || '[]');
            lista.push(data);
            localStorage.setItem('estructurasPendientes', JSON.stringify(lista));
        });
    }

    // --- Sincronizar al volver online ---
    window.addEventListener('online', () => {
        const pendientes = JSON.parse(localStorage.getItem('estructurasPendientes') || '[]');
        if (pendientes.length > 0) {
            alert(`Reconectado: enviando ${pendientes.length} estructuras pendientes...`);
            pendientes.forEach(guardarEstructura);
            localStorage.removeItem('estructurasPendientes');
        }
    });
});
</script>
@endsection