@extends('admin.layouts.app')

@section('title', __('admin/menus.edit_title') . ' — ' . $menu->name)

@section('content')
<div class="container-fluid px-4">
    <x-admin.page-header :title="__('admin/menus.edit_title')" :subtitle="$menu->name" icon="fas fa-bars"
        :buttons="[['label' => __('admin/common.back'), 'route' => route('admin.menus.index'),
                     'icon' => 'fas fa-arrow-left', 'color' => 'outline-secondary']]" />
    <x-admin.alert />

    <form method="POST" action="{{ route('admin.menus.update', $menu) }}" class="mb-3">
        @csrf @method('PUT')
        <x-admin.card>
            @include('admin.menus._form')
            <x-slot:footer>
                <x-admin.form-actions :cancel-url="route('admin.menus.index')" />
            </x-slot:footer>
        </x-admin.card>
    </form>

    <x-admin.card>
        <x-slot:header>
            <h5 class="mb-0">{{ __('admin/menus.items_title') }}</h5>
        </x-slot:header>
        <div class="row">
            <div class="col-md-9">
                <ul id="menuItemsTree" class="list-group" data-menu-id="{{ $menu->id }}">
                    @foreach($menu->items->whereNull('parent_id') as $root)
                        @include('admin.menus._item_row', ['item' => $root, 'depth' => 0])
                        @foreach($menu->items->where('parent_id', $root->id) as $child)
                            @include('admin.menus._item_row', ['item' => $child, 'depth' => 1])
                        @endforeach
                    @endforeach
                </ul>
            </div>
            <div class="col-md-3">
                <h6>{{ __('admin/menus.add_item') }}</h6>
                <div class="d-grid gap-2">
                    @foreach(['url','route','post','product_index','product_group','product'] as $type)
                        <button type="button" class="btn btn-sm btn-outline-primary" data-add-type="{{ $type }}">
                            + {{ __('admin/menus.types_' . $type) }}
                        </button>
                    @endforeach
                </div>
            </div>
        </div>
    </x-admin.card>
</div>

@include('admin.menus._item_modal', ['languages' => \App\Models\Language::where('status', true)->get()])

@push('scripts')
<script>
window.menuEditConfig = {
    menuId: {{ $menu->id }},
    routes: {
        itemStore:    '{{ route("api.admin.menus.items.store", $menu) }}',
        itemUpdate:   '{{ route("api.admin.menus.items.update", [$menu, ":item"]) }}',
        itemDestroy:  '{{ route("api.admin.menus.items.destroy", [$menu, ":item"]) }}',
        reorder:      '{{ route("api.admin.menus.items.reorder", $menu) }}',
        search:       '{{ route("api.admin.menu-items.search") }}',
    },
    locales: @json(\App\Models\Language::where('status', true)->pluck('a2_iso')),
    defaultLocale: '{{ config("app.fallback_locale") }}',
    translations: {
        confirm_delete:           '{{ __("admin/menus.confirm_delete") }}',
        broken_link:              '{{ __("admin/menus.broken_link") }}',
        route_picker_label:       '{{ __("admin/menus.route_picker_label") }}',
        route_picker_placeholder: '{{ __("admin/menus.route_picker_placeholder") }}',
        route_picker_help:        '{{ __("admin/menus.route_picker_help") }}',
    }
};
</script>
@vite('resources/js/admin/menus/edit.js')
@endpush
@endsection
