<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>WebGIS Jalan & Parsil Tanah</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css">

    <style>
    html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
    }

    #map {
        width: 100%;
        height: 100vh;
    }

    #sidebar {

        position: absolute;
        top: 0;
        right: -320px;

        width: 300px;
        height: 100%;

        background: #fff;

        border-left: 1px solid #ddd;

        z-index: 9999;

        padding: 20px;

        transition: .3s;

        overflow-y: auto;

        box-shadow: -3px 0 10px rgba(0, 0, 0, .2);

    }

    #sidebar label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    #sidebar input,
    #sidebar select {
        box-sizing: border-box;
    }

    #sidebar button {
        width: 100%;
    }

    #sidebar h3 {
        margin-top: 10px;
    }

    #sidebar button {
        padding: 10px;
        cursor: pointer;
    }

    #sidebar.active {
        right: 0;
    }

    #sidebar input,
    #sidebar select {

        width: 100%;
        padding: 8px;
        margin-bottom: 10px;

    }
    </style>
</head>

<body>

    <div id="map"></div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
    <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>

    <div id="sidebar">
        <button onclick="tutupSidebar()">
            ✖ Tutup
        </button>
        <h3>Edit Data</h3>

        <input type="hidden" id="edit_id">
        <input type="hidden" id="edit_tipe">

        <label>Nama / Nomor</label>
        <input type="text" id="edit_nama">

        <label>Status</label>

        <select id="edit_status">
        </select>

        <br><br>

        <button onclick="simpanEdit()" style="
        background:#2563eb;
        color:white;
        border:none;
        border-radius:5px;
    ">
            Simpan Perubahan
        </button>

        <button onclick="hapusData()" style="
        background:red;
        color:white;
        border:none;
        border-radius:5px;
        margin-top:10px;
    ">
            Hapus Data
        </button>
    </div>

    <script>
    var map = L.map('map').setView([-0.0263, 109.3425], 13);

    L.tileLayer(
        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap'
        }).addTo(map);

    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    var drawControl = new L.Control.Draw({
        edit: {
            featureGroup: drawnItems
        },
        draw: {
            marker: false,
            circle: false,
            rectangle: false,
            circlemarker: false,
            polyline: true,
            polygon: true
        }
    });

    map.addControl(drawControl);

    var pontianak = [-0.0263, 109.3425];

    var homeControl = L.control({
        position: 'topleft'
    });

    homeControl.onAdd = function() {

        var div = L.DomUtil.create('div');

        div.innerHTML =
            '<button style="padding:8px;">🏠 Home</button>';

        div.onclick = function() {
            map.setView(pontianak, 13);
        };

        return div;
    };

    homeControl.addTo(map);


    function warnaJalan(status) {

        if (status == "Jalan Nasional") return "red";
        if (status == "Jalan Provinsi") return "blue";
        if (status == "Jalan Kabupaten") return "green";

        return "black";
    }

    function warnaParsil(status) {

        if (status == "SHM") return "green";
        if (status == "HGB") return "orange";
        if (status == "HGU") return "blue";
        if (status == "HP") return "purple";

        return "gray";
    }

    //
    // TAMPILKAN JALAN
    fetch('jalan/tampil.php')
        .then(response => response.json())
        .then(data => {

            data.forEach(item => {

                var geojson = {
                    type: "Feature",
                    geometry: JSON.parse(item.geom),
                    properties: item
                };

                var layer = L.geoJSON(geojson, {
                    style: {
                        color: warnaJalan(item.status_jalan),
                        weight: 4
                    }
                });

                layer.eachLayer(function(l) {

                    l.id_data = item.id;
                    l.tipe_data = 'jalan';

                    l.bindPopup(
                        "<b>Nama Jalan :</b> " + item.nama_jalan +
                        "<br><b>Status :</b> " + item.status_jalan +
                        "<br><b>Panjang :</b> " +
                        parseFloat(item.panjang).toFixed(2) +
                        " Meter"
                    );

                    drawnItems.addLayer(l);
                    l.on('click', function() {

                        document
                            .getElementById('sidebar')
                            .classList.add('active');

                        document
                            .getElementById('edit_id')
                            .value = item.id;

                        document
                            .getElementById('edit_tipe')
                            .value = 'jalan';

                        document
                            .getElementById('edit_nama')
                            .value = item.nama_jalan;

                        document
                            .getElementById('edit_status')
                            .innerHTML =

                            '<option>Jalan Nasional</option>' +

                            '<option>Jalan Provinsi</option>' +

                            '<option>Jalan Kabupaten</option>';

                        document
                            .getElementById('edit_status')
                            .value = item.status_jalan;

                    });
                });

            });

        });

    // TAMPILKAN PARSIL
    fetch('parsil/tampil.php')
        .then(response => response.json())
        .then(data => {

            data.forEach(item => {

                var geojson = {
                    type: "Feature",
                    geometry: JSON.parse(item.geom),
                    properties: item
                };

                var layer = L.geoJSON(geojson, {
                    style: {
                        color: warnaParsil(item.status_kepemilikan),
                        fillOpacity: 0.5
                    }
                });

                layer.eachLayer(function(l) {

                    l.id_data = item.id;
                    l.tipe_data = 'parsil';

                    l.bindPopup(
                        "<b>Nomor Parsil :</b> " +
                        item.nomor_parsil +

                        "<br><b>Status :</b> " +
                        item.status_kepemilikan +

                        "<br><b>Luas :</b> " +
                        parseFloat(item.luas).toFixed(2) +
                        " m²"
                    );

                    drawnItems.addLayer(l);
                    l.on('click', function() {

                        document
                            .getElementById('sidebar')
                            .classList.add('active');

                        document
                            .getElementById('edit_id')
                            .value = item.id;

                        document
                            .getElementById('edit_tipe')
                            .value = 'parsil';

                        document
                            .getElementById('edit_nama')
                            .value = item.nomor_parsil;

                        document
                            .getElementById('edit_status')
                            .innerHTML =

                            '<option>SHM</option>' +

                            '<option>HGB</option>' +

                            '<option>HGU</option>' +

                            '<option>HP</option>';

                        document
                            .getElementById('edit_status')
                            .value = item.status_kepemilikan;

                    });
                });

            });

        });
    var layerKecamatan;

    fetch('assets/geojson/pontianak.geojson')
        .then(response => response.json())
        .then(data => {

            layerKecamatan = L.geoJSON(data, {
                style: {
                    color: '#2563eb',
                    weight: 2,
                    fillColor: '#60a5fa',
                    fillOpacity: 0.3
                },
                interactive: false
            });

            layerKecamatan.addTo(map);
            layerKecamatan.bringToBack();
        });

    // CREATE // 
    map.on(L.Draw.Event.CREATED, function(e) {

        var layer = e.layer;

        drawnItems.addLayer(layer);

        var geojson = layer.toGeoJSON();

        // JALAN
        if (geojson.geometry.type === "LineString") {

            var panjang =
                turf.length(
                    geojson, {
                        units: 'kilometers'
                    }
                ) * 1000;

            var namaJalan =
                prompt("Masukkan Nama Jalan");

            var statusJalan =
                prompt(
                    "Masukkan Status Jalan:\n\nJalan Nasional\nJalan Provinsi\nJalan Kabupaten"
                );

            fetch('jalan/simpan.php', {

                    method: 'POST',

                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },

                    body: 'nama_jalan=' + encodeURIComponent(namaJalan) +
                        '&status_jalan=' + encodeURIComponent(statusJalan) +
                        '&panjang=' + encodeURIComponent(panjang) +
                        '&geom=' + encodeURIComponent(
                            JSON.stringify(
                                geojson.geometry
                            )
                        )

                })
                .then(response => response.json())
                .then(data => {

                    if (data.success) {
                        alert("Data Jalan Berhasil Disimpan");
                        location.reload();
                    } else {
                        alert(data.error);
                    }

                });

        }

        // PARSIL
        if (geojson.geometry.type === "Polygon") {

            var luas =
                turf.area(geojson);

            var nomorParsil =
                prompt("Masukkan Nomor Parsil");

            var statusParsil =
                prompt(
                    "Masukkan Status:\n\nSHM\nHGB\nHGU\nHP"
                );

            fetch('parsil/simpan.php', {

                    method: 'POST',

                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },

                    body: 'nomor_parsil=' + encodeURIComponent(nomorParsil) +
                        '&status=' + encodeURIComponent(statusParsil) +
                        '&luas=' + encodeURIComponent(luas) +
                        '&geom=' + encodeURIComponent(
                            JSON.stringify(
                                geojson.geometry
                            )
                        )

                })
                .then(response => response.json())
                .then(data => {

                    if (data.success) {
                        alert("Data Parsil Berhasil Disimpan");
                        location.reload();
                    } else {
                        alert(data.error);
                    }

                });

        }

    });

    map.on('draw:edited', function(e) {

        var layers = e.layers;

        layers.eachLayer(function(layer) {

            var geojson = layer.toGeoJSON();

            if (layer.tipe_data == 'jalan') {

                var panjang =
                    turf.length(
                        geojson, {
                            units: 'kilometers'
                        }
                    ) * 1000;

                fetch(
                    'jalan/update_geom.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body: 'id=' + layer.id_data +
                            '&panjang=' + panjang +
                            '&geom=' +
                            encodeURIComponent(
                                JSON.stringify(
                                    geojson.geometry
                                )
                            )
                    }
                );

            }

            if (layer.tipe_data == 'parsil') {

                var luas =
                    turf.area(
                        geojson
                    );

                fetch(
                    'parsil/update_geom.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body: 'id=' + layer.id_data +
                            '&luas=' + luas +
                            '&geom=' +
                            encodeURIComponent(
                                JSON.stringify(
                                    geojson.geometry
                                )
                            )
                    }
                );

            }

        });

        alert(
            'Geometry berhasil diperbarui'
        );

    });

    var legend = L.control({
        position: 'bottomright'
    });

    function hapusJalan(id) {

        if (!confirm('Hapus data jalan?')) {
            return;
        }

        fetch(
                'jalan/hapus.php?id=' + id
            )
            .then(r => r.json())
            .then(data => {

                if (data.success) {

                    alert('Berhasil dihapus');

                    location.reload();

                }

            });
    }

    function hapusParsil(id) {

        if (!confirm('Hapus data parsil?')) {
            return;
        }

        fetch(
                'parsil/hapus.php?id=' + id
            )
            .then(r => r.json())
            .then(data => {

                if (data.success) {

                    alert('Berhasil dihapus');

                    location.reload();

                }

            });

    }

    function simpanEdit() {

        var id =
            document.getElementById('edit_id').value;

        var tipe =
            document.getElementById('edit_tipe').value;

        var nama =
            document.getElementById('edit_nama').value;

        var status =
            document.getElementById('edit_status').value;

        if (tipe == 'jalan') {

            fetch('jalan/update.php', {

                    method: 'POST',

                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },

                    body: 'id=' + id +
                        '&nama_jalan=' + encodeURIComponent(nama) +
                        '&status_jalan=' + encodeURIComponent(status)

                })
                .then(r => r.json())
                .then(data => {

                    alert('Berhasil');

                    location.reload();

                });

        }

        if (tipe == 'parsil') {

            fetch('parsil/update.php', {

                    method: 'POST',

                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },

                    body: 'id=' + id +
                        '&nomor_parsil=' + encodeURIComponent(nama) +
                        '&status=' + encodeURIComponent(status)

                })
                .then(r => r.json())
                .then(data => {

                    alert('Berhasil');

                    location.reload();

                });

        }

    }

    function tutupSidebar() {

        document
            .getElementById('sidebar')
            .classList.remove('active');

    }

    function hapusData() {

        var id =
            document.getElementById('edit_id').value;

        var tipe =
            document.getElementById('edit_tipe').value;

        if (!confirm('Yakin hapus data?')) {
            return;
        }

        if (tipe == 'jalan') {

            fetch(
                    'jalan/hapus.php?id=' + id
                )
                .then(r => r.json())
                .then(data => {

                    if (data.success) {

                        alert('Data berhasil dihapus');

                        location.reload();

                    }

                });

        }

        if (tipe == 'parsil') {

            fetch(
                    'parsil/hapus.php?id=' + id
                )
                .then(r => r.json())
                .then(data => {

                    if (data.success) {

                        alert('Data berhasil dihapus');

                        location.reload();

                    }

                });

        }

    }
    legend.onAdd = function() {

        var div = L.DomUtil.create('div');

        div.style.background = 'white';
        div.style.padding = '10px';

        div.innerHTML =

            '<b>Jalan</b><br>' +

            '<span style="color:red">■</span> Nasional<br>' +

            '<span style="color:blue">■</span> Provinsi<br>' +

            '<span style="color:green">■</span> Kabupaten<br><br>' +

            '<b>Parsil</b><br>' +

            '<span style="color:green">■</span> SHM<br>' +

            '<span style="color:orange">■</span> HGB<br>' +

            '<span style="color:blue">■</span> HGU<br>' +

            '<span style="color:purple">■</span> HP';

        return div;
    };

    legend.addTo(map);
    </script>

</body>

</html>