@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 {{ $title_menu }}</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">
                                        {{-- button back --}}
                                        <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</button>
                                    </div>
                                    <div class="col-md-3 md-auto justify-content-end row">
                                        <div class="col">
                                            {{-- set value filter --}}
                                                                                        @foreach ($filter as $key => $value)
                                                <input type="hidden" name="f{{ $key }}"
                                                    value="{{ $value }}" />
                                                @php
                                                    if (
                                                        preg_replace('/\s+/', '', strtolower(@$table_class->alias)) ==
                                                        preg_replace('/\s+/', '', strtolower($key))
                                                    ) {
                                                        $check_filter = $value == '%' ? '' : $value;
                                                    }
                                                @endphp
                                            @endforeach
                                        </div>
                                        <div class="col">
                                            {{-- display label alias on class filter --}}
                                            Filter {{ @$table_class->alias }} :
                                            <select class="form-select" id="{{ @$table_class->field }}"
                                                style="width: 150px;">
                                                @if (@$table_class->query != '')
                                                    @if ($check_filter != '')
                                                        @php
                                                            $data_query = DB::select(@$table_class->query);
                                                        @endphp
                                                        @foreach ($data_query as $q)
                                                            <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjrekaptagihan/resources/views/report/rptrkp/result.blade.php</b> on line <b>51</b><br />
                                                            @if ($check_filter == $sAsArray[0])
                                                                <option value="{{ $sAsArray[0] }}">
                                                                    {{ $sAsArray[0] }}
                                                                </option>
                                                            @endif
                                                        @endforeach
                                                    @else
                                                        <option value="" selected>% - All</option>
                                                        @php
                                                            $data_query = DB::select(@$table_class->query);
                                                        @endphp
                                                        @foreach ($data_query as $q)
                                                            <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjrekaptagihan/resources/views/report/rptrkp/result.blade.php</b> on line <b>64</b><br />
                                                            <option value="{{ $sAsArray[0] }}">
                                                                {{ $sAsArray[0] }}
                                                            </option>
                                                        @endforeach
                                                    @endif
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    {{-- Server-side mode: render header dari $table_columns --}}
                                    @if (isset($use_server_side) && $use_server_side && isset($table_columns))
                                        <thead class="thead-light">
                                            <tr>
                                                <th><input type="checkbox" id="checkAll"></th>
                                                <th>No</th>
                                                @foreach ($table_columns as $header)
                                                    @if (in_array($header, ['ID Kuitansi', 'ID DP Request']))
                                                        <th class="d-none">{{ $header }}</th>
                                                    @else
                                                        <th>{{ $header }}</th>
                                                    @endif
                                                @endforeach
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{-- Data akan diisi via AJAX --}}
                                        </tbody>
                                        {{-- Client-side mode: render dari $table_result seperti biasa --}}
                                    @elseif ($table_result)
                                        <thead class="thead-light">
                                            <tr>
                                                <th><input type="checkbox" id="checkAll"></th> {{-- untuk select all --}}
                                                <th>No</th>
                                                {{-- set table header --}}
                                                @foreach ($table_result as $result)
                                                    @php
                                                        $sAsArray = array_keys((array) $result);
                                                        $i = 0;
                                                    @endphp
                                                @endforeach
                                                @foreach ($sAsArray as $header)
                                                    @if (substr($header, 0, 3) == 'IMG')
                                                        <th>{{ substr($header, 4) }}</th>
                                                    @elseif (substr($header, 0, 3) == 'CDT')
                                                        <th>{{ substr($header, 6) . '-' . substr($header, 3, 2) }}</th>
                                                    @elseif (in_array($header, ['ID Kuitansi', 'ID DP Request']))
                                                        <th class="d-none">{{ $header }}</th>
                                                    @else
                                                        <th>{{ $header }}</th>
                                                    @endif
                                                    @php
                                                        $i++;
                                                    @endphp
                                                @endforeach
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{-- retrieve table result --}}
                                            @foreach ($table_result as $detail)
                                                @php
                                                    $idKuitansi = $detail->{'ID Kuitansi'} ?? null;
                                                    $idDprequest = $detail->{'ID DP Request'} ?? null;
                                                @endphp

                                                <tr
                                                    {{ @$detail->isactive == '0' || @$detail->ISACTIVE == '0' ? 'style=background-color:#ffe9ed;' : '' }}>
                                                    <td>
                                                        @if ($idKuitansi)
                                                            <input type="checkbox" class="rowCheckbox"
                                                                value="{{ $idKuitansi }}">
                                                        @endif
                                                    </td>
                                                    <td>{{ $loop->iteration }}</td>
                                                    @foreach ($table_result as $result)
                                                        @php
                                                            $field = array_keys((array) $result);
                                                            $i = 0;
                                                        @endphp
                                                    @endforeach
                                                    @foreach ($field as $header)
                                                        @php
                                                            $string = $header;
                                                            $img_id = '';
                                                            $characters =
                                                                'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
                                                            for ($i = 0; $i < 10; $i++) {
                                                                $img_id .=
                                                                    $characters[mt_rand(0, strlen($characters) - 1)];
                                                            }
                                                        @endphp
                                                        {{-- @continue($header == 'ID Kuitansi' || $header == 'ID DP Request') skip juga saat looping isi baris --}}

                                                        @if ($header == 'ID DP Request' || $header == 'ID Kuitansi')
                                                            <td class="d-none">{{ $detail->$header }}</td>
                                                            @continue
                                                        @endif
                                                        @if (substr($string, 0, 3) == 'IMG')
                                                            <td class="text-sm font-weight-normal">
                                                                <span class="my-2 text-xs">
                                                                    <img src="{{ asset('/storage' . '/' . $detail->$string) }}"
                                                                        alt="image" style="height: 40px;"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#{{ $img_id }}">
                                                                </span>
                                                                <span
                                                                    style="display: none;">{{ asset('/storage' . '/' . $detail->$string) }}
                                                                </span>
                                                                <!-- Modal -->
                                                                <div class="modal fade" id="{{ $img_id }}"
                                                                    tabindex="-1" role="dialog"
                                                                    aria-labelledby="imageModalLabel" aria-hidden="true">
                                                                    <div class="modal-dialog modal-dialog-centered"
                                                                        role="document">
                                                                        <div class="modal-content">
                                                                            <div class="modal-header">
                                                                                <h5 class="modal-title"
                                                                                    id="imageModalLabel">
                                                                                    Preview Image
                                                                                </h5>
                                                                                <button type="button" class="btn-close"
                                                                                    data-bs-dismiss="modal"
                                                                                    aria-label="Close">
                                                                                    <span aria-hidden="true">&times;</span>
                                                                                </button>
                                                                            </div>
                                                                            <div class="modal-body">
                                                                                <img src="{{ asset('/storage' . '/' . $detail->$string) }}"
                                                                                    id="preview" alt="image"
                                                                                    class="w-100 border-radius-lg shadow-sm">
                                                                            </div>
                                                                            <div class="modal-footer">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        @elseif (substr($string, 0, 3) == 'CDT')
                                                            <td class="text-sm font-weight-normal {{ $detail->$string }}">
                                                                {{ $detail->$string }}
                                                            </td>
                                                            <script>
                                                                var inputDate = new Date('{{ $detail->$string }}');
                                                                var currentDate = new Date();
                                                                var futureDate = new Date(currentDate.setDate(currentDate.getDate() + parseInt('{{ substr($string, 3, 2) }}')));

                                                                if (inputDate <= futureDate) {
                                                                    $('.{{ $detail->$string }}').parents('tr').addClass('exp');
                                                                    $('.{{ $detail->$string }}').parents('tr').css('background-color', '#ffe768');
                                                                }
                                                            </script>
                                                        @else
                                                            <td class="text-sm font-weight-normal">
                                                                {{ $detail->$string }}</td>
                                                        @endif
                                                        @php
                                                            $i++;
                                                        @endphp
                                                    @endforeach
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    @endif
                                </table>
                                <!-- Modal untuk Mengatur Bank -->
                                <div class="modal fade" id="updateBankModal" tabindex="-1"
                                    aria-labelledby="updateBankModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="updateBankModalLabel">Set Bank</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <form id="bankForm">
                                                    <div class="mb-3">
                                                        <label for="bankName" class="form-label">Nama Bank</label>
                                                        <select class="form-select" id="bankName" name="idbank" required>
                                                            <!-- Options akan dimuat secara dinamis oleh JavaScript -->
                                                        </select>
                                                    </div>
                                                    <!-- Input tersembunyi untuk ID tanda terima atau data lain yang diperlukan -->
                                                    <input type="hidden" id="bankId" name="idbank">
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Close</button>
                                                <button type="button" class="btn btn-primary"
                                                    onclick="updateBank()">Save Changes</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Modal untuk Export CSV Bank Selection -->
                                <div class="modal fade" id="exportCSVModal" tabindex="-1"
                                    aria-labelledby="exportCSVModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exportCSVModalLabel">Pilih Bank untuk Export
                                                    CSV</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <form id="exportCSVForm">
                                                    <div class="mb-3">
                                                        <label for="exportBankName" class="form-label">Nama Bank</label>
                                                        <select class="form-select" id="exportBankName" name="idbank"
                                                            required>
                                                            <!-- Options akan dimuat secara dinamis oleh JavaScript -->
                                                        </select>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Close</button>
                                                <button type="button" class="btn btn-primary"
                                                    onclick="confirmExportCSV()">Export</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Modal untuk Konversi Kurs -->
                                <div class="modal fade" id="konversiKursModal" tabindex="-1"
                                    aria-labelledby="konversiKursModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header bg-success text-white">
                                                <h5 class="modal-title" id="konversiKursModalLabel">
                                                    <i class="fas fa-exchange-alt me-2"></i>Konversi Kurs ke IDR
                                                </h5>
                                                <button type="button" class="btn-close btn-close-white"
                                                    data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <form id="konversiKursForm">
                                                    <!-- Info Data yang Dipilih -->
                                                    <div class="card mb-3">
                                                        <div class="card-header bg-light">
                                                            <strong>Data yang Dipilih</strong>
                                                        </div>
                                                        <div class="card-body">
                                                            <div class="table-responsive">
                                                                <table class="table table-sm table-bordered"
                                                                    id="tableKonversiData">
                                                                    <thead class="thead-light">
                                                                        <tr>
                                                                            <th>ID Tanda Terima</th>
                                                                            <th>Vendor</th>
                                                                            <th>Currency</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody id="konversiDataBody">
                                                                        <!-- Data akan dimuat via JavaScript -->
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Total Nominal -->
                                                    <div class="row mb-3">
                                                        <div class="col-md-6">
                                                            <label class="form-label fw-bold">Total Nominal (Tanpa PPh,
                                                                PPN, PPh22)</label>
                                                            <input type="text" class="form-control text-end"
                                                                id="totalNominalDisplay" readonly>
                                                            <input type="hidden" id="totalNominal" name="total_nominal">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label fw-bold">Currency Asal</label>
                                                            <input type="text" class="form-control" id="currFrom"
                                                                name="curr_from" readonly>
                                                        </div>
                                                    </div>

                                                    <!-- Input Kurs -->
                                                    <div class="row mb-3">
                                                        <div class="col-md-6">
                                                            <label class="form-label fw-bold">Nominal Kurs (ke IDR)</label>
                                                            <div class="input-group">
                                                                <span class="input-group-text">Rp</span>
                                                                <input type="number" class="form-control"
                                                                    id="nominalKurs" name="nominal_kurs"
                                                                    placeholder="Contoh: 16000" step="0.01"
                                                                    min="0" required>
                                                            </div>
                                                            <small class="text-muted">Masukkan kurs USD to IDR saat
                                                                ini</small>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label fw-bold">Hasil Konversi (IDR)</label>
                                                            <div class="input-group">
                                                                <span class="input-group-text">Rp</span>
                                                                <input type="text"
                                                                    class="form-control text-end fw-bold text-dark"
                                                                    id="hasilKursDisplay" readonly>
                                                                <input type="hidden" id="hasilKurs" name="hasil_kurs">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Warning jika sudah pernah dikonversi -->
                                                    <div class="alert alert-warning d-none" id="warningAlreadyConverted">
                                                        <i class="fas fa-exclamation-triangle me-2"></i>
                                                        Data ini sudah pernah dikonversi. Menyimpan akan menimpa data
                                                        sebelumnya.
                                                    </div>

                                                    <input type="hidden" id="tanterimaIds" name="tanterima_ids">
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                    <i class="fas fa-times me-1"></i>Batal
                                                </button>
                                                <button type="button" class="btn btn-success" onclick="saveKonversi()">
                                                    <i class="fas fa-save me-1"></i>Simpan Konversi
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Modal untuk Konversi Kurs Kuitansi (KU) -->
                                <div class="modal fade" id="konversiKursKUModal" tabindex="-1"
                                    aria-labelledby="konversiKursKUModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-md">
                                        <div class="modal-content">
                                            <div class="modal-header" style="background-color: #FF8C00; color: white;">
                                                <h5 class="modal-title" id="konversiKursKUModalLabel">
                                                    <i class="fas fa-exchange-alt me-2"></i>Konversi Kurs Kuitansi ke IDR
                                                </h5>
                                                <button type="button" class="btn-close btn-close-white"
                                                    data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <form id="konversiKursKUForm">
                                                    <!-- Info Kuitansi -->
                                                    <div class="card mb-3">
                                                        <div class="card-header" style="background-color: #fff6cc;">
                                                            <strong>Data Kuitansi</strong>
                                                        </div>
                                                        <div class="card-body">
                                                            <div class="row mb-2">
                                                                <div class="col-4 fw-bold">ID Tanda Terima</div>
                                                                <div class="col-8" id="kuIdTanterima">-</div>
                                                            </div>
                                                            <div class="row mb-2">
                                                                <div class="col-4 fw-bold">Vendor</div>
                                                                <div class="col-8" id="kuVendor">-</div>
                                                            </div>
                                                            <div class="row mb-2">
                                                                <div class="col-4 fw-bold">No. Kuitansi</div>
                                                                <div class="col-8" id="kuNoKuitansi">-</div>
                                                            </div>
                                                            <div class="row mb-2">
                                                                <div class="col-4 fw-bold">Currency Asal</div>
                                                                <div class="col-8"><span class="badge bg-info"
                                                                        id="kuCurrFrom">-</span></div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Total Nominal -->
                                                    <div class="row mb-3">
                                                        <div class="col-md-6">
                                                            <label class="form-label fw-bold">Nominal Kuitansi</label>
                                                            <input type="text" class="form-control text-end"
                                                                id="kuTotalNominalDisplay" readonly>
                                                            <input type="hidden" id="kuTotalNominal"
                                                                name="ku_total_nominal">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label fw-bold">Nominal Kurs (ke IDR)</label>
                                                            <div class="input-group">
                                                                <span class="input-group-text">Rp</span>
                                                                <input type="number" class="form-control"
                                                                    id="kuNominalKurs" name="ku_nominal_kurs"
                                                                    placeholder="Contoh: 16000" step="0.01"
                                                                    min="0" required>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row mb-3">
                                                        <div class="col-md-12">
                                                            <label class="form-label fw-bold">Hasil Konversi (IDR)</label>
                                                            <div class="input-group">
                                                                <span class="input-group-text">Rp</span>
                                                                <input type="text"
                                                                    class="form-control text-end fw-bold text-dark"
                                                                    id="kuHasilKursDisplay" readonly>
                                                                <input type="hidden" id="kuHasilKurs"
                                                                    name="ku_hasil_kurs">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Warning jika sudah pernah dikonversi -->
                                                    <div class="alert alert-warning d-none"
                                                        id="warningAlreadyConvertedKU">
                                                        <i class="fas fa-exclamation-triangle me-2"></i>
                                                        Data ini sudah pernah dikonversi. Menyimpan akan menimpa data
                                                        sebelumnya.
                                                    </div>

                                                    <input type="hidden" id="kuIdKuitansi" name="ku_id_kuitansi">
                                                    <input type="hidden" id="kuCurrFromVal" name="ku_curr_from">
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                    <i class="fas fa-times me-1"></i>Batal
                                                </button>
                                                <button type="button" class="btn"
                                                    style="background-color: #FF8C00; color: white;"
                                                    onclick="saveKonversiKU()">
                                                    <i class="fas fa-save me-1"></i>Simpan Konversi
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                @if ($table_result || (isset($use_server_side) && $use_server_side))
                                    <div class="nav-wrapper" id="noted"><code>Note : (<i aria-hidden="true"
                                                style="color: #c2e1ff;" class="fas fa-circle"></i> Data Tanda Terima), (<i
                                                aria-hidden="true" style="color: #fff6cc;" class="fas fa-circle"></i>
                                            Data
                                            Kuitansi), (<i aria-hidden="true" style="color: #FFD699;"
                                                class="fas fa-circle"></i> KU IDR), (<i aria-hidden="true"
                                                style="color: #ddffdd;" class="fas fa-circle"></i> Data Invoicing), (<i
                                                aria-hidden="true" style="color: #e8ddff;" class="fas fa-circle"></i>
                                            Data Outgoing), (<i aria-hidden="true" style="color: #ffc2cd;"
                                                class="fas fa-circle"></i>
                                            Belum
                                            Tersinkron)(<i aria-hidden="true" style="color: #e0e0e0;"
                                                class="fas fa-circle"></i>
                                            Data Sinkron Belum Sesuai), (<i aria-hidden="true" style="color: #90EE90;"
                                                class="fas fa-circle"></i>
                                            Change Currency)</code>
                                    </div>
                                @else
                                    <div class="nav-wrapper"><code> Data not found!</code></div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Pass variables to JavaScript for server-side pagination --}}
    <script>
        // Server-side configuration
        var useServerSide = {{ isset($use_server_side) && $use_server_side ? 'true' : 'false' }};
        var estimatedCount = {{ $estimated_count ?? 0 }};
        var maxLimit = {{ $max_limit ?? 2000 }};
        var serverSideThreshold = {{ $server_side_threshold ?? 200 }};

        // Legacy variables (backward compatibility)
        var useAjaxPagination = useServerSide;
        var totalDataCount = estimatedCount;

        // Filter values untuk AJAX requests
        var filterValues = {
            frdate: '{{ $filter['frdate'] ?? '2000-01-01' }}',
            todate: '{{ $filter['todate'] ?? '2100-01-01' }}',
            date: '{{ $filter['date'] ?? '%' }}',
            nama_vendor: '{{ $filter['nama_vendor'] ?? '%' }}',
            nama_dept: '{{ $filter['nama_dept'] ?? '%' }}',
            curr: '{{ $filter['curr'] ?? '%' }}',
            kategori_pembayaran: '{{ $filter['kategori_pembayaran'] ?? '%' }}',
            no_kuitansi: '{{ $filter['no_kuitansi'] ?? '%' }}'
        };
    </script>

    {{-- 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')
    <style>
        /* HEADER utama di scrollX */
        #list_{{ $dmenu }}_wrapper .dataTables_scrollHead,
        #list_{{ $dmenu }}_wrapper .dataTables_scrollHead thead th {
            background-color: #B0E9EB !important;
            /* versi solid dari #00b7bd4f */
            color: inherit !important;
            /* biar warna text ikut default/theme */
            background-image: none !important;
        }

        /* HEADER clone FixedColumns kiri & kanan */
        #list_{{ $dmenu }}_wrapper .DTFC_LeftHeadWrapper,
        #list_{{ $dmenu }}_wrapper .DTFC_LeftHeadWrapper table thead th,
        #list_{{ $dmenu }}_wrapper .DTFC_LeftHeadWrapper table thead td,
        #list_{{ $dmenu }}_wrapper .DTFC_RightHeadWrapper,
        #list_{{ $dmenu }}_wrapper .DTFC_RightHeadWrapper table thead th,
        #list_{{ $dmenu }}_wrapper .DTFC_RightHeadWrapper table thead td {
            background-color: #B0E9EB !important;
            color: inherit !important;
            background-image: none !important;
        }
    </style>
    <script>
        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' || columnNames == 'STATUS') {
                    columnAbjad = String.fromCharCode(65 + index);
                }
                if (filtercolom == filter) {
                    indexStatus = index;
                }
            }
            //redraw table where filter
            $('#{{ @$table_class->field }}').change(function() {
                table.column(indexStatus).search($(this).val()).draw();
            })
            //check class exp
            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>`)
            }
        });

        function printReport() {
            let ffrdate = $('input[name="ffrdate"]').val() || '2000-01-01';
            let ftodate = $('input[name="ftodate"]').val() || '2100-01-01';
            let fdate = $('input[name="fdate"]').val() || '%';

            let fnama_vendor = $('input[name="fnama_vendor"]').val() || '%';
            let fnama_dept = $('input[name="fnama_dept"]').val() || '%';
            let fcurr = $('input[name="fcurr"]').val() || '%';
            let fkategori_pembayaran = $('input[name="fkategori_pembayaran"]').val() || '%';
            let fno_kuitansi = $('input[name="fno_kuitansi"]').val() || '%';

            // Kumpulkan ID dari checkbox yang dicentang
            getSelectedIds(function(checkedIds) {

                if (checkedIds.length === 0) {
                    Swal.fire('Tidak ada data yang dipilih',
                        'Silakan centang setidaknya 1 baris untuk print R. Invoicing', 'warning');
                    return;
                }

                // Buat form hidden dan submit via POST ke tab baru
                let form = document.createElement('form');
                form.method = 'POST';
                form.action = "{{ route('rptrkp.print') }}";
                form.target = '_blank';

                // CSRF token
                let csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = '_token';
                csrfInput.value = '{{ csrf_token() }}';
                form.appendChild(csrfInput);

                // Filter parameters
                let params = {
                    ffrdate: ffrdate,
                    ftodate: ftodate,
                    fdate: fdate,
                    fnama_vendor: fnama_vendor,
                    fnama_dept: fnama_dept,
                    fcurr: fcurr,
                    fkategori_pembayaran: fkategori_pembayaran,
                    fno_kuitansi: fno_kuitansi
                };

                for (let key in params) {
                    let input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = key;
                    input.value = params[key];
                    form.appendChild(input);
                }

                // Selected IDs
                if (checkedIds.length > 0) {
                    let idsInput = document.createElement('input');
                    idsInput.type = 'hidden';
                    idsInput.name = 'selected_ids';
                    idsInput.value = JSON.stringify(checkedIds);
                    form.appendChild(idsInput);
                }

                document.body.appendChild(form);
                form.submit();
                document.body.removeChild(form);
            });
        }

        function printReportAll() {
            let ffrdate = $('input[name="ffrdate"]').val() || '2000-01-01';
            let ftodate = $('input[name="ftodate"]').val() || '2100-01-01';
            let fdate = $('input[name="fdate"]').val() || '%';

            let fnama_vendor = $('input[name="fnama_vendor"]').val() || '%';
            let fnama_dept = $('input[name="fnama_dept"]').val() || '%';
            let fcurr = $('input[name="fcurr"]').val() || '%';
            let fkategori_pembayaran = $('input[name="fkategori_pembayaran"]').val() || '%';
            let fno_kuitansi = $('input[name="fno_kuitansi"]').val() || '%';

            let url = "{{ route('rptrkp.printAll') }}";

            url +=
                '?ffrdate=' + encodeURIComponent(ffrdate) +
                '&ftodate=' + encodeURIComponent(ftodate) +
                '&fdate=' + encodeURIComponent(fdate) +
                '&fnama_vendor=' + encodeURIComponent(fnama_vendor) +
                '&fnama_dept=' + encodeURIComponent(fnama_dept) +
                '&fcurr=' + encodeURIComponent(fcurr) +
                '&fkategori_pembayaran=' + encodeURIComponent(fkategori_pembayaran) +
                '&fno_kuitansi=' + encodeURIComponent(fno_kuitansi);

            console.log('url report:', url);

            window.open(url, '_blank');
        }

        function printVoucher() {
            let ffrdate = $('input[name="ffrdate"]').val();
            let ftodate = $('input[name="ftodate"]').val();
            let fdate = $('input[name="fdate"]').val();
            let fno_kuitansi = $('input[name="fno_kuitansi"]').val() || '%';
            let fnama_vendor = $('input[name="fnama_vendor"]').val() || '%';
            let fcurr = $('input[name="fcurr"]').val() || '%';
            var baseUrl = "{{ url($url_menu . '/printVoucher') }}";
            var params =
                `?ffrdate=${ffrdate}&ftodate=${ftodate}&fdate=${fdate}&fno_kuitansi=${fno_kuitansi}&fnama_vendor=${fnama_vendor}&fcurr=${fcurr}`;

            // Cek dulu apakah ada data tidak sesuai via AJAX
            $.ajax({
                url: "{{ url($url_menu . '/checkVoucherData') }}",
                method: 'GET',
                data: {
                    ffrdate: ffrdate,
                    ftodate: ftodate,
                    fdate: fdate,
                    fno_kuitansi: fno_kuitansi,
                    fnama_vendor: fnama_vendor,
                    fcurr: fcurr
                },
                success: function(response) {
                    if (response.has_mismatched_data) {
                        // Ada data tidak sesuai, tampilkan alert
                        Swal.fire({
                            title: 'Peringatan Data Tidak Sesuai',
                            html: `<div style="text-align: left;">
                                <p style="color: #FF8C00;">⚠️ Ada <strong>${response.mismatched_count}</strong> data dengan status <strong style="color: #D32F2F;">Tidak Sesuai</strong>.</p>
                                <p style="margin-top: 10px; font-size: 0.95em; color: #666;">Data sinkron belum sesuai. Apakah Anda ingin melanjutkan?</p>
                                <p style="margin-top: 10px; font-size: 0.85em; color: #999; font-style: italic;">Jika melanjutkan, PDF akan diberi tanda watermark "DATA TIDAK SESUAI".</p>
                            </div>`,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Lanjutkan',
                            cancelButtonText: 'Tutup',
                            confirmButtonColor: '#FF8C00',
                            cancelButtonColor: '#6c757d'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                // Buka dengan watermark
                                window.open(baseUrl + params + '&watermark=1', '_blank');
                            }
                        });
                    } else {
                        // Tidak ada data tidak sesuai, langsung buka
                        window.open(baseUrl + params, '_blank');
                    }
                },
                error: function() {
                    // Jika error, langsung buka tanpa watermark
                    window.open(baseUrl + params, '_blank');
                }
            });
        }

        // Common DataTable configuration
        var commonDataTableConfig = {
            "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)",
                "processing": "Memproses..."
            },
            searchDelay: 600,
            responsive: false,
            scrollX: true,
            scrollCollapse: true,
            fixedColumns: {
                leftColumns: 5
            },
            dom: 'Bfrtip',
            buttons: [{
                    text: '<i class="fas fa-file-excel me-1 text-lg text-success"> </i><span class="font-weight-bold"> Excel',
                    action: function(e, dt, node, config) {
                        exportExcel();
                    }
                },
                {
                    extend: 'collection',
                    text: '<i class="fas fa-print me-1 text-lg text-danger"></i><span class="font-weight-bold"> Print</span>',
                    className: 'btn btn-secondary dropdown-toggle',
                    background: false,
                    autoClose: true,
                    buttons: [{
                            text: '<i class="fas fa-file-invoice me-1"></i> R. Invoicing',
                            action: () => printReport()
                        },
                        {
                            text: '<i class="fas fa-file-alt me-1"></i> R. Tanda Terima',
                            action: function(e, dt, node, config) {
                                printReportAll();
                            }
                        }
                    ]
                },
                {
                    text: '<i class="fas fa-money-check me-1 text-lg text-info"> </i><span class="font-weight-bold"> V. Bank Keluar',
                    action: function(e, dt, button, config) {
                        printVoucher();
                    }
                },
                {
                    text: '<i class="fas fa-gear me-1 text-lg text-primary"></i><span class="font-weight-bold"> Set Bank',
                    action: function(e, dt, node, config) {
                        $('#updateBankModal').modal('show');
                        loadBankOptions();
                    }
                },
                {
                    text: '<i class="fas fa-exchange-alt me-1 text-lg text-success"></i><span class="font-weight-bold"> Konversi',
                    action: function(e, dt, node, config) {
                        openKonversiModal();
                    }
                },
                {
                    text: '<i class="fas fa-file-csv me-1 text-lg text-warning"></i><span class="font-weight-bold"> Export CSV',
                    className: 'btn-export-csv',
                    action: function(e, dt, node, config) {
                        exportCSV();
                    }
                },
            ],
            columnDefs: [{
                targets: [14, 15, 20, 21, 22, 23, 31, 35],
                render: function(data, type) {
                    const num = parseFloat(data);
                    if ((type === 'display' || type === 'filter') && !isNaN(num)) {
                        return num.toLocaleString('en-US', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        });
                    }
                    return data;
                }
            }],
            drawCallback: function(settings) {
                const $table = $('#list_{{ $dmenu }}');
                const api = $table.DataTable();

                // normalizer biar aman dari HTML, NBSP, zero-width
                function normText(v) {
                    return String(v ?? '')
                        .replace(/<[^>]*>/g, '') // buang tag HTML
                        .replace(/\u00A0/g, ' ') // &nbsp;
                        .replace(/\u200B/g, '') // zero width
                        .trim();
                }

                // cari index kolom berdasar teks header (lebih robust)
                function findColIndexByHeader(regex, fallbackIdx) {
                    let found = -1;
                    api.columns().every(function(i) {
                        const th = this.header();
                        if (!th) return;
                        const t = $(th).text().trim().toLowerCase().replace(/\s+/g, ' ');
                        if (regex.test(t)) {
                            found = i;
                            return false;
                        }
                    });
                    return found >= 0 ? found : fallbackIdx;
                }

                // ambil index kolom penting dari header (fallback sesuai susunanmu)
                const statusIdx = findColIndexByHeader(/^status\s*syn$|^status\s*sync$|^status$/, 30);
                const syncIdx = findColIndexByHeader(/tgl\.?\s*sinkron\s*invoicing/, 29);

                const alignRightColumns = [15, 16, 20, 21, 22, 23, 24, 26, 27, 31, 32, 34, 36];
                $table.find('tbody tr').each(function() {
                    const $row = $(this);

                    // kalau pakai DataTables Responsive, skip child row
                    if ($row.hasClass('child')) return;

                    const rowNode = $row.get(0);
                    const $cells = $row.find('td');

                    // Ambil row index DataTables dari rowNode
                    const dtRowIdx = api.row(rowNode).index();
                    if (dtRowIdx === undefined) return;

                    // ALIGN RIGHT (pakai node row yang benar)
                    alignRightColumns.forEach((colIdx) => {
                        const cellNode = api.cell(rowNode, colIdx).node();
                        if (cellNode) $(cellNode).addClass('text-end');
                    });

                    // Ambil value dari DataTables API (bukan DOM td)
                    const statusValue = normText(api.cell(dtRowIdx, statusIdx).data());
                    const syncValue = normText(api.cell(dtRowIdx, syncIdx).data());

                    // Flag pewarnaan
                    let isRedRow = false; // belum sync invoicing (tgl sinkron kosong)
                    let isGreyRow = false; // status = 0
                    if (syncValue === '') isRedRow = true;
                    if (statusValue === '0') isGreyRow = true;

                    // --- DP link (gunakan cellNode kolom asli, bukan $cells.eq) ---
                    const cellDP = api.cell(rowNode, 22).node(); // kolom 22 = Nominal DP
                    if (cellDP) {
                        const $cellDP = $(cellDP);
                        const rawValue = $cellDP.text().replaceAll(',', '').trim();

                        if (!isNaN(rawValue) && rawValue !== '') {
                            const floatVal = parseFloat(rawValue);

                            const idTanterimaNode = api.cell(rowNode, 2)
                                .node(); // kolom 2 = ID Tanda terima
                            const dplistNode = api.cell(rowNode, 18).node(); // kolom 18 = ID DP Request

                            const idTanterima = idTanterimaNode ? $(idTanterimaNode).text().trim() : '';
                            const dplist = dplistNode ? $(dplistNode).text().trim() : '';

                            $cellDP.html(`
                                <a href="javascript:void(0);" class="dp-detail-link fw-bold text-dark"
                                data-id="${idTanterima}" data-dplist="${dplist}"
                                title="Lihat detail DP" style="cursor:pointer">
                                ${floatVal.toLocaleString('id-ID',{ minimumFractionDigits:2, maximumFractionDigits:2 })}
                                <i class="fas fa-external-link-alt ms-1"></i>
                                </a>
                            `);
                        }
                    }

                    // --- PEWARNAAN BLOK NORMAL (PAKAI INDEX KOLOM ASLI) ---
                    $cells.each(function() {
                        const cellIdx = api.cell(this).index();
                        if (!cellIdx) return;
                        const col = cellIdx.column;

                        if (col >= 0 && col <= 8) {
                            $(this).css('background-color', '#c2e1ff');
                        } else if (col >= 9 && col <= 15) {
                            $(this).css('background-color', '#fff6cc');
                        } else if (col === 16) {
                            $(this).css('background-color', '#FFD699'); // KU IDR (oranye)
                        } else if (col === 17) {
                            $(this).css('background-color', '#fff6cc'); // Bank (masih kuning)
                        } else if (col >= 18 && col <= 31) {
                            $(this).css('background-color',
                                '#ddffdd'); // No. Tanda Terima .. Status Syn
                        } else if (col >= 32 && col <= 33) {
                            $(this).css('background-color',
                                '#90EE90'); // Nominal Bayar .. Curr Bayar
                        } else if (col >= 34) {
                            $(this).css('background-color', '#e8ddff');
                        }
                    });

                    // --- TIMPA WARNA KHUSUS ---
                    if (isRedRow) {
                        // timpa semua td yang ada pada row ini
                        $cells.css('background-color', '#ffc2cd');
                    }

                    if (isGreyRow) {
                        $cells.css('background-color', '#e0e0e0');
                        $row.addClass('text-muted');
                    } else {
                        $row.removeClass('text-muted');
                    }
                });

            }

        };

        // Optimasi untuk data besar: gunakan deferRender dan page length lebih kecil
        if (useAjaxPagination) {
            commonDataTableConfig.deferRender = true;
            commonDataTableConfig.pageLength = 10; // Default tampilkan 10 baris
            commonDataTableConfig.lengthMenu = [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "Semua"]
            ];
            commonDataTableConfig.processing = true;

            // Cache untuk count records - hindari query berulang
            let cachedRecordsTotal = 0;
            let cachedRecordsFiltered = 0;

            // Server-side processing configuration
            if (useServerSide) {
                commonDataTableConfig.serverSide = true;
                commonDataTableConfig.ajax = {
                    url: "{{ url($url_menu . '/get-paginated-data') }}",
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    data: function(d) {
                        d.filters = filterValues;
                        if (d.start > 0 && cachedRecordsTotal > 0) {
                            d._recordsTotal = cachedRecordsTotal;
                            d._recordsFiltered = cachedRecordsFiltered;
                        }
                        return d;
                    },
                    dataSrc: function(json) {
                        if (json.recordsTotal > 0) {
                            cachedRecordsTotal = json.recordsTotal;
                            cachedRecordsFiltered = json.recordsFiltered;
                        }
                        if (typeof totalFilteredRecords !== 'undefined') {
                            totalFilteredRecords = json.recordsFiltered || 0;
                        }
                        estimatedCount = json.recordsFiltered || 0;

                        if (json.error) {
                            console.warn('Server warning:', json.error);
                            if (json.exceeded_limit) {
                                Swal.fire({
                                    icon: 'warning',
                                    title: 'Data Terlalu Banyak',
                                    html: json.error,
                                    confirmButtonColor: '#028284'
                                });
                            }
                        }
                        return json.data || [];
                    },
                    error: function(xhr, error, thrown) {
                        console.error('DataTables AJAX error:', error, xhr.responseText);
                        Swal.fire('Error', 'Gagal memuat data: ' + (xhr.responseJSON?.message || thrown), 'error');
                    }
                };

                delete commonDataTableConfig.data;
                commonDataTableConfig.columnDefs = [{
                        targets: [9, 18],
                        visible: false
                    },
                    {
                        targets: 0,
                        orderable: false,
                        searchable: false
                    },
                    {
                        targets: 1,
                        orderable: false,
                        searchable: false
                    },
                    {
                        targets: [15, 16, 21, 22, 23, 24, 32, 36],
                        render: function(data, type) {
                            if (data === '' || data === null || data === undefined) return '';
                            const num = parseFloat(data);
                            if ((type === 'display' || type === 'filter') && !isNaN(num)) {
                                return num.toLocaleString('en-US', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                });
                            }
                            return data;
                        }
                    }
                ];

                const originalDrawCallback = commonDataTableConfig.drawCallback;
                commonDataTableConfig.drawCallback = function(settings) {
                    if (typeof originalDrawCallback === 'function') {
                        originalDrawCallback.call(this, settings);
                    }
                    if (typeof updateCheckboxStates === 'function') {
                        updateCheckboxStates();
                    }
                };
            }
        }

        // Initialize DataTable with config
        var table = $('#list_{{ $dmenu }}').DataTable(commonDataTableConfig);

        $(document).off('click', 'a.dp-detail-link').on('click', 'a.dp-detail-link', function() {
            const id = $(this).data('id');
            const dplist = $(this).data('dplist');

            if (!dplist) return;

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            const url = "{{ url('get-detail-dp') }}";

            $.post(url, {
                _token: $('meta[name="csrf-token"]').attr('content'),
                ids: dplist
            }, function(res) {
                if (res.success) {
                    let html = `
                <div style="overflow-x:auto">
                    <table id="dpDetailTable" class="table table-bordered table-striped">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th class="text-center">No</th>
                                <th class="text-center">ID</th>
                                <th class="text-center">Tgl DP Request</th>
                                <th class="text-center">No Faktur</th>
                                <th class="text-center">Nominal</th>
                            </tr>
                        </thead>
                        <tbody>
            `;

                    res.data.forEach((dp, i) => {
                        html += `<tr>
                    <td class="text-center">${i + 1}</td>
                    <td class="text-start">${dp.id}</td>
                    <td class="text-start">${dp.tanggal_terima}</td>
                    <td class="text-start">${dp.no_faktur ?? '-'}</td>
                    <td class="text-end">${parseFloat(dp.nominal).toLocaleString('id-ID')}</td>
                </tr>`;
                    });

                    html += `</tbody></table></div>`;

                    Swal.fire({
                        title: 'Detail DP Request',
                        html: html,
                        width: '40%',
                        confirmButtonText: 'Tutup',
                        allowOutsideClick: false,
                        didOpen: () => {
                            $('#dpDetailTable').DataTable({
                                paging: true,
                                searching: true,
                                ordering: true,
                                pageLength: 5,
                                lengthChange: false,
                                language: {
                                    search: "Cari:",
                                    zeroRecords: "Data tidak ditemukan",
                                    info: "Halaman _START_ - _END_ dari _TOTAL_",
                                    infoEmpty: "Tidak ada data",
                                    paginate: {
                                        next: "Berikutnya",
                                        previous: "Sebelumnya"
                                    }
                                }
                            });
                        }
                    });
                } else {
                    Swal.fire('Gagal', res.message, 'error');
                }
            }).fail(function() {
                Swal.fire('Error', 'Gagal memuat data DP Request', 'error');
            });
        });
        table.on('draw', function() {
            const api = $('#list_{{ $dmenu }}').DataTable();

            function normText(v) {
                return String(v ?? '')
                    .replace(/<[^>]*>/g, '')
                    .replace(/\u00A0/g, ' ')
                    .replace(/\u200B/g, '')
                    .trim();
            }

            function findColIndexByHeader(regex, fallbackIdx) {
                let found = -1;
                api.columns().every(function(i) {
                    const th = this.header();
                    if (!th) return;
                    const t = $(th).text().trim().toLowerCase().replace(/\s+/g, ' ');
                    if (regex.test(t)) {
                        found = i;
                        return false;
                    }
                });
                return found >= 0 ? found : fallbackIdx;
            }
            const statusIdx = findColIndexByHeader(/^status\s*syn$|^status\s*sync$|^status$/, 31);
            const syncIdx = findColIndexByHeader(/tgl\.?\s*sinkron\s*invoicing/, 30);
            const alignRightColumns = [15, 16, 20, 21, 22, 23, 24, 26, 27, 31, 32, 34, 36];

            $('#list_{{ $dmenu }}').find('tbody tr').each(function() {
                const $row = $(this);
                if ($row.hasClass('child')) return;

                const rowNode = $row.get(0);
                const $cells = $row.find('td');

                const dtRowIdx = api.row(rowNode).index();
                if (dtRowIdx === undefined) return;

                alignRightColumns.forEach((colIdx) => {
                    const cellNode = api.cell(rowNode, colIdx).node();
                    if (cellNode) $(cellNode).addClass('text-end');
                });

                const statusValue = normText(api.cell(dtRowIdx, statusIdx).data());
                const syncValue = normText(api.cell(dtRowIdx, syncIdx).data());

                let isRedRow = false;
                let isGreyRow = false;
                if (syncValue === '') isRedRow = true;
                if (statusValue === '0') isGreyRow = true;

                const cell22 = api.cell(rowNode, 22).node();
                if (cell22) {
                    const $cell22 = $(cell22);
                    const rawValue = $cell22.text().replaceAll(',', '').trim();

                    if (!isNaN(rawValue) && rawValue !== '') {
                        const floatVal = parseFloat(rawValue);

                        const idTanterimaNode = api.cell(rowNode, 2).node();
                        const dplistNode = api.cell(rowNode, 18).node();

                        const idTanterima = idTanterimaNode ? $(idTanterimaNode).text().trim() : '';
                        const dplist = dplistNode ? $(dplistNode).text().trim() : '';

                        $cell22.html(`
                            <a href="javascript:void(0);" class="dp-detail-link fw-bold text-dark"
                            data-id="${idTanterima}" data-dplist="${dplist}"
                            title="Lihat detail DP" style="cursor:pointer">
                            ${floatVal.toLocaleString('id-ID',{ minimumFractionDigits:2, maximumFractionDigits:2 })}
                            <i class="fas fa-external-link-alt ms-1"></i>
                            </a>
                        `);
                    }
                }
                $cells.each(function() {
                    const cellIdx = api.cell(this).index();
                    if (!cellIdx) return;
                    const col = cellIdx.column;

                    if (col >= 0 && col <= 8) {
                        $(this).css('background-color', '#c2e1ff');
                    } else if (col >= 9 && col <= 15) {
                        $(this).css('background-color', '#fff6cc');
                    } else if (col === 16) {
                        $(this).css('background-color', '#FFD699');
                    } else if (col === 17) {
                        $(this).css('background-color', '#fff6cc');
                    } else if (col >= 19 && col <= 31) {
                        $(this).css('background-color', '#ddffdd');
                    } else if (col >= 32 && col <= 33) {
                        $(this).css('background-color', '#90EE90');
                    } else if (col >= 34) {
                        $(this).css('background-color', '#e8ddff');
                    }
                });

                if (isRedRow) {
                    $cells.css('background-color', '#ffc2cd');
                }

                if (isGreyRow) {
                    $cells.css('background-color', '#e0e0e0');
                    $row.addClass('text-muted');
                } else {
                    $row.removeClass('text-muted');
                }
            });
        });

        // Check All - Handle both client-side and server-side modes
        // Note: variable 'table' is already defined above on line 833

        $('#checkAll').on('click', function() {
            var checked = this.checked;

            // Server-side mode: use special Select All handling
            if (useServerSide) {
                allIdsSelected = checked;

                // Check visible checkboxes
                $('#list_{{ $dmenu }} tbody .rowCheckbox').prop('checked', checked);

                if (checked) {
                    selectedIds = []; // Clear individual selections
                    excludedIds = []; // Clear excluded selections
                    // Update UI to show all are selected
                    if (typeof updateSelectionCounter === 'function') {
                        updateSelectionCounter();
                    }
                    // Show info that all filtered records are selected
                    Swal.fire({
                        icon: 'info',
                        title: 'Select All',
                        text: `Semua ${estimatedCount.toLocaleString('id-ID')} data yang sesuai filter akan dipilih`,
                        timer: 2000,
                        showConfirmButton: false
                    });
                } else {
                    selectedIds = [];
                    excludedIds = []; // Clear excluded selections
                    if (typeof updateSelectionCounter === 'function') {
                        updateSelectionCounter();
                    }
                }
                return;
            }

            // Client-side mode: original behavior
            table.rows({
                search: 'applied'
            }).every(function() {
                $(this.node()).find('.rowCheckbox').prop('checked', checked);
            });
        });

        $('#list_{{ $dmenu }}').on('change', '.rowCheckbox', function() {
            // Server-side mode: track individual selections
            if (useServerSide) {
                const checkbox = $(this);
                const id = checkbox.val();

                if (allIdsSelected) {
                    if (checkbox.is(':checked')) {
                        excludedIds = excludedIds.filter(x => x !== id);
                    } else {
                        if (!excludedIds.includes(id)) {
                            excludedIds.push(id);
                        }
                    }
                } else {
                    if (checkbox.is(':checked')) {
                        if (!selectedIds.includes(id)) {
                            selectedIds.push(id);
                        }
                    } else {
                        selectedIds = selectedIds.filter(x => x !== id);
                    }
                }

                // Update checkAll state
                const total = $('#list_{{ $dmenu }} tbody .rowCheckbox').length;
                const checkedCount = $('#list_{{ $dmenu }} tbody .rowCheckbox:checked').length;

                if (allIdsSelected) {
                    if (excludedIds.length > 0) {
                        $('#checkAll').prop('checked', false);
                        $('#checkAll').prop('indeterminate', true);
                    } else {
                        $('#checkAll').prop('checked', true);
                        $('#checkAll').prop('indeterminate', false);
                    }
                } else {
                    $('#checkAll').prop('checked', total === checkedCount && total > 0);
                    $('#checkAll').prop('indeterminate', false);
                }

                if (typeof updateSelectionCounter === 'function') {
                    updateSelectionCounter();
                }
                return;
            }

            // Client-side mode: original behavior
            let total = table.rows({
                search: 'applied'
            }).count();
            let checked = table.rows({
                search: 'applied'
            }).nodes().to$().find('.rowCheckbox:checked').length;
            $('#checkAll').prop('checked', total === checked);
        });


        function loadBankOptions() {
            $.ajax({
                url: "{{ url('get-bank-data') }}", // pastikan route nya sesuai
                type: 'GET',
                success: function(banks) {
                    let options = '<option value="">-- Pilih Bank --</option>';
                    banks.forEach(function(bank) {
                        options += `<option value="${bank.idbank}">${bank.nama_bank}</option>`;
                    });
                    $('#bankName').html(options);
                },
                error: function() {
                    Swal.fire('Error', 'Gagal memuat daftar bank', 'error');
                }
            });
        }

        function updateBank() {
            let selectedBank = $('#bankName').val(); // ID Bank dari select
            let selectedBankText = $('#bankName option:selected').text(); // Nama Bank dari select

            if (!selectedBank) {
                Swal.fire('Bank belum dipilih', 'Silakan pilih bank', 'warning');
                return;
            }

            // Check if "Select All" mode is active (from server-side pagination)
            if (typeof allIdsSelected !== 'undefined' && allIdsSelected) {
                // Use server-side update for all filtered data
                $('#updateBankModal').modal('hide');
                updateBankAllFiltered(selectedBank, selectedBankText);
                return;
            }

            // Check if there are manually selected IDs (from server-side pagination)
            if (typeof selectedIds !== 'undefined' && selectedIds.length > 0) {
                $('#updateBankModal').modal('hide');
                updateBankChunked(selectedBank, selectedBankText, selectedIds);
                return;
            }

            // Legacy: Get selected IDs from table checkboxes (client-side mode)
            let legacySelectedIds = [];
            table.rows({
                search: 'applied'
            }).every(function() {
                const checkbox = $(this.node()).find('.rowCheckbox');
                if (checkbox.is(':checked')) {
                    legacySelectedIds.push(checkbox.val());
                }
            });

            if (legacySelectedIds.length === 0) {
                Swal.fire('Tidak ada data yang dipilih', 'Silakan centang setidaknya 1 baris', 'warning');
                return;
            }

            // Check if data is too large, use chunked update
            if (legacySelectedIds.length > 200) {
                $('#updateBankModal').modal('hide');
                updateBankChunked(selectedBank, selectedBankText, legacySelectedIds);
                return;
            }

            // Standard update for small dataset
            $.ajax({
                url: "{{ url($url_menu . '/update-bank') }}",
                type: "POST",
                contentType: "application/json",
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                data: JSON.stringify({
                    ids: legacySelectedIds,
                    idbank: selectedBank,
                    nama_bank: selectedBankText
                }),
                success: function(response) {
                    if (response.success) {
                        Swal.fire('Berhasil', response.message, 'success').then(() => location.reload());
                    } else {
                        Swal.fire('Gagal', response.message, 'error');
                    }
                },
                error: function() {
                    Swal.fire('Error', 'Terjadi kesalahan saat update data', 'error');
                }
            });
        }

        /**
         * Update bank untuk semua data yang sesuai filter (Select All mode)
         * Dengan progress indicator
         */
        function updateBankAllFiltered(bankId, bankName) {
            Swal.fire({
                title: 'Konfirmasi',
                html: `Yakin ingin update bank menjadi <strong>${bankName}</strong> untuk semua <strong>${estimatedCount.toLocaleString('id-ID')}</strong> data yang sesuai filter?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Update Semua',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#d33'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Show progress
                    Swal.fire({
                        title: 'Memproses Update Bank...',
                        html: `
                            <div class="progress mb-3" style="height: 25px;">
                                <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" 
                                     role="progressbar" style="width: 100%;">Processing...</div>
                            </div>
                            <p>Sedang update kuitansi dari <strong>${estimatedCount.toLocaleString('id-ID')}</strong> baris...</p>
                            <small class="text-muted">Server sedang memproses, mohon tunggu.</small>
                        `,
                        allowOutsideClick: false,
                        showConfirmButton: false
                    });

                    $.ajax({
                        url: "{{ url($url_menu . '/update-bank-filtered') }}",
                        type: "POST",
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        data: {
                            bank_id: bankId,
                            nama_bank: bankName,
                            filters: filterValues
                        },
                        success: function(response) {
                            if (response.success) {
                                let message = response.message;
                                // Jika ada detail tentang total rows, tampilkan
                                if (response.total_rows && response.updated_count) {
                                    message =
                                        `Bank berhasil diperbarui untuk <strong>${response.updated_count.toLocaleString('id-ID')}</strong> kuitansi dari <strong>${response.total_rows.toLocaleString('id-ID')}</strong> baris yang dipilih.`;
                                }
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil',
                                    html: `<p>${message}</p>`,
                                    confirmButtonColor: '#28a745'
                                }).then(() => location.reload());
                            } else {
                                Swal.fire('Gagal', response.message, 'error');
                            }
                        },
                        error: function(xhr) {
                            let msg = xhr.responseJSON?.message || 'Terjadi kesalahan saat update data';
                            Swal.fire('Error', 'Gagal\nTerjadi kesalahan: ' + msg, 'error');
                        }
                    });
                }
            });
        }

        /**
         * Update bank dengan chunking untuk data yang dipilih secara individual
         * Dengan progress bar percentage
         */
        function updateBankChunked(bankId, bankName, ids) {
            const CHUNK_SIZE = 200;
            let chunks = [];

            // Split IDs into chunks
            for (let i = 0; i < ids.length; i += CHUNK_SIZE) {
                chunks.push(ids.slice(i, i + CHUNK_SIZE));
            }

            let processedCount = 0;
            let totalCount = ids.length;
            let currentChunk = 0;
            let totalChunks = chunks.length;

            // Show progress with percentage
            Swal.fire({
                title: 'Memproses Update Bank...',
                html: `
                    <div class="progress mb-3" style="height: 25px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" 
                             role="progressbar" style="width: 0%;" id="progressBar">0%</div>
                    </div>
                    <p id="progressText">Memproses 0 dari ${totalCount} data...</p>
                    <small class="text-muted">Chunk 0 dari ${totalChunks}</small>
                `,
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => {
                    processNextChunk();
                }
            });

            function updateProgress() {
                let percent = Math.round((processedCount / totalCount) * 100);
                $('#progressBar').css('width', percent + '%').text(percent + '%');
                $('#progressText').text(
                    `Memproses ${processedCount.toLocaleString('id-ID')} dari ${totalCount.toLocaleString('id-ID')} data...`
                );
            }

            function processNextChunk() {
                if (currentChunk >= chunks.length) {
                    // All done
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        html: `<p>Bank berhasil diperbarui untuk <strong>${processedCount.toLocaleString('id-ID')}</strong> kuitansi.</p>`,
                        confirmButtonColor: '#28a745'
                    }).then(() => location.reload());
                    return;
                }

                $.ajax({
                    url: "{{ url($url_menu . '/update-bank-chunked') }}",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    contentType: 'application/json',
                    data: JSON.stringify({
                        bank_id: bankId,
                        nama_bank: bankName,
                        ids: chunks[currentChunk]
                    }),
                    success: function(response) {
                        if (response.success) {
                            processedCount += response.updated_count || chunks[currentChunk].length;
                            currentChunk++;

                            // Update progress
                            updateProgress();

                            // Process next chunk with small delay to prevent overwhelming
                            setTimeout(processNextChunk, 50);
                        } else {
                            Swal.fire('Gagal', response.message, 'error');
                        }
                    },
                    error: function(xhr) {
                        let msg = xhr.responseJSON?.message || 'Terjadi kesalahan saat update data';
                        Swal.fire('Error', 'Gagal\nTerjadi kesalahan: ' + msg, 'error');
                    }
                });
            }
        }

        /**
         * Export Excel - Mengambil SEMUA data sesuai filter dari server
         * (bukan hanya halaman yang ditampilkan)
         */
        function exportExcel() {
            // Ambil parameter filter yang sedang aktif
            let params = new URLSearchParams({
                frdate: $('input[name="ffrdate"]').val() || '2000-01-01',
                todate: $('input[name="ftodate"]').val() || '2100-01-01',
                date: $('input[name="fdate"]').val() || '%',
                nama_vendor: $('input[name="fnama_vendor"]').val() || '%',
                nama_dept: $('input[name="fnama_dept"]').val() || '%',
                curr: $('input[name="fcurr"]').val() || '%',
                kategori_pembayaran: $('input[name="fkategori_pembayaran"]').val() || '%',
                no_kuitansi: $('input[name="fno_kuitansi"]').val() || '%'
            });

            // Tampilkan loading
            Swal.fire({
                title: 'Mengekspor Data...',
                html: '<div class="progress mb-3" style="height: 25px;"><div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 100%;">Processing...</div></div><p>Sedang mengambil semua data sesuai filter, mohon tunggu...</p>',
                allowOutsideClick: false,
                showConfirmButton: false
            });

            // Download file
            let url = "{{ url($url_menu . '/export-excel') }}?" + params.toString();

            // Gunakan fetch untuk handle error dengan baik
            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(err => {
                            throw new Error(err.message || 'Export gagal');
                        });
                    }
                    return response.blob();
                })
                .then(blob => {
                    // Create download link
                    const downloadUrl = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = downloadUrl;
                    a.download = 'Rekap_Tagihan_' + new Date().toISOString().slice(0, 10) + '.xlsx';
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(downloadUrl);
                    a.remove();

                    Swal.fire({
                        icon: 'success',
                        title: 'Export Berhasil',
                        text: 'File Excel (.xlsx) berhasil diunduh',
                        timer: 2000,
                        showConfirmButton: false
                    });
                })
                .catch(error => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Export Gagal',
                        text: error.message
                    });
                });
        }

        function exportCSV() {
            var table = $('#list_{{ $dmenu }}').DataTable();

            getSelectedIds(function(checkedIds) {
                // Ambil parameter filter yang sedang aktif
                let fdate = $('input[name="fdate"]').val() || '%%';
                let fnama_dept = $('input[name="fnama_dept"]').val() || '%%';
                let fcurr = $('input[name="fcurr"]').val() || '%%';
                let fkategori_pembayaran = $('input[name="fkategori_pembayaran"]').val() || '%%';
                let fnama_vendor = $('input[name="fnama_vendor"]').val() || '%%';
                let fno_kuitansi = $('input[name="fno_kuitansi"]').val() || '%%';
                let frdate = $('input[name="ffrdate"]').val() || '2000-01-01';
                let todate = $('input[name="ftodate"]').val() || '2100-01-01';

                // Get available banks from current filter
                $.ajax({
                    url: "{{ url('rptrkp/get-available-banks') }}",
                    type: "GET",
                    data: {
                        fdate: fdate,
                        fnama_dept: fnama_dept,
                        fcurr: fcurr,
                        fkategori_pembayaran: fkategori_pembayaran,
                        fnama_vendor: fnama_vendor,
                        fno_kuitansi: fno_kuitansi,
                        frdate: frdate,
                        todate: todate,
                        checked_ids: checkedIds.length > 0 ? checkedIds : null
                    },
                    success: function(banks) {
                        if (banks.length === 0) {
                            Swal.fire('Tidak Ada Data',
                                'Tidak ada data dengan bank yang sudah di-set pada filter ini',
                                'info');
                            return;
                        }

                        // If only 1 bank, auto-export without modal
                        if (banks.length === 1) {
                            let bankName = banks[0].nama_bank;

                            // Check if bank is supported (Mandiri or UOB)
                            let isMandiri = bankName.toUpperCase().indexOf('MANDIRI') !== -1;
                            let isUOB = bankName.toUpperCase().indexOf('UOB') !== -1;

                            if (!isMandiri && !isUOB) {
                                Swal.fire({
                                    title: 'Format Belum Tersedia',
                                    text: `Format export untuk ${bankName} belum tersedia (coming soon)`,
                                    icon: 'info',
                                    confirmButtonColor: '#028284'
                                });
                                return;
                            }

                            // Auto-export for supported bank
                            performExportCSV(banks[0].idbank);
                            return;
                        }

                        // Load banks into modal
                        let options = '<option value="">-- Pilih Bank --</option>';
                        banks.forEach(function(bank) {
                            options +=
                                `<option value="${bank.idbank}">${bank.nama_bank}</option>`;
                        });
                        $('#exportBankName').html(options);

                        // Show modal
                        $('#exportCSVModal').modal('show');
                    },
                    error: function() {
                        Swal.fire('Error', 'Gagal memuat daftar bank', 'error');
                    }
                });
            });
        }

        function confirmExportCSV() {
            let selectedBank = $('#exportBankName').val();
            let selectedBankText = $('#exportBankName option:selected').text();

            if (!selectedBank) {
                Swal.fire('Bank belum dipilih', 'Silakan pilih bank', 'warning');
                return;
            }

            // Check if bank is supported (Mandiri or UOB)
            let isMandiri = selectedBankText.toUpperCase().indexOf('MANDIRI') !== -1;
            let isUOB = selectedBankText.toUpperCase().indexOf('UOB') !== -1;

            if (!isMandiri && !isUOB) {
                $('#exportCSVModal').modal('hide');
                Swal.fire({
                    title: 'Format Belum Tersedia',
                    text: `Format export untuk ${selectedBankText} belum tersedia (coming soon)`,
                    icon: 'info',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            $('#exportCSVModal').modal('hide');
            performExportCSV(selectedBank);
        }

        function performExportCSV(bankId, fileType = null) {
            var table = $('#list_{{ $dmenu }}').DataTable();

            getSelectedIds(function(checkedIds) {
                let fdate = $('input[name="fdate"]').val();
                let fnama_dept = $('input[name="fnama_dept"]').val() || '%';
                let fcurr = $('input[name="fcurr"]').val() || '%';
                let fkategori_pembayaran = $('input[name="fkategori_pembayaran"]').val() || '%';
                let fnama_vendor = $('input[name="fnama_vendor"]').val() || '%';
                let fno_kuitansi = $('input[name="fno_kuitansi"]').val() || '%';
                let frdate = $('input[name="ffrdate"]').val() || '2000-01-01';
                let todate = $('input[name="ftodate"]').val() || '2100-01-01';

                // Build URL dengan parameter
                let baseUrl = "{{ url($url_menu . '/export-csv') }}";
                let params =
                    `?fdate=${encodeURIComponent(fdate)}&fnama_dept=${encodeURIComponent(fnama_dept)}&fcurr=${encodeURIComponent(fcurr)}&fkategori_pembayaran=${encodeURIComponent(fkategori_pembayaran)}`;
                params +=
                    `&fnama_vendor=${encodeURIComponent(fnama_vendor)}&fno_kuitansi=${encodeURIComponent(fno_kuitansi)}`;
                params += `&frdate=${encodeURIComponent(frdate)}&todate=${encodeURIComponent(todate)}`;
                params += `&bankid=${bankId}`;

                if (checkedIds.length > 0) {
                    params += `&checked_ids=${checkedIds.join(',')}`;
                }

                if (fileType) {
                    params += `&file_type=${fileType}`;
                }

                // First check for non-IDR without conversion
                $.ajax({
                    url: baseUrl + params + '&check_mode=check',
                    type: 'GET',
                    success: function(response) {
                        if (response.success === false) {
                            Swal.fire({
                                title: 'Gagal!',
                                text: response.message || 'Export CSV gagal diproses.',
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                            return;
                        }
                        // Handle jika semua data tidak sesuai
                        if (response.all_mismatched) {
                            Swal.fire({
                                title: 'Semua Data Tidak Sesuai',
                                html: `<div style="text-align: left;">
                                <p style="color: #D32F2F;">⚠️ Semua data (<strong>${response.mismatched_count}</strong> record) memiliki status <strong style="color: #B71C1C;">Tidak Sesuai</strong>.</p>
                                <p style="margin-top: 10px; font-size: 0.95em; color: #666;">Tidak ada data yang dapat diekspor karena data sinkron belum sesuai.</p>
                                <p style="margin-top: 10px; font-size: 0.85em; color: #999; font-style: italic;">Silakan perbaiki status sinkron data terlebih dahulu.</p>
                            </div>`,
                                icon: 'error',
                                confirmButtonText: 'OK',
                                confirmButtonColor: '#6c757d'
                            });
                            return;
                        }

                        // Handle warning untuk data tidak sesuai terlebih dahulu
                        let mismatchWarning = '';
                        if (response.has_mismatched_data) {
                            let idsText = response.mismatched_id_tanterima ? response
                                .mismatched_id_tanterima.join(', ') : '-';
                            mismatchWarning = `<div class="alert mb-3" style="background: linear-gradient(135deg, #FFF9E6 0%, #FFECB3 50%, #FFE082 100%); border: 2px solid #FFC107; border-radius: 8px; padding: 15px;">
                            <i class="fas fa-exclamation-triangle me-2" style="color: #FF1744;"></i>
                            <strong style="color: #D32F2F;">Perhatian:</strong> <span style="color: #C62828;">Ada ${response.mismatched_count} data dengan status <strong style="color: #B71C1C;">Tidak Sesuai</strong> yang tidak akan disertakan dalam export.</span><br>
                            <strong style="color: #FFFFFF; background-color: #D32F2F; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-top: 5px;">ID Tanda Terima:</strong> <span style="color: #B71C1C; font-weight: 600;">${idsText}</span><br>
                            <small style="color: #6D4C41; font-style: italic; margin-top: 5px; display: inline-block;">Silakan ubah status data tersebut jika ingin menyertakannya.</small>
                        </div>`;
                        }

                        if (response.needs_conversion) {
                            // Show warning with ID tanterima list
                            let idList = response.id_tanterima.join(', ');
                            Swal.fire({
                                title: 'Peringatan Konversi Kurs',
                                html: `${mismatchWarning}${response.message}<br><br><strong>ID Tanda Terima:</strong> ${idList}`,
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonText: 'Tetap Download',
                                cancelButtonText: 'Batal',
                                confirmButtonColor: '#d33',
                                cancelButtonColor: '#3085d6'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    // Continue with download
                                    if (response.multiple_files) {
                                        showUOBExportModal(response, baseUrl, params,
                                            mismatchWarning);
                                    } else {
                                        doExportCSV(baseUrl + params);
                                    }
                                }
                            });
                        } else if (response.multiple_files) {
                            // UOB with BIF, LLG, and/or RTGS - show checkbox modal with mismatched warning
                            showUOBExportModal(response, baseUrl, params, mismatchWarning);
                        } else if (response.has_mismatched_data && !response.multiple_files) {
                            // Bank selain UOB dengan 1 format, ada data tidak sesuai
                            Swal.fire({
                                title: 'Peringatan Data Tidak Sesuai',
                                html: `${mismatchWarning}<p style="margin-top: 10px; font-size: 0.95em;"><strong>Data sinkron belum sesuai.</strong> Apakah Anda ingin tetap melanjutkan export CSV?</p>`,
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonText: 'Tetap Download',
                                cancelButtonText: 'Batal',
                                confirmButtonColor: '#FF8C00',
                                cancelButtonColor: '#6c757d'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    doExportCSV(baseUrl + params);
                                }
                            });
                        } else {
                            // No warning needed, proceed with download
                            doExportCSV(baseUrl + params);
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            title: 'Gagal!',
                            text: xhr.responseJSON?.message ||
                                'Terjadi kesalahan saat export CSV.',
                            icon: 'error',
                            confirmButtonColor: '#3085d6'
                        });
                    }
                });
            });
        }

        function showUOBExportModal(response, baseUrl, params, mismatchWarning = '') {
            let checkboxHtml = '<div class="text-start">';

            if (response.has_bif) {
                checkboxHtml += `
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" value="bif" id="cbBIF" ${response.bif_count > 0 ? 'checked' : ''}>
                        <label class="form-check-label" for="cbBIF">
                            <strong>BIF</strong> - ${response.bif_count} data (< 250 juta)
                        </label>
                    </div>`;
            }

            if (response.has_llg) {
                let llgLabel = '';
                if (response.llg_count > 0) {
                    llgLabel = `<strong>LLG</strong> - ${response.llg_count} data (250 juta - 1 milyar)`;
                } else if (response.bif_count > 0) {
                    // Jika tidak ada data LLG tapi ada BIF, tampilkan sebagai opsi fallback
                    llgLabel =
                        `<strong>LLG</strong> - 0 data <span class="badge bg-info ms-1">Opsi Cadangan untuk BIF</span>`;
                }

                checkboxHtml += `
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" value="llg" id="cbLLG" ${response.llg_count > 0 ? 'checked' : ''}>
                        <label class="form-check-label" for="cbLLG">
                            ${llgLabel}
                        </label>
                    </div>`;
            }

            if (response.has_rtgs) {
                checkboxHtml += `
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" value="rtgs" id="cbRTGS" ${response.rtgs_count > 0 ? 'checked' : ''}>
                        <label class="form-check-label" for="cbRTGS">
                            <strong>RTGS</strong> - ${response.rtgs_count} data (>= 1 milyar)
                        </label>
                    </div>`;
            }

            checkboxHtml += '</div>';

            // Tambahkan info tentang data BIF dan LLG sebagai fallback
            let infoHtml = '';
            if (response.has_bif && response.bif_count > 0) {
                if (response.llg_count > 0) {
                    infoHtml = `<div class="alert alert-info mt-3 text-start" style="font-size: 0.85rem; color: white;">
                        <i class="fas fa-info-circle me-1"></i> 
                        <strong>Catatan:</strong> Jika BIF tidak dipilih dan LLG dipilih, data BIF akan digabungkan ke format LLG.
                    </div>`;
                } else {
                    infoHtml = `<div class="alert alert-info mt-3 text-start" style="font-size: 0.85rem; color: white;">
                        <i class="fas fa-info-circle me-1"></i> 
                        <strong>Catatan:</strong> Format LLG disediakan sebagai opsi cadangan jika format BIF bermasalah di bank. Jika LLG dipilih, data BIF akan digunakan dalam format LLG.
                    </div>`;
                }
            }

            Swal.fire({
                title: 'Export UOB',
                html: `${mismatchWarning}<p class="mb-3">Pilih format yang ingin di-export:</p>
                       ${checkboxHtml}
                       ${infoHtml}`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-download me-1"></i> Download',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#28a745',
                preConfirm: () => {
                    let selected = [];
                    if ($('#cbBIF').is(':checked')) selected.push('bif');
                    if ($('#cbLLG').is(':checked')) selected.push('llg');
                    if ($('#cbRTGS').is(':checked')) selected.push('rtgs');

                    if (selected.length === 0) {
                        Swal.showValidationMessage('Pilih minimal satu format untuk di-export');
                        return false;
                    }

                    return selected;
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    let selectedFormats = result.value;
                    processUOBExport(selectedFormats, response, baseUrl, params);
                }
            });
        }

        function processUOBExport(selectedFormats, response, baseUrl, params) {
            // Logic untuk handle berbagai kombinasi pilihan
            let hasBIF = response.has_bif && response.bif_count > 0;
            let hasOnlyBIF = hasBIF && response.llg_count === 0 && response.rtgs_count === 0;
            let selectedBIF = selectedFormats.includes('bif');
            let selectedLLG = selectedFormats.includes('llg');
            let selectedRTGS = selectedFormats.includes('rtgs');

            // Jika hanya ada data BIF dan user hanya pilih LLG (tidak pilih BIF) -> otomatis gabung tanpa konfirmasi
            if (hasOnlyBIF && !selectedBIF && selectedLLG && !selectedRTGS) {
                // Langsung execute dengan merge flag
                executeUOBDownloads(selectedFormats, baseUrl, params, true);
                return;
            }

            // Jika ada BIF dan data lain (LLG/RTGS), tapi BIF tidak dipilih dan LLG dipilih -> konfirmasi gabung ke LLG
            if (hasBIF && !selectedBIF && selectedLLG) {
                Swal.fire({
                    title: 'Konfirmasi',
                    html: `Data BIF (<strong>${response.bif_count}</strong> record) akan digabungkan ke format LLG.<br>Apakah Anda yakin?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Gabungkan',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#FF8C00'
                }).then((confirmResult) => {
                    if (confirmResult.isConfirmed) {
                        // Set flag untuk merge BIF ke LLG
                        executeUOBDownloads(selectedFormats, baseUrl, params, true);
                    }
                });
            } else {
                executeUOBDownloads(selectedFormats, baseUrl, params, false);
            }
        }

        function executeUOBDownloads(selectedFormats, baseUrl, params, mergeBifToLlg) {
            let downloadQueue = [];

            // Urutan download: BIF -> LLG -> RTGS
            if (selectedFormats.includes('bif') && !mergeBifToLlg) {
                downloadQueue.push('bif');
            }

            if (selectedFormats.includes('llg')) {
                let llgParams = params;
                if (mergeBifToLlg) {
                    llgParams += '&merge_bif=1';
                }
                downloadQueue.push({
                    type: 'llg',
                    params: llgParams
                });
            }

            if (selectedFormats.includes('rtgs')) {
                downloadQueue.push('rtgs');
            }

            // Execute downloads sequentially
            let downloadIndex = 0;

            function downloadNext() {
                if (downloadIndex >= downloadQueue.length) {
                    Swal.fire({
                        title: 'Selesai',
                        text: 'Download selesai!',
                        icon: 'success',
                        timer: 1500,
                        showConfirmButton: false
                    });
                    return;
                }

                let item = downloadQueue[downloadIndex];
                let fileType, downloadParams;

                if (typeof item === 'object') {
                    fileType = item.type;
                    downloadParams = item.params;
                } else {
                    fileType = item;
                    downloadParams = params;
                }

                window.location.href = baseUrl + downloadParams + '&file_type=' + fileType;
                downloadIndex++;

                // Delay for next download
                if (downloadIndex < downloadQueue.length) {
                    setTimeout(downloadNext, 1500);
                }
            }

            downloadNext();
        }

        function doExportCSV(url) {
            // Download file
            window.location.href = url;
        }

        // ===================== KONVERSI KURS FUNCTIONS =====================

        function openKonversiModal() {
            var table = $('#list_{{ $dmenu }}').DataTable();

            // Get selected IDs
            let selectedIds = [];
            table.rows({
                search: 'applied'
            }).every(function() {
                const checkbox = $(this.node()).find('.rowCheckbox');
                if (checkbox.is(':checked')) {
                    selectedIds.push(checkbox.val());
                }
            });

            if (selectedIds.length === 0) {
                Swal.fire('Tidak ada data yang dipilih', 'Silakan centang setidaknya 1 baris', 'warning');
                return;
            }

            // Show loading
            Swal.fire({
                title: 'Memuat data...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            // Get conversion data from server
            $.ajax({
                url: "{{ url($url_menu . '/get-conversion-data') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    ids: selectedIds
                },
                success: function(response) {
                    Swal.close();

                    if (!response.success) {
                        Swal.fire('Error', response.message, 'error');
                        return;
                    }

                    // Populate modal with data
                    let tableBody = '';
                    response.data.forEach(function(item) {
                        tableBody += `<tr>
                            <td>${item.id_tanterima}</td>
                            <td>${item.nama_vendor}</td>
                            <td><span class="badge bg-info">${item.curr}</span></td>
                        </tr>`;
                    });
                    $('#konversiDataBody').html(tableBody);

                    // Set total nominal
                    let totalNominal = parseFloat(response.total_nominal) || 0;
                    $('#totalNominal').val(totalNominal);
                    $('#totalNominalDisplay').val(formatNumber(totalNominal));

                    // Set currency
                    $('#currFrom').val(response.curr);

                    // Set tanterima IDs
                    $('#tanterimaIds').val(JSON.stringify(response.tanterima_ids));

                    // Reset inputs
                    $('#nominalKurs').val('');
                    $('#hasilKursDisplay').val('');
                    $('#hasilKurs').val('');

                    // Show warning if already converted
                    if (response.already_converted) {
                        $('#warningAlreadyConverted').removeClass('d-none');
                        if (response.existing_kurs) {
                            $('#nominalKurs').val(response.existing_kurs);
                            calculateHasilKurs();
                        }
                    } else {
                        $('#warningAlreadyConverted').addClass('d-none');
                    }

                    // Show modal
                    $('#konversiKursModal').modal('show');
                },
                error: function() {
                    Swal.close();
                    Swal.fire('Error', 'Gagal memuat data konversi', 'error');
                }
            });
        }

        // Calculate hasil kurs when nominal kurs changes
        $('#nominalKurs').on('input', function() {
            calculateHasilKurs();
        });

        function calculateHasilKurs() {
            let totalNominal = parseFloat($('#totalNominal').val()) || 0;
            let nominalKurs = parseFloat($('#nominalKurs').val()) || 0;
            let hasilKurs = totalNominal * nominalKurs;

            $('#hasilKurs').val(hasilKurs);
            $('#hasilKursDisplay').val(formatNumber(hasilKurs));
        }

        function formatNumber(num) {
            return num.toLocaleString('id-ID', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }

        function saveKonversi() {
            let tanterimaIds = JSON.parse($('#tanterimaIds').val() || '[]');
            let nominalKurs = parseFloat($('#nominalKurs').val());
            let totalNominal = parseFloat($('#totalNominal').val());
            let hasilKurs = parseFloat($('#hasilKurs').val());
            let currFrom = $('#currFrom').val();

            if (!nominalKurs || nominalKurs <= 0) {
                Swal.fire('Error', 'Masukkan nominal kurs yang valid', 'warning');
                return;
            }

            // Confirm save
            Swal.fire({
                title: 'Konfirmasi',
                html: `Apakah Anda yakin ingin menyimpan konversi kurs?<br><br>
                    <strong>Kurs:</strong> Rp ${formatNumber(nominalKurs)}<br>
                    <strong>Total Hasil:</strong> Rp ${formatNumber(hasilKurs)}`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Simpan',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#28a745'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Show loading
                    Swal.fire({
                        title: 'Menyimpan...',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    $.ajax({
                        url: "{{ url($url_menu . '/save-conversion') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            tanterima_ids: tanterimaIds,
                            nominal_kurs: nominalKurs,
                            total_nominal: totalNominal,
                            hasil_kurs: hasilKurs,
                            curr_from: currFrom
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    title: 'Berhasil',
                                    text: response.message,
                                    icon: 'success',
                                    confirmButtonColor: '#28a745'
                                }).then(() => {
                                    $('#konversiKursModal').modal('hide');
                                    location.reload();
                                });
                            } else {
                                Swal.fire('Gagal', response.message, 'error');
                            }
                        },
                        error: function() {
                            Swal.fire('Error', 'Terjadi kesalahan saat menyimpan data', 'error');
                        }
                    });
                }
            });
        }
        // ===================== KONVERSI KURS KUITANSI (KU) SAVE =====================

        function saveKonversiKU() {
            let idKuitansi = $('#kuIdKuitansi').val();
            let nominalKurs = parseFloat($('#kuNominalKurs').val());
            let totalNominal = parseFloat($('#kuTotalNominal').val());
            let hasilKurs = parseFloat($('#kuHasilKurs').val());
            let currFrom = $('#kuCurrFromVal').val();

            if (!nominalKurs || nominalKurs <= 0) {
                Swal.fire('Error', 'Masukkan nominal kurs yang valid', 'warning');
                return;
            }

            // Confirm save
            Swal.fire({
                title: 'Konfirmasi',
                html: `Apakah Anda yakin ingin menyimpan konversi kurs kuitansi?<br><br>
                    <strong>Kurs:</strong> Rp ${formatNumber(nominalKurs)}<br>
                    <strong>Total Hasil:</strong> Rp ${formatNumber(hasilKurs)}`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Simpan',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#FF8C00'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Show loading
                    Swal.fire({
                        title: 'Menyimpan...',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    $.ajax({
                        url: "{{ url($url_menu . '/save-conversion-ku') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            id_kuitansi: idKuitansi,
                            nominal_kurs: nominalKurs,
                            total_nominal: totalNominal,
                            hasil_kurs: hasilKurs,
                            curr_from: currFrom
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    title: 'Berhasil',
                                    text: response.message,
                                    icon: 'success',
                                    confirmButtonColor: '#FF8C00'
                                }).then(() => {
                                    $('#konversiKursKUModal').modal('hide');
                                    location.reload();
                                });
                            } else {
                                Swal.fire('Gagal', response.message, 'error');
                            }
                        },
                        error: function() {
                            Swal.fire('Error', 'Terjadi kesalahan saat menyimpan data', 'error');
                        }
                    });
                }
            });
        }

        // ===================== END KONVERSI KURS FUNCTIONS =====================


        //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/msjrekaptagihan/resources/views/report/rptrkp/result.blade.php</b> on line <b>2403</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjrekaptagihan/resources/views/report/rptrkp/result.blade.php</b> on line <b>2403</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjrekaptagihan/resources/views/report/rptrkp/result.blade.php</b> on line <b>2404</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjrekaptagihan/resources/views/report/rptrkp/result.blade.php</b> on line <b>2404</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjrekaptagihan/resources/views/report/rptrkp/result.blade.php</b> on line <b>2405</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjrekaptagihan/resources/views/report/rptrkp/result.blade.php</b> on line <b>2405</b><br />
        //function delete
        function deleteData(name, msg) {
            pesan = confirm('Apakah Anda Yakin ' + msg + ' Data ' + name + ' ini ?');
            if (pesan) return true
            else return false
        }
    </script>
@endpush