<?php
require_once __DIR__ . '/config/auth.php';
require_admin();

$pageTitle = 'User Management';
$activePage = 'users';
$pageScripts = [
    <<<'HTML'
<script>
window.crudConfig = {
    api: 'api/users.php',
    tableBody: '#userTableBody',
    form: '#userForm',
    modal: '#userModal',
    modalTitle: '#userModalTitle',
    addButton: '#addUserBtn',
    alertBox: '#ajaxAlert',
    emptyMessage: 'No users found.',
    fields: ['id', 'full_name', 'username', 'password', 'role', 'status'],
    columns: [
        { key: 'full_name' },
        { key: 'username' },
        { key: 'role' },
        { key: 'status', badge: true },
        { key: 'created_at' }
    ]
};
</script>
HTML,
    '<script src="assets/js/crud.js"></script>',
];

include __DIR__ . '/includes/header.php';
?>

<section class="content-panel">
    <div class="panel-heading">
        <div>
            <h2>Users</h2>
            <p>Add users and manage their access.</p>
        </div>
        <button class="btn btn-primary" type="button" id="addUserBtn">
            <i class="bi bi-person-plus"></i>
            Add User
        </button>
    </div>

    <div id="ajaxAlert" class="alert d-none" role="alert"></div>

    <div class="table-responsive">
        <table class="table table-hover align-middle">
            <thead>
                <tr>
                    <th>Full Name</th>
                    <th>Username</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody id="userTableBody"></tbody>
        </table>
    </div>
</section>

<div class="modal fade" id="userModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" id="userForm">
            <div class="modal-header">
                <h5 class="modal-title" id="userModalTitle">Add User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="id">
                <div class="mb-3">
                    <label class="form-label" for="full_name">Full Name</label>
                    <input class="form-control" type="text" id="full_name" name="full_name" required>
                </div>
                <div class="mb-3">
                    <label class="form-label" for="username">Username</label>
                    <input class="form-control" type="text" id="username" name="username" required>
                </div>
                <div class="mb-3">
                    <label class="form-label" for="password">Password</label>
                    <input class="form-control" type="password" id="password" name="password" autocomplete="new-password">
                    <div class="form-text">Required for new users. Leave blank to keep the current password.</div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label" for="role">Role</label>
                        <select class="form-select" id="role" name="role" required>
                            <option value="Admin">Admin</option>
                            <option value="Staff">Staff</option>
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label" for="status">Status</label>
                        <select class="form-select" id="status" name="status" required>
                            <option value="Active">Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>
</div>

<?php include __DIR__ . '/includes/footer.php'; ?>

