@extends('admin.layout.default')

@section('title', trans('admin.menu.actions.edit', ['name' => $menu->title]))

<!--nested-->
@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.css" integrity="sha512-yOW3WV01iPnrQrlHYlpnfVooIAQl/hujmnCmiM3+u8F/6cCgA3BdFjqQfu8XaOtPilD/yYBJR3Io4PO8QUQKWA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="{{ asset('css/libs/nestable2/custom.css') }}" />
@endsection

@section('body')

    <div class="container-xl">
        <div class="row">
            <div class="col">
                <div class="card">

                    <menu-form
                            :action="'{{ $menu->resource_url }}'"
                            :data="{{ $menu->toJsonAllLocales() }}"
                            :locales="{{ json_encode($locales) }}"
                            :default-locale="'{{ app()->getLocale() }}'"
                            :send-empty-locales="false"
                            v-cloak
                            inline-template>

                        <form class="form-horizontal form-edit" method="post" @submit.prevent="onSubmit" :action="action" novalidate>


                            <div class="card-header">
                                <i class="fa fa-pencil"></i> {{ trans('admin.menu.actions.edit', ['name' => $menu->title]) }}
                            </div>

                            <div class="card-body">
                                @include('admin.menu.components.form-elements')
                            </div>


                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary" :disabled="submiting">
                                    <i class="fa" :class="submiting ? 'fa-spinner' : 'fa-download'"></i>
                                    {{ trans('admin.btn.save') }}
                                </button>
                            </div>

                        </form>

                    </menu-form>

                </div>

            @can(($menuItem ?? '') ? 'admin.menu-item.edit' : 'admin.menu-item.create')
                <!--MenuItem Add New Form-->
                <div class="card">
                    <menu-item-form
                            {{--edit--}}
                            @if($menuItem ?? '')
                            :action="'{{ $menu->resource_url.'/items/'.$menuItem->id}}'"
                            :data="{{ $menuItem->toJsonAllLocales() }}"
                            @else
                            {{--store--}}
                            :action="'{{ $menu->resource_url.'/menu-item-store' }}'"
                            @endif
                            :locales="{{ json_encode($locales) }}"
                            :default-locale="'{{ app()->getLocale() }}'"
                            :project_categories="{{$project_categories->toJson()}}"
                            :service_categories="{{$service_categories->toJson()}}"
                            :corporates="{{$corporates->toJson()}}"
                            :faq_categories="{{$faq_categories->toJson()}}"
                            :dynamic_pages="{{$dynamic_pages->toJson()}}"
                            :parents="{{$parents->prepend((object)['id'=>'', 'name' => trans('admin.menu-item.columns.parent_root')])->toJson()}}"
                            :types="[
                                {'type_title':'{{ trans('admin.menu-item.columns.url') }}', 'type_name':'type_url'},
                                {'type_title':'{{ trans('admin.menu-item.columns.corporate_id') }}', 'type_name':'type_corporate'},
                                {'type_title':'{{ trans('admin.menu-item.columns.service_category_id') }}', 'type_name':'type_service_category'},
                                {'type_title':'{{ trans('admin.menu-item.columns.project_category_id') }}', 'type_name':'type_project_category'},
                                {'type_title':'{{ trans('admin.menu-item.columns.faq_category_id') }}', 'type_name':'type_faq_category'},
                                {'type_title':'{{ trans('admin.menu-item.columns.dynamic_page_id') }}', 'type_name':'type_dynamic_page'},
                            ]"
                            :send-empty-locales="false"
                            v-cloak
                            inline-template>

                        <form class="form-horizontal form-create" method="post" @submit.prevent="onSubmit" :action="action" novalidate>

                            <div class="card-header">
                                @if($menuItem ?? '')
                                    <i class="fa fa-pencil"></i> {{ trans('admin.menu-item.actions.edit', ['name' => $menuItem->name]) }}
                                @else
                                    <i class="fa fa-plus"></i> {{ trans('admin.menu-item.actions.create') }}
                                @endif
                            </div>

                            <div class="card-body">
                                @include('admin.menu.components.menu-item-form-elements')
                            </div>

                            <div class="card-footer">

                                <div class="form-group">
                                    @if($menuItem ?? '')
                                        <a href="{{ $menu->resource_url.'/edit' }}" class="btn btn-outline-secondary text-danger mx-2">
                                            <i class="fa fa-times text-danger mr-1"></i>
                                            {{ trans('admin.btn.cancel') }}
                                        </a>
                                    @endif
                                    <button type="submit" class="btn btn-primary" :disabled="submiting">
                                        <i class="fa" :class="submiting ? 'fa-spinner' : 'fa-download'"></i>
                                        {{ trans('admin.btn.save') }}
                                    </button>
                                </div>
                            </div>

                        </form>

                    </menu-item-form>

                    @can('admin.menu-item.delete')
                    @if($menuItem ?? '')
                        <menu-item-delete-form inline-template>
                            <form class="form-group" style="position: absolute;bottom: calc(1.25rem + 3px);right: calc(1.25rem + 0.5rem);" @submit.prevent="deleteItem('{{$menuItem->resource_url}}')">
                                <button type="submit" class="btn btn-sm btn-danger" title="{{ trans('admin.btn.delete') }}"><i class="fa fa-trash-o"></i> {{ trans('admin.btn.delete') }}</button>
                            </form>
                        </menu-item-delete-form>
                    @endif
                    @endcan

                </div>
            @endcan

            </div>
            <div class="col-md-12 col-lg-12 col-xl-6 col-xxl-5">
                <!--nested-->
                @include('admin.menu.components.nested-elements')
            </div>

        </div>

    
</div>

@endsection

<!--nested-->
@section('bottom-scripts')
    <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.js" integrity="sha512-7bS2beHr26eBtIOb/82sgllyFc1qMsDcOOkGK3NLrZ34yTbZX8uJi5sE0NNDYFNflwx1TtnDKkEq+k2DCGfb5w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="module">
        var json = @json($nestedData);
        window["json"] = json;
        var route = [];
        window["route"] = route;
        route.post = "{{ route('admin/menu-items-nested/update') }}";
        route.menu = "{{ $menu->resource_url }}";
        var trans = [];
        window["trans"] = trans;
        trans.mainCategory = "{{ trans('admin.nested.card.main_category') }}";
        var isCanEdit;
        window["isCanEdit"] = isCanEdit;
    </script>

    @can('admin.menu-item.edit')
        <script type="module">
            var isCanEdit = true;
            window["isCanEdit"] = isCanEdit;
        </script>
    @endcan

    <script src="{{ asset('js/libs/nestable2/custom.js') }}" type="module"></script>

    @cannot('admin.menu-item.edit')
        <script type="module">
            $(document).ready(function() {
                $('#nestableForMenu').nestable('destroy');
            });
        </script>
    @endcannot

@endsection