@extends('backend.layout.master-tailwind')
@section('title', __('Edit Menu'))

@section('admin_styles')
    <link rel="stylesheet" href="{{ asset('assets/backend/css/nestable.css') }}">
    <style>
        .menu-grid {
            display: grid;
            grid-template-columns: 320px 1fr;
            gap: 20px;
            align-items: start;
        }

        @@media (max-width: 1024px) {
            .menu-grid {
                grid-template-columns: 1fr;
            }
        }

        .menu-pc-notice {
            display: none;
        }
        @@media (max-width: 1024px) {
            .menu-pc-notice { display: flex; }
        }

        /* Left panel - Add items */
        .add-panel .card {
            margin-bottom: 12px;
        }

        details.menu-section {
            border-bottom: 1px solid var(--border);
        }

        details.menu-section:last-child {
            border-bottom: none;
        }

        details.menu-section>summary {
            padding: 12px 16px;
            background: var(--hover);
            cursor: pointer;
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            user-select: none;
        }

        details.menu-section>summary::-webkit-details-marker {
            display: none;
        }

        details.menu-section>summary::marker {
            display: none;
        }

        details.menu-section>summary .toggle-icon {
            transition: transform 0.2s;
            transform: rotate(-90deg);
        }

        details.menu-section[open]>summary .toggle-icon {
            transform: rotate(0deg);
        }

        .menu-section-body {
            padding: 16px;
        }

        .page-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .page-list li {
            padding: 8px 0;
        }

        .page-list label {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            font-size: 13px;
        }

        .page-list input[type="checkbox"] {
            width: 16px;
            height: 16px;
        }

        /* Right panel - Menu structure */
        .dd {
            max-width: 100% !important;
            float: none !important;
        }

        .dd-list {
            margin: 0;
            padding: 0;
        }

        .dd-item {
            margin: 8px 0;
        }

        .dd-handle {
            position: relative;
            background: var(--surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: 6px !important;
            padding: 10px 60px 10px 12px !important;
            font-size: 13px !important;
            color: var(--text) !important;
            font-weight: normal !important;
            cursor: move;
            height: auto !important;
            margin: 0 !important;
            display: block;
        }

        .dd-handle:hover {
            background: var(--hover) !important;
            border-color: var(--border-strong) !important;
        }

        .dd-handle .remove_item {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            background: var(--danger);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            z-index: 10;
        }

        .dd-handle .remove_item:hover {
            opacity: 0.8;
        }

        .dd-handle .expand {
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: var(--text-3);
            font-size: 18px;
            z-index: 10;
        }

        .dd-body {
            background: var(--surface);
            border: 1px solid var(--border);
            border-top: none;
            border-radius: 0 0 6px 6px;
            padding: 12px;
            margin-top: -1px;
        }

        .dd-body.hide {
            display: none;
        }

        .dd-body input,
        .dd-body select {
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 8px 10px;
            font-size: 12px;
            color: var(--text);
            width: 100%;
            margin-bottom: 8px;
            box-sizing: border-box;
        }

        .dd-body input:focus,
        .dd-body select:focus {
            outline: none;
            border-color: var(--accent);
        }

        .dd-body input:last-child,
        .dd-body select:last-child {
            margin-bottom: 0;
        }

        .dd-list .dd-list {
            padding-left: 30px;
            margin-top: 8px;
        }
    </style>
@endsection

@section('content')
    <div class="page">
        <div class="page-head">
            <div>
                <h1 class="page-title">{{ __('Edit Menu') }}</h1>
                <p class="page-sub">{{ __('Build and manage your navigation menu') }}</p>
            </div>
            <div class="page-actions">
                <a href="{{ route('admin.menu') }}" class="btn ghost sm">
                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M19 12H5M5 12l7-7M5 12l7 7" />
                    </svg>
                    {{ __('Back') }}
                </a>
            </div>
        </div>

        <div class="menu-pc-notice" style="gap:10px;align-items:flex-start;background:color-mix(in oklch,var(--warning,#f59e0b) 10%,transparent);border:1px solid color-mix(in oklch,var(--warning,#f59e0b) 35%,transparent);border-radius:10px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:var(--text-2)">
            <svg class="icon" style="flex:none;margin-top:1px;color:var(--warning,#f59e0b)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 16H3z"/><path d="M12 10v4"/><circle cx="12" cy="17" r=".6" fill="currentColor"/></svg>
            <div>
                <div style="font-weight:600;margin-bottom:3px">{{ __('Desktop recommended') }}</div>
                {{ __('The menu builder uses drag-and-drop to reorder and nest items. This works best on a PC or desktop browser — touch drag may not function correctly on mobile.') }}
            </div>
        </div>

        <form action="{{ route('admin.menu.update', $menu->id) }}" id="menu_update_form" method="post"
            enctype="multipart/form-data">
            <input type="hidden" name="menu_id" id="menu_id" value="{{ $menu->id }}">
            @csrf
            @php
                $menu_content = '';
                if (!empty($menu->page_content)) {
                    $menu_content = $menu->page_content;
                } else {
                    $menu_content = '[{"ptype":"custom","pname":"Home","purl":"@url","id":1}]';
                }
            @endphp
            <textarea id="menu_content" name="menu_content" style="display:none">{{ $menu_content }}</textarea>

            <div class="card" style="margin-bottom:20px;max-width:500px">
                <div class="card-body">
                    <label class="field-label">{{ __('Menu Title') }}</label>
                    <input type="text" class="input" style="width:100%" id="title" name="title"
                        value="{{ $menu->title }}">
                </div>
            </div>

            <div class="menu-grid">
                {{-- Left: Add Menu Items --}}
                <div class="add-panel">
                    <div class="card">
                        <div class="card-head">
                            <div class="card-title">{{ __('Add Menu Items') }}</div>
                        </div>
                        <div style="padding:0">
                            {!! render_dynamic_pages_list($menu->lang) !!}

                            {{-- Static Pages --}}
                            <details class="menu-section" open>
                                <summary>
                                    {{ __('Static Pages') }}
                                    <svg class="icon toggle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2">
                                        <path d="m6 9 6 6 6-6" />
                                    </svg>
                                </summary>
                                <div class="menu-section-body">
                                    <ul class="page-list">
                                        <li>
                                            <label>
                                                <input type="checkbox" class="menu-item-checkbox" data-title="Home"
                                                    data-url="@url">
                                                {{ __('Home') }}
                                            </label>
                                        </li>
                                        <li>
                                            <label>
                                                <input type="checkbox" class="menu-item-checkbox" data-title="Subscriptions"
                                                    data-url="@url/subscriptions/all">
                                                {{ __('Subscriptions') }}
                                            </label>
                                        </li>
                                        <li>
                                            <label>
                                                <input type="checkbox" class="menu-item-checkbox" data-title="Projects"
                                                    data-url="@url/projects/all">
                                                {{ __('Projects') }}
                                            </label>
                                        </li>
                                        <li>
                                            <label>
                                                <input type="checkbox" class="menu-item-checkbox" data-title="Jobs"
                                                    data-url="@url/jobs/all">
                                                {{ __('Jobs') }}
                                            </label>
                                        </li>
                                        <li>
                                            <label>
                                                <input type="checkbox" class="menu-item-checkbox" data-title="Talents"
                                                    data-url="@url/talents/all">
                                                {{ __('Talents') }}
                                            </label>
                                        </li>
                                        <li>
                                            <label>
                                                <input type="checkbox" class="menu-item-checkbox" data-title="Blogs"
                                                    data-url="@url/blogs/all">
                                                {{ __('Blog') }}
                                            </label>
                                        </li>
                                    </ul>
                                    <button type="button" class="btn sm primary add_static_page_to_menu"
                                        style="margin-top:12px">
                                        {{ __('Add To Menu') }}
                                    </button>
                                </div>
                            </details>

                            {{-- Custom Links --}}
                            <details class="menu-section">
                                <summary>
                                    {{ __('Custom Links') }}
                                    <svg class="icon toggle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2">
                                        <path d="m6 9 6 6 6-6" />
                                    </svg>
                                </summary>
                                <div class="menu-section-body">
                                    <div style="margin-bottom:12px">
                                        <label class="field-label">{{ __('URL') }}</label>
                                        <input type="text" class="input" style="width:100%" id="custom_url"
                                            placeholder="{{ __('https://') }}">
                                    </div>
                                    <div style="margin-bottom:12px">
                                        <label class="field-label">{{ __('Link Text') }}</label>
                                        <input type="text" class="input" style="width:100%" id="custom_label_text"
                                            placeholder="{{ __('label text') }}">
                                    </div>
                                    <button type="button" id="add_custom_links" class="btn sm primary">
                                        {{ __('Add To Menu') }}
                                    </button>
                                </div>
                            </details>
                        </div>
                    </div>
                </div>

                {{-- Right: Menu Structure --}}
                <div>
                    <div class="card">
                        <div class="card-head">
                            <div class="card-title">{{ __('Menu Structure') }}</div>
                        </div>
                        <div class="card-body">
                            <div class="dd" id="nestable">
                                <ol class="dd-list">
                                    @if (!empty($menu->content))
                                        {!! render_draggable_menu($menu->id) !!}
                                    @else
                                        <li class="dd-item" data-id="1" data-purl="@url"
                                            data-pname="{{ __('Home') }}" data-ptype="custom">
                                            <div class="dd-handle">
                                                {{ __('Home') }}
                                                <span class="remove_item dd-nodrag">×</span>
                                                <span class="expand dd-nodrag">
                                                    <svg class="icon" viewBox="0 0 24 24" fill="none"
                                                        stroke="currentColor" stroke-width="2">
                                                        <path d="m6 9 6 6 6-6" />
                                                    </svg>
                                                </span>
                                            </div>
                                            <div class="dd-body hide">
                                                <input type="text" class="anchor_target"
                                                    placeholder="Target (eg: _blank)">
                                                <input type="text" class="icon_picker"
                                                    placeholder="Icon (eg: fas fa-facebook)">
                                            </div>
                                        </li>
                                    @endif
                                </ol>
                            </div>
                        </div>
                    </div>

                    <div style="margin-top:16px">
                        <button type="submit" id="menu_structure_submit_btn" class="btn primary">
                            {{ __('Update Changes') }}
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/backend/js/jquery.nestable.js') }}"></script>

    <script>
        (function($) {
            "use strict";
            $(document).ready(function() {

                // Initialize nestable
                $('#nestable').nestable({
                    group: 1,
                    maxDepth: 5
                });

                function removeTags(str) {
                    if ((str === null) || (str === '')) {
                        return false;
                    }
                    str = str.toString();
                    return str.replace(/(<([^>]+)>)/ig, '');
                }

                // Add mega menu to menu
                $(document).on('click', '.add_mega_menu_to_menu', function(e) {
                    e.preventDefault();

                    var allList = $(this).prev().find('input[type="checkbox"]:checked');
                    var draggAbleMenuWrap = $('#nestable > ol');

                    $.each(allList, function(index, value) {
                        $(this).attr('checked', false);
                        var draggAbleMenuLength = $('#nestable ol li').length + 1;
                        var allDataAttr = '';
                        var menuType = $(this).parent().parent().data('ptype');
                        allDataAttr += ' data-ptype="' + menuType + '"';
                        var randomID = Math.floor((Math.random() * 99999999) + 1);
                        var oldRandomId = randomID;
                        var AjaxRandomId = randomID;

                        draggAbleMenuWrap.append('<li class="dd-item" data-uniqueid="' +
                            oldRandomId + '" data-id="' + draggAbleMenuLength + '" ' +
                            allDataAttr + '>' +
                            '<div class="dd-handle">' + $(this).parent().text() +
                            '<span class="remove_item dd-nodrag">×</span>' +
                            '<span class="expand dd-nodrag"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg></span>' +
                            '</div>' +
                            '<div class="dd-body hide">' +
                            '<p>loading items...</p>' +
                            '</div>' +
                            '</li>');

                        $.ajax({
                            type: 'POST',
                            url: "{{ route('admin.mega.menu.item.select.markup') }}",
                            data: {
                                _token: "{{ csrf_token() }}",
                                type: menuType,
                                lang: $('select[name="lang"]').val(),
                                menu_id: $('#menu_id').val(),
                            },
                            success: function(data) {
                                setTimeout(function() {
                                    $('li[data-uniqueid="' + AjaxRandomId +
                                        '"] .dd-body').html(data);
                                }, 1000);
                            }
                        });
                    });
                });

                // Add page to menu
                $(document).on('click', '.add_page_to_menu', function(e) {
                    e.preventDefault();
                    var allList = $(this).prev().find('input[type="checkbox"]:checked');
                    var draggAbleMenuWrap = $('#nestable > ol');

                    $.each(allList, function(index, value) {
                        $(this).attr('checked', false);
                        var draggAbleMenuLength = $('#nestable ol li').length + 1;
                        var allDataAttr = '';
                        var menuType = $(this).parent().parent().data('ptype');

                        if (menuType == 'static') {
                            var menuPslug = $(this).parent().parent().data('pslug');
                            var menuPname = $(this).parent().parent().data('pname');
                            allDataAttr += 'data-pname="' + menuPname + '"';
                            allDataAttr += ' data-pslug="' + menuPslug + '"';
                            allDataAttr += ' data-ptype="' + menuType + '"';
                        } else if (menuType == 'dynamic') {
                            var menuPid = $(this).parent().parent().data('pid');
                            allDataAttr += 'data-pid="' + menuPid + '"';
                            allDataAttr += ' data-ptype="' + menuType + '"';
                        } else if (menuType == 'custom') {
                            var menuPurl = $(this).parent().parent().data('purl');
                            var menuPName = $(this).parent().parent().data('pname');
                            allDataAttr += 'data-purl="' + menuPurl + '"';
                            allDataAttr += 'data-pname="' + menuPName + '"';
                            allDataAttr += ' data-ptype="' + menuType + '"';
                        } else {
                            var menuPid = $(this).parent().parent().data('pid');
                            allDataAttr += 'data-pid="' + menuPid + '"';
                            allDataAttr += ' data-ptype="' + menuType + '"';
                        }

                        draggAbleMenuWrap.append('<li class="dd-item" data-id="' +
                            draggAbleMenuLength + '" ' + allDataAttr + '>' +
                            '<div class="dd-handle">' + $(this).parent().text() +
                            '<span class="remove_item dd-nodrag">×</span>' +
                            '<span class="expand dd-nodrag"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg></span>' +
                            '</div>' +
                            '<div class="dd-body hide">' +
                            '<input type="text" class="icon_picker" placeholder="Icon (eg: fas fa-facebook)"/>' +
                            '<input type="text" class="anchor_target" placeholder="Target (eg: _blank)">' +
                            '<input type="text" class="menu_label" placeholder="Menu label">' +
                            '</div>' +
                            '</li>');
                    });
                });

                // Add static page to menu
                $(document).on('click', '.add_static_page_to_menu', function(e) {
                    e.preventDefault();
                    var allList = $(this).prev().find('input[type="checkbox"]:checked');
                    var draggAbleMenuWrap = $('#nestable > ol');

                    $.each(allList, function(index, value) {
                        $(this).attr('checked', false);
                        var draggAbleMenuLength = $('#nestable ol li').length + 1;
                        let menuSlug = $(value).attr('data-url');
                        let menuName = $(value).attr('data-title');

                        draggAbleMenuWrap.append('<li class="dd-item" data-id="' +
                            draggAbleMenuLength + '" data-ptype="custom" data-purl="' +
                            removeTags(menuSlug) + '" data-pname="' + removeTags(menuName) +
                            '">' +
                            '<div class="dd-handle">' + removeTags(menuName) +
                            '<span class="remove_item dd-nodrag">×</span>' +
                            '<span class="expand dd-nodrag"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg></span>' +
                            '</div>' +
                            '<div class="dd-body hide"><input type="text" class="anchor_target" placeholder="Target (eg: _blank)"/><input type="text" class="icon_picker" placeholder="Icon (eg: fas fa-facebook)"/></div>' +
                            '</li>');
                    });
                });

                // Add custom links
                $(document).on('click', '#add_custom_links', function(e) {
                    e.preventDefault();
                    var draggAbleMenuWrap = $('#nestable > ol');
                    var draggAbleMenuLength = $('#nestable ol li').length + 1;
                    var menuName = $('#custom_label_text').val();
                    var menuSlug = $('#custom_url').val();

                    draggAbleMenuWrap.append('<li class="dd-item" data-id="' + draggAbleMenuLength +
                        '" data-ptype="custom" data-purl="' + removeTags(menuSlug) +
                        '" data-pname="' + removeTags(menuName) + '">' +
                        '<div class="dd-handle">' + removeTags(menuName) +
                        '<span class="remove_item dd-nodrag">×</span>' +
                        '<span class="expand dd-nodrag"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg></span>' +
                        '</div>' +
                        '<div class="dd-body hide"><input type="text" class="anchor_target" placeholder="Target (eg: _blank)"/><input type="text" class="icon_picker" placeholder="Icon (eg: fas fa-facebook)"/></div>' +
                        '</li>');
                    $('#custom_label_text').val('');
                    $('#custom_url').val('');
                });

                // Input handlers
                $(document).on('input', '.menu_label', function(e) {
                    var el = $(this);
                    var value = el.val();
                    if (value != '') {
                        el.parent().parent().attr('data-menulabel', value);
                    } else {
                        el.parent().parent().removeAttr('data-menulabel');
                    }
                });

                $(document).on('input', '.icon_picker', function(e) {
                    var el = $(this);
                    var value = el.val();
                    if (value != '') {
                        el.parent().parent().attr('data-icon', value);
                    } else {
                        el.parent().parent().removeAttr('data-icon');
                    }
                });

                $(document).on('input', '.anchor_target', function(e) {
                    var el = $(this);
                    var value = el.val();
                    if (value != '') {
                        el.parent().parent().attr('data-antarget', value);
                    } else {
                        el.parent().parent().removeAttr('data-antarget');
                    }
                });

                $(document).on('input', '.static_pname', function(e) {
                    var el = $(this);
                    var value = el.val();
                    if (value != '') {
                        el.parent().parent().attr('data-pname', value);
                    } else {
                        el.parent().parent().removeAttr('data-pname');
                    }
                });

                // Remove item
                $(document).on('click', '.remove_item', function(e) {
                    $(this).closest('.dd-item').remove();
                });

                // Expand/collapse
                $(document).on('click', '.expand', function(e) {
                    $(this).closest('.dd-item').find('.dd-body').toggleClass('hide');
                });

                // Select change
                $('body').on('change', 'select[name="items_id"]', function(e) {
                    e.preventDefault();
                    var el = $(this);
                    var item_id = $(this).val();
                    if (item_id != '') {
                        el.parent().parent().attr('data-items_id', item_id);
                    } else {
                        el.parent().parent().removeAttr('data-items_id');
                    }
                });

                // Submit
                $(document).on('click', '#menu_structure_submit_btn', function(e) {
                    e.preventDefault();
                    var alldata = $('#nestable').nestable('serialize');
                    $('#menu_content').val(JSON.stringify(alldata));
                    $(this).addClass("disabled");
                    $(this).html('<i class="fas fa-spinner fa-spin mr-1"></i> {{ __('Updating') }}');
                    $('#menu_update_form').trigger("submit");
                });

            });
        }(jQuery));
    </script>
@endsection