@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Edit Menu')

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.css">
    <style>
        .dd {
            max-width: 100%;
        }

        .dd-handle {
            padding: 0;
            margin: 0;
            height: 30px;
            margin-right: 14px;
            width: 30px;
            line-height: 30px;
            text-align: center;
        }

        .dd-item>button {
            position: absolute;
            width: 20px;
            height: 20px;
            font-size: 19px;
            background: #060404;
            color: #fff;
            border-radius: 50%;
            left: 8px;
        }
    </style>
@endpush


@section('content')


    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-semibold">Edit Menu</h1>
        <div class="flex gap-2">
            <a href="{{ route('admin.menus.index') }}" class="btn btn-primary bg-headline border-headline">
                <i class="fas fa-arrow-left mr-2"></i> Back to Menus
            </a>
        </div>
    </div>

    <div class="w-full grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Left Column - Forms -->
        <div class="lg:col-span-1 space-y-6">
            <!-- Menu Settings Form -->
            <div class="card">
                <h5 class="text-lg font-medium mb-4">{{ __('translate.Menu Settings') }}</h5>
                <form action="{{ route('admin.menus.update', $menu->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="mb-4 input-with-label">
                        <label>{{ __('translate.Name') }} <span class="text-red-500">*</span></label>
                        <input type="text" name="name" class="@error('name') border-red-500 @enderror"
                            value="{{ $menu->name }}" required>
                        @error('name')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4 input-with-label">
                        <label>{{ __('translate.Description') }}</label>
                        <textarea name="description" rows="3" class="@error('description') border-red-500 @enderror">{{ $menu->description }}</textarea>
                        @error('description')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4 input-with-label">
                        <label>{{ __('translate.Menu Location') }}</label>
                        <select name="location" class="form-select @error('location') border-red-500 @enderror">
                            <option value="">{{ __('translate.None') }}</option>
                            @foreach ($locations as $location => $details)
                                <option value="{{ $location }}" {{ $menu->location === $location ? 'selected' : '' }}>
                                    {{ $details['name'] }} - {{ $details['description'] }}
                                </option>
                            @endforeach
                        </select>
                        @error('location')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4 input-with-label">
                        <label>{{ __('translate.Status') }}</label>
                        @include('backend::components.checkbox-slider', [
                            'name' => 'status',
                            'checked' => $menu->status,
                        ])
                    </div>

                    <div class="flex flex-col gap-2">
                        <button type="submit" class="btn btn-primary">{{ __('translate.Update Menu') }}</button>
                        <a href="{{ route('admin.menus.index') }}"
                            class="btn-secondary text-center">{{ __('translate.Back to List') }}</a>
                    </div>
                </form>
            </div>

            <!-- Add Menu Item Form -->
            <div class="card">

                <h5 class="text-lg font-medium mb-4">{{ __('translate.Add Menu Item') }}</h5>

                <form action="{{ route('admin.menus.add-item', $menu->id) }}" method="POST" class="add-menu-item-form">
                    @csrf

                    <div class="mb-4 input-with-label">
                        <label>{{ __('translate.Title') }} <span class="text-red-500">*</span></label>
                        <input type="text" name="title" class="@error('title') border-red-500 @enderror" required>
                        @error('title')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4 input-with-label">
                        <label>{{ __('translate.URL') }}</label>
                        <input type="text" name="url" class="@error('url') border-red-500 @enderror"
                            placeholder="e.g., /about-us">
                        @error('url')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4 input-with-label">
                        <label>{{ __('translate.Item Type') }}</label>
                        <select name="type" class="form-select @error('type') border-red-500 @enderror"
                            id="menuItemType">
                            <option value="custom">{{ __('translate.Custom Link') }}</option>
                            <option value="page">{{ __('translate.Page') }}</option>
                            <option value="category">{{ __('translate.Category') }}</option>
                        </select>
                        @error('type')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4 input-with-label" id="typeIdField" style="display: none;">
                        <label>{{ __('translate.Select Item') }}</label>
                        <select name="type_id" class="form-select">
                            <option value="0">{{ __('translate.Select Item') }}</option>
                            <!-- Dynamic options will be populated by JS -->
                        </select>
                    </div>

                    <div class="mb-4 input-with-label">
                        <label>{{ __('translate.Icon Class') }}</label>
                        <input type="text" name="icon_class" class="@error('icon_class') border-red-500 @enderror"
                            placeholder="e.g., fas fa-home">
                        <p class="text-sm text-gray-600 mt-1">{{ __('translate.FontAwesome or other icon classes') }}
                        </p>
                        @error('icon_class')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4 input-with-label">
                        <label>{{ __('translate.Target') }}</label>
                        <select name="target" class="form-select @error('target') border-red-500 @enderror">
                            <option value="_self">{{ __('translate.Same Window') }}</option>
                            <option value="_blank">{{ __('translate.New Window') }}</option>
                        </select>
                        @error('target')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <button type="submit" class="btn btn-primary w-full">{{ __('translate.Add Item') }}</button>
                </form>
            </div>
        </div>

        <!-- Right Column - Menu Structure -->
        <div class="lg:col-span-2">
            <div class="card">
                <div class="card-header flex justify-between items-center mb-4 relative">
                    <h5 class="text-lg font-medium">{{ __('translate.Menu Structure') }}</h5>
                    <button id="saveMenuStructure" class="btn btn-primary">
                        {{ __('translate.Save Menu Structure') }}
                    </button>
                </div>
                <div class="card-body">
                    @if (count($menuItems) > 0)
                        <div class="mb-4 p-4 bg-blue-50 border border-gray-200 rounded-md">
                            <p class="text-sm text-blue-800">
                                {{ __('translate.Drag and drop items to reorder. Click on an item to edit its properties.') }}
                            </p>
                        </div>

                        <div class="nestable-menu mt-5">
                            <div class="dd" id="nestable">
                                <ol class="dd-list">
                                    @foreach ($menuItems as $item)
                                        <li class="dd-item" data-id="{{ $item->id }}">
                                            <div
                                                class="flex items-center justify-between bg-white p-4 border border-gray-200 rounded-md mb-2">
                                                <div class="flex items-center font-semibold text-lg sub_menu">
                                                    <div class="dd-handle mr-3">
                                                        <i class="fas fa-grip-vertical text-gray-400"></i>
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <span>
                                                            @if ($item->icon_class)
                                                                <i class="{{ $item->icon_class }} mr-2"></i>
                                                            @endif
                                                            {{ $item->title }}
                                                        </span>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="flex gap-2">

                                                        @include('backend::components.edit-button', [
                                                            'id' => $item->id,
                                                            'class' => 'edit-menu-item',
                                                        ])

                                                        @include('backend::components.delete-button', [
                                                            'id' => $item->id,
                                                            'class' => 'delete-menu-item',
                                                        ])
                                                    </div>
                                                </div>
                                            </div>

                                            @if (count($item->children) > 0)
                                                <ol class="dd-list ml-6">
                                                    @foreach ($item->children as $child)
                                                        <li class="dd-item" data-id="{{ $child->id }}">
                                                            <div
                                                                class="flex items-center justify-between bg-gray-50 p-3 border border-gray-200 rounded-md mb-2">

                                                                <div class="flex-grow-1 flex">
                                                                    <div class="dd-handle mr-3">
                                                                        <i class="fas fa-grip-vertical text-gray-400"></i>
                                                                    </div>
                                                                    <span class="font-medium text-sm">
                                                                        @if ($child->icon_class)
                                                                            <i class="{{ $child->icon_class }} mr-2"></i>
                                                                        @endif
                                                                        {{ $child->title }}
                                                                    </span>
                                                                </div>
                                                                <div class="flex gap-2">
                                                                    @include(
                                                                        'backend::components.edit-button',
                                                                        [
                                                                            'id' => $child->id,
                                                                            'class' => 'edit-menu-item',
                                                                        ]
                                                                    )

                                                                    @include(
                                                                        'backend::components.delete-button',
                                                                        [
                                                                            'id' => $child->id,
                                                                            'class' => 'delete-menu-item',
                                                                        ]
                                                                    )
                                                                </div>
                                                            </div>
                                                        </li>
                                                    @endforeach
                                                </ol>
                                            @endif
                                        </li>
                                    @endforeach
                                </ol>
                            </div>
                        </div>
                    @else
                        <div class="p-4 bg-blue-50 rounded-md">
                            <p class="text-blue-800 text-sm">
                                {{ __('translate.No menu items found. Add your first menu item using the form.') }}
                            </p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- menu item edit modal  -->
    <div id="menuItemEditModal"
        class="modal-overlay !hidden opacity-0 transition-opacity duration-300 w-screen h-screen bg-black/30 flex justify-center items-center fixed top-0 left-0 z-50">
        <div
            class="modal-content w-full max-w-[590px] h-fit max-h-[90vh] bg-white rounded-2xl px-9 py-16 overflow-y-auto relative">
            <!-- Close Button -->
            <button
                class="modal-close size-10 rounded-lg bg-gray hover:bg-error text-headline hover:text-white flex justify-center items-center absolute top-4 right-4 transition-all duration-300">
                <!-- SVG icon -->
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M16.9531 7.05029L7.05363 16.9498" stroke="currentColor" stroke-width="1.5"
                        stroke-linecap="round" />
                    <path d="M7.05078 7.05029L16.9503 16.9498" stroke="currentColor" stroke-width="1.5"
                        stroke-linecap="round" />
                </svg>
            </button>

            <div>
                <form id="editItemForm" action="" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="mb-4 input-with-label">
                        <label>{{ __('translate.Title') }} <span class="text-red-500">*</span></label>
                        <input type="text" name="title" id="edit_title" class="form-control" required>
                    </div>

                    <div class="mb-4 input-with-label">
                        <label>{{ __('translate.URL') }}</label>
                        <input type="text" name="url" id="edit_url" class="form-control">
                    </div>

                    <div class="mb-4 input-with-label">
                        <label>{{ __('translate.CSS Class') }}</label>
                        <input type="text" name="css_class" id="edit_css_class" class="form-control">
                    </div>

                    <div class="mb-4 input-with-label">
                        <label>{{ __('translate.Icon Class') }}</label>
                        <input type="text" name="icon_class" id="edit_icon_class" class="form-control">
                    </div>

                    <div class="mb-4 input-with-label">
                        <label>{{ __('translate.Target') }}</label>
                        <select name="target" id="edit_target" class="form-select">
                            <option value="_self">{{ __('translate.Same Window') }}</option>
                            <option value="_blank">{{ __('translate.New Window') }}</option>
                        </select>
                    </div>

                    <div class="mb-4 input-with-label">
                        <label>{{ __('translate.Status') }}</label>
                        @include('backend::components.checkbox-slider', [
                            'name' => 'status',
                            'id' => 'edit_status',
                        ])
                    </div>
                </form>
            </div>

            <div class="flex justify-end gap-4 mt-5">
                <button type="button"
                    class="btn modal-ok btn-primary px-6 py-2.5 bg-[#FFEBEB] border-[#FFEBEB] text-error">
                    Cancel
                </button>
                <button id="saveMenuItem" type="submit" class="btn btn-primary">
                    Update
                </button>

            </div>
        </div>
    </div>

    <!-- delete modal  -->
    <div id="delete-modal"
        class="modal-overlay !hidden opacity-0 transition-opacity duration-300 w-screen h-screen bg-black/30 flex justify-center items-center fixed top-0 left-0 z-50">
        <div
            class="modal-content w-full max-w-[390px] h-fit max-h-[90vh] bg-white rounded-2xl px-9 py-16 overflow-y-auto relative">
            <!-- Close Button -->
            <button
                class="modal-close size-10 rounded-lg bg-gray hover:bg-error text-headline hover:text-white flex justify-center items-center absolute top-4 right-4 transition-all duration-300">
                <!-- SVG icon -->
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M16.9531 7.05029L7.05363 16.9498" stroke="currentColor" stroke-width="1.5"
                        stroke-linecap="round" />
                    <path d="M7.05078 7.05029L16.9503 16.9498" stroke="currentColor" stroke-width="1.5"
                        stroke-linecap="round" />
                </svg>
            </button>

            <div class="w-[144px] aspect-[144/106] mx-auto">
                <img src="./assets/images/delete.png" alt="" />
            </div>
            <h2 class="font-medium text-center mt-6">
                Are you sure you want to delete this?
            </h2>
            <p class="text-center pt-4">
                This action cannot be undone. The item will be permanently removed.
            </p>

            <div class="flex justify-center mt-8 gap-4">
                <div
                    class="btn-primary modal-ok cursor-pointer bg-error/5 border-error/5 text-headline w-full max-w-[150px]">
                    Cancel
                </div>
                <div class="btn-primary modal-ok cursor-pointer bg-error border-error text-white w-full max-w-[150px]">
                    Yes, Delete
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.js"></script>
    <script>
        $(function() {

            'use strict';

            // Initialize Nestable with the handle option
            var updateOutput = function(e) {
                var list = e.length ? e : $(e.target);
                if (window.JSON) {
                    // Get the Nestable list data
                    var data = window.JSON.stringify(list.nestable('serialize'));
                    console.log(data);
                }
            };

            $('#nestable').nestable({
                group: 1,
                maxDepth: 2,
                handleClass: 'dd-handle' // Specify that only elements with dd-handle class are draggable
            }).on('change', updateOutput);

            // Menu Item Type Change
            $('#menuItemType').on('change', function() {
                var type = $(this).val();
                if (type !== 'custom') {
                    $('#typeIdField').show();
                    // You can load dynamic options based on the selected type
                } else {
                    $('#typeIdField').hide();
                }
            });

            // Edit Menu Item - ensure event delegation for dynamically added elements
            $(document).on('click', '.edit-menu-item', function(e) {
                e.preventDefault();

                initModal('menuItemEditModal').showModal();

                e.stopPropagation();

                var id = $(this).data('id');

                // Fetch menu item data via AJAX
                $.ajax({
                    url: '{{ url('admin/menu-items') }}/' + id + '/edit',
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        // Populate the form with the menu item data
                        $('#edit_title').val(data.title);
                        $('#edit_url').val(data.url);
                        $('#edit_css_class').val(data.css_class);
                        $('#edit_icon_class').val(data.icon_class);
                        $('#edit_target').val(data.target);
                        $('#edit_status').prop('checked', data.status == 1);

                        // Set the form action URL
                        $('#editItemForm').attr('action', '{{ url('admin/menu-items') }}/' +
                            id);

                    },
                    error: function() {
                        alert('{{ __('translate.Error fetching menu item data') }}');
                    }
                });
            });

            // Save Menu Item (Submit form)
            $('#saveMenuItem').on('click', function() {
                $('#editItemForm').submit();
            });

            // Delete functionality
            $(document).on('click', '.delete-menu-item', function() {
                Swal.fire({
                    title: "Are you sure to delete?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        var id = $(this).data('id');
                        $.ajax({
                            url: `{{ route('admin.menu-items.destroy', ':id') }}`
                                .replace(':id', id),
                            type: 'DELETE',
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                if (response.success) {
                                    toastr.success(response.message);
                                } else {
                                    toastr.error('Error deleting menu item.');
                                }
                                location.reload();
                            },
                            error: function() {
                                toastr.error("Server error.");
                            }
                        });
                    }
                });
            });

            // Save Menu Structure
            $('#saveMenuStructure').on('click', function(e) {
                var data = $('#nestable').nestable('serialize');
                e.preventDefault();

                $.ajax({
                    url: '{{ route('admin.menus.update-structure') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        menu_items: data
                    },
                    success: function(response) {
                        if (response.success == true) {
                            toastr.success(response.message);
                            location.reload();
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr) {
                        toastr.error(xhr.responseJSON.message);
                    }
                });
            });
        });
    </script>
@endpush