@extends('admin.admin_master')

@section('content')
<div class="content-wrapper">
    <div class="container-fluid">
        <h2>Menus</h2>

        <div class="content info-box">
            @if ($menus->isNotEmpty())
            <form action="{{ route('menus.index') }}" method="GET" class="form-inline mb-3">
                <select name="id" class="form-control mr-2">
                    @foreach ($menus as $menu)
                    <option value="{{ $menu->id }}" {{ $desiredMenu->id == $menu->id ? 'selected' : '' }}>
                        {{ $menu->title }}
                    </option>
                    @endforeach
                </select>
                <button class="btn btn-primary" type="submit">Select</button>
            </form>
            @endif

            <button class="btn btn-success" data-toggle="modal" data-target="#addMenuModal">Add New Menu</button>

            @if ($desiredMenu)
            <div class="menu-edit-form mt-4">
                <h3>Edit Menu: {{ $desiredMenu->title }}</h3>
                <form action="{{ route('menus.update', $desiredMenu->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="form-group">
                        <label for="title">Menu Title:</label>
                        <input type="text" name="title" id="title" value="{{ $desiredMenu->title }}"
                            class="form-control">
                    </div>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </form>
            </div>
            @endif
        </div>

        <div class="row" id="main-row">
            <div class="col-sm-3 cat-form @if($menus->isEmpty()) disabled @endif">
                <h3>Add Menu Items</h3>

                @include('Menu::partials.item_types', [
                'itemTypes' => [
                'categories' => $categories,
                'posts' => $posts,
                'pages' => $pages,
                ]
                ])

                @include('Menu::partials.custom_link')
            </div>

            <div class="col-sm-9 cat-view">
                <h3>Menu Structure</h3>

                <div id="menu-content">
                    @if($desiredMenu && $menuitems->isNotEmpty())
                    <div class="dd" id="nestable">
                        <ol class="dd-list">
                            @include('Menu::partials.menu_items', ['items' => $menuitems])
                        </ol>
                    </div>

                    @include('Menu::partials.menu_location')

                    <div class="text-right mt-3">
                        <button class="btn btn-primary" id="saveMenu">Save Menu</button>
                        <a href="{{ route('menus.destroy', $desiredMenu->id) }}" class="btn btn-danger"
                            onclick="return confirm('Are you sure you want to delete this menu?')">Delete Menu</a>
                    </div>
                    @else
                    <p>No menu items found. Add some items to your menu.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@include('Menu::partials.add_menu_modal')
@endsection

@push('scripts')
<script src="{{ asset('admin/plugins/nestable/jquery.nestable.min.js') }}"></script>
<script>
    $(document).ready(function () {
        const menuId = {{ $desiredMenu-> id ?? 'null'
    }};

    $('#nestable').nestable().on('change', updateOutput);

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

        $.ajax({
            url: '{{ route('menus.updateMenuOrder') }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                menu: JSON.stringify(output)
            },
            success: function (response) {
                console.log('Menu order updated successfully');
            },
            error: function (xhr) {
                console.error('Error updating menu order:', xhr.responseText);
            }
        });
    }

    $('.add-to-menu').click(function () {
        const type = $(this).data('type');
        const ids = $(`input[name="select-${type}[]"]:checked`).map(function () {
            return $(this).val();
        }).get();

        if (ids.length === 0) {
            alert('Please select at least one item to add to the menu.');
            return;
        }

        $.ajax({
            url: '{{ route('menus.addItemsToMenu') }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                menuid: menuId,
                type: type,
                ids: ids
            },
            success: function (response) {
                location.reload();
            },
            error: function (xhr) {
                console.error('Error adding items to menu:', xhr.responseText);
            }
        });
    });

    $('#add-custom-link').click(function () {
        const url = $('#url').val();
        const title_en = $('#linktext_en').val();
        const title_np = $('#linktext_np').val();

        if (!url || !title_en || !title_np) {
            alert('Please fill in all fields for the custom link.');
            return;
        }

        $.ajax({
            url: '{{ route('menus.addItemsToMenu') }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                menuid: menuId,
                type: 'custom',
                url: url,
                title_en: title_en,
                title_np: title_np
            },
            success: function (response) {
                location.reload();
            },
            error: function (xhr) {
                console.error('Error adding custom link:', xhr.responseText);
            }
        });
    });

    $('.edit-menu-item').click(function () {
        $(this).siblings('.edit-form').toggle();
    });
});
</script>
<style>
    /**
                                                                                                                                 * Nestable
                                                                                                                                 */

    .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 {
        float: left;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;

        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 Extras
                                                                                                                                 */

    .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;
        background: -webkit-linear-gradient(top, #bbb 0%, #999 100%);
        background: -moz-linear-gradient(top, #bbb 0%, #999 100%);
        background: linear-gradient(top, #bbb 0%, #999 100%);
    }

    #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;
    }

    /**
                                                                                                                                 * Nestable Draggable Handles
                                                                                                                                 */

    .dd3-content {
        display: block;
        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: 20%;
        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: auto;
    }
</style>
@endpush