@extends('admin.layouts.app')

@section('title', 'Menu Management')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3">Menu Management</h1>
                <a href="{{ route('admin.menus.create') }}" class="btn btn-primary">
                    <i class="bi bi-plus"></i> Add New Menu Item
                </a>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            @foreach($errors->all() as $error)
                <div>{{ $error }}</div>
            @endforeach
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Menu Structure</h5>
                    <small class="text-muted">Drag and drop to reorder menu items</small>
                </div>
                <div class="card-body">
                    @if($menus->count() > 0)
                        <div id="menu-list" class="list-group">
                            @foreach($menus as $menu)
                                <div class="list-group-item menu-item" data-id="{{ $menu->id }}">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="d-flex align-items-center">
                                            <i class="bi bi-grip-vertical text-muted me-2" style="cursor: move;"></i>
                                            @if($menu->icon)
                                                <i class="{{ $menu->icon }} me-2"></i>
                                            @endif
                                            <div>
                                                <strong>{{ $menu->title }}</strong>
                                                @if($menu->route_name)
                                                    <small class="text-muted d-block">Route: {{ $menu->route_name }}</small>
                                                @elseif($menu->url)
                                                    <small class="text-muted d-block">URL: {{ $menu->url }}</small>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <span class="badge {{ $menu->is_active ? 'bg-success' : 'bg-secondary' }} me-2">
                                                {{ $menu->is_active ? 'Active' : 'Inactive' }}
                                            </span>
                                            <span class="badge bg-light text-dark me-2">Order: {{ $menu->sort_order }}</span>
                                            <div class="btn-group btn-group-sm">
                                                <a href="{{ route('admin.menus.edit', $menu) }}" class="btn btn-outline-primary" title="Edit">
                                                    <i class="bi bi-pencil"></i>
                                                </a>
                                                <form action="{{ route('admin.menus.destroy', $menu) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this menu item?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-outline-danger" title="Delete">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    @if($menu->children->count() > 0)
                                        <div class="mt-2 ms-4">
                                            @foreach($menu->children as $child)
                                                <div class="list-group-item menu-item border-start border-3 border-info" data-id="{{ $child->id }}">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div class="d-flex align-items-center">
                                                            <i class="bi bi-grip-vertical text-muted me-2" style="cursor: move;"></i>
                                                            @if($child->icon)
                                                                <i class="{{ $child->icon }} me-2"></i>
                                                            @endif
                                                            <div>
                                                                <strong>{{ $child->title }}</strong>
                                                                @if($child->route_name)
                                                                    <small class="text-muted d-block">Route: {{ $child->route_name }}</small>
                                                                @elseif($child->url)
                                                                    <small class="text-muted d-block">URL: {{ $child->url }}</small>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <div class="d-flex align-items-center">
                                                            <span class="badge {{ $child->is_active ? 'bg-success' : 'bg-secondary' }} me-2">
                                                                {{ $child->is_active ? 'Active' : 'Inactive' }}
                                                            </span>
                                                            <span class="badge bg-light text-dark me-2">Order: {{ $child->sort_order }}</span>
                                                            <div class="btn-group btn-group-sm">
                                                                <a href="{{ route('admin.menus.edit', $child) }}" class="btn btn-outline-primary" title="Edit">
                                                                    <i class="bi bi-pencil"></i>
                                                                </a>
                                                                <form action="{{ route('admin.menus.destroy', $child) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this menu item?')">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit" class="btn btn-outline-danger" title="Delete">
                                                                        <i class="bi bi-trash"></i>
                                                                    </button>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="bi bi-menu-button-wide text-muted" style="font-size: 3rem;"></i>
                            <p class="text-muted mt-2">No menu items found.</p>
                            <a href="{{ route('admin.menus.create') }}" class="btn btn-primary">
                                <i class="bi bi-plus"></i> Create First Menu Item
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize sortable for menu items
    const menuList = document.getElementById('menu-list');
    if (menuList) {
        Sortable.create(menuList, {
            handle: '.bi-grip-vertical',
            animation: 150,
            onEnd: function(evt) {
                updateMenuOrder();
            }
        });
    }
    
    function updateMenuOrder() {
        const items = [];
        $('#menu-list .menu-item').each(function(index) {
            items.push({
                id: $(this).data('id'),
                sort_order: index
            });
        });
        
        $.ajax({
            url: '{{ route('admin.menus.update-order') }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                items: items
            },
            success: function(response) {
                if (response.success) {
                    // Update order badges
                    $('#menu-list .menu-item').each(function(index) {
                        $(this).find('.badge:contains("Order:")').text('Order: ' + index);
                    });
                }
            },
            error: function() {
                alert('Error updating menu order. Please refresh the page.');
            }
        });
    }
});
</script>
@endpush
@endsection