<?php
include '../../koneksi.php';

if (isset($_POST['simpan'])) {
    $user_id    = $_POST['user_id'];
    $tanggal    = $_POST['tanggal'];
    $jam_masuk  = $_POST['jam_masuk'];
    $jam_pulang = $_POST['jam_pulang'];
    $status     = $_POST['status'];

    mysqli_query($koneksi, "INSERT INTO absensi 
        (user_id, tanggal, jam_masuk, jam_pulang, status)
        VALUES 
        ('$user_id','$tanggal','$jam_masuk','$jam_pulang','$status')
    ");

    echo "<script>
        parent.document.getElementById('iframeContent').src='kelola_absen/absen.php';
    </script>";
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Tambah Absensi</title>

<link href="../../bootstrap-5.3.8-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">

<style>
body {
    background:#f4f6f9;
}
.card {
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(0,0,0,.12);
}
</style>
</head>

<body>

<div class="container mt-4">
<div class="card p-4">

<h4 class="fw-bold mb-4">
    <i class="bi bi-plus-circle"></i> Tambah Absensi Manual
</h4>

<form method="post">

<div class="row">
  <div class="col-md-6 mb-3">
    <label class="form-label fw-semibold">Kelas</label>
    <select id="kelas" class="form-select" required>
      <option value="">-- Pilih Kelas --</option>
      <option value="XI IPA">XI IPA</option>
      <option value="XI IPS">XI IPS</option>
      <option value="XII IPA">XII IPA</option>
      <option value="XII IPS">XII IPS</option>
    </select>
  </div>

  <div class="col-md-6 mb-3">
    <label class="form-label fw-semibold">Nama Siswa</label>
    <select name="user_id" id="siswa" class="form-select" required>
      <option value="">-- Pilih Siswa --</option>
    </select>
  </div>
</div>

<div class="row">
  <div class="col-md-6 mb-3">
    <label class="form-label">Tanggal</label>
    <input type="date" name="tanggal" class="form-control" required>
  </div>
  <div class="col-md-3 mb-3">
    <label class="form-label">Jam Masuk</label>
    <input type="time" name="jam_masuk" class="form-control" required>
  </div>
  <div class="col-md-3 mb-3">
    <label class="form-label">Jam Pulang</label>
    <input type="time" name="jam_pulang" class="form-control">
  </div>
</div>

<div class="mb-4">
  <label class="form-label">Status</label>
  <select name="status" class="form-select" required>
    <option value="Hadir">Hadir</option>
    <option value="Izin">Izin</option>
    <option value="Sakit">Sakit</option>
    <option value="Alpa">Alpa</option>
  </select>
</div>

<button name="simpan" class="btn btn-primary rounded-pill px-4">
  <i class="bi bi-save"></i> Simpan Absensi
</button>

<button type="button" class="btn btn-secondary rounded-pill px-4"
onclick="parent.document.getElementById('iframeContent').src='kelola_absen/absen.php'">
  <i class="bi bi-arrow-left"></i> Kembali
</button>

</form>

</div>
</div>

<script src="../../bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>

<script>
document.getElementById('kelas').addEventListener('change', function () {
    const kelas = this.value;
    const siswaSelect = document.getElementById('siswa');
    siswaSelect.innerHTML = '<option>Loading...</option>';

    fetch('siswa_by_kelas.php?kelas=' + kelas)
    .then(res => res.text())
    .then(data => siswaSelect.innerHTML = data);
});
</script>

</body>
</html>
