@extends('master')

@section('title')
    <title>User List</title>
@endsection

@section('content')

    @if (session('status'))
        <div class="alert alert-success">
            {{ session('status') }}
        </div>
    @endif
    <!-- Page Heading -->
    <h1 class="h3 mb-2 text-gray-800">Users</h1>
    <br>
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <div class="row">
                <div class="col-lg-6">
                    <span class="font-weight-bold text-primary">User Listing</span>
                </div>
                @can('create_user')
                    <div class="col-lg-6">
                        <a href="{{ url('/admin/users/create') }}" class="btn btn-sm btn-primary float-right">Add New</a>
                    </div>
                @endcan
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">

                <form method="POST" id="search-form" role="form">
                    <div class="form-row align-items-center">
                        <div class="col-auto">
                            <label class="form-check-label mr-sm-2" for="name">Name </label>
                            <input type="text" class="form-control mb-2" id="name" name="name" placeholder="Search Name">
                        </div>
                        <div class="col-auto">
                            <label class="form-check-label mr-sm-2" for="email">Email </label>
                            <input type="text" class="form-control mb-2" id="email" name="email" placeholder="Search Email">
                        </div>
                        <div class="col-auto">
                            <button type="submit" class="btn btn-primary mt-4 mb-2">Search</button>
                        </div>
                    </div>
                </form>
                <br>
                <table class="table table-bordered" id="user_list" width="100%" cellspacing="0">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                    </tfoot>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script>
        let userTable = $('#user_list').DataTable({
            processing: true,
            serverSide: true,
            searching: false,
            ajax: {
                url: '{{ url('/admin/users/index_data') }}',
                type: "POST",
                data: function (d) {
                    //form request data
                    d.name = $('input[name=name]').val();
                    d.email = $('input[name=email]').val();
                }
            },
            columns: [
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'status', name: 'status',
                    render: function ( data, type, row ) {
                        //render function to customize value styling
                        let statusText = '<span style="color:green">Active</span>';
                        if(data == 0){
                            statusText = '<span style="color:red">Inactive</span>';
                        }
                        return statusText;
                    }},
                {data: 'id', name: 'action_id', orderable: false, searchable: false,
                    render: function ( data, type, row ) {
                        //render function to customize action button
                        let userViewUrl = "{{ url('/admin/users') }}/" + data;
                        let userUpdateUrl = "{{ url('/admin/users') }}/" + data + "/edit";
                        let btnTxt = '<a href="'+userViewUrl+'" class="btn btn-sm btn-primary">View </a>';
                        @can('update_user')
                            btnTxt += ' <a href="'+userUpdateUrl+'" class="btn btn-sm btn-primary">Edit </a>';
                        @endcan
                        return btnTxt;
                    }},
            ]
        });

        //trigger ajax call and draw
        $('#search-form').on('submit', function(e) {
            userTable.draw();
            e.preventDefault();
        });
    </script>
@endsection