<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center border-0">
        <div>
            <h5 class="m-0 fw-bold text-primary" data-en="User Management" data-ar="إدارة المستخدمين">User Management</h5>
            <p class="text-muted small mb-0" data-en="Maintain your team accounts and security" data-ar="صيانة حسابات فريقك وأمنها">Maintain your team accounts and security</p>
        </div>
        <?php if (can('users_add')): ?>
        <button class="btn btn-primary rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#addUserModal">
            <i class="bi bi-person-plus me-1"></i> <span data-en="Invite User" data-ar="دعوة مستخدم">Invite User</span>
        </button>
        <?php endif; ?>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="bg-light">
                <tr>
                    <th class="ps-4" data-en="User Info" data-ar="معلومات المستخدم">User Info</th>
                    <th data-en="Access Level" data-ar="مستوى الوصول">Access Level</th>
                    <th data-en="Contact" data-ar="الاتصال">Contact</th>
                    <th data-en="Status" data-ar="الحالة">Status</th>
                    <th data-en="Actions" data-ar="الإجراءات" class="text-end pe-4">Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($data['users'] as $u): ?>
                <tr>
                    <td class="ps-4">
                        <div class="d-flex align-items-center">
                            <?php if (!empty($u['profile_pic'])): ?>
                                <img src="<?= htmlspecialchars((string)$u['profile_pic']) ?>?v=<?= time() ?>" alt="Avatar" class="rounded-circle me-3 shadow-sm" style="width: 35px; height: 35px; object-fit: cover;">
                            <?php else: ?>
                                <div class="avatar-sm bg-gradient-primary rounded-circle me-3 text-white d-flex align-items-center justify-content-center fw-bold" style="width: 35px; height: 35px; background: linear-gradient(135deg, #6e8efb, #a777e3);">
                                    <?= strtoupper(substr((string)$u['username'], 0, 1)) ?>
                                </div>
                            <?php endif; ?>
                            <div>
                                <div class="fw-bold text-dark"><?= htmlspecialchars((string)$u['username']) ?></div>
                                <div class="text-muted small">ID: #<?= str_pad((string)$u['id'], 4, '0', STR_PAD_LEFT) ?></div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <span class="badge rounded-pill bg-info bg-opacity-10 text-info px-3">
                            <?= htmlspecialchars((string)($u['group_name'] ?? 'No Role Assigned')) ?>
                        </span>
                    </td>
                    <td>
                        <div class="text-dark small mb-1"><i class="bi bi-envelope me-1"></i> <?= htmlspecialchars((string)($u['email'] ?? '')) ?></div>
                        <div class="text-muted small"><i class="bi bi-phone me-1"></i> <?= htmlspecialchars((string)($u['phone'] ?? '-')) ?></div>
                    </td>
                    <td>
                        <?php if ($u['status'] === 'active'): ?>
                            <span class="badge rounded-pill bg-success bg-opacity-10 text-success px-3">Active</span>
                        <?php else: ?>
                            <span class="badge rounded-pill bg-secondary bg-opacity-10 text-secondary px-3">Suspended</span>
                        <?php endif; ?>
                    </td>
                    <td class="text-end pe-4">
                        <?php if (can('users_edit')): ?>
                        <button class="btn btn-sm btn-light text-primary rounded-circle" data-bs-toggle="modal" data-bs-target="#editUserModal<?= $u['id'] ?>" title="Edit">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <?php endif; ?>
                        
                        <?php if (can('users_delete')): ?>
                        <form method="POST" class="d-inline" onsubmit="return confirm('Deactivate this user account?')">
                            <input type="hidden" name="id" value="<?= $u['id'] ?>">
                            <button type="submit" name="delete_user" class="btn btn-sm btn-light text-danger rounded-circle" title="Delete">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                        <?php endif; ?>

                        <!-- Edit User Modal -->
                        <div class="modal fade" id="editUserModal<?= $u['id'] ?>" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content border-0 shadow text-start">
                                    <div class="modal-header">
                                        <h5 class="modal-title fw-bold" data-en="Edit User Account" data-ar="تعديل حساب المستخدم">Edit User Account</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <form method="POST">
                                        <input type="hidden" name="id" value="<?= $u['id'] ?>">
                                        <div class="modal-body">
                                            <div class="mb-3">
                                                <label class="form-label fw-semibold" data-en="Username" data-ar="اسم المستخدم">Username</label>
                                                <input type="text" name="username" class="form-control" value="<?= htmlspecialchars((string)$u['username']) ?>" required>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-semibold" data-en="Email Address" data-ar="البريد الإلكتروني">Email Address</label>
                                                <input type="email" name="email" class="form-control" value="<?= htmlspecialchars((string)($u['email'] ?? '')) ?>">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-semibold" data-en="Phone Number" data-ar="رقم الهاتف">Phone Number</label>
                                                <input type="text" name="phone" class="form-control" value="<?= htmlspecialchars((string)($u['phone'] ?? '')) ?>">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-semibold" data-en="Assign Role Group" data-ar="تعيين مجموعة الأدوار">Assign Role Group</label>
                                                <select name="group_id" class="form-select">
                                                    <option value="">--- No Group ---</option>
                                                    <?php foreach (($data['role_groups'] ?? []) as $g): ?>
                                                    <option value="<?= $g['id'] ?>" <?= ($u['group_id'] ?? null) == $g['id'] ? 'selected' : '' ?>><?= htmlspecialchars((string)$g['name']) ?></option>
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-semibold" data-en="Assigned Outlets" data-ar="المنافذ المعينة">Assigned Outlets</label>
                                                <select name="outlet_ids[]" class="form-select" multiple size="3">
                                                    <?php 
                                                    $u_outlets = explode(',', $u['outlet_ids'] ?? '');
                                                    foreach ($data['outlets'] as $out): 
                                                    ?>
                                                    <option value="<?= $out['id'] ?>" <?= in_array($out['id'], $u_outlets) ? 'selected' : '' ?>>
                                                        <?= htmlspecialchars($out['name']) ?>
                                                    </option>
                                                    <?php endforeach; ?>
                                                </select>
                                                <div class="form-text small" data-en="Hold Ctrl/Cmd to select multiple" data-ar="اضغط Ctrl/Cmd لتحديد متعدد">Hold Ctrl/Cmd to select multiple.</div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-semibold" data-en="Account Status" data-ar="حالة الحساب">Account Status</label>
                                                <select name="status" class="form-select">
                                                    <option value="active" <?= $u['status'] === 'active' ? 'selected' : '' ?>>Active</option>
                                                    <option value="inactive" <?= $u['status'] === 'inactive' ? 'selected' : '' ?>>Inactive</option>
                                                </select>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-semibold" data-en="New Password" data-ar="كلمة مرور جديدة">New Password</label>
                                                <input type="password" name="password" class="form-control" placeholder="Leave blank to keep current" autocomplete="new-password">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-light rounded-pill px-3" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
                                            <button type="submit" name="edit_user" class="btn btn-primary rounded-pill px-4" data-en="Save Changes" data-ar="حفظ التغييرات">Save Changes</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?= renderPagination($data['current_page'] ?? 1, $data['total_pages'] ?? 1) ?>
</div>

<!-- Add User Modal -->
<div class="modal fade" id="addUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header">
                <h5 class="modal-title" data-en="Add New User" data-ar="إضافة مستخدم جديد">Add New User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label" data-en="Username" data-ar="اسم المستخدم">Username</label>
                        <input type="text" name="username" class="form-control" required autocomplete="username">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" data-en="Email" data-ar="البريد الإلكتروني">Email</label>
                        <input type="email" name="email" class="form-control" autocomplete="email">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" data-en="Phone" data-ar="الهاتف">Phone</label>
                        <input type="text" name="phone" class="form-control" autocomplete="tel">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" data-en="Password" data-ar="كلمة المرور">Password</label>
                        <input type="password" name="password" class="form-control" required autocomplete="new-password">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" data-en="Role Group" data-ar="مجموعة الأدوار">Role Group</label>
                        <select name="group_id" class="form-select">
                            <option value="">--- Select Group ---</option>
                            <?php foreach (($data['role_groups'] ?? []) as $g): ?>
                            <option value="<?= $g['id'] ?>"><?= htmlspecialchars($g['name']) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" data-en="Assigned Outlets" data-ar="المنافذ المعينة">Assigned Outlets</label>
                        <select name="outlet_ids[]" class="form-select" multiple size="3">
                            <?php foreach ($data['outlets'] as $out): ?>
                            <option value="<?= $out['id'] ?>"><?= htmlspecialchars($out['name']) ?></option>
                            <?php endforeach; ?>
                        </select>
                        <div class="form-text small" data-en="Hold Ctrl/Cmd to select multiple" data-ar="اضغط Ctrl/Cmd لتحديد متعدد">Hold Ctrl/Cmd to select multiple.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
                    <button type="submit" name="add_user" class="btn btn-primary" data-en="Save" data-ar="حفظ">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
