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

            <div class="card-header">

                <h5>Data Peta Kerawanan</h5>

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

                    <i class="feather icon-edit-2"></i>
                    Buat Peta

                </a>

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

                    Tambah Data

                </button>

            </div>

            <div class="card-body">

                <?php if (session()->getFlashdata('success')) : ?>

                    <div class="alert alert-success">

                        <?= session()->getFlashdata('success') ?>

                    </div>

                <?php endif; ?>

                <?php if (session()->getFlashdata('error')) : ?>

                    <div class="alert alert-danger">

                        <?= session()->getFlashdata('error') ?>

                    </div>

                <?php endif; ?>

                <div class="table-responsive">

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

                        <thead>

                            <tr>
                                <th width="50">No</th>
                                <th>Judul</th>
                                <th>Tanggal Update</th>
                                <th>File GeoJSON</th>
                                <th width="150">Aksi</th>
                            </tr>

                        </thead>

                        <tbody>

                            <?php if (!empty($peta)) : ?>

                                <?php $no = 1; ?>

                                <?php foreach ($peta as $row) : ?>

                                    <tr>

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

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

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


                                        <td>

                                            <?php if ($row['file_geojson']) : ?>

                                                <a href="<?= base_url('uploads/peta_kerawanan/' . $row['file_geojson']) ?>"
                                                    target="_blank">

                                                    <?= $row['file_geojson'] ?>

                                                </a>

                                            <?php else : ?>

                                                -

                                            <?php endif; ?>

                                        </td>

                                        <td>

                                            <a href="<?= base_url('admin/peta-kerawanan/detail/' . $row['id_peta']) ?>"
                                                class="btn btn-info btn-sm">

                                                Detail

                                            </a>
                                            <!--

                                            <a href="#"
                                                class="btn btn-warning btn-sm">

                                                Edit

                                            </a>
                                            <button
                                                class="btn btn-danger btn-sm"
                                                data-toggle="modal"
                                                data-target="#hapus<?= $row['id_peta'] ?>">

                                                Hapus

                                            </button> -->

                                        </td>

                                    </tr>

                                    <div
                                        class="modal fade"
                                        id="hapus<?= $row['id_peta'] ?>">

                                        <div class="modal-dialog">

                                            <div class="modal-content">

                                                <div class="modal-header">

                                                    <h5>Konfirmasi Hapus</h5>

                                                </div>

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

                                                    <p>

                                                        Yakin ingin menghapus data peta:

                                                    </p>

                                                    <strong>

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

                                                    </strong>

                                                </div>

                                                <div class="modal-footer">

                                                    <button
                                                        type="button"
                                                        class="btn btn-secondary"
                                                        data-dismiss="modal">

                                                        Batal

                                                    </button>

                                                    <a
                                                        href="<?= base_url('admin/peta-kerawanan/delete/' . $row['id_peta']) ?>"
                                                        class="btn btn-danger">

                                                        Ya, Hapus

                                                    </a>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                <?php endforeach ?>

                            <?php else : ?>

                                <tr>

                                    <td colspan="6" class="text-center">

                                        Belum ada data

                                    </td>

                                </tr>

                            <?php endif; ?>

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>

</div>

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

    <div class="modal-dialog">

        <div class="modal-content">

            <form
                action="<?= base_url('admin/peta-kerawanan/store') ?>"
                method="post"
                enctype="multipart/form-data">

                <div class="modal-header">

                    <h5>Tambah Peta Kerawanan</h5>

                </div>

                <div class="modal-body">

                    <div class="form-group">

                        <label>Judul</label>

                        <input
                            type="text"
                            name="judul"
                            class="form-control"
                            required>

                    </div>

                    <div class="form-group">

                        <label>Tanggal Update</label>

                        <input
                            type="date"
                            name="tanggal_update"
                            class="form-control">

                    </div>

                    <div class="form-group">

                        <label>Deskripsi</label>

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

                    </div>

                    <div class="form-group">

                        <label>File GeoJSON</label>

                        <input
                            type="file"
                            name="file_geojson"
                            accept=".geojson, .json"
                            class="form-control">

                    </div>

                    <div class="form-group">
                        <label>Preview Peta</label>
                        <div id="map" style="height: 300px;"></div>
                    </div>

                </div>

                <div class="modal-footer">

                    <button
                        type="submit"
                        class="btn btn-primary">

                        Simpan

                    </button>

                </div>

            </form>

        </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>
    document.addEventListener("DOMContentLoaded", function() {

        let map = L.map('map').setView([-2.5, 120], 6);

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

        let geoLayer;

        const fileInput = document.querySelector('input[name="file_geojson"]');

        fileInput.addEventListener('change', function(e) {

            const file = e.target.files[0];

            if (!file) return;

            const reader = new FileReader();

            reader.onload = function(event) {

                try {

                    const geojson = JSON.parse(event.target.result);

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

                    geoLayer = L.geoJSON(geojson).addTo(map);

                    map.fitBounds(geoLayer.getBounds());

                } catch (err) {
                    alert("File GeoJSON tidak valid!");
                    console.log(err);
                }

            };

            reader.readAsText(file);
        });

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