@extends('admin.lyoute.masterpage2')

@section('page_title', 'مدیریت منوها')
@section('page_description', 'ساختار درختی منوهای سایت')

@section('main_section')
    <div class="container-fluid">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show mb-4">
                <i class="fas fa-check-circle ml-2"></i>
                {{ session('success') }}
                <button type="button" class="btn-close shadow-none" data-bs-dismiss="alert" aria-label="close">
                </button>
            </div>
        @endif

        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h4 class="mb-0">
                                <i class="fas fa-bars ml-2"></i>
                                مدیریت منوها
                            </h4>
                            <div>
                                <a href="{{ route('admin.menus.create') }}" class="btn btn-primary">
                                    <i class="fas fa-plus ml-2"></i>
                                    افزودن منوی جدید
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- فیلتر بر اساس نوع منو -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="btn-group" role="group">
                            <a href="{{ route('admin.menus.index') }}"
                               class="btn btn-outline-primary mx-1 {{ request('type') == '' ? '1' : '' }}">
                                همه منوها
                            </a>
                            @foreach($menuTypes as $key => $label)
                                <a href="{{ route('admin.menus.index', ['type' => $key]) }}"
                                   class="btn btn-outline-primary mx-1 {{ request('type') == $key ? '1' : '' }}">
                                    {{ $label }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ساختار درختی منوها -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-body">
                        @if($menus->count() > 0)
                            <div class="dd" id="menu-nestable">
                                <ol class="dd-list">
                                    @foreach($menus as $menu)
                                        @include('admin.menus.partials.menu_item', ['menu' => $menu, 'level' => 0])
                                    @endforeach
                                </ol>
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fas fa-bars fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">هیچ منویی یافت نشد</h5>
                                <p class="text-muted">برای شروع اولین منو را ایجاد کنید.</p>
                                <a href="{{ route('admin.menus.create') }}" class="btn btn-primary mt-2">
                                    <i class="fas fa-plus ml-2"></i>افزودن منو
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Include Nestable CSS & JS -->
    <link href="https://cdn.jsdelivr.net/npm/nestable2@1.6.0/jquery.nestable.min.css" rel="stylesheet">
    <style>
        .dd { position: relative; display: block; margin: 0; padding: 0; list-style: none; }
        .dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }

        .dd-list .dd-list { padding-right: 30px; }
        .dd-item, .dd-empty, .dd-placeholder { display: block; position: relative; margin: 0; padding: 0; }
        .dd-handle {
            display: block;
            margin: 5px 0;
            padding: 10px 15px;
            background: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: move;
        }
        .dd-handle:hover { background: #e9ecef; }
        .menu-level-1 { margin-right: 30px; }
        .menu-level-2 { margin-right: 60px; }
        .menu-level-3 { margin-right: 90px; }
        .menu-badge {
            font-size: 0.8rem;
            padding: 2px 8px;
        }
    </style>
@endsection

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

            // Save order when changed
            $('#menu-nestable').on('change', function() {
                const serialized = $('#menu-nestable').nestable('serialize');

                $.ajax({
                    url: '{{ route("admin.menus.update-order") }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        items: serialized
                    },
                    success: function(response) {
                        if (response.success) {
                            showToast('ترتیب منوها ذخیره شد', 'success');
                        }
                    }
                });
            });

            // Toggle menu status
            $('.toggle-status-btn').click(function(e) {
                e.preventDefault();
                const url = $(this).attr('href');

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        _method: 'PUT'
                    },
                    success: function(response) {
                        location.reload();
                    }
                });
            });

            // Toast notification
            function showToast(message, type = 'success') {
                const toast = <div class="toast align-items-center text-white bg-${type} border-0" role="alert">
                    <div class="d-flex">
                        <div class="toast-body">${message}</div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                    </div>
                </div>;

                $('.toast-container').append(toast);
                $('.toast').toast('show');
            }
        });
    </script>
@endpush