<?php
/**
 * SalonPro X - Roles List View
 * @var array $roles List of roles with user_count
 */
?>
<div class="row">
    <div class="col-12">
        <div class="card glass-card">
            <div class="card-header">
                <div class="card-header-left">
                    <i class="fas fa-shield-alt card-icon"></i>
                    <h5 class="card-title">Roles</h5>
                </div>
                <div class="card-header-actions">
                    <?php if (can('roles_create')): ?>
                        <a href="<?= url('roles/create') ?>" class="btn btn-gold btn-sm">
                            <i class="fas fa-plus me-1"></i>Create Role
                        </a>
                    <?php endif; ?>
                </div>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-text bg-transparent"><i class="fas fa-search"></i></span>
                            <input type="text" id="roleSearch" class="form-control bg-transparent" placeholder="Search roles...">
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" id="rolesTable">
                        <thead>
                            <tr>
                                <th>Role</th>
                                <th>Description</th>
                                <th class="text-center">Users</th>
                                <th>System</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if (empty($roles)): ?>
                            <tr>
                                <td colspan="5" class="text-center py-4 text-muted">No roles found.</td>
                            </tr>
                            <?php else: ?>
                                <?php foreach ($roles as $role): ?>
                                <tr class="role-row">
                                    <td>
                                        <strong class="role-name"><?= e($role->name) ?></strong>
                                        <div class="text-muted small"><?= e($role->slug) ?></div>
                                    </td>
                                    <td class="role-desc"><?= e($role->description ?? '-') ?></td>
                                    <td class="text-center">
                                        <span class="badge bg-<?= $role->user_count > 0 ? 'gold' : 'secondary' ?>">
                                            <?= $role->user_count ?>
                                        </span>
                                    </td>
                                    <td>
                                        <?php if ($role->is_system): ?>
                                            <span class="badge bg-info">System</span>
                                        <?php else: ?>
                                            <span class="text-muted">-</span>
                                        <?php endif; ?>
                                    </td>
                                    <td class="text-end">
                                        <?php if (can('roles_edit')): ?>
                                            <a href="<?= url('roles/edit/' . $role->id) ?>" class="btn btn-sm btn-outline-gold me-1" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                        <?php endif; ?>
                                        <?php if (can('roles_delete') && !$role->is_system): ?>
                                            <button type="button" class="btn btn-sm btn-outline-danger" 
                                                    onclick="confirmDelete('<?= url('roles/delete/' . $role->id) ?>')" title="Delete">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        <?php endif; ?>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<?php $inlineScripts = <<<JS
$('#roleSearch').on('keyup', function() {
    var q = $(this).val().toLowerCase();
    $('.role-row').each(function() {
        var name = $(this).find('.role-name').text().toLowerCase();
        var desc = $(this).find('.role-desc').text().toLowerCase();
        $(this).toggle(name.indexOf(q) > -1 || desc.indexOf(q) > -1);
    });
});
JS;
?>
