<?= $this->extend('layout/main') ?>
<?= $this->section('content') ?>

<style>
    .table thead th {
        border: none !important;
        font-size: 0.7rem;
    }

    /* KELOMPOK WARNA BADGE STATUS MURNI CSS */
    .bg-st-istimewa { background-color: #155724 !important; color: white !important; } 
    .bg-st-baik     { background-color: #28a745 !important; color: white !important; } 
    .bg-st-cukup    { background-color: #8ce196 !important; color: #212529 !important; } 
    .bg-st-telat    { background-color: #ffda6a !important; color: #212529 !important; } 
    .bg-st-bina     { background-color: #ffc107 !important; color: #212529 !important; } 
    .bg-st-teguran  { background-color: #dc3545 !important; color: white !important; } 
    .bg-st-izin     { background-color: #6f42c1 !important; color: white !important; } 
    .bg-st-apel     { background-color: #0d6efd !important; color: white !important; } 
    .bg-st-cepul    { background-color: #fd7e14 !important; color: white !important; } 
    .bg-st-selesai  { background-color: #0d6efd !important; color: white !important; } 
    .bg-st-default  { background-color: #6c757d !important; color: white !important; } 

    @media print {
        .no-print { display: none !important; }
    }
</style>

<div class="card shadow-sm border-0 mb-4 no-print">
    <div class="card-body">
        <form action="" method="GET" class="row g-2 align-items-end">
            <?php if (session()->get('level') == 'admin'): ?>
                <div class="col-md-5">
                    <label class="small fw-bold text-muted">Pilih Unit Kerja / Kategori</label>
                    <select name="id_opd" class="form-select form-select-sm shadow-none" required>
                        <option value="">-- Pilih Instansi --</option>
                        <?php foreach ($list_opd as $o): ?>
                            <option value="<?= $o['id_opd'] ?>" <?= ($selected_opd == $o['id_opd']) ? 'selected' : '' ?>>
                                <?= $o['nama_opd'] ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
            <?php endif; ?>

            <div class="col-md-3">
                <label class="small fw-bold text-muted">Tanggal Rekap</label>
                <input type="date" name="tanggal" class="form-control form-control-sm shadow-none" value="<?= $tanggal ?>">
            </div>

            <div class="col-md-2">
                <button type="submit" class="btn btn-primary btn-sm w-100 shadow-sm">
                    <i class="fas fa-search me-1"></i> Tampilkan
                </button>
            </div>

            <div class="col-md-2">
                <button type="button" onclick="generatePDF()" class="btn btn-danger btn-sm w-100 shadow-sm">
                    <i class="fas fa-file-pdf me-1"></i> Cetak PDF
                </button>
            </div>
        </form>
    </div>
</div>

<?php if (!empty($selected_opd)): ?>
    <?php if (!empty($rekap)): ?>
        <div class="card border-0 shadow-sm overflow-hidden">
            <div class="table-responsive">
                <table class="table table-bordered table-sm text-center small align-middle mb-0" id="tabelRekap" style="font-size: 0.75rem;">
                    <thead class="bg-dark text-white">
                        <tr>
                            <th rowspan="2" width="30" class="align-middle border-0">No</th>
                            <th rowspan="2" class="align-middle text-start ps-3 border-0" style="min-width: 200px;">Nama Pegawai / NIP</th>
                            <th colspan="3" class="bg-primary py-2 border-0">Waktu Presensi (Harian)</th>
                            <th rowspan="2" class="align-middle bg-secondary border-0 text-white" style="min-width: 130px;">Status Penilaian</th>
                        </tr>
                        <tr>
                            <th width="80" class="bg-light text-dark border-0">Masuk</th>
                            <th width="80" class="bg-light text-dark border-0">Siang</th>
                            <th width="80" class="bg-light text-dark border-0">Pulang</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $no = 1; foreach ($rekap as $r): ?>
                            <tr>
                                <td class="text-muted"><?= $no++ ?></td>
                                <td class="text-start ps-3">
                                    <div class="fw-bold text-dark"><?= $r['nama_lengkap'] ?></div>
                                    <div class="text-muted" style="font-size: 0.65rem;">NIP. <?= $r['nip'] ?></div>
                                    <div class="text-primary fw-bold" style="font-size: 0.6rem;"><?= $r['nama_opd'] ?></div>
                                    
                                    <div class="mt-1">
                                        <span class="badge bg-light text-dark border border-secondary border-opacity-25 rounded-pill" style="font-size: 0.55rem; padding: 3px 8px;">
                                            <i class="fas fa-business-time text-warning me-1"></i> <?= $r['nama_shift'] ?>
                                        </span>
                                    </div>
                                </td>

                                <td class="<?= ($r['jam_masuk_aktual']) ? 'fw-bold text-dark' : 'text-muted' ?>">
                                    <?= ($r['jam_masuk_aktual']) ? date('H:i', strtotime($r['jam_masuk_aktual'])) : '--:--' ?>
                                </td>

                                <td class="text-muted">
                                    <?= ($r['jam_siang']) ? date('H:i', strtotime($r['jam_siang'])) : '--:--' ?>
                                </td>

                                <td class="<?= ($r['jam_pulang_aktual']) ? 'fw-bold text-dark' : 'text-muted' ?>">
                                    <?= ($r['jam_pulang_aktual']) ? date('H:i', strtotime($r['jam_pulang_aktual'])) : '--:--' ?>
                                </td>

                                <td>
                                    <?php 
                                        $lbl_m = strtolower($r['status_label'] ?? '');
                                        $is_absen_khusus = (strpos($lbl_m, 'izin') !== false || strpos($lbl_m, 'sakit') !== false || strpos($lbl_m, 'luar') !== false || strpos($lbl_m, 'cuti') !== false);
                                        
                                        $cls_m = 'bg-st-default';
                                        if (strpos($lbl_m, 'istimewa') !== false || strpos($lbl_m, 'sangat baik') !== false) $cls_m = 'bg-st-istimewa';
                                        elseif ($lbl_m == 'baik') $cls_m = 'bg-st-baik';
                                        elseif (strpos($lbl_m, 'cukup') !== false) $cls_m = 'bg-st-cukup';
                                        elseif (strpos($lbl_m, 'terlambat') !== false) $cls_m = 'bg-st-telat';
                                        elseif (strpos($lbl_m, 'pembinaan') !== false) $cls_m = 'bg-st-bina';
                                        elseif (strpos($lbl_m, 'teguran') !== false) $cls_m = 'bg-st-teguran';
                                        elseif (strpos($lbl_m, 'apel') !== false) $cls_m = 'bg-st-apel';
                                        elseif ($is_absen_khusus) $cls_m = 'bg-st-izin';

                                        $lbl_p = strtolower($r['status_pulang_label'] ?? '');
                                        $cls_p = 'bg-st-default';
                                        if ($lbl_p == 'cepat pulang') $cls_p = 'bg-st-cepul';
                                        elseif ($lbl_p == 'selesai') $cls_p = 'bg-st-selesai';
                                    ?>

                                    <?php if(empty($r['status_pulang_label']) || $is_absen_khusus): ?>
                                        <span class="badge <?= $cls_m ?> rounded-pill shadow-sm" style="font-size: 0.6rem; width: 100%; padding: 6px 0; white-space: normal;">
                                            <?= strtoupper($r['status_label']) ?>
                                        </span>
                                    <?php else: ?>
                                        <div class="d-flex flex-column gap-1">
                                            <span class="badge <?= $cls_m ?> rounded-pill shadow-sm" style="font-size: 0.6rem; width: 100%; padding: 4px 0;">
                                                M: <?= $r['status_label'] ?>
                                            </span>
                                            <span class="badge <?= $cls_p ?> rounded-pill shadow-sm" style="font-size: 0.6rem; width: 100%; padding: 4px 0;">
                                                P: <?= $r['status_pulang_label'] ?>
                                            </span>
                                        </div>
                                    <?php endif; ?>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    <?php else: ?>
        <div class="alert alert-warning border-0 shadow-sm text-center py-4">
            <i class="fas fa-exclamation-triangle me-2"></i> Tidak ada data presensi ditemukan untuk parameter ini.
        </div>
    <?php endif; ?>
<?php else: ?>
    <div class="card border-0 shadow-sm text-center py-5">
        <div class="card-body">
            <i class="fas fa-search text-light mb-3" style="font-size: 3rem;"></i>
            <h6 class="fw-bold">Siap Menampilkan Data</h6>
            <p class="text-muted small">Pilih <b>Unit Kerja</b> dan <b>Tanggal</b> di atas, lalu klik <b>Tampilkan</b> untuk menarik data.</p>
        </div>
    </div>
<?php endif; ?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.25/jspdf.plugin.autotable.min.js"></script>

<script>
    function generatePDF() {
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF('p', 'mm', 'a4'); 
        let judul = "REKAP HARIAN PRESENSI";
        let tanggal = "<?= date('d-m-Y', strtotime($tanggal)) ?>";

        doc.setFontSize(14);
        doc.text(judul, 105, 15, { align: "center" });
        doc.setFontSize(10);
        doc.text(`Tanggal: ${tanggal} | PT. Multimayaka`, 105, 22, { align: "center" });

        doc.autoTable({
            html: '#tabelRekap',
            startY: 30,
            theme: 'grid',
            styles: {
                fontSize: 7,
                halign: 'center',
                valign: 'middle'
            },
            headStyles: {
                fillColor: [33, 37, 41],
                textColor: [255, 255, 255]
            },
            columnStyles: {
                1: { halign: 'left' }
            },
            margin: { top: 30 }
        });

        doc.save(`Rekap_Harian_${tanggal}.pdf`);
    }
</script>
<?= $this->endSection() ?>