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

<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') == 'kabupaten' || session()->get('level') == 'Superadmin'): ?>
                <div class="col-md-4">
                    <label class="small fw-bold">Pilih Unit Kerja (OPD)</label>
                    <select name="id_opd" class="form-select form-select-sm border-primary 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" data-bs-toggle="modal" data-bs-target="#modalCetakPDF" class="btn btn-danger btn-sm w-100 rounded-pill shadow-sm" <?= empty($pegawai) ? 'disabled' : '' ?>>
                    <i class="fas fa-file-pdf me-1"></i> Cetak PDF
                </button>
            </div>
        </form>
    </div>
</div>

<?php if (!empty($pegawai)): ?>
    <div class="card border-0 shadow-sm overflow-hidden">
        <div class="table-responsive">
            <table id="tabel-tpp" class="table table-sm table-bordered text-center align-middle mb-0" style="font-size: 0.65rem; border-color: #dee2e6;">
                <thead class="bg-light text-dark fw-bold">
                    <tr>
                        <th rowspan="3" style="vertical-align: middle;">NO</th>
                        <th rowspan="3" style="vertical-align: middle;" width="180">NAMA / NIP</th>
                        <th rowspan="3" style="vertical-align: middle;" width="120">JABATAN</th>
                        <th colspan="14" class="bg-warning bg-opacity-10 text-warning-emphasis">FREKUENSI PELANGGARAN / IZIN</th>
                        <th colspan="15" class="bg-danger bg-opacity-10 text-danger-emphasis">PERHITUNGAN POTONGAN TPP (%)</th>
                        <th rowspan="3" style="vertical-align: middle;" class="bg-primary text-white">TOTAL<br>POT (%)</th>
                    </tr>
                    <tr>
                        <th colspan="4">Terlambat (Tb)</th>
                        <th colspan="4">Pulang Cepat (PC)</th>
                        <th rowspan="2" class="bg-info bg-opacity-10">C</th>
                        <th rowspan="2">I</th>
                        <th rowspan="2">A</th>
                        <th rowspan="2">S</th>
                        <th rowspan="2">DL</th>
                        <th rowspan="2">TB</th>
                        
                        <th colspan="4">Tb (%)</th>
                        <th colspan="4">PC (%)</th>
                        <th colspan="7">Lainnya (%)</th>
                    </tr>
                    <tr>
                        <th>P1</th><th>P2</th><th>P3</th><th>P4</th>
                        <th>P1</th><th>P2</th><th>P3</th><th>P4</th>
                        
                        <th>0.5</th><th>1</th><th>1.25</th><th>1.5</th>
                        <th>0.5</th><th>1</th><th>1.25</th><th>1.5</th>
                        
                        <th>C</th><th>I</th><th>A</th><th>S</th><th>DL</th><th>TB</th><th>SUM</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $no=1; foreach($pegawai as $p): ?>
                    <tr>
                        <td class="bg-light"><?= $no++ ?></td>
                        <td class="text-start ps-2">
                            <span class="fw-bold d-block text-dark"><?= $p['nama'] ?></span>
                            <span class="text-muted" style="font-size: 0.6rem;"><?= $p['nip'] ?></span>
                        </td>
                        <td class="text-start small"><?= $p['jab'] ?></td>
                        
                        <td><?= $p['p1'] ?: '-' ?></td>
                        <td><?= $p['p2'] ?: '-' ?></td>
                        <td><?= $p['p3'] ?: '-' ?></td>
                        <td><?= $p['p4'] ?: '-' ?></td>
                        
                        <td><?= $p['pc1'] ?: '-' ?></td>
                        <td><?= $p['pc2'] ?: '-' ?></td>
                        <td><?= $p['pc3'] ?: '-' ?></td>
                        <td><?= $p['pc4'] ?: '-' ?></td>

                        <td class="bg-info bg-opacity-10 fw-bold"><?= $p['c'] ?: '-' ?></td> <td><?= $p['i'] ?: '-' ?></td>
                        <td><?= $p['a'] ?: '-' ?></td>
                        <td><?= $p['s'] ?: '-' ?></td>
                        <td><?= $p['dl'] ?: '-' ?></td>
                        <td>0</td>

                        <td class="bg-light text-muted small"><?= ($p['p1'] > 0) ? ($p['p1']*0.5) : '' ?></td>
                        <td class="bg-light text-muted small"><?= ($p['p2'] > 0) ? ($p['p2']*1) : '' ?></td>
                        <td class="bg-light text-muted small"><?= ($p['p3'] > 0) ? ($p['p3']*1.25) : '' ?></td>
                        <td class="bg-light text-muted small"><?= ($p['p4'] > 0) ? ($p['p4']*1.5) : '' ?></td>

                        <td class="bg-light text-muted small"><?= ($p['pc1'] > 0) ? ($p['pc1']*0.5) : '' ?></td>
                        <td class="bg-light text-muted small"><?= ($p['pc2'] > 0) ? ($p['pc2']*1) : '' ?></td>
                        <td class="bg-light text-muted small"><?= ($p['pc3'] > 0) ? ($p['pc3']*1.25) : '' ?></td>
                        <td class="bg-light text-muted small"><?= ($p['pc4'] > 0) ? ($p['pc4']*1.5) : '' ?></td>

                        <td class="bg-light text-muted small"><?= ($p['c'] > 0) ? '0' : '' ?></td>
                        <td class="bg-light text-muted small"><?= ($p['i'] > 0) ? ($p['i']*2) : '' ?></td>
                        <td class="bg-light text-muted small"><?= ($p['a'] > 0) ? ($p['a']*5) : '' ?></td>
                        <td class="bg-light text-muted small">0</td>
                        <td class="bg-light text-muted small">0</td>
                        <td class="bg-light text-muted small">0</td>
                        <td class="bg-light text-muted fw-bold"><?= $p['total_persen'] ?></td>

                        <td class="fw-bold text-white bg-danger"><?= $p['total_persen'] ?>%</td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
<?php else: ?>
    <div class="card border-0 shadow-sm text-center p-5">
        <i class="fas fa-file-invoice-dollar fa-3x text-light mb-3"></i>
        <h6 class="fw-bold text-muted">Silakan pilih OPD untuk kalkulasi TPP</h6>
    </div>
<?php endif; ?>

<div class="modal fade" id="modalCetakPDF" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-danger text-white border-0">
                <h6 class="modal-title fw-bold"><i class="fas fa-print me-2"></i>Konfigurasi Penandatangan</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <form id="formCetak">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="small fw-bold mb-1">Tempat</label>
                            <input type="text" id="inputTempat" class="form-control form-control-sm shadow-none" value="Polewali">
                        </div>
                        <div class="col-md-6">
                            <label class="small fw-bold mb-1">Tanggal Cetak</label>
                            <input type="date" id="inputTanggal" class="form-control form-control-sm shadow-none" value="<?= date('Y-m-d') ?>">
                        </div>
                        <div class="col-12">
                            <label class="small fw-bold mb-1">Jabatan Penandatangan</label>
                            <input type="text" id="inputJabatan" class="form-control form-control-sm shadow-none" value="Kepala OPD / Unit Kerja">
                        </div>
                        <div class="col-12">
                            <label class="small fw-bold mb-1">Nama Pejabat</label>
                            <input type="text" id="inputNamaPejabat" class="form-control form-control-sm shadow-none" placeholder="Masukkan nama lengkap...">
                        </div>
                        <div class="col-12">
                            <label class="small fw-bold mb-1">NIP Pejabat</label>
                            <input type="text" id="inputNipPejabat" class="form-control form-control-sm shadow-none" placeholder="Masukkan NIP...">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer border-0 bg-light">
                <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Batal</button>
                <button type="button" onclick="generatePDF()" class="btn btn-danger rounded-pill px-4 fw-bold">
                    <i class="fas fa-file-download me-1"></i> Download PDF
                </button>
            </div>
        </div>
    </div>
</div>

<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 tempat = document.getElementById('inputTempat').value || 'Polewali';
    const tglInput = document.getElementById('inputTanggal').value;
    const jabatan = document.getElementById('inputJabatan').value;
    const namaPejabat = document.getElementById('inputNamaPejabat').value;
    const nipPejabat = document.getElementById('inputNipPejabat').value;

    const dateObj = new Date(tglInput);
    const tanggalIndo = dateObj.toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' });

    const modalEl = document.getElementById('modalCetakPDF');
    const modal = bootstrap.Modal.getInstance(modalEl);
    modal.hide();

    const { jsPDF } = window.jspdf;
    const doc = new jsPDF('l', 'mm', [330, 215]); // Ukuran F4 Landscape

    doc.setFontSize(12); doc.setFont("helvetica", "bold");
    doc.text("TABEL PERHITUNGAN KETAATAN JAM KERJA & POTONGAN TPP", 165, 12, { align: "center" });
    
    doc.setFontSize(9); doc.setFont("helvetica", "normal");
    doc.text("UNIT KERJA: <?= strtoupper($nama_opd) ?>", 165, 18, { align: "center" });
    doc.text("PERIODE: <?= strtoupper(date('F', mktime(0,0,0,$bulan,10))) ?> <?= $tahun ?>", 165, 23, { align: "center" });

    doc.autoTable({
        html: '#tabel-tpp',
        startY: 30,
        theme: 'grid',
        styles: { fontSize: 5.5, cellPadding: 0.8, halign: 'center', valign: 'middle', lineColor: [0, 0, 0], lineWidth: 0.1 },
        headStyles: { fillColor: [240, 240, 240], textColor: [0, 0, 0], fontStyle: 'bold' },
        columnStyles: { 
            1: { halign: 'left', cellWidth: 35 }, 
            2: { halign: 'left', cellWidth: 30 },
            33: { fillColor: [255, 200, 200], fontStyle: 'bold' } 
        }
    });

    let finalY = doc.lastAutoTable.finalY + 10;
    if (finalY > 170) { doc.addPage(); finalY = 20; }

    doc.setFontSize(9);
    doc.text(`${tempat}, ${tanggalIndo}`, 280, finalY, { align: "center" });
    doc.text("Mengetahui,", 280, finalY + 5, { align: "center" });
    doc.text(jabatan + ",", 280, finalY + 10, { align: "center" });
    
    const namaText = namaPejabat ? `( ${namaPejabat} )` : "( ........................................................ )";
    const nipText = nipPejabat ? `NIP. ${nipPejabat}` : "NIP. ........................................................";

    doc.setFont("helvetica", "bold");
    doc.text(namaText, 280, finalY + 30, { align: "center" });
    doc.setFont("helvetica", "normal");
    doc.text(nipText, 280, finalY + 35, { align: "center" });

    doc.save("Laporan_TPP_<?= str_replace(' ', '_', $nama_opd) ?>_<?= $bulan ?>_<?= $tahun ?>.pdf");
}
</script>

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