<?php 
include "includes/login.php";
?>
<!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>

        <!--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: 20px !important;
            right: 20px !important;
          }
          #logo {
            width: 180px;
            position: absolute;
            top: 20px !important;
            left: 20px !important;
          }

          #form-login {
            display: none;
            width: 300px;
            position: absolute;
            top: 20px !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;
          }
        </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>
           <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="354"
                  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="18"
                  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 windowsHeight = $(window).height(); 
            $('#googleMap').height(windowsHeight);

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

          });
          feather.replace();
          
          function initMap() {
  const map = new google.maps.Map(document.getElementById("googleMap"), {
    zoom: 3,
    center: { lat: -28.024, lng: 140.887 },
  });
  const infoWindow = new google.maps.InfoWindow({
    content: "",
    disableAutoPan: true,
  });
  // Create an array of alphabetical characters used to label the markers.
  const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  // Add some markers to the map.
  const markers = locations.map((position, i) => {
    const label = labels[i % labels.length];
    const marker = new google.maps.Marker({
      position,
      label,
    });

    // markers can only be keyboard focusable when they have click listeners
    // open info window when marker is clicked
    marker.addListener("click", () => {
      infoWindow.setContent(label);
      infoWindow.open(map, marker);
    });
    return marker;
  });

  // Add a marker clusterer to manage the markers.
  new MarkerClusterer({ markers, map });
}

const locations = [
  { lat: -31.56391, lng: 147.154312 },
  { lat: -33.718234, lng: 150.363181 },
  { lat: -33.727111, lng: 150.371124 },
  { lat: -33.848588, lng: 151.209834 },
  { lat: -33.851702, lng: 151.216968 },
  { lat: -34.671264, lng: 150.863657 },
  { lat: -35.304724, lng: 148.662905 },
  { lat: -36.817685, lng: 175.699196 },
  { lat: -36.828611, lng: 175.790222 },
  { lat: -37.75, lng: 145.116667 },
  { lat: -37.759859, lng: 145.128708 },
  { lat: -37.765015, lng: 145.133858 },
  { lat: -37.770104, lng: 145.143299 },
  { lat: -37.7737, lng: 145.145187 },
  { lat: -37.774785, lng: 145.137978 },
  { lat: -37.819616, lng: 144.968119 },
  { lat: -38.330766, lng: 144.695692 },
  { lat: -39.927193, lng: 175.053218 },
  { lat: -41.330162, lng: 174.865694 },
  { lat: -42.734358, lng: 147.439506 },
  { lat: -42.734358, lng: 147.501315 },
  { lat: -42.735258, lng: 147.438 },
  { lat: -43.999792, lng: 170.463352 },
];

window.initMap = initMap;
        </script>

        <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
<script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
        <!--////////////Theme Core scripts End/////////////////-->

    </body>

</html>

