<?php 
include "includes/login.php";

$filter1 = " AND status_lokasi=1 AND lat IS NOT NULL AND lat <> '' AND lat <> '0' ";
$sqlCount1 = "SELECT * FROM m_lokasi WHERE 1=1 ".$filter1."";
$queryCount1 = mysql_query($sqlCount1);
$numCount1 = mysql_num_rows($queryCount1);
$rowCount1 = mysql_fetch_object($queryCount1);

$sqlCount2 = "SELECT id_bbws FROM m_lokasi WHERE 1=1 ".$filter1." GROUP BY id_bbws";
$queryCount2 = mysql_query($sqlCount2);
$numCount2 = mysql_num_rows($queryCount2);
$rowCount2 = mysql_fetch_object($queryCount2);

?>
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>AP-TECH : Login</title>
        <link rel="apple-touch-icon" href="<?php echo BASEURL; ?>images/favicon/apple-icon-120.png">
        <link rel="shortcut icon" type="image/x-icon" href="<?php echo BASEURL; ?>images/favicon/favicon.ico">
        <!--Bootstrap icons-->
        <link href="<?php echo THEME_BASEURL; ?>assets/fonts/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">

        <!--Google web fonts-->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Open+Sans:wght@300..800&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="<?php echo THEME_BASEURL; ?>assets/css/style.min.css" id="switchThemeStyle">
        <style>
          #btn-login {
            position: absolute;
            top: 60px !important;
            right: 20px !important;
          }
          #logo {
            width: 180px;
            position: absolute;
            top: 60px !important;
            left: 20px !important;
          }

          #form-login {
            display: none;
            width: 300px;
            position: absolute;
            top: 60px !important;
            right: 100px !important;
          }

          #card-alat {
            width: 170px;
            position: absolute;
            bottom: 130px !important;
            right: 20px !important;
            z-index: 1000;
          }

          #card-bbws {
            width: 170px;
            position: absolute;
            bottom: 20px !important;
            right: 20px !important;
            z-index: 1000;
          }
          #running-text {
            background-color: #fff9c4;
            height: 34px;
            position: absolute;
            top: 0px !important;
            left: 0px !important;
          }
          #running-text marquee {
            margin-top: 6px;
            width: 100%;
          }
        </style>
    </head>

    <body>

        <!--Theme mode switcher-->
        <div class="position-absolute end-0 top-0 size-40 z-index-fixed">
            <div class="switch_modes">
                <a href="#" class="mode_dark">
                  <i data-feather="moon"></i>
                </a>
                <a href="#" class="mode_light active">
                  <i data-feather="sun"></i>
                </a>
              </div>
        </div>

        
          <!--////////////////// PreLoader Start//////////////////////-->
          <div class="loader">
            <!--Placeholder animated layout for preloader-->
            <div class="d-flex flex-column flex-root">
              <div class="page d-flex flex-row flex-column-fluid">
                <div class="page-content ps-0 ms-0 d-flex flex-column flex-row-fluid">
                  <div
                    class="content flex-column p-4 pb-0 d-flex justify-content-center align-items-center flex-column-fluid position-relative">
                    <div class="w-100 h-100 position-relative d-flex align-items-center justify-content-center">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-loader anim-spinner me-2"><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/></svg>
                    <div>
                      <span>Loading...</span>
                    </div>
                  </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--////////////////// /.PreLoader END//////////////////////-->

        <div class="d-flex flex-column flex-root" style="background-image: url('images/riverdam.jpg'); position: relative;">

           <div id="googleMap" style="width:100%;height:400px;"></div>
            
            <div id="running-text"><marquee id="rt">Siaga I : Ciesek 14.5 m - Siaga I : Ciesek 14.5 m - Siaga I : Ciesek 14.5 m - Siaga I : Ciesek 14.5 m - Siaga I : Ciesek 14.5 m - Siaga I : Ciesek 14.5 m - Siaga I : Ciesek 14.5 m - Siaga I : Ciesek 14.5 m - Siaga I : Ciesek 14.5 m - Siaga I : Ciesek 14.5 m - Siaga I : Ciesek 14.5 m - Siaga I : Ciesek 14.5 m - Siaga I : Ciesek 14.5 m</marquee></div> 
           <img src="images/aptech_glow_128.png" id="logo">
           <button class="btn btn-info" id="btn-login">Login</button>
           <div class="card card-body p-4" id="form-login">
              <form action="" class=" z-index-1 position-relative needs-validation" method="POST" novalidate="">
                  <input type="hidden" name="btn_login" id="btn_login" value="GO!">
                  <div class="form-floating mb-3">
                      <input type="text" class="form-control" required="" id="username" name="username"
                          placeholder="your username">
                      <label for="username">Username</label>
                      <span class="invalid-feedback">Please enter a valid username</span>
                  </div>
                  <div class="form-floating mb-3">
                      <input type="password" required="" class="form-control"
                          id="password" name="password" placeholder="Password">
                      <label for="password">Password</label>
                      <span class="invalid-feedback">Enter the password</span>
                  </div>
                  <button class="w-100 btn btn-lg btn-info" type="submit">Sign In</button>
                  
              </form>
          </div>

          <div class="card mb-4 overflow-hidden" id="card-alat">
            <div class="card-body d-flex align-items-center">
              <!--Card text-->
              <div class="flex-grow-1">
                <div class="h3" style="margin-bottom: 0px;" data-aos data-aos-id="countup:in" data-to="<?php echo $numCount1; ?>"
                  data-countup='{"startVal":"0"}'>
                  0
                </div>
                <span class="text-muted">Telemetry</span>
              </div>
              <div class="flex-shrink-0 ps-4 border-start">
                <i data-feather="cpu" class="fe-5x text-info"></i>
              </div>
            </div>
          </div>

          <div class="card mb-4 overflow-hidden" id="card-bbws">
            <div class="card-body d-flex align-items-center">
              <!--Card text-->
              <div class="flex-grow-1">
                <div class="h3" style="margin-bottom: 0px;" data-aos data-aos-id="countup:in" data-to="<?php echo $numCount2; ?>"
                  data-countup='{"startVal":"0"}'>
                  0
                </div>
                <span class="text-muted">Instansi</span>
              </div>
              <div class="flex-shrink-0 ps-4 border-start">
                <i data-feather="home" class="fe-5x text-info"></i>
              </div>
            </div>
          </div>
        </div>
        
        <!--////////////Theme Core scripts Start/////////////////-->

        <script src="<?php echo THEME_BASEURL; ?>assets/vendor/feather.min.js"></script>
        <script src="<?php echo THEME_BASEURL; ?>assets/js/theme.bundle.js"></script>
        <script>
          $(function () {
            var showLogin = false;

            var windowsWidth = $(window).width(); 
            var windowsHeight = $(window).height(); 
            $('#googleMap').height(windowsHeight);
            $('#running-text').width(windowsWidth);

            $('#btn-login').click(function(){
              if(showLogin == false){
                $('#form-login').show();
                showLogin = true;
              }else{
                $('#form-login').hide();
                showLogin = false;
              }
            });

            $.get("<?php echo BASEURL; ?>data/gettelem.php", {mod:'rt'},function(res) {
                //console.log(res);
                 $('#rt').html(res);
            });

          });
          feather.replace();
          
          function myMap() {
            var mapProp= {
              center:new google.maps.LatLng(-1.534789,112.1681544),
              zoom:6,
              mapTypeId:google.maps.MapTypeId.HYBRID,
              disableDefaultUI: true
            };
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            var marker;
            var popup;

            var noPoi = [{
                          featureType: "poi",
                          elementType: "labels",

                          stylers: [{
                            visibility: "off"
                          }]
                        }];

            map.setOptions({
              styles: noPoi
            });

            infowindow = new google.maps.InfoWindow;

            var aha = '0';
            var icourl = '<?php echo BASEURL; ?>images/maps/';
            $.get("<?php echo BASEURL; ?>data/getlok.php", {aha:aha},function(res) {
              var d = res.data;
              for (var i = 0; i < d.length; i++) {

                html = '<div style="width:260px; padding-left:10px;">';
                html += '<table border="0" cellspacing="0" cellpadding="0" style="font-size: 13px; width:100%; margin-bottom:10px;">';
                html += '<tr><td colspan="2" style="width:100px; vertical-align:top; font-size: 16px;"><b>' + d[i].nama + '</b></td></tr>';
                html += '</table>';
                html += '<table border="0" cellspacing="0" cellpadding="0" style="font-size: 13px; width:100%; margin-bottom:10px;">';
                html += '<tr><td rowspan="4" style="width:100px; border:4px solid #' + d[i].color + ' !important;"><div style="display:block; clear:both; width:100px;">&nbsp;</div><div style="font-size:48px; line-height: 36px; display:block; clear:both; width:100px; text-align:center;">' + d[i].measure_num + '</div><div style="font-size:12px; display:block; clear:both; width:100px; text-align:center;">' + d[i].measure_uom + '</div><div style="font-size:16px; display:block; clear:both; width:100px; text-align:center; color:#' + d[i].color + ';">' + d[i].siaga + '</div><div style="display:block; clear:both; width:100px;">&nbsp;</div></td><td style="font-size:14px; padding-left:20px;"><img src="' + d[i].image + '" / style="width:100px; height:100px; border:2px solid #9e9e9e !important;"></td></tr>';
               
                html += '<tr><td style="font-size:14px; padding-left:20px;">&nbsp;</td></tr>';
                html += '</table>';
                html += '<table border="0" cellspacing="0" cellpadding="0" style="font-size: 13px; width:100%">';
                html += '<tr><td style="width:80px; vertical-align:top;">Last update</td><td style="width:5px; vertical-align:top;">:</td><td style="padding-bottom:5px;">' + d[i].last_update + '</td></tr>';
                html += '<tr><td style="width:80px; vertical-align:top;">Position</td><td style="width:5px; vertical-align:top;">:</td><td style="padding-bottom:5px;">' + d[i].lat + ',' + d[i].long + '</td></tr>';
                html += '<tr style="border-bottom: 1px solid #dddddd;"><td style="width:80px; vertical-align:top;">Address</td><td style="width:5px; vertical-align:top;">:</td><td style=" padding-bottom:10px;">-</td></tr>';
                html += '</table>';
                html += '</div>';

                

                marker = new google.maps.Marker({
                  position: new google.maps.LatLng(d[i].lat, d[i].long),
                  map: map,
                  title: d[i].nama,
                  icon: icourl + d[i].icon,
                });

                google.maps.event.addListener(marker,'click', (function(marker,html,infowindow){ 
                    return function() {
                        infowindow.setContent(html);
                        infowindow.open(map,marker);
                    };
                })(marker,html,infowindow));  

              } 
            },'json');


          }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBA5GVUBNU27Lw461qt7XaKufe3EyLPxbY&callback=myMap"></script>

        <!--////////////Theme Core scripts End/////////////////-->

    </body>

</html>

