@extends('layouts.full')
{{-- title --}}
@section('title','Presensi')
{{-- vendor scripts --}}
@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/forms/select/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/pickers/pickadate/pickadate.css')}}">

  @php
      $videoWidth=460;
      $videoHeight=360;
      
  @endphp

@endsection
{{-- page scripts --}}
@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/authentication.css')}}">

<style>
#vidDisplay {
    max-width: 50%;
    height: auto;
    position: relative;
    border: 2px solid;
    border-radius: 60%; /* Membuat elemen video menjadi bulat */
}

#loading-spinner {
    position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.9; 
    width: 700px; 
    height: 700px; 
}
#loading-spinner img {
    display: block;
    margin: 0 auto;
    width: 100%; 
    height: auto; 
}

</style>
@endsection

@section('content')


<!-- login page start -->
<section id="auth-presensi" class="row flexbox-container">
  
  <div class="col-sm-6" style="background: #F5F5F5">
    <div class="row justify-content-md-center">
      <div class="col-sm-9">
        <!-- <h3 class="text-center" style="font-weight: bolder; color: #009C9F;">FORMULIR PENDAFTARAN</h3> -->
        <h4 class="text-center mb-2">
          <!-- SEKOLAH QUR'AN DARUL FATTAH<br>-->
        </h4>
        <div class="card bg-authentication mb-0">
          <div class="card disable-rounded-right mb-0 p-2 h-100 d-flex justify-content-center">
            <div class="card-header pb-1">
              <div class="card-title">
                <!-- <h5 class="text-center">Sekolah Qur'an Darul Fattah Lampung</h5> -->
                <h3 class="text-center" style="font-weight: bolder; color: #009C9F;">PRESENSI</h3>


                <p id="countdown" class="text-center" style="font-weight: bolder; color: red;"></p>

              </div>
            </div>
                  <div class="form-group mb-50">
                    <label class="text-bold-600" for="nik">NIK</label>
                    <input id="nikuser"  type="number" class="form-control @error('nip') is-invalid @enderror" name="nikuser" value="{{ old('nikuser') }}" autocomplete="off" autofocus placeholder="NIK Pegawai">
                    @error('nikuser')
                    <span class="invalid-feedback" role="alert">
                      <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                  </div>

            <button type="button" id="datang" name="absentype" value="masuk" class="btn btn-primary glow w-100 position-relative">Datang
              <i id="icon-arrow" class="bx bx-right-arrow-alt"></i>
            </button>


            <br>
            <input type="hidden" id="name_koordinat" name="name_koordinat">
            <input type="hidden" id="user_latitude" name="user_latitude">
            <input type="hidden" id="user_longitude" name="user_longitude">
            <input type="hidden" id="jarak" name="jarak">


            <!-- Loading Spinner -->
            <div id="loading-spinner" style="display: none;">
            <img src="{{ asset('images/greenlist.gif') }}" alt="Loading..." />
            </div>

                  <div class="form-group mb-50">
                    <input id="nameuser" type="text" class="form-control " name="nameuser" autocomplete="off" disabled>
                  </div>

            <input id="nipuser" type="hidden" class="form-control " name="nipuser" autocomplete="off" disabled>

            <br><br>

            <div class="row" style="display: flex; justify-content: center; align-items: center;">
                <video  id="vidDisplay"  autoplay="true"></video>
               
            </div>
            
            <br><br>
        
              <canvas class="hidden" id="overlay" width="480" height="360"></canvas>
            



            <button type="button" id="pulang" class="btn btn-danger glow w-100 position-relative">Pulang
                  <i id="icon-arrow" class="bx bx-left-arrow-alt"></i>
            </button> 

            <br>
            <br>  


            <button type="button" id="izin" class="btn btn-warning glow w-100 position-relative">Izin (Konfirmasi Ke Manajement)
                  <i id="icon-arrow" class="bx bx-left-arrow-alt"></i>
            </button>


              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- login page ends -->



<!-- Loading Spinner -->
<div id="loading-spinner" style="display: none;">
<img src="{{ asset('images/spinner.gif') }}" alt="Loading..." />
</div>




<!-- MODAL KONFIRMASI -->
<div id="confirmationModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <img class="text-justifyrounded mx-auto d-block" src="{{ asset('images/izin.png') }}" width="60%">
        <h5 class="text-center" style="font-weight: bolder; color: #009C9F;">Chat Kepegawaian SQDF<br><hr>Umi Indah <br> Umi Aria</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <p>NIK : <b><span id="modalNik"></span></b></p>

          <div class="form-group mb-50">
              <label class="text-bold-600">Perizinan</label>
              <select id="alasanmodal" class="form-control @error('nip') is-invalid @enderror" name="alasanmodal">
                  <option>Silahkan Pilih</option>
                  <option value="Izin">Izin</option>
                  <option value="Sakit">Sakit</option>
              </select>
          </div>


              <div class="form-group mb-50">
                  <label class="text-bold-600">Alasan Tidak Hadir</label>
                  <input id="notemodal" type="text" class="form-control @error('nip') is-invalid @enderror" autocomplete="off" >
              </div>
    

        <br>
        Silahkan Klik Ya Untuk Melanjutkan Perizinan Hari ini.

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-primary" id="confirmIzin">Ya</button>
      </div>
    </div>
  </div>
</div>

    <!-- AKHIR MODAL KONFIRMASI PENDAFTARAN -->



@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
<script src="{{asset('vendors/js/extensions/sweetalert2.all.min.js')}}"></script>
<script src="{{asset('vendors/js/extensions/toastr.min.js')}}"></script>

@endsection

{{-- page scripts --}}
@section('page-scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const video = document.getElementById('vidDisplay');
  const canvas = document.getElementById('overlay');
  const nikuser = document.getElementById('nikuser');
  const datangButton = document.getElementById('datang');
  const pulangButton = document.getElementById('pulang');

    // Mengakses kamera web menggunakan WebRTC
    navigator.mediaDevices.getUserMedia({ video: true })

      .then(function (stream) {
        video.srcObject = stream;
      })
      
      .catch(function (error) {
        console.error('Error accessing camera: ' + error);
      });


        // Memulai pemindaian wajah dan mengambil geolokasi saat tombol "Datang" diklik
        datangButton.addEventListener('click', function () {

          if (nikuser.value.trim() === '') {
            alert('Mohon Untuk Mengisi NIK Anda');
            nikuser.focus();
            event.preventDefault(); // Untuk mencegah pengiriman formulir jika NIK kosong
          }
          else{
            const context = canvas.getContext('2d');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
          }

               
              // Mengambil geolokasi Perangkat Pengguna
              if ("geolocation" in navigator) {
                  navigator.geolocation.getCurrentPosition(function (position) {
                      const userLatitude = position.coords.latitude;
                      const userLongitude = position.coords.longitude;

                      // Mengisi nilai input dengan data latitude dan longitude
                      document.getElementById('user_latitude').value = userLatitude;
                      document.getElementById('user_longitude').value = userLongitude;

                      // Ambil data Location terlebih dahulu
                      $.ajax({
                          url: '/presensi/getlocation', // Ganti URL dengan URL endpoint Anda
                          type: 'GET',
                          dataType: 'json', // Tentukan tipe data yang diharapkan dalam respons
                          success: function (data) {
                              // Data lokasi berhasil diambil dari server
                              console.log('Data Lokasi:', data);

                              // Radius dalam meter (500 meter)
                              const maxRadius = 500;

                              // Lokasi-lokasi yang berada dalam radius
                              const nearbyLocations = [];

                              // Fungsi untuk menghitung jarak antara dua titik
                              function calculateDistance(lat1, lon1, lat2, lon2) {
                                  const R = 6371000; // Radius bumi dalam meter
                                  const dLat = (lat2 - lat1) * (Math.PI / 180);
                                  const dLon = (lon2 - lon1) * (Math.PI / 180);
                                  const a =
                                      Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                                      Math.cos(lat1 * (Math.PI / 180)) * Math.cos(lat2 * (Math.PI / 180)) *
                                      Math.sin(dLon / 2) * Math.sin(dLon / 2);
                                  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                                  const distance = R * c; // Jarak dalam meter
                                  return distance;
                              }

                              // Memeriksa setiap titik lokasi dari database
                              data.forEach(function (location) {
                                  const distance = calculateDistance(
                                      userLatitude, userLongitude,
                                      location.latitude, location.longitude
                                  );

                                  if (distance <= maxRadius) {
                                      nearbyLocations.push({
                                          location: location,
                                          distance: distance
                                      });

                                  }
                              });

                                // Mengambil nama-nama lokasi dari nearbyLocations
                                const locationNames = nearbyLocations.map(function (item) {
                                    return item.location.name;
                                });

                                // Menggabungkan nama-nama lokasi menjadi satu string yang dipisahkan dengan koma
                                const combinedNames = locationNames.join(', ');

                                // Menampilkan string yang berisi nama-nama lokasi dalam elemen input
                                document.getElementById('name_koordinat').value = combinedNames;

                              // Sekarang nearbyLocations berisi objek yang berisi titik lokasi dan jarak dalam meter.
                              console.log('Lokasi Terdekat:', nearbyLocations);

                              // Menampilkan jarak dalam elemen input dengan ID "jarak"
                              if (nearbyLocations.length > 0) {

                                                  const nearestLocation = nearbyLocations[0];
                                                  const jarak = nearestLocation.distance.toFixed(2); // Mengambil jarak dengan dua angka desimal
                                                  document.getElementById('jarak').value = jarak;


                                                  //---------------------------Mulai Cek Data NIK--------------------
                                                  const distance = document.getElementById('jarak');
                                                  const nikElement = document.getElementById('nikuser');
                                                  const nikValue = nikElement.value;


                                                    $.ajax({
                                                      url: '/presensi/getnikuser/' + nikValue, // Menggunakan nilai NIK yang diambil dari input
                                                      type: 'GET',
                                                      success: function(data) {
                                                        if (data) { // Periksa apakah data tidak kosong
                                                            $('#nameuser').val(data.name);
                                                            $('#nipuser').val(data.niy);

                                                            console.log('Data Pegawai:', data);

                                                            if (data == '9') {
                                                                  alert('Anda Sudah Malakukan Presensi Pagi');
                                                                  nikuser.focus();
                                                                  event.preventDefault(); // Untuk mencegah pengiriman formulir jika NIK kosong
                                                            }
                                                            else{

                                                            

                                                                    //--------------------START KIRIM DATA POST KE TABLE PRESENSI--------------------
                                                                          
                                                                    const data_name = document.getElementById('nameuser').value;
                                                                    const data_nip = document.getElementById('nipuser').value;
                                                                    const data_koordinat = document.getElementById('name_koordinat').value;
                                                                    const data_nik = document.getElementById('nikuser').value;
                                                                    const data_jarak = document.getElementById('jarak').value;
                                                                    const canvas = document.getElementById('overlay');
                                              
                                                                    const imageDataURL = canvas.toDataURL('image/jpeg', 0.7); //Using Base64

                                                                    var postData = {
                                                                          name: data_name,
                                                                          nip: data_nip,
                                                                          nik: data_nik,
                                                                          location: data_koordinat,
                                                                          distance: data_jarak,
                                                                          in: imageDataURL

                                                                      };
                                                                              // Mengirim data sebagai permintaan POST
                                                                              $.ajax({
                                                                                  type: 'POST',
                                                                                  url: '/presensi/pegawai',
                                                                                  data: postData,
                                                                                          headers: {
                                                                                            "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content"),
                                                                                          },
                                                                                  success: function(response) {
                                                                                      // Tindakan setelah permintaan POST berhasil
                                                                                      console.log('Data berhasil dikirim:', response);

                                                                                      $('#loading-spinner').show();

                                                                                      var nik = $('#nikuser').val('');
                                                                                      var url = '/presensi';
                                                                                      window.location.href = url;   
                                                                                  },
                                                                                  error: function(xhr, status, error) {
                                                                                      console.error('Terjadi kesalahan:', error);
                                                                                  }
                                                                              });
                                                                  

                                                                  //--------------------------------AKHIR KIRIM DATA POST--------------------------
                                                        

                                                              } //Akhir If Elsa jika sudah absen pagi
                                                        }        
                                                        else {
                                                          
                                                            // Data kosong, lakukan sesuatu di sini jika diperlukan
                                                            alert('NIK Anda Tidak Terdaftar!');
                                                            $('#nikuser').val('');
                                                            $('#nikuser').focus();
                                                        }
                                                      },
                                                      error: function(xhr, status, error) {
                                                        console.error('Error Connection:', error);
                                                          alert("Periksa Kembali Nik dan Koneksi Anda");

                                                            $('#nikuser').val('');
                                                            $('#nikuser').focus();
                                                      }
                                                    });

                                                  //---------------------------Akhir Cek Data NIK--------------------

                                                   
                              } else {
                                    
                                    document.getElementById('jarak').value = 'Tidak ada lokasi dalam radius';
                                  
                              }
                          },
                          error: function (xhr, status, error) {
                              // Terjadi kesalahan saat mengambil data lokasi
                              console.error('Terjadi kesalahan:', error);
                          }
                      });
                  });
              } else {
                  console.log("Geolokasi tidak didukung di peramban ini.");
              }
              //Akhir Pengambilan Location Perngguna dan Jarak Pengguna dari Kantor


        });
        //-----------------------AKHIR KLIK DATANG-------------------------



        //-----------------------AWAL KLIK PULANG-------------------------
        pulangButton.addEventListener('click', function () {

          if (nikuser.value.trim() === '') {
            alert('Mohon Untuk Mengisi NIK Anda');
            nikuser.focus();
            event.preventDefault(); // Untuk mencegah pengiriman formulir jika NIK kosong
          }
          else{
            const context = canvas.getContext('2d');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
          }

          if ("geolocation" in navigator) {
            
            navigator.geolocation.getCurrentPosition(function (position) {
              const userLatitude = position.coords.latitude;
              const userLongitude = position.coords.longitude;

              // Mengisi nilai input dengan data latitude dan longitude
              document.getElementById('user_latitude').value = userLatitude;
              document.getElementById('user_longitude').value = userLongitude;

              // Ambil data Location terlebih dahulu
                $.ajax({
                  
                  url: '/presensi/getlocation', // Ganti URL dengan URL endpoint Anda
                  type: 'GET',
                  dataType: 'json', // Tentukan tipe data yang diharapkan dalam respons
                  success: function (data) {

                    console.log('Data Lokasi:', data);
                    const maxRadius = 500;
                    const nearbyLocations = [];

                    // Fungsi untuk menghitung jarak antara dua titik
                      function calculateDistance(lat1, lon1, lat2, lon2) {
                      const R = 6371000; // Radius bumi dalam meter
                      const dLat = (lat2 - lat1) * (Math.PI / 180);
                      const dLon = (lon2 - lon1) * (Math.PI / 180);
                      const a =
                                Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                                Math.cos(lat1 * (Math.PI / 180)) * Math.cos(lat2 * (Math.PI / 180)) *
                                Math.sin(dLon / 2) * Math.sin(dLon / 2);
                                  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                                  const distance = R * c; // Jarak dalam meter
                                  return distance;
                              }

                      // Memeriksa setiap titik lokasi dari database
                      data.forEach(function (location) {
                          
                        const distance = calculateDistance(
                              userLatitude, userLongitude,
                              location.latitude, location.longitude
                        );

                        if (distance <= maxRadius) {
                            nearbyLocations.push({
                              location: location,
                              distance: distance
                            });

                        }

                      });

                                // Mengambil nama-nama lokasi dari nearbyLocations
                                const locationNames = nearbyLocations.map(function (item) {
                                    return item.location.name;
                                });

                                // Menggabungkan nama-nama lokasi menjadi satu string yang dipisahkan dengan koma
                                const combinedNames = locationNames.join(', ');

                                // Menampilkan string yang berisi nama-nama lokasi dalam elemen input
                                document.getElementById('name_koordinat').value = combinedNames;

                              // Sekarang nearbyLocations berisi objek yang berisi titik lokasi dan jarak dalam meter.
                              console.log('Lokasi Terdekat:', nearbyLocations);

                              // Menampilkan jarak dalam elemen input dengan ID "jarak"
                              if (nearbyLocations.length > 0) {

                                                  const nearestLocation = nearbyLocations[0];
                                                  const jarak = nearestLocation.distance.toFixed(2); // Mengambil jarak dengan dua angka desimal
                                                  document.getElementById('jarak').value = jarak;


                                                  //---------------------------Mulai Cek Data NIK--------------------
                                                  const distance = document.getElementById('jarak');
                                                  const nikElement = document.getElementById('nikuser');
                                                  const nikValue = nikElement.value;


                                                    $.ajax({
                                                      url: '/presensi/getnikuserdatang/' + nikValue, // Menggunakan nilai NIK yang diambil dari input
                                                      type: 'GET',
                                                      success: function(data) {
                                                        if (data) { // Periksa apakah data tidak kosong

                                                            console.log('Data Pegawai:', data);

                                                            if (data == '8') {
                                                                  alert('Lakukan Presensi Datang Terlebih Dahulu !');
                                                                  nikuser.focus();
                                                                  event.preventDefault(); // Untuk mencegah pengiriman formulir jika NIK kosong
                                                            }
                                                            else if (data == '7') {
                                                                  alert('Anda Sudah Melakukan Presensi Hari ini !');
                                                                  nikuser.focus();
                                                                  event.preventDefault(); // Untuk mencegah pengiriman formulir jika NIK kosong
                                                            }
                                                            else{

                                                            

                                                                    //--------------------START KIRIM DATA POST KE TABLE PRESENSI--------------------
                                                                          
                                                                    const data_koordinat = document.getElementById('name_koordinat').value;
                                                                    const data_nik = document.getElementById('nikuser').value;
                                                                    const data_jarak = document.getElementById('jarak').value;
                                                                    const canvas = document.getElementById('overlay');
                                              
                                                                    const imageDataURL = canvas.toDataURL('image/jpeg', 0.7); //Using Base64

                                                                    var postData = {
                                                                        nik: data_nik,
                                                                        location: data_koordinat,
                                                                        distance: data_jarak,
                                                                        out: imageDataURL

                                                                    };
                                                                            // Mengirim data sebagai permintaan POST
                                                                            $.ajax({
                                                                                type: 'PATCH',
                                                                                url: '/presensi/pegawaipulang',
                                                                                data: postData,
                                                                                        headers: {
                                                                                          "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content"),
                                                                                        },
                                                                                success: function(response) {
                                                                                    // Tindakan setelah permintaan POST berhasil
                                                                                    console.log('Data berhasil dikirim:', response);

                                                                                    $('#loading-spinner').show();

                                                                                    var nik = $('#nikuser').val();
                                                                                    var url = '/edit-presensi/' + nik;
                                                                                    window.location.href = url;

                                                                                },
                                                                                error: function(xhr, status, error) {
                                                                                    console.error('Terjadi kesalahan:', error);
                                                                                }
                                                                            });

                                                                  //--------------------------------AKHIR KIRIM DATA POST--------------------------
                                                        

                                                              } //Akhir If Elsa jika sudah absen pagi
                                                        }        
                                                        else {
                                                          
                                                            // Data kosong, lakukan sesuatu di sini jika diperlukan
                                                            alert('NIK Anda Tidak Terdaftar!');
                                                            $('#nikuser').val('');
                                                            $('#nikuser').focus();
                                                        }
                                                      },
                                                      error: function(xhr, status, error) {
                                                        console.error('Error Connection:', error);
                                                          alert("Periksa Kembali Nik dan Koneksi Anda");

                                                            $('#nikuser').val('');
                                                            $('#nikuser').focus();
                                                      }
                                                    });

                                                  //---------------------------Akhir Cek Data NIK--------------------

                                                   
                              } else {
                                    
                                    document.getElementById('jarak').value = 'Tidak ada lokasi dalam radius';
                                  
                              }
                          },
                          error: function (xhr, status, error) {
                              // Terjadi kesalahan saat mengambil data lokasi
                              console.error('Terjadi kesalahan:', error);
                          }
                      });
            });
          }
          else {
            console.log("Geolokasi tidak didukung di peramban ini.");
          }

        });
        //-----------------------AKHIR KLIK PULANG-------------------------

            
});
</script>

<script>
$(document).ready(function () {
    $('#izin').on('click', function (event) {

      const izinButton = document.getElementById('izin');
      const nikuser = document.getElementById('nikuser');
      const nikValue = nikuser.value;


        if (nikuser.value.trim() === '') {
            alert('Mohon Untuk Mengisi NIK Anda');
            nikuser.focus();
            event.preventDefault();
            return;
        }

        // Cek NIK Anda
        $.ajax({
            url: '/presensi/getnikuserdatang/' + nikValue, // Menggunakan nilai NIK yang diambil dari input
            type: 'GET',
            success: function (data) {
                console.log('Data Pegawai:', data);

                if (data == '1') {
                    alert('Anda Tidak Dapat Melakukan Perizinan Karena Sudah Absen Hari ini !');
                    nikuser.focus();
                    event.preventDefault(); // Untuk mencegah pengiriman formulir jika NIK kosong
                } else {

                    const nameValue = nameuser.value;

                    // Isi data nama dan sekolah ke dalam modal
                    $('#modalNik').text(nikValue);

                    $('#confirmationModal').modal('show');

                }
            },
            error: function () {
                // Data kosong atau kesalahan, lakukan sesuatu jika diperlukan
                alert('NIK Anda Tidak Terdaftar!');
                $('#nikuser').val('');
                $('#nikuser').focus();
            }
        });
    });
});
//------------------------------------------AKHIR UNTUK IZIN-----------------------------------------

</script>

<script>
  $(document).ready(function () {
    
    $('#confirmIzin').on('click', function () {

      var nikuser = $('#nikuser').val();
      var alasanmodal = $('#alasanmodal').val();
      var notemodal = $('#notemodal').val();

       var dataToSend = {
            nikuser: nikuser,
            alasanmodal: alasanmodal,
            notemodal: notemodal,
          };

          //ajax start
            $.ajax({
                type: 'POST',
                url: '/presensi/izinuser',
                data: dataToSend,
                        headers: {
                          "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content"),
                        },
                success: function (response) {
                  // Tangani respon dari server setelah POST berhasil
                  // Anda dapat menambahkan tindakan lanjutan di sini
                  //console.log('PESAN TELEGRAM:', response);

                  alert('Selamat Anda Berhasil Izin');
                  
                  $('#loading-spinner').show();
                  var url = '/presensi';
                  window.location.href = url;              

                },
                error: function (error) {
                  // Tangani kesalahan jika POST gagal
                  alert('Terjadi kesalahan saat mengirim data ke server, Silahkan Coba Lagi.');
                },
              });

          // Tutup modal konfirmasi
          $('#confirmationModal').modal('hide');

          //akhir ajax

    });
});
//------------------------------------------AKHIR UNTUK CONFIRM IZIN MODAL-----------------------------------------
</script>