<?php include 'header.php'; ?>

<h4>📋 Kehadiran Siswa</h4>

<div class="card p-3 mt-3 shadow-sm">

<form id="formAbsen">

<input type="hidden" name="siswa_id" id="siswa_id">
<input type="hidden" name="nama" id="nama_hidden">

<div class="mb-2 position-relative">
<input type="text" id="search" class="form-control" placeholder="🔍 Cari siswa...">
<div id="result" class="list-group"></div>
</div>

<div class="row">
<div class="col-md-6 mb-2">
<input type="text" id="nama" class="form-control" placeholder="Nama" readonly>
</div>
<div class="col-md-6 mb-2">
<input type="text" id="kelas" class="form-control" placeholder="Kelas" readonly>
</div>
</div>

<div class="row mt-2">
<div class="col-md-6 mb-2">
<input type="date" name="tanggal" class="form-control" value="<?=date('Y-m-d')?>">
</div>

<div class="col-md-6 mb-2">
<select name="keterangan" class="form-control">
<option value="Hadir">Hadir</option>
<option value="Sakit">Sakit</option>
<option value="Izin">Izin</option>
<option value="Alpha">Alpha</option>
</select>
</div>
</div>

<button class="btn btn-primary mt-3 w-100">💾 Simpan</button>

</form>

</div>

<hr>

<div class="card p-3 shadow-sm">

<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
<h5>📊 Data Kehadiran</h5>
<input type="date" id="filterTanggal" class="form-control filter-date" value="<?=date('Y-m-d')?>">
</div>

<div class="table-responsive">

<table class="table table-bordered table-striped align-middle">
<thead>
<tr>
<th>Nama</th>
<th>Kelas</th>
<th>Tanggal</th>
<th>Keterangan</th>
<th>Aksi</th>
</tr>
</thead>

<tbody id="tbody"></tbody>

</table>
</div>
</div>

<script>

// 🔍 SEARCH SISWA
document.getElementById('search').addEventListener('keyup', function(){
    let q = this.value;

    if(q.length < 2){
        result.innerHTML = '';
        return;
    }

    fetch('search_siswa.php?q='+q)
    .then(res => res.json())
    .then(data => {
        let html = '';
        data.forEach(d => {
            html += `<a href="#" class="list-group-item list-group-item-action"
            onclick="pilih('${d.id}','${d.nama}','${d.kelas}')">
            ${d.nama} - ${d.kelas}
            </a>`;
        });
        document.getElementById('result').innerHTML = html;
    });
});

function pilih(id,nama,kelas){
    siswa_id.value = id;
    document.getElementById('nama').value = nama;
    document.getElementById('nama_hidden').value = nama;
    document.getElementById('kelas').value = kelas;
    result.innerHTML = '';
}

// 💾 SIMPAN
document.getElementById('formAbsen').addEventListener('submit', function(e){
    e.preventDefault();

    let formData = new FormData(this);

    fetch('simpan_kehadiran.php',{
        method:'POST',
        body:formData
    })
    .then(res => res.text())
    .then(res => {

        if(res == 'double'){
            Swal.fire('⚠️ Gagal','Siswa sudah absen hari ini','warning');
        }else{
            Swal.fire('✅ Berhasil','Data kehadiran tersimpan','success');
            loadData();
            document.getElementById('formAbsen').reset();
        }

    });
});

// 📊 LOAD DATA
function loadData(){
    let tanggal = document.getElementById('filterTanggal').value;

    fetch('get_absensi.php?tanggal='+tanggal)
    .then(res => res.text())
    .then(html => {
        document.getElementById('tbody').innerHTML = html;
    });
}

loadData();
document.getElementById('filterTanggal').addEventListener('change', loadData);

function hapus(id){
    Swal.fire({
        title: 'Hapus data?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, hapus'
    }).then(result=>{
        if(result.isConfirmed){
            fetch('hapus_absensi.php',{
                method:'POST',
                headers:{'Content-Type':'application/x-www-form-urlencoded'},
                body:'id='+id
            }).then(()=>{
                Swal.fire('Berhasil','Data dihapus','success');
                loadData();
            });
        }
    });
}

</script>
<?php include 'footer.php'; ?>
</body>
</html>