<?php 
session_start();

if(!isset($_SESSION['login'])){
  header('Location: ../../auth/login.php?pesan=belum_login');
  exit;
}
else if($_SESSION['role'] != 'Pegawai'){
  header('Location: ../../auth/login.php?pesan=tolak_akses');
  exit;
}

$judul = 'Home';
include('../layout/header.php'); 

// Ambil lokasi presensi dari session
$lokasi_presensi = $_SESSION['lokasi_presensi'];

// Nilai default untuk menghindari undefined variable
$latitude_kantor = "";
$longitude_kantor = "";
$radius = "";
$zona_waktu = "WIB"; // default timezone
$jam_pulang = "17:00:00"; // default jam pulang

// Ambil data lokasi dari database
$result = mysqli_query($connection, "SELECT * FROM lokasi_presensi WHERE nama_lokasi = '$lokasi_presensi'");

// Jika data ditemukan, isi variabelnya
if ($result && mysqli_num_rows($result) > 0) {
  while($lokasi = mysqli_fetch_array($result)){
    $latitude_kantor = $lokasi['latitude'];
    $longitude_kantor = $lokasi['longitude'];
    $radius = $lokasi['radius'];
    $zona_waktu = $lokasi['zona_waktu'];
    $jam_pulang = $lokasi['jam_pulang'];
  }
}

// Set zona waktu sesuai pilihan
if($zona_waktu == 'WIB'){
  date_default_timezone_set('Asia/Jakarta');
}
elseif($zona_waktu == 'WITA'){
  date_default_timezone_set('Asia/Makassar');
}
elseif($zona_waktu == 'WIT'){
  date_default_timezone_set('Asia/Jayapura');
}
?>

<style>
  .clock-glow {
    font-size: 60px;
    font-weight: bold;
    color: #2979ff;
    text-shadow: 0 0 20px rgba(41,121,255,0.6),
                 0 0 30px rgba(41,121,255,0.4);
    transition: all 0.3s ease;
  }

  .parent-date{
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    font-size: 20px;
    text-align: center;
    justify-content: center;
  }

  .parent-clock{
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    justify-content: center;
  }
</style>

<!-- Page body -->
<div class="page-body">
  <div class="container-xl">

    <!-- Jam dan tanggal animasi glowing -->
    <div class="text-center mt-4 mb-4">
      <h1 id="clock" class="clock-glow">00:00:00</h1>
      <h5 id="date" class="text-muted"></h5>
    </div>

    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-4">
        <div class="card text-center h-100">
          <div class="card-header">Presensi Masuk</div>
          <div class="card-body">
            <?php 
            $id_pegawai = $_SESSION['id'];
            $tanggal_hari_ini = date('Y-m-d');
            $cek_presensi_masuk = mysqli_query($connection, "SELECT * FROM presensi WHERE id_pegawai = '$id_pegawai' AND tanggal_masuk = '$tanggal_hari_ini'");
            ?>

            <?php if(mysqli_num_rows($cek_presensi_masuk) == 0){ ?>
            <div class="parent-date">
              <div id="tanggal-masuk"></div>
              <div class="ms-2"></div>
              <div id="bulan-masuk"></div>
              <div class="ms-2"></div>
              <div id="tahun-masuk"></div>
            </div>
            <div class="parent-clock">
              <div id="jam-masuk"></div>
              <div>:</div>
              <div id="menit-masuk"></div>
              <div>:</div>
              <div id="detik-masuk"></div>
            </div>

            <form action="<?= base_url('pegawai/presensi/presensi_masuk.php') ?>" method="POST">
              <input type="hidden" name="latitude_pegawai" id="latitude-pegawai">
              <input type="hidden" name="longitude_pegawai" id="longitude-pegawai">
              <input type="hidden" value="<?= $latitude_kantor ?>" name="latitude_kantor">
              <input type="hidden" value="<?= $longitude_kantor ?>" name="longitude_kantor">
              <input type="hidden" value="<?= $radius ?>" name="radius">
              <input type="hidden" value="<?= $zona_waktu ?>" name="zona_waktu">
              <input type="hidden" value="<?= date('Y-m-d') ?>" name="tgl_masuk">
              <input type="hidden" value="<?= date('H:i:s') ?>" name="jam_masuk">
              <button type="submit" name="masuk" class="btn btn-primary mt-3">Masuk</button>
            </form>
            <?php } else { ?>
              <i class="fa-regular fa-circle-check fa-4x text-success mb-2"></i>
              <h4>Anda sudah melakukan <br> presensi masuk</h4>
            <?php } ?>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-header">Presensi Keluar</div>
          <div class="card-body text-center">
            <?php 
            $ambil_data_presensi = mysqli_query($connection, "SELECT * FROM presensi WHERE id_pegawai = '$id_pegawai' AND tanggal_masuk = '$tanggal_hari_ini'");
            $waktu_sekarang = date('H:i:s');
            
            if(strtotime($waktu_sekarang) <= strtotime($jam_pulang)){ ?>
              <i class="fa-regular fa-circle-xmark fa-4x text-danger mb-2"></i>
              <h4>Belum waktunya pulang</h4>
            <?php } 
            else if(strtotime($waktu_sekarang) >= strtotime($jam_pulang) && mysqli_num_rows($ambil_data_presensi) == 0){ ?>
              <i class="fa-regular fa-circle-xmark fa-4x text-danger mb-2"></i>
              <h4>Silahkan melakukan presensi masuk <br> terlebih dahulu!</h4>
            <?php } 
            else { 
              while($cek_presensi_keluar = mysqli_fetch_array($ambil_data_presensi)){ 
                if($cek_presensi_keluar['tanggal_masuk'] && $cek_presensi_keluar['tanggal_keluar'] == '0000-00-00'){ ?>
                  <div class="parent-date">
                    <div id="tanggal-keluar"></div>
                    <div class="ms-2"></div>
                    <div id="bulan-keluar"></div>
                    <div class="ms-2"></div>
                    <div id="tahun-keluar"></div>
                  </div>
                  <div class="parent-clock">
                    <div id="jam-keluar"></div>
                    <div>:</div>
                    <div id="menit-keluar"></div>
                    <div>:</div>
                    <div id="detik-keluar"></div>
                  </div>

                  <form action="<?= base_url('pegawai/presensi/presensi_keluar.php') ?>" method="POST">
                    <input type="hidden" name="id" value="<?= $cek_presensi_keluar['id'] ?>">
                    <input type="hidden" name="latitude_pegawai" id="latitude-pegawai">
                    <input type="hidden" name="longitude_pegawai" id="longitude-pegawai">
                    <input type="hidden" value="<?= $latitude_kantor ?>" name="latitude_kantor">
                    <input type="hidden" value="<?= $longitude_kantor ?>" name="longitude_kantor">
                    <input type="hidden" value="<?= $radius ?>" name="radius">
                    <input type="hidden" value="<?= $zona_waktu ?>" name="zona_waktu">
                    <input type="hidden" value="<?= date('Y-m-d') ?>" name="tgl_keluar">
                    <input type="hidden" value="<?= date('H:i:s') ?>" name="jam_keluar">
                    <button type="submit" name="keluar" class="btn btn-danger mt-3">Keluar</button>
                  </form>
                <?php } else { ?>
                  <i class="fa-regular fa-circle-check fa-4x text-success mb-2"></i>
                  <h4>Anda telah melakukan <br> presensi keluar</h4>
                <?php } 
              } 
            } ?>
          </div>
        </div>
      </div>

      <div class="col-md-2"></div>
    </div>
  </div>
</div>

<script>
  // === JAM & TANGGAL ANIMASI DI ATAS HALAMAN ===
  function updateClock() {
    const now = new Date();
    const jam = String(now.getHours()).padStart(2, '0');
    const menit = String(now.getMinutes()).padStart(2, '0');
    const detik = String(now.getSeconds()).padStart(2, '0');
    document.getElementById('clock').textContent = `${jam}:${menit}:${detik}`;

    const hariNama = ["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"];
    const bulanNama = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
    const hari = hariNama[now.getDay()];
    const tanggal = now.getDate();
    const bulan = bulanNama[now.getMonth()];
    const tahun = now.getFullYear();
    document.getElementById('date').textContent = `${hari}, ${tanggal} ${bulan} ${tahun}`;
  }
  setInterval(updateClock, 1000);
  updateClock();

  // === JAM MASUK & KELUAR ===
  window.setTimeout("waktuMasuk()", 1000);
  const namaBulan = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','Nopember','Desember'];

  function waktuMasuk(){
    const waktu = new Date();
    setTimeout("waktuMasuk()", 1000);
    document.getElementById("tanggal-masuk").innerHTML = waktu.getDate();
    document.getElementById("bulan-masuk").innerHTML = namaBulan[waktu.getMonth()];
    document.getElementById("tahun-masuk").innerHTML = waktu.getFullYear();
    document.getElementById("jam-masuk").innerHTML = waktu.getHours();
    document.getElementById("menit-masuk").innerHTML = waktu.getMinutes();
    document.getElementById("detik-masuk").innerHTML = waktu.getSeconds();
  }

  window.setTimeout("waktuKeluar()", 1000);
  function waktuKeluar(){
    const waktu = new Date();
    setTimeout("waktuKeluar()", 1000);
    document.getElementById("tanggal-keluar").innerHTML = waktu.getDate();
    document.getElementById("bulan-keluar").innerHTML = namaBulan[waktu.getMonth()];
    document.getElementById("tahun-keluar").innerHTML = waktu.getFullYear();
    document.getElementById("jam-keluar").innerHTML = waktu.getHours();
    document.getElementById("menit-keluar").innerHTML = waktu.getMinutes();
    document.getElementById("detik-keluar").innerHTML = waktu.getSeconds();
  }

  // === AMBIL LOKASI PEGAWAI ===
  getLocation();
  function getLocation(){
    if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      alert("Browser anda tidak mendukung geolocation!");
    }
  }

  function showPosition(position){
    $('#latitude-pegawai').val(position.coords.latitude);
    $('#longitude-pegawai').val(position.coords.longitude);
  }
</script>

<?php include('../layout/footer.php'); ?>
