<?php
/**
 * User access mode: existing role or custom module permissions.
 *
 * Expected variables:
 *   $roles, $groupedPerms, $assignedIds, $accessMode
 *   $user (optional, for edit — pre-selects role)
 */
$accessMode = $accessMode ?? 'existing_role';
$assignedIds = $assignedIds ?? [];
$selectedRoleId = old('role_id', isset($user) ? (string) $user->role_id : '');
?>

<div class="col-12">
    <h2 class="h6 mb-2">Access &amp; Permissions</h2>
    <p class="text-muted small mb-3">
        Assign an existing role, or pick module permissions directly for this user.
    </p>
</div>

<div class="col-12">
    <div class="btn-group btn-group-sm mb-3" role="group" aria-label="Access mode">
        <input type="radio" class="btn-check" name="access_mode" id="access_existing_role" value="existing_role"
               <?= $accessMode === 'existing_role' ? 'checked' : '' ?>>
        <label class="btn btn-outline-primary" for="access_existing_role">Use existing role</label>

        <input type="radio" class="btn-check" name="access_mode" id="access_custom_permissions" value="custom_permissions"
               <?= $accessMode === 'custom_permissions' ? 'checked' : '' ?>>
        <label class="btn btn-outline-primary" for="access_custom_permissions">Custom module access</label>
    </div>
</div>

<div class="col-12" id="access-existing-role-panel">
    <label class="form-label">Role <span class="text-danger">*</span></label>
    <select name="role_id" id="role_id" class="form-select">
        <option value="">— Select a role —</option>
        <?php foreach ($roles as $r): ?>
            <?php if (str_starts_with($r['slug'] ?? '', 'custom-')) {
                continue;
            } ?>
            <option value="<?= $r['id'] ?>" <?= (string) $selectedRoleId === (string) $r['id'] ? 'selected' : '' ?>>
                <?= esc($r['name']) ?>
            </option>
        <?php endforeach; ?>
    </select>
    <div class="form-text">Standard roles from Role Management. Custom per-user roles are hidden here.</div>
</div>

<div class="col-12 d-none" id="access-custom-permissions-panel">
    <label class="form-label">Module permissions <span class="text-danger">*</span></label>
    <?= view('partials/permission_matrix', [
        'groupedPerms' => $groupedPerms,
        'assignedIds'  => $assignedIds,
    ]) ?>
    <div class="form-text mt-2">A dedicated role is created automatically for this user's selections.</div>
</div>

<script>
(function () {
    var existingPanel = document.getElementById('access-existing-role-panel');
    var customPanel = document.getElementById('access-custom-permissions-panel');
    var roleSelect = document.getElementById('role_id');
    var radios = document.querySelectorAll('input[name="access_mode"]');

    function syncAccessPanels() {
        var mode = document.querySelector('input[name="access_mode"]:checked')?.value || 'existing_role';
        var isExisting = mode === 'existing_role';
        existingPanel.classList.toggle('d-none', !isExisting);
        customPanel.classList.toggle('d-none', isExisting);
        roleSelect.required = isExisting;
        roleSelect.disabled = !isExisting;
        customPanel.querySelectorAll('input[type="checkbox"]').forEach(function (cb) {
            cb.disabled = isExisting;
        });
    }

    radios.forEach(function (radio) {
        radio.addEventListener('change', syncAccessPanels);
    });
    syncAccessPanels();
})();
</script>
