@extends('../layout/home-layout')

@section('title','Users')

@section('home-content')


<div class="grid grid-cols-12 gap-2 mt-2">
    <div class="intro-y col-span-12 inline-grid flex-wrap sm:flex-no-wrap items-center mt-1">

        <a href="{{route('user_add_edit_view')}}" class="add-rate-link  mr-2 ml-auto"> <i data-feather="plus-circle" class="w-5 h-5 mr-1"> </i> Add User</a>

        <div class="hidden md:block mx-auto text-gray-600"></div>

    </div>
    <!-- BEGIN: Data List -->

    <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">
        <table class="table table-report mt-2" id="dttbl">
            <thead>
                <tr>
                    <th class="whitespace-no-wrap">#</th>
                    <th class="whitespace-no-wrap">User name</th>
                    <th class="whitespace-no-wrap">User group</th>
                    <th class="whitespace-no-wrap">Gender</th>
                    <th class="whitespace-no-wrap">Branch</th>
                    <th class=" text-center whitespace-no-wrap">Status</th>
                    <th class="text-center whitespace-no-wrap"> Action</th>
                </tr>
            </thead>

            <tbody id="data_table">

            </tbody id="body">

        </table>

    </div>

</div>


@endsection


@section('script-area')

<script>
    $(document).ready(function() {

        loadTable();

    });


    function loadTable() {

        $('#dttbl').DataTable({

            processing: true,
            serverSide: false,
            bDestroy: true,
            ajax: {
                'url': "{{route('get_all_users')}}",
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'user_group_name',
                    name: 'user_group_name'
                },
                {
                    data: 'gender',
                    name: 'gender'
                },
                {
                    data: 'b_name',
                    name: 'b_name'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'edit-btn',
                    name: 'edit-btn'
                },

            ]

        });

    }

    function changeStatus(id, status) {

        var url = "{{route('change_user_status')}}";
        var newStatus = 1;

        if (status == 1) {

            newStatus = 0;

        }

        var param = {
            user_id: id,
            status: newStatus
        };

        preloader();

        $.ajax({
            url: url,
            data: param,
            success: function(data) {

                var result = data;

                if (result.error_status == 0) {

                    removeLoader();
                    notify(0, result.msg);
                    loadTable();

                } else {
                    removeLoader();
                    console.log(result);
                    notify(1, result.msg);

                }

            },
            error: function(err) {
                removeLoader();
                var error = err;
                notify(1, error.msg);

            }
        });

    }
</script>

@endsection