@extends ('backend.layouts.app')

@section('title') {{ $module_action }} {{ $module_title }} @endsection

@section('breadcrumbs')
<x-backend-breadcrumbs>
    <x-backend-breadcrumb-item type="active" icon='{{ $module_icon }}'>{{ $module_title }}</x-backend-breadcrumb-item>
</x-backend-breadcrumbs>
@endsection

@section('content')
<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col">
                <h4 class="card-title mb-0">
                    <i class="{{ $module_icon }}"></i> {{ $module_title }} <small class="text-muted">{{ $module_action }}</small>
                </h4>
                <div class="small text-muted">
                    {{ __('labels.backend.users.index.sub-title') }}
                </div>
            </div>

            <div class="col-6 col-sm-4">
                <div class="float-right">
                    <x-buttons.create route='{{ route("backend.$module_name.create") }}' title="{{__('Create')}} {{ ucwords(Str::singular($module_name)) }}"/>

                    <div class="btn-group" role="group" aria-label="Toolbar button groups">
                        <div class="btn-group" role="group">
                            <button id="btnGroupToolbar" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fas fa-cog"></i>
                            </button>
                            <div class="dropdown-menu" aria-labelledby="btnGroupToolbar">
                                <a class="dropdown-item" href="{{ route("backend.$module_name.trashed") }}">
                                    <i class="fas fa-eye-slash"></i> View trash
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/.col-->
        </div>
        <!--/.row-->

        <div class="row mt-4">
            <div class="col">
                <div class="w-full">
                    <table id="datatable" class="w-full table table-sm tabel-hovered table-striped table-bordered">
                        <thead>
                            <tr class="uppercase">
                                <th style="width: 2%;">#</th>
                                <th class="text-left" style="width: 20%;">{{ __('User') }}</th>
                              
                                <th style="width: 5%;">{{ __('labels.backend.users.fields.status') }}</th>
                                <th style="width: 15%;">{{ __('labels.backend.users.fields.roles') }}</th>
                                <th style="width: 5%;" class="text-center">{{ __('labels.backend.action') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
   
</div>
@endsection

@push ('after-styles')
<link rel="stylesheet" href="{{ asset('vendor/datatable/datatables.min.css') }}">
<style type="text/css">
 .table thead th {
    vertical-align: middle;
    text-align: center;
    font-size: 0.8rem;
    padding: 0.3rem !important;
    border-bottom: 2px solid;
    border-bottom-color: #d8dbe054 !important;
}

table.dataTable th {
      font-size: 0.8rem;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    padding: 0.5rem !important;
     border: 1px solid #d8dbe054 !important;
}
table.dataTable td {
    text-align: center;
      font-size: 0.8rem;
      vertical-align: middle;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    padding: 0.4rem !important;
    border: 1px solid #d8dbe054 !important;
}
div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: 320px !important;
}
div.dataTables_wrapper div.dataTables_length select {
    width: 70px;
    display: inline-block;
}
</style>
@endpush

@push ('after-scripts')
<!-- DataTables Core and Extensions -->
<script type="text/javascript" src="{{ asset('vendor/datatable/datatables.min.js') }}"></script>

<script type="text/javascript">

    $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        autoWidth: true,
        responsive: true,
        "oLanguage": {
                "sSearch": "<i class='fa fa-search fa-fw'></i> Pencarian : ",
                "sLengthMenu": "_MENU_ &nbsp;&nbsp;Data Per Halaman ",
                "sInfo": "Menampilkan _START_ s/d _END_ dari <b>_TOTAL_ data</b>",
                "sInfoFiltered": "(difilter dari _MAX_ total data)",
                "sZeroRecords": "Pencarian tidak ditemukan",
                "sEmptyTable": "Data kosong",
                "sLoadingRecords": "Harap Tunggu...",
                "oPaginate": {
                    "sPrevious": "Prev",
                    "sNext": "Next"
                }
            },
        "aaSorting": [[ 0, "desc" ]],
            "columnDefs": [
                {
                    "targets": 'no-sort',
                    "orderable": false,
                }
            ],
            "sPaginationType": "simple_numbers",
        ajax: '{{ route("backend.$module_name.index_data") }}',
        columns: [
            {"data": 'id',"sortable": false,
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
            {data: 'name', name: 'name'},
            {data: 'status', name: 'status'},
            {data: 'user_roles', name: 'user_roles'},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ]
    });

</script>







@endpush