<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;
        }

        th {
            text-align: center;
        }
    </style>


    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <table>
                        <tr>
                            <td width="60%" style="font-weight: bold;"><label><?= $this->lang->line('nama'); ?></label></td>
                            <td width="5%" style="font-weight: bold;">:</td>
                            <td style="font-weight: bold;"><?php echo $nama; ?></td>
                        </tr>
                        <tr>
                            <td width="60%" style="font-weight: bold;"><label><?= $this->lang->line('lokasi'); ?></label></td>
                            <td width="5%" style="font-weight: bold;">:</td>
                            <td style="font-weight: bold;"><?php echo $lokasi; ?></td>
                        </tr>
                        <tr>
                            <td width="60%" style="font-weight: bold;"><label><?= $this->lang->line('jam_lembur_mulai'); ?></label></td>
                            <td width="5%" style="font-weight: bold;">:</td>
                            <td style="font-weight: bold;"><?php echo $jam_absen; ?></td>
                        </tr>
                    </table>
                </div>
                <div class="col-md-6">
                    <table>
                        <tr>
                            <td width="60%" style="font-weight: bold;"><label><?= $this->lang->line('tanggal_absen'); ?></label></td>
                            <td width="5%" style="font-weight: bold;">:</td>
                            <td style="font-weight: bold;"><?php echo $tanggal; ?></td>
                        </tr>
                        <tr>
                            <td width="60%" style="font-weight: bold;"><label><?= $this->lang->line('keterangan'); ?></label></td>
                            <td width="5%" style="font-weight: bold;">:</td>
                            <td style="font-weight: bold;"><?php echo $keterangan; ?></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-12">
        <hr>
            <div class="row">
                <div class="col-md-6 text-center thumbnail">
                    <h6><?= $this->lang->line('peta_lokasi'); ?></h6>
                    <div id="map_canvas" style="width:100%; height:400px;"></div>
                </div>
                <div class="col-md-6 text-center thumbnail">
                    <h6><?= $this->lang->line('gambar'); ?></h6>
                    <?php
                        $img = $this->config->item('base_image').'image?_t=image&_d='.$foto;
                    ?>
                    <img src="<?= $img; ?>" class="portrait" style="max-height:400px">
                </div>
            </div>
        </div>

    </div>

</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-close"></i> <?= $this->lang->line('button_form_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>