@extends('layouts.dashboard_template')

@section('content')
    <section class="content-header block-breadcrumb">
        <h1>
            {{ $page_title ?? 'Page Title' }}
            <small>{{ $page_description ?? '' }}</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
            <li class="active">{{ $page_title }}</li>
        </ol>
    </section>
    <section class="content container-fluid">

        @include('partials.flash_message')

        <div class="box box-primary">
            <div class="box-header with-border">
                @can('access.setting.role.create')
                    <a href="{{ route('setting.role.create') }}">
                        <button type="button" class="btn btn-primary btn-sm" title="Tambah Data"><i class="fa fa-plus"></i>
                            Tambah</button>
                    </a>
                @endcan
            </div>
            <div class="box-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered" id="user-table">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Jumlah User</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection
@include('partials.asset_datatables')
@push('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            var data = $('#user-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{!! route('setting.role.getdata') !!}",
                    type: "POST"
                },
                columns: [{
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'users_count',
                        name: 'users_count',
                        class: 'text-center',
                        render: function(data, type, row) {
                            var count = parseInt(data) || 0;
                            var url = '{{ route('setting.role.users', ['id' => 'REPLACE']) }}'.replace('REPLACE', row.id);
                            if (count > 0) {
                                return '<a href="' + url + '" class="btn btn-xs btn-primary" title="Lihat User">' + count + ' User</a>';
                            }
                            return count + ' User';
                        }
                    },
                    {
                        data: 'aksi',
                        name: 'aksi',
                        class: 'text-center',
                        searchable: false,
                        orderable: false
                    }
                ]
            });
        });
    </script>
    @include('forms.datatable-vertical')
    @include('forms.delete-modal')
@endpush