{% extends 'base.html' %}

{% block title %}Module & Page Hierarchy - Politory{% endblock %}

{% block content %}
<style>
    .btn-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border: none; }
    .btn-gradient:hover { background: linear-gradient(135deg, #5a6fd6 0%, #6a4292 100%); color: #fff; }
    .card { border-radius: 1rem !important; }
    .form-control:focus, .form-select:focus { border-color: #667eea; box-shadow: 0 0 0 0.2rem rgba(102,126,234,0.25); }
    .toast-container { position: fixed; top: 20px; right: 20px; z-index: 99999; }

    .confirm-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 99998; display: none; align-items: center; justify-content: center; }
    .confirm-overlay.active { display: flex; }
    .confirm-box { background: #fff; border-radius: 16px; padding: 30px; max-width: 400px; width: 90%; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
    .confirm-box .icon-circle { width: 60px; height: 60px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 15px; }

    .module-card {
        border: 2px solid #e8e8e8;
        border-radius: 12px;
        margin-bottom: 12px;
        overflow: hidden;
        transition: all 0.2s;
    }
    .module-card:hover { border-color: #667eea; }
    .module-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        padding: 12px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }
    .module-header h6 { margin: 0; font-weight: 600; }
    .module-body { padding: 0; }

    .page-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px;
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.2s;
    }
    .page-item:hover { background: #f8f9ff; }
    .page-item:last-child { border-bottom: none; }
    .page-item .page-info { display: flex; align-items: center; gap: 8px; }
    .page-item .page-info i { color: #667eea; }

    .btn-sm-action { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 0.8rem; }

    .badge-show { background: #d4edda; color: #155724; padding: 3px 8px; border-radius: 10px; font-size: 0.7rem; }
    .badge-hide { background: #f8d7da; color: #721c24; padding: 3px 8px; border-radius: 10px; font-size: 0.7rem; }

    .section-tab { cursor: pointer; padding: 12px 20px; font-weight: 600; text-align: center; border-radius: 10px 10px 0 0; transition: all 0.2s; }
    .section-tab.active { background: #fff; color: #667eea; border-bottom: 3px solid #667eea; }
    .section-tab:not(.active) { background: #f0f0f0; color: #888; }

    .no-data { text-align: center; padding: 40px 20px; color: #aaa; }
    .no-data i { font-size: 3rem; display: block; margin-bottom: 10px; }

    .form-check-input:checked { background-color: #667eea; border-color: #667eea; }

    /* Mobile */
    @media (max-width: 576px) {
        .module-header { flex-wrap: wrap; gap: 8px; }
        .page-item { flex-wrap: wrap; gap: 8px; }
    }
</style>

<!-- Toast -->
<div class="toast-container" id="toastContainer"></div>

<!-- Confirm Delete -->
<div class="confirm-overlay" id="confirmOverlay">
    <div class="confirm-box">
        <div class="icon-circle bg-danger bg-opacity-10 text-danger"><i class="bi bi-trash3"></i></div>
        <h5 class="fw-bold" id="confirmTitle">Delete?</h5>
        <p class="text-muted mb-4" id="confirmMsg">Are you sure? This cannot be undone.</p>
        <div class="d-flex gap-2 justify-content-center">
            <button class="btn btn-secondary px-4" onclick="closeConfirm()"><i class="bi bi-x-lg"></i> Cancel</button>
            <button class="btn btn-danger px-4" id="confirmDeleteBtn"><i class="bi bi-trash3"></i> Delete</button>
        </div>
    </div>
</div>

<!-- Header -->
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <h3 class="mb-0 fw-semibold"><i class="bi bi-diagram-3"></i> Module & Page Hierarchy</h3>
</div>

<!-- Tabs -->
<div class="d-flex mb-0 flex-wrap">
    <div class="section-tab active" id="tabModule" onclick="switchTab('module')">
        <i class="bi bi-folder2-open"></i> Add Module
    </div>
    <div class="section-tab" id="tabPage" onclick="switchTab('page')">
        <i class="bi bi-file-earmark-plus"></i> Add Page
    </div>
    <div class="section-tab" id="tabView" onclick="switchTab('view')">
        <i class="bi bi-eye"></i> View Hierarchy
    </div>
</div>

<!-- MODULE FORM -->
<div class="card border-0 shadow-sm mb-4" id="moduleSection">
    <div class="card-body p-3 p-md-4">
        <h5 class="fw-bold mb-3"><i class="bi bi-folder-plus text-primary"></i> Module Form</h5>
        <form id="moduleForm">
            <input type="hidden" id="moduleId" value="">
            <div class="row g-3">
                <div class="col-lg-4 col-md-6 col-12">
                    <label class="form-label fw-semibold">User <span class="text-danger">*</span></label>
                    <select class="form-select" id="moduleUserId" required>
                        <option value="">Select User</option>
                    </select>
                </div>
                <div class="col-lg-4 col-md-6 col-12">
                    <label class="form-label fw-semibold">Module Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="moduleName" placeholder="e.g. Settings" required>
                </div>
                <div class="col-lg-4 col-md-6 col-12">
                    <label class="form-label fw-semibold">Module URL</label>
                    <input type="text" class="form-control" id="moduleUrl" placeholder="e.g. settings/">
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <label class="form-label fw-semibold">Display Order</label>
                    <input type="number" class="form-control" id="moduleOrder" value="0" min="0">
                </div>

                <!-- Checkboxes -->
                <div class="col-lg-9 col-12">
                    <label class="form-label fw-semibold d-block">Permissions</label>
                    <div class="d-flex flex-wrap gap-3 mt-1">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="moduleShow" checked>
                            <label class="form-check-label" for="moduleShow">Show Module</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="moduleCanAdd">
                            <label class="form-check-label" for="moduleCanAdd">Can Add</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="moduleCanEdit">
                            <label class="form-check-label" for="moduleCanEdit">Can Edit</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="moduleCanDelete">
                            <label class="form-check-label" for="moduleCanDelete">Can Delete</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="moduleIsAdmin">
                            <label class="form-check-label" for="moduleIsAdmin">Is Admin</label>
                        </div>
                    </div>
                </div>

                <div class="col-12 d-flex gap-2 mt-3 flex-wrap">
                    <button type="submit" class="btn btn-gradient flex-fill" id="moduleSaveBtn">
                        <i class="bi bi-check-circle"></i> Save Module
                    </button>
                    <button type="button" class="btn btn-secondary flex-fill" onclick="resetModuleForm()">
                        <i class="bi bi-arrow-clockwise"></i> Reset
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- PAGE FORM -->
<div class="card border-0 shadow-sm mb-4 d-none" id="pageSection">
    <div class="card-body p-3 p-md-4">
        <h5 class="fw-bold mb-3"><i class="bi bi-file-earmark-plus text-success"></i> Page Form</h5>
        <form id="pageForm">
            <input type="hidden" id="pageId" value="">
            <div class="row g-3">
                <div class="col-lg-4 col-md-6 col-12">
                    <label class="form-label fw-semibold">Select Module <span class="text-danger">*</span></label>
                    <select class="form-select" id="pageModuleId" required>
                        <option value="">Select Module</option>
                    </select>
                </div>
                <div class="col-lg-4 col-md-6 col-12">
                    <label class="form-label fw-semibold">User <span class="text-danger">*</span></label>
                    <select class="form-select" id="pageUserId" required>
                        <option value="">Select User</option>
                    </select>
                </div>
                <div class="col-lg-4 col-md-6 col-12">
                    <label class="form-label fw-semibold">Page Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="pageName" placeholder="e.g. User Management" required>
                </div>
                <div class="col-lg-4 col-md-6 col-12">
                    <label class="form-label fw-semibold">Page URL <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="pageUrl" placeholder="e.g. user-management/" required>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <label class="form-label fw-semibold">Display Order</label>
                    <input type="number" class="form-control" id="pageOrder" value="0" min="0">
                </div>

                <div class="col-lg-5 col-12">
                    <label class="form-label fw-semibold d-block">Permissions</label>
                    <div class="d-flex flex-wrap gap-3 mt-1">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="pageShow" checked>
                            <label class="form-check-label" for="pageShow">Show Page</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="pageCanAdd">
                            <label class="form-check-label" for="pageCanAdd">Can Add</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="pageCanEdit">
                            <label class="form-check-label" for="pageCanEdit">Can Edit</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="pageCanDelete">
                            <label class="form-check-label" for="pageCanDelete">Can Delete</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="pageIsAdmin">
                            <label class="form-check-label" for="pageIsAdmin">Is Admin</label>
                        </div>
                    </div>
                </div>

                <div class="col-12 d-flex gap-2 mt-3 flex-wrap">
                    <button type="submit" class="btn btn-gradient flex-fill" id="pageSaveBtn">
                        <i class="bi bi-check-circle"></i> Save Page
                    </button>
                    <button type="button" class="btn btn-secondary flex-fill" onclick="resetPageForm()">
                        <i class="bi bi-arrow-clockwise"></i> Reset
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- VIEW HIERARCHY -->
<div class="card border-0 shadow-sm mb-4 d-none" id="viewSection">
    <div class="card-body p-3 p-md-4">
        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
            <h5 class="fw-bold mb-0"><i class="bi bi-diagram-3 text-info"></i> Hierarchy View</h5>
            <button class="btn btn-outline-primary btn-sm" onclick="loadHierarchy()">
                <i class="bi bi-arrow-clockwise"></i> Refresh
            </button>
        </div>
        <div id="hierarchyContainer">
            <div class="no-data">
                <i class="bi bi-inbox"></i>
                <p>Loading...</p>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
    const csrfToken = '{{ csrf_token }}';
    const API_URL = "{% url 'hierarchy' %}";
    let deleteType = null;
    let deleteId = null;

    // Toast
    function showToast(msg, type='success') {
        const c = document.getElementById('toastContainer');
        const icons = { success:'bi-check-circle-fill', danger:'bi-x-circle-fill', warning:'bi-exclamation-triangle-fill' };
        const t = document.createElement('div');
        t.className = `toast show align-items-center text-white bg-${type} border-0 mb-2`;
        t.innerHTML = `<div class="d-flex"><div class="toast-body"><i class="bi ${icons[type]||icons.success} me-2"></i>${msg}</div><button type="button" class="btn-close btn-close-white me-2 m-auto" onclick="this.closest('.toast').remove()"></button></div>`;
        c.appendChild(t);
        setTimeout(() => t.remove(), 3500);
    }

    // Tab switching
    function switchTab(tab) {
        document.getElementById('moduleSection').classList.toggle('d-none', tab !== 'module');
        document.getElementById('pageSection').classList.toggle('d-none', tab !== 'page');
        document.getElementById('viewSection').classList.toggle('d-none', tab !== 'view');
        document.getElementById('tabModule').classList.toggle('active', tab === 'module');
        document.getElementById('tabPage').classList.toggle('active', tab === 'page');
        document.getElementById('tabView').classList.toggle('active', tab === 'view');

        if (tab === 'page') { loadModulesDropdown('pageModuleId'); loadUsersDropdown('pageUserId'); }
        if (tab === 'module') { loadUsersDropdown('moduleUserId'); }
        if (tab === 'view') { loadHierarchy(); }
    }

    // Load users dropdown
    function loadUsersDropdown(selectId) {
        fetch(API_URL + '?action=get_all_users', { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(r => r.json())
        .then(r => {
            const sel = document.getElementById(selectId);
            const currentVal = sel.value;
            sel.innerHTML = '<option value="">Select User</option>';
            r.users.forEach(u => {
                sel.innerHTML += `<option value="${u.id}">${u.name || 'User #'+u.id}</option>`;
            });
            if (currentVal) sel.value = currentVal;
        });
    }

    // Load modules dropdown
    function loadModulesDropdown(selectId) {
        fetch(API_URL + '?action=get_modules', { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(r => r.json())
        .then(r => {
            const sel = document.getElementById(selectId);
            const currentVal = sel.value;
            sel.innerHTML = '<option value="">Select Module</option>';
            r.modules.forEach(m => {
                sel.innerHTML += `<option value="${m.moduleid}">${m.modulename || 'Module #'+m.moduleid}</option>`;
            });
            if (currentVal) sel.value = currentVal;
        });
    }

    // Init load
    loadUsersDropdown('moduleUserId');

    // Reset forms
    function resetModuleForm() {
        document.getElementById('moduleForm').reset();
        document.getElementById('moduleId').value = '';
        document.getElementById('moduleShow').checked = true;
        document.getElementById('moduleSaveBtn').innerHTML = '<i class="bi bi-check-circle"></i> Save Module';
    }
    function resetPageForm() {
        document.getElementById('pageForm').reset();
        document.getElementById('pageId').value = '';
        document.getElementById('pageShow').checked = true;
        document.getElementById('pageSaveBtn').innerHTML = '<i class="bi bi-check-circle"></i> Save Page';
    }

    // Save Module
    document.getElementById('moduleForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const moduleId = document.getElementById('moduleId').value;
        const data = {
            action: 'save_module',
            userid: document.getElementById('moduleUserId').value,
            modulename: document.getElementById('moduleName').value.trim(),
            module_url: document.getElementById('moduleUrl').value.trim(),
            displayorder: parseInt(document.getElementById('moduleOrder').value) || 0,
            showmodule: document.getElementById('moduleShow').checked,
            can_module_add: document.getElementById('moduleCanAdd').checked,
            can_module_edit: document.getElementById('moduleCanEdit').checked,
            can_module_delete: document.getElementById('moduleCanDelete').checked,
            is_admin: document.getElementById('moduleIsAdmin').checked,
        };
        if (moduleId) data.moduleid = moduleId;
        if (!data.userid || !data.modulename) { showToast('Please fill required fields!', 'warning'); return; }

        fetch(API_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
            body: JSON.stringify(data)
        })
        .then(r => r.json())
        .then(r => {
            if (r.status === 'success') { showToast(r.message, 'success'); resetModuleForm(); }
            else showToast(r.message, 'danger');
        })
        .catch(() => showToast('Something went wrong!', 'danger'));
    });

    // Save Page
    document.getElementById('pageForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const pageId = document.getElementById('pageId').value;
        const data = {
            action: 'save_page',
            moduleid: document.getElementById('pageModuleId').value,
            userid: document.getElementById('pageUserId').value,
            pagename: document.getElementById('pageName').value.trim(),
            pageurl: document.getElementById('pageUrl').value.trim(),
            displayorder: parseInt(document.getElementById('pageOrder').value) || 0,
            showpage: document.getElementById('pageShow').checked,
            can_page_add: document.getElementById('pageCanAdd').checked,
            can_page_edit: document.getElementById('pageCanEdit').checked,
            can_page_delete: document.getElementById('pageCanDelete').checked,
            is_admin: document.getElementById('pageIsAdmin').checked,
        };
        if (pageId) data.pageid = pageId;
        if (!data.moduleid || !data.userid || !data.pagename || !data.pageurl) {
            showToast('Please fill all required fields!', 'warning'); return;
        }

        fetch(API_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
            body: JSON.stringify(data)
        })
        .then(r => r.json())
        .then(r => {
            if (r.status === 'success') { showToast(r.message, 'success'); resetPageForm(); }
            else showToast(r.message, 'danger');
        })
        .catch(() => showToast('Something went wrong!', 'danger'));
    });

    // Load Hierarchy
    function loadHierarchy() {
        fetch(API_URL + '?action=get_modules', { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(r => r.json())
        .then(r => {
            const container = document.getElementById('hierarchyContainer');
            const modules = r.modules;

            if (!modules.length) {
                container.innerHTML = '<div class="no-data"><i class="bi bi-inbox"></i><p>No modules found</p></div>';
                return;
            }

            let html = '';
            let loaded = 0;
            const total = modules.length;

            modules.forEach(m => {
                fetch(API_URL + '?action=get_pages&module_id=' + m.moduleid, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then(r => r.json())
                .then(pr => {
                    const pages = pr.pages;
                    const showBadge = m.showmodule ? '<span class="badge-show">Visible</span>' : '<span class="badge-hide">Hidden</span>';

                    let card = `
                    <div class="module-card">
                        <div class="module-header" onclick="this.nextElementSibling.classList.toggle('d-none')">
                            <div>
                                <h6><i class="bi bi-folder2-open me-2"></i>${m.modulename || '-'} ${showBadge}</h6>
                                <small class="opacity-75">URL: /${m.module_url || '#'} | Order: ${m.displayorder}</small>
                            </div>
                            <div class="d-flex gap-1">
                                <button class="btn btn-sm btn-outline-light btn-sm-action" title="Edit" onclick="event.stopPropagation(); editModule(${JSON.stringify(m).replace(/"/g, '&quot;')})">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-light btn-sm-action" title="Delete" onclick="event.stopPropagation(); confirmDeleteItem('module', ${m.moduleid})">
                                    <i class="bi bi-trash3"></i>
                                </button>
                            </div>
                        </div>
                        <div class="module-body">`;

                    if (pages.length) {
                        pages.forEach(p => {
                            const pBadge = p.showpage ? '<span class="badge-show">Visible</span>' : '<span class="badge-hide">Hidden</span>';
                            card += `
                            <div class="page-item">
                                <div class="page-info">
                                    <i class="bi bi-file-earmark"></i>
                                    <div>
                                        <strong>${p.pagename || '-'}</strong> ${pBadge}
                                        <br><small class="text-muted">URL: /${p.pageurl || '#'} | Order: ${p.displayorder}</small>
                                    </div>
                                </div>
                                <div class="d-flex gap-1">
                                    <button class="btn btn-warning btn-sm-action text-white" title="Edit" onclick="editPage(${JSON.stringify(p).replace(/"/g, '&quot;')}, ${m.moduleid})">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <button class="btn btn-danger btn-sm-action" title="Delete" onclick="confirmDeleteItem('page', ${p.pageid})">
                                        <i class="bi bi-trash3"></i>
                                    </button>
                                </div>
                            </div>`;
                        });
                    } else {
                        card += `<div class="page-item text-muted"><i class="bi bi-info-circle me-2"></i>No pages in this module</div>`;
                    }

                    card += `</div></div>`;
                    container.innerHTML = (loaded === 0 ? '' : container.innerHTML) + card;
                    loaded++;
                });
            });
        })
        .catch(() => showToast('Failed to load hierarchy!', 'danger'));
    }

    // Edit Module
    function editModule(m) {
        switchTab('module');
        document.getElementById('moduleId').value = m.moduleid;
        document.getElementById('moduleUserId').value = m.userid || '';
        document.getElementById('moduleName').value = m.modulename || '';
        document.getElementById('moduleUrl').value = m.module_url || '';
        document.getElementById('moduleOrder').value = m.displayorder || 0;
        document.getElementById('moduleShow').checked = m.showmodule;
        document.getElementById('moduleCanAdd').checked = m.can_module_add;
        document.getElementById('moduleCanEdit').checked = m.can_module_edit;
        document.getElementById('moduleCanDelete').checked = m.can_module_delete;
        document.getElementById('moduleIsAdmin').checked = m.is_admin;
        document.getElementById('moduleSaveBtn').innerHTML = '<i class="bi bi-arrow-repeat"></i> Update Module';
        loadUsersDropdown('moduleUserId');
        setTimeout(() => { document.getElementById('moduleUserId').value = m.userid || ''; }, 500);
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    // Edit Page
    function editPage(p, modId) {
        switchTab('page');
        document.getElementById('pageId').value = p.pageid;
        document.getElementById('pageName').value = p.pagename || '';
        document.getElementById('pageUrl').value = p.pageurl || '';
        document.getElementById('pageOrder').value = p.displayorder || 0;
        document.getElementById('pageShow').checked = p.showpage;
        document.getElementById('pageCanAdd').checked = p.can_page_add;
        document.getElementById('pageCanEdit').checked = p.can_page_edit;
        document.getElementById('pageCanDelete').checked = p.can_page_delete;
        document.getElementById('pageIsAdmin').checked = p.is_admin;
        document.getElementById('pageSaveBtn').innerHTML = '<i class="bi bi-arrow-repeat"></i> Update Page';
        loadModulesDropdown('pageModuleId');
        loadUsersDropdown('pageUserId');
        setTimeout(() => {
            document.getElementById('pageModuleId').value = modId || p.moduleid || '';
            document.getElementById('pageUserId').value = p.userid || '';
        }, 500);
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    // Confirm Delete
    function confirmDeleteItem(type, id) {
        deleteType = type;
        deleteId = id;
        document.getElementById('confirmTitle').textContent = type === 'module' ? 'Delete Module?' : 'Delete Page?';
        document.getElementById('confirmMsg').textContent = type === 'module'
            ? 'This will delete the module and ALL its pages!'
            : 'Are you sure you want to delete this page?';
        document.getElementById('confirmOverlay').classList.add('active');
    }
    function closeConfirm() {
        deleteType = null; deleteId = null;
        document.getElementById('confirmOverlay').classList.remove('active');
    }

    document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
        if (!deleteType || !deleteId) return;
        const data = { action: deleteType === 'module' ? 'delete_module' : 'delete_page' };
        if (deleteType === 'module') data.moduleid = deleteId;
        else data.pageid = deleteId;

        fetch(API_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
            body: JSON.stringify(data)
        })
        .then(r => r.json())
        .then(r => {
            closeConfirm();
            if (r.status === 'success') { showToast(r.message, 'success'); loadHierarchy(); switchTab('view'); }
            else showToast(r.message, 'danger');
        })
        .catch(() => { closeConfirm(); showToast('Failed to delete!', 'danger'); });
    });
</script>
{% endblock %}