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

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

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

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

    <div class="pcoded-content">

        <div class="page-header">

            <div class="page-block">

                <div class="row align-items-center">

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

                        <div class="page-header-title">

                            <h5 class="m-b-10">
                                Dashboard WebGIS Mitigasi Banjir Bandang Kecamatan Bajo Barat
                            </h5>

                        </div>
                    </div>

                </div>

            </div>

        </div>

        <div class="row">

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

                <div class="card">

                    <div class="card-header">

                        <h3>
                            Selamat Datang,
                            <?= session()->get('nama_lengkap') ?>
                        </h3>

                    </div>

                    <div class="card-body">

                        <p>
                            Sistem Informasi Geografis (WebGIS) Mitigasi Banjir Bandang Kecamatan Bajo Barat.
                            Dashboard ini menampilkan ringkasan data strategi mitigasi, wilayah mitigasi,
                            dan peta kerawanan banjir bandang.
                        </p>

                    </div>

                </div>


                <div class="card">

                    <div class="card-header">
                        <h5>PETA WILAYAH KECAMATAN BAJO BARAT</h5>
                    </div>


                    <div class="card-body">

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

                    </div>

                </div>


                <div class="card mt-4">

                    <div class="card-header">

                        <h5>Data Wilayah Mitigasi Terbaru</h5>

                    </div>

                    <div class="card-body table-responsive">

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

                            <thead class="thead-light">

                                <tr>
                                    <th>No</th>
                                    <th>Lokasi</th>
                                    <th>Jenis</th>
                                    <th>Judul Strategi</th>
                                </tr>

                            </thead>

                            <tbody>

                                <?php
                                $no = 1;
                                foreach ($wilayahTerbaru as $row):
                                ?>

                                    <tr>

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

                                        <td><?= $row['lokasi'] ?></td>

                                        <td>
                                            <span class="badge badge-<?= $row['jenis'] == 'struktural' ? 'primary' : 'success' ?>">
                                                <?= ucfirst(str_replace('_', ' ', $row['jenis'])) ?>
                                            </span>
                                        </td>

                                        <td><?= $row['judul'] ?></td>

                                    </tr>

                                <?php endforeach; ?>

                            </tbody>

                        </table>
                    </div>

                </div>


            </div>

        </div>

    </div>

</div>




<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">

<script src="https://unpkg.com/leaflet/dist/leaflet.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; WebGIS Banjir Bandang Kec. Bajo Barat'
        }
    ).addTo(map);



    // ICON

    var iconWilayah = L.icon({

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

        iconSize: [35, 35],

        iconAnchor: [17, 35]

    });



    // BATAS DESA

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

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

        .then(data => {


            let batas = L.geoJSON(data, {

                style: function(feature) {

                    let desa = feature.properties.NAMOBJ.toLowerCase();

                    let warna = "#cccccc";



                    switch (desa) {

                        case "bonelemo":
                            warna = "#C4DD74";
                            break;

                        case "bonelemo barat":
                            warna = "#B6FF45";
                            break;

                        case "bonelemo utara":
                            warna = "#A9C62A";
                            break;

                        case "kadong-kadong":
                            warna = "#EDF4B6";
                            break;

                        case "marinding":
                            warna = "#E9FF45";
                            break;

                        case "sampeang":
                            warna = "#A8B987";
                            break;

                        case "saronda":
                            warna = "#99D34B";
                            break;

                        case "tettekang":
                            warna = "#E7FA73";
                            break;

                        case "tumbubara":
                            warna = "#C5D24A";
                            break;
                    }


                    return {


                        color: "#333",

                        weight: 2,


                        fillColor: warna,


                        fillOpacity: 0.9


                    };


                },


                onEachFeature: function(feature, layer) {


                    let namaDesa = feature.properties.NAMOBJ;


                    // Popup saat diklik
                    layer.bindPopup(` <b>Desa :</b> ${namaDesa}`);


                    // Label nama desa di peta
                    layer.bindTooltip(namaDesa, {

                        permanent: true,

                        direction: "center",

                        className: "label-desa",

                        opacity: 1

                    });


                }


            }).addTo(map);



            map.fitBounds(batas.getBounds());

        });




    // BATAS KECAMATAN

    fetch("<?= base_url('uploads/wilayah/batas_kecamatan.json') ?>")

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

        .then(data => {


            L.geoJSON(data, {

                interactive: false,


                style: {

                    color: "#000",

                    weight: 3,

                    dashArray: "10 8",

                    fill: false

                }


            }).addTo(map);


        });




    // MARKER DESA


    <?php foreach ($wilayah as $w): ?>


        L.marker(

                [

                    <?= $w['latitude'] ?>,

                    <?= $w['longitude'] ?>

                ],

                {

                    icon: iconWilayah

                }

            )

            .addTo(map)


            .bindPopup(`

<b><?= addslashes($w['nama_desa']) ?></b><br>


Penduduk :

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

<br>


Luas :

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


<br>


Persentase :

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

`);



    <?php endforeach; ?>
</script>


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