<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Water Facility Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js"></script>
    <style>
        body, html { margin: 0; padding: 0; height: 100%; }
        #map { height: 100vh; width: 100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // Initialize the map
        const map = L.map('map').setView([7.75, 36.84], 10); // Center map on a general location

        // Add Satellite Tiles from MapTiler
        L.tileLayer('https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=WgUwYoZJZzY3RIyYOOMG', {
            // attribution: 'Map data © MapTiler © OpenStreetMap contributors',
            maxZoom: 20
        }).addTo(map);

        // Function to create pop-up content dynamically
        function createPopupContent(site) {
            let popupContent = `<b>${site["Name of water system"] || "Unnamed Site"}</b><br>`;
            popupContent += `Woreda: ${site["Woreda"] || "N/A"}<br>`;
            popupContent += `Kebele: ${site["Kebele"] || "N/A"}<br>`;
            popupContent += `Village: ${site["Village Name"] || "N/A"}<br>`;
            popupContent += `Elevation: ${site["Elevation"] || "N/A"}<br>`;
            popupContent += `On Spot or Distribution: ${site["on spot or have distribution"] || "N/A"}<br>`;
            popupContent += `Total HH Beneficiaries: ${site["Total HH beneficiaries"] || "N/A"}<br>`;
            popupContent += `Type of Water System: ${site["Type of water system"] || "N/A"}<br>`;
            popupContent += `Water Source Fenced: ${site["water source fenced"] || "N/A"}<br>`;
            popupContent += `Guard at Source: ${site["guard at source"] || "N/A"}<br>`;
            popupContent += `Type of Lifting Device: ${site["Type of lifting device (on spot)"] || "N/A"}<br>`;
            popupContent += `Type of Hand Pump: ${site["Type of hand pump"] || "N/A"}<br>`;
            popupContent += `Type of Power Source: ${site["Type of power source"] || "N/A"}<br>`;
            popupContent += `Functionality Status: ${site["Functionality Status"] || "N/A"}<br>`;
            popupContent += `System Maintained/Rehabilitated: ${site["Has the system ever been maintained/Rehabilitated?"] || "N/A"}<br>`;
            popupContent += `Water Quality Test Conducted: ${site["water quality test conducted regularly"] || "N/A"}<br>`;
            popupContent += `Water Quality Complaints: ${site["Water quality complain from user community"] || "N/A"}<br>`;
            popupContent += `Management: ${site["Who manages the system?"] || "N/A"}<br>`;
            popupContent += `Year of WASHCO Establishment: ${site["Year of WASHCO established (EFY)"] || "N/A"}<br>`;
            popupContent += `Active WASHCO Members: ${site["Are all WASHCO members active?"] || "N/A"}<br>`;
            popupContent += `Date of Last Woreda Visit: ${site["Date of last woreda visit to the WASHCO (EFY)"] || "N/A"}<br>`;
            popupContent += `WASHCO Training Provided: ${site["Was there WASHCO training?"] || "N/A"}<br>`;
            popupContent += `Bank Account: ${site["Does the WASHCO have bank account?"] || "N/A"}<br>`;
            popupContent += `Water Fee Collection: ${site["Water fee collection"] || "N/A"}<br>`;
            popupContent += `Fee Collected Regularly: ${site["Fee collected regularly"] || "N/A"}<br>`;
            if (site["Photo"]) {
                popupContent += `<img src="${site["Photo"]}" alt="Photo of ${site["Name of water system"]}" style="width:100%;max-width:200px;"><br>`;
            }
            popupContent += `Latitude: ${site.Latitude || "N/A"}<br>`;
            popupContent += `Longitude: ${site.Longitude || "N/A"}`;
            return popupContent;
        }

        // Load CSV data
        fetch('Mana_Water_Facility(Mana_Raw Data).csv')
            .then(response => response.text())
            .then(csvText => {
                const data = Papa.parse(csvText, { header: true }).data;
                data.forEach(site => {
                    if (site.Latitude && site.Longitude) {
                        L.marker([parseFloat(site.Latitude), parseFloat(site.Longitude)]).addTo(map)
                            .bindPopup(createPopupContent(site));
                    }
                });
            });
    </script>
</body>
</html>
