@extends('layouts.main')

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

    {{-- 🔹 FORMULARIO DE REGISTRO DE ESTRUCTURAS (ahora arriba del mapa) --}}
    <div class="bg-white shadow-sm p-3 mb-2 rounded">
        <h6 class="mb-2"><i class='bx bx-map-pin text-primary'></i> Registrar estructura</h6>

        <div class="form-row">
            <div class="col-md-3">
                <label class="small mb-1">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. Establecimiento</option>
                    <option value="10">10. Otra estructura</option>
                </select>
            </div>

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

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

            <div class="col-md-4 d-flex align-items-end">
                <small class="text-muted">Haga clic en el mapa para registrar la ubicación.</small>
            </div>
        </div>
    </div>

    {{-- 🔹 MAPA --}}
    <div id="map" style="width: 100%; height: 60vh; border-radius: 8px; overflow: hidden;"></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-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>
		    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @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>
			<td>
        		    <button class="btn btn-sm btn-outline-danger btn-delete" title="Eliminar">
            		    	<i class='bx bx-trash'></i>
        		    </button>
    			</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 (modo minimalista) ---
    const map = L.map('map', {
        zoomControl: true,
        attributionControl: false,
    }).setView([13.70, -89.20], 14);
    const markersByRowId = {};   // { filaId/htmlId : markerInstance }
    let autoRowId = 0; 
    // 🔹 Capa minimalista sin etiquetas ni puntos de interés
    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
        maxZoom: 19,
    }).addTo(map);

    // --- Cargar 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}`);

        // crear fila con el data-id temporal
	const fila = document.createElement("tr");
	fila.setAttribute('data-id', tempRowId);
	fila.innerHTML = `
	  <td>${contador}</td>
	  <td>${tipo}</td>
	  <td>${elegible == 1 ? 'Sí' : 'No'}</td>
	  <td>${numCasa}</td>
	  <td>${lat}</td>
	  <td>${lng}</td>
	  <td>
	    <button class="btn btn-sm btn-outline-danger btn-delete" title="Eliminar">
	      <i class='bx bx-trash'></i>
	    </button>
	  </td>
	`;
	tablaBody.appendChild(fila);

	// guarda la referencia del marker por el id temporal
	markersByRowId[tempRowId] = marker;

        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');
        }
    });
    
});
// --- Eliminar estructura ---
document.addEventListener('click', function (e) {
    if (e.target.closest('.btn-delete')) {
        const fila = e.target.closest('tr');
        const id = fila.getAttribute('data-id');
        const lat = parseFloat(fila.children[4].textContent);
        const lng = parseFloat(fila.children[5].textContent);

        if (!confirm('¿Está seguro de eliminar esta estructura?')) return;

        // Eliminar marcador del mapa
        map.eachLayer(layer => {
            if (layer instanceof L.Marker) {
                const pos = layer.getLatLng();
                if (pos.lat.toFixed(6) == lat.toFixed(6) && pos.lng.toFixed(6) == lng.toFixed(6)) {
                    map.removeLayer(layer);
                }
            }
        });

        // Eliminar fila de la tabla
        fila.remove();

        // Eliminar de BD o localStorage
        if (id && navigator.onLine) {
            fetch(`/api/estructuras/${id}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            })
            .then(r => r.json())
            .then(resp => {
                if (resp.ok) {
                    console.log("🗑️ Estructura eliminada:", resp.message);
                } else {
                    console.warn("⚠️ No se pudo eliminar:", resp.message);
                }
            })
            .catch(err => console.error("⚠ Error en eliminación:", err));
        } else {
            // Si está offline, guardamos para eliminar luego
            const pendientes = JSON.parse(localStorage.getItem('estructurasPendientesEliminar') || '[]');
            pendientes.push(id);
            localStorage.setItem('estructurasPendientesEliminar', JSON.stringify(pendientes));
            alert('Sin conexión: estructura marcada para eliminación.');
        }
    }
});

// --- Cuando vuelva la conexión, eliminar pendientes ---
window.addEventListener('online', () => {
    const eliminarPendientes = JSON.parse(localStorage.getItem('estructurasPendientesEliminar') || '[]');
    if (eliminarPendientes.length > 0) {
        eliminarPendientes.forEach(id => {
            fetch(`/api/estructuras/${id}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            }).then(() => console.log(`🗑️ Estructura ${id} eliminada al reconectarse`));
        });
        localStorage.removeItem('estructurasPendientesEliminar');
    }
});

</script>

<style>
/* 🔹 Fondo y estilo del mapa */
.leaflet-container {
    background: #f6f6f6;
}

/* 🔹 Color institucional (morado) */
.bg-purple {
    background-color: #7e22ce !important;
}
</style>
@endsection