<div class="page-header">
    <div>
        <a href="<?= APP_URL ?>/roles" class="btn btn-ghost btn-sm mb-4" style="padding-left:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Roles
        </a>
        <h1>Edit Role: <?= e($role['name']) ?></h1>
        <div class="page-subtitle">Update role permissions and details.</div>
    </div>
</div>

<form method="POST" action="<?= APP_URL ?>/roles/<?= $role['id'] ?>/update">
    <?= Security::csrfField() ?>
    
    <div class="card">
        <div class="card-header"><h3 class="card-title">Role Details</h3></div>
        <div class="card-body">
            <div class="form-row">
                <div class="form-group">
                    <label for="name" class="form-label">Role Name <span class="required">*</span></label>
                    <input type="text" id="name" name="name" class="form-control" required value="<?= e($role['name']) ?>">
                </div>

                <div class="form-group">
                    <label for="description" class="form-label">Description</label>
                    <textarea id="description" name="description" class="form-control" rows="2"><?= e($role['description'] ?? '') ?></textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header"><h3 class="card-title">Permissions</h3></div>
        <div class="card-body">
            <div class="permissions-grid">
                <?php foreach ($permissions as $category => $perms): ?>
                    <div class="permission-category">
                        <div class="permission-category-header">
                            <h4><?= ucfirst($category) ?></h4>
                            <label class="checkbox-inline">
                                <input type="checkbox" class="select-all-category" data-category="<?= $category ?>">
                                <span>Select All</span>
                            </label>
                        </div>
                        <div class="permission-items">
                            <?php foreach ($perms as $perm): ?>
                                <label class="checkbox-inline">
                                    <input type="checkbox" name="permissions[]" value="<?= $perm['id'] ?>" data-category="<?= $category ?>" <?= in_array($perm['id'], $rolePermissionIds) ? 'checked' : '' ?>>
                                    <span><?= e($perm['display_name']) ?></span>
                                </label>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
        <div class="card-footer">
            <a href="<?= APP_URL ?>/roles" class="btn btn-outline">Cancel</a>
            <button type="submit" class="btn btn-primary">Update Role</button>
        </div>
    </div>
</form>

<style>
.permissions-grid {
    display: grid;
    gap: 1.5rem;
}

.permission-category {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
}

.permission-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.permission-category-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
}

.permission-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-inline span {
    font-size: 0.875rem;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set initial state of select all checkboxes
    document.querySelectorAll('.permission-category').forEach(category => {
        const selectAll = category.querySelector('.select-all-category');
        const checkboxes = category.querySelectorAll('input[data-category]:not(.select-all-category)');
        const allChecked = Array.from(checkboxes).every(c => c.checked);
        selectAll.checked = allChecked;
    });

    // Select all in category
    document.querySelectorAll('.select-all-category').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const category = this.dataset.category;
            const checkboxes = document.querySelectorAll(`input[data-category="${category}"]:not(.select-all-category)`);
            checkboxes.forEach(cb => cb.checked = this.checked);
        });
    });

    // Update select all checkbox when individual checkboxes change
    document.querySelectorAll('.permission-category').forEach(category => {
        const selectAll = category.querySelector('.select-all-category');
        const checkboxes = category.querySelectorAll('input[data-category]:not(.select-all-category)');
        
        checkboxes.forEach(cb => {
            cb.addEventListener('change', function() {
                const allChecked = Array.from(checkboxes).every(c => c.checked);
                selectAll.checked = allChecked;
            });
        });
    });
});
</script>
