<?php
require 'config.php';

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

// Ambil jumlah meja dari settings (default 10)
try {
    $total_tables = (int)($pdo->query("SELECT value FROM payment_settings WHERE key_name='total_tables' LIMIT 1")->fetchColumn() ?: 10);
} catch (Exception $e) {
    $total_tables = 10;
}

$base_url = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http')
          . '://' . $_SERVER['HTTP_HOST']
          . rtrim(dirname($_SERVER['PHP_SELF']), '/\\') . '/customer.php?meja=';

$print_mode = isset($_GET['print']);
$selected   = isset($_GET['meja']) ? (int)$_GET['meja'] : 0;
?>
<!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>QR Code Meja | GoldenWok</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --primary: #1a1a2e;
            --primary-light: #2d2d4a;
            --accent: #c8a951;
            --accent-light: #e8d48b;
            --accent-bg: rgba(200,169,81,0.08);
            --bg: #f8f7f4;
            --bg-warm: #f3f1ec;
            --surface: #ffffff;
            --surface-hover: #fafaf8;
            --border: #e8e5df;
            --border-light: #f0eeea;
            --text: #1a1a2e;
            --text-secondary: #6b6b7b;
            --text-tertiary: #9a9aaa;
            --radius-sm: 10px;
            --radius: 14px;
            --radius-lg: 20px;
            --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);
        }

        body {
            background: var(--bg);
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            padding: 24px;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }

        /* ── PAGE HEADER ── */
        .page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
            flex-wrap: wrap;
            gap: 12px;
        }
        .page-title-group {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .page-icon {
            width: 44px;
            height: 44px;
            background: var(--primary);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            font-size: 1.1rem;
        }
        .page-title {
            font-weight: 800;
            font-size: 1.5rem;
            color: var(--text);
            letter-spacing: -0.02em;
        }
        .page-sub { color: var(--text-tertiary); font-size: 0.85rem; margin-top: 2px; }

        .actions { display: flex; gap: 8px; }
        .btn {
            padding: 10px 20px;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.82rem;
            cursor: pointer;
            text-decoration: none;
            border: none;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: inherit;
        }
        .btn-back {
            background: var(--surface);
            color: var(--text-secondary);
            border: 1.5px solid var(--border);
        }
        .btn-back:hover { border-color: var(--primary); color: var(--text); background: var(--surface-hover); }
        .btn-print {
            background: var(--primary);
            color: #fff;
        }
        .btn-print:hover { background: var(--primary-light); transform: translateY(-1px); box-shadow: var(--shadow); }

        /* ── SETTINGS CARD ── */
        .settings-card {
            background: var(--surface);
            border-radius: var(--radius-lg);
            padding: 18px 22px;
            margin-bottom: 24px;
            border: 1px solid var(--border-light);
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            box-shadow: var(--shadow-sm);
        }
        .settings-card label {
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 0.85rem;
        }
        .settings-card input[type=number] {
            width: 72px;
            padding: 9px 12px;
            border: 1.5px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 0.95rem;
            font-family: inherit;
            font-weight: 700;
            text-align: center;
            color: var(--text);
            background: var(--bg);
            transition: all 0.2s;
        }
        .settings-card input[type=number]:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px rgba(26,26,46,0.06); }
        .btn-save-tables {
            background: var(--primary);
            color: #fff;
            padding: 9px 20px;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.82rem;
            cursor: pointer;
            border: none;
            font-family: inherit;
            transition: all 0.2s;
        }
        .btn-save-tables:hover { background: var(--primary-light); }
        .settings-url-info {
            color: var(--text-tertiary);
            font-size: 0.78rem;
        }
        .settings-url-info code {
            background: var(--bg);
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 0.72rem;
            border: 1px solid var(--border-light);
        }

        /* ── QR GRID ── */
        .qr-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
            gap: 16px;
        }

        /* ── QR CARD ── */
        .qr-card {
            background: var(--surface);
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1.5px solid var(--border-light);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            box-shadow: var(--shadow-sm);
        }
        .qr-card:hover {
            border-color: var(--primary);
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
        }

        .qr-card-header {
            background: var(--primary);
            padding: 14px 16px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .qr-card-header::before {
            content: '';
            position: absolute;
            top: -20px;
            right: -20px;
            width: 80px;
            height: 80px;
            background: rgba(200,169,81,0.08);
            border-radius: 50%;
        }
        .qr-card-header .brand {
            font-weight: 700;
            color: var(--accent);
            font-size: 0.82rem;
            letter-spacing: 0.04em;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .qr-card-header .brand i { font-size: 0.9rem; }
        .qr-card-header .table-no {
            font-weight: 800;
            color: #fff;
            font-size: 1.4rem;
            margin-top: 4px;
            letter-spacing: -0.01em;
        }

        .qr-body {
            padding: 18px 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .qr-code-wrap {
            background: #fff;
            padding: 10px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-light);
        }

        .qr-card-footer {
            text-align: center;
            font-size: 0.72rem;
            color: var(--text-tertiary);
            padding: 0 16px 4px;
        }

        .qr-action-btns {
            display: flex;
            gap: 6px;
            width: 100%;
        }
        .qr-action-btn {
            flex: 1;
            padding: 8px;
            border-radius: var(--radius-sm);
            border: 1.5px solid var(--border);
            background: var(--bg);
            font-size: 0.72rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            color: var(--text-secondary);
            text-align: center;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            font-family: inherit;
        }
        .qr-action-btn:hover { border-color: var(--primary); color: var(--text); background: var(--surface); }
        .qr-action-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
        .qr-action-btn.primary:hover { background: var(--primary-light); }

        /* ── PRINT STYLES ── */
        @media print {
            body { background: white; padding: 0; }
            .page-header, .settings-card, .qr-action-btns { display: none !important; }
            .qr-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
            .qr-card { break-inside: avoid; border: 1px solid #ddd; box-shadow: none; }
            .qr-card-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        }
    </style>
</head>
<body>

<div class="page-header">
    <div class="page-title-group">
        <div class="page-icon"><i class="fas fa-qrcode"></i></div>
        <div>
            <div class="page-title">QR Code Meja</div>
            <div class="page-sub">Scan untuk self-order pelanggan</div>
        </div>
    </div>
    <div class="actions">
        <a href="admin.php?tab=qrmeja" class="btn btn-back"><i class="fas fa-arrow-left" style="font-size:0.7rem;"></i> Kembali</a>
        <button class="btn btn-print" onclick="window.print()"><i class="fas fa-print" style="font-size:0.75rem;"></i> Cetak Semua QR</button>
    </div>
</div>

<!-- SETTINGS -->
<div class="settings-card">
    <label><i class="fas fa-chair" style="margin-right:4px;color:var(--text-tertiary);"></i> Jumlah Meja:</label>
    <form method="POST" action="save_table_count.php" style="display:flex;align-items:center;gap:10px">
        <input type="number" name="total_tables" value="<?= $total_tables ?>" min="1" max="50">
        <button type="submit" class="btn-save-tables"><i class="fas fa-check" style="margin-right:4px;font-size:0.7rem;"></i>Simpan</button>
    </form>
    <span class="settings-url-info">URL dasar: <code><?= htmlspecialchars($base_url) ?>N</code></span>
</div>

<!-- QR GRID -->
<div class="qr-grid" id="qr-grid">
    <?php for ($t = 1; $t <= $total_tables; $t++): ?>
    <div class="qr-card" id="qr-card-<?= $t ?>">
        <div class="qr-card-header">
            <div class="brand"><i class="fas fa-fire-flame-curved"></i> GoldenWok</div>
            <div class="table-no">MEJA <?= $t ?></div>
        </div>
        <div class="qr-body">
            <div class="qr-code-wrap">
                <div id="qr-<?= $t ?>"></div>
            </div>
            <div class="qr-card-footer">Scan untuk pesan langsung dari meja ini</div>
            <div class="qr-action-btns">
                <a href="customer.php?meja=<?= $t ?>" target="_blank" class="qr-action-btn"><i class="fas fa-eye" style="font-size:0.65rem;"></i> Preview</a>
                <button class="qr-action-btn primary" onclick="printSingle(<?= $t ?>)"><i class="fas fa-print" style="font-size:0.65rem;"></i> Cetak</button>
            </div>
        </div>
    </div>
    <?php endfor; ?>
</div>

<script>
    // Generate all QR codes
    <?php for ($t = 1; $t <= $total_tables; $t++): ?>
    new QRCode(document.getElementById('qr-<?= $t ?>'), {
        text: "<?= addslashes($base_url . $t) ?>",
        width: 150,
        height: 150,
        colorDark: "#1a1a2e",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.M
    });
    <?php endfor; ?>

    function printSingle(tableNo) {
        const card = document.getElementById('qr-card-' + tableNo);
        const qrImgEl = card.querySelector('img');
        const qrSrc = qrImgEl ? qrImgEl.src : '';
        const url = "<?= addslashes($base_url) ?>" + tableNo;

        const win = window.open('', '_blank', 'width=400,height=500');
        win.document.write(`
<!DOCTYPE html>
<html><head>
<title>QR Meja ${tableNo}</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
  @page { size: 80mm 100mm; margin: 5mm; }
  body { font-family: 'Plus Jakarta Sans', sans-serif; text-align: center; padding: 12px; background: white; color: #1a1a2e; }
  .header { margin-bottom: 8px; }
  .brand { font-size: 12px; font-weight: 700; color: #c8a951; letter-spacing: 0.04em; }
  .brand i { margin-right: 4px; }
  .table-n { font-size: 22px; font-weight: 800; margin: 6px 0 10px; letter-spacing: -0.01em; }
  img { width: 160px; height: 160px; display: block; margin: 0 auto 10px; }
  .sub { font-size: 10px; color: #6b6b7b; font-weight: 500; }
  .url { font-size: 8px; color: #9a9aaa; margin-top: 6px; word-break: break-all; }
</style>
</head><body onload="window.print();window.close()">
  <div class="header">
    <div class="brand"><i class="fas fa-fire-flame-curved"></i> GoldenWok Resto</div>
    <div class="table-n">MEJA ${tableNo}</div>
  </div>
  <img src="${qrSrc}" alt="QR">
  <div class="sub">Scan untuk order langsung</div>
  <div class="url">${url}</div>
</body></html>
        `);
        win.document.close();
    }
</script>
</body>
</html>