@extends('layouts.backend.index')
@section('title', $label)

@section('content')
<div class="card">
    <div class="card-body">
        <h4 class="card-title mb-1 text-info">
            <i class="{{ $icon }}"></i> &nbsp;{{ $label }}
        </h4>
        <p class="card-description">
            Fitur untuk mengelola data {{ Str::lower($label) }}.
        </p>

        @if (in_array('superadmin', $role))
            <div class="mb-3">
                <b>Entitas :</b> {{ $entity->name }}
            </div>
            <a href="{{ route('entity.index') }}" class="btn btn-default btn-sm">
                <i class="mdi mdi-arrow-left"></i> &nbsp;BACK
            </a>
        @endif

        <a href="{{ $url_create }}" class="btn btn-primary btn-sm">
            <i class="mdi mdi-plus-box"></i> &nbsp;CREATE
        </a>
        <hr class="mb-0" />

        <div class="table-responsive">
            <table class="table" id="table-user">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama</th>
                        <th>Kontak</th>
                        <th>Terakhir Login</th>
                        <th>Role</th>
                        <th>Status</th>
                        <th>#</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="{{ asset('vendor/datatables.net/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endpush

@push('scripts')
<script src="{{ asset('vendor/datatables.net/datatables.net/js/jquery.dataTables.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('vendor/datatables.net/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}" type="text/javascript"></script>

<script>
var render = "{{ $render }}"
var entity = "{{ $entity->id }}"
var roles = JSON.parse('{!! json_encode(Common::option('role')) !!}')

$(document).ready(function() {
    window.LaravelDataTables = window.LaravelDataTables || {}
    window.LaravelDataTables["table-user"] = $("#table-user").DataTable({
        dom: 'fltpr',
        language: {
            search: "",
            searchPlaceholder: "Pencarian...",
            lengthMenu: "_MENU_ Data"
        },
        ajax:
        {
            url: "{{ route('user.datatable') }}",
            type: "POST",
            data: {render: render, entity: entity, _token: token}
        },
        processing: true,
        serverSide: true,
        deferRender: true,
        ordering: true,
        order: [[ 1, 'asc' ]],
        aLengthMenu: [[10, 25, 50, 100],[10, 25, 50, 100]],
        drawCallback: function() {
            $(".set-tooltip").tooltip({
                container: "body"
            })
        },
        columns: [
            {
                data: null,
                class: "align-top",
                orderable: false,
                searchable: false,
                render: function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }  
            },
            {
                data: "name",
                class: "align-top",
                render: function(data, type, row) {
                    var html = htmlEntities(row.name) + 
                        "<br><small>@" + htmlEntities(row.username) + "</small>"

                    return html
                }
            },
            {
                class: "align-top",
                orderable: false,
                render: function(data, type, row) {
                    var html = "<small>No. HP</small><br>" + phoneFormat(row.phone) +
                        "<div class='mt-3'>" +
                            "<small>Email</small><br>" + htmlEntities(row.email) +
                        "</div>"

                    return html
                }
            },
            {
                class: "align-top",
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    return (row.lastlogin == null) ? '-' : dateFormat(row.lastlogin, "{dd} {mmmm} {yyyy}, {hh}:{ii} WIB")
                }
            },
            {
                data: "role",
                class: "align-top",
                render: function(data, type, row) {
                    var role = JSON.parse(row.role)
                    var html = ""

                    role.forEach(function(r) {
                        html += "<div class='mb-1'><span class='badge badge-secondary'>" + roles[r] + "</span></div>"
                    })

                    return html
                }
            },
            {
                data: "status",
                class: "align-top",
                render: function(data, type, row) {
                    return (row.status == 1) ? "<span class='badge badge-success'>AKTIF</span>" : "<span class='badge badge-danger'>TIDAK AKTIF</span>"
                }
            },
            {
                class: "align-top",
                width: "80px",
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    var html = "<a href='{{ url('user') }}/" + row.id + "/edit' class='btn btn-default btn-xs set-tooltip mr-1' title='Ubah'>" +
                            "<i class='mdi mdi-pencil'></i>" +
                        "</a>" +
                        "<button type='button' class='btn btn-danger btn-xs set-tooltip' title='Hapus' onclick='deleteConfirm(\"{{ url('user') }}/" + row.id + "\", false, \"table-user\")'>" +
                            "<i class='mdi mdi-trash-can'></i>" +
                        "</button>"
                    
                    return html
                }
            }
        ]
    })

    $($.fn.dataTable.tables(true)).css('width', '100%')
})
</script>
@endpush