@extends('admin.master')

@section('content')
    <div>
        <!-- widget grid -->
        <section id="widget-grid" class="">
            <div>

            </div>
            <br>

            <!-- row -->
            <div class="row">
                <!-- NEW WIDGET START -->
                <article class="col-12">
                    <!-- Widget ID (each widget will need unique ID)-->
                    <div class="jarviswidget jarviswidget-color-darken no-padding" id="wid-id-0" data-widget-editbutton="false">
                        <header>
                            <div class="widget-header">
                                <span class="widget-icon"> <i class="fa fa-table"></i> </span>
                                <h2>CDRL Users</h2>
                            </div>

                            <div class="widget-toolbar">
                                <!-- add: non-hidden - to disable auto hide -->
                            </div>
                        </header>
                        <div>
                            <!-- widget edit box -->
                            <div class="jarviswidget-editbox">
                                <!-- This area used as dropdown edit box -->
                            </div>                            <!-- end widget edit box -->

                            <!-- widget content -->
                            <div class="widget-body p-0">

                                @if (session('success'))
                                    <div class="alert alert-success">
                                        {{ session('success') }}
                                    </div>
                                @endif
                                   <div class="card card-body bg-light">
                                        <div class="row">
                                            <div class="col-sm-2">
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input checkbox_roles "
                                                           type="checkbox"
                                                           name=""
                                                           id="status"
                                                           value="">
                                                    <label class="form-check-label"
                                                           for="status">
                                                        Show inactive users
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-sm-10">
                                                <a href="create" class="float-right btn sa-btn-primary">Add User</a>
                                            </div>
                                        </div>
                                   </div>
                                <table id="dt_users" class="table table-striped table-bordered table-hover" width="100%">
                                    <thead>
                                    <tr>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Email</th>
                                        <th>Created</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tfoot>
                                    <tr>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Email</th>
                                        <th>Created</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </section>
    </div>


@endsection
@section('scripts')
    <script src = "https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src = "https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.min.js"></script>
    <script src = "https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
    <script src = "https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
    <script src="{{ asset ("js/datatable_editor_1.9.1/dataTables.editor.min.js") }}"></script>
    <script>
        // use a global for the submit and return data rendering in the examples

        $(document).ready(function() {

            $('#admin-menu, #cdrl-users-menu').addClass('active');
            var userTable = $('#dt_users').DataTable( {
                dom: "Bfrtip",
                ajax: "jsonUsers",
                columnDefs: [ {
                    targets: 5,
                    data: "id",
                    render: function ( data, type, row, meta ) {
                        var actions ;
                        if ( row.deleted_at ){
                            actions =
                                `<a href="restore/${data}"` +
                                'class="btn btn-sm btn-link">' +
                                '<i class=" fa fa-window-restore"></i> Restore'+
                                '</a>'
                        }
                        else {
                            actions = `<a href="edit/${data}"` +
                                'class="btn btn-sm btn-link">' +
                                '<i class="fa fa-edit"></i> Edit' +
                                '</a>'+
                                `<a href="delete/${data}"` +
                                'class="btn btn-sm btn-link">' +
                                '<i class="fa fa-trash"></i>'
                                 + 'Delete' +
                                '</a>'
                        }

                        return actions;
                    }
                    },
                    {
                    targets: 4,
                    data: "deleted_at",
                    render: function ( data, type, full, meta ) {
                        return data ? `Deleted at ${data}` : "active";
                    }
                    }
                    ],
                columns: [
                    { data: "first_name" },
                    { data: "last_name" },
                    { data: "email" },
                    { data: "created_at" },
                ],
            } );

            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    if (data [4] === "active")
                        return true;
                    return false;
                });

            $("#status").change(function() {
                if ($(this).is(':checked'))
                {
                    $.fn.dataTable.ext.search.pop();
                }
                else {
                    $.fn.dataTable.ext.search.push(
                        function (settings, data, dataIndex) {
                            if (data [4] === "active")
                                return true;
                            return false;
                        });
                }
                userTable.draw();
            } );
            $(".alert-success").delay(5000).slideUp(300);
        } );
    </script>
@stop
@section ('css')
    <link rel="stylesheet" href="{{ asset ("css/datatables/jquery.dataTables/1.10.20/jquery.dataTables.min.css") }}">
    <link rel="stylesheet" href="{{ asset ("css/datatables/buttons.dataTables/1.6.0/buttons.dataTables.min.css") }}">
    <link rel="stylesheet" href="{{ asset ("css/datatables/select/1.3.1/select.dataTables.min.css") }}">
    <link rel="stylesheet" href="{{ asset ("css/datatable_editor_1.9.1/editor.dataTables.min.css") }}">
@stop