@extends('admin.layouts.main')
@section('title', 'Menu Management')
@section('menu', 'Menus')

@push('styles')
<style>
    .dd { position: relative; display: block; margin: 0; padding: 0; 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-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; margin: 5px 0; padding: 8px 12px; color: #333; text-decoration: none; font-weight: 600; border: 1px solid #ccc; background: #fafafa; border-radius: 3px; cursor: move; }
    .dd-handle:hover { color: #2ea8e5; background: #fff; }
    .dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 10px 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-dragel { position: absolute; pointer-events: none; z-index: 9999; }
    .dd-dragel > .dd-item .dd-handle { margin-top: 0; }
    .dd-dragel .dd-handle { box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1); }
    .dd-item-actions { float: right; margin-top: -2px; }
    .dd-item-actions .btn { padding: 2px 8px; font-size: 11px; }
    .dd-handle .item-label { margin-right: 10px; }
    .dd-handle .item-link { color: #999; font-weight: normal; font-size: 12px; }
</style>
@endpush

@section('content')
<div class="row">
    {{-- Left: Add Items --}}
    <div class="col-md-4">
        {{-- Select / Create Menu --}}
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption"><span class="caption-subject bold uppercase">Select Menu</span></div>
            </div>
            <div class="portlet-body">
                <form method="GET" action="{{ route('admin.menus.index') }}" class="form-inline" style="margin-bottom: 15px;">
                    <select name="menu" class="form-control" style="width: 70%;" onchange="this.form.submit()">
                        <option value="">-- Select Menu --</option>
                        @foreach($menus as $m)
                            <option value="{{ $m->id }}" {{ $selectedMenu && $selectedMenu->id == $m->id ? 'selected' : '' }}>{{ $m->name }}</option>
                        @endforeach
                    </select>
                </form>

                <hr>
                <h5>Create New Menu</h5>
                <form method="POST" action="{{ route('admin.menus.store') }}">
                    @csrf
                    <div class="form-group">
                        <input type="text" name="name" class="form-control" placeholder="Menu Name" required>
                    </div>
                    <button type="submit" class="btn btn-sm btn-success"><i class="fa fa-plus"></i> Create Menu</button>
                </form>

                @if($selectedMenu)
                <hr>
                <form method="POST" action="{{ route('admin.menus.destroy') }}" onsubmit="return confirm('Delete this menu and all its items?')">
                    @csrf
                    @method('DELETE')
                    <input type="hidden" name="menu_id" value="{{ $selectedMenu->id }}">
                    <button type="submit" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i> Delete "{{ $selectedMenu->name }}"</button>
                </form>
                @endif
            </div>
        </div>

        {{-- Add Menu Item --}}
        @if($selectedMenu)
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption"><span class="caption-subject bold uppercase">Add Menu Item</span></div>
            </div>
            <div class="portlet-body">
                <form method="POST" action="{{ route('admin.menus.add-item') }}">
                    @csrf
                    <input type="hidden" name="menu_id" value="{{ $selectedMenu->id }}">
                    <div class="form-group">
                        <label>Label</label>
                        <input type="text" name="label" class="form-control" placeholder="Menu Label" required>
                    </div>
                    <div class="form-group">
                        <label>URL / Path</label>
                        <input type="text" name="link" class="form-control" placeholder="e.g. / or /about-us" required>
                    </div>
                    <div class="form-group">
                        <label>Icon (Font Awesome class)</label>
                        <input type="text" name="icon" class="form-control" placeholder="e.g. fa fa-home">
                    </div>
                    <div class="form-group">
                        <label>CSS Class</label>
                        <input type="text" name="item_class" class="form-control" placeholder="Optional CSS class">
                    </div>
                    <div class="form-group">
                        <label>Target</label>
                        <select name="target" class="form-control">
                            <option value="_self">Same Window (_self)</option>
                            <option value="_blank">New Window (_blank)</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary"><i class="fa fa-plus"></i> Add Item</button>
                </form>
            </div>
        </div>
        @endif
    </div>

    {{-- Right: Menu Structure --}}
    <div class="col-md-8">
        @if($selectedMenu)
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption"><span class="caption-subject bold uppercase">{{ $selectedMenu->name }} - Menu Structure</span></div>
                <div class="actions">
                    <button class="btn btn-sm btn-success" id="saveOrder"><i class="fa fa-save"></i> Save Order</button>
                </div>
            </div>
            <div class="portlet-body">
                @if($menuItems->isEmpty())
                    <div class="alert alert-info">No menu items yet. Add items from the left panel.</div>
                @else
                    <div class="dd" id="nestable">
                        <ol class="dd-list">
                            @foreach($menuItems as $item)
                                @include('admin.menus.partials.menu-item', ['item' => $item])
                            @endforeach
                        </ol>
                    </div>
                @endif
            </div>
        </div>
        @else
        <div class="portlet light bordered">
            <div class="portlet-body">
                <div class="alert alert-info">Select a menu from the left panel or create a new one.</div>
            </div>
        </div>
        @endif
    </div>
</div>

{{-- Edit Modal --}}
<div class="modal fade" id="editItemModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" id="editItemForm">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h4 class="modal-title">Edit Menu Item</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Label</label>
                        <input type="text" name="label" id="edit_label" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>URL / Path</label>
                        <input type="text" name="link" id="edit_link" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Icon</label>
                        <input type="text" name="icon" id="edit_icon" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>CSS Class</label>
                        <input type="text" name="item_class" id="edit_class" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Target</label>
                        <select name="target" id="edit_target" class="form-control">
                            <option value="_self">Same Window (_self)</option>
                            <option value="_blank">New Window (_blank)</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/nestable2@1.6.0/jquery.nestable.min.js"></script>
<script>
$(function() {
    $('#nestable').nestable({ maxDepth: 3 });

    $('#saveOrder').click(function() {
        var serialized = $('#nestable').nestable('serialize');
        var btn = $(this);
        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Saving...');

        $.ajax({
            url: '{{ route("admin.menus.reorder") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                menu_id: '{{ $selectedMenu ? $selectedMenu->id : "" }}',
                items: serialized
            },
            success: function() {
                btn.prop('disabled', false).html('<i class="fa fa-save"></i> Save Order');
                toastr.success('Menu order saved successfully.');
            },
            error: function() {
                btn.prop('disabled', false).html('<i class="fa fa-save"></i> Save Order');
                toastr.error('Failed to save menu order.');
            }
        });
    });

    window.editMenuItem = function(id, label, link, icon, itemClass, target) {
        $('#editItemForm').attr('action', '{{ url("admin/menus/items") }}/' + id);
        $('#edit_label').val(label);
        $('#edit_link').val(link);
        $('#edit_icon').val(icon || '');
        $('#edit_class').val(itemClass || '');
        $('#edit_target').val(target || '_self');
        $('#editItemModal').modal('show');
    };
});
</script>
@endpush