<?php
session_start();
error_reporting(0);
include "config/koneksi.php";
include "config/library.php";
include "config/fungsi_indotgl.php";
include "config/excel_reader.php";
include "config/fungsi_seo.php";
include "config/fungsi_thumb.php";
include "config/fungsi_payment.php";
if (isset($_SESSION['id'])) {
  if ($_SESSION['status'] == 'Aktif') {
  }
  $iden = mysqli_fetch_array(mysqli_query($conn, "SELECT * FROM siswa where username='$_SESSION[id]'"));
  $nama =  $iden['nmSiswa'];
  $level = 'Siswa';
  $foto = 'foto_siswa/' . $iden['foto'];

  $idt = mysqli_fetch_array(mysqli_query($conn, "SELECT * FROM identitas"));

  $ta = mysqli_fetch_array(mysqli_query($conn, "SELECT * FROM tahun_ajaran where aktif='Y'"));
?>
  <!DOCTYPE html>
  <html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Simpodik (Sistem Informasi Manajemen Pokok Pendidikan)</title>

    <link rel="shortcut icon" href="simpo.png">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/style.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="./assets/font-awesome-4.6.3/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="./assets/ionicons/css/ionicons.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="plugins/datatables/dataTables.bootstrap.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
    <!-- Morris chart -->
    <link rel="stylesheet" href="plugins/morris/morris.css">
    <!-- jvectormap -->
    <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">

    <link href="//api.mapbox.com" rel="preconnect dns-prefetch" />

    <!-- Date Picker -->
    <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="plugins/datetimepicker/bootstrap-datetimepicker.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- Bootstrap Select -->
    <link rel="stylesheet" href="assets/bootstrap-select/css/bootstrap-select.min.css" />
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://kit.fontawesome.com/049c89ac09.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
    <link rel="stylesheet" href="assets/js/leaflet-panel-layers-master/src/leaflet-panel-layers.css" />
    <style type="text/css">
      .files {
        position: absolute;
        z-index: 3;
        top: 0;
        left: 0;
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        background-color: transparent;
        color: transparent;
      }
    </style>
    <script type="text/javascript" src="plugins/jQuery/jquery-1.12.3.min.js"></script>
    <script language="javascript" type="text/javascript">
      var maxAmount = 160;

      function textCounter(textField, showCountField) {
        if (textField.value.length > maxAmount) {
          textField.value = textField.value.substring(0, maxAmount);
        } else {
          showCountField.value = maxAmount - textField.value.length;
        }
      }
    </script>
    <script type="text/javascript" src="getDataCombo.js"></script>
    <style type="text/css">
      #menu-bottom.nav {
        z-index: 999999;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 55px;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        background-color: #ffffff;
        display: flex;
        overflow-x: auto;
      }

      #menu-bottom .nav__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        min-width: 50px;
        overflow: hidden;
        white-space: nowrap;
        font-family: sans-serif;
        font-size: 13px;
        color: #444444;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.1s ease-in-out;
      }

      #menu-bottom .nav__link:hover {
        background-color: #eeeeee;
      }

      #menu-bottom .nav__link--active {
        color: #009578;
      }

      #nav-icon {
        font-size: 18px;
      }

      @media (min-width: 1102px) {
        #menu-bottom.nav {
          display: none !important;
        }

      }
    </style>
    <!-- Toastr -->
    <link rel="stylesheet" href="plugins/toastr/toastr.min.css">
    <script src="plugins/toastr/toastr.min.js"></script>
    <script type="text/javascript">
      toastr.options = {
        "closeButton": true,
        "debug": false,
        "newestOnTop": false,
        "progressBar": true,
        "positionClass": "toast-top-right",
        "preventDuplicates": false,
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "7000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
      }
    </script>
  </head>

  <body class="hold-transition skin-yellow sidebar-mini">
    <div class="wrapper">
      <header class="main-header">
        <?php include "main-headers.php"; ?>
      </header>

      <aside class="main-sidebar">
        <?php
        include "menu-siswa.php";
        ?>
      </aside>

      <div class="content-wrapper">
        <!-- Content Header (Page header) -->


        <section class="content">
          <?php if ($_GET['view'] == 'home') {
            echo "<div class='row'>";
            include "siswa/home_siswa.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'soal') {

            echo "<div class='row'>";
            include "admin/com_sease/quiz_ujian_soal.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'bahantugas') {

            echo "<div class='row'>";
            include "admin/com_sease/bahan_tugas.php";
            echo "</div>";
          } elseif ($_GET[view] == 'skl') {

            echo "<div class='row'>";
            include "siswa/skl.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'upload') {

            echo "<div class='row'>";
            include "siswa/upload.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'kaskel') {

            echo "<div class='row'>";
            include "siswa/com_kas/keluar.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'lapkas') {

            echo "<div class='row'>";
            include "siswa/com_laporan/laporan-kas.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'jadwalpelajaran') {

            echo "<div class='row'>";
            include "siswa/jadwalpelajaran.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'siswa') {

            echo "<div class='row'>";
            include "siswa/master_siswa.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'pengaturan') {

            echo "<div class='row'>";
            include "siswa/pengaturan_identitas.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'calendar') {

            echo "<div class='row'>";
            include "siswa/calendar.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'lapbebas') {

            echo "<div class='row'>";
            include "siswa/lap-bebas.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'absensiswasiswa') {

            echo "<div class='row'>";
            include "siswa/absensi_siswa_siswa.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'absenrekap') {

            echo "<div class='row'>";
            include "siswa/absensi_siswa_rekap.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'kelas') {

            echo "<div class='row'>";
            include "siswa/master_kelas.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'siswa') {

            echo "<div class='row'>";
            include "siswa/master_siswa.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'kelulusan') {

            echo "<div class='row'>";
            include "siswa/master_kelulusan.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'kenaikankelas') {

            echo "<div class='row'>";
            include "siswa/master_kenaikankelas.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'hutangtoko') {

            echo "<div class='row'>";
            include "siswa/hutangtoko.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'detailtoko') {

            echo "<div class='row'>";
            include "siswa/detailtoko.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'posbayar') {

            echo "<div class='row'>";
            include "siswa/keuangan_posbayar.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'jenisbayar') {

            echo "<div class='row'>";
            include "siswa/keuangan_jenisbayar.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'tarif' && $_GET['tipe'] == 'bulanan') {

            echo "<div class='row'>";
            include "siswa/keuangan_tarif_bulanan.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'tarif' && $_GET['tipe'] == 'bebas') {

            echo "<div class='row'>";
            include "siswa/keuangan_tarif_bebas.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'pembayaran') {

            echo "<div class='row'>";
            include "siswa/keuangan_pembayaran.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'angsuran') {

            echo "<div class='row'>";
            include "siswa/keuangan_pembayaran_bebas.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'lapbayar') {

            echo "<div class='row'>";
            include "siswa/lap-transaksi.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'bayarbulanan') {

            echo "<div class='row'>";
            include "siswa/keuangan_pembayaran_bulanan.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'jurnalumum') {

            echo "<div class='row'>";
            include "siswa/keuangan_jurnalumum.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'lapsiswa') {

            echo "<div class='row'>";
            include "siswa/laporan_siswa.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'lappembayaran') {

            echo "<div class='row'>";
            include "siswa/laporan_pembayaran_perkelas.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'lappembayaranperbulan') {

            echo "<div class='row'>";
            include "siswa/laporan_pembayaran_perbulan.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'lappembayaranperposbayar') {

            echo "<div class='row'>";
            include "siswa/laporan_pembayaran_perposbayar.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'laptagihansiswa') {

            echo "<div class='row'>";
            include "siswa/laporan_tagihan_siswa.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'rekapitulasi') {

            echo "<div class='row'>";
            include "siswa/laporan_rekapitulasi.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'rekappengeluaran') {

            echo "<div class='row'>";
            include "siswa/laporan_rekappengeluaran.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'rekapkondisikeuangan') {

            echo "<div class='row'>";
            include "siswa/laporan_kondisi_keuangan.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'detail') {

            echo "<div class='row'>";
            include "siswa/riwayat_transaksi.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'laptanggungan') {

            echo "<div class='row'>";
            include "siswa/laptanggungan.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'backup') {

            echo "<div class='row'>";
            include "siswa/backup-datas.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'restore') {

            echo "<div class='row'>";
            include "siswa/restore.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'kelasnya') {

            echo "<div class='row'>";
            include "siswa/com_kelas/kelas.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'nasabah') {

            echo "<div class='row'>";
            include "siswa/com_nasabah/nasabah.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'transaksi') {

            echo "<div class='row'>";
            include "siswa/com_transaksi/transaksi.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'laporan-transaksi') {

            echo "<div class='row'>";
            include "siswa/com_laporan/laporan-transaksi.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'pengaturant') {

            echo "<div class='row'>";
            include "siswa/com_pengaturan/pengaturan.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'laptransaksinasabah') {

            echo "<div class='row'>";
            include "siswa/com_laporan/laporan-nasabah.php";
            echo "</div>";
          } elseif ($_GET['view'] == 'laptransaksis') {

            echo "<div class='row'>";
            include "siswa/com_laporan/laporan-transaksi.php";
            echo "</div>";
          }
          ?>
        </section>
      </div>
      <!-- /.content-wrapper -->
      <footer class="main-footer">
        <?php include "footer.php"; ?>
      </footer>
      <nav id="menu-bottom" class="nav">
        <a href="index-siswa.php?view=home" class="nav__link">
          <i class="fas fa-home"></i>
          <span class="nav__text">Home</span>
        </a>
        <a href="index-siswa.php?view=laptanggungan" class="nav__link nav__link">
          <i class="fas fa-money-bill-wave"></i>
          <span class="nav__text">Bayar</span>
        </a>
        <a href="index-siswa.php?view=bahantugas" class="nav__link">
          <i class="fas fa-graduation-cap"></i>
          <span class="nav__text">Tugas</span>
        </a>
        <a href="index-siswa.php?view=soal&act=detailsiswa&tahun=<?php echo $ta; ?>" class="nav__link">
          <i class="fas fa-book"></i>
          <span class="nav__text">Quiz/Ujian </span>
        </a>
        <a href="index-siswa.php?view=siswa&act=edit&id=<?php echo $_SESSION['idsa']; ?>" class="nav__link">
          <i class="fas fa-user-lock"></i>
          <span class="nav__text">Profile</span>
        </a>

      </nav>
    </div><!-- ./wrapper -->
    <!-- jQuery 2.1.4 -->
    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="plugins/jQueryUI/jquery-ui.min.js"></script>
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <script>
      $.widget.bridge('uibutton', $.ui.button);
    </script>
    <script src="plugins/highcharts/js/highcharts.js"></script>
    <script src="plugins/highcharts/js/modules/data.js"></script>
    <script src="plugins/highcharts/js/modules/exporting.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!-- DataTables -->
    <script src="plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
    <!-- Morris.js charts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

    <script src="plugins/morris/morris.min.js"></script>
    <!-- Sparkline -->
    <script src="plugins/sparkline/jquery.sparkline.min.js"></script>
    <!-- jvectormap -->
    <script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <!-- jQuery Knob Chart -->
    <script src="plugins/knob/jquery.knob.js"></script>
    <!-- daterangepicker -->
    <script src="plugins/moment/moment.min.js"></script>
    <script src="plugins/daterangepicker/daterangepicker.js"></script>
    <script src="plugins/datetimepicker/bootstrap-datetimepicker.js"></script>
    <!-- datepicker -->
    <script src="plugins/datepicker/bootstrap-datepicker.js"></script>
    <!-- Bootstrap WYSIHTML5 -->
    <script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
    <!-- Slimscroll -->
    <script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="plugins/fastclick/fastclick.min.js"></script>
    <!-- AdminLTE App -->
    <script src="dist/js/app.min.js"></script>

    <script src="assets/js/script.js"></script>
    <script src="assets/app.js"></script>

    <script src="assets/bootstrap-select/js/bootstrap-select.min.js"></script>

    <script src="/assets/js/sweetalert.min.js"></script>

    <!-- Rupiah -->
    <script src='plugins/rupiah/rupiah.js'></script>

    <script>
      $('.textarea').wysihtml5();

      $(function() {
        // datepicker plugin
        $('.date-picker').datepicker({
          autoclose: true,
          todayHighlight: true,
          format: 'yyyy-mm-dd'
        });

        $("#example1").DataTable();
        $('#example2').DataTable({
          "paging": true,
          "lengthChange": false,
          "searching": false,
          "ordering": true,
          "info": true,
          "autoWidth": false
        });

        $('#example3').DataTable({
          "paging": true,
          "lengthChange": false,
          "searching": false,
          "ordering": false,
          "info": false,
          "autoWidth": false,
          "pageLength": 200
        });

        $('#mastersiswa').DataTable({
          "paging": false,
          "lengthChange": false,
          "searching": true,
          "ordering": false,
          "info": false,
          "autoWidth": false,
          "pageLength": 200
        });

        $('#example5').DataTable({
          "paging": true,
          "lengthChange": false,
          "searching": false,
          "info": false,
          "autoWidth": false,
          "pageLength": 200,
          "order": [
            [5, "desc"]
          ]
        });
      });

      //$('.datepicker').datepicker();

      $('.datepicker').datepicker({
        format: 'yyyy-mm-dd',
      });

      $('.datetimepicker').datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1
      });

      $(".harusAngka").keypress(function(e) {
        //if the letter is not digit then display error and don't type anything
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
          return false;
        }
      });

      $("#parent").click(function() {
        $(".child").prop("checked", this.checked);
      });

      $('.child').click(function() {
        if ($('.child:checked').length == $('.child').length) {
          $('#parent').prop('checked', true);
        } else {
          $('#parent').prop('checked', false);
        }
      });

      //hitung
      /*
      $('#hitungBayaran').keyup(function(){
      	if ($(this).val() > $("#sisa").val()){
      		alert('Anda memasukkan nilai melebihi total tagihan!');
      		$(this).val($("#sisa").val());
      	}
      });
      */

      $("#allTarif").keypress(function(e) {
        var allTarif = $("#allTarif").val();
        if (e.which == 13) {
          $("#n1").val(allTarif);
          $("#n2").val(allTarif);
          $("#n3").val(allTarif);
          $("#n4").val(allTarif);
          $("#n5").val(allTarif);
          $("#n6").val(allTarif);
          $("#n7").val(allTarif);
          $("#n8").val(allTarif);
          $("#n9").val(allTarif);
          $("#n10").val(allTarif);
          $("#n11").val(allTarif);
          $("#n12").val(allTarif);
        }
      });
      $("#allTarifBebas").keypress(function(e) {
        var allTarif = $("#allTarifBebas").val();
        if (e.which == 13) {
          $(".nTagihan").val(allTarif);
        }
      });
    </script>

    <?php if (isset($_GET['view']) && $_GET['view'] == 'absensiswasiswa') { ?>
      <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>

      <script>
        $(document).ready(function() {
          var localstream = null;
          var vd;

          function initCam() {
            const video = document.createElement('video');
            video.id = 'video-cam';
            video.autoplay = 'true';
            video.style = 'width: 100%; height: auto;'

            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

            if (navigator.getUserMedia) {
              navigator.getUserMedia({
                video: true
              }, function(stream) {
                video.srcObject = stream;
                localstream = stream;
              }, function(error) {
                alert('CAM ERROR : ' + error);
              })
            }

            const parent = document.getElementById('vid-cam');
            parent.append(video);
            vd = video;
          }

          initCam();

          document.getElementById('take').addEventListener('click', function(e) {
            e.preventDefault();
            var width = vd.offsetWidth;
            var height = vd.offsetHeight;

            var canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            var context = canvas.getContext('2d');
            context.drawImage(vd, 0, 0, width, height);

            var img = document.createElement('img');
            img.width = width;
            img.height = height;
            img.src = canvas.toDataURL('image/png');

            const parent = document.getElementById('vid-cam');
            parent.innerHTML = '';
            parent.append(img);
            document.getElementById('file-cam').files = base64ImageToBlob(img.src);
            // console.log(base64ImageToBlob(img.src))

            if (localstream != null) {
              localstream.getTracks()[0].stop()
              this.style.display = 'none'
              document.getElementById('reCam').style.display = 'block'
            }

          })

          document.getElementById('reCam').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('vid-cam').innerHTML = '';
            initCam();
            this.style.display = 'none'
            document.getElementById('take').style.display = 'block'
          })

          // function take() {
          //   var width = vd.offsetWidth;
          //   var height = vd.offsetHeight;

          //   var canvas = document.createElement('canvas');
          //   canvas.width = width;
          //   canvas.height = height;
          //   var context = canvas.getContext('2d');
          //   context.drawImage(vd, 0, 0, width, height);

          //   var img = document.getElementById('target-cam');
          //   img.src = canvas.toDataURL('image/png');
          //   // document.getElementById('filer').files = base64ImageToBlob(img.src);
          //   // console.log(base64ImageToBlob(img.src))

          //   if (localstream != null) {
          //     localstream.getTracks()[0].stop()
          //     document.getElementById('take').style.display = 'none'
          //     document.getElementById('reCam').style.display = 'block'
          //   }
          // }


          function base64ImageToBlob(str) {
            var pos = str.indexOf(';base64,');
            var type = str.substring(5, pos);
            var b64 = str.substr(pos + 8);

            var imageContent = atob(b64);

            var buffer = new ArrayBuffer(imageContent.length);
            var view = new Uint8Array(buffer);

            for (var n = 0; n < imageContent.length; n++) {
              view[n] = imageContent.charCodeAt(n);
            }

            var blob = new Blob([buffer], {
              type: type
            });

            let fileName = new Date().getTime() + '.' + type.split('/')[1]
            let file = new File([blob], fileName, {
              type: "image/jpeg",
              lastModified: new Date().getTime()
            }, 'utf-8');
            let container = new DataTransfer();
            container.items.add(file);

            return container.files;
          }

          // MAPS
          // Creating map options
          var mapOptions = {
            // center: [112.35400252810952, 112.35400252810952],
            zoom: 13

          }
          var layer = new L.TileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
              '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
              'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            id: 'mapbox/satellite-v9'
          });
          // Creating a map object
          var map = new L.map('map', mapOptions);
          // Creating a Layer object

          // Adding layer to the map
          map.addLayer(layer);
          // map.on('click', function(position) {
          //   console.log([position.latlng.lat, position.latlng.lng]);
          // })

          let start = false;
          var interval;

          let mymarker = null;

          // if (navigator.geolocation) {
          //   navigator.geolocation.getCurrentPosition(function(position) {
          //     document.getElementById('latlng').value = `${position.coords.latitude}, ${position.coords.longitude}`;
          //   })
          // }

          function get() {
            interval = setInterval(function() {
              clearInterval(interval);
              console.log('a')
              if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                  //document.getElementById("text").innerHTML = `LATITUDE : ${position.coords.latitude} <br>
                  //LONGITUDE : ${position.coords.longitude}`;
                  if (mymarker != null) {
                    mymarker.setLatLng([position.coords.latitude, position.coords.longitude]);
                    map.setView([position.coords.latitude, position.coords.longitude], 18, {
                      animation: true
                    });
                  } else {
                    mymarker = new L.Marker([position.coords.latitude, position.coords.longitude]);
                    mymarker.addTo(map);
                    map.setView([position.coords.latitude, position.coords.longitude], 18, {
                      animation: true
                    });
                  }


                  // axios.get(`https://nominatim.openstreetmap.org/reverse?lat=${position.coords.latitude}&lon=${position.coords.longitude}&format=json`).then(res => {
                  //   if(res.status == 200){
                  //     document.getElementById('tempat').value = res.data.display_name
                  //   } else{
                  //     document.getElementById('tempat').value = 'NO ADDRESS'
                  //   }               
                  // }).catch(err => {
                  //   console.log(err)
                  // });
                  document.getElementById('latlng').value = `${position.coords.latitude}, ${position.coords.longitude}`;
                })
              }
              get();
            }, 3000);
          }

          get();
        })
      </script>
    <?php } ?>


  </body>

  </html>

<?php
} else {
  include "login.php";
}
?>