@extends('layouts.app')
@section('title', __('user.roles'))

@section('content')
    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="me-auto">
                <h4 class="page-title">@lang( 'user.manage_roles' )</h4>
                <div class="d-inline-block align-items-center">
                    <nav>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/"><i class="mdi mdi-home-outline"></i></a></li>
                            <li class="breadcrumb-item" aria-current="page">@lang( 'user.users' )</li>
                            <li class="breadcrumb-item active"
                                aria-current="page">@lang( 'user.roles' )</li>
                        </ol>
                    </nav>
                </div>
            </div>

        </div>
    </div>
    <section class="content">
        <div class="row">

            <div class="col-12">
                <div class="box">
                                                <!-- /.box-header -->

                    @component('components.widget', ['class' => 'box-body', 'title' => __( 'user.all_roles' )])
                                                @slot('tool')
                            <div class="box-tools">
                                <a class="btn btn-block btn-primary"
                                   href="{{action([\App\Http\Controllers\RoleController::class, 'create'])}}">
                                    <i class="fa fa-plus"></i> @lang( 'messages.add' )</a>
                            </div>
                        @endslot
                                                
                        @include('layouts.partials.datatable', [
                                'tableId' => 'user_roles',
                                'columns' => [
                                    ['title' => __('user.roles'), 'orderable' => true, 'searchable' => true],
                                    ['title' => __('messages.action'), 'orderable' => false, 'searchable' => false],
                                ],
                                'ajaxUrl' => '/roles', // Replace with actual route

                        ])
                                            @endcomponent
                    <!-- /.box-body -->


                </div>
                <!-- /.col -->
            </div>
        </div>
        <!-- /.row -->
    </section>

@stop
@section('javascript')
    @parent
<script type="text/javascript">
    //Roles table
        $(document).on('click', 'button.delete_role_button', function(){
            swal({
              title: LANG.sure,
              text: LANG.confirm_delete_role,
              icon: "warning",
              buttons: true,
              dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {
                    var href = $(this).data('href');
                    var data = $(this).serialize();

                    $.ajax({
                        method: "DELETE",
                        url: href,
                        dataType: "json",
                        data: data,
                        success: function(result){
                            if(result.success == true){
                                toastr.success(result.msg);
                                roles_table.ajax.reload();
                            } else {
                                toastr.error(result.msg);
                            }
                        }
                    });
                }
            });
        });
    });
</script>
@endsection