<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCU3tdTex4BWClD0vauHsj01n2pydE0_O4&v=weekly"
      defer></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

<style>
    .map {
        width: 100%;
        height: 90%;
        min-height: 400px;
    }

    #map2 {
        width: 100%;
        height: 600px;
    }
</style>

<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Dashboard</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active">Dashboard</li>
                </ol>
            </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <hr/>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <h4>Dashboard</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-info">
                    <div class="inner">
                        <h3><?=$jumlah_pengajuan?></h3>

                        <p>Data Pengajuan</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-data"></i>
                    </div>
                    
                    </div>
                </div>

                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-primary">
                    <div class="inner">
                        <h3><?=$jumlah_waiting?></h3>

                        <p>Menunggu Approval</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-data"></i>
                    </div>
                    
                    </div>
                </div>

                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-warning">
                    <div class="inner">
                        <h3><?=$jumlah_revision?></h3>

                        <p>Permintaan Rubah Data</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-data"></i>
                    </div>
                    
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-danger">
                    <div class="inner">
                        <h3><?=$jumlah_reject?></h3>

                        <p>Reject</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-data"></i>
                    </div>
                    
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="ion ion-clipboard mr-1"></i>
                                Daftar Pangkalan - Jumlah Pangkalan Aktif : <?=$jumlah_pangkalan?>
                            </h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-6">
                                    <table id="tbl_data1" class="display compact cell-border row-border nowrap" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th class="not-export">Action</th>
                                                <th>Provinsi</th>
                                                <th>Kabupaten</th>
                                                <th>Kecamatan</th>
                                                <th>Kelurahan</th>
                                                <th>ID Registrasi</th>
                                                <th>Nama Pangkalan</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-lg-6">
                                    <button type="button" class="btn btn-sm bg-gradient-primary" data-toggle="modal" data-target="#modal-xl">
                                    Perbesar Map
                                    </button>
                                    <div id="map" class="map">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<div class="modal fade" id="modal-xl" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Peta</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            </button>
        </div>
        <div class="modal-body">
            <div id="map2" class="map2">
            </div>
        </div>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<style>
            .dataTables_wrapper .dataTables_filter{
                float:left !important;
            }
        </style>
<script>
    $(document).ready(function () {
        var table1 = $("#tbl_data1").DataTable({
            processing: true,
            serverSide: true,
            pageLength:25,
            scrollX: true,
            dom: "<'row mb-3'<'col-sm-12'B>>" +
            "<'row mb-2'<'col-sm-6'f><'col-sm-6'p>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-5'i><'col-sm-7'p>>",
            language : {
                searchBuilder: {
                    button: '<span class="fas fa-search"> Filter</span>',
                }
            },
            ajax: {
                url : '<?=base_url()?>get_pangkalan_aktif',
                type : 'POST'
            },
            columns: [
                { data: null,
                    searchable : false,
                    orderable : false },
                { data: 'nama_provinsi' },
                { data: 'nama_kabupaten' },
                { data: 'nama_kecamatan' },
                { data: 'nama_kelurahan' },
                { data: 'id_registrasi' },
                { data: 'nama_pangkalan' },
            ],
            columnDefs: [
                {
                    targets: 0,
                    data: null,
                    defaultContent: '<button class="btn-view btn btn-block bg-gradient-success btn-sm"><span class="fas fa-search"></span> View</button>',
                },
            ],
            buttons: [
                'searchBuilder',
                'copyHtml5',
                {
                    extend: 'excelHtml5',
                    text: 'Export Excel',
                    orientation: 'landscape',
                    exportOptions: {
                        columns: [ ':not(.not-export)' ]
                    }
                },
                {
                    extend: 'csvHtml5',
                    text: 'Export CSV',
                    orientation: 'landscape',
                    exportOptions: {
                        columns: [ ':not(.not-export)' ]
                    }
                },
                {
                    extend: 'pdfHtml5',
                    text: 'Export PDF',
                    orientation: 'landscape',
                    exportOptions: {
                        columns: [ ':not(.not-export)' ]
                    }
                }
            ]
        });

        $('#tbl_data1 tbody').on('click','.btn-view',function () {
            var data = table1.row($(this).parents('tr')[0]).data();
            document.location.href='<?=base_url()?>view_pangkalan/'+data['id_pangkalan'];
        });
    });
</script>
<script>
    var map;
    var map2;
    var markers = [];
    var markers2 = [];
    var infowindows = [];
    var iconBase;
    var icons;
    $(document).ready(function () {
        const infoWindow = new google.maps.InfoWindow();
        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
                zoom: 7,
                center: { lat: 1.9067513, lng: 99.7160549 },
            });

            map2 = new google.maps.Map(document.getElementById("map2"), {
                zoom: 7,
                center: { lat: 1.9067513, lng: 99.7160549 },
            });

            iconBase =
                "<?=base_url()?>/src/img/";
            icons = {
                info: {
                    icon: iconBase + "logistic.png",
                },
            };

            <?php
            foreach ($pangkalan as $row)
            {
                ?>
                addMarker(new google.maps.LatLng(<?=str_replace(" ","",floatval($row['lat']))?>, <?=str_replace(" ","",floatval($row['lng']))?>),map,"<?=$row['nama_pangkalan']?>");
                <?php
            }
            ?>
        }

        initMap();
        
        function addMarker(position, emap, judul) {
            const marker = new google.maps.Marker({
                position: position,
                map: emap,
                icon: icons['info'].icon,
                title:judul
            });
            
            markers.push(marker);

            const marker2 = new google.maps.Marker({
                position: position,
                map: map2,
                icon: icons['info'].icon,
                title:judul
            });
            
            markers2.push(marker2);

            marker2.addListener('click', function () {
                showInfoWindow(marker2);
            });
        }

        function showInfoWindow(marker)
        {
            var contentString = '<div id="content">' +
                        '<p>Nama Pangkalan : <span class="text-blue">' + marker.title + '</span></p></div>';

            const infowindow = new google.maps.InfoWindow({
                        content: contentString,
                        maxWidth: 200
                    });
            closeOtherInfo();
            infowindow.open(marker.get('map'), marker);
            infowindows[0] = infowindow;
        }

        function closeOtherInfo() {
            if (infowindows.length > 0) {
                infowindows[0].set("marker", null);
                infowindows[0].close();
                infowindows.length = 0;
            }
        }
    });
</script>