@extends('admin.admin_master')
@section('content')
    <div class="content-wrapper">
        <div class="container-fluid">
            <h2><span>Menus</span></h2>

            <div class="content info-box">
                @if (count($menus) > 0)
                    Select a menu to edit:
                    <form action="{{ route('menus.index') }}" class="form-inline">
                        <select name="id">
                            @foreach ($menus as $menu)
                                <option value="{{ $menu->id }}"
                                    {{ $desiredMenu && $menu->id == $desiredMenu->id ? 'selected' : '' }}>
                                    {{ $menu->title }}
                                </option>
                            @endforeach
                        </select>
                        <button class="btn btn-sm btn-default btn-menu-select">Select</button>
                    </form>
                    or
                @endif
            </div>

            <div class="row" id="main-row">
                <div class="col-sm-3 cat-form {{ count($menus) == 0 ? 'disabled' : '' }}">
                    <h3><span>Add Menu Items</span></h3>
                    <div class="panel-group" id="menu-items">
                        <!-- Categories Panel -->
                        <div class="panel panel-default mb-3 bg-white">
                            <div class="panel-heading bg-light p-2">
                                <a href="#categories-list" data-toggle="collapse" data-parent="#menu-items"
                                    class="d-block text-decoration-none">
                                    Categories <span class="caret float-right"></span>
                                </a>
                            </div>
                            <div class="panel-collapse collapse show" id="categories-list">
                                <div class="panel-body p-3" style="max-height: 400px; overflow-y: auto;">
                                    <div class="item-list-body">
                                        @foreach ($categories as $cat)
                                            <p><input type="checkbox" name="select-category[]" value="{{ $cat->id }}">
                                                {{ $cat->title_en }}</p>
                                        @endforeach
                                    </div>
                                    <div class="item-list-footer mt-2">
                                        <label class="btn btn-sm btn-outline-secondary">
                                            <input type="checkbox" id="select-all-categories"> Select All
                                        </label>
                                        <button type="button" class="btn btn-outline-primary btn-sm float-right"
                                            id="add-categories">Add to Menu</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Posts Panel -->
                        <div class="panel panel-default mb-3 bg-white">
                            <div class="panel-heading bg-light p-2 px-3">
                                <a href="#posts-list" data-toggle="collapse" data-parent="#menu-items"
                                    class="d-block text-decoration-none">
                                    Posts <span class="caret float-right"></span>
                                </a>
                            </div>
                            <div class="panel-collapse collapse" id="posts-list">
                                <div class="panel-body p-3" style="max-height: 400px; overflow-y: auto;">
                                    <input type="text" id="post-search" name="post-search" class="form-control mb-2"
                                        placeholder="Search posts">
                                    <div class="item-list-body">
                                        @foreach ($posts as $post)
                                            <p><input type="checkbox" name="select-post[]" value="{{ $post->id }}">
                                                {{ $post->title_en }}</p>
                                        @endforeach
                                    </div>
                                    <div class="item-list-footer mt-2">
                                        <label class="btn btn-sm btn-outline-secondary">
                                            <input type="checkbox" id="select-all-posts"> Select All
                                        </label>
                                        <button type="button" class="btn btn-outline-primary btn-sm float-right"
                                            id="add-posts">Add to Menu</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Pages Panel -->
                        <div class="panel panel-default mb-3 bg-white">
                            <div class="panel-heading bg-light p-2">
                                <a href="#pages-list" data-toggle="collapse" data-parent="#menu-items"
                                    class="d-block text-decoration-none">
                                    Pages <span class="caret float-right"></span>
                                </a>
                            </div>
                            <div class="panel-collapse collapse" id="pages-list">
                                <div class="panel-body p-3" style="max-height: 400px; overflow-y: auto;">
                                    <div class="item-list-body">
                                        @foreach ($pages as $page)
                                            <p><input type="checkbox" name="select-page[]" value="{{ $page->id }}">
                                                {{ $page->title_en }}</p>
                                        @endforeach
                                    </div>
                                    <div class="item-list-footer mt-2">
                                        <label class="btn btn-sm btn-outline-secondary">
                                            <input type="checkbox" id="select-all-pages"> Select All
                                        </label>
                                        <button type="button" class="btn btn-outline-primary btn-sm float-right"
                                            id="add-pages">Add to Menu</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Products Panel -->
                        <div class="panel panel-default mb-3 bg-white">
                            <div class="panel-heading bg-light p-2">
                                <a href="#products-list" data-toggle="collapse" data-parent="#menu-items"
                                    class="d-block text-decoration-none">
                                    Products <span class="caret float-right"></span>
                                </a>
                            </div>
                            <div class="panel-collapse collapse" id="products-list">
                                <div class="panel-body p-3" style="max-height: 400px; overflow-y: auto;">
                                    <div class="item-list-body">
                                        @foreach ($products as $product)
                                            <p><input type="checkbox" name="select-product[]" value="{{ $product->id }}">
                                                {{ $product->title_en }}</p>
                                        @endforeach
                                    </div>
                                    <div class="item-list-footer mt-2">
                                        <label class="btn btn-sm btn-outline-secondary">
                                            <input type="checkbox" id="select-all-products"> Select All
                                        </label>
                                        <button type="button" class="btn btn-outline-primary btn-sm float-right"
                                            id="add-products">Add to Menu</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Custom Links Panel -->
                        <div class="panel panel-default">
                            <div class="panel-heading bg-light p-2">
                                <a href="#custom-links" data-toggle="collapse" data-parent="#menu-items"
                                    class="d-block text-decoration-none">
                                    Custom Links <span class="caret float-right"></span>
                                </a>
                            </div>
                            <div class="panel-collapse collapse" id="custom-links">
                                <div class="panel-body p-3">
                                    <div class="form-group">
                                        <label for="url">URL</label>
                                        <input type="url" id="url" class="form-control"
                                            placeholder="https://">
                                    </div>
                                    <div class="form-group">
                                        <label for="linktext_en">Link Text (English)</label>
                                        <input type="text" id="linktext_en" class="form-control" placeholder="">
                                    </div>
                                    <div class="form-group">
                                        <label for="linktext_np">Link Text (Nepali)</label>
                                        <input type="text" id="linktext_np" class="form-control" placeholder="">
                                    </div>
                                </div>
                                <div class="item-list-footer mt-2">
                                    <button type="button" class="btn btn-outline-primary btn-sm float-right"
                                        id="add-custom-link">Add to Menu</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-sm-9 cat-view">
                    <h3><span>Menu Structure</span></h3>
                    <div id="menu-content">
                        <div id="result"></div>
                        <div style="min-height: 240px;">
                            <div class="cf nestable-lists">
                                @isset($menuitems)
                                    <div class="dd" id="nestable">
                                        <ol class="dd-list">
                                            @foreach ($menuitems as $item)
                                                @if ($item->parent_item === null)
                                                    <li class="dd-item" data-id="{{ $item->id }}">
                                                        <div class="dd-handle dd3-handle">Drag</div>
                                                        <div class="dd3-content">
                                                            {{ $item->title_en ?? '' }}
                                                            <div class="position-absolute" style="right: 0; top: 0;">
                                                                <span class="edit-from">Link Edit</span>
                                                            </div>
                                                            <div class="show-edit-form" style="display: none;">
                                                                <div class="input-box">
                                                                    <form method="post"
                                                                        action="{{ route('menus.updateMenuItem', ['id' => $item->id]) }}">
                                                                        @csrf
                                                                        <div class="form-group">
                                                                            <label>Link Title English</label>
                                                                            <input type="text" name="title_en"
                                                                                class="form-control"
                                                                                value="{{ $item->title_en ?? '' }}">
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <label>Link Title Nepali</label>
                                                                            <input type="text" name="title_np"
                                                                                class="form-control"
                                                                                value="{{ $item->title_np ?? '' }}">
                                                                        </div>
                                                                        @if ($item->type == 'custom')
                                                                            <div class="form-group">
                                                                                <label>URL</label>
                                                                                <input type="text" name="slug"
                                                                                    value="{{ $item->slug }}"
                                                                                    class="form-control">
                                                                            </div>
                                                                            <div class="form-group">
                                                                                <input type="checkbox" name="target"
                                                                                    value="_blank"
                                                                                    {{ $item->target == '_blank' ? 'checked' : '' }}>
                                                                                Open in a new tab
                                                                            </div>
                                                                        @endif
                                                                        <div class="form-group">
                                                                            <button
                                                                                class="btn btn-sm btn-primary">Save</button>
                                                                            <a href="{{ route('menus.destroy', ['id' => $item->id]) }}"
                                                                                class="btn btn-sm btn-danger">Delete</a>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <ol class="dd-list">
                                                            @foreach ($menuitems as $child)
                                                                @if ($child->parent_item === $item->id)
                                                                    <li class="dd-item" data-id="{{ $child->id }}">
                                                                        <div class="dd-handle dd3-handle">Drag</div>
                                                                        <div class="dd3-content">
                                                                            {{ $child->title_en ?? '' }}
                                                                            <div class="position-absolute"
                                                                                style="right: 0; top: 0;">
                                                                                <span class="edit-from">Link Edit</span>
                                                                            </div>
                                                                            <div class="show-edit-form"
                                                                                style="display: none;">
                                                                                <div class="input-box">
                                                                                    <form method="post"
                                                                                        action="{{ route('menus.updateMenuItem', ['id' => $child->id]) }}">
                                                                                        @csrf
                                                                                        <div class="form-group">
                                                                                            <label>Link Title English</label>
                                                                                            <input type="text"
                                                                                                name="title_en"
                                                                                                class="form-control"
                                                                                                value="{{ $child->title_en ?? '' }}">
                                                                                        </div>
                                                                                        <div class="form-group">
                                                                                            <label>Link Title Nepali</label>
                                                                                            <input type="text"
                                                                                                name="title_np"
                                                                                                class="form-control"
                                                                                                value="{{ $child->title_np ?? '' }}">
                                                                                        </div>
                                                                                        @if ($child->type == 'custom')
                                                                                            <div class="form-group">
                                                                                                <label>URL</label>
                                                                                                <input type="text"
                                                                                                    name="slug"
                                                                                                    value="{{ $child->slug }}"
                                                                                                    class="form-control">
                                                                                            </div>
                                                                                            <div class="form-group">
                                                                                                <input type="checkbox"
                                                                                                    name="target"
                                                                                                    value="_blank"
                                                                                                    {{ $child->target == '_blank' ? 'checked' : '' }}>
                                                                                                Open in a new tab
                                                                                            </div>
                                                                                        @endif
                                                                                        <div class="form-group">
                                                                                            <button
                                                                                                class="btn btn-sm btn-primary">Save</button>
                                                                                            <a href="{{ route('menus.destroy', ['id' => $child->id]) }}"
                                                                                                class="btn btn-sm btn-danger">Delete</a>
                                                                                        </div>
                                                                                    </form>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                @endif
                                                            @endforeach
                                                        </ol>
                                                    </li>
                                                @endif
                                            @endforeach
                                        </ol>
                                    </div>
                                @endisset
                            </div>
                        </div>
                    </div>
                </div>
                <span id="nestable-output"></span>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <link href="{{ asset('admin/plugins/neastable/jquery.nestable.min.css') }}" rel="stylesheet">
    <script src="{{ asset('admin/plugins/neastable/jquery.nestable.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#nestable').nestable().on('change', updateOutput);
            $('.dd').nestable();

            document.addEventListener('click', function(event) {
                if (event.target.matches('.edit-from')) {
                    const li = event.target.closest('.dd-item');
                    const li_add = event.target.closest('.dd3-content');
                    const editForm = li.querySelector('.show-edit-form');
                    const isHidden = editForm.style.display === 'none';
                    $(li_add).toggleClass('view-form', isHidden);
                    editForm.style.display = isHidden ? 'block' : 'none';
                }
            });

            $('#select-all-categories, #select-all-posts, #select-all-pages, #select-all-products').click(
                function() {
                    const listId = $(this).attr('id').replace('select-all-', '') + '-list';
                    $(`#${listId} :checkbox`).prop('checked', this.checked);
                });

            $('#add-categories').click(() => addItemsToMenu('select-category',
                '{{ route('menus.addCatToMenu') }}'));
            $('#add-pages').click(() => addItemsToMenu('select-page', '{{ route('menus.addPageToMenu') }}'));
            $('#add-products').click(() => addItemsToMenu('select-product',
                '{{ route('menus.addProductToMenu') }}'));
            $('#add-posts').click(() => addItemsToMenu('select-post', '{{ route('menus.addPostToMenu') }}'));

            $("#add-custom-link").click(function() {
                const menuid = @json($desiredMenu->id);
                const url = $('#url').val();
                const title_en = $('#linktext_en').val();
                const title_np = $('#linktext_np').val();

                if (url && title_en) {
                    $.ajax({
                        type: "GET",
                        url: '{{ route('menus.addCustomLink') }}',
                        data: {
                            menuid,
                            url,
                            title_en,
                            title_np
                        },
                        success: function() {
                            location.reload();
                        },
                        error: function(xhr, status, error) {
                            console.error("Error adding custom link:", error);
                            alert("Failed to add custom link. Please try again.");
                        }
                    });
                } else {
                    alert("Please enter both URL and English link text.");
                }
            });

            $('#post-search').on('keyup', function() {
                const value = $(this).val().toLowerCase();
                $('#posts-list .item-list-body p').filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                });
            });
        });

        function updateOutput(e) {
            const list = e.length ? e : $(e.target);
            const output = list.data('output');
            const menu = list.nestable('serialize');

            $.ajax({
                url: '{{ route('menus.updatemenuajax') }}',
                type: 'POST',
                dataType: 'json',
                data: {
                    _token: '{{ csrf_token() }}',
                    menu: JSON.stringify(menu)
                },
                success: function(data) {
                    console.log("Menu structure updated successfully:", data);
                },
                error: function(xhr, status, error) {
                    console.error("Error updating menu structure:", error);
                    alert("Failed to update menu structure. Please try again.");
                }
            });
        }

        function addItemsToMenu(inputName, routeUrl) {
            const menuid = @json($desiredMenu->id);
            const ids = $(`input[name="${inputName}[]"]:checked`).map(function() {
                return $(this).val();
            }).get();

            if (ids.length > 0) {
                $.ajax({
                    type: "GET",
                    url: routeUrl,
                    data: {
                        menuid,
                        ids
                    },
                    success: function() {
                        location.reload();
                    },
                    error: function(xhr, status, error) {
                        console.error("Error adding items to menu:", error);
                        alert("Failed to add items to menu. Please try again.");
                    }
                });
            } else {
                alert("Please select at least one item to add to the menu.");
            }
        }
    </script>

    <style>
        /* Nestable Styles */
        .dd {
            position: relative;
            display: block;
            margin: 0;
            padding: 0;
            max-width: 600px;
            list-style: none;
            font-size: 13px;
            line-height: 20px;
        }

        .dd-list {
            display: block;
            position: relative;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .dd-list .dd-list {
            padding-left: 30px;
        }

        .dd-collapsed .dd-list {
            display: none;
        }

        .dd-item,
        .dd-empty,
        .dd-placeholder {
            display: block;
            position: relative;
            margin: 0;
            padding: 0;
            min-height: 20px;
            font-size: 13px;
            line-height: 20px;
        }

        .dd-handle {
            display: block;
            height: 30px;
            margin: 5px 0;
            padding: 5px 10px;
            color: #333;
            text-decoration: none;
            font-weight: bold;
            border: 1px solid #ccc;
            background: #fafafa;
            background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
            background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
            background: linear-gradient(top, #fafafa 0%, #eee 100%);
            -webkit-border-radius: 3px;
            border-radius: 3px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

        .dd-handle:hover {
            color: #2ea8e5;
            background: #fff;
        }

        .dd-item>button {
            display: block;
            position: relative;
            cursor: pointer;
            float: left;
            width: 25px;
            height: 20px;
            margin: 5px 0;
            padding: 0;
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
            border: 0;
            background: transparent;
            font-size: 12px;
            line-height: 1;
            text-align: center;
            font-weight: bold;
        }

        .dd-item>button:before {
            content: '+';
            display: block;
            position: absolute;
            width: 100%;
            text-align: center;
            text-indent: 0;
        }

        .dd-item>button[data-action="collapse"]:before {
            content: '-';
        }

        .dd-placeholder,
        .dd-empty {
            margin: 5px 0;
            padding: 0;
            min-height: 30px;
            background: #f2fbff;
            border: 1px dashed #b6bcbf;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

        .dd-empty {
            border: 1px dashed #bbb;
            min-height: 100px;
            background-color: #e5e5e5;
            background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
                -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
            background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
                -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
            background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
                linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
            background-size: 60px 60px;
            background-position: 0 0, 30px 30px;
        }

        .dd-dragel {
            position: absolute;
            pointer-events: none;
            z-index: 9999;
        }

        .dd-dragel>.dd-item .dd-handle {
            margin-top: 0;
        }

        .dd-dragel .dd-handle {
            -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .1);
            box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .1);
        }

        .nestable-lists {
            display: block;
            clear: both;
            padding: 30px 0;
            width: 100%;
            border: 0;
            border-top: 2px solid #ddd;
            border-bottom: 2px solid #ddd;
        }

        #nestable-menu {
            padding: 0;
            margin: 20px 0;
        }

        #nestable-output,
        #nestable2-output {
            width: 100%;
            height: 7em;
            font-size: 0.75em;
            line-height: 1.333333em;
            font-family: Consolas, monospace;
            padding: 5px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

        #nestable2 .dd-handle {
            color: #fff;
            border: 1px solid #999;
            background: #bbb;
        }

        #nestable2 .dd-handle:hover {
            background: #bbb;
        }

        #nestable2 .dd-item>button:before {
            color: #fff;
        }

        @media only screen and (min-width: 700px) {
            .dd {
                float: left;
                width: 48%;
            }

            .dd+.dd {
                margin-left: 2%;
            }
        }

        .dd-hover>.dd-handle {
            background: #2ea8e5 !important;
        }

        .dd3-content {
            display: block;
            height: 30px;
            margin: 5px 0;
            padding: 5px 10px 5px 40px;
            color: #333;
            text-decoration: none;
            font-weight: bold;
            border: 1px solid #ccc;
            background: #fafafa;
            background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
            background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
            background: linear-gradient(top, #fafafa 0%, #eee 100%);
            -webkit-border-radius: 3px;
            border-radius: 3px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

        .dd3-content:hover {
            color: #2ea8e5;
            background: #fff;
        }

        .dd-dragel>.dd3-item>.dd3-content {
            margin: 0;
        }

        .dd3-item>button {
            margin-left: 30px;
        }

        .dd3-handle {
            position: absolute;
            margin: 0;
            left: 0;
            top: 0;
            cursor: pointer;
            width: 30px;
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
            border: 1px solid #aaa;
            background: #ddd;
            background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);
            background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
            background: linear-gradient(top, #ddd 0%, #bbb 100%);
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .dd3-handle:before {
            content: '≡';
            display: block;
            position: absolute;
            left: 0;
            top: 3px;
            width: 100%;
            text-align: center;
            text-indent: 0;
            color: #fff;
            font-size: 20px;
            font-weight: normal;
        }

        .dd3-handle:hover {
            background: #ddd;
        }

        .dd3-content.view-form {
            background: white;
            min-height: 350px;
        }
    </style>
@endpush