@extends('layouts.admin')

@section('title', 'Edit Menu')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.css" rel="stylesheet">
<style>
    /* Toast Container */
    .toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
    }
    .toast {
        min-width: 300px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .toast-header {
        font-weight: 600;
    }
    .toast-success .toast-header {
        background-color: #198754;
        color: white;
    }
    .toast-error .toast-header {
        background-color: #dc3545;
        color: white;
    }
    .toast-warning .toast-header {
        background-color: #ffc107;
        color: #000;
    }
    .toast-info .toast-header {
        background-color: #0dcaf0;
        color: #000;
    }
    .menu-items-container {
        min-height: 200px;
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        padding: 1rem;
    }
    .menu-item {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        cursor: move;
        transition: all 0.3s ease;
    }
    .menu-item:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .menu-item.sortable-ghost {
        opacity: 0.4;
    }
    .menu-item-child {
        margin-left: 0;
        background: #f8f9fa;
    }
    .menu-item-children {
        margin-left: 0;
        margin-top: 0.5rem;
        padding-left: 1.5rem;
        position: relative;
    }
    .menu-item-children::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #dee2e6;
    }
    .menu-item.drag-over {
        background: #e7f3ff;
        border-color: #0d6efd;
    }
    .menu-item .menu-item-children {
        min-height: 10px;
    }
    /* Better spacing for nested items */
    .menu-item-children > .menu-item {
        margin-left: 0;
        margin-bottom: 0.5rem;
    }
    /* Level-specific styling for better visual hierarchy */
    .menu-item[data-level="1"] {
        margin-left: 0;
    }
    .menu-item[data-level="2"] {
        margin-left: 0;
        background: #f8f9fa;
    }
    .menu-item[data-level="3"] {
        margin-left: 0;
        background: #f1f3f5;
    }
    /* Compact layout for nested items */
    .menu-item-children .menu-item {
        padding: 0.5rem 0.75rem;
    }
    .menu-item-children .menu-item-header {
        margin-bottom: 0.25rem;
    }
    .menu-item-children .menu-item small {
        font-size: 0.75rem;
    }
    .menu-item-header {
        display: flex;
        justify-content: between;
        align-items: center;
    }
    .menu-item-actions {
        margin-left: auto;
    }
    .menu-item-inactive {
        opacity: 0.6;
    }
    .menu-item-inactive strong {
        text-decoration: line-through;
    }
    .form-check-input:checked ~ .form-check-label .bi-x-circle-fill {
        display: none;
    }
    .form-check-input:not(:checked) ~ .form-check-label .bi-check-circle-fill {
        display: none;
    }
</style>
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3">Edit Menu: {{ $menu->name }}</h1>
    <a href="{{ route('admin.menus.index') }}" class="btn btn-modern-primary">
        <i class="bi bi-arrow-left me-2"></i>Back to Menus
    </a>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Menu Settings</h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.menus.update', $menu) }}">
                    @csrf
                    @method('PUT')

                      <div class="mb-3">
                        <label for="name" class="form-label">Menu Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" 
                               id="name" name="name" value="{{ old('name', $menu->name) }}" required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="location" class="form-label">Location</label>
                        <select class="form-select" id="location" name="location">
                            <option value="">Select Location</option>
                            <option value="header" {{ old('location', $menu->location) == 'header' ? 'selected' : '' }}>Header</option>
                            <option value="footer" {{ old('location', $menu->location) == 'footer' ? 'selected' : '' }}>Footer</option>
                            <option value="sidebar" {{ old('location', $menu->location) == 'sidebar' ? 'selected' : '' }}>Sidebar</option>
                            <option value="custom" {{ old('location', $menu->location) == 'custom' ? 'selected' : '' }}>Custom</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" name="description" rows="3">{{ old('description', $menu->description) }}</textarea>
                    </div>

                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="is_active" name="is_active" value="1" 
                               {{ old('is_active', $menu->is_active) ? 'checked' : '' }}>
                        <label class="form-check-label" for="is_active">Active</label>
                    </div>

                    <button type="submit" class="btn btn-modern-primary w-100">
                        <i class="bi bi-save me-2"></i>Save Settings
                    </button>
                </form>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header">
                <h5 class="mb-0">Add Menu Item</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Add from Pages</label>
                    <select class="form-select" id="page-select">
                        <option value="">Select a Page</option>
                        @foreach($pages as $page)
                            <option value="{{ $page->id }}" data-title="{{ $page->title }}" data-url="{{ $page->url }}">
                                {{ $page->title }}
                            </option>
                        @endforeach
                    </select>
                    <button type="button" class="btn btn-sm btn-primary mt-2 w-100" onclick="addPageToMenu()">
                        <i class="bi bi-plus-circle me-1"></i>Add Page
                    </button>
                </div>

                <hr>

                <div class="mb-3">
                    <label class="form-label">Add Custom Link</label>
                    <input type="text" class="form-control mb-2" id="custom-title" placeholder="Link Text">
                    <input type="text" class="form-control mb-2" id="custom-url" placeholder="URL (e.g., /about or https://example.com)">
                    <button type="button" class="btn btn-sm btn-secondary w-100" onclick="addCustomLink()">
                        <i class="bi bi-plus-circle me-1"></i>Add Custom Link
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Menu Items</h5>
                <button type="button" class="btn btn-sm btn-success" onclick="saveMenuItems()">
                    <i class="bi bi-save me-1"></i>Save Menu
                </button>
            </div>
            <div class="card-body">
                <div id="menu-items-container" class="menu-items-container">
                    @if($menu->allItems->count() > 0)
                        @foreach($menu->allItems->whereNull('parent_id') as $item)
                            @include('admin.menus.partials.menu-item', ['item' => $item, 'level' => 0])
                        @endforeach
                    @else
                        <p class="text-muted text-center py-4">No menu items. Add items from the sidebar.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    // Toast Notification Helper Functions
    function showToast(message, type = 'success') {
        let toastContainer = document.querySelector('.toast-container');
        if (!toastContainer) {
            // Create container if it doesn't exist
            toastContainer = document.createElement('div');
            toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
            toastContainer.style.zIndex = '9999';
            document.body.appendChild(toastContainer);
        }
        
        const toastId = 'toast-' + Date.now();
        const icons = {
            success: '<i class="bi bi-check-circle-fill me-2"></i>',
            error: '<i class="bi bi-x-circle-fill me-2"></i>',
            warning: '<i class="bi bi-exclamation-triangle-fill me-2"></i>',
            info: '<i class="bi bi-info-circle-fill me-2"></i>'
        };
        
        const titles = {
            success: 'Success',
            error: 'Error',
            warning: 'Warning',
            info: 'Info'
        };
        
        const toastHtml = `
            <div id="${toastId}" class="toast toast-${type}" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                    ${icons[type] || ''}
                    <strong class="me-auto">${titles[type] || 'Notification'}</strong>
                    <button type="button" class="btn-close ${type === 'error' || type === 'success' ? 'btn-close-white' : ''}" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    ${message}
                </div>
            </div>
        `;
        
        toastContainer.insertAdjacentHTML('beforeend', toastHtml);
        
        const toastElement = document.getElementById(toastId);
        const toast = new bootstrap.Toast(toastElement, {
            autohide: true,
            delay: type === 'error' ? 5000 : 3000
        });
        
        toast.show();
        
        // Remove toast element after it's hidden
        toastElement.addEventListener('hidden.bs.toast', function() {
            toastElement.remove();
        });
    }
    
    function showSuccess(message) {
        showToast(message, 'success');
    }
    
    function showError(message) {
        showToast(message, 'error');
    }
    
    function showWarning(message) {
        showToast(message, 'warning');
    }
    
    function showInfo(message) {
        showToast(message, 'info');
    }

    let menuItemCounter = {{ $menu->allItems->max('id') ?? 0 }};
    let menuItems = [];

    // Initialize sortable with nested support
    const container = document.getElementById('menu-items-container');
    
    function initializeSortable(element) {
        // Destroy existing instance if any
        if (element.sortableInstance) {
            element.sortableInstance.destroy();
            element.sortableInstance = null;
        }
        
        return new Sortable(element, {
            animation: 150,
            group: 'menu-items',
            fallbackOnBody: true,
            swapThreshold: 0.65,
            onMove: function(evt) {
                // Add visual feedback when dragging over an item
                const related = evt.related;
                if (related && related.classList.contains('menu-item')) {
                    related.classList.add('drag-over');
                }
            },
            onEnd: function(evt) {
                // Remove visual feedback
                document.querySelectorAll('.menu-item').forEach(item => {
                    item.classList.remove('drag-over');
                });
                
                // If item was moved into a children container, it becomes a child
                // If moved to main container, it becomes a top-level item
                updateMenuItems();
                
                // Reinitialize sortable for all containers to handle new structure
                setTimeout(() => {
                    initializeAllSortables();
                }, 100);
            }
        });
    }

    function initializeAllSortables() {
        // Initialize sortable for main container
        if (container) {
            container.sortableInstance = initializeSortable(container);
        }
        
        // Initialize sortable for all child containers
        document.querySelectorAll('.menu-item-children').forEach(childContainer => {
            childContainer.sortableInstance = initializeSortable(childContainer);
        });
    }

    // Initialize on page load
    initializeAllSortables();

    function addPageToMenu() {
        const select = document.getElementById('page-select');
        const option = select.options[select.selectedIndex];
        
        if (!option.value) {
            showWarning('Please select a page');
            return;
        }

        menuItemCounter++;
        const item = {
            id: menuItemCounter,
            title: option.dataset.title,
            url: option.dataset.url,
            type: 'page',
            page_id: option.value,
            target: '_self',
            parent_id: null,
            is_active: true
        };

        addMenuItemToDOM(item);
        select.value = '';
    }

    function addCustomLink() {
        const title = document.getElementById('custom-title').value;
        const url = document.getElementById('custom-url').value;

        if (!title || !url) {
            showWarning('Please fill in both title and URL');
            return;
        }

        menuItemCounter++;
        const item = {
            id: menuItemCounter,
            title: title,
            url: url,
            type: 'custom',
            target: '_self',
            parent_id: null,
            is_active: true
        };

        addMenuItemToDOM(item);
        document.getElementById('custom-title').value = '';
        document.getElementById('custom-url').value = '';
    }

    function addMenuItemToDOM(item, parentContainer = null) {
        const targetContainer = parentContainer || document.getElementById('menu-items-container');
        const emptyMsg = targetContainer.querySelector('.text-muted');
        if (emptyMsg) emptyMsg.remove();

        const isActive = item.is_active !== undefined ? item.is_active : true;
        const itemDiv = document.createElement('div');
        // Determine level based on parent container
        let level = 0;
        if (parentContainer && parentContainer.classList.contains('menu-item-children')) {
            const parentItem = parentContainer.closest('.menu-item');
            level = parentItem ? (parseInt(parentItem.dataset.level || 0) + 1) : 1;
        }
        itemDiv.className = `menu-item ${level > 0 ? 'menu-item-child' : ''} ${!isActive ? 'menu-item-inactive' : ''}`;
        itemDiv.dataset.itemId = item.id;
        itemDiv.dataset.level = level;
        
        // Create children container for nested items
        const childrenContainer = document.createElement('div');
        childrenContainer.className = 'menu-item-children';
        childrenContainer.dataset.parentId = item.id;
        
        itemDiv.innerHTML = `
            <div class="menu-item-header d-flex align-items-center">
                <i class="bi bi-grip-vertical me-2 text-muted"></i>
                <strong>${item.title}</strong>
                <div class="menu-item-actions ms-auto d-flex align-items-center gap-2">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="active-${item.id}" 
                               onchange="toggleMenuItemActive(${item.id}, this.checked)"
                               ${isActive ? 'checked' : ''}>
                        <label class="form-check-label" for="active-${item.id}" title="Toggle Active/Inactive">
                            <i class="bi ${isActive ? 'bi-check-circle-fill text-success' : 'bi-x-circle-fill text-danger'}"></i>
                        </label>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="editMenuItem(${item.id})">
                        <i class="bi bi-pencil"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeMenuItem(${item.id})">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
            </div>
            <small class="text-muted">
                ${item.url}
                ${item.target === '_blank' ? '<i class="bi bi-box-arrow-up-right ms-1" title="Opens in new tab"></i>' : ''}
            </small>
            <input type="hidden" name="items[${item.id}][title]" value="${item.title}">
            <input type="hidden" name="items[${item.id}][url]" value="${item.url}">
            <input type="hidden" name="items[${item.id}][type]" value="${item.type}">
            <input type="hidden" name="items[${item.id}][target]" value="${item.target || '_self'}" id="target-${item.id}">
            <input type="hidden" name="items[${item.id}][is_active]" value="${isActive ? '1' : '0'}" id="is-active-${item.id}">
            ${item.page_id ? `<input type="hidden" name="items[${item.id}][page_id]" value="${item.page_id}">` : ''}
        `;
        
        itemDiv.appendChild(childrenContainer);
        targetContainer.appendChild(itemDiv);
        
        // Initialize sortable for the new children container
        if (!childrenContainer.sortableInstance) {
            childrenContainer.sortableInstance = initializeSortable(childrenContainer);
        }
        
        updateMenuItems();
    }

    function editMenuItem(id) {
        const itemDiv = document.querySelector(`[data-item-id="${id}"]`);
        if (!itemDiv) return;

        const inputs = itemDiv.querySelectorAll('input[type="hidden"]');
        const titleInput = Array.from(inputs).find(input => input.name && input.name.includes('[title]'));
        const urlInput = Array.from(inputs).find(input => input.name && input.name.includes('[url]'));
        const typeInput = Array.from(inputs).find(input => input.name && input.name.includes('[type]'));
        const targetInput = document.getElementById(`target-${id}`) || Array.from(inputs).find(input => input.name && input.name.includes('[target]'));
        const isActiveInput = document.getElementById(`is-active-${id}`);
        const pageIdInput = Array.from(inputs).find(input => input.name && input.name.includes('[page_id]'));

        const currentTitle = titleInput ? titleInput.value : '';
        const currentUrl = urlInput ? urlInput.value : '';
        const currentType = typeInput ? typeInput.value : 'custom';
        const currentTarget = targetInput ? targetInput.value : '_self';
        const currentIsActive = isActiveInput ? isActiveInput.value === '1' : true;
        const currentPageId = pageIdInput ? pageIdInput.value : null;

        // Escape HTML to prevent XSS
        const escapeHtml = (text) => {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        };

        // Create modal HTML
        const modalHtml = `
            <div class="modal fade" id="editMenuItemModal" tabindex="-1" aria-labelledby="editMenuItemModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="editMenuItemModalLabel">Edit Menu Item</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="edit-item-title" class="form-label">Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="edit-item-title" value="${escapeHtml(currentTitle)}" required>
                            </div>
                            <div class="mb-3">
                                <label for="edit-item-url" class="form-label">URL <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="edit-item-url" value="${escapeHtml(currentUrl)}" required>
                            </div>
                            <div class="mb-3">
                                <label for="edit-item-target" class="form-label">Link Target</label>
                                <select class="form-select" id="edit-item-target">
                                    <option value="_self" ${currentTarget === '_self' ? 'selected' : ''}>Same Window</option>
                                    <option value="_blank" ${currentTarget === '_blank' ? 'selected' : ''}>New Tab</option>
                                </select>
                                <small class="form-text text-muted">Choose how the link should open</small>
                            </div>
                            <div class="mb-3 form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="edit-item-active" ${currentIsActive ? 'checked' : ''}>
                                <label class="form-check-label" for="edit-item-active">
                                    Active
                                </label>
                                <small class="form-text text-muted d-block">Inactive items will not be displayed in the menu</small>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary" onclick="saveMenuItemEdit(${id})">Save Changes</button>
                        </div>
                    </div>
                </div>
            </div>
        `;

        // Remove existing modal if any
        const existingModal = document.getElementById('editMenuItemModal');
        if (existingModal) {
            existingModal.remove();
        }

        // Add modal to body
        document.body.insertAdjacentHTML('beforeend', modalHtml);

        // Show modal
        const modal = new bootstrap.Modal(document.getElementById('editMenuItemModal'));
        modal.show();

        // Store the item ID for the save function
        window.currentEditingItemId = id;
    }

    function saveMenuItemEdit(id) {
        try {
            console.log('saveMenuItemEdit called with id:', id);
            
            const saveBtn = document.getElementById('save-edit-item-btn');
            const spinner = document.getElementById('save-edit-spinner');
            
            const titleInput = document.getElementById('edit-item-title');
            const urlInput = document.getElementById('edit-item-url');
            const targetInput = document.getElementById('edit-item-target');
            const activeInput = document.getElementById('edit-item-active');
            
            if (!titleInput || !urlInput) {
                showError('Form fields not found');
                return;
            }
            
            const title = titleInput.value.trim();
            const url = urlInput.value.trim();
            const target = targetInput ? targetInput.value : '_self';
            const isActive = activeInput ? activeInput.checked : true;

            if (!title || !url) {
                showWarning('Please fill in both title and URL');
                return;
            }
            
            // Disable button and show spinner
            if (saveBtn) {
                saveBtn.disabled = true;
                if (spinner) spinner.classList.remove('d-none');
            }

            const itemDiv = document.querySelector(`[data-item-id="${id}"]`);
            if (!itemDiv) {
                console.error('Menu item div not found for id:', id);
                if (saveBtn) {
                    saveBtn.disabled = false;
                    if (spinner) spinner.classList.add('d-none');
                }
                showError('Menu item not found');
                return;
            }

            const inputs = itemDiv.querySelectorAll('input[type="hidden"]');
            const titleInputHidden = Array.from(inputs).find(input => input.name && input.name.includes('[title]'));
            const urlInputHidden = Array.from(inputs).find(input => input.name && input.name.includes('[url]'));
            const targetInputHidden = document.getElementById(`target-${id}`) || Array.from(inputs).find(input => input.name && input.name.includes('[target]'));
            const isActiveInputHidden = document.getElementById(`is-active-${id}`);

            if (!titleInputHidden || !urlInputHidden) {
                console.error('Required hidden inputs not found');
                if (saveBtn) {
                    saveBtn.disabled = false;
                    if (spinner) spinner.classList.add('d-none');
                }
                showError('Error: Form structure not found');
                return;
            }

            // Update the DOM
            const titleElement = itemDiv.querySelector('strong');
            const urlElement = itemDiv.querySelector('small.text-muted');
            
            if (titleElement) titleElement.textContent = title;
            if (urlElement) {
                // Update URL and target icon
                let urlText = url;
                if (target === '_blank') {
                    urlText += ' <i class="bi bi-box-arrow-up-right ms-1" title="Opens in new tab"></i>';
                }
                urlElement.innerHTML = urlText;
            }

            // Update hidden inputs
            titleInputHidden.value = title;
            urlInputHidden.value = url;
            
            // Update or create target input
            if (targetInputHidden) {
                targetInputHidden.value = target;
            } else {
                // Create target input if it doesn't exist
                const newTargetInput = document.createElement('input');
                newTargetInput.type = 'hidden';
                newTargetInput.name = `items[${id}][target]`;
                newTargetInput.id = `target-${id}`;
                newTargetInput.value = target;
                // Insert after url input
                if (urlInputHidden && urlInputHidden.parentNode) {
                    urlInputHidden.parentNode.insertBefore(newTargetInput, urlInputHidden.nextSibling);
                } else {
                    itemDiv.appendChild(newTargetInput);
                }
            }
            
            if (isActiveInputHidden) {
                isActiveInputHidden.value = isActive ? '1' : '0';
            }
            
            // Force update menuItems to include target
            updateMenuItems();

            // Update active state visually
            toggleMenuItemActive(id, isActive);

            // Close modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('editMenuItemModal'));
            if (modal) {
                modal.hide();
            }

            // Remove modal from DOM
            setTimeout(() => {
                const modalElement = document.getElementById('editMenuItemModal');
                if (modalElement) {
                    modalElement.remove();
                }
            }, 300);
            
            // Auto-save to server
            console.log('Calling saveMenuItems()...');
            saveMenuItems();
            
        } catch (error) {
            console.error('Error in saveMenuItemEdit:', error);
            showError('Error saving menu item: ' + error.message);
            if (saveBtn) {
                saveBtn.disabled = false;
                if (spinner) spinner.classList.add('d-none');
            }
        }
    }

    function toggleMenuItemActive(id, isActive) {
        const itemDiv = document.querySelector(`[data-item-id="${id}"]`);
        if (!itemDiv) return;

        const isActiveInput = document.getElementById(`is-active-${id}`);
        const iconElement = itemDiv.querySelector(`label[for="active-${id}"] .bi`);
        const strongElement = itemDiv.querySelector('strong');

        if (isActiveInput) {
            isActiveInput.value = isActive ? '1' : '0';
        }

        // Update visual state
        if (isActive) {
            itemDiv.classList.remove('menu-item-inactive');
            if (iconElement) {
                iconElement.className = 'bi bi-check-circle-fill text-success';
            }
            if (strongElement) {
                strongElement.style.textDecoration = 'none';
            }
        } else {
            itemDiv.classList.add('menu-item-inactive');
            if (iconElement) {
                iconElement.className = 'bi bi-x-circle-fill text-danger';
            }
            if (strongElement) {
                strongElement.style.textDecoration = 'line-through';
            }
        }

        updateMenuItems();
    }

    function removeMenuItem(id) {
        const item = document.querySelector(`[data-item-id="${id}"]`);
        if (item && confirm('Are you sure you want to remove this item? All submenu items will also be removed.')) {
            item.remove();
            updateMenuItems();
            initializeAllSortables();
            
            // Check if main container is empty
            const mainItems = container.querySelectorAll(':scope > .menu-item');
            if (mainItems.length === 0) {
                const emptyMsg = container.querySelector('.text-muted');
                if (!emptyMsg) {
                    container.innerHTML = '<p class="text-muted text-center py-4">No menu items. Add items from the sidebar.</p>';
                }
            }
        }
    }

    function updateMenuItems() {
        const items = [];
        
        function processItems(container, parentId = null, orderOffset = 0, currentLevel = 0) {
            // Get direct children only (not nested ones)
            const itemDivs = Array.from(container.children).filter(child => child.classList.contains('menu-item'));
            
            itemDivs.forEach((div, index) => {
                const inputs = div.querySelectorAll('input[type="hidden"]');
                const itemId = div.dataset.itemId;
                
                // Determine parent_id: if container has data-parent-id, use it, otherwise use passed parentId
                const containerParentId = container.dataset.parentId || parentId;
                
                // Update level attribute
                const itemLevel = containerParentId ? currentLevel + 1 : 0;
                div.dataset.level = itemLevel;
                
                // Find inputs by name
                const titleInput = Array.from(inputs).find(input => input.name && input.name.includes('[title]'));
                const urlInput = Array.from(inputs).find(input => input.name && input.name.includes('[url]'));
                const typeInput = Array.from(inputs).find(input => input.name && input.name.includes('[type]'));
                const targetInput = document.getElementById(`target-${itemId}`) || Array.from(inputs).find(input => input.name && input.name.includes('[target]'));
                const isActiveInput = document.getElementById(`is-active-${itemId}`) || Array.from(inputs).find(input => input.name && input.name.includes('[is_active]'));
                const pageIdInput = Array.from(inputs).find(input => input.name && input.name.includes('[page_id]'));
                
                // Get target value, default to _self if not found
                let targetValue = '_self';
                if (targetInput) {
                    targetValue = targetInput.value || '_self';
                }
                
                const item = {
                    id: itemId,
                    title: titleInput ? titleInput.value : '',
                    url: urlInput ? urlInput.value : '',
                    type: typeInput ? typeInput.value : 'custom',
                    target: targetValue,
                    is_active: isActiveInput ? isActiveInput.value === '1' : true,
                    parent_id: containerParentId,
                    order: orderOffset + index
                };
                
                // Check if there's a page_id input
                if (pageIdInput) {
                    item.page_id = pageIdInput.value;
                }
                
                items.push(item);
                
                // Process children if any
                const childrenContainer = div.querySelector('.menu-item-children');
                if (childrenContainer) {
                    const childItems = Array.from(childrenContainer.children).filter(child => child.classList.contains('menu-item'));
                    if (childItems.length > 0) {
                        processItems(childrenContainer, itemId, 0, itemLevel);
                    }
                }
            });
        }
        
        processItems(container);
        menuItems = items;
    }

    function saveMenuItems() {
        updateMenuItems();
        
        // Debug: Log menu items to verify target is included
        console.log('Saving menu items:', menuItems);
        
        // Show loading state
        const saveMenuBtn = document.querySelector('button[onclick="saveMenuItems()"]');
        let originalBtnText = '';
        if (saveMenuBtn) {
            saveMenuBtn.disabled = true;
            originalBtnText = saveMenuBtn.innerHTML;
            saveMenuBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Saving...';
        }
        
        fetch('{{ route("admin.menus.items.update", $menu) }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ items: menuItems })
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(data => {
                    throw new Error(data.message || 'Server error: ' + response.status);
                });
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // Show success message
                showSuccess('Menu items saved successfully!');
                // Reload after a short delay to show the toast
                setTimeout(() => {
                    location.reload();
                }, 1000);
            } else {
                console.error('Save failed:', data);
                showError('Error saving menu items: ' + (data.message || 'Unknown error'));
                if (saveMenuBtn && originalBtnText) {
                    saveMenuBtn.disabled = false;
                    saveMenuBtn.innerHTML = originalBtnText;
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showError('Error saving menu items: ' + error.message);
            if (saveMenuBtn && originalBtnText) {
                saveMenuBtn.disabled = false;
                saveMenuBtn.innerHTML = originalBtnText;
            }
        });
    }
</script>
@endpush
@endsection