<?= $this->extend('layout/template'); ?>
<?= $this->section('content'); ?>


<nav class="page-breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><?= $Breadcumb ?></li>
        <li class="breadcrumb-item active" aria-current="page">Data <?= $Breadcumb ?></li>
    </ol>
</nav>

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">

                <h6 class="card-title">Data <?= $Breadcumb ?></h6>
                <div id="mapPelanggan" style="height: 500px; border-radius: 10px;"></div>


            </div>

        </div>
    </div>
</div>

<!-- Load Leaflet.js -->
<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() {
        var map = L.map('mapPelanggan').setView([-6.200000, 106.816666], 10);

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

        // Ambil data pelanggan via AJAX
        fetch("<?= base_url('pelanggan/getDataMapPelanggan') ?>")
            .then(response => response.json())
            .then(data => {
                data.forEach(pelanggan => {
                    if (pelanggan.latitude && pelanggan.longitude) {
                        L.marker([pelanggan.latitude, pelanggan.longitude])
                            .addTo(map)
                            .bindPopup(`<b>${pelanggan.nama_pelanggan}</b><br>${pelanggan.alamat}`);
                    }
                });
            })
            .catch(error => console.error('Error:', error));
    });
</script>


<?= $this->endSection(); ?>