@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

{{-- Manual: Layout manual --}}
{{-- Section Content --}}
@section('content')
    {{-- Title updated for Edit page --}}
    @include('layouts.navbars.auth.topnav', ['title' => 'Edit Pengajuan Permohonan'])

    @push('css')
        {{-- Flatpickr --}}
        <link rel="stylesheet" href="{{ asset('/') }}assets/css/flatpickr.min.css">
        {{-- Photoswipe --}}
        <link rel="stylesheet" href="{{ asset('/') }}assets/css/photoswipe.css">
        {{-- Form Lampiran --}}
        <link rel="stylesheet" href="{{ asset('/') }}assets/css/form_lampiran_styles.css">
        <style>
            /* Table styling to match selected employees table */
            #tujuan-table {
                width: 100% !important;
            }

            #tujuan-table thead th {
                vertical-align: middle;
                text-align: center;
            }

            #tujuan-table.dataTable tbody td,
            #tujuan-table tbody td {
                padding: 0.35rem 0.5rem;
                vertical-align: middle;
            }

            #tujuan-table .employee-badges-container small.text-muted {
                display: inline-block;
                margin-top: 2px;
            }

            #tujuan-table select.form-select-sm,
            #tujuan-table input.form-control-sm {
                min-height: 30px;
            }

            /* Prevent dropdown/select clipping inside DataTables wrapper */
            #tujuan-table_wrapper,
            #tujuan-table,
            #tujuan-table thead,
            #tujuan-table tbody,
            #tujuan-table tr,
            #tujuan-table td,
            #tujuan-table th {
                overflow: visible !important;
            }

            #tujuan-table select.form-select-sm {
                position: relative;
                z-index: 2;
            }

            .dataTables_wrapper {
                overflow: visible !important;
                position: relative;
            }

            /* Ensure proper stacking: dropdowns under modals by default */
            .dropdown-menu {
                z-index: 1000;
            }

            .modal .dropdown-menu {
                z-index: 1060;
            }

            /* Scrollable long lists */
            .dropdown-menu.dropdown-menu-scrollable {
                max-height: 260px;
                overflow-y: auto;
            }

            .select2-container .select2-results>.select2-results__options {
                max-height: 260px;
                overflow-y: auto;
            }

            /* Keep Select2 above tables, but below modals */
            .select2-container {
                z-index: 1000;
            }

            .modal .select2-container {
                z-index: 1065;
            }

            /* Explicitly control Select2 dropdown stacking */
            .select2-container .select2-dropdown {
                z-index: 1000 !important;
            }

            .modal .select2-container .select2-dropdown {
                z-index: 1065 !important;
            }

            /* Keep Flatpickr calendars visible above tables/modals */
            .flatpickr-calendar {
                z-index: 1055 !important;
            }

            .modal .flatpickr-calendar {
                z-index: 1065 !important;
            }

            /* Custom styles for employee badges in the tujuan table */
            .employee-in-tujuan {
                display: inline-flex;
                align-items: center;
                padding: 0.3em 0.6em;
                font-size: 90%;
                cursor: pointer;
            }

            .employee-in-tujuan .fa-times-circle {
                cursor: pointer;
                margin-left: 5px;
                transition: color 0.2s;
            }

            .employee-in-tujuan .fa-times-circle:hover {
                color: #ff0000;
            }

            /* Make date-range controls roomier in Jumlah Hari column */
            #tujuan-table .tujuan-date-range .input-group-sm .form-control {
                min-width: 120px;
            }

            #tujuan-table .tujuan-date-range .input-group-sm .input-group-text {
                padding-left: 0.4rem;
                padding-right: 0.4rem;
            }

            /* Keep start/end date inputs on the same row */
            #tujuan-table .tujuan-date-range .input-group {
                flex-wrap: nowrap;
            }

            /* Ensure the Jumlah Hari column has enough width */
            #tujuan-table th:nth-child(5),
            #tujuan-table td:nth-child(5) {
                min-width: 320px;
            }

            /* Dynamic biaya fields styling (parity with Add form) */
            .dynamic-biaya-container {
                border: 1px solid #e3e6f0;
                border-radius: 0.35rem;
                padding: 0.75rem;
                background-color: #f8f9fc;
            }

            .dynamic-biaya-container:empty {
                display: none;
            }

            .dynamic-default-biaya-row {
                background-color: white;
                border-radius: 0.25rem;
                padding: 0.5rem;
                margin-bottom: 0.5rem;
                border: 1px solid #e3e6f0;
            }

            .dynamic-default-biaya-row:last-child {
                margin-bottom: 0;
            }

            .dynamic-biaya-container .alert {
                margin-bottom: 0;
            }

            /* Tab styling for anggaran per employee */
            .anggaran-tabs {
                border-bottom: 1px solid #dee2e6;
                margin-bottom: 1rem;
            }

            .anggaran-tabs .nav-link {
                border: 1px solid transparent;
                border-top-left-radius: 0.375rem;
                border-top-right-radius: 0.375rem;
                padding: 0.5rem 1rem;
                font-size: 0.875rem;
            }

            .anggaran-tabs .nav-link:hover {
                border-color: #e9ecef #e9ecef #dee2e6;
                isolation: isolate;
            }

            .anggaran-tabs .nav-link.active {
                color: #495057;
                background-color: #fff;
                border-color: #dee2e6 #dee2e6 #fff;
            }

            .anggaran-tab-content {
                padding: 1rem 0;
            }

            .anggaran-tab-pane {
                display: none;
            }

            .anggaran-tab-pane.active {
                display: block;
            }

            .employee-tab-badge {
                font-size: 0.75rem;
                margin-left: 0.5rem;
            }

            .tab-error-badge {
                font-size: 0.7rem;
                animation: pulse 1s infinite;
                margin-left: 0.25rem;
            }

            .form-check-input {
                border: 2px solid #000;
            }

            .form-check-input:checked {
                background-color: #000;
                border-color: #000;
            }

            @keyframes pulse {
                0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0.7;
                }

                100% {
                    opacity: 1;
                }
            }

            /* Validation error styling for dynamic fields */
            .is-invalid {
                border-color: #dc3545 !important;
            }

            .invalid-feedback {
                display: block !important;
                width: 100%;
                margin-top: 0.25rem;
                font-size: 0.875rem;
                color: #dc3545;
            }

            /* Ensure error messages are visible in DataTables */
            #tujuan-table .invalid-feedback,
            .dynamic-biaya-row .invalid-feedback,
            .dynamic-default-biaya-row .invalid-feedback {
                position: relative;
                z-index: 10;
            }

            /* Error styling for tujuan table cells */
            #tujuan-table td.error {
                background-color: #f8d7da !important;
            }

            /* Error alert styling */
            .form-error-alert {
                border-left: 4px solid #dc3545;
                background-color: #f8d7da;
                border-color: #f5c6cb;
            }
        </style>
    @endpush

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Form Edit Pengajuan Permohonan</h5>
                    </div>
                    <div class="card-body">
                        {{-- Form pengajuan --}}
                        <form role="form" method="POST" action="{{ route('permohonan.perizinan.personalia.update') }}"
                            id="{{ $dmenu }}-form" enctype="multipart/form-data" novalidate>
                            @csrf
                            @method('POST')

                            {{-- Hidden input for encrypted ID --}}
                            <input type="hidden" name="idencrypt" value="{{ $idencrypt }}">

                            {{-- ====================================================================== --}}
                            {{-- ===================== SHARED MOVABLE ELEMENTS ======================== --}}
                            {{-- ====================================================================== --}}

                            {{-- SHARED TEXTAREA (Only for Izin now) --}}
                            <div class="row" id="shared-textarea-container" style="display: none;">
                                <div class="col-md-12 mb-3">
                                    <label id="shared_textarea_label" for="alasan" class="form-label">Alasan/Deskripsi
                                        Izin/Tugas</label>
                                    <textarea id="alasan" placeholder="Contoh: Ada keperluan mendadak di rumah"
                                        class="form-control @error('alasan') is-invalid @enderror" name="alasan">{{ old('alasan', $permohonanPerizinan->alasan) }}</textarea>
                                    @error('alasan')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- SHARED DATE-TIME PICKER ROW --}}
                            <div class="row" id="datetime-picker-row" style="display: none;">
                                {{-- Jam Keluar / Waktu Berangkat --}}
                                <div class="col-md-6 mb-3">
                                    <label id="jam_keluar_label" for="jam_keluar" class="form-label">Jam Keluar <span
                                            class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="text" id="jam_keluar"
                                            class="form-control text-end pe-3 @error('jam_keluar') is-invalid @enderror"
                                            name="jam_keluar"
                                            value="{{ old('jam_keluar', $permohonanPerizinan->jam_keluar ? \Carbon\Carbon::parse($permohonanPerizinan->jam_keluar)->format('d-m-Y H:i') : '') }}"
                                            placeholder="Pilih Tanggal & Waktu">
                                        <span class="input-group-text"><i class="fas fa-clock"></i></span>
                                    </div>
                                    @error('jam_keluar')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>

                                {{-- Jam Masuk / Waktu Kepulangan --}}
                                <div class="col-md-6 mb-3">
                                    <label id="jam_masuk_label" for="jam_masuk" class="form-label">Jam Masuk <span
                                            class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="text" id="jam_masuk"
                                            class="form-control text-end pe-3 @error('jam_masuk') is-invalid @enderror"
                                            name="jam_masuk"
                                            value="{{ old('jam_masuk', $permohonanPerizinan->jam_masuk ? \Carbon\Carbon::parse($permohonanPerizinan->jam_masuk)->format('d-m-Y H:i') : '') }}"
                                            placeholder="Pilih Tanggal & Waktu">
                                        <span class="input-group-text"><i class="fas fa-clock"></i></span>
                                    </div>
                                    @error('jam_masuk')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                {{-- Kategori Izin/Tugas --}}
                                <div class="col-md-6 mb-3">
                                    <label for="kategori_perizinan_id" class="form-label">Kategori Permohonan <span
                                            class="text-danger">*</span></label>
                                    <select name="kategori_perizinan_id" id="kategori_perizinan_id" class="form-select"
                                        required>
                                        <option value="">Pilih Kategori Permohonan</option>
                                        @foreach ($kategoriPerizinan as $perizinan)
                                            <option value="{{ $perizinan->id }}"
                                                {{ old('kategori_perizinan_id', $permohonanPerizinan->kategori_perizinan_id) == $perizinan->id ? 'selected' : '' }}>
                                                {{ $perizinan->nama }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <small class="form-text text-muted">Pilih untuk menampilkan formulir yang sesuai</small>
                                    @error('kategori_perizinan_id')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- ====================================================================== --}}
                            {{-- =================== CONTAINER UNTUK FORMULIR IZIN ==================== --}}
                            {{-- ====================================================================== --}}
                            <div id="form-izin-container" style="display: none;">
                                <hr class="horizontal dark">
                                <p class="text-uppercase text-sm">Formulir Izin</p>
                                <div class="row">
                                    {{-- Jenis Izin --}}
                                    <div class="col-md-6 mb-3" id="jenis_izin_id_group">
                                        <label for="jenis_izin_id" class="form-label">Jenis Izin <span
                                                class="text-danger">*</span></label>
                                        <select name="jenis_izin_id" id="jenis_izin_id" class="form-select">
                                            <option value="">Pilih Jenis Izin</option>
                                            @foreach ($jenisIzin as $izin)
                                                <option value="{{ $izin->id }}"
                                                    {{ old('jenis_izin_id', $permohonanPerizinan->jenis_izin_id) == $izin->id ? 'selected' : '' }}>
                                                    {{ $izin->nama }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <small class="form-text text-muted">Pilih untuk menampilkan field lain</small>
                                        @error('jenis_izin_id')
                                            <span class="text-danger d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Shift Selection --}}
                                <div class="row" id="shift_selection_group" style="display: none;">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Jenis Waktu Kerja <span
                                                class="text-danger">*</span></label>
                                        <div class="mt-2">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="is_shift"
                                                    id="non_shift" value="0"
                                                    {{ old('is_shift', $permohonanPerizinan->is_shift ?? '0') == '0' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="non_shift">
                                                    Non Shift
                                                </label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="is_shift"
                                                    id="shift" value="1"
                                                    {{ old('is_shift', $permohonanPerizinan->is_shift ?? '0') == '1' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="shift">
                                                    Shift
                                                </label>
                                            </div>
                                        </div>
                                        <small class="form-text text-muted">Pilih jenis waktu kerja untuk permohonan
                                            ini</small>
                                        @error('is_shift')
                                            <span class="text-danger d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Placeholder for the shared textarea. It's inside a DIV to maintain row structure. --}}
                                <div id="izin-textarea-placeholder"></div>

                                {{-- Placeholder for the shared date-time pickers --}}
                                <div id="izin-datetime-placeholder"></div>

                                {{-- Placeholder untuk Tabel Tanggal di Form Izin --}}
                                <div id="izin-table-placeholder"></div>

                                {{-- Karyawan untuk Izin Dinas --}}
                                <div class="row" id="izin_dinas_karyawan_group">
                                    <div class="col-md-12 mb-3">
                                        <label id="label_izin_karyawan" for="nik_karyawan_display_izin" class="form-label">Pilih Karyawan (termasuk
                                            anda) <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="text" id="nik_karyawan_display_izin" class="form-control"
                                                placeholder="Pilih Karyawan dari List" readonly style="cursor: pointer;"
                                                data-bs-toggle="modal" data-bs-target="#searchModalProfiles">
                                            <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                                data-bs-target="#searchModalProfiles" style="cursor: pointer;"><i
                                                    class="fas fa-search"></i></span>
                                        </div>
                                        <small id="izin_karyawan_note_acara" class="form-text text-muted" style="display: none;">
                                            <i class="fas fa-exclamation-circle me-1 text-danger"></i>
                                            Catatan: Atasan yang dituju akan diambil dari karyawan teratas dalam List Data Karyawan yang dipilih (pada list karyawan ditandai dengan ikon <span><i class="fas fa-crown text-warning me-1"></i></span> ).
                                        </small>
                                    </div>
                                </div>

                                <div class="table-responsive mt-3" id="izin_selected_employees_container"
                                    style="display: none;">
                                    <p class="text-sm text-muted">Karyawan yang Dipilih:</p>
                                    <table class="table table-bordered table-striped w-100"
                                        id="izinSelectedEmployeesTable">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th style="width: 20%;">NIK</th>
                                                <th style="width: 40%;">Nama</th>
                                                <th style="width: 30%;">Departemen</th>
                                                <th style="width: 10%;" class="text-center">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>

                            {{-- ====================================================================== --}}
                            {{-- ================= CONTAINER UNTUK FORMULIR TUGAS =================== --}}
                            {{-- ====================================================================== --}}
                            <div id="form-tugas-container" style="display: none;">
                                <hr class="horizontal dark">
                                <p class="text-uppercase text-sm">Formulir Surat Tugas</p>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Tipe Tugas <span class="text-danger">*</span></label>
                                        <div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="tipe_tugas"
                                                    id="tipe_personal" value="personal"
                                                    {{ old('tipe_tugas', $permohonanPerizinan->tipe_tugas) == 'personal' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="tipe_personal">Personal</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="tipe_tugas"
                                                    id="tipe_group" value="group"
                                                    {{ old('tipe_tugas', $permohonanPerizinan->tipe_tugas) == 'group' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="tipe_group">Group</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Tujuan <span class="text-danger">*</span></label>
                                        <div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="tujuan_tugas"
                                                    id="tujuan_dalam_negeri" value="dalam_negeri"
                                                    {{ old('tujuan_tugas', $permohonanPerizinan->tujuan_tugas) == 'dalam_negeri' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="tujuan_dalam_negeri">Dalam
                                                    Negeri</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="tujuan_tugas"
                                                    id="tujuan_luar_negeri" value="luar_negeri"
                                                    {{ old('tujuan_tugas', $permohonanPerizinan->tujuan_tugas) == 'luar_negeri' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="tujuan_luar_negeri">Luar
                                                    Negeri</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="tujuan_tugas"
                                                    id="tujuan_combined" value="combined"
                                                    {{ old('tujuan_tugas', $permohonanPerizinan->tujuan_tugas) == 'combined' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="tujuan_combined">Gabungan</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Karyawan (Hanya untuk Tipe Group) --}}
                                <div class="row" id="tugas-group-selection">
                                    <div class="col-md-12 mb-3">
                                        <label for="nik_karyawan_display_tugas" class="form-label">Pilih Karyawan<span
                                                class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="text" id="nik_karyawan_display_tugas" class="form-control"
                                                placeholder="Pilih Karyawan dari List" readonly style="cursor: pointer;"
                                                data-bs-toggle="modal" data-bs-target="#searchModalProfiles">
                                            <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                                data-bs-target="#searchModalProfiles" style="cursor: pointer;"><i
                                                    class="fas fa-search"></i></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="table-responsive mt-3" id="tugas_selected_employees_container"
                                    style="display: none;">
                                    <p class="text-sm text-muted">Karyawan yang Ditugaskan:</p>
                                    <table class="table table-bordered table-striped w-100"
                                        id="tugasSelectedEmployeesTable">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th style="width: 20%;">NIK</th>
                                                <th style="width: 40%;">Nama</th>
                                                <th style="width: 30%;">Departemen</th>
                                                <th style="width: 10%;" class="text-center">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>

                                {{-- Placeholder for the shared date-time pickers --}}
                                <div id="tugas-datetime-placeholder" class="mt-3"></div>

                                <div class="row">
                                    <div class="col-md-3 mb-3">
                                        <label for="total_hari" class="form-label">Total Hari <span
                                                class="text-danger">*</span></label>
                                        <input type="number" name="total_hari" id="total_hari"
                                            class="form-control text-end" readonly
                                            value="{{ old('total_hari', $permohonanPerizinan->total_hari ?? 0) }}">
                                    </div>
                                </div>

                                {{-- Placeholder untuk Tabel Tanggal di Form Tugas --}}
                                <div id="tugas-table-placeholder"></div>

                                {{-- DYNAMIC TABLE FOR TUJUAN --}}
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <label class="form-label">Rincian Tujuan <span
                                                class="text-danger">*</span></label>
                                        <div class="table-responsive">
                                            <table
                                                class="table table-bordered table-striped table-hover table-sm align-middle w-100"
                                                id="tujuan-table">
                                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                    <tr>
                                                        <th style="width: 20%;">Tujuan (Negara) <span
                                                                class="text-danger">*</span></th>
                                                        <th style="width: 10%;" class="text-center">Status <span
                                                                class="text-danger">*</span></th>
                                                        <th>Keterangan <span class="text-danger">*</span></th>
                                                        <th style="width: 25%;">Karyawan Mengikuti <span
                                                                class="text-danger">*</span></th>
                                                        <th style="width: 18%;" class="text-center">Jumlah Hari <span
                                                                class="text-danger">*</span></th>
                                                        <th style="width: 5%;" class="text-center">Aksi</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="tujuan-table-body">
                                                    {{-- JS will populate this with existing data from initialTujuanData --}}
                                                </tbody>
                                            </table>
                                        </div>
                                        <button type="button" class="btn btn-sm btn-success mt-2"
                                            id="add-tujuan-row-btn">
                                            <i class="fas fa-plus me-1"></i> Tambah Tujuan
                                        </button>
                                    </div>
                                </div>

                                {{-- Logic to check if existing data has budget --}}
                                @php
                                    $hasAnggaran = isset($biayaPengeluaran) && !$biayaPengeluaran->isEmpty();
                                @endphp

                                {{-- Input penanda untuk backend --}}
                                <input type="hidden" name="with_anggaran" id="with_anggaran_input"
                                    value="{{ old('with_anggaran', $hasAnggaran ? '1' : '0') }}">

                                {{-- Tombol untuk menampilkan formulir anggaran --}}
                                <div class="row mt-4" id="add-anggaran-button-container" style="display: none;">
                                    <div class="col-12">
                                        <button type="button" class="btn btn-secondary" id="btn-toggle-anggaran"
                                            disabled
                                            title="Anggaran tidak dapat diubah pada tahap edit. Status anggaran sudah disetujui oleh feat.">
                                            <i class="fas fa-lock me-1"></i> Rincian Anggaran (Tidak dapat diubah)
                                        </button>
                                        <small class="text-muted d-block mt-2">
                                            <i class="fas fa-info-circle me-1"></i>
                                            Status anggaran sudah disetujui oleh feat dan tidak dapat diubah di
                                            halaman edit.
                                        </small>
                                    </div>
                                </div>

                                {{-- [START] NEW ANGGARAN SECTION STRUCTURE --}}
                                <div id="anggaran-section-container" style="{{ $hasAnggaran ? '' : 'display: none;' }}">

                                    <hr class="horizontal dark">
                                    <p class="text-uppercase text-sm">Formulir Anggaran <span class="text-danger">*</span>
                                    </p>

                                    <div id="anggaran-no-employees-hint" class="alert alert-info py-2 px-3 small"
                                        style="display: none;">
                                        Pilih karyawan terlebih dahulu untuk mengisi biaya pengeluaran per karyawan.
                                    </div>

                                    <!-- Tab navigation untuk karyawan -->
                                    <div id="anggaran-tabs-container" style="display: none;">
                                        <ul class="nav nav-tabs anggaran-tabs" id="anggaran-employee-tabs"
                                            role="tablist">
                                            <!-- Tab items akan di-generate oleh JavaScript -->
                                        </ul>

                                        <div class="anggaran-tab-content" id="anggaran-tab-content">
                                            <!-- Tab content akan di-generate oleh JavaScript -->
                                        </div>
                                    </div>

                                    <!-- Container lama untuk backward compatibility jika diperlukan -->
                                    <div id="anggaran-per-employee-container" style="display: none;"></div>
                                </div>
                                {{-- [END] NEW ANGGARAN SECTION STRUCTURE --}}
                            </div>

                            {{-- ====================================================================== --}}
                            {{-- ===================== BAGIAN BERSAMA (SHARED) ====================== --}}
                            {{-- ====================================================================== --}}
                            <div id="shared-bottom-section" style="display: none;">
                                <hr class="horizontal dark">

                                {{-- Hidden input for NIKs (SHARED) --}}
                                <input type="hidden" name="nik_karyawan" id="nik_karyawan"
                                    value="{{ old('nik_karyawan', $karyawanPemohon->pluck('nik')->toJson() ?? '[]') }}">
                                @error('nik_karyawan')
                                    <span class="text-danger d-block">{{ $message }}</span>
                                @enderror

                                {{-- Lampiran (SHARED) - Structure from OLD edit.blade.php is preserved for existing files --}}
                                <div class="row mt-3">
                                    <div class="col-md-6 mb-3" id="lampiran_group">
                                        <div class="mb-3">
                                            <label class="form-label">Lampiran Sebelumnya:</label>
                                            <div id="existing-lampiran-preview"
                                                class="d-flex flex-wrap gap-2 pswp-gallery">
                                                @if (isset($lampiran) && !$lampiran->isEmpty())
                                                    @foreach ($lampiran as $item)
                                                        @if ($item->width && $item->height)
                                                            <a href="{{ asset('storage/' . $item->gambar_lampiran) }}"
                                                                data-pswp-width="{{ $item->width }}"
                                                                data-pswp-height="{{ $item->height }}" target="_blank">
                                                                <img src="{{ asset('storage/' . $item->gambar_lampiran) }}"
                                                                    alt="Lampiran" class="img-thumbnail"
                                                                    style="width: 100px; height: 100px; object-fit: cover;">
                                                            </a>
                                                        @endif
                                                    @endforeach
                                                @else
                                                    <small class="text-muted">Tidak ada lampiran.</small>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="lampiran-input" class="form-label">Ganti/Tambah Lampiran
                                                (Opsional)</label>
                                            <input type="file"
                                                class="form-control @error('lampiran.*') is-invalid @enderror"
                                                name="lampiran[]" accept=".jpg,.jpeg,.png" id="lampiran-input" multiple>
                                            <small class="form-text text-muted">Upload baru akan menggantikan lampiran
                                                lama. Format: .jpg, .jpeg, .png. Maks per file: 1.5 MB</small>
                                            @error('lampiran.*')
                                                <span class="text-danger d-block">{{ $message }}</span>
                                            @enderror
                                            @if ($errors->has('lampiran'))
                                                <span class="text-danger d-block">
                                                    {{ $errors->first('lampiran') }}
                                                </span>
                                            @endif
                                        </div>
                                        <div class="mt-3">
                                            <label class="form-label">Pratinjau Lampiran Baru:</label>
                                            <div id="lampiran-preview" class="d-flex flex-wrap gap-2"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Elemen Tabel Tanggal. Dimulai dalam keadaan tersembunyi. JS akan memindahkannya. --}}
                            <div id="table-tanggal-container" class="row" style="display: none;">
                                <div class="col-md-12 mb-3">
                                    <label class="form-label">Daftar Tanggal</label>
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped w-100" id="tanggal_table">
                                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th class="text-center">Hari</th>
                                                    <th class="text-center">Tanggal</th>
                                                    <th class="text-center">Bulan</th>
                                                    <th class="text-center">Tahun</th>
                                                    <th class="text-center">Aksi</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                                <input type="hidden" name="tanggal_array" id="tanggal_array"
                                    value="{{ old('tanggal_array', $tanggalArray ?? '[]') }}">
                                @error('tanggal_array')
                                    <span class="text-danger d-block">{{ $message }}</span>
                                @enderror
                                <div class="nav-wrapper" id="noted">
                                    <code>Note : Hapus tanggal yang merupakan cuti bersama, libur nasional, dan
                                        weekend.</code>
                                </div>
                            </div>

                            {{-- ========================================================== --}}
                            {{-- ===================== START: ALL MODALS ================== --}}
                            {{-- ========================================================== --}}

                            <!-- Modal untuk pratinjau gambar -->
                            <div class="modal fade" id="imageModal" 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">Pratinjau Lampiran</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body text-center"><img src="" id="modalImage"
                                                alt="Lampiran" class="img-thumbnail"
                                                style="width: 100%; height: auto; max-width: 500px;"></div>
                                    </div>
                                </div>
                            </div>

                            <!-- Modal untuk pencarian karyawan (multi-select) -->
                            <div class="modal fade" id="searchModalProfiles" tabindex="-1" role="dialog"
                                aria-labelledby="searchModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="searchModalLabel">List Data Karyawan</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body table-responsive">
                                            <table class="table table-bordered table-striped w-100 display"
                                                id="list_profiles">
                                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                    <tr>
                                                        <th style="width: 50px;" class="text-center">
                                                            <input type="checkbox" id="profiles_select_all"
                                                                class="form-check-input" />
                                                        </th>
                                                        <th>NIK</th>
                                                        <th>Nama</th>
                                                        <th>Departemen</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($profiles as $profile)
                                                        <tr>
                                                            <td class="text-center">
                                                                <input type="checkbox"
                                                                    class="form-check-input profile-select-check"
                                                                    data-nik="{{ $profile->nik }}"
                                                                    data-nama="{{ e($profile->nama) }}"
                                                                    data-departemen="{{ e($profile->departemen ?? 'N/A') }}"
                                                                    data-departemen-id="{{ $profile->id_departemen }}">
                                                            </td>
                                                            <td>{{ $profile->nik }}</td>
                                                            <td>{{ e($profile->nama) }}</td>
                                                            <td>{{ e($profile->departemen ?? 'N/A') }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">Tutup</button>
                                            <button type="button" id="addSelectedProfilesBtn" class="btn btn-primary">
                                                <i class="bi bi-plus-circle me-1"></i> Tambahkan yang Dipilih
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Modal untuk Pemilihan Currency -->
                            <div class="modal fade" id="currencyModal" tabindex="-1" role="dialog"
                                aria-labelledby="currencyModalLabel" 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="currencyModalLabel">Pilih Mata Uang</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <table class="table table-bordered table-striped w-100" id="currenciesTable">
                                                <thead>
                                                    <tr>
                                                        <th style="width: 15%;">Aksi</th>
                                                        <th>Kode</th>
                                                        <th>Negara</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($currencies as $currency)
                                                        <tr>
                                                            <td class="text-center">
                                                                <button type="button" class="btn btn-sm btn-primary"
                                                                    onclick="selectCurrency('{{ $currency->code }}')">Pilih</button>
                                                            </td>
                                                            <td>{{ $currency->code }}</td>
                                                            <td>{{ $currency->negara_nama }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Modal untuk Nama Lengkap Karyawan -->
                            <div class="modal fade" id="employeeFullNameModal" tabindex="-1" role="dialog"
                                aria-labelledby="employeeFullNameModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="employeeFullNameModalLabel">Nama Lengkap</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <p id="modalEmployeeFullName" class="mb-0"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Modal untuk Pemilihan Negara Tujuan -->
                            <div class="modal fade" id="countryPickerModal" tabindex="-1" role="dialog"
                                aria-labelledby="countryPickerLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="countryPickerLabel">Pilih Negara Tujuan</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <table class="table table-bordered table-striped w-100"
                                                id="countriesListTable">
                                                <thead>
                                                    <tr>
                                                        <th style="width: 10%">ID</th>
                                                        <th>Negara</th>
                                                        <th style="width: 15%">State</th>
                                                        <th style="width: 12%">Aksi</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- ======================================================== --}}
                            {{-- ===================== END: ALL MODALS ================== --}}
                            {{-- ======================================================== --}}


                            {{-- Tombol Kembali dan Simpan --}}
                            <div class="d-flex justify-content-end mt-4">
                                <button type="button" class="btn btn-secondary me-2" onclick="history.back()"><i
                                        class="fas fa-arrow-left me-1"></i><span
                                        class="font-weight-bold">Kembali</span></button>
                                @if ($authorize->edit == '1')
                                    <button type="submit" id="btn-submit" class="btn btn-primary"><i
                                            class="fas fa-save me-1"></i><span class="font-weight-bold">Simpan
                                            Perubahan</span></button>
                                @endif
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    {{-- Flatpickr --}}
    <script src="{{ asset('/') }}assets/js/flatpickr.min.js"></script>
    {{-- Photoswipe & Form Lampiran --}}
    <script src="{{ asset('/') }}assets/js/photoswipe.umd.min.js"></script>
    <script src="{{ asset('/') }}assets/js/photoswipe-lightbox.umd.min.js"></script>
    <script src="{{ asset('/') }}assets/js/form_lampiran.js"></script>



    <script>
        document.addEventListener("DOMContentLoaded", function() {

            let isInitialLoad = true;
            let tujuanDataTable;
            let isRenderingAnggaran = false; // Flag to prevent auto-setting during rendering

            // --- [EDIT ONLY] INITIAL DATA FROM CONTROLLER ---
            const initialTujuanData = @json($rincianTujuan ?? []);
            const initialAnggaranData = @json($anggaranDataForJs ?? new stdClass());

            // --- DATA FROM CONTROLLER (SHARED) ---
            const currentUserNIK = @json($currentUserNIK ?? null);
            const currentUserDepartemenId = @json($currentUserDepartemenId ?? null);
            const allProfiles = @json($profiles);
            const currenciesList = @json($currencies ?? []);
            const periodeIzinTugas = @json($periodeIzinTugas);
            const defaultBiaya = @json($defaultBiaya ?? []);

            // Validation errors from backend
            const validationErrors = @json($errors->toArray() ?? []);
            const oldInput = @json(old() ?? []);

            // Make oldInput available globally for error handling
            window.oldInputData = oldInput;

            // --- UTILITY & HELPER FUNCTIONS ---
            const getElem = (id) => document.getElementById(id);
            const escapeHtml = (str) => {
                if (str == null) return '';
                return String(str)
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#39;');
            };
            const setDisplay = (element, display) => {
                if (element) element.style.display = display;
            };

            // [EDIT ONLY] Initialize PhotoSwipe for existing attachments
            const lightbox = new PhotoSwipeLightbox({
                gallery: '#existing-lampiran-preview',
                children: 'a',
                pswpModule: PhotoSwipe
            });
            lightbox.init();

            // --- VALIDATION ERROR HANDLING ---
            function showFieldError(fieldName, errorMessage) {
                const field = document.querySelector(`[name="${fieldName}"]`);
                if (!field) return;

                // Add error class to field
                field.classList.add('is-invalid');

                // Remove existing error message
                const existingError = field.parentNode.querySelector('.invalid-feedback, .text-danger');
                if (existingError) existingError.remove();

                // Add new error message
                const errorDiv = document.createElement('div');
                errorDiv.className = 'invalid-feedback d-block';
                errorDiv.textContent = errorMessage;
                field.parentNode.appendChild(errorDiv);
            }

            function showDynamicFieldError(fieldPath, errorMessage, silent = false) {
                // Handle dynamic field errors like biaya_pengeluaran.15005.default.1.jumlah
                const parts = fieldPath.split('.');

                if (parts[0] === 'biaya_pengeluaran' && parts.length >= 5) {
                    const nik = parts[1];
                    const type = parts[2]; // 'default' or 'lain'
                    const index = parts[3];
                    const fieldType = parts[4]; // 'jumlah', 'currency', 'deskripsi'

                    // For default type, try to get biaya_id from submitted data to match field properly
                    if (type === 'default') {
                        return showAnggaranFieldErrorForDefault(nik, index, fieldType, errorMessage, silent);
                    } else {
                        return showAnggaranFieldError(nik, type, index, fieldType, errorMessage, silent);
                    }
                } else if (parts[0] === 'rincian_tujuan' && parts.length >= 3) {
                    const fieldType = parts[1];
                    const index = parts[2];

                    showTujuanFieldError(fieldType, index, errorMessage);
                    return true;
                }

                return false;
            }

            function showAnggaranFieldErrorForDefault(nik, index, fieldType, errorMessage, silent = false) {
                const nikKey = safeId(nik);
                let field = null;

                // Try to find field with exact name first - this should work for most cases
                field = document.querySelector(
                    `input[name="biaya_pengeluaran[${nik}][default][${index}][${fieldType}]"]`);

                if (field) {
                    return displayFieldError(field, errorMessage, `exact-${nik}-default-${index}-${fieldType}`);
                }

                // If exact match fails, we need to check the old input data to get the biaya_id
                // and match it with the actual field structure
                if (window.oldInputData && window.oldInputData.biaya_pengeluaran &&
                    window.oldInputData.biaya_pengeluaran[nik] &&
                    window.oldInputData.biaya_pengeluaran[nik].default &&
                    window.oldInputData.biaya_pengeluaran[nik].default[index]) {

                    const biayaData = window.oldInputData.biaya_pengeluaran[nik].default[index];
                    const biayaId = biayaData.biaya_id;
                    const currency = biayaData.currency || 'IDR';

                    console.log(
                        `=== Error Debug: biaya_id=${biayaId}, currency=${currency}, fieldType=${fieldType}, index=${index} ===`
                    );

                    // For biaya_id 3 (transportasi) and 4 (hotel), these are dynamic fields
                    if (biayaId === '3' || biayaId === '4') {
                        console.log(`🔍 Searching for dynamic field with biaya_id ${biayaId}`);

                        // --- START PERBAIKAN ---
                        // Selector yang lebih spesifik: cari input di dalam container yang tepat.
                        const containerId = `dynamic-biaya-${nikKey}-${biayaId}-container`;
                        const container = document.getElementById(containerId);

                        if (container) {
                            // Cari input 'jumlah' (atau fieldType lain) di dalam container tersebut.
                            // Ini memastikan kita menargetkan field yang benar (Hotel atau Transportasi)
                            // dan tidak salah sasaran jika ada beberapa field dinamis.
                            field = container.querySelector(`input[name*="[${fieldType}]"]`);
                        }
                        // --- END PERBAIKAN ---

                        if (field) {
                            console.log(`✅ Found dynamic field for biaya_id ${biayaId}:`, field.name);
                            return displayFieldError(field, errorMessage, `dynamic-${nik}-${biayaId}-${fieldType}`);
                        } else {
                            console.warn(`❌ Dynamic field NOT found for biaya_id ${biayaId}`);
                            // Check if container exists
                            const nikKey = safeId(nik);
                            const container = document.getElementById(
                                `dynamic-biaya-${nikKey}-${biayaId}-container`);
                            console.log(`Container dynamic-biaya-${nikKey}-${biayaId}-container exists:`, !!
                                container);
                            return false; // Don't fallback for dynamic fields
                        }
                    } else {
                        // For biaya_id 1 and 2, these are regular fields with specific structure
                        // Try to find by biaya_id and currency combination
                        const base = `bp_${nikKey}_default_${biayaId}`;

                        if (currency === 'USD') {
                            // Look for USD field
                            field = document.getElementById(`${base}_${fieldType}_usd`);
                        } else {
                            // Look for IDR field
                            field = document.getElementById(`${base}_${fieldType}`);
                        }

                        if (field) {
                            console.log(`Found regular field for biaya_id ${biayaId}, currency ${currency}:`,
                                field);
                            return displayFieldError(field, errorMessage,
                                `regular-${nik}-${biayaId}-${currency}-${fieldType}`);
                        }
                    }
                }

                // DO NOT use fallback logic - this causes wrong field assignment
                // Each error should only be shown on its specific field based on biaya_id

                if (!silent) {
                    console.warn(
                        `🚫 NO FALLBACK: Field not found for default error: ${nik}.default.${index}.${fieldType}`
                    );
                }
                return false;
            }

            function displayFieldError(field, errorMessage, errorId) {
                // Check if this exact error already exists
                const existingError = document.getElementById(errorId);
                if (existingError) {
                    return true; // Error already shown, prevent duplicates
                }

                // Check if this field already has the same error message
                if (field.classList.contains('is-invalid')) {
                    const existingErrorDiv = field.parentNode.querySelector('.invalid-feedback');
                    if (existingErrorDiv && existingErrorDiv.textContent.trim() === errorMessage.trim()) {
                        return true; // Same error already exists
                    }
                }

                field.classList.add('is-invalid');

                // Remove existing error messages for this field specifically
                const fieldContainer = field.closest('.input-group') || field.parentNode;
                const existingErrors = fieldContainer.querySelectorAll('.invalid-feedback, .text-danger');
                existingErrors.forEach(error => {
                    if (!error.textContent.includes('*')) { // Don't remove required indicators
                        error.remove();
                    }
                });

                // Add error message with unique ID
                const errorDiv = document.createElement('div');
                errorDiv.className = 'invalid-feedback d-block';
                errorDiv.id = errorId;
                errorDiv.textContent = errorMessage;

                // Insert error after the field container
                if (field.closest('.input-group')) {
                    field.closest('.input-group').insertAdjacentElement('afterend', errorDiv);
                } else {
                    field.insertAdjacentElement('afterend', errorDiv);
                }

                return true;
            }

            function showAnggaranFieldError(nik, type, index, fieldType, errorMessage, silent = false) {
                const nikKey = safeId(nik);
                let field = null;

                // Try multiple selectors to find the field
                const selectors = [
                    `input[name="biaya_pengeluaran[${nik}][${type}][${index}][${fieldType}]"]`,
                    `input[data-nik="${nik}"][name*="[${type}]"][name*="[${fieldType}]"]`,
                    `input[data-nik="${nik}"][data-field="${fieldType}"]`,
                    `.anggaran-tab-pane[data-employee-nik="${nikKey}"] input[name*="[${type}]"][name*="[${fieldType}]"]`,
                    `#anggaran-emp-${nikKey} input[name*="[${type}]"][name*="[${fieldType}]"]`
                ];

                // For dynamic default fields (transportation/hotel), add specific selectors
                if (type === 'default') {
                    selectors.push(
                        `input[data-nik="${nik}"][data-biaya-id][name*="[${fieldType}]"]`,
                        `#anggaran-emp-${nikKey} .dynamic-default-biaya-row input[name*="[${fieldType}]"]`,
                        `[id*="dynamic-biaya-${nikKey}-"] input[name*="[${fieldType}]"]`
                    );
                }

                // If it's a textarea field, try textarea selectors too
                if (fieldType === 'deskripsi') {
                    selectors.push(
                        `textarea[name="biaya_pengeluaran[${nik}][${type}][${index}][${fieldType}]"]`,
                        `textarea[data-nik="${nik}"][data-field="${fieldType}"]`
                    );
                }

                for (const selector of selectors) {
                    const fields = document.querySelectorAll(selector);
                    if (fields.length > 0) {
                        // For dynamic fields, try to find the specific field by index or take the first available
                        if (fields.length > index) {
                            field = fields[index];
                        } else {
                            field = fields[0]; // Take first available field if index is out of bounds
                        }
                        break;
                    }
                }

                // If still not found, try to find by position in dynamic containers
                if (!field && type === 'lain') {
                    const container = document.getElementById(`biaya-lain-container-${nikKey}`);
                    if (container) {
                        const rows = container.querySelectorAll('.dynamic-biaya-row');
                        if (rows[index]) {
                            field = rows[index].querySelector(`[data-field="${fieldType}"]`);
                        }
                    }
                }

                if (!field && type === 'default') {
                    // Try to find in default biaya containers by index
                    const containers = document.querySelectorAll(`[id*="dynamic-biaya-${nikKey}-"]`);
                    for (const container of containers) {
                        const rows = container.querySelectorAll('.dynamic-default-biaya-row');
                        if (rows[index]) {
                            field = rows[index].querySelector(`[name*="[${fieldType}]"]`);
                            if (field) break;
                        }
                    }
                }

                if (field) {
                    // Create unique error identifier for this specific field and error
                    const fieldName = field.getAttribute('name') || field.id ||
                        `${nik}-${type}-${index}-${fieldType}`;
                    const errorId = `error-${fieldName.replace(/[\[\]]/g, '_')}`;

                    // Check if this exact error already exists
                    const existingError = document.getElementById(errorId);
                    if (existingError) {
                        return true; // Error already shown, prevent duplicates
                    }

                    // Check if this field already has an error to prevent duplicates
                    if (field.classList.contains('is-invalid')) {
                        const existingErrorDiv = field.parentNode.querySelector('.invalid-feedback');
                        if (existingErrorDiv && existingErrorDiv.textContent.trim() === errorMessage.trim()) {
                            return true; // Same error already exists
                        }
                    }

                    field.classList.add('is-invalid');

                    // Remove existing error messages for this field specifically
                    const fieldContainer = field.closest('.input-group') || field.parentNode;
                    const existingErrors = fieldContainer.querySelectorAll('.invalid-feedback, .text-danger');
                    existingErrors.forEach(error => {
                        if (!error.textContent.includes('*')) { // Don't remove required indicators
                            error.remove();
                        }
                    });

                    // Add error message with unique ID
                    const errorDiv = document.createElement('div');
                    errorDiv.className = 'invalid-feedback d-block';
                    errorDiv.id = errorId;
                    errorDiv.style.fontSize = '0.75rem';
                    errorDiv.textContent = errorMessage;
                    errorDiv.setAttribute('data-error-for', field.name ||
                        ''); // Mark which field this error belongs to

                    // Append after the input group or field
                    if (field.closest('.input-group')) {
                        field.closest('.input-group').parentNode.appendChild(errorDiv);
                    } else {
                        field.parentNode.appendChild(errorDiv);
                    }

                    // Also add error to the tab if using tab layout
                    const tabContent = field.closest('.anggaran-tab-pane');
                    if (tabContent) {
                        const tabId = tabContent.id;
                        const tabLink = document.querySelector(`[data-bs-target="#${tabId}"]`);
                        if (tabLink) {
                            // Ensure tab has error badge
                            let errorBadge = tabLink.querySelector('.tab-error-badge');
                            if (!errorBadge) {
                                errorBadge = document.createElement('span');
                                errorBadge.className = 'badge bg-danger tab-error-badge';
                                errorBadge.textContent = '!';
                                tabLink.appendChild(errorBadge);
                            }
                        }
                    }

                    return true; // Success
                } else {
                    if (!silent) {
                        console.warn(
                            `Field not found for error: biaya_pengeluaran[${nik}][${type}][${index}][${fieldType}]`
                        );
                        console.log('Tried selectors:', selectors);
                        console.log('Available anggaran fields:', document.querySelectorAll(
                            '[name*="biaya_pengeluaran"]').length);
                    }
                    return false; // Failed
                }
            }

            function showTujuanFieldError(fieldType, index, errorMessage) {
                let selector = '';
                let field = null;

                if (fieldType === 'tujuan') {
                    // For tujuan field, find the hidden input
                    selector = `input[name="rincian_tujuan[tujuan][${index}]"]`;
                    field = document.querySelector(selector);
                    if (field) {
                        // Also add error styling to the button
                        const button = field.closest('div').querySelector('.pick-country-btn');
                        if (button) {
                            button.classList.add('border-danger');
                            button.classList.remove('btn-outline-primary', 'btn-outline-secondary');
                            button.classList.add('btn-outline-danger');
                        }
                    }
                } else if (fieldType === 'keterangan') {
                    selector = `textarea[name="rincian_tujuan[keterangan][${index}]"]`;
                } else if (fieldType === 'tanggal_mulai') {
                    selector = `input[name="rincian_tujuan[tanggal_mulai][${index}]"]`;
                    field = document.querySelector(selector);
                    if (field) {
                        // Also add error to the visible date picker
                        const visibleInput = field.closest('td').querySelector('.tujuan-start');
                        if (visibleInput) {
                            visibleInput.classList.add('is-invalid');
                        }
                    }
                } else if (fieldType === 'tanggal_berakhir') {
                    selector = `input[name="rincian_tujuan[tanggal_berakhir][${index}]"]`;
                    field = document.querySelector(selector);
                    if (field) {
                        // Also add error to the visible date picker
                        const visibleInput = field.closest('td').querySelector('.tujuan-end');
                        if (visibleInput) {
                            visibleInput.classList.add('is-invalid');
                        }
                    }
                } else if (fieldType === 'jumlah_hari') {
                    selector = `input[name="rincian_tujuan[jumlah_hari][${index}]"]`;
                    field = document.querySelector(selector);
                    if (field) {
                        // Also add error to the visible input
                        const visibleInput = field.closest('td').querySelector('.tujuan-jumlah-hari');
                        if (visibleInput) {
                            visibleInput.classList.add('is-invalid');
                        }
                    }
                } else if (fieldType === 'karyawan') {
                    selector = `input[name="rincian_tujuan[karyawan][${index}]"]`;
                    field = document.querySelector(selector);
                    if (field) {
                        // Add error styling to the employee badges container
                        const container = field.closest('td');
                        if (container) {
                            container.classList.add('error');
                        }
                    }
                }

                if (!field) {
                    field = document.querySelector(selector);
                }

                if (field) {
                    field.classList.add('is-invalid');

                    // Remove existing error
                    const existingError = field.closest('td').querySelector(
                        '.invalid-feedback, .text-danger.error-msg');
                    if (existingError) existingError.remove();

                    // Add error message to the table cell
                    const errorDiv = document.createElement('div');
                    errorDiv.className = 'invalid-feedback text-danger error-msg d-block mt-1';
                    errorDiv.style.fontSize = '0.75rem';
                    errorDiv.textContent = errorMessage;

                    // Append to the table cell instead of directly to field parent
                    const tableCell = field.closest('td');
                    if (tableCell) {
                        tableCell.appendChild(errorDiv);
                    }
                }
            }

            function clearAllTabErrorBadges() {
                // Remove all existing tab error badges
                document.querySelectorAll('.tab-error-badge').forEach(badge => {
                    badge.remove();
                });
            }

            function updateAllTabErrorBadges() {
                // Check each tab for errors and update badges accordingly
                document.querySelectorAll('.anggaran-tab-pane').forEach(tabPane => {
                    const tabId = tabPane.id;
                    const tabLink = document.querySelector(`[data-bs-target="#${tabId}"]`);

                    if (tabLink) {
                        const hasErrors = tabPane.querySelectorAll('.is-invalid').length > 0;
                        let errorBadge = tabLink.querySelector('.tab-error-badge');

                        if (hasErrors && !errorBadge) {
                            // Add badge if there are errors but no badge
                            errorBadge = document.createElement('span');
                            errorBadge.className = 'badge bg-danger tab-error-badge';
                            errorBadge.textContent = '!';
                            tabLink.appendChild(errorBadge);
                        } else if (!hasErrors && errorBadge) {
                            // Remove badge if no errors but badge exists
                            errorBadge.remove();
                        }
                    }
                });
            }

            function clearAllFieldErrors() {
                // Remove all error classes and error messages
                document.querySelectorAll('.is-invalid').forEach(field => {
                    field.classList.remove('is-invalid');
                });
                document.querySelectorAll('.invalid-feedback, .text-danger:not(.d-block)').forEach(error => {
                    if (!error.textContent.includes('*')) { // Don't remove required field indicators
                        error.remove();
                    }
                });
            }

            function displayValidationErrors() {
                // Display all validation errors from backend
                const errorCount = Object.keys(validationErrors).length;

                if (errorCount > 0) {
                    // Check if form is ready for error display
                    if (!isFormReadyForErrorDisplay()) {
                        console.log('Form not ready for error display, retrying...');
                        setTimeout(displayValidationErrors, 500);
                        return;
                    }

                    // Clear all existing tab error badges first
                    clearAllTabErrorBadges();

                    // Show summary alert at the top of the form
                    showErrorSummaryAlert(errorCount);

                    // Separate anggaran errors from other errors
                    const anggaranErrors = {};
                    const otherErrors = {};

                    for (const [fieldPath, messages] of Object.entries(validationErrors)) {
                        if (fieldPath.includes('biaya_pengeluaran')) {
                            anggaranErrors[fieldPath] = messages;
                        } else {
                            otherErrors[fieldPath] = messages;
                        }
                    }

                    // Display non-anggaran errors immediately
                    for (const [fieldPath, messages] of Object.entries(otherErrors)) {
                        const errorMessage = Array.isArray(messages) ? messages[0] : messages;

                        if (fieldPath.includes('.')) {
                            showDynamicFieldError(fieldPath, errorMessage);
                        } else {
                            showFieldError(fieldPath, errorMessage);
                        }
                    }

                    // Display anggaran errors with retry mechanism
                    if (Object.keys(anggaranErrors).length > 0) {
                        displayAnggaranErrorsWithRetry(anggaranErrors, 5); // Max 5 retries
                    }

                    // After displaying all errors, update tab badges based on actual error state
                    setTimeout(() => {
                        updateAllTabErrorBadges();
                        scrollToFirstError();
                    }, 1000); // Increased timeout to ensure all errors are processed
                }
            }

            function isFormReadyForErrorDisplay() {
                // Check if basic form elements are present
                const basicReady = document.querySelector('#kategori_perizinan_id') !== null;

                // If there are anggaran errors, check if anggaran section is ready
                const hasAnggaranErrors = Object.keys(validationErrors).some(key => key.includes(
                    'biaya_pengeluaran'));
                if (hasAnggaranErrors && oldInput.with_anggaran === '1') {
                    const anggaranSection = document.getElementById('anggaran-section-container');
                    const anggaranReady = anggaranSection &&
                        anggaranSection.style.display !== 'none' &&
                        (document.querySelectorAll('#anggaran-employee-tabs .nav-link').length > 0 ||
                            document.getElementById('anggaran-per-employee-container').children.length > 0);

                    return basicReady && anggaranReady;
                }

                return basicReady;
            }

            function displayAnggaranErrorsWithRetry(anggaranErrors, maxRetries) {
                let retryCount = 0;
                const processedErrors = new Set(); // Track which errors have been successfully displayed

                function tryDisplayAnggaranErrors() {
                    retryCount++;
                    let successCount = 0;
                    let totalErrors = Object.keys(anggaranErrors).length;

                    for (const [fieldPath, messages] of Object.entries(anggaranErrors)) {
                        // Skip if already processed successfully
                        if (processedErrors.has(fieldPath)) {
                            successCount++;
                            continue;
                        }

                        const errorMessage = Array.isArray(messages) ? messages[0] : messages;
                        const success = showDynamicFieldError(fieldPath, errorMessage, true); // silent mode
                        if (success) {
                            successCount++;
                            processedErrors.add(fieldPath); // Mark as processed
                        }
                    }

                    console.log(
                        `Anggaran error display attempt ${retryCount}: ${successCount}/${totalErrors} successful`
                    );

                    // If not all errors were displayed and we haven't exceeded max retries
                    if (successCount < totalErrors && retryCount < maxRetries) {
                        setTimeout(tryDisplayAnggaranErrors, 400 * retryCount); // Increasing delay
                    } else {
                        // Either all errors processed or max retries reached
                        if (successCount < totalErrors) {
                            console.warn(
                                `Could not display ${totalErrors - successCount} anggaran errors after ${maxRetries} attempts`
                            );

                            // List the failed errors for debugging
                            const failedErrors = Object.keys(anggaranErrors).filter(path => !processedErrors.has(
                                path));
                            console.warn('Failed errors:', failedErrors);
                        }

                        // Update tab badges regardless of success/failure
                        setTimeout(() => {
                            updateAllTabErrorBadges();
                        }, 200);
                    }
                }

                tryDisplayAnggaranErrors();
            }

            function showErrorSummaryAlert(errorCount) {
                // Remove existing alert
                const existingAlert = document.querySelector('.validation-error-summary');
                if (existingAlert) {
                    existingAlert.remove();
                }

                // Create error summary alert
                const alertDiv = document.createElement('div');
                alertDiv.className =
                    'alert alert-danger alert-dismissible fade show validation-error-summary form-error-alert';
                alertDiv.innerHTML = `
                    <div class="d-flex align-items-center">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <div>
                            <strong>Terdapat ${errorCount} kesalahan pada formulir:</strong>
                            <ul class="mb-0 mt-2">
                                ${Object.entries(validationErrors).map(([field, messages]) => {
                                    const message = Array.isArray(messages) ? messages[0] : messages;
                                    const friendlyFieldName = getFriendlyFieldName(field);
                                    return `<li><small>${friendlyFieldName}: ${message}</small></li>`;
                                }).join('')}
                            </ul>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                `;

                // Insert at the top of the form
                const form = document.querySelector('form');
                if (form) {
                    form.insertBefore(alertDiv, form.firstChild);
                }
            }

            function getFriendlyFieldName(fieldPath) {
                const fieldMappings = {
                    'kategori_perizinan_id': 'Kategori Permohonan',
                    'jenis_izin_id': 'Jenis Izin',
                    'alasan': 'Alasan/Deskripsi',
                    'jam_keluar': 'Jam Keluar',
                    'jam_masuk': 'Jam Masuk',
                    'tipe_tugas': 'Tipe Tugas',
                    'tujuan_tugas': 'Tujuan Tugas',
                    'total_hari': 'Total Hari',
                    'tanggal_array': 'Daftar Tanggal',
                    'nik_karyawan': 'Karyawan',
                    'with_anggaran': 'Anggaran',
                    'is_shift': 'Jenis Waktu Kerja'
                };

                // Handle dynamic field paths
                if (fieldPath.includes('biaya_pengeluaran')) {
                    const parts = fieldPath.split('.');
                    if (parts.length >= 5) {
                        const type = parts[2]; // 'default' or 'lain'
                        const fieldType = parts[4]; // 'jumlah', 'currency', 'deskripsi'
                        const typeLabel = type === 'default' ? 'Biaya Default' : 'Biaya Lain';
                        const fieldLabel = fieldType === 'jumlah' ? 'Jumlah' :
                            fieldType === 'deskripsi' ? 'Deskripsi' : 'Mata Uang';
                        return `${typeLabel} - ${fieldLabel}`;
                    }
                }

                if (fieldPath.includes('rincian_tujuan')) {
                    const parts = fieldPath.split('.');
                    if (parts.length >= 3) {
                        const fieldType = parts[1];
                        const fieldLabels = {
                            'tujuan': 'Tujuan',
                            'keterangan': 'Keterangan',
                            'tanggal_mulai': 'Tanggal Mulai',
                            'tanggal_berakhir': 'Tanggal Berakhir',
                            'jumlah_hari': 'Jumlah Hari',
                            'karyawan': 'Karyawan'
                        };
                        return `Rincian Tujuan - ${fieldLabels[fieldType] || fieldType}`;
                    }
                }

                return fieldMappings[fieldPath] || fieldPath;
            }

            function scrollToFirstError() {
                const firstError = document.querySelector('.is-invalid, .error');
                if (firstError) {
                    firstError.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });

                    // Focus if it's an input
                    if (firstError.matches('input, textarea, select')) {
                        setTimeout(() => firstError.focus(), 500);
                    }
                }
            }

            // --- PREPOPULATE DATA FROM OLD INPUT ---
            function prepopulateFormData() {
                if (!oldInput || Object.keys(oldInput).length === 0) return;

                // Prepopulate basic fields
                for (const [fieldName, value] of Object.entries(oldInput)) {
                    if (typeof value === 'string' || typeof value === 'number') {
                        const field = document.querySelector(`[name="${fieldName}"]`);
                        if (field) {
                            if (field.type === 'radio' || field.type === 'checkbox') {
                                if (field.value === value) {
                                    field.checked = true;
                                }
                            } else {
                                field.value = value;
                            }
                        }
                    }
                }

                // Handle with_anggaran field
                if (oldInput.with_anggaran === '1') {
                    console.log('Activating anggaran section from old input...');
                    const withAnggaranInput = getElem('with_anggaran_input');
                    if (withAnggaranInput) {
                        withAnggaranInput.value = '1';
                    }

                    // Trigger anggaran section if not already visible
                    setTimeout(() => {
                        const anggaranSectionContainer = getElem('anggaran-section-container');
                        const btnToggleAnggaran = getElem('btn-toggle-anggaran');

                        if (anggaranSectionContainer && anggaranSectionContainer.style.display === 'none' &&
                            btnToggleAnggaran) {
                            console.log('Clicking anggaran toggle button...');
                            btnToggleAnggaran.click();
                        } else if (anggaranSectionContainer) {
                            setDisplay(anggaranSectionContainer, 'block');
                        }

                        // Button anggaran selalu disabled pada halaman edit
                        if (btnToggleAnggaran) {
                            btnToggleAnggaran.innerHTML =
                                '<i class="fas fa-lock me-1"></i> Rincian Anggaran (Tidak dapat diubah)';
                            btnToggleAnggaran.classList.remove('btn-warning', 'btn-primary');
                            btnToggleAnggaran.classList.add('btn-secondary');
                            btnToggleAnggaran.disabled = true;
                        }
                    }, 100);
                }

                // Prepopulate selected employees first
                if (oldInput.nik_karyawan) {
                    try {
                        const selectedNiks = JSON.parse(oldInput.nik_karyawan);
                        prepopulateSelectedEmployees(selectedNiks);
                    } catch (e) {
                        console.error('Error parsing nik_karyawan:', e);
                    }
                }

                // Prepopulate rincian_tujuan data
                if (oldInput.rincian_tujuan) {
                    setTimeout(() => {
                        prepopulateTujuanData(oldInput.rincian_tujuan);
                    }, 200);
                }
            }

            function prepopulateTujuanData(tujuanData) {
                if (!tujuanData || !tujuanDataTable) return;

                const tujuanArray = tujuanData.tujuan || [];
                const tujuanIdArray = tujuanData.tujuan_id || [];
                const statusArray = tujuanData.status || [];
                const keteranganArray = tujuanData.keterangan || [];
                const karyawanArray = tujuanData.karyawan || [];
                const tanggalMulaiArray = tujuanData.tanggal_mulai || [];
                const tanggalBerakhirArray = tujuanData.tanggal_berakhir || [];
                const jumlahHariArray = tujuanData.jumlah_hari || [];

                // Clear existing rows
                tujuanDataTable.clear();

                // Add rows based on old data
                for (let i = 0; i < tujuanArray.length; i++) {
                    let karyawanForRow = [];
                    try {
                        if (karyawanArray[i]) {
                            const karyawanNiks = JSON.parse(karyawanArray[i]);
                            karyawanForRow = selectedEmployees.filter(emp => karyawanNiks.includes(emp.nik));
                        }
                    } catch (e) {
                        console.error('Error parsing karyawan data:', e);
                    }

                    const rowData = {
                        tujuan: tujuanArray[i] || '',
                        tujuan_id: tujuanIdArray[i] || null,
                        status: statusArray[i] || 'dn',
                        keterangan: keteranganArray[i] || '',
                        karyawan: karyawanForRow,
                        tanggal_mulai: tanggalMulaiArray[i] || '',
                        tanggal_berakhir: tanggalBerakhirArray[i] || '',
                        jumlah_hari: jumlahHariArray[i] || 1
                    };

                    tujuanDataTable.row.add(rowData);
                }

                tujuanDataTable.draw();
                initTujuanRowPickers();
            }

            function prepopulateAnggaranData(anggaranData) {
                if (!anggaranData || typeof anggaranData !== 'object') return;

                // Function to wait for anggaran section to be ready
                function waitForAnggaranAndPopulate(attempts = 0) {
                    const maxAttempts = 20; // Increase max attempts

                    // Check if anggaran section is visible and has content
                    const anggaranSection = document.getElementById('anggaran-section-container');
                    const hasEmployeeTabs = document.querySelectorAll('#anggaran-employee-tabs .nav-link').length >
                        0;
                    const hasOldContainer = document.getElementById('anggaran-per-employee-container').children
                        .length > 0;

                    // Also check if dynamic containers exist for any employees with biaya 3 or 4 (transportation/hotel)
                    let hasRequiredContainers = true;
                    for (const [nik, employeeData] of Object.entries(anggaranData)) {
                        if (employeeData.default && Array.isArray(employeeData.default)) {
                            const hasTransportHotel = employeeData.default.some(item =>
                                item.biaya_id && (item.biaya_id == 3 || item.biaya_id == 4)
                            );
                            if (hasTransportHotel) {
                                const nikKey = safeId(nik);
                                const transportContainer = document.getElementById(
                                    `dynamic-biaya-${nikKey}-3-container`);
                                const hotelContainer = document.getElementById(
                                    `dynamic-biaya-${nikKey}-4-container`);
                                if (!transportContainer && !hotelContainer) {
                                    hasRequiredContainers = false;
                                    break;
                                }
                            }
                        }
                    }

                    if (anggaranSection && anggaranSection.style.display !== 'none' && (hasEmployeeTabs ||
                            hasOldContainer) && hasRequiredContainers) {
                        console.log('Anggaran section ready with all containers, populating data...');

                        for (const [nik, employeeData] of Object.entries(anggaranData)) {
                            prepopulateEmployeeAnggaranData(nik, employeeData);
                        }
                    } else {
                        if (attempts < maxAttempts) {
                            console.log(
                                `Anggaran section not ready (attempt ${attempts + 1}/${maxAttempts}), retrying...`
                            );
                            setTimeout(() => waitForAnggaranAndPopulate(attempts + 1), 300); // Increase wait time
                        } else {
                            console.warn(
                                'Anggaran section preparation timeout, proceeding with available containers...');
                            for (const [nik, employeeData] of Object.entries(anggaranData)) {
                                prepopulateEmployeeAnggaranData(nik, employeeData);
                            }
                        }
                    }
                }

                // Start waiting for anggaran section
                setTimeout(() => waitForAnggaranAndPopulate(0), 200); // Start with attempt 0
            }

            function prepopulateEmployeeAnggaranData(nik, employeeData) {
                const nikKey = safeId(nik);

                // Prepopulate default biaya
                if (employeeData.default && typeof employeeData.default === 'object') {
                    console.log(`🔄 Prepopulating default biaya for ${nik}:`, employeeData.default);

                    // Iterasi langsung pada VALUE dari objek old(), karena key-nya hanya index (0, 1, dst)
                    Object.values(employeeData.default).forEach(item => {
                        // Pastikan item dari old() valid dan punya biaya_id
                        if (!item || !item.biaya_id) return;

                        const biayaId = item.biaya_id;
                        const biayaInfo = defaultBiaya.find(b => String(b.id) === String(biayaId));

                        if (biayaInfo) {
                            const namaLower = (biayaInfo.nama_biaya || '').toLowerCase();

                            // Logika ini HANYA untuk field dinamis (Hotel & Transportasi)
                            if (namaLower === 'uang hotel' || namaLower === 'uang transportasi') {
                                console.log(
                                    `✅ Recreating dynamic field for ${biayaInfo.nama_biaya} (${nik}) from old data.`
                                );

                                // Panggil fungsi untuk membuat ulang field dengan data dari old()
                                window.addDynamicBiayaField(
                                    nik,
                                    biayaId,
                                    biayaInfo.nama_biaya,
                                    item.currency || 'IDR',
                                    item.jumlah || '' // Ambil jumlah dari old data
                                );
                            }
                        }
                    });
                }

                // Prepopulate biaya lain and create additional rows if needed
                if (employeeData.lain && Array.isArray(employeeData.lain)) {
                    const container = document.getElementById(`biaya-lain-container-${nikKey}`);
                    if (container) {
                        // Clear existing rows and errors
                        container.innerHTML = '';

                        // Clear any existing errors for this employee's biaya lain
                        clearFieldError(`biaya-lain-container-${nikKey}`);

                        // Add rows for each biaya lain item
                        employeeData.lain.forEach((item, index) => {
                            window.addBiayaLainRowFor(nik);

                            // Populate the newly added row
                            setTimeout(() => {
                                const deskripsiField = document.querySelector(
                                    `input[name="biaya_pengeluaran[${nik}][lain][${index}][deskripsi]"]`
                                );
                                const jumlahField = document.querySelector(
                                    `input[name="biaya_pengeluaran[${nik}][lain][${index}][jumlah]"]`
                                );
                                const currencyField = document.querySelector(
                                    `input[name="biaya_pengeluaran[${nik}][lain][${index}][currency]"]`
                                );

                                if (deskripsiField) deskripsiField.value = item.deskripsi || '';
                                if (jumlahField) jumlahField.value = item.jumlah || '';
                                if (currencyField) currencyField.value = item.currency || '';
                            }, 100);
                        });
                    }
                }
            }

            function prepopulateSelectedEmployees(selectedNiks) {
                if (!Array.isArray(selectedNiks) || !allProfiles) return;

                selectedEmployees = [];
                selectedNiks.forEach(nik => {
                    const profile = allProfiles.find(p => p.nik === nik);
                    if (profile) {
                        selectedEmployees.push({
                            nik: profile.nik,
                            nama: profile.nama,
                            departemen: profile.departemen || 'N/A'
                        });
                    }
                });

                updateSelectedEmployeesUI();
            }

            // --- CLEAR ERRORS ON INPUT ---
            function setupErrorClearingListeners() {
                // Clear errors when user starts typing/changing form fields
                document.addEventListener('input', function(e) {
                    if (e.target.matches('input, textarea, select')) {
                        clearFieldError(e.target);
                    }
                });

                document.addEventListener('change', function(e) {
                    if (e.target.matches('input[type="radio"], input[type="checkbox"], select')) {
                        clearFieldError(e.target);
                    }
                });

                // Special handling for DataTables fields
                $(document).on('input change', '#tujuan-table input, #tujuan-table textarea, #tujuan-table select',
                    function() {
                        clearFieldError(this);
                        // Also clear table cell error styling
                        const tableCell = $(this).closest('td')[0];
                        if (tableCell) {
                            tableCell.classList.remove('error');
                            $(tableCell).find('.error-msg').remove();
                        }
                    });

                // Clear button error styling when country is selected
                $(document).on('click', '.pick-country-btn', function() {
                    $(this).removeClass('border-danger btn-outline-danger').addClass('btn-outline-primary');
                });

                // Clear tab error badges when fields are fixed
                $(document).on('input change',
                    '.anggaran-tab-pane input, .anggaran-tab-pane textarea, .anggaran-tab-pane select',
                    function() {
                        const tabPane = $(this).closest('.anggaran-tab-pane')[0];
                        if (tabPane) {
                            // Check if there are any remaining errors in this tab after a short delay
                            setTimeout(() => {
                                const hasErrors = tabPane.querySelectorAll('.is-invalid').length > 0;
                                const tabId = tabPane.id;
                                const tabLink = document.querySelector(`[data-bs-target="#${tabId}"]`);

                                if (tabLink) {
                                    let errorBadge = tabLink.querySelector('.tab-error-badge');

                                    if (hasErrors && !errorBadge) {
                                        // Add badge if there are errors but no badge
                                        errorBadge = document.createElement('span');
                                        errorBadge.className = 'badge bg-danger tab-error-badge';
                                        errorBadge.textContent = '!';
                                        tabLink.appendChild(errorBadge);
                                    } else if (!hasErrors && errorBadge) {
                                        // Remove badge if no errors but badge exists
                                        errorBadge.remove();
                                    }
                                }
                            }, 100);
                        }
                    });
            }

            function clearFieldError(field) {
                // If field is a string, treat it as container ID
                if (typeof field === 'string') {
                    const container = document.getElementById(field);
                    if (container) {
                        // Clear all errors in container
                        const errorElements = container.querySelectorAll(
                            '.invalid-feedback, .text-danger.error-msg, .is-invalid');
                        errorElements.forEach(el => {
                            if (el.classList.contains('is-invalid')) {
                                el.classList.remove('is-invalid');
                            } else if (!el.textContent.includes('*')) { // Don't remove required indicators
                                el.remove();
                            }
                        });
                    }
                    return;
                }

                if (!field) return;

                field.classList.remove('is-invalid');

                // Remove error messages more thoroughly
                const fieldName = field.name || '';
                const container = field.closest('.input-group') || field.parentNode;
                if (container) {
                    // Remove errors that belong to this specific field
                    const errorElements = container.querySelectorAll('.invalid-feedback, .text-danger.error-msg');
                    errorElements.forEach(el => {
                        if (!el.textContent.includes('*') && // Don't remove required indicators
                            (el.getAttribute('data-error-for') === fieldName || !el.getAttribute(
                                'data-error-for'))) {
                            el.remove();
                        }
                    });

                    // Also check parent containers for error messages
                    const parentContainer = container.parentNode;
                    if (parentContainer) {
                        const parentErrors = parentContainer.querySelectorAll(
                            '.invalid-feedback, .text-danger.error-msg');
                        parentErrors.forEach(el => {
                            if (!el.textContent.includes('*') && el.getAttribute('data-error-for') ===
                                fieldName) {
                                el.remove();
                            }
                        });
                    }
                }
            }

            // --- ALL ELEMENTS ---
            const kategoriSelect = getElem('kategori_perizinan_id');
            const jenisIzinSelect = getElem('jenis_izin_id');
            const formIzinContainer = getElem('form-izin-container');
            const formTugasContainer = getElem('form-tugas-container');
            const sharedSection = getElem('shared-bottom-section');
            const lampiranGroup = getElem('lampiran_group');
            const tableTanggalContainer = getElem('table-tanggal-container');
            const izinTablePlaceholder = getElem('izin-table-placeholder');
            const tugasTablePlaceholder = getElem('tugas-table-placeholder');
            const btnToggleAnggaran = getElem('btn-toggle-anggaran');
            const anggaranSectionContainer = getElem('anggaran-section-container');
            const addAnggaranButtonContainer = getElem('add-anggaran-button-container');
            const withAnggaranInput = getElem('with_anggaran_input');
            const addTujuanRowBtn = getElem('add-tujuan-row-btn');
            const tujuanTableBody = getElem('tujuan-table-body');
            const shiftSelectionGroup = getElem('shift_selection_group');
            let anggaranClipboard = null;

            // --- SHARED MOVABLE ELEMENTS ---
            const sharedTextareaContainer = getElem('shared-textarea-container');
            const izinTextareaPlaceholder = getElem('izin-textarea-placeholder');
            const sharedTextareaLabel = getElem('shared_textarea_label');

            const datetimePickerRow = getElem('datetime-picker-row');
            const izinDateTimePlaceholder = getElem('izin-datetime-placeholder');
            const tugasDateTimePlaceholder = getElem('tugas-datetime-placeholder');
            const jamKeluarLabel = getElem('jam_keluar_label');
            const jamMasukLabel = getElem('jam_masuk_label');

            const enabledDates = periodeIzinTugas.map(p => ({
                from: p.mulai,
                to: p.berakhir
            }));

            const btn = document.getElementById("btn-submit");
            if (!btn) return;

            btn.addEventListener("click", function(e) {
                e.preventDefault();

                // Guard: Acara Khusus wajib memilih minimal 1 karyawan
                const katVal = kategoriSelect ? kategoriSelect.value : '';
                const jIzinVal = jenisIzinSelect ? jenisIzinSelect.value : '';
                if (katVal === '1' && jIzinVal === '4' && (!selectedEmployees || selectedEmployees.length === 0)) {
                    if (window.Swal) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Pilih Karyawan',
                            text: 'Izin Acara Khusus harus memiliki minimal 1 karyawan yang dipilih.',
                            confirmButtonText: 'OK'
                        });
                    } else {
                        alert('Izin Acara Khusus harus memiliki minimal 1 karyawan yang dipilih.');
                    }
                    return;
                }

                // Disable tombol
                btn.disabled = true;

                // Ubah isi tombol → spinner + text
                btn.innerHTML = `
                <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                <span>Menyimpan...</span>
            `;

                // biarkan form tetap submit
                btn.closest("form").submit();
            });

            function clearFields(...elementIds) {
                elementIds.forEach(id => {
                    const element = getElem(id);
                    if (!element) return;
                    if (id === 'tujuan-table-body' && tujuanDataTable) {
                        tujuanDataTable.clear().draw();
                        return;
                    }
                    const tagName = element.tagName.toLowerCase();
                    const type = element.type?.toLowerCase();
                    if (tagName === 'tbody') element.innerHTML = '';
                    else if (tagName === 'select') element.value = '';
                    else if (tagName === 'textarea') element.value = '';
                    else if (type === 'file') {
                        element.value = null;
                        if (id === 'lampiran-input') clearLampiranPreview();
                    } else if (type === 'hidden') {
                        if (id === 'tanggal_array') clearTanggalTable();
                        else if (id === 'nik_karyawan') clearSelectedEmployees();
                        else element.value = '';
                    } else if (type !== 'radio' && type !== 'checkbox') element.value = '';
                });
                if (getElem('biaya-lain-container')) getElem('biaya-lain-container').innerHTML = '';
                if (fpJamKeluar) fpJamKeluar.clear();
                if (fpJamMasuk) fpJamMasuk.clear();
            }

            // --- KARYAWAN SELECTION LOGIC (SHARED) ---
            let selectedEmployees = [];
            let listProfilesDataTable, izinEmployeesDataTable, tugasEmployeesDataTable;
            const defaultBiayaById = Array.isArray(defaultBiaya) ? Object.fromEntries(defaultBiaya.map(b => [String(
                b.id), b])) : {};
            const biayaLainCounters = {};
            const defaultIndexCounters = {};
            const currencyByCountryName = (() => {
                const map = {};
                (currenciesList || []).forEach(c => {
                    if (!c) return;
                    const nm = (c.negara_nama || '').trim().toLowerCase();
                    const code = (c.code || '').trim().toUpperCase();
                    if (nm && code && !map[nm]) map[nm] = code;
                });
                return map;
            })();
            const jabatanBiayaDefault = @json($jabatanBiayaDefault ?? []);

            function getNikForAtasan() {
                if (selectedEmployees && selectedEmployees[0] && selectedEmployees[0].nik) {
                    return String(selectedEmployees[0].nik);
                }
                return '';
            }

            function decorateNikWithCrown(nik) {
                const refNik = getNikForAtasan();
                if (!nik) return '';
                if (String(nik) === refNik) {
                    return `<i class="fas fa-crown text-warning me-1"></i>${nik}`;
                }
                return nik;
            }

            function initializeDataTables() {
                if (!listProfilesDataTable) listProfilesDataTable = $('#list_profiles').DataTable({
                    lengthMenu: [10, 25, 50, 100]
                });

                // Register same-dept filter once
                if (listProfilesDataTable && !window.sameDeptFilterRegistered) {
                    window.sameDeptFilterRegistered = true;
                    $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                        const kategoriId = $('#kategori_perizinan_id').val();
                        if (kategoriId !== '1') return true;
                        const firstEmp = selectedEmployees[0];
                        let applicantDeptId = null;
                        if (firstEmp) {
                            const profile = allProfiles.find(p => p.nik === firstEmp.nik);
                            applicantDeptId = profile ? profile.id_departemen : null;
                        }
                        if (!applicantDeptId) return true;
                        const row = listProfilesDataTable.row(dataIndex).node();
                        const deptId = $(row).find('.profile-select-check').data('departemen-id');
                        return String(deptId) === String(applicantDeptId);
                    });
                }

                const commonTableOptions = {
                    paging: false,
                    info: false,
                    searching: false,
                    columns: [{
                        "data": "nik"
                    }, {
                        "data": "nama"
                    }, {
                        "data": "departemen"
                    }, {
                        "data": null,
                        "orderable": false,
                        "className": "text-center"
                    }],
                    columnDefs: [
                        {
                            targets: 0,
                            render: (data) => decorateNikWithCrown(data)
                        },
                        {
                            targets: -1,
                            render: (data, type, row, meta) => {
                                const kat = getElem('kategori_perizinan_id')?.value || '';
                                const jenis = getElem('jenis_izin_id')?.value || '';
                                const isProtected = (kat === '1' && jenis === '4' && String(row.nik) === String(currentUserNIK));
                                const disabled = isProtected ? 'disabled' : '';
                                const btnClass = isProtected ? 'btn-secondary' : 'btn-danger';
                                return `<button type="button" class="btn ${btnClass} btn-sm" onclick="window.removeEmployee(${meta.row})" ${disabled}>Hapus</button>`;
                            }
                        }
                    ],
                    destroy: true
                };
                if (!izinEmployeesDataTable) izinEmployeesDataTable = $('#izinSelectedEmployeesTable').DataTable(
                    commonTableOptions);
                if (!tugasEmployeesDataTable) tugasEmployeesDataTable = $('#tugasSelectedEmployeesTable').DataTable(
                    commonTableOptions);
            }

            function snapshotTujuanUIIntoRowData() {
                const dt = window.tujuanDataTable;
                if (!dt || !$.fn.DataTable.isDataTable('#tujuan-table')) return;
                dt.rows({
                    page: 'current'
                }).every(function() {
                    try {
                        const $row = $(this.node());
                        if (!$row || !$row.length) return;
                        const d = this.data() || {};
                        d.keterangan = ($row.find('textarea.tujuan-keterangan').val() || '').trim();
                        d.tanggal_mulai = $row.find('input.tujuan-start-hidden').val() || '';
                        d.tanggal_berakhir = $row.find('input.tujuan-end-hidden').val() || '';
                        const jumlahHidden = $row.find('input.tujuan-jumlah-hari-hidden').val() || '';
                        d.jumlah_hari = (jumlahHidden !== '' ? Number(jumlahHidden) : (d.jumlah_hari ||
                            1));
                        this.data(d);
                    } catch (e) {
                        /* ignore */
                    }
                });
            }

            // Helper: determine if single selection mode is needed
            function isSingleSelectionMode() {
                const kat = kategoriSelect ? kategoriSelect.value : '';
                const jenisIzin = jenisIzinSelect ? jenisIzinSelect.value : '';
                const jenisPenugasan = document.querySelector('input[name="jenis_penugasan"]:checked')?.value || 'pribadi';
                const isIzin = kat === '1';
                const isIzinAcaraKhusus = isIzin && jenisIzin === '4'; // Acara Khusus (multi allowed)
                const isTugas = kat === '2';
                // Acara Khusus: force single-select for the first employee (to set department reference)
                if (isIzinAcaraKhusus && selectedEmployees.length === 0) return true;
                return (isIzin && !isIzinAcaraKhusus) || (isTugas && jenisPenugasan === 'bawahan');
            }

            function updateIzinKaryawanLabel(jenisIzinId) {
                const label = getElem('label_izin_karyawan');
                if (!label) return;

                let base;
                if (jenisIzinId === '4') {
                    if (selectedEmployees.length === 0) {
                        base = 'Pilih Karyawan Pertama (wajib pilih 1 karyawan sebagai acuan departemen)';
                    } else {
                        base = 'Pilih Karyawan Tambahan (satu departemen)';
                    }
                } else {
                    base = 'Pilih Karyawan (termasuk anda)';
                }

                label.innerHTML = `${base} <span class="text-danger">*</span>`;
            }

            function toggleIzinKaryawanNote(jenisIzinId) {
                const note = getElem('izin_karyawan_note_acara');
                if (!note) return;
                note.style.display = jenisIzinId === '4' ? 'block' : 'none';
            }

            $(document).on('change', '#profiles_select_all', function() {
                // Prevent select-all in single selection mode
                if (isSingleSelectionMode()) {
                    this.checked = false;
                    return;
                }
                const checked = this.checked;
                if (listProfilesDataTable) {
                    const currentPage = listProfilesDataTable.page();
                    listProfilesDataTable.$('.profile-select-check').prop('checked', checked);
                    listProfilesDataTable.page(currentPage).draw('page');
                } else {
                    $('#list_profiles tbody .profile-select-check').prop('checked', checked);
                }
            });

            $(document).on('change', '#list_profiles tbody .profile-select-check', function() {
                const total = listProfilesDataTable ? listProfilesDataTable.$('.profile-select-check')
                    .length : $('#list_profiles tbody .profile-select-check').length;
                const checked = listProfilesDataTable ? listProfilesDataTable.$(
                    '.profile-select-check:checked').length : $(
                    '#list_profiles tbody .profile-select-check:checked').length;
                $('#profiles_select_all').prop('checked', total > 0 && checked === total);

                // If single-selection mode, uncheck other boxes so only one stays checked
                if (isSingleSelectionMode() && this.checked) {
                    if (listProfilesDataTable) {
                        listProfilesDataTable.$('.profile-select-check').not(this).prop('checked', false);
                    } else {
                        $('#list_profiles tbody .profile-select-check').not(this).prop('checked', false);
                    }
                    $('#profiles_select_all').prop('checked', false);
                }
            });

            $(document).on('click', '#addSelectedProfilesBtn', function() {
                snapshotTujuanUIIntoRowData();
                const selectedNodes = listProfilesDataTable ? listProfilesDataTable.$(
                    '.profile-select-check:checked').toArray() : Array.from(document.querySelectorAll(
                    '#list_profiles tbody .profile-select-check:checked'));
                const selected = selectedNodes.map(chk => ({
                    nik: chk.getAttribute('data-nik'),
                    nama: chk.getAttribute('data-nama'),
                    departemen: chk.getAttribute('data-departemen') || 'N/A'
                }));

                // Enforce single selection when required
                if (isSingleSelectionMode() && selected.length > 1) {
                    selected.length = 1;
                }

                const checkedNikSet = new Set(selected.map(e => e.nik));
                const prevNikSet = new Set(selectedEmployees.map(e => e.nik));
                const toAdd = selected.filter(emp => !prevNikSet.has(emp.nik));
                const toRemove = Array.from(prevNikSet).filter(nik => !checkedNikSet.has(nik));

                toRemove.forEach(nik => {
                    if (typeof window.removeEmployeeByNik === 'function') window
                        .removeEmployeeByNik(nik);
                });

                if (toAdd.length > 0) {
                    selectedEmployees = selectedEmployees.concat(toAdd);
                    updateSelectedEmployeesUI();
                    if (tujuanDataTable) {
                        tujuanDataTable.rows().every(function() {
                            const d = this.data();
                            if (d && Array.isArray(d.karyawan)) {
                                toAdd.forEach(emp => {
                                    if (!d.karyawan.some(x => x.nik === emp.nik)) d.karyawan
                                        .push({
                                            nik: emp.nik,
                                            nama: emp.nama
                                        });
                                });
                                this.data(d);
                            }
                        });
                        tujuanDataTable.draw(false);
                    }
                    if (withAnggaranInput && withAnggaranInput.value === '1') {
                        renderAnggaranForEmployees();
                        setTimeout(() => {
                            bindAnggaranInputEvents();
                            recalcAllAnggaranTotals();
                        }, 0);
                    }
                }

                $('#profiles_select_all').prop('checked', false);
                if (listProfilesDataTable) {
                    const currentPage = listProfilesDataTable.page();
                    listProfilesDataTable.$('.profile-select-check').prop('checked', false);
                    listProfilesDataTable.page(currentPage).draw('page');
                } else {
                    $('#list_profiles tbody .profile-select-check').prop('checked', false);
                }
                $('#searchModalProfiles').modal('hide');
            });

            window.selectProfile = function(nik, nama, departemen) {
                const isSingleMode = isSingleSelectionMode();

                if (isSingleMode) {
                    // Single-select: replace selection with this one
                    selectedEmployees = [{ nik, nama, departemen }];
                } else {
                    // Multi-select: avoid duplicates
                    if (selectedEmployees.some(e => e.nik === nik)) return;
                    selectedEmployees.push({
                        nik,
                        nama,
                        departemen
                    });
                }
                updateSelectedEmployeesUI();
                $('#searchModalProfiles').modal('hide');

                if (tujuanDataTable) {
                    snapshotTujuanUIIntoRowData();
                    tujuanDataTable.rows().every(function() {
                        const d = this.data();
                        if (d && Array.isArray(d.karyawan)) {
                            if (isSingleMode) {
                                d.karyawan = [...selectedEmployees];
                            } else {
                                if (!d.karyawan.some(emp => emp.nik === nik)) d.karyawan.push({
                                    nik,
                                    nama
                                });
                            }
                            this.data(d);
                        }
                    });
                    tujuanDataTable.draw(false);
                }

                if (withAnggaranInput && withAnggaranInput.value === '1') {
                    renderAnggaranForEmployees();
                    setTimeout(() => {
                        bindAnggaranInputEvents();
                        recalcAllAnggaranTotals();
                    }, 0);
                }
            };

            window.removeEmployee = function(index) {
                if (getElem('kategori_perizinan_id') && getElem('kategori_perizinan_id').value === '4') return;
                const removed = selectedEmployees.splice(index, 1)[0];
                updateSelectedEmployeesUI();
                if (tujuanDataTable && removed) {
                    snapshotTujuanUIIntoRowData();
                    tujuanDataTable.rows().every(function() {
                        const d = this.data();
                        if (d && Array.isArray(d.karyawan)) {
                            const beforeLen = d.karyawan.length;
                            d.karyawan = d.karyawan.filter(emp => emp.nik !== removed.nik);
                            if (d.karyawan.length !== beforeLen) this.data(d);
                        }
                    });
                    tujuanDataTable.draw(false);
                }

                if (removed && withAnggaranInput && withAnggaranInput.value === '1') {
                    // This will now trigger a full re-render of tabs
                    renderAnggaranForEmployees();
                    setTimeout(() => {
                        bindAnggaranInputEvents();
                        recalcAllAnggaranTotals();
                    }, 0);
                }
            };

            window.removeEmployeeByNik = function(nik) {
                const idx = selectedEmployees.findIndex(e => e.nik === nik);
                if (idx >= 0) window.removeEmployee(idx);
            };

            function updateSelectedEmployeesUI() {
                if (!izinEmployeesDataTable || !tugasEmployeesDataTable) return;
                izinEmployeesDataTable.clear().rows.add(selectedEmployees).draw();
                tugasEmployeesDataTable.clear().rows.add(selectedEmployees).draw();
                const niks = selectedEmployees.map(e => e.nik);
                getElem('nik_karyawan').value = niks.length > 0 ? JSON.stringify(niks) : '';
                const displayIzin = getElem('nik_karyawan_display_izin');
                const displayTugas = getElem('nik_karyawan_display_tugas');
                const displayText = niks.length > 0 ? `${niks.length} Karyawan Terpilih` : '';
                if (displayIzin) displayIzin.value = displayText;
                if (displayTugas) displayTugas.value = displayText;
                setDisplay(getElem('izin_selected_employees_container'), niks.length > 0 ? 'block' : 'none');
                setDisplay(getElem('tugas_selected_employees_container'), niks.length > 0 ? 'block' : 'none');

                // Update karyawan label for Acara Khusus (dynamic: first vs additional)
                const currentJenisIzin = jenisIzinSelect ? jenisIzinSelect.value : '';
                if (currentJenisIzin === '4') updateIzinKaryawanLabel('4');
            }

            function clearSelectedEmployees() {
                selectedEmployees = [];
                updateSelectedEmployeesUI();
            }

            function loadExistingEmployees() {
                const hiddenInput = getElem('nik_karyawan');
                if (hiddenInput && hiddenInput.value) {
                    try {
                        const nikArray = JSON.parse(hiddenInput.value);
                        if (Array.isArray(nikArray)) {
                            selectedEmployees = nikArray.map(nik => allProfiles.find(p => p.nik === nik)).filter(
                                p => p);
                        }
                    } catch (e) {
                        console.error("Error parsing nik_karyawan data:", e);
                    }
                }
                updateSelectedEmployeesUI();
            }

            function ensureCurrentUserSelectedIfApplicable() {
                return;
            }

            function clearLampiranPreview() {
                const previewContainer = getElem('lampiran-preview');
                if (previewContainer) previewContainer.innerHTML = '';
            }

            // --- TANGGAL TABLE LOGIC ---
            let tanggalTableInstance;

            function initTanggalTable() {
                if (tanggalTableInstance) return;
                tanggalTableInstance = $('#tanggal_table').DataTable({
                    paging: true,
                    info: true,
                    searching: true,
                    ordering: false,
                    columns: [{
                        "data": "weekday",
                        "className": "text-center"
                    }, {
                        "data": "day",
                        "className": "text-center"
                    }, {
                        "data": "month",
                        "className": "text-center"
                    }, {
                        "data": "year",
                        "className": "text-center"
                    }, {
                        "data": null,
                        "className": "text-center"
                    }],
                    columnDefs: [{
                        targets: -1,
                        render: (data, type, row) =>
                            `<button type="button" class="btn btn-danger btn-sm" onclick="window.removeTanggal('${row.original}')" ${getElem('kategori_perizinan_id').value === '1' ? 'disabled' : ''}>Hapus</button>`
                    }],
                    destroy: true
                });
            }

            function updateTanggalTable(datesArray) {
                if (!tanggalTableInstance) return;
                const displayData = datesArray.map(dateStr => {
                    const [day, month, year] = dateStr.split('-');
                    const dateObj = new Date(year, month - 1, day);
                    return {
                        weekday: dateObj.toLocaleDateString('id-ID', {
                            weekday: 'long'
                        }),
                        day: day,
                        month: dateObj.toLocaleDateString('id-ID', {
                            month: 'long'
                        }),
                        year: year,
                        original: dateStr
                    };
                });
                tanggalTableInstance.clear().rows.add(displayData).draw();
                getElem('tanggal_array').value = datesArray.length > 0 ? JSON.stringify(datesArray) : '';
                calculateTotalHari();
            }

            window.removeTanggal = function(dateToRemove) {
                let currentDates = JSON.parse(getElem('tanggal_array').value || '[]');
                currentDates = currentDates.filter(d => d !== dateToRemove);
                updateTanggalTable(currentDates);
                if (currentDates.length === 0) {
                    if (fpJamKeluar) fpJamKeluar.clear();
                    if (fpJamMasuk) fpJamMasuk.clear();
                }
            };

            function clearTanggalTable() {
                updateTanggalTable([]);
            }

            function loadExistingDates() {
                const hiddenInput = getElem('tanggal_array');
                if (hiddenInput && hiddenInput.value) {
                    try {
                        const dateArray = JSON.parse(hiddenInput.value);
                        if (Array.isArray(dateArray) && dateArray.length > 0) updateTanggalTable(dateArray);
                    } catch (e) {
                        console.error("Error parsing tanggal_array data:", e);
                    }
                }
            }

            function generateDateRange(start, end) {
                let dates = [];
                if (start && end && end >= start) {
                    let loopStart = new Date(start.getFullYear(), start.getMonth(), start.getDate());
                    for (let d = loopStart; d <= end; d.setDate(d.getDate() + 1)) {
                        let day = String(d.getDate()).padStart(2, '0');
                        let month = String(d.getMonth() + 1).padStart(2, '0');
                        dates.push(`${day}-${month}-${d.getFullYear()}`);
                    }
                }
                return dates;
            }

            // --- DATE-TIME PICKER LOGIC (SHARED) ---
            let fpJamKeluar, fpJamMasuk;

            function initDateTimePickers() {
                const commonOptions = {
                    enableTime: true,
                    dateFormat: "d-m-Y H:i",
                    time_24hr: true,
                    allowInput: false,
                    enable: enabledDates
                };
                fpJamKeluar = flatpickr("#jam_keluar", {
                    ...commonOptions,
                    onChange: () => {
                        applyIzinDateConstraints();
                        handleDateTimeChange();
                    }
                });
                fpJamMasuk = flatpickr("#jam_masuk", {
                    ...commonOptions,
                    onChange: handleDateTimeChange
                });
                window.fpJamKeluar = fpJamKeluar;
                window.fpJamMasuk = fpJamMasuk;
            }

            function applyIzinDateConstraints() {
                const startDate = fpJamKeluar.selectedDates[0];
                if (!fpJamMasuk) return;
                fpJamMasuk.set('minDate', startDate || null);
                if (startDate && getElem('kategori_perizinan_id').value === '1' && getElem('jenis_izin_id').value) {
                    let maxDate = new Date(startDate.getTime());
                    maxDate.setHours(maxDate.getHours() + 9);
                    fpJamMasuk.set('maxDate', maxDate);
                    if (fpJamMasuk.selectedDates[0] && fpJamMasuk.selectedDates[0] > maxDate) fpJamMasuk.clear();
                } else {
                    fpJamMasuk.set('maxDate', null);
                }
            }

            function handleDateTimeChange() {
                const dates = generateDateRange(fpJamKeluar.selectedDates[0], fpJamMasuk.selectedDates[0]);
                updateTanggalTable(dates);

                if (window.tujuanDataTable) {
                    $('#tujuan-table tbody tr').each(function() {
                        const $row = $(this);
                        const fpStart = $row.data('fpStart');
                        const fpEnd = $row.data('fpEnd');
                        if (fpStart && fpEnd) {
                            const startGlobal = (fpJamKeluar && fpJamKeluar.selectedDates[0]) ? fpJamKeluar
                                .selectedDates[0] : null;
                            const endGlobal = (fpJamMasuk && fpJamMasuk.selectedDates[0]) ? fpJamMasuk
                                .selectedDates[0] : null;
                            fpStart.set('minDate', startGlobal || null);
                            fpStart.set('maxDate', endGlobal || null);
                            fpEnd.set('minDate', startGlobal || null);
                            fpEnd.set('maxDate', endGlobal || null);
                            const s = fpStart.selectedDates[0];
                            const e = fpEnd.selectedDates[0];
                            if (!s && startGlobal) fpStart.setDate(startGlobal, true);
                            if (!e && endGlobal) fpEnd.setDate(endGlobal, true);
                            if (startGlobal && s && s < startGlobal) fpStart.setDate(startGlobal, true);
                            if (endGlobal && e && e > endGlobal) fpEnd.setDate(endGlobal, true);
                            const jumlahEl = $row.find('input.tujuan-jumlah-hari')[0],
                                startHidden = $row.find('input.tujuan-start-hidden')[0],
                                endHidden = $row.find('input.tujuan-end-hidden')[0],
                                jumlahHidden = $row.find('input.tujuan-jumlah-hari-hidden')[0];
                            recalcTujuanRowDays(fpStart, fpEnd, jumlahEl, startHidden, endHidden,
                                jumlahHidden);
                        }
                    });
                    const sg = (fpJamKeluar && fpJamKeluar.selectedDates[0]) ? fpJamKeluar.selectedDates[0] : null;
                    const eg = (fpJamMasuk && fpJamMasuk.selectedDates[0]) ? fpJamMasuk.selectedDates[0] : null;
                    if (sg && eg) initTujuanRowPickers();
                }
            }

            function jenisIzinSwitched() {
                if (!isInitialLoad) clearFields('alasan', 'jam_keluar', 'jam_masuk', 'tanggal_array',
                    'nik_karyawan', 'lampiran-input');
                const jenisIzinId = jenisIzinSelect.value;
                const showFields = !!jenisIzinId;
                setDisplay(getElem('izin_dinas_karyawan_group'), showFields && jenisIzinId === '4' ? 'block' :
                    'none');

                // Update label and note for Acara Khusus
                updateIzinKaryawanLabel(jenisIzinId);
                toggleIzinKaryawanNote(jenisIzinId);

                setDisplay(sharedTextareaContainer, showFields ? 'block' : 'none');
                setDisplay(datetimePickerRow, showFields ? 'flex' : 'none');
                setDisplay(lampiranGroup, showFields ? 'block' : 'none');
                setDisplay(tableTanggalContainer, showFields ? 'block' : 'none');

                // Show shift selection only when jenis izin is selected
                setDisplay(shiftSelectionGroup, showFields ? 'block' : 'none');

                if (showFields) {
                    sharedTextareaLabel.textContent = "Alasan/Deskripsi Izin/Tugas";
                    const star1 = document.createElement('span');
                    star1.className = 'text-danger';
                    star1.textContent = ' *';
                    sharedTextareaLabel.appendChild(star1);
                    let labelKeluar = "Jam Keluar",
                        labelMasuk = "Jam Masuk";
                    if (jenisIzinId === '1') {
                        labelKeluar = "Jam Masuk Kerja (Normal)";
                        labelMasuk = "Jam Datang Terlambat";
                    }
                    if (jenisIzinId === '2') labelMasuk = "Jam Kembali";
                    if (jenisIzinId === '3') {
                        labelKeluar = "Jam Pulang Cepat";
                        labelMasuk = "Jam Pulang Kerja (Normal)";
                    }
                    if (jenisIzinId === '4') labelMasuk = "Jam Kembali";
                    jamKeluarLabel.textContent = labelKeluar;
                    const star2 = document.createElement('span');
                    star2.className = 'text-danger';
                    star2.textContent = ' *';
                    jamKeluarLabel.appendChild(star2);
                    jamMasukLabel.textContent = labelMasuk;
                    const star3 = document.createElement('span');
                    star3.className = 'text-danger';
                    star3.textContent = ' *';
                    jamMasukLabel.appendChild(star3);
                    applyIzinDateConstraints();
                } else {
                    // Reset shift selection to default when jenis izin is cleared
                    const nonShiftRadio = getElem('non_shift');
                    if (nonShiftRadio) nonShiftRadio.checked = true;
                }
                if (tanggalTableInstance) tanggalTableInstance.draw(false);
                if (showFields && jenisIzinId === '4') ensureCurrentUserSelectedIfApplicable();
            }

            // --- FORMULIR TUGAS LOGIC ---
            function initTugasComponents() {
                document.querySelectorAll('input[name="tipe_tugas"]').forEach(radio => radio.addEventListener(
                    'change', handleTipeTugasChange));
                if (addTujuanRowBtn) addTujuanRowBtn.addEventListener('click', addTujuanRow);
                $('#tujuan-table').on('click', '.remove-tujuan-btn', function() {
                    tujuanDataTable.row($(this).closest('tr')).remove().draw();
                    if (withAnggaranInput && withAnggaranInput.value === '1') {
                        renderAnggaranForEmployees();
                        setTimeout(() => {
                            bindAnggaranInputEvents();
                            recalcAllAnggaranTotals();
                        }, 0);
                    }
                });
            }

            function calculateTotalHari() {
                const tanggalArrayInput = getElem('tanggal_array');
                let totalHari = 0;
                if (tanggalArrayInput && tanggalArrayInput.value) {
                    try {
                        totalHari = JSON.parse(tanggalArrayInput.value).length;
                    } catch (e) {
                        totalHari = 0;
                    }
                }
                getElem('total_hari').value = totalHari;
                recalcAllAnggaranTotals();
            }

            function handleTipeTugasChange() {
                setDisplay(getElem('tugas-group-selection'), getElem('tipe_group').checked ? 'block' : 'none');
                if (!getElem('tipe_group').checked && !isInitialLoad) clearSelectedEmployees();
                ensureCurrentUserSelectedIfApplicable();
            }

            function initTujuanDataTable() {
                if (tujuanDataTable) return;
                const negaraList = @json($countries ?? []);
                tujuanDataTable = $('#tujuan-table').DataTable({
                    responsive: true,
                    paging: false,
                    info: false,
                    searching: false,
                    ordering: false,
                    autoWidth: false,
                    data: initialTujuanData, // [EDIT ONLY] Use initial data
                    columns: [{
                            "data": "tujuan",
                            "render": (data, type, row, meta) =>
                                `<div class="d-flex align-items-center gap-2"><button type="button" class="btn btn-sm ${data ? 'btn-outline-primary' : 'btn-outline-secondary'} pick-country-btn" data-row-index="${meta.row}"><i class="fas fa-globe-asia me-1"></i>${data || 'Pilih Negara'}</button><input type="hidden" name="rincian_tujuan[tujuan][]" class="tujuan-negara-hidden" value="${data || ''}"><input type="hidden" name="rincian_tujuan[tujuan_id][]" class="tujuan-negara-id-hidden" value="${row.tujuan_id || ''}"></div>`
                        },
                        {
                            "data": "status",
                            "className": "text-center align-middle",
                            "render": (data) =>
                                `<span class="tujuan-status-text">${(data || '').toUpperCase()}</span><input type="hidden" name="rincian_tujuan[status][]" class="tujuan-status-hidden" value="${data || ''}">`
                        },
                        {
                            "data": "keterangan",
                            "render": (data) =>
                                `<textarea name="rincian_tujuan[keterangan][]" class="form-control form-control-sm tujuan-keterangan" rows="2" placeholder="Contoh: Kunjungan ke klien A di Jakarta" required>${escapeHtml(data || '')}</textarea>`
                        },
                        {
                            "data": "karyawan",
                            "className": "employee-badges-container align-middle",
                            "render": function(data, type, row) {
                                const rowKaryawan = Array.isArray(data) ? data : [];
                                let badgesHtml = rowKaryawan.length > 0 ? rowKaryawan.map(emp =>
                                    `<span class="badge bg-info me-1 mb-1 employee-in-tujuan" data-nik="${emp.nik}" onclick="window.showFullNameModal('${String(emp.nama || '').replace(/'/g, "\\'")}')">${(emp.nama || '...').split(' ')[0]}<i class="fas fa-times-circle" onclick="event.stopPropagation(); window.removeEmployeeFromTujuan(this, '${emp.nik}')"></i></span>`
                                ).join('') : '';
                                const niksInRow = rowKaryawan.map(e => e.nik);
                                const hiddenInput =
                                    `<input type="hidden" name="rincian_tujuan[karyawan][]" value='${JSON.stringify(niksInRow)}'>`;
                                const availableEmployees = selectedEmployees.filter(emp => !
                                    niksInRow.includes(emp.nik));
                                let addDropdownHtml = '';
                                if (availableEmployees.length > 0) {
                                    const dropdownItems = availableEmployees.map(emp =>
                                        `<li><a class="dropdown-item" href="#" onclick="event.preventDefault(); window.addEmployeeToTujuan(this, '${emp.nik}')">${emp.nama}</a></li>`
                                    ).join('');
                                    addDropdownHtml =
                                        `<div class="btn-group ms-2"><button type="button" class="btn btn-sm btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" data-bs-boundary="viewport" aria-expanded="false"><i class="fas fa-plus"></i></button><ul class="dropdown-menu dropdown-menu-scrollable">${dropdownItems}</ul></div>`;
                                }
                                return `<div class="d-flex align-items-center">${badgesHtml}${hiddenInput}${addDropdownHtml}</div>`;
                            }
                        },
                        {
                            "data": "jumlah_hari",
                            "className": "align-middle",
                            "render": (data, type, row) =>
                                `<div class="tujuan-date-range"><div class="input-group input-group-sm mb-1"><input type="text" class="form-control form-control-sm tujuan-start" placeholder="Mulai" autocomplete="off" required><span class="input-group-text">s/d</span><input type="text" class="form-control form-control-sm tujuan-end" placeholder="Akhir" autocomplete="off" required></div><input type="number" class="form-control form-control-sm text-end tujuan-jumlah-hari" value="${Number(data) || 1}" min="1" readonly required><input type="hidden" name="rincian_tujuan[tanggal_mulai][]" class="tujuan-start-hidden" value="${row.tanggal_mulai || ''}"><input type="hidden" name="rincian_tujuan[tanggal_berakhir][]" class="tujuan-end-hidden" value="${row.tanggal_berakhir || ''}"><input type="hidden" name="rincian_tujuan[jumlah_hari][]" class="tujuan-jumlah-hari-hidden" value="${Number(data) || 1}"></div>`
                        },
                        {
                            "data": null,
                            "className": "text-center align-middle",
                            "render": () =>
                                `<button type="button" class="btn btn-sm btn-danger remove-tujuan-btn"><i class="fas fa-trash"></i></button>`
                        }
                    ],
                    drawCallback: function() {
                        setTimeout(() => {
                            initTujuanRowPickers();
                        }, 50);
                    }
                });
                window.tujuanDataTable = tujuanDataTable;
                let countriesListDT = null;

                function ensureCountriesListTable() {
                    if (countriesListDT) return countriesListDT;
                    countriesListDT = $('#countriesListTable').DataTable({
                        paging: true,
                        searching: true,
                        info: true,
                        ordering: false,
                        data: negaraList,
                        columns: [{
                            data: 'id'
                        }, {
                            data: 'nama'
                        }, {
                            data: 'state',
                            render: s => (s || '').toUpperCase()
                        }, {
                            data: null,
                            orderable: false,
                            className: 'text-center',
                            render: (d, t, r) =>
                                `<button type="button" class="btn btn-sm btn-primary select-country" data-id="${r.id}" data-nama="${r.nama}" data-state="${r.state}">Pilih</button>`
                        }]
                    });
                    $('#countriesListTable tbody').on('click', 'button.select-country', function() {
                        const $btn = $(this);
                        const id = $btn.data('id');
                        const nama = $btn.data('nama');
                        const state = $btn.data('state');
                        const rowIndex = $('#countryPickerModal').data('targetRowIndex');
                        if (rowIndex == null) return;
                        const rowApi = tujuanDataTable.row(rowIndex);
                        const rowData = rowApi.data() || {};
                        rowData.tujuan_id = id;
                        rowData.tujuan = nama;
                        rowData.status = state;
                        rowApi.data(rowData).draw(false);
                        const $row = $(tujuanDataTable.row(rowIndex).node());
                        $row.find('input.tujuan-negara-hidden').val(nama);
                        $row.find('input.tujuan-negara-id-hidden').val(id);
                        $row.find('.tujuan-status-text').text((state || '').toUpperCase());
                        $row.find('.tujuan-status-hidden').val(state || '');
                        const $btnPick = $row.find('button.pick-country-btn');
                        $btnPick.removeClass('btn-outline-secondary').addClass('btn-outline-primary').html(
                            `<i class="fas fa-globe-asia me-1"></i>${nama}`);
                        $('#countryPickerModal').modal('hide');
                        recalcAllAnggaranTotals();
                    });
                    return countriesListDT;
                }
                $('#countryPickerModal').on('shown.bs.modal', ensureCountriesListTable);
                tujuanDataTable.on('preDraw', () => {
                    if (typeof snapshotTujuanUIIntoRowData === 'function') snapshotTujuanUIIntoRowData();
                });
                tujuanDataTable.on('draw', function() {
                    $('#tujuan-table tbody').off('click', '.pick-country-btn').on('click',
                        '.pick-country-btn',
                        function() {
                            $('#countryPickerModal').data('targetRowIndex', $(this).data('row-index'))
                                .modal('show');
                        });
                    initTujuanRowPickers();
                    $(document).off('focusin.tujuanFp',
                            '#tujuan-table tbody input.tujuan-start, #tujuan-table tbody input.tujuan-end')
                        .on('focusin.tujuanFp',
                            '#tujuan-table tbody input.tujuan-start, #tujuan-table tbody input.tujuan-end',
                            function(e) {
                                const hasStart = (fpJamKeluar && fpJamKeluar.selectedDates && fpJamKeluar
                                    .selectedDates[0]);
                                const hasEnd = (fpJamMasuk && fpJamMasuk.selectedDates && fpJamMasuk
                                    .selectedDates[0]);
                                if (!hasStart || !hasEnd) {
                                    if (!window.__isTimeSwalOpen) {
                                        window.__isTimeSwalOpen = true;
                                        if (window.Swal) Swal.fire({
                                            icon: 'warning',
                                            title: 'Lengkapi Waktu',
                                            text: 'Isi "Waktu berangkat" dan "Waktu kepulangan" terlebih dahulu.',
                                            confirmButtonText: 'OK',
                                            confirmButtonColor: '#028284'
                                        }).then(() => {
                                            window.__isTimeSwalOpen = false;
                                        });
                                        else {
                                            alert(
                                                'Isi "Waktu berangkat" dan "Waktu kepulangan" terlebih dahulu.'
                                            );
                                            setTimeout(() => {
                                                window.__isTimeSwalOpen = false;
                                            }, 0);
                                        }
                                    }
                                    this.blur();
                                    e.preventDefault();
                                    e.stopImmediatePropagation();
                                    return false;
                                }
                                if (!this._flatpickr) initTujuanRowPickers();
                            });
                });
                tujuanDataTable.draw();
            }

            window.addEmployeeToTujuan = function(element, nikToAdd) {
                const employeeToAdd = selectedEmployees.find(e => e.nik === nikToAdd);
                if (!employeeToAdd) return;
                const rowElement = element.closest('tr');
                const row = tujuanDataTable.row(rowElement);
                snapshotTujuanUIIntoRowData();
                const rowData = row.data();
                rowData.karyawan.push(employeeToAdd);
                row.data(rowData).draw(false);
                recalcAllAnggaranTotals();
            };

            window.showFullNameModal = function(fullName) {
                document.getElementById('modalEmployeeFullName').textContent = fullName;
                new bootstrap.Modal(document.getElementById('employeeFullNameModal')).show();
            }

            window.addTujuanRow = function() {
                initTujuanDataTable();
                const karyawanForRow = selectedEmployees.map(e => ({
                    nik: e.nik,
                    nama: e.nama
                }));
                tujuanDataTable.row.add({
                    tujuan: '',
                    status: '',
                    keterangan: '',
                    karyawan: karyawanForRow,
                    jumlah_hari: 1
                }).draw();
                initTujuanRowPickers();
                if (withAnggaranInput.value === '1') renderAnggaranForEmployees();
            }

            window.removeEmployeeFromTujuan = function(iconElement, nikToRemove) {
                if (getElem('kategori_perizinan_id') && getElem('kategori_perizinan_id').value === '4') return;
                const rowElement = iconElement.closest('tr');
                const row = tujuanDataTable.row(rowElement);
                snapshotTujuanUIIntoRowData();
                const rowData = row.data();
                rowData.karyawan = rowData.karyawan.filter(emp => emp.nik !== nikToRemove);
                row.data(rowData).draw(false);
                recalcAllAnggaranTotals();
            };

            const safeId = (s) => String(s).replace(/[^A-Za-z0-9_-]/g, '_');

            function initTujuanRowPickers() {
                const startGlobal = (fpJamKeluar && fpJamKeluar.selectedDates[0]) ? fpJamKeluar.selectedDates[0] :
                    null;
                const endGlobal = (fpJamMasuk && fpJamMasuk.selectedDates[0]) ? fpJamMasuk.selectedDates[0] : null;
                if (!startGlobal || !endGlobal) return;
                $('#tujuan-table tbody tr').each(function() {
                    const $row = $(this);
                    const startInput = $row.find('input.tujuan-start')[0],
                        endInput = $row.find('input.tujuan-end')[0];
                    const jumlahEl = $row.find('input.tujuan-jumlah-hari')[0],
                        startHidden = $row.find('input.tujuan-start-hidden')[0];
                    const endHidden = $row.find('input.tujuan-end-hidden')[0],
                        jumlahHidden = $row.find('input.tujuan-jumlah-hari-hidden')[0];
                    if (!startInput) return;
                    const commonOpts = {
                        enableTime: false,
                        dateFormat: 'd-m-Y',
                        time_24hr: true,
                        allowInput: false,
                        enable: enabledDates
                    };
                    let fpStart = startInput._flatpickr,
                        fpEnd = endInput ? endInput._flatpickr : null;
                    if (!fpStart) fpStart = flatpickr(startInput, {
                        ...commonOpts,
                        minDate: startGlobal,
                        maxDate: endGlobal,
                        onChange: function() {
                            const s = fpStart.selectedDates[0];
                            if (s && fpEnd) fpEnd.set('minDate', s);
                            recalcTujuanRowDays(fpStart, fpEnd, jumlahEl, startHidden,
                                endHidden, jumlahHidden);
                        }
                    });
                    if (!fpEnd && endInput) fpEnd = flatpickr(endInput, {
                        ...commonOpts,
                        minDate: startGlobal,
                        maxDate: endGlobal,
                        onChange: function() {
                            recalcTujuanRowDays(fpStart, fpEnd, jumlahEl, startHidden,
                                endHidden, jumlahHidden);
                        }
                    });
                    $row.data({
                        fpStart,
                        fpEnd
                    });
                    const prevStart = (startHidden && startHidden.value) ? startHidden.value : '';
                    const prevEnd = (endHidden && endHidden.value) ? endHidden.value : '';
                    if (prevStart && prevEnd) {
                        const [py, pm, pd] = prevStart.split('-');
                        const [ey, em, ed] = prevEnd.split('-');
                        const startDate = new Date(Number(py), Number(pm) - 1, Number(pd));
                        const endDate = new Date(Number(ey), Number(em) - 1, Number(ed));

                        fpStart.setDate(startDate, false);
                        fpEnd.setDate(endDate, false);

                        if (startInput) startInput.value = fpStart.formatDate(startDate, 'd-m-Y');
                        if (endInput) endInput.value = fpEnd.formatDate(endDate, 'd-m-Y');

                        if (jumlahHidden && jumlahHidden.value) {
                            if (jumlahEl) jumlahEl.value = Number(jumlahHidden.value) || 1;
                        } else {
                            recalcTujuanRowDays(fpStart, fpEnd, jumlahEl, startHidden, endHidden,
                                jumlahHidden);
                        }
                    } else if (fpStart.selectedDates[0] && fpEnd && fpEnd.selectedDates[0]) {
                        recalcTujuanRowDays(fpStart, fpEnd, jumlahEl, startHidden, endHidden, jumlahHidden);
                    } else {
                        const hasNonDateData = $row.find('.tujuan-negara-hidden').val() ||
                            $row.find('.tujuan-keterangan').val();

                        if (!hasNonDateData && startGlobal && endGlobal) {
                            fpStart.setDate(startGlobal, true);
                            fpEnd.setDate(endGlobal, true);
                            recalcTujuanRowDays(fpStart, fpEnd, jumlahEl, startHidden, endHidden,
                                jumlahHidden);
                        }
                    }
                });
            }

            function recalcTujuanRowDays(fpStart, fpEnd, jumlahEl, startHidden, endHidden, jumlahHidden) {
                const s = fpStart.selectedDates[0];
                const e = fpEnd.selectedDates[0];
                let days = 0;
                if (s && e && e >= s) {
                    const sd = new Date(s.getFullYear(), s.getMonth(), s.getDate());
                    const ed = new Date(e.getFullYear(), e.getMonth(), e.getDate());
                    days = Math.floor((ed - sd) / 86400000) + 1;
                }
                if (jumlahEl) jumlahEl.value = days || 1;
                if (jumlahHidden) jumlahHidden.value = days || 1;
                if (startHidden) startHidden.value = s ? fpStart.formatDate(s, 'Y-m-d') : '';
                if (endHidden) endHidden.value = e ? fpEnd.formatDate(e, 'Y-m-d') : '';
                recalcAllAnggaranTotals();
            }

            function ensureTujuanDatesBeforeSubmit() {
                let ok = true;
                $('#tujuan-table tbody tr').each(function() {
                    const $row = $(this);
                    if ($row.hasClass('child')) return;
                    if ($row.find('td.dataTables_empty').length > 0) return;
                    const hasHiddenInputs = $row.find('input.tujuan-start-hidden, input.tujuan-end-hidden')
                        .length > 0;
                    if (!hasHiddenInputs) return;

                    const startHidden = $row.find('input.tujuan-start-hidden')[0];
                    const endHidden = $row.find('input.tujuan-end-hidden')[0];
                    const jumlahEl = $row.find('input.tujuan-jumlah-hari')[0];
                    const jumlahHidden = $row.find('input.tujuan-jumlah-hari-hidden')[0];
                    const fpStart = $row.data('fpStart');
                    const fpEnd = $row.data('fpEnd');

                    if (fpStart && fpEnd) {
                        recalcTujuanRowDays(fpStart, fpEnd, jumlahEl, startHidden, endHidden, jumlahHidden);
                    }

                    if (!startHidden?.value || !endHidden?.value) {
                        const startVis = ($row.find('input.tujuan-start').val() || '').trim();
                        const endVis = ($row.find('input.tujuan-end').val() || '').trim();
                        const m = /^([0-9]{1,2})-([0-9]{1,2})-([0-9]{4})$/.exec(startVis);
                        const n = /^([0-9]{1,2})-([0-9]{1,2})-([0-9]{4})$/.exec(endVis);
                        if (m && n) {
                            const dayS = String(m[1]).padStart(2, '0');
                            const monS = String(m[2]).padStart(2, '0');
                            const yearS = m[3];
                            const dayE = String(n[1]).padStart(2, '0');
                            const monE = String(n[2]).padStart(2, '0');
                            const yearE = n[3];
                            const sd = new Date(Number(yearS), Number(monS) - 1, Number(dayS));
                            const ed = new Date(Number(yearE), Number(monE) - 1, Number(dayE));
                            if (startHidden) startHidden.value = `${yearS}-${monS}-${dayS}`;
                            if (endHidden) endHidden.value = `${yearE}-${monE}-${dayE}`;
                            if (!isNaN(sd) && !isNaN(ed) && ed >= sd) {
                                const days = Math.floor((ed - sd) / 86400000) + 1;
                                if (jumlahEl) jumlahEl.value = days || 1;
                                if (jumlahHidden) jumlahHidden.value = days || 1;
                            }
                        }
                    }

                    if (!startHidden?.value || !endHidden?.value) {
                        ok = false;
                        $row.addClass('table-danger');
                    } else {
                        $row.removeClass('table-danger');
                    }
                });
                return ok;
            }

            function updateAnggaranHintVisibility() {
                const hint = document.getElementById('anggaran-no-employees-hint');
                const tabsContainer = document.getElementById('anggaran-tabs-container');
                const oldContainer = document.getElementById('anggaran-per-employee-container');
                if (!hint) return;
                const hasEmployees = selectedEmployees.length > 0;
                hint.style.display = hasEmployees ? 'none' : 'block';
                if (tabsContainer) tabsContainer.style.display = hasEmployees ? 'block' : 'none';
                if (oldContainer) oldContainer.style.display = 'none'; // Always hide old container
            }

            function snapshotAnggaranState() {
                const state = {};
                selectedEmployees.forEach(emp => {
                    const nik = emp.nik;
                    const nikKey = safeId(nik);
                    const empState = {
                        default: {},
                        defaultMulti: {},
                        lain: []
                    };
                    (defaultBiaya || []).forEach(b => {
                        const nameLower = (b.nama_biaya || '').toLowerCase();
                        if (nameLower === 'uang hotel' || nameLower === 'uang transportasi') {
                            const containerKey = `dynamic-biaya-${nikKey}-${b.id}-container`;
                            const container = document.getElementById(containerKey);
                            const list = [];
                            if (container) {
                                const rows = container.querySelectorAll(
                                    '.dynamic-default-biaya-row');
                                rows.forEach(row => {
                                    const jumlahInput = row.querySelector(
                                        'input[type="text"]');
                                    const currencyInput = row.querySelector(
                                        'input[type="hidden"][name*="[currency]"]');
                                    if (jumlahInput) list.push({
                                        jumlah: jumlahInput.value,
                                        currency: currencyInput ? currencyInput
                                            .value : 'IDR'
                                    });
                                });
                            }
                            empState.defaultMulti[b.id] = list;
                        } else {
                            const base = `bp_${nikKey}_default_${b.id}`;
                            const jumlahEl = document.getElementById(`${base}_jumlah`);
                            const currEl = document.getElementById(`${base}_input`);
                            if (jumlahEl || currEl) {
                                const hasIDR = (b.jumlah_idr !== null && b.jumlah_idr !==
                                    undefined && b.jumlah_idr !== '');
                                const hasUSD = (b.jumlah_usd !== null && b.jumlah_usd !==
                                    undefined && b.jumlah_usd !== '');
                                const fallbackCurr = (hasUSD && !hasIDR) ? 'USD' : 'IDR';
                                empState.default[b.id] = {
                                    jumlah: jumlahEl ? jumlahEl.value : '',
                                    currency: currEl ? currEl.value : fallbackCurr
                                };
                            }
                        }
                    });
                    const lainContainer = document.getElementById(`biaya-lain-container-${nikKey}`);
                    if (lainContainer) {
                        lainContainer.querySelectorAll('.dynamic-biaya-row').forEach(row => {
                            const descInput = row.querySelector('input[data-field="deskripsi"]');
                            const amountInput = row.querySelector('input[data-field="jumlah"]');
                            const currencyInput = row.querySelector(
                                'input[data-field="currency"][type="hidden"]');
                            empState.lain.push({
                                deskripsi: descInput ? descInput.value : '',
                                jumlah: amountInput ? amountInput.value : '',
                                currency: currencyInput ? currencyInput.value : 'IDR'
                            });
                        });
                    }
                    state[nik] = empState;
                });
                return state;
            }

            function getEmployeeDaysByCurrency() {
                const map = {};
                if (!window.tujuanDataTable) return map;
                $('#tujuan-table tbody tr').each(function() {
                    const $row = $(this);
                    const status = ($row.find('.tujuan-status-hidden').val() || '').toLowerCase();
                    const days = parseInt($row.find('input.tujuan-jumlah-hari-hidden').val() || $row.find(
                        'input.tujuan-jumlah-hari').val() || '0', 10) || 0;
                    const data = tujuanDataTable.row(this).data() || {};
                    (Array.isArray(data.karyawan) ? data.karyawan : []).forEach(emp => {
                        if (!emp || !emp.nik) return;
                        if (!map[emp.nik]) map[emp.nik] = {
                            idr: 0,
                            usd: 0
                        };
                        if (status === 'dn') map[emp.nik].idr += days;
                        else if (status === 'ln') map[emp.nik].usd += days;
                    });
                });
                return map;
            }

            function getEmployeeCurrenciesFromTujuan() {
                const result = {};
                if (!window.tujuanDataTable) return result;
                $('#tujuan-table tbody tr').each(function() {
                    const $row = $(this);
                    const negaraName = ($row.find('input.tujuan-negara-hidden').val() || '').trim()
                        .toLowerCase();
                    const status = ($row.find('.tujuan-status-hidden').val() || '').toLowerCase();
                    let currencyCode = currencyByCountryName[negaraName] || ((status === 'dn') ? 'IDR' : (
                        status ? 'USD' : 'IDR'));
                    const data = tujuanDataTable.row(this).data() || {};
                    (Array.isArray(data.karyawan) ? data.karyawan : []).forEach(emp => {
                        if (!emp || !emp.nik) return;
                        if (!result[emp.nik]) result[emp.nik] = new Set();
                        result[emp.nik].add(String(currencyCode || 'IDR').toUpperCase());
                    });
                });
                return result;
            }

            function renderAnggaranForEmployees() {
                if (selectedEmployees.length > 0) {
                    renderAnggaranWithTabs();
                } else {
                    renderAnggaranOriginal(); // Show hint for no employees
                }
            }

            function renderAnggaranWithTabs() {
                const tabsContainer = document.getElementById('anggaran-tabs-container');
                const oldContainer = document.getElementById('anggaran-per-employee-container');
                if (!tabsContainer) return;
                updateAnggaranHintVisibility();
                tabsContainer.style.display = 'block';
                oldContainer.style.display = 'none';
                isRenderingAnggaran = true;

                // Cek apakah ada data 'old()' untuk anggaran.
                const hasOldAnggaran = window.oldInputData && window.oldInputData.biaya_pengeluaran && Object.keys(
                    window.oldInputData.biaya_pengeluaran).length > 0;

                const tabNav = document.getElementById('anggaran-employee-tabs');
                const tabContent = document.getElementById('anggaran-tab-content');
                tabNav.innerHTML = '';
                tabContent.innerHTML = '';
                const empCurrencies = getEmployeeCurrenciesFromTujuan();

                selectedEmployees.forEach((emp, index) => {
                    const nik = emp.nik;
                    const nikKey = safeId(nik);
                    let empState; // Variabel untuk menampung data yang akan dirender

                    // Logika untuk memilih sumber data
                    if (hasOldAnggaran && window.oldInputData.biaya_pengeluaran[nik]) {
                        // JIKA ADA DATA old(), GUNAKAN ITU SEBAGAI SATU-SATUNYA SUMBER.
                        console.log(`[FIX] Menggunakan data 'old()' untuk karyawan ${nik}`);

                        const oldData = window.oldInputData.biaya_pengeluaran[nik];
                        empState = {
                            defaultMulti: {},
                            lain: (oldData.lain || [])
                        };

                        const oldDefaultItems = oldData.default ? Object.values(oldData.default) : [];
                        oldDefaultItems.forEach(item => {
                            if (!item || !item.biaya_id) return;
                            const biayaId = item.biaya_id;
                            const biayaInfo = defaultBiaya.find(b => String(b.id) === String(
                                biayaId));
                            if (biayaInfo && (biayaInfo.nama_biaya.toLowerCase() === 'uang hotel' ||
                                    biayaInfo.nama_biaya.toLowerCase() === 'uang transportasi')) {
                                if (!empState.defaultMulti[biayaId]) {
                                    empState.defaultMulti[biayaId] = [];
                                }
                                empState.defaultMulti[biayaId].push({
                                    jumlah: item.jumlah || '',
                                    currency: item.currency || 'IDR'
                                });
                            }
                        });

                    } else {
                        // JIKA TIDAK ADA DATA old(), gunakan data awal dari database.
                        console.log(`[FIX] Menggunakan data awal dari database untuk karyawan ${nik}`);
                        const preserved = isInitialLoad ? initialAnggaranData : snapshotAnggaranState();
                        empState = preserved[nik] || {
                            default: {},
                            defaultMulti: {},
                            lain: []
                        };

                        if (isInitialLoad && preserved[nik] && preserved[nik].default) {
                            empState.defaultMulti = empState.defaultMulti || {};
                            (defaultBiaya || []).forEach(b => {
                                const namaLower = (b.nama_biaya || '').toLowerCase();
                                if (namaLower === 'uang hotel' || namaLower ===
                                    'uang transportasi') {
                                    const defaultEntries = preserved[nik].default[b.id];
                                    if (Array.isArray(defaultEntries)) empState.defaultMulti[b.id] =
                                        defaultEntries;
                                    else if (defaultEntries) empState.defaultMulti[b.id] = [
                                        defaultEntries
                                    ];
                                    else empState.defaultMulti[b.id] = [];
                                }
                            });
                        }
                    }

                    const isActive = index === 0;
                    const tabItem = document.createElement('li');
                    tabItem.className = 'nav-item';
                    tabItem.innerHTML =
                        `<button class="nav-link ${isActive ? 'active' : ''}" id="anggaran-tab-${nikKey}" data-bs-toggle="tab" data-bs-target="#anggaran-pane-${nikKey}" type="button" role="tab" aria-controls="anggaran-pane-${nikKey}" aria-selected="${isActive}">${emp.nama}<span class="employee-tab-badge badge bg-secondary">${nik}</span></button>`;
                    tabNav.appendChild(tabItem);
                    const tabPane = document.createElement('div');
                    tabPane.className = `anggaran-tab-pane ${isActive ? 'active' : ''}`;
                    tabPane.id = `anggaran-pane-${nikKey}`;
                    tabPane.setAttribute('role', 'tabpanel');
                    tabPane.setAttribute('aria-labelledby', `anggaran-tab-${nikKey}`);
                    tabPane.innerHTML =
                        `<div class="card"><div class="card-header py-2 d-flex justify-content-between align-items-center"><span><strong>${emp.nama}</strong> <small class="text-muted">(NIK: ${nik})</small></span><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" title="Salin anggaran dari kartu ini" onclick="window.copyAnggaran('${nik}')"><i class="fas fa-copy me-1"></i>Copy</button><button type="button" class="btn btn-sm btn-outline-secondary" title="Tempel anggaran ke kartu ini" onclick="window.pasteAnggaran('${nik}')"><i class="fas fa-paste me-1"></i>Paste</button></div></div><div class="card-body py-3"><div class="row g-3" id="default-biaya-${nikKey}"></div><div class="mt-3"><label class="form-label">Biaya Pengeluaran Lain</label><div id="biaya-lain-container-${nikKey}"></div><button type="button" class="btn btn-sm btn-primary mt-2" onclick="window.addBiayaLainRowFor('${nik}')"><i class="fas fa-plus me-1"></i> Tambah Biaya Lain</button></div></div></div>`;
                    tabContent.appendChild(tabPane);
                    defaultIndexCounters[nik] = 0;
                    const grid = tabPane.querySelector(`#default-biaya-${nikKey}`);

                    renderDefaultBiayaFields(grid, emp, empState, empCurrencies);

                    const biayaLainContainer = tabPane.querySelector(`#biaya-lain-container-${nikKey}`);
                    if (biayaLainContainer) biayaLainContainer.innerHTML = '';
                    if (Array.isArray(empState.lain)) {
                        empState.lain.forEach((item) => {
                            window.addBiayaLainRowFor(nik);
                            const lastRow = biayaLainContainer.querySelector(
                                '.dynamic-biaya-row:last-child');
                            if (lastRow) {
                                fillBiayaLainRow(lastRow, item);
                            }
                        });
                    }
                });

                initBootstrapTabs();
                bindAnggaranInputEvents(); // Dipindahkan ke luar loop agar lebih efisien
                recalcAllAnggaranTotals();
                isRenderingAnggaran = false;

            }

            function renderAnggaranOriginal() {
                const container = document.getElementById('anggaran-per-employee-container');
                const tabsContainer = document.getElementById('anggaran-tabs-container');
                if (!container) return;
                container.style.display = 'block';
                tabsContainer.style.display = 'none';
                updateAnggaranHintVisibility();
            }

            function renderDefaultBiayaFields(grid, emp, empState, empCurrencies) {
                const nik = emp.nik;
                const nikKey = safeId(nik);
                defaultBiaya.forEach(b => {
                    const base = `bp_${nikKey}_default_${b.id}`;
                    const hasIDR = (b.jumlah_idr !== null && b.jumlah_idr !== undefined && b
                        .jumlah_idr !== '');
                    const hasUSD = (b.jumlah_usd !== null && b.jumlah_usd !== undefined && b
                        .jumlah_usd !== '');
                    const hasBoth = hasIDR && hasUSD;
                    const namaLower = (b.nama_biaya || '').toLowerCase();
                    if (namaLower === 'uang saku' || namaLower === 'uang makan') {
                        const labelBase = (b.nama_biaya || '').replace(/"/g, '&quot;');
                        const colIdr = document.createElement('div');
                        colIdr.className = 'col-md-3';
                        colIdr.id = `${base}_computed_group_idr`;
                        const idxIdr = defaultIndexCounters[nik]++;
                        colIdr.innerHTML =
                            `<label class="form-label">${labelBase} (IDR)<input type="text" class="currency-input form-control text-end" id="${base}_computed_input_idr" value="" readonly><input type="hidden" id="${base}_submitted_biaya_id_idr" name="biaya_pengeluaran[${nik}][default][${idxIdr}][biaya_id]" value="${b.id}"><div id="${base}_note_idr" class="text-primary fw-bold" style="display:none;">On Bill</div><input type="hidden" id="${base}_submitted_jumlah_idr" name="biaya_pengeluaran[${nik}][default][${idxIdr}][jumlah]" value=""><input type="hidden" id="${base}_submitted_currency_idr" name="biaya_pengeluaran[${nik}][default][${idxIdr}][currency]" value="IDR">`;
                        const colUsd = document.createElement('div');
                        colUsd.className = 'col-md-3';
                        colUsd.id = `${base}_computed_group_usd`;
                        const idxUsd = defaultIndexCounters[nik]++;
                        colUsd.innerHTML =
                            `<label class="form-label">${labelBase} (USD)<input type="text" class="currency-input form-control text-end" id="${base}_computed_input_usd" value="" readonly><input type="hidden" id="${base}_submitted_biaya_id_usd" name="biaya_pengeluaran[${nik}][default][${idxUsd}][biaya_id]" value="${b.id}"><div id="${base}_note_usd" class="text-primary fw-bold" style="display:none;">On Bill</div><input type="hidden" id="${base}_submitted_jumlah_usd" name="biaya_pengeluaran[${nik}][default][${idxUsd}][jumlah]" value=""><input type="hidden" id="${base}_submitted_currency_usd" name="biaya_pengeluaran[${nik}][default][${idxUsd}][currency]" value="USD">`;
                        grid.appendChild(colIdr);
                        grid.appendChild(colUsd);
                    } else if (namaLower === 'uang hotel' || namaLower === 'uang transportasi') {
                        const col = document.createElement('div');
                        col.className = 'col-12';
                        col.innerHTML =
                            `<div class="mb-3"><div class="d-flex justify-content-between align-items-center mb-2"><label class="form-label mb-0">${b.nama_biaya || ''}</label><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-primary" onclick="window.addDynamicBiayaField('${nik}', ${b.id}, '${(b.nama_biaya || '').replace(/"/g,'&quot;')}')"><i class="fas fa-plus me-1"></i>Tambah</button><button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.autoSetFromCountries('${nik}', ${b.id}, '${(b.nama_biaya || '').replace(/"/g,'&quot;')}')"><i class="fas fa-magic me-1"></i>Auto</button></div></div><div id="dynamic-biaya-${nikKey}-${b.id}-container" class="dynamic-biaya-container"></div></div>`;
                        grid.appendChild(col);
                        const prevList = (empState.defaultMulti && empState.defaultMulti[b.id]) ? empState
                            .defaultMulti[b.id] : [];
                        if (prevList.length === 0 && !isRenderingAnggaran) {
                            setTimeout(() => {
                                window.autoSetFromCountries(nik, b.id, b.nama_biaya || '');
                            }, 100);
                        } else {
                            prevList.forEach(item => {
                                window.addDynamicBiayaField(nik, b.id, b.nama_biaya || '', item
                                    .currency || 'IDR', item.jumlah || '');
                            });
                        }
                    } else {
                        const chosenDefaultRaw = hasBoth ? '' : (hasUSD ? b.jumlah_usd : b.jumlah_idr);
                        const hasChosenDefault = (chosenDefaultRaw !== null && chosenDefaultRaw !==
                            undefined && chosenDefaultRaw !== '');
                        const jumlahDefault = hasChosenDefault ? Number(chosenDefaultRaw) : '';
                        const amountReadonly = hasBoth;
                        const currencyDisabled = hasBoth;
                        const prev = empState.default[b.id] || {};
                        const jumlahVal = (prev.jumlah !== undefined && prev.jumlah !== '') ? prev.jumlah :
                            jumlahDefault;
                        const fallbackCurr = (hasUSD && !hasIDR) ? 'USD' : 'IDR';
                        const currencyVal = hasBoth ? fallbackCurr : (prev.currency || fallbackCurr);
                        const col = document.createElement('div');
                        col.className = 'col-md-3';
                        col.innerHTML =
                            `<label class="form-label">${b.nama_biaya || ''} <span class="text-danger">*</span></label><input type="hidden" name="biaya_pengeluaran[${nik}][default][${b.id}][biaya_id]" value="${b.id}"><div class="input-group"><input type="text" id="${base}_jumlah" name="biaya_pengeluaran[${nik}][default][${b.id}][jumlah]" class="currency-input form-control" placeholder="0" ${amountReadonly ? 'readonly' : ''} value="${jumlahVal}" data-nik="${nik}" data-biaya-id="${b.id}" data-biaya-name="${(b.nama_biaya || '').replace(/"/g,'&quot;')}" data-userModified="${prev.jumlah !== undefined && prev.jumlah !== ''}"data-required="true">><input type="hidden" name="biaya_pengeluaran[${nik}][default][${b.id}][currency]" id="${base}_input" value="${currencyVal}"><input type="text" id="${base}_display" class="form-control text-center" value="${currencyVal}" readonly style="flex:0 0 80px;"><button class="btn btn-primary mb-0 open-currency-modal" type="button" data-bs-toggle="modal" data-bs-target="#currencyModal" data-target-input="${base}" ${currencyDisabled ? 'disabled' : ''}><i class="fas fa-search"></i></button></div>`;
                        grid.appendChild(col);
                    }
                });
            }

            function fillBiayaLainRow(row, data) {
                const desc = row.querySelector('input[data-field="deskripsi"]');
                const jum = row.querySelector('input[data-field="jumlah"]');
                const curHidden = row.querySelector('input[data-field="currency"][type="hidden"]');
                const curDisp = row.querySelector('input[data-field="currency"][type="text"]');
                if (desc) desc.value = data.deskripsi || '';
                if (jum) jum.value = data.jumlah || '';
                const cv = data.currency || 'IDR';
                if (curHidden) curHidden.value = cv;
                if (curDisp) curDisp.value = cv;
            }

            function initBootstrapTabs() {
                const tabLinks = document.querySelectorAll('#anggaran-employee-tabs .nav-link');
                tabLinks.forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        tabLinks.forEach(l => l.classList.remove('active'));
                        document.querySelectorAll('.anggaran-tab-pane').forEach(p => p.classList
                            .remove('active'));
                        this.classList.add('active');
                        const targetId = this.getAttribute('data-bs-target');
                        const targetPane = document.querySelector(targetId);
                        if (targetPane) {
                            targetPane.classList.add('active');
                        }
                    });
                });
            }


            window.copyAnggaran = function(nik) {
                try {
                    const all = snapshotAnggaranState();
                    if (!all || !all[nik]) {
                        alert('Tidak ada data anggaran untuk disalin.');
                        return;
                    }
                    anggaranClipboard = JSON.parse(JSON.stringify(all[nik]));
                    const hdr = document.querySelector(`#anggaran-emp-${safeId(nik)} .card-header`);
                    if (hdr) {
                        hdr.classList.add('border-success');
                        setTimeout(() => hdr.classList.remove('border-success'), 800);
                    }
                } catch (e) {
                    console.error('copyAnggaran error', e);
                    alert('Gagal menyalin data anggaran.');
                }
            };

            window.pasteAnggaran = function(nik) {
                if (!anggaranClipboard) {
                    alert('Belum ada data anggaran yang disalin.');
                    return;
                }
                const nikKey = safeId(nik);
                try {
                    defaultBiaya.forEach(b => {
                        const nameLower = (b.nama_biaya || '').toLowerCase();
                        if (nameLower === 'uang hotel' || nameLower === 'uang transportasi') {
                            const containerKey = `dynamic-biaya-${nikKey}-${b.id}-container`;
                            const container = document.getElementById(containerKey);
                            if (container) {
                                container.innerHTML = '';
                                const counterKey = `${nik}_${b.id}`;
                                if (typeof dynamicBiayaCounters !== 'undefined') dynamicBiayaCounters[
                                    counterKey] = 0;
                                const list = (anggaranClipboard.defaultMulti && anggaranClipboard
                                    .defaultMulti[b.id]) ? anggaranClipboard.defaultMulti[b.id] : [];
                                list.forEach(item => window.addDynamicBiayaField(nik, b.id, b
                                    .nama_biaya || '', item.currency || 'IDR', item.jumlah || ''
                                ));
                            }
                        } else {
                            const base = `bp_${nikKey}_default_${b.id}`;
                            const src = anggaranClipboard.default ? anggaranClipboard.default[b.id] :
                                null;
                            if (!src) return;
                            const jumlahEl = document.getElementById(`${base}_jumlah`);
                            const currHidden = document.getElementById(`${base}_input`);
                            const currDisplay = document.getElementById(`${base}_display`);
                            if (jumlahEl) jumlahEl.value = src.jumlah ?? '';
                            if (currHidden) currHidden.value = src.currency || 'IDR';
                            if (currDisplay) currDisplay.value = src.currency || 'IDR';
                        }
                    });

                    const container = document.getElementById(`biaya-lain-container-${nikKey}`);
                    if (container) {
                        container.innerHTML = '';
                        biayaLainCounters[nik] = 0;
                        const list = Array.isArray(anggaranClipboard.lain) ? anggaranClipboard.lain : [];
                        list.forEach(() => addBiayaLainRowFor(nik));
                        container.querySelectorAll('.dynamic-biaya-row').forEach((row, idx) => {
                            const data = list[idx];
                            if (!data) return;
                            const desc = row.querySelector('input[data-field="deskripsi"]'),
                                jum = row.querySelector('input[data-field="jumlah"]'),
                                curHidden = row.querySelector(
                                    'input[data-field="currency"][type="hidden"]'),
                                curDisp = row.querySelector(
                                    'input[data-field="currency"][type="text"]');
                            if (desc) desc.value = data.deskripsi || '';
                            if (jum) jum.value = data.jumlah || '';
                            const cv = data.currency || 'IDR';
                            if (curHidden) curHidden.value = cv;
                            if (curDisp) curDisp.value = cv;
                        });
                    }
                    bindAnggaranInputEvents();
                    recalcAllAnggaranTotals();
                    const hdr = document.querySelector(`#anggaran-emp-${nikKey} .card-header`);
                    if (hdr) {
                        hdr.classList.add('border-primary');
                        setTimeout(() => hdr.classList.remove('border-primary'), 800);
                    }
                } catch (e) {
                    console.error('pasteAnggaran error', e);
                    alert('Gagal menempelkan data anggaran.');
                }
            };

            window.addBiayaLainRowFor = function(nik) {
                const nikKey = safeId(nik);
                if (!biayaLainCounters[nik]) biayaLainCounters[nik] = 0;
                const idx = biayaLainCounters[nik]++;
                const container = document.getElementById(`biaya-lain-container-${nikKey}`);
                if (!container) return;
                const base = `bp_${nikKey}_lain_${idx}`;
                const row = document.createElement('div');
                row.className = 'row align-items-center mb-2 dynamic-biaya-row';
                row.innerHTML =
                    `<div class="col-md-5"><label class="form-label mb-0">Deskripsi Biaya <span class="text-danger">*</span></label><input type="text" name="biaya_pengeluaran[${nik}][lain][${idx}][deskripsi]" class="form-control form-control-sm mt-1" placeholder="Deskripsi Biaya" data-field="deskripsi" data-required="true"></div><div class="col-md-6"><label class="form-label mb-0">Jumlah <span class="text-danger">*</span></label><div class="input-group input-group-sm"><input type="text" name="biaya_pengeluaran[${nik}][lain][${idx}][jumlah]" class="currency-input form-control mt-1" placeholder="0" data-field="jumlah" data-required="true"><input type="hidden" name="biaya_pengeluaran[${nik}][lain][${idx}][currency]" id="${base}_input" value="IDR" data-field="currency"><input type="text" id="${base}_display" class="form-control text-center mt-1" value="IDR" readonly style="flex:0 0 70px;" data-field="currency"><button class="btn btn-primary mb-0 mt-1 open-currency-modal" type="button" data-bs-toggle="modal" data-bs-target="#currencyModal" data-target-input="${base}"><i class="fas fa-search"></i></button></div></div><div class="col-md-1 d-flex align-items-center"><button type="button" class="btn btn-sm btn-danger mt-5" onclick="this.closest('.dynamic-biaya-row').remove()"><i class="fas fa-trash"></i></button></div><div class="col-12"><hr class="my-2"></div>`;
                container.appendChild(row);
                recalcAllAnggaranTotals();
            }

            const dynamicBiayaCounters = {};

            window.addDynamicBiayaField = function(nik, biayaId, biayaName, currency = 'IDR', amount = '') {
                const nikKey = safeId(nik);
                const containerKey = `dynamic-biaya-${nikKey}-${biayaId}-container`;
                const container = document.getElementById(containerKey);
                if (!container) return;
                const counterKey = `${nik}_${biayaId}`;
                if (!dynamicBiayaCounters[counterKey]) dynamicBiayaCounters[counterKey] = 0;
                const idx = dynamicBiayaCounters[counterKey]++;
                const submissionIdx = defaultIndexCounters[nik]++;
                const fieldId = `dynamic_${nikKey}_${biayaId}_${idx}`;
                const row = document.createElement('div');
                row.className = 'row align-items-center mb-2 dynamic-default-biaya-row';
                row.setAttribute('data-biaya-id', biayaId);
                row.innerHTML =
                    `<div class="col-md-8"><label class="form-label mb-0">${escapeHtml(biayaName)} <span class="text-danger">*</span></label><input type="hidden" name="biaya_pengeluaran[${nik}][default][${submissionIdx}][biaya_id]" value="${biayaId}"><div class="input-group mt-1"><input type="text" id="${fieldId}_jumlah" name="biaya_pengeluaran[${nik}][default][${submissionIdx}][jumlah]" class="currency-input form-control" placeholder="0" value="${amount}" data-nik="${nik}" data-biaya-id="${biayaId}" data-biaya-name="${escapeHtml(biayaName)}" data-required="true"><input type="hidden" name="biaya_pengeluaran[${nik}][default][${submissionIdx}][currency]" id="${fieldId}_input" value="${currency}"><input type="text" id="${fieldId}_display" class="form-control text-center" value="${currency}" readonly style="flex:0 0 80px;"><button class="btn btn-primary mb-0 open-currency-modal" type="button" data-bs-toggle="modal" data-bs-target="#currencyModal" data-target-input="${fieldId}"><i class="fas fa-search"></i></button></div></div><div class="col-md-4 d-flex align-items-center"><button type="button" class="btn btn-sm btn-danger mt-5" onclick="window.removeDynamicBiayaField(this)" title="Hapus field ini"><i class="fas fa-trash me-1"></i>Hapus</button></div><div class="col-12"><hr class="my-2"></div>`;
                container.appendChild(row);
                bindAnggaranInputEvents();
                recalcAllAnggaranTotals();
            };

            window.removeDynamicBiayaField = function(button) {
                const row = button.closest('.dynamic-default-biaya-row');
                if (row) {
                    row.remove();
                    recalcAllAnggaranTotals();
                }
            };

            window.autoSetFromCountries = function(nik, biayaId, biayaName) {
                const nikKey = safeId(nik);
                const containerKey = `dynamic-biaya-${nikKey}-${biayaId}-container`;
                const container = document.getElementById(containerKey);
                if (!container) return;
                const empCurrencies = getEmployeeCurrenciesFromTujuan();
                const currencies = (empCurrencies[nik] && empCurrencies[nik].size > 0) ? Array.from(
                    empCurrencies[nik]) : ['IDR'];
                container.innerHTML = '';
                const counterKey = `${nik}_${biayaId}`;
                dynamicBiayaCounters[counterKey] = 0;
                currencies.forEach(code => window.addDynamicBiayaField(nik, biayaId, biayaName, code, ''));
                const alert = document.createElement('div');
                alert.className = 'alert alert-success alert-dismissible fade show mt-2';
                alert.innerHTML =
                    `<small><i class="fas fa-check me-1"></i>Auto-set ${currencies.length} field(s) berdasarkan negara tujuan: ${currencies.join(', ')}</small><button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>`;
                container.appendChild(alert);
                setTimeout(() => {
                    if (alert.parentNode) alert.remove();
                }, 3000);
            };

            function masterSwitch() {
                const selectedID = kategoriSelect.value;
                setDisplay(sharedTextareaContainer, 'none');
                document.body.appendChild(sharedTextareaContainer);
                setDisplay(datetimePickerRow, 'none');
                document.body.appendChild(datetimePickerRow);
                setDisplay(formIzinContainer, 'none');
                setDisplay(formTugasContainer, 'none');
                setDisplay(sharedSection, 'none');
                setDisplay(lampiranGroup, 'none');
                setDisplay(tableTanggalContainer, 'none');
                if (tableTanggalContainer.parentNode !== document.body) document.body.appendChild(
                    tableTanggalContainer);
                setDisplay(addAnggaranButtonContainer, 'none');
                setDisplay(anggaranSectionContainer, 'none');

                // Hide shift selection by default
                setDisplay(shiftSelectionGroup, 'none');

                if (!isInitialLoad && withAnggaranInput) withAnggaranInput.value = '0';
                if (anggaranSectionContainer) anggaranSectionContainer.querySelectorAll('input, select, button')
                    .forEach(el => el.disabled = true);
                // Button anggaran selalu disabled pada halaman edit
                if (btnToggleAnggaran) {
                    btnToggleAnggaran.innerHTML =
                        '<i class="fas fa-lock me-1"></i> Rincian Anggaran (Tidak dapat diubah)';
                    btnToggleAnggaran.classList.remove('btn-warning', 'btn-primary');
                    btnToggleAnggaran.classList.add('btn-secondary');
                    btnToggleAnggaran.disabled = true;
                }
                if (!isInitialLoad) {
                    clearFields('jenis_izin_id', 'alasan', 'jam_keluar', 'jam_masuk', 'tanggal_array',
                        'nik_karyawan', 'lampiran-input', 'tujuan-table-body');
                    const tipePersonal = getElem('tipe_personal');
                    if (tipePersonal) tipePersonal.checked = true;
                    const tujuanDalamNegeri = getElem('tujuan_dalam_negeri');
                    if (tujuanDalamNegeri) tujuanDalamNegeri.checked = true;
                }
                if (selectedID) setDisplay(sharedSection, 'block');
                if (selectedID === '1') {
                    setDisplay(formIzinContainer, 'block');
                    izinTextareaPlaceholder.appendChild(sharedTextareaContainer);
                    izinDateTimePlaceholder.appendChild(datetimePickerRow);
                    izinTablePlaceholder.appendChild(tableTanggalContainer);
                    setDisplay(getElem('noted'), 'none');
                    jenisIzinSwitched();
                } else if (selectedID === '2') {
                    setDisplay(formTugasContainer, 'block');
                    jamKeluarLabel.textContent = "Waktu Berangkat";
                    jamMasukLabel.textContent = "Waktu Kepulangan";
                    tugasDateTimePlaceholder.appendChild(datetimePickerRow);
                    setDisplay(datetimePickerRow, 'flex');
                    tugasTablePlaceholder.appendChild(tableTanggalContainer);
                    setDisplay(tableTanggalContainer, 'block');
                    handleTipeTugasChange();
                    setDisplay(getElem('noted'), 'block');
                    setDisplay(lampiranGroup, 'none');
                    setDisplay(addAnggaranButtonContainer, 'block');

                    if (isInitialLoad && withAnggaranInput.value === '1') {
                        setDisplay(anggaranSectionContainer, 'block');
                        btnToggleAnggaran.innerHTML =
                            '<i class="fas fa-minus me-1"></i> Sembunyikan Dan Hapus Rincian Anggaran';
                        btnToggleAnggaran.classList.replace('btn-primary', 'btn-warning');
                        anggaranSectionContainer.querySelectorAll('input, select, button').forEach(el => el
                            .disabled = false);
                        renderAnggaranForEmployees();
                        setTimeout(() => {
                            bindAnggaranInputEvents();
                            recalcAllAnggaranTotals();
                        }, 0);
                    }
                }
                if (tanggalTableInstance) tanggalTableInstance.draw(false);
                ensureCurrentUserSelectedIfApplicable();
                updateSelectedEmployeesUI();
            }

            initializeDataTables();
            initTanggalTable();
            initDateTimePickers();
            initTugasComponents();
            initTujuanDataTable();
            setupErrorClearingListeners();

            loadExistingEmployees();
            loadExistingDates();

            kategoriSelect.addEventListener('change', masterSwitch);
            jenisIzinSelect.addEventListener('change', jenisIzinSwitched);

            masterSwitch();

            isInitialLoad = false;
            ensureCurrentUserSelectedIfApplicable();

            setTimeout(() => {
                if (tujuanDataTable && $('#tujuan-table tbody tr').length > 0) {
                    initTujuanRowPickers();
                }
            }, 200);

            // Prepopulate form data from old input
            prepopulateFormData();

            // Display validation errors
            setTimeout(() => {
                displayValidationErrors();

                // Debug information
                if (Object.keys(validationErrors).length > 0) {
                    console.log('Validation errors found:', validationErrors);
                }
                if (Object.keys(oldInput).length > 0) {
                    console.log('Old input data:', oldInput);
                }
            }, 2000);

            function recalcAnggaranForEmployee(nik, daysMap) {
                const nikKey = safeId(nik);
                const breakdown = (daysMap && daysMap[nik]) ? daysMap[nik] : {
                    idr: 0,
                    usd: 0
                };

                // BARU: Dapatkan profil karyawan untuk mengambil jabatan_id
                const employeeProfile = allProfiles.find(p => p.nik === nik);
                if (!employeeProfile || !employeeProfile.jabatan_id) {
                    console.warn(`Profil atau jabatan_id tidak ditemukan untuk NIK: ${nik}. Perhitungan dilewati.`);
                    return;
                }
                const employeeJabatanId = employeeProfile.jabatan_id;

                // Hitung ulang hanya untuk Uang Saku dan Uang Makan
                (defaultBiaya || []).forEach(biaya => {
                    const namaBiaya = (biaya.nama_biaya || '').toLowerCase();

                    if (namaBiaya === 'uang saku' || namaBiaya === 'uang makan') {
                        const biayaId = biaya.id;
                        const baseId = `bp_${nikKey}_default_${biayaId}`;

                        // BARU: Cari pengali berdasarkan jabatan_id dan biaya_default_id
                        const jabatanPengaliData = jabatanBiayaDefault.find(jbd =>
                            jbd.jabatan_id == employeeJabatanId && jbd.biaya_default_id == biayaId
                        );

                        // Default pengali adalah 1 jika tidak ditemukan (agar tidak merusak perhitungan lama)
                        const pengali = jabatanPengaliData ? parseFloat(jabatanPengaliData.pengali) : 1.0;

                        let finalValueIdr, finalValueUsd;

                        // BARU: Gunakan pengali dalam rumus perhitungan
                        const rateIdr = parseFloat(biaya.jumlah_idr ?? '0') || 0;
                        const rateUsd = parseFloat(biaya.jumlah_usd ?? '0') || 0;

                        const totalIdr = rateIdr * pengali * (breakdown.idr || 0);
                        const totalUsd = rateUsd * pengali * (breakdown.usd || 0);

                        finalValueIdr = isNaN(totalIdr) || totalIdr === 0 ? 0 : String(totalIdr);
                        finalValueUsd = isNaN(totalUsd) || totalUsd === 0 ? 0 : String(totalUsd);

                        // Update nilai pada input yang terlihat (display)
                        const inputIdr = document.getElementById(`${baseId}_computed_input_idr`);
                        const inputUsd = document.getElementById(`${baseId}_computed_input_usd`);

                        // Jika finalValue adalah 0 maka dia termasuk on-bill
                        if (inputIdr) {
                            inputIdr.value = finalValueIdr ? finalValueIdr : 0;
                            // Comment karena on bill is not allowed to change
                            // inputIdr.readOnly = !(finalValueIdr ==
                            //     0);
                        }
                        if (inputUsd) {
                            inputUsd.value = finalValueUsd ? finalValueUsd : 0;
                            // Comment karena on bill is not allowed to change
                            // inputUsd.readOnly = !(finalValueUsd ==
                            //     0);
                        }

                        // Note if on-bill
                        const noteIdr = document.getElementById(`${baseId}_note_idr`);
                        const noteUsd = document.getElementById(`${baseId}_note_usd`);

                        if (noteIdr) {
                            noteIdr.style.display = (finalValueIdr == 0) ? "block" : "none";
                        }
                        if (noteUsd) {
                            noteUsd.style.display = (finalValueUsd == 0) ? "block" : "none";
                        }

                        // Hitung apakah IDR/USD perlu ditampilkan berdasarkan jumlah hari
                        const shouldShowIdr = (breakdown.idr || 0) > 0;
                        const shouldShowUsd = (breakdown.usd || 0) > 0;

                        // Update nilai pada input tersembunyi (yang dikirim ke backend)
                        // Kode BARU (dengan pengecekan null)
                        const hidJumlahIdr = document.getElementById(`${baseId}_submitted_jumlah_idr`);
                        if (hidJumlahIdr) hidJumlahIdr.disabled = !shouldShowIdr;

                        const hidJumlahUsd = document.getElementById(`${baseId}_submitted_jumlah_usd`);
                        if (hidJumlahUsd) hidJumlahUsd.disabled = !shouldShowUsd;
                        if (hidJumlahIdr) hidJumlahIdr.value = finalValueIdr;
                        if (hidJumlahUsd) hidJumlahUsd.value = finalValueUsd;

                        // Logika untuk menampilkan/menyembunyikan field berdasarkan jumlah hari
                        const grpIdr = document.getElementById(`${baseId}_computed_group_idr`);
                        const grpUsd = document.getElementById(`${baseId}_computed_group_usd`);

                        if (grpIdr) grpIdr.style.display = shouldShowIdr ? '' : 'none';
                        if (grpUsd) grpUsd.style.display = shouldShowUsd ? '' : 'none';

                        // Nonaktifkan field tersembunyi jika grupnya tidak ditampilkan
                        // Kode BARU (dengan pengecekan null)
                        const elBiayaIdIdr = document.getElementById(`${baseId}_submitted_biaya_id_idr`);
                        if (elBiayaIdIdr) {
                            elBiayaIdIdr.disabled = !shouldShowIdr;
                        }

                        const elCurrencyIdr = document.getElementById(`${baseId}_submitted_currency_idr`);
                        if (elCurrencyIdr) {
                            elCurrencyIdr.disabled = !shouldShowIdr;
                        }

                        const elBiayaIdUsd = document.getElementById(`${baseId}_submitted_biaya_id_usd`);
                        if (elBiayaIdUsd) {
                            elBiayaIdUsd.disabled = !shouldShowUsd;
                        }

                        const elCurrencyUsd = document.getElementById(`${baseId}_submitted_currency_usd`);
                        if (elCurrencyUsd) {
                            elCurrencyUsd.disabled = !shouldShowUsd;
                        }
                    }
                });
            }

            function recalcAllAnggaranTotals() {
                if (!withAnggaranInput || withAnggaranInput.value !== '1') return;
                const daysMap = getEmployeeDaysByCurrency();
                selectedEmployees.forEach(emp => recalcAnggaranForEmployee(emp.nik, daysMap));
            }

            function bindAnggaranInputEvents() {
                selectedEmployees.forEach(emp => {
                    const nikKey = safeId(emp.nik);
                    const containerSelectors = [`#anggaran-emp-${nikKey}`, `#anggaran-pane-${nikKey}`];
                    containerSelectors.forEach(selector => {
                        const container = document.querySelector(selector);
                        if (!container) return;
                        container.querySelectorAll(
                            `input[id^="bp_${nikKey}_default_"][id$="_jumlah"], .dynamic-default-biaya-row input[type="text"], .dynamic-biaya-row input`
                        ).forEach(inp => {
                            if (!inp.dataset.bound) {
                                inp.addEventListener('input', () => {
                                    if (inp.type === 'number')
                                        recalcAllAnggaranTotals();
                                });
                                inp.dataset.bound = '1';
                            }
                        });
                    });
                });
            }

            let currentCurrencyTargetInput = null;
            $('#currenciesTable').DataTable({
                "pageLength": 5,
                "lengthMenu": [5, 10, 25],
                "language": {
                    "search": "Cari:"
                }
            });
            $(document).on('click', '.open-currency-modal', function() {
                currentCurrencyTargetInput = $(this).data('target-input');
            });
            window.selectCurrency = function(code) {
                if (currentCurrencyTargetInput) {
                    $('#' + currentCurrencyTargetInput + '_input').val(code);
                    $('#' + currentCurrencyTargetInput + '_display').val(code);
                }
                $('#currencyModal').modal('hide');
            };
            $('#searchModalProfiles').on('show.bs.modal', function() {
                // Disable select-all checkbox when in single selection mode
                const singleMode = isSingleSelectionMode();
                $('#profiles_select_all').prop('disabled', singleMode);
                try {
                    const selectedNikSet = new Set(selectedEmployees.map(e => e.nik));
                    if (listProfilesDataTable) {
                        listProfilesDataTable.$('.profile-select-check').each(function() {
                            const nik = this.getAttribute('data-nik');
                            this.checked = selectedNikSet.has(nik);
                            // If single mode and already have a selection, keep only the first match checked
                            if (singleMode && selectedNikSet.size > 0 && !selectedNikSet.has(nik)) {
                                this.checked = false;
                            }
                        });
                        const total = listProfilesDataTable.$('.profile-select-check').length,
                            checked = listProfilesDataTable.$('.profile-select-check:checked').length;
                        $('#profiles_select_all').prop('checked', total > 0 && checked === total);
                    }
                } catch (e) {
                    /* ignore */
                }
                if (listProfilesDataTable) listProfilesDataTable.draw();
            });

            function disableRemoveButtonForProtectedNik() {
                const kat = getElem('kategori_perizinan_id')?.value || '';
                const jenis = getElem('jenis_izin_id')?.value || '';
                if (!currentUserNIK || kat !== '1' || jenis !== '4') return;
                ['#izinSelectedEmployeesTable', '#tugasSelectedEmployeesTable'].forEach(sel => {
                    const $table = $(sel);
                    if ($table.length) $table.find('tbody tr').each(function() {
                        if ($(this).text().includes(String(currentUserNIK))) $(this).find(
                            '.btn-danger, [onclick*="removeEmployee"]').each(function() {
                            this.disabled = true;
                            this.style.pointerEvents = 'none';
                            this.title = 'Tidak dapat dihapus';
                            $(this).addClass('disabled');
                            $(this).removeClass('btn-danger').addClass('btn-secondary');
                        });
                    });
                });
            }

            function protectCurrentUserRemoval() {
                const originalRemoveEmployee = window.removeEmployee;
                window.removeEmployee = function(index) {
                    const kat = getElem('kategori_perizinan_id')?.value || '';
                    const jenis = getElem('jenis_izin_id')?.value || '';
                    if (kat === '1' && jenis === '4' && selectedEmployees[index] && String(selectedEmployees[index].nik) === String(
                            currentUserNIK)) return;
                    if (typeof originalRemoveEmployee === 'function') return originalRemoveEmployee.apply(this,
                        arguments);
                };
                const originalRemoveByNik = window.removeEmployeeByNik;
                window.removeEmployeeByNik = function(nik) {
                    const kat = getElem('kategori_perizinan_id')?.value || '';
                    const jenis = getElem('jenis_izin_id')?.value || '';
                    if (kat === '1' && jenis === '4' && String(nik) === String(currentUserNIK)) return;
                    if (typeof originalRemoveByNik === 'function') return originalRemoveByNik.apply(this,
                        arguments);
                };
                $(document).on('click', '.btn-danger, [onclick*="removeEmployee"]', function(e) {
                    const kat = getElem('kategori_perizinan_id')?.value || '';
                    const jenis = getElem('jenis_izin_id')?.value || '';
                    const $row = $(this).closest('tr');
                    if (kat === '1' && jenis === '4' && $row.length && String(currentUserNIK) && $row.text().includes(String(
                            currentUserNIK))) {
                        e.preventDefault();
                        e.stopImmediatePropagation();
                        return false;
                    }
                });
                ['#izinSelectedEmployeesTable', '#tugasSelectedEmployeesTable'].forEach(sel => {
                    if ($(sel).length) $(sel).on('draw.dt', disableRemoveButtonForProtectedNik);
                });
                disableRemoveButtonForProtectedNik();
            }

            protectCurrentUserRemoval();
        });
    </script>
@endpush