<?php
require 'config.php';

if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit;
}

// Buat folder uploads jika belum ada
if (!is_dir('uploads')) {
    mkdir('uploads', 0777, true);
}

// ==================== HELPER UPLOAD GAMBAR ====================
function handleImageUpload($file, $old_img = 'uploads/default.jpg') {
    if (!isset($file) || $file['error'] !== 0) return $old_img;

    $allowed = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
    $ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));

    if (!in_array($ext, $allowed)) {
        $_SESSION['error'] = "Format gambar tidak valid. Gunakan JPG, PNG, GIF, atau WebP";
        return null;
    }
    if ($file['size'] > 5000000) {
        $_SESSION['error'] = "Ukuran gambar maksimal 5MB";
        return null;
    }

    $filename = time() . '_' . bin2hex(random_bytes(8)) . '.' . $ext;
    $target   = 'uploads/' . $filename;

    if (move_uploaded_file($file['tmp_name'], $target)) {
        // Hapus gambar lama jika bukan default
        if ($old_img !== 'uploads/default.jpg' && file_exists($old_img)) {
            unlink($old_img);
        }
        return $target;
    }
    return $old_img;
}

// ==================== MENU: ADD ====================
if (isset($_POST['action']) && $_POST['action'] == 'add_menu') {
    $name     = trim($_POST['name']);
    $price    = (int)$_POST['price'];
    $category = $_POST['category'];

    $errors = [];
    if (empty($name))  $errors[] = "Nama menu harus diisi";
    if ($price <= 0)   $errors[] = "Harga harus lebih dari 0";
    if (!in_array($category, ['food','drink'])) $errors[] = "Kategori tidak valid";

    if (empty($errors)) {
        $img_path = handleImageUpload($_FILES['image'] ?? null);
        if ($img_path === null) { header("Location: admin.php?tab=menu&error=upload"); exit; }

        $stmt = $pdo->prepare("INSERT INTO products (name, price, category, img, created_at) VALUES (?, ?, ?, ?, NOW())");
        $stmt->execute([$name, $price, $category, $img_path]);
        $_SESSION['success'] = "Menu berhasil ditambahkan!";
    } else {
        $_SESSION['error'] = implode(", ", $errors);
    }
    header("Location: admin.php?tab=menu"); exit;
}

// ==================== MENU: EDIT ====================
if (isset($_POST['action']) && $_POST['action'] == 'edit_menu') {
    $id       = (int)$_POST['id'];
    $name     = trim($_POST['name']);
    $price    = (int)$_POST['price'];
    $category = $_POST['category'];

    $errors = [];
    if (empty($name)) $errors[] = "Nama menu harus diisi";
    if ($price <= 0)  $errors[] = "Harga harus lebih dari 0";

    if (empty($errors)) {
        $stmt = $pdo->prepare("SELECT img FROM products WHERE id = ?");
        $stmt->execute([$id]);
        $old = $stmt->fetch(PDO::FETCH_ASSOC);

        if (!$old) { header("Location: admin.php?tab=menu&error=notfound"); exit; }

        $img_path = handleImageUpload($_FILES['image'] ?? null, $old['img']);
        if ($img_path === null) { header("Location: admin.php?tab=menu&error=upload"); exit; }

        // updated_at: kolom ada di tabel products (ON UPDATE CURRENT_TIMESTAMP) —
        // tapi kita set eksplisit agar kompatibel dengan semua versi MySQL
        $stmt = $pdo->prepare("UPDATE products SET name=?, price=?, category=?, img=?, updated_at=NOW() WHERE id=?");
        $stmt->execute([$name, $price, $category, $img_path, $id]);
        $_SESSION['success'] = "Menu berhasil diupdate!";
    } else {
        $_SESSION['error'] = implode(", ", $errors);
    }
    header("Location: admin.php?tab=menu"); exit;
}

// ==================== MENU: DELETE ====================
if (isset($_GET['delete_menu'])) {
    $id   = (int)$_GET['delete_menu'];
    $stmt = $pdo->prepare("SELECT img FROM products WHERE id = ?");
    $stmt->execute([$id]);
    $row = $stmt->fetch();
    if ($row) {
        if ($row['img'] !== 'uploads/default.jpg' && file_exists($row['img'])) unlink($row['img']);
        $pdo->prepare("DELETE FROM products WHERE id = ?")->execute([$id]);
        $_SESSION['success'] = "Menu berhasil dihapus!";
    }
    header("Location: admin.php?tab=menu"); exit;
}

// ==================== VOUCHER: ADD ====================
if (isset($_POST['action']) && $_POST['action'] == 'add_voucher') {
    $code           = strtoupper(trim($_POST['code']));
    $description    = trim($_POST['description']);
    $discount_type  = $_POST['discount_type'];
    $discount_value = (int)$_POST['discount_value'];
    $min_order      = (int)($_POST['min_order'] ?? 0);
    $max_discount   = (int)($_POST['max_discount'] ?? 0);
    $quota          = (int)($_POST['quota'] ?? 0);
    $valid_from     = $_POST['valid_from'];
    $valid_until    = $_POST['valid_until'];

    $errors = [];
    if (empty($code))           $errors[] = "Kode voucher harus diisi";
    if ($discount_value <= 0)   $errors[] = "Nilai diskon harus lebih dari 0";
    if ($discount_type === 'percent' && $discount_value > 100) $errors[] = "Persen maksimal 100";
    if (empty($valid_from) || empty($valid_until)) $errors[] = "Tanggal berlaku harus diisi";

    if (empty($errors)) {
        try {
            $stmt = $pdo->prepare("INSERT INTO vouchers
                (code, description, discount_type, discount_value, min_order, max_discount, quota, valid_from, valid_until, is_active)
                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, 1)");
            $stmt->execute([$code, $description, $discount_type, $discount_value, $min_order, $max_discount, $quota, $valid_from, $valid_until]);
            $_SESSION['success'] = "Voucher <strong>$code</strong> berhasil ditambahkan!";
        } catch (PDOException $e) {
            $_SESSION['error'] = "Kode voucher sudah digunakan, pilih kode lain.";
        }
    } else {
        $_SESSION['error'] = implode(", ", $errors);
    }
    header("Location: admin.php?tab=voucher"); exit;
}

// ==================== VOUCHER: TOGGLE AKTIF ====================
if (isset($_GET['toggle_voucher'])) {
    $id   = (int)$_GET['toggle_voucher'];
    $stmt = $pdo->prepare("UPDATE vouchers SET is_active = 1 - is_active WHERE id = ?");
    $stmt->execute([$id]);
    header("Location: admin.php?tab=voucher"); exit;
}

// ==================== VOUCHER: DELETE ====================
if (isset($_GET['delete_voucher'])) {
    $id = (int)$_GET['delete_voucher'];
    $pdo->prepare("DELETE FROM vouchers WHERE id = ?")->execute([$id]);
    $_SESSION['success'] = "Voucher berhasil dihapus!";
    header("Location: admin.php?tab=voucher"); exit;
}

// ==================== PAYMENT: SAVE SETTINGS ====================
if (isset($_POST['action']) && $_POST['action'] == 'save_payment_settings') {
    // Pastikan tabel ada
    $pdo->exec("CREATE TABLE IF NOT EXISTS payment_settings (
        id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
        key_name VARCHAR(100) NOT NULL UNIQUE,
        value TEXT DEFAULT NULL,
        updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");

    $pdo->exec("CREATE TABLE IF NOT EXISTS payment_banks (
        id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
        bank_name VARCHAR(100) NOT NULL,
        account_number VARCHAR(50) NOT NULL,
        account_name VARCHAR(150) NOT NULL,
        is_active TINYINT(1) NOT NULL DEFAULT 1,
        sort_order INT NOT NULL DEFAULT 0,
        created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");

    // Tunai
    $tunai = isset($_POST['tunai_enabled']) ? 1 : 0;
    $pdo->prepare("INSERT INTO payment_settings (key_name, value) VALUES ('tunai_enabled',?) ON DUPLICATE KEY UPDATE value=?")->execute([$tunai,$tunai]);

    // QRIS
    $qris = isset($_POST['qris_enabled']) ? 1 : 0;
    $pdo->prepare("INSERT INTO payment_settings (key_name, value) VALUES ('qris_enabled',?) ON DUPLICATE KEY UPDATE value=?")->execute([$qris,$qris]);
    $qris_name = trim($_POST['qris_merchant_name'] ?? 'GoldenWok Resto');
    $pdo->prepare("INSERT INTO payment_settings (key_name, value) VALUES ('qris_merchant_name',?) ON DUPLICATE KEY UPDATE value=?")->execute([$qris_name,$qris_name]);

    // Upload gambar QRIS
    if (isset($_FILES['qris_image']) && $_FILES['qris_image']['error'] === 0) {
        $img_path = handleImageUpload($_FILES['qris_image']);
        if ($img_path) {
            // Hapus gambar lama
            $old = $pdo->query("SELECT value FROM payment_settings WHERE key_name='qris_image'")->fetchColumn();
            if ($old && $old !== '' && file_exists($old)) @unlink($old);
            $pdo->prepare("INSERT INTO payment_settings (key_name, value) VALUES ('qris_image',?) ON DUPLICATE KEY UPDATE value=?")->execute([$img_path,$img_path]);
        }
    }

    // Biaya & Pajak (persentase)
    $takeaway_rate = max(0, min(50, (float)($_POST['takeaway_rate'] ?? 5)));
    $catering_rate = max(0, min(50, (float)($_POST['catering_rate'] ?? 10)));
    $service_rate  = max(0, min(50, (float)($_POST['service_rate']  ?? 0)));
    $ppn_rate      = max(0, min(30, (float)($_POST['ppn_rate']      ?? 0)));
    $pdo->prepare("INSERT INTO payment_settings (key_name, value) VALUES ('takeaway_rate',?) ON DUPLICATE KEY UPDATE value=?")->execute([$takeaway_rate,$takeaway_rate]);
    $pdo->prepare("INSERT INTO payment_settings (key_name, value) VALUES ('catering_rate',?) ON DUPLICATE KEY UPDATE value=?")->execute([$catering_rate,$catering_rate]);
    $pdo->prepare("INSERT INTO payment_settings (key_name, value) VALUES ('service_rate',?) ON DUPLICATE KEY UPDATE value=?")->execute([$service_rate,$service_rate]);
    $pdo->prepare("INSERT INTO payment_settings (key_name, value) VALUES ('ppn_rate',?) ON DUPLICATE KEY UPDATE value=?")->execute([$ppn_rate,$ppn_rate]);

    // Platform Online (Gojek, Grab, ShopeeFood)
    $gojek_enabled  = isset($_POST['gojek_enabled']) ? 1 : 0;
    $gojek_rate     = max(0, min(50, (float)($_POST['gojek_rate'] ?? 20)));
    $grab_enabled   = isset($_POST['grab_enabled']) ? 1 : 0;
    $grab_rate      = max(0, min(50, (float)($_POST['grab_rate'] ?? 20)));
    $shopee_enabled = isset($_POST['shopee_enabled']) ? 1 : 0;
    $shopee_rate    = max(0, min(50, (float)($_POST['shopee_rate'] ?? 20)));
    $pdo->prepare("INSERT INTO payment_settings (key_name, value) VALUES ('gojek_enabled',?) ON DUPLICATE KEY UPDATE value=?")->execute([$gojek_enabled,$gojek_enabled]);
    $pdo->prepare("INSERT INTO payment_settings (key_name, value) VALUES ('gojek_rate',?) ON DUPLICATE KEY UPDATE value=?")->execute([$gojek_rate,$gojek_rate]);
    $pdo->prepare("INSERT INTO payment_settings (key_name, value) VALUES ('grab_enabled',?) ON DUPLICATE KEY UPDATE value=?")->execute([$grab_enabled,$grab_enabled]);
    $pdo->prepare("INSERT INTO payment_settings (key_name, value) VALUES ('grab_rate',?) ON DUPLICATE KEY UPDATE value=?")->execute([$grab_rate,$grab_rate]);
    $pdo->prepare("INSERT INTO payment_settings (key_name, value) VALUES ('shopee_enabled',?) ON DUPLICATE KEY UPDATE value=?")->execute([$shopee_enabled,$shopee_enabled]);
    $pdo->prepare("INSERT INTO payment_settings (key_name, value) VALUES ('shopee_rate',?) ON DUPLICATE KEY UPDATE value=?")->execute([$shopee_rate,$shopee_rate]);
    $pdo->prepare("INSERT INTO payment_settings (key_name, value) VALUES 
('custom_enabled',?) ON DUPLICATE KEY UPDATE value=?")->execute([$custom_enabled,$custom_enabled]);
    $pdo->prepare("INSERT INTO payment_settings (key_name, value) VALUES 
('custom_rate',?) ON DUPLICATE KEY UPDATE value=?")->execute([$custom_rate,$custom_rate]);

    $_SESSION['success'] = "Pengaturan pembayaran berhasil disimpan!";
    header("Location: admin.php?tab=pembayaran"); exit;
}

// ==================== PAYMENT: ADD BANK ====================
if (isset($_POST['action']) && $_POST['action'] == 'add_bank') {
    $pdo->exec("CREATE TABLE IF NOT EXISTS payment_banks (
        id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
        bank_name VARCHAR(100) NOT NULL,
        account_number VARCHAR(50) NOT NULL,
        account_name VARCHAR(150) NOT NULL,
        is_active TINYINT(1) NOT NULL DEFAULT 1,
        sort_order INT NOT NULL DEFAULT 0,
        created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");

    $bank_name = trim($_POST['bank_name'] ?? '');
    $account_number = trim($_POST['account_number'] ?? '');
    $account_name = trim($_POST['account_name'] ?? '');
    if ($bank_name && $account_number && $account_name) {
        $pdo->prepare("INSERT INTO payment_banks (bank_name, account_number, account_name) VALUES (?,?,?)")
            ->execute([$bank_name, $account_number, $account_name]);
        $_SESSION['success'] = "Rekening bank berhasil ditambahkan!";
    } else {
        $_SESSION['error'] = "Semua field bank harus diisi.";
    }
    header("Location: admin.php?tab=pembayaran"); exit;
}

// ==================== PAYMENT: DELETE BANK ====================
if (isset($_GET['delete_bank'])) {
    $id = (int)$_GET['delete_bank'];
    $pdo->prepare("DELETE FROM payment_banks WHERE id=?")->execute([$id]);
    $_SESSION['success'] = "Rekening berhasil dihapus!";
    header("Location: admin.php?tab=pembayaran"); exit;
}

// ==================== PAYMENT: TOGGLE BANK ====================
if (isset($_GET['toggle_bank'])) {
    $id = (int)$_GET['toggle_bank'];
    $pdo->prepare("UPDATE payment_banks SET is_active = 1 - is_active WHERE id=?")->execute([$id]);
    header("Location: admin.php?tab=pembayaran"); exit;
}

// ==================== AMBIL DATA ====================
$tab = $_GET['tab'] ?? 'menu';

// --- Data Menu ---
$page       = max(1, (int)($_GET['page'] ?? 1));
$per_page   = 12;
$offset     = ($page - 1) * $per_page;
$search     = trim($_GET['search'] ?? '');
$filter_cat = $_GET['category'] ?? '';

$where = []; $params = [];
if (!empty($search))     { $where[] = "name LIKE ?";     $params[] = "%$search%"; }
if (in_array($filter_cat, ['food','drink'])) { $where[] = "category = ?"; $params[] = $filter_cat; }
$wc = $where ? "WHERE " . implode(" AND ", $where) : "";

$total_menu  = $pdo->prepare("SELECT COUNT(*) FROM products $wc");
$total_menu->execute($params);
$total_menu  = (int)$total_menu->fetchColumn();
$total_pages = ceil($total_menu / $per_page);

$stmt = $pdo->prepare("SELECT * FROM products $wc ORDER BY category, name LIMIT $per_page OFFSET $offset");
$stmt->execute($params);
$products = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Stat produk
$food_count  = (int)$pdo->query("SELECT COUNT(*) FROM products WHERE category='food'")->fetchColumn();
$drink_count = (int)$pdo->query("SELECT COUNT(*) FROM products WHERE category='drink'")->fetchColumn();
$avg_price   = (float)$pdo->query("SELECT COALESCE(AVG(price),0) FROM products")->fetchColumn();

// --- Data Voucher ---
$vouchers = $pdo->query("SELECT * FROM vouchers ORDER BY created_at DESC")->fetchAll(PDO::FETCH_ASSOC);

// --- Data Pembayaran ---
$pay_settings = [];
$pay_banks    = [];
try {
    $rows = $pdo->query("SELECT key_name, value FROM payment_settings")->fetchAll(PDO::FETCH_ASSOC);
    foreach ($rows as $r) $pay_settings[$r['key_name']] = $r['value'];
    $pay_banks = $pdo->query("SELECT * FROM payment_banks ORDER BY sort_order ASC, id ASC")->fetchAll(PDO::FETCH_ASSOC);
} catch (Exception $e) { /* tabel belum ada, pakai default */ }

// --- Data Transaksi ringkas untuk sidebar ---
$omzet_hari_ini = (int)$pdo->query("SELECT COALESCE(SUM(total),0) FROM transactions WHERE DATE(created_at)=CURDATE() AND status='paid'")->fetchColumn();
$trx_hari_ini   = (int)$pdo->query("SELECT COUNT(*) FROM transactions WHERE DATE(created_at)=CURDATE() AND status='paid'")->fetchColumn();
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel | GoldenWok POS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>/* v2.6 - pembayaran redesign */
        :root {
            --primary: #1a1a2e;
            --primary-light: #2d2d4a;
            --accent: #c8a951;
            --accent-light: #e8d48b;
            --accent-bg: rgba(200,169,81,0.08);
            --bg: #f5f4f1;
            --surface: #ffffff;
            --surface-dim: #fafaf8;
            --border: #e8e5df;
            --border-light: #f0eeea;
            --text: #1a1a2e;
            --text-secondary: #6b6b7b;
            --text-tertiary: #9a9aaa;
            --green: #16a34a;
            --green-bg: rgba(22,163,74,0.08);
            --green-border: rgba(22,163,74,0.2);
            --yellow: #ca8a04;
            --yellow-bg: rgba(202,138,4,0.08);
            --yellow-border: rgba(202,138,4,0.2);
            --blue: #2563eb;
            --blue-bg: rgba(37,99,235,0.06);
            --blue-border: rgba(37,99,235,0.15);
            --red: #dc2626;
            --red-bg: rgba(220,38,38,0.06);
            --red-border: rgba(220,38,38,0.15);
            --purple: #7c3aed;
            --purple-bg: rgba(124,58,237,0.06);
            --purple-border: rgba(124,58,237,0.15);
            --teal: #0d9488;
            --teal-bg: rgba(13,148,136,0.06);
            --teal-border: rgba(13,148,136,0.15);
            --radius-sm: 10px;
            --radius: 14px;
            --radius-lg: 18px;
            --radius-xl: 24px;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
            --shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
            --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        a { text-decoration: none; color: inherit; }
        img { display: block; max-width: 100%; }
        button, input, select, textarea { font-family: inherit; }

        /* ====== Layout ====== */
        .app-container {
            display: grid;
            grid-template-columns: 260px 1fr;
            min-height: 100vh;
        }

        .sidebar {
            background: var(--surface);
            border-right: 1px solid var(--border);
            padding: 1.75rem 1.25rem;
            height: 100vh;
            position: sticky;
            top: 0;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        .main-content {
            padding: 2rem;
            overflow-y: auto;
            height: 100vh;
        }

        /* ====== Sidebar Logo ====== */
        .sidebar-logo {
            width: 44px; height: 44px;
            background: var(--primary);
            border-radius: var(--radius);
            display: flex; align-items: center; justify-content: center;
            color: var(--accent);
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .sidebar-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }
        .sidebar-brand h2 { font-size: 1.125rem; font-weight: 800; color: var(--text); }
        .sidebar-brand p { font-size: 0.75rem; color: var(--text-tertiary); }

        /* ====== Nav Items ====== */
        .nav-item {
            display: flex; align-items: center; gap: 0.75rem;
            padding: 0.75rem 1rem; border-radius: var(--radius);
            font-weight: 600; font-size: 0.9rem; transition: all .2s;
            color: var(--text-secondary); text-decoration: none;
            margin-bottom: 2px;
        }
        .nav-item:hover { background: var(--surface-dim); color: var(--text); }
        .nav-item.active {
            background: var(--accent-bg);
            color: var(--primary);
            border-left: 3px solid var(--primary);
            padding-left: calc(1rem - 3px);
        }
        .nav-item.danger { color: var(--red); border: 1px solid var(--red-border); border-radius: var(--radius); margin-top: auto; }
        .nav-item.danger:hover { background: var(--red-bg); }
        .nav-item i { width: 1.25rem; text-align: center; }

        .nav-spacer { flex: 1; }

        /* ====== Hari Ini Box ====== */
        .hari-ini-box {
            margin-top: 2rem;
            background: var(--accent-bg);
            border: 1px solid rgba(200,169,81,0.15);
            border-radius: var(--radius-lg);
            padding: 1rem;
        }
        .hari-ini-box .label {
            font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0.75rem;
        }
        .hari-ini-box .stat-row { margin-bottom: 0.5rem; }
        .hari-ini-box .stat-row:last-child { margin-bottom: 0; }
        .hari-ini-box .stat-label { font-size: 0.75rem; color: var(--text-tertiary); }
        .hari-ini-box .stat-value { font-size: 1.125rem; font-weight: 800; color: var(--text); }

        /* ====== Tab Pills ====== */
        .tab-bar {
            display: flex; align-items: center; gap: 0.375rem;
            background: var(--surface);
            padding: 0.375rem; border-radius: var(--radius-lg);
            width: fit-content; margin-bottom: 1.5rem;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--border-light);
        }
        .tab-btn {
            padding: 0.625rem 1.25rem; border-radius: var(--radius);
            font-weight: 700; font-size: 0.85rem; transition: all .2s;
            color: var(--text-secondary); border: none; cursor: pointer;
            background: transparent; display: inline-flex; align-items: center; gap: 0.375rem;
        }
        .tab-btn:hover { color: var(--text); background: var(--surface-dim); }
        .tab-btn.active { background: var(--primary); color: #fff; }

        /* ====== Inputs ====== */
        .input-field {
            width: 100%; padding: 0.75rem 1rem; border: 2px solid var(--border);
            border-radius: var(--radius); font-size: 0.9rem; font-weight: 500;
            background: var(--surface-dim); outline: none; transition: all .2s;
            color: var(--text);
        }
        .input-field:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(26,26,46,0.08);
            background: var(--surface);
        }

        /* ====== Buttons ====== */
        .btn-primary {
            background: var(--primary); color: #fff;
            padding: 0.75rem 1.5rem; border-radius: var(--radius); font-weight: 700;
            border: none; cursor: pointer; transition: all .25s;
            display: inline-flex; align-items: center; gap: 0.5rem;
            font-size: 0.875rem;
        }
        .btn-primary:hover {
            background: var(--primary-light);
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(26,26,46,0.2);
        }

        .btn-secondary {
            background: var(--surface); color: var(--text); padding: 0.75rem 1.5rem;
            border-radius: var(--radius); font-weight: 600; border: 2px solid var(--border);
            cursor: pointer; transition: all .2s;
            display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
            font-size: 0.875rem;
        }
        .btn-secondary:hover { border-color: var(--primary); color: var(--primary); }

        .btn-danger {
            background: var(--red); color: #fff;
            padding: 0.625rem 1rem; border-radius: var(--radius); font-weight: 600;
            border: none; cursor: pointer; transition: all .2s;
            display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
        }
        .btn-danger:hover { background: #b91c1c; }

        /* ====== Stat Cards ====== */
        .stat-grid {
            display: grid; grid-template-columns: repeat(2, 1fr);
            gap: 1rem; margin-bottom: 1.5rem;
        }
        @media (min-width: 1024px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }

        .stat-card {
            background: var(--surface); border-radius: var(--radius-lg);
            padding: 1.25rem; border: 1px solid var(--border-light);
            display: flex; align-items: flex-start; gap: 0.875rem;
        }
        .stat-icon {
            width: 44px; height: 44px; border-radius: var(--radius);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.125rem; flex-shrink: 0;
        }
        .stat-icon.total { background: var(--accent-bg); color: var(--accent); }
        .stat-icon.food { background: var(--accent-bg); color: var(--accent); }
        .stat-icon.drink { background: var(--blue-bg); color: var(--blue); }
        .stat-icon.price { background: var(--green-bg); color: var(--green); }

        .stat-card .stat-label {
            font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
            letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: 0.125rem;
        }
        .stat-card .stat-value { font-size: 1.5rem; font-weight: 800; color: var(--text); }
        .stat-card .stat-value.accent { color: var(--primary); }

        /* ====== Search/Filter Row ====== */
        .search-row {
            display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem;
        }
        @media (min-width: 640px) { .search-row { flex-direction: row; } }

        .search-form {
            display: flex; flex: 1; gap: 0.5rem;
        }
        .search-wrap {
            position: relative; flex: 1;
        }
        .search-wrap i {
            position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
            color: var(--text-tertiary); font-size: 0.875rem;
        }
        .search-wrap .input-field { padding-left: 2.75rem; }
        .filter-select { width: 9rem; }

        /* ====== Product Grid ====== */
        .product-grid {
            display: grid; grid-template-columns: 1fr; gap: 1.25rem;
        }
        @media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1280px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

        .product-card {
            background: var(--surface); border-radius: var(--radius-lg);
            border: 1px solid var(--border-light); overflow: hidden; transition: all .3s;
        }
        .product-card:hover {
            box-shadow: var(--shadow-lg); transform: translateY(-2px);
        }
        .product-card .img-wrap {
            position: relative; height: 11rem; overflow: hidden;
            background: var(--surface-dim);
        }
        .product-card .img-wrap img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform .3s;
        }
        .product-card:hover .img-wrap img { transform: scale(1.05); }

        .category-pill {
            position: absolute; top: 0.5rem; right: 0.5rem;
            padding: 0.25rem 0.75rem; border-radius: 100px;
            font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .category-pill.food {
            background: var(--accent-bg); color: var(--accent);
            border: 1px solid rgba(200,169,81,0.2);
        }
        .category-pill.drink {
            background: var(--blue-bg); color: var(--blue);
            border: 1px solid var(--blue-border);
        }

        .product-card .card-body { padding: 1rem; }
        .product-card .card-title {
            font-weight: 700; font-size: 0.9375rem; color: var(--text);
            line-height: 1.3; margin-bottom: 0.25rem;
        }
        .product-card .card-price {
            font-weight: 800; font-size: 1.25rem; color: var(--primary); margin-bottom: 0.75rem;
        }
        .product-card .card-actions { display: flex; gap: 0.5rem; }
        .product-card .btn-edit {
            flex: 1; padding: 0.5rem 0; border-radius: var(--radius-sm);
            font-weight: 600; font-size: 0.8125rem; border: none; cursor: pointer;
            background: var(--blue-bg); color: var(--blue); transition: all .2s;
            display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
        }
        .product-card .btn-edit:hover { background: rgba(37,99,235,0.12); }
        .product-card .btn-delete {
            flex: 1; padding: 0.5rem 0; border-radius: var(--radius-sm);
            font-weight: 600; font-size: 0.8125rem; border: none; cursor: pointer;
            background: var(--red-bg); color: var(--red); transition: all .2s;
            display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
        }
        .product-card .btn-delete:hover { background: rgba(220,38,38,0.12); }

        /* ====== Empty State ====== */
        .empty-state {
            grid-column: 1 / -1; text-align: center; padding: 5rem 1rem;
        }
        .empty-state .empty-icon {
            width: 72px; height: 72px; border-radius: 50%;
            background: var(--surface-dim); border: 1px solid var(--border-light);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1.75rem; color: var(--text-tertiary); margin-bottom: 1rem;
        }
        .empty-state h3 { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
        .empty-state p { color: var(--text-tertiary); margin-bottom: 1.5rem; }

        /* ====== Pagination ====== */
        .pagination {
            display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem;
        }
        .pagination a {
            width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm);
            display: flex; align-items: center; justify-content: center;
            font-weight: 600; font-size: 0.875rem; transition: all .2s;
            background: var(--surface); color: var(--text-secondary);
            border: 1px solid var(--border);
        }
        .pagination a:hover { background: var(--surface-dim); color: var(--text); }
        .pagination a.active {
            background: var(--primary); color: #fff; border-color: var(--primary);
        }

        /* ====== Voucher Section ====== */
        .section-header {
            display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;
            flex-wrap: wrap; gap: 1rem;
        }
        .section-header h2 { font-size: 1.5rem; font-weight: 800; color: var(--text); }
        .section-header .subtitle { font-size: 0.875rem; color: var(--text-tertiary); margin-top: 0.25rem; }

        .table-wrap {
            background: var(--surface); border-radius: var(--radius-lg);
            border: 1px solid var(--border-light); overflow: hidden; box-shadow: var(--shadow-sm);
        }
        .table-scroll { overflow-x: auto; }
        .table-wrap table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
        .table-wrap thead {
            background: var(--surface-dim); color: var(--text-tertiary);
            font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800;
        }
        .table-wrap th { padding: 1rem; text-align: left; white-space: nowrap; }
        .table-wrap th.center { text-align: center; }
        .table-wrap th.right { text-align: right; }
        .table-wrap td { padding: 1rem 0.75rem; border-top: 1px solid var(--border-light); }
        .table-wrap tbody tr { transition: background .15s; }
        .table-wrap tbody tr:hover { background: var(--surface-dim); }

        .code-text { font-family: 'SF Mono', 'Fira Code', monospace; font-weight: 700; color: var(--primary); }
        .desc-text { color: var(--text-secondary); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        .type-pill {
            display: inline-block; padding: 0.125rem 0.5rem; border-radius: var(--radius-sm);
            font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
        }
        .type-pill.percent { background: var(--purple-bg); color: var(--purple); border: 1px solid var(--purple-border); }
        .type-pill.flat { background: var(--teal-bg); color: var(--teal); border: 1px solid var(--teal-border); }

        .status-pill {
            display: inline-block; padding: 0.25rem 0.75rem; border-radius: 100px;
            font-size: 0.75rem; font-weight: 700;
        }
        .status-pill.aktif { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
        .status-pill.nonaktif { background: var(--surface-dim); color: var(--text-tertiary); border: 1px solid var(--border); }
        .status-pill.kadaluarsa { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }

        .action-btn {
            width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 0.8125rem; transition: all .2s; border: none; cursor: pointer;
        }
        .action-btn.toggle-active { background: var(--yellow-bg); color: var(--yellow); }
        .action-btn.toggle-active:hover { background: rgba(202,138,4,0.15); }
        .action-btn.toggle-inactive { background: var(--green-bg); color: var(--green); }
        .action-btn.toggle-inactive:hover { background: rgba(22,163,74,0.15); }
        .action-btn.delete { background: var(--red-bg); color: var(--red); }
        .action-btn.delete:hover { background: rgba(220,38,38,0.12); }

        .action-group { display: flex; justify-content: center; gap: 0.375rem; }

        /* ====== Payment Section ====== */
        .payment-section-header {
            font-size: 1.5rem; font-weight: 800; color: var(--text); margin-bottom: 1.5rem;
            display: flex; align-items: center; gap: 0.625rem;
        }

        .payment-card {
            background: var(--surface); border: 1px solid var(--border-light);
            border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm);
        }
        .payment-card + .payment-card { margin-top: 1.5rem; }

        .payment-card-header {
            display: flex; align-items: center; justify-content: space-between;
        }
        .payment-card-header .left { display: flex; align-items: center; gap: 0.875rem; }

        .pay-icon-box {
            width: 48px; height: 48px; border-radius: var(--radius);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem; flex-shrink: 0;
        }
        .pay-icon-box.cash { background: var(--green-bg); color: var(--green); }
        .pay-icon-box.qris { background: var(--blue-bg); color: var(--blue); }
        .pay-icon-box.bank { background: var(--accent-bg); color: var(--accent); }

        .payment-card-header h3 { font-weight: 700; font-size: 1.125rem; color: var(--text); }
        .payment-card-header .desc { font-size: 0.8125rem; color: var(--text-tertiary); }

        /* Toggle Switch */
        .toggle-switch {
            position: relative; display: inline-flex; align-items: center; cursor: pointer;
        }
        .toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
        .toggle-slider {
            width: 2.75rem; height: 1.5rem; background: #d1d5db; border-radius: 100px;
            position: relative; transition: background .2s;
        }
        .toggle-slider::after {
            content: ''; position: absolute; top: 2px; left: 2px;
            width: 1.25rem; height: 1.25rem; background: #fff; border-radius: 50%;
            transition: transform .2s;
        }
        .toggle-switch input:checked + .toggle-slider { background: var(--primary); }
        .toggle-switch input:checked + .toggle-slider::after { transform: translateX(1.25rem); }
        .toggle-switch input:focus-visible + .toggle-slider { box-shadow: 0 0 0 3px rgba(26,26,46,0.12); }

        .payment-card-body { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }

        .field-label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem; color: var(--text); }

        /* Upload Area */
        .upload-area {
            border: 2px dashed var(--border); border-radius: var(--radius-lg);
            padding: 1.25rem; text-align: center; cursor: pointer; transition: all .2s;
        }
        .upload-area:hover { border-color: var(--accent); background: var(--accent-bg); }
        .upload-area i { font-size: 1.5rem; color: var(--text-tertiary); margin-bottom: 0.25rem; }
        .upload-area p { font-size: 0.8125rem; color: var(--text-tertiary); }
        .upload-area input[type="file"] { display: none; }

        .preview-img {
            width: 9rem; height: 9rem; object-fit: contain;
            border: 1px solid var(--border); border-radius: var(--radius-lg);
            padding: 0.5rem; background: var(--surface);
        }
        .preview-img.inline { margin-bottom: 0.75rem; display: inline-block; }
        .preview-img.below { margin-top: 0.75rem; }
        .preview-img.hidden { display: none; }

        /* Bank List */
        .bank-list { display: flex; flex-direction: column; gap: 0.75rem; }
        .bank-item {
            display: flex; align-items: center; justify-content: space-between;
            padding: 1rem; background: var(--surface-dim); border-radius: var(--radius);
            border: 1px solid var(--border-light);
        }
        .bank-item .bank-name { font-weight: 700; color: var(--text); }
        .bank-item .bank-number {
            font-family: 'SF Mono', 'Fira Code', monospace; font-weight: 700;
            font-size: 1.125rem; letter-spacing: 0.08em; color: var(--primary);
        }
        .bank-item .bank-holder { font-size: 0.75rem; color: var(--text-tertiary); }
        .bank-item .bank-actions { display: flex; gap: 0.375rem; }

        
        /* ===== MODERN BANK SECTION ===== */
        .bank-header-bar {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 1rem;
        }
        .bank-header-desc {
            font-size: 0.8125rem; color: var(--text-tertiary);
            display: flex; align-items: center; gap: 6px;
        }
        .btn-sm {
            font-size: 0.8125rem; padding: 0.5rem 1rem;
            border-radius: 10px; font-weight: 600;
        }
        .bank-grid {
            display: grid; grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        .bank-card {
            background: var(--surface); border: 1px solid var(--border-light);
            border-radius: 14px; padding: 1.25rem;
            display: flex; align-items: center; justify-content: space-between;
            transition: all 0.2s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.03);
        }
        .bank-card:hover {
            border-color: var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.06);
            transform: translateY(-1px);
        }
        .bank-card-left { display: flex; align-items: center; gap: 1rem; }
        .bank-logo {
            width: 48px; height: 48px; border-radius: 12px;
            background: var(--accent-bg); color: var(--accent);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem; font-weight: 800; flex-shrink: 0;
        }
        .bank-card-info { }
        .bank-card-name { font-weight: 700; font-size: 0.95rem; color: var(--text); }
        .bank-card-number {
            font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
            font-weight: 700; font-size: 1.1rem; letter-spacing: 0.06em;
            color: var(--primary); margin-top: 2px;
        }
        .bank-card-holder { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 1px; }
        .bank-card-right { display: flex; align-items: center; gap: 6px; }
        .bank-status {
            font-size: 0.7rem; font-weight: 600; padding: 3px 8px;
            border-radius: 100px; letter-spacing: 0.03em;
        }
        .bank-status.active { background: #d1fae5; color: #065f46; }
        .bank-status.inactive { background: #fee2e2; color: #991b1b; }
        .bank-action-btn {
            width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-light);
            background: var(--surface); color: var(--text-tertiary); cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.8rem; transition: all 0.15s;
        }
        .bank-action-btn:hover { background: var(--surface-dim); border-color: var(--border); }
        .bank-action-btn.danger:hover { background: #fee2e2; color: #ef4444; border-color: #fecaca; }
        @media (max-width: 768px) {
            .bank-grid { grid-template-columns: 1fr; }
        }

        .bank-empty {
            text-align: center; padding: 2.5rem 1rem; color: var(--text-tertiary);
        }
        
        .bank-empty-icon {
            width: 56px; height: 56px; border-radius: 16px;
            background: var(--surface-dim); display: flex; align-items: center;
            justify-content: center; margin: 0 auto 1rem;
            font-size: 1.5rem; color: var(--text-tertiary); opacity: 0.5;
        }
        .bank-empty p { font-weight: 600; font-size: 0.95rem; color: var(--text); margin-bottom: 0.25rem; }
        .bank-empty span { font-size: 0.8125rem; color: var(--text-tertiary); }

        .bank-empty i { font-size: 1.875rem; opacity: 0.3; margin-bottom: 0.75rem; display: block; }

        /* ===== MODERN RATE CARDS (Pembayaran v2) ===== */
        .rate-section { margin-top: 2rem; }
        .rate-grid {
            display: grid; grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }
        .platform-grid {
            display: grid; grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }
        .rate-card {
            background: var(--surface); border: 1px solid var(--border-light);
            border-radius: 14px; padding: 1.25rem;
            display: flex; align-items: center; gap: 1rem;
            transition: all 0.2s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.03);
            position: relative; overflow: hidden;
        }
        .rate-card::before {
            content: ''; position: absolute; left: 0; top: 0; bottom: 0;
            width: 4px; border-radius: 0 4px 4px 0; transition: width 0.2s;
        }
        .rate-card:hover { border-color: var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-1px); }
        .rate-card:hover::before { width: 5px; }
        .rate-card.takeaway::before { background: #f59e0b; }
        .rate-card.catering::before { background: #6366f1; }
        .rate-card.service::before { background: #10b981; }
        .rate-card.ppn::before { background: #ef4444; }
        .rate-card.gojek::before { background: #00AA13; }
        .rate-card.grab::before { background: #00B14F; }
        .rate-card.shopee::before { background: #EE4D2D; }

        .rate-card-icon {
            width: 44px; height: 44px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.15rem; flex-shrink: 0;
        }
        .rate-card.takeaway .rate-card-icon { background: #fef3c7; color: #f59e0b; }
        .rate-card.catering .rate-card-icon { background: #eef2ff; color: #6366f1; }
        .rate-card.service .rate-card-icon { background: #d1fae5; color: #10b981; }
        .rate-card.ppn .rate-card-icon { background: #fee2e2; color: #ef4444; }
        .rate-card.gojek .rate-card-icon { background: #dcfce7; color: #00AA13; }
        .rate-card.grab .rate-card-icon { background: #dcfce7; color: #00B14F; }
        .rate-card.shopee .rate-card-icon { background: #fef2f2; color: #EE4D2D; }

        .rate-card-info { flex: 1; min-width: 0; }
        .rate-card-info h4 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text); line-height: 1.3; }
        .rate-card-info span { font-size: 0.75rem; color: var(--text-tertiary); display: block; margin-top: 1px; }

        .rate-input-group {
            display: flex; align-items: center; gap: 0;
            background: var(--surface-dim); border: 1.5px solid var(--border-light);
            border-radius: 10px; overflow: hidden; flex-shrink: 0;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .rate-input-group:focus-within {
            border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,26,46,0.06);
        }
        .rate-input-group input {
            width: 62px; text-align: center; border: none; background: transparent;
            padding: 8px 4px; font-size: 0.95rem; font-weight: 700;
            color: var(--text); outline: none; font-family: inherit;
            -moz-appearance: textfield;
        }
        .rate-input-group input::-webkit-inner-spin-button,
        .rate-input-group input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .rate-input-group .rate-unit {
            padding: 8px 10px; font-weight: 700; font-size: 0.85rem;
            color: var(--text-tertiary); background: var(--border-light); line-height: 1;
        }

        /* Platform card (with toggle) */
        .platform-card {
            background: var(--surface); border: 1px solid var(--border-light);
            border-radius: 14px; padding: 1.25rem;
            display: flex; flex-direction: column; gap: 14px;
            transition: all 0.2s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.03);
            position: relative; overflow: hidden;
        }
        .platform-card::before {
            content: ''; position: absolute; left: 0; top: 0; bottom: 0;
            width: 4px; border-radius: 0 4px 4px 0;
        }
        .platform-card:hover { border-color: var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-1px); }
        .platform-card:hover::before { width: 5px; }
        .platform-card.gojek::before { background: #00AA13; }
        .platform-card.gojek .platform-top { }
        .platform-card.grab::before { background: #00B14F; }
        .platform-card.shopee::before { background: #EE4D2D; }
        
        .platform-card.grab::before { background: #00B14F; }
        .platform-card.shopee::before { background: #EE4D2D; }
        

        .platform-top {
            display: flex; align-items: center; gap: 10px;
        }
        .platform-top .rate-card-info { flex: 1; }

        .platform-bottom {
            display: flex; align-items: center; justify-content: space-between;
            padding-top: 10px; border-top: 1px solid var(--border-light);
        }
        .platform-bottom .rate-input-group { }
        .platform-bottom .hint-text { font-size: 0.75rem; color: var(--text-tertiary); margin-right: 8px; }

        /* Save bar */
        .save-bar {
            display: flex; justify-content: flex-end; margin-top: 2rem;
            padding-top: 1.5rem; border-top: 1px solid var(--border-light);
        }
        .save-bar .btn-primary {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 0.75rem 2rem; font-size: 0.95rem; font-weight: 700;
            border-radius: 12px;
        }

        /* Section divider */
        .section-divider {
            height: 1px; background: var(--border-light);
            margin: 2rem 0 1.75rem;
        }

        @media (max-width: 768px) {
            .rate-grid { grid-template-columns: 1fr; }
            .platform-grid { grid-template-columns: 1fr; }
        }


        /* ====== Modal ====== */
        .modal-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,.5);
            backdrop-filter: blur(4px); display: flex; align-items: center;
            justify-content: center; z-index: 1000;
            opacity: 0; visibility: hidden; transition: all .25s;
        }
        .modal-overlay.active { opacity: 1; visibility: visible; }
        .modal-content {
            background: var(--surface); border-radius: var(--radius-xl);
            width: 90%; max-width: 540px; max-height: 90vh; overflow-y: auto;
            padding: 2rem; transform: scale(.95); transition: transform .25s;
        }
        .modal-overlay.active .modal-content { transform: scale(1); }

        .modal-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 1.5rem;
        }
        .modal-header h2 { font-size: 1.5rem; font-weight: 800; color: var(--text); }

        .modal-close {
            width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm);
            background: var(--surface-dim); border: 1px solid var(--border-light);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: all .2s; color: var(--text-secondary);
        }
        .modal-close:hover { background: var(--border-light); color: var(--text); }

        .modal-form { display: flex; flex-direction: column; gap: 1rem; }
        .modal-form .field-group { display: flex; flex-direction: column; }
        .modal-form .required { color: var(--red); }
        .modal-form .optional { color: var(--text-tertiary); font-weight: 400; font-size: 0.8125rem; }

        .form-grid-2 {
            display: grid; grid-template-columns: 1fr; gap: 1rem;
        }
        @media (min-width: 480px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }

        .input-prefix-wrap { position: relative; }
        .input-prefix {
            position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
            color: var(--text-tertiary); font-weight: 700; font-size: 0.875rem;
        }
        .input-prefix-wrap .input-field { padding-left: 2.5rem; }

        .modal-actions {
            display: flex; gap: 0.75rem; padding-top: 0.5rem;
        }
        .modal-actions .btn-secondary, .modal-actions .btn-primary { flex: 1; justify-content: center; }

        /* Delete Modal */
        .modal-content.center { text-align: center; max-width: 28rem; }
        .modal-icon-danger {
            width: 64px; height: 64px; border-radius: 50%;
            background: var(--red-bg); border: 1px solid var(--red-border);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1.5rem; color: var(--red); margin-bottom: 1rem;
        }
        .modal-content.center h3 { font-size: 1.25rem; font-weight: 800; color: var(--text); margin-bottom: 0.5rem; }
        .modal-content.center p { color: var(--text-secondary); margin-bottom: 1.5rem; }

        /* ====== Toast ====== */
        .toast {
            position: fixed; top: 1.5rem; right: 1.5rem; z-index: 2000;
            animation: slideIn .3s ease-out;
        }
        .toast-inner {
            padding: 1rem 1.5rem; border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg); font-weight: 600;
            display: flex; align-items: center; gap: 0.75rem;
            font-size: 0.9rem;
        }
        .toast-inner.success { background: var(--primary); color: #fff; }
        .toast-inner.error { background: var(--red); color: #fff; }

        @keyframes slideIn { from { transform: translateX(110%); opacity:0; } to { transform:translateX(0); opacity:1; } }

        /* ====== Mobile Toggle ====== */
        .mobile-toggle {
            display: none; margin-bottom: 1rem;
            width: 3rem; height: 3rem; border-radius: var(--radius-lg);
            background: var(--surface); border: 2px solid var(--border);
            cursor: pointer; align-items: center; justify-content: center;
            color: var(--text-secondary); font-size: 1rem; transition: all .2s;
        }
        .mobile-toggle:hover { border-color: var(--primary); color: var(--primary); }

        .save-row { display: flex; justify-content: flex-end; }

        /* ====== Responsive ====== */
        @media (max-width: 1024px) {
            .app-container { grid-template-columns: 1fr; }
            .sidebar {
                display: none; position: fixed; z-index: 900; width: 260px;
                box-shadow: var(--shadow-lg);
            }
            .sidebar.open { display: flex; }
            .mobile-toggle { display: flex; }
            .main-content { height: auto; min-height: 100vh; }
        }
        @media (max-width: 640px) {
            .main-content { padding: 1rem; }
        }

        /* ====== Scrollbar ====== */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
        ::-webkit-scrollbar-track { background: transparent; }
    
        /* ══════════ PEMBAYARAN v3 — Professional Design ══════════ */
        .p2-section { margin-bottom: 2rem; }
        .p2-section-head {
            display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.25rem;
        }
        .p2-section-head h2 { font-size: 1.25rem; font-weight: 800; color: var(--text); margin: 0; }
        .p2-section-head span { font-size: 0.8125rem; color: var(--text-tertiary); display: block; margin-top: 2px; }
        .p2-section-icon {
            width: 44px; height: 44px; border-radius: 12px;
            background: var(--surface-dim); color: var(--text-secondary);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.15rem; flex-shrink: 0;
        }
        .p2-section-icon.accent { background: #eef2ff; color: #6366f1; }
        .p2-section-icon.driver { background: #dcfce7; color: #16a34a; }
        .p2-section-icon.bank-icon { background: var(--accent-bg); color: var(--accent); }

        /* Method cards */
        .p2-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .p2-method-card {
            background: var(--surface); border: 1px solid var(--border-light);
            border-radius: 14px; padding: 1.15rem 1.35rem;
            display: flex; align-items: center; justify-content: space-between;
            transition: all .2s;
        }
        .p2-method-card:hover { border-color: var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
        .p2-method-left { display: flex; align-items: center; gap: 0.875rem; }
        .p2-method-icon {
            width: 44px; height: 44px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.1rem; flex-shrink: 0;
        }
        .p2-method-icon.cash { background: #d1fae5; color: #059669; }
        .p2-method-icon.qris { background: #dbeafe; color: #2563eb; }
        .p2-method-name { font-weight: 700; font-size: 0.95rem; color: var(--text); }
        .p2-method-desc { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 1px; }

        /* 2-col grid */
        .p2-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

        /* Rate cards */
        .p2-card {
            background: var(--surface); border: 1px solid var(--border-light);
            border-radius: 14px; padding: 1.15rem 1.35rem;
            display: flex; align-items: center; gap: 0.875rem;
            transition: all .2s ease; position: relative; overflow: hidden;
        }
        .p2-card::before {
            content: ''; position: absolute; left: 0; top: 0; bottom: 0;
            width: 4px; border-radius: 0 3px 3px 0;
        }
        .p2-card:hover { border-color: var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-1px); }
        .p2-card:hover::before { width: 5px; }
        .p2-card.accent-takeaway::before { background: #f59e0b; }
        .p2-card.accent-catering::before { background: #6366f1; }
        .p2-card.accent-service::before { background: #10b981; }
        .p2-card.accent-ppn::before { background: #ef4444; }
        .p2-card-icon {
            width: 42px; height: 42px; border-radius: 11px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.05rem; flex-shrink: 0;
        }
        .accent-takeaway .p2-card-icon { background: #fef3c7; color: #f59e0b; }
        .accent-catering .p2-card-icon { background: #eef2ff; color: #6366f1; }
        .accent-service .p2-card-icon { background: #d1fae5; color: #10b981; }
        .accent-ppn .p2-card-icon { background: #fee2e2; color: #ef4444; }
        .p2-card-info { flex: 1; min-width: 0; }
        .p2-card-info strong { display: block; font-size: 0.9rem; color: var(--text); line-height: 1.3; }
        .p2-card-info small { display: block; font-size: 0.72rem; color: var(--text-tertiary); margin-top: 1px; }
        .p2-input {
            display: flex; align-items: center; border: 1.5px solid var(--border-light);
            border-radius: 10px; overflow: hidden; background: var(--surface-dim);
            transition: border-color .2s; flex-shrink: 0;
        }
        .p2-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,26,46,0.06); }
        .p2-input input {
            width: 54px; border: none; background: transparent; padding: 8px 6px;
            text-align: center; font-weight: 700; font-size: 0.9rem;
            color: var(--text); outline: none; font-family: inherit;
            -moz-appearance: textfield;
        }
        .p2-input input::-webkit-inner-spin-button,
        .p2-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .p2-input span {
            padding: 8px 10px; font-weight: 700; font-size: 0.8rem;
            color: var(--text-tertiary); background: var(--border-light);
        }

        /* Platform cards */
        .p2-platform {
            background: var(--surface); border: 1px solid var(--border-light);
            border-radius: 14px; padding: 1.15rem 1.35rem;
            transition: all .2s ease; position: relative; overflow: hidden;
            display: flex; flex-direction: column; gap: 12px;
        }
        .p2-platform::before {
            content: ''; position: absolute; left: 0; top: 0; bottom: 0;
            width: 4px; border-radius: 0 3px 3px 0;
        }
        .p2-platform.gojek::before { background: #00AA13; }
        .p2-platform.grab::before { background: #00B14F; }
        .p2-platform.shopeefood::before { background: #EE4D2D; }
        .p2-platform.custom::before { background: #8b5cf6; }
        .p2-platform:hover { border-color: var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-1px); }
        .p2-platform:hover::before { width: 5px; }
        .p2-platform-top { display: flex; align-items: center; gap: 0.75rem; }
        .p2-platform.gojek .p2-card-icon { background: #dcfce7; color: #00AA13; }
        .p2-platform.grab .p2-card-icon { background: #dcfce7; color: #00B14F; }
        .p2-platform.shopeefood .p2-card-icon { background: #fef2f2; color: #EE4D2D; }
        .p2-platform.custom .p2-card-icon { background: #ede9fe; color: #8b5cf6; }
        .p2-platform-bot {
            display: flex; align-items: center; justify-content: space-between;
            padding-top: 10px; border-top: 1px solid var(--border-light);
        }
        .p2-platform-bot > span { font-size: 0.75rem; color: var(--text-tertiary); }

        /* Save button */
        .p2-save-btn {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            width: 100%; padding: 0.875rem; margin: 0.5rem 0 2rem;
            background: var(--primary); color: #fff; border: none;
            border-radius: 14px; font-size: 0.95rem; font-weight: 700;
            cursor: pointer; transition: all .2s;
        }
        .p2-save-btn:hover { background: var(--primary-dark, #15153a); box-shadow: 0 4px 16px rgba(26,26,46,0.2); transform: translateY(-1px); }
        .p2-save-btn:active { transform: scale(0.98); }

        /* Bank section */
        .p2-bank-wrap { }
        .p2-add-btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 0.5rem 1rem; background: var(--primary); color: #fff;
            border: none; border-radius: 10px; font-size: 0.8125rem;
            font-weight: 600; cursor: pointer; transition: all .15s;
        }
        .p2-add-btn:hover { background: var(--primary-dark, #15153a); }
        .p2-bank-card {
            background: var(--surface); border: 1px solid var(--border-light);
            border-radius: 14px; padding: 1.15rem 1.35rem;
            display: flex; align-items: center; justify-content: space-between;
            transition: all .2s;
        }
        .p2-bank-card:hover { border-color: var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
        .p2-bank-left { display: flex; align-items: center; gap: 0.875rem; }
        .p2-bank-logo {
            width: 44px; height: 44px; border-radius: 12px;
            background: var(--accent-bg); color: var(--accent);
            display: flex; align-items: center; justify-content: center;
            font-weight: 800; font-size: 0.85rem; flex-shrink: 0;
            letter-spacing: 0.04em;
        }
        .p2-bank-info strong { display: block; font-size: 0.9rem; color: var(--text); }
        .p2-bank-info code {
            display: block; font-family: 'SF Mono','Fira Code','Consolas',monospace;
            font-weight: 700; font-size: 0.95rem; color: var(--primary);
            letter-spacing: 0.05em; margin: 2px 0;
        }
        .p2-bank-info small { display: block; font-size: 0.72rem; color: var(--text-tertiary); }
        .p2-bank-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
        .p2-bank-status {
            font-size: 0.68rem; font-weight: 700; padding: 3px 8px;
            border-radius: 100px; letter-spacing: 0.04em;
        }
        .p2-bank-status.on { background: #d1fae5; color: #065f46; }
        .p2-bank-status.off { background: #fee2e2; color: #991b1b; }
        .p2-bank-act, .p2-bank-del {
            width: 30px; height: 30px; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.75rem; cursor: pointer; transition: all .15s;
            text-decoration: none; color: var(--text-tertiary);
            border: 1px solid var(--border-light); background: var(--surface);
        }
        .p2-bank-act:hover { background: var(--surface-dim); border-color: var(--border); }
        .p2-bank-del:hover { background: #fee2e2; color: #ef4444; border-color: #fecaca; }
        .p2-bank-empty {
            text-align: center; padding: 3rem 1rem;
        }
        .p2-bank-empty-icon {
            width: 56px; height: 56px; border-radius: 16px;
            background: var(--surface-dim); display: flex; align-items: center;
            justify-content: center; margin: 0 auto 1rem;
            font-size: 1.5rem; color: var(--text-tertiary); opacity: 0.5;
        }
        .p2-bank-empty strong { display: block; font-size: 0.95rem; color: var(--text); margin-bottom: 4px; }
        .p2-bank-empty span { font-size: 0.8125rem; color: var(--text-tertiary); }

        @media (max-width: 768px) {
            .p2-card-row, .p2-grid { grid-template-columns: 1fr; }
        }

    </style>
</head>
<body>
<div class="app-container">

    <!-- ==================== SIDEBAR ==================== -->
    <aside class="sidebar" id="sidebar">
        <div class="sidebar-brand">
            <div class="sidebar-logo"><i class="fas fa-fire-flame-curved"></i></div>
            <div>
                <h2>GoldenWok</h2>
                <p>Admin Panel</p>
            </div>
        </div>

        <nav>
            <a href="pos.php" class="nav-item"><i class="fas fa-cash-register"></i> POS Kasir</a>
            <a href="admin.php?tab=menu" class="nav-item <?= $tab=='menu'?'active':'' ?>"><i class="fas fa-utensils"></i> Kelola Menu</a>
            <a href="admin.php?tab=voucher" class="nav-item <?= $tab=='voucher'?'active':'' ?>"><i class="fas fa-ticket"></i> Kelola Voucher</a>
            <a href="admin.php?tab=pembayaran" class="nav-item <?= $tab=='pembayaran'?'active':'' ?>"><i class="fas fa-credit-card"></i> Metode Bayar</a>
            <a href="transactions.php" class="nav-item"><i class="fas fa-receipt"></i> Riwayat Transaksi</a>
            <a href="generate_table_qr.php" class="nav-item <?= $tab=='qrmeja'?'active':'' ?>"><i class="fas fa-qrcode"></i> QR Meja</a>
            <a href="kitchen_dashboard.php" class="nav-item"><i class="fas fa-bell"></i> Order Monitor</a>
        </nav>

        <div class="hari-ini-box">
            <p class="label">Hari Ini</p>
            <div class="stat-row">
                <p class="stat-label">Omzet</p>
                <p class="stat-value">Rp <?= number_format($omzet_hari_ini, 0, ',', '.') ?></p>
            </div>
            <div class="stat-row">
                <p class="stat-label">Transaksi</p>
                <p class="stat-value"><?= $trx_hari_ini ?> nota</p>
            </div>
        </div>

        <div class="nav-spacer"></div>
        <div style="padding-top: 1.5rem;">
            <a href="logout.php" class="nav-item danger"><i class="fas fa-sign-out-alt"></i> Keluar</a>
        </div>
    </aside>

    <!-- ==================== MAIN ==================== -->
    <main class="main-content">

        <!-- Mobile Toggle -->
        <button onclick="document.getElementById('sidebar').classList.toggle('open')" class="mobile-toggle">
            <i class="fas fa-bars"></i>
        </button>

        <!-- Toast -->
        <?php if (isset($_SESSION['success'])): ?>
            <div class="toast">
                <div class="toast-inner success">
                    <i class="fas fa-check-circle"></i> <?= $_SESSION['success'] ?>
                </div>
            </div>
            <?php unset($_SESSION['success']); ?>
            <script>setTimeout(() => document.querySelector('.toast')?.remove(), 3000);</script>
        <?php endif; ?>
        <?php if (isset($_SESSION['error'])): ?>
            <div class="toast">
                <div class="toast-inner error">
                    <i class="fas fa-times-circle"></i> <?= $_SESSION['error'] ?>
                </div>
            </div>
            <?php unset($_SESSION['error']); ?>
            <script>setTimeout(() => document.querySelector('.toast')?.remove(), 4000);</script>
        <?php endif; ?>

        <!-- Tab Pills -->
        <div class="tab-bar">
            <a href="admin.php?tab=menu">
                <button class="tab-btn <?= $tab=='menu'?'active':'' ?>"><i class="fas fa-utensils"></i> Menu</button>
            </a>
            <a href="admin.php?tab=voucher">
                <button class="tab-btn <?= $tab=='voucher'?'active':'' ?>"><i class="fas fa-ticket"></i> Voucher</button>
            </a>
            <a href="admin.php?tab=pembayaran">
                <button class="tab-btn <?= $tab=='pembayaran'?'active':'' ?>"><i class="fas fa-credit-card"></i> Pembayaran</button>
            </a>
            <a href="generate_table_qr.php">
                <button class="tab-btn"><i class="fas fa-qrcode"></i> QR Meja</button>
            </a>
            <a href="kitchen_dashboard.php">
                <button class="tab-btn"><i class="fas fa-bell"></i> Order Monitor</button>
            </a>
        </div>

        <!-- ================== TAB: MENU ================== -->
        <?php if ($tab === 'menu'): ?>

        <!-- Stat Cards -->
        <div class="stat-grid">
            <div class="stat-card">
                <div class="stat-icon total"><i class="fas fa-clipboard-list"></i></div>
                <div>
                    <p class="stat-label">Total Menu</p>
                    <p class="stat-value"><?= $total_menu ?></p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon food"><i class="fas fa-burger"></i></div>
                <div>
                    <p class="stat-label">Food</p>
                    <p class="stat-value"><?= $food_count ?></p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon drink"><i class="fas fa-mug-hot"></i></div>
                <div>
                    <p class="stat-label">Drink</p>
                    <p class="stat-value"><?= $drink_count ?></p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon price"><i class="fas fa-tag"></i></div>
                <div>
                    <p class="stat-label">Harga Rata-rata</p>
                    <p class="stat-value accent">Rp <?= number_format($avg_price, 0, ',', '.') ?></p>
                </div>
            </div>
        </div>

        <!-- Search & Filter -->
        <div class="search-row">
            <form class="search-form" method="GET">
                <input type="hidden" name="tab" value="menu">
                <div class="search-wrap">
                    <i class="fas fa-search"></i>
                    <input type="text" name="search" value="<?= htmlspecialchars($search) ?>"
                           placeholder="Cari nama menu..." class="input-field">
                </div>
                <select name="category" onchange="this.form.submit()" class="input-field filter-select">
                    <option value="">Semua</option>
                    <option value="food"  <?= $filter_cat=='food'?'selected':'' ?>><i class="fas fa-burger"></i> Food</option>
                    <option value="drink" <?= $filter_cat=='drink'?'selected':'' ?>>Drink</option>
                </select>
                <?php if ($search || $filter_cat): ?>
                    <a href="admin.php?tab=menu" class="btn-secondary"><i class="fas fa-times"></i></a>
                <?php endif; ?>
            </form>
            <button onclick="showModal('addModal')" class="btn-primary">
                <i class="fas fa-plus"></i> Tambah Menu
            </button>
        </div>

        <!-- Product Grid -->
        <div class="product-grid">
            <?php foreach ($products as $row):
                $img_src = ($row['img'] && $row['img'] !== 'uploads/default.jpg' && file_exists($row['img']))
                    ? $row['img']
                    : 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=400&h=300&fit=crop';
            ?>
            <div class="product-card">
                <div class="img-wrap">
                    <img src="<?= $img_src ?>" alt="<?= htmlspecialchars($row['name']) ?>" loading="lazy">
                    <span class="category-pill <?= $row['category'] ?>">
                        <?= $row['category'] ?>
                    </span>
                </div>
                <div class="card-body">
                    <h3 class="card-title"><?= htmlspecialchars($row['name']) ?></h3>
                    <p class="card-price">Rp <?= number_format($row['price'], 0, ',', '.') ?></p>
                    <div class="card-actions">
                        <button onclick='openEditMenu(<?= json_encode($row) ?>)' class="btn-edit">
                            <i class="fas fa-edit"></i> Edit
                        </button>
                        <button onclick="confirmDelete(<?= $row['id'] ?>, '<?= htmlspecialchars($row['name'], ENT_QUOTES) ?>')" class="btn-delete">
                            <i class="fas fa-trash"></i> Hapus
                        </button>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>

            <?php if (empty($products)): ?>
            <div class="empty-state">
                <div class="empty-icon"><i class="fas fa-inbox"></i></div>
                <h3>Belum ada menu</h3>
                <p>Tambahkan menu pertama sekarang!</p>
                <button onclick="showModal('addModal')" class="btn-primary"><i class="fas fa-plus"></i> Tambah Menu</button>
            </div>
            <?php endif; ?>
        </div>

        <!-- Pagination -->
        <?php if ($total_pages > 1): ?>
        <div class="pagination">
            <?php for ($i=1; $i<=$total_pages; $i++): ?>
            <a href="?tab=menu&page=<?= $i ?><?= $search ? '&search='.urlencode($search) : '' ?><?= $filter_cat ? '&category='.$filter_cat : '' ?>"
               class="<?= $page==$i ? 'active' : '' ?>">
                <?= $i ?>
            </a>
            <?php endfor; ?>
        </div>
        <?php endif; ?>

        <!-- ================== TAB: VOUCHER ================== -->
        <?php elseif ($tab === 'voucher'): ?>

        <div class="section-header">
            <div>
                <h2>Kelola Voucher</h2>
                <p class="subtitle"><?= count($vouchers) ?> voucher terdaftar</p>
            </div>
            <button onclick="showModal('addVoucherModal')" class="btn-primary">
                <i class="fas fa-plus"></i> Tambah Voucher
            </button>
        </div>

        <!-- Voucher Table -->
        <div class="table-wrap">
            <div class="table-scroll">
                <table>
                    <thead>
                        <tr>
                            <th>Kode</th>
                            <th>Deskripsi</th>
                            <th class="center">Tipe</th>
                            <th class="right">Nilai</th>
                            <th class="right">Min. Order</th>
                            <th class="center">Sisa Kuota</th>
                            <th class="center">Berlaku s/d</th>
                            <th class="center">Status</th>
                            <th class="center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php if (empty($vouchers)): ?>
                        <tr><td colspan="9" style="padding:4rem 1.5rem;text-align:center;color:var(--text-tertiary);font-style:italic;">
                            <i class="fas fa-ticket" style="font-size:1.875rem;margin-bottom:0.75rem;display:block;opacity:0.3;"></i>Belum ada voucher
                        </td></tr>
                    <?php else: foreach ($vouchers as $v):
                        $expired  = strtotime($v['valid_until']) < strtotime('today');
                        $sisa_quota = $v['quota'] == 0 ? '∞' : max(0, $v['quota'] - $v['used_count']);
                        $aktif    = $v['is_active'] && !$expired;
                    ?>
                        <tr>
                            <td class="code-text"><?= htmlspecialchars($v['code']) ?></td>
                            <td class="desc-text"><?= htmlspecialchars($v['description']) ?></td>
                            <td style="text-align:center;">
                                <span class="type-pill <?= $v['discount_type']=='percent' ? 'percent' : 'flat' ?>">
                                    <?= $v['discount_type']=='percent' ? 'Persen' : 'Flat' ?>
                                </span>
                            </td>
                            <td style="text-align:right;font-weight:700;color:var(--text);">
                                <?= $v['discount_type']=='percent'
                                    ? $v['discount_value'] . '%' . ($v['max_discount']>0 ? ' <span style="font-size:0.75rem;color:var(--text-tertiary);">(max Rp '.number_format($v['max_discount'],0,',','.').')</span>' : '')
                                    : 'Rp '.number_format($v['discount_value'],0,',','.') ?>
                            </td>
                            <td style="text-align:right;color:var(--text-secondary);">
                                <?= $v['min_order']>0 ? 'Rp '.number_format($v['min_order'],0,',','.') : '—' ?>
                            </td>
                            <td style="text-align:center;font-weight:600;">
                                <?= $sisa_quota ?>
                                <?php if ($v['quota']>0): ?>
                                <span style="font-size:0.75rem;color:var(--text-tertiary);">(<?= $v['used_count'] ?> terpakai)</span>
                                <?php endif; ?>
                            </td>
                            <td style="text-align:center;color:var(--text-secondary);">
                                <?= date('d M Y', strtotime($v['valid_until'])) ?>
                                <?php if ($expired): ?><span style="display:block;font-size:0.75rem;color:var(--red);font-weight:600;">Kadaluarsa</span><?php endif; ?>
                            </td>
                            <td style="text-align:center;">
                                <span class="status-pill <?= $aktif ? 'aktif' : ($expired ? 'kadaluarsa' : 'nonaktif') ?>">
                                    <?= $aktif ? 'Aktif' : ($expired ? 'Kadaluarsa' : 'Nonaktif') ?>
                                </span>
                            </td>
                            <td>
                                <div class="action-group">
                                    <a href="?tab=voucher&toggle_voucher=<?= $v['id'] ?>"
                                       title="<?= $v['is_active'] ? 'Nonaktifkan' : 'Aktifkan' ?>"
                                       class="action-btn <?= $v['is_active'] ? 'toggle-active' : 'toggle-inactive' ?>">
                                        <i class="fas <?= $v['is_active'] ? 'fa-pause' : 'fa-play' ?>"></i>
                                    </a>
                                    <button onclick="confirmDeleteVoucher(<?= $v['id'] ?>, '<?= htmlspecialchars($v['code'], ENT_QUOTES) ?>')"
                                            class="action-btn delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; endif; ?>
                    </tbody>
                </table>
            </div>
        </div>

        <?php endif; ?>

        <!-- ================== TAB: PEMBAYARAN ================== -->
        <?php if ($tab === 'pembayaran'): ?>

        <form method="POST" enctype="multipart/form-data">
            <input type="hidden" name="action" value="save_payment_settings">

        <!-- ── METODE PEMBAYARAN ── -->
        <div class="p2-section">
            <div class="p2-section-head">
                <div class="p2-section-icon"><i class="fas fa-credit-card"></i></div>
                <div>
                    <h2>Metode Pembayaran</h2>
                    <span>Aktifkan metode yang tersedia untuk pelanggan</span>
                </div>
            </div>

            <div class="p2-card-row">
                <!-- Tunai -->
                <div class="p2-method-card">
                    <div class="p2-method-left">
                        <div class="p2-method-icon cash"><i class="fas fa-money-bill-wave"></i></div>
                        <div>
                            <div class="p2-method-name">Tunai</div>
                            <div class="p2-method-desc">Kasir input nominal & kembalian otomatis</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" name="tunai_enabled" value="1"
                               <?= ($pay_settings['tunai_enabled'] ?? '1') == '1' ? 'checked' : '' ?>>
                        <div class="toggle-slider"></div>
                    </label>
                </div>
                <!-- QRIS -->
                <div class="p2-method-card">
                    <div class="p2-method-left">
                        <div class="p2-method-icon qris"><i class="fas fa-qrcode"></i></div>
                        <div>
                            <div class="p2-method-name">QRIS</div>
                            <div class="p2-method-desc">QR Code otomatis saat checkout</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" name="qris_enabled" value="1"
                               <?= ($pay_settings['qris_enabled'] ?? '0') == '1' ? 'checked' : '' ?>>
                        <div class="toggle-slider"></div>
                    </label>
                </div>
            </div>

            <!-- QRIS Settings -->
            <div class="p2-method-card qris-detail" style="margin-top:-10px;border-top:none;border-radius:0 0 14px 14px;padding-top:0;">
                <div style="display:flex;gap:1rem;align-items:flex-start;width:100%;">
                    <div style="flex:1;">
                        <label class="field-label" style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;">Nama Merchant</label>
                        <input name="qris_merchant_name" class="input-field" placeholder="GoldenWok Resto" style="width:100%;"
                               value="<?= htmlspecialchars($pay_settings['qris_merchant_name'] ?? 'GoldenWok Resto') ?>">
                    </div>
                    <div style="flex:1;">
                        <label class="field-label" style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;">QR Code</label>
                        <?php if (!empty($pay_settings['qris_image']) && file_exists($pay_settings['qris_image'])): ?>
                            <img src="<?= htmlspecialchars($pay_settings['qris_image']) ?>" class="preview-img inline" style="width:3rem;height:3rem;margin-bottom:0;">
                        <?php endif; ?>
                        <div class="upload-area" onclick="document.getElementById('qrisImgInput').click()" style="padding:0.5rem;">
                            <i class="fas fa-cloud-upload-alt" style="font-size:1rem;"></i>
                            <p style="font-size:0.7rem;">Upload QR (PNG/JPG)</p>
                            <input type="file" name="qris_image" id="qrisImgInput" accept="image/*" onchange="previewImg(this,'qrisPreview')">
                        </div>
                        <img id="qrisPreview" src="" class="preview-img below hidden" style="width:3rem;height:3rem;">
                    </div>
                </div>
            </div>
        </div>

        <!-- ── BIAYA TAMBAHAN & PAJAK ── -->
        <div class="p2-section">
            <div class="p2-section-head">
                <div class="p2-section-icon accent"><i class="fas fa-calculator"></i></div>
                <div>
                    <h2>Biaya Tambahan & Pajak</h2>
                    <span>Atur persentase biaya per tipe order</span>
                </div>
            </div>
            <div class="p2-grid">
                <div class="p2-card accent-takeaway">
                    <div class="p2-card-icon"><i class="fas fa-shopping-bag"></i></div>
                    <div class="p2-card-info"><strong>Take Away</strong><small>Biaya bungkus</small></div>
                    <div class="p2-input">
                        <input type="number" name="takeaway_rate" value="<?= htmlspecialchars($pay_settings['takeaway_rate'] ?? '5') ?>" step="0.5" min="0" max="50">
                        <span>%</span>
                    </div>
                </div>
                <div class="p2-card accent-catering">
                    <div class="p2-card-icon"><i class="fas fa-utensils"></i></div>
                    <div class="p2-card-info"><strong>Event / Catering</strong><small>Biaya catering</small></div>
                    <div class="p2-input">
                        <input type="number" name="catering_rate" value="<?= htmlspecialchars($pay_settings['catering_rate'] ?? '10') ?>" step="0.5" min="0" max="50">
                        <span>%</span>
                    </div>
                </div>
                <div class="p2-card accent-service">
                    <div class="p2-card-icon"><i class="fas fa-concierge-bell"></i></div>
                    <div class="p2-card-info"><strong>Service Charge</strong><small>Biaya pelayanan</small></div>
                    <div class="p2-input">
                        <input type="number" name="service_rate" value="<?= htmlspecialchars($pay_settings['service_rate'] ?? '0') ?>" step="0.5" min="0" max="50">
                        <span>%</span>
                    </div>
                </div>
                <div class="p2-card accent-ppn">
                    <div class="p2-card-icon"><i class="fas fa-file-invoice"></i></div>
                    <div class="p2-card-info"><strong>PPN / Pajak</strong><small>Pajak nilai</small></div>
                    <div class="p2-input">
                        <input type="number" name="ppn_rate" value="<?= htmlspecialchars($pay_settings['ppn_rate'] ?? '0') ?>" step="0.5" min="0" max="30">
                        <span>%</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- ── PLATFORM ONLINE ── -->
        <div class="p2-section">
            <div class="p2-section-head">
                <div class="p2-section-icon driver"><i class="fas fa-motorcycle"></i></div>
                <div>
                    <h2>Platform Online</h2>
                    <span>Aktifkan & atur komisi driver</span>
                </div>
            </div>
            <div class="p2-grid">
                <div class="p2-platform gojek">
                    <div class="p2-platform-top">
                        <div class="p2-card-icon"><i class="fas fa-motorcycle"></i></div>
                        <div class="p2-card-info"><strong>Gojek</strong><small>GoFood</small></div>
                        <label class="toggle-switch">
                            <input type="checkbox" name="gojek_enabled" value="1" <?= ($pay_settings['gojek_enabled'] ?? '0') == '1' ? 'checked' : '' ?>>
                            <div class="toggle-slider"></div>
                        </label>
                    </div>
                    <div class="p2-platform-bot">
                        <span>Komisi</span>
                        <div class="p2-input">
                            <input type="number" name="gojek_rate" value="<?= htmlspecialchars($pay_settings['gojek_rate'] ?? '20') ?>" step="0.5" min="0" max="50">
                            <span>%</span>
                        </div>
                    </div>
                </div>
                <div class="p2-platform grab">
                    <div class="p2-platform-top">
                        <div class="p2-card-icon"><i class="fas fa-car"></i></div>
                        <div class="p2-card-info"><strong>Grab</strong><small>GrabFood</small></div>
                        <label class="toggle-switch">
                            <input type="checkbox" name="grab_enabled" value="1" <?= ($pay_settings['grab_enabled'] ?? '0') == '1' ? 'checked' : '' ?>>
                            <div class="toggle-slider"></div>
                        </label>
                    </div>
                    <div class="p2-platform-bot">
                        <span>Komisi</span>
                        <div class="p2-input">
                            <input type="number" name="grab_rate" value="<?= htmlspecialchars($pay_settings['grab_rate'] ?? '20') ?>" step="0.5" min="0" max="50">
                            <span>%</span>
                        </div>
                    </div>
                </div>
                <div class="p2-platform shopeefood">
                    <div class="p2-platform-top">
                        <div class="p2-card-icon"><i class="fas fa-basket-shopping"></i></div>
                        <div class="p2-card-info"><strong>ShopeeFood</strong><small>Shopee Food</small></div>
                        <label class="toggle-switch">
                            <input type="checkbox" name="shopee_enabled" value="1" <?= ($pay_settings['shopee_enabled'] ?? '0') == '1' ? 'checked' : '' ?>>
                            <div class="toggle-slider"></div>
                        </label>
                    </div>
                    <div class="p2-platform-bot">
                        <span>Komisi</span>
                        <div class="p2-input">
                            <input type="number" name="shopee_rate" value="<?= htmlspecialchars($pay_settings['shopee_rate'] ?? '20') ?>" step="0.5" min="0" max="50">
                            <span>%</span>
                        </div>
                    </div>
                </div>
                <div class="p2-platform custom">
                    <div class="p2-platform-top">
                        <div class="p2-card-icon"><i class="fas fa-plus-circle"></i></div>
                        <div class="p2-card-info"><strong>Custom</strong><small>Platform lain</small></div>
                        <label class="toggle-switch">
                            <input type="checkbox" name="custom_enabled" value="1" <?= ($pay_settings['custom_enabled'] ?? '0') == '1' ? 'checked' : '' ?>>
                            <div class="toggle-slider"></div>
                        </label>
                    </div>
                    <div class="p2-platform-bot">
                        <span>Komisi</span>
                        <div class="p2-input">
                            <input type="number" name="custom_rate" value="<?= htmlspecialchars($pay_settings['custom_rate'] ?? '0') ?>" step="0.5" min="0" max="50">
                            <span>%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ── SAVE ── -->
        <button type="submit" class="p2-save-btn">
            <i class="fas fa-save"></i> Simpan Semua Pengaturan
        </button>
        </form>

        <!-- ── TRANSFER BANK ── -->
        <div class="p2-section">
            <div class="p2-section-head" style="margin-bottom:0;">
                <div class="p2-section-icon bank-icon"><i class="fas fa-building-columns"></i></div>
                <div>
                    <h2>Transfer Bank</h2>
                    <span>Rekening tujuan transfer pelanggan</span>
                </div>
                <button onclick="showModal('addBankModal')" class="p2-add-btn" style="margin-left:auto;">
                    <i class="fas fa-plus"></i> Tambah
                </button>
            </div>

            <div class="p2-bank-wrap">
                <?php if (empty($pay_banks)): ?>
                <div class="p2-bank-empty">
                    <div class="p2-bank-empty-icon"><i class="fas fa-university"></i></div>
                    <strong>Belum ada rekening</strong>
                    <span>Klik "Tambah" untuk menambahkan rekening bank</span>
                </div>
                <?php else: ?>
                <div class="p2-grid">
                    <?php foreach ($pay_banks as $bk): 
                        $abbr = strtoupper(substr(preg_replace('/[^a-zA-Z]/', '', $bk['bank_name']), 0, 2)) ?: 'BK';
                    ?>
                    <div class="p2-bank-card">
                        <div class="p2-bank-left">
                            <div class="p2-bank-logo"><?= $abbr ?></div>
                            <div class="p2-bank-info">
                                <strong><?= htmlspecialchars($bk['bank_name']) ?></strong>
                                <code><?= htmlspecialchars($bk['account_number']) ?></code>
                                <small>a/n <?= htmlspecialchars($bk['account_name']) ?></small>
                            </div>
                        </div>
                        <div class="p2-bank-right">
                            <span class="p2-bank-status <?= $bk['is_active'] ? 'on' : 'off' ?>">
                                <?= $bk['is_active'] ? 'AKTIF' : 'OFF' ?>
                            </span>
                            <a href="?tab=pembayaran&toggle_bank=<?= $bk['id'] ?>" class="p2-bank-act" title="<?= $bk['is_active'] ? 'Nonaktifkan' : 'Aktifkan' ?>">
                                <i class="fas <?= $bk['is_active'] ? 'fa-pause' : 'fa-play' ?>"></i>
                            </a>
                            <a href="?tab=pembayaran&delete_bank=<?= $bk['id'] ?>" class="p2-bank-del" title="Hapus" onclick="return confirm('Hapus?')">
                                <i class="fas fa-trash"></i>
                            </a>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
                <?php endif; ?>
            </div>
        </div>

        <?php endif; ?>
    </main>
</div>

<!-- ==================== MODAL: TAMBAH MENU ==================== -->
<div id="addModal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Tambah Menu Baru</h2>
            <button onclick="closeModal('addModal')" class="modal-close">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form method="POST" enctype="multipart/form-data" class="modal-form">
            <input type="hidden" name="action" value="add_menu">
            <div class="field-group">
                <label class="field-label">Nama Menu</label>
                <input name="name" required placeholder="Contoh: Nasi Goreng Spesial" class="input-field">
            </div>
            <div class="field-group">
                <label class="field-label">Harga</label>
                <div class="input-prefix-wrap">
                    <span class="input-prefix">Rp</span>
                    <input name="price" type="number" min="1" required placeholder="35000" class="input-field">
                </div>
            </div>
            <div class="field-group">
                <label class="field-label">Kategori</label>
                <select name="category" class="input-field">
                    <option value="food">Food</option>
                    <option value="drink">Drink</option>
                </select>
            </div>
            <div class="field-group">
                <label class="field-label">Gambar Menu <span class="optional">(opsional)</span></label>
                <div class="upload-area" onclick="document.getElementById('addImg').click()">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <p>Klik untuk upload (JPG/PNG/GIF/WebP, max 5MB)</p>
                    <input type="file" name="image" id="addImg" accept="image/*" onchange="previewImg(this,'addPreview')">
                </div>
                <img id="addPreview" src="" class="preview-img below hidden" style="width:100%;height:9rem;object-fit:cover;">
            </div>
            <div class="modal-actions">
                <button type="button" onclick="closeModal('addModal')" class="btn-secondary">Batal</button>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-plus"></i> Tambah
                </button>
            </div>
        </form>
    </div>
</div>

<!-- ==================== MODAL: EDIT MENU ==================== -->
<div id="editModal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Edit Menu</h2>
            <button onclick="closeModal('editModal')" class="modal-close">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form method="POST" enctype="multipart/form-data" class="modal-form">
            <input type="hidden" name="action" value="edit_menu">
            <input type="hidden" name="id" id="edit_id">
            <div class="field-group">
                <label class="field-label">Nama Menu</label>
                <input name="name" id="edit_name" required class="input-field">
            </div>
            <div class="field-group">
                <label class="field-label">Harga</label>
                <div class="input-prefix-wrap">
                    <span class="input-prefix">Rp</span>
                    <input name="price" type="number" min="1" id="edit_price" required class="input-field">
                </div>
            </div>
            <div class="field-group">
                <label class="field-label">Kategori</label>
                <select name="category" id="edit_category" class="input-field">
                    <option value="food">Food</option>
                    <option value="drink">Drink</option>
                </select>
            </div>
            <div class="field-group">
                <label class="field-label">Gambar Saat Ini</label>
                <img id="edit_img_preview" src="" style="width:100%;height:9rem;object-fit:cover;border-radius:var(--radius-lg);margin-bottom:0.75rem;">
                <label class="field-label">Ganti Gambar <span class="optional">(opsional)</span></label>
                <div class="upload-area" onclick="document.getElementById('editImg').click()">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <p style="font-size:0.75rem;margin-top:0.25rem;">Klik untuk ganti gambar</p>
                    <input type="file" name="image" id="editImg" accept="image/*" onchange="previewImg(this,'edit_img_preview')">
                </div>
            </div>
            <div class="modal-actions">
                <button type="button" onclick="closeModal('editModal')" class="btn-secondary">Batal</button>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-save"></i> Simpan
                </button>
            </div>
        </form>
    </div>
</div>

<!-- ==================== MODAL: HAPUS MENU ==================== -->
<div id="deleteMenuModal" class="modal-overlay">
    <div class="modal-content center">
        <div class="modal-icon-danger"><i class="fas fa-exclamation-triangle"></i></div>
        <h3>Hapus Menu?</h3>
        <p id="deleteMenuMsg">Anda yakin ingin menghapus menu ini?</p>
        <div class="modal-actions">
            <button onclick="closeModal('deleteMenuModal')" class="btn-secondary">Batal</button>
            <a id="deleteMenuLink" href="#" class="btn-danger" style="flex:1;padding:0.75rem;border-radius:var(--radius);text-align:center;">
                <i class="fas fa-trash"></i> Hapus
            </a>
        </div>
    </div>
</div>

<!-- ==================== MODAL: TAMBAH VOUCHER ==================== -->
<div id="addVoucherModal" class="modal-overlay">
    <div class="modal-content" style="max-width:580px">
        <div class="modal-header">
            <h2>Tambah Voucher Baru</h2>
            <button onclick="closeModal('addVoucherModal')" class="modal-close">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form method="POST" class="modal-form">
            <input type="hidden" name="action" value="add_voucher">

            <div class="form-grid-2">
                <div class="field-group">
                    <label class="field-label">Kode Voucher <span class="required">*</span></label>
                    <input name="code" required placeholder="CONTOH10" class="input-field"
                           style="text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
                </div>
                <div class="field-group">
                    <label class="field-label">Tipe Diskon <span class="required">*</span></label>
                    <select name="discount_type" id="voucher_type" class="input-field" onchange="toggleMaxDiscount()">
                        <option value="flat">Flat (Rp nominal)</option>
                        <option value="percent">Persen (%)</option>
                    </select>
                </div>
            </div>

            <div class="field-group">
                <label class="field-label">Deskripsi</label>
                <input name="description" placeholder="Contoh: Diskon 10% untuk pelanggan baru" class="input-field">
            </div>

            <div class="form-grid-2">
                <div class="field-group">
                    <label class="field-label">Nilai Diskon <span class="required">*</span></label>
                    <div class="input-prefix-wrap">
                        <span id="discount_prefix" class="input-prefix">Rp</span>
                        <input name="discount_value" type="number" min="1" required placeholder="20000" class="input-field">
                    </div>
                </div>
                <div class="field-group">
                    <label class="field-label">Minimum Order</label>
                    <div class="input-prefix-wrap">
                        <span class="input-prefix">Rp</span>
                        <input name="min_order" type="number" min="0" placeholder="0 = bebas" class="input-field">
                    </div>
                </div>
            </div>

            <div class="form-grid-2">
                <div id="max_discount_wrap" class="field-group">
                    <label class="field-label">Maks. Potongan <span class="optional">(khusus %)</span></label>
                    <div class="input-prefix-wrap">
                        <span class="input-prefix">Rp</span>
                        <input name="max_discount" type="number" min="0" placeholder="0 = tanpa batas" class="input-field">
                    </div>
                </div>
                <div class="field-group">
                    <label class="field-label">Kuota Pemakaian</label>
                    <input name="quota" type="number" min="0" placeholder="0 = unlimited" class="input-field">
                </div>
            </div>

            <div class="form-grid-2">
                <div class="field-group">
                    <label class="field-label">Berlaku Dari <span class="required">*</span></label>
                    <input name="valid_from" type="date" required class="input-field"
                           value="<?= date('Y-m-d') ?>">
                </div>
                <div class="field-group">
                    <label class="field-label">Berlaku Sampai <span class="required">*</span></label>
                    <input name="valid_until" type="date" required class="input-field"
                           value="<?= date('Y-m-d', strtotime('+1 year')) ?>">
                </div>
            </div>

            <div class="modal-actions">
                <button type="button" onclick="closeModal('addVoucherModal')" class="btn-secondary">Batal</button>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-ticket"></i> Buat Voucher
                </button>
            </div>
        </form>
    </div>
</div>

<!-- ==================== MODAL: HAPUS VOUCHER ==================== -->
<div id="deleteVoucherModal" class="modal-overlay">
    <div class="modal-content center">
        <div class="modal-icon-danger"><i class="fas fa-trash-can"></i></div>
        <h3>Hapus Voucher?</h3>
        <p id="deleteVoucherMsg"></p>
        <div class="modal-actions">
            <button onclick="closeModal('deleteVoucherModal')" class="btn-secondary">Batal</button>
            <a id="deleteVoucherLink" href="#" class="btn-danger" style="flex:1;padding:0.75rem;border-radius:var(--radius);text-align:center;">
                <i class="fas fa-trash"></i> Hapus
            </a>
        </div>
    </div>
</div>

<!-- ==================== MODAL: TAMBAH BANK ==================== -->
<div id="addBankModal" class="modal-overlay">
    <div class="modal-content" style="max-width:28rem;">
        <div class="modal-header">
            <h2><i class="fas fa-building-columns" style="color:var(--accent);margin-right:0.5rem;"></i> Tambah Rekening Bank</h2>
            <button onclick="closeModal('addBankModal')" class="modal-close">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form method="POST" class="modal-form">
            <input type="hidden" name="action" value="add_bank">
            <div class="field-group">
                <label class="field-label">Nama Bank <span class="required">*</span></label>
                <input name="bank_name" required placeholder="Contoh: BCA, BRI, Mandiri, BNI..." class="input-field">
            </div>
            <div class="field-group">
                <label class="field-label">Nomor Rekening <span class="required">*</span></label>
                <input name="account_number" required placeholder="Contoh: 1234567890" class="input-field" type="text">
            </div>
            <div class="field-group">
                <label class="field-label">Atas Nama <span class="required">*</span></label>
                <input name="account_name" required placeholder="Nama pemilik rekening" class="input-field">
            </div>
            <div class="modal-actions">
                <button type="button" onclick="closeModal('addBankModal')" class="btn-secondary">Batal</button>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-plus"></i> Tambah
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function showModal(id) {
    document.getElementById(id).classList.add('active');
    document.body.style.overflow = 'hidden';
}
function closeModal(id) {
    document.getElementById(id).classList.remove('active');
    document.body.style.overflow = '';
}
document.querySelectorAll('.modal-overlay').forEach(el => {
    el.addEventListener('click', e => { if (e.target === el) closeModal(el.id); });
});
document.addEventListener('keydown', e => {
    if (e.key === 'Escape') document.querySelectorAll('.modal-overlay.active').forEach(el => closeModal(el.id));
});

// ─── Edit Menu ───────────────────────────────────────────
function openEditMenu(data) {
    document.getElementById('edit_id').value       = data.id;
    document.getElementById('edit_name').value     = data.name;
    document.getElementById('edit_price').value    = data.price;
    document.getElementById('edit_category').value = data.category;
    document.getElementById('edit_img_preview').src =
        (data.img && data.img !== 'uploads/default.jpg')
            ? data.img
            : 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=400&h=300&fit=crop';
    showModal('editModal');
}

// ─── Hapus Menu ──────────────────────────────────────────
function confirmDelete(id, name) {
    document.getElementById('deleteMenuMsg').textContent = `Yakin hapus "${name}"? Tindakan ini tidak bisa dibatalkan.`;
    document.getElementById('deleteMenuLink').href = `?tab=menu&delete_menu=${id}`;
    showModal('deleteMenuModal');
}

// ─── Hapus Voucher ───────────────────────────────────────
function confirmDeleteVoucher(id, code) {
    document.getElementById('deleteVoucherMsg').textContent = `Yakin hapus voucher "${code}"?`;
    document.getElementById('deleteVoucherLink').href = `?tab=voucher&delete_voucher=${id}`;
    showModal('deleteVoucherModal');
}

// ─── Preview Gambar ──────────────────────────────────────
function previewImg(input, previewId) {
    const prev = document.getElementById(previewId);
    if (input.files?.[0]) {
        const r = new FileReader();
        r.onload = e => { prev.src = e.target.result; prev.classList.remove('hidden'); };
        r.readAsDataURL(input.files[0]);
    }
}

// ─── Toggle Max Discount (voucher form) ─────────────────
function toggleMaxDiscount() {
    const type   = document.getElementById('voucher_type').value;
    const wrap   = document.getElementById('max_discount_wrap');
    const prefix = document.getElementById('discount_prefix');
    wrap.style.opacity  = type === 'percent' ? '1' : '.4';
    wrap.style.pointerEvents = type === 'percent' ? 'auto' : 'none';
    prefix.textContent  = type === 'percent' ? '%' : 'Rp';
}
toggleMaxDiscount(); // init
</script>
</body>
</html>