index.blade.php

@extends('layouts.admin')
@section('content')


@foreach($banner_types as $btypes)
@php $count = 1; @endphp
<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ion ion-clipboard mr-1"></i>
                    {{ $btypes->banner_type }}
                    {{ trans('cruds.position.title') }}
                </h3>

                {{-- <div class="card-tools">
            <ul class="pagination pagination-sm">
            <li class="page-item"><a href="#" class="page-link">&laquo;</a></li>
            <li class="page-item"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">&raquo;</a></li>
            </ul>
        </div> --}}
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <ul class="todo-list" id="gallery" data-widget="todo-list">
                    @foreach($positions as $position)
                    @if($position->banner->banner_type_id == $btypes->id && $position->banner_id == $position->banner->id)
                    @php $count = $count + 1 @endphp
                    <li id="{{ $position->banner->id }}">
                        <!-- drag handle -->
                        <span class="handle">
                            <i class="fas fa-ellipsis-v"></i>
                            <i class="fas fa-ellipsis-v"></i>
                        </span>
                        <!-- todo text -->
                        <span class="text">{{ $position->banner->banner_name }}</span>
                        <!-- General tools such as edit or delete-->
                        <div class="tools">
                            <i class="fa fa-minus entry-toggle"></i>
                        </div>
                    </li>
                    @endif
                    @endforeach
                </ul>
            </div>
            <!-- /.card-body -->
            <div class="card-footer clearfix">
                <form id="f1" name="f1">
                    @csrf
                    <input type="hidden" name="data" id="data">
                    <button type="button" id="save" class="btn btn-success float-right">Save</button>
                </form>
            </div>
        </div>
        <!-- /.card -->
    </div>
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ion ion-clipboard mr-1"></i>
                    {{ $btypes->banner_type }}
                    {{ trans('cruds.position.disabled') }}
                </h3>
            </div>
            <!-- /.card-header -->

            <div class="card-body">
                <ul class="todo-list trash" id="trash" data-widget="todo-list">
                    @foreach($banner_no_position as $banner)
                    @if($banner->banner_type_id == $btypes->id && )
                    <li id={{ $banner->id }}>
                        <!-- drag handle -->
                        <span class="handle">
                            <i class="fas fa-ellipsis-v"></i>
                            <i class="fas fa-ellipsis-v"></i>
                        </span>
                        <!-- todo text -->
                        <span class="text">{{ $banner->banner_name }}</span>
                        <!-- General tools such as edit or delete-->
                        <div class="tools">
                            <i class="fa fa-plus entry-toggle"></i>
                        </div>
                    </li>
                    @endif
                    @endforeach
                </ul>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
</div>
@endforeach


@endsection


@section('scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="{{ asset('js/test.js') }}"></script>
<script>
    $("#gallery").sortable({
        connectWith: "#trash"
    });
    $("#trash").sortable({
        connectWith: "#gallery"
    });

    $('.entry-toggle').on('click', function () {
        item = $(this).closest("li");
        $(this).toggleClass('fa-plus fa-minus')
        item.fadeOut(function () {
            if (item.parent().attr('id') == 'trash') {
                $('#gallery').append(item.fadeIn());
            } else {
                $('#trash').append(item.fadeIn());
            }
        });
    });

</script>
<script>
    $('#save').on('click', function (event) {
        event.preventDefault(); // avoid to execute the actual submit of the form.
        var r = $(".todo-list").sortable("toArray");
        var a = $(".todo-list").sortable("serialize", {
            attribute: "id",
        });
        var b = $(".trash").sortable("toArray", {
            attribute: "id",
        });

        console.log(r, "test ", a, b);

        var form = $(this);
        var url = form.attr('action');
        var _token = $('input[name="_token"]').val()

        $.ajax({
            type: "POST",
            url: "{{ route('admin.positions.newposition') }}",
            data: {
                "_token": _token,
                "id": r,
                'delete': b
            },
            success: function (data) {
                console.log(data); // show response from the php script.
                location.reload();
            },
        });

    });

</script>

@endsection