Generation
/
project-work


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745
							<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mappa con Bootstrap Italia e Overlay Edifici</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
          integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
          crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.13.4/dist/css/bootstrap-italia.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
    <style>
        /* Stile per la riga blu scuro */
        .top-bar {
            background-color: #004080; /* Blu scuro */
            color: white;
            padding: 0.5rem 0;
            text-align: left; /* Allineamento a sinistra */
            font-size: 0.9rem;
        }
        .table-responsive {
            overflow-x: auto;
            /* Aggiungi scroll orizzontale se la tabella è troppo larga */
        }
        .header, .footer {
            background-color: #0066CC; /* Blu istituzionale */
            color: white;
            padding: 1rem 0;
        }
        .main-content {
            background-color: #f8f9fa; /* Grigio chiaro */
            padding: 2rem 0;
        }
        /* Stile per il logo "PW" dentro un cerchio */
        .logo { 
            font-family: 'Georgia', serif; 
            font-size: 1.5rem; 
            width: 50px; height: 50px; 
            background-color: white; 
            color: #0066CC; 
            border-radius: 50%; 
            margin-right: 10px; 
            display: inline-flex; 
            align-items: center; 
            justify-content: center; 
        }
        #map { height: 500px; width: 100%; }
        #coordinate-inputs { margin-top: 10px; width: 50%; }

        /* Stile per i link con sottolineatura solo al passaggio del mouse */
        .link-underline-hover {
            text-decoration: none; /* Rimuove la sottolineatura di base */
        }
        .link-underline-hover:hover {
            text-decoration: underline; /* Aggiunge la sottolineatura solo al passaggio del mouse */
        }

        /* Aggiusta l'allineamento del logo e titolo */
        .header-title {
            font-size: 1.5rem;
            display: inline-block;
            margin-left: 10px;
        }
        .header-content {
            display: flex;
            align-items: center;
        }
        /* Stili per la tabella dei dati */
        .data-table {
            display: flex;
            flex-direction: column;
        }
        .table th, .table td {
            font-size: 16px; /* Riduce la dimensione del testo */
        }
        h2 {
            font-size: 22px; /* Riduce la dimensione della scritta "Dati Inseriti" */
        }
        .d-flex {
            display: flex;
        }
        .justify-content-end {
            justify-content: flex-end;
        }
        .mt-2 {
            margin-top: 0.5rem;
        }
        .mt-3 {
            margin-top: 1rem;
        }
        .social-icons a {
            color: white;
            font-size: 24px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <!-- Riga blu scuro con scritto "Project Work" allineata a sinistra -->
    <div class="top-bar">
        <div class="container">
            Project Work
        </div>
    </div>
    
    <header class="header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col">
                    <!-- Logo "PW" dentro un cerchio e titolo accanto -->
                    <div class="col d-flex">
                        <!-- Logo "PW" dentro un cerchio, ora cliccabile -->
                        <a href="./mappa_logout.html" class="logo-link">
                            <div class="logo">PW</div>
                        </a>
                        <h1 class="header-title">TFO - Terminazioni Fibra Ottica</h1>
                    </div>
                </div>
                <div class="col-auto d-flex align-items-center">
                    <a href="./ADMIN.html" class="text-white me-3 link-underline-hover">Gestione Dati Immobiliari</a>
                    <a href="./TFO.html" class="text-white me-3 link-underline-hover">TFO</a>
                    <a href="./buildings.html" class="text-white me-3 link-underline-hover">Registrazione degli Edifici</a>
                    <a href="./mappa_login.html" class="btn btn-light">Logout</a>
                </div>
            </div>
        </div>
    </header>

    <main>
        <div class="container mt-4">
            <h1 style="font-size: 1.5rem;">Registrazione delle terminazioni di fibra ottica</h1>

            <!-- Barra di ricerca -->
            <div class="row">
                <div class="col-md-9">
                    <div class="mb-3">
                        <label for="addressInput" class="form-label">Indirizzo:</label>
                        <input type="text" class="form-control" id="addressInput">
                    </div>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary mt-4" id="searchButton">Cerca</button>
                </div>
            </div>

            <div class="main-content">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-md-12">
                            <div id="map"></div>
                        </div>
                    </div>
                </div>
            </div>

            <p class="mt-4">Compila il modulo sottostante per registrare una nuova terminazione di fibra ottica:</p>
            <fo class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-9">
                                        <div class="mb-3">
                                            <label for="addressInputForm" class="form-label">Indirizzo:</label>
                                            <input type="text" class="form-control" id="addressInputForm">
                                        </div>
                                    </div>
                                    </div>
                                    <div class="col-md-9"> 
                                        <div class="mb-3">
                                            <label for="latInput" class="form-label">Latitudine:</label>
                                            <input type="number" class="form-control" id="latInput" min="-90" max="90"/>
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="ms-md-6 mb-3">
                                            <label for="lngInput" class="form-label">Longitudine:</label>
                                            <input type="number" class="form-control" id="lngInput" min="-180" max="180"/>
                                        </div>
                                    </div>
                                        
                                    <div class="col-md-9">
                                        <div class="ms-md-6 mb-3">
                                            <label for="codiceCatastaleInput" class="form-label">Codice Catastale:</label>
                                            <input type="text" class="form-control" id="codiceCatastaleInput">
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="mb-3">
                                            <label for="dataPredisposizione" class="form-label">Data Predisposizione</label>
                                            <input type="date" class="form-control" id="dataPredisposizione">
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="mb-3">
                                            <label for="scala" class="form-label">Scala</label>
                                            <input type="text" class="form-control" id="scala">
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="mb-3">
                                            <label for="piano" class="form-label">Piano</label>
                                            <input type="text" class="form-control" id="piano">
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="mb-3">
                                            <label for="interno" class="form-label">Interno</label>
                                            <input type="text" class="form-control" id="interno">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-9">
                                        <div class="mb-3">
                                            <label for="operatore" class="form-label">Identificativo Operatore</label>
                                            <select class="form-select" id="operatore">
                                                <option value="1">Operatore 1</option>
                                                <option value="2">Operatore 2</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="mb-3">
                                            <label for="terminazione" class="form-label">Codice Terminazione</label>
                                            <input type="text" class="form-control" id="terminazione">
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="mb-3">
                                            <label for="nota" class="form-label">Note</label>
                                            <input type="text" class="form-control" id="nota">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-2">
                                        <button class="btn btn-primary w-100" onclick="aggiungiRiga()">Aggiungi</button>
                                    </div>
                                    <div class="col-md-2">
                                        <button class="btn btn-secondary w-100" type="button" onclick="resettaForm()">Annulla</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 mt-4">
                        <div class="data-table">
                            <h2>Dati Inseriti</h2>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Indirizzo</th>
                                            <th>Latitudine</th>
                                            <th>Longitudine</th>
                                            <th>Codice Catastale</th>
                                            <th>Data Predisposizione</th>
                                            <th>Scala</th>
                                            <th>Piano</th>
                                            <th>Interno</th>
                                            <th>Operatore</th>
                                            <th>Terminazione</th>
                                            <th>Note</th>
                                            <th>Azioni</th>
                                        </tr>
                                    </thead>
                                    <tbody id="buildingTableBody">
                                        <!-- Le righe della tabella saranno aggiunte dinamicamente -->
                                    </tbody>
                                </table>
                            </div>
                            <!-- Contenitore per il pulsante "Invia" -->
                            <div class="d-flex justify-content-end mt-3">
                                <button class="btn btn-success">Invia</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Widget ElevenLabs ConvAI -->
        <div id="ai-widget-container" style="position: fixed; bottom: 20px; right: 20px;">
            <elevenlabs-convai agent-id="2MJWbkNuIGTHNI71hKfL"></elevenlabs-convai>
        </div>
    </main>

    <footer id="footer" class="it-footer bg-black mt-5" role="contentinfo">
        <div class="it-footer-main py-3">
            <div class="container">
                <section class="py-4">
                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
                            <div class="link-list-wrapper">
                                <h2 class="h5">Esplora SINFI</h2>
                                <ul id="footer-menu-col-1" class="link-list">
                                    <li id="menu-item-sinfi-1" class="menu-item">
                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/che-cose/">Cos'è SINFI</a>
                                    </li>
                                    <li id="menu-item-sinfi-2" class="menu-item">
                                        <a class="list-item" href="https://sinfi.it/realms/master/protocol/openid-connect/auth?client_id=sinfi_user_service&response_type=code&redirect_uri=https://sinfi.it/sinfi_gateway/labs_keycloak/post_login/&scope=email&state=">Infrastrutture Registrate</a>
                                    </li>
                                    <li id="menu-item-sinfi-3" class="menu-item">
                                        <a class="list-item" href="https://sinfi.it/portal/sinfi-menu/riferimenti-normativi/">Normative di Riferimento</a>
                                    </li>
                                    <li id="menu-item-sinfi-4" class="menu-item">
                                        <a class="list-item" href="https://sinfi.it/realms/master/protocol/openid-connect/auth?client_id=sinfi_user_service&response_type=code&redirect_uri=https://sinfi.it/sinfi_gateway/labs_keycloak/post_login/&scope=email&state=">Open Data SINFI</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
                            <div class="link-list-wrapper">
                                <h2 class="h5">Aiuto e Supporto</h2>
                                <ul id="footer-menu-col-2" class="link-list">
                                    <li id="menu-item-aiuto-1" class="menu-item">
                                        <a class="list-item" href="./instructions.html">Istruzioni</a>
                                    </li>
                                    <li id="menu-item-aiuto-2" class="menu-item">
                                        <a class="list-item" href="./faq.html">FAQ - Domande Frequenti</a>
                                    </li>
                                    <li id="menu-item-aiuto-3" class="menu-item">
                                        <a class="list-item" href="./techsup.html">Segnalazioni e Supporto Tecnico</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- Colonna "Community" con i loghi dei social -->
                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
                            <div class="link-list-wrapper">
                                <h2 class="h5">Community</h2>
                                <div class="social-icons">
                                    <a href="https://www.linkedin.com" target="_blank" class="me-3"><i class="fab fa-linkedin"></i></a>
                                    <a href="https://www.youtube.com" target="_blank" class="me-3"><i class="fab fa-youtube"></i></a>
                                    <a href="https://www.facebook.com" target="_blank" class="me-3"><i class="fab fa-facebook"></i></a>
                                    <a href="https://www.instagram.com" target="_blank" class="me-3"><i class="fab fa-instagram"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
                            <div class="link-list-wrapper">
                                <h2 class="h5">SINFI</h2>
                                <ul id="footer-menu-col-4" class="link-list">
                                    <li id="menu-item-377" class="menu-item">
                                        <a target="_blank" href="https://sinfi.it/portal/">Vai al sito ufficiale SINFI</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="it-footer-small-prints clearfix">
            <div class="container">
                <nav class="menu-footer-menu-ita-container" aria-label="link utili">
                    <ul id="menu-footer-menu-ita" class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
                        <li id="menu-item-413" class="menu-item list-inline-item"><a href="/media-policy/">Media Policy</a></li>
                        <li id="menu-item-453" class="menu-item list-inline-item"><a href="/note-legali/">Privacy Policy &amp; Note Legali</a></li>
                        <li id="menu-item-1310" class="menu-item list-inline-item"><a target="_blank" href="https://form.agid.gov.it/view/9df3de50-7a42-11ef-8989-9dcab5eaa914">Dichiarazione di accessibilità</a></li>
                        <li id="menu-item-411" class="menu-item list-inline-item"><a href="/mappa-del-sito/">Mappa del sito</a></li>
                        <li id="menu-item-1277" class="menu-item list-inline-item"><a href="/open-data-spid/">Open Data SPID</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-italia@2.8.1/dist/js/bootstrap-italia.bundle.min.js"></script>
    <!-- Includi lo script di ElevenLabs -->
    <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>

    <script>
        // Inizializzazione Mappa
        var map = L.map('map').setView([41.9028, 12.4964], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Variabile per memorizzare il marker corrente
        let marker;
        var lastModifiedField = document.getElementById('addressInput');
        var buildings = [];
        var edificiLayer = L.layerGroup().addTo(map);
        var zoomLivello = 16;

        // Listener per il tasto Invio nel campo di ricerca
        document.getElementById('addressInput').addEventListener('keydown', function (event) {
            if (event.keyCode === 13) {
                event.preventDefault();
                document.getElementById('searchButton').click();
            }
});

        document.getElementById('searchButton').addEventListener('click', function () {
    const address = document.getElementById('addressInput').value;
    if (address) {
        fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(address)}&format=json`)
            .then(response => response.json())
            .then(data => {
                if (data && data.length > 0) {
                    const lat = parseFloat(data[0].lat);
                    const lon = parseFloat(data[0].lon);

                    if (marker) {
                        map.removeLayer(marker);
                    }

                    marker = L.marker([lat, lon]).addTo(map)
                        .bindPopup(`Indirizzo: ${data[0].display_name}`)
                        .openPopup();

                    map.setView([lat, lon], 18);

                    document.getElementById('latInput').value = lat;
                    document.getElementById('lngInput').value = lon;

                    // Copia l'indirizzo trovato nel campo sotto la mappa
                    document.getElementById('addressInputForm').value = data[0].display_name;
                } else {
                    alert('Indirizzo non trovato.');
                }
            })
            .catch(error => {
                console.error('Errore durante la geocodifica:', error);
                alert('Si è verificato un errore durante la ricerca dell\'indirizzo.');
            });
    } else {
        alert('Inserisci un indirizzo.');
    }
});

        // Gestione del click sulla mappa
        map.on('click', function (e) {
    const lat = e.latlng.lat;
    const lng = e.latlng.lng;

    // Rimuovi il marker precedente (se esiste)
    if (marker) {
        map.removeLayer(marker);
    }

    // Aggiungi un nuovo marker sulla mappa
    marker = L.marker([lat, lng]).addTo(map)
        .bindPopup(`Coordinate: ${lat}, ${lng}`)
        .openPopup();

    // Riempie i campi di input per latitudine e longitudine
    document.getElementById('latInput').value = lat;
    document.getElementById('lngInput').value = lng;

    // Ottieni l'indirizzo dalle coordinate
    getAddress(lat, lng);
});

        async function caricaEdifici() {
            if (map.getZoom() >= 16) {
                var bounds = map.getBounds();
                var bbox = bounds.getSouthWest().lat + ',' + bounds.getSouthWest().lng + ',' + bounds.getNorthEast().lat + ',' + bounds.getNorthEast().lng;
                var query = `
                    [out:json];
                    (
                        way["building"](${bbox});
                        relation["building"](${bbox});
                    );
                    out geom;
                    out tags;
                `;

                try {
                    const data = await $.ajax({
                        url: 'https://overpass-api.de/api/interpreter',
                        data: { data: query },
                        dataType: 'json'
                    });

                    edificiLayer.clearLayers();
                    data.elements.forEach(function(element) {
                        if (element.type === 'way' && element.geometry) {
                            var latlngs = element.geometry.map(function(coord) {
                                return [coord.lat, coord.lon];
                            });
                            var polygon = L.polygon(latlngs).addTo(edificiLayer);

                            // Genera un numero casuale tra 0 e 3
                            var statoEdificio = true;

                            // Assegna il colore in base allo stato
                            var colorePoligono;
                            switch (statoEdificio) {
                                case false:
                                    colorePoligono = 'yellow';
                                    break;
                                case true:
                                    colorePoligono = 'green';
                                    break;
                            }

                            // Applica lo stile al poligono
                            polygon.setStyle({ fillColor: colorePoligono, color: colorePoligono });

                            polygon.on('click', async function() {
                                var buildingType = element.tags && element.tags.building ? element.tags.building : 'Sconosciuto';
                                try {
                                    await getAddress(latlngs[0][0], latlngs[0][1]);
                                    var popupContent = 'Coordinate: ' + latlngs[0][0] + ', ' + latlngs[0][1] + '<br>' +
                                        'Tipo edificio: ' + buildingType + '<br>' +
                                        'Indirizzo: ' + document.getElementById('addressInput').value + '<br>' +
                                        'Stato: ' + statoEdificio + '<br>' +
                                        'Codice Catastale: nessuno';
                                    polygon.bindPopup(popupContent).openPopup();
                                } catch (error) {
                                    console.error("Errore nel recupero dell'indirizzo:", error);
                                    var popupContent = 'Coordinate: ' + latlngs[0][0] + ', ' + latlngs[0][1] + '<br>' +
                                        'Tipo edificio: ' + buildingType + '<br>' +
                                        'Indirizzo: Indirizzo non disponibile<br>' +
                                        'Stato: ' + statoEdificio + '<br>' +
                                        'Codice Catastale: nessuno';
                                    polygon.bindPopup(popupContent).openPopup();
                                }
                                var codiceCatasto = element.tags && element.tags.codice_catasto ? element.tags.codice_catasto : "nessuno";
                                document.getElementById('codiceCatastaleInput').value = codiceCatasto;
                            });
                        } else if (element.type === 'relation' && element.members) {
                            // Gestione delle relazioni (edifici complessi)
                            // Da implementare
                        }
                    });
                } catch (error) {
                    console.error('Errore durante il caricamento degli edifici:', error);
                    // Gestisci l'errore (ad esempio, mostra un messaggio all'utente)
                }
            } else {
                edificiLayer.clearLayers();
            }
        }

        // Funzione per ottenere l'indirizzo dalle coordinate
        async function getAddress(lat, lng) {
    try {
        const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`);
        const data = await response.json();

        if (data.address) {
            const displayName = data.display_name;
            document.getElementById('addressInput').value = displayName;
            document.getElementById('addressInputForm').value = displayName; // Aggiorna anche il campo del form
        } else {
            document.getElementById('addressInput').value = "Indirizzo non trovato";
            document.getElementById('addressInputForm').value = "Indirizzo non trovato"; // Aggiorna anche il campo del form
        }
    } catch (error) {
        console.error("Errore nel geocoding inverso:", error);
        document.getElementById('addressInput').value = "Errore nel geocoding inverso";
        document.getElementById('addressInputForm').value = "Errore nel geocoding inverso"; // Aggiorna anche il campo del form
    }
}

        async function prendiIndirizzo(lat, lng) {
            try {
                const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`);
                const data = await response.json();

                if (data.address) {
                    return data.display_name;
                } else {
                    return "Indirizzo non trovato";
                }
            } catch (error) {
                console.error("Errore nel geocoding inverso:", error);
                return "Indirizzo non disponibile";
            }
        }

        function debounce(func, delay) {
            let timeoutId;
            return function(...args) {
                clearTimeout(timeoutId);
                timeoutId = setTimeout(() => {
                    func.apply(this, args);
                }, delay);
            };
        }

        const debouncedCaricaEdifici = debounce(caricaEdifici, 300);

        // Gestione dell'input manuale delle coordinate
        document.getElementById('latInput').addEventListener('blur', function () {
            const lat = parseFloat(this.value);
            const lng = parseFloat(document.getElementById('lngInput').value);
            if (!isNaN(lat) && !isNaN(lng)) {
                map.setView([lat, lng], 16);
                if (marker) {
                    map.removeLayer(marker);
                }
                marker = L.marker([lat, lng]).addTo(map)
                    .bindPopup(`Coordinate: ${lat}, ${lng}`)
                    .openPopup();
                getAddress(lat, lng);
            }
        });

        document.getElementById('lngInput').addEventListener('blur', function () {
            const lat = parseFloat(document.getElementById('latInput').value);
            const lng = parseFloat(this.value);
            if (!isNaN(lat) && !isNaN(lng)) {
                map.setView([lat, lng], 16);
                if (marker) {
                    map.removeLayer(marker);
                }
                marker = L.marker([lat, lng]).addTo(map)
                    .bindPopup(`Coordinate: ${lat}, ${lng}`)
                    .openPopup();
                getAddress(lat, lng);
            }
        });

        // Funzione per aggiungere una riga alla tabella
        function aggiungiRiga() {
    const indirizzo = document.getElementById('addressInput').value;
    const latitudine = document.getElementById('latInput').value;
    const longitudine = document.getElementById('lngInput').value;
    const codiceCatastale = document.getElementById('codiceCatastaleInput').value;
    const dataPredisposizione = document.getElementById('dataPredisposizione').value;
    const scala = document.getElementById('scala').value;
    const piano = document.getElementById('piano').value;
    const interno = document.getElementById('interno').value;
    const operatore = document.getElementById('operatore').value;
    const terminazione = document.getElementById('terminazione').value;
    const nota = document.getElementById('nota').value;

    // Controllo se tutti i campi sono compilati
    if (!indirizzo || !latitudine || !longitudine || !dataPredisposizione || 
        !codiceCatastale || !scala || !piano || !interno || !operatore || !terminazione ) {
        alert("Compila tutti i campi prima di aggiungere la TFO!");
        return; // Blocca l'inserimento
    }

    // Crea una nuova riga nella tabella
    const tabella = document.querySelector(".table tbody");
    const nuovaRiga = tabella.insertRow();

    // Crea le celle della riga e inserisci i valori
    const celle = [];
    for (let i = 0; i < 11; i++) {
        celle.push(nuovaRiga.insertCell());
    }

    celle[0].textContent = indirizzo;
    celle[1].textContent = latitudine;
    celle[2].textContent = longitudine;
    celle[3].textContent = codiceCatastale;
    celle[4].textContent = dataPredisposizione;
    celle[5].textContent = scala;
    celle[6].textContent = piano;
    celle[7].textContent = interno;
    celle[8].textContent = operatore;
    celle[9].textContent = terminazione;
    celle[10].textContent = nota;

    // Aggiungi i pulsanti di modifica e cancellazione
    const azioniCell = nuovaRiga.insertCell();
    azioniCell.innerHTML = `
        <div class="d-flex gap-2">
            <button class="btn btn-sm btn-primary" onclick="modificaRiga(this)"><i class="fas fa-edit"></i></button>
            <button class="btn btn-sm btn-danger" onclick="cancellaDato(this)"><i class="fas fa-trash"></i></button>
        </div>
    `;

    // Resetta i campi del form dopo l'inserimento
    resettaForm();
}

 // Funzione per modificare una riga
 function modificaRiga(button) {
      const riga = button.closest('tr'); // Trova la riga più vicina al pulsante
      const celle = riga.cells;

    // Popola i campi del form con i dati della riga
    document.getElementById("addressInput").value = celle[0].textContent;
    document.getElementById("latInput").value = celle[1].textContent;
    document.getElementById("lngInput").value = celle[2].textContent;
    document.getElementById("codiceCatastaleInput").value = celle[3].textContent;
    document.getElementById("dataPredisposizione").value = celle[4].textContent;
    document.getElementById("scala").value = celle[5].textContent;
    document.getElementById("piano").value = celle[6].textContent;
    document.getElementById("interno").value = celle[7].textContent;
    document.getElementById("operatore").value = celle[8].textContent;
    document.getElementById("terminazione").value = celle[9].textContent;
    document.getElementById("nota").value = celle[10].textContent;

    // Rimuovi la riga dalla tabella
    riga.remove();
}
      
      // Funzione per cancellare una riga
      function cancellaDato(button) {
    // Chiedi conferma all'utente
    if (confirm("Sei sicuro di voler eliminare questo dato?")) {
        // L'utente ha confermato, procedi con l'eliminazione
        const riga = button.closest("tr");
        if (riga) {
            riga.remove();
            alert("Dato eliminato con successo.");
        }
    } else {
        // L'utente ha annullato l'eliminazione
        alert("Eliminazione annullata.");
    }
}


        // Funzione per resettare il form
        function resettaForm() {
    document.getElementById('addressInputForm').value = '';
    document.getElementById('addressInput').value = '';
    document.getElementById('latInput').value = '';
    document.getElementById('lngInput').value = '';
    document.getElementById('codiceCatastaleInput').value = '';
    document.getElementById('dataPredisposizione').value = '';
    document.getElementById('scala').value = '';
    document.getElementById('piano').value = '';
    document.getElementById('interno').value = '';
    document.getElementById('operatore').value = '1';
    document.getElementById('terminazione').value = '';
    document.getElementById('nota').value = '';
}

        // Aggiungi un listener per il movimento della mappa
        map.on('moveend', debouncedCaricaEdifici);

        // Carica gli edifici iniziali
        caricaEdifici();
    </script>
</body>
</html>