@extends('layouts.admin')

@section('content')
<div class="card rounded-0">
    <div class="card-header py-2">
        <div class="d-sm-flex align-items-center justify-content-between">
            <h5>MENU</h5>
            <div class="d-flex gap-1">
                <button type="button" class="btn btn-light-primary border-primary rounded" data-bs-toggle="modal" data-bs-target="#addNewModal"><i class="fas fa-plus"></i></button>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="dd" id="menu-nestable">
            {!! renderMenu($menus) !!}
        </div>
    </div>
</div>

<!-- Custom Right-Click Menu -->
<ul id="contextMenu" class="dropdown-menu" style="display: none; position: fixed; z-index: 1055;">
    <li><a href="#" class="dropdown-item" id="contextEdit"><i class="fas fa-pencil-alt"></i> Edit</a></li>
    <li><a href="#" class="dropdown-item" id="contextStatus"><i class="fas fa-sync-alt"></i> Toggle</a></li>
    <li><a href="#" class="dropdown-item text-danger" id="contextDelete"><i class="fas fa-trash-alt"></i> Delete</a></li>
</ul>

<!-- Add New Modal -->
<div class="modal fade" id="addNewModal" tabindex="-1">
    <div class="modal-dialog">
        <form id="addForm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Menu</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <input type="text" id="new-name" class="form-control" placeholder="Menu Name">
                    </div>
                    <div class="mb-3">
                        <input type="text" id="new-slug" class="form-control" placeholder="URL">
                    </div>
                    <div class="form-check b-3">
                        <input class="form-check-input" type="checkbox" id="new-target">
                        <label class="form-check-label" for="edit-target">
                            Open with new window
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog">
        <form id="editForm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Menu</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="edit-id">
                    <div class="mb-3">
                        <input type="text" id="edit-name" class="form-control" placeholder="Menu Name">
                    </div>
                    <div class="mb-3">
                        <input type="text" id="edit-slug" class="form-control" placeholder="URL">
                    </div>
                    <div class="form-check b-3">
                        <input class="form-check-input" type="checkbox" id="edit-target">
                        <label class="form-check-label" for="edit-target">
                            Open with new window
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <form id="deleteForm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete Menu</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="delete-id">
                    <p>Are you sure you want to delete <strong id="delete-name"></strong>?</p>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger">Yes, Delete</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('header_code')
<link rel="stylesheet" href="{{ asset('backend/css/jquery.nestable.min.css') }}">
<style>
    .dd-handle {
        cursor: move;
    }
    #contextMenu {
        min-width: 140px;
        padding: 0;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    }
    .dd-list {
        list-style: none;
        margin: 0;
        padding-left: 0;
    }
    .dd-item > .dd-list {
        padding-left: 0;
        position: relative;
        width: 100%
    }
    .dd-item > .dd-list::before {
        content: '';
        position: absolute;
        top: -10px;
        bottom: 0;
        width: 1px;
        background: #cccccc;
        height: calc(100% - 4px);
    }
    .dd-item > .dd-list > .dd-item {
        position: relative;
        margin-left: 24px;
    }
    .dd-item > .dd-list > .dd-item::before {
        content: '';
        position: absolute;
        top: 15px;
        left: -24px;
        width: 18px;
        height: 1px;
        background: #cccccc;
    }

</style>
@endsection

@section('footer_script')
<script src="{{ asset('backend/js/jquery.nestable.min.js') }}"></script>
<script>
    let rightClickedItem = null;
    let currentItemId = null;
    let currentItemStatus = null;

    $('#menu-nestable').nestable({
        maxDepth: 2
    }).on('change', function () {
        let data = $('#menu-nestable').nestable('serialize');
        $.ajax({
            url: '{{ route("menu.save") }}',
            method: 'POST',
            data: {
                menu: data,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                $('.top-loader').show();
            },
            complete: function() {
                $('.top-loader').hide();
            },
            error: function () {
                alert('Error saving menu order.');
            }
        });
    });

    $(document).on('contextmenu', '.dd-handle', function (e) {
        e.preventDefault();
        rightClickedItem = $(this);
        const parent = rightClickedItem.closest('.dd-item');
        currentItemId = parent.data('id');
        currentItemStatus = parent.data('status').trim();
        showEditBtn = parent.data('showedit').trim();
        showStatusBtn = parent.data('showstatus').trim();
        showDeleteBtn = parent.data('showdelete').trim();
        var toggleIcon = '<i class="fas fa-sync-alt"></i> ';
        var toggleText = currentItemStatus === 'Active' ? 'Inactive' : 'Active';
        // Status Button: Enable/Disable but keep visible
        if (showStatusBtn === 'yes') {
            $('#contextStatus')
                .html(toggleIcon + toggleText)
                .removeClass('disabled')
                .css({ 'pointer-events': 'auto', 'opacity': '1' });
        } else {
            $('#contextStatus')
                .html(toggleIcon + toggleText)
                .addClass('disabled')
                .css({ 'pointer-events': 'none', 'opacity': '0.5' });
        }
        // Edit Button: Enable/Disable but keep visible
        if (showEditBtn === 'yes') {
            $('#contextEdit')
                .removeClass('disabled')
                .css({ 'pointer-events': 'auto', 'opacity': '1' });
        } else {
            $('#contextEdit')
                .addClass('disabled')
                .css({ 'pointer-events': 'none', 'opacity': '0.5' });
        }
        // Delete Button: Enable/Disable but keep visible
        if (showDeleteBtn === 'yes') {
            $('#contextDelete')
                .removeClass('disabled')
                .css({ 'pointer-events': 'auto', 'opacity': '1' });
        } else {
            $('#contextDelete')
                .addClass('disabled')
                .css({ 'pointer-events': 'none', 'opacity': '0.5' });
        }
        // Show context menu
        $('#contextMenu').css({
            top: e.clientY + 'px',
            left: e.clientX + 'px',
            display: 'block'
        });
    });
    
    // Hide Context Menu
    $(document).on('click', function () {
        $('#contextMenu').hide();
    });

    // Context Edit
    $('#contextEdit').on('click', function (e) {
        e.preventDefault();
        $('#contextMenu').hide();
        const id = rightClickedItem.parent().data('id');
        const slug = rightClickedItem.parent().data('slug');
        const newtab = rightClickedItem.parent().data('newtab');
        const name = rightClickedItem.parent().data('name');
        const readonlyslug = rightClickedItem.parent().data('showdelete');
        $('#edit-id').val(id);
        $('#edit-name').val(name);
        $('#edit-slug').val(slug);
        $('#edit-target').prop('checked', newtab == 1 || newtab === true || newtab === '1');
        if(readonlyslug === 'no'){
            $('#edit-slug').prop('readonly', true)
        }else{
            $('#edit-slug').prop('readonly', false)
        }
        $('#editModal').modal('show');
    });
    $('#editForm').submit(function (e) {
        e.preventDefault();
        $.post('{{ route("menu.edit") }}', {
            id: $('#edit-id').val(),
            name: $('#edit-name').val(),
            slug: $('#edit-slug').val(),
            new_window: $('#edit-target').is(':checked') ? 1 : 0,
            _token: $('meta[name="csrf-token"]').attr('content')
        }, function () {
            const modal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
            modal.hide();
            location.reload();
        });
    });

    // Contex Delete
    $('#contextDelete').on('click', function (e) {
        e.preventDefault();
        $('#contextMenu').hide();
        const id = rightClickedItem.parent().data('id');
        const name = rightClickedItem.parent().data('name');
        $('#delete-id').val(id);
        $('#delete-name').text(name);
        const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
        modal.show();
    });
    $('#deleteForm').submit(function (e) {
        e.preventDefault();

        $.post('{{ route("menu.delete") }}', {
            id: $('#delete-id').val(),
            _token: $('meta[name="csrf-token"]').attr('content')
        }, function (response) {
            const modal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
            modal.hide();
            if (response.success) {
                location.reload();
            } else {
                notifier.show('ERROR', response.message, 'danger', '/resource/high_priority-48.png', 5000);
            }
        });
    });

    // Contex Status
    $('#contextStatus').on('click', function (e) {
        e.preventDefault();
        $('#contextMenu').hide();

        $.post('{{ route("menu.toggleStatus") }}', {
            id: currentItemId,
            _token: $('meta[name="csrf-token"]').attr('content')
        }, function (response) {
            if (response.success) {
                location.reload();
            } else {
                notifier.show('ERROR', response.message, 'danger', '/resource/high_priority-48.png', 5000);
            }
        });
    });

    // Add new menu
    $('#addForm').submit(function (e) {
        e.preventDefault();

        $.ajax({
            url: '{{ route("menu.add") }}',
            method: 'POST',
            data: {
                name: $('#new-name').val(),
                slug: $('#new-slug').val(),
                new_window: $('#new-target').is(':checked') ? 1 : 0,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                $('.top-loader').show();
            },
            complete: function() {
                $('.top-loader').hide();
            },
            success: function (response) {
                if (response.success) {
                    // Close modal
                    $('#addNewModal').modal('hide');
                    // Optionally reset form
                    $('#addForm')[0].reset();
                    // Reload or refresh the menu list
                    location.reload();
                } else {
                    notifier.show('ERROR', response.message, 'danger', '/resource/high_priority-48.png', 5000);
                }
            },
            error: function (xhr) {
                notifier.show('ERROR', 'Failed to add menu. Please try again', 'danger', '/resource/high_priority-48.png', 5000);
            }
        });
    });

</script>
@endsection