<?php require_once __DIR__ . '/../../layouts/header.php'; ?>

<div class="page-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
    <h2>Manage Users & Roles</h2>
    
    <div class="header-actions" style="display: flex; align-items: center; gap: 1rem;">
        <?php if ($_SESSION['role'] === 'admin'): ?>
        <select id="branchFilter" onchange="window.location.href='?branch_id=' + this.value" style="padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(15,23,42,0.6); color: white; outline: none; min-width: 200px;">
            <option value="all" <?php echo ($selectedBranch === 'all') ? 'selected' : ''; ?>>All Branches</option>
            <?php foreach($branches as $b): ?>
                <option value="<?php echo $b['id']; ?>" <?php echo ($selectedBranch == $b['id']) ? 'selected' : ''; ?> style="background: var(--bg-dark);">
                    <?php echo htmlspecialchars($b['name']); ?>
                </option>
            <?php endforeach; ?>
        </select>
        <?php endif; ?>
        
        <a href="/users/create" class="btn-primary" style="width: auto; text-decoration: none; margin-top: 0;">+ Add User</a>
    </div>
</div>

<div class="card" style="padding: 0;">
    <div class="responsive-table-container" style="border: none; margin-bottom: 0; border-radius: 0;">
        <table style="width: 100%; border-collapse: collapse; text-align: left;">
            <thead>
                <tr style="border-bottom: 1px solid var(--glass-border); background: rgba(15,23,42,0.4);">
                    <th style="padding: 1rem; color: var(--text-muted);">Name</th>
                    <th style="padding: 1rem; color: var(--text-muted);">Email</th>
                    <th style="padding: 1rem; color: var(--text-muted);">Role</th>
                    <th style="padding: 1rem; color: var(--text-muted);">Assigned Branch</th>
                    <th style="padding: 1rem; color: var(--text-muted);">Status</th>
                    <th style="padding: 1rem; color: var(--text-muted); text-align: right;">Actions</th>
                </tr>
            </thead>
        <tbody>
            <?php foreach($users as $u): ?>
            <tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
                <td style="padding: 1rem;"><strong><?php echo htmlspecialchars($u['name']); ?></strong></td>
                <td style="padding: 1rem;"><?php echo htmlspecialchars($u['email']); ?></td>
                <td style="padding: 1rem;">
                    <span style="background: rgba(79, 70, 229, 0.2); color: #818cf8; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.85rem; text-transform: uppercase;">
                        <?php echo htmlspecialchars($u['role']); ?>
                    </span>
                </td>
                <td style="padding: 1rem;"><?php echo htmlspecialchars($u['branch_name'] ?? 'Global (All Branches)'); ?></td>
                <td style="padding: 1rem;">
                    <span style="color: <?php echo $u['status'] === 'active' ? '#34d399' : '#ef4444'; ?>;">
                        <?php echo ucfirst(htmlspecialchars($u['status'])); ?>
                    </span>
                </td>
                <td style="padding: 1rem; text-align: right; display: flex; justify-content: flex-end; gap: 0.5rem; align-items: center; border-bottom: none;">
                    <a href="/users/edit/<?php echo $u['id']; ?>" title="Edit User" style="background: rgba(79, 70, 229, 0.1); border: 1px solid rgba(79, 70, 229, 0.2); color: var(--primary-color); padding: 0.4rem; border-radius: 6px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s ease;">
                        <i class="ph ph-pencil-simple" style="font-size: 1.25rem;"></i>
                    </a>
                    <?php if ($u['id'] !== $_SESSION['user_id']): ?>
                        <button type="button" onclick="openDeleteModal(<?php echo $u['id']; ?>)" title="Delete User" style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: #ef4444; padding: 0.4rem; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center;">
                            <i class="ph ph-trash" style="font-size: 1.25rem;"></i>
                        </button>
                    <?php else: ?>
                        <span style="color: var(--text-muted); font-size: 0.8rem; padding: 0.4rem;">(You)</span>
                    <?php endif; ?>
                </td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
    </div>
</div>

<?php if(isset($totalPages) && $totalPages > 1): ?>
<div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-top: 1px solid var(--glass-border); background: var(--glass-bg); border-radius: 0 0 16px 16px;">
    <span style="color: var(--text-muted);">Showing Page <?php echo $page; ?> of <?php echo $totalPages; ?></span>
    <div style="display: flex; gap: 0.5rem;">
        <?php if($page > 1): ?>
            <a href="?page=<?php echo $page - 1; ?>" style="padding: 0.5rem 1rem; background: rgba(255,255,255,0.1); color: white; text-decoration: none; border-radius: 6px; font-size: 0.9rem;">Previous</a>
        <?php endif; ?>
        
        <?php if($page < $totalPages): ?>
            <a href="?page=<?php echo $page + 1; ?>" style="padding: 0.5rem 1rem; background: rgba(255,255,255,0.1); color: white; text-decoration: none; border-radius: 6px; font-size: 0.9rem;">Next</a>
        <?php endif; ?>
    </div>
</div>
<?php endif; ?>

<div id="deleteModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; justify-content: center; align-items: center; backdrop-filter: blur(5px);">
    <div class="card" style="width: 100%; max-width: 400px; animation: slideUp 0.3s ease;">
        <h3 style="margin-bottom: 1rem; color: #ef4444; border-bottom: 1px solid var(--glass-border); padding-bottom: 0.5rem;">Confirm Delete</h3>
        <p style="margin-bottom: 1.5rem; color: var(--text-muted);">Are you sure you want to delete this user? This action cannot be undone.</p>
        <form id="deleteForm" method="GET" action="">
            <div style="display: flex; gap: 1rem;">
                <button type="button" class="btn-primary" style="flex: 1; background: transparent; border: 1px solid var(--glass-border); margin-top: 0; color: white;" onclick="closeModals()">Cancel</button>
                <button type="submit" class="btn-primary" style="flex: 1; margin-top: 0; background: #ef4444;">Yes, Delete</button>
            </div>
        </form>
    </div>
</div>

<script>
function openDeleteModal(userId) {
    document.getElementById('deleteForm').action = '/users/destroy/' + userId;
    document.getElementById('deleteModal').style.display = 'flex';
}

function closeModals() {
    document.getElementById('deleteModal').style.display = 'none';
}

window.onclick = function(event) {
    if (event.target == document.getElementById('deleteModal')) closeModals();
}
</script>

<?php require_once __DIR__ . '/../../layouts/footer.php'; ?>
