@extends('layouts.backend')
@section('js_after')
    <script>


        var articleTable = $('#userTableList').DataTable({
            "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
            processing: true,
            sPaginationType: "full_numbers",
            serverSide: true,
            stateSave: true,
            deferRender: true,
            //pageLength: 50,
            ajax:{
                url:"{{ route('webadmin.groupIndex') }}"
            } ,
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex' , orderable: false, searchable: false},
                {data: 'name', name: 'name'},
                {data: 'group_count', name: 'group_count'},
                {data: 'created_at', name: 'created_at'},
                {data: 'action', name: 'action' , orderable: false, searchable: false},
            ]
        });




    </script>
@endsection
@section('content')
    <div class="content">
        <div class="row">

            <div class="col-lg-12">
                <div class="block block-themed">
                    <div class="block-header">
                        <h3 class="block-title"> All Groups</h3>
                        <div class="block-options">

                            <button style="display: none" data-backdrop="static" data-keyboard="false" data-toggle="modal" data-target="#groupNameModal"  class="btn btn-alt-secondary mr-5 mb-5 create-group-btn">
                                <i class="fa fa-plus mr-5"></i>Create Group
                            </button>
                        </div>
                    </div>
                    
                    <div class="block-content">

                        <table id="userTableList" class="table table-bordered table-vcenter">
                            <thead>
                            <tr>
                                <th class="text-center" style="width: 50px;">#</th>
                                <th>Name</th>
                                <th>Total User</th>
                                <th>Created At</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="groupNameModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Create Group</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="md-form mb-5">
                        <label data-error="wrong" data-success="right" for="group_name">Group Name</label>
                        <input type="text" id="group_name" name="group_name" autocomplete="off" class="form-control validate">
                        <span class="text-info create-group-msg"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary create-group-save">Save </button>
                </div>
            </div>
        </div>
    </div>
@endsection