@extends('admin.layout')
@section("content")
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Меню</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Головна</a></li>
                        <li class="breadcrumb-item active">Меню</li>

                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <p class="text-mute m-0 p-0">Підміню переміщаються тільки всередині батьківського меню. Змінити батьківське меню можна тільки в режимі редагування.</p>
                <!-- left column -->
                <div class="col-md-12">
                    <div class="card-body">
                        <ul class="todo-list ui-sortable" data-widget="todo-list">
                            @forelse ($menus as $menu)

                            <li data-id="{{$menu->id}}" class="{{$menu->parent_id != 0 ? 'ml-5' : ''}}">
                                <span class="handle ui-sortable-handle">
                                  <i class="fas fa-ellipsis-v"></i>
                                  <i class="fas fa-ellipsis-v"></i>
                                </span>

                                <span class="text">{{$menu->title}}</span>
                                / <span class="text-muted">{{__('menus.type_'.$menu->type)}}</span>
                               {{-- <small class="badge badge-warning"><i class="far fa-clock"></i> 1 day</small>--}}
                                <div class="tools float-none ml-5">
                                    <a href="{{route('blogetc.admin.menus.edit_menu', $menu->id)}}">
                                        <i class="fas fa-edit"></i>
                                    </a>

                                    <form method='post' action='{{route("blogetc.admin.menus.destroy_menu", $menu->id)}}'
                                          onsubmit="return confirm('Ви дійсно бажаєте видалити цю категорію?\n Ви не зможете відмінити цю дію!');"
                                    class='float-right ml-2'>
                                        @csrf
                                        @method("DELETE")
                                        <a href="#" class="delete-lnk">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                    </form>
                                </div>
                            </li>
                            @empty
                                <div class='alert alert-danger'>Немає меню</div>
                            @endforelse
                        </ul>
                    </div>

                </div>
                <div class="col-md-12 text-right">
                    {{--<a href="{{route('blogetc.admin.categories.create_category')}}" class="btn btn-primary">
                        Зберегти
                    </a>--}}

                    <a href="{{route('blogetc.admin.menus.create_menu')}}" class="btn btn-info">
                        Створити пункт меню
                    </a>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('scripts')
    <script>
        $(document).ready(function(){
            $(document).on('click', '.delete-lnk', function(e){
                e.preventDefault();
                $(this).parent('form').submit();
            })
            $('.todo-list').sortable({
                placeholder         : 'sort-highlight',
                handle              : '.handle',
                forcePlaceholderSize: true,
                zIndex              : 999999,
                start: function(event, ui) {
                    ui.item.startPos = ui.item.index();
                },
                stop: function(event, ui) {
                    var orders = $(this).sortable('toArray', {attribute: 'data-id'})
                    console.log(orders);
                    /*e.preventDefault();*/
                    $.ajax({
                        type: 'POST',
                        url: '{{route('blogetc.admin.menus.update_menu_order')}}',
                        data: {order_in_menu: orders},
                        success: function(response) {
                            //console.log('response', response)
                            //if(response === 'success') $('#modal-update-tracker').modal('show')
                          window.location.href = "{{route('blogetc.admin.menus.index')}}";
                        }
                    });
                }
            })
        })

    </script>
@endsection