@extends('layouts.main')

 @section('breadcrumbs')
    {{ Breadcrumbs::render(request()->route()->getName()) }}
 @endsection

 @section('content')
     <div class="grid">
         <div class="card border border-agi-100 card-grid min-w-full" data-datatable="false" data-datatable-page-size="10"
             data-datatable-state-save="false" id="laporan-penilai-table"
             data-api-url="{{ route('laporan-monitoring.datatables', ['id' => $id]) }}">
             <div class="card-header bg-agi-50 py-5 flex-wrap">
                 <h3 class="card-title">
                     Daftar Penilaian {{ $nama_penilai ?? '' }}
                 </h3>
                 <div class="flex flex-wrap gap-2 lg:gap-5">

                     <div class="flex flex-wrap gap-2.5">
                         <div class="h-[24px] border border-r-gray-200"></div>

                         <a class="btn btn-sm btn-light" href=""> Export to Excel </a>

                         <a class="btn btn-sm btn-info" href="{{ route('laporan-monitoring.index') }}">
                            <i class="ki-duotone ki-arrow-left fs-2"></i>
                            Back</a>

                     </div>
                 </div>
             </div>

             <div class="card-body">
                 <div class="scrollable-x-auto">
                     <table class="table table-auto align-middle text-gray-700 font-medium text-sm mb-4"
                         data-datatable-table="true">
                         <thead>
                             <tr>
                                 <th class="min-w-[100px]">Nama Debitur</th>
                                 <th class="min-w-[100px]">Tujuan Penilaian</th>
                                 <th class="min-w-[100px]">Status Bayar</th>
                                 <th class="min-w-[100px]">Jenis Asset</th>
                                 <th class="min-w-[100px]">Penugasan</th>
                                 <th class="min-w-[100px]">Jenis Report</th>
                                 <th class="min-w-[100px]">Tgl Register</th>
                                 <th class="min-w-[100px]">Tgl Assign</th>
                                 <th class="min-w-[100px]">Tgl Kunjungan</th>
                                 <th class="min-w-[100px]">Tgl Reported</th>
                                 <th class="min-w-[100px]">Progress</th>
                                 <th class="min-w-[100px]">SLA Laporan</th>
                                 <th class="min-w-[100px]">SLA Paparan</th>
                                 <th class="min-w-[100px]">Approve</th>
                                 <th class="min-w-[50px] text-center">Keterangan</th>
                                 <th class="min-w-[50px] text-center">Action</th>
                             </tr>
                         </thead>
                         <tbody>

                         </tbody>
                     </table>
                 </div>
                 <div
                     class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
                     <div class="flex items-center gap-2">
                         Show
                         <select class="select select-sm w-16" data-datatable-size="true" name="perpage"></select> per page
                     </div>
                     <div class="flex items-center gap-4">
                         <span data-datatable-info="true"></span>
                         <div class="pagination" data-datatable-pagination="true"></div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 @endsection

 @push('scripts')
     <script type="module">
         const element = document.querySelector('#laporan-penilai-table');
         const apiUrl = element.getAttribute('data-api-url');

         const dataTableOptions = {
             apiEndpoint: apiUrl,
             pageSize: 5,
             order: [{
                 column: 'nomor_registrasi',
                 dir: 'asc'
             }],
             columns: {
                 nama_debitur: {
                     title: 'Nama Debitur',
                     render: (item, data) => {
                         return `${data.permohonan.debiture?.name}`
                     },
                 },
                 tujuan_penilaian: {
                     title: 'Tujuan Penilaian',
                     render: (item, data) => {
                         return `${data.permohonan.tujuan_penilaian?.name || ''}`;
                     },
                 },
                 status_bayar: {
                     title: 'Status Bayar',
                     render: (item, data) => {
                         const status = data.permohonan.status_bayar.replace(
                             /_/g,
                             ' ');
                         const statusClass = data.permohonan.status_bayar ===
                             'belum_bayar' ? 'text-red-600' :
                             'text-green-600';
                         return `<span class="badge badge-sm badge-default font-bold ${statusClass} uppercase">
                            ${status}
                            </span>`;
                     },
                 },
                 jenis_asset: {
                     title: 'Jenis Asset',
                     render: (item, data) =>
                         `${data.permohonan.debiture?.documents?.map(d => d.jenis_jaminan.name) || ''}`,
                 },
                 penugasan: {
                     title: 'Penugasan',
                     render: (item, data) => {

                         const roles = data.user_penilai?.map(d => d.role).join(
                             '<br>') || '-';
                         return roles;
                     },
                 },
                 jenis_report: {
                     title: 'Jenis Report',
                     render: (item, data) => {
                         return data.permohonan.penilai?.type_penilai || '-';
                     },
                 },
                 register: {
                     title: 'Register',
                     render: (item, data) =>
                         `${window.formatTanggalIndonesia(data.permohonan.created_at) || ''}`,

                 },
                 assign: {
                     title: 'Assign',
                     render: (item, data) =>
                         `${window.formatTanggalIndonesia(data.created_at)}`,
                 },

                 tanggal_kunjungan: {
                     title: 'Tgl Kunjungan',
                     render: (item, data) =>
                         `${window.formatTanggalIndonesia(data.waktu_penilaian) || ''}`,
                 },
                tanggal_reported: {
                     title: 'Tgl Kunjungan',
                     render: (item, data) =>
                         `${window.formatTanggalIndonesia(data.waktu_penilaian) || ''}`,
                 },
                 progress: {
                     title: 'Progress',
                     render: (item, data) => {
                         return `<span class="badge badge-sm badge-default uppercase flex justify-center ">${data.permohonan.status}</span>`;
                     }
                 },
                 // tanggal kunjungan h+2 jika plafon di
                 due_date: {
                     title: 'Due Date',
                     render: (item, data) => {
                         if (!data.due_date_sla) {
                             return ``;
                         }
                         return `${window.formatTanggalIndonesia(data.due_date_sla)}`;
                     }
                 },
                 due_date: {
                     title: 'Due Date SLA',
                     render: (item, data) => {
                         if (!data.due_date_sla) {
                             return `-`;
                         }
                         return `${window.formatTanggalIndonesia(data.due_date_sla)}`;
                     },
                 },

                 paparan: {
                     title: 'Paparan',
                     render: (item, data) => {
                         if (!data.due_date_sla) {
                             return `-`;
                         }
                         return `${window.formatTanggalIndonesia(data.paparan)}`;
                     }
                 },
                 approve: {
                     title: 'Approve',
                     render: (item, data) => {
                         // Gabungkan nama dengan <br> untuk pemisah baris baru
                         let dataHtml = `
            ${data.permohonan?.approve_so?.name || ''}
            <br>
            ${data.permohonan?.approve_eo?.name || ''}
            <br>
            ${data.permohonan?.approve_dd?.name || ''}
        `;
                         return dataHtml;
                     },
                 },


                 keterangan: {
                     title: 'Keterangan',
                     render: (item, data) => `${data.keterangan || ''}`,
                 }
             },
         };

       let dataTable = new KTDataTable(element, dataTableOptions);

     </script>
 @endpush