<?= $this->extend('layouts/owner') ?> 
<?= $this->section('content') ?> 

<script src="https://cdn.tailwindcss.com"></script> 
<script> 
    tailwind.config = { 
        darkMode: 'class', 
        theme: { 
            extend: { 
                colors: { 
                    slate: { 
                        950: '#0b1329' 
                    } 
                } 
            } 
        } 
    } 
</script> 

<!-- Bootstrap 5 CSS for grid framework and core layout spacing --> 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> 
<!-- Fonts & Dynamic Icon Packages --> 
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 

<style> 
body { 
    font-family: 'Inter', sans-serif !important; 
    background-color: #f8fafc; 
    transition: background-color 0.3s ease, color 0.3s ease; 
} 
/* Premium card properties with micro-interactions */ 
.metric-card-premium { 
    background: #ffffff; 
    border: 1px solid rgba(226, 232, 240, 0.8); 
    border-radius: 1.25rem; 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
} 
.metric-card-premium:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.04); 
    border-color: rgba(99, 102, 241, 0.3); 
} 
/* Soft Glow Badges */ 
.badge-paid-glow { 
    background-color: rgba(16, 185, 129, 0.1); 
    color: #10b981; 
    border: 1px solid rgba(16, 185, 129, 0.2); 
} 
.badge-pending-glow { 
    background-color: rgba(245, 158, 11, 0.1); 
    color: #f59e0b; 
    border: 1px solid rgba(245, 158, 11, 0.2); 
} 
/* Webkit custom scrollbar adjustment */ 
::-webkit-scrollbar { width: 6px; height: 6px; } 
::-webkit-scrollbar-track { background: #f1f5f9; } 
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } 
/* Dark Mode Core Theme Overrides */ 
html.dark body { background-color: #0b1329 !important; color: #f8fafc !important; } 
html.dark .card, html.dark .metric-card-premium, html.dark .table-container { 
    background-color: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; 
} 
html.dark .text-slate-900, html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5 { color: #f8fafc !important; } 
html.dark .text-slate-500, html.dark .text-muted, html.dark .text-slate-400 { color: #94a3b8 !important; } 
html.dark .bg-white { background-color: #1e293b !important; } 
html.dark .border, html.dark .border-bottom { border-color: #334155 !important; } 
html.dark .bg-slate-50 { background-color: #111a2e !important; } 
html.dark .table-hover tbody tr:hover { background-color: #111b30 !important; } 
html.dark .badge-paid-glow { background-color: rgba(16, 185, 129, 0.15); color: #34d399; border-color: rgba(16, 185, 129, 0.3); } 
html.dark .badge-pending-glow { background-color: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: rgba(245, 158, 11, 0.3); } 
</style> 

<div class="container-fluid py-4 px-3 sm:px-4 lg:px-6"> 
    
    <!-- Flash Alert Handler with custom clean animations --> 
    <?php if(session()->getFlashdata('success')): ?> 
    <div id="flashAlert" class="mb-4 p-4 rounded-xl border border-emerald-200 bg-emerald-50 dark:bg-emerald-950/30 dark:border-emerald-800/50 text-emerald-800 dark:text-emerald-400 flex justify-between items-center shadow-xs animate-fade-in"> 
        <span class="text-sm font-semibold flex items-center gap-2"> 
            <i class="fas fa-circle-check text-emerald-600 dark:text-emerald-400"></i> <?= session()->getFlashdata('success') ?> 
        </span> 
        <button onclick="document.getElementById('flashAlert').style.display='none';" class="text-emerald-800 dark:text-emerald-400 opacity-60 hover:opacity-100"> 
            <i class="fas fa-times"></i> 
        </button> 
    </div> 
    <?php endif; ?> 
    
    <?php if(session()->getFlashdata('error')): ?> 
    <div id="flashError" class="mb-4 p-4 rounded-xl border border-rose-200 bg-rose-50 dark:bg-rose-950/30 dark:border-rose-800/50 text-rose-800 dark:text-rose-400 flex justify-between items-center shadow-xs animate-fade-in"> 
        <span class="text-sm font-semibold flex items-center gap-2"> 
            <i class="fas fa-triangle-exclamation text-rose-600 dark:text-rose-400"></i> <?= session()->getFlashdata('error') ?> 
        </span> 
        <button onclick="document.getElementById('flashError').style.display='none';" class="text-rose-800 dark:text-rose-400 opacity-60 hover:opacity-100"> 
            <i class="fas fa-times"></i> 
        </button> 
    </div> 
    <?php endif; ?>

    <!-- Header Section with Responsive Control Deck --> 
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6 pb-6 border-b border-slate-200 dark:border-slate-700"> 
        <div> 
            <div class="flex items-center gap-2 mb-2"> 
                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-indigo-50 text-indigo-700 dark:bg-indigo-950/30 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-800/50 shadow-sm"> 
                    <span class="w-2 h-2 rounded-full bg-indigo-600 animate-pulse"></span> Manajemen SDM & Keuangan Karyawan 
                </span> 
            </div> 
            <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight flex items-center gap-2"> 
                <i class="fas fa-money-check-dollar text-indigo-600 dark:text-indigo-400"></i> Penggajian Karyawan 
            </h1> 
            <p class="text-sm text-slate-500 mt-1">Kelola pencatatan slip gaji berkala, alokasi bonus, pengaman potongan kasir, serta verifikasi lunas pegawai.</p> 
        </div> 
        <!-- Utility Action Buttons --> 
        <div class="flex flex-wrap items-center gap-2 w-full md:w-auto justify-end"> 
            <!-- Theme Changer Switch Button --> 
            <button type="button" onclick="toggleDarkMode()" class="bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-slate-600 rounded-xl p-2.5 shadow-sm transition-all flex items-center justify-center" title="Ubah Tema Gelap/Terang"> 
                <i id="themeIcon" class="fas fa-moon text-lg"></i> 
            </button> 
            <!-- Excel Export Feature --> 
            <button onclick="exportPayrollExcel()" class="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold text-sm rounded-xl px-4 py-2.5 shadow-sm transition-all flex items-center gap-2 border-0"> 
                <i class="fas fa-file-excel"></i> <span>Ekspor Excel</span> 
            </button> 
            <!-- Add New Payroll Entry Link --> 
            <a href="<?= base_url('owner/payroll/create') ?>" class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm rounded-xl px-4 py-2.5 shadow-md hover:shadow-lg transition-all flex items-center gap-2 decoration-none no-underline"> 
                <i class="fas fa-plus"></i> <span>Tambah Gaji</span> 
            </a> 
        </div> 
    </div> 

    <!-- Dashboard Telemetry Grid --> 
    <div class="row g-4 mb-6"> 
        <!-- Metric Box: Total Realisasi Gaji Terbayar (Lunas) --> 
        <div class="col-12 col-md-4"> 
            <div class="metric-card-premium p-4 flex items-center gap-4 bg-white"> 
                <div class="w-12 h-12 bg-emerald-50 dark:bg-emerald-950/30 text-emerald-600 dark:text-emerald-400 rounded-xl flex items-center justify-center text-xl"> 
                    <i class="fas fa-hand-holding-dollar"></i> 
                </div> 
                <div> 
                    <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block">Realisasi Gaji Terbayar</span> 
                    <h3 id="statTotalPaid" class="text-xl font-extrabold text-emerald-600 mb-0">Rp 0</h3> 
                </div> 
            </div> 
        </div> 
        <!-- Metric Box: Total Komitmen Gaji (Pending) --> 
        <div class="col-12 col-md-4"> 
            <div class="metric-card-premium p-4 flex items-center gap-4 bg-white"> 
                <div class="w-12 h-12 bg-amber-50 dark:bg-amber-950/30 text-amber-600 dark:text-amber-400 rounded-xl flex items-center justify-center text-xl"> 
                    <i class="fas fa-clock-rotate-left"></i> 
                </div> 
                <div> 
                    <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block">Gaji Pending (Belum Bayar)</span> 
                    <h3 id="statTotalPending" class="text-xl font-extrabold text-amber-500 mb-0">Rp 0</h3> 
                </div> 
            </div> 
        </div> 
        <!-- Metric Box: Payroll Slip Frequency --> 
        <div class="col-12 col-md-4"> 
            <div class="metric-card-premium p-4 flex items-center gap-4 bg-white"> 
                <div class="w-12 h-12 bg-indigo-50 dark:bg-indigo-950/30 text-indigo-600 dark:text-indigo-400 rounded-xl flex items-center justify-center text-xl"> 
                    <i class="fas fa-receipt"></i> 
                </div> 
                <div> 
                    <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block">Total Slip Terbit</span> 
                    <h3 id="statTotalSlips" class="text-xl font-extrabold text-slate-900 mb-0">0</h3> 
                </div> 
            </div> 
        </div> 
    </div> 

    <!-- Core Payroll Record Card Table Wrapper --> 
    <div class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden mb-6"> 
        <!-- Live Search Header Control --> 
        <div class="p-4 border-b border-slate-100 dark:border-slate-700 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-slate-50/50 dark:bg-slate-900/30"> 
            <div> 
                <h4 class="text-base font-bold text-slate-900 dark:text-slate-100 flex items-center gap-2"> 
                    <i class="fas fa-list-check text-slate-500"></i> Buku Jurnal Penggajian Karyawan 
                </h4> 
                <p class="text-xs text-slate-500 mt-0.5">Pantau ketertiban rekaman upah bulanan, bonus kinerja, dan potongan kasir internal.</p> 
            </div> 
            <!-- Live Search input --> 
            <div class="relative w-full sm:w-80"> 
                <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"> 
                    <i class="fas fa-magnifying-glass text-slate-400 text-sm"></i> 
                </span> 
                <input type="text" id="payrollSearch" onkeyup="filterPayrollTable()" placeholder="Cari nama pegawai, periode, status..." class="w-full pl-9 pr-4 py-2 text-xs bg-white dark:bg-slate-900 dark:text-slate-100 border border-slate-200 dark:border-slate-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all shadow-xs"> 
            </div> 
        </div> 

        <!-- Responsive Payroll Record Table --> 
        <div class="table-responsive"> 
            <table class="w-full text-left border-collapse" id="payrollTable"> 
                <thead> 
                    <tr class="bg-slate-50 dark:bg-slate-900/50 text-slate-500 dark:text-slate-400 font-bold text-xs uppercase tracking-wider border-b border-slate-200 dark:border-slate-700"> 
                        <th class="py-3.5 px-4 text-center" width="60">No</th> 
                        <th class="py-3.5 px-4">Pegawai</th> 
                        <th class="py-3.5 px-4 text-center" width="130">Periode</th> 
                        <th class="py-3.5 px-4 text-right" width="150">Gaji Pokok</th> 
                        <th class="py-3.5 px-4 text-right" width="130">Bonus</th> 
                        <th class="py-3.5 px-4 text-right" width="130">Potongan</th> 
                        <th class="py-3.5 px-4 text-right" width="165">Total Upah Bersih</th> 
                        <th class="py-3.5 px-4 text-center" width="120">Status</th> 
                        <th class="py-3.5 px-4 text-center" width="280">Aksi</th> 
                    </tr> 
                </thead> 
                <tbody class="text-xs text-slate-600 dark:text-slate-300 divide-y divide-slate-100 dark:divide-slate-700"> 
                    <?php $no = 1; ?> 
                    <?php if(empty($payrolls)): ?> 
                    <!-- Fallback view when empty database occurs --> 
                    <tr> 
                        <td colspan="9" class="py-12 text-center"> 
                            <div class="flex flex-col items-center justify-center text-slate-400"> 
                                <i class="fas fa-money-check text-4xl mb-3 opacity-30"></i> 
                                <span class="text-sm font-semibold">Tidak Ada Data Penggajian</span> 
                                <p class="text-xs text-slate-400 mt-1">Belum ada entri penggajian bulanan terdaftar pada sistem.</p> 
                            </div> 
                        </td> 
                    </tr> 
                    <?php else: ?> 
                    <?php foreach($payrolls as $row): ?> 
                    <?php 
                        $statusRaw = strtolower($row['status'] ?? 'pending'); 
                        $gapok = floatval($row['gaji_pokok'] ?? 0); 
                        $bonus = floatval($row['bonus'] ?? 0); 
                        $potongan = floatval($row['potongan'] ?? 0); 
                        $totalGaji = floatval($row['total_gaji'] ?? ($gapok + $bonus - $potongan)); 
                    ?> 
                    <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-900/10 transition-all payroll-row-element" data-employee="<?= esc(strtolower($row['nama_lengkap'] ?? '')) ?>" data-period="<?= esc(strtolower($row['periode'] ?? '')) ?>" data-status="<?= $statusRaw ?>" data-gapok="<?= $gapok ?>" data-bonus="<?= $bonus ?>" data-potongan="<?= $potongan ?>" data-total="<?= $totalGaji ?>"> 
                        <!-- No. --> 
                        <td class="py-3.5 px-4 text-center font-semibold text-slate-400"><?= $no++ ?></td> 
                        <!-- Pegawai / Nama Lengkap --> 
                        <td class="py-3.5 px-4 font-bold text-slate-850 dark:text-slate-200"> 
                            <?= esc($row['nama_lengkap'] ?? 'Pegawai Tanpa Nama') ?> 
                        </td> 
                        <!-- Periode Bulan Kerja --> 
                       <td class="py-3.5 px-4 text-center font-semibold text-slate-600 dark:text-slate-400"> 
    <?php 
        $rawDate = $row['periode'] ?? '';
        echo (!empty($rawDate) && $rawDate !== '0000-00-00') ? date('M Y', strtotime($rawDate)) : '-';
    ?>
</td>
                        <!-- Gaji Pokok --> 
                        <td class="py-3.5 px-4 text-right font-medium"> 
                            Rp <?= number_format($gapok, 0, ',', '.') ?> 
                        </td> 
                        <!-- Bonus --> 
                        <td class="py-3.5 px-4 text-right text-emerald-600 dark:text-emerald-400 font-medium"> 
                            +Rp <?= number_format($bonus, 0, ',', '.') ?> 
                        </td> 
                        <!-- Potongan --> 
                        <td class="py-3.5 px-4 text-right text-rose-500 font-medium"> 
                            -Rp <?= number_format($potongan, 0, ',', '.') ?> 
                        </td> 
                        <!-- Total Bersih (Take Home Pay) --> 
                        <td class="py-3.5 px-4 text-right font-extrabold text-slate-900 dark:text-slate-100 text-sm"> 
                            Rp <?= number_format($totalGaji, 0, ',', '.') ?> 
                        </td> 
                        <!-- Status Verifikasi Lunas --> 
                        <td class="py-3.5 px-4 text-center"> 
                            <?php if($statusRaw == 'paid'): ?> 
                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-[10px] font-bold badge-paid-glow cursor-default"> 
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Lunas 
                                </span> 
                            <?php else: ?> 
                                <button type="button" onclick="requestSecurePayment('<?= base_url('owner/payroll/pay/'.$row['id_payroll']) ?>', '<?= esc(addslashes($row['nama_lengkap'] ?? 'Pegawai')) ?>', '<?= esc($row['periode'] ?? '') ?>', <?= $totalGaji ?>)" class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-[10px] font-bold badge-pending-glow hover:bg-amber-100 dark:hover:bg-amber-950/40 transition-all cursor-pointer border border-amber-200 dark:border-amber-800" title="Klik Langsung untuk Bayar & Tandai Lunas"> 
                                    <span class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></span> Pending 
                                </button> 
                            <?php endif; ?> 
                        </td> 
                        <!-- Action Buttons --> 
                        <td class="py-3.5 px-4 text-center"> 
                            <div class="flex items-center justify-center gap-1.5"> 
                                <!-- Detail slip --> 
                                <a href="<?= base_url('owner/payroll/detail/'.$row['id_payroll']) ?>" class="btn bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 btn-sm rounded-lg px-2 py-1.5 text-[11px] border-0 transition-colors flex items-center gap-1" title="Lihat Detail"> 
                                    <i class="fas fa-eye text-slate-400"></i> Detail 
                                </a> 
                                <!-- Edit Slip --> 
                                <a href="<?= base_url('owner/payroll/edit/'.$row['id_payroll']) ?>" class="btn bg-amber-50 hover:bg-amber-100 dark:bg-amber-950/20 dark:hover:bg-amber-900/30 text-amber-700 dark:text-amber-400 btn-sm rounded-lg px-2 py-1.5 text-[11px] border-0 transition-colors flex items-center gap-1" title="Edit Data"> 
                                    <i class="fas fa-pen"></i> Edit 
                                </a> 
                                <!-- Direct Payment Verifier (Premium Confirmation popup trigger) --> 
                                <?php if($statusRaw != 'paid'): ?> 
                                <button onclick="requestSecurePayment('<?= base_url('owner/payroll/pay/'.$row['id_payroll']) ?>', '<?= esc(addslashes($row['nama_lengkap'] ?? 'Pegawai')) ?>', '<?= esc($row['periode'] ?? '') ?>', <?= $totalGaji ?>)" class="btn bg-emerald-600 hover:bg-emerald-700 text-white btn-sm rounded-lg px-2.5 py-1.5 text-[11px] border-0 transition-all flex items-center gap-1"> 
                                    <i class="fas fa-circle-check"></i> Bayar 
                                </button> 
                                <?php endif; ?>
                                
                                <!-- Hapus Slip (NEW FEATURE) -->
                                <button onclick="requestSecureDelete('<?= base_url('owner/payroll/delete/'.$row['id_payroll']) ?>', '<?= esc(addslashes($row['nama_lengkap'] ?? 'Pegawai')) ?>', '<?= esc($row['periode'] ?? '') ?>')" class="btn bg-rose-50 hover:bg-rose-100 dark:bg-rose-950/20 dark:hover:bg-rose-900/30 text-rose-600 dark:text-rose-400 btn-sm rounded-lg px-2 py-1.5 text-[11px] border-0 transition-colors flex items-center gap-1" title="Hapus Data">
                                    <i class="fas fa-trash-can"></i> Hapus
                                </button>
                            </div> 
                        </td> 
                    </tr> 
                    <?php endforeach; ?> 
                    <?php endif; ?> 
                </tbody> 
            </table> 
        </div> 
    </div> 
</div> 

<!-- ========================================================================= -->
<!-- MODAL: PREMIUM SECURE PAYMENT VERIFICATION -->
<!-- ========================================================================= -->
<div id="securePayModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/60 backdrop-blur-xs hidden opacity-0 transition-all duration-300"> 
    <div class="bg-white dark:bg-slate-800 rounded-2xl max-w-md w-full overflow-hidden shadow-2xl transform scale-95 transition-transform duration-300 border border-slate-200 dark:border-slate-700"> 
        <div class="h-1.5 bg-emerald-500 w-full"></div> 
        <div class="p-6"> 
            <div class="w-12 h-12 rounded-full bg-emerald-50 dark:bg-emerald-950/30 text-emerald-600 dark:text-emerald-400 flex items-center justify-center text-xl mb-4"> 
                <i class="fas fa-circle-dollar-to-slot"></i> 
            </div> 
            <h3 class="text-lg font-bold text-slate-900 dark:text-slate-100 mb-2">Konfirmasi Pembayaran Gaji</h3> 
            <p class="text-xs text-slate-500 leading-relaxed mb-4"> Anda akan menandai transaksi penggajian berikut sebagai <strong class="text-emerald-600 dark:text-emerald-400">LUNAS (Paid)</strong> secara permanen: </p> 
            <div class="p-3 bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-slate-150 dark:border-slate-800 space-y-1.5 text-xs"> 
                <div class="flex justify-between"> 
                    <span class="text-slate-400">Pegawai:</span> 
                    <span id="modalEmployeeName" class="font-bold text-slate-800 dark:text-slate-200"></span> 
                </div> 
                <div class="flex justify-between"> 
                    <span class="text-slate-400">Periode:</span> 
                    <span id="modalPeriodName" class="font-semibold text-slate-850 dark:text-slate-300"></span> 
                </div> 
                <div class="flex justify-between border-t border-dashed border-slate-200 dark:border-slate-800 pt-1.5 mt-1"> 
                    <span class="text-slate-400 font-medium">Nilai Realisasi Gaji:</span> 
                    <strong id="modalGajiTotal" class="text-emerald-600 dark:text-emerald-400 font-extrabold"></strong> 
                </div> 
            </div> 
        </div> 
        <div class="p-4 bg-slate-50 dark:bg-slate-900/40 border-t border-slate-100 dark:border-slate-700 flex justify-end gap-2"> 
            <button onclick="dismissSecurePayment()" class="px-4 py-2 text-xs font-semibold text-slate-500 dark:text-slate-300 bg-transparent hover:bg-slate-100 dark:hover:bg-slate-700/50 rounded-xl transition-all border-0"> Batalkan </button> 
            <a id="payAnchorConfirm" href="#" class="px-4 py-2 text-xs font-semibold text-white bg-emerald-600 hover:bg-emerald-700 rounded-xl shadow-sm transition-all text-center decoration-none no-underline flex items-center"> Ya, Konfirmasi Bayar </a> 
        </div> 
    </div> 
</div> 

<!-- ========================================================================= -->
<!-- MODAL: PREMIUM SECURE DELETE CONFIRMATION -->
<!-- ========================================================================= -->
<div id="secureDeleteModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/60 backdrop-blur-xs hidden opacity-0 transition-all duration-300"> 
    <div class="bg-white dark:bg-slate-800 rounded-2xl max-w-md w-full overflow-hidden shadow-2xl transform scale-95 transition-transform duration-300 border border-slate-200 dark:border-slate-700"> 
        <!-- Rose danger top alert accent -->
        <div class="h-1.5 bg-rose-500 w-full"></div> 
        <div class="p-6"> 
            <div class="w-12 h-12 rounded-full bg-rose-50 dark:bg-rose-950/30 text-rose-600 dark:text-rose-400 flex items-center justify-center text-xl mb-4"> 
                <i class="fas fa-triangle-exclamation"></i> 
            </div> 
            <h3 class="text-lg font-bold text-slate-900 dark:text-slate-100 mb-2">Hapus Data Penggajian?</h3> 
            <p class="text-xs text-slate-500 leading-relaxed mb-4"> 
                Anda yakin ingin menghapus data penggajian ini secara <strong class="text-rose-600 dark:text-rose-400">permanen</strong>? Data yang dihapus tidak dapat dikembalikan.
            </p> 
            <!-- Transaction details card --> 
            <div class="p-3 bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-slate-150 dark:border-slate-800 space-y-1.5 text-xs"> 
                <div class="flex justify-between"> 
                    <span class="text-slate-400">Pegawai:</span> 
                    <span id="modalDeleteEmployeeName" class="font-bold text-slate-800 dark:text-slate-200"></span> 
                </div> 
                <div class="flex justify-between"> 
                    <span class="text-slate-400">Periode:</span> 
                    <span id="modalDeletePeriodName" class="font-semibold text-slate-850 dark:text-slate-300"></span> 
                </div> 
            </div> 
        </div> 
        <div class="p-4 bg-slate-50 dark:bg-slate-900/40 border-t border-slate-100 dark:border-slate-700 flex justify-end gap-2"> 
            <button onclick="dismissSecureDelete()" class="px-4 py-2 text-xs font-semibold text-slate-500 dark:text-slate-300 bg-transparent hover:bg-slate-100 dark:hover:bg-slate-700/50 rounded-xl transition-all border-0"> Batal </button> 
            <a id="deleteAnchorConfirm" href="#" class="px-4 py-2 text-xs font-semibold text-white bg-rose-600 hover:bg-rose-700 rounded-xl shadow-sm transition-all text-center decoration-none no-underline flex items-center gap-1.5"> 
                <i class="fas fa-trash-can"></i> Ya, Hapus Data 
            </a> 
        </div> 
    </div> 
</div>

<!-- SheetJS Library for dynamic pure XLSX output generation --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> 
<script> 
document.addEventListener("DOMContentLoaded", function() { 
    // ========================================== 
    // LOGISTIC INTELLIGENT METRICS ENGINE 
    // ========================================== 
    function calculatePayrollTelemetry() { 
        const rows = document.querySelectorAll('.payroll-row-element'); 
        let totalPaid = 0; 
        let totalPending = 0; 
        let slipCount = rows.length; 
        
        rows.forEach(row => { 
            const status = row.getAttribute('data-status') || 'pending'; 
            const total = parseFloat(row.getAttribute('data-total')) || 0; 
            if (status === 'paid') { 
                totalPaid += total; 
            } else { 
                totalPending += total; 
            } 
        }); 
        
        // Set beautiful Indonesian currency format 
        const formatRupiah = (val) => { 
            return new Intl.NumberFormat('id-ID', { 
                style: 'currency', 
                currency: 'IDR', 
                maximumFractionDigits: 0 
            }).format(val); 
        }; 
        
        // Render metrics on dashboard top panel 
        document.getElementById('statTotalPaid').innerText = formatRupiah(totalPaid); 
        document.getElementById('statTotalPending').innerText = formatRupiah(totalPending); 
        document.getElementById('statTotalSlips').innerText = slipCount; 
    } 
    
    calculatePayrollTelemetry(); 

    // ========================================== 
    // CLIENT-SIDE LIVE TABLE FILTER ENGINE 
    // ========================================== 
    window.filterPayrollTable = function() { 
        const query = document.getElementById('payrollSearch').value.toLowerCase().trim(); 
        const rows = document.querySelectorAll('.payroll-row-element'); 
        
        rows.forEach(row => { 
            const employee = row.getAttribute('data-employee') || ''; 
            const period = row.getAttribute('data-period') || ''; 
            const status = row.getAttribute('data-status') === 'paid' ? 'lunas' : 'pending'; 
            
            const matchesQuery = employee.includes(query) || period.includes(query) || status.includes(query); 
            if (matchesQuery) { 
                row.style.display = ""; 
            } else { 
                row.style.display = "none"; 
            } 
        }); 
    }; 

    // ========================================== 
    // EXPORT RECORDS TO CLEAN EXCEL (SheetJS) 
    // ========================================== 
    window.exportPayrollExcel = function() { 
        const rows = document.querySelectorAll('.payroll-row-element'); 
        const exportData = [ 
            ["LAPORAN AUDIT PENGGAJIAN & UPAH PEGAWAI BENGKEL"], 
            ["Modul Akunting & Penggajian Owner"], 
            ["Waktu Ekspor Laporan", new Date().toLocaleString('id-ID')], 
            [], 
            ["NO", "NAMA PEGAWAI", "PERIODE", "GAJI POKOK (IDR)", "BONUS (IDR)", "POTONGAN (IDR)", "TOTAL UPAH BERSIH (IDR)", "STATUS PEMBAYARAN"] 
        ]; 
        
        let itemCounter = 1; 
        rows.forEach(row => { 
            const employeeName = row.querySelector('td:nth-child(2)').innerText.trim(); 
            const period = row.getAttribute('data-period').toUpperCase(); 
            const gapok = parseFloat(row.getAttribute('data-gapok')) || 0; 
            const bonus = parseFloat(row.getAttribute('data-bonus')) || 0; 
            const potongan = parseFloat(row.getAttribute('data-potongan')) || 0; 
            const total = parseFloat(row.getAttribute('data-total')) || 0; 
            const status = row.getAttribute('data-status') === 'paid' ? "Lunas" : "Pending"; 
            
            exportData.push([ 
                itemCounter++, employeeName, period, gapok, bonus, potongan, total, status 
            ]); 
        }); 
        
        // Initialize Worksheet & Workbook Structure 
        const wb = XLSX.utils.book_new(); 
        const ws = XLSX.utils.aoa_to_sheet(exportData); 
        
        // Define premium sizing width for cells 
        ws['!cols'] = [ 
            { wch: 5 },  // No 
            { wch: 25 }, // Employee Name 
            { wch: 15 }, // Period 
            { wch: 18 }, // Gaji Pokok 
            { wch: 15 }, // Bonus 
            { wch: 15 }, // Potongan 
            { wch: 22 }, // Total Gaji 
            { wch: 18 }  // Status 
        ]; 
        
        XLSX.utils.book_append_sheet(wb, ws, "Rekap Penggajian Karyawan"); 
        XLSX.writeFile(wb, "Laporan_Jurnal_Penggajian_Owner.xlsx"); 
    }; 

    // ========================================== 
    // PREMIUM SECURE PAY DIALOG CONTROLLER 
    // ========================================== 
    const modalOverlay = document.getElementById('securePayModal'); 
    const modalEmployeeName = document.getElementById('modalEmployeeName'); 
    const modalPeriodName = document.getElementById('modalPeriodName'); 
    const modalGajiTotal = document.getElementById('modalGajiTotal'); 
    const payAnchor = document.getElementById('payAnchorConfirm'); 
    
    window.requestSecurePayment = function(payUrl, employeeName, period, amount) { 
        modalEmployeeName.innerText = employeeName; 
        modalPeriodName.innerText = period; 
        // Format Amount to IDR currency 
        modalGajiTotal.innerText = new Intl.NumberFormat('id-ID', { 
            style: 'currency', currency: 'IDR', maximumFractionDigits: 0 
        }).format(amount); 
        
        payAnchor.setAttribute('href', payUrl); 
        
        // Show elegant popup animation 
        modalOverlay.classList.remove('hidden'); 
        setTimeout(() => { 
            modalOverlay.classList.remove('opacity-0'); 
            modalOverlay.querySelector('.scale-95').classList.remove('scale-95'); 
        }, 30); 
    }; 
    
    window.dismissSecurePayment = function() { 
        modalOverlay.classList.add('opacity-0'); 
        modalOverlay.querySelector('.transform').classList.add('scale-95'); 
        setTimeout(() => { 
            modalOverlay.classList.add('hidden'); 
        }, 300); 
    }; 
    
    modalOverlay.addEventListener('click', function(e) { 
        if (e.target === modalOverlay) dismissSecurePayment(); 
    });

    // ========================================== 
    // PREMIUM SECURE DELETE DIALOG CONTROLLER
    // ========================================== 
    const modalDeleteOverlay = document.getElementById('secureDeleteModal'); 
    const modalDeleteEmployeeName = document.getElementById('modalDeleteEmployeeName'); 
    const modalDeletePeriodName = document.getElementById('modalDeletePeriodName'); 
    const deleteAnchor = document.getElementById('deleteAnchorConfirm'); 
    
    window.requestSecureDelete = function(deleteUrl, employeeName, period) { 
        modalDeleteEmployeeName.innerText = employeeName; 
        modalDeletePeriodName.innerText = period; 
        deleteAnchor.setAttribute('href', deleteUrl); 
        
        // Show elegant popup animation 
        modalDeleteOverlay.classList.remove('hidden'); 
        setTimeout(() => { 
            modalDeleteOverlay.classList.remove('opacity-0'); 
            modalDeleteOverlay.querySelector('.scale-95').classList.remove('scale-95'); 
        }, 30); 
    }; 
    
    window.dismissSecureDelete = function() { 
        modalDeleteOverlay.classList.add('opacity-0'); 
        modalDeleteOverlay.querySelector('.transform').classList.add('scale-95'); 
        setTimeout(() => { 
            modalDeleteOverlay.classList.add('hidden'); 
        }, 300); 
    }; 
    
    modalDeleteOverlay.addEventListener('click', function(e) { 
        if (e.target === modalDeleteOverlay) dismissSecureDelete(); 
    });

    // ========================================== 
    // SYSTEM DARK MODE CONTROLLER 
    // ========================================== 
    window.toggleDarkMode = function() { 
        const html = document.documentElement; 
        const icon = document.getElementById('themeIcon'); 
        
        if (html.classList.contains('dark')) { 
            html.classList.remove('dark'); 
            localStorage.setItem('theme', 'light'); 
            icon.className = "fas fa-moon text-lg"; 
        } else { 
            html.classList.add('dark'); 
            localStorage.setItem('theme', 'dark'); 
            icon.className = "fas fa-sun text-lg text-amber-400"; 
        } 
    }; 
    
    // Sync theme options on page load 
    if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { 
        document.documentElement.classList.add('dark'); 
        document.getElementById('themeIcon').className = "fas fa-sun text-lg text-amber-400"; 
    } 
}); 
</script> 
<?= $this->endSection() ?>