<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kelola Produk — Loves Semprong</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --ink:       #0f172a;
            --ink-2:     #334155;
            --ink-3:     #64748b;
            --surface:   #ffffff;
            --surface-2: #f8fafc;
            --surface-3: #f1f5f9;
            --border:    #e2e8f0;
            --r:         10px;
            --mono:      'JetBrains Mono', monospace;
        }
        * { box-sizing: border-box; }
        body { background: var(--surface-3); font-family: 'Inter', sans-serif; font-size: 12px; color: var(--ink); }

        .page-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r);
            overflow: hidden;
            margin-bottom: 16px;
        }
        .page-card-header {
            background: var(--ink);
            color: #fff;
            padding: 10px 16px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .05em;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 7px;
        }
        .page-card-header i { font-size: 14px; }

        .tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
        .tbl th {
            background: var(--surface-2);
            color: var(--ink-3);
            padding: 8px 12px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .04em;
            border-bottom: 1px solid var(--border);
        }
        .tbl td { padding: 8px 12px; border-bottom: 1px solid var(--surface-3); vertical-align: middle; }
        .tbl tr:last-child td { border-bottom: none; }
        .tbl tr:hover td { background: var(--surface-2); }

        .btn-sm-act {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 10px;
            font-weight: 600;
            padding: 3px 9px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--ink-2);
            cursor: pointer;
            text-decoration: none;
            transition: all .12s;
            font-family: 'Inter', sans-serif;
        }
        .btn-sm-act:hover { background: var(--surface-3); color: var(--ink); }
        .btn-sm-act.danger { color: #dc2626; border-color: #fecaca; }
        .btn-sm-act.danger:hover { background: #fee2e2; }
        .btn-sm-act i { font-size: 12px; }

        .form-label-sm { font-size: 11px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
        .form-ctrl {
            width: 100%;
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: 7px;
            font-size: 12px;
            font-family: 'Inter', sans-serif;
            color: var(--ink);
            background: var(--surface);
            outline: none;
            transition: border-color .15s;
        }
        .form-ctrl:focus { border-color: #1d4ed8; }

        .alert-success-custom {
            background: #f0fdf4; color: #166534;
            border: 1px solid #bbf7d0; border-radius: 8px;
            padding: 8px 14px; font-size: 12px; margin-bottom: 14px;
        }
        .alert-danger-custom {
            background: #fef2f2; color: #991b1b;
            border: 1px solid #fecaca; border-radius: 8px;
            padding: 8px 14px; font-size: 12px; margin-bottom: 14px;
        }

        .aktif-badge {
            font-size: 9px; font-weight: 700; padding: 2px 8px;
            border-radius: 20px; text-transform: uppercase;
        }
        .aktif-ya  { background: #d1fae5; color: #065f46; }
        .aktif-non { background: #fee2e2; color: #991b1b; }

        .kategori-header {
            background: var(--ink);
            color: #fff;
            padding: 7px 14px;
            font-size: 11px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* Filter pills */
        .filter-pill {
            font-size: 10px; padding: 4px 12px; border-radius: 20px;
            border: 1px solid var(--border); background: var(--surface);
            color: var(--ink-3); cursor: pointer; font-weight: 500;
            transition: all .15s; white-space: nowrap;
        }
        .filter-pill.active { background: var(--ink); color: #fff; border-color: var(--ink); }

        /* Modal */
        .modal-custom { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1050; align-items:center; justify-content:center; }
        .modal-custom.show { display:flex; }
        .modal-box {
            background: var(--surface); border-radius: 12px;
            width: 460px; max-width: 95vw; max-height: 90vh;
            overflow-y: auto; padding: 20px;
            box-shadow: 0 8px 32px rgba(0,0,0,.18);
        }
        .modal-title { font-size: 14px; font-weight: 700; margin-bottom: 16px; color: var(--ink); }
    </style>
</head>
<body>
<?php echo $__env->make('layouts.navbar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

<div class="container-fluid px-4 pb-5">

    <div class="d-flex justify-content-between align-items-center mb-4 pt-3">
        <div>
            <h4 style="font-size:17px;font-weight:700;margin:0;color:var(--ink)">Kelola Produk</h4>
            <div style="font-size:11px;color:var(--ink-3)">Tambah, edit, dan nonaktifkan produk</div>
        </div>
        <button onclick="openTambah()"
            style="display:inline-flex;align-items:center;gap:6px;background:#0f172a;color:#fff;border:none;padding:7px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif">
            <i class="ti ti-plus" style="font-size:14px"></i> Tambah Produk
        </button>
    </div>

    <?php if(session('success')): ?>
        <div class="alert-success-custom"><i class="ti ti-circle-check" style="font-size:14px;vertical-align:-2px"></i> <?php echo e(session('success')); ?></div>
    <?php endif; ?>
    <?php if(session('error')): ?>
        <div class="alert-danger-custom"><i class="ti ti-alert-circle" style="font-size:14px;vertical-align:-2px"></i> <?php echo e(session('error')); ?></div>
    <?php endif; ?>
    <?php if($errors->any()): ?>
    <div class="alert-danger-custom">
        <i class="ti ti-alert-circle" style="font-size:14px;vertical-align:-2px"></i>
        <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <span style="margin-left:6px"><?php echo e($error); ?></span>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>
<?php endif; ?>

    
    <div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px 16px;margin-bottom:10px;display:flex;align-items:center;gap:10px">
    <i class="ti ti-search" style="font-size:16px;color:var(--ink-3)"></i>
    <input type="text" id="searchProduk" placeholder="Cari nama produk atau kode..."
        class="form-ctrl" style="margin:0;border:none;padding:0;font-size:12px;outline:none;box-shadow:none">
    </div>

    
    <div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 16px;margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center">
        <span style="font-size:11px;font-weight:700;color:var(--ink-3);margin-right:4px">Kategori:</span>
        <button class="filter-pill active" onclick="filterKategori('semua', this)">Semua</button>
        <?php $__currentLoopData = $labelKategori; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <button class="filter-pill" onclick="filterKategori('<?php echo e($key); ?>', this)"><?php echo e($label); ?></button>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>

    
    <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $kategori => $items): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <div class="page-card kategori-block" data-kategori="<?php echo e($kategori); ?>">
        <div class="kategori-header">
            <span><?php echo e($labelKategori[$kategori] ?? $kategori); ?> <span style="font-weight:400;opacity:.6">(<?php echo e($items->count()); ?> produk)</span></span>
        </div>
        <table class="tbl">
            <thead>
                <tr>
                    <th>Urutan</th>
                    <th>Nama Produk</th>
                    <th>Kode</th>
                    <th style="text-align:right">Harga</th>
                    <th style="text-align:center">Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php $__currentLoopData = $items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $p): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <tr>
                    <td style="color:var(--ink-3);font-family:var(--mono)"><?php echo e($p->urutan); ?></td>
                    <td style="font-weight:600"><?php echo e($p->nama); ?></td>
                    <td style="font-family:var(--mono);font-size:10.5px;color:var(--ink-3)"><?php echo e($p->kode); ?></td>
                    <td style="text-align:right;font-family:var(--mono);font-weight:600;color:#1d4ed8">
                        Rp<?php echo e(number_format($p->harga, 0, ',', '.')); ?>

                    </td>
                    <td style="text-align:center">
                        <span class="aktif-badge <?php echo e($p->aktif ? 'aktif-ya' : 'aktif-non'); ?>">
                            <?php echo e($p->aktif ? 'Aktif' : 'Nonaktif'); ?>

                        </span>
                    </td>
                    <td>
                        <div class="d-flex gap-1">
                            <button onclick='openEdit(<?php echo e($p->id); ?>, "<?php echo e(addslashes($p->nama)); ?>", "<?php echo e($p->kode); ?>", "<?php echo e($p->kategori); ?>", <?php echo e($p->harga); ?>, <?php echo e($p->urutan); ?>, <?php echo e($p->aktif ? "true" : "false"); ?>, <?php echo e($p->harga_p1 ?? 0); ?>, <?php echo e($p->harga_p2 ?? 0); ?>, <?php echo e($p->harga_p3 ?? 0); ?>, <?php echo e($p->min_p1 ?? 0); ?>, <?php echo e($p->min_p2 ?? 0); ?>, <?php echo e($p->min_p3 ?? 0); ?>, "<?php echo e($p->tipe_harga ?? 'other'); ?>", "<?php echo e($p->konversi_toples ?? 0); ?>")'
                                class="btn-sm-act"><i class="ti ti-edit"></i> Edit</button>
                            <button type="button" onclick="openHapus(<?php echo e($p->id); ?>, '<?php echo e(addslashes($p->nama)); ?>')"
                                class="btn-sm-act danger"><i class="ti ti-trash"></i> Hapus</button>
                        </div>
                    </td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </tbody>
        </table>
    </div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

</div>


<div class="modal-custom" id="modalTambah">
    <div class="modal-box" style="width:500px">
        <div class="modal-title"><i class="ti ti-plus" style="font-size:16px;vertical-align:-2px"></i> Tambah Produk Baru</div>
        <form action="/admin/products" method="POST">
            <?php echo csrf_field(); ?>
            <div class="mb-3">
                <div class="form-label-sm">Nama Produk *</div>
                <input type="text" name="nama" class="form-ctrl" placeholder="Toples Original (O)" required>
            </div>
            <div class="row g-2 mb-3">
                <div class="col-6">
                    <div class="form-label-sm">Kode *</div>
                    <input type="text" name="kode" class="form-ctrl" placeholder="Original (O)" required>
<?php $__errorArgs = ['kode'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
    <div style="color:#dc2626;font-size:11px;margin-top:4px"><?php echo e($message); ?></div>
<?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>
                <div class="col-6">
                    <div class="form-label-sm">Harga Customer *</div>
                    <input type="number" name="harga" class="form-ctrl" placeholder="26000" required min="0">
                </div>
            </div>

            
            <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px;margin-bottom:12px">
                <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin-bottom:10px">Harga Paket (opsional)</div>
                <div class="row g-2 mb-2">
                    <div class="col-4">
                        <div class="form-label-sm">Paket 1 (Dropship)</div>
                        <input type="number" name="harga_p1" class="form-ctrl" placeholder="0" min="0">
                    </div>
                    <div class="col-4">
                        <div class="form-label-sm">Paket 2 (Reseller)</div>
                        <input type="number" name="harga_p2" class="form-ctrl" placeholder="0" min="0">
                    </div>
                    <div class="col-4">
                        <div class="form-label-sm">Paket 3 (Pasukan)</div>
                        <input type="number" name="harga_p3" class="form-ctrl" placeholder="0" min="0">
                    </div>
                </div>
                <div class="row g-2">
                    <div class="col-4">
                        <div class="form-label-sm">Min. Qty P1</div>
                        <input type="number" name="min_p1" class="form-ctrl" placeholder="6" min="0">
                    </div>
                    <div class="col-4">
                        <div class="form-label-sm">Min. Qty P2</div>
                        <input type="number" name="min_p2" class="form-ctrl" placeholder="12" min="0">
                    </div>
                    <div class="col-4">
                        <div class="form-label-sm">Min. Qty P3</div>
                        <input type="number" name="min_p3" class="form-ctrl" placeholder="60" min="0">
                    </div>
                </div>
            </div>

            <div class="row g-2 mb-3">
                <div class="col-6">
                    <div class="form-label-sm">Tipe Harga</div>
                    <select name="tipe_harga" class="form-ctrl">
                        <option value="other">Tidak ada paket</option>
                        <option value="toples">Toples (gabung reg+mini)</option>
                        <option value="pouch">Pouch (terpisah)</option>
                    </select>
                </div>
                <div class="col-6">
                    <div class="form-label-sm">Konversi ke Toples</div>
                    <select name="konversi_toples" class="form-ctrl">
                        <option value="0">0 (tidak dihitung)</option>
                        <option value="1">1 (toples reguler)</option>
                        <option value="0.5">0.5 (toples mini = ½)</option>
                    </select>
                </div>
            </div>

            <div class="row g-2 mb-4">
                <div class="col-8">
                    <div class="form-label-sm">Kategori *</div>
                    <select name="kategori" class="form-ctrl" required>
                        <option value="">-- Pilih --</option>
                        <?php $__currentLoopData = $labelKategori; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($key); ?>"><?php echo e($label); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </div>
                <div class="col-4">
                    <div class="form-label-sm">Urutan</div>
                    <input type="number" name="urutan" class="form-ctrl" placeholder="99" min="1">
                </div>
            </div>
            <div class="d-flex gap-2 justify-content-end">
                <button type="button" onclick="document.getElementById('modalTambah').classList.remove('show')"
                    class="btn-sm-act" style="padding:6px 14px">Batal</button>
                <button type="submit"
                    style="background:#0f172a;color:#fff;border:none;padding:6px 14px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif">
                    Simpan
                </button>
            </div>
        </form>
    </div>
</div>


<div class="modal-custom" id="modalEdit">
    <div class="modal-box" style="width:500px;max-height:90vh;overflow-y:auto">
        <div class="modal-title"><i class="ti ti-edit" style="font-size:16px;vertical-align:-2px"></i> Edit Produk</div>
        <form id="formEdit" action="" method="POST">
            <?php echo csrf_field(); ?> <?php echo method_field('PUT'); ?>
            <div class="mb-3">
                <div class="form-label-sm">Nama Produk *</div>
                <input type="text" name="nama" id="editNama" class="form-ctrl" required>
            </div>
            <div class="row g-2 mb-3">
                <div class="col-6">
                    <div class="form-label-sm">Kode *</div>
                    <input type="text" name="kode" id="editKode" class="form-ctrl" required>
                </div>
                <div class="col-6">
                    <div class="form-label-sm">Harga Customer *</div>
                    <input type="number" name="harga" id="editHarga" class="form-ctrl" required min="0">
                </div>
            </div>

            
            <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px;margin-bottom:12px">
                <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin-bottom:10px">Harga Paket</div>
                <div class="row g-2 mb-2">
                    <div class="col-4">
                        <div class="form-label-sm">Paket 1 (Dropship)</div>
                        <input type="number" name="harga_p1" id="editHargaP1" class="form-ctrl" min="0">
                    </div>
                    <div class="col-4">
                        <div class="form-label-sm">Paket 2 (Reseller)</div>
                        <input type="number" name="harga_p2" id="editHargaP2" class="form-ctrl" min="0">
                    </div>
                    <div class="col-4">
                        <div class="form-label-sm">Paket 3 (Pasukan)</div>
                        <input type="number" name="harga_p3" id="editHargaP3" class="form-ctrl" min="0">
                    </div>
                </div>
                <div class="row g-2">
                    <div class="col-4">
                        <div class="form-label-sm">Min. Qty P1</div>
                        <input type="number" name="min_p1" id="editMinP1" class="form-ctrl" min="0">
                    </div>
                    <div class="col-4">
                        <div class="form-label-sm">Min. Qty P2</div>
                        <input type="number" name="min_p2" id="editMinP2" class="form-ctrl" min="0">
                    </div>
                    <div class="col-4">
                        <div class="form-label-sm">Min. Qty P3</div>
                        <input type="number" name="min_p3" id="editMinP3" class="form-ctrl" min="0">
                    </div>
                </div>
            </div>

            <div class="row g-2 mb-3">
                <div class="col-6">
                    <div class="form-label-sm">Tipe Harga</div>
                    <select name="tipe_harga" id="editTipeHarga" class="form-ctrl">
                        <option value="other">Tidak ada paket</option>
                        <option value="toples">Toples (gabung reg+mini)</option>
                        <option value="pouch">Pouch (terpisah)</option>
                    </select>
                </div>
                <div class="col-6">
                    <div class="form-label-sm">Konversi ke Toples</div>
                    <select name="konversi_toples" id="editKonversi" class="form-ctrl">
                        <option value="0">0 (tidak dihitung)</option>
                        <option value="1">1 (toples reguler)</option>
                        <option value="0.5">0.5 (toples mini = ½)</option>
                    </select>
                </div>
            </div>

            <div class="row g-2 mb-3">
                <div class="col-8">
                    <div class="form-label-sm">Kategori *</div>
                    <select name="kategori" id="editKategori" class="form-ctrl" required>
                        <?php $__currentLoopData = $labelKategori; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($key); ?>"><?php echo e($label); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </div>
                <div class="col-4">
                    <div class="form-label-sm">Urutan</div>
                    <input type="number" name="urutan" id="editUrutan" class="form-ctrl" min="1">
                </div>
            </div>
            <div class="mb-4">
                <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;font-weight:600;color:var(--ink-2)">
                    <input type="checkbox" name="aktif" id="editAktif" style="width:15px;height:15px;cursor:pointer">
                    Produk Aktif (muncul di form input pesanan)
                </label>
            </div>
            <div class="d-flex gap-2 justify-content-end">
                <button type="button" onclick="document.getElementById('modalEdit').classList.remove('show')"
                    class="btn-sm-act" style="padding:6px 14px">Batal</button>
                <button type="submit"
                    style="background:#0f172a;color:#fff;border:none;padding:6px 14px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif">
                    Perbarui
                </button>
            </div>
        </form>
    </div>
</div>


<div class="modal-custom" id="modalHapus">
    <div class="modal-box" style="width:400px">
        <div style="display:flex;gap:12px;align-items:flex-start;margin-bottom:20px">
            <div style="flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center">
                <i class="ti ti-trash" style="font-size:18px;color:#dc2626"></i>
            </div>
            <div>
                <div style="font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px">Hapus produk?</div>
                <div style="font-size:12px;color:var(--ink-3);line-height:1.5">
                    Hapus produk <strong id="hapusNamaProduk" style="color:var(--ink-2)"></strong>? Data penjualan yang sudah ada tidak akan terpengaruh.
                </div>
            </div>
        </div>
        <form id="formHapus" action="" method="POST">
            <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
            <div class="d-flex gap-2 justify-content-end">
                <button type="button" onclick="document.getElementById('modalHapus').classList.remove('show')"
                    class="btn-sm-act" style="padding:6px 14px">Batal</button>
                <button type="submit"
                    style="background:#dc2626;color:#fff;border:none;padding:6px 14px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif">
                    Ya, Hapus
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openTambah() {
    document.getElementById('modalTambah').classList.add('show');
}

function openEdit(id, nama, kode, kategori, harga, urutan, aktif, hp1, hp2, hp3, mp1, mp2, mp3, tipeHarga, konversi) {
    document.getElementById('editNama').value       = nama;
    document.getElementById('editKode').value       = kode;
    document.getElementById('editKategori').value   = kategori;
    document.getElementById('editHarga').value      = harga;
    document.getElementById('editUrutan').value     = urutan;
    document.getElementById('editAktif').checked    = aktif;
    document.getElementById('editHargaP1').value    = hp1;
    document.getElementById('editHargaP2').value    = hp2;
    document.getElementById('editHargaP3').value    = hp3;
    document.getElementById('editMinP1').value      = mp1;
    document.getElementById('editMinP2').value      = mp2;
    document.getElementById('editMinP3').value      = mp3;
    document.getElementById('editTipeHarga').value  = tipeHarga;
    document.getElementById('editKonversi').value   = konversi;
    document.getElementById('formEdit').action      = '/admin/products/' + id;
    document.getElementById('modalEdit').classList.add('show');
}

function openHapus(id, nama) {
    document.getElementById('hapusNamaProduk').textContent = nama;
    document.getElementById('formHapus').action = '/admin/products/' + id;
    document.getElementById('modalHapus').classList.add('show');
}

function filterKategori(kat, btn) {
    document.querySelectorAll('.filter-pill').forEach(p => p.classList.remove('active'));
    btn.classList.add('active');
    document.querySelectorAll('.kategori-block').forEach(block => {
        block.style.display = (kat === 'semua' || block.dataset.kategori === kat) ? '' : 'none';
    });
}

document.querySelectorAll('.modal-custom').forEach(m => {
    m.addEventListener('click', function(e) {
        if (e.target === this) this.classList.remove('show');
    });
});

// SEARCH PRODUK
document.getElementById('searchProduk').addEventListener('input', function() {
    const q = this.value.toLowerCase().trim();
    document.querySelectorAll('.kategori-block').forEach(block => {
        let adaYangCocok = false;
        block.querySelectorAll('tbody tr').forEach(row => {
            const nama = row.querySelector('td:nth-child(2)')?.textContent.toLowerCase() || '';
            const kode = row.querySelector('td:nth-child(3)')?.textContent.toLowerCase() || '';
            const cocok = nama.includes(q) || kode.includes(q);
            row.style.display = cocok ? '' : 'none';
            if (cocok) adaYangCocok = true;
        });
        block.style.display = (q === '' || adaYangCocok) ? '' : 'none';
    });
});

</script>
</body>
</html><?php /**PATH C:\laragon\www\laporanpenjualan\resources\views/admin/products.blade.php ENDPATH**/ ?>