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

@section('content')
    <div class="card">
        <div class="card-body">
            <x-section-header action="list" :icon="$icon" :label="$label" :create-route="$create" />

            <div class="table-responsive">
                <table class="table" id="table-pensiun">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nomor</th>
                            <th>NIP</th>
                            <th>Karyawan</th>
                            <th>Tanggal Pensiun</th>
                            <th>Masa Bakti (Tahun)</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>
        $(document).ready(function() {
            window.LaravelDataTables = window.LaravelDataTables || {}
            window.LaravelDataTables["table-pensiun"] = $("#table-pensiun").DataTable({
                dom: 'fltpr',
                language: {
                    search: "",
                    searchPlaceholder: "Pencarian...",
                    lengthMenu: "_MENU_ Data"
                },
                ajax: {
                    url: "{{ $datatable }}",
                    type: "POST",
                    data: {
                        _token: token
                    }
                },
                processing: true,
                serverSide: true,
                deferRender: true,
                ordering: false,
                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: (data, type, row, meta) =>{
                            if(row.is_seen)
                                return  meta.row + meta.settings._iDisplayStart + 1

                                return '<b>'+(meta.row + meta.settings._iDisplayStart + 1)+'</b>';
                        }
                    },

                    {
                        data:'number',
                        class: "align-top",
                        render: (data, type, row) => {


                            return '<b>'+row.number+'</b>';
                        }
                    },
                    {
                        class: "align-top",
                        render: (data, type, row) => row.nip
                    },
                    {
                        class: "align-top",
                        render: (data, type, row) => row.name
                    },
                    {
                        class: "align-top",
                        render: (data, type, row) => row.date
                    },

                    {
                        class: "align-top",
                        render: (data, type, row) => row.period_service
                    },

                    {
                        class: "align-top",
                        render: (data, type, row) => row.status_badge
                    },

                    {
                        class: "align-top text-center",
                        orderable: false,
                        searchable: false,
                        width: "100px",
                        render: (data, type, row) => {
                            let url_show = "{{ route('hr.pensiun.show', -1) }}"
                            let url_edit = "{{ route('hr.pensiun.edit', -1) }}"
                            let url_destroy = "{{ route('hr.pensiun.destroy', -1) }}"
                            let url_pdf = "{{ route('hr.pensiun.pdf', -1) }}"

                            url_show = url_show.replace("-1", row.encrypted_id)
                            url_edit = url_edit.replace("-1", row.encrypted_id)
                            url_destroy = url_destroy.replace("-1", row.encrypted_id)
                            url_pdf = url_pdf.replace("-1", row.encrypted_id)


                            let html = `<a href="${url_show}" class="btn btn-primary btn-xs set-tooltip mb-1" title="Lihat">
                            <i class="mdi mdi-magnify"></i></a>
                            `;

                            if(row.status == 0){
                                html += `<a href="${url_edit}" class="btn btn-default btn-xs set-tooltip mb-1" title="Edit">
                            <i class="mdi mdi-pencil"></i></a>`
                            }

                            if(row.status != 2){
                                html += `<a target="_blank" href="${url_pdf}" class="btn btn-success btn-xs set-tooltip mb-1" title="PDF">
                            <i class="mdi mdi-file-pdf-box"></i></a>

                            <button type="button" class="btn btn-danger btn-xs set-tooltip mb-1" title="Batal" onclick="deleteConfirm('${url_destroy}', false, 'table-pensiun','Batalkan data ini')">
                                    <i class="mdi mdi-delete"></i>
                                </button>`
                            }

                            return html;
                        }
                    }
                ]
            })

            $($.fn.dataTable.tables(true)).css('width', '100%')


        })
    </script>
@endpush