✨ feat(noc): implementasi logika conditional checkbox status pembayaran

- Menambahkan fungsi `updateCheckboxStatus()` untuk evaluasi kondisi real-time.
- Checkbox otomatis disabled jika total_harus_bayar = nominal_bayar = total_pembukuan.
- Checkbox **status_kurang_bayar** aktif jika nominal/pembukuan < total_harus_bayar.
- Checkbox **status_lebih_bayar** aktif jika nominal/pembukuan > total_harus_bayar.
- Menambahkan event listeners pada field nominal_bayar dan total_pembukuan.
- Memastikan initial state dicek saat halaman dimuat.
- Menambahkan logging untuk debugging dan monitoring.
- Meningkatkan UX dengan mencegah input data tidak logis.

app/Http/Controllers/NocController.php

@@ -262,6 +262,7 @@
                     'id'                   => $persetujuanPenawaran->id,
                     'nomor_registrasi'     => $persetujuanPenawaran->permohonan->nomor_registrasi ?? $persetujuanPenawaran->penawaran->nomor_registrasi,
                     'nama_debitur'         => $persetujuanPenawaran->permohonan->debiture->name ?? $persetujuanPenawaran->penawaran->permohonan->debiture->name,
+                    'kode_cabang'          => $persetujuanPenawaran->permohonan->branch->code ?? $persetujuanPenawaran->penawaran->permohonan->branch->code,
                     'cabang'               => $persetujuanPenawaran->permohonan->branch->name ?? $persetujuanPenawaran->penawaran->permohonan->branch->name,
                     'tanggal_pembayaran'   => dateFormat(
                         $persetujuanPenawaran->noc->tanggal_pembayaran ?? $persetujuanPenawaran->noc?->created_at,

resources/views/noc/form.blade.php

@@ -394,6 +394,79 @@
             const nominalLebihBayarSection = document.getElementById('nominal_lebih_bayar_section');
             const buktiPengembalianSection = document.getElementById('bukti_pengembalian_section');
 
+            // Field untuk perbandingan nilai
+            const totalHarusBayar = document.getElementById('total_harus_bayar');
+            const nominalBayar = document.getElementById('nominal_bayar');
+            const totalPembukuan = document.getElementById('total_pembukuan');
+
+            /**
+             * Fungsi untuk mengatur enable/disable status checkbox berdasarkan perbandingan nilai
+             * Logika:
+             * - Jika semua nilai sama: kedua checkbox disabled
+             * - Jika nominal_bayar/total_pembukuan < total_harus_bayar: hanya status_kurang_bayar enabled
+             * - Jika nominal_bayar/total_pembukuan > total_harus_bayar: hanya status_lebih_bayar enabled
+             */
+            function updateCheckboxStatus() {
+                const totalHarus = parseFloat(totalHarusBayar.value) || 0;
+                const nominal = parseFloat(nominalBayar.value) || 0;
+                const pembukuan = parseFloat(totalPembukuan.value) || 0;
+
+                console.log('Updating checkbox status:', {
+                    totalHarus,
+                    nominal,
+                    pembukuan
+                });
+
+                // Reset checkbox states
+                statusKurangBayar.disabled = false;
+                statusLebihBayar.disabled = false;
+
+                // Jika semua nilai sama, disable kedua checkbox
+                if (totalHarus === nominal && nominal === pembukuan && totalHarus > 0) {
+                    statusKurangBayar.disabled = true;
+                    statusLebihBayar.disabled = true;
+                    statusKurangBayar.checked = false;
+                    statusLebihBayar.checked = false;
+                    nominalKurangBayarSection.style.display = 'none';
+                    nominalLebihBayarSection.style.display = 'none';
+                    buktiPengembalianSection.style.display = 'none';
+                    console.log('Semua nilai sama, kedua checkbox disabled');
+                }
+                // Jika nominal/pembukuan kurang dari total harus bayar
+                else if ((nominal > 0 && nominal < totalHarus) || (pembukuan > 0 && pembukuan < totalHarus)) {
+                    statusLebihBayar.disabled = true;
+                    statusLebihBayar.checked = false;
+                    statusKurangBayar.checked = true;
+                    nominalKurangBayarSection.style.display = '';
+                    nominalLebihBayarSection.style.display = 'none';
+                    buktiPengembalianSection.style.display = 'none';
+                    console.log('Kurang bayar, hanya status_kurang_bayar enabled');
+                }
+                // Jika nominal/pembukuan lebih dari total harus bayar
+                else if ((nominal > 0 && nominal > totalHarus) || (pembukuan > 0 && pembukuan > totalHarus)) {
+                    statusKurangBayar.disabled = true;
+                    statusKurangBayar.checked = false;
+                    statusLebihBayar.checked = true;
+                    nominalLebihBayarSection.style.display = '';
+                    nominalKurangBayarSection.style.display = 'none';
+                    console.log('Lebih bayar, hanya status_lebih_bayar enabled');
+                }
+            }
+
+            // Event listeners untuk update otomatis saat nilai berubah
+            if (nominalBayar) {
+                nominalBayar.addEventListener('input', updateCheckboxStatus);
+                nominalBayar.addEventListener('change', updateCheckboxStatus);
+            }
+
+            if (totalPembukuan) {
+                totalPembukuan.addEventListener('input', updateCheckboxStatus);
+                totalPembukuan.addEventListener('change', updateCheckboxStatus);
+            }
+
+            // Initial check saat halaman dimuat
+            updateCheckboxStatus();
+
             /**
              * Fungsi untuk reset field dan section visibility
              * @param {string} type - 'kurang' atau 'lebih'
@@ -426,6 +499,12 @@
                 }
 
                 statusKurangBayar.addEventListener('change', function() {
+                    // Cek apakah checkbox tidak disabled sebelum memproses
+                    if (this.disabled) {
+                        this.checked = false;
+                        return;
+                    }
+
                     if (this.checked) {
                         nominalKurangBayarSection.style.display = 'flex';
                         resetFields('kurang');
@@ -451,6 +530,12 @@
                 }
 
                 statusLebihBayar.addEventListener('change', function() {
+                    // Cek apakah checkbox tidak disabled sebelum memproses
+                    if (this.disabled) {
+                        this.checked = false;
+                        return;
+                    }
+
                     if (this.checked) {
                         nominalLebihBayarSection.style.display = 'flex';
                         buktiPengembalianSection.style.display = 'flex';

resources/views/noc/index.blade.php

@@ -5,9 +5,10 @@
 @endsection
 
 @section('content')
-    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
+    <div class="grid gap-5 mx-auto w-full lg:gap-7.5">
-        <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="noc-table" data-api-url="{{ route('noc.datatables') }}">
+        <div class="min-w-full border card border-agi-100 card-grid" data-datatable="false" data-datatable-page-size="10"
-            <div class="card-header bg-agi-50 py-5 flex-wrap">
+            data-datatable-state-save="false" id="noc-table" data-api-url="{{ route('noc.datatables') }}">
+            <div class="flex-wrap py-5 card-header bg-agi-50">
                 <h3 class="card-title">
                     Daftar NOC
                 </h3>
@@ -27,7 +28,8 @@
 
             <div class="card-body">
                 <div class="scrollable-x-auto">
-                    <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
+                    <table class="table text-sm font-medium text-gray-700 align-middle table-auto table-border"
+                        data-datatable-table="true">
                         <thead>
                             <tr>
                                 <th class="w-14">
@@ -91,13 +93,13 @@
                     </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">
+                    class="flex-col gap-3 justify-center font-medium text-gray-600 card-footer md:justify-between md:flex-row text-2sm">
-                    <div class="flex items-center gap-2">
+                    <div class="flex gap-2 items-center">
                         Show
-                        <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per
+                        <select class="w-16 select select-sm" data-datatable-size="true" name="perpage"> </select> per
                         page
                     </div>
-                    <div class="flex items-center gap-4">
+                    <div class="flex gap-4 items-center">
                         <span data-datatable-info="true"> </span>
                         <div class="pagination" data-datatable-pagination="true">
                         </div>
@@ -154,6 +156,9 @@
                     },
                     cabang: {
                         title: 'Cabang',
+                        return: (item, data) => {
+                            return data.cabang.code + ' - ' + data.cabang.nama;
+                        }
                     },
                     tanggal_setor: {
                         title: 'Tanggal Setor',

resources/views/noc/pembayaran.blade.php

@@ -140,6 +140,9 @@
                     },
                     cabang: {
                         title: 'Cabang',
+                        render: (item, data) => {
+                            return data.kode_cabang + ' - ' + data.cabang;
+                        }
                     },
                     tanggal_setor: {
                         title: 'Tanggal KSL',