<?php require __DIR__ . '/settings_nav.php'; ?>
<?php if ($saved): ?><div class="alert alert-success"><?= h(t('settings.permissions_saved')) ?></div><?php endif; ?>
<div class="mb-3">
    <h2 class="mb-1"><?= h(t('settings.permissions')) ?></h2>
    <div class="text-muted"><?= h(t('settings.permissions_intro')) ?></div>
</div>
<div class="alert alert-info"><strong><?= h(t('settings.safeguard')) ?></strong> <?= h(t('settings.safeguard_help')) ?>
</div>
<style>
    .permissions-table .role-start {
        border-left: 2px solid var(--tblr-border-color) !important
    }

    .permissions-table .role-shade {
        background: rgba(98, 105, 118, .035)
    }

    .permissions-table thead .role-start {
        border-left-color: rgba(98, 105, 118, .38) !important
    }

    .permissions-table thead th {
        vertical-align: middle
    }

</style>
<form method="post" action="/settings/permissions/save"><input type="hidden" name="csrf" value="<?= h(Auth::csrf()) ?>">
    <div class="card">
        <div class="table-responsive">
            <table class="table table-vcenter mb-0 permissions-table">
                <thead>
                    <tr>
                        <th style="min-width:250px"><?= h(t('settings.module')) ?></th><?php $roleIndex = 0;
foreach ($roles as $role => $roleLabel): ?><th
                            class="text-center role-start <?= $roleIndex++ % 2 ? 'role-shade' : '' ?>" colspan="2">
                            <?= h(PermissionService::roleLabel($role)) ?></th><?php endforeach; ?>
                    </tr>
                    <tr>
                        <th></th><?php $roleIndex = 0;
foreach ($roles as $role => $roleLabel): $shade = $roleIndex++ % 2 ? 'role-shade' : ''; ?><th
                            class="text-center small text-muted role-start <?= $shade ?>"><?= h(t('settings.view')) ?>
                        </th>
                        <th class="text-center small text-muted <?= $shade ?>"><?= h(t('settings.edit')) ?></th>
                        <?php endforeach; ?>
                    </tr>
                </thead>
                <tbody><?php foreach ($modules as $module => [$label,$description]): ?><tr>
                        <td>
                            <div class="fw-bold"><?= h(PermissionService::moduleLabel($module)) ?></div>
                            <div class="text-muted small"><?= h(PermissionService::moduleDescription($module)) ?></div>
                        </td><?php $roleIndex = 0;
                    foreach ($roles as $role => $roleLabel): $locked = $role === 'admin';
                        $shade = $roleIndex++ % 2 ? 'role-shade' : ''; ?><td class="text-center role-start <?= $shade ?>"><input
                                class="form-check-input permission-view" type="checkbox"
                                name="permissions[<?= h($role) ?>][<?= h($module) ?>][view]" value="1"
                                <?= $matrix[$role][$module]['view'] ? 'checked' : '' ?> <?= $locked ? 'disabled' : '' ?>
                                data-role="<?= h($role) ?>" data-module="<?= h($module) ?>"
                                aria-label="<?= h(t('settings.permission_view', ['module' => PermissionService::moduleLabel($module),'role' => PermissionService::roleLabel($role)])) ?>">
                        </td>
                        <td class="text-center <?= $shade ?>"><input class="form-check-input permission-edit"
                                type="checkbox" name="permissions[<?= h($role) ?>][<?= h($module) ?>][edit]" value="1"
                                <?= $matrix[$role][$module]['edit'] ? 'checked' : '' ?> <?= $locked ? 'disabled' : '' ?>
                                data-role="<?= h($role) ?>" data-module="<?= h($module) ?>"
                                aria-label="<?= h(t('settings.permission_edit', ['module' => PermissionService::moduleLabel($module),'role' => PermissionService::roleLabel($role)])) ?>">
                        </td><?php endforeach; ?>
                    </tr><?php endforeach; ?></tbody>
            </table>
        </div>
        <div class="card-footer d-flex justify-content-between align-items-center"><span
                class="text-muted small"><?= h(t('settings.edit_implies_view')) ?></span><button
                class="btn btn-dark"><?= h(t('settings.save_permissions')) ?></button></div>
    </div>
</form>
<script>
    document.querySelectorAll('.permission-edit').forEach(edit => edit.addEventListener('change', () => {
        if (!edit.checked) return;
        const view = document.querySelector('.permission-view[data-role="' + edit.dataset.role +
            '"][data-module="' + edit.dataset.module + '"]');
        if (view) view.checked = true;
    }));
    document.querySelectorAll('.permission-view').forEach(view => view.addEventListener('change', () => {
        if (view.checked) return;
        const edit = document.querySelector('.permission-edit[data-role="' + view.dataset.role +
            '"][data-module="' + view.dataset.module + '"]');
        if (edit) edit.checked = false;
    }));

</script>
