@extends('adminlte::page')

@section('title', __('global.Roles'). ' '. __('global.List'))

@section('content_header')
   <h1> {{ __('global.Roles'). ' '. __('global.List') }}</h1>
@endsection

@section('content')

    <div class="container-fluid">
        <x-card>
            <x-slot name="tools">
                <a href="{{ route('roles.create') }}" class="btn btn-primary btn-sm">@lang('global.Add New')</a>
            </x-slot>
            
            <x-table id="roles">
                <thead>
                    <tr>
                        <th style="width: 10%;">@lang('global.Id')</th>
                        <th style="width: 80%;">@lang('global.Role')</th>
                        <th style="width: 10%;">@lang('global.Action')</th>
                    </tr>
                </thead>
            </x-table>
        </x-card>
    </div>

@endsection

@section('adminlte_js')
    <script>
        $(function () {
            window.dataTable = $('#roles').DataTable({
                serverSide: true,
                processing: true,
                ajax: "{{ route('roles.index') }}",
                order: [[0, "desc"]],
                columns: [
                    {data: "id"},
                    {data: "name"},
                    {data: "action"},
                ],
                columnDefs: [
                    {targets: -1, orderable: false, className: "text-center"}
                ]
            });
        });
    </script>
@endsection