Deletes checkbox item

admin_index.blade.php

@extends('backend.layouts.master')

@section('breadcrumb')
{!! Breadcrumbs::render('backend.admin.index') !!}
@endsection

@section('content')
<div class='table-header'>
    <h1 class="pull-left">@lang('labels.admin.index')</h1>
    <div class="pull-right">
        <a class="btn btn-primary" href="{!! route('admin-managements.create') !!}">
            @lang('labels.add_new')
        </a>
        {!! buttonDelete(route('admin-managements.deletes'), null, trans('labels.delete'), true) !!}
    </div>
</div>

<div class="clearfix"></div>
@include('flash::message')
<div class="clearfix"></div>

<div class="admin-content">
    <div class="box box-primary">
        <div class="box-body data-management">
            @include('backend.admin.table')
        </div>
    </div>
</div>
@endsection

admin_table.blade.php

<div id='load-item'>
    <table class="table table-responsive table-striped table-bordered table-hover" data-total="{!! $admins->total() !!}" id="admins-table">
        <thead>
        <th class='text-center'><input type='checkbox' id='check-all' name='item-check-all' value='1' /></th>
        <th class='text-center'>@lang('labels.id')</th>
        <th>@lang('labels.admin.email')</th>
        <th>@lang('labels.admin.name')</th>
        <th>@lang('labels.admin.role')</th>
        <th class="text-center">@lang('labels.created_at')</th>
        <th class="text-center" colspan="3">@lang('labels.admin.action')</th>
        </thead>
        <tbody>
            @foreach($admins as $admin)
            <tr>
                <td class='text-center'><input type='checkbox' name='item-check' class='checkbox-item' value='{!! $admin->id !!}' /></td>
                <td class='text-center'><a href='{!! route("admin-managements.show", $admin->id) !!}'>{!! $admin->id !!}</a></td>
                <td><a href='{!! route("admin-managements.show", $admin->id) !!}'>{{ $admin->email }}</a></td>
                <td>{{ $admin->name }}</td>
                <td>{{ $admin->role_name }}</td>
                <td class="text-center">{{ $admin->created_at->format('Y-m-d H:i') }}</td>
                <td class="text-center">
                    <a href="{!! route('admin-managements.show', [$admin->id]) !!}" class='btn btn-default btn-xs'><i class="glyphicon glyphicon-eye-open"></i></a>
                    <a href="{!! route('admin-managements.edit', [$admin->id]) !!}" class='btn btn-default btn-xs'><i class="glyphicon glyphicon-edit"></i></a>
                    {!! buttonDelete(route('admin-managements.destroy', $admin->id)) !!}
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
<div class="text-right">
    {!! $admins->links() !!}
</div>

common.js

$.fn.refresh = function () {
    var elems = $(this.selector);
    this.splice(0, this.length);
    this.push.apply(this, elems);
    return this;
};

NEOLAB.checklist = function () {
    var self = this;
    this.statusCheck = false;
    this.checkAllBtn = $('#check-all');
    this.itemCheck = $('.checkbox-item');
    this.data = {
        'checkAll': false,
        'checked': [],
        'uncheck': []
    };
    this.total = this.itemCheck.parents('table').data('total');

    this.getData = function (key) {
        if (typeof (key) !== 'undefined') {
            return this.data[key];
        }
        return this.data;
    };

    this.getStatusCheck = function () {
        return this.statusCheck;
    };

    this.handleCheckAllItem = function () {
        $(document).on('change', this.checkAllBtn.selector, function () {
            var $el = $(this);

            //Handle check and uncheck items
            if (!$(this).prop("checked")) {
                return self.handleUncheckAll($el);
            }

            return self.handleCheckAll($el);
        });
    };

    this.handleCheckAll = function ($el) {
        this.data.checkAll = true;

        this.removeData('checked', []);
        this.removeData('uncheck', []);
        $el.parents('table').find('.checkbox-item').prop('checked', true);

        return false;
    };

    this.handleUncheckAll = function ($el) {
        this.data.checkAll = false;

        if ($.isEmptyObject(self.data.checked) || this.data.checked.length == this.total) {
            $el.parents('table').find('.checkbox-item').prop('checked', false);
        }

        return false;
    };

    this.handleCheckItem = function ($el) {
        var value = $el.val();

        if (!this.data.checkAll) {
            this.pushData('checked', value);
        }
        this.removeData('uncheck', value);

        if (this.data.checkAll && $.isEmptyObject(this.data.uncheck)) {
            this.data.checkAll = true;
            $('#check-all').prop('checked', true);
        }

        if (this.data.checked.length == this.total) {
            this.data.checkAll = true;
            $('#check-all').prop('checked', true);
        }

        return false;
    };

    this.handleUncheckItem = function ($el)
    {
        var value = $el.val();

        $('#check-all').prop('checked', false);

        this.removeData('checked', value);

        if (this.data.checkAll) {
            this.pushData('uncheck', value)
        }

        return false;
    };

    this.handleItem = function () {
        $(document).on('change', this.itemCheck.selector, function () {
            var $el = $(this);

            //Handle check and uncheck items
            if (!$(this).prop("checked")) {
                return self.handleUncheckItem($el);
            }

            return self.handleCheckItem($el);
        });
    };

    this.pushData = function (key, value) {
        if ($.inArray(value, this.data[key]) === -1) {
            this.data[key].push(value);
        }
    };

    this.removeData = function (key, value) {
        if ($.isEmptyObject(value)) {
            this.data[key] = [];
            return false;
        }
        var index = $.inArray(value, this.data[key]);
        if (index != -1) {
            this.data[key].splice(index, 1);
        }
    };

    this.checkedItem = function () {
        if (this.data.checkAll) {
            if ($.isEmptyObject(this.data.uncheck)) {
                $('#check-all').prop('checked', true);
            }
            this.itemCheck.refresh().prop('checked', true);
        }

        if (!$.isEmptyObject(this.data.checked)) {
            this.itemCheck.refresh().each(function (index, element) {
                if ($.inArray($(this).val(), self.data.checked) > -1) {
                    $(this).prop('checked', true);
                }
            });
        }

        if (!$.isEmptyObject(this.data.uncheck)) {
            this.itemCheck.refresh().each(function (index, element) {
                if ($.inArray($(this).val(), self.data.uncheck) > -1) {
                    $(this).prop('checked', false);
                }
            });
        }
    };

    this.init = function ()
    {
        this.handleCheckAllItem();
        this.handleItem();
    };

};

NEOLAB.paginate = function ($checklist) {
    var self = this;
    var $loadItem = $('#load-item');
    this.$checklist = $checklist;

    this.hashChange = function () {
        $(window).on('hashchange', function () {
            if (window.location.hash) {
                var page = window.location.hash.replace('#', '');
                if (page == Number.NaN || page <= 0) {
                    return false;
                }
            }
        });
    };

    this.handleClickPaginate = function () {
        $(document).ready(function () {
            $(document).on('click', '.pagination a', function (e) {
                e.preventDefault();

                //Image loading
                self.loading();

                //delay request
                self.timeoutRequest($(this));
            });
        });
    };

    this.loading = function () {
        var tagOverride = $('<div/>').addClass('load-override').css({
            'position': 'absolute',
            'background': 'rgba(146, 146, 146, 0.1)',
            'border-radius': '3px',
            'width': '100%',
            'height': '100%',
            'top': 0,
            'left': 0}
        );
        var img = $('<img/>').css({
            'position': 'absolute',
            'width': '100%',
            'height': '100%',
            'background': "url('/backend/images/ajax_loading.gif') no-repeat center center"
        });

        //Append image loading
        $loadItem.find('.load-override').remove();
        $loadItem.refresh().append(tagOverride);
        $loadItem.refresh().find('.load-override').append(img);
    };

    this.timeoutRequest = function ($el) {
        setTimeout(function () {
            self.requestAjaxPage($el.attr('href').split('page=')[1], self.$checklist);
        }, 500);
    };

    this.requestAjaxPage = function (page) {
        $.ajax({
            url: '?page=' + page,
            dataType: 'json',
        }).done(function (data) {
            $('.data-management').html(data);
            location.hash = page;
            self.$checklist.checkedItem();
        }).fail(function () {
            alert('Data could not be loaded.');
        });
    };

    this.init = function () {
        this.hashChange();
        this.handleClickPaginate();
    };
};

NEOLAB.common = function ($checklist) {
    var self = this;
    this.$checklist = $checklist;

    this.setConfig = function () {
        bootbox.addLocale('vi', {
            OK: 'Đồng ý',
            CANCEL: 'Hủy',
            CONFIRM: 'Xác nhận'
        });
        bootbox.addLocale('en', {
            OK: 'OK',
            CANCEL: 'Cancel',
            CONFIRM: 'Confirm'
        });
        bootbox.setDefaults({
            locale: NEOLAB.locale
        });
    };

    this.handleButtonDelete = function () {
        $('[data-delete]').on('click', function (e) {
            e.preventDefault();

            // If the user confirm the delete
            self.showPopupDelete($(this));
        });
    };

    this.handleButtonDeletes = function () {
        $('[data-deletes]').on('click', function (e) {
            e.preventDefault();

            if (self.checkItemNotSelect()) {
                bootbox.alert("You must select items");
                return false;
            }

            // If the user confirm the delete
            self.showPopupDelete($(this), self.$checklist.getData());
        });
    };

    this.checkItemNotSelect = function () {
        return $.isEmptyObject(self.$checklist.getData('checked')) &&
                !self.$checklist.getData('checkAll');
    };

    this.showPopupDelete = function ($el, data) {
        bootbox.confirm($el.data('original-title'), function (result) {
            if (result) {
                var url = $el.data('url');
                var token = $el.data('token');
                var method = $el.data('method');
                var $form = $('<form/>', {action: url, method: 'post'});
                var $inputMethod = $('<input/>', {type: 'hidden', name: '_method', value: method});
                var $inputToken = $('<input/>', {type: 'hidden', name: '_token', value: token});

                // Append the inputs to the form, hide the form, append the form to the <body>, SUBMIT !
                if (typeof (data) !== 'undefined') {
                    var $inputData = $('<input/>', {type: 'hidden', name: 'data', value: JSON.stringify(data)});
                    $form.append($inputMethod, $inputToken, $inputData).hide().appendTo('body').submit();
                } else {
                    $form.append($inputMethod, $inputToken).hide().appendTo('body').submit();
                }
            }
        });
    };

    this.init = function () {
        this.setConfig();
        this.handleButtonDelete();
        this.handleButtonDeletes();
    };
};

var checklist = new NEOLAB.checklist();
checklist.init();

var paginate = new NEOLAB.paginate(checklist);
paginate.init();

var common = new NEOLAB.common(checklist);
common.init();

header.blade.php

<header class="main-header">

    <!-- Logo -->
    <a href="{!! route('admin.dashboard') !!}" class="logo"><b>@lang('labels.admin-page')</b></a>

    <!-- Header Navbar -->
    <nav class="navbar navbar-static-top" role="navigation">
        <!-- Sidebar toggle button-->
        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
        </a>
        <!-- Navbar Right Menu -->
        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
                <!-- Notifications Menu -->
                <li class="dropdown notifications-menu">
                    <!-- Menu toggle button -->
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-bell-o"></i>
                        <span class="label label-warning">10</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="header">You have 10 notifications</li>
                        <li>
                            <!-- Inner Menu: contains the notifications -->
                            <ul class="menu">
                                <li><!-- start notification -->
                                    <a href="#">
                                        <i class="fa fa-users text-aqua"></i> 5 new members joined today
                                    </a>
                                </li><!-- end notification -->
                            </ul>
                        </li>
                        <li class="footer"><a href="#">View all</a></li>
                    </ul>
                </li>
                <!-- User Account Menu -->
                <li class="dropdown user user-menu">
                    <!-- Menu Toggle Button -->
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <!-- The user image in the navbar-->
                        <img src="{{ asset("/bower/admin-lte/dist/img/user2-160x160.jpg") }}" class="user-image" alt="User Image"/>
                        <!-- hidden-xs hides the username on small devices so only the image appears. -->
                        <span class="hidden-xs">{{ Auth::user()->name }}</span>
                    </a>
                    <ul class="dropdown-menu">
                        <!-- The user image in the menu -->
                        <li class="user-header">
                            <img src="{{ asset("/bower/admin-lte/dist/img/user2-160x160.jpg") }}" class="img-circle" alt="User Image" />
                            <p>
                                {{ Auth::user()->name }}
                                <small>Member since {{ Auth::user()->created_at->format('M-Y') }}</small>
                            </p>
                        </li>
                        <!-- Menu Footer-->
                        <li class="user-footer">
                            <div class="pull-left">
                                <a href="{!! route('admin-managements.profile.show') !!}" class="btn btn-default btn-flat">@lang('labels.login.profile')</a>
                            </div>
                            <div class="pull-right">
                                <a href="#" class="btn btn-default btn-flat" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">@lang('labels.login.signout')</a>
                                {!! Form::open(['route' => 'logout', 'method' => 'post', 'id' => 'logout-form'])  !!}
                                {!! Form::close() !!}
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</header>

helpers_functions.php

<?php
if (!function_exists('buttonDelete')) {

    /**
     * Generate button delete
     *
     * @param string      $link  Link click
     * @param string|null $title Title
     *
     * @return string
     */
    function buttonDelete($link, $title = null, $text = null, $isDeletes = false)
    {
        if ($isDeletes) {
            $format = '<button data-url="%s" data-toggle="tooltip" data-deletes="true" data-token="%s" title="%s" data-method="post" class="btn btn-danger">%s</button>';
        } else {
            $format = '<a href="javascript:void" data-url="%s" data-toggle="tooltip" data-delete="true" data-token="%s" title="%s" data-method="delete" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i>%s</a>';
        }
        $token = csrf_token();
        $title = $title ?: 'Delete item';
        return sprintf($format, $link, $token, $title, $text);
    }
}

master.blade.php

<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>@yield('title')</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- Bootstrap 3.3.2 -->
        <link href="{!! asset('/bower/admin-lte/bootstrap/css/bootstrap.min.css') !!}" rel="stylesheet" type="text/css" />
        <!-- Font Awesome Icons -->
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Ionicons -->
        <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="{!! asset('/bower/admin-lte/dist/css/AdminLTE.min.css') !!}" rel="stylesheet" type="text/css" />
        <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
              page. However, you can choose any other skin. Make sure you
              apply the skin class to the body tag so the changes take effect.
        -->
        <link href="{!! asset('/bower/admin-lte/dist/css/skins/skin-blue.min.css') !!}" rel="stylesheet" type="text/css" />

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
        <link href="{!! asset('/backend/css/custom.css') !!}" rel="stylesheet" type="text/css" />
        @yield('styles')
        <script type="text/javascript">
            var NEOLAB = NEOLAB || {!! json_encode(['csrfToken' => csrf_token(), 'locale' => app()->getLocale()]) !!};
            NEOLAB.createNS = function (namespace) {
                var nsparts = namespace.split(".");
                var parent = NEOLAB;
                if (nsparts[0] === "NEOLAB") {
                    nsparts = nsparts.slice(1);
                }
                for (var i = 0; i < nsparts.length; i++) {
                    var partname = nsparts[i];
                    if (typeof parent[partname] === "undefined") {
                        parent[partname] = {};
                    }
                    parent = parent[partname];
                }
                return parent;
            };
        </script>
    </head>
    <body class="skin-blue">
        <div class="wrapper">

            <!-- Main Header -->
            @include('backend.layouts.header')
            <!-- Left side column. contains the logo and sidebar -->
            @include('backend.layouts.sidebar')

            <!-- Content Wrapper. Contains page content -->
            <div class="content-wrapper">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>
                        <small>{!! $pageDescription or null !!}</small>
                    </h1>
                    @yield('breadcrumb')
                </section>

                <!-- Main content -->
                <section class="content">
                    @yield('content')
                    <!-- Your Page Content Here -->

                </section><!-- /.content -->
            </div><!-- /.content-wrapper -->

            <!-- Main Footer -->
            @include('backend.layouts.footer')

        </div><!-- ./wrapper -->

        <!-- REQUIRED JS SCRIPTS -->

        <!-- jQuery 2.1.3 -->
        <script src="{!! asset ('/bower/admin-lte/plugins/jQuery/jQuery-2.1.3.min.js') !!}"></script>
        <!-- Bootstrap 3.3.2 JS -->
        <script src="{!! asset ('/bower/admin-lte/bootstrap/js/bootstrap.min.js') !!}" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="{!! asset ('/bower/admin-lte/dist/js/app.min.js') !!}" type="text/javascript"></script>
        <!--Bootbox js-->
        <script src="{!! asset ('/backend/plugins/bootboxjs/bootbox.min.js') !!}" type="text/javascript"></script>
        <!-- Common js -->
        <script src="{!! asset ('/backend/js/common.js') !!}" type="text/javascript"></script>
        @yield('scripts')
    </body>
</html>

menu.blade.php

<!-- Begin sidebar-menu -->
<ul class="sidebar-menu">
    <li class="header">Menu</li>
    <li class="treeview {{ Request::is('admin/admin-managements*') ? 'active' : '' }}">
        <a href="#"><span>@lang('labels.admin.title')</span> <i class="fa fa-angle-left pull-right"></i></a>
        <ul class="treeview-menu">
            <li class="{{ Request::is('admin/admin-managements/create') ? 'active' : '' }}">
                <a href="{!! route('admin-managements.create') !!}">@lang('labels.add_new')</a>
            </li>
            <li class="{{ Request::is('admin/admin-managements') ? 'active' : '' }}">
                <a href="{!! route('admin-managements.index') !!}">@lang('labels.admin.index')</a>
            </li>
        </ul>
    </li>
    <li><a href="#"><span>Another Link</span></a></li>
</ul>
<!-- /.sidebar-menu -->

momon1.js

$.fn.refresh = function () {
    var elems = $(this.selector);
    this.splice(0, this.length);
    this.push.apply(this, elems);
    return this;
};

NEOLAB.checklist = function () {
    var self = this;
    this.statusCheck = false;
    this.checkAllBtn = $('#check-all');
    this.itemCheck = $('.checkbox-item');
    this.data = {
        'checkAll': false,
        'checked': []
    };
    this.total = this.itemCheck.parents('table').data('per-page');

    this.getData = function (key) {
        if (typeof (key) !== 'undefined') {
            return this.data[key];
        }
        return this.data;
    };

    this.getStatusCheck = function () {
        return this.statusCheck;
    };

    this.handleCheckAllItem = function () {
        $(document).on('change', this.checkAllBtn.selector, function () {
            var $el = $(this);

            //Handle check and uncheck items
            if (!$(this).prop("checked")) {
                return self.handleUncheckAll($el);
            }

            return self.handleCheckAll($el);
        });
    };

    this.handleCheckAll = function ($el) {
        this.data.checkAll = true;

        this.itemCheck.each(function (index, elements) {
            self.pushData('checked', $(this).val());
        });
        $el.parents('table').find('.checkbox-item').prop('checked', true);

        return false;
    };

    this.handleUncheckAll = function ($el) {
        this.data.checkAll = false;

        $el.parents('table').find('.checkbox-item').prop('checked', false);
        this.removeData('checked', []);

        return false;
    };

    this.handleCheckItem = function ($el) {
        var value = $el.val();

        this.pushData('checked', value);

        if (this.data.checked.length == this.total) {
            this.data.checkAll = true;
            $('#check-all').prop('checked', true);
        }

        return false;
    };

    this.handleUncheckItem = function ($el)
    {
        var value = $el.val();

        this.data.checkAll = false;
        $('#check-all').prop('checked', false);

        this.removeData('checked', value);

        return false;
    };

    this.handleItem = function () {
        $(document).on('change', this.itemCheck.selector, function () {
            var $el = $(this);

            //Handle check and uncheck items
            if (!$(this).prop("checked")) {
                return self.handleUncheckItem($el);
            }

            return self.handleCheckItem($el);
        });
    };

    this.pushData = function (key, value) {
        if ($.inArray(value, this.data[key]) === -1) {
            this.data[key].push(value);
        }
    };

    this.removeData = function (key, value) {
        if ($.isEmptyObject(value)) {
            this.data[key] = [];
            return false;
        }
        var index = $.inArray(value, this.data[key]);
        if (index != -1) {
            this.data[key].splice(index, 1);
        }
    };

    this.resetData = function () {
        this.data = {
            'checkAll': false,
            'checked': []
        };
    };

    this.init = function ()
    {
        this.handleCheckAllItem();
        this.handleItem();
    };

};

NEOLAB.paginate = function ($checklist) {
    var self = this;
    var $loadItem = $('#load-item');
    this.$checklist = $checklist;

    this.hashChange = function () {
        $(window).on('hashchange', function () {
            if (window.location.hash) {
                var page = window.location.hash.replace('#', '');
                if (page == Number.NaN || page <= 0) {
                    return false;
                }
            }
        });
    };

    this.handleClickPaginate = function () {
        $(document).ready(function () {
            $(document).on('click', '.pagination a', function (e) {
                e.preventDefault();

                //Image loading
                self.loading();

                //delay request
                self.timeoutRequest($(this));
            });
        });
    };

    this.loading = function () {
        var tagOverride = $('<div/>').addClass('load-override').css({
            'position': 'absolute',
            'background': 'rgba(146, 146, 146, 0.1)',
            'border-radius': '3px',
            'width': '100%',
            'height': '100%',
            'top': 0,
            'left': 0}
        );
        var img = $('<img/>').css({
            'position': 'absolute',
            'width': '100%',
            'height': '100%',
            'background': "url('/backend/images/ajax_loading.gif') no-repeat center center"
        });

        //Append image loading
        $loadItem.find('.load-override').remove();
        $loadItem.refresh().append(tagOverride);
        $loadItem.refresh().find('.load-override').append(img);
    };

    this.timeoutRequest = function ($el) {
        setTimeout(function () {
            self.requestAjaxPage($el.attr('href').split('page=')[1]);
        }, 500);
    };

    this.requestAjaxPage = function (page) {
        $.ajax({
            url: '?page=' + page,
            dataType: 'json',
        }).done(function (data) {
            $('.data-management').html(data);
            location.hash = page;
            self.$checklist.resetData();
        }).fail(function () {
            alert('Data could not be loaded.');
        });
    };

    this.init = function () {
        this.hashChange();
        this.handleClickPaginate();
    };
};

NEOLAB.common = function ($checklist) {
    var self = this;
    this.$checklist = $checklist;
    this.formDeleteClass = 'form-delete';

    this.setConfig = function () {
        bootbox.addLocale('vi', {
            OK: 'Đồng ý',
            CANCEL: 'Hủy',
            CONFIRM: 'Xác nhận'
        });
        bootbox.addLocale('en', {
            OK: 'OK',
            CANCEL: 'Cancel',
            CONFIRM: 'Confirm'
        });
        bootbox.setDefaults({
            locale: NEOLAB.locale
        });
    };

    this.handleButtonDelete = function () {
        $('[data-delete]').on('click', function (e) {
            e.preventDefault();

            // If the user confirm the delete
            self.showPopupDelete($(this));
        });
    };

    this.handleButtonDeletes = function () {
        $('[data-deletes]').on('click', function (e) {
            e.preventDefault();

            if (self.checkItemNotSelect()) {
                bootbox.alert("You must select items");
                $('.' + self.formDeleteClass).remove();
                return false;
            }

            // If the user confirm the delete
            self.showPopupDelete($(this), self.$checklist.getData());
        });
    };

    this.checkItemNotSelect = function () {
        return $.isEmptyObject(self.$checklist.getData('checked')) &&
                !self.$checklist.getData('checkAll');
    };

    this.showPopupDelete = function ($el, data) {
        bootbox.confirm($el.data('original-title'), function (result) {
            if (result) {
                var url = $el.data('url');
                var token = $el.data('token');
                var method = $el.data('method');
                var $form = $('<form/>', {action: url, method: 'post', 'class': self.formDeleteClass});
                var $inputMethod = $('<input/>', {type: 'hidden', name: '_method', value: method});
                var $inputToken = $('<input/>', {type: 'hidden', name: '_token', value: token});

                // Append the inputs to the form, hide the form, append the form to the <body>, SUBMIT !
                if (typeof (data) !== 'undefined') {
                    var $inputData = $('<input/>', {type: 'hidden', name: 'data', value: JSON.stringify(data)});
                    $form.append($inputMethod, $inputToken, $inputData).hide().appendTo('body').submit();
                } else {
                    $form.append($inputMethod, $inputToken).hide().appendTo('body').submit();
                }
            }
        });
    };

    this.init = function () {
        this.setConfig();
        this.handleButtonDelete();
        this.handleButtonDeletes();
    };
};

var checklist = new NEOLAB.checklist();
checklist.init();

var paginate = new NEOLAB.paginate(checklist);
paginate.init();

var common = new NEOLAB.common(checklist);
common.init();

route.php

//Admin management
Route::post('admin-managements/deletes', 'AdminController@deletes')->name('admin-managements.deletes');
Route::resource('admin-managements', 'AdminController');

sidebar.blade.php

<aside class="main-sidebar">

    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">

        <!-- Sidebar user panel (optional) -->
        <div class="user-panel">
            <div class="pull-left image">
                <img src="{{ asset("/bower/admin-lte/dist/img/user2-160x160.jpg") }}" class="img-circle" alt="User Image" />
            </div>
            <div class="pull-left info">
                <p>{{ Auth::user()->name }}</p>
                <!-- Status -->
                <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
            </div>
        </div>

        <!-- search form (Optional) -->
        <form action="#" method="get" class="sidebar-form">
            <div class="input-group">
                <input type="text" name="q" class="form-control" placeholder="Search..."/>
                <span class="input-group-btn">
                    <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
                </span>
            </div>
        </form>
        <!-- /.search form -->

        <!-- Sidebar Menu -->
        @include('backend.layouts.menu')
    </section>
    <!-- /.sidebar -->
</aside>