

<?php $__env->startSection('content'); ?>
<main style="display: flex; flex-direction: column; height: calc(100vh - 64px); background: #f8fafc; overflow: hidden;">
    <!-- Top Header with Breadcrumb and Actions -->
    <header style="background: white; border-bottom: 1px solid var(--border); padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; z-index: 10;">
        <div style="flex: 1;">
            <div id="breadcrumb" style="font-size: 14px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
                <span>Select Categories</span>
            </div>
            <!-- <h2 style="margin: 0; font-size: 18px; color: var(--text-main);" id="active-path-display">No category selected</h2> -->
        </div>
        
        <div style="display: flex; gap: 16px; align-items: center;">
            <!-- <div style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-right: 8px;">
                <input type="checkbox" id="auto-select-children" style="width: 16px; height: 16px;">
                <label for="auto-select-children" style="cursor: pointer;">Auto-select children</label>
            </div> -->

            <div style="position: relative;">
                <input type="text" id="categorySearch" class="input" placeholder="Search..." onkeyup="searchCategories(this.value)" style="width: 250px; padding-right: 40px;">
                <span id="searchCount" style="position: absolute; right: 12px; top: 10px; font-size: 10px; background: #e2e8f0; color: #475569; padding: 2px 6px; border-radius: 10px; display: none;"></span>
            </div>
            
            <div style="width: 1px; height: 24px; background: var(--border);"></div>
            
            <button class="btn" onclick="clearSelection()" style="padding: 8px 16px;">Clear Selection</button>
        </div>
    </header>

    <!-- Multi-Column Selection Area -->
<div id="columns-container"
     style="
        flex:1;
        display:flex;
        justify-content:center;
        align-items:flex-start; /* ✅ FIX */
        padding:40px;
     ">
</div>
    <!-- Footer - Template Details & Save -->
    <!-- <footer style="background: white; border-top: 1px solid var(--border); padding: 20px 32px; display: flex; align-items: center; gap: 32px; z-index: 10;">
        <div style="flex: 1; display: flex; align-items: center; gap: 16px;">
            <div style="width: 300px;">
                <label style="display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em;">Template Name</label>
                <input type="text" class="input" id="templateName" value="<?php echo e($template->name ?? ''); ?>" placeholder="Enter template name..." style="width: 100%; font-size: 15px;">
                <?php if(isset($template)): ?> <input type="hidden" id="templateId" value="<?php echo e($template->id); ?>"> <?php endif; ?>
            </div>
            
            <div style="flex: 1;">
                <label style="display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase;">Selection Summary</label>
                <div id="selection-summary" style="font-size: 13px; color: var(--primary); font-weight: 500;">0 categories selected</div>
            </div>
        </div>

        <div style="display: flex; gap: 12px;">
            <?php if(isset($template)): ?>
                <button class="btn" style="padding: 10px 24px;" onclick="saveNewTemplate()">Save as New</button>
                <button class="btn-primary" style="padding: 10px 24px;" onclick="updateTemplate()">Update Template</button>
            <?php else: ?>
                <button class="btn-primary" style="padding: 12px 32px; font-weight: 600;" onclick="saveNewTemplate()">Save Template</button>
            <?php endif; ?>
        </div>
    </footer> -->
</main>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('styles'); ?>
<style>
    :root {
        --col-width: 320px;
    }

    .column {
        width: 40%;
        min-width: var(--col-width);
        border-right: 1px solid var(--border);
        background: white;
        display: flex;
        flex-direction: column;
        animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
        from { transform: translateX(20px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }

    .column-header {
        padding: 14px 16px;
        background: #f1f5f9;
        border-bottom: 2px solid var(--border);
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .level-label {
        font-size: 9px;
        font-weight: 800;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .parent-name {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .category-item {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        cursor: pointer;
        transition: all 0.2s;
        border-right: 3px solid transparent;
        position: relative;
    }

    .category-item:hover {
        background: #f8fafc;
    }

    .category-item.active {
        background: var(--primary-light);
        border-right-color: var(--primary);
    }

    .category-item.active .item-name {
        color: var(--primary);
        font-weight: 600;
    }

    .selection-badge {
        background: var(--primary);
        color: white;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 10px;
        margin-left: 8px;
        font-weight: 700;
    }

    .search-highlight {
        background: #fef08a;
        padding: 2px 4px;
        border-radius: 4px;
        font-weight: 700;
        color: #854d0e;
    }

    .category-item .checkbox-wrapper {
        margin-right: 12px;
        display: flex;
        align-items: center;
    }

    .category-item .item-name {
        flex: 1;
        font-size: 14px;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .category-item .arrow {
        color: #cbd5e1;
        transition: transform 0.2s;
    }

    .category-item.active .arrow {
        color: var(--primary);
        transform: translateX(4px);
    }

    .input {
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 10px 14px;
        outline: none;
        font-size: 14px;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    /* Custom Checkbox */
    input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: var(--primary);
    }

    /* Scrollbar */
    .column-content::-webkit-scrollbar { width: 6px; }
    .column-content::-webkit-scrollbar-track { background: transparent; }
    .column-content::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
    .column-content:hover::-webkit-scrollbar-thumb { background: #cbd5e1; }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
const nodes = <?php echo json_encode($diagram, 15, 512) ?>;
let selectedCategories = new Set(<?php echo json_encode($checkedCategories ?? [], 15, 512) ?>.map(id => parseInt(id)));
let expandedNodes = new Set(); // IDs of nodes that should show their children
// let currentParent = null;       
let historyStack = [];
let backClickCount = 0;
let currentParents = [null]; // instead of single parent
const MAX_BACK_CLICKS = 3; // you can set 2 or 3
function init() {
currentParents = [null];
        renderWizard();
    updateSummary();

    // If editing, expand all paths to selected nodes
    // if (selectedCategories.size > 0) {
    //     selectedCategories.forEach(id => {
    //         expandToNode(id);
    //     });
    // }
    // renderColumns();
    // updateSummary();
}

function expandToNode(id) {
    let current = nodes.find(n => n.id == id);
    while (current && current.parent) {
        expandedNodes.add(parseInt(current.parent));
        current = nodes.find(n => n.id == current.parent);
    }
}

function getChildren(parentId) {
    return nodes.filter(n => n.parent == parentId);
}

function renderColumns() {
    const container = document.getElementById('columns-container');
    container.innerHTML = '';

    // Level 0: Roots
    renderColumn(null, 0);

    let currentLevel = 0;
    let parentsAtThisLevel = [null]; 

    while (currentLevel < 10) { 
        // Find all nodes at currentLevel that are in expandedNodes
        let nodesToExpand = Array.from(expandedNodes).filter(id => {
            let node = nodes.find(n => n.id == id);
            return node && parentsAtThisLevel.includes(node.parent);
        });

        if (nodesToExpand.length === 0) break;

        // Render children of all nodes in nodesToExpand in the NEXT column
        renderMultiParentColumn(nodesToExpand, currentLevel + 1);
        
        parentsAtThisLevel = nodesToExpand;
        currentLevel++;
    }

    updateBreadcrumb();
}

function renderMultiParentColumn(parentIds, level) {
    const container = document.getElementById('columns-container');
    const column = document.createElement('div');
            const allColumns = document.getElementsByClassName('column');
    for (let i = 0; i < allColumns.length; i++) {
        allColumns[i].style.display = 'none';
    }

    column.className = 'column';
    
    column.innerHTML = `
        <div class="column-header">
            <!-- <span class="level-label">Level ${level}</span> -->
            <span class="parent-name">Selected Children</span>
        </div>
        <div class="column-content"></div>
    `;

    const content = column.querySelector('.column-content');
    let hasAnyChildren = false;

    parentIds.forEach(parentId => {
        const children = getChildren(parentId);
        if (children.length === 0) return;
        hasAnyChildren = true;

        const parentNode = nodes.find(n => n.id == parentId);
        if (parentIds.length > 1) {
            const groupHeader = document.createElement('div');
            groupHeader.style.cssText = 'padding: 8px 16px; background: #f8fafc; font-size: 10px; font-weight: 700; color: #64748b; border-bottom: 1px solid #e2e8f0; margin-top: 8px;';
            groupHeader.innerText = `FROM: ${parentNode ? parentNode.name.toUpperCase() : 'ROOT'}`;
            content.appendChild(groupHeader);
        }

        children.forEach(node => {
            const hasSubChildren = getChildren(node.id).length > 0;
            const isExpanded = expandedNodes.has(node.id);
            const isSelected = selectedCategories.has(node.id);
            const selCount = getDescendantSelectionCount(node.id);

            const item = document.createElement('div');
            item.className = `category-item ${isExpanded ? 'active' : ''}`;
            // item.onclick = (e) => {
            //     if (e.target.type === 'checkbox') return;
            //     hasSubChildren?selectNode(node.id, level):'';
            // };

            item.innerHTML = `
                <div class="checkbox-wrapper">
                    <input type="checkbox" data-id="${node.id}" ${isSelected ? 'checked' : ''} onchange="handleCheckbox(this, event,${level})">
                    </div>
                <div class="item-name" title="${node.name}">${node.name}</div>
                ${selCount > 0 ? `<span class="selection-badge">${selCount}</span>` : ''}
                              ${hasSubChildren ? `<br><a onclick="handleNext(this,${node.id},${level})">Next</a>`:''}

            `;
            content.appendChild(item);
        });
    });
                // ${hasSubChildren ? '<div class="arrow"><i data-lucide="chevron-right" size="14"></i></div>' : ''}

    if (hasAnyChildren) {
        container.appendChild(column);
        container.scrollLeft = container.scrollWidth;
        if (window.lucide) {
            lucide.createIcons({ attrs: { size: 14 }, portal: column });
        }
    }
}

// Keep original renderColumn for Level 0 or fallback
function renderColumn(parentId, level) {
    const children = getChildren(parentId);
    const container = document.getElementById('columns-container');
    const column = document.createElement('div');
        const allColumns = document.getElementsByClassName('column');
    for (let i = 0; i < allColumns.length; i++) {
        allColumns[i].style.display = 'none';
    }

    column.className = 'column';
    // column.style.display = 'block';    
    column.innerHTML = `
        <div class="column-header">
            <!-- <span class="level-label">Level ${level}</span> -->
            <span class="parent-name">Primary Categories</span>
        </div>
        <div class="column-content"></div>
    `;

    const content = column.querySelector('.column-content');
    children.forEach(node => {
        const hasChildren = getChildren(node.id).length > 0;
        const isExpanded = expandedNodes.has(node.id);
        const isSelected = selectedCategories.has(node.id);
        const selCount = getDescendantSelectionCount(node.id);

        const item = document.createElement('div');
        item.className = `category-item ${isExpanded ? 'active' : ''}`;
        item.dataset.id = node.id;
        // item.onclick = (e) => {
        //     if (e.target.type === 'checkbox') return;
        //    hasChildren? selectNode(node.id, level):'';
        // };

        item.innerHTML = `
            <div class="checkbox-wrapper">
                <input type="checkbox" data-id="${node.id}" ${isSelected ? 'checked' : ''} onchange="handleCheckbox(this, event,${level})">

                </div>
            <div class="item-name" title="${node.name}">${node.name}</div>
            ${selCount > 0 ? `<span class="selection-badge">${selCount}</span>` : ''}
              ${hasChildren ? `<br><a onclick="handleNext(this,${node.id},${level})">Next</a>`:''}
        `;
        content.appendChild(item);
    });

    container.appendChild(column);
}
            // ${hasChildren ? '<div class="arrow"><i data-lucide="chevron-right" size="14"></i></div>' : ''}


function getDescendantSelectionCount(parentId) {
    let count = 0;
    selectedCategories.forEach(id => {
        if (id !== parentId && isAncestor(parentId, id)) {
            count++;
        }
    });
    return count;
}

function isAncestor(ancestorId, descendantId) {
    let current = nodes.find(n => n.id === descendantId);
    while (current && current.parent) {
        if (current.parent == ancestorId) return true;
        current = nodes.find(n => n.id == current.parent);
    }
    return false;
}

function selectNode(nodeId, level) {
    if (expandedNodes.has(nodeId)) {
        expandedNodes.delete(nodeId);
        collapseDescendants(nodeId);
    } else {
        expandedNodes.add(nodeId);
    }
    renderColumns();
}

function collapseDescendants(parentId) {
    let children = getChildren(parentId);
    children.forEach(child => {
        expandedNodes.delete(child.id);
        collapseDescendants(child.id);
    });
}
function handleNext(el, parentId,level) {
                let id = parseInt(parentId);
        const hasChildren = getChildren(id).length > 0;
alert(hasChildren);
                if(hasChildren){
                            selectedCategories.add(id);

        expandedNodes.add(id); // Auto-expand when checked
                autoSelectParents(id);

        }


}
function renderWizard() {
    const container = document.getElementById('columns-container');
    container.innerHTML = '';

    let groupedChildren = {};

    // ✅ Group children by parent
    currentParents.forEach(parent => {
        const childs = getChildren(parent);

        if (childs.length > 0) {
            groupedChildren[parent] = childs;
        }
    });

    const column = document.createElement('div');
    column.className = 'column';

    column.innerHTML = `
        <div class="column-header">
            <span class="parent-name">
                ${currentParents.length === 1 && currentParents[0] !== null 
                    ? getNode(currentParents[0]).name 
                    : 'Selected Categories'}
            </span>
        </div>

        <div class="column-content"></div>

        <div style="padding:10px; display:flex; justify-content:space-between;">
            ${historyStack.length > 0 
                ? `<button class="btn btn-info" onclick="goBack()">⬅ Back</button>` 
                : `<div></div>`}
            <button id="nextBtn" class="btn btn-primary" onclick="goNext()" disabled>Next ➡</button>
        </div>
    `;

    const content = column.querySelector('.column-content');

    // ✅ Loop grouped parents
    Object.keys(groupedChildren).forEach(parentId => {
        const children = groupedChildren[parentId];
        const parentNode = getNode(parentId);

        // ✅ Show header only if multiple parents
        if (currentParents.length > 1) {
            const groupHeader = document.createElement('div');
            groupHeader.style.cssText = `
                padding: 8px 16px;
                background: #f8fafc;
                font-size: 10px;
                font-weight: 700;
                color: #64748b;
                border-bottom: 1px solid #e2e8f0;
                margin-top: 8px;
            `;
            groupHeader.innerText = `FROM: ${parentNode ? parentNode.name.toUpperCase() : 'ROOT'}`;
            content.appendChild(groupHeader);
        }

        // ✅ Add children
        children.forEach(node => {
            const hasChildren = getChildren(node.id).length > 0;
            const isSelected = selectedCategories.has(node.id);

            const item = document.createElement('div');
            item.className = 'category-item';

            item.innerHTML = `
                <div class="checkbox-wrapper">
                    <input type="checkbox" 
                        data-id="${node.id}" 
                        ${isSelected ? 'checked' : ''} 
                        onchange="handleCheckbox(this)">
                </div>
                <div class="item-name">${node.name}</div>
                ${hasChildren ? '➡' : ''}
            `;

            content.appendChild(item);
        });
    });

    container.appendChild(column);

    toggleNextButton();
}function goBack() {

    backClickCount++; // increase count
    logUserActivity('clicked_back', 'User clicked the Back button in the template wizard.');

    // if (backClickCount > MAX_BACK_CLICKS) {
    //     alert("Session expired due to multiple back actions");
        
    //     // 🔥 Logout user
    //     window.location.href = "/logout"; // Laravel logout route
        
    //     return;
    // }
    if (backClickCount > MAX_BACK_CLICKS) {
    alert("Too many back attempts. Logging out...");
    logoutUser();
    return;
}

currentParents = historyStack.pop() || [null];
    renderWizard();
}
function logoutUser() {
    fetch('<?php echo e(route("logout.inactive")); ?>', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    }).then(() => {
        window.location.href = "<?php echo e(route('login')); ?>";
    });
}
function toggleNextButton() {
    const nextBtn = document.getElementById('nextBtn');

    const checked = document.querySelectorAll('.column input:checked');

    if (checked.length > 0) {
        nextBtn.disabled = false;
        nextBtn.style.opacity = "1";
    } else {
        nextBtn.disabled = true;
        nextBtn.style.opacity = "0.5";
    }
}
function goNext() {
    logUserActivity('clicked_next', 'User clicked the Next button in the template wizard.');

    const checked = Array.from(document.querySelectorAll('.column input:checked'))
        .map(cb => parseInt(cb.dataset.id));

    if (checked.length === 0) {
        alert("Select at least one category");
        return;
    }

    // Check if any selected has children
    let hasChild = checked.some(id => getChildren(id).length > 0);

    if (!hasChild) {
        alert("No more child categories");
        return;
    }

    // Save history
    historyStack.push([...currentParents]);

    // Move to next step with MULTIPLE parents
    currentParents = checked;

    renderWizard();
}
// function handleCheckbox(el, event,level) {
    
//     let id = parseInt(el.dataset.id);
//     let checked = el.checked;
//     // const autoSelect = document.getElementById('auto-select-children').checked;
//     const hasChildren = getChildren(id).length > 0;
// // alert(hasChildren);
//     if (checked) {

//         selectedCategories.add(id);
//         // if(hasChildren){
//         // expandedNodes.add(id); // Auto-expand when checked
//         // }
//         autoSelectParents(id);
//         //         if(hasChildren){
//         //     selectNode(id, level);
//         // }

//         // if (autoSelect) {
//         //     autoSelectChildren(id);
//         // }
//     } else {
//         selectedCategories.delete(id);
//         expandedNodes.delete(id); // Also collapse when unchecked
//         autoDeselectChildren(id); // ALWAYS deselect children when parent is unchecked
//     }

//     renderColumns();
//     updateSummary();
// }
function getNode(id) {
    return nodes.find(n => n.id == id);
}
function handleCheckbox(el) {
    let id = parseInt(el.dataset.id);

    if (el.checked) {
        selectedCategories.add(id);
                expandedNodes.add(id); // Auto-expand when checked

    } else {
        selectedCategories.delete(id);
    }

    toggleNextButton(); // ✅ IMPORTANT
    updateSummary();
}
function autoSelectParents(id) {
    let node = nodes.find(n => n.id === id);
    if (node && node.parent) {
        let parentId = parseInt(node.parent);
        selectedCategories.add(parentId);
        expandedNodes.add(parentId); // Also expand parents
        autoSelectParents(parentId);
    }
}

function autoSelectChildren(parentId) {
    let children = getChildren(parentId);
    children.forEach(child => {
        selectedCategories.add(child.id);
        expandedNodes.add(child.id);
        autoSelectChildren(child.id);
    });
}

function autoDeselectChildren(parentId) {
    let children = getChildren(parentId);
    children.forEach(child => {
        selectedCategories.delete(child.id);
        expandedNodes.delete(child.id);
        autoDeselectChildren(child.id);
    });
}

function updateSummary() {
    const summary = document.getElementById('selection-summary');
    summary.textContent = `${selectedCategories.size} categories selected`;
}

function updateBreadcrumb() {
    // const display = document.getElementById('active-path-display');
    const checkedRoots = Array.from(selectedCategories).filter(id => {
        let node = nodes.find(n => n.id == id);
        return node && node.parent === null;
    });

    // if (checkedRoots.length === 0 && expandedNodes.size === 0) {
    //     display.textContent = 'No category selected';
    //     return;
    // }

    // Show top-level selected labels or a more generic summary if multiple
    let selectedNames = Array.from(selectedCategories).map(id => {
        let node = nodes.find(n => n.id == id);
        return node ? node.name : '';
    }).filter(n => n !== '').slice(0, 3);
    
    let text = selectedNames.join(', ');
    if (selectedCategories.size > 3) text += ` and ${selectedCategories.size - 3} more`;
    // display.textContent = text || 'Navigating hierarchy...';
}

function clearSelection() {
    selectedCategories.clear();
    activePath = [];
    renderColumns();
    updateSummary();
}

function searchCategories(query) {
    // Clear previous highlights
    document.querySelectorAll('.item-name').forEach(el => el.classList.remove('search-highlight'));

    if (!query) {
        renderColumns();
        document.getElementById('searchCount').style.display = 'none';
        return;
    }

    query = query.toLowerCase();
    let matches = nodes.filter(n => n.name.toLowerCase().includes(query));
    
    const countEl = document.getElementById('searchCount');
    countEl.textContent = matches.length;
    countEl.style.display = 'block';

    if (matches.length > 0) {
        // Expand to the first match
        expandToNode(matches[0].id);
        renderColumns();

        // Highlight and scroll to matches
        setTimeout(() => {
            matches.forEach((match, index) => {
                let items = document.querySelectorAll(`.category-item[data-id="${match.id}"], .category-item input[data-id="${match.id}"]`);
                items.forEach(item => {
                    let label = item.closest('.category-item')?.querySelector('.item-name');
                    if (label) {
                        label.classList.add('search-highlight');
                        if (index === 0) {
                            label.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        }
                    }
                });
            });
        }, 100);
    }
}

function apiFetch(url, options = {}) {
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
    options.headers = {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': csrfToken,
        'Accept': 'application/json',
        ...options.headers
    };
    return fetch(url, options).then(async res => {
        if (!res.ok) {
            let errorMsg = 'API Error';
            try {
                let data = await res.json();
                if (data.message) errorMsg = data.message;
            } catch(e){}
            throw new Error(errorMsg);
        }
        return res.status === 204 ? null : res.json();
    });
}

function logUserActivity(action, description) {
    if (!action) return;
    apiFetch(`<?php echo e(route('log.activity')); ?>`, {
        method: 'POST',
        body: JSON.stringify({ action: action, description: description || '' })
    }).catch(err => console.error("Activity logging failed", err));
}

function saveNewTemplate() {
    let name = document.getElementById('templateName').value;
    if (!name) return alert('Please enter a template name');
    
    let checked = Array.from(selectedCategories);
    if (checked.length === 0) return alert('No categories selected.');

    apiFetch(`<?php echo e(url('admin/templates')); ?>`, {
        method: 'POST',
        body: JSON.stringify({ name: name, categories: checked })
    }).then(res => {
        alert('Template saved successfully!');
        window.location.href = `<?php echo e(url('admin/templates')); ?>`;
    }).catch(err => alert(err.message));
}

function updateTemplate() {
    let id = document.getElementById('templateId').value;
    let name = document.getElementById('templateName').value;
    if (!name) return alert('Please enter a template name');

    let checked = Array.from(selectedCategories);
    if (checked.length === 0) return alert('No categories selected.');
    
    apiFetch(`<?php echo e(url('admin/templates')); ?>/${id}`, {
        method: 'PUT',
        body: JSON.stringify({ name: name, categories: checked })
    }).then(res => {
        alert('Template updated successfully!');
    }).catch(err => alert(err.message));
}

document.addEventListener('DOMContentLoaded', init);
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\xampp\htdocs\pump-selection-backend\resources\views/pages/templates/staff-template.blade.php ENDPATH**/ ?>