@extends('admin.layouts.master')

@section('title', 'Website Menu Builder')

@section('css')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
    .menus-list, .menu-details {
        background: #fff;
        padding: 20px;
        border-radius: 12px;
        max-height: 80vh;
        overflow-y: auto;
    }
    .menu-item { background: #f8f9fa; margin-bottom: 10px; border-left: 4px solid #0d6efd; border-radius: 8px; }
    .menu-header { padding: 10px 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: #fff; border-bottom: 1px solid #dee2e6; border-radius: 8px 8px 0 0; }
    .menu-submenu { display: none; padding: 10px 15px; background: #e9ecef; border-radius: 0 0 8px 8px; min-height: 50px; margin-left: 15px; }
    .menu-item-child { background: #0d6efd; color: #fff; margin: 5px 0; padding: 8px 12px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; cursor: move; }
    .btn-add-item, .btn-remove-item, .btn-edit-item, .btn-update-menu { border: none; border-radius: 5px; padding: 0 6px; cursor: pointer; margin-left: 4px; }
    .btn-add-item { background: #198754; color: #fff; }
    .btn-remove-item { background: #dc3545; color: #fff; }
    .btn-edit-item { background: #ffc107; color: #000; }
    .btn-update-menu { background: #28a745; color: #fff; }
    span.item-title { flex: 1; }
</style>
@endsection

@section('content')
<div class="row">
    {{-- Left: Menus --}}
    <div class="col-md-4">
        <div class="menus-list">
            <h4>Create New Menu</h4>
            <form id="createMenuForm" method="POST" action="{{ route('menus.store') }}">
                @csrf
                <div class="row mb-2">
                    <div class="col-md-9">
                        <input type="text" class="form-control mb-2" name="name" placeholder="Menu Name" required>
                    </div>
                    <div class="col-md-3">
                        <button type="submit" class="btn btn-primary w-100">Save</button>
                    </div>
                </div>
            </form>

            <div id="menusSortable">
                @foreach ($menus as $menu)
                    <div class="menu-item" data-id="{{ $menu->id }}">
                        <div class="menu-header">
                            <span class="menu-title">{{ $menu->name }}</span>
                            <div>
                                <button type="button" class="btn btn-sm btn-warning edit-menu" data-id="{{ $menu->id }}">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button type="button" class="btn btn-success btn-update-menu" data-id="{{ $menu->id }}">
                                    <i class="fas fa-check p-2"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-danger delete-btn" data-id="{{ $menu->id }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        <div class="menu-submenu" id="menuSubmenu_{{ $menu->id }}">
                            @if ($menu->items->count())
                                @include('admin.menus.partials.item', ['items' => $menu->items])
                            @else
                                <div class="text-muted">No items</div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Middle: Categories --}}
    <div class="col-md-4">
        <div class="menu-details">
            <h4>Menu From Category</h4>
            <input type="text" id="searchCategory" class="form-control mb-2" placeholder="Search categories...">
            <div id="availableCategories">
                @foreach ($categories as $cat)
                    <div class="menu-item-child" data-id="cat-{{ $cat->id }}" data-title="{{ $cat->name }}"
                        data-url="{{ route('category.show', $cat->id) }}" data-type="category">
                        {{ $cat->name }} <button class="btn-add-item">+</button>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Right: Routes, Pages & Custom Links (with Tabs) --}}
    <div class="col-md-4">
        <div class="menu-details">
            <h4>Add Menu Item</h4>

            <!-- Tabs -->
            <ul class="nav nav-tabs" id="menuTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="routes-tab" data-bs-toggle="tab" data-bs-target="#routesTab" type="button" role="tab" aria-controls="routesTab" aria-selected="true">
                        Routes
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pages-tab" data-bs-toggle="tab" data-bs-target="#pagesTab" type="button" role="tab" aria-controls="pagesTab" aria-selected="false">
                        Pages
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="custom-tab" data-bs-toggle="tab" data-bs-target="#customTab" type="button" role="tab" aria-controls="customTab" aria-selected="false">
                        Custom Link
                    </button>
                </li>
            </ul>

            <!-- Tab Content -->
            <div class="tab-content mt-3" id="menuTabsContent">

                {{-- Routes --}}
                <div class="tab-pane fade show active" id="routesTab" role="tabpanel" aria-labelledby="routes-tab">
                    <input type="text" id="searchRoute" class="form-control mb-2" placeholder="Search routes...">
                    <div id="availableRoutes">
                        @foreach ($permissions as $perm)
                            @php
                                $url = '#';
                                if (!empty($perm->route) && \Illuminate\Support\Facades\Route::has($perm->route)) {
                                    try {
                                        $url = route($perm->route);
                                    } catch (\Exception $e) {
                                        $url = '#';
                                    }
                                }
                            @endphp
                            <div class="menu-item-child" data-id="route-{{ $perm->id }}" data-title="{{ $perm->display_name }}"
                                data-url="{{ $url }}" data-type="route">
                                {{ $perm->display_name }} <button class="btn-add-item">+</button>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- Pages --}}
                <div class="tab-pane fade" id="pagesTab" role="tabpanel" aria-labelledby="pages-tab">
                    <input type="text" id="searchPage" class="form-control mb-2" placeholder="Search pages...">
                    <div id="availablePages">
                        @foreach ($pages as $page)
                            <div class="menu-item-child" data-id="page-{{ $page->id }}" data-title="{{ $page->title }}"
                                data-url="#" data-type="page">
                                {{ $page->title }} <button class="btn-add-item">+</button>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- Custom Link --}}
                <div class="tab-pane fade" id="customTab" role="tabpanel" aria-labelledby="custom-tab">
                    <input type="text" id="customTitle" class="form-control mb-2" placeholder="Title">
                    <input type="text" id="customUrl" class="form-control mb-2" placeholder="URL">
                    <button id="addCustom" class="btn btn-success btn-sm w-100">Add Link</button>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<!-- jQuery (kept because your scripts use it) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- IMPORTANT: Bootstrap bundle (includes Popper) — required for tabs to work -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Sortable (drag & drop) -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>

<script>
$(document).ready(function(){

    function makeSortable(container){
        $(container).find('.menu-submenu').each(function(){
            if(!this.sortable){
                this.sortable = new Sortable(this, {
                    group: { name: 'items', pull: true, put: true },
                    animation: 150
                });
            }
        });
    }
    makeSortable('#menusSortable');

    // COLLAPSE / EXPAND MENU
    $(document).on('click', '.menu-header', function(e){
        if($(e.target).closest('button').length) return;
        $(this).siblings('.menu-submenu').slideToggle(200);
    });

    function getChildren($container){
        let items = [];
        $container.children('.menu-item-child').each(function(){
            let $this = $(this);
            let title = $this.data('title') || $this.find('.item-title').text().trim();
            if(!title) title = 'Untitled';
            items.push({
                id: $this.data('id'),
                title: title,
                url: $this.data('url') || '#',
                type: $this.data('type') || 'custom',
                children: getChildren($this.children('.menu-submenu'))
            });
        });
        return items;
    }

    // UPDATE MAIN MENU ITEMS
    $(document).on('click', '.btn-update-menu', function(){
        let menuId = $(this).data('id');
        let $menu = $(this).closest('.menu-item');
        let items = getChildren($menu.find('.menu-submenu').first());

        $.ajax({
            url: '/menus/' + menuId + '/update-items',
            method: 'POST',
            data: {_token:'{{ csrf_token() }}', items: items},
            success: function(res){ alert(res.message); },
            error: function(err){ alert('Failed to update menu.'); console.error(err); }
        });
    });

    // EDIT MAIN MENU
    $(document).on('click', '.edit-menu', function(){
        let menuId = $(this).data('id');
        let $menu = $(this).closest('.menu-item');
        let oldName = $menu.find('.menu-title').text().trim();
        let newName = prompt("Edit Menu Name:", oldName);
        if(newName && newName.trim() !== ""){
            $.ajax({
                url: '/menus/' + menuId,
                method: 'PUT',
                data: {_token:'{{ csrf_token() }}', name: newName},
                success: function(res){ $menu.find('.menu-title').text(newName); alert(res.message); },
                error: function(err){ alert('Failed to update menu.'); }
            });
        }
    });

    // DELETE MAIN MENU
    $(document).on('click', '.delete-btn', function(){
        if(!confirm("Are you sure you want to delete this menu?")) return;
        let menuId = $(this).data('id');
        let $menuItem = $(this).closest('.menu-item');

        $.ajax({
            url: '/menus/' + menuId,
            method: 'DELETE',
            data: {_token:'{{ csrf_token() }}'},
            success: function(res){ $menuItem.remove(); alert(res.message); },
            error: function(err){ alert('Failed to delete menu.'); }
        });
    });

    // ADD ITEM (Category / Page / Route / Custom)
    $(document).on('click', '.btn-add-item', function(){
        let $currentSubmenu = $('.menu-submenu:visible').last();
        if(!$currentSubmenu.length) $currentSubmenu = $('.menu-submenu').first();

        let $item = $(this).closest('.menu-item-child');
        let id = $item.data('id');
        if($currentSubmenu.find('.menu-item-child[data-id="'+id+'"]').length) return;

        let div = $('<div class="menu-item-child" data-id="'+id+'" data-title="'+$item.data('title')+'" data-url="'+$item.data('url')+'" data-type="'+$item.data('type')+'">' +
            '<span class="item-title">'+$item.data('title')+'</span>' +
            '<div>' +
                '<button class="btn-edit-item">✏️</button>' +
                '<button class="btn-remove-item">&times;</button>' +
            '</div>' +
            '<div class="menu-submenu"></div>' +
        '</div>');
        $currentSubmenu.append(div);
        makeSortable($currentSubmenu);
    });

    // ADD CUSTOM LINK
    $('#addCustom').click(function(){
        let title = $('#customTitle').val().trim();
        let url = $('#customUrl').val().trim();
        if(!title || !url) return;

        let $currentSubmenu = $('.menu-submenu:visible').last();
        if(!$currentSubmenu.length) $currentSubmenu = $('.menu-submenu').first();

        let id = 'custom-' + Date.now();
        let div = $('<div class="menu-item-child" data-id="'+id+'" data-title="'+title+'" data-url="'+url+'" data-type="custom">' +
            '<span class="item-title">'+title+'</span>' +
            '<div>' +
                '<button class="btn-edit-item">✏️</button>' +
                '<button class="btn-remove-item">&times;</button>' +
            '</div>' +
            '<div class="menu-submenu"></div>' +
        '</div>');
        $currentSubmenu.append(div);
        $('#customTitle,#customUrl').val('');
        makeSortable($currentSubmenu);
    });

    // EDIT MENU ITEM
    $(document).on('click', '.btn-edit-item', function(){
        let $item = $(this).closest('.menu-item-child');
        let newTitle = prompt("Edit Item Name:", $item.data('title'));
        if(!newTitle) return;
        let newUrl = $item.data('type') === 'custom' ? prompt("Edit URL:", $item.data('url')) : null;

        $item.data('title', newTitle);
        $item.find('.item-title').text(newTitle);
        if(newUrl) $item.data('url', newUrl);
    });

    // DELETE MENU ITEM
    $(document).on('click', '.btn-remove-item', function(){
        if(!confirm("Are you sure you want to delete this item?")) return;
        $(this).closest('.menu-item-child').remove();
    });

    // SEARCH
    $('#searchCategory').on('keyup', function(){
        let value = $(this).val().toLowerCase();
        $('#availableCategories .menu-item-child').filter(function(){
            $(this).toggle($(this).data('title').toLowerCase().includes(value));
        });
    });
    $('#searchPage').on('keyup', function(){
        let value = $(this).val().toLowerCase();
        $('#availablePages .menu-item-child').filter(function(){
            $(this).toggle($(this).data('title').toLowerCase().includes(value));
        });
    });
    $('#searchRoute').on('keyup', function(){
        let value = $(this).val().toLowerCase();
        $('#availableRoutes .menu-item-child').filter(function(){
            $(this).toggle($(this).data('title').toLowerCase().includes(value));
        });
    });

});
</script>
@endsection