@extends('admin.layouts.app')

@section('title', $title)

@section('content')
    <style>
        .menu-structure {
            border: 1px solid #ccc;
            min-height: 100px;
            padding: 10px;
        }

        .menu-item {
            background: #f7f7f7;
            border: 1px solid #ddd;
            margin: 5px 0;
            padding: 5px;
            position: relative;
        }

        .menu-item-header {
            display: flex;
            justify-content: space-between;
            cursor: pointer;
        }

        .menu-item.open .menu-item-details {
            display: block !important;
        }

        .drag-handle {
            cursor: grab;
            margin-right: 10px;
        }

        .scrollable-box {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
    <div class="container">
        <div class="row">
            <!-- Add Menu Items Column -->
            <div class="col-md-4">
                <div class="bgc-white bd bdrs-3 p-20 mB-20">
                    <!-- Pages -->
                    <div class="mb-4">
                        <h6 class="c-grey-900">Pages</h6>
                        <div class="scrollable-box">
                            <ul class="list-unstyled mb-2" id="available-pages">
                                @foreach($pages as $page)
                                    <li><label><input type="checkbox" value="{{ $page->id }}" data-title="{{ $page->title }}" data-url="{{ route('ch_page', $page->slug) }}"> {{ $page->title }}</label></li>
                                @endforeach
                                <!-- Additional items here -->
                            </ul>
                        </div>
                        <div class="text-end mt-2">
                            <button class="btn btn-primary btn-sm" id="add-pages-to-menu">Add to Menu</button>
                        </div>
                    </div>

                    <!-- Blog Post Categories -->
                    <div class="mb-4">
                        <h6 class="c-grey-900">Blog Post Categories</h6>
                        <div class="scrollable-box">
                            <ul class="list-unstyled mb-2" id="available-blog-posts-categories">
                                @foreach($blogPostCategories as $blogPostCategory)
                                    <li><label><input type="checkbox" value="{{ $blogPostCategory->id }}" data-title="{{ $blogPostCategory->name }}" data-url="{{ route('blog.category', $blogPostCategory->slug) }}"> {{ $blogPostCategory->name }}</label></li>
                                @endforeach
                             </ul>
                        </div>
                        <div class="text-end mt-2">
                            <button class="btn btn-primary btn-sm" id="add-blog-posts-categories-to-menu">Add to Menu</button>
                        </div>
                    </div>

                    <!-- Posts -->
                    <div class="mb-4">
                        <h6 class="c-grey-900">Posts</h6>
                        <div class="scrollable-box">
                            <ul class="list-unstyled mb-2" id="available-posts">
                                @foreach($blogposts as $post)
                                    <li><label><input type="checkbox" value="{{ $post->id }}" data-title="{{ $post->title }}" data-url="{{ route('blog.post', $post->slug) }}"> {{ $post->title }}</label></li>
                                @endforeach
                                <!-- Additional items here -->
                            </ul>
                        </div>
                        <div class="text-end mt-2">
                            <button class="btn btn-primary btn-sm" id="add-posts-to-menu">Add to Menu</button>
                        </div>
                    </div>

                    <!-- Products -->
                    <div class="mb-4">
                        <h6 class="c-grey-900">Products</h6>
                        <div class="scrollable-box">
                            <ul class="list-unstyled mb-2" id="available-products">
                                @foreach($products as $product)
                                    <li><label><input type="checkbox" value="{{ $product->id }}" data-title="{{ $product->name }}" data-url="{{ route('ch_product_single', $product->slug) }}"> {{ $product->name }}</label></li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="text-end mt-2">
                            <button class="btn btn-primary btn-sm" id="add-products-to-menu">Add to Menu</button>
                        </div>
                    </div>

                    <!--Product Categories -->
                    <div class="mb-4">
                        <h6 class="c-grey-900">Product Categories</h6>
                        <div class="scrollable-box">
                            <ul class="list-unstyled mb-2" id="available-product-categories">
                                @foreach($productCategories as $category)
                                    <li><label><input type="checkbox" value="{{ $category->id }}" data-title="{{ $category->name }}" data-url="{{ route('frontend.products.category', $category->slug) }}"> {{ $category->name }}</label></li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="text-end mt-2">
                            <button class="btn btn-primary btn-sm" id="add-product-categories-to-menu">Add to Menu</button>
                        </div>
                    </div>

                    <!-- Custom Links -->
                    <div class="mb-4">
                        <h6 class="c-grey-900">Custom Links</h6>
                        <div class="mb-3">
                            <label class="form-label">URL</label>
                            <input type="text" class="form-control" id="custom-url" placeholder="http://">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Link Text</label>
                            <input type="text" class="form-control" id="custom-text">
                        </div>
                        <div class="text-end">
                            <button class="btn btn-primary btn-sm" id="add-custom-link">Add to Menu</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Menu Structure Column -->
            <div class="col-md-8">
                <div class="row">
                    <div class="bgc-white bd bdrs-3 p-20 mB-20">
                        <h2 class="mb-0">Menu Structure for "<span class="text-dark">{{ $menu->name }}</span>"</h2>
                        <span class="text-muted text-small">Select and add Menu Items from left side.<br>Drag items to reorder, click to expand and edit details.</span>

                        <div class="menu-structure mt-3" id="menu-structure">
                            <ul id="menu-list" class="list-unstyled"></ul>
                        </div>

                        <div class="mt-3 d-flex flex-row">
                            <a href="{{ route('ch-admin.menus.index') }}" class="btn btn-secondary me-2">Cancel</a>
                            <button class="btn btn-success" id="save-menu">Save Changes</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{url('assets/custom/js/axios.min.js')}}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    <script>
        let menuItems = @json($menuItems) || []; // Initialize menuItems from backend or as an empty array
        let nextId = 100; // For custom link unique IDs
        console.log(JSON.stringify(menuItems));
        // Initialize menu rendering
        renderMenu(menuItems);

        /**
         * Renders the menu structure.
         * @param {Array} items - Menu items array.
         */
        function renderMenu(items = []) {
            const ul = document.getElementById('menu-list');
            ul.innerHTML = ''; // Clear current content

            items.forEach(item => {
                ul.appendChild(createMenuItemElement(item));
            });

            makeSortable(ul); // Enable drag-and-drop sorting
        }

        /**
         * Creates a menu item element with children support.
         * @param {Object} item - Menu item object.
         * @returns {HTMLElement} li - Menu item list element.
         */
        function createMenuItemElement(item) {
            const li = document.createElement('li');
            li.classList.add('menu-item', 'mb-2');
            li.dataset.id = item.id;

            li.innerHTML = `
            <div class="menu-item-header d-flex align-items-center">
                <span class="drag-handle">☰</span>
                <span>${item.title}</span>
                <button class="btn btn-link p-0 ms-auto remove-item text-danger">Remove</button>
            </div>
            <div class="menu-item-details d-none">
                <div class="mb-2">
                    <label class="form-label">Navigation Label</label>
                    <input type="text" class="form-control item-label" value="${item.title}">
                </div>
                <div class="mb-2">
                    <label class="form-label">URL</label>
                    <input type="text" class="form-control item-url" value="${item.url}">
                </div>
            </div>
            <ul class="children-list list-unstyled ms-3"></ul>
        `;

            const childUl = li.querySelector('.children-list');

            if (item.children && item.children.length > 0) {
                item.children.forEach(child => {
                    childUl.appendChild(createMenuItemElement(child));
                });
            }

            makeSortable(childUl); // Enable drag-and-drop for children

            // Toggle item details visibility
            li.querySelector('.menu-item-header').addEventListener('click', () => {
                li.querySelector('.menu-item-details').classList.toggle('d-none');
            });

            // Remove item event
            li.querySelector('.remove-item').addEventListener('click', (e) => {
                e.stopPropagation();
                removeItemById(item.id);
                renderMenu(menuItems);
            });

            // Update item fields
            li.querySelector('.item-label').addEventListener('input', (e) => {
                item.title = e.target.value;
            });
            li.querySelector('.item-url').addEventListener('input', (e) => {
                item.url = e.target.value;
            });

            return li;
        }

        /**
         * Adds selected items to the menu from a checkbox selector.
         * @param {String} selector - CSS selector for checkboxes.
         */
        function addCheckedItems(selector) {
            const inputs = document.querySelectorAll(selector + ':checked');
            inputs.forEach(input => {
                menuItems.push({
                    id: nextId++,
                    title: input.dataset.title,
                    url: input.dataset.url,
                    children: []
                });
                input.checked = false;
            });
            renderMenu(menuItems); // Re-render menu
        }

        /**
         * Removes a menu item by ID.
         * @param {Number} id - ID of the menu item to remove.
         */
        function removeItemById(id) {
            removeItemRecursive(id, menuItems);
        }

        /**
         * Recursively removes a menu item and its children by ID.
         * @param {Number} id - ID of the menu item to remove.
         * @param {Array} arr - Array of menu items.
         * @returns {Boolean} - True if item was removed, false otherwise.
         */
        function removeItemRecursive(id, arr) {
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].id === id) {
                    arr.splice(i, 1);
                    return true;
                }
                if (arr[i].children && removeItemRecursive(id, arr[i].children)) {
                    return true;
                }
            }
            return false;
        }

        /**
         * Makes a list sortable with nested support.
         * @param {HTMLElement} el - List element.
         */
        function makeSortable(el) {
            Sortable.create(el, {
                group: 'nested',
                animation: 150,
                handle: '.drag-handle',
                fallbackOnBody: true,
                swapThreshold: 0.65,
                onEnd: () => {
                    menuItems = buildStructureFromDOM(document.getElementById('menu-list'));
                }
            });
        }

        /**
         * Builds a nested structure from the DOM.
         * @param {HTMLElement} ul - List element.
         * @returns {Array} - Nested menu structure.
         */
        function buildStructureFromDOM(ul) {
            const arr = [];
            ul.querySelectorAll(':scope > li.menu-item').forEach(li => {
                const id = parseInt(li.dataset.id);
                const item = menuItems.find(item => item.id === id) || {};
                const title = li.querySelector('.item-label').value;
                const url = li.querySelector('.item-url').value;
                const childrenUL = li.querySelector('.children-list');
                arr.push({
                    id,
                    title,
                    url,
                    children: buildStructureFromDOM(childrenUL)
                });
            });
            return arr;
        }

        // Save menu to the server
        document.getElementById('save-menu').addEventListener('click', async () => {
            try {
                const payload = {
                    menuItems
                };

                 await httpClient.post("{{ route('ch-admin.menus.item.store', ['id' => $menu->id]) }}", payload);
            } catch (error) {
                console.error('Error:', error);
                alert('Error saving the menu!');
            }
        });

        // Add event listeners for adding items
        const addButtons = [
            ['add-pages-to-menu', '#available-pages input[type=checkbox]'],
            ['add-blog-posts-categories-to-menu', '#available-blog-posts-categories input[type=checkbox]'],
            ['add-posts-to-menu', '#available-posts input[type=checkbox]'],
            ['add-product-categories-to-menu', '#available-product-categories input[type=checkbox]'],
            ['add-products-to-menu', '#available-products input[type=checkbox]'],
            ['add-kb-articles-to-menu', '#available-kb-articles input[type=checkbox]'],
            ['add-kb-categories-to-menu', '#available-kb-categories input[type=checkbox]']
        ];

        addButtons.forEach(([buttonId, selector]) => {
            document.getElementById(buttonId).addEventListener('click', () => addCheckedItems(selector));
        });
    </script>
@endpush