<?php
$users = isset($users) ? $users : array();
?>

<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1"><i class="fa-solid fa-user-gear text-primary me-2"></i>Admin Users &amp; Permissions</h4>
            <p class="text-muted mb-0">Management of portal administrators and privilege access levels from `users` collection.</p>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUserModal">
            <i class="fa-solid fa-user-plus me-1"></i> Add Admin User
        </button>
    </div>

    <?php if ($this->session->flashdata('success')): ?>
        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm" role="alert">
            <i class="fa-solid fa-circle-check me-2"></i><?php echo $this->session->flashdata('success'); ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    <?php endif; ?>

    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-4">Admin Name</th>
                            <th>Email Address</th>
                            <th>Role &amp; Privilege</th>
                            <th>Password Access</th>
                            <th>Created Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (empty($users)): ?>
                            <tr>
                                <td class="ps-4">
                                    <div class="fw-bold text-dark">Mr.admin</div>
                                </td>
                                <td>admin@gmail.com</td>
                                <td><span class="badge bg-primary bg-opacity-10 text-primary px-3 py-1">admin</span></td>
                                <td class="font-monospace small text-muted">••••••</td>
                                <td class="small text-muted">-</td>
                            </tr>
                        <?php else: ?>
                            <?php foreach ($users as $id => $u): ?>
                                <tr>
                                    <td class="ps-4">
                                        <div class="d-flex align-items-center">
                                            <div class="p-2 bg-primary bg-opacity-10 text-primary rounded-circle me-3">
                                                <i class="fa-solid fa-user-shield"></i>
                                            </div>
                                            <div>
                                                <div class="fw-bold text-dark"><?php echo htmlspecialchars(isset($u['name']) ? $u['name'] : 'Admin'); ?></div>
                                                <div class="small text-muted font-monospace">UID: <?php echo htmlspecialchars($id); ?></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="fw-medium text-dark"><?php echo htmlspecialchars(isset($u['email']) ? $u['email'] : '-'); ?></div>
                                    </td>
                                    <td>
                                        <span class="badge bg-primary bg-opacity-10 text-primary rounded-pill px-3 py-1">
                                            <?php echo htmlspecialchars(isset($u['userRole']) ? $u['userRole'] : 'admin'); ?>
                                        </span>
                                    </td>
                                    <td class="font-monospace text-muted small">
                                        ••••••
                                    </td>
                                    <td class="small text-muted">
                                        <?php echo isset($u['createdAt']) ? date('M d, Y', $u['createdAt'] / 1000) : 'Active'; ?>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Add Admin User -->
<div class="modal fade" id="addUserModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <form action="<?php echo base_url('admin/roles_permissions'); ?>" method="post">
                <div class="modal-header border-0 pb-0 px-4 pt-4">
                    <h5 class="modal-title fw-bold"><i class="fa-solid fa-user-plus text-primary me-2"></i>Add Admin User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-4 py-3">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Admin Name</label>
                        <input type="text" name="name" class="form-control rounded-3" placeholder="Mr.admin" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Email Address</label>
                        <input type="email" name="email" class="form-control rounded-3" placeholder="admin@gmail.com" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Password</label>
                        <input type="password" name="password" class="form-control rounded-3" placeholder="123456" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Role</label>
                        <select name="userRole" class="form-select rounded-3">
                            <option value="admin" selected>Admin (Full Access)</option>
                            <option value="supervisor">Supervisor (Store Access)</option>
                            <option value="auditor">Auditor (View Only)</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer border-0 px-4 pb-4">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary px-4 fw-semibold">Create User</button>
                </div>
            </form>
        </div>
    </div>
</div>
