@extends('layouts.admin.admin')
@section('title', 'User')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-flex align-items-center justify-content-between">
            <h5 class="mb-0 font-size-18">User List</h5>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Home</a></li>
                    <li class="breadcrumb-item active">User</li>
                </ol>
            </div>

        </div>
    </div>
</div>
    <div class="row">
        {{-- <div class="col-md-6">
            <header class="text-capitalize pt-1">
                <h5>User</h3>
            </header>
        </div> --}}
        <div class="col-md-12 text-right">
            <a class="btn btn-dark ink-reaction btn-sm" href="{{ route('user.password.send.mass') }}">
                <i class="fa fa-envelope"></i>
                Send Password To All Collector
            </a>&nbsp;&nbsp;&nbsp;
            <a class="btn btn-success ink-reaction btn-sm" href="{{ route('user.create') }}">
                <i class="mdi mdi-plus"></i>
                Add
            </a>
        </div>
    </div>
    <div class="card mt-2 p-4">
        <div class="table-responsive">

            <table id="datatable" class="table table-bordered">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Username</th>
                        <th>Has Admin Access</th>
                        <th>Email</th>
                        <th>Mobile</th>
                        {{-- <th>Institution</th> --}}
                        <th>Role</th>
                        <th>Status</th>
                        <th>Assigned Ceremonies</th>
                        <th>Seat Arrangement Ceremony</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
    </div>
    </div>
@endsection


@section('page-specific-scripts')
    <script>
        $(document).ready(function() {
            $('#datatable').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": '{{ route('user.data') }}',
                // dom: 'Bfrtip',
                // buttons: [
                //     'copy', 'csv', 'excel', 'pdf', 'print',
                //     // exportOptions: {
                //     //     columns: 'th:not(:last-child)'
                //     // }
                // ],
                // dom: 'Bfrtip',
                // buttons: [{
                //     extend: 'excel',
                //     text: 'Export Search Results',
                //     className: 'btn btn-default',
                //     exportOptions: {
                //         columns: 'th:not(:last-child)'
                //     }
                // }],
                "columns": [{
                        "data": "id",
                        'visible': false
                    },
                    {
                        "data": "name"
                    },
                    {
                        "data": "username"
                    },
                    {
                        "data": "has_admin_access"
                    },
                    {
                        "data": "email"
                    },
                    {
                        "data": "mobile"
                    },
                    // {
                    //     "data": "institution", orderable: false, searchable: false 
                    // },
                    {
                        "data": "assigned_roles", orderable: false, searchable: false 
                    },
                    {
                        "data": "status", orderable: false, searchable: false 
                    },
                    {
                        "data": "ceremonies", orderable: false, searchable: false 
                    },
                    {
                        "data": "seat_arrangement_ceremony", orderable: false, searchable: false 
                    },
                    {
                        "data": "actions",
                        orderable: false,
                        searchable: false
                    },
                ],
                order: [
                    [0, 'desc']
                ]
            });
        });
    </script>
@endsection