@extends('layouts.app')
@section('title')
Roles
@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">Roles</h1>
<!-- END page-header -->

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

                </tbody>
                <tfoot>
                    <tr>
                        <th></th>
                        <th>Name</th>
                        <th>Created Date</th>
                        <th>Updated Date</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<!-- END panel -->


@endsection
@include('modals.rolesadd')
@include('modals.rolesedit')
@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>
$('#roles_table').DataTable({
        pageLength: 10,
        lengthMenu: [5, 10, 20, 50],
        order: [[ 2, "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="geteditrole(`+data+`)"><i class="fa fa-edit"></i></button>
                    <button type="button" class="btn btn-danger" onclick="deleteroles(`+data+`)"><i class="fa fa-trash"></i></button>
                    `;
                    return html;

                },searchable: false,orderable:false
            },
            {data:'name',name:'name',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('rolesdatatable')}}",
            type: 'post',
            data: function (d) {

            },
        },
    });


function deleteroles(id){
    Swal.fire({
        title: 'Delete Role?',
        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('deleterole')}}",
                data: {id:id},
                dataType: "json",
                success: function (response) {
                    if(response.status == 'success'){
                        $('#roles_table').DataTable().ajax.reload(null,false);
                        Swal.fire({
                            title: 'Delete Role',
                            text: 'Success',
                            icon: 'success',
                        });
                    }else{
                        Swal.fire({
                            title: 'Fail',
                            text: 'Can not delete role.',
                            icon: 'error',
                        });
                    }
                }
            });
        }
    });
}
</script>
@endpush