@extends('layouts.backend')

@section('style')
    <link rel="stylesheet" type="text/css" href="{{ assetHelper('vendors/css/forms/selects/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ assetHelper('vendors/css/ui/dragula.min.css') }}">
@endsection

@section('content')
<div class="card">
    {{-- START INCLUDE TABLE HEADER --}}
    @include('backend.includes.cards.table-header')
    {{-- START INCLUDE TABLE HEADER --}}

    <div id="search-form-body"></div>
    <a href="{{ routeHelper('menus.create') }}" class="btn btn-primary btn-sm show-modal-form"> <i class="fa fa-plus"></i> Create New Menu</a>

    <div class="card-content collpase show">
        <div class="card-body">
            <ul class="list-group drag-drop" id="list-group-tags" data-url="{{ routeHelper('menus.reorder') }}">
                @foreach ($menus as $menu)
                    @include('backend.menus.list-menus', ['menu' => $menu])
                @endforeach
            </ul>
        </div>
    </div>
</div>
@endsection

@section('script')
    <script type="text/javascript" src="{{ assetHelper('vendors/js/forms/extended/maxlength/bootstrap-maxlength.js') }}"></script>
    <script type="text/javascript" src="{{ assetHelper('vendors/js/forms/spinner/jquery.bootstrap-touchspin.js') }}"></script>
    <script type="text/javascript" src="{{ assetHelper('vendors/js/extensions/dragula.min.js') }}"></script>
    <script type="text/javascript" src="{{ assetHelper('js/scripts/forms/select/form-select2.js') }}"></script>
    <script type="text/javascript" src="{{ assetHelper('js/scripts/forms/input-groups.js') }}"></script>

    <script>

        $(function() {
            dragula([document.getElementsByClassName('list-group')[0]]).on('drop', function (el) {
                let orders = [];
                let url = $('.drag-drop').data('url');
                $('li.list-group-item').each(function (index) {
                    let id = $(this).data('id');
                    let parent_id = null;
                    if(typeof orders[id] !== 'undefined') return true;
                    if ($(this).parent('.list-group-tags').closest('li').length != 0) {
                        parent_id = $(this).parent('.list-group-tags').closest('li').data('id');
                    }
                    orders[id] = {
                        parent_id: parent_id,
                        order: (index + 1),
                    }
                });

                $.ajax({
                    type: "post",
                    url: `${url}`,
                    data: {orders: orders},
                    success: function (response) {
                    let order = 1;
                    $('.order').each(function () {
                        $(this).text(order++);
                    });
                    }
                });
            });

            $('body').on('keyup', 'input[name="icon"]', function() {
                let icon = $(this).closest('.input-group').find('.input-group-text');
                console.log(icon);
                icon.html(`<i class="${$(this).val()}"></i>`);
            });
        });
    </script>
@endsection