@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>
                {{-- Estructuras cargadas desde el servidor --}}
                @foreach($estructuras as $index => $e)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $e->tipo }}</td>
                        <td>{{ $e->elegible ? 'Sí' : 'No' }}</td>
                        <td>{{ $e->num_casa ?? '—' }}</td>
                        <td>{{ $e->lat }}</td>
                        <td>{{ $e->lng }}</td>
                    </tr>
                @endforeach
            </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 = "{{ $segmento ?? '6683' }}";
    const kmlFile = "{{ $kmlFile ?? '' }}";
    const estructuras = @json($estructuras);

    // --- Crear mapa ---
    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) ---
    if (kmlFile) {
        fetch("{{ asset('') }}" + kmlFile)
            .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));
    }

    // --- Mostrar estructuras guardadas ---
    const iconBox = {
        1: 'bx-building-house', 2: 'bx-book', 3: 'bx-first-aid', 4: 'bx-credit-card',
        5: 'bx-gas-pump', 6: 'bx-church', 7: 'bx-basket', 8: 'bx-home', 9: 'bx-store-alt', 10: 'bx-map'
    };

    estructuras.forEach((e, idx) => {
        const markerHtml = `<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: markerHtml,
                iconSize: [24, 24],
                iconAnchor: [12, 24],
            })
        }).addTo(map);

        marker.bindPopup(`<b>Estructura ${idx + 1}</b><br>
            Tipo: ${e.tipo}<br>
            Elegible: ${e.elegible ? 'Sí' : 'No'}<br>
            Nº casa: ${e.num_casa ?? '—'}`);
    });

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

    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++;

        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 en 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);

        guardarEstructura({ tipo, elegible, numCasa, lat, lng });
    });

    // --- Guardar estructura (API o localStorage) ---
    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 pendientes cuando vuelva conexión ---
    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