@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Edit Menu: {{ $menu->name }}</h1>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Menu Settings</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('menus.update', [$website, $menu]) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="mb-3">
                        <label for="name" class="form-label">Menu Name</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>

                    @php
                        use App\Support\MenuLocations;
                        $locations = MenuLocations::all($website);
                        $assignedLocations = $website->menus->where('id', '!=', $menu->id)->pluck('location')->toArray();
                    @endphp
                    <div class="mb-3">
                        <label for="location" class="form-label">Menu Location</label>
                        <select class="form-select @error('location') is-invalid @enderror" id="location" name="location" required>
                            <option value="">Select Location</option>
                            @foreach($locations as $key => $label)
                                <option value="{{ $key }}" {{ (old('location', $menu->location) == $key) ? 'selected' : '' }} {{ in_array($key, $assignedLocations) ? 'disabled' : '' }}>
                                    {{ $label }}
                                    @if(in_array($key, $assignedLocations)) (Already Assigned) @endif
                                </option>
                            @endforeach
                        </select>
                        @error('location')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <button type="submit" class="btn btn-primary">Update Settings</button>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Add Menu Item</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('menus.items.store', [$website, $menu]) }}" method="POST" class="menu-item-form">
                    @csrf
                    <div class="mb-3">
                        <label for="add-title" class="form-label">Title</label>
                        <input type="text" class="form-control" id="add-title" name="title" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Link Type</label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input item-type-radio" type="radio" name="type" id="add-type-url" value="url" checked>
                                <label class="form-check-label" for="add-type-url">URL</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input item-type-radio" type="radio" name="type" id="add-type-page" value="page">
                                <label class="form-check-label" for="add-type-page">Page</label>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3 url-input-container">
                        <label for="add-url" class="form-label">URL</label>
                        <input type="text" class="form-control" id="add-url" name="url" placeholder="https://example.com or #anchor or /relative-url">
                        <small class="text-muted d-block mt-1">
                            Enter full URL (https://...), relative URL (/about), or anchor link (#section)
                        </small>
                    </div>

                    <div class="mb-3 page-select-container d-none">
                        <label for="add-page_id" class="form-label">Choose a Page</label>
                        <select class="form-select" id="add-page_id" name="page_id">
                            <option value="">Select a page...</option>
                            @foreach($pages as $page)
                                <option value="{{ $page->id }}">{{ $page->title }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="add-target" class="form-label">Target</label>
                        <select class="form-select" id="add-target" name="target">
                            <option value="_self">Same Window</option>
                            <option value="_blank">New Window</option>
                        </select>
                    </div>

                    <button type="submit" class="btn btn-success">Add Item</button>
                </form>
            </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 Structure</h5>
                <small class="text-muted">Drag items to reorder or nest them</small>
            </div>
            <div class="card-body">
                @if($items->count() > 0)
                    <div id="menu-items-sortable" class="menu-items-sortable">
                        @foreach($items as $item)
                            @include('menus.partials.menu-item', ['item' => $item, 'level' => 0])
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-3">
                        <p class="text-muted">No menu items yet. Add one using the form on the left.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<div class="mt-3">
    <a href="{{ route('menus.index', $website) }}" class="btn btn-secondary">Back to All Menus</a>
</div>

<!-- Edit Modal Template -->
<div class="modal fade" id="editItemModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editItemForm" method="POST" class="menu-item-form">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title">Edit Menu Item</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Title</label>
                        <input type="text" class="form-control" name="title" id="edit-title" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Link Type</label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input item-type-radio" type="radio" name="type" id="edit-type-url" value="url">
                                <label class="form-check-label" for="edit-type-url">URL</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input item-type-radio" type="radio" name="type" id="edit-type-page" value="page">
                                <label class="form-check-label" for="edit-type-page">Page</label>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3 url-input-container">
                        <label class="form-label">URL</label>
                        <input type="text" class="form-control" name="url" id="edit-url" placeholder="https://example.com or #anchor or /relative-url">
                        <small class="text-muted d-block mt-1">
                            Enter full URL (https://...), relative URL (/about), or anchor link (#section)
                        </small>
                    </div>

                    <div class="mb-3 page-select-container">
                        <label class="form-label">Choose a Page</label>
                        <select class="form-select" name="page_id" id="edit-page_id">
                            <option value="">Select a page...</option>
                            @foreach($pages as $page)
                                <option value="{{ $page->id }}">{{ $page->title }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Target</label>
                        <select class="form-select" name="target" id="edit-target">
                            <option value="_self">Same Window</option>
                            <option value="_blank">New Window</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update Item</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
<style>
.menu-item {
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    transition: all 0.2s;
}

.menu-item:hover {
    border-color: #0d6efd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.menu-item-header {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    background: #f8f9fa;
}

.menu-item-header:hover {
    background: #e9ecef;
}

.menu-item-handle {
    cursor: move;
    color: #6c757d;
    margin-right: 10px;
}

.menu-item-content {
    flex: 1;
}

.menu-item-actions {
    display: flex;
    gap: 5px;
}

.menu-children {
    padding-left: 30px;
    margin-top: 8px;
}

.sortable-ghost {
    opacity: 0.4;
    background: #e9ecef;
}

.sortable-drag {
    opacity: 0.8;
}

.sortable-chosen {
    border-color: #0d6efd !important;
}

.nested-indicator {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #0d6efd;
}

.level-1 { padding-left: 30px; }
.level-2 { padding-left: 60px; }
.level-3 { padding-left: 90px; }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Setup menu item form (add and edit)
    function setupMenuItemForm(formElement) {
        const typeRadios = formElement.querySelectorAll('.item-type-radio');
        const urlContainer = formElement.querySelector('.url-input-container');
        const pageContainer = formElement.querySelector('.page-select-container');
        const urlInput = urlContainer.querySelector('input[name="url"]');
        const pageSelect = pageContainer.querySelector('select[name="page_id"]');

        function toggleInputs() {
            const selectedType = formElement.querySelector('input[name="type"]:checked').value;

            if (selectedType === 'url') {
                urlContainer.classList.remove('d-none');
                urlInput.required = true;
                pageContainer.classList.add('d-none');
                pageSelect.required = false;
            } else {
                urlContainer.classList.add('d-none');
                urlInput.required = false;
                pageContainer.classList.remove('d-none');
                pageSelect.required = true;
            }
        }

        typeRadios.forEach(radio => radio.addEventListener('change', toggleInputs));
        toggleInputs();
    }

    // Setup add form
    const addForm = document.querySelector('form.menu-item-form');
    if (addForm) {
        setupMenuItemForm(addForm);
    }

    // Setup edit modal
    const editModal = document.getElementById('editItemModal');
    const editForm = document.getElementById('editItemForm');
    if (editModal && editForm) {
        editModal.addEventListener('shown.bs.modal', function () {
            setupMenuItemForm(editForm);
        });
    }

    // Edit button handlers
    window.editMenuItem = function(itemId, title, type, url, pageId, target) {
        const form = document.getElementById('editItemForm');
        form.action = `/websites/{{ $website->id }}/menus/{{ $menu->id }}/items/${itemId}`;

        document.getElementById('edit-title').value = title;
        document.getElementById('edit-url').value = url || '';
        document.getElementById('edit-page_id').value = pageId || '';
        document.getElementById('edit-target').value = target;

        if (type === 'url') {
            document.getElementById('edit-type-url').checked = true;
        } else {
            document.getElementById('edit-type-page').checked = true;
        }

        setupMenuItemForm(form);

        const modal = new bootstrap.Modal(editModal);
        modal.show();
    };

    // Delete confirmation
    window.deleteMenuItem = function(itemId) {
        if (confirm('Are you sure you want to delete this menu item?')) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/websites/{{ $website->id }}/menus/{{ $menu->id }}/items/${itemId}`;

            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = '{{ csrf_token() }}';

            const methodInput = document.createElement('input');
            methodInput.type = 'hidden';
            methodInput.name = '_method';
            methodInput.value = 'DELETE';

            form.appendChild(csrfInput);
            form.appendChild(methodInput);
            document.body.appendChild(form);
            form.submit();
        }
    };

    // Sortable.js for drag and drop
    const menuContainer = document.getElementById('menu-items-sortable');

    if (menuContainer) {
        function initSortable(element) {
            Sortable.create(element, {
                group: 'nested',
                animation: 150,
                fallbackOnBody: true,
                swapThreshold: 0.65,
                handle: '.menu-item-handle',
                ghostClass: 'sortable-ghost',
                chosenClass: 'sortable-chosen',
                dragClass: 'sortable-drag',
                onEnd: function(evt) {
                    updateMenuStructure();
                }
            });
        }

        // Initialize sortable on main container
        initSortable(menuContainer);

        // Initialize sortable on all nested containers
        document.querySelectorAll('.menu-children').forEach(function(el) {
            initSortable(el);
        });

        // Function to update menu structure via AJAX
        function updateMenuStructure() {
            const structure = buildStructure(menuContainer);

            fetch('/websites/{{ $website->id }}/menus/{{ $menu->id }}/update-structure', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ structure: structure })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    console.log('Menu structure updated');
                } else {
                    alert('Failed to update menu structure');
                    location.reload();
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while updating the menu');
            });
        }

        function buildStructure(container, parentId = null) {
            const items = [];
            const children = container.children;

            for (let i = 0; i < children.length; i++) {
                const item = children[i];
                const itemId = item.dataset.itemId;

                items.push({
                    id: parseInt(itemId),
                    parent_id: parentId,
                    sort_order: i
                });

                // Check for nested children
                const nestedContainer = item.querySelector('.menu-children');
                if (nestedContainer) {
                    const nestedItems = buildStructure(nestedContainer, parseInt(itemId));
                    items.push(...nestedItems);
                }
            }

            return items;
        }
    }
});
</script>
@endpush
@endsection