
<div class="modal-header">
    <h5 class="modal-title" id="exampleModalLongTitle"><?= ucwords(str_replace('_', ' ', $judul)) ?></h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <style>
        .table th,
        .table td {
            border-top: none;
        }
    </style>
    <div class="table-responsive">
        <table class="table">
            <tbody>
                <tr>
                    <td>Nama Pegawai</td>
                    <td>: <?= $data->nama; ?></td>
                    <td>Tanggal</td>
                    <td>: <?= $data->tanggal; ?></td>
                </tr>
                <tr>
                    <td>Jam </td>
                    <td>: <?= $this->fungsi->konversi_datetime($data->jam_absen) ?></td>
                    <td>Keterangan</td>
                    <td>: <?= $data->keterangan; ?></td>
                </tr>
                <tr>
                    <td>Timezone</td>
                    <td>: <?= $data->timezone; ?></td>
                    <td>GMT</td>
                    <td>: <?= $data->gmt; ?></td>
                </tr>
                <tr>
                    <td>Lokasi</td>
                    <td>: <?= $data->lokasi_absen; ?></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="row">
        <div class="col-md-6 text-center thumbnail">
            <label>LOKASI ABSENSI</label><br>
            <div id="map_canvas" style="width:100%; height:400px;"></div>
        </div>
        <div class="col-md-6 text-center thumbnail">
            <label>FOTO ABSENSI</label><br>
            <?php
                $foto = $this->config->item('base_image').'image?_t=absensi&_d='.$data->foto;
            ?>
            <img src="<?= $foto ?>" class="portrait" style="max-height:400px">
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-close"></i> Tutup</button>
</div>

<script type="text/javascript">
    var map;
    var lat_longs_map = new Array();
    var markers = []; // Create a marker array to hold your markers
    var beaches = [];
    var mapCentre;

    function setMarkers(locations) {
        for (var i = 0; i < locations.length; i++) {
            var beach = locations[i];
            var myLatLng = new google.maps.LatLng(beach[0], beach[1]);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                animation: google.maps.Animation.DROP,
                title: beach[2],
                zIndex: beach[3]
            });

            // Push marker to markers array
            markers.push(marker);

            // Push marker to lat_longs_map array
            lat_longs_map.push(marker.getPosition());

        }
    }

    function initialize() {
        var varcenter = new google.maps.LatLng(-0.4183772,117.4237542);
        var varZoom = 5.4;
        var mapOptions = {
            zoom: varZoom,
            center: varcenter,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        setMarkers(beaches);
        fitMapToBounds_map();
    }

    function fitMapToBounds_map() {
        var bounds = new google.maps.LatLngBounds();

        if (lat_longs_map.length > 0) {
            for (var i=0; i<lat_longs_map.length; i++) {
                bounds.extend(lat_longs_map[i]);
            }
            map.fitBounds(bounds);
            map.setZoom(18)
        }
    }

    initialize();


    $(function() {
        for (var i=0; i<markers.length; i++) {
                markers[i].setMap(null);
            }

        markers = []; // Reset the markers array
        lat_longs_map = []; // Reset the lat_longs_map array
        beaches = []; // Reset the beaches array

        var arr = [];
        arr.push(<?= $lat ?>);
        arr.push(<?= $long ?>);
        arr.push('<?= $title ?>');
        arr.push(1);
        beaches.push(arr);
        setMarkers(beaches);
        fitMapToBounds_map();
    });


</script>