@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ __('admin/menu.builder.page_title') }}: <span class="text-primary">{{ $menu->name }}</span></h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.menu.index') }}">{{ __('admin/menu.breadcrumb.menu_builder') }}</a></li>
                    <li class="breadcrumb-item active">{{ $menu->name }}</li>
                </ol>
            </div>
        </div>

        <!-- Menu bar -->
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <div class="flex-grow-1">
                            <a href="{{ route('admin.menu.index') }}" class="btn btn-light me-2">
                                <i class="ri-arrow-left-line me-1"></i>{{ __('admin/menu.actions.back_to_list') }}
                            </a>
                            <button type="button" class="btn btn-info add-btn" onclick="openMenuItemModal()">
                                <i class="ri-add-fill me-1 align-bottom"></i>{{ __('admin/menu.actions.add_item') }}
                            </button>
                        </div>
                        <div class="flex-shrink-0">
                            <span class="badge bg-primary fs-12">{{ $menuItems->count() }} {{ __('admin/menu.items_total') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="ri-error-warning-line me-2"></i>{{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif        

        <div class="col-xl-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">{{ __('admin/menu.builder.structure') }}</h4>
                    <div class="flex-shrink-0">
                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="saveMenuOrder()">
                            <span class="btn-text">
                                <i class="ri-save-line me-1"></i>{{ __('admin/menu.actions.save_order') }}
                            </span>
                            <span class="btn-loading d-none">
                                <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                                {{ __('admin/menu.actions.saving') }}
                            </span>
                        </button>
                    </div>
                </div>

                <div class="card-body">
                    <div id="menu-items" class="nested-sortable">
                        @forelse($menuItems as $item)
                            @include('admin.menu.partials.menu-item', ['item' => $item, 'level' => 0])
                        @empty
                        <div class="text-center py-5" id="empty-state">
                            <div class="avatar-lg mx-auto mb-4">
                                <div class="avatar-title bg-info-subtle text-info rounded-circle fs-2">
                                    <i class="ri-menu-3-line"></i>
                                </div>
                            </div>
                            <h5>{{ __('admin/menu.empty.no_items') }}</h5>
                            <p class="text-muted mb-4">{{ __('admin/menu.empty.add_first_item') }}</p>
                            <button type="button" class="btn btn-info" onclick="openMenuItemModal()">
                                <i class="ri-add-line me-1"></i>{{ __('admin/menu.actions.add_first_item') }}
                            </button>
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour ajouter/éditer menu item -->
<div class="modal fade" id="menuItemModal" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form id="menuItemForm">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="menuItemModalTitle">{{ __('admin/menu.modal.add_item_title') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <!-- Parent Selection -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="parent_id" class="form-label">{{ __('admin/menu.form.parent_menu') }}</label>
                                <select name="parent_id" id="parent_id" class="form-select">
                                    <option value="">-- {{ __('admin/menu.form.top_level') }} --</option>
                                    @foreach($menuHierarchy as $item)
                                    <option value="{{ $item['id'] }}">{{ $item['title'] }}</option>
                                    @endforeach
                                </select>
                                <div class="form-text">{{ __('admin/menu.form.parent_help') }}</div>
                            </div>
                        </div>

                        <!-- Link Type -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="type" class="form-label">{{ __('admin/menu.form.link_type') }} <span class="text-danger">*</span></label>
                                <select class="form-select" name="type" id="type">
                                    <option value="">-- {{ __('admin/menu.form.select_type') }} --</option>
                                    <option value="page">{{ __('admin/menu.types.page') }}</option>
                                    <option value="training">{{ __('admin/menu.types.training') }}</option>
                                    <option value="training_category">{{ __('admin/menu.types.training_category') }}</option>
                                    <option value="route">{{ __('admin/menu.types.route') }}</option>
                                    <option value="external">{{ __('admin/menu.types.external') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Onglets de langues pour les titres -->
                    <div class="card border">
                        <div class="card-header">
                            <ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0" role="tablist">
                                @foreach(config('translatable.locales') as $index => $locale)
                                <li class="nav-item">
                                    <a class="nav-link {{ $index === 0 ? 'active' : '' }}" 
                                       data-bs-toggle="tab" 
                                       href="#lang-{{ $locale }}" 
                                       role="tab">
                                        {{ strtoupper($locale) }}
                                    </a>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="card-body">
                            <div class="tab-content">
                                @foreach(config('translatable.locales') as $index => $locale)
                                <div class="tab-pane {{ $index === 0 ? 'active' : '' }}" id="lang-{{ $locale }}" role="tabpanel">
                                    <div class="mb-3">
                                        <label for="title_{{ $locale }}" class="form-label">
                                            [{{ strtoupper($locale) }}] {{ __('admin/menu.form.title') }} <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" id="title_{{ $locale }}" name="{{ $locale }}[title]" 
                                               class="form-control" placeholder="{{ __('admin/menu.form.title_placeholder') }}">
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!-- Type-specific fields -->
                    <div class="type-field" id="page-field" style="display: none;">
                        <div class="mb-3">
                            <label for="page_id" class="form-label">{{ __('admin/menu.form.select_page') }}</label>
                            <select class="form-select" name="page_id" id="page_id">
                                <option value="">-- {{ __('admin/menu.form.select_page') }} --</option>
                                @foreach($pages as $page)
                                <option value="{{ $page->id }}">{{ $page->title }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="type-field" id="training-field" style="display: none;">
                        <div class="mb-3">
                            <label for="training_id" class="form-label">{{ __('admin/menu.form.select_training') }}</label>
                            <select class="form-select" name="training_id" id="training_id">
                                <option value="">-- {{ __('admin/menu.form.select_training') }} --</option>
                                @foreach($trainings as $training)
                                <option value="{{ $training->id }}">{{ $training->title }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="type-field" id="training_category-field" style="display: none;">
                        <div class="mb-3">
                            <label for="training_category_id" class="form-label">{{ __('admin/menu.form.select_category') }}</label>
                            <select class="form-select" name="training_category_id" id="training_category_id">
                                <option value="">-- {{ __('admin/menu.form.select_category') }} --</option>
                                @foreach($trainingCategories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="type-field" id="route-field" style="display: none;">
                        <div class="mb-3">
                            <label for="route_name" class="form-label">{{ __('admin/menu.form.select_route') }}</label>
                            <select class="form-select" name="route_name" id="route_name">
                                <option value="">-- {{ __('admin/menu.form.select_route') }} --</option>
                                @foreach($routes as $route)
                                <option value="{{ $route }}">{{ $route }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="type-field" id="external-field" style="display: none;">
                        <div class="mb-3">
                            <label for="url" class="form-label">{{ __('admin/menu.form.external_url') }}</label>
                            <input type="url" name="url" id="url" class="form-control" placeholder="https://example.com">
                            <div class="form-text">{{ __('admin/menu.form.external_url_help') }}</div>
                        </div>
                    </div>

                    <!-- Additional Options -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="open_link_in" class="form-label">{{ __('admin/menu.form.open_link_in') }}</label>
                                <select class="form-select" id="open_link_in" name="open_link_in">
                                    <option value="_self">{{ __('admin/menu.form.same_window') }}</option>
                                    <option value="_blank">{{ __('admin/menu.form.new_window') }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">{{ __('admin/menu.form.status') }}</label>
                                <div class="form-check mt-2">
                                    <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" checked>
                                    <label class="form-check-label" for="is_active">
                                        {{ __('admin/menu.form.is_active') }}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" id="menu_id" name="menu_id" value="{{ $menu->id }}" />
                    <input type="hidden" id="item_id" name="item_id" value="" />
                    <input type="hidden" name="_method" id="item_method" value="" />
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('admin/menu.actions.cancel') }}</button>
                    <button type="submit" class="btn btn-primary">
                        <span class="btn-text">
                            <i class="ri-save-line me-1"></i>{{ __('admin/menu.actions.save') }}
                        </span>
                        <span class="btn-loading d-none">
                            <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                            {{ __('admin/menu.actions.saving') }}
                        </span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal de suppression -->
<x-admin.delete-modal
    item-type="{{ __('admin/menu.delete_modal.item_type') }}"
    confirm-text="{{ __('admin/menu.delete_modal.confirm_text') }}"
    delete-text="{{ __('admin/menu.delete_modal.delete_text') }}" />

<!-- Composant toast global -->
<x-admin.toast-messages />
@endsection

@push('script')
<!-- Sortable JS -->
<script src="{{ asset('admin/assets/libs/sortablejs/Sortable.min.js') }}"></script>

<script>
var routes = {
    menuItemStore: "{{ route('admin.menuitem.store') }}",
    menuItemEdit: "{{ route('admin.menuitem.edit', ':id') }}",
    menuItemUpdate: "{{ route('admin.menuitem.update', ':id') }}",
    menuItemUpdateOrder: "{{ route('admin.menuitem.updateOrder', $menu->id) }}",
    menuItemDestroy: "{{ route('admin.menuitem.destroy', ':id') }}"
};

var translations = {
    addItemTitle: "{{ __('admin/menu.modal.add_item_title') }}",
    editItemTitle: "{{ __('admin/menu.modal.edit_item_title') }}",
    saveSuccess: "{{ __('admin/menu.messages.save_success') }}",
    saveError: "{{ __('admin/menu.messages.save_error') }}",
    orderSaved: "{{ __('admin/menu.messages.order_saved') }}",
    orderSaveError: "{{ __('admin/menu.messages.order_save_error') }}",
    deleteConfirm: "{{ __('admin/menu.delete_modal.confirm_delete') }}"
};

// Variables pour le drag & drop
var sortableInstances = [];

document.addEventListener('DOMContentLoaded', function() {
    // Initialiser le drag & drop
    initializeSortable();
    
    // Appliquer les styles initiaux
    updateMenuItemStyles();
    
    // Type field toggle
    document.getElementById('type').addEventListener('change', function() {
        const typeFields = document.querySelectorAll('.type-field');
        typeFields.forEach(field => field.style.display = 'none');
        
        const selectedType = this.value;
        if (selectedType) {
            const targetField = document.getElementById(selectedType + '-field');
            if (targetField) {
                targetField.style.display = 'block';
            }
        }
    });
});

function initializeSortable() {
    // Détruire les instances existantes
    sortableInstances.forEach(instance => {
        if (instance && instance.destroy) {
            instance.destroy();
        }
    });
    sortableInstances = [];
    
    // Initialiser toutes les listes sortables
    const sortableElements = document.querySelectorAll('.nested-sortable');
    
    sortableElements.forEach(element => {
        const sortableInstance = new Sortable(element, {
            group: {
                name: 'nested-menu',
                pull: true,
                put: true
            },
            animation: 150,
            fallbackOnBody: true,
            swapThreshold: 0.65,
            handle: '.drag-handle',
            ghostClass: 'sortable-ghost',
            chosenClass: 'sortable-chosen',
            dragClass: 'sortable-drag',
            
            onStart: function(evt) {
                // Masquer l'état vide si présent
                const emptyState = document.getElementById('empty-state');
                if (emptyState) {
                    emptyState.style.display = 'none';
                }
            },
            
            onEnd: function(evt) {
                // Marquer que l'ordre a changé
                window.menuOrderChanged = true;
                
                // Réinitialiser le sortable après changement
                setTimeout(() => {
                    initializeSortable();
                    updateMenuItemStyles();
                }, 100);
            }
        });
        
        sortableInstances.push(sortableInstance);
    });
}

function openMenuItemModal(itemId = null) {
    const modal = new bootstrap.Modal(document.getElementById('menuItemModal'));
    const form = document.getElementById('menuItemForm');
    const title = document.getElementById('menuItemModalTitle');
    
    // Reset form
    form.reset();
    document.getElementById('item_id').value = '';
    document.getElementById('item_method').value = '';
    document.querySelectorAll('.type-field').forEach(field => field.style.display = 'none');
    
    if (itemId) {
        // Edit mode
        title.innerHTML = translations.editItemTitle;
        
        fetch(routes.menuItemEdit.replace(':id', itemId))
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const item = data.menuItem;
                    
                    // Fill form data
                    document.getElementById('parent_id').value = item.parent_id || '';
                    document.getElementById('type').value = item.type;
                    document.getElementById('open_link_in').value = item.open_link_in;
                    document.getElementById('is_active').checked = item.is_active;
                    
                    // Fill translations
                    if (item.translations) {
                        item.translations.forEach(translation => {
                            const titleField = document.getElementById('title_' + translation.locale);
                            if (titleField) {
                                titleField.value = translation.title;
                            }
                        });
                    }
                    
                    // Fill type-specific fields
                    switch(item.type) {
                        case 'page':
                            document.getElementById('page_id').value = item.resource_id || '';
                            break;
                        case 'training':
                            document.getElementById('training_id').value = item.resource_id || '';
                            break;
                        case 'training_category':
                            document.getElementById('training_category_id').value = item.resource_id || '';
                            break;
                        case 'route':
                            document.getElementById('route_name').value = item.route_name || '';
                            break;
                        case 'external':
                            document.getElementById('url').value = item.url || '';
                            break;
                    }
                    
                    // Show relevant type field
                    const typeField = document.getElementById(item.type + '-field');
                    if (typeField) {
                        typeField.style.display = 'block';
                    }
                    
                    document.getElementById('item_id').value = item.id;
                    document.getElementById('item_method').value = 'PUT';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showErrorToast(translations.saveError);
            });
    } else {
        // Add mode
        title.innerHTML = translations.addItemTitle;
    }
    
    modal.show();
}

document.getElementById('menuItemForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const itemId = document.getElementById('item_id').value;
    const method = document.getElementById('item_method').value;
    
    let url = routes.menuItemStore;
    if (itemId && method === 'PUT') {
        url = routes.menuItemUpdate.replace(':id', itemId);
        formData.append('_method', 'PUT');
    }
    
    const submitBtn = this.querySelector('button[type="submit"]');
    const btnText = submitBtn.querySelector('.btn-text');
    const btnLoading = submitBtn.querySelector('.btn-loading');
    
    // Afficher le spinner
    btnText.classList.add('d-none');
    btnLoading.classList.remove('d-none');
    submitBtn.disabled = true;
    
    fetch(url, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => {
        console.log('Response status:', response.status);
        return response.text();
    })
    .then(text => {
        console.log('Raw response:', text);
        const data = JSON.parse(text);
        return data;
    })
    .then(data => {
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('menuItemModal')).hide();
            showSuccessToast(data.message || translations.saveSuccess);
            setTimeout(() => location.reload(), 1000);
        } else {
            showErrorToast(data.message || translations.saveError);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorToast(translations.saveError);
    })
    .finally(() => {
        // Masquer le spinner
        btnText.classList.remove('d-none');
        btnLoading.classList.add('d-none');
        submitBtn.disabled = false;
    });
});

function saveMenuOrder() {
    const saveBtn = document.querySelector('[onclick="saveMenuOrder()"]');
    const btnText = saveBtn.querySelector('.btn-text');
    const btnLoading = saveBtn.querySelector('.btn-loading');
    
    // Afficher le spinner
    btnText.classList.add('d-none');
    btnLoading.classList.remove('d-none');
    saveBtn.disabled = true;
    
    // Collecter l'ordre des éléments au format attendu par le contrôleur
    const menuOrder = serializeMenuOrderHierarchical();
    
    fetch(routes.menuItemUpdateOrder, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            order: JSON.stringify(menuOrder)
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.message) {
            showSuccessToast(data.message);
            window.menuOrderChanged = false;
        } else if (data.error) {
            showErrorToast(data.error);
        } else {
            showErrorToast(translations.orderSaveError);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorToast(translations.orderSaveError);
    })
    .finally(() => {
        // Masquer le spinner
        btnText.classList.remove('d-none');
        btnLoading.classList.add('d-none');
        saveBtn.disabled = false;
        // updateMenuItemStyles();
    });
}

function serializeMenuOrderHierarchical() {
    const result = [];
    
    function processContainer(container) {
        const items = container.children;
        const containerItems = [];
        
        for (let i = 0; i < items.length; i++) {
            const item = items[i];
            
            // Ignorer l'état vide
            if (item.id === 'empty-state') continue;
            
            const itemId = item.dataset.id;
            if (itemId) {
                const orderItem = {
                    id: parseInt(itemId),
                    order: i
                };
                
                // Chercher les enfants dans le conteneur nested-sortable de cet item
                const childContainer = item.querySelector(':scope > .nested-sortable');
                if (childContainer && childContainer.children.length > 0) {
                    const children = processContainer(childContainer);
                    if (children.length > 0) {
                        orderItem.children = children;
                    }
                }
                
                containerItems.push(orderItem);
            }
        }
        
        return containerItems;
    }
    
    const mainContainer = document.getElementById('menu-items');
    if (mainContainer) {
        return processContainer(mainContainer);
    }
    
    return result;
}

function updateMenuItemStyles() {
    const mainContainer = document.getElementById('menu-items');
    if (!mainContainer) return;
    
    function updateLevel(container, level = 0) {
        const items = container.children;
        
        for (let i = 0; i < items.length; i++) {
            const item = items[i];
            
            // Ignorer l'état vide
            if (item.id === 'empty-state') continue;
            
            if (item.classList.contains('menu-item')) {
                const card = item.querySelector('.card');
                if (card) {
                    // Mettre à jour la couleur de fond
                    card.style.backgroundColor = level > 0 ? '#f8f9fa' : '#ffffff';
                    // Mettre à jour la bordure gauche
                    card.style.borderLeft = level > 0 ? '4px solid #007bff' : 'none';
                }
                
                // Traiter les enfants
                const childContainer = item.querySelector(':scope > .nested-sortable');
                if (childContainer) {
                    updateLevel(childContainer, level + 1);
                }
            }
        }
    }
    
    updateLevel(mainContainer);
}

// Fonctions utilitaires pour les toasts
function showSuccessToast(message) {
    if (typeof window.showSuccessToast === 'function') {
        window.showSuccessToast(message);
    } else {
        console.log('Success:', message);
    }
}

function showErrorToast(message) {
    if (typeof window.showErrorToast === 'function') {
        window.showErrorToast(message);
    } else {
        console.error('Error:', message);
    }
}

// CSS pour le drag & drop
const style = document.createElement('style');
style.textContent = `
.nested-sortable {
    min-height: 20px;
    position: relative;
}

.nested-sortable:empty:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #ddd;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nested-sortable.sortable-drag-over:empty:before {
    opacity: 1;
    background: #007bff;
}

.sortable-ghost {
    opacity: 0.4;
    background-color: #f8f9fa !important;
    border: 2px dashed #007bff !important;
}

.sortable-chosen {
    opacity: 0.8;
}

.sortable-drag {
    opacity: 0.8;
    transform: rotate(2deg);
}

.drag-handle {
    cursor: move;
    color: #6c757d;
    transition: color 0.2s ease;
}

.drag-handle:hover {
    color: #007bff;
}

.menu-item {
    transition: none;
}
`;
document.head.appendChild(style);
</script>
@endpush