<?= $this->extend('layout/management_layout') ?>
</div>
</div>
<div class="row g-2 mt-2">
    <div class="col-md-4"><label class="form-label">Route Name (optional)</label><input name="route_name" id="item-route" class="form-control" placeholder="e.g. admin.dashboard"></div>
    <div class="col-md-5"><label class="form-label">URL (optional)</label><input name="url" id="item-url" class="form-control" placeholder="e.g. /administrator/student_profiles"></div>
    <div class="col-md-3"><label class="form-label">Target</label><input name="target" id="item-target" class="form-control" placeholder="_self or _blank"></div>
</div>
<div class="row g-2 mt-2">
    <div class="col-md-4"><label class="form-label">Icon (optional)</label><input name="icon" id="item-icon" class="form-control" placeholder="bi bi-people"></div>
    <div class="col-md-8"><label class="form-label">CSS class</label><input name="css_class" id="item-css" class="form-control" placeholder="nav-link-custom"></div>
</div>
<div class="mt-3">
    <label class="form-label">Visible to Roles</label>
    <div class="row g-2">
        <?php foreach ($roles as $r): $rid = md5($r); ?>
            <div class="col-md-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="roles[]" id="role-<?= $rid ?>" value="<?= esc($r) ?>">
                    <label class="form-check-label" for="role-<?= $rid ?>"><?= esc($r) ?></label>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>
<div class="mt-3 text-end">
    <button class="btn btn-success">Save Item</button>
</div>
</form>
</div>
</div>


<h5>Existing Items</h5>
<table class="table table-hover align-middle">
    <thead>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Type</th>
            <th>Parent</th>
            <th>Sort</th>
            <th>Active</th>
            <th>Roles</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($items as $it): ?>
            <tr>
                <td><?= $it['id'] ?></td>
                <td><?= esc($it['title']) ?></td>
                <td><span class="badge bg-secondary"><?= esc($it['type']) ?></span></td>
                <td><?= $it['menu_parent_id'] ? ('#' . $it['menu_parent_id']) : '-' ?></td>
                <td><?= (int)$it['sort_order'] ?></td>
                <td><?= $it['is_active'] ? 'Yes' : 'No' ?></td>
                <td>
                    <?php $r = $rolesMap[$it['id']] ?? [];
                    echo implode(', ', array_map('esc', $r)); ?>
                </td>
                <td>
                    <button class="btn btn-sm btn-outline-primary" onclick='fillEdit(<?= json_encode($it, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT) ?>, <?= json_encode($rolesMap[$it['id']] ?? []) ?>)'>Edit</button>
                    <form method="post" action="<?= site_url('admin/nav/delete-item/' . $it['id']) ?>" class="d-inline" onsubmit="return confirm('Delete item #<?= $it['id'] ?>?');">
                        <?= csrf_field() ?>
                        <button class="btn btn-sm btn-outline-danger">Delete</button>
                    </form>
                </td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>
</div>


<script>
    function fillEdit(item, roles) {
        document.getElementById('item-id').value = item.id;
        document.getElementById('item-title').value = item.title;
        document.getElementById('item-type').value = item.type;
        document.getElementById('item-parent').value = item.menu_parent_id ?? '';
        document.getElementById('item-sort').value = item.sort_order ?? 0;
        document.getElementById('item-active').value = item.is_active;
        document.getElementById('item-route').value = item.route_name ?? '';
        document.getElementById('item-url').value = item.url ?? '';
        document.getElementById('item-target').value = item.target ?? '';
        document.getElementById('item-icon').value = item.icon ?? '';
        document.getElementById('item-css').value = item.css_class ?? '';
        // Roles checkboxes
        document.querySelectorAll('input[name="roles[]"]').forEach(cb => {
            cb.checked = roles.includes(cb.value.toLowerCase());
        });
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    }
</script>
<?= $this->endSection() ?>