@extends('layouts.email')

{{-- Manual: Layout manual --}}
{{-- Section Content --}}
@section('content')

    @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 */
            .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;
            }

            /* SweetAlert2 custom styling */
            .swal-wide {
                width: 500px !important;
            }

            .swal2-html-container .form-check {
                padding-left: 0;
            }

            .swal2-html-container .form-check-input {
                margin-top: 0.15em;
            }

            .swal2-html-container .form-check-label {
                cursor: pointer;
                user-select: none;
            }

            /* Modal Tujuan Surat Styling */
            #tujuanSuratModal .modal-content {
                border: none;
                border-radius: 0.5rem;
                box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            }

            #tujuanSuratModal .modal-header {
                border-top-left-radius: 0.5rem;
                border-top-right-radius: 0.5rem;
                border-bottom: none;
                padding: 1rem 1.5rem;
            }

            #tujuanSuratModal .modal-body {
                padding: 1.5rem;
            }

            #tujuanSuratModal .form-check {
                padding: 0.75rem 1rem;
                margin-bottom: 0.5rem;
                border: 2px solid #dee2e6;
                border-radius: 0.375rem;
                transition: all 0.2s ease;
                cursor: pointer;
            }

            #tujuanSuratModal .form-check:hover {
                background-color: #f8f9fa;
                border-color: #0d6efd;
            }

            #tujuanSuratModal .form-check-input {
                width: 1.25rem;
                height: 1.25rem;
                margin-top: 0.125rem;
                cursor: pointer;
            }

            #tujuanSuratModal .form-check-input:checked {
                background-color: #0d6efd;
                border-color: #0d6efd;
            }

            #tujuanSuratModal .form-check-label {
                cursor: pointer;
                user-select: none;
                font-size: 0.95rem;
                margin-left: 0.5rem;
                flex: 1;
            }

            #tujuanSuratModal .form-check:has(.form-check-input:checked) {
                background-color: #e7f1ff;
                border-color: #0d6efd;
            }

            #tujuanSuratModal .alert {
                border-radius: 0.375rem;
            }

            #tujuanSuratModal .modal-footer {
                border-top: 1px solid #dee2e6;
                padding: 1rem 1.5rem;
            }
        </style>
    @endpush

    <div class="container mt-4 mb-4">
        <div class="text-center mb-4">
            <img src="{{ asset('img/logomsjnew.jpg') }}" alt="Logo MSJ" width="150" class="img-fluid">
        </div>
        <div class="card shadow mb-4">
            <div class="card-header text-center" style="background-color: #028284; color: white;">
                <h3 class="mb-0" style="color: white;">Form Pengajuan Izin / Tugas</h3>
            </div>
            <div class="card-body">
                        {{-- Form pengajuan --}}
                        <form role="form" method="POST" action="{{ route('perizinan.form.email.submit') }}"
                            enctype="multipart/form-data" novalidate>
                            @csrf

                            {{-- Hidden inputs untuk token dan NIK pengguna --}}
                            <input type="hidden" name="token" value="{{ $token }}">
                            <input type="hidden" name="force_user_nik" value="{{ $tokenData->nik }}">

                            {{-- ====================================================================== --}}
                            {{-- ===================== SHARED MOVABLE ELEMENTS ======================== --}}
                            {{-- ====================================================================== --}}
                            {{-- These blocks are moved by JS into the Izin or Tugas form as needed --}}

                            {{-- 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') }}</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') }}"
                                            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') }}"
                                            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') == $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') == $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', '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') == '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 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>
                                    </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>

                                {{-- Hidden input untuk menandai kategori tugas & isKaryawanLain --}}
                                <input type="hidden" name="isKaryawanLain" id="isKaryawanLain" value="false">

                                {{-- Jenis Penugasan dan Pilihan Karyawan Bawahan --}}
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Jenis Penugasan <span
                                                class="text-danger">*</span></label>
                                        <div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="jenis_penugasan"
                                                    id="jenis_penugasan_pribadi" value="pribadi"
                                                    {{ old('jenis_penugasan', 'pribadi') == 'pribadi' ? 'checked' : '' }}>
                                                <label class="form-check-label"
                                                    for="jenis_penugasan_pribadi">Pribadi</label>
                                            </div>
                                            @if ($isAtasan)
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="jenis_penugasan"
                                                        id="jenis_penugasan_bawahan" value="bawahan"
                                                        {{ old('jenis_penugasan') == 'bawahan' ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="jenis_penugasan_bawahan">Tugaskan
                                                        Bawahan</label>
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                    {{-- Karyawan yang Ditugaskan (Single Select with Modal) - Hanya untuk Tugaskan Bawahan --}}
                                    <div class="col-md-6 mb-3" id="karyawan-bawahan-field" style="display: none;">
                                        <label for="nik_karyawan_display_single" class="form-label">Karyawan yang
                                            Ditugaskan (Hanya bawahan)
                                            <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="text" id="nik_karyawan_display_single" class="form-control"
                                                placeholder="Pilih Karyawan dari List" readonly style="cursor: pointer;"
                                                data-bs-toggle="modal" data-bs-target="#searchModalSingleProfile">
                                            <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                                data-bs-target="#searchModalSingleProfile" style="cursor: pointer;"><i
                                                    class="fas fa-search"></i></span>
                                        </div>
                                        <input type="hidden" name="karyawan_ditugaskan_nik"
                                            id="nik_karyawan_ditugaskan_hidden"
                                            value="{{ old('karyawan_ditugaskan_nik') }}">
                                        @error('karyawan_ditugaskan_nik')
                                            <span class="text-danger d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Tipe Tugas dan Tujuan (Selalu tampil) --}}
                                <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', 'personal') == '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') == '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', 'dalam_negeri') == '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') == 'luar_negeri' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="tujuan_luar_negeri">Luar
                                                    Negeri</label>
                                            </div>
                                            {{-- Combine --}}
                                            <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') == '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
                                            (termasuk anda jika mengikuti/ditugaskan) <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', 0) }}">
                                    </div>
                                </div>

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

                                {{-- NEW: DYNAMIC TABLE FOR TUJUAN (moved below Daftar Tanggal) --}}
                                <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">
                                                    <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">
                                                    {{-- Dynamic rows will be added here by JavaScript --}}
                                                </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>

                                {{-- Input penanda untuk backend --}}
                                <input type="hidden" name="with_anggaran" id="with_anggaran_input" value="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-primary" id="btn-toggle-anggaran">
                                            <i class="fas fa-plus me-1"></i> Tambahkan Rincian Anggaran (Untuk Perjalanan
                                            Dinas Luar Kota)
                                        </button> -->
                                    </div>
                                </div>

                                <div id="anggaran-section-container" style="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 -->
                                    <div id="anggaran-per-employee-container" style="display: none;"></div>
                                </div>
                            </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') }}">
                                @error('nik_karyawan')
                                    <span class="text-danger d-block">{{ $message }}</span>
                                @enderror

                                {{-- Lampiran (SHARED) --}}
                                <div class="row mt-3">
                                    <div class="col-md-6 mb-3" id="lampiran_group">
                                        <div class="form-group">
                                            <label for="lampiran-input" class="form-label">Lampiran (dapat dikosongkan,
                                                dapat lebih dari 1
                                                file)</label>
                                            <input type="file"
                                                class="form-control @error('lampiran.*') is-invalid @enderror"
                                                name="lampiran[]" accept=".jpg,.jpeg,.png" id="lampiran-input" multiple>
                                            @error('lampiran.*')
                                                <span class="text-danger d-block">{{ $message }}</span>
                                            @enderror
                                            <small class="form-text text-muted">Format: .jpg, .jpeg, .png. Maks per
                                                file:
                                                1.5 MB</small>
                                            {{-- Validation error --}}
                                            @if ($errors->has('lampiran'))
                                                <span class="text-danger d-block">
                                                    {{ $errors->first('lampiran') }}
                                                </span>
                                            @endif
                                        </div>
                                        <div class="mt-3">
                                            <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') }}">
                                @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>

                            <!-- 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">

                                                        </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>

                            {{-- Tombol Kembali dan Simpan --}}
                            <div class="d-flex justify-content-end mt-4">


                                    <button type="submit" id="btn-submit" class="btn btn-primary"><i class="fas fa-paper-plane me-2"></i> Kirim Pengajuan Izin / Tugas</button>

                            </div>
                        </form>
                    </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>
                            {{-- Data currencies dari controller Anda akan dilooping di sini --}}
                            @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>

    <!-- Modal untuk Pemilihan Karyawan Bawahan (Single Select) -->
    <div class="modal fade" id="searchModalSingleProfile" tabindex="-1" role="dialog"
        aria-labelledby="searchModalSingleLabel" 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="searchModalSingleLabel">Pilih Karyawan Bawahan</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_single">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th>NIK</th>
                                <th>Nama</th>
                                <th>Departemen</th>
                                <th style="width: 100px;" class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($bawahanProfiles ?? [] as $profile)
                                <tr>
                                    <td>{{ $profile->nik }}</td>
                                    <td>{{ e($profile->nama) }}</td>
                                    <td>{{ e($profile->departemen ?? 'N/A') }}</td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-sm btn-primary select-single-profile-btn"
                                            data-nik="{{ $profile->nik }}" data-nama="{{ e($profile->nama) }}">
                                            Pilih
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal untuk Pemilihan Tujuan Surat (Atasan) -->
    <div class="modal fade" id="tujuanSuratModal" tabindex="-1" role="dialog" aria-labelledby="tujuanSuratModalLabel"
        aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title text-white" id="tujuanSuratModalLabel">
                        <i class="fas fa-envelope me-2"></i>Tujuan Surat Izin
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-3 text-center fw-bold" id="tujuanSuratMessage">Pilih Atasan untuk Menyetujui Surat
                    </p>
                    <div id="tujuanSuratOptions" class="px-3">
                        <!-- Radio buttons will be dynamically inserted here -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>Batal
                    </button>
                    <button type="button" class="btn btn-primary" id="btnConfirmTujuanSurat">
                        <i class="fas fa-check me-1"></i>Lanjutkan
                    </button>
                </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>
        function initPerizinanForm() {
            let selectedTujuanFilter = 'dalam_negeri';
            document.querySelectorAll('input[name="tujuan_tugas"]').forEach(radio => {
                radio.addEventListener('change', function () {
                    console.log("Value terpilih:", this.value);
                    selectedTujuanFilter = this.value;

                    applyCountryFilter();
                });
            });
            console.log("selectedTujuanFilter diset menjadi:", selectedTujuanFilter);


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

            // Backend-provided current user NIK and profiles list
            const currentUserNIK = @json($currentUserNIK ?? null);
            const currentUserDepartemenId = @json($currentUserDepartemenId ?? null);
            console.log('Current User',currentUserNIK);
            const allProfiles = @json($profiles);
            // console.log('All profiles',allProfiles);
            const bawahanProfiles = @json($bawahanProfiles ?? []);
            // Currencies list for negara->currency mapping
            const currenciesList = @json($currencies ?? []);

            // 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;
            };

            // --- 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;

                // Check if the appropriate form container is visible based on kategori
                let formContainerReady = true;
                if (oldInput.kategori_perizinan_id === '1') {
                    // For Izin category, check if form-izin-container is visible
                    const formIzinContainer = document.getElementById('form-izin-container');
                    formContainerReady = formIzinContainer && formIzinContainer.style.display !== 'none';

                    // Also check if jenis izin fields are visible when jenis_izin_id exists
                    if (oldInput.jenis_izin_id && formContainerReady) {
                        const sharedTextarea = document.getElementById('shared-textarea-container');
                        const datetimeRow = document.getElementById('datetime-picker-row');
                        formContainerReady = formContainerReady &&
                            sharedTextarea && sharedTextarea.style.display !== 'none' &&
                            datetimeRow && datetimeRow.style.display !== 'none';
                    }
                } else if (oldInput.kategori_perizinan_id === '2') {
                    // For Tugas category, check if form-tugas-container is visible
                    const formTugasContainer = document.getElementById('form-tugas-container');
                    formContainerReady = formTugasContainer && formTugasContainer.style.display !== 'none';
                }

                // 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 && formContainerReady && anggaranReady;
                }

                return basicReady && formContainerReady;
            }

            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 (except kategori_perizinan_id and jenis_izin_id which are handled before)
                for (const [fieldName, value] of Object.entries(oldInput)) {
                    // Skip kategori_perizinan_id and jenis_izin_id as they're handled in initialization
                    if (fieldName === 'kategori_perizinan_id' || fieldName === 'jenis_izin_id') {
                        continue;
                    }

                    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');
                        }

                        if (btnToggleAnggaran) {
                            btnToggleAnggaran.innerHTML =
                                '<i class="fas fa-minus me-1"></i> Sembunyikan Dan Hapus Rincian Anggaran';
                        }
                    }, 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);
                }

                // Prepopulate biaya_pengeluaran data
                if (oldInput.biaya_pengeluaran && oldInput.with_anggaran === '1') {
                    setTimeout(() => {
                        // Ensure anggaran section is enabled and rendered
                        const btnToggleAnggaran = getElem('btn-toggle-anggaran');
                        if (btnToggleAnggaran && getElem('anggaran-section-container').style.display ===
                            'none') {
                            btnToggleAnggaran.click(); // Trigger the anggaran section
                        }

                        setTimeout(() => {
                            prepopulateAnggaranData(oldInput.biaya_pengeluaran);
                        }, 300);
                    }, 800);
                }
            }

            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');
            // Clipboard for anggaran copy/paste across employee cards
            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');

            // --- PERIODE IZIN & TUGAS ---
            let periodeIzinTugas = @json($periodeIzinTugas);
            console.log('Initial periodeIzinTugas from backend:', periodeIzinTugas);
            if (!Array.isArray(periodeIzinTugas)) {
                periodeIzinTugas = [periodeIzinTugas];
            }
            const enabledDates = periodeIzinTugas.map(p => ({
                from: p.mulai,
                to: p.berakhir
            }));
            console.log('enabledDates:', enabledDates);


            // Data atasan dari backend
            const atasanList = @json($atasan ?? []);

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

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

                const kategoriValue = kategoriSelect ? kategoriSelect.value : '';
                const jenisPenugasanValue = document.querySelector('input[name="jenis_penugasan"]:checked')
                    ?.value || '';

                // Jika kategori perizinan adalah "Izin" (ID = 1), tampilkan modal pemilihan tujuan surat
                // ATAU jika kategori perizinan adalah "Tugas" (ID = 2) DAN jenis_penugasan adalah "pribadi"
                if (kategoriValue === '1' || (kategoriValue === '2' && jenisPenugasanValue === 'pribadi')) {
                    showTujuanSuratModal();
                } else {
                    // Untuk kategori selain Izin atau Tugas Pribadi, langsung submit
                    submitForm();
                }
            });

            // Function to show Tujuan Surat Modal
            function showTujuanSuratModal() {
                const modalElement = document.getElementById('tujuanSuratModal');
                const optionsContainer = document.getElementById('tujuanSuratOptions');
                const messageElement = document.getElementById('tujuanSuratMessage');
                const modalTitle = document.getElementById('tujuanSuratModalLabel');

                const kategoriValue = kategoriSelect ? kategoriSelect.value : '';
                const isIzin = kategoriValue === '1';
                const isTugas = kategoriValue === '2';

                // Update modal title based on category
                if (isIzin) {
                    modalTitle.innerHTML = '<i class="fas fa-envelope me-2"></i>Tujuan Surat Izin';
                } else if (isTugas) {
                    modalTitle.innerHTML = '<i class="fas fa-envelope me-2"></i>Tujuan Surat Tugas';
                }

                // Jika tidak ada atasan, tampilkan pesan ke personalia
                if (!atasanList || atasanList.length === 0) {
                    const suratType = isIzin ? 'izin' : 'tugas';
                    messageElement.innerHTML = `
                        <div class="alert alert-info" role="alert">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>Informasi:</strong> Anda tidak memiliki atasan terdaftar di sistem.<br>
                            Surat ${suratType} akan langsung dikirim ke <strong>Personalia</strong>.
                        </div>
                    `;
                    optionsContainer.innerHTML = '';
                } else {
                    // Build radio options dari data atasan
                    let atasanOptionsHtml = '';
                    atasanList.forEach((atasan, index) => {
                        const isChecked = index === 0 ? 'checked' : '';
                        const atasanLabel = index === 0 ? `${atasan.nama} (Atasan Langsung)` : atasan.nama;
                        atasanOptionsHtml += `
                            <div class="form-check d-flex align-items-center">
                                <input class="form-check-input" type="radio" name="tujuan_surat_radio"
                                       id="tujuan_atasan_${atasan.super_user_id}"
                                       value="${atasan.super_user_id}" ${isChecked}>
                                <label class="form-check-label" for="tujuan_atasan_${atasan.super_user_id}">
                                    ${atasanLabel}
                                </label>
                            </div>
                        `;
                    });

                    optionsContainer.innerHTML = atasanOptionsHtml;
                }

                // Show modal
                const modal = new bootstrap.Modal(modalElement);
                modal.show();
            }

            // Handle confirm button click in modal
            document.getElementById('btnConfirmTujuanSurat').addEventListener('click', function() {
                // Jika tidak ada atasan (ke personalia)
                if (!atasanList || atasanList.length === 0) {
                    const form = btn.closest("form");
                    let tujuanSuratInput = form.querySelector('input[name="tujuan_surat_user_id"]');
                    if (!tujuanSuratInput) {
                        tujuanSuratInput = document.createElement('input');
                        tujuanSuratInput.type = 'hidden';
                        tujuanSuratInput.name = 'tujuan_surat_user_id';
                        form.appendChild(tujuanSuratInput);
                    }
                    tujuanSuratInput.value = ''; // Empty untuk null

                    // Close modal dan submit
                    bootstrap.Modal.getInstance(document.getElementById('tujuanSuratModal')).hide();
                    submitForm();
                    return;
                }

                // Validasi pilihan atasan
                const selectedRadio = document.querySelector('input[name="tujuan_surat_radio"]:checked');
                if (!selectedRadio) {
                    // Show error message
                    let errorDiv = document.getElementById('tujuan-surat-error');
                    if (!errorDiv) {
                        errorDiv = document.createElement('div');
                        errorDiv.id = 'tujuan-surat-error';
                        errorDiv.className = 'alert alert-danger mt-2';
                        errorDiv.innerHTML =
                            '<i class="fas fa-exclamation-triangle me-2"></i>Silakan pilih tujuan surat.';
                        document.getElementById('tujuanSuratOptions').appendChild(errorDiv);
                    }
                    return;
                }

                // Remove error if exists
                const errorDiv = document.getElementById('tujuan-surat-error');
                if (errorDiv) errorDiv.remove();

                // Get selected atasan user_id
                const selectedAtasanUserId = selectedRadio.value;

                // Add hidden input
                const form = btn.closest("form");
                let tujuanSuratInput = form.querySelector('input[name="tujuan_surat_user_id"]');
                if (!tujuanSuratInput) {
                    tujuanSuratInput = document.createElement('input');
                    tujuanSuratInput.type = 'hidden';
                    tujuanSuratInput.name = 'tujuan_surat_user_id';
                    form.appendChild(tujuanSuratInput);
                }
                tujuanSuratInput.value = selectedAtasanUserId;

                // Close modal dan submit
                bootstrap.Modal.getInstance(document.getElementById('tujuanSuratModal')).hide();
                submitForm();
            });

            // Function to submit form
            function submitForm() {
                const form = btn.closest("form");

                // 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>Mengirim...</span>
                `;

                // Submit form
                form.submit();
            }

            function clearFields(...elementIds) {
                elementIds.forEach(id => {
                    const element = getElem(id);
                    if (!element) return;
                    // Khusus untuk membersihkan DataTables
                    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 defaultBiaya = @json($defaultBiaya ?? []);
            const defaultBiayaById = Array.isArray(defaultBiaya) ?
                Object.fromEntries(defaultBiaya.map(b => [String(b.id), b])) : {};
            const biayaLainCounters = {}; // per-employee dynamic row counters
            const defaultIndexCounters = {}; // per-employee index for submitted default items (for totals)
            // Map negara name (lowercased) -> currency code
            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);
                }
                const forceNik = getElem('force_user_nik') ? getElem('force_user_nik').value : '';
                return forceNik ? String(forceNik) : '';
            }

            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 row = listProfilesDataTable.row(dataIndex).node();
                        const deptId = $(row).find('.profile-select-check').data('departemen-id');
                        return String(deptId) === String(currentUserDepartemenId);
                    });
                }

                // Initialize DataTable for single select (karyawan bawahan)
                if (!window.listProfilesSingleDT && $('#list_profiles_single').length) {
                    window.listProfilesSingleDT = $('#list_profiles_single').DataTable({
                        lengthMenu: [10, 25, 50, 100]
                    });
                }

                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);
            }

            // Snapshot current Tujuan UI (per row) into DataTables row data so redraw keeps values
            function snapshotTujuanUIIntoRowData() {
                const dt = window.tujuanDataTable;
                if (!dt) return;
                if (!$.fn.DataTable || !$.fn.DataTable.isDataTable || !$.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() || {};
                        const ket = ($row.find('textarea.tujuan-keterangan').val() || '').trim();
                        const startHidden = $row.find('input.tujuan-start-hidden').val() || '';
                        const endHidden = $row.find('input.tujuan-end-hidden').val() || '';
                        const jumlahHidden = $row.find('input.tujuan-jumlah-hari-hidden').val() || '';
                        d.keterangan = ket;
                        d.tanggal_mulai = startHidden; // format: YYYY-MM-DD
                        d.tanggal_berakhir = endHidden; // format: YYYY-MM-DD
                        d.jumlah_hari = (jumlahHidden !== '' ? Number(jumlahHidden) : (d.jumlah_hari || 1));
                        this.data(d); // do not draw now; caller may draw once after batch changes
                    } catch (e) {
                        // ignore rows not owned by DataTables
                    }
                });
            }

            // --- Multi-select (Profiles Modal) ---
            // Header select-all checkbox toggles all rows (across all pages)
            $(document).on('change', '#profiles_select_all', function() {
                const checked = this.checked;
                if (listProfilesDataTable) {
                    const currentPage = listProfilesDataTable.page();
                    listProfilesDataTable.$('.profile-select-check').prop('checked', checked);
                    // Keep the current page
                    listProfilesDataTable.page(currentPage).draw('page');
                } else {
                    $('#list_profiles tbody .profile-select-check').prop('checked', checked);
                }
            });
            // Keep header checkbox in sync with body (consider all pages)
            $(document).on('change', '#list_profiles tbody .profile-select-check', function() {
                let total = 0;
                let checked = 0;
                if (listProfilesDataTable) {
                    total = listProfilesDataTable.$('.profile-select-check').length;
                    checked = listProfilesDataTable.$('.profile-select-check:checked').length;
                } else {
                    total = $('#list_profiles tbody .profile-select-check').length;
                    checked = $('#list_profiles tbody .profile-select-check:checked').length;
                }
                $('#profiles_select_all').prop('checked', total > 0 && checked === total);
            });
            // Batch add/remove selected profiles (modal apply)
            $(document).on('click', '#addSelectedProfilesBtn', function() {
                // Preserve current Tujuan row values before modifying employees
                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'
                }));

                // Compute delta vs existing
                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));
                let toRemove = Array.from(prevNikSet).filter(nik => !checkedNikSet.has(nik));

                // Prevent removal of protected user (Acara Khusus current user)
                const kat = kategoriSelect ? kategoriSelect.value : '';
                const jenis = jenisIzinSelect ? jenisIzinSelect.value : '';
                if (kat === '1' && jenis === '4' && currentUserNIK) {
                    toRemove = toRemove.filter(nik => String(nik) !== String(currentUserNIK));
                }

                // Apply removals first (propagate to tables/tujuan/anggaran)
                toRemove.forEach(nik => {
                    if (typeof window.removeEmployeeByNik === 'function') {
                        window.removeEmployeeByNik(nik);
                    }
                });

                // Apply additions
                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);
                    }
                }

                // Reset selections (across all pages) and close
                $('#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');
            });
            // Legacy programmatic add (still used for auto-select current user)
            window.selectProfile = function(nik, nama, departemen) {
                if (selectedEmployees.some(e => e.nik === nik)) {
                    alert("Karyawan sudah dipilih!");
                    return;
                }
                selectedEmployees.push({
                    nik,
                    nama,
                    departemen
                });
                updateSelectedEmployeesUI();
                $('#searchModalProfiles').modal('hide');

                // Auto-append this new employee into each Tujuan row (do not replace existing ones)
                if (tujuanDataTable) {
                    // Preserve current values before changing row data
                    snapshotTujuanUIIntoRowData();
                    tujuanDataTable.rows().every(function() {
                        const d = this.data();
                        if (d && Array.isArray(d.karyawan)) {
                            const exists = d.karyawan.some(emp => emp.nik === nik);
                            if (!exists) {
                                d.karyawan.push({
                                    nik,
                                    nama
                                });
                                this.data(d); // stage update
                            }
                        }
                    });
                    tujuanDataTable.draw(false);
                }

                // Render anggaran section per-employee if visible
                if (withAnggaranInput && withAnggaranInput.value === '1') {
                    renderAnggaranForEmployees();
                    // Ensure inputs bound and totals up-to-date
                    setTimeout(() => {
                        bindAnggaranInputEvents();
                        recalcAllAnggaranTotals();
                    }, 0);
                }
            };
            window.removeEmployee = function(index) {
                // Block removal of protected user (Acara Khusus current user)
                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;
                }
                const removed = selectedEmployees.splice(index, 1)[0];
                updateSelectedEmployeesUI();
                // Propagate removal to each Tujuan row
                if (tujuanDataTable && removed) {
                    // Preserve current row UI values before modifying data
                    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);
                }

                // Remove anggaran section for this employee if visible
                if (removed && withAnggaranInput && withAnggaranInput.value === '1') {
                    const section = document.getElementById(`anggaran-emp-${safeId(removed.nik)}`);
                    if (section && section.parentNode) section.parentNode.removeChild(section);
                    // Update hint visibility
                    updateAnggaranHintVisibility();
                    // Rebind and recalc remaining
                    setTimeout(() => {
                        bindAnggaranInputEvents();
                        recalcAllAnggaranTotals();
                    }, 0);
                }
            };

            // Helper: remove employee by NIK (used when applying modal changes)
            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');

                // Re-apply disabled button for protected NIK after DataTable redraw
                setTimeout(() => disableRemoveButtonForProtectedNik(), 0);
            }

            function updateTujuanTableWithEmployees() {
                if (!tujuanDataTable) return;
                snapshotTujuanUIIntoRowData();

                // Update all existing rows with current employee list
                tujuanDataTable.rows().every(function() {
                    const rowData = this.data();
                    // Update karyawan array to match selectedEmployees
                    rowData.karyawan = selectedEmployees.map(e => ({
                        nik: e.nik,
                        nama: e.nama
                    }));
                    this.data(rowData);
                });

                tujuanDataTable.draw(false);
            }

            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 old nik_karyawan data:", e);
                    }
                }
                updateSelectedEmployeesUI();
            }

            // Ensure current user is pre-selected where applicable
            function ensureCurrentUserSelectedIfApplicable() {
                if (!currentUserNIK) return;
                const kat = kategoriSelect ? kategoriSelect.value : '';
                const jenis = jenisIzinSelect ? jenisIzinSelect.value : '';

                // For Kategori 1 (Izin) with Jenis Izin 4, always auto-select current user
                if (kat === '1' && jenis === '4') {
                    const already = selectedEmployees.some(e => e.nik === currentUserNIK);
                    if (!already) {
                        const me = Array.isArray(allProfiles) ? allProfiles.find(p => p.nik === currentUserNIK) : null;
                        if (me) {
                            window.selectProfile(me.nik, me.nama, me.departemen || 'N/A');
                        }
                    }
                    return;
                }

                // For Kategori 2 (Tugas), only auto-select current user if jenis_penugasan is "pribadi"
                if (kat === '2') {
                    const jenisPenugasan = document.querySelector('input[name="jenis_penugasan"]:checked')?.value || 'pribadi';

                    // Only auto-select for pribadi, not for tugaskan bawahan
                    if (jenisPenugasan === 'pribadi') {
                        const already = selectedEmployees.some(e => e.nik === currentUserNIK);
                        console.log('Auto-select current user for Tugas Pribadi - already selected?', already);
                        if (!already) {
                            const me = Array.isArray(allProfiles) ? allProfiles.find(p => p.nik === currentUserNIK) : null;
                            console.log('Current user profile for auto-selection:', me);
                            if (me) {
                                window.selectProfile(me.nik, me.nama, me.departemen || 'N/A');
                            }
                        }
                    }
                    // For tugaskan bawahan, do nothing - bawahan will be added when selected from modal
                }
            }

            // --- LAMPIRAN LOGIC ---
            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) => {
                            const isDisabled = getElem('kategori_perizinan_id').value === '1';
                            const btnClass = isDisabled ? 'btn-secondary' : 'btn-danger';
                            const disabled = isDisabled ? 'disabled' : '';
                            return `<button type="button" class="btn ${btnClass} btn-sm" onclick="window.removeTanggal('${row.original}')" ${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 old 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
                });
                // Expose for any legacy references
                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);

                // Update Tujuan row pickers to respect new global constraints
                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);

                            // If selection is now out of bounds, clear or adjust
                            const s = fpStart.selectedDates[0];
                            const e = fpEnd.selectedDates[0];
                            // Auto-fill empty selections to the global range
                            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);

                            // Recalculate days
                            const jumlahEl = $row.find('input.tujuan-jumlah-hari')[0];
                            const startHidden = $row.find('input.tujuan-start-hidden')[0];
                            const endHidden = $row.find('input.tujuan-end-hidden')[0];
                            const jumlahHidden = $row.find('input.tujuan-jumlah-hari-hidden')[0];
                            recalcTujuanRowDays(fpStart, fpEnd, jumlahEl, startHidden, endHidden,
                                jumlahHidden);
                        }
                    });
                    // If times are now set and some rows aren't initialized yet, initialize them
                    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');
                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) {
                    // Update shared textarea label and append required star
                    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);

                // Auto-select current user when Izin jenis 4 (has pilih karyawan)
                if (showFields && jenisIzinId === '4') {
                    ensureCurrentUserSelectedIfApplicable();
                }
            }

            // --- FORMULIR TUGAS LOGIC ---
            function initTugasComponents() {
                // per-employee biaya-lain handled within each employee card
                document.querySelectorAll('input[name="tipe_tugas"]').forEach(radio => radio.addEventListener(
                    'change', handleTipeTugasChange));
                if (addTujuanRowBtn) addTujuanRowBtn.addEventListener('click', addTujuanRow);

                // Tambahkan event listener untuk hapus baris via DataTables (delegated to table)
                $('#tujuan-table').on('click', '.remove-tujuan-btn', function() {
                    tujuanDataTable.row($(this).closest('tr')).remove().draw();
                    // Update anggaran fields to reflect currency set changes
                    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 {
                        const dates = JSON.parse(tanggalArrayInput.value);
                        totalHari = Array.isArray(dates) ? dates.length : 0;
                    } catch (e) {
                        totalHari = 0;
                    }
                }
                getElem('total_hari').value = totalHari;
                // Recalculate allowance totals whenever total_hari changes
                recalcAllAnggaranTotals();
            }

            // --- JENIS PENUGASAN TOGGLE (Pribadi vs Tugaskan Bawahan) ---
            function handleJenisPenugasanChange() {
                const jenisPenugasan = document.querySelector('input[name="jenis_penugasan"]:checked')?.value ||
                    'pribadi';
                const karyawanBawahanField = getElem('karyawan-bawahan-field');
                const isKaryawanLainInput = getElem('isKaryawanLain');

                if (jenisPenugasan === 'pribadi') {
                    // Hide field karyawan bawahan
                    setDisplay(karyawanBawahanField, 'none');
                    if (isKaryawanLainInput) isKaryawanLainInput.value = 'false';

                    // Clear bawahan selections
                    const nikBawahanDisplay = getElem('nik_karyawan_display_single');
                    const nikBawahanHidden = getElem('nik_karyawan_ditugaskan_hidden');
                    if (nikBawahanDisplay) nikBawahanDisplay.value = '';
                    if (nikBawahanHidden) nikBawahanHidden.value = '';

                    // Clear selected employees and auto-select current user for pribadi
                    clearSelectedEmployees();
                    ensureCurrentUserSelectedIfApplicable();
                } else if (jenisPenugasan === 'bawahan') {
                    // Show field karyawan bawahan
                    setDisplay(karyawanBawahanField, 'block');
                    if (isKaryawanLainInput) isKaryawanLainInput.value = 'true';

                    // Show informational SweetAlert when "Tugaskan Bawahan" is selected
                    Swal.fire({
                        icon: 'info',
                        title: '<i class="fas fa-info-circle me-2"></i>Informasi Penugasan Bawahan',
                        html: `
                            <div class="text-start">
                                <div class="mb-3">
                                    <h6 class="fw-bold"><i class="fas fa-user-check me-2 text-primary"></i>Pemilihan Karyawan</h6>
                                    <p class="mb-0 ps-4">Anda harus memilih karyawan yang ditugaskan sebagai karyawan yang menanggung surat tugas yang dibuat.</p>
                                </div>
                                <div class="mb-3">
                                    <h6 class="fw-bold"><i class="fas fa-user-tie me-2 text-success"></i>Status Anda</h6>
                                    <p class="mb-0 ps-4">Anda otomatis akan menjadi atasan yang menyetujui permohonan.</p>
                                </div>
                                <div class="mb-0">
                                    <h6 class="fw-bold"><i class="fas fa-arrow-right me-2 text-warning"></i>Alur Persetujuan</h6>
                                    <p class="mb-0 ps-4">Permohonan akan langsung masuk ke sisi personalia (anda tidak perlu menyetujui lagi).</p>
                                </div>
                            </div>
                        `,
                        confirmButtonText: '<i class="fas fa-check me-2"></i>Saya Mengerti',
                        confirmButtonColor: '#3085d6',
                        width: '600px',
                        customClass: {
                            popup: 'swal2-popup-custom',
                            confirmButton: 'btn btn-primary'
                        }
                    });

                    // Clear selected employees for tugaskan bawahan
                    // Bawahan will be auto-added when selected from modal
                    clearSelectedEmployees();
                }

                // Update protection for remove buttons
                protectCurrentUserRemoval();
            }

            function handleTipeTugasChange() {
                const isGroup = getElem('tipe_group').checked;
                setDisplay(getElem('tugas-group-selection'), isGroup ? 'block' : 'none');
                if (!isGroup && !isInitialLoad) clearSelectedEmployees();
                // Pastikan user saat ini terpilih untuk Kategori 2 tipe group
                ensureCurrentUserSelectedIfApplicable();
                // Update protection for remove buttons
                protectCurrentUserRemoval();
            }

            function initTujuanDataTable() {
                if (tujuanDataTable) return;

                // get negaraList from $countries

                const negaraList = @json($countries ?? []);


                tujuanDataTable = $('#tujuan-table').DataTable({
                    responsive: true,
                    paging: false,
                    info: false,
                    searching: false,
                    ordering: false,
                    autoWidth: false,
                    columns: [{
                            "data": "tujuan",
                            "render": (data, type, row, meta) => {
                                const label = data ? data : 'Pilih Negara';
                                const btnClass = data ? 'btn-outline-primary' :
                                    'btn-outline-secondary';
                                const rowIndex = meta.row;
                                return `
                                    <div class="d-flex align-items-center gap-2">
                                        <button type="button" class="btn btn-sm ${btnClass} pick-country-btn" data-row-index="${rowIndex}">
                                            <i class="fas fa-globe-asia me-1"></i>${label}
                                        </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 && row.tujuan_id ? row.tujuan_id : ''}">
                                    </div>`;
                            }
                        },
                        {
                            "data": "status",
                            "className": "text-center align-middle",
                            "render": (data, type, row) =>
                                `<span class="tujuan-status-text">${data ? data : ''}</span>
                                 <input type="hidden" name="rincian_tujuan[status][]" class="tujuan-status-hidden" value="${data ? data : ''}">`
                        },
                        {
                            "data": "keterangan",
                            "render": (data, type, row) =>
                                `<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) {
                                // 'data' adalah array karyawan untuk baris ini
                                let badgesHtml = data.length > 0 ?
                                    data.map(emp => `
                                        <span class="badge bg-info me-1 mb-1 employee-in-tujuan" data-nik="${emp.nik}" onclick="window.showFullNameModal('${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 = data.map(e => e.nik);
                                const hiddenInput =
                                    `<input type="hidden" name="rincian_tujuan[karyawan][]" value='${JSON.stringify(niksInRow)}'>`;

                                // Filter karyawan utama: tampilkan hanya yang belum ada di baris ini
                                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 && row.tanggal_mulai ? row.tanggal_mulai : ''}">
                    <input type="hidden" name="rincian_tujuan[tanggal_berakhir][]" class="tujuan-end-hidden" value="${row && row.tanggal_berakhir ? 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": (data, type, row) =>
                                `<button type="button" class="btn btn-sm btn-danger remove-tujuan-btn"><i class="fas fa-trash"></i></button>`
                        }
                    ]
                });

                // Expose for other handlers
                window.tujuanDataTable = tujuanDataTable;

                // Init Negara modal DataTable once
                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) => {
                                    return `<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>`;
                                }
                            }
                        ]
                    });
                    // Delegate selection handler
                    $('#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);

                        // Update UI in the current rendered row
                        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 || '');
                        $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}`);

                        // Close modal
                        $('#countryPickerModal').modal('hide');
                        // After country change, re-render anggaran so currencies per employee are reflected
                        if (withAnggaranInput && withAnggaranInput.value === '1') {
                            renderAnggaranForEmployees();
                            setTimeout(() => {
                                bindAnggaranInputEvents();
                                recalcAllAnggaranTotals();
                            }, 0);
                        } else {
                            recalcAllAnggaranTotals();
                        }
                    });
                    return countriesListDT;
                }
                function applyCountryFilter() {
                    if (!countriesListDT) return;


                    countriesListDT.column(2).search(
                        selectedTujuanFilter === 'combined'
                            ? ''            // tampil semua
                            : selectedTujuanFilter === 'dalam_negeri'
                                ? '^dn$'   // tampil hanya DN
                                : '^ln$',  // tampil hanya LN
                        true, false
                    ).draw();


                }
                window.applyCountryFilter = applyCountryFilter;
                // Ensure modal table is ready when modal opens
                $('#countryPickerModal').on('shown.bs.modal', function() {
                    ensureCountriesListTable();
                    applyCountryFilter();
                });

                // Persist current UI state before DataTables redraws to avoid resetting row dates
                tujuanDataTable.on('preDraw', function() {
                    if (typeof snapshotTujuanUIIntoRowData === 'function') {
                        snapshotTujuanUIIntoRowData();
                    }
                });

                // Inisialisasi handler modal negara & Flatpickr pada event 'draw'
                tujuanDataTable.on('draw', function() {
                    // Buka modal saat klik tombol pilih negara
                    $('#tujuan-table tbody').off('click', '.pick-country-btn').on('click',
                        '.pick-country-btn',
                        function() {
                            const rowIndex = $(this).data('row-index');
                            $('#countryPickerModal').data('targetRowIndex', rowIndex);
                            $('#countryPickerModal').modal('show');
                        });

                    // Init date pickers and listeners for each row
                    initTujuanRowPickers();

                    // Safety net: initialize pickers on focus if not yet initialized,
                    // and guard: require Jam Keluar/Masuk before allowing date selection
                    // Use focusin for proper delegation and single firing
                    $(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) {
                                    // Prevent duplicate alerts
                                    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();
                                }
                            });

                    // Perubahan negara kini ditangani melalui modal
                });

                tujuanDataTable.draw();
            }


            window.addEmployeeToTujuan = function(element, nikToAdd) {
                const employeeToAdd = selectedEmployees.find(e => e.nik === nikToAdd);
                if (!employeeToAdd) return;

                // Dapatkan baris DataTable dari elemen yang diklik
                const rowElement = element.closest('tr');
                const row = tujuanDataTable.row(rowElement);
                // Snapshot current row state before modifying to avoid value loss on redraw
                snapshotTujuanUIIntoRowData();
                const rowData = row.data();

                // Tambahkan karyawan ke data baris dan update
                rowData.karyawan.push(employeeToAdd);
                row.data(rowData).draw(false); // `false` menjaga paging saat ini
                if (withAnggaranInput && withAnggaranInput.value === '1') {
                    renderAnggaranForEmployees();
                    setTimeout(() => {
                        bindAnggaranInputEvents();
                        recalcAllAnggaranTotals();
                    }, 0);
                } else {
                    recalcAllAnggaranTotals();
                }
            };

            // Tambahkan fungsi baru ini untuk menampilkan modal
            window.showFullNameModal = function(fullName) {
                document.getElementById('modalEmployeeFullName').textContent = fullName;
                const modal = new bootstrap.Modal(document.getElementById('employeeFullNameModal'));
                modal.show();
            }

            // --- TUJUAN TABLE LOGIC (NEW) ---
            window.addTujuanRow = function() {
                // Pastikan DataTable sudah terinisialisasi
                initTujuanDataTable();
                const karyawanForRow = selectedEmployees.map(e => ({
                    nik: e.nik,
                    nama: e.nama
                }));
                tujuanDataTable.row.add({
                    tujuan: '',
                    status: '',
                    keterangan: '',
                    karyawan: karyawanForRow,
                    jumlah_hari: 1
                }).draw();
                // Ensure pickers init for the new row
                initTujuanRowPickers();
                // Reflect any currency additions in anggaran
                if (withAnggaranInput && withAnggaranInput.value === '1') {
                    renderAnggaranForEmployees();
                    setTimeout(() => {
                        bindAnggaranInputEvents();
                        recalcAllAnggaranTotals();
                    }, 0);
                }
            }

            window.removeTujuanRow = function(button) {
                button.closest('tr').remove();
                document.querySelectorAll('#tujuan-table-body tr').forEach((r, index) => {
                    r.cells[0].textContent = index + 1;
                });
                recalcAllAnggaranTotals();
            }

            window.removeEmployeeFromTujuan = function(iconElement, nikToRemove) {
                // Blok penghapusan ketika kategori izin/tugas adalah 4
                if (getElem('kategori_perizinan_id') && getElem('kategori_perizinan_id').value === '4') {
                    return;
                }
                // Dapatkan baris DataTable dari ikon yang diklik
                const rowElement = iconElement.closest('tr');
                const row = tujuanDataTable.row(rowElement);
                // Preserve row values before changing participants
                snapshotTujuanUIIntoRowData();
                const rowData = row.data();

                // Hapus karyawan dari data baris dan update
                rowData.karyawan = rowData.karyawan.filter(emp => emp.nik !== nikToRemove);
                row.data(rowData).draw(false);
                if (withAnggaranInput && withAnggaranInput.value === '1') {
                    renderAnggaranForEmployees();
                    setTimeout(() => {
                        bindAnggaranInputEvents();
                        recalcAllAnggaranTotals();
                    }, 0);
                } else {
                    recalcAllAnggaranTotals();
                }
            };

            // --- ANGGARAN PER EMPLOYEE ---
            // Normalize identifiers used in element IDs/selectors to avoid invalid CSS selectors (e.g., dots in NIK)
            // Replace any character other than letters, numbers, underscore, or hyphen
            // Avoid colon and dot to keep querySelectorAll simple and robust across dynamic rebuilds
            const safeId = (s) => String(s).replace(/[^A-Za-z0-9_-]/g, '_');

            // ================= TUJUAN DATE-RANGE HELPERS =================
            function initTujuanRowPickers() {
                // Constraints based on global Jam Keluar/Masuk (dates only)
                const startGlobal = (fpJamKeluar && fpJamKeluar.selectedDates[0]) ? fpJamKeluar.selectedDates[0] :
                    null;
                const endGlobal = (fpJamMasuk && fpJamMasuk.selectedDates[0]) ? fpJamMasuk.selectedDates[0] : null;

                // If global times are not set, don't initialize pickers yet
                if (!startGlobal || !endGlobal) {
                    return;
                }

                $('#tujuan-table tbody tr').each(function() {
                    const $row = $(this);
                    const startInput = $row.find('input.tujuan-start')[0];
                    const endInput = $row.find('input.tujuan-end')[0];
                    const jumlahEl = $row.find('input.tujuan-jumlah-hari')[0];
                    const startHidden = $row.find('input.tujuan-start-hidden')[0];
                    const endHidden = $row.find('input.tujuan-end-hidden')[0];
                    const 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,
                        // Limit selectable dates to those generated from main range if available
                        enable: enabledDates
                    };

                    let fpStart = startInput._flatpickr;
                    let fpEnd = endInput ? endInput._flatpickr : null;
                    if (!fpStart) {
                        fpStart = flatpickr(startInput, {
                            ...commonOpts,
                            minDate: startGlobal || null,
                            maxDate: endGlobal || null,
                            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 || null,
                            maxDate: endGlobal || null,
                            onOpen: function() {
                                var self = this;
                                setTimeout(function() {
                                    try {
                                        if (!fpStart || !fpStart.selectedDates || !fpStart.selectedDates[0]) return;
                                        var startDate = fpStart.selectedDates[0];
                                        var cal = self.calendarContainer || (fpEnd && fpEnd.calendarContainer);
                                        if (!cal) return;
                                        var dayElems = cal.querySelectorAll('.flatpickr-day');
                                        dayElems.forEach(function(dayElem) {
                                            if (dayElem.dateObj && dayElem.dateObj.toDateString() === startDate.toDateString()) {
                                                dayElem.classList.add('startRange');
                                            }
                                        });
                                    } catch(e) { /* abaikan */ }
                                }, 50);
                            },
                            onChange: function() {
                                recalcTujuanRowDays(fpStart, fpEnd, jumlahEl, startHidden,
                                    endHidden, jumlahHidden);
                            }
                        });
                    }

                    // Store refs for later updates
                    $row.data('fpStart', fpStart);
                    $row.data('fpEnd', fpEnd);

                    // Prefer previously chosen values if present; otherwise keep existing picker selections; then fall back to global
                    const prevStart = (startHidden && startHidden.value) ? startHidden.value : '';
                    const prevEnd = (endHidden && endHidden.value) ? endHidden.value : '';
                    if (prevStart && prevEnd) {
                        // Parse YYYY-MM-DD
                        const ps = prevStart.split('-');
                        const pe = prevEnd.split('-');
                        const ds = new Date(Number(ps[0]), Number(ps[1]) - 1, Number(ps[2]));
                        const de = new Date(Number(pe[0]), Number(pe[1]) - 1, Number(pe[2]));

                        // Set dates in flatpickr instances
                        fpStart.setDate(ds, false); // false = don't trigger change event
                        fpEnd.setDate(de, false);

                        // Update the visible input values manually
                        const startInput = $row.find('input.tujuan-start')[0];
                        const endInput = $row.find('input.tujuan-end')[0];
                        if (startInput) startInput.value = fpStart.formatDate(ds, 'd-m-Y');
                        if (endInput) endInput.value = fpEnd.formatDate(de, 'd-m-Y');

                        // Keep jumlah sesuai hidden jika ada
                        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]) {
                        // Use existing selections (no change); just recalc to sync hidden/visible
                        recalcTujuanRowDays(fpStart, fpEnd, jumlahEl, startHidden, endHidden, jumlahHidden);
                    } else {
                        // Check if this row has non-date data - if it does, don't auto-fill dates
                        const hasNonDateData = $row.find('.tujuan-negara-hidden').val() ||
                            $row.find('.tujuan-keterangan').val();

                        // Only auto-set global dates for completely new/empty rows (no country, no description)
                        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());
                    const diff = ed - sd;
                    days = Math.floor(diff / (1000 * 60 * 60 * 24)) + 1; // inclusive days
                }
                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') : '';

                // Also update total_hari (sum of tanggal_table) remains separate; we keep tujuan per-row days independent.
                // Recalc anggaran totals since per-employee currency-day breakdown depends on tujuan rows
                recalcAllAnggaranTotals();
            }

            // Ensure tanggal_mulai/tanggal_berakhir hidden fields exist for each tujuan row before submit
            function ensureTujuanDatesBeforeSubmit() {
                let ok = true;
                const startGlobal = (typeof fpJamKeluar !== 'undefined' && fpJamKeluar && fpJamKeluar.selectedDates[
                    0]) ? fpJamKeluar.selectedDates[0] : null;
                const endGlobal = (typeof fpJamMasuk !== 'undefined' && fpJamMasuk && fpJamMasuk.selectedDates[0]) ?
                    fpJamMasuk.selectedDates[0] : null;
                $('#tujuan-table tbody tr').each(function() {
                    const $row = $(this);
                    const startHidden = $row.find('input.tujuan-start-hidden')[0];
                    const endHidden = $row.find('input.tujuan-end-hidden')[0];
                    const jumlahHidden = $row.find('input.tujuan-jumlah-hari-hidden')[0];
                    const startInput = $row.find('input.tujuan-start')[0];
                    const endInput = $row.find('input.tujuan-end')[0];
                    const jumlahEl = $row.find('input.tujuan-jumlah-hari')[0];
                    const fpStart = $row.data('fpStart');
                    const fpEnd = $row.data('fpEnd');

                    // Try recalc from existing flatpickr selections
                    if (fpStart && fpEnd) {
                        recalcTujuanRowDays(fpStart, fpEnd, jumlahEl, startHidden, endHidden, jumlahHidden);
                    }

                    // Fallback: parse visible input values (d-m-Y) if hidden still empty
                    if ((!startHidden || !startHidden.value || !endHidden || !endHidden.value) &&
                        startInput && endInput && startInput.value && endInput.value) {
                        const pS = startInput.value.split('-');
                        const pE = endInput.value.split('-');
                        if (pS.length === 3 && pE.length === 3) {
                            const ds = new Date(Number(pS[2]), Number(pS[1]) - 1, Number(pS[0]));
                            const de = new Date(Number(pE[2]), Number(pE[1]) - 1, Number(pE[0]));
                            if (!isNaN(ds) && !isNaN(de)) {
                                // compute days inclusive
                                const sd = new Date(ds.getFullYear(), ds.getMonth(), ds.getDate());
                                const ed = new Date(de.getFullYear(), de.getMonth(), de.getDate());
                                const diff = ed - sd;
                                const days = (diff >= 0) ? Math.floor(diff / (1000 * 60 * 60 * 24)) + 1 : 0;
                                if (jumlahEl) jumlahEl.value = days || 1;
                                if (jumlahHidden) jumlahHidden.value = days || 1;
                                if (startHidden) startHidden.value =
                                    `${ds.getFullYear()}-${String(ds.getMonth()+1).padStart(2,'0')}-${String(ds.getDate()).padStart(2,'0')}`;
                                if (endHidden) endHidden.value =
                                    `${de.getFullYear()}-${String(de.getMonth()+1).padStart(2,'0')}-${String(de.getDate()).padStart(2,'0')}`;
                            }
                        }
                    }

                    // Final fallback: if still empty and global dates available, set to global
                    if ((!startHidden || !startHidden.value || !endHidden || !endHidden.value) &&
                        startGlobal && endGlobal) {
                        if (fpStart && fpEnd) {
                            fpStart.setDate(startGlobal, true);
                            fpEnd.setDate(endGlobal, true);
                            recalcTujuanRowDays(fpStart, fpEnd, jumlahEl, startHidden, endHidden,
                                jumlahHidden);
                        } else {
                            // Manual set and compute
                            const sd = new Date(startGlobal.getFullYear(), startGlobal.getMonth(),
                                startGlobal.getDate());
                            const ed = new Date(endGlobal.getFullYear(), endGlobal.getMonth(), endGlobal
                                .getDate());
                            const diff = ed - sd;
                            const days = (diff >= 0) ? Math.floor(diff / (1000 * 60 * 60 * 24)) + 1 : 0;
                            if (jumlahEl) jumlahEl.value = days || 1;
                            if (jumlahHidden) jumlahHidden.value = days || 1;
                            if (startHidden) startHidden.value =
                                `${sd.getFullYear()}-${String(sd.getMonth()+1).padStart(2,'0')}-${String(sd.getDate()).padStart(2,'0')}`;
                            if (endHidden) endHidden.value =
                                `${ed.getFullYear()}-${String(ed.getMonth()+1).padStart(2,'0')}-${String(ed.getDate()).padStart(2,'0')}`;
                        }
                    }

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

            // Hook into form submit to ensure hidden tanggal fields are present
            $(document).on('submit', 'form', function(e) {
                if (!document.getElementById('tujuan-table')) return; // not this page
                const ok = ensureTujuanDatesBeforeSubmit();
                if (!ok) {
                    e.preventDefault();
                    alert(
                        'Mohon lengkapi Tanggal Mulai dan Tanggal Berakhir pada setiap baris Rincian Tujuan.'
                    );
                    const firstErr = $('#tujuan-table tbody tr.table-danger')[0];
                    if (firstErr && typeof firstErr.scrollIntoView === 'function') firstErr.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                }
            });

            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 hidden now, using tabs
                }
            }

            function snapshotAnggaranState() {
                const state = {};
                selectedEmployees.forEach(emp => {
                    const nik = emp.nik;
                    const nikKey = safeId(nik);
                    const empState = {
                        default: {},
                        defaultMulti: {},
                        lain: []
                    };
                    // default biaya
                    defaultBiaya.forEach(b => {
                        const nameLower = (b.nama_biaya || '').toLowerCase();
                        if (nameLower === 'uang hotel' || nameLower === 'uang transportasi') {
                            // Handle dynamic fields for hotel/transportation
                            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
                                };
                            }
                        }
                    });
                    // biaya lain
                    const container = document.getElementById(`biaya-lain-container-${nikKey}`);
                    if (container) {
                        const rows = container.querySelectorAll('.dynamic-biaya-row');
                        rows.forEach(row => {
                            const desc = row.querySelector('input[name^="biaya_pengeluaran["]');
                            const inputs = row.querySelectorAll('input');
                            // find specific fields
                            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;
            }

            // Build per-employee day breakdown by currency from Tujuan rows
            function getEmployeeDaysByCurrency() {
                const map = {};
                if (!window.tujuanDataTable) return map;
                $('#tujuan-table tbody tr').each(function() {
                    const rowElem = this;
                    const $row = $(rowElem);
                    const status = ($row.find('.tujuan-status-hidden').val() || '').toLowerCase();
                    const daysVal = $row.find('input.tujuan-jumlah-hari-hidden').val() || $row.find(
                        'input.tujuan-jumlah-hari').val() || '0';
                    const days = parseInt(daysVal, 10) || 0;
                    const rowApi = tujuanDataTable.row(rowElem);
                    const data = rowApi.data() || {};
                    const karyawan = Array.isArray(data.karyawan) ? data.karyawan : [];
                    karyawan.forEach(emp => {
                        const nik = emp && emp.nik;
                        if (!nik) return;
                        if (!map[nik]) map[nik] = {
                            idr: 0,
                            usd: 0
                        };
                        if (status === 'dn') map[nik].idr += days;
                        else if (status === 'ln') map[nik].usd += days;
                    });
                });
                return map;
            }

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

            // Note: currency is now determined by default rates and Tujuan rows, not the Tujuan radio buttons.

            function renderAnggaranForEmployees() {
                // Use tab-based rendering if there are employees
                if (selectedEmployees.length > 0) {
                    renderAnggaranWithTabs();
                } else {
                    // Fallback to original rendering for empty state
                    renderAnggaranOriginal();
                }
            }

            function renderAnggaranWithTabs() {
                const tabsContainer = document.getElementById('anggaran-tabs-container');
                const oldContainer = document.getElementById('anggaran-per-employee-container');

                if (!tabsContainer) return;

                updateAnggaranHintVisibility();

                // Show tabs container, hide old container
                tabsContainer.style.display = 'block';
                oldContainer.style.display = 'none';

                // Set flag to prevent auto-setting during render
                isRenderingAnggaran = true;

                // preserve current
                const preserved = snapshotAnggaranState();

                // Clear existing tabs
                const tabNav = document.getElementById('anggaran-employee-tabs');
                const tabContent = document.getElementById('anggaran-tab-content');
                tabNav.innerHTML = '';
                tabContent.innerHTML = '';

                // currencies per employee inferred from Tujuan rows
                const empCurrencies = getEmployeeCurrenciesFromTujuan();

                selectedEmployees.forEach((emp, index) => {
                    const nik = emp.nik;
                    const nikKey = safeId(nik);
                    const empState = preserved[nik] || {
                        default: {},
                        defaultMulti: {},
                        lain: []
                    };
                    const isActive = index === 0;

                    // Create tab navigation item
                    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);

                    // Create tab content pane
                    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);

                    // init per-employee default index counter (used for hidden submitted rows for totals)
                    defaultIndexCounters[nik] = 0;

                    // render default biaya fields
                    const grid = tabPane.querySelector(`#default-biaya-${nikKey}`);
                    renderDefaultBiayaFields(grid, emp, empState, empCurrencies);

                    // render preserved biaya lain rows
                    if (Array.isArray(empState.lain)) {
                        empState.lain.forEach(() => addBiayaLainRowFor(nik));
                        // Fill values
                        const rows = tabPane.querySelectorAll(
                            `#biaya-lain-container-${nikKey} .dynamic-biaya-row`);
                        rows.forEach((row, idx) => {
                            const data = empState.lain[idx];
                            if (!data) return;
                            fillBiayaLainRow(row, data);
                        });
                    }

                    // Bind events and compute totals for this employee
                    bindAnggaranInputEvents();
                });

                // Initialize Bootstrap tabs functionality
                initBootstrapTabs();

                // After all employees rendered, compute totals once
                recalcAllAnggaranTotals();

                // Reset flag after rendering
                isRenderingAnggaran = false;
            }

            function renderAnggaranOriginal() {
                const container = document.getElementById('anggaran-per-employee-container');
                const tabsContainer = document.getElementById('anggaran-tabs-container');

                if (!container) return;

                // Show old container, hide tabs container
                container.style.display = 'block';
                tabsContainer.style.display = 'none';

                updateAnggaranHintVisibility();

                // Set flag to prevent auto-setting during render
                isRenderingAnggaran = true;

                // preserve current
                const preserved = snapshotAnggaranState();
                container.innerHTML = '';
                // currencies per employee inferred from Tujuan rows
                const empCurrencies = getEmployeeCurrenciesFromTujuan();

                selectedEmployees.forEach(emp => {
                    const nik = emp.nik;
                    const nikKey = safeId(nik);
                    const empState = preserved[nik] || {
                        default: {},
                        defaultMulti: {},
                        lain: []
                    };

                    const card = document.createElement('div');
                    card.className = 'card mb-3';
                    card.id = `anggaran-emp-${nikKey}`;
                    card.innerHTML = `
                        <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>`;
                    container.appendChild(card);

                    // init per-employee default index counter (used for hidden submitted rows for totals)
                    defaultIndexCounters[nik] = 0;

                    // render default biaya fields
                    const grid = card.querySelector(`#default-biaya-${nikKey}`);
                    renderDefaultBiayaFields(grid, emp, empState, empCurrencies);

                    // render preserved biaya lain rows
                    if (Array.isArray(empState.lain)) {
                        empState.lain.forEach(() => addBiayaLainRowFor(nik));
                        // Fill values
                        const rows = card.querySelectorAll(
                            `#biaya-lain-container-${nikKey} .dynamic-biaya-row`);
                        rows.forEach((row, idx) => {
                            const data = empState.lain[idx];
                            if (!data) return;
                            fillBiayaLainRow(row, data);
                        });
                    }
                    // Bind events and compute totals for this employee
                    bindAnggaranInputEvents();
                });
                // After all employees rendered, compute totals once
                recalcAllAnggaranTotals();

                // Reset flag after rendering
                isRenderingAnggaran = false;
            }

            // Helper functions for both tab and original rendering
            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') {
                        // Explicit total fields only: IDR and USD
                        const labelBase = (b.nama_biaya || '').replace(/"/g, '&quot;');
                        const colIdr = document.createElement('div');
                        colIdr.className = 'col-md-3';
                        colIdr.id = `${base}_computed_group_idr`;
                        // allocate numeric index for submitted hidden row (IDR)
                        const idxIdr = defaultIndexCounters[nik]++;
                        colIdr.innerHTML = `
                            <label class="form-label">${labelBase} (IDR)
                            <input type="text" class="currency-input form-control text-end currency-input" id="${base}_computed_input_idr" value="" readonly>
                            <div id="${base}_note_idr" class="text-primary fw-bold" style="display:none;">On Bill</div>
                            <!-- submitted hidden fields for IDR total -->
                            <input type="hidden" id="${base}_submitted_biaya_id_idr" name="biaya_pengeluaran[${nik}][default][${idxIdr}][biaya_id]" value="${b.id}">
                            <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`;
                        // allocate numeric index for submitted hidden row (USD)
                        const idxUsd = defaultIndexCounters[nik]++;
                        colUsd.innerHTML = `
                            <label class="form-label">${labelBase} (USD)
                            <input type="text" class="currency-input form-control text-end currency-input" id="${base}_computed_input_usd" value="" readonly>
                            <div id="${base}_note_usd" class="text-primary fw-bold" style="display:none;">On Bill</div>
                            <!-- submitted hidden fields for USD total -->
                            <input type="hidden" id="${base}_submitted_biaya_id_usd" name="biaya_pengeluaran[${nik}][default][${idxUsd}][biaya_id]" value="${b.id}">
                            <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') {
                        // Dynamic flexible fields for hotel and transportation allowances
                        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);

                        // Populate existing fields from preserved state
                        const prevList = (empState.defaultMulti && empState.defaultMulti[b.id]) ? empState
                            .defaultMulti[b.id] : [];

                        // If no preserved state and this is initial load, auto-set from countries
                        if (prevList.length === 0 && !isRenderingAnggaran) {
                            setTimeout(() => {
                                window.autoSetFromCountries(nik, b.id, b.nama_biaya || '');
                            }, 100);
                        } else {
                            // Restore from preserved state
                            prevList.forEach(item => {
                                window.addDynamicBiayaField(nik, b.id, b.nama_biaya || '', item
                                    .currency || 'IDR', item.jumlah || '');
                            });
                        }
                    } else {
                        // Editable amount + currency for other biaya
                        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 currency-input" 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() {
                // Initialize Bootstrap tab functionality manually if needed
                const tabLinks = document.querySelectorAll('#anggaran-employee-tabs .nav-link');
                tabLinks.forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();

                        // Remove active class from all tabs and panes
                        tabLinks.forEach(l => l.classList.remove('active'));
                        document.querySelectorAll('.anggaran-tab-pane').forEach(p => p.classList
                            .remove('active'));

                        // Add active class to clicked tab
                        this.classList.add('active');

                        // Show corresponding pane
                        const targetId = this.getAttribute('data-bs-target');
                        const targetPane = document.querySelector(targetId);
                        if (targetPane) {
                            targetPane.classList.add('active');
                        }
                    });
                });
            }


            // Copy/Paste Anggaran antar kartu karyawan
            window.copyAnggaran = function(nik) {
                try {
                    const all = snapshotAnggaranState();
                    if (!all || !all[nik]) {
                        alert('Tidak ada data anggaran untuk disalin.');
                        return;
                    }
                    // deep copy to avoid reference issues
                    anggaranClipboard = JSON.parse(JSON.stringify(all[nik]));
                    // Optional: simple visual cue
                    const hdr = document.querySelector(`#anggaran-emp-${safeId(nik)} .card-header`);
                    if (hdr) {
                        hdr.classList.add('border-success');
                        setTimeout(() => hdr.classList.remove('border-success'), 800);
                    }

                    Swal.fire({
                        icon: 'success',
                        title: 'Nota Data Copied!',
                        text: 'You can now paste this data to any employee/date',
                        timer: 1500,
                        showConfirmButton: false,
                        toast: true,
                        position: 'top-end'
                    });
                } 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 {
                    // Default biaya: jumlah + currency
                    defaultBiaya.forEach(b => {
                        const nameLower = (b.nama_biaya || '').toLowerCase();
                        if (nameLower === 'uang hotel' || nameLower === 'uang transportasi') {
                            // Handle dynamic fields - clear existing and recreate from clipboard
                            const containerKey = `dynamic-biaya-${nikKey}-${b.id}-container`;
                            const container = document.getElementById(containerKey);
                            if (container) {
                                // Clear existing dynamic fields
                                container.innerHTML = '';
                                // Reset counter
                                const counterKey = `${nik}_${b.id}`;
                                dynamicBiayaCounters[counterKey] = 0;

                                // Recreate from clipboard data
                                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';
                        }
                    });

                    // Biaya lain: deskripsi + jumlah + currency
                    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));
                        const rows = container.querySelectorAll('.dynamic-biaya-row');
                        rows.forEach((row, idx) => {
                            const data = list[idx];
                            if (!data) return;
                            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;
                        });
                    }

                    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 currency-input" 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);
                // Update totals display for consistency
                recalcAllAnggaranTotals();
            }

            // --- DYNAMIC HOTEL/TRANSPORTATION FIELDS ---
            // Counters for tracking dynamic hotel/transportation field indices
            const dynamicBiayaCounters = {}; // per-employee, per-biaya_id counters

            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;

                // Initialize counter if needed
                const counterKey = `${nik}_${biayaId}`;
                if (!dynamicBiayaCounters[counterKey]) dynamicBiayaCounters[counterKey] = 0;
                const idx = dynamicBiayaCounters[counterKey]++;

                // Get the actual submission index for this field
                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" step="any" id="${fieldId}_jumlah" name="biaya_pengeluaran[${nik}][default][${submissionIdx}][jumlah]" class="currency-input form-control currency-input" 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);

                // Bind events for the new field
                bindAnggaranInputEvents();
                // Update totals
                recalcAllAnggaranTotals();
            };

            window.removeDynamicBiayaField = function(button) {
                const row = button.closest('.dynamic-default-biaya-row');
                if (row) {
                    row.remove();
                    // Update totals after removal
                    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;

                // Get currencies from Tujuan rows for this employee
                const empCurrencies = getEmployeeCurrenciesFromTujuan();
                const currencies = (empCurrencies[nik] && empCurrencies[nik].size > 0) ?
                    Array.from(empCurrencies[nik]) : ['IDR'];

                // Clear existing fields first
                container.innerHTML = '';

                // Reset counter for this biaya
                const counterKey = `${nik}_${biayaId}`;
                dynamicBiayaCounters[counterKey] = 0;

                // Add one field per detected currency
                currencies.forEach(currency => {
                    window.addDynamicBiayaField(nik, biayaId, biayaName, currency, '');
                });

                // Show feedback
                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);

                // Auto-dismiss the alert after 3 seconds
                setTimeout(() => {
                    if (alert.parentNode) {
                        alert.remove();
                    }
                }, 3000);
            };

            // --- MASTER SWITCH LOGIC ---
            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 (withAnggaranInput) withAnggaranInput.value = '0';
                if (anggaranSectionContainer) anggaranSectionContainer.querySelectorAll('input, select, button')
                    .forEach(el => el.disabled = true);
                if (btnToggleAnggaran) {
                    btnToggleAnggaran.innerHTML =
                        '<i class="fas fa-plus me-1"></i> Tambahkan Rincian Anggaran (Untuk Perjalanan Dinas Luar Kota)';
                    btnToggleAnggaran.classList.remove('btn-warning');
                    btnToggleAnggaran.classList.add('btn-primary');
                }

                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;

                    // Reset shift selection to default (non-shift) when switching categories
                    const nonShiftRadio = getElem('non_shift');
                    if (nonShiftRadio) nonShiftRadio.checked = true;
                }

                if (selectedID) setDisplay(sharedSection, 'block');

                if (selectedID === '1') { // Izin
                    setDisplay(formIzinContainer, 'block');
                    // Note: shift selection visibility is now controlled by jenisIzinSwitched()
                    izinTextareaPlaceholder.appendChild(sharedTextareaContainer);
                    izinDateTimePlaceholder.appendChild(datetimePickerRow);
                    izinTablePlaceholder.appendChild(tableTanggalContainer);
                    setDisplay(getElem('noted'), 'none');
                    jenisIzinSwitched();
                } else if (selectedID === '2') { // Tugas
                    setDisplay(formTugasContainer, 'block');
                    jamKeluarLabel.textContent = "Waktu Berangkat";
                    jamMasukLabel.textContent = "Waktu Kepulangan";

                    tugasDateTimePlaceholder.appendChild(datetimePickerRow);
                    setDisplay(datetimePickerRow, 'flex');
                    tugasTablePlaceholder.appendChild(tableTanggalContainer);
                    setDisplay(tableTanggalContainer, 'block');

                    handleTipeTugasChange();
                    handleJenisPenugasanChange();
                    setDisplay(getElem('noted'), 'block');
                    setDisplay(lampiranGroup, 'none'); // Lampiran is not for Tugas form
                    setDisplay(addAnggaranButtonContainer, 'block');
                }

                if (tanggalTableInstance) tanggalTableInstance.draw(false);

                // Auto-select current user when Kategori 2 (Group) or Izin jenis 4
                ensureCurrentUserSelectedIfApplicable();
                // Redraw selected employees tables to reflect disabled/enabled Hapus state
                updateSelectedEmployeesUI();
            }

            // --- INITIALIZATION ---
            initializeDataTables();
            initTanggalTable();
            initDateTimePickers();
            initTugasComponents();
            initTujuanDataTable();
            setupErrorClearingListeners();

            loadExistingEmployees();
            loadExistingDates();

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

            // Delegated listener as a fallback if direct listener doesn't fire
            document.addEventListener('change', function (e) {
                if (!e || !e.target) return;
                if (e.target.id === 'kategori_perizinan_id') {
                    try {
                        masterSwitch();
                    } catch (err) {
                        console.error('Error in delegated masterSwitch:', err);
                    }
                }
            });

            // Add event listeners for jenis_penugasan radio buttons
            document.querySelectorAll('input[name="jenis_penugasan"]').forEach(radio => {
                radio.addEventListener('change', handleJenisPenugasanChange);
            });

            // --- SINGLE SELECT PROFILE (Karyawan Bawahan) ---
            $(document).on('click', '.select-single-profile-btn', function() {
                const nik = $(this).data('nik');
                const nama = $(this).data('nama');
                const departemen = $(this).closest('tr').find('td:eq(2)').text();

                const nikDisplay = getElem('nik_karyawan_display_single');
                const nikHidden = getElem('nik_karyawan_ditugaskan_hidden');

                if (nikDisplay) nikDisplay.value = `${nama} (${nik})`;
                if (nikHidden) nikHidden.value = nik;

                // Update selectedEmployees untuk tujuan table (hanya karyawan bawahan yang dipilih)
                selectedEmployees = [{
                    nik: nik,
                    nama: nama,
                    departemen: departemen
                }];

                // Update nik_karyawan hidden input juga untuk konsistensi
                getElem('nik_karyawan').value = JSON.stringify([nik]);

                // Update tujuan table with the selected employee
                updateTujuanTableWithEmployees();

                // Update employee tables if needed
                updateSelectedEmployeesUI();

                // Render anggaran if visible
                if (withAnggaranInput && withAnggaranInput.value === '1') {
                    renderAnggaranForEmployees();
                }

                // Update protection for remove buttons - now protect the bawahan
                protectCurrentUserRemoval();

                $('#searchModalSingleProfile').modal('hide');
            });

            // Check if we need to trigger masterSwitch with validation errors
            const hasValidationErrors = Object.keys(validationErrors).length > 0;
            const hasOldInput = Object.keys(oldInput).length > 0;

            // If there are validation errors, ensure the form is displayed correctly before calling masterSwitch
            if (hasValidationErrors && hasOldInput) {
                console.log('Validation errors detected, preparing form state...');
                console.log('Old input kategori:', oldInput.kategori_perizinan_id);
                console.log('Old input jenis izin:', oldInput.jenis_izin_id);

                // Set the kategori and jenis values BEFORE calling masterSwitch
                if (oldInput.kategori_perizinan_id && kategoriSelect) {
                    kategoriSelect.value = oldInput.kategori_perizinan_id;
                    console.log('Set kategori to:', kategoriSelect.value);
                }
                if (oldInput.jenis_izin_id && jenisIzinSelect) {
                    jenisIzinSelect.value = oldInput.jenis_izin_id;
                    console.log('Set jenis izin to:', jenisIzinSelect.value);
                }

                // Now trigger masterSwitch to show the appropriate form sections
                console.log('Triggering masterSwitch...');
                masterSwitch();

                // If jenis izin exists, also trigger jenisIzinSwitched to show related fields
                if (oldInput.jenis_izin_id && oldInput.kategori_perizinan_id === '1') {
                    console.log('Triggering jenisIzinSwitched...');
                    jenisIzinSwitched();
                }

                // Log form container visibility status
                setTimeout(() => {
                    const formIzinContainer = document.getElementById('form-izin-container');
                    const formTugasContainer = document.getElementById('form-tugas-container');
                    const sharedTextarea = document.getElementById('shared-textarea-container');
                    const datetimeRow = document.getElementById('datetime-picker-row');

                    console.log('Form visibility check:');
                    console.log('- form-izin-container:', formIzinContainer ? formIzinContainer.style
                        .display : 'not found');
                    console.log('- form-tugas-container:', formTugasContainer ? formTugasContainer.style
                        .display : 'not found');
                    console.log('- shared-textarea-container:', sharedTextarea ? sharedTextarea.style
                        .display : 'not found');
                    console.log('- datetime-picker-row:', datetimeRow ? datetimeRow.style.display :
                        'not found');
                }, 100);
            } else {
                // Normal initialization without errors
                masterSwitch();
            }

            isInitialLoad = false;

            // 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); // Increased delay to allow anggaran section to render properly

            // Safety: ensure current user selected on initial load if applicable
            ensureCurrentUserSelectedIfApplicable();

            if (btnToggleAnggaran) {
                btnToggleAnggaran.addEventListener('click', function() {
                    const isHidden = anggaranSectionContainer.style.display === 'none';
                    const anggaranInputs = anggaranSectionContainer.querySelectorAll(
                        'input, select, button');
                    if (isHidden) {
                        // Show information popup before displaying anggaran section
                        Swal.fire({
                            icon: 'info',
                            title: 'Informasi Penting',
                            html: `
                                <div class="text-start">
                                    <div class="mb-3">
                                        <h6 class="fw-bold"><i class="fas fa-user-tie me-2 text-success"></i>Tugas Anda dan Karyawan yang Mengikuti</h6>
                                        <p class="mb-0 ps-4">Setiap karyawan yang mengikuti perjalanan atau Penanggung jawab dana <strong>wajib mengunggah nota atau bukti pengeluaran</strong> selama perjalanan untuk proses reimburse.</p>
                                    </div>
                                    <div class="mb-0">
                                        <h6 class="fw-bold"><i class="fas fa-arrow-right me-2 text-warning"></i>Alur Persetujuan</h6>
                                        <p class="mb-0 ps-4">Pengajuan harus melalui persetujuan <strong>FEAT</strong>.</p>
                                    </div>
                                </div>
                            `,
                            confirmButtonText: 'Mengerti',
                            confirmButtonColor: '#3085d6',
                            width: '600px'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                setDisplay(anggaranSectionContainer, 'block');
                                this.innerHTML =
                                    '<i class="fas fa-minus me-1"></i> Sembunyikan Dan Hapus Rincian Anggaran';
                                this.classList.replace('btn-primary', 'btn-warning');
                                withAnggaranInput.value = '1';
                                anggaranInputs.forEach(input => input.disabled = false);
                                renderAnggaranForEmployees();
                                // After initial render, bind input events and recalc
                                setTimeout(() => {
                                    bindAnggaranInputEvents();
                                    recalcAllAnggaranTotals();
                                }, 0);
                            }
                        });
                    } else {
                        setDisplay(anggaranSectionContainer, 'none');
                        this.innerHTML =
                            '<i class="fas fa-plus me-1"></i> Tambahkan Rincian Anggaran (Untuk Perjalanan Dinas Luar Kota)';
                        this.classList.replace('btn-warning', 'btn-primary');
                        withAnggaranInput.value = '0';
                        anggaranInputs.forEach(input => {
                            input.disabled = true;
                            if ((input.type === 'number' || input.type === 'text') && !input
                                .readOnly) input.value = '';
                        });
                        const perEmp = document.getElementById('anggaran-per-employee-container');
                        if (perEmp) perEmp.innerHTML = '';
                    }
                });
            }

            // --- COMPUTATION: Uang Saku & Uang Makan ---
            function getTotalHariValue() {
                const el = getElem('total_hari');
                const v = parseFloat(el && el.value ? el.value : '0');
                return isNaN(v) ? 0 : v;
            }

            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";
                        }

                        // Update nilai pada input tersembunyi (yang dikirim ke backend)
                        const hidJumlahIdr = document.getElementById(`${baseId}_submitted_jumlah_idr`);
                        const hidJumlahUsd = document.getElementById(`${baseId}_submitted_jumlah_usd`);
                        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`);
                        const shouldShowIdr = (breakdown.idr || 0) > 0;
                        const shouldShowUsd = (breakdown.usd || 0) > 0;

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

                        // Nonaktifkan field tersembunyi jika grupnya tidak ditampilkan
                        document.getElementById(`${baseId}_submitted_biaya_id_idr`).disabled = !
                            shouldShowIdr;
                        if (hidJumlahIdr) hidJumlahIdr.disabled = !shouldShowIdr;
                        document.getElementById(`${baseId}_submitted_currency_idr`).disabled = !
                            shouldShowIdr;

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

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

            function bindAnggaranInputEvents() {
                // Bind input events to default biaya jumlah inputs for dynamic recalc
                selectedEmployees.forEach(emp => {
                    const nik = emp.nik;
                    const nikKey = safeId(nik);

                    // Support both card-based (old) and tab-based selectors
                    const cardSelector = `#anggaran-emp-${nikKey}`;
                    const tabSelector = `#anggaran-pane-${nikKey}`;

                    // Try both selectors - one or both may exist depending on current rendering mode
                    const containers = [cardSelector, tabSelector].map(sel => document.querySelector(sel))
                        .filter(el => el);

                    containers.forEach(container => {
                        // Bind events to traditional default fields
                        const inputs = container.querySelectorAll(
                            `input[id^="bp_${nikKey}_default_"][id$="_jumlah"]`);
                        inputs.forEach(inp => {
                            if (!inp.dataset.bound) {
                                inp.addEventListener('input', () => {
                                    // Tandai user memodifikasi manual supaya tidak dioverride saat radio tujuan berubah
                                    inp.dataset.userModified = '1';
                                    recalcAllAnggaranTotals();
                                });
                                inp.dataset.bound = '1';
                            }
                        });

                        // Bind events to dynamic hotel/transportation fields
                        const dynamicInputs = container.querySelectorAll(
                            `.dynamic-default-biaya-row input[type="text"]`);
                        dynamicInputs.forEach(inp => {
                            if (!inp.dataset.bound) {
                                inp.addEventListener('input', () => {
                                    recalcAllAnggaranTotals();
                                });
                                inp.dataset.bound = '1';
                            }
                        });

                        // Bind events to biaya lain fields
                        const lainInputs = container.querySelectorAll(
                            `.dynamic-biaya-row input`);
                        lainInputs.forEach(inp => {
                            if (!inp.dataset.bound) {
                                inp.addEventListener('input', () => {
                                    if (inp.type === 'number') {
                                        recalcAllAnggaranTotals();
                                    }
                                });
                                inp.dataset.bound = '1';
                            }
                        });
                    });
                });
            }

            // --- LOGIKA MODAL CURRENCY ---
            let currentCurrencyTargetInput = null;
            let dynamicRowCounter = {{ old('biaya_lain_deskripsi') ? count(old('biaya_lain_deskripsi')) : 0 }};
            $('#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');
            };

            // Removed: currency is no longer synced from Tujuan radio buttons

            // per-employee add handled within employee sections

            // When opening employee search modal, close any open Select2 dropdowns to avoid overlay
            $('#searchModalProfiles').on('show.bs.modal', function() {
                try {
                    $('.country-select').select2('close');
                } catch (e) {}
                // Determine if current user's checkbox should be disabled (Acara Khusus)
                const kat = kategoriSelect ? kategoriSelect.value : '';
                const jenis = jenisIzinSelect ? jenisIzinSelect.value : '';
                const shouldProtectCheckbox = (kat === '1' && jenis === '4' && currentUserNIK);
                // Pre-check modal checkboxes based on current selectedEmployees
                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);
                            // Disable current user's checkbox for Acara Khusus
                            if (shouldProtectCheckbox && String(nik) === String(currentUserNIK)) {
                                this.disabled = true;
                                this.checked = true;
                            } else {
                                this.disabled = false;
                            }
                        });
                        const total = listProfilesDataTable.$('.profile-select-check').length;
                        const checked = listProfilesDataTable.$('.profile-select-check:checked').length;
                        $('#profiles_select_all').prop('checked', total > 0 && checked === total);
                    } else {
                        $('#list_profiles tbody .profile-select-check').each(function() {
                            const nik = this.getAttribute('data-nik');
                            this.checked = selectedNikSet.has(nik);
                            if (shouldProtectCheckbox && String(nik) === String(currentUserNIK)) {
                                this.disabled = true;
                                this.checked = true;
                            } else {
                                this.disabled = false;
                            }
                        });
                        const total = $('#list_profiles tbody .profile-select-check').length;
                        const checked = $('#list_profiles tbody .profile-select-check:checked').length;
                        $('#profiles_select_all').prop('checked', total > 0 && checked === total);
                    }
                } catch (e) {
                    /* ignore */
                }
                if (listProfilesDataTable) listProfilesDataTable.draw();
            });

            // --- PROTECT CURRENT USER REMOVAL (UI + Logic) ---
            function disableRemoveButtonForProtectedNik() {
                // Determine which NIK should be protected based on context
                let protectedNik = null;

                const kat = kategoriSelect ? kategoriSelect.value : '';
                const jenis = jenisIzinSelect ? jenisIzinSelect.value : '';


                // For Kategori 1 (Izin) with Jenis Izin 4, protect current user
                if (kat === '1' && jenis === '4') {
                    protectedNik = currentUserNIK;
                }

                // For Kategori 2 (Tugas)
                if (kat === '2') {
                    const jenisPenugasan = document.querySelector('input[name="jenis_penugasan"]:checked')?.value || 'pribadi';

                    if (jenisPenugasan === 'pribadi') {
                        // Protect current user for pribadi
                        protectedNik = currentUserNIK;
                    } else if (jenisPenugasan === 'bawahan') {
                        // Protect selected bawahan for tugaskan bawahan
                        const nikBawahanHidden = getElem('nik_karyawan_ditugaskan_hidden');
                        if (nikBawahanHidden && nikBawahanHidden.value) {
                            protectedNik = nikBawahanHidden.value;
                        }
                    }
                }

                if (!protectedNik) return;

                ['#izinSelectedEmployeesTable', '#tugasSelectedEmployeesTable'].forEach(sel => {
                    const $table = $(sel);
                    if (!$table.length) return;
                    $table.find('tbody tr').each(function() {
                        const $row = $(this);
                        const rowText = $row.text();
                        if (rowText && rowText.includes(String(protectedNik))) {
                            $row.find(
                                    '.btn-remove-employee, .btn-danger, .btn-secondary, [data-action="remove"], [onclick*="removeEmployee"]'
                                )
                                .each(function() {
                                    this.disabled = true;
                                    this.style.pointerEvents = 'none';
                                    this.title = 'Tidak dapat dihapus';
                                    $(this).addClass('disabled');
                                    // Ubah warna dari merah menjadi abu-abu (jika masih merah)
                                    $(this).removeClass('btn-danger').addClass('btn-secondary');
                                });
                        }
                    });
                });
            }

            function protectCurrentUserRemoval() {
                // Determine which NIK should be protected based on context
                let protectedNik = null;

                const kat = kategoriSelect ? kategoriSelect.value : '';
                const jenis = jenisIzinSelect ? jenisIzinSelect.value : '';

                // For Kategori 1 (Izin) with Jenis Izin 4, protect current user
                if (kat === '1' && jenis === '4') {
                    protectedNik = currentUserNIK;
                }

                // For Kategori 2 (Tugas)
                if (kat === '2') {
                    const jenisPenugasan = document.querySelector('input[name="jenis_penugasan"]:checked')?.value || 'pribadi';

                    if (jenisPenugasan === 'pribadi') {
                        // Protect current user for pribadi
                        protectedNik = currentUserNIK;
                    } else if (jenisPenugasan === 'bawahan') {
                        // Protect selected bawahan for tugaskan bawahan
                        const nikBawahanHidden = getElem('nik_karyawan_ditugaskan_hidden');
                        if (nikBawahanHidden && nikBawahanHidden.value) {
                            protectedNik = nikBawahanHidden.value;
                        }
                    }
                }

                if (!protectedNik) return;

                // Intercept direct removal by index
                const originalRemoveEmployee = window.removeEmployee;
                window.removeEmployee = function(index) {
                    try {
                        if (Array.isArray(selectedEmployees) && selectedEmployees[index] && String(
                                selectedEmployees[index].nik) === String(protectedNik)) {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Tidak Dapat Dihapus',
                                text: 'Karyawan ini tidak dapat dihapus dari daftar.',
                                confirmButtonText: 'OK'
                            });
                            return; // block removal
                        }
                    } catch (e) {
                        /* noop */
                    }
                    if (typeof originalRemoveEmployee === 'function') {
                        return originalRemoveEmployee.apply(this, arguments);
                    }
                };
                // Intercept removal by NIK
                const originalRemoveByNik = window.removeEmployeeByNik;
                window.removeEmployeeByNik = function(nik) {
                    if (String(nik) === String(protectedNik)) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Tidak Dapat Dihapus',
                            text: 'Karyawan ini tidak dapat dihapus dari daftar.',
                            confirmButtonText: 'OK'
                        });
                        return; // block
                    }
                    if (typeof originalRemoveByNik === 'function') {
                        return originalRemoveByNik.apply(this, arguments);
                    }
                };

                // Block button clicks as safety net
                $(document).on('click', '.btn-remove-employee, [data-action="remove"], [onclick*="removeEmployee"]',
                    function(e) {
                        const $btn = $(this);
                        const btnNik = String($btn.data('nik') || '');
                        if (btnNik && btnNik === String(protectedNik)) {
                            e.preventDefault();
                            e.stopImmediatePropagation();
                            return false;
                        }
                        const $row = $btn.closest('tr');
                        if ($row.length && String(protectedNik) && $row.text().includes(String(
                                protectedNik))) {
                            e.preventDefault();
                            e.stopImmediatePropagation();
                            return false;
                        }
                    });

                // Reapply disabling after each table draw
                ['#izinSelectedEmployeesTable', '#tugasSelectedEmployeesTable'].forEach(sel => {
                    if ($(sel).length) $(sel).on('draw.dt', disableRemoveButtonForProtectedNik);
                });

                // Initial run
                disableRemoveButtonForProtectedNik();
            }

            protectCurrentUserRemoval();

            // Expose core functions to window for debugging and fallback usage
            try {
                window.masterSwitch = masterSwitch;
                window.jenisIzinSwitched = jenisIzinSwitched;
            } catch (e) {
                // ignore if functions not defined
            }
        }

        // Initialize immediately if document is already ready, otherwise wait for DOMContentLoaded
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initPerizinanForm);
        } else {
            initPerizinanForm();
        }
    </script>
@endpush