<?= $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" />

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

        <?php if (session()->getFlashdata('success')): ?>
            <div class="alert alert-success">
                <?= session()->getFlashdata('success') ?>
            </div>
        <?php endif; ?>

        <div class="card">

            <div class="card-header">
                <h5>Data Wilayah</h5>

                <button class="btn btn-primary float-right"
                    data-toggle="modal"
                    data-target="#modalTambah">

                    Tambah Wilayah

                </button>

            </div>

            <div class="card-body">

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

                <hr>

                <table class="table table-bordered table-striped">

                    <thead>

                        <tr>

                            <th>No</th>
                            <th>Desa</th>
                            <th>Penduduk</th>
                            <th>Luas</th>
                            <th>Persentasi Luas</th>
                            <th>Lokasi</th>
                            <th width="150">Aksi</th>

                        </tr>

                    </thead>

                    <tbody>

                        <?php $no = 1;
                        foreach ($wilayah as $w): ?>

                            <tr>

                                <td><?= $no++ ?></td>

                                <td><?= $w['nama_desa'] ?></td>

                                <td><?= number_format($w['total_penduduk']) ?></td>

                                <td><?= $w['luas_daerah'] ?> Km²</td>

                                <td><?= $w['persentase_luas'] ?> %</td>

                                <td>Latitude : <?= $w['latitude'] ?><br>Longitude : <?= $w['longitude'] ?></td>

                                <td>

                                    <button
                                        class="btn btn-warning btn-sm btnEdit"

                                        data-toggle="modal"
                                        data-target="#edit<?= $w['id_wilayah'] ?>"

                                        data-lat="<?= $w['latitude'] ?>"
                                        data-lng="<?= $w['longitude'] ?>">

                                        Edit

                                    </button>

                                    <button
                                        class="btn btn-danger btn-sm"
                                        data-toggle="modal"
                                        data-target="#hapus<?= $w['id_wilayah'] ?>">

                                        Hapus

                                    </button>

                                </td>

                            </tr>

                            <!-- ================= EDIT ================= -->

                            <div class="modal fade" id="edit<?= $w['id_wilayah'] ?>">

                                <div class="modal-dialog modal-lg">

                                    <div class="modal-content">

                                        <form method="post"
                                            action="<?= base_url('admin/wilayah/update/' . $w['id_wilayah']) ?>">

                                            <div class="modal-header">

                                                <h5>Edit Wilayah</h5>

                                            </div>

                                            <div class="modal-body">

                                                <div class="row">

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

                                                        <label>Nama Desa</label>

                                                        <input
                                                            type="text"
                                                            name="nama_desa"
                                                            value="<?= $w['nama_desa'] ?>"
                                                            class="form-control mb-2">

                                                        <label>Total Penduduk</label>

                                                        <input
                                                            type="number"
                                                            name="total_penduduk"
                                                            value="<?= $w['total_penduduk'] ?>"
                                                            class="form-control mb-2">

                                                        <label>Luas Daerah</label>

                                                        <input
                                                            type="text"
                                                            name="luas_daerah"
                                                            value="<?= $w['luas_daerah'] ?>"
                                                            class="form-control mb-2">

                                                        <label>Persentase Luas</label>

                                                        <input
                                                            type="text"
                                                            name="persentase_luas"
                                                            value="<?= $w['persentase_luas'] ?>"
                                                            class="form-control mb-2">

                                                    </div>

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

                                                        <label>Latitude</label>

                                                        <input
                                                            id="editLat<?= $w['id_wilayah'] ?>"
                                                            type="text"
                                                            name="latitude"
                                                            value="<?= $w['latitude'] ?>"
                                                            class="form-control mb-2">

                                                        <label>Longitude</label>

                                                        <input
                                                            id="editLng<?= $w['id_wilayah'] ?>"
                                                            type="text"
                                                            name="longitude"
                                                            value="<?= $w['longitude'] ?>"
                                                            class="form-control mb-2">

                                                        <input
                                                            type="hidden"
                                                            name="icon_marker"
                                                            value="marker.png">

                                                        <label>Keterangan</label>

                                                        <textarea
                                                            name="keterangan"
                                                            class="form-control"><?= $w['keterangan'] ?></textarea>

                                                    </div>

                                                </div>

                                            </div>

                                            <div class="modal-footer">

                                                <button class="btn btn-success">

                                                    Update

                                                </button>

                                            </div>

                                        </form>

                                    </div>

                                </div>

                            </div>

                            <!-- ================= HAPUS ================= -->

                            <div class="modal fade" id="hapus<?= $w['id_wilayah'] ?>">

                                <div class="modal-dialog">

                                    <div class="modal-content">

                                        <div class="modal-body text-center">

                                            <h5>Hapus data ini ?</h5>

                                            <a
                                                href="<?= base_url('admin/wilayah/delete/' . $w['id_wilayah']) ?>"
                                                class="btn btn-danger">

                                                Ya Hapus

                                            </a>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        <?php endforeach; ?>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

<!-- ================= TAMBAH ================= -->

<div class="modal fade" id="modalTambah">

    <div class="modal-dialog modal-lg">

        <div class="modal-content">

            <form method="post"
                action="<?= base_url('admin/wilayah/store') ?>">

                <div class="modal-header">

                    <h5>Tambah Wilayah</h5>

                </div>

                <div class="modal-body">

                    <div class="row">

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

                            <label>Nama Desa</label>

                            <input
                                type="text"
                                name="nama_desa"
                                class="form-control mb-2"
                                required>

                            <label>Total Penduduk</label>

                            <input
                                type="number"
                                name="total_penduduk"
                                class="form-control mb-2">

                            <label>Luas Daerah</label>

                            <input
                                type="text"
                                name="luas_daerah"
                                class="form-control mb-2">

                            <label>Persentase Luas</label>

                            <input
                                type="text"
                                name="persentase_luas"
                                class="form-control mb-2">

                        </div>

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

                            <label>Latitude</label>

                            <input
                                id="latitude"
                                type="text"
                                name="latitude"
                                class="form-control mb-2"
                                readonly>

                            <label>Longitude</label>

                            <input
                                id="longitude"
                                type="text"
                                name="longitude"
                                class="form-control mb-2"
                                readonly>

                            <input
                                type="hidden"
                                name="icon_marker"
                                value="marker.png">

                            <label>Keterangan</label>

                            <textarea
                                name="keterangan"
                                class="form-control"></textarea>

                        </div>

                    </div>

                </div>

                <div class="modal-footer">

                    <button class="btn btn-primary">

                        Simpan

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>



<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

<script>
    // ================================
    // MAP
    // ================================
    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; Webgis Banjir Bandang Kec. Bajo Barat'
        }
    ).addTo(map);
    // ================================
    // BATAS WILAYAH BAJO BARAT
    // ================================
    let batasWilayah;

    fetch("<?= base_url('uploads/wilayah/bajo_barat.json') ?>")
        .then(response => response.json())
        .then(data => {

            batasWilayah = L.geoJSON(data, {

                style: {
                    color: "#000000b0",
                    weight: 2,
                    fillColor: "#4CAF50",
                }

            }).addTo(map);

            map.fitBounds(batasWilayah.getBounds());

        })
        .catch(error => {

            console.log(error);
            alert("GeoJSON Bajo Barat gagal dimuat.");

        });

    // ================================
    // ICON MARKER
    // ================================
    var iconWilayah = L.icon({

        iconUrl: "<?= base_url('uploads/wilayah/marker.png') ?>",

        iconSize: [35, 35],
        iconAnchor: [17, 35],
        popupAnchor: [0, -35]

    });

    // ================================
    // MARKER SAAT KLIK
    // ================================
    var markerInput = null;

    map.on('click', function(e) {

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

        markerInput = L.marker(e.latlng, {
            icon: iconWilayah
        }).addTo(map);

        document.getElementById("latitude").value = e.latlng.lat.toFixed(6);
        document.getElementById("longitude").value = e.latlng.lng.toFixed(6);

    });

    // ================================
    // MARKER DARI DATABASE
    // ================================
    <?php foreach ($wilayah as $w): ?>

        L.marker(
                [
                    <?= $w['latitude'] ?>,
                    <?= $w['longitude'] ?>
                ], {
                    icon: iconWilayah
                })
            .addTo(map)

            .bindPopup(`<b>Desa : <?= addslashes($w['nama_desa']) ?></b><br> Penduduk : <?= number_format($w['total_penduduk']) ?> Jiwa<br> Luas : <?= $w['luas_daerah'] ?> Km²<br> Persentase Luas : <?= $w['persentase_luas'] ?> %`)

            .bindTooltip(
                "<?= $w['nama_desa'] != '' ? addslashes($w['nama_desa']) : '-' ?>", {
                    permanent: true,
                    direction: 'bottom',
                    offset: [0, 10],
                    className: 'labelDesa'
                });

    <?php endforeach; ?>
</script>
<?= $this->include('admin/layout/footer') ?>