@extends('backend.layouts.app')
<style>
table.dataTable thead th, table.dataTable thead td { border-bottom: none !important;}

table.dataTable tfoot th, table.dataTable tfoot td { border-top: none !important; }

div.dataTables_length select {
	border-radius: 0!important;
    border-color: #d2d6de;
    height: 34px;
    padding: 5px 5px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc; }

div.dataTables_length label { font-weight: bold !important; }

.dataTables_wrapper .dataTables_filter input {
    border-radius: 0!important;
    border-color: #d2d6de;
    height: 34px;
    padding: 5px 5px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
}

div.dataTables_filter label { font-weight: bold!important; }

table.dataTable.no-footer { border-bottom: 1px solid #eee !important; }

</style>
@section('content')


<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">

<style type="text/css">
table {
    table-layout: fixed;
    font-size: 100%;
    word-break: break-all;
}

table th,
table td {
    overflow: hidden;
}
div#example_info {
    color: #000 !important;
    text-transform: capitalize !important;
}

div#example_paginate {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
    border: 1px solid #f4f4f4;
    background: #fff;
    padding: 0px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #000 !important;
    border: 1px solid #337ab7 !important;
    background: #337ab7 !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: 1px solid #337ab7 !important;
    background: #337ab7 !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: #fff !important;
}
</style>

<div class="row">       
    <div class="col-md-12"> 
        <div class="box">
            <div class="box-body">

                <div class="col-lg-12">
                    <h2><i class="fa fa-users"></i> User Administration 
                        <a href="{{ route('users.create') }}" class="btn btn-default pull-right"><i class="fa fa-plus"></i>&nbsp;Add User</a></h2>
                        <hr>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" id="example">

                                <thead>
                                    <tr>
                                        <th width="20%" data-orderable="false">Name</th>
                                        <th width="20%" data-orderable="false">Organization</th>
                                        <th width="20%" data-orderable="false">Email</th>
                                        <th width="15%" data-orderable="false">Date/Time Added</th>
                                        <th width="10%" data-orderable="false">User Roles</th>
                                        <th width="15%" data-orderable="false">Operations</th>
                                    </tr>
                                </thead>

                                <tbody>                
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tbody>

                            </table>
                        </div>



                    </div>

                </div>
            </div>
        </div>
    </div>

    {!! Html::style('expand_theme/dataTables.bootstrap.css') !!}
    {!! Html::script('expand_theme/jquery.dataTables.min.js') !!}


    <script type="text/javascript">
      $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "pageLength": 50,
        "ajax": {
          "url":"