@extends('layouts.app')
@section('title')
Manage User
@endsection
@push('styles')
<link href="../assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="../assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />

@endpush

@section('content')
<!-- BEGIN page-header -->
<h1 class="page-header">Users</h1>
<!-- END page-header -->

<!-- BEGIN panel -->
<div class="panel panel-inverse">
    <div class="panel-body">
        <a href="#modal-useradd" class="btn btn-success  mb-3" data-bs-toggle="modal">Add User</a>
        <div class="table-responsive">
            <table id="users_table" class="table table-striped table-bordered align-middle nowrap w-100">
                <thead>
                    <tr>
                        <th></th>
                        <th>status</th>
                        <th>Username</th>
                        <th>Name - Surname</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Company</th>
                        <th>Created Date</th>
                        <th>Updated Date</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
                <tfoot>
                    <tr>
                        <th></th>
                        <th>status</th>
                        <th>Username</th>
                        <th>Name - Surname</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Company</th>
                        <th>Created Date</th>
                        <th>Updated Date</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<!-- END panel -->


@endsection
@include('modals.usersadd')
@include('modals.useredit')
@push('scripts')
<script src="../assets/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>

<script>
$('#users_table').DataTable({
        pageLength: 10,
        lengthMenu: [5, 10, 20, 50],
        order: [[ 7, "asc" ]],
        search: {
            return: true,
        },
        columns: [
            {data:'id',name:'id',className:'text-center',
                render: function ( data, type, row, meta ) {
                    var html = `
                    <button type="button" class="btn btn-primary" onclick="getedituser(`+data+`)"><i class="fa fa-edit"></i></button>
                    <button type="button" class="btn btn-danger" onclick="deleteuser(`+data+`)"><i class="fa fa-trash"></i></button>
                    `;
                    return html;

                },searchable: false,orderable:false
            },
            {data:'status',name:'status',
                render: function ( data, type, row, meta ) {
                    var html = '';
                    if(data == 1){
                        html = '<button class="btn btn-xs btn-green" onclick="changeuserstatus('+row.id+','+row.status+')">Active</button>';
                    }else{
                        html = '<button class="btn btn-xs btn-default text-black" onclick="changeuserstatus('+row.id+','+row.status+')">Inactive</button>';
                    }
                    return html;

                },searchable: false,orderable:false
            },
            {data:'username',name:'username',searchable: true,orderable:true},
            {data:null,name:'namesurname',
                render: function ( data, type, row, meta ) {

                    return row.name+" "+row.surname;

                },searchable: true,orderable:true
            },
            {data:'email',name:'email',searchable: true,orderable:true},
            {data:'rolename',name:'roles.name',
                render: function ( data, type, row, meta ) {
                    var html = data;
                    if(data == null){
                        html = 'No Role';
                    }
                    return '<span class="badge bg-default text-black">'+html+'</span>';

                },searchable: true,orderable:true
            },
            {data:'company',name:'company',searchable: true,orderable:true},
            {data:'created_at',name:'created_at',searchable: false,orderable:true},
            {data:'updated_at',name:'updated_at',searchable: false,orderable:true},

        ],
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{route('usersdatatable')}}",
            type: 'post',
            data: function (d) {

            },
        },
});

function changeuserstatus(id,status){
    $.ajax({
        type: "post",
        url: "{{route('changeuserstatus')}}",
        data: {id:id,status:status},
        dataType: "json",
        success: function (response) {
            if(response.status == 'success'){
                $('#users_table').DataTable().ajax.reload(null,false);

            }else{
                Swal.fire({
                    title: 'Change User Status',
                    text: 'Fail',
                    icon: 'error',
                });
            }
        }
    });
}

function deleteuser(id){
    Swal.fire({
        title: 'Delete User?',
        text: 'Are you sure? Can not redo this action!',
        icon: 'warning',
        showCancelButton: true,
        reverseButtons: true,
    }).then((willDelete) => {
        if (willDelete.isConfirmed) {
            $.ajax({
                type: "post",
                url: "{{route('userdelete')}}",
                data: {id:id},
                dataType: "json",
                success: function (response) {
                    if(response.status == 'success'){
                        $('#users_table').DataTable().ajax.reload(null,false);
                        Swal.fire({
                            title: 'Delete User',
                            text: 'Success',
                            icon: 'success',
                        });
                    }else{
                        Swal.fire({
                            title: 'Fail',
                            text: 'Can not delete user.',
                            icon: 'error',
                        });
                    }
                }
            });
        }
    });
}
</script>
@endpush