File Manager

✏️ Edit File: /home/u625410797/domains/monothailand.com/public_html/views/admin/navigation.php

<style>
    .cyber-glass-panel {
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    }
    .neon-glow-blue {
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.15);
    }
    .hover-glow:hover {
        border-color: rgba(59, 130, 246, 0.3);
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
        background: rgba(15, 23, 42, 0.5);
    }
</style>

<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
    <div>
        <h1 class="text-3xl font-extrabold text-white tracking-tight flex items-center gap-3">
            <span class="p-2 bg-gradient-to-br from-blue-500/20 to-indigo-500/20 border border-slate-700/50 rounded-lg text-blue-400 shadow-md">
                <i data-lucide="navigation-2" class="w-6 h-6"></i>
            </span>
            Navigation Items
        </h1>
        <p class="text-slate-400 text-sm mt-1">Manage navigation menu items and links</p>
    </div>
    <div class="flex items-center gap-3">
        <button onclick="openPreviewModal()" class="px-4 py-2.5 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-600 transition-all flex items-center gap-2 font-semibold">
            <i data-lucide="eye" class="w-4 h-4"></i>
            Preview
        </button>
        <button onclick="openBulkActionsModal()" class="px-4 py-2.5 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-600 transition-all flex items-center gap-2 font-semibold">
            <i data-lucide="check-square" class="w-4 h-4"></i>
            Bulk Actions
        </button>
        <button onclick="openExportModal()" class="px-4 py-2.5 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-600 transition-all flex items-center gap-2 font-semibold">
            <i data-lucide="download" class="w-4 h-4"></i>
            Export
        </button>
        <a href="BASE_URL . 'admin/navigation/create" class="px-5 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-lg text-sm hover:from-blue-500 hover:to-indigo-500 transition-all flex items-center gap-2 font-bold shadow-[0_0_20px_rgba(59,130,246,0.3)] hover:scale-[1.02]">
            <i data-lucide="plus" class="w-4 h-4"></i>
            Add Item
        </a>
    </div>
</div>

<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
    <div class="flex items-center gap-2">
        <button onclick="setViewMode('table')" id="tableViewBtn" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-semibold transition-all">
            <i data-lucide="table" class="w-4 h-4 inline mr-1"></i>
            Table
        </button>
        <button onclick="setViewMode('tree')" id="treeViewBtn" class="px-4 py-2 bg-slate-700 text-white rounded-lg text-sm font-semibold hover:bg-slate-600 transition-all">
            <i data-lucide="list-tree" class="w-4 h-4 inline mr-1"></i>
            Tree
        </button>
    </div>
    <div class="relative w-full sm:w-80">
        <input type="text" id="searchNav" placeholder="Search navigation items..." onkeyup="filterNavigation()" class="w-full px-4 py-2 pl-10 bg-slate-800/60 border border-slate-700 rounded-lg text-slate-200 placeholder-slate-500 focus:border-blue-500 focus:outline-none">
        <i data-lucide="search" class="w-4 h-4 text-slate-500 absolute left-3 top-1/2 -translate-y-1/2"></i>
    </div>
</div>

<div class="cyber-glass-panel rounded-xl border border-slate-800/80 shadow-glass overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-left">
            <thead class="bg-slate-900/80 border-b border-slate-800 text-slate-300">
                <tr>
                    <th class="px-5 py-4 text-xs font-semibold uppercase tracking-wider text-slate-400 w-12">
                        <input type="checkbox" id="selectAll" onclick="toggleSelectAll()" class="w-4 h-4 rounded border-slate-600 bg-slate-800 text-blue-500 focus:ring-blue-500">
                    </th>
                    <th class="px-5 py-4 text-xs font-semibold uppercase tracking-wider text-slate-400">ID</th>
                    <th class="px-5 py-4 text-xs font-semibold uppercase tracking-wider text-slate-400">Label</th>
                    <th class="px-5 py-4 text-xs font-semibold uppercase tracking-wider text-slate-400">URL</th>
                    <th class="px-5 py-4 text-xs font-semibold uppercase tracking-wider text-slate-400">Parent</th>
                    <th class="px-5 py-4 text-xs font-semibold uppercase tracking-wider text-slate-400">Order</th>
                    <th class="px-5 py-4 text-xs font-semibold uppercase tracking-wider text-slate-400">Status</th>
                    <th class="px-5 py-4 text-xs font-semibold uppercase tracking-wider text-slate-400 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800/60 bg-slate-950/20" id="navTableBody">
                <?php if (empty($navItems)): ?>
                    <tr>
                        <td colspan="8" class="px-5 py-12 text-center">
                            <div class="flex flex-col items-center justify-center space-y-3">
                                <span class="p-4 bg-slate-900/60 rounded-full border border-slate-800 text-slate-500 shadow-md">
                                    <i data-lucide="navigation-2" class="w-10 h-10"></i>
                                </span>
                                <h3 class="text-lg font-bold text-white">No navigation items found</h3>
                                <p class="text-sm text-slate-400 max-w-sm">No navigation items exist yet. Create your first navigation item to start organizing your site navigation.</p>
                                <a href="BASE_URL . 'admin/navigation/create" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-semibold hover:bg-blue-500 hover:scale-[1.01] transition-all inline-block mt-2">
                                    Create your first item
                                </a>
                            </div>
                        </td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($navItems as $item): ?>
                        <tr class="hover-glow transition-all duration-300 group nav-item-row" data-id="<?= $item['id'] ?>" data-title="<?= e($item['title'] ?? $item['label'] ?? '') ?>" data-url="<?= e($item['url'] ?? '') ?>">
                            <td class="px-5 py-4">
                                <input type="checkbox" class="nav-checkbox w-4 h-4 rounded border-slate-600 bg-slate-800 text-blue-500 focus:ring-blue-500" value="<?= $item['id'] ?>">
                            </td>
                            <td class="px-5 py-4">
                                <span class="text-slate-300 font-mono text-sm"><?= $item['id'] ?></span>
                            </td>
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 bg-gradient-to-br from-blue-500/10 to-indigo-500/10 border border-blue-500/20 group-hover:border-blue-500/40 rounded-lg flex items-center justify-center transition-colors">
                                        <i data-lucide="link" class="w-5 h-5 text-blue-400"></i>
                                    </div>
                                    <div class="min-w-0">
                                        <p class="font-bold text-white group-hover:text-blue-400 transition-colors"><?= e($item['title'] ?? $item['label'] ?? '') ?></p>
                                        <?php if (!empty($item['icon'])): ?>
                                            <p class="text-xs text-slate-500"><?= e($item['icon']) ?></p>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-2">
                                    <span class="text-slate-300 text-sm truncate max-w-xs"><?= e($item['url'] ?? '#') ?></span>
                                    <?php if (!empty($item['target']) && $item['target'] === '_blank'): ?>
                                        <i data-lucide="external-link" class="w-3 h-3 text-slate-500"></i>
                                    <?php endif; ?>
                                </div>
                            </td>
                            <td class="px-5 py-4">
                                <?php if (!empty($item['parent_id'])): ?>
                                    <span class="px-2.5 py-1 rounded-full text-xs font-semibold bg-purple-500/10 text-purple-400 border border-purple-500/20 flex items-center gap-1.5 w-fit">
                                        <i data-lucide="git-branch" class="w-3 h-3 text-purple-400"></i>
                                        <?= $item['parent_label'] ?? '#' . $item['parent_id'] ?>
                                    </span>
                                <?php else: ?>
                                    <span class="text-slate-500 text-sm">-</span>
                                <?php endif; ?>
                            </td>
                            <td class="px-5 py-4">
                                <span class="text-slate-300 font-mono"><?= $item['sort_order'] ?? 0 ?></span>
                            </td>
                            <td class="px-5 py-4">
                                <button onclick="toggleNavItemStatus(<?= $item['id'] ?>, <?= $item['is_active'] ?? 1 ?>, this)" class="status-toggle-btn cursor-pointer transition-all duration-200" data-id="<?= $item['id'] ?>" data-current-status="<?= $item['is_active'] ?? 1 ?>">
                                    <?php if ($item['is_active'] ?? 1): ?>
                                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-mono hover:bg-emerald-500/20">
                                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-1.5 animate-pulse"></span>
                                            Active
                                        </span>
                                    <?php else: ?>
                                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-slate-800 text-slate-400 border border-slate-700 font-mono hover:bg-slate-700">
                                            <span class="w-1.5 h-1.5 rounded-full bg-slate-500 mr-1.5"></span>
                                            Inactive
                                        </span>
                                    <?php endif; ?>
                                </button>
                            </td>
                            <td class="px-5 py-4 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <button onclick="duplicateNavItem(<?= $item['id'] ?>)" class="p-2 bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 hover:border-emerald-500/50 hover:bg-emerald-500/20 rounded-lg transition-all hover:scale-105" title="Duplicate Item">
                                        <i data-lucide="copy" class="w-4 h-4"></i>
                                    </button>
                                    <a href="BASE_URL . 'admin/navigation/<?= $item['id'] ?>" class="p-2 bg-blue-500/10 text-blue-400 border border-blue-500/20 hover:border-blue-500/50 hover:bg-blue-500/20 rounded-lg transition-all hover:scale-105" title="Edit Item">
                                        <i data-lucide="edit-3" class="w-4 h-4"></i>
                                    </a>
                                    <button onclick="deleteNavItem(<?= $item['id'] ?>, '<?= e(addslashes($item['title'] ?? $item['label'] ?? 'Item')) ?>')" class="p-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:border-red-500/50 hover:bg-red-500/20 rounded-lg transition-all hover:scale-105" title="Delete Item">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

<div id="treeView" class="hidden p-6">
        <div id="navTree" class="space-y-2">
            <?php if (empty($navItems)): ?>
                <div class="text-center py-12">
                    <span class="p-4 bg-slate-900/60 rounded-full border border-slate-800 text-slate-500 shadow-md">
                        <i data-lucide="navigation-2" class="w-10 h-10"></i>
                    </span>
                    <h3 class="text-lg font-bold text-white mt-3">No navigation items found</h3>
                    <p class="text-sm text-slate-400 max-w-sm mt-2">No navigation items exist yet. Create your first navigation item to start organizing your site navigation.</p>
                    <a href="BASE_URL . 'admin/navigation/create" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-semibold hover:bg-blue-500 hover:scale-[1.01] transition-all inline-block mt-2">
                        Create your first item
                    </a>
                </div>
            <?php else: ?>
                <?php echo buildNavigationTree($navItems); ?>
            <?php endif; ?>
        </div>
    </div>
</div>

// View mode toggle
function setViewMode(mode) {
    const tableView = document.getElementById('tableView');
    const treeView = document.getElementById('treeView');
    const tableBtn = document.getElementById('tableViewBtn');
    const treeBtn = document.getElementById('treeViewBtn');
    
    if (mode === 'table') {
        tableView.classList.remove('hidden');
        treeView.classList.add('hidden');
        tableBtn.classList.remove('bg-slate-700');
        tableBtn.classList.add('bg-blue-600');
        treeBtn.classList.remove('bg-blue-600');
        treeBtn.classList.add('bg-slate-700');
    } else {
        tableView.classList.add('hidden');
        treeView.classList.remove('hidden');
        treeBtn.classList.remove('bg-slate-700');
        treeBtn.classList.add('bg-blue-600');
        tableBtn.classList.remove('bg-blue-600');
        tableBtn.classList.add('bg-slate-700');
    }
}

// Filter navigation items
function filterNavigation() {
    const searchTerm = document.getElementById('searchNav').value.toLowerCase();
    const rows = document.querySelectorAll('.nav-item-row');
    
    rows.forEach(row => {
        const title = row.dataset.title.toLowerCase();
        const url = row.dataset.url.toLowerCase();
        
        if (title.includes(searchTerm) || url.includes(searchTerm)) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

// Toggle select all checkboxes
function toggleSelectAll() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.nav-checkbox');
    
    checkboxes.forEach(cb => {
        cb.checked = selectAll.checked;
    });
}

// Duplicate navigation item
async function duplicateNavItem(itemId) {
    if (!confirm('Are you sure you want to duplicate this item?')) {
        return;
    }
    
    try {
        const response = await fetch('BASE_URL . 'api/navigation.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                type: 'duplicate',
                id: itemId
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            window.location.reload();
        } else {
            alert('Failed to duplicate item: ' + (data.error || 'Unknown error'));
        }
    } catch (error) {
        console.error('Error duplicating navigation item:', error);
        alert('An error occurred while duplicating the item. Please try again.');
    }
}

// Open bulk actions modal
function openBulkActionsModal() {
    const selectedIds = Array.from(document.querySelectorAll('.nav-checkbox:checked')).map(cb => cb.value);
    
    if (selectedIds.length === 0) {
        alert('Please select at least one item to perform bulk actions.');
        return;
    }
    
    const modal = document.createElement('div');
    modal.className = 'fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50';
    modal.innerHTML = `
        <div class="cyber-glass-panel rounded-xl border border-slate-800/80 shadow-glass p-6 max-w-md w-full mx-4">
            <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
                <i data-lucide="check-square" class="w-5 h-5 text-blue-400"></i>
                Bulk Actions
            </h3>
            <p class="text-slate-400 mb-6">Selected ${selectedIds.length} item(s)</p>
            <div class="space-y-3">
                <button onclick="bulkActivate(${JSON.stringify(selectedIds)})" class="w-full px-4 py-3 bg-emerald-600/20 text-emerald-400 border border-emerald-500/30 rounded-lg hover:bg-emerald-600/30 transition-all flex items-center gap-2">
                    <i data-lucide="power" class="w-4 h-4"></i>
                    Activate All
                </button>
                <button onclick="bulkDeactivate(${JSON.stringify(selectedIds)})" class="w-full px-4 py-3 bg-slate-600/20 text-slate-400 border border-slate-500/30 rounded-lg hover:bg-slate-600/30 transition-all flex items-center gap-2">
                    <i data-lucide="power-off" class="w-4 h-4"></i>
                    Deactivate All
                </button>
                <button onclick="bulkDelete(${JSON.stringify(selectedIds)})" class="w-full px-4 py-3 bg-red-600/20 text-red-400 border border-red-500/30 rounded-lg hover:bg-red-600/30 transition-all flex items-center gap-2">
                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                    Delete All
                </button>
            </div>
            <button onclick="this.closest('.fixed').remove()" class="w-full mt-4 px-4 py-3 bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition-all">
                Cancel
            </button>
        </div>
    `;
    document.body.appendChild(modal);
    lucide.createIcons();
}

// Bulk activate
async function bulkActivate(ids) {
    try {
        const response = await fetch('BASE_URL . 'api/navigation.php', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                type: 'bulk_activate',
                ids: ids
            })
        });
        
        const data = await response.json();
        if (data.success) {
            window.location.reload();
        } else {
            alert('Failed to activate items: ' + (data.error || 'Unknown error'));
        }
    } catch (error) {
        console.error('Error:', error);
        alert('An error occurred. Please try again.');
    }
}

// Bulk deactivate
async function bulkDeactivate(ids) {
    try {
        const response = await fetch('BASE_URL . 'api/navigation.php', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                type: 'bulk_deactivate',
                ids: ids
            })
        });
        
        const data = await response.json();
        if (data.success) {
            window.location.reload();
        } else {
            alert('Failed to deactivate items: ' + (data.error || 'Unknown error'));
        }
    } catch (error) {
        console.error('Error:', error);
        alert('An error occurred. Please try again.');
    }
}

// Bulk delete
async function bulkDelete(ids) {
    if (!confirm(`Are you sure you want to delete ${ids.length} item(s)? This action cannot be undone.`)) {
        return;
    }
    
    try {
        const response = await fetch('BASE_URL . 'api/navigation.php', {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                type: 'bulk_delete',
                ids: ids,
                cascade: true
            })
        });
        
        const data = await response.json();
        if (data.success) {
            window.location.reload();
        } else {
            alert('Failed to delete items: ' + (data.error || 'Unknown error'));
        }
    } catch (error) {
        console.error('Error:', error);
        alert('An error occurred. Please try again.');
    }
}

// Open preview modal
function openPreviewModal() {
    const modal = document.createElement('div');
    modal.className = 'fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50';
    modal.innerHTML = `
        <div class="cyber-glass-panel rounded-xl border border-slate-800/80 shadow-glass p-6 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-xl font-bold text-white flex items-center gap-2">
                    <i data-lucide="eye" class="w-5 h-5 text-blue-400"></i>
                    Navigation Preview
                </h3>
                <button onclick="this.closest('.fixed').remove()" class="p-2 hover:bg-slate-700 rounded-lg transition-all">
                    <i data-lucide="x" class="w-5 h-5 text-slate-400"></i>
                </button>
            </div>
            <div class="bg-white rounded-lg p-4 text-slate-900">
                <nav class="flex flex-wrap gap-4">
                    <?php foreach ($navItems as $item): ?>
                        <?php if ($item['is_active'] && empty($item['parent_id'])): ?>
                            <a href="<?= e($item['url']) ?>" class="text-blue-600 hover:text-blue-800 hover:underline flex items-center gap-1">
                                <?= e($item['title']) ?>
                                <?php if (!empty($item['badge_text'])): ?>
                                    <span class="px-2 py-0.5 text-xs rounded-full <?= $item['badge_color'] ?? 'bg-red-500' ?> text-white"><?= e($item['badge_text']) ?></span>
                                <?php endif; ?>
                            </a>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </nav>
            </div>
            <p class="text-slate-500 text-sm mt-4 text-center">This is a preview of the main navigation menu. Only active root-level items are shown.</p>
        </div>
    `;
    document.body.appendChild(modal);
    lucide.createIcons();
}

// Open export modal
function openExportModal() {
    const modal = document.createElement('div');
    modal.className = 'fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50';
    modal.innerHTML = `
        <div class="cyber-glass-panel rounded-xl border border-slate-800/80 shadow-glass p-6 max-w-md w-full mx-4">
            <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
                <i data-lucide="download" class="w-5 h-5 text-blue-400"></i>
                Export Navigation
            </h3>
            <p class="text-slate-400 mb-6">Export your navigation structure as JSON for backup or migration.</p>
            <div class="space-y-3">
                <button onclick="exportNavigation('json')" class="w-full px-4 py-3 bg-blue-600/20 text-blue-400 border border-blue-500/30 rounded-lg hover:bg-blue-600/30 transition-all flex items-center gap-2">
                    <i data-lucide="file-json" class="w-4 h-4"></i>
                    Export as JSON
                </button>
                <button onclick="exportNavigation('sql')" class="w-full px-4 py-3 bg-emerald-600/20 text-emerald-400 border border-emerald-500/30 rounded-lg hover:bg-emerald-600/30 transition-all flex items-center gap-2">
                    <i data-lucide="database" class="w-4 h-4"></i>
                    Export as SQL
                </button>
            </div>
            <button onclick="this.closest('.fixed').remove()" class="w-full mt-4 px-4 py-3 bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition-all">
                Cancel
            </button>
        </div>
    `;
    document.body.appendChild(modal);
    lucide.createIcons();
}

// Export navigation
async function exportNavigation(format) {
    try {
        const response = await fetch(`BASE_URL . 'api/navigation.php?action=export&format=${format}`);
        const data = await response.json();
        
        if (data.success) {
            const blob = new Blob([data.data], { type: format === 'json' ? 'application/json' : 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `navigation_export.${format}`;
            a.click();
            URL.revokeObjectURL(url);
            document.querySelector('.fixed').remove();
        } else {
            alert('Failed to export: ' + (data.error || 'Unknown error'));
        }
    } catch (error) {
        console.error('Error:', error);
        alert('An error occurred. Please try again.');
    }
}

// Initialize tree view
function initializeTreeView() {
    // Tree view is rendered server-side with PHP function
    // This is for any client-side tree initialization if needed
}

// Toggle tree node
function toggleTreeNode(button) {
    const childrenContainer = button.closest('.nav-tree-item').querySelector('.tree-children');
    const icon = button.querySelector('i');
    
    childrenContainer.classList.toggle('hidden');
    icon.classList.toggle('rotate-90');
}

<?php
// Helper function to build navigation tree for tree view
function buildNavigationTree($items, $parentId = null, $level = 0) {
    $tree = '';
    $indent = $level * 20;
    
    foreach ($items as $item) {
        if ($item['parent_id'] == $parentId) {
            $hasChildren = false;
            foreach ($items as $child) {
                if ($child['parent_id'] == $item['id']) {
                    $hasChildren = true;
                    break;
                }
            }
            
            $tree .= '
                <div class="nav-tree-item" style="margin-left: ' . $indent . 'px">
                    <div class="flex items-center gap-3 p-3 bg-slate-800/50 rounded-lg hover:bg-slate-700/50 transition-all border border-slate-700/50 hover:border-slate-600/50 group">
                        <button onclick="toggleTreeNode(this)" class="p-1 hover:bg-slate-600 rounded transition-all ' . ($hasChildren ? '' : 'invisible') . '">
                            <i data-lucide="chevron-right" class="w-4 h-4 text-slate-400 transition-transform"></i>
                        </button>
                        <div class="flex-1 flex items-center gap-3">
                            <div class="w-8 h-8 bg-gradient-to-br from-blue-500/10 to-indigo-500/10 border border-blue-500/20 rounded-lg flex items-center justify-center">
                                <i data-lucide="link" class="w-4 h-4 text-blue-400"></i>
                            </div>
                            <div class="flex-1">
                                <p class="font-semibold text-white text-sm">' . e($item['title'] ?? $item['label'] ?? '') . '</p>
                                <p class="text-xs text-slate-500 truncate">' . e($item['url'] ?? '#') . '</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="px-2 py-1 rounded text-xs font-mono ' . (($item['is_active'] ?? 1) ? 'bg-emerald-500/20 text-emerald-400' : 'bg-slate-700 text-slate-400') . '">
                                ' . (($item['is_active'] ?? 1) ? 'Active' : 'Inactive') . '
                            </span>
                            <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                <a href="' . BASE_URL . 'admin/navigation/' . $item['id'] . '" class="p-1.5 bg-blue-500/10 text-blue-400 rounded hover:bg-blue-500/20 transition-all">
                                    <i data-lucide="edit-3" class="w-3.5 h-3.5"></i>
                                </a>
                                <button onclick="deleteNavItem(' . $item['id'] . ', \'' . addslashes($item['title'] ?? $item['label'] ?? 'Item') . '\')" class="p-1.5 bg-red-500/10 text-red-400 rounded hover:bg-red-500/20 transition-all">
                                    <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="tree-children hidden">' . buildNavigationTree($items, $item['id'], $level + 1) . '</div>
                </div>
            ';
        }
    }
    
    return $tree;
}
?>

// Toggle navigation item status (Active/Inactive) via AJAX
async function toggleNavItemStatus(itemId, currentStatus, buttonElement) {
    // Prevent multiple simultaneous clicks
    if (buttonElement.disabled) return;
    
    buttonElement.disabled = true;
    buttonElement.style.opacity = '0.5';
    
    const newStatus = currentStatus ? 0 : 1;
    
    try {
        const response = await fetch('BASE_URL . 'api/navigation.php', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                type: 'item',
                id: itemId,
                is_active: newStatus
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            // Update the button UI to reflect new status
            buttonElement.setAttribute('data-current-status', newStatus);
            buttonElement.setAttribute('onclick', `toggleNavItemStatus(${itemId}, ${newStatus}, this)`);
            
            if (newStatus) {
                buttonElement.innerHTML = `
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-mono hover:bg-emerald-500/20">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-1.5 animate-pulse"></span>
                        Active
                    </span>
                `;
            } else {
                buttonElement.innerHTML = `
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-slate-800 text-slate-400 border border-slate-700 font-mono hover:bg-slate-700">
                        <span class="w-1.5 h-1.5 rounded-full bg-slate-500 mr-1.5"></span>
                        Inactive
                    </span>
                `;
            }
        } else {
            alert('Failed to update item status: ' + (data.error || 'Unknown error'));
        }
    } catch (error) {
        console.error('Error toggling navigation item status:', error);
        alert('An error occurred while updating the item status. Please try again.');
    } finally {
        buttonElement.disabled = false;
        buttonElement.style.opacity = '1';
    }
}

// Delete navigation item
async function deleteNavItem(itemId, itemTitle) {
    if (!confirm(`Are you sure you want to delete "${itemTitle}"? This action cannot be undone.`)) {
        return;
    }
    
    try {
        const response = await fetch(`BASE_URL . 'api/navigation.php?type=item&id=${itemId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            // Reload the page to reflect changes
            window.location.reload();
        } else {
            if (data.hasChildren) {
                if (confirm(data.error + '\n\nDo you want to delete this item and all its children?')) {
                    // Retry with cascade=true
                    const cascadeResponse = await fetch(`BASE_URL . 'api/navigation.php?type=item&id=${itemId}&cascade=true`, {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                        }
                    });
                    const cascadeData = await cascadeResponse.json();
                    if (cascadeData.success) {
                        window.location.reload();
                    } else {
                        alert('Failed to delete item: ' + (cascadeData.error || 'Unknown error'));
                    }
                }
            } else {
                alert('Failed to delete item: ' + (data.error || 'Unknown error'));
            }
        }
    } catch (error) {
        console.error('Error deleting navigation item:', error);
        alert('An error occurred while deleting the item. Please try again.');
    }
}
</script>

Batal

⬅ Naik ke views 54 item

Nama	Tipe	Ukuran	Diubah	Aksi
📁layout	dir	—	2026-05-31 16:45	📂 Buka
📁menus	dir	—	2026-05-31 16:45	📂 Buka
📁orders	dir	—	2026-05-31 16:45	📂 Buka
📁pages	dir	—	2026-05-31 16:45	📂 Buka
📁products	dir	—	2026-05-31 16:45	📂 Buka
🐘404.php	php	511 B	2026-05-31 16:43	✏️ Edit 👁️ View
🐘about-sections.php	php	22.6 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘admin-users.php	php	18.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘banners.php	php	25.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘branches.php	php	22.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘categories.php	php	20.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘contact-info.php	php	19.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘coupons.php	php	23.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘cta-buttons.php	php	1.8 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘cta.php	php	17 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘customers.php	php	1.6 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘dashboard.php	php	51.2 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘database-viewer.php	php	28.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘documents.php	php	21.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘faqs.php	php	16.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘features.php	php	19.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘file-manager.php	php	66.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘finance.php	php	26.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘hero-sections.php	php	27.6 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘image-gallery.php	php	41.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘inquiries.php	php	7.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘inventory.php	php	16.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘knowledge.php	php	22.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘layout.php	php	27.6 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘login.php	php	10.2 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘logout.php	php	195 B	2026-05-31 16:43	✏️ Edit 👁️ View
🐘map-locations.php	php	18 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘menus.php	php	11.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘navigation-form.php	php	14 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘navigation.php	php	33.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘omni-dynamic.php	php	16.9 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘orders.php	php	8.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘pages.php	php	28.2 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘payments.php	php	23.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘product-attributes.php	php	22.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘product-images.php	php	21.3 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘products.php	php	29.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘projects.php	php	33.8 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘reviews.php	php	22.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘services.php	php	20.8 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘settings.php	php	51.8 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘shipping.php	php	8.9 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘solar-calculator.php	php	31.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘solutions.php	php	47.3 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘statistics.php	php	17.2 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘testimonials.php	php	20.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘verify-mfa.php	php	10.9 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘videos-form.php	php	28.2 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘videos.php	php	27.9 KB	2026-05-31 16:43	✏️ Edit 👁️ View