<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= esc($title) ?></title>
    <style>
        :root { --bg: #f8fafc; --card: #ffffff; --text: #0f172a; --muted: #64748b; --accent: #2563eb; --accent-2: #7c3aed; --border: #e2e8f0; --sidebar: #0f172a; }
        * { box-sizing: border-box; }
        body { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%); color: var(--text); }
        .app { display: flex; min-height: 100vh; }
        .sidebar { width: 260px; background: var(--sidebar); color: white; padding: 24px 18px; display: flex; flex-direction: column; gap: 12px; }
        .brand { font-size: 20px; font-weight: 800; margin-bottom: 20px; }
        .nav-link { display: block; padding: 12px 14px; border-radius: 12px; color: #cbd5e1; text-decoration: none; font-weight: 600; }
        .nav-link.active, .nav-link:hover { background: rgba(255,255,255,0.12); color: white; }
        .content { flex: 1; padding: 24px; }
        .hero { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: white; padding: 24px; border-radius: 24px; margin-bottom: 20px; box-shadow: 0 16px 35px rgba(37, 99, 235, 0.18); }
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
        .stat-card, .panel { background: var(--card); padding: 20px; border-radius: 20px; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08); }
        .stat-card h3 { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
        .stat-card .big { font-size: 24px; font-weight: 700; }
        .chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; margin-top: 12px; }
        .bar { flex: 1; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%); border-radius: 10px 10px 0 0; position: relative; min-height: 10px; }
        .bar span { position: absolute; bottom: -24px; width: 100%; text-align: center; font-size: 12px; color: var(--muted); }
        .panel { margin-bottom: 18px; }
        .panel h3 { margin-top: 0; }
        .table-wrap { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; }
        th { background: #f8fafc; color: var(--muted); }
        .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
        input, select, button { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; box-sizing: border-box; }
        button { cursor: pointer; border: none; font-weight: 700; }
        .btn-primary { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); color: white; }
        .btn-secondary { background: #e2e8f0; color: var(--text); }
        .link-edit { color: var(--accent); text-decoration: none; font-weight: 600; }
        .link-delete { color: #dc2626; text-decoration: none; font-weight: 600; }
        .pill { display: inline-block; padding: 6px 10px; border-radius: 999px; background: #eff6ff; color: var(--accent); font-size: 12px; font-weight: 700; margin-bottom: 8px; }
        .print-only { display: none; }
        @media (max-width: 900px) { .app { flex-direction: column; } .sidebar { width: 100%; } }
        @media print { body { background: white; } .sidebar, .no-print { display: none !important; } .content { padding: 0; } .print-only { display: block !important; } }
    </style>
</head>
<body>
<div class="app">
    <div class="sidebar no-print">
        <div class="brand">POS Barber</div>
        <a class="nav-link active" href="#dashboard">Dashboard</a>
        <a class="nav-link" href="#users">User</a>
        <a class="nav-link" href="#products">Produk</a>
        <a class="nav-link" href="#employees">Pegawai</a>
        <a class="nav-link" href="#reports">Laporan</a>
        <a class="nav-link" href="/cashier">Kasir</a>
        <a class="nav-link" href="/logout">Logout</a>
    </div>
    <div class="content">
        <div class="hero no-print">
            <div>
                <h2 style="margin:0 0 6px;">Selamat datang, <?= esc($user['name']) ?></h2>
                <p style="margin:0; opacity:0.95;">Pantau penjualan, kelola akun, layanan, barber, dan laporan dari satu tampilan yang lebih rapi.</p>
            </div>
            <a href="#" class="btn-primary" style="display:inline-block; padding:10px 16px; border-radius:999px; text-decoration:none;" onclick="window.print()">Cetak Laporan</a>
        </div>

        <div class="stats-grid" id="dashboard">
            <div class="stat-card">
                <h3>Penjualan Hari Ini</h3>
                <div class="big">Rp <?= number_format($dashboardStats['todaySales'], 0, ',', '.') ?></div>
            </div>
            <div class="stat-card">
                <h3>Penjualan Bulan Ini</h3>
                <div class="big">Rp <?= number_format($dashboardStats['monthlySales'], 0, ',', '.') ?></div>
            </div>
            <div class="stat-card">
                <h3>Total Transaksi</h3>
                <div class="big"><?= esc($stats['transactionCount']) ?></div>
            </div>
        </div>

        <div class="panel">
            <span class="pill">Grafik Penjualan</span>
            <h3>Grafik penjualan 7 hari terakhir</h3>
            <div class="chart">
                <?php foreach ($salesChart['points'] as $point) : ?>
                    <div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;">
                        <div class="bar" style="height: <?= esc($point['height']) ?>%; width:100%;"></div>
                        <span><?= esc($point['label']) ?></span>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>

        <div class="panel">
            <span class="pill">Layanan Paling Laku</span>
            <h3>Jasa / produk yang paling sering dipesan</h3>
            <ul>
                <?php foreach ($dashboardStats['topServices'] as $service) : ?>
                    <li><?= esc($service['name']) ?> — <?= esc($service['count']) ?> transaksi</li>
                <?php endforeach; ?>
            </ul>
        </div>

        <div class="panel" id="users">
            <span class="pill">User</span>
            <h3>Kelola akun login</h3>
            <form action="/owner/save-user" method="post" class="form-grid">
                <input type="text" name="username" placeholder="Username" required>
                <input type="text" name="name" placeholder="Nama" required>
                <input type="password" name="password" placeholder="Password" required>
                <select name="role">
                    <option value="owner">Owner</option>
                    <option value="cashier">Kasir</option>
                </select>
                <button class="btn-primary" type="submit">Simpan Akun</button>
            </form>
            <?php if (!empty($editUser)) : ?>
                <form action="/owner/update-user" method="post" class="form-grid" style="margin-top:12px;">
                    <input type="hidden" name="id" value="<?= esc($editUser['id']) ?>">
                    <input type="text" name="username" value="<?= esc($editUser['username']) ?>" required>
                    <input type="text" name="name" value="<?= esc($editUser['name']) ?>" required>
                    <input type="password" name="password" placeholder="Password baru (opsional)">
                    <select name="role">
                        <option value="owner" <?= $editUser['role'] === 'owner' ? 'selected' : '' ?>>Owner</option>
                        <option value="cashier" <?= $editUser['role'] === 'cashier' ? 'selected' : '' ?>>Kasir</option>
                    </select>
                    <button class="btn-secondary" type="submit">Update Akun</button>
                </form>
            <?php endif; ?>
            <div class="table-wrap">
                <table>
                    <thead><tr><th>Username</th><th>Nama</th><th>Role</th><th>Aksi</th></tr></thead>
                    <tbody>
                        <?php foreach ($users as $u) : ?>
                            <tr>
                                <td><?= esc($u['username']) ?></td>
                                <td><?= esc($u['name']) ?></td>
                                <td><?= esc($u['role']) ?></td>
                                <td>
                                    <a href="/owner?edit_user=<?= esc($u['id'], 'attr') ?>" class="link-edit">Edit</a>
                                    <span> | </span>
                                    <a href="/owner/delete-user/<?= esc($u['id'], 'attr') ?>" class="link-delete">Hapus</a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="panel" id="products">
            <span class="pill">Produk</span>
            <h3>Kelola layanan & produk</h3>
            <form action="/owner/save-item" method="post" class="form-grid">
                <input type="text" name="name" placeholder="Nama jasa/produk" required>
                <input type="number" name="price" placeholder="Harga" required>
                <select name="type">
                    <option value="service">Jasa</option>
                    <option value="product">Produk</option>
                </select>
                <button class="btn-primary" type="submit">Simpan Item</button>
            </form>
            <?php if (!empty($editItem)) : ?>
                <form action="/owner/update-item" method="post" class="form-grid" style="margin-top:12px;">
                    <input type="hidden" name="id" value="<?= esc($editItem['id']) ?>">
                    <input type="text" name="name" value="<?= esc($editItem['name']) ?>" required>
                    <input type="number" name="price" value="<?= esc($editItem['price']) ?>" required>
                    <select name="type">
                        <option value="service" <?= $editItem['type'] === 'service' ? 'selected' : '' ?>>Jasa</option>
                        <option value="product" <?= $editItem['type'] === 'product' ? 'selected' : '' ?>>Produk</option>
                    </select>
                    <button class="btn-secondary" type="submit">Update Item</button>
                </form>
            <?php endif; ?>
            <div class="table-wrap">
                <table>
                    <thead><tr><th>Nama</th><th>Harga</th><th>Jenis</th><th>Aksi</th></tr></thead>
                    <tbody>
                        <?php foreach ($items as $item) : ?>
                            <tr>
                                <td><?= esc($item['name']) ?></td>
                                <td>Rp <?= number_format($item['price'], 0, ',', '.') ?></td>
                                <td><?= esc($item['type']) ?></td>
                                <td>
                                    <a href="/owner?edit_item=<?= esc($item['id'], 'attr') ?>" class="link-edit">Edit</a>
                                    <span> | </span>
                                    <a href="/owner/delete-item/<?= esc($item['id'], 'attr') ?>" class="link-delete">Hapus</a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="panel" id="employees">
            <span class="pill">Pegawai</span>
            <h3>Kelola barber</h3>
            <form action="/owner/save-barber" method="post" class="form-grid">
                <input type="text" name="name" placeholder="Nama barber" required>
                <button class="btn-primary" type="submit">Tambah Barber</button>
            </form>
            <?php if (!empty($editBarber)) : ?>
                <form action="/owner/update-barber" method="post" class="form-grid" style="margin-top:12px;">
                    <input type="hidden" name="id" value="<?= esc($editBarber['id']) ?>">
                    <input type="text" name="name" value="<?= esc($editBarber['name']) ?>" required>
                    <button class="btn-secondary" type="submit">Update Barber</button>
                </form>
            <?php endif; ?>
            <div class="table-wrap">
                <table>
                    <thead><tr><th>Nama</th><th>Aksi</th></tr></thead>
                    <tbody>
                        <?php foreach ($barbers as $barber) : ?>
                            <tr>
                                <td><?= esc($barber['name']) ?></td>
                                <td>
                                    <a href="/owner?edit_barber=<?= esc($barber['id'], 'attr') ?>" class="link-edit">Edit</a>
                                    <span> | </span>
                                    <a href="/owner/delete-barber/<?= esc($barber['id'], 'attr') ?>" class="link-delete">Hapus</a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="panel" id="reports">
            <span class="pill">Laporan</span>
            <h3>Laporan penjualan</h3>
            <?php if (!empty($editTransaction)) : ?>
                <form action="/owner/update-transaction" method="post" class="form-grid" style="margin-top:12px;">
                    <input type="hidden" name="id" value="<?= esc($editTransaction['id']) ?>">
                    <input type="text" name="customer" value="<?= esc($editTransaction['customer']) ?>" required>
                    <input type="text" name="cashier" value="<?= esc($editTransaction['cashier']) ?>" required>
                    <input type="text" name="barber" value="<?= esc($editTransaction['barber']) ?>" required>
                    <input type="number" name="total" value="<?= esc($editTransaction['total']) ?>" required>
                    <input type="text" name="items" value="<?= esc(implode(array_map(function ($item) { return $item['name'] ?? ''; }, json_decode($editTransaction['items'], true) ?: []), ', ')) ?>" placeholder="Nama item, dipisah koma">
                    <button class="btn-secondary" type="submit">Update Transaksi</button>
                </form>
            <?php endif; ?>
            <div class="table-wrap">
                <table>
                    <thead><tr><th>Waktu</th><th>Pelanggan</th><th>Kasir</th><th>Barber</th><th>Total</th><th>Item</th><th>Aksi</th></tr></thead>
                    <tbody>
                        <?php foreach ($transactions as $tx) : ?>
                            <tr>
                                <td><?= esc($tx['created_at'] ?? '') ?></td>
                                <td><?= esc($tx['customer']) ?></td>
                                <td><?= esc($tx['cashier']) ?></td>
                                <td><?= esc($tx['barber'] ?? '-') ?></td>
                                <td>Rp <?= number_format($tx['total'], 0, ',', '.') ?></td>
                                <td>
                                    <?php $itemsList = json_decode($tx['items'], true) ?: []; foreach ($itemsList as $item) : ?>
                                        <?= esc($item['name']) ?>, 
                                    <?php endforeach; ?>
                                </td>
                                <td>
                                    <a href="/owner?edit_transaction=<?= esc($tx['id'], 'attr') ?>" class="link-edit">Edit</a>
                                    <span> | </span>
                                    <a href="/owner/delete-transaction/<?= esc($tx['id'], 'attr') ?>" class="link-delete">Hapus</a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="print-only">
    <div class="panel" style="margin:24px;">
        <h2 style="margin:0 0 8px">Laporan Penjualan Barber</h2>
        <p style="margin:0 0 12px; color:var(--muted)">Dicetak pada <?= date('d/m/Y H:i') ?></p>
        <p style="margin:4px 0"><strong>Total Penjualan:</strong> Rp <?= number_format($stats['totalSales'], 0, ',', '.') ?></p>
        <p style="margin:4px 0"><strong>Jumlah Transaksi:</strong> <?= esc($stats['transactionCount']) ?></p>
        <p style="margin:4px 0"><strong>Layanan Terlaris:</strong> <?= esc($stats['bestService']) ?></p>
        <hr>
        <table style="width:100%; border-collapse:collapse;">
            <thead><tr><th style="text-align:left; padding:6px;">Tanggal</th><th style="text-align:left; padding:6px;">Pelanggan</th><th style="text-align:left; padding:6px;">Total</th></tr></thead>
            <tbody>
                <?php foreach ($transactions as $tx) : ?>
                    <tr>
                        <td style="padding:6px;"><?= esc($tx['created_at'] ?? '') ?></td>
                        <td style="padding:6px;"><?= esc($tx['customer']) ?></td>
                        <td style="padding:6px;">Rp <?= number_format($tx['total'], 0, ',', '.') ?></td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>
