<?= $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-po-glow { 
        background-color: rgba(99, 102, 241, 0.1); 
        color: #6366f1; 
        border: 1px solid rgba(99, 102, 241, 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-po-glow { background-color: rgba(129, 140, 248, 0.15); color: #a5b4fc; border-color: rgba(129, 140, 248, 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"> 
            <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="errorAlert" 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"> 
            <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('errorAlert').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> 
                    Logistik & Belanja Logam CNC 
                </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-box-open text-indigo-600 dark:text-indigo-400"></i> 
                <?= esc($title ?? 'Pembelian Material') ?> 
            </h1> 
            <p class="text-sm text-slate-500 mt-1">Audit berkas transaksi penyediaan material mentah, beban pengeluaran HPP, dan manajemen vendor.</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="exportMaterialsExcel()" 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 Purchase Entry Link --> 
            <a href="<?= base_url('owner/material/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 Pembelian</span> 
            </a> 
        </div> 
    </div> 

    <div class="row g-4 mb-6"> 
        <!-- Metric Box: Total Belanja Pengeluaran --> 
        <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-wallet"></i> 
                </div> 
                <div> 
                    <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block">Total Belanja Material</span> 
                    <h3 id="statTotalExpense" class="text-xl font-extrabold text-indigo-600 dark:text-indigo-400 mb-0">Rp 0</h3> 
                </div> 
            </div> 
        </div> 
        <!-- Metric Box: Total Kuantitas Volume --> 
        <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-cubes"></i> 
                </div> 
                <div> 
                    <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block">Total Volume Kuantitas</span> 
                    <h3 id="statTotalVolume" class="text-xl font-extrabold text-emerald-600 mb-0">0</h3> 
                </div> 
            </div> 
        </div> 
        <!-- Metric Box: PO Frequency counter --> 
        <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-file-invoice"></i> 
                </div> 
                <div> 
                    <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block">Total Item Pembelian</span> 
                    <h3 id="statTotalPurchases" class="text-xl font-extrabold text-slate-900 mb-0">0</h3> 
                </div> 
            </div> 
        </div> 
    </div> 

    <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 & Date Filter Header Control --> 
        <div class="p-4 border-b border-slate-100 dark:border-slate-700 flex flex-col xl:flex-row justify-between items-start xl: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 Belanja Material 
                </h4> 
                <p class="text-xs text-slate-500 mt-0.5">Pantau ketertiban catatan transaksi logistik terperinci untuk tiap item logam.</p> 
            </div> 

            <!-- Filter Controls -->
            <div class="flex flex-col sm:flex-row gap-3 w-full xl:w-auto items-center">
                <!-- Date Range Filter -->
                <div class="flex items-center justify-between gap-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl px-3 py-0.5 shadow-xs w-full sm:w-auto">
                    <input type="date" id="startDate" onchange="filterMaterialTable()" class="text-xs font-medium text-slate-600 bg-transparent dark:text-slate-300 border-0 focus:outline-none py-1.5 w-full sm:w-auto" title="Mulai dari Tanggal">
                    <i class="fas fa-arrow-right text-slate-300 text-[10px]"></i>
                    <input type="date" id="endDate" onchange="filterMaterialTable()" class="text-xs font-medium text-slate-600 bg-transparent dark:text-slate-300 border-0 focus:outline-none py-1.5 w-full sm:w-auto" title="Sampai dengan Tanggal">
                </div>

                <!-- Live Search input --> 
                <div class="relative w-full sm:w-64"> 
                    <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="materialSearch" onkeyup="filterMaterialTable()" placeholder="Cari nama barang, PO, supplier..." 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>
        </div> 

        <!-- Responsive Purchase Record Table --> 
        <div class="table-responsive"> 
            <table class="w-full text-left border-collapse" id="materialTable"> 
                <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" width="150">Tanggal Beli</th> 
                        <th class="py-3.5 px-4" width="180">No PO / Purchase</th> 
                        <th class="py-3.5 px-4">Nama Produk Material</th> 
                        <th class="py-3.5 px-4" width="220">Pemasok / Supplier</th> 
                        <th class="py-3.5 px-4 text-center" width="120">Kuantitas</th> 
                        <th class="py-3.5 px-4 text-right" width="180">Total Pengeluaran</th> 
                        <th class="py-3.5 px-4 text-center" width="120">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($items)): ?> 
                        <!-- Fallback view when empty database occurs --> 
                        <tr> 
                            <td colspan="8" class="py-12 text-center"> 
                                <div class="flex flex-col items-center justify-center text-slate-400"> 
                                    <i class="fas fa-file-invoice text-4xl mb-3 opacity-30"></i> 
                                    <span class="text-sm font-semibold">Tidak Ada Rekaman Pembelian</span> 
                                    <p class="text-xs text-slate-400 mt-1">Belum ada entri belanja logistik terdaftar pada sistem.</p> 
                                </div> 
                            </td> 
                        </tr> 
                    <?php else: ?> 
                        <?php foreach($items as $item): ?> 
                            <?php 
                                $qty = floatval($item['qty'] ?? 0); 
                                $hargaBeli = floatval($item['harga_beli'] ?? 0); 
                                $totalHarga = $qty * $hargaBeli; 
                            ?> 
                            <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-900/10 transition-all material-row-element" 
                                data-product="<?= esc(strtolower($item['nama_product'] ?? '')) ?>" 
                                data-po="<?= esc(strtolower($item['nomor_purchase'] ?? '')) ?>" 
                                data-supplier="<?= esc(strtolower($item['nama_supplier'] ?? '')) ?>" 
                                data-qty="<?= $qty ?>" 
                                data-total="<?= $totalHarga ?>"
                                data-date="<?= esc($item['tanggal_beli'] ?? '') ?>"> 
                                
                                <!-- No. --> 
                                <td class="py-3.5 px-4 text-center font-semibold text-slate-400"><?= $no++ ?></td> 
                                
                                <!-- Tanggal Beli --> 
                                <td class="py-3.5 px-4 font-medium text-slate-700 dark:text-slate-300"> 
                                    <?= !empty($item['tanggal_beli']) ? esc(date('d M Y', strtotime($item['tanggal_beli']))) : '-' ?> 
                                </td> 
                                
                                <!-- No PO --> 
                                <td class="py-3.5 px-4"> 
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold badge-po-glow"> 
                                        <i class="fas fa-hashtag me-1 opacity-60"></i><?= esc($item['nomor_purchase'] ?? '-') ?> 
                                    </span> 
                                </td> 
                                
                                <!-- Nama Produk Material --> 
                                <td class="py-3.5 px-4 font-bold text-slate-800 dark:text-slate-200"> 
                                    <?= esc($item['nama_product'] ?? 'Material Tidak Diketahui') ?> 
                                </td> 
                                
                                <!-- Supplier / Vendor --> 
                                <td class="py-3.5 px-4 text-slate-600 dark:text-slate-400 font-medium"> 
                                    <i class="far fa-building me-1.5 text-slate-400"></i> <?= esc($item['nama_supplier'] ?? '-') ?> 
                                </td> 
                                
                                <!-- Kuantitas --> 
                                <td class="py-3.5 px-4 text-center font-extrabold text-slate-800 dark:text-slate-200 text-sm"> 
                                    <?= number_format($qty, 2) ?> 
                                </td> 
                                
                                <!-- Total Harga Pengeluaran --> 
                                <td class="py-3.5 px-4 text-right font-extrabold text-slate-900 dark:text-slate-100 text-sm"> 
                                    Rp <?= number_format($totalHarga, 0, ',', '.') ?> 
                                </td> 
                                
                                <!-- Action Elements --> 
                                <td class="py-3.5 px-4 text-center"> 
                                    <div class="flex items-center justify-center gap-1.5"> 
                                        <!-- Edit Action --> 
                                        <a href="<?= base_url('owner/material/edit/'.$item['id_purchase_item']) ?>" 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.5 py-1.5 text-[11px] border-0 transition-all flex items-center gap-1"> 
                                            <i class="fas fa-pen"></i> Edit 
                                        </a> 
                                        <!-- Hapus Action --> 
                                        <button onclick="requestSecureDelete('<?= base_url('owner/material/delete/'.$item['id_purchase_item']) ?>', '<?= esc(addslashes($item['nama_product'] ?? 'Material')) ?>')" 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.5 py-1.5 text-[11px] border-0 transition-all flex items-center gap-1" title="Hapus Pengeluaran"> 
                                            <i class="fas fa-trash-can"></i> Hapus 
                                        </button> 
                                    </div> 
                                </td> 
                            </tr> 
                        <?php endforeach; ?> 
                    <?php endif; ?> 
                </tbody> 
            </table> 
        </div> 
    </div> 
</div> 

<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"> 
        <div class="h-1.5 bg-rose-600 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 Pengeluaran Material?</h3> 
            <p class="text-xs text-slate-500 leading-relaxed"> 
                Tindakan ini akan menghapus entri belanja material <span id="deleteItemName" class="font-extrabold text-slate-800 dark:text-slate-200"></span> secara permanen dari basis data dan mengoreksi pembukuan laba operasional. 
            </p> 
        </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"> 
                Batalkan 
            </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"> 
                Ya, Hapus Pembelian 
            </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 calculateMaterialTelemetry() { 
        const rows = document.querySelectorAll('.material-row-element'); 
        let totalExpense = 0; 
        let totalVolume = 0; 
        let purchaseCount = 0; // Ubah: Jangan pakai rows.length, hitung per-elemen visibilitas

        rows.forEach(row => { 
            // PERBAIKAN: Hanya kalkulasi baris yang tidak disembunyikan oleh filter pencarian
            if (row.style.display !== 'none') {
                const qty = parseFloat(row.getAttribute('data-qty')) || 0; 
                const total = parseFloat(row.getAttribute('data-total')) || 0; 
                totalExpense += total; 
                totalVolume += qty; 
                purchaseCount++;
            }
        }); 

        // 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('statTotalExpense').innerText = formatRupiah(totalExpense); 
        document.getElementById('statTotalVolume').innerText = totalVolume.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); 
        document.getElementById('statTotalPurchases').innerText = purchaseCount; 
    } 

    // Execute Telemetry calculation pada saat halaman dimuat
    calculateMaterialTelemetry(); 

    // ========================================== 
    // CLIENT-SIDE LIVE TABLE FILTER ENGINE (SEARCH & DATE)
    // ========================================== 
    window.filterMaterialTable = function() { 
        const query = document.getElementById('materialSearch').value.toLowerCase().trim(); 
        const startDate = document.getElementById('startDate').value;
        const endDate = document.getElementById('endDate').value;
        const rows = document.querySelectorAll('.material-row-element'); 

        rows.forEach(row => { 
            const product = row.getAttribute('data-product') || ''; 
            const po = row.getAttribute('data-po') || ''; 
            const supplier = row.getAttribute('data-supplier') || ''; 
            const rowDate = row.getAttribute('data-date') || '';
            
            // Logika 1: Pencarian Teks
            const matchesQuery = product.includes(query) || po.includes(query) || supplier.includes(query); 
            
            // Logika 2: Rentang Tanggal
            let matchesDate = true;
            if (startDate && rowDate) {
                if (rowDate < startDate) matchesDate = false;
            }
            if (endDate && rowDate) {
                if (rowDate > endDate) matchesDate = false;
            }

            // Tampilkan baris HANYA JIKA sesuai dengan teks DAN rentang tanggal
            if (matchesQuery && matchesDate) { 
                row.style.display = ""; 
            } else { 
                row.style.display = "none"; 
            } 
        }); 

        // PERBAIKAN: Hitung ulang metrik berdasarkan data yang lolos filter saja!
        calculateMaterialTelemetry();
    }; 

    // ========================================== 
    // EXPORT RECORDS TO CLEAN EXCEL (SheetJS) 
    // ========================================== 
    window.exportMaterialsExcel = function() { 
        const rows = document.querySelectorAll('.material-row-element'); 
        const exportData = [ 
            ["LAPORAN AUDIT PENGELUARAN & BELANJA MATERIAL LOGAM"], 
            ["Modul Logistik & Penyediaan HPP Bengkel Owner"], 
            ["Waktu Ekspor Laporan", new Date().toLocaleString('id-ID')], 
            [], 
            ["NO", "TANGGAL BELI", "NOMOR PURCHASE ORDER", "NAMA PRODUK MATERIAL", "PEMASOK / SUPPLIER", "KUANTITAS", "TOTAL BELANJA (IDR)"] 
        ]; 
        
        let itemCounter = 1; 
        rows.forEach(row => { 
            // PERBAIKAN: Hanya ekspor baris yang SEDANG TAMPIL di layar (sesuai filter)
            if (row.style.display !== 'none') {
                const tanggal = row.querySelector('td:nth-child(2)').innerText.trim(); 
                const poNo = row.getAttribute('data-po').toUpperCase(); 
                const product = row.querySelector('td:nth-child(4)').innerText.trim(); 
                const supplier = row.getAttribute('data-supplier'); 
                const qty = parseFloat(row.getAttribute('data-qty')) || 0; 
                const total = parseFloat(row.getAttribute('data-total')) || 0; 
                
                exportData.push([ 
                    itemCounter++, tanggal, poNo || "-", product, supplier || "-", qty, total 
                ]); 
            }
        }); 

        // 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: 18 }, // Tanggal 
            { wch: 25 }, // PO No 
            { wch: 35 }, // Material Name 
            { wch: 30 }, // Supplier 
            { wch: 15 }, // Qty 
            { wch: 22 }  // Total Harga 
        ]; 
        
        XLSX.utils.book_append_sheet(wb, ws, "Rekap Belanja Material"); 
        XLSX.writeFile(wb, "Laporan_Belanja_Material_Owner.xlsx"); 
    }; 

    // ========================================== 
    // PREMIUM REPLACEMENT FOR SYSTEM CONFIRMATION 
    // ========================================== 
    const modalOverlay = document.getElementById('secureDeleteModal'); 
    const deleteTextEl = document.getElementById('deleteItemName'); 
    const deleteAnchor = document.getElementById('deleteAnchorConfirm'); 

    window.requestSecureDelete = function(deleteUrl, productName) { 
        deleteTextEl.innerText = `"${productName}"`; 
        deleteAnchor.setAttribute('href', deleteUrl); 
        
        // Show elegant popup animation 
        modalOverlay.classList.remove('hidden'); 
        setTimeout(() => { 
            modalOverlay.classList.remove('opacity-0'); 
            modalOverlay.querySelector('.scale-95').classList.remove('scale-95'); 
        }, 30); 
    }; 

    window.dismissSecureDelete = function() { 
        modalOverlay.classList.add('opacity-0'); 
        modalOverlay.querySelector('.transform').classList.add('scale-95'); 
        setTimeout(() => { 
            modalOverlay.classList.add('hidden'); 
        }, 300); 
    }; 

    // Background click dismissal wrapper 
    modalOverlay.addEventListener('click', function(e) { 
        if (e.target === modalOverlay) { 
            dismissSecureDelete(); 
        } 
    }); 

    // ========================================== 
    // DYNAMIC THEME SYSTEM DECK 
    // ========================================== 
    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() ?>