<?php require_once __DIR__ . '/_sidebar.php'; ?>
<main class="flex-1 py-16 md:py-0 md:pl-64">
    <div class="max-w-7xl mx-auto px-4 py-8 md:py-16">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-3xl font-bold text-slate-950">Portal Users</h1>
                <p class="mt-2 text-slate-600">Manage customer portal access for viewing invoices and documents.</p>
            </div>
            <a href="<?= htmlspecialchars($baseUrl) ?>/admin/customers" class="rounded-full border border-slate-300 px-5 py-3 text-sm text-slate-950 hover:bg-slate-100">Back to Customers</a>
        </div>

        <div class="mt-8 rounded-3xl bg-white p-8 shadow-lg border border-slate-200">
            <h2 class="text-xl font-semibold text-slate-950 mb-6">Add Portal User</h2>
            <form method="post" action="<?= htmlspecialchars($baseUrl) ?>/admin/customers/portal" class="grid gap-6 md:grid-cols-4">
                <?= CSRF::input() ?>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Customer</label>
                    <select name="customer_id" class="mt-2 w-full rounded-2xl border border-slate-300 p-4 text-sm" required>
                        <option value="">Select Customer</option>
                        <?php foreach ($customers as $c): ?>
                            <option value="<?= htmlspecialchars($c['id']) ?>"><?= htmlspecialchars($c['name']) ?></option>
                        <?php endforeach; ?>
                      </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Username</label>
                    <input name="username" type="text" class="mt-2 w-full rounded-2xl border border-slate-300 p-4 text-sm" required />
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Password</label>
                    <input name="password" type="password" class="mt-2 w-full rounded-2xl border border-slate-300 p-4 text-sm" required />
                </div>
                <div class="flex items-end">
                    <button type="submit" class="rounded-full bg-charcoal px-6 py-3 text-sm font-semibold text-white hover:bg-slate-900 transition w-full">Create</button>
                </div>
            </form>
        </div>

        <div class="mt-10 overflow-x-auto rounded-3xl border border-slate-200 bg-white shadow-lg">
            <table class="min-w-full divide-y divide-slate-200 text-sm">
                <thead class="bg-charcoal text-white">
                    <tr>
                        <th class="px-6 py-4 text-left">Customer</th>
                        <th class="px-6 py-4 text-left">Username</th>
                        <th class="px-6 py-4 text-left">Status</th>
                        <th class="px-6 py-4 text-left">Created</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 bg-white">
                    <?php if (empty($portalUsers)): ?>
                        <tr>
                            <td colspan="4" class="px-6 py-10 text-center text-slate-500">No portal users found. Create one above.</td>
                        </tr>
                    <?php else: ?>
                        <?php foreach ($portalUsers as $pu): ?>
                        <tr>
                            <td class="px-6 py-4 text-slate-700"><?= htmlspecialchars($pu['customer_name']) ?></td>
                            <td class="px-6 py-4 text-slate-700"><?= htmlspecialchars($pu['username']) ?></td>
                            <td class="px-6 py-4 text-slate-700"><span class="rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-800"><?= htmlspecialchars($pu['status']) ?></span></td>
                            <td class="px-6 py-4 text-slate-500"><?= htmlspecialchars($pu['created_at']) ?></td>
                        </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</main>
</div>