@extends('layouts.main')

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

    {{-- 🔹 FORMULARIO --}}
    <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" disabled>
                    <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" disabled>
            </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 --}}
    <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 data-id="{{ $e->id }}">
                        <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>
<script src="{{ asset('mapping_files/js/togeojson.js') }}"></script>

{{-- Turf.js (para validar puntos dentro del polígono) --}}
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const segmento = "{{ $segmento ?? '6683' }}";
    const kmlFile = "{{ $kmlFile ?? '' }}";
    const estructuras = @json($estructuras);

    const map = L.map('map', { zoomControl: true, attributionControl: false })
        .setView([13.70, -89.20], 14);

    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map);

    const markersByRowId = {};
    let contador = estructuras.length;
    let autoRowId = 0;
    let segmentoPolygon = null; // guardará el polígono del segmento

    const tipoSelect = document.getElementById('tipoEstructura');
    const elegibleSelect = document.getElementById('elegible');
    const numCasaInput = document.getElementById('numCasa');
    const tablaBody = document.querySelector("#tablaEstructuras tbody");

    tipoSelect.addEventListener('change', () => {
        const tipo = tipoSelect.value;
        if (tipo === '8') {
            elegibleSelect.disabled = false;
            numCasaInput.disabled = false;
        } else {
            elegibleSelect.value = '';
            numCasaInput.value = '';
            elegibleSelect.disabled = true;
            numCasaInput.disabled = true;
        }
    });

    // --- Cargar KML y guardar su geometría en GeoJSON ---
    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);

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

                map.fitBounds(L.geoJson(geojson).getBounds());

                // Guardamos el primer polígono del segmento para validación
                segmentoPolygon = geojson.features.find(f => f.geometry.type === "Polygon" || f.geometry.type === "MultiPolygon");
            })
            .catch(err => console.error("Error cargando KML:", err));
    }

    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'
    };

    // --- Indicador de ubicación actual ---
    let userMarker = null;
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(
            pos => {
                const lat = pos.coords.latitude, lng = pos.coords.longitude;
                if (!userMarker) {
                    userMarker = L.circleMarker([lat, lng], {
                        radius: 7, color: '#2563eb', fillColor: '#60a5fa', fillOpacity: 0.7
                    }).addTo(map).bindPopup("📍 Ubicación actual");
                    map.setView([lat, lng], 16);
                } else userMarker.setLatLng([lat, lng]);
            },
            err => console.warn("No se pudo obtener ubicación:", err.message),
            { enableHighAccuracy: true, maximumAge: 10000 }
        );
    }

    // --- Clic en el mapa: validar si está dentro del polígono ---
    map.on("click", function(e) {
        const tipo = tipoSelect.value;
        const elegible = elegibleSelect.value;
        const numCasa = numCasaInput.value.trim();

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

        // Validar punto dentro del segmento usando Turf.js
        if (segmentoPolygon) {
            const point = turf.point([e.latlng.lng, e.latlng.lat]);
            if (!turf.booleanPointInPolygon(point, segmentoPolygon)) {
                alert("⚠️ La estructura está fuera del límite del segmento.");
                return;
            }
        }

        agregarEstructura(e.latlng, tipo, elegible, numCasa);
    });

    // --- Función para agregar estructura ---
    function agregarEstructura(latlng, tipo, elegible, numCasa) {
        const lat = latlng.lat.toFixed(6);
        const lng = latlng.lng.toFixed(6);
        contador++;
        autoRowId++;
        const tempRowId = `temp-${autoRowId}`;

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

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

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

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

        // Limpiar formulario
        tipoSelect.value = '';
        elegibleSelect.value = '';
        numCasaInput.value = '';
        elegibleSelect.disabled = true;
        numCasaInput.disabled = true;
    }

    // --- Guardar estructura (sin cambios) ---
    function guardarEstructura(data) {
        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.tipo === '8' ? data.elegible : null,
                num_casa: data.tipo === '8' ? data.numCasa : null,
                lat: data.lat,
                lng: data.lng
            })
        })
        .then(r => r.json())
        .then(resp => {
            if (resp?.data?.id) {
                const newId = resp.data.id;
                data.fila.setAttribute('data-id', newId);
                markersByRowId[newId] = markersByRowId[data.tempRowId];
                delete markersByRowId[data.tempRowId];
            }
        })
        .catch(err => console.error("Error al guardar:", err));
    }

    // --- Eliminar estructura + reenumerar ---
    document.addEventListener('click', function(e) {
        const btn = e.target.closest('.btn-delete');
        if (!btn) return;
        const fila = btn.closest('tr');
        const rowId = fila.getAttribute('data-id');
        if (!rowId) return;

        if (!confirm('¿Está seguro de eliminar esta estructura?')) return;
        const marker = markersByRowId[rowId];
        if (marker) map.removeLayer(marker);
        fila.remove();
        reenumerarEstructuras();
    });

    function reenumerarEstructuras() {
        const filas = tablaBody.querySelectorAll('tr');
        filas.forEach((fila, i) => fila.querySelector('td:first-child').textContent = i + 1);
        contador = filas.length;
    }
});
</script>

<style>
.leaflet-container { background: #f6f6f6; }
.bg-purple { background-color: #7e22ce !important; }
.btn-outline-danger i { vertical-align: middle; }
</style>
@endsection