alrahma_sunday_school/app/Views/rolepermission/add_role.php

<?= $this->extend('layout/management_layout') ?>
<?= $this->section('content') ?>
<div class="container-fluid py-5">
    <div class="row justify-content-center">
        <div class="col-xl-6">
            <?php if (session()->getFlashdata('errors')): ?>
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <?php foreach (session()->getFlashdata('errors') as $error): ?>
                        <p class="mb-0"><?= esc($error) ?></p>
                    <?php endforeach; ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            <?php endif; ?>

            <?php if (session()->getFlashdata('error')): ?>
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <p class="mb-0"><?= esc(session()->getFlashdata('error')) ?></p>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            <?php endif; ?>

            <?php if (session()->getFlashdata('success')): ?>
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <p class="mb-0"><?= esc(session()->getFlashdata('success')) ?></p>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            <?php endif; ?>

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">add new role</h6>
                </div>
                <div class="card-body">
                    <form method="post" action="<?= site_url('/roles/store') ?>">
                        <?= csrf_field() ?>

                        <!-- Role Name -->
                        <div class="mb-3">
                            <label for="roleName" class="form-label">role name</label>
                            <input type="text"
                                   class="form-control"
                                   id="roleName"
                                   name="name"
                                   minlength="3"
                                   maxlength="255"
                                   required
                                   value="<?= esc(old('name')) ?>">
                            <div class="form-text">stored lowercase automatically.</div>
                        </div>

                        <!-- Slug (auto from name, editable) -->
                        <div class="mb-3">
                            <label for="roleSlug" class="form-label">slug</label>
                            <input type="text"
                                   class="form-control"
                                   id="roleSlug"
                                   name="slug"
                                   maxlength="64"
                                   value="<?= esc(old('slug')) ?>">
                            <div class="form-text">auto-generated from name (lowercase, a–z, 0–9, underscores).</div>
                        </div>

                        <!-- Dashboard Route -->
                        <div class="mb-3">
                            <label for="dashboardRoute" class="form-label">dashboard route</label>
                            <input type="text"
                                   class="form-control"
                                   id="dashboardRoute"
                                   name="dashboard_route"
                                   maxlength="255"
                                   required
                                   value="<?= esc(old('dashboard_route') ?? '/landing_page/guest_dashboard') ?>">
                            <div class="form-text">example: <code>/teacher_dashboard</code> or <code>administrator/administratordashboard</code> (stored lowercase).</div>
                        </div>

                        <!-- Description -->
                        <div class="mb-3">
                            <label for="roleDescription" class="form-label">description</label>
                            <textarea class="form-control"
                                      id="roleDescription"
                                      name="description"
                                      rows="3"
                                      maxlength="500"><?= esc(old('description')) ?></textarea>
                        </div>

                        <!-- Priority -->
                        <div class="mb-3">
                            <label for="rolePriority" class="form-label">priority</label>
                            <input type="number"
                                   class="form-control"
                                   id="rolePriority"
                                   name="priority"
                                   min="0"
                                   step="1"
                                   required
                                   value="<?= esc(old('priority') ?? 100) ?>">
                            <div class="form-text">lower number = higher priority when user has multiple roles.</div>
                        </div>

                        <!-- Is Active -->
                        <div class="mb-3 form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   value="1"
                                   id="roleActive"
                                   name="is_active"
                                   <?= (old('is_active', '1') === '1') ? 'checked' : '' ?>>
                            <label class="form-check-label" for="roleActive">
                                active
                            </label>
                            <!-- Hidden fallback to send 0 if unchecked via JS; server still validates -->
                            <input type="hidden" name="is_active" value="<?= (old('is_active', '1') === '1') ? '1' : '0' ?>" id="isActiveHidden">
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="<?= site_url('rolepermission/roles') ?>" class="btn btn-secondary">cancel</a>
                            <button type="submit" class="btn btn-primary">save role</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Slug + lowercase helpers -->
<script>
(function () {
    const nameEl = document.getElementById('roleName');
    const slugEl = document.getElementById('roleSlug');
    const routeEl = document.getElementById('dashboardRoute');
    const descEl  = document.getElementById('roleDescription');
    const activeCb = document.getElementById('roleActive');
    const activeHidden = document.getElementById('isActiveHidden');

    function toSlug(str) {
        return String(str || '')
            .toLowerCase()
            .replace(/[^a-z0-9]+/g, '_')
            .replace(/^_+|_+$/g, '');
    }

    // Auto-generate slug from name if slug empty or was auto-generated
    let userEditedSlug = false;
    slugEl.addEventListener('input', () => { userEditedSlug = true; });
    nameEl.addEventListener('input', () => {
        if (!userEditedSlug || slugEl.value.trim() === '') {
            slugEl.value = toSlug(nameEl.value);
        }
    });

    // Force lowercase for route + description on blur
    [routeEl, descEl].forEach(el => {
        el && el.addEventListener('blur', () => { el.value = (el.value || '').toLowerCase(); });
    });

    // Keep hidden is_active in sync so we always submit 0/1
    if (activeCb && activeHidden) {
        activeCb.addEventListener('change', () => {
            activeHidden.value = activeCb.checked ? '1' : '0';
        });
    }
})();
</script>
<?= $this->endSection() ?>