<?= $this->include('admin/layout/header') ?>
<?= $this->include('admin/layout/navbar') ?>
<?= $this->include('admin/layout/topbar') ?>

<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" />

<div class="pcoded-main-container">
    <div class="pcoded-content">

        <div class="card">

            <div class="card-header">

                <h5>Buat Peta Mitigasi / Polygon</h5>

                <a href="<?= base_url('admin/peta-kerawanan') ?>"
                    class="btn btn-secondary float-right">

                    Kembali

                </a>

            </div>

            <div class="card-body">

                <div class="row">

                    <div class="col-md-9">

                        <div id="map" style="height:650px;"></div>

                    </div>

                    <div class="col-md-3">

                        <div class="card shadow-sm">

                            <div class="card-header bg-primary text-white">
                                <b>Informasi Peta</b>
                            </div>

                            <div class="card-body">

                                <div class="form-group">
                                    <label>Judul Peta</label>
                                    <input type="text"
                                        id="judul"
                                        class="form-control">
                                </div>

                                <div class="form-group">
                                    <label>Tanggal Update</label>
                                    <input type="date"
                                        id="tanggal_update"
                                        class="form-control"
                                        value="<?= date('Y-m-d') ?>">
                                </div>

                                <div class="form-group">
                                    <label>Deskripsi</label>
                                    <textarea
                                        id="deskripsi"
                                        rows="3"
                                        class="form-control"></textarea>
                                </div>

                                <div class="form-group">
                                    <label>GeoJSON</label>

                                    <textarea
                                        id="hasilGeojson"
                                        class="form-control"
                                        rows="12"
                                        readonly></textarea>
                                </div>

                                <button
                                    id="btnSimpan"
                                    class="btn btn-success btn-block">

                                    <i class="fa fa-save"></i>
                                    Simpan Peta

                                </button>

                                <button
                                    id="btnReset"
                                    class="btn btn-danger btn-block mt-2">

                                    Reset

                                </button>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>
</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>
    var map = L.map('map').setView([-3.3556, 120.2349], 11);

    L.tileLayer(
        'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            attribution: '&copy; ESRI'
        }).addTo(map);


    //====================================================
    // Layer hasil gambar
    //====================================================

    var drawnItems = new L.FeatureGroup();

    map.addLayer(drawnItems);


    //====================================================
    // Toolbar Draw
    //====================================================

    var drawControl = new L.Control.Draw({

        edit: {

            featureGroup: drawnItems

        },

        draw: {

            polygon: true,

            rectangle: true,

            polyline: true,

            circle: false,

            circlemarker: false,

            marker: true

        }

    });

    map.addControl(drawControl);


    //====================================================
    // Ketika selesai menggambar
    //====================================================

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

        var layer = e.layer;

        drawnItems.addLayer(layer);

        updateGeoJSON();

    });


    //====================================================
    // Ketika edit
    //====================================================

    map.on(L.Draw.Event.EDITED, function() {

        updateGeoJSON();

    });


    //====================================================
    // Ketika hapus
    //====================================================

    map.on(L.Draw.Event.DELETED, function() {

        updateGeoJSON();

    });


    //====================================================
    // Generate GeoJSON
    //====================================================

    function updateGeoJSON() {

        let geojson = drawnItems.toGeoJSON();

        document.getElementById('hasilGeojson').value =
            JSON.stringify(geojson, null, 2);

    }


    //====================================================
    // Reset
    //====================================================

    document.getElementById('btnReset').onclick = function() {

        drawnItems.clearLayers();

        updateGeoJSON();

    };


    //====================================================
    // Simpan Ajax
    //====================================================

    document.getElementById('btnSimpan').onclick = function() {

        let judul = document.getElementById("judul").value;
        let tanggal = document.getElementById("tanggal_update").value;
        let deskripsi = document.getElementById("deskripsi").value;
        let geojson = document.getElementById("hasilGeojson").value;

        if (judul == "") {
            alert("Judul belum diisi.");
            return;
        }

        if (geojson == "") {
            alert("Silakan gambar polygon terlebih dahulu.");
            return;
        }

        fetch("<?= base_url('admin/peta-kerawanan/simpan-peta') ?>", {

                method: "POST",

                headers: {
                    "Content-Type": "application/json"
                },

                body: JSON.stringify({

                    judul: judul,
                    tanggal_update: tanggal,
                    deskripsi: deskripsi,
                    geojson: JSON.parse(geojson)

                })

            })

            .then(res => res.json())

            .then(function(res) {

                alert(res.message);

                if (res.status) {

                    window.location =
                        "<?= base_url('admin/peta-kerawanan') ?>";

                }

            })

            .catch(function() {

                alert("Gagal menyimpan.");

            });

    };
</script>

<?= $this->include('admin/layout/footer') ?>