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

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

<section class="section">

    <div class="container">

        <div class="section-title">

            <h2><?= $peta['judul'] ?></h2>

            <p>
                <?= $peta['deskripsi'] ?>
            </p>

        </div>

        <div class="row">

            <div class="col-lg-4">

                <div class="card shadow-sm">

                    <div class="card-header">

                        <b>Informasi Peta</b>

                    </div>

                    <div class="card-body">

                        <table class="table table-bordered">

                            <tr>
                                <th width="150">Judul</th>
                                <td><?= $peta['judul'] ?></td>
                            </tr>

                            <tr>
                                <th>Tanggal</th>
                                <td><?= $peta['tanggal_update'] ?></td>
                            </tr>

                            <tr>
                                <th>Deskripsi</th>
                                <td><?= nl2br($peta['deskripsi']) ?></td>
                            </tr>

                        </table>

                        <div class="alert alert-info">

                            <b>Keterangan Warna</b>

                            <hr>

                            <span style="display:inline-block;width:20px;height:20px;background:#2196F3"></span>
                            Tidak Rawan
                            <br>

                            <span style="display:inline-block;width:20px;height:20px;background:#20c726"></span>
                            Cukup Rawan
                            <br>

                            <span style="display:inline-block;width:20px;height:20px;background:#FFD600"></span>
                            Rawan
                            <br>

                            <span style="display:inline-block;width:20px;height:20px;background:#ff1100"></span>
                            Sangat Rawan

                        </div>

                    </div>

                </div>

            </div>

            <div class="col-lg-8">

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

            </div>

        </div>

    </div>

</section>

<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://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap'
    }).addTo(map);

    var iconWilayah = L.icon({

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

        iconSize: [35, 35],

        iconAnchor: [17, 35]

    });

    fetch("<?= base_url('uploads/peta_kerawanan/' . $peta['file_geojson']) ?>")

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

        .then(function(data) {

            var geo = L.geoJSON(data, {

                style: function(feature) {

                    let warna = "#999";

                    let kelas = (feature.properties.KELAS || "").toLowerCase();

                    if (kelas == "tidak rawan") warna = "#2196F3";
                    else if (kelas == "cukup rawan") warna = "#20c726";
                    else if (kelas == "rawan") warna = "#FFD600";
                    else if (kelas == "sangat rawan") warna = "#ff1100";

                    return {

                        color: "#000",

                        weight: 1,

                        fillColor: warna,

                        fillOpacity: 0.8

                    };

                },

                onEachFeature: function(feature, layer) {

                    layer.bindPopup(

                        "<b>Kelas :</b> " + feature.properties.KELAS

                    );

                }

            }).addTo(map);

            map.fitBounds(geo.getBounds());

            <?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('user/layout/footer') ?>