@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Result Absen</h5>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper row">
                                    <div class="col d-flex align-items-center gap-2 flex-wrap">
                                        {{-- Back Button --}}
                                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                                            <i class="fas fa-circle-left me-1"></i>
                                            <span class="font-weight-bold">Kembali</span>
                                        </button>

                                        @if (in_array('featku', $users_rules))
                                            {{-- Tombol Pilih Semua --}}
                                            <button type="button" id="btn-select-all" class="btn btn-outline-primary mb-0">
                                                <i class="fas fa-check-double me-1"></i>
                                                <span class="font-weight-bold">Pilih Semua</span>
                                            </button>

                                            {{-- Tombol Konfirmasi Bayar - HANYA untuk featku --}}
                                            <button id="btn-konfirmasi-bayar" class="btn btn-success mb-0 d-none"
                                                style="transition:all .3s;">
                                                <i class="fas fa-check-circle me-1"></i>
                                                <span class="font-weight-bold">Konfirmasi Bayar (<span
                                                        id="jumlah-terpilih">0</span>)</span>
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if (in_array('featku', $users_rules))
                            <div class="row px-4 py-2 sticky-top"
                                style="z-index: 100; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px); top: 0;">
                                <div class="col-12">
                                    <div class="d-flex justify-content-between align-items-center text-white mb-0 p-3"
                                        style="background-color: #008b8e !important; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-info-circle me-2" style="font-size: 1.2rem;"></i>
                                            <span class="font-weight-bold text-uppercase" id="banner-status-text"
                                                style="letter-spacing: 0.5px;">
                                                @if (isset($allPaid) && $allPaid)
                                                    Informasi: Tidak ada tagihan (Lunas)
                                                @else
                                                    Total Tagihan Belum Dibayar
                                                @endif
                                            </span>
                                        </div>
                                        <div class="text-end">
                                            <span class="h4 mb-0 text-white font-weight-bolder" id="banner-total-nominal"
                                                data-value="{{ $unpaidGrandTotal ?? 0 }}">
                                                @if (isset($allPaid) && $allPaid)
                                                    Rp0
                                                @else
                                                    Rp{{ number_format($unpaidGrandTotal ?? 0, 0, ',', '.') }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu ?? 'result' }}">
                                    <thead class="thead-light" style="background-color: #008b8e4f;">
                                        <tr>
                                            <th>No</th>
                                            @if (in_array('featku', $users_rules) || in_array('admins', $users_rules))
                                                <th class="text-center">Status Bayar</th>
                                            @endif
                                            <th>Periode</th>
                                            <th>ID</th>
                                            <th>Bulan</th>
                                            <th>Tahun</th>
                                            <th>Nama</th>
                                            <th>Email</th>
                                            <th>No Telp</th>
                                            <th>Bank</th>
                                            <th>Kode Unik</th>
                                            <th>Kode BI</th>
                                            <th>A/N Bank</th>
                                            <th>No Rek.</th>
                                            <th>Absen WFO</th>
                                            <th>Absen</th>
                                            <th>Nominal</th>
                                            <th>Total Nominal</th>
                                            <th style="display:none;">Tgl Approve Atasan 1</th>
                                            <th style="display:none;">Tgl Approve Atasan 2</th>
                                            <th style="display:none;">Atasan 1 </th>
                                            <th style="display:none;">Atasan 2</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($table_result as $index => $item)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                @if (in_array('featku', $users_rules) || in_array('admins', $users_rules))
                                                    <td class="text-center align-middle"
                                                        data-order="{{ $item->status_pembayaran }}">
                                                        <div class="d-flex flex-column align-items-center gap-1">
                                                            @if ($item->status_pembayaran === 'Sudah Dibayar')
                                                                {{-- Sudah bayar: badge saja (semua role) --}}
                                                                <span class="badge bg-success">Sudah Dibayar</span>
                                                                @if ($item->tgl_bayar)
                                                                    <small class="text-muted" style="font-size:0.7rem;">
                                                                        {{ \Carbon\Carbon::parse($item->tgl_bayar)->format('d/m/Y H:i') }}
                                                                    </small>
                                                                @endif
                                                            @else
                                                                @if (in_array('featku', $users_rules))
                                                                    {{-- Belum bayar + role featku: bisa dicentang --}}
                                                                    <div class="form-check d-flex justify-content-center">
                                                                        <input class="form-check-input pilih-bayar"
                                                                            type="checkbox" data-id="{{ $item->id }}"
                                                                            data-nama="{{ strtoupper($item->nama) }}"
                                                                            data-nominal="{{ $item->total_nominal }}"
                                                                            style="width:1.3rem; height:1.3rem; cursor:pointer;">
                                                                    </div>
                                                                @endif
                                                                {{-- Badge Belum Dibayar: tampil untuk semua role --}}
                                                                <span class="badge bg-secondary">Belum Dibayar</span>
                                                            @endif
                                                        </div>
                                                    </td>
                                                @endif
                                                <td>{{ $item->id_header }}</td>
                                                <td>{{ $item->id }}</td>
                                                <td>{{ $item->bulan }}</td>
                                                <td>{{ $item->tahun }}</td>
                                                <td>{{ strtoupper($item->nama) }}</td>
                                                <td>{{ $item->email }}</td>
                                                <td>{{ $item->no_telp }}</td>
                                                <td>{{ $item->nama_pt }}</td>
                                                <td>{{ $item->kode_unik }}</td>
                                                <td>{{ $item->kode_bi }}</td>
                                                <td>{{ strtoupper($item->rekening_nama) }}</td>
                                                <td>{{ $item->rekening_no }}</td>
                                                <td style="text-align:right;">{{ $item->jumlah_absen }}</td>
                                                <td style="text-align:right;">{{ $item->absen_finger }}</td>
                                                <td style="text-align:right;">
                                                    Rp{{ number_format($item->nominal, 0, ',', '.') }}</td>
                                                <td style="text-align:right;">
                                                    Rp{{ number_format($item->total_nominal, 0, ',', '.') }}</td>
                                                <td style="display:none;">{{ $item->tanggal_approve_atasan_1 ?? '' }}</td>
                                                <td style="display:none;">{{ $item->tanggal_approve_atasan_2 ?? '' }}</td>
                                                <td style="display:none;">{{ $item->nama_atasan1 ?? '' }}</td>
                                                <td style="display:none;">{{ $item->nama_atasan2 ?? '' }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th></th> <!-- 0: No -->
                                            @if (in_array('featku', $users_rules) || in_array('admins', $users_rules))
                                                <th></th> <!-- Status Bayar -->
                                            @endif
                                            <th></th> <!-- 1: Periode -->
                                            <th></th> <!-- 2 -->
                                            <th></th> <!-- 3 -->
                                            <th></th> <!-- 4 -->
                                            <th></th> <!-- 5 -->
                                            <th></th> <!-- 6 -->
                                            <th></th> <!-- 7 -->
                                            <th></th> <!-- 8 -->
                                            <th></th> <!-- 9 -->
                                            <th></th> <!-- 10 -->
                                            <th></th> <!-- 11 -->
                                            <th></th> <!-- 12 -->
                                            <th></th> <!-- 13 -->
                                            <th></th> <!-- 14 -->
                                            <th class="text-end" id="tfoot-total-label">Grand Total</th>
                                            <!-- 15: label "Total" -->
                                            <th class="text-end" id="tfoot-total-nominal">Rp0</th> <!-- 16: angka total -->
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                @if ($table_result->isNotEmpty())
                                @else
                                    <div class="nav-wrapper"><code>Data not found!</code></div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Tambahkan script DataTables jika belum --}}
    @push('scripts')
        <script>
            $(document).ready(function() {
                $('#list_{{ $dmenu ?? 'result' }}').DataTable();
            });
        </script>
    @endpush

    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    {{-- <script src="https://cdn.jsdelivr.net/npm/exceljs/dist/exceljs.min.js"></script>
    <script src="https://unpkg.com/papaparse@5.4.1/papaparse.min.js"></script> --}}
    <script>
        // Pre-load logo untuk PDF header
        let logoBase64Global = '';
        const loadLogo = () => {
            return new Promise((resolve) => {
                const img = new Image();
                img.crossOrigin = 'Anonymous';
                img.onload = function() {
                    try {
                        const canvas = document.createElement('canvas');
                        canvas.width = this.naturalWidth || this.width;
                        canvas.height = this.naturalHeight || this.height;
                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(this, 0, 0);
                        const base64 = canvas.toDataURL('image/png');
                        logoBase64Global = base64;
                        console.log('Logo loaded successfully');
                        resolve(base64);
                    } catch (e) {
                        console.error('Error converting logo:', e);
                        resolve('');
                    }
                };
                img.onerror = () => {
                    console.error('Error loading logo from:', img.src);
                    resolve('');
                };
                // Coba load dari storage terlebih dahulu
                img.src = '{{ asset('storage/logo_text.png') }}';
            });
        };

        // Load logo saat halaman dimuat
        $(document).ready(function() {
            loadLogo();
        });

        let columnAbjad = '';
        $(document).ready(function() {
            let table = $('#list_{{ $dmenu }}').DataTable();
            let indexStatus = 0;
            let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
            let columnNames = '';
            let filter = '{{ @$table_class->alias }}'.toLowerCase();
            for (let index = 0; index < numColumns; index++) {
                columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
                filtercolom = columnNames.toLowerCase();
                if (columnNames == 'Status' || columnNames == 'Status Progress') {
                    indexStatus = index;
                }
                if (filtercolom == filter) {
                    indexStatus = index;
                }
            }
            //redraw table where filter
            $('#filter_status').change(function() {
                table.column(indexStatus).search($(this).val()).draw();
            });
            //check note
            if ($('*').hasClass('exp')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> Data Expired )</code>`)
            }
            if ($('*').hasClass('stock')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> Stock < Min Stock )</code>`)
            }
            if ($('*').hasClass('exp') && $('*').hasClass('stock')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> Data Expired ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> Stock < Min Stock )</code>`)
            }
        });

        const hasStatusBayar =
            {{ in_array('featku', $users_rules) || in_array('admins', $users_rules) ? 'true' : 'false' }};

        // Indeks kolom export (MELEWATI Status Bayar/Index 1 agar TIDAK MUNCUL DI LAPORAN)
        const pdfColumns = hasStatusBayar ? [0, 2, 3, 6, 9, 12, 13, 15, 16, 17] : [0, 1, 2, 5, 8, 11, 12, 14, 15, 16];
        const printColumns = hasStatusBayar ? [0, 2, 3, 4, 5, 6, 9, 12, 13, 15, 16, 17] : [0, 1, 2, 3, 4, 5, 8, 11, 12, 14,
            15, 16
        ];

        // Indeks dinamis untuk data detail (Bulan, Tahun, Appr, Nominal)
        const idxBulan = hasStatusBayar ? 4 : 3;
        const idxTahun = hasStatusBayar ? 5 : 4;
        const idxApp1 = hasStatusBayar ? 18 : 17;
        const idxApp2 = hasStatusBayar ? 19 : 18;
        const idxTotal = hasStatusBayar ? 17 : 16;
        //set table into datatables
        $('#list_{{ $dmenu }}').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu": "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Data tidak ada",
                "info": "Data _START_ - _END_ dari _TOTAL_",
                "infoEmpty": "Tidak ada data",
                "infoFiltered": "(pencarian dari _MAX_ data)"
            },
            drawCallback: function() {
                // Re-apply highlight background color untuk baris di page aktif
                const table = this.api();
                const allNodes = table.rows({
                    search: 'applied'
                }).nodes();
                const $checkboxes = $(allNodes).find('.pilih-bayar');

                $checkboxes.each(function() {
                    const $row = $(this).closest('tr');
                    if (this.checked) {
                        $row.css('background-color', '#e8f5e9');
                    } else {
                        $row.css('background-color', '');
                    }
                });
            },
            footerCallback: function(row, data, start, end, display) {
                const api = this.api();

                const intVal = function(i) {
                    if (typeof i === 'string') {
                        const cleaned = i
                            .replace(/[^\d,-]/g, '') // buang non digit
                            .replace(/\./g, '') // buang titik
                            .replace(',', '.'); // koma -> titik
                        const n = parseFloat(cleaned);
                        return isNaN(n) ? 0 : n;
                    }
                    if (typeof i === 'number') return i;
                    return 0;
                };

                const colShift = hasStatusBayar ? 1 : 0;

                // index kolom total_nominal (aslinya 16, jadi 17 kalau ada status bayar)
                const colIdx = 16 + colShift;

                const total = api
                    .column(colIdx, {
                        search: 'applied'
                    })
                    .data()
                    .reduce((a, b) => a + intVal(b), 0);

                const displayTotal = isNaN(total) ?
                    '' :
                    total.toLocaleString('id-ID', {
                        minimumFractionDigits: 0
                    });

                // kolom label TOTAL (satu kolom sebelum colIdx)
                $(api.column(colIdx - 1).footer()).html('<strong>TOTAL</strong>');

                // kolom angka grand total (colIdx)
                $(api.column(colIdx).footer()).html('<strong> Rp ' + displayTotal + '</strong>');
            },
            columnDefs: [{
                    targets: hasStatusBayar ? [18, 19, 20, 21] : [17, 18, 19, 20],
                    visible: false
                } // Hide approval date columns but keep in data
            ],
            responsive: true,
            dom: 'Bfrtip',
            initComplete: function() {
                const $buttons = this.api().buttons().container();
                const $catatanWrapper = $('<div>', {
                    class: 'ms-2 mb-2 rpprab-catatan-wrapper'
                });
                const $catatanLabel = $('<label>', {
                    for: 'catatan-transaksi',
                    class: 'mb-0 font-weight-bold text-sm',
                    text: 'Catatan dari inputer:'
                });
                const $catatan = $('<textarea>', {
                    id: 'catatan-transaksi',
                    class: 'form-control form-control-sm',
                    readonly: true,
                    rows: 1,
                    placeholder: 'Tidak ada catatan'
                }).val(@json($catatan ?? ''));

                $catatan.css({
                    width: '360px',
                    height: '35px',
                    minHeight: '35px',
                    maxHeight: '35px',
                    resize: 'none',
                    overflowY: 'auto'
                });
                $catatanWrapper.css({
                    position: 'relative',
                    height: '35px'
                });
                $catatanLabel.css({
                    position: 'absolute',
                    left: 0,
                    bottom: '100%',
                    marginBottom: '2px'
                });
                $catatanWrapper.append($catatanLabel, $catatan);
                $buttons
                    .removeClass('align-items-end align-items-center')
                    .addClass('d-flex align-items-start flex-wrap gap-1')
                    .css('padding-top', '22px');
                $buttons.append($catatanWrapper);
            },
            buttons: [{
                    extend: 'pdfHtml5',
                    text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"> </i><span class="font-weight-bold"> PDF',
                    orientation: 'landscape',
                    pageSize: 'A4',
                    exportOptions: {
                        columns: pdfColumns
                    },
                    footer: true,
                    customize: function(doc) {
                        // Hitung total nominal untuk PDF
                        const api = $('#list_{{ $dmenu ?? 'result' }}').DataTable();
                        const intVal = function(i) {
                            if (typeof i === 'string') {
                                const cleaned = i
                                    .replace(/[^\d,-]/g, '')
                                    .replace(/\./g, '')
                                    .replace(',', '.');
                                const n = parseFloat(cleaned);
                                return isNaN(n) ? 0 : n;
                            }
                            if (typeof i === 'number') return i;
                            return 0;
                        };

                        const total = api
                            .column(idxTotal, {
                                search: 'applied'
                            })
                            .data()
                            .reduce((a, b) => a + intVal(b), 0);

                        const displayTotal = isNaN(total) ?
                            'Rp0' :
                            'Rp' + total.toLocaleString('id-ID', {
                                minimumFractionDigits: 0
                            });

                        // ===== 1. AKSES TABEL =====
                        // Pastikan doc.content ada dan memiliki tabel
                        let tableIndex = -1;
                        for (let i = 0; i < doc.content.length; i++) {
                            if (doc.content[i].table) {
                                tableIndex = i;
                                break;
                            }
                        }

                        if (tableIndex === -1) {
                            console.error('Tabel tidak ditemukan dalam PDF');
                            return;
                        }

                        const tableBody = doc.content[tableIndex].table.body;

                        if (tableBody && tableBody.length > 0) {
                            // ===== 2. STYLING HEADER (BARIS PERTAMA) =====
                            const headerRow = tableBody[0];
                            for (let i = 0; i < headerRow.length; i++) {
                                const cellText = typeof headerRow[i] === 'object' ? headerRow[i].text :
                                    headerRow[i];
                                headerRow[i] = {
                                    text: cellText,
                                    fillColor: '#d3d3d3',
                                    color: '#000000',
                                    bold: true,
                                    fontSize: 9,
                                    alignment: 'center',
                                    noWrap: true // Memastikan teks header tetap lurus (tidak enter)
                                };
                            }

                            // ===== 3. STYLING DATA ROWS =====
                            // Kolom yang di-export: [0,1,2,5,8,11,12,14,15,16]
                            // Di PDF menjadi index: 0,1,2,3,4,5,6,7,8,9
                            // Semua kolom data alignment: left (kecuali header yang center)
                            for (let i = 1; i < tableBody.length - 1; i++) {
                                const row = tableBody[i];
                                for (let j = 0; j < row.length; j++) {
                                    const cellText = typeof row[j] === 'object' ? row[j].text : row[j];

                                    row[j] = {
                                        text: cellText,
                                        fontSize: 8,
                                        alignment: 'left', // Semua kolom rata kiri
                                        noWrap: j >= 8 // Pastikan nominal tetap satu baris
                                    };
                                }
                            }

                            // ===== 4. STYLING FOOTER (GRAND TOTAL) =====
                            const lastRow = tableBody[tableBody.length - 1];
                            if (lastRow && lastRow.length >= 10) {
                                // Gabungkan kolom 0 sampai 8 untuk label "Grand Total"
                                lastRow[0] = {
                                    text: 'Grand Total',
                                    colSpan: 9, // Merge 9 kolom (index 0 sampai 8)
                                    bold: true,
                                    fontSize: 9,
                                    fillColor: '#f3f4f6',
                                    alignment: 'center'
                                };

                                // Kolom 1 sampai 8 harus diisi object kosong karena sudah di-merge (colSpan)
                                for (let i = 1; i < 9; i++) {
                                    lastRow[i] = {
                                        text: '',
                                        fillColor: '#f3f4f6'
                                    };
                                }

                                // Kolom nilai total (index 9)
                                lastRow[9] = {
                                    text: displayTotal,
                                    bold: true,
                                    fontSize: 9,
                                    fillColor: '#f3f4f6',
                                    alignment: 'left',
                                    noWrap: true
                                };
                            }
                        }

                        // ===== 5. TAMBAHKAN BORDER KE SEMUA SEL =====
                        doc.content[tableIndex].layout = {
                            hLineWidth: function(i, node) {
                                return 1; // Ketebalan garis horizontal (lebih tebal)
                            },
                            vLineWidth: function(i, node) {
                                return 1; // Ketebalan garis vertikal (lebih tebal)
                            },
                            hLineColor: function(i, node) {
                                return '#000000'; // Warna garis horizontal (hitam pekat)
                            },
                            vLineColor: function(i, node) {
                                return '#000000'; // Warna garis vertikal (hitam pekat)
                            },
                            paddingLeft: function(i, node) {
                                return 5;
                            },
                            paddingRight: function(i, node) {
                                return 5;
                            },
                            paddingTop: function(i, node) {
                                return 6; // Padding atas lebih besar untuk vertical centering
                            },
                            paddingBottom: function(i, node) {
                                return 6; // Padding bawah lebih besar untuk vertical centering
                            }
                        };

                        // ===== 6. STYLING JUDUL (JIKA ADA) =====
                        // Ambil dari data asli DataTable
                        const firstRowData = api.row(0).data();
                        const bulanAngka = firstRowData ? firstRowData[idxBulan] : '';
                        const tahunData = firstRowData ? firstRowData[idxTahun] : '';

                        // Konversi angka bulan ke nama bulan Indonesia
                        const namaBulan = [
                            'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                            'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                        ];
                        const bulanNama = bulanAngka ? namaBulan[parseInt(bulanAngka) - 1] || bulanAngka :
                            '';

                        // Buat judul baru dengan bulan dan tahun
                        const judulBaru = bulanNama && tahunData ?
                            `Report Perhitungan Absen Bulan ${bulanNama} Tahun ${tahunData}` :
                            'MSJMagang | Perhitungan Absen';

                        // Ambil tanggal approval dari data asli (jika ada)
                        const tglAtasan1 = firstRowData && firstRowData[idxApp1] && firstRowData[idxApp1]
                            .trim() !==
                            '' ? firstRowData[idxApp1] : null;
                        const tglAtasan2 = firstRowData && firstRowData[idxApp2] && firstRowData[idxApp2]
                            .trim() !==
                            '' ? firstRowData[idxApp2] : null;

                        // Format tanggal approval
                        const formatTanggal = (tgl) => {
                            if (!tgl || tgl === '-') return null;
                            try {
                                const date = new Date(tgl);
                                if (isNaN(date.getTime())) return null;
                                const options = {
                                    day: '2-digit',
                                    month: 'long',
                                    year: 'numeric'
                                };
                                return date.toLocaleDateString('id-ID', options);
                            } catch (e) {
                                return null;
                            }
                        };

                        const tglAtasan1Format = formatTanggal(tglAtasan1);
                        const tglAtasan2Format = formatTanggal(tglAtasan2);

                        // Format tanggal untuk approval detail (dengan waktu)
                        const formatTanggalDetail = (tgl) => {
                            if (!tgl || tgl === '-') return null;
                            try {
                                const date = new Date(tgl);
                                if (isNaN(date.getTime())) return null;
                                const options = {
                                    day: '2-digit',
                                    month: 'short',
                                    year: 'numeric',
                                    hour: '2-digit',
                                    minute: '2-digit'
                                };
                                return date.toLocaleDateString('id-ID', options).replace(',', '');
                            } catch (e) {
                                return null;
                            }
                        };

                        const tglAtasan1Detail = formatTanggalDetail(tglAtasan1);
                        const tglAtasan2Detail = formatTanggalDetail(tglAtasan2);

                        // Tambahkan header dengan logo di awal content
                        const headerContent = {
                            columns: [{
                                    image: logoBase64Global ||
                                        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==',
                                    width: 120,
                                    margin: [20, 5, 0, 0]
                                },
                                {
                                    stack: [{
                                        text: judulBaru.toUpperCase(),
                                        fontSize: 12,
                                        bold: true,
                                        color: '#000000',
                                        alignment: 'right',
                                        margin: [0, 20, 0, 2]
                                    }],
                                    width: '*'
                                }
                            ],
                            margin: [0, 0, 0, 5]
                        };

                        // Garis horizontal pemisah full width
                        const lineContent = {
                            canvas: [{
                                type: 'line',
                                x1: 0,
                                y1: 0,
                                x2: 755,
                                y2: 0,
                                lineWidth: 1.5,
                                lineColor: '#000000'
                            }],
                            margin: [0, 0, 0, 10]
                        };

                        // Section APPROVAL
                        let approvalContent = null;
                        if (tglAtasan1Format || tglAtasan2Format) {
                            const approvalItems = [];

                            // Label APPROVAL tanpa underline
                            approvalItems.push({
                                text: 'APPROVAL',
                                fontSize: 10,
                                bold: true,
                                margin: [0, 0, 0, 5]
                            });

                            // Atasan 1
                            const user1 = firstRowData[idxApp1 + 3];
                            if (tglAtasan1Format) {
                                approvalItems.push({
                                    columns: [{
                                        text: [{
                                                text: '\u2022 Head : ' +
                                                    user1,
                                                bold: true,
                                                fontSize: 8
                                            },
                                            {
                                                text: ' ',
                                            },
                                            {
                                                text: ' Approved',
                                                bold: true,
                                                color: '#ffffff',
                                                background: '#22c55e',
                                                fontSize: 7,
                                                margin: [4, 0, 4, 0]
                                            }
                                        ],
                                        width: '*'
                                    }],
                                    margin: [0, 0, 0, 2]
                                });
                                approvalItems.push({
                                    text: `  Tanggal, Waktu : ${tglAtasan2Detail || tglAtasan2Format}`,
                                    fontSize: 8,
                                    margin: [0, 0, 0, 5]
                                });
                            }

                            const user2 = firstRowData[idxApp1 + 2];
                            if (tglAtasan2Format) {
                                approvalItems.push({
                                    columns: [{
                                        text: [{
                                                text: '\u2022 Spv : ' + user2,
                                                bold: true,
                                                fontSize: 8
                                            },
                                            {
                                                text: ' ',
                                            },
                                            {
                                                text: ' Approved',
                                                bold: true,
                                                color: '#ffffff',
                                                background: '#22c55e',
                                                fontSize: 7,
                                                margin: [4, 0, 4, 0]
                                            }
                                        ],
                                        width: '*'
                                    }],
                                    margin: [0, 0, 0, 2]
                                });
                                approvalItems.push({
                                    text: `  Tanggal, Waktu : ${tglAtasan1Detail || tglAtasan1Format}`,

                                    fontSize: 8,
                                    margin: [0, 0, 0, 10]
                                });
                            }

                            approvalContent = {
                                stack: approvalItems,
                                margin: [0, 0, 0, 5]
                            };
                        }

                        // Text Detail Data Pembayaran
                        const detailText = {
                            text: 'DETAIL DATA PEMBAYARAN',
                            fontSize: 11,
                            bold: true,
                            color: '#000000',
                            margin: [0, 10, 0, 10]
                        };

                        // Cari elemen text yang berisi judul dan ganti dengan header baru
                        for (let i = 0; i < doc.content.length; i++) {
                            if (doc.content[i].text && typeof doc.content[i].text === 'string') {
                                if (doc.content[i].text.includes('MSJMagang')) {
                                    // Ganti judul lama dengan header yang berisi logo
                                    doc.content[i] = headerContent;

                                    // Tambahkan garis horizontal
                                    doc.content.splice(i + 1, 0, lineContent);

                                    let insertIndex = i + 2;

                                    // Tambahkan section approval jika ada
                                    if (approvalContent) {
                                        doc.content.splice(insertIndex, 0, approvalContent);
                                        insertIndex++;
                                    }

                                    // Tambahkan Detail Data Tagihan setelah approval
                                    doc.content.splice(insertIndex, 0, detailText);

                                    break;
                                }
                            }
                        }

                        // Set default font size
                        doc.defaultStyle.fontSize = 8;

                        // Set page margins
                        doc.pageMargins = [40, 60, 40, 40];

                        // Set column widths
                        // Kolom: [No, Periode, ID, Nama, Bank, A/N Bank, No Rek, Absen WFO, Absen, Nominal+Total]
                        if (doc.content[tableIndex] && doc.content[tableIndex].table) {
                            doc.content[tableIndex].table.widths = [
                                20, // No
                                70, // Periode
                                90, // ID (diperbesar)
                                90, // Nama
                                95, // Bank
                                90, // A/N Bank
                                70, // No Rek
                                30, // Absen WFO
                                30, // Absen
                                55 // Nominal & Total Nominal
                            ];
                        }
                    }
                },
                {
                    extend: 'print',
                    text: '<i class="fas fa-print me-1 text-lg text-info"> </i><span class="font-weight-bold"> Print',
                    orientation: 'landscape',
                    pageSize: 'A4',
                    exportOptions: {
                        columns: printColumns
                    },
                    footer: true,

                    customize: function(win) {
                        // Ambil data dari tabel untuk info approval
                        const table = $('#list_rpprab').DataTable();
                        const firstRowData = table.rows({
                            search: 'applied'
                        }).data()[0];

                        // Ambil bulan dan tahun untuk judul
                        let bulanAngka = firstRowData ? firstRowData[idxBulan] : '';
                        let tahunData = firstRowData ? firstRowData[idxTahun] : '';

                        // Konversi nama bulan
                        const namaBulan = [
                            'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                            'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                        ];
                        const bulanNama = bulanAngka ? namaBulan[parseInt(bulanAngka) - 1] || bulanAngka :
                            '';

                        // Ambil tanggal approval
                        const tglAtasan1 = firstRowData && firstRowData[idxApp1] && firstRowData[idxApp1]
                            .trim() !==
                            '' ? firstRowData[idxApp1] : null;
                        const tglAtasan2 = firstRowData && firstRowData[idxApp2] && firstRowData[idxApp2]
                            .trim() !==
                            '' ? firstRowData[idxApp2] : null;

                        // Format tanggal
                        const formatTanggal = (tgl) => {
                            if (!tgl || tgl === '-') return null;
                            try {
                                const date = new Date(tgl);
                                if (isNaN(date.getTime())) return null;
                                const options = {
                                    day: '2-digit',
                                    month: 'long',
                                    year: 'numeric'
                                };
                                return date.toLocaleDateString('id-ID', options);
                            } catch (e) {
                                return null;
                            }
                        };

                        const tglAtasan1Format = formatTanggal(tglAtasan1);
                        const tglAtasan2Format = formatTanggal(tglAtasan2);

                        // Format tanggal untuk approval detail (dengan waktu)
                        const formatTanggalDetail = (tgl) => {
                            if (!tgl || tgl === '-') return null;
                            try {
                                const date = new Date(tgl);
                                if (isNaN(date.getTime())) return null;
                                const options = {
                                    day: '2-digit',
                                    month: 'short',
                                    year: 'numeric',
                                    hour: '2-digit',
                                    minute: '2-digit'
                                };
                                return date.toLocaleDateString('id-ID', options).replace(',', '');
                            } catch (e) {
                                return null;
                            }
                        };

                        const tglAtasan1Detail = formatTanggalDetail(tglAtasan1);
                        const tglAtasan2Detail = formatTanggalDetail(tglAtasan2);

                        // Modifikasi dokumen print
                        const $body = $(win.document.body);

                        // Tambahkan header dengan logo dan approval section
                        let approvalHtml = '';
                        if (tglAtasan1Format || tglAtasan2Format) {
                            approvalHtml = '<div style="margin: 15px 0;">';
                            approvalHtml +=
                                '<p style="margin: 0 0 8px 0; font-size: 11px; font-weight: bold;">APPROVAL</p>';

                            if (tglAtasan1Format) {
                                approvalHtml += '<p style="margin: 0 0 3px 0; font-size: 10px;">';
                                approvalHtml += '<span style="font-weight: bold;">\u2022 SPV  </span>';
                                approvalHtml +=
                                    '<span style="background-color: #22c55e; color: white; padding: 2px 6px; border-radius: 3px; font-size: 9px; font-weight: bold;">Approved</span>';
                                approvalHtml += '</p>';
                                approvalHtml +=
                                    `<p style="margin: 0 0 8px 12px; font-size: 9px; color: #333;">Tanggal, Waktu : ${tglAtasan1Detail || tglAtasan1Format}</p>`;
                            }

                            if (tglAtasan2Format) {
                                approvalHtml += '<p style="margin: 0 0 3px 0; font-size: 10px;">';
                                approvalHtml += '<span style="font-weight: bold;">\u2022 HEAD  </span>';
                                approvalHtml +=
                                    '<span style="background-color: #22c55e; color: white; padding: 2px 6px; border-radius: 3px; font-size: 9px; font-weight: bold;">Approved</span>';
                                approvalHtml += '</p>';
                                approvalHtml +=
                                    `<p style="margin: 0 0 0 12px; font-size: 9px; color: #333;">Tanggal, Waktu : ${tglAtasan2Detail || tglAtasan2Format}</p>`;
                            }

                            approvalHtml += '</div>';
                        }

                        // Tambahkan Detail Data Pembayaran setelah approval
                        const detailTextHtml =
                            '<h3 style="font-size: 13px; font-weight: bold; color: #000000; margin: 18px 0 12px 0; padding: 0;">DETAIL DATA PEMBAYARAN</h3>';

                        // Tambahkan header dengan logo
                        const headerHtml = `
                            <div style="width: 100%; margin-bottom: 10px;">
                                <table style="width: 100%; border: none; border-collapse: collapse;">
                                    <tr>
                                        <td style="width: 250px; vertical-align: middle; text-align: left; border: none; padding: 0 0 0 20px;">
                                            <img src="${logoBase64Global || '{{ asset('storage/logo_text.png') }}'}"
                                                 style="height: 45px; width: auto; display: inline-block; vertical-align: middle;"
                                                 alt="Logo">
                                        </td>
                                        <td style="vertical-align: middle; text-align: right; border: none; padding: 20px 0 0 0;">
                                            <div style="font-size: 14px; font-weight: bold; margin: 0; padding: 0;">
                                                ${(bulanNama && tahunData ? `REPORT PERHITUNGAN ABSEN` : 'MSJMAGANG | PERHITUNGAN ABSEN').toUpperCase()}
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                                <hr style="border: none; border-top: 1px solid #000; margin: 8px 0; width: 100%;">
                            </div>
                            ${approvalHtml}
                            ${detailTextHtml}
                        `;

                        // Ganti h1 dengan header baru
                        $body.find('h1').replaceWith(headerHtml);

                        // Ambil tabel di window print
                        const $table = $body.find('table');

                        // Ambil baris tfoot
                        const $tfoot = $table.find('tfoot');
                        const $tfootTr = $tfoot.find('tr').clone();

                        // Append ke akhir tbody sebagai baris biasa
                        $table.find('tbody').append($tfootTr);

                        // Hapus tfoot
                        $tfoot.remove();
                    }
                },
                {
                    text: '<i class="fas fa-file-excel me-1 text-lg text-success"> </i><span class="font-weight-bold"> Excel BCA',
                    sheetName: 'Magang',
                    action: function(e, dt, node, config) {
                        exportExcel();
                    }
                },
                {
                    text: '<i class="fas fa-file-csv me-1 text-lg text-warning"></i><span class="font-weight-bold"> CSV UOB</span>',
                    action: function(e, dt) {
                        exportCsvUOB(dt || $('#list_rpprab').DataTable());
                    }
                },
                {
                    text: '<i class="fas fa-file-csv me-1 text-lg text-info"> </i><span class="font-weight-bold">CSV MANDIRI',
                    action: function(e, dt, node, config) {
                        exportCsvMandiri(dt);
                    }
                },
                {
                    text: '<i class="fas fa-redo me-1 text-primary"></i><span class="font-weight-bold"> Generate ID</span>',
                    action: function() {
                        $.post({
                            url: "{{ route('utils.generate-id') }}",
                            data: {
                                _token: $('meta[name="csrf-token"]').attr('content'),
                                bulan: '{{ $filter['bulan'] ?? null }}',
                                tahun: '{{ $filter['tahun'] ?? null }}',
                                assign: 1
                            }
                        }).done(res => {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: `Updated: ${res.updated}`,
                                confirmButtonText: 'OK',
                                allowOutsideClick: false,
                                allowEscapeKey: false
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    window.location
                                        .reload();
                                }
                            });
                        }).fail(xhr => {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: xhr?.responseJSON?.message || 'Gagal'
                            });
                        });
                    }
                },
            ],
            footerCallback: function(row, data, start, end, display) {
                const api = this.api();

                const headers = api.columns().header().toArray()
                    .map(h => h.textContent.trim().toLowerCase());
                const totalIdx = headers.indexOf('total nominal');
                if (totalIdx === -1) return;

                const parseRupiah = (v) => {
                    if (v == null) return 0;
                    if (typeof v === 'number') return v;
                    return Number(String(v).replace(/[^0-9\-]/g, '')) || 0;
                };

                const filteredTotal = api
                    .column(totalIdx, {
                        search: 'applied'
                    })
                    .data()
                    .reduce((sum, val) => sum + parseRupiah(val), 0);
                $(api.column(totalIdx).footer())
                    .html('Rp' + filteredTotal.toLocaleString('id-ID'));
            }
        });

        function exportCsvMandiri() {
            const today = new Date();
            const y = today.getFullYear();
            const m = String(today.getMonth() + 1).padStart(2, '0');
            const d = String(today.getDate()).padStart(2, '0');
            const tgl = `${y}${m}${d}`;
            const senderAcc = '1410024778888';

            const table = $('#list_rpprab').DataTable();
            const rowsToExport = table.rows({
                search: 'applied'
            }).data().toArray();

            const bankTransform = (data) => {
                const codeRaw = String(data[idxBulan + 6] ?? '').trim(); // Sebelumnya data[9]
                const isBBL = codeRaw.toUpperCase() === 'BBLUIDJA';
                const nameRaw = String(data[idxBulan + 5] ?? '').trim(); // Sebelumnya data[8]
                const numNorm = Number(String(data[idxBulan + 9]).replace(/[^\d]/g, '')) || ''; // Sebelumnya data[12]

                return {
                    bankName: isBBL ? '' : nameRaw,
                    bankCode: isBBL ? '' : codeRaw,
                    bankCityCode: isBBL ? '' : codeRaw,
                    bankNumber: isBBL ? 7880853885 : numNorm
                };
            };

            const bulkMethod = rowsToExport.length < 10 ? 'LLG' : 'BIF';

            // Calculate total amount from all rows
            let totalAmount = 0;
            rowsToExport.forEach((data) => {
                const amount = Number(String(data[idxTotal]).replace(/Rp\s?/i, '').replace(/\./g, '').replace(/,/g,
                        '')
                    .trim()) || 0;
                totalAmount += amount;
            });

            // Create CSV data array
            const csvData = [];

            // Add header row with total rows count and total amount
            csvData.push([
                'P',
                tgl,
                senderAcc,
                rowsToExport.length.toString(),
                totalAmount.toString()
            ]);

            // Add data rows
            rowsToExport.forEach((data) => {
                const bankSwift = String(data[idxBulan + 6] ?? '').trim().toUpperCase();
                const col9Empty = bankSwift === '';

                const lbuIbu = (bankSwift === 'BMRIIDJA') ? 'IBU' : 'LBU';
                const transferType = col9Empty ? '' : bulkMethod;
                const amount = Number(String(data[idxTotal]).replace(/Rp\s?/i, '').replace(/\./g, '').replace(/,/g,
                        '')
                    .trim()) || 0;
                const {
                    bankName,
                    bankCode,
                    bankCityCode,
                    bankNumber
                } = bankTransform(data);

                // Export Mandiri hanya butuh data pembayaran, BUKAN status bayar
                csvData.push([
                    data[idxBulan + 9], // No Rekening
                    data[idxBulan + 8], // Nama Penerima (A/N Bank)
                    '', '', '', 'IDR', amount,
                    'PEMBAYARAN', '', lbuIbu,
                    data[idxBulan + 6], // Kode Bank
                    data[idxBulan + 5], // Nama Bank
                    'SURABAYA', '', '', '', 'N', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',
                    '', '', '', '', '', '', 'OUR', '1', 'E'
                ]);
            });

            // Convert to CSV string using Papa Parse
            const csv = Papa.unparse(csvData, {
                quotes: false,
                delimiter: ',',
                newline: '\r\n'
            });

            // Create and download CSV file
            const blob = new Blob([csv], {
                type: 'text/csv;charset=utf-8'
            });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = 'mandiri_export.csv';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(link.href);
        }

        function exportExcel() {
            const workbook = new ExcelJS.Workbook();
            const worksheet = workbook.addWorksheet('Data');

            const tanggalStr = @json($filter['tanggal'] ?? now()->toDateString());
            const tanggalDate = new Date(tanggalStr + 'T12:00:00');

            const year = tanggalDate.getFullYear();
            const month = String(tanggalDate.getMonth() + 1).padStart(2, '0');

            const headerRow = worksheet.addRow([
                'No', 'Transaction ID', 'Transfer Type', 'Debited Acc.', 'Beneficiary ID',
                'Credited Acc.', 'Amount', 'Eff. Date', 'Transaction Purpose', 'Currency',
                'Charges Type', 'Charges Acc.', 'Remark 1', 'Remark 2', 'Receiver Bank Cd',
                'Receiver Bank Name', 'Receiver Name', 'Receiver Cust. Type',
                'Receiver Cust. Residen', 'Transaction Cd', 'Beneficiary Email'
            ]);

            headerRow.eachCell((cell) => {
                cell.font = {
                    bold: true,
                    color: {
                        argb: 'FFFFFFFF'
                    }
                };
                cell.fill = {
                    type: 'pattern',
                    pattern: 'solid',
                    fgColor: {
                        argb: '00000000'
                    }
                };
                cell.alignment = {
                    vertical: 'middle',
                    horizontal: 'center'
                };
            });

            worksheet.getColumn(8).numFmt = 'dd mmmm yyyy';

            const table = $('#list_rpprab').DataTable();

            const rowsToExport = table
                .rows({
                    search: 'applied'
                })
                .data()
                .toArray(); // <-- tidak di-filter lagi

            const onlyDigits = (v) => String(v ?? '').replace(/[^\d]/g, '');
            const toInt = (v) => {
                const s = String(v ?? '').replace(/\u00A0/g, ' ').replace(/[^\d]/g, '');
                return s ? parseInt(s, 10) : 0;
            };

            function setNumericWithPadding(row, colIdx, raw) {
                const d = onlyDigits(raw);
                if (!d) {
                    row.getCell(colIdx).value = null;
                    return;
                }
                const len = d.length;
                const num = Number(d);
                const cell = row.getCell(colIdx);
                cell.value = num;
                cell.numFmt = '0'.repeat(len);
            }

            const bulkMethod = rowsToExport ? 'LLG' : 'BCA';

            rowsToExport.forEach((data, index) => {
                const col9Empty = data[idxBulan + 6] == null || String(data[idxBulan + 6]).trim() === '';
                const transferType = col9Empty ? '' : bulkMethod;
                const amount = toInt(data[idxTotal]);

                const originalTransactionId = String(data[idxBulan - 1] ?? '');
                const prefix3Letters = originalTransactionId.substring(0, 3);
                const last5Digits = originalTransactionId.substring(3, 8);
                const counter = String(index).padStart(3, '0');
                const newTransactionId = `${prefix3Letters}${last5Digits}${year}${month}${counter}`;

                const bankCdRaw = String(data[idxBulan + 6] ?? '').trim();
                const bankCdUpper = bankCdRaw.toUpperCase();
                const isCena = bankCdUpper === 'CENAIDJA';

                const receiverBankCd = isCena ? '' : bankCdRaw;
                const receiverBankName = isCena ? '' : String(data[idxBulan + 5] ?? '').trim().toUpperCase();
                const receiver1 = isCena ? '' : 1;
                const receiverCust = isCena ? '' : 1;
                const trcd = isCena ? '' : 99;
                const BCATR = isCena ? 'BCA' : 'LLG';

                // Baris Excel BCA (Status Bayar tidak dimasukkan ke dalam baris)
                const row = worksheet.addRow([
                    Number(data[0]),
                    newTransactionId,
                    BCATR,
                    null,
                    '',
                    null,
                    amount,
                    tanggalDate,
                    '',
                    'IDR',
                    'OUR',
                    null,
                    'Magang',
                    '',
                    receiverBankCd,
                    receiverBankName,
                    data[idxBulan + 8],
                    receiver1,
                    receiverCust,
                    trcd,
                    data[idxBulan + 3],
                ]);

                setNumericWithPadding(row, 4, '7880853885');
                const accDigits = onlyDigits(data[idxBulan + 9]);
                const cell = row.getCell(6);
                if (accDigits) {
                    cell.value = accDigits; // "1234567890"
                    cell.numFmt = '@'; // format teks
                } else {
                    cell.value = null;
                }

                setNumericWithPadding(row, 12, '7880853885');
            });


            worksheet.columns.forEach((column) => {
                let maxLength = 10;
                column.eachCell({
                    includeEmpty: true
                }, (cell) => {
                    const raw = cell.value;
                    const val = raw == null ? '' : (raw.text ?? raw.richText ?? raw.toString());
                    maxLength = Math.max(maxLength, String(val).length + 2);
                });
                column.width = maxLength;
            });

            workbook.xlsx.writeBuffer().then((buffer) => {
                const blob = new Blob([buffer], {
                    type: 'application/octet-stream'
                });
                const link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                link.download = 'data_absen.xlsx';
                link.click();
            });
        }

        function formatTanggalDMY(value) {
            if (!value) return '';

            const d =
                value instanceof Date ?
                value :
                new Date(value);

            if (isNaN(d)) return '';

            return `${d.getDate()}/${d.getMonth() + 1}/${d.getFullYear()}`;
        }

        {{-- function forceTextDigits(digits) {
            const s = String(digits ?? '').replace(/[^\d]/g, '');
            return s ? `'${s}` : '';
        } --}}

        function forceTextDigits(digits) {
            const s = String(digits ?? '').replace(/[^\d]/g, '');
            return s ? `="${s}"` : '';
        }

        const EOL = '\r\n';

        const parseAmount = raw => Number(
            String(raw ?? '').replace(/Rp\s?/i, '').replace(/\./g, '').replace(/,/g, '').trim()
        ) || 0;

        const toUpperID = v => String(v ?? '').replace(/\s+/g, ' ').trim().toLocaleUpperCase('id-ID');

        const HDR_LLG_ID = [
            'Jenis Transaksi', 'Nomor Rekening Debit', 'Mata Uang Rekening Debit', 'Nominal Bayar',
            'Nama Bank Tujuan', 'Kota Bank Tujuan', 'Nomor Rekening Tujuan', 'Nama Penerima',
            'Detail Pembayaran', 'Tanggal Valuta', 'Alamat Penerima', 'Tipe Penerima',
            'Status Kependudukan Penerima', 'Status Kewarganegaraan Penerima', 'Sandi Tujuan Transaksi',
            'Hubungan Pelaku Transaksi', 'Kategori Penerima', 'Kode Booking', 'Alamat Email Penerima',
            'Mata Uang Pembayaran', 'No Referensi Nasabah', 'Kode Bank Tujuan', 'Kode Kota Bank Tujuan', 'Kode Bank ATM'
        ];
        const SUB_LLG_EN = [
            'Transaction Type', 'Debit Account No', 'Debit Account Currency', 'Payment Amount',
            'Beneficiary Bank Name', 'Beneficiary Bank City', 'Beneficiary Account Number', 'Beneficiary Name',
            'Payment Detail', 'Value Date', 'Beneficiary Address', 'Beneficiary Type',
            'Beneficiary Residency Status', 'Beneficiary Citizenship Status', 'Transaction Purpose Code',
            'Transactor Relationship', 'Beneficiary Category', 'FX Booking Code', 'Beneficiary Email Adsress',
            'Payment Currency', 'Customer Ref No', 'Beneficiary Bank Code', 'Beneficiary Bank City Code',
            'ATM Bank Code', 'Value Date', 'Beneficiary Type', 'Beneficiary Resident Status',
            'Beneficiary Citizenship Status', 'Transaction Purpose Code', 'Transactor Relationship',
            'Beneficiary Category', 'Payment Amount', 'SALA'
        ];

        const HDR_BFA_ID = [
            'Jenis Transaksi', 'Tujuan Transaksi', 'Nomor Rekening Debit', 'Mata Uang Rekening Debit',
            'Nominal Bayar',
            'Nama Bank Tujuan', 'Kota Bank Tujuan', 'Nomor Rekening Tujuan', 'Nama Penerima',
            'Detail Pembayaran', 'Tanggal Valuta', 'Alamat Penerima', 'Status Kewarganegaraan Penerima',
            'Sandi Tujuan Transaksi',
            'Hubungan Pelaku Transaksi', 'Kategori Penerima', 'Kode Booking', 'Alamat Email Penerima',
            'Mata Uang Pembayaran', 'No Referensi Nasabah', 'Kode Bank Tujuan', 'Kode Kota Bank Tujuan'
        ];
        const SUB_BFA_EN = [
            'Account Type', 'Transaction Purpose', 'Debit Account No', 'Debit Account Currency',
            'Payment Amount', 'Beneficiary Bank Name', 'Beneficiary Bank City', 'Beneficiary Account Number',
            'Beneficiary Name', 'Payment Detail', 'Value Date', 'Beneficiary Address',
            'Beneficiary Citizenship Status', 'Transaction Purpose Code', 'Transactor Relationship',
            'Beneficiary Category', 'FX Booking Code', 'Beneficiary Email Address', 'Payment Currency',
            'Customer Reff No', 'Beneficiary Bank Code', 'Beneficiary Bank City Code', 'Value Date',
            'Beneficiary Citizenship Status', 'Transaction Purpose Code', 'Transactor Relationship',
            'Beneficiary Category', 'Payment Amount', 'SALA', 'Account Type', 'Transaction Purpose'
        ];

        function buildAoAByConfig(dataset, cfg) {
            const COLS = Math.max(cfg.headers.length, cfg.subheaders.length);
            const normRow = (arr) => {
                const row = Array(COLS).fill('');
                for (let i = 0; i < Math.min(COLS, arr.length); i++) row[i] = arr[i];
                return row;
            };
            const bannerRowBD = (textB = '', textD = '') => {
                const r = Array(COLS).fill('');
                if (COLS > 1) r[1] = textB ?? '';
                if (COLS > 3) r[3] = textD ?? '';
                return r;
            };

            const aoa = [];
            // banner 4 baris
            aoa.push(bannerRowBD(cfg.COMPANY_NAME, ''));
            aoa.push(bannerRowBD(cfg.COMPANY_ADDR, cfg.COMPANY_ADDR_CODE));
            aoa.push(bannerRowBD(cfg.COMPANY_PHONE, cfg.COMPANY_LEGAL));
            aoa.push(bannerRowBD(cfg.NOTEE, cfg.NOTEE_CODE));
            // 3 baris kosong
            aoa.push(Array(COLS).fill(''));
            aoa.push(Array(COLS).fill(''));
            aoa.push(Array(COLS).fill(''));
            aoa.push(Array(COLS).fill(''));
            // headers
            aoa.push(normRow(cfg.headers));
            aoa.push(normRow(cfg.subheaders));
            // data
            for (const d of dataset) aoa.push(normRow(cfg.mapRow(d, COLS)));
            return aoa;
        }

        function makeMapRowLLG(opts) {
            const {
                tanggalDate,
                useAccountNumber
            } = opts;

            return (d) => {
                const amtNum = parseAmount(d[idxTotal]);
                const amtStr = amtNum.toString(); //formatAmount(amtNum);
                const vdate = formatTanggalDMY(tanggalDate);

                const rekeningSafe = forceTextDigits(d[idxBulan + 9]);

                // Format Jenis Transaksi dengan nomor rekening
                const jenisTransaksi = 'LLG'

                // Ambil bulan dan tahun dari data peserta
                const bulanAngka = parseInt(d[idxBulan]) || 1;
                const tahun = d[idxTahun] || new Date().getFullYear();

                // Konversi bulan angka ke nama bulan Indonesia
                const namaBulan = [
                    'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                    'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                ];
                const bulanNama = namaBulan[bulanAngka - 1] || 'Januari';

                // Format Beneficiary Bank Name → PT BANK XXX
                const bankName = String(d[idxBulan + 5] || '').trim().toUpperCase();
                const beneficiaryBankName = bankName.startsWith(' ') ?
                    bankName :
                    ` ${bankName}`;

                const detailPembayaran = `Magang Periode ${bulanNama} ${tahun}`;

                return [
                    jenisTransaksi, // Jenis Transaksi
                    '3033020692', // No Rekening Debit
                    'IDR', // Mata Uang Rekening Debit
                    amtStr, // Nominal Bayar
                    beneficiaryBankName, // Nama Bank Tujuan
                    'SURABAYA', // Kota Bank Tujuan
                    rekeningSafe, // Nomor Rekening Tujuan
                    toUpperID(d[idxBulan + 8]), // Nama Penerima
                    detailPembayaran, // Detail Pembayaran
                    vdate, // Tanggal Valuta
                    'Surabaya', // Alamat Penerima
                    'A0 - Individu / Individual', // Tipe Penerima
                    '01 - Penduduk / Resident', // Status Kependudukan
                    '01 - Warga Negara / Citizen', // Status Kewarganegaraan (kode)
                    '2670 - Jasa lainnya / Other services', // Sandi Tujuan Transaksi
                    'N - Non Afiliasi / Non Affiliated', // Hubungan Pelaku Transaksi
                    'E0 - Perusahaan / Company', // Kategori Penerima (kode)
                    '', // Kode Booking
                    d[idxBulan + 3], // Email Penerima
                    'IDR', // Mata Uang Pembayaran
                    d[idxBulan - 1], // No Ref Nasabah
                    d[idxBulan + 6], // Kode Bank Tujuan
                    '1200', // Kode Kota Bank Tujuan
                    '14', // Kode Bank ATM
                    vdate, // Value Date
                    '02', // Benefeiciary Type
                    '01', // Beneficiary Resident Status
                    '01', // Beneficiary Citizenship Status (kode)
                    '2670', // Transaction Purpose Code (kode)
                    'N', // Transactor Relationship (kode)
                    'E0', // Beneficiary Category (kode)
                    amtNum, // Payment Amount
                    'NO' // SALA
                ];
            };
        }

        function makeMapRowBFA(opts) {
            const {
                tanggalDate,
                accountTypeLabel,
                accountTypeCode,
                useAccountNumber
            } = opts;

            return (d) => {
                const amtNum = parseAmount(d[idxTotal]);
                const amtStr = amtNum.toString();
                const vdate = formatTanggalDMY(tanggalDate);

                const rekeningSafe = forceTextDigits(d[idxBulan + 9]);

                const accountTypeValue = useAccountNumber && rekeningSafe ?
                    'BFA - Account Number' :
                    'BFA';

                const bulanAngka = parseInt(d[idxBulan]) || 1;
                const tahun = d[idxTahun] || new Date().getFullYear();

                const namaBulan = [
                    'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                    'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                ];

                const bulanNama = namaBulan[bulanAngka - 1] || 'Januari';

                const detailPembayaran = `Magang Periode ${bulanNama} ${tahun}`;

                const bankName = String(d[idxBulan + 5] || '').trim().toUpperCase();
                const beneficiaryBankName = bankName.startsWith(' ') ?
                    bankName :
                    ` ${bankName}`;

                return [
                    accountTypeValue, // [0] Account Type
                    '99 - Others', // [1] Transaction Purpose
                    '3033020692', // [2] Debited Account No
                    'IDR', // [3] Debit Account Currency
                    amtStr, // [4] Payment Amount
                    beneficiaryBankName, // [5] Beneficiary Bank Name → PT BANK RAKYAT INDONESIA
                    'SURABAYA', // [6] Beneficiary Bank City
                    rekeningSafe, // [7] Beneficiary Account Number
                    toUpperID(d[idxBulan + 8]), // [8] Beneficiary Name
                    detailPembayaran, // [9] Payment Detail
                    vdate, // [10] Value Date
                    'Surabaya', // [11] Beneficiary Address
                    '01 - Warga Negara / Citizen', // [12] Beneficiary Citizenship Status
                    '2670 - Jasa lainnya / Other services', // [13] Transaction Purpose Code
                    'N - Non Afiliasi / Non Affiliated', // [14] Transactor Relationship
                    'A0 - Individu / Individual', // [15] Beneficiary Category
                    '', // [16] FX Booking Code
                    d[idxBulan + 3], // [17] Beneficiary Email Address
                    'IDR', // [18] Payment Currency
                    d[idxBulan - 1], // [19] Customer Reff No
                    d[idxBulan + 6], // [20] Beneficiary Bank Code
                    '1200', // [21] Beneficiary Bank City Code
                    vdate, // [22] Value Date
                    '01', // [23] Beneficiary Citizenship Status (kode)
                    '2670', // [24] Transaction Purpose Code (kode)
                    'N', // [25] Transactor Relationship (kode)
                    'A0', // [26] Beneficiary Category (kode)
                    amtNum, // [27] Payment Amount
                    'NO', // [28] SALA
                    'BFA', // [29] Account Type (kode)
                    '99' // [30] Transaction Purpose (kode)
                ];

            };
        }
        // ====== Fungsi utama export ======
        function exportCsvUOB(table) {
            const THRESH = 250000000; // 25 juta

            const COMPANY_NAME = window.COMPANY_NAME || 'Identitas Perusahaan / Company Identification';
            const COMPANY_ADDR = window.COMPANY_ADDR || 'ID Perusahaan / Company ID';
            const COMPANY_PHONE = window.COMPANY_PHONE || 'Nama Perusahaan / Company Name';
            const NOTEE = window.NOTE || 'SALA';
            const tanggalDate = window.tanggalDate || new Date();

            const rowsDT = table.rows({
                search: 'applied',
                order: 'applied'
            }).data().toArray();

            // FUNGSI PARSE AMOUNT
            function parseAmountFixed(str) {
                const cleaned = String(str || '0')
                    .replace(/Rp/g, '')
                    .replace(/\n/g, '')
                    .replace(/\s/g, '')
                    .replace(/\./g, '')
                    .replace(/[^\d]/g, '');
                return parseInt(cleaned, 10) || 0;
            }

            // HITUNG TOTAL KESELURUHAN DULU
            let totalAmount = 0;
            for (const r of rowsDT) {
                totalAmount += parseAmountFixed(r[idxTotal]);
            }

            // SPLIT BERDASARKAN TOTAL
            let setLow = []; // BiFast
            let setHigh = []; // LLG

            if (totalAmount >= THRESH) {
                // Total >= 25 juta → SEMUA data masuk LLG
                setHigh = rowsDT;
                console.log('→ SEMUA data masuk LLG (total >= 25 juta)');
            } else {
                // Total < 25 juta → SEMUA data masuk BiFast
                setLow = rowsDT;
                console.log('→ SEMUA data masuk BiFast (total < 25 juta)');
            }

            console.log('=== HASIL SPLIT ===');
            console.log('BiFast:', setLow.length, 'rows');
            console.log('LLG:', setHigh.length, 'rows');
            console.log(window.tanggalDate, typeof window.tanggalDate);

            // Konfigurasi LLG
            const cfgLLG = {
                headers: HDR_LLG_ID,
                subheaders: SUB_LLG_EN,
                mapRow: makeMapRowLLG({
                    tanggalDate,
                    useAccountNumber: true
                }),
                COMPANY_NAME,
                COMPANY_ADDR,
                COMPANY_PHONE,
                NOTEE,
                COMPANY_ADDR_CODE: 'MULTISPUNBIBP',
                COMPANY_LEGAL: 'PT MULTI SPUNINDO JAYA Tbk',
                NOTEE_CODE: 'NO'
            };

            // Konfigurasi BFA/BiFast
            const cfgBFA = {
                headers: HDR_BFA_ID,
                subheaders: SUB_BFA_EN,
                mapRow: makeMapRowBFA({
                    tanggalDate,
                    accountTypeLabel: 'BFA',
                    accountTypeCode: 'BFA',
                    useAccountNumber: true
                }),
                COMPANY_NAME,
                COMPANY_ADDR,
                COMPANY_PHONE,
                NOTEE,
                COMPANY_ADDR_CODE: 'MULTISPUNBIBP',
                COMPANY_LEGAL: 'PT MULTI SPUNINDO JAYA Tbk',
                NOTEE_CODE: 'NO'
            };

            // Build AoA
            const aoaBFA = buildAoAByConfig(setLow, cfgBFA);
            const aoaLLG = buildAoAByConfig(setHigh, cfgLLG);

            // Export function
            const unparseAndDownload = (aoa, filename) => {
                if (aoa.length <= 9) {
                    console.warn(`${filename} tidak ada data`);
                    return;
                }

                const csv = Papa.unparse(aoa, {
                    quotes: false,
                    delimiter: ',',
                    newline: EOL
                });
                const blob = new Blob([csv], {
                    type: 'text/csv;charset=utf-8'
                });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = filename;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);

                console.log(`✓ ${filename} downloaded (${aoa.length - 9} data rows)`);
            };

            // Download files
            if (setLow.length > 0) {
                unparseAndDownload(aoaBFA, 'UOB_BiFast.csv');
            }

            setTimeout(() => {
                if (setHigh.length > 0) {
                    unparseAndDownload(aoaLLG, 'UOB_LLG.csv');
                }
            }, 150);
        }

        {{-- function generatePDF() {
            const docDefinition = {
                pageOrientation: 'landscape',
                pageSize: 'A4',
                content: [{
                        text: 'Transaction Report',
                        style: 'header',
                        alignment: 'center',
                        margin: [0, 0, 0, 10]
                    },
                    {
                        table: {
                            headerRows: 1,
                            widths: [20, 80, 80, 80, 80, 80, 80, 60, 80, 80, 60, 60, 80,
                                60, 60, 80, 80, 80, 60, 60
                            ],
                            body: [
                                [{
                                        text: 'No',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Transaction ID',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Transfer Type',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Debited Acc.',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Beneficiary ID',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Credited Acc.',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Amount',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Eff. Date',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Transaction Purpose',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Currency',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Charges Type',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Charges Acc.',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Remark 1',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Remark 2',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Receiver Bank Cd',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Receiver Bank Name',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Receiver Name',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Receiver Cust. Type',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Receiver Cust. No',
                                        style: 'tableHeader'
                                    },
                                    {
                                        text: 'Receiver Reference',
                                        style: 'tableHeader'
                                    }
                                ],
                                [
                                    '1', '121212', 'BCA', '131313134', '', '14132',
                                    '1141', '15 July 2025',
                                    'IDR', 'IDR', 'OUR', '143213231', 'TELP', '',
                                    'BBIJIJDA', '', 'asdrf', '', '', ''
                                ],
                                [
                                    '2', '1212121313', 'BIF', '114141', '', '121213',
                                    '121131', '15 July 2025', 'IDR', 'IDR', 'OUR',
                                    '141441', 'TELP', '', '', 'UOB', 'aered', '1', '', ' '
                                ]
                            ]
                        },
                        layout: 'lightHorizontalLines'
                    }
                ],
                styles: {
                    header: {
                        fontSize: 14,
                        bold: true
                    },
                    tableHeader: {
                        fillColor: '#000000',
                        color: '#ffffff',
                        bold: true,
                        alignment: 'center',
                        fontSize: 9,
                        margin: [0, 3, 0, 3]
                    }
                }
            };

            pdfMake.createPdf(docDefinition).open();
        } --}}

        {{-- function exportCsvMandiri(table) {
            const THRESH = @json($thresh);
            const EOL = '\r\n';

            const COMPANY_NAME = window.COMPANY_NAME || 'Identitas Perusahaan / Company Identification';
            const COMPANY_ADDR = window.COMPANY_ADDR || 'ID Perusahaan / Company ID';
            const COMPANY_PHONE = window.COMPANY_PHONE || 'Nama Perusahaan / Company Name';
            const NOTEE = window.NOTE || 'SALA';
            const tanggalDate = window.tanggalDate || new Date().toISOString().slice(0, 10); // YYYY-MM-DD

            // 24 kolom (header ID)
            const headers = [
                'Jenis Transaksi *)', 'Nomor Rekening Debit *)', 'Mata Uang Rekening Debit *) ', 'Nominal Bayar *)',
                'Nama Bank Tujuan *)', 'Kota Bank Tujuan *)', 'Nomor Rekening Tujuan *)', 'Nama Penerima *)',
                'Detail Pembayaran *)', 'Tanggal Valuta *)', 'Alamat Penerima *)', 'Tipe Penerima *)',
                'Status Kependudukan Penerima *)', 'Status Kewarganegaraan Penerima *)', 'Sandi Tujuan Transaksi *)',
                'Hubungan Pelaku Transaksi *)', 'Kategori Penerima *)', 'Kode Booking', 'Alamat Email Penerima',
                'Mata Uang Pembayaran', 'No Referensi Nasabah', 'Kode Bank Tujuan', 'Kode Kota Bank Tujuan',
                'Kode Bank ATM'
            ];

            // 31 kolom (subheader EN)
            const subheaders = [
                'Account Type', 'Transaction Purpose', 'Debited Account No', 'Debit Account Currency',
                'Payment Amount', 'Beneficiary Bank Name', 'Beneficiary Bank City', 'Beneficiary Bank Number',
                'Beneficiary Name', 'Payment Detail', 'Value Date', 'Beneficiary Address',
                'Beneficiary Citizenship Status', 'Transaction Purpose Code', 'Transactor Relationship',
                'Beneficiary Category', 'FX Booking Code', 'Beneficiary Email Address', 'Payment Currency',
                'Customer Reff No', 'Beneficiary Bank Code', 'Beneficiary Bank City Code', 'Value Date',
                'Beneficiary Citizenship Status', 'Transaction Purpose Code', 'Transactor Relationship',
                'Beneficiary Category', 'Payment Amount', 'SALA', 'Account Type', 'Transaction Purpose'
            ];

            // Panjang final semua baris = 31
            const COLS = Math.max(headers.length, subheaders.length); // 31

            // Normalisasi baris ke panjang COLS (sisanya diisi string kosong)
            const normRow = (arr) => {
                const row = Array(COLS).fill('');
                for (let i = 0; i < arr.length; i++) row[i] = arr[i];
                return row;
            };

            // Banner: isi kolom B & D (index 1 & 3) pada baris dengan panjang COLS
            const bannerRowBD = (textB = '', textD = '') => {
                const row = Array(COLS).fill('');
                row[1] = textB ?? '';
                row[3] = textD ?? '';
                return row;
            };

            const emptyRow = () => Array(COLS).fill('');

            const rowsDT = table.rows({
                search: 'applied',
                order: 'applied'
            }).data().toArray();

            const parseAmount = raw => Number(
                String(raw ?? '').replace(/Rp\s?/i, '').replace(/\./g, '').replace(/,/g, '').trim()
            ) || 0;

            // Bagi dataset berdasar THRESH
            const setLow = [],
                setHigh = [];
            for (const r of rowsDT) {
                const amt = parseAmount(r[16]); 
                (amt < THRESH ? setLow : setHigh).push(r);
            }

            // dataset → AoA, dengan parameter tipe akun
            const buildAoA = (dataset, accountTypeLabel, accountTypeCode) => {
                const aoa = [];

                // Banner 4 baris
                aoa.push(bannerRowBD(COMPANY_NAME, ''));
                aoa.push(bannerRowBD(COMPANY_ADDR, 'MULTISPUNBIBP'));
                aoa.push(bannerRowBD(COMPANY_PHONE, 'PT MULTI SPUNINDO JAYA Tbk'));
                aoa.push(bannerRowBD(NOTEE, 'NO'));

                // 3 baris kosong
                aoa.push(emptyRow());
                aoa.push(emptyRow());
                aoa.push(emptyRow());
                aoa.push(emptyRow());

                // Header + Subheader
                aoa.push(normRow(headers));
                aoa.push(normRow(subheaders));

                // Data rows
                for (const d of dataset) aoa.push(mapRow(d, accountTypeLabel, accountTypeCode));

                return aoa;
            };

            const formatAmount = (n) => (Number(n) || 0).toLocaleString('en-US', {
                minimumFractionDigits: 0,
                maximumFractionDigits: 0
            });

            // helper: "2025-01-11" atau "11/01/2025" -> "11-jan-25"
            const toDdMonYy = (val) => {
                if (!val) return '';
                let y, m, d;

                if (val instanceof Date && !isNaN(val)) {
                    y = val.getFullYear();
                    m = val.getMonth() + 1;
                    d = val.getDate();
                } else {
                    const s = String(val).trim();
                    let m1 = s.match(/^(\d{4})-(\d{2})-(\d{2})$/);
                    let m2 = s.match(/^(\d{2})\/(\d{2})\/(\d{4})$/); 
                    if (m1) {
                        y = +m1[1];
                        m = +m1[2];
                        d = +m1[3];
                    } else if (m2) {
                        d = +m2[1];
                        m = +m2[2];
                        y = +m2[3];
                    } else {
                        const dt = new Date(s);
                        if (isNaN(dt)) return '';
                        y = dt.getFullYear();
                        m = dt.getMonth() + 1;
                        d = dt.getDate();
                    }
                }

                const mons = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
                const dd = String(d).padStart(2, '0');
                const mon = mons[(m - 1 + 12) % 12];
                const yy = String(y).slice(-2);
                return `${dd}-${mon}-${yy}`;
            };

            // helper: uppercase dengan locale Indonesia + rapikan spasi
            const toUpperID = (v) => String(v ?? '')
                .replace(/\s+/g, ' ')
                .trim()
                .toLocaleUpperCase('id-ID');

            // mapping 1 baris data → 31 kolom
            const mapRow = (d, accountTypeLabel, accountTypeCode) => {
                const amountNum = parseAmount(d[16]); // angka murni: 80000
                const amountStr = formatAmount(amountNum);
                const valueDate = toDdMonYy(tanggalDate);
                return normRow([
                    accountTypeLabel, // [0]  Account Type (LABEL) ← dinamis: 'BFA - Account Number' atau 'LLG'
                    '99 - Others', // [1]  Transaction Purpose
                    '3033020692', // [2]  Debited Account No
                    'IDR', // [3]  Debit Account Currency
                    amountStr, // [4]  Payment Amount
                    d[8], // [5]  Beneficiary Bank Name
                    'SURABAYA', // [6]  Beneficiary Bank City
                    const rekening = String(d[12] || '').replace(/[^\d]/g, ''), // [7] Beneficiary Bank Number
                    toUpperID(d[5]), // [8]  Beneficiary Name
                    'Magang', // [9]  Payment Detail    
                    valueDate, // [10] Value Date
                    'Surabaya', // [11] Beneficiary Address
                    '01 - Warga Negara / Citizen', // [12] Beneficiary Citizenship Status
                    '2670 - Jasa lainnya / Other services', // [13] Transaction Purpose Code
                    'N - Non Afiliasi / Non Affiliated', // [14] Transactor Relationship
                    'A0 - Individu / Individual', // [15] Beneficiary Category
                    '', // [16] FX Booking Code
                    d[6], // [17] Beneficiary Email Address
                    'IDR', // [18] Payment Currency
                    '', // [19] Customer Reff No
                    d[9], // [20] Beneficiary Bank Code
                    '1200', // [21] Beneficiary Bank City Code
                    tanggalDate, // [22] Value Date (duplikat)
                    '01', // [23] Beneficiary Citizenship Status (kode)
                    '2670', // [24] Transaction Purpose Code (kode)
                    'N', // [25] Transactor Relationship (kode)
                    'A0', // [26] Beneficiary Category (kode)
                    amount, // [27] Payment Amount (ulang)
                    'NO', // [28] SALA
                    accountTypeCode, // [29] Account Type (KODE) ← dinamis: 'BFA' atau 'LLG'
                    '99' // [30] Transaction Purpose (kode)
                ]);
            };

            const aoaHigh = buildAoA(setHigh, 'BFA - Account Number', 'BFA');
            const aoaLow = buildAoA(setLow, 'LLG', 'LLG');

            const unparseAndDownload = (aoa, filename) => {
                const csv = Papa.unparse(aoa, {
                    quotes: false,
                    delimiter: ',',
                    newline: EOL
                });
                const withSep = csv;

                const blob = new Blob([withSep], {
                    type: 'text/csv;charset=utf-8'
                });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = filename;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            };

            unparseAndDownload(aoaLow, 'UOB_LLG.csv');
            setTimeout(() => unparseAndDownload(aoaHigh, 'UOB_BiFast.csv'), 150);
        } --}}

        //set color button datatables
        $('.dt-button').addClass('btn btn-secondary');
        $('.dt-button').removeClass('dt-button');
        //check authorize button datatables
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjmagang/resources/views/report/rpprab/result.blade.php</b> on line <b>2066</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjmagang/resources/views/report/rpprab/result.blade.php</b> on line <b>2066</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjmagang/resources/views/report/rpprab/result.blade.php</b> on line <b>2067</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjmagang/resources/views/report/rpprab/result.blade.php</b> on line <b>2067</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjmagang/resources/views/report/rpprab/result.blade.php</b> on line <b>2068</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjmagang/resources/views/report/rpprab/result.blade.php</b> on line <b>2068</b><br />
        //function delete
        function deleteData(name, msg) {
            pesan = confirm('Apakah Anda Yakin ' + msg + ' Data ' + name + ' ini ?');
            if (pesan) return true
            else return false
        }

        // ===== SELEKSI & KONFIRMASI PEMBAYARAN (BULK) =====
        function updateKonfirmasiBtn() {
            const table = $('#list_{{ $dmenu ?? 'result' }}').DataTable();
            // Ambil semua node yang tampil (setelah filter) untuk menghitung yang diceklis
            const allNodes = table.rows({
                search: 'applied'
            }).nodes();
            const $checked = $(allNodes).find('.pilih-bayar:checked');
            const total = $checked.length;

            $('#jumlah-terpilih').text(total);
            if (total > 0) {
                $('#btn-konfirmasi-bayar').removeClass('d-none');
                $('#info-pilihan').removeClass('d-none');
            } else {
                $('#btn-konfirmasi-bayar').addClass('d-none');
                $('#info-pilihan').addClass('d-none');
            }

            // Update label tombol Pilih Semua secara dinamis
            const totalCb = $(allNodes).find('.pilih-bayar').length;
            const $btnAll = $('#btn-select-all');
            if (totalCb > 0 && total === totalCb) {
                $btnAll.removeClass('btn-outline-primary').addClass('btn-primary');
                $btnAll.find('span').text('Batal Pilih');
                $btnAll.find('i').removeClass('fa-check-double').addClass('fa-times');
            } else {
                $btnAll.removeClass('btn-primary').addClass('btn-outline-primary');
                $btnAll.find('span').text('Pilih Semua');
                $btnAll.find('i').removeClass('fa-times').addClass('fa-check-double');
            }
        }

        // Action Pilih Semua
        $(document).on('click', '#btn-select-all', function() {
            const table = $('#list_{{ $dmenu ?? 'result' }}').DataTable();
            const allNodes = table.rows({
                search: 'applied'
            }).nodes();
            const $checkboxes = $(allNodes).find('.pilih-bayar');

            const totalCb = $checkboxes.length;
            const totalChecked = $checkboxes.filter(':checked').length;
            const targetState = !(totalCb > 0 && totalChecked === totalCb);

            $checkboxes.prop('checked', targetState);

            // Highlight visual untuk SEMUA baris
            $(allNodes).each(function() {
                if (targetState) {
                    $(this).css('background-color', '#e8f5e9');
                } else {
                    $(this).css('background-color', '');
                }
            });

            updateKonfirmasiBtn();
        });



        // Checkbox pilih baris
        $(document).on('change', '.pilih-bayar', function() {
            // Highlight visual baris yang dipilih
            const $row = $(this).closest('tr');
            if ($(this).is(':checked')) {
                $row.css('background-color', '#e8f5e9');
            } else {
                $row.css('background-color', '');
            }
            updateKonfirmasiBtn();
        });

        // Tombol konfirmasi bayar
        $('#btn-konfirmasi-bayar').on('click', function() {
            const table = $('#list_{{ $dmenu ?? 'result' }}').DataTable();
            const allNodes = table.rows({
                search: 'applied'
            }).nodes();
            const $checked = $(allNodes).find('.pilih-bayar:checked');
            const ids = $checked.map(function() {
                return $(this).data('id');
            }).get();

            let totalPopup = 0;
            const dataList = $checked.map(function() {
                const nama = $(this).data('nama');
                const nominal = parseFloat($(this).data('nominal') || 0);
                totalPopup += nominal;
                return {
                    nama,
                    nominal
                };
            }).get();

            const jumlah = ids.length;

            if (jumlah === 0) return;

            // Tampilkan konfirmasi sebelum submit
            Swal.fire({
                icon: 'question',
                title: 'Konfirmasi Pembayaran',
                html: `<p>Anda akan mengkonfirmasi <strong>${jumlah} peserta</strong>:</p>
                        <div class="text-start mt-2 p-2 rounded" style="background:#f8f9fa; font-size:0.85rem; max-height:200px; overflow-y:auto;">
                            <table class="table table-sm mb-0">
                                <thead>
                                    <tr>
                                        <th>Nama Peserta</th>
                                        <th class="text-end">Nominal</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${dataList.map(item => `
                                                                        <tr>
                                                                            <td>${item.nama}</td>
                                                                            <td class="text-end text-danger font-weight-bold">Rp${item.nominal.toLocaleString('id-ID')}</td>
                                                                        </tr>
                                                                    `).join('')}
                                </tbody>
                                <tfoot>
                                    <tr class="table-active">
                                        <th class="font-weight-bolder">TOTAL</th>
                                        <th class="text-end text-danger font-weight-bolder">Rp${totalPopup.toLocaleString('id-ID')}</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <p class="mt-3 mb-0">Konfirmasi status menjadi <span class="badge bg-success">Sudah Dibayar</span>?</p>`,
                showCancelButton: true,
                confirmButtonText: 'Ya, Konfirmasi!',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#28a745',
            }).then(function(result) {
                if (!result.isConfirmed) return;

                $('#btn-konfirmasi-bayar').prop('disabled', true).html(
                    '<i class="fas fa-spinner fa-spin me-1"></i> Memproses...');

                $.ajax({
                    url: '{{ route('utils.konfirmasi-bayar') }}',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        id_rows: ids
                    },
                    success: function(res) {
                        // Update tampilan baris-baris yang dikonfirmasi
                        $checked.each(function() {
                            const $cb = $(this);
                            const $wrap = $cb.closest('td').find('div');
                            $cb.closest('tr').css('background-color', '');
                            // Ganti isi td menjadi badge Sudah Dibayar + tanggal
                            const $td = $cb.closest('td');
                            $td.attr('data-order', 'Sudah Dibayar');
                            $td.find('.d-flex.flex-column').html(
                                `<span class="badge bg-success">Sudah Dibayar</span>
                                 <small class="text-muted" style="font-size:0.7rem;">${res.tgl_bayar}</small>`
                            );
                        });

                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: res.message,
                            timer: 2000,
                            showConfirmButton: false,
                        });

                        // UPDATE BANNER NOMINAL SECARA DINAMIS
                        let totalBayar = 0;
                        $checked.each(function() {
                            totalBayar += parseFloat($(this).data('nominal') || 0);
                        });

                        const $bannerTotal = $('#banner-total-nominal');
                        let currentTotal = parseFloat($bannerTotal.data('value') || 0);
                        let newTotal = Math.max(0, currentTotal - totalBayar);

                        $bannerTotal.data('value', newTotal);
                        $bannerTotal.text('Rp' + newTotal.toLocaleString('id-ID'));

                        if (newTotal <= 0) {
                            $('#banner-status-text').text(
                                'Informasi: Tidak ada tagihan (Lunas)');
                        }

                        updateKonfirmasiBtn();
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: xhr.responseJSON?.message ||
                                'Terjadi kesalahan server.',
                        });
                    },
                    complete: function() {
                        $('#btn-konfirmasi-bayar').prop('disabled', false)
                            .html(
                                '<i class="fas fa-check-circle me-1"></i><span class="font-weight-bold">Konfirmasi Bayar (<span id="jumlah-terpilih">0</span>)</span>'
                            );
                    }
                });
            });
        });
    </script>
@endpush