    <style>
    .calendar-grid{
        display:grid;
        grid-template-columns:repeat(7,1fr);
        gap:8px;
    }

    .calendar-card{
        min-height:60px;
        font-size:12px;
    }

    .calendar-card.empty{
        visibility:hidden;
    }

    .calendar-card .badge{
        font-size:10px;
}

    .badge-custom {
    background-color: #ff8874;
    color: #fff;
}
    
    .badge-custom1{
    background-color: #27F549;
    color: #fff;
}

    .badge-custom2 {
    background-color: #CB21FF;
    color: #fff;
}

    .badge-custom3 {
    background-color: #94A600;
    color: #fff;
}

    .badge-custom4 {
    background-color: #8200C7;
    color: #fff;
}

    </style>

    <div class="container mt-4">

        <div class="card border-0 shadow-sm rounded-4">

            <div class="card-body p-4">

            <div class="d-flex justify-content-end align-items-center mb-3">
                <h7 class="mb-0">Tanggal</h7>
                </div>

                <div class="d-flex justify-content-between align-items-center mb-3">


                    <h5 class="mb-0">
                        Monitoring Absensi Bulanan
                    </h5>

                    <input type="month"
                        id="filterMonth"
                        class="form-control"
                        style="max-width:220px"
                        value="<?= date('Y-m') ?>">

                </div>

                <div class="table-responsive">

                    <table id="tableAttendance"
                        class="table modern-table align-middle w-100">

                        <thead class="table-light">
                            <tr>
                                <th>No</th>
                                <th>Kode</th>
                                <th>Nama</th>
                                <th>Periode</th>
                                <th>Status</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>

                    </table>

                </div>

            </div>

        </div>

    </div>

    <!-- MODAL DETAIL -->
    <div class="modal fade" id="modalDetail">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-warning text-white">
                    <h5>Detail Absensi Bulanan</h5>
                    <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                <div class="container">
                <div class="row">
                <div class="col-6">
                    <table class="table mb-3">
                    <tbody>
                        <tr>
                            <th width="180">No</th>
                            <td><span id="d_id"></span></td>
                        </tr>
                        <tr>
                            <th>Kode Karyawan</th>
                            <td><span id="d_employee_code"></span></td>
                        </tr>
                        <tr>
                            <th>Nama Karyawan</th>
                            <td><span id="d_full_name"></span></td>
                        </tr>
                        <tr>
                            <th>Periode</th>
                            <td><span id="d_month"></span></td>
                        </tr>
                        <tr>
                            <th>Status</th>
                            <td><span id="d_status"></span></td>
                        </tr>
                        <tr>
                            <th>Score</th>
                            <td><span id="d_score"></span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-3">
                <table class="table mb-3">
                    <tbody>
                        <tr>
                            <th width="100"><span class="badge bg-success">Hadir</span></th>
                            <td id="d_present_count"></td>
                            <th width="180">Hari</th>
                        </tr>
                        <tr>
                            <th><span class="badge bg-info">Sakit</span></th>
                            <td id="d_sick_count"></td>
                            <th width="180">Hari</th>
                        </tr>
                        <tr>
                            <th><span class="badge bg-primary">Izin</span></th>
                            <td id="d_total_permit"></td>
                            <th width="180">Hari</th>
                        </tr>
                        <tr>
                            <th><span class="badge bg-danger">Alpha</span></th>
                            <td id="d_absent_count"></td>
                            <th width="180">Hari</th>
                        </tr>
                        <tr>
                            <th><span class="badge bg-warning">Terlambat</span></th>
                            <td id="d_late_count"></td>
                            <th width="180">Menit</th>
                        </tr>
                        <tr>
                            <th><span class="badge badge-custom">Total Early Leave Minutes</span></th>
                            <td id="d_total_early_leave_minutes"></td>
                            <th width="180">Menit</th>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-3">
                <table class="table mb-3">
                    <tbody>
                        <tr>
                            <th width="100"><span class="badge badge-custom1">Total Hari Kerja</span></th>
                            <td id="d_total_hari_kerja"></td>
                            <th width="180">Hari</th>
                        </tr>
                        <tr>
                            <th><span class="badge bg-dark">Cuti</span></th>
                            <td id="d_total_annual"></td>
                            <th width="180">Hari</th>
                        </tr>
                        <tr>
                            <th><span class="badge bg-secondary">Total Jam Kerja</span></th>
                            <td id="d_total_work_hours"></td>
                            <th width="180">Jam</th>
                        </tr>
                         <tr>
                            <th><span class="badge badge-custom2">Total Late Minutes</span></th>
                            <td id="d_total_late_minutes"></td>
                            <th width="180">Menit</th>
                        </tr>
                        <tr>
                            <th><span class="badge badge-custom4">Total Overtime Hours</span></th>
                            <td id="d_total_overtime_hours"></td>
                            <th width="180">Jam</th>
                        </tr>
                        <tr>
                            <th><span class="badge badge-custom3">Total Alpha</span></th>
                            <td id="d_total_alpha"></td>
                            <th width="180">Hari</th>
                        </tr>
                    </tbody>
                </table>
            </div>
                    <div class="border-top my-3"></div>
                    <div id="detailContent"> // VIEW DETAIL ABSENSI BULANAN (DI-GENERATE DARI JS)
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

    <script>
    $(function(){

        let table = $('#tableAttendance').DataTable({
            ajax:{
                url:`<?= base_url(); ?>attendancemonthly/get_data`,
                data:function(d){
                    d.date = $('#filterMonth').val();
                },
                dataSrc:'data'
            },
            columns:[
                {data:0},
                {data:1},
                {data:2},
                {data:3},
                {data:4},
                {data:5}
                
            ]
        });

        $('#filterMonth').change(function(){
            table.ajax.reload();
        });

    });

    $(function () {

        $(document).on('click', '.btn-detail', function () {

            let id = $(this).data('id');
            let month = $(this).data('month');

            $.get(
                `<?= base_url(); ?>attendancemonthly/detail/${id}/${month}`,
                function (res) {

                    // Header
                    $('#d_id').text(res.header.id);
                    $('#d_employee_code').text(res.header.employee_code);
                    $('#d_full_name').text(res.header.full_name);
                    $('#d_month').text(res.header.month);
                    $('#d_status').text(res.header.status);

                    // Header - perhitungan
                    $('#d_total_hari_kerja').text(res.header.total_hari_kerja);
                    $('#d_present_count').text(res.header.total_present);
                    $('#d_total_hadir').text(res.header.total_hadir);
                    $('#d_late_count').text(res.header.total_late);
                    $('#d_total_permit').text(res.header.total_permit);


                    $('#d_sick_count').text(res.header.total_sick);
                    $('#d_total_overtime_hours').text(res.header.total_overtime_hours);
                    $('#d_total_work_hours').text(res.header.total_work_hours);
                    $('#d_total_annual').text(res.header.total_annual);
                    $('#d_total_late_minutes').text(res.header.total_late_minutes);
                    $('#d_total_early_leave_minutes').text(res.header.total_early_leave_minutes);
               
                    $('#d_score').text(res.header.score);
                    $('#d_leave_count').text(res.header.total_leave);
                    $('#d_absent_count').text(res.header.total_alpha);
                    $('#d_late_count').text(res.header.total_late);
                    $('#d_total_alpha').text(res.header.total_alpha);
                

                    // Mapping data absensi berdasarkan tanggal
                    let attendanceMap = {};

                    $.each(res.detail, function (i, row) {
                        attendanceMap[row.attendance_date] = row;
                    });

                    // Ambil bulan dari header
                    let monthDate = new Date(res.header.month);
                    let year = monthDate.getFullYear();
                    let month = monthDate.getMonth();

                    // Hari pertama bulan
                    let firstDay = new Date(year, month, 1);

                    // Jumlah hari dalam bulan
                    let daysInMonth = new Date(year, month + 1, 0).getDate();

                    // Konversi agar minggu dimulai Senin
                    let startDay = firstDay.getDay();
                    startDay = startDay === 0 ? 6 : startDay - 1;

                    let html = `
                    <div class="calendar-wrapper">

                        <div class="row g-1 fw-bold text-center mb-2">
                            <div class="col">Sen</div>
                            <div class="col">Sel</div>
                            <div class="col">Rab</div>
                            <div class="col">Kam</div>
                            <div class="col">Jum</div>
                            <div class="col">Sab</div>
                            <div class="col">Min</div>
                        </div>

                        <div class="calendar-grid">
                    `;

                    // Kosong sebelum tanggal 1
                    for (let i = 0; i < startDay; i++) {
                        html += `<div class="calendar-card empty"></div>`;
                    }

                    // Isi tanggal
                    for (let day = 1; day <= daysInMonth; day++) {

                        let dateStr =
                            `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;

                        let data = attendanceMap[dateStr];

                        let badge = '';
                        let cardClass = '';

                        if (data) {

                            switch (data.attendance_status) {
                                case 'present':
                                    badge = '<span class="badge bg-success">Hadir</span>';
                                    cardClass = 'border-success';
                                    break;

                                case 'late':
                                    badge = '<span class="badge bg-warning">Terlambat</span>';
                                    cardClass = 'border-warning';
                                    break;

                                case 'alpha':
                                    badge = '<span class="badge bg-danger">Alpha</span>';
                                    cardClass = 'border-danger';
                                    break;

                                case 'sick':
                                    badge = '<span class="badge bg-info">Sakit</span>';
                                    cardClass = 'border-info';
                                    break;

                                case 'permit':
                                    badge = '<span class="badge bg-secondary">Izin</span>';
                                    cardClass = 'border-secondary';
                                    break;

                                case 'annual':
                                    badge = '<span class="badge bg-dark">Cuti</span>';
                                    cardClass = 'border-dark';
                                    break;

                            }

                            html += `
                                <div class="calendar-card card ${cardClass}">
                                    <div class="card-body p-2">
                                        <div class="row gx-0">
                                            <div class="col-auto">
                                                <div class="fw-bold" style="font-size: 16px;">${day}</div>
                                            </div>
                                            <div class="col text-end">
                                                <div class="m-0">${badge}</div>
                                            </div>
                                        </div>
                                        <small class="text-muted d-block mt-1" style="font-size:15px;">
                                            ${data.shift_name}
                                        </small>
                                    </div>
                                </div>
                            `;

                        } else {

                            html += `
                                <div class="calendar-card card">
                                    <div class="card-body p-2">
                                        <div class="fw-bold" style="font-size: 16px;">${day}</div>
                                    </div>
                                </div>
                            `;
                        }
                    }

                    html += `
                        </div>
                    </div>
                    `;

                    $('#detailContent').html(html);


                    // Bootstrap 5
                    let modal = new bootstrap.Modal(document.getElementById('modalDetail'));
                    modal.show();

                },
                'json'
            );

        });

    });

    </script>