@extends("Admin.template" ,["table"=>true])
@section("content")
    <!-- Page header -->
    <div class="page-header page-header-light">
        <div class="page-header-content header-elements-md-inline">
            <div class="page-title d-flex">
                <h4><i class="icon-arrow-right6 mr-2"></i> <span class="font-weight-semibold">
                        {{__('messages.sections')}} </span> - {{__('messages.sections_sort')}} </h4>
                <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
            </div>
        </div>
    </div>
    <!-- /page header -->


    <div class="content">
        <div class="card">
            <div class="card-header header-elements-inline">
                <h5 class="card-title">  {{__('messages.sections_sort')}} </h5>
            </div>

            <div class="card-body">

                <div class="row">
                    <div class="col-md-12">
                        <ul class="media-list media-list-container mb-5" id="media-list-target-right">
                            @foreach($Sections as $Section)
                                <li class="media pointer" id="{{$Section->id}}">
                                        <div class=" mr-3">
                                            <a href="#">
                                                <img src="{{$Section->thumbnail}}" class="rounded-circle" width="42"
                                                     height="42" alt="">
                                            </a>
                                        </div>
                                        <div class=" media-body">
                                            <div class="media-title font-weight-semibold">{{$Section->name}}</div>
                                        </div>
                                        <div class=" ml-3">
                                            @if($Section->type == 1)
                                                <span class="badge badge-primary">{{__('messages.games')}}</span>
                                            @else
                                                <span class="badge badge-dark">{{__('messages.videos')}}</span>
                                            @endif
                                            <i class="icon-dots dragula-handle "></i>
                                        </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-danger alert-styled-left alert-dismissible"
                             style="display: none">
                            <button type="button" class="close" data-dismiss="alert"><span>×</span></button>
                            <span class="font-weight-semibold" id="ErrorMsg">Error</span>
                            <error></error>
                        </div>

                        <div class="alert alert-success alert-styled-left alert-dismissible"
                             style="display: none">
                            <button type="button" class="close" data-dismiss="alert"><span>×</span></button>
                            <span class="font-weight-semibold" id="successfullyMsg">successfully </span>
                            <error></error>
                        </div>


                        <button type="submit" class="btn bg-teal-400" id="save_sort">{{__('messages.save')}}<i
                                class="icon-floppy-disk ml-2"></i>
                        </button>


                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /content area -->
@endsection
@section('scripts')
    <script>


        $("#save_sort").click(function () {
            $('body').block({
                message: '<i class="icon-spinner4 spinner"></i>',
                overlayCSS: {
                    backgroundColor: '#1b2024',
                    opacity: 0.8,
                    zIndex: 1200,
                    cursor: 'wait'
                },
                css: {
                    border: 0,
                    color: '#fff',
                    padding: 0,
                    zIndex: 1201,
                    backgroundColor: 'transparent'
                }
            });
            data = $('#media-list-target-right > li').map(function () {
                return $(this).attr('id')
            }).get()
            $.ajax({
                method: "POST",
                url: '{{route('sections.sort.store')}}',
                data: {ids: data, action: "sort", '_token': "{{csrf_token()}}",},
                dataType: "json",
                bearing: function () {
                    $('body').block({
                        message: '<i class="icon-spinner4 spinner"></i>',
                        overlayCSS: {
                            backgroundColor: '#1b2024',
                            opacity: 0.8,
                            zIndex: 1200,
                            cursor: 'wait'
                        },
                        css: {
                            border: 0,
                            color: '#fff',
                            padding: 0,
                            zIndex: 1201,
                            backgroundColor: 'transparent'
                        }
                    });
                },
                success: function (response) {
                    $('body').unblock();
                    if (response.error_code == 0) {
                        $('.alert-success').css('display', 'block');
                        $('#successfullyMsg').text(response.error_msg);
                    } else {
                        $('error').text(response.error_msg);
                        $('.alert-danger').css('display', 'block');
                        $('#ErrorMsg').text(response.error_msg);
                    }
                    setTimeout(function () {
                        $('.alert').css('display', 'none');
                    }, 3000)
                }
            });


        })


        dragula([document.getElementById('media-list-target-left'), document.getElementById('media-list-target-right')], {
            mirrorContainer: document.querySelector('.media-list-container'),
            moves: function (el, container, handle) {
                console.log('handle', handle)
                console.log('handle.classList', handle.classList)
                return true
                return handle.classList.contains('dragula-handle');
            }
        });


    </script>
@endsection