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

<style>
    /* 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; }

    .custom-table th, .custom-table td { border: 1px solid #dee2e6; padding: 5px 8px; }
    .shadow-xs { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
</style>

<div class="card shadow-sm border-0 mb-4" id="form-filter-area">
    <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-4">
                    <label class="small fw-bold">Filter Rekap Spesifik</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-2">
                <label class="small fw-bold">Bulan</label>
                <select name="bulan" class="form-select form-select-sm shadow-none">
                    <?php for ($m = 1; $m <= 12; $m++): ?>
                        <option value="<?= $m ?>" <?= ($bulan == $m) ? 'selected' : '' ?>>
                            <?= date('F', mktime(0, 0, 0, $m, 10)) ?>
                        </option>
                    <?php endfor; ?>
                </select>
            </div>
            <div class="col-md-2">
                <label class="small fw-bold">Tahun</label>
                <input type="number" name="tahun" class="form-control form-control-sm shadow-none" value="<?= $tahun ?>">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary btn-sm w-100 rounded-pill shadow-sm">
                    <i class="fas fa-search me-1"></i> Tampilkan
                </button>
            </div>
            
            <div class="col-md-2">
                <button type="button" id="btn-download-pdf" onclick="generateDirectPDF()" class="btn btn-danger btn-sm w-100 rounded-pill shadow-sm" <?= empty($rekap) ? 'disabled' : '' ?>>
                    <i class="fas fa-file-pdf me-1"></i> Download PDF
                </button>
            </div>
        </form>
    </div>
</div>

<?php if (!empty($rekap)): ?>
    <div class="laporan-container" id="area-cetak-pdf">
        <?php foreach ($rekap as $pegawai): ?>
            <div class="card card-pegawai mb-5 shadow-sm">
                <div class="header-pegawai bg-light border-bottom p-3 d-flex justify-content-between align-items-center">
                    <div>
                        <span class="fw-bold d-block text-uppercase text-dark"><?= $pegawai['nama'] ?></span>
                        <span class="small text-muted">
                            NIP. <?= $pegawai['nip'] ?> | <?= $pegawai['jabatan'] ?>
                            <?php if(strpos($selected_opd, 'rekap_eselon') !== false): ?>
                                <span class="badge bg-dark ms-1 fw-normal text-white" style="font-size: 0.6rem;"><?= $pegawai['nama_opd'] ?></span>
                            <?php endif; ?>
                        </span>
                    </div>
                    <div class="text-end">
                        <?php 
                        $total_hadir = 0; $total_telat = 0; $total_cuti = 0;
                        foreach($pegawai['harian'] as $h) {
                            $st_cek = strtolower($h['status']);
                            if(strpos($st_cek, 'baik') !== false || strpos($st_cek, 'istimewa') !== false || strpos($st_cek, 'apel') !== false || strpos($st_cek, 'telat') !== false || strpos($st_cek, 'bina') !== false || strpos($st_cek, 'tegur') !== false) {
                                $total_hadir++;
                            }
                            if($h['telat'] > 0) $total_telat++;
                            if(strpos($st_cek, 'cuti') !== false) $total_cuti++;
                        }
                        ?>
                        <div class="d-flex gap-1 print-hide-badges">
                            <span class="badge bg-white text-dark border shadow-xs small">Hadir: <?= $total_hadir ?></span>
                            <span class="badge bg-white text-primary border shadow-xs small">Cuti: <?= $total_cuti ?></span>
                            <span class="badge bg-white text-danger border shadow-xs small">Telat: <?= $total_telat ?>x</span>
                        </div>
                    </div>
                </div>

                <div class="table-responsive p-0 m-0">
                    <table class="table table-bordered table-sm small align-middle mb-0 text-center custom-table" style="font-size: 0.75rem;">
                        <thead class="bg-secondary text-white small text-uppercase">
                            <tr>
                                <th width="12%">Tgl</th>
                                <th width="15%">Masuk</th>
                                <th width="15%">Siang</th>
                                <th width="15%">Pulang</th>
                                <th width="10%">Telat</th>
                                <th width="33%">Keterangan / Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($pegawai['harian'] as $h): ?>
                                <?php 
                                    $st_lower = strtolower($h['status']);
                                    $is_libur = (strpos($st_lower, 'libur') !== false || strpos($st_lower, 'minggu') !== false);
                                    $is_cuti  = (strpos($st_lower, 'cuti') !== false);
                                    
                                    $row_style = '';
                                    if ($is_libur) $row_style = 'background-color: #f8f9fa;';
                                    if ($is_cuti)  $row_style = 'background-color: #f0f7ff;'; 
                                    
                                    $cls_m = 'bg-st-default';
                                    if (strpos($st_lower, 'istimewa') !== false || $st_lower == 'sangat baik') $cls_m = 'bg-st-istimewa';
                                    elseif ($st_lower == 'baik') $cls_m = 'bg-st-baik';
                                    elseif (strpos($st_lower, 'cukup') !== false) $cls_m = 'bg-st-cukup';
                                    elseif (strpos($st_lower, 'terlambat') !== false) $cls_m = 'bg-st-telat';
                                    elseif (strpos($st_lower, 'pembinaan') !== false) $cls_m = 'bg-st-bina';
                                    elseif (strpos($st_lower, 'teguran') !== false) $cls_m = 'bg-st-teguran';
                                    elseif (strpos($st_lower, 'apel') !== false) $cls_m = 'bg-st-apel';
                                    elseif (strpos($st_lower, 'izin') !== false || strpos($st_lower, 'sakit') !== false || strpos($st_lower, 'luar') !== false) $cls_m = 'bg-st-izin';
                                    elseif ($is_libur) $cls_m = 'text-muted border';
                                    elseif ($is_cuti) $cls_m = 'text-primary border border-primary';

                                    $lbl_p = strtolower($h['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';
                                ?>
                                <tr style="<?= $row_style ?>">
                                    <td class="text-start ps-2 fw-bold">
                                        <?= date('d', strtotime($h['tanggal'])) ?>
                                        <span class="text-muted fw-normal ms-1" style="font-size: 0.65rem;"><?= substr($h['hari'], 0, 3) ?></span>
                                        
                                        <div class="mt-1 d-block">
                                            <span class="badge bg-light text-dark border border-secondary border-opacity-25" style="font-size: 0.55rem; padding: 3px 6px;">
                                                <?= $h['nama_shift'] ?>
                                            </span>
                                        </div>
                                    </td>
                                    
                                    <td class="<?= ($h['masuk'] != '-') ? 'fw-bold text-dark' : 'text-muted' ?>"><?= $h['masuk'] ?></td>
                                    <td class="<?= ($h['siang'] != '-') ? 'fw-bold text-dark' : 'text-muted' ?>" style="<?= ($h['siang'] != '-') ? 'background-color: rgba(255, 251, 239, 0.5);' : '' ?>">
                                        <?= $h['siang'] ?>
                                    </td>
                                    <td class="<?= ($h['pulang'] != '-') ? 'fw-bold text-dark' : 'text-muted' ?>"><?= $h['pulang'] ?></td>
                                    
                                    <td>
                                        <?php if ($h['telat'] > 0): ?>
                                            <span class="text-danger fw-bold small">+<?= $h['telat'] ?>m</span>
                                        <?php else: ?>
                                            <span class="text-muted">-</span>
                                        <?php endif; ?>
                                    </td>
                                    
                                    <td>
                                        <?php if(empty($h['status_pulang_label']) || $is_libur || $is_cuti): ?>
                                            <span class="badge <?= $cls_m ?> rounded-pill shadow-sm" style="font-size: 0.6rem; width: 100%; padding: 6px 0; white-space: normal;">
                                                <?= strtoupper($h['status']) ?>
                                            </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: <?= $h['status'] ?>
                                                </span>
                                                <span class="badge <?= $cls_p ?> rounded-pill shadow-sm" style="font-size: 0.6rem; width: 100%; padding: 4px 0;">
                                                    P: <?= $h['status_pulang_label'] ?>
                                                </span>
                                            </div>
                                        <?php endif; ?>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
<?php else: ?>
    <div class="card border-0 shadow-sm text-center p-5 mt-4">
        <div class="card-body">
            <i class="fas fa-file-invoice text-light mb-3" style="font-size: 4rem;"></i>
            <h6 class="fw-bold">Belum Ada Data Rekap</h6>
            <p class="text-muted small">Silakan pilih Instansi dan Periode Bulan untuk menarik laporan.</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 src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    function generateDirectPDF() {
        const btn = document.getElementById('btn-download-pdf');
        const originalContent = btn.innerHTML;
        
        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Sedang Membuat PDF...';
        btn.disabled = true;

        setTimeout(() => {
            try {
                const { jsPDF } = window.jspdf;
                const doc = new jsPDF('p', 'mm', 'a4');
                let finalY = 15;

                // 1. KOP SURAT
                doc.setFontSize(14);
                doc.setFont("helvetica", "bold");
                doc.text("PT. MULTIMAYAKA", 105, finalY, { align: "center" });
                finalY += 6;

                let judul = "LAPORAN PRESENSI & CUTI PEGAWAI";
                <?php if(strpos($selected_opd, 'rekap_eselon') !== false): ?>
                    judul = "LAPORAN PRESENSI KARYAWAN <?= strtoupper(str_replace('rekap_', '', $selected_opd)) ?>";
                <?php endif; ?>

                doc.setFontSize(12);
                doc.text(judul, 105, finalY, { align: "center" });
                finalY += 5;

                doc.setFontSize(10);
                doc.setFont("helvetica", "normal");
                doc.text("Periode: <?= date('F Y', mktime(0, 0, 0, $bulan, 1, $tahun)) ?>", 105, finalY, { align: "center" });
                finalY += 10;

                doc.setLineWidth(0.5);
                doc.line(14, finalY, 196, finalY);
                finalY += 10;

                // 2. DATA PHP -> JAVASCRIPT
                const rekapData = <?= json_encode($rekap ?? []) ?>;

                // 3. LOOPING TABEL PER PEGAWAI
                rekapData.forEach((pegawai) => {
                    // Jika ruang tidak cukup untuk header pegawai, buat halaman baru
                    if (finalY > 250) {
                        doc.addPage();
                        finalY = 15;
                    }

                    // Tulis Header Nama Pegawai
                    doc.setFontSize(10);
                    doc.setFont("helvetica", "bold");
                    doc.text(pegawai.nama.toUpperCase(), 14, finalY);
                    finalY += 5;

                    doc.setFontSize(9);
                    doc.setFont("helvetica", "normal");
                    doc.text(`NIP. ${pegawai.nip} | ${pegawai.jabatan} | ${pegawai.nama_opd}`, 14, finalY);

                    // Hitung Rekap Singkat (Hadir, Cuti, Telat)
                    let hadir = 0, telat = 0, cuti = 0;
                    pegawai.harian.forEach(h => {
                        let st = h.status.toLowerCase();
                        if(st.includes('baik') || st.includes('istimewa') || st.includes('apel') || st.includes('telat') || st.includes('bina') || st.includes('tegur')) hadir++;
                        if(h.telat > 0) telat++;
                        if(st.includes('cuti')) cuti++;
                    });

                    doc.setFont("helvetica", "bold");
                    doc.text(`Hadir: ${hadir} | Cuti: ${cuti} | Telat: ${telat}x`, 196, finalY, { align: "right" });
                    finalY += 4;

                    // Siapkan Data Baris (Rows)
                    let tableBody = [];
                    pegawai.harian.forEach(h => {
                        let tglCol = h.tanggal.split('-')[2] + ' ' + h.hari.substring(0,3) + (h.nama_shift ? `\n(${h.nama_shift})` : '');
                        let telatTxt = h.telat > 0 ? `+${h.telat}m` : '-';
                        
                        let ketStatus = h.status.toUpperCase();
                        if(h.status_pulang_label && h.status_pulang_label !== 'Belum Absen' && !ketStatus.includes('LIBUR') && !ketStatus.includes('CUTI') && !ketStatus.includes('IZIN') && !ketStatus.includes('SAKIT')) {
                            ketStatus = `M: ${h.status}\nP: ${h.status_pulang_label}`;
                        }

                        tableBody.push([ tglCol, h.masuk, h.siang, h.pulang, telatTxt, ketStatus ]);
                    });

                    // Gambar Tabel
                    doc.autoTable({
                        startY: finalY,
                        head: [['Tgl', 'Masuk', 'Siang', 'Pulang', 'Telat', 'Keterangan / Status']],
                        body: tableBody,
                        theme: 'grid',
                        styles: { fontSize: 7, halign: 'center', valign: 'middle' },
                        headStyles: { fillColor: [108, 117, 125], textColor: [255, 255, 255] },
                        columnStyles: {
                            0: { halign: 'left', cellWidth: 22 },
                            5: { halign: 'left' }
                        },
                        didDrawPage: function (data) {
                            finalY = data.cursor.y + 12; // Jarak antar pegawai
                        }
                    });
                });

                // 4. TANDA TANGAN (Halaman Terakhir)
                if (finalY > 230) { doc.addPage(); finalY = 20; }
                
                doc.setFontSize(10);
                doc.setFont("helvetica", "normal");
                doc.text("Polewali, <?= date('d F Y') ?>", 145, finalY); finalY += 5;
                doc.text("Mengetahui,", 145, finalY); finalY += 5;

                doc.setFont("helvetica", "bold");
                <?php
                    $ttd_jabatan = "Kepala OPD / Pimpinan";
                    if($selected_opd == 'rekap_eselon_2') $ttd_jabatan = "Bupati / Sekretaris Daerah";
                    elseif($selected_opd == 'rekap_eselon_3') $ttd_jabatan = "Sekretaris Daerah / Asisten";
                    elseif($selected_opd == 'rekap_eselon_4') $ttd_jabatan = "Kepala OPD";
                ?>
                doc.text("<?= $ttd_jabatan ?>", 145, finalY);

                finalY += 25;
                doc.text("( ........................................... )", 145, finalY); finalY += 5;
                doc.setFont("helvetica", "normal");
                doc.text("NIP. ...........................................", 145, finalY);

                // 5. EKSEKUSI DOWNLOAD
                let fileName = 'Rekap_Presensi_<?= date('F_Y', mktime(0, 0, 0, $bulan, 1, $tahun)) ?>.pdf';
                doc.save(fileName);

                btn.innerHTML = originalContent;
                btn.disabled = false;
            } catch (err) {
                console.error(err);
                btn.innerHTML = originalContent;
                btn.disabled = false;
                Swal.fire('Error', 'Terjadi kesalahan saat membuat PDF.', 'error');
            }
        }, 100); // Beri jeda 100ms agar efek loading pada tombol terlihat
    }
</script>

<?= $this->endSection() ?>