<div class="container-fluid pt-4">
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h5 class="m-0 font-weight-bold text-primary">Data Absensi Pegawai</h5>
                </div>
                <div class="card-body">
                    <button class="btn btn-success mb-3" data-toggle="modal" data-target="#addAbsensiModal">
                        <i class="fa fa-plus"></i> Tambah Absensi
                    </button>
                    
                    <div class="table-responsive">
                        <table id="absensiTable" class="table table-bordered table-hover" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Nama Pegawai</th>
                                    <th>Tanggal Absen</th>
                                    <th>Jam Masuk</th>
                                    <th>Jam Pulang</th>
                                    <th>Status</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody> 
                                </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editAbsensiModal" tabindex="-1" role="dialog" aria-labelledby="editAbsensiModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editAbsensiModalLabel">Edit Data Absensi</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="editAbsensiForm">
                <div class="modal-body">
                    <input type="hidden" name="id_absen" id="modal_id_absen">

                    <div class="form-group">
                        <label for="modal_nama_pegawai">Nama Pegawai</label>
                        <input type="text" class="form-control" id="modal_nama_pegawai" name="nama_pegawai" readonly> 
                    </div>
                    
                    <div class="form-group">
                        <label for="modal_tanggal_absen">Tanggal Absen</label>
                        <input type="date" class="form-control" id="modal_tanggal_absen" name="tanggal_absen" required>
                    </div>

                    <div class="form-group">
                        <label for="modal_jam_masuk">Jam Masuk</label>
                        <input type="time" class="form-control" id="modal_jam_masuk" name="jam_masuk" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="modal_jam_pulang">Jam Pulang</label>
                        <input type="time" class="form-control" id="modal_jam_pulang" name="jam_pulang">
                    </div>

                    <div class="form-group">
                        <label for="modal_status_pegawai">Status Pegawai</label>
                        <select class="form-control" id="modal_status_pegawai" name="status_pegawai">
                            <option value="Hadir">Hadir</option>
                            <option value="Izin">Izin</option>
                            <option value="Sakit">Sakit</option>
                            <option value="Cuti">Cuti</option>
                        </select>
                    </div>
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    
    // 1. INISIALISASI DATATABLES
    var absensiTable = $('#absensiTable').DataTable({
        "processing": true,
        "serverSide": true,
        "order": [], 
        "ajax": {
            // URL ke Controller/Method yang mengembalikan data DataTables JSON
            "url": "<?php echo base_url('AbsensiController/getAbsensiData'); ?>", 
            "type": "POST"
        },
        "columnDefs": [
            { 
                "targets": [ 0, 6 ], // Targets kolom ID dan Aksi
                "orderable": false,
            },
        ],
    });
    
    // 2. EVENT CLICK UNTUK TOMBOL EDIT
    $('#absensiTable').on('click', '.btn-edit-absensi', function () {
        var id = $(this).data('id');
        
        // Memastikan ID yang diambil ada
        if (id) {
            // Panggil AJAX untuk mendapatkan data satu baris (Menggunakan Controller yang kita buat)
            $.ajax({
                url: "<?php echo base_url('absensi/getAbsensiById'); ?>/" + id, 
                type: "GET",
                dataType: "json",
                success: function(data) {
                    // Isi data ke dalam field modal
                    $('#modal_id_absen').val(data.id_absen);
                    $('#modal_nama_pegawai').val(data.nama_pegawai);
                    $('#modal_tanggal_absen').val(data.tanggal_absen);
                    $('#modal_jam_masuk').val(data.jam_masuk);
                    $('#modal_jam_pulang').val(data.jam_pulang);
                    $('#modal_status_pegawai').val(data.status_pegawai);
                    
                    // Tampilkan modal
                    $('#editAbsensiModal').modal('show');
                },
                error: function(xhr, status, error) {
                    alert("Gagal mengambil data absensi: " + error);
                    console.error("AJAX Error:", status, error);
                }
            });
        }
    });

    // 3. SUBMIT FORM EDIT (Logika UPDATE)
    $('#editAbsensiForm').on('submit', function(e) {
        e.preventDefault();
        
        // Ambil data form
        var formData = $(this).serialize();
        
        $.ajax({
            url: "<?php echo base_url('AbsensiController/updateAbsensi'); ?>", // Anda harus membuat method updateAbsensi di Controller
            type: "POST",
            data: formData,
            dataType: "json",
            success: function(response) {
                if (response.status === 'success') {
                    alert("Data absensi berhasil diperbarui!");
                    $('#editAbsensiModal').modal('hide');
                    // Reload DataTables tanpa berpindah halaman
                    absensiTable.ajax.reload(null, false); 
                } else {
                    alert("Gagal menyimpan perubahan: " + response.message);
                }
            },
            error: function(xhr, status, error) {
                alert("Terjadi kesalahan saat menyimpan data.");
                console.error("AJAX Error:", status, error);
            }
        });
    });

    // 4. EVENT CLICK UNTUK TOMBOL HAPUS (Opsional)
    $('#absensiTable').on('click', '.btn-delete-absensi', function () {
        var id = $(this).data('id');
        if (confirm("Apakah Anda yakin ingin menghapus data absensi ini?")) {
            // Panggil AJAX untuk menghapus data
            $.ajax({
                url: "<?php echo base_url('AbsensiController/deleteAbsensi'); ?>/" + id, 
                type: "POST",
                dataType: "json",
                success: function(response) {
                    if (response.status === 'success') {
                        alert("Data berhasil dihapus.");
                        absensiTable.ajax.reload(null, false);
                    } else {
                        alert("Gagal menghapus data: " + response.message);
                    }
                }
            });
        }
    });
    
});
</script>