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

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

    @push('css')
        {{-- Flatpickr --}}
        <link rel="stylesheet" href="{{ asset('/') }}assets/css/flatpickr.min.css">
        <style>
            .btn-add-nota-inside {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                border: none;
                background-color: #028284;
                color: white;
                font-size: 10px;
                margin-top: 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                transition: 0.2s;
            }

            .btn-add-nota-inside:hover {
                transform: scale(1.1);
                background-color: ;
            }

            .btn-add-nota-inside i {
                pointer-events: none;
                font-size: 20px !important;
                line-height: 1;
                line-height: 50px;
                text-align: center;
            }

            .btn-add-nota-inside i.fas {
                color: white !important;
            }

            /* Table styling to match selected employees table */
            #tujuan-table {
                width: 100% !important;
            }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                50% {
                    opacity: 0.7;
                }

                100% {
                    opacity: 1;
                }
            }

            /* ===== EDIT MODE SPECIFIC STYLES ===== */
            /* Generic readonly visual (do NOT kill pointer events globally to avoid layout glitches) */
            .readonly-field {
                background-color: #f8f9fa !important;
                cursor: default !important;
                opacity: 0.75;
            }

            /* For fields we truly want frozen (e.g. jam keluar) add .no-interact */
            .no-interact {
                pointer-events: none !important;
            }

            .readonly-field:focus {
                background-color: #f8f9fa !important;
                border-color: #ced4da !important;
                box-shadow: none !important;
            }

            .editable-field {
                border-left: 4px solid #28a745 !important;
            }

            .readonly-field {
                border-left: 4px solid #dc3545 !important;
            }

            .edit-notice {
                background: linear-gradient(45deg, #fff3cd, #ffeaa7);
                border: 1px solid #ffeaa7;
                border-radius: 0.375rem;
                padding: 1rem;
                margin-bottom: 1.5rem;
            }

            .edit-notice .badge {
                font-size: 0.75rem;
                margin-left: 0.5rem;
            }

            .field-status-legend {
                background: #f8f9fc;
                border: 1px solid #e3e6f0;
                border-radius: 0.375rem;
                padding: 0.75rem;
                margin-bottom: 1rem;
            }

            .field-status-legend .legend-item {
                display: flex;
                align-items: center;
                margin-bottom: 0.5rem;
            }

            .field-status-legend .legend-item:last-child {
                margin-bottom: 0;
            }

            .legend-color {
                width: 20px;
                height: 3px;
                margin-right: 0.5rem;
                border-radius: 2px;
            }

            .legend-editable {
                background-color: #28a745;
            }

            .legend-readonly {
                background-color: #dc3545;
            }

            /* Disable interaction with readonly modals and buttons */
            .readonly-field+.input-group-text {
                background-color: #e9ecef !important;
                color: #6c757d !important;
            }

            .no-interact+.input-group-text {
                pointer-events: none !important;
            }

            /* Disable interaction with disabled buttons */
            .btn:disabled {
                pointer-events: none !important;
                opacity: 0.6 !important;
            }

            /* Override flatpickr readonly state */
            .flatpickr-input[readonly] {
                cursor: default !important;
            }

            /* HARD LOCK anggaran section */
            #anggaran-section-container.locked-anggaran input,
            #anggaran-section-container.locked-anggaran select,
            #anggaran-section-container.locked-anggaran textarea,
            #anggaran-section-container.locked-anggaran button {
                pointer-events: none !important;
                opacity: .7;
            }

            #anggaran-section-container.locked-anggaran .btn {
                cursor: default !important;
            }

            /* EXCEPTION: keep anggaran employee tabs navigable in locked (read-only) mode */
            #anggaran-section-container.locked-anggaran .nav-link,
            #anggaran-section-container.locked-anggaran .nav-link * {
                pointer-events: auto !important;
                opacity: 1 !important;
                cursor: pointer !important;
            }

            /* Nota Reimbursement Form Styles */
            .nota-row {
                background-color: #f8f9fa;
                transition: all 0.3s ease;
                padding: 1rem !important;
                /* Reduced padding for thinner cards */
                position: relative;
                /* For absolute positioning of delete button */
            }

            .nota-row:hover {
                background-color: #e9ecef;
            }

            /* Delete button styling - positioned at top right */
            .nota-delete-btn {
                position: absolute;
                top: 10px;
                right: 10px;
                z-index: 10;
                width: 28px;
                height: 28px;
                border-radius: 50%;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                border: none;
                background-color: #dc3545;
                color: white;
                font-size: 12px;
                transition: all 0.2s ease;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

            .nota-delete-btn:hover {
                background-color: #c82333;
                transform: scale(1.1);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }

            .nota-delete-btn:active {
                transform: scale(0.95);
            }

            /* Date tabs styling removed - now using .anggaran-tabs class for consistency */

            .nota-keterangan-container {
                transition: all 0.3s ease;
            }

            /* Currency modal styling for nota */
            .nota-row .open-currency-modal {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

            /* Form validation styling */
            .nota-row .form-control:invalid {
                border-color: #dc3545;
            }

            .nota-row .form-control:valid {
                border-color: #198754;
            }

            /* Compact radio button styling */
            .nota-radio-section {
                background-color: #f1f3f4;
                border-radius: 0.375rem;
                padding: 0.75rem;
                border: 1px solid #dee2e6;
            }

            .radio-group-compact {
                text-align: center;
                min-width: 80px;
            }

            .radio-group-compact .form-label-sm {
                font-size: 0.75rem;
                font-weight: 600;
                color: #495057;
                margin-bottom: 0.25rem !important;
                display: block;
            }

            .form-check-sm {
                margin-bottom: 0;
            }

            .form-check-sm .form-check-input {
                margin-top: 0.125rem;
            }

            .form-check-sm .form-check-label {
                font-size: 0.75rem;
                color: #6c757d;
            }

            /* Responsive adjustments for mobile */
            @media (max-width: 768px) {
                .nota-radio-section .d-flex {
                    flex-direction: column;
                    gap: 0.75rem !important;
                }

                .radio-group-compact {
                    min-width: auto;
                    text-align: left;
                }
            }

            /* Reduce form spacing for more compact look */
            .nota-row .row.g-3 {
                --bs-gutter-y: 0.75rem;
            }

            .nota-row .form-label {
                margin-bottom: 0.25rem;
                font-size: 0.875rem;
            }

            /* Floating Scroll Button */
            .floating-scroll-btn {
                position: fixed;
                bottom: 30px;
                right: 30px;
                z-index: 1040;
                /* Below modals (1050+) but above most content */
                width: 56px;
                height: 56px;
                border-radius: 50%;
                background: linear-gradient(45deg, #0d6efd, #0b5ed7);
                border: none;
                box-shadow: 0 4px 12px rgba(13, 110, 253, 0.4);
                color: white;
                font-size: 18px;
                transition: all 0.3s ease;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .floating-scroll-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(13, 110, 253, 0.5);
                background: linear-gradient(45deg, #0b5ed7, #0a58ca);
                color: white;
            }

            .floating-scroll-btn:active {
                transform: translateY(0);
                box-shadow: 0 2px 8px rgba(13, 110, 253, 0.4);
            }

            /* Responsive adjustments for smaller screens */
            @media (max-width: 768px) {
                .floating-scroll-btn {
                    bottom: 20px;
                    right: 20px;
                    width: 48px;
                    height: 48px;
                    font-size: 16px;
                }
            }

            /* Animation for button appearance */
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .floating-scroll-btn.animate-in {
                animation: fadeInUp 0.4s ease-out;
            }

            /* ===== FLOATING ACTION BUTTON (FAB) WITH BUBBLE MENU ===== */
            .fab-container {
                position: fixed;
                bottom: 30px;
                right: 30px;
                z-index: 1050;
            }

            .fab-main-btn {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                border: none;
                box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.5rem;
                transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
                position: relative;
                z-index: 1052;
            }

            .fab-main-btn:hover {
                transform: scale(1.1);
                box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
            }

            .fab-main-btn:active {
                transform: scale(0.95);
            }

            .fab-main-btn i {
                transition: transform 0.3s ease;
            }

            .fab-main-btn.active i {
                transform: rotate(45deg);
            }

            .fab-menu {
                position: absolute;
                bottom: 75px;
                right: 0;
                display: flex;
                flex-direction: column;
                gap: 12px;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.3s ease;
                min-width: 250px;
            }

            .fab-menu.active {
                opacity: 1;
                pointer-events: all;
            }

            .fab-menu-item {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 12px;
                opacity: 0;
                transform: translateY(10px) scale(0.8);
                transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
                width: 100%;
            }

            .fab-menu.active .fab-menu-item {
                opacity: 1;
                transform: translateY(0) scale(1);
            }

            .fab-menu.active .fab-menu-item:nth-child(1) {
                transition-delay: 0.05s;
            }

            .fab-menu.active .fab-menu-item:nth-child(2) {
                transition-delay: 0.1s;
            }

            .fab-menu.active .fab-menu-item:nth-child(3) {
                transition-delay: 0.15s;
            }

            .fab-menu.active .fab-menu-item:nth-child(4) {
                transition-delay: 0.2s;
            }

            .fab-menu-item-label {
                background: rgba(0, 0, 0, 0.75);
                color: white;
                padding: 8px 16px;
                border-radius: 20px;
                font-size: 0.85rem;
                font-weight: 500;
                white-space: nowrap;
                backdrop-filter: blur(4px);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                text-align: center;
                flex: 1;
                margin-right: auto;
            }

            .fab-menu-item-btn {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                border: none;
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.2rem;
                cursor: pointer;
                box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
                transition: all 0.2s ease;
                position: relative;
            }

            .fab-menu-item-btn:hover {
                transform: scale(1.15);
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
            }

            .fab-menu-item-btn:active {
                transform: scale(0.95);
            }

            .fab-menu-item-btn.nota-btn {
                background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            }

            .fab-menu-item-btn.exchange-btn {
                background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            }

            .fab-menu-item-btn.scroll-nota-btn {
                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            }

            .fab-menu-item-btn.scroll-exchange-btn {
                background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
            }

            /* Backdrop overlay */
            .fab-backdrop {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.3);
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.3s ease;
                z-index: 1049;
            }

            .fab-backdrop.active {
                opacity: 1;
                pointer-events: all;
            }

            /* Pulse animation for main button */
            @keyframes fabPulse {
                0% {
                    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
                }

                50% {
                    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4), 0 0 0 10px rgba(102, 126, 234, 0.1);
                }

                100% {
                    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
                }
            }

            .fab-main-btn.pulse {
                animation: fabPulse 2s infinite;
            }

            /* Responsive adjustments */
            @media (max-width: 768px) {
                .fab-container {
                    bottom: 20px;
                    right: 20px;
                }

                .fab-main-btn {
                    width: 56px;
                    height: 56px;
                    font-size: 1.3rem;
                }

                .fab-menu-item-btn {
                    width: 44px;
                    height: 44px;
                    font-size: 1.1rem;
                }

                .fab-menu-item-label {
                    font-size: 0.8rem;
                    padding: 6px 12px;
                }
            }

            /* Nota Employee & Date Tabs - Same styling as Anggaran tabs for consistency */
            /* No additional styling needed - will use .anggaran-tabs class */



            /* Empty State for Nota */
            .nota-empty-state {
                text-align: center;
                padding: 3rem 2rem;
                color: #6c757d;
                background: #f8f9fa;
                border-radius: 0.375rem;
                border: 2px dashed #dee2e6;
                margin: 1rem 0;
            }

            .nota-empty-state i {
                font-size: 3rem;
                margin-bottom: 1rem;
                display: block;
                color: #adb5bd;
            }

            .nota-empty-state h6 {
                color: #495057;
                margin-bottom: 0.5rem;
            }

            .nota-empty-state p {
                font-size: 0.9rem;
                margin-bottom: 0;
                line-height: 1.5;
            }

            /* ===== TAMBAHAN DARI ADD.BLADE.PHP UNTUK VALIDASI ===== */
            .is-invalid {
                border-color: #dc3545 !important;
            }

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

            #tujuan-table .invalid-feedback {
                position: relative;
                z-index: 10;
            }

            #tujuan-table td.error {
                background-color: #f8d7da !important;
            }

            .form-error-alert {
                border-left: 4px solid #dc3545;
                background-color: #f8d7da;
                border-color: #f5c6cb;
            }

            /* ===== VALIDASI CARD NOTA & EXCHANGE ===== */
            .card-invalid {
                border: 2px solid #dc3545 !important;
                box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
                animation: cardShake 0.5s;
            }

            @keyframes cardShake {

                0%,
                100% {
                    transform: translateX(0);
                }

                10%,
                30%,
                50%,
                70%,
                90% {
                    transform: translateX(-5px);
                }

                20%,
                40%,
                60%,
                80% {
                    transform: translateX(5px);
                }
            }

            .nota-row.card-invalid,
            .exchange-transaction-row.card-invalid {
                border: 2px solid #dc3545 !important;
                background-color: #fff5f5 !important;
            }

            .card-invalid .card-header {
                background-color: #ffe0e0 !important;
            }

            /* Styling untuk radio button yang invalid */
            .form-check.is-invalid {
                border-left: 3px solid #dc3545;
                padding-left: 8px;
                background-color: #fff5f5;
            }

            .form-check.is-invalid .form-check-label {
                color: #dc3545;
            }

            /* ===== EXCHANGE TRANSACTIONS SECTION STYLES ===== */
            .exchange-transaction-row {
                background-color: #ffffff;
                transition: all 0.2s ease;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
                position: relative;
            }

            .exchange-transaction-row:hover {
                box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
            }

            .exchange-rows-container {
                min-height: 100px;
                position: relative;
            }

            .exchange-rows-container:empty {
                display: none;
            }

            /* Exchange tabs styling removed - now using .anggaran-tabs class for consistency */

            /* Copy/Paste Button Styles */
            .copy-paste-btn {
                position: absolute;
                top: 8px;
                right: 90px;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                border: none;
                border-radius: 50%;
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.2s ease;
                box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
                z-index: 10;
            }

            .copy-paste-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
            }

            .copy-paste-btn:active {
                transform: translateY(0);
            }

            .copy-paste-btn.copied {
                background: linear-gradient(135deg, #10b981 0%, #059669 100%);
                animation: pulseSuccess 0.5s ease;
            }

            .paste-btn {
                position: absolute;
                top: 8px;
                right: 50px;
                background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
                color: white;
                border: none;
                border-radius: 50%;
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.2s ease;
                box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
                z-index: 10;
                opacity: 0.5;
            }

            .paste-btn:hover:not(:disabled) {
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4);
                opacity: 1;
            }

            .paste-btn:active {
                transform: translateY(0);
            }

            .paste-btn:disabled {
                cursor: not-allowed;
                opacity: 0.3;
            }

            .paste-btn.has-data {
                opacity: 1;
                animation: pulseOrange 2s infinite;
            }

            @keyframes pulseSuccess {

                0%,
                100% {
                    transform: scale(1);
                }

                50% {
                    transform: scale(1.1);
                }
            }

            @keyframes pulseOrange {

                0%,
                100% {
                    opacity: 1;
                }

                50% {
                    opacity: 0.7;
                }
            }

            .nota-row .copy-paste-btn {
                right: 90px;
            }

            .nota-row .paste-btn {
                right: 50px;
            }
        </style>
    @endpush

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Form Edit Pengajuan Permohonan</h5>
                        </div>
                    </div>
                    <div class="card-body">
                        {{-- EDIT MODE NOTICE --}}
                        <div class="edit-notice">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-info-circle text-warning me-2"></i>
                                <strong>Mode Edit Terbatas</strong>
                                <span class="badge bg-warning text-white fw-bold ms-1">EDIT MODE</span>
                            </div>
                            <p class="mb-0 mt-2 small">
                                Dalam mode edit ini, hanya beberapa field yang dapat diubah untuk menjaga integritas data
                                yang telah disetujui.
                            </p>
                        </div>

                        {{-- FIELD STATUS LEGEND --}}
                        <div class="field-status-legend">
                            <h6 class="mb-2"><i class="fas fa-legend me-1"></i> Keterangan Field:</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="legend-item">
                                        <div class="legend-color legend-editable"></div>
                                        <span class="small"><strong>Dapat diedit:</strong> Field yang bisa diubah</span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="legend-item">
                                        <div class="legend-color legend-readonly"></div>
                                        <span class="small"><strong>Tidak dapat diedit:</strong> Field yang dikunci</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Form pengajuan --}}
                        <form role="form" method="POST" action="{{ route('permohonan.reimburse.personalia.update') }}"
                            id="{{ $dmenu }}-form" enctype="multipart/form-data" novalidate>
                            @csrf
                            @method('POST')

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

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

                            {{-- SHARED TEXTAREA (Only for Izin now) - READONLY --}}
                            <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
                                        <span class="badge bg-danger text-white ms-1">TIDAK DAPAT DIEDIT</span>
                                    </label>
                                    <textarea id="alasan" placeholder="Contoh: Ada keperluan mendadak di rumah"
                                        class="form-control readonly-field @error('alasan') is-invalid @enderror"
                                        name="alasan" readonly>{{ old('alasan', $permohonanPerizinan->alasan) }}</textarea>
                                    <small class="text-muted"><i class="fas fa-lock me-1"></i>Field ini tidak dapat diubah
                                        dalam mode edit</small>
                                    @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 - READONLY --}}
                                <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>
                                        <span class="badge bg-danger text-white ms-1">TIDAK DAPAT DIEDIT</span>
                                    </label>
                                    <div class="input-group">
                                        <input type="text" id="jam_keluar"
                                            class="form-control text-end pe-3 readonly-field no-interact @error('jam_keluar') is-invalid @enderror"
                                            name="jam_keluar"
                                            value="{{ old('jam_keluar', $permohonanPerizinan->jam_keluar ? \Carbon\Carbon::parse($permohonanPerizinan->jam_keluar)->format('d-m-Y H:i') : '') }}"
                                            placeholder="Pilih Tanggal & Waktu" readonly>
                                        <span class="input-group-text"><i class="fas fa-clock"></i></span>
                                    </div>
                                    <small class="text-muted"><i class="fas fa-lock me-1"></i>Jam keluar tidak dapat
                                        diubah</small>
                                    @error('jam_keluar')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>

                                {{-- Jam Masuk / Waktu Kepulangan - EDITABLE --}}
                                <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>
                                        <span class="badge bg-success text-white ms-1">DAPAT DIEDIT</span>
                                    </label>
                                    <div class="input-group">
                                        <input type="text" id="jam_masuk"
                                            class="form-control text-end pe-3 editable-field @error('jam_masuk') is-invalid @enderror"
                                            name="jam_masuk"
                                            value="{{ old('jam_masuk', $permohonanPerizinan->jam_masuk ? \Carbon\Carbon::parse($permohonanPerizinan->jam_masuk)->format('d-m-Y H:i') : '') }}"
                                            placeholder="Pilih Tanggal & Waktu">
                                        <span class="input-group-text"><i class="fas fa-clock"></i></span>
                                    </div>
                                    <small class="text-success"><i class="fas fa-edit me-1"></i>Anda dapat mengubah jam
                                        masuk</small>
                                    @error('jam_masuk')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                {{-- Kategori Izin/Tugas - READONLY --}}
                                <div class="col-md-6 mb-3">
                                    <label for="kategori_perizinan_id" class="form-label">
                                        Kategori Permohonan <span class="text-danger">*</span>
                                        <span class="badge bg-danger text-white ms-1">TIDAK DAPAT DIEDIT</span>
                                    </label>
                                    <select name="kategori_perizinan_id" id="kategori_perizinan_id"
                                        class="form-select readonly-field" required disabled>
                                        <option value="">Pilih Kategori Permohonan</option>
                                        @foreach ($kategoriPerizinan as $perizinan)
                                            <option value="{{ $perizinan->id }}" {{ old('kategori_perizinan_id', $permohonanPerizinan->kategori_perizinan_id) == $perizinan->id ? 'selected' : '' }}>
                                                {{ $perizinan->nama }}
                                            </option>
                                        @endforeach
                                    </select>
                                    {{-- Hidden input untuk mengirim nilai --}}
                                    <input type="hidden" name="kategori_perizinan_id"
                                        value="{{ old('kategori_perizinan_id', $permohonanPerizinan->kategori_perizinan_id) }}">
                                    <small class="text-muted"><i class="fas fa-lock me-1"></i>Kategori tidak dapat diubah
                                        setelah disetujui</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 - READONLY --}}
                                    <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>
                                            <span class="badge bg-danger text-white ms-1">TIDAK DAPAT DIEDIT</span>
                                        </label>
                                        <select name="jenis_izin_id" id="jenis_izin_id" class="form-select readonly-field"
                                            disabled>
                                            <option value="">Pilih Jenis Izin</option>
                                            @foreach ($jenisIzin as $izin)
                                                <option value="{{ $izin->id }}" {{ old('jenis_izin_id', $permohonanPerizinan->jenis_izin_id) == $izin->id ? 'selected' : '' }}>
                                                    {{ $izin->nama }}
                                                </option>
                                            @endforeach
                                        </select>
                                        {{-- Hidden input untuk mengirim nilai --}}
                                        <input type="hidden" name="jenis_izin_id"
                                            value="{{ old('jenis_izin_id', $permohonanPerizinan->jenis_izin_id) }}">
                                        <small class="text-muted"><i class="fas fa-lock me-1"></i>Jenis izin tidak dapat
                                            diubah</small>
                                        @error('jenis_izin_id')
                                            <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 - READONLY --}}
                                <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>
                                            <span class="badge bg-danger text-white ms-1">TIDAK DAPAT DIEDIT</span>
                                        </label>
                                        <div class="input-group">
                                            <input type="text" id="nik_karyawan_display_izin"
                                                class="form-control readonly-field"
                                                placeholder="Karyawan sudah dipilih sebelumnya" readonly>
                                            <span class="input-group-text bg-secondary text-light"><i
                                                    class="fas fa-lock"></i></span>
                                        </div>
                                        <small class="text-muted"><i class="fas fa-lock me-1"></i>Daftar karyawan tidak
                                            dapat diubah</small>
                                    </div>
                                </div>

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

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

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">
                                            Tipe Tugas <span class="text-danger">*</span>
                                            <span class="badge bg-danger text-white ms-1">TIDAK DAPAT DIEDIT</span>
                                        </label>
                                        <div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input readonly-field" type="radio"
                                                    name="tipe_tugas" id="tipe_personal" value="personal" {{ old('tipe_tugas', $permohonanPerizinan->tipe_tugas) == 'personal' ? 'checked' : '' }} disabled>
                                                <label class="form-check-label text-muted"
                                                    for="tipe_personal">Personal</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input readonly-field" type="radio"
                                                    name="tipe_tugas" id="tipe_group" value="group" {{ old('tipe_tugas', $permohonanPerizinan->tipe_tugas) == 'group' ? 'checked' : '' }} disabled>
                                                <label class="form-check-label text-muted" for="tipe_group">Group</label>
                                            </div>
                                        </div>
                                        {{-- Hidden input untuk mengirim nilai --}}
                                        <input type="hidden" name="tipe_tugas"
                                            value="{{ old('tipe_tugas', $permohonanPerizinan->tipe_tugas) }}">
                                        <small class="text-muted"><i class="fas fa-lock me-1"></i>Tipe tugas tidak dapat
                                            diubah</small>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">
                                            Tujuan <span class="text-danger">*</span>
                                            <span class="badge bg-success text-white ms-1">DAPAT DIEDIT</span>
                                        </label>
                                        <div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input editable-field" type="radio"
                                                    name="tujuan_tugas" id="tujuan_dalam_negeri" value="dalam_negeri" {{ old('tujuan_tugas', $permohonanPerizinan->tujuan_tugas) == 'dalam_negeri' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="tujuan_dalam_negeri">Dalam
                                                    Negeri</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input editable-field" type="radio"
                                                    name="tujuan_tugas" id="tujuan_luar_negeri" value="luar_negeri" {{ old('tujuan_tugas', $permohonanPerizinan->tujuan_tugas) == 'luar_negeri' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="tujuan_luar_negeri">Luar
                                                    Negeri</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input editable-field" type="radio"
                                                    name="tujuan_tugas" id="tujuan_combined" value="combined" {{ old('tujuan_tugas', $permohonanPerizinan->tujuan_tugas) == 'combined' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="tujuan_combined">Gabungan</label>
                                            </div>
                                        </div>
                                        <small class="text-success"><i class="fas fa-edit me-1"></i>Anda dapat mengubah
                                            tujuan</small>
                                    </div>
                                </div>

                                {{-- Karyawan (Hanya untuk Tipe Group) - READONLY --}}
                                <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>
                                            <span class="badge bg-danger text-white ms-1">TIDAK DAPAT DIEDIT</span>
                                        </label>
                                        <div class="input-group">
                                            <input type="text" id="nik_karyawan_display_tugas"
                                                class="form-control readonly-field"
                                                placeholder="Karyawan sudah dipilih sebelumnya" readonly>
                                            <span class="input-group-text bg-secondary text-light"><i
                                                    class="fas fa-lock"></i></span>
                                        </div>
                                        <small class="text-muted"><i class="fas fa-lock me-1"></i>Daftar karyawan tidak
                                            dapat diubah</small>
                                    </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>
                                            <span class="badge bg-warning text-white fw-bold ms-1">AUTO CALCULATED</span>
                                        </label>
                                        <input type="number" name="total_hari" id="total_hari"
                                            class="form-control text-end readonly-field" readonly
                                            value="{{ old('total_hari', $permohonanPerizinan->total_hari ?? 0) }}">
                                        <small class="text-muted"><i class="fas fa-calculator me-1"></i>Otomatis dihitung
                                            dari daftar tanggal</small>
                                    </div>
                                </div>

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

                                {{-- DYNAMIC TABLE FOR TUJUAN --}}
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <label class="form-label">
                                            Rincian Tujuan <span class="text-danger">*</span>
                                            <span class="badge bg-success text-white ms-1">DAPAT DIEDIT</span>
                                        </label>
                                        <small class="text-success d-block mb-2"><i class="fas fa-edit me-1"></i>Anda
                                            dapat menambah, menghapus, atau mengubah rincian tujuan perjalanan</small>
                                        <button type="button" class="btn btn-outline-primary btn-sm mb-2"
                                            id="refresh-tujuan-btn">
                                            <i class="fas fa-sync-alt me-1"></i> Refresh Rincian Tujuan</button>
                                        <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">
                                                    {{-- JS will populate this with existing data from initialTujuanData
                                                    --}}
                                                </tbody>
                                            </table>
                                        </div>
                                        <button type="button" class="btn btn-sm btn-success mt-2" id="add-tujuan-row-btn">
                                            <i class="fas fa-plus me-1"></i> Tambah Tujuan
                                        </button>
                                    </div>
                                </div>

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

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

                                {{-- Tombol untuk menampilkan formulir anggaran - DISABLED --}}
                                <div class="row mt-4" id="add-anggaran-button-container" style="display: none;">
                                    <div class="col-12">
                                        <button type="button" class="btn btn-secondary" id="btn-toggle-anggaran" disabled>
                                            <i class="fas fa-lock me-1"></i> Rincian Anggaran (Tidak dapat diedit)
                                        </button>
                                        <small class="text-muted d-block mt-1"><i
                                                class="fas fa-info-circle me-1"></i>Anggaran tidak dapat diubah dalam mode
                                            edit</small>
                                    </div>
                                </div>

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

                                    <hr class="horizontal dark">
                                    <p class="text-uppercase text-sm">
                                        Formulir Anggaran <span class="text-danger">*</span>
                                        <span class="badge bg-danger text-white ms-1">TIDAK DAPAT DIEDIT</span>
                                    </p>
                                    <small class="text-muted d-block mb-3"><i class="fas fa-lock me-1"></i>Data anggaran
                                        hanya dapat dilihat, tidak dapat diubah</small>

                                    <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>
                                </div>
                                {{-- [END] NEW ANGGARAN SECTION STRUCTURE --}}
                            </div>

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

                                {{-- Hidden input for NIKs (SHARED) --}}
                                <input type="hidden" name="nik_karyawan" id="nik_karyawan"
                                    value="{{ old('nik_karyawan', $karyawanPemohon->pluck('nik')->toJson() ?? '[]') }}">
                                @error('nik_karyawan')
                                    <span class="text-danger d-block">{{ $message }}</span>
                                @enderror
                            </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
                                        <span class="badge bg-success text-white ms-1">DAPAT DIEDIT</span>
                                    </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>
                                    <small class="text-success"><i class="fas fa-edit me-1"></i>Anda dapat menghapus atau
                                        menambah tanggal sesuai kebutuhan</small>
                                </div>
                                <input type="hidden" name="tanggal_array" id="tanggal_array"
                                    value="{{ old('tanggal_array', $tanggalArray ?? '[]') }}">
                                @error('tanggal_array')
                                    <span class="text-danger d-block">{{ $message }}</span>
                                @enderror
                                <div class="nav-wrapper" id="noted">
                                    <code>Note : Hapus tanggal yang merupakan cuti bersama, libur nasional, dan
                                            weekend.</code>
                                </div>
                            </div>

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

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

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

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

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

                            {{-- Nota Reimbursement Section (digabung dalam form utama) --}}
                            <div class="container-fluid py-4">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="card">
                                            <div class="card-header pb-0">
                                                <div class="d-lg-flex">
                                                    <div>
                                                        <h5 class="mb-0">Form Upload Nota untuk Reimbursement</h5>
                                                        <p class="text-sm mb-0">
                                                            Upload dan kelola nota-nota pengeluaran untuk proses
                                                            reimbursement
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card-body px-0 pb-0">
                                                <div id="notaReimburseForm" class="px-3 py-3">
                                                    <h6 class="mb-3"><i class="fas fa-users me-1"></i>Daftar Nota per
                                                        Karyawan</h6>
                                                    {{-- Outer Employee Tabs --}}
                                                    <ul class="nav nav-tabs flex-wrap anggaran-tabs" id="notaKaryawanTabs"
                                                        role="tablist">
                                                        {{-- Employee tabs generated by JS --}}
                                                    </ul>
                                                    <div class="tab-content mt-3" id="notaKaryawanTabContent">
                                                        {{-- Employee tab panes generated by JS (each contains its own date
                                                        tabs) --}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Exchange Transactions Section (SECTION TERPISAH) --}}
                            <div class="container-fluid py-4">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="card">
                                            <div class="card-header pb-0">
                                                <div class="d-lg-flex">
                                                    <div>
                                                        <h5 class="mb-0"><i class="fas fa-exchange-alt me-2"></i>Form
                                                            Upload Exchange</h5>
                                                        <p class="text-sm mb-0">
                                                            Kelola transaksi exchange untuk karyawan yang melakukan
                                                            penukaran mata uang
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card-body px-0 pb-0">
                                                <div id="exchangeTransactionsForm" class="px-3 py-3">
                                                    <h6 class="mb-3"><i class="fas fa-users me-1"></i>Daftar Exchange
                                                        per Karyawan</h6>
                                                    {{-- Exchange Employee Tabs --}}
                                                    <ul class="nav nav-tabs flex-wrap anggaran-tabs"
                                                        id="exchangeKaryawanTabs" role="tablist">
                                                        {{-- Employee tabs generated by JS --}}
                                                    </ul>
                                                    <div class="tab-content mt-3" id="exchangeKaryawanTabContent">
                                                        {{-- Employee tab panes generated by JS --}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Unified Save Section (akhir form utama) --}}
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="d-flex justify-content-end mt-4 mb-5">
                                            <button type="button" class="btn btn-secondary me-2" onclick="history.back()"><i
                                                    class="fas fa-arrow-left me-1"></i><span
                                                    class="font-weight-bold">Kembali</span></button>
                                            @if ($authorize->edit == '1')
                                                <button type="submit" class="btn btn-primary me-2" id="save-btn"><i
                                                        class="fas fa-save me-1"></i><span class="font-weight-bold">Simpan
                                                        Perubahan</span></button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Floating Action Button (FAB) with Bubble Menu --}}
    <div class="fab-backdrop" id="fabBackdrop"></div>
    <div class="fab-container">
        <div class="fab-menu" id="fabMenu">
            {{-- Scroll to Nota --}}
            <div class="fab-menu-item">
                <span class="fab-menu-item-label">Scroll ke Nota</span>
                <button type="button" class="fab-menu-item-btn scroll-nota-btn" id="scrollToNotaBtn"
                    title="Scroll ke Form Nota">
                    <i class="fas fa-receipt"></i>
                </button>
            </div>

            {{-- Add Nota --}}
            <div class="fab-menu-item">
                <span class="fab-menu-item-label">Tambah Nota</span>
                <button type="button" class="fab-menu-item-btn nota-btn" id="addNotaFloatingBtn"
                    title="Tambah Nota (Hari Ini)">
                    <i class="fas fa-plus"></i>
                </button>
            </div>

            {{-- Scroll to Exchange --}}
            <div class="fab-menu-item">
                <span class="fab-menu-item-label">Scroll ke Exchange</span>
                <button type="button" class="fab-menu-item-btn scroll-exchange-btn" id="scrollToExchangeBtn"
                    title="Scroll ke Form Exchange">
                    <i class="fas fa-exchange-alt"></i>
                </button>
            </div>

            {{-- Add Exchange --}}
            <div class="fab-menu-item">
                <span class="fab-menu-item-label">Tambah Exchange</span>
                <button type="button" class="fab-menu-item-btn exchange-btn" id="addExchangeFloatingBtn"
                    title="Tambah Exchange (Hari Ini)">
                    <i class="fas fa-dollar-sign"></i>
                </button>
            </div>
        </div>

        {{-- Main FAB Button --}}
        <button type="button" class="fab-main-btn pulse" id="fabMainBtn" title="Menu Aksi Cepat">
            <i class="fas fa-plus"></i>
        </button>
    </div>
    </form>
@endsection

@php
    // Persiapkan data 'old' untuk JavaScript jika terjadi kegagalan validasi.
    $submittedTujuanData = null;
    if (old('rincian_tujuan')) {
        $oldTujuan = old('rincian_tujuan');
        $submittedTujuanData = [];
        $count = count($oldTujuan['tujuan'] ?? []);

        for ($i = 0; $i < $count; $i++) {
            $karyawanNiks = json_decode($oldTujuan['karyawan'][$i] ?? '[]', true) ?: [];
            // Ambil detail nama karyawan berdasarkan NIK yang di-submit
            $karyawanDetails = collect($profiles)
                ->whereIn('nik', $karyawanNiks)
                ->map(fn($p) => ['nik' => $p->nik, 'nama' => $p->nama])
                ->values()
                ->all();

            $submittedTujuanData[] = [
                'tujuan' => $oldTujuan['tujuan'][$i] ?? null,
                'tujuan_id' => $oldTujuan['tujuan_id'][$i] ?? null,
                'status' => $oldTujuan['status'][$i] ?? null,
                'keterangan' => $oldTujuan['keterangan'][$i] ?? null,
                'karyawan' => $karyawanDetails,
                'tanggal_mulai' => $oldTujuan['tanggal_mulai'][$i] ?? null,
                'tanggal_berakhir' => $oldTujuan['tanggal_berakhir'][$i] ?? null,
                'jumlah_hari' => $oldTujuan['jumlah_hari'][$i] ?? null,
            ];
        }
    }

    // `withInput()` akan menyimpan array yang sudah di-decode dari JSON,
    // jadi kita tidak perlu json_decode lagi.
    $submittedNotaData = old('notaReimburse');

    // Persiapkan data 'old' untuk exchange transactions jika terjadi kegagalan validasi
    $submittedExchangeData = old('exchangeTransactions');
@endphp

@push('js')
    {{-- Flatpickr --}}
    <script src="{{ asset('/') }}assets/js/flatpickr.min.js"></script>


    <script>
        window.triggerAddNota = function () {
            const realAddBtn = document.getElementById('addNotaFloatingBtn');
            if (realAddBtn) realAddBtn.click();
        }
        $(document).off('click', '#refresh-tujuan-btn').on('click', '#refresh-tujuan-btn', function (e) {
            if (typeof window.refreshTujuan === 'function') window.refreshTujuan();
            else console.error('refreshTujuan belum didefinisikan saat tombol diklik');
        });
        document.addEventListener("DOMContentLoaded", function () {
            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();
                });
            });
            let isInitialLoad = true;
            let tujuanDataTable;

            // Ambil semua error validasi dari backend jika ada
            const validationErrors = @json($errors->toArray());

            // Prioritaskan data yang dikirim kembali (old input) daripada data awal dari database
            const submittedTujuanData = @json($submittedTujuanData);
            let initialTujuanData = submittedTujuanData || @json($rincianTujuan ?? []);
            const originalTujuanData = @json($rincianTujuan ?? []);
            // window.initialTujuanData = initialTujuanData;
            window.originalTujuanData = JSON.parse(JSON.stringify(originalTujuanData));

            // Gunakan data nota yang di-submit kembali (jika validasi gagal) sebagai prioritas utama
            const submittedNotaData = @json($submittedNotaData);
            const notaReimburseData = submittedNotaData || @json($notaReimburse ?? []);

            // Gunakan data exchange yang di-submit kembali (jika validasi gagal) sebagai prioritas utama
            const submittedExchangeData = @json($submittedExchangeData);
            const exchangeTransactionsData = submittedExchangeData || @json($exchangeTransactions ?? []);

            const initialAnggaranData = @json($anggaranDataForJs ?? new stdClass());

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

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

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

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

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

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

            function clearFields(...elementIds) {
                elementIds.forEach(id => {
                    const element = getElem(id);
                    if (!element) return;
                    if (id === 'tujuan-table-body' && tujuanDataTable) {
                        tujuanDataTable.clear().draw();
                        return;
                    }
                    const tagName = element.tagName.toLowerCase();
                    const type = element.type?.toLowerCase();
                    if (tagName === 'tbody') element.innerHTML = '';
                    else if (tagName === 'select') element.value = '';
                    else if (tagName === 'textarea') element.value = '';
                    else if (type === '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();
            }

            // --- SAVE BUTTON LOADING STATE MANAGEMENT ---
            const form = document.getElementById('{{ $dmenu }}-form');
            const saveBtn = document.getElementById('save-btn');

            if (!form || !saveBtn) return; // Exit if elements not present

            const originalHtml = saveBtn.innerHTML;

            function startSaveLoading() {
                if (saveBtn.dataset.loading === 'true') return; // Already loading
                saveBtn.dataset.loading = 'true';
                saveBtn.disabled = true;
                saveBtn.classList.add('disabled');
                // Use Bootstrap 5 spinner (already available in Argon/Bootstrap stack)
                saveBtn.innerHTML =
                    '<span class="spinner-border spinner-border-sm align-middle me-2" role="status" aria-hidden="true"></span><span>Menyimpan...</span>';
            }

            function resetSaveLoading() {
                // Exposed globally in case future AJAX save wants to re-enable
                saveBtn.dataset.loading = 'false';
                saveBtn.disabled = false;
                saveBtn.classList.remove('disabled');
                saveBtn.innerHTML = originalHtml;
            }

            // Attach to submit: only trigger if the submit source is the save button (not Post, etc.)
            form.addEventListener('submit', function (e) {
                // If another handler already prevented default (e.g., validation), don't lock yet
                if (e.defaultPrevented) return;
                // Only lock if the active element is the save button OR the save button is visible and post button not clicked
                const active = document.activeElement;
                if (active === saveBtn || (active && active.type === 'submit' && active.id ===
                    'save-btn')) {
                    startSaveLoading();
                }
            }, true); // capture to run early

            // Also guard against super fast double clicks
            saveBtn.addEventListener('click', function (e) {
                if (saveBtn.dataset.loading === 'true') {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    return false;
                }
                // Defer start until we know form not blocked by HTML5 validation
                setTimeout(() => {
                    if (form.checkValidity()) {
                        startSaveLoading();
                    }
                }, 0);
            });

            // Provide a global hook if later code (AJAX validation, etc.) needs to re-enable the button
            window.resetSaveButtonLoading = resetSaveLoading;
            // --- END SAVE BUTTON LOADING STATE MANAGEMENT ---

            // --- KARYAWAN SELECTION LOGIC (SHARED - VIEW ONLY) ---
            let selectedEmployees = [];
            let listProfilesDataTable, izinEmployeesDataTable, tugasEmployeesDataTable;

            function initializeDataTables() {
                if (!listProfilesDataTable) listProfilesDataTable = $('#list_profiles').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",
                        "render": () =>
                            `<button type="button" class="btn btn-secondary btn-sm" disabled><i class="fas fa-trash"></i></button>`
                    }],
                    destroy: true
                };
                if (!izinEmployeesDataTable) izinEmployeesDataTable = $('#izinSelectedEmployeesTable').DataTable(
                    commonTableOptions);
                if (!tugasEmployeesDataTable) tugasEmployeesDataTable = $('#tugasSelectedEmployeesTable').DataTable(
                    commonTableOptions);
            }

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

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

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

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

            function ensureCurrentUserSelectedIfApplicable() {
                if (!currentUserNIK) return;
                const kat = kategoriSelect ? kategoriSelect.value : '';
                const jenis = jenisIzinSelect ? jenisIzinSelect.value : '';
                const isKategoriTugas = (kat === '2');
                const shouldApply = isKategoriTugas || (kat === '1' && jenis === '4');
                if (!shouldApply) return;
                if (selectedEmployees.some(e => e.nik === currentUserNIK)) return;
                const me = Array.isArray(allProfiles) ? allProfiles.find(p => p.nik === currentUserNIK) : null;
                if (!me) return;
                selectedEmployees.push(me);
            }

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

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

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

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

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

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

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

            // --- DATE-TIME PICKER LOGIC (EDIT MODE - LIMITED) ---
            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,
                    clickOpens: false,
                    allowInput: false,
                    onOpen: (_, __, inst) => inst.close()
                });

                fpJamMasuk = flatpickr("#jam_masuk", {
                    ...commonOptions,
                    onChange: handleDateTimeChange
                });

                window.fpJamKeluar = fpJamKeluar;
                window.fpJamMasuk = fpJamMasuk;
            }

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

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

            function jenisIzinSwitched() {
                // Fungsi ini dipanggil dari masterSwitch, tapi interaksi pengguna dinonaktifkan
            }

            // --- FORMULIR TUGAS LOGIC ---
            function initTugasComponents() {
                if (addTujuanRowBtn) addTujuanRowBtn.addEventListener('click', addTujuanRow);
                $('#tujuan-table').on('click', '.remove-tujuan-btn', function () {
                    tujuanDataTable.row($(this).closest('tr')).remove().draw();
                });
            }

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

            function handleTipeTugasChange() {
                // Fungsi ini dipanggil dari masterSwitch, tapi interaksi pengguna dinonaktifkan
            }

            function initTujuanDataTable() {
                if (tujuanDataTable) return;
                const negaraList = @json($countries ?? []);
                tujuanDataTable = $('#tujuan-table').DataTable({
                    responsive: true,
                    paging: false,
                    info: false,
                    searching: false,
                    ordering: false,
                    autoWidth: false,
                    data: initialTujuanData, // Menggunakan data yang sudah diprioritaskan
                    columns: [{
                        "data": "tujuan",
                        "render": (data, type, row, meta) =>
                            `<div data-field-name="tujuan" data-row-index="${meta.row}">
                                        <button type="button" class="btn btn-sm ${data ? 'btn-outline-primary' : 'btn-outline-secondary'} pick-country-btn" data-row-index="${meta.row}">
                                            <i class="fas fa-globe-asia me-1"></i>${escapeHtml(data) || 'Pilih Negara'}
                                        </button>
                                        <input type="hidden" name="rincian_tujuan[tujuan][]" class="tujuan-negara-hidden" value="${escapeHtml(data) || ''}">
                                        <input type="hidden" name="rincian_tujuan[tujuan_id][]" class="tujuan-negara-id-hidden" value="${row.tujuan_id || ''}">
                                     </div>`
                    },
                    {
                        "data": "status",
                        "className": "text-center align-middle",
                        "render": (data) =>
                            `<span class="tujuan-status-text">${(data || '').toUpperCase()}</span><input type="hidden" name="rincian_tujuan[status][]" class="tujuan-status-hidden" value="${data || ''}">`
                    },
                    {
                        "data": "keterangan",
                        "render": (data, type, row, meta) =>
                            `<textarea name="rincian_tujuan[keterangan][]" class="form-control form-control-sm tujuan-keterangan" rows="2" placeholder="Contoh: Kunjungan ke klien A" required data-field-name="keterangan" data-row-index="${meta.row}">${escapeHtml(data || '')}</textarea>`
                    },
                    {
                        "data": "karyawan",
                        "className": "employee-badges-container align-middle",
                        "render": function (data, type, row, meta) {
                            const rowKaryawan = Array.isArray(data) ? data : [];
                            let badgesHtml = rowKaryawan.length > 0 ? rowKaryawan.map(emp =>
                                `<span class="badge bg-info me-1 mb-1 employee-in-tujuan" data-nik="${emp.nik}">
                                        <span onclick="window.showFullNameModal('${String(emp.nama || '').replace(/'/g, "\\'")}')" style="cursor: pointer;" title="${escapeHtml(emp.nama)}">${(emp.nama || '...').split(' ')[0]}</span>
                                        <i class="fas fa-times-circle" onclick="window.removeEmployeeFromTujuan(this, '${emp.nik}', ${meta.row})" style="cursor: pointer; margin-left: 5px;" title="Hapus Karyawan"></i>
                                        </span>`
                            ).join('') : '<small class="text-muted">Pilih karyawan</small>';

                            const niksInRow = rowKaryawan.map(e => e.nik);
                            const hiddenInput =
                                `<input type="hidden" name="rincian_tujuan[karyawan][]" value='${JSON.stringify(niksInRow)}'>`;

                            return `<div class="d-flex align-items-center flex-wrap" data-field-name="karyawan" data-row-index="${meta.row}">${badgesHtml}${hiddenInput}</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 data-field-name="tanggal_mulai">
                                            <span class="input-group-text">s/d</span>
                                            <input type="text" class="form-control form-control-sm tujuan-end" placeholder="Akhir" autocomplete="off" required data-field-name="tanggal_berakhir">
                                        </div>
                                        <input type="number" class="form-control form-control-sm text-end tujuan-jumlah-hari" value="${Number(data) || 1}" min="1" readonly required data-field-name="jumlah_hari">
                                        <input type="hidden" name="rincian_tujuan[tanggal_mulai][]" class="tujuan-start-hidden" value="${row.tanggal_mulai || ''}">
                                        <input type="hidden" name="rincian_tujuan[tanggal_berakhir][]" class="tujuan-end-hidden" value="${row.tanggal_berakhir || ''}">
                                        <input type="hidden" name="rincian_tujuan[jumlah_hari][]" class="tujuan-jumlah-hari-hidden" value="${Number(data) || 1}">
                                    </div>`
                    },
                    {
                        "data": null,
                        "className": "text-center align-middle",
                        "render": () =>
                            `<button type="button" class="btn btn-sm btn-danger remove-tujuan-btn"><i class="fas fa-trash"></i></button>`
                    }
                    ],
                    drawCallback: function () {
                        const api = this.api();
                        // Menampilkan error validasi setelah tabel di-render
                        api.rows({
                            page: 'current'
                        }).every(function () {
                            const rowIndex = this.index();
                            const rowNode = this.node();

                            const fields = ['tujuan', 'keterangan', 'karyawan', 'tanggal_mulai',
                                'tanggal_berakhir', 'jumlah_hari'
                            ];

                            fields.forEach(field => {
                                const errorKey = `rincian_tujuan.${field}.${rowIndex}`;
                                if (validationErrors[errorKey]) {
                                    const errorMessage = validationErrors[errorKey][0];
                                    let element = $(rowNode).find(
                                        `[data-field-name="${field}"]`).first();

                                    if (element.length > 0) {
                                        let targetElement = element;
                                        // Cari elemen input atau textarea yang sebenarnya untuk ditandai
                                        let inputElement = element.is(
                                            'input, textarea') ? element : element
                                                .find(
                                                    'input, textarea').first();
                                        inputElement.addClass('is-invalid');

                                        // Untuk input-group, tambahkan pesan error setelah group-nya
                                        if (element.parent().hasClass('input-group')) {
                                            targetElement = element.parent();
                                        }

                                        // Hapus error lama sebelum menambah yang baru untuk mencegah duplikasi
                                        targetElement.closest('td').find(
                                            '.invalid-feedback').remove();

                                        // Tambahkan pesan error baru
                                        $('<div class="invalid-feedback d-block"></div>')
                                            .text(errorMessage).insertAfter(
                                                targetElement);
                                    }
                                }
                            });
                        });

                        // PERBAIKAN: Timeout lebih besar untuk memastikan DOM siap
                        setTimeout(() => {
                            console.log('Initializing tujuan row pickers after draw...');
                            initTujuanRowPickers();
                        }, 100);
                    },
                    // Sisa dari fungsi ini (event listeners, dll) tetap sama
                    createdRow: function (row, data, dataIndex) {
                        // Sisa kode...
                    }
                });

                window.tujuanDataTable = tujuanDataTable;
                let countriesListDT = null;

                function ensureCountriesListTable() {
                    if (countriesListDT) return countriesListDT;
                    countriesListDT = $('#countriesListTable').DataTable({
                        paging: true,
                        searching: true,
                        info: true,
                        ordering: false,
                        data: negaraList,
                        columns: [{
                            data: 'id'
                        }, {
                            data: 'nama'
                        }, {
                            data: 'state',
                            render: s => (s || '').toUpperCase()
                        },
                        {
                            data: null,
                            orderable: false,
                            className: 'text-center',
                            render: (d, t, r) =>
                                `<button type="button" class="btn btn-sm btn-primary select-country" data-id="${r.id}" data-nama="${r.nama}" data-state="${r.state}">Pilih</button>`
                        }
                        ]
                    });
                    $('#countriesListTable tbody').on('click', 'button.select-country', function () {
                        const $btn = $(this);
                        const id = $btn.data('id'),
                            nama = $btn.data('nama'),
                            state = $btn.data('state');
                        const rowIndex = $('#countryPickerModal').data('targetRowIndex');
                        if (rowIndex == null) return;
                        const rowApi = tujuanDataTable.row(rowIndex);
                        const rowData = rowApi.data() || {};
                        rowData.tujuan_id = id;
                        rowData.tujuan = nama;
                        rowData.status = state;
                        rowApi.data(rowData).draw(false);
                        const $row = $(tujuanDataTable.row(rowIndex).node());
                        $row.find('input.tujuan-negara-hidden').val(nama);
                        $row.find('input.tujuan-negara-id-hidden').val(id);
                        $row.find('.tujuan-status-text').text((state || '').toUpperCase());
                        $row.find('.tujuan-status-hidden').val(state || '');
                        const $btnPick = $row.find('button.pick-country-btn');
                        $btnPick.removeClass('btn-outline-secondary').addClass('btn-outline-primary').html(
                            `<i class="fas fa-globe-asia me-1"></i>${nama}`);
                        $('#countryPickerModal').modal('hide');
                    });
                    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;

                $('#countryPickerModal').on('shown.bs.modal', ensureCountriesListTable);
                tujuanDataTable.on('preDraw', () => {
                    if (typeof snapshotTujuanUIIntoRowData === 'function') snapshotTujuanUIIntoRowData();
                });
                tujuanDataTable.on('draw', function () {
                    $('#tujuan-table tbody').off('click', '.pick-country-btn').on('click',
                        '.pick-country-btn',
                        function () {
                            $('#countryPickerModal').data('targetRowIndex', $(this).data('row-index'))
                                .modal('show');
                        });
                    initTujuanRowPickers();
                    $(document).off('focusin.tujuanFp',
                        '#tujuan-table tbody input.tujuan-start, #tujuan-table tbody input.tujuan-end')
                        .on('focusin.tujuanFp',
                            '#tujuan-table tbody input.tujuan-start, #tujuan-table tbody input.tujuan-end',
                            function (e) {
                                if (!this._flatpickr) initTujuanRowPickers();
                            });
                });
                tujuanDataTable.draw();
            }

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

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

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

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

            // Helper function to escape special characters in CSS selectors
            const escapeCssSelector = (str) => {
                // Escape dots and other special CSS characters
                return String(str).replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, '\\$1');
            };
            window.refreshTujuan = function () {
                if (!window.originalTujuanData) {
                    console.error("originalTujuanData tidak ditemukan");
                    return;
                }


                initialTujuanData = JSON.parse(JSON.stringify(window.originalTujuanData));

                tujuanDataTable.clear();
                tujuanDataTable.rows.add(initialTujuanData);
                tujuanDataTable.draw(false);

                setTimeout(() => {
                    initTujuanRowPickers();
                }, 120);


            }

            function initTujuanRowPickers() {
                const startGlobal = (fpJamKeluar && fpJamKeluar.selectedDates[0]) ? fpJamKeluar.selectedDates[0] :
                    null;
                const endGlobal = (fpJamMasuk && fpJamMasuk.selectedDates[0]) ? fpJamMasuk.selectedDates[0] : null;



                // PERBAIKAN: Jangan return dulu, biarkan flatpickr tetap terinisialisasi
                // bahkan jika startGlobal/endGlobal belum ada
                $('#tujuan-table tbody tr').each(function () {
                    const $row = $(this);
                    const startInput = $row.find('input.tujuan-start')[0],
                        endInput = $row.find('input.tujuan-end')[0];
                    const jumlahEl = $row.find('input.tujuan-jumlah-hari')[0],
                        startHidden = $row.find('input.tujuan-start-hidden')[0];
                    const endHidden = $row.find('input.tujuan-end-hidden')[0],
                        jumlahHidden = $row.find('input.tujuan-jumlah-hari-hidden')[0];
                    if (!startInput) return;

                    const commonOpts = {
                        enableTime: false,
                        dateFormat: 'd-m-Y',
                        time_24hr: true,
                        allowInput: false,
                        enable: enabledDates
                    };

                    let fpStart = startInput._flatpickr,
                        fpEnd = endInput ? endInput._flatpickr : null;

                    if (!fpStart) fpStart = flatpickr(startInput, {
                        ...commonOpts,
                        minDate: startGlobal || 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,
                        onChange: function () {
                            recalcTujuanRowDays(fpStart, fpEnd, jumlahEl, startHidden,
                                endHidden, jumlahHidden);
                        }
                    });

                    $row.data({
                        fpStart,
                        fpEnd
                    });

                    // PERBAIKAN: Cek dan restore nilai dari hidden input
                    const prevStart = (startHidden && startHidden.value) ? startHidden.value : '';
                    const prevEnd = (endHidden && endHidden.value) ? endHidden.value : '';

                    console.log('Row date values - prevStart:', prevStart, 'prevEnd:', prevEnd,
                        'jumlahHidden:', jumlahHidden ? jumlahHidden.value : 'N/A');

                    if (prevStart && prevEnd) {
                        // Parse format Y-m-d dari hidden input
                        const [py, pm, pd] = prevStart.split('-');
                        const [ey, em, ed] = prevEnd.split('-');
                        const startDate = new Date(Number(py), Number(pm) - 1, Number(pd));
                        const endDate = new Date(Number(ey), Number(em) - 1, Number(ed));

                        console.log('Parsed dates - startDate:', startDate, 'endDate:', endDate);

                        // Set date ke flatpickr (false = don't trigger onChange)
                        fpStart.setDate(startDate, false);
                        fpEnd.setDate(endDate, false);

                        // PERBAIKAN: Tampilkan tanggal di input yang terlihat
                        if (startInput) startInput.value = fpStart.formatDate(startDate, 'd-m-Y');
                        if (endInput) endInput.value = fpEnd.formatDate(endDate, 'd-m-Y');

                        console.log('Set visible inputs - start:', startInput ? startInput.value : 'N/A',
                            'end:', endInput ? endInput.value : 'N/A');

                        // PERBAIKAN: Set jumlah hari dari hidden input atau hitung ulang
                        if (jumlahHidden && jumlahHidden.value) {
                            const savedDays = Number(jumlahHidden.value) || 1;
                            if (jumlahEl) jumlahEl.value = savedDays;
                            console.log('Set jumlah hari from hidden:', savedDays);
                        } else {
                            // Hitung ulang jika tidak ada nilai tersimpan
                            recalcTujuanRowDays(fpStart, fpEnd, jumlahEl, startHidden, endHidden,
                                jumlahHidden);
                            console.log('Recalculated jumlah hari');
                        }
                    } else if (fpStart.selectedDates[0] && fpEnd && fpEnd.selectedDates[0]) {
                        // Jika flatpickr sudah memiliki tanggal terpilih, hitung hari
                        recalcTujuanRowDays(fpStart, fpEnd, jumlahEl, startHidden, endHidden, jumlahHidden);
                    } else {
                        // PERBAIKAN: Hanya set default jika startGlobal dan endGlobal ada
                        const hasNonDateData = $row.find('.tujuan-negara-hidden').val() ||
                            $row.find('.tujuan-keterangan').val();

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

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

                // PERBAIKAN: Update visible date inputs juga (format d-m-Y untuk user)
                const startVisibleInput = fpStart.input;
                const endVisibleInput = fpEnd ? fpEnd.input : null;
                if (startVisibleInput && s) startVisibleInput.value = fpStart.formatDate(s, 'd-m-Y');
                if (endVisibleInput && e) endVisibleInput.value = fpEnd.formatDate(e, 'd-m-Y');
            }

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

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

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

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

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

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

            // GANTI FUNGSI LAMA DENGAN YANG INI
            function renderReadOnlyAnggaran() {
                const hasAnggaran = initialAnggaranData && Object.keys(initialAnggaranData).length > 0;
                if (!hasAnggaran || !selectedEmployees || selectedEmployees.length === 0) {
                    setDisplay(anggaranSectionContainer, 'none');
                    return;
                }

                setDisplay(anggaranSectionContainer, 'block');
                updateAnggaranHintVisibility();

                const tabNav = document.getElementById('anggaran-employee-tabs');
                const tabContent = document.getElementById('anggaran-tab-content');
                if (!tabNav || !tabContent) return;
                tabNav.innerHTML = '';
                tabContent.innerHTML = '';

                selectedEmployees.forEach((emp, index) => {
                    const nik = emp.nik;
                    const nikKey = safeId(nik);
                    const empAnggaran = initialAnggaranData[nik];

                    // Lanjutkan hanya jika ada data anggaran untuk karyawan ini
                    if (!empAnggaran) return;

                    const isActive = index === 0;

                    // Buat Navigasi Tab
                    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">${escapeHtml(emp.nama)}</button>`;
                    tabNav.appendChild(tabItem);

                    // Buat Konten Tab
                    const tabPane = document.createElement('div');
                    tabPane.className = `anggaran-tab-pane ${isActive ? 'active' : ''}`;
                    tabPane.id = `anggaran-pane-${nikKey}`;

                    let defaultBiayaHtml = '';

                    // ===== MULAI PERBAIKAN =====
                    // Cek jika 'default' ada dan merupakan sebuah object
                    if (empAnggaran.default && typeof empAnggaran.default === 'object' && !Array.isArray(
                        empAnggaran.default)) {
                        // Lakukan iterasi pada entri object [key, value] -> [biayaId, itemsArray]
                        Object.entries(empAnggaran.default).forEach(([biayaId, itemsArray]) => {
                            // `itemsArray` adalah array yang berisi object {jumlah, currency}
                            if (Array.isArray(itemsArray) && itemsArray.length > 0) {
                                // Cari nama biaya berdasarkan biayaId
                                const biayaInfo = defaultBiaya.find(b => String(b.id) === String(
                                    biayaId)) || {
                                    nama_biaya: `Biaya ID: ${biayaId}` // Fallback jika nama tidak ditemukan
                                };

                                // Loop semua item dalam itemsArray untuk menampilkan semua mata uang (IDR, USD, dll)
                                itemsArray.forEach(item => {
                                    const formattedJumlah = new Intl.NumberFormat('en-US').format(item
                                        .jumlah || 0);

                                    defaultBiayaHtml += `
                                                                    <div class="col-md-4 mb-3">
                                                                        <label class="form-label">${escapeHtml(biayaInfo.nama_biaya)}</label>
                                                                        <div class="input-group">
                                                                            <input type="text" class="form-control readonly-field currency-input" value="${formattedJumlah}" readonly>
                                                                            <span class="input-group-text">${escapeHtml(item.currency) || 'IDR'}</span>
                                                                        </div>
                                                                    </div>`;
                                });
                            }
                        });
                    }
                    // ===== SELESAI PERBAIKAN =====

                    let lainBiayaHtml = '';
                    // Kode untuk biaya "lain" (sudah benar karena datanya berupa array kosong)
                    if (empAnggaran.lain && Array.isArray(empAnggaran.lain) && empAnggaran.lain.length >
                        0) {
                        lainBiayaHtml = '<hr><p class="text-sm">Biaya Lainnya:</p>';
                        empAnggaran.lain.forEach(item => {
                            const formattedJumlah = new Intl.NumberFormat('en-US').format(item
                                .jumlah || 0);
                            lainBiayaHtml += `
                                                                <div class="col-md-4 mb-3">
                                                                    <label class="form-label">${escapeHtml(item.deskripsi) || 'Biaya Lain'}</label>
                                                                    <div class="input-group">
                                                                        <input type="text" class="form-control readonly-field currency-input" value="${formattedJumlah}" readonly>
                                                                        <span class="input-group-text">${escapeHtml(item.currency) || 'IDR'}</span>
                                                                    </div>
                                                                </div>`;
                        });
                    }

                    // Gabungkan dan render HTML untuk konten tab
                    if (defaultBiayaHtml || lainBiayaHtml) {
                        tabPane.innerHTML =
                            `<div class="card"><div class="card-body"><div class="row">${defaultBiayaHtml}${lainBiayaHtml}</div></div></div>`;
                    } else {
                        tabPane.innerHTML =
                            `<div class="card"><div class="card-body"><p class="text-muted">Tidak ada data anggaran untuk karyawan ini.</p></div></div>`;
                    }
                    tabContent.appendChild(tabPane);
                });

                // Panggil formatter setelah elemen dibuat
                setTimeout(() => {
                    // Script `american_formatter_field.js` akan ter-inisialisasi secara otomatis
                }, 100);
            }

            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(tableTanggalContainer, 'none');
                if (tableTanggalContainer.parentNode !== document.body) document.body.appendChild(
                    tableTanggalContainer);
                setDisplay(addAnggaranButtonContainer, 'none');
                setDisplay(anggaranSectionContainer, 'none');

                if (!isInitialLoad) {
                    clearFields('jenis_izin_id', 'alasan', 'jam_keluar', 'jam_masuk', 'tanggal_array',
                        'nik_karyawan', 'tujuan-table-body');
                }
                if (selectedID) setDisplay(sharedSection, 'block');
                if (selectedID === '1') {
                    setDisplay(formIzinContainer, 'block');
                    izinTextareaPlaceholder.appendChild(sharedTextareaContainer);
                    izinDateTimePlaceholder.appendChild(datetimePickerRow);
                    izinTablePlaceholder.appendChild(tableTanggalContainer);
                    setDisplay(getElem('noted'), 'none');
                    jenisIzinSwitched();
                } else if (selectedID === '2') {
                    setDisplay(formTugasContainer, 'block');
                    jamKeluarLabel.textContent = "Waktu Berangkat";
                    jamMasukLabel.textContent = "Waktu Kepulangan";
                    tugasDateTimePlaceholder.appendChild(datetimePickerRow);
                    setDisplay(datetimePickerRow, 'flex');
                    tugasTablePlaceholder.appendChild(tableTanggalContainer);
                    setDisplay(tableTanggalContainer, 'block');
                    handleTipeTugasChange();
                    setDisplay(getElem('noted'), 'block');
                    setDisplay(addAnggaranButtonContainer, 'block');

                    if (isInitialLoad && withAnggaranInput.value === '1') {
                        // Panggil fungsi render read-only yang baru
                        renderReadOnlyAnggaran();
                    }
                }
                if (tanggalTableInstance) tanggalTableInstance.draw(false);
                ensureCurrentUserSelectedIfApplicable();
                updateSelectedEmployeesUI();
            }

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

            loadExistingEmployees();
            loadExistingDates();

            masterSwitch();

            isInitialLoad = false;
            ensureCurrentUserSelectedIfApplicable();

            // PERBAIKAN: Panggil initTujuanRowPickers setelah semua data dimuat
            setTimeout(() => {
                if (tujuanDataTable && $('#tujuan-table tbody tr').length > 0) {
                    console.log('Initializing tujuan row pickers after page load...');
                    initTujuanRowPickers();
                }
            }, 300);

            if (form) {
                form.addEventListener('submit', (event) => {
                    if (!ensureTujuanDatesBeforeSubmit()) {
                        event.preventDefault();
                        alert("Pastikan semua rincian tujuan memiliki rentang tanggal yang valid.");
                        return;
                    }
                    transformNotaDataBeforeSubmit();
                });
            }

            function transformNotaDataBeforeSubmit() {
                const form = getElem('{{ $dmenu }}-form');
                if (!form) return;

                // ============ TRANSFORM NOTA DATA ============
                const notaTempInputs = form.querySelectorAll('[name^="notaTemp["]');
                const notaData = {};

                notaTempInputs.forEach(input => {
                    const notaMatch = input.name.match(/notaTemp\[(\d+)\]\[(\w+)\]/);
                    if (notaMatch) {
                        const index = notaMatch[1];
                        const field = notaMatch[2];
                        if (!notaData[index]) {
                            notaData[index] = {};
                        }
                        if (input.type === 'radio') {
                            if (input.checked) {
                                notaData[index][field] = input.value;
                            }
                        } else {
                            notaData[index][field] = input.value;
                        }
                    }
                });

                const groupedNotaData = {};
                const processedNotaIds = new Set();
                Object.values(notaData).forEach(nota => {
                    if (!nota.nik_karyawan) return;
                    const nik = nota.nik_karyawan;
                    if (nota.id && processedNotaIds.has(nota.id)) {
                        return;
                    }
                    if (!groupedNotaData[nik]) {
                        groupedNotaData[nik] = [];
                    }
                    const transformedNota = {
                        jenis_biaya: nota.jenis_biaya,
                        tanggal_pengeluaran: nota.tanggal_pengeluaran,
                        details: nota.details || '',
                        jumlah: parseFloat(nota.jumlah) || 0,
                        mata_uang: nota.mata_uang || 'IDR',
                        is_credit_use: (typeof nota.is_credit_use !== 'undefined' && nota
                            .is_credit_use !== '') ? parseInt(nota.is_credit_use) : 0,
                        is_private_use: nota.is_private_use === 'true'
                    };

                    if (nota.id) {
                        transformedNota.id = parseInt(nota.id);
                        processedNotaIds.add(nota.id);
                    }
                    groupedNotaData[nik].push(transformedNota);
                });

                notaTempInputs.forEach(input => input.remove());

                const notaHiddenInput = document.createElement('input');
                notaHiddenInput.type = 'hidden';
                notaHiddenInput.name = 'notaReimburse';
                notaHiddenInput.value = JSON.stringify(groupedNotaData);
                form.appendChild(notaHiddenInput);

                // ============ TRANSFORM EXCHANGE DATA ============
                const exchangeTempInputs = form.querySelectorAll('[name^="exchangeTemp["]');
                const exchangeData = {};

                exchangeTempInputs.forEach(input => {
                    const exchangeMatch = input.name.match(/exchangeTemp\[(\d+)\]\[(\w+)\]/);
                    if (exchangeMatch) {
                        const index = exchangeMatch[1];
                        const field = exchangeMatch[2];
                        if (!exchangeData[index]) {
                            exchangeData[index] = {};
                        }
                        exchangeData[index][field] = input.value;
                    }
                });

                const groupedExchangeData = {};
                const processedExchangeIds = new Set();
                Object.values(exchangeData).forEach(exchange => {
                    if (!exchange.nik_karyawan) return;
                    const nik = exchange.nik_karyawan;
                    if (exchange.id && processedExchangeIds.has(exchange.id)) {
                        return;
                    }
                    if (!groupedExchangeData[nik]) {
                        groupedExchangeData[nik] = [];
                    }
                    const transformedExchange = {
                        details: exchange.details || '',
                        jumlah_awal: parseFloat(exchange.jumlah_awal) || 0,
                        currency_awal: exchange.currency_awal || 'IDR',
                        jumlah_exchanged: parseFloat(exchange.jumlah_exchanged) || 0,
                        currency_exchanged: exchange.currency_exchanged || 'IDR',
                        exchange_date: exchange.exchange_date || '',
                    };

                    if (exchange.id) {
                        transformedExchange.id = parseInt(exchange.id);
                        processedExchangeIds.add(exchange.id);
                    }
                    groupedExchangeData[nik].push(transformedExchange);
                });

                exchangeTempInputs.forEach(input => input.remove());

                const exchangeHiddenInput = document.createElement('input');
                exchangeHiddenInput.type = 'hidden';
                exchangeHiddenInput.name = 'exchangeTransactions';
                exchangeHiddenInput.value = JSON.stringify(groupedExchangeData);
                form.appendChild(exchangeHiddenInput);
            }
            let currentCurrencyTargetInput = null;
            $('#currenciesTable').DataTable({
                "pageLength": 5,
                "lengthMenu": [5, 10, 25],
                "language": {
                    "search": "Cari:"
                }
            });
            $(document).on('click', '.open-currency-modal', function () {
                currentCurrencyTargetInput = $(this).data('target-input');
            });

            // ================================================================= //
            // ========================= START: BUG FIX ======================== //
            // ================================================================= //
            /**
             * BUG: Fungsi lama menggunakan selector yang salah (`_input`, `_display`)
             * yang tidak cocok dengan ID HTML yang dihasilkan (`nota-currency-1`, `nota-currency-display-1`).
             * 
             * FIX: Fungsi baru ini:
             * 1. Menargetkan input tersembunyi secara langsung menggunakan `currentCurrencyTargetInput` sebagai ID.
             * 2. Merekonstruksi ID untuk input tampilan dengan benar, memastikan kedua field diperbarui.
             */
            window.selectCurrency = function (code) {
                if (currentCurrencyTargetInput) {
                    // Correctly targets the hidden input which has the exact ID
                    // e.g., id="nota-currency-1"
                    $('#' + currentCurrencyTargetInput).val(code);

                    // Correctly constructs the ID for the visible display input.
                    // e.g., from "nota-currency-1" to "nota-currency-display-1"
                    // or from "nota-exchange-currency-1" to "nota-exchange-currency-display-1"
                    const parts = currentCurrencyTargetInput.split('-');
                    const counter = parts.pop(); // e.g., "1"
                    const baseId = parts.join('-'); // e.g., "nota-currency"
                    const displayId = `${baseId}-display-${counter}`;

                    $('#' + displayId).val(code);
                }
                $('#currencyModal').modal('hide');
            };
            // =============================================================== //
            // ========================= END: BUG FIX ======================== //
            // =============================================================== //


            // ===== FAB (Floating Action Button) Menu Control =====
            const fabMainBtn = document.getElementById('fabMainBtn');
            const fabMenu = document.getElementById('fabMenu');
            const fabBackdrop = document.getElementById('fabBackdrop');
            let fabIsOpen = false;

            function toggleFabMenu() {
                fabIsOpen = !fabIsOpen;
                if (fabIsOpen) {
                    fabMenu.classList.add('active');
                    fabBackdrop.classList.add('active');
                    fabMainBtn.classList.add('active');
                } else {
                    fabMenu.classList.remove('active');
                    fabBackdrop.classList.remove('active');
                    fabMainBtn.classList.remove('active');
                }
            }

            function closeFabMenu() {
                if (fabIsOpen) {
                    fabIsOpen = false;
                    fabMenu.classList.remove('active');
                    fabBackdrop.classList.remove('active');
                    fabMainBtn.classList.remove('active');
                }
            }

            if (fabMainBtn) {
                fabMainBtn.addEventListener('click', function (e) {
                    e.stopPropagation();
                    toggleFabMenu();
                });
            }

            if (fabBackdrop) {
                fabBackdrop.addEventListener('click', closeFabMenu);
            }

            // Close FAB menu when clicking any menu item
            document.querySelectorAll('.fab-menu-item-btn').forEach(btn => {
                btn.addEventListener('click', function () {
                    closeFabMenu();
                });
            });

            // ===== FAB Menu Item Actions =====
            const scrollBtn = document.getElementById('scrollToNotaBtn');
            const addNotaBtn = document.getElementById('addNotaFloatingBtn');
            const notaContainer = document.getElementById('notaReimburseForm');

            if (scrollBtn && notaContainer) {
                scrollBtn.addEventListener('click', function () {
                    notaContainer.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                    this.style.transform = 'scale(0.9)';
                    setTimeout(() => this.style.transform = '', 180);
                });
            }

            if (addNotaBtn) {
                addNotaBtn.addEventListener('click', function () {
                    // Validasi sebelum menambah nota baru
                    const activeNik = getActiveEmployeeNik();
                    if (!validateAllNotaCards(activeNik)) {
                        return; // Batalkan jika ada card yang belum valid
                    }

                    const today = new Date().toISOString().split('T')[0];
                    if (typeof window.addNotaToDate === 'function') {
                        setTimeout(() => {
                            try {
                                const newRowId = window.addNotaToDate(today);
                                if (newRowId) {
                                    setTimeout(() => {
                                        const newRow = document.getElementById(newRowId);
                                        if (newRow) newRow.scrollIntoView({
                                            behavior: 'smooth',
                                            block: 'center'
                                        });
                                    }, 200);
                                }
                            } catch (error) {
                                console.error('Error adding nota:', error);
                            }
                        }, 100);
                    }
                    if (notaContainer) notaContainer.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                    this.style.transform = 'scale(0.9)';
                    setTimeout(() => this.style.transform = '', 180);
                });
            }

            // Exchange floating buttons
            const scrollExchangeBtn = document.getElementById('scrollToExchangeBtn');
            const addExchangeBtn = document.getElementById('addExchangeFloatingBtn');
            const exchangeContainer = document.getElementById('exchangeTransactionsForm');

            if (scrollExchangeBtn && exchangeContainer) {
                scrollExchangeBtn.addEventListener('click', function () {
                    exchangeContainer.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                    this.style.transform = 'scale(0.9)';
                    setTimeout(() => this.style.transform = '', 180);
                });
            }

            if (addExchangeBtn) {
                addExchangeBtn.addEventListener('click', function () {
                    // Get active employee NIK from exchange tabs
                    const activeTab = document.querySelector('#exchangeKaryawanTabs .nav-link.active');
                    let activeNik = null;

                    if (activeTab) {
                        // Extract NIK from tab id: exchange-emp-{NIK}-tab
                        const tabId = activeTab.id;
                        const match = tabId.match(/exchange-emp-(.+)-tab/);
                        if (match) activeNik = match[1];
                    }

                    // If no active tab or NIK not found, use first employee
                    if (!activeNik && selectedEmployeesForNota && selectedEmployeesForNota.length > 0) {
                        activeNik = selectedEmployeesForNota[0];
                    }

                    // Validasi sebelum menambah exchange baru
                    if (!validateAllExchangeCards(activeNik)) {
                        return; // Batalkan jika ada card yang belum valid
                    }

                    if (activeNik && typeof window.addExchangeTransaction === 'function') {
                        setTimeout(() => {
                            try {
                                const today = new Date().toISOString().split('T')[0];
                                const newRowId = window.addExchangeTransaction(activeNik, {
                                    exchange_date: today
                                });
                                if (newRowId) {
                                    setTimeout(() => {
                                        const newRow = document.getElementById(newRowId);
                                        if (newRow) newRow.scrollIntoView({
                                            behavior: 'smooth',
                                            block: 'center'
                                        });
                                    }, 200);
                                }
                            } catch (error) {
                                console.error('Error adding exchange:', error);
                            }
                        }, 100);
                    }

                    if (exchangeContainer) exchangeContainer.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                    this.style.transform = 'scale(0.9)';
                    setTimeout(() => this.style.transform = '', 180);
                });
            }

            const defaultBiayaOptions = @json($defaultBiaya ?? []);
            const employeesFull = @json($karyawanPemohon ?? []);
            const employeesTook = @json($nikKaryawan ?? []);

            const selectedEmployeesForNota = employeesTook.map(e => e.nik);

            let notaRowCounter = 0;
            const notaState = {};

            // Initialize exchange state variables before calling functions
            let exchangeState = {};
            let exchangeRowCounter = 0;

            // Copy/Paste clipboard storage
            let clipboardExchange = null;
            let clipboardNota = null;

            // Declare addExchangeTransaction BEFORE initializeExchangeSection
            window.addExchangeTransaction = function (nik, existingData = null, validationIndex = null) {
                // Validasi sebelum menambah exchange baru (hanya jika bukan loading data awal)
                if (!existingData && !validateAllExchangeCards(nik)) {
                    return null; // Batalkan penambahan
                }

                if (!exchangeState[nik]) {
                    exchangeState[nik] = {
                        rows: [],
                        rowCounter: 0
                    };
                }

                const safeNik = safeId(nik);
                const rowId = `exchange-row-${safeNik}-${exchangeRowCounter}`;
                exchangeRowCounter++;
                const localCounter = exchangeState[nik].rowCounter++;

                const defaultJumlahAwal = existingData ? existingData.jumlah_awal || '' : '';
                const defaultCurrencyAwal = existingData ? existingData.currency_awal || 'IDR' : 'IDR';
                const defaultJumlahExchanged = existingData ? existingData.jumlah_exchanged || '' : '';
                const defaultCurrencyExchanged = existingData ? existingData.currency_exchanged || 'IDR' :
                    'IDR';
                const defaultExchangeDate = existingData ? existingData.exchange_date || '' : '';
                const defaultDetails = existingData ? existingData.details || '' : '';

                // Check for validation errors
                const validationPrefix = validationIndex !== null ?
                    `exchangeTransactions.${nik}.${validationIndex}` : null;
                const hasDetailsError = validationPrefix && validationErrors[`${validationPrefix}.details`];
                const hasJumlahAwalError = validationPrefix && validationErrors[
                    `${validationPrefix}.jumlah_awal`];
                const hasJumlahExchangedError = validationPrefix && validationErrors[
                    `${validationPrefix}.jumlah_exchanged`];
                const hasExchangeDateError = validationPrefix && validationErrors[
                    `${validationPrefix}.exchange_date`];

                const exchangeRow = document.createElement('div');
                exchangeRow.className =
                    'exchange-transaction-row border rounded p-3 mb-3 bg-white position-relative';
                exchangeRow.id = rowId;
                exchangeRow.setAttribute('data-nik', nik); // Store original NIK
                if (existingData && existingData.id) {
                    exchangeRow.setAttribute('data-original-id', existingData.id);
                }

                const hiddenIdField = existingData && existingData.id ?
                    `<input type="hidden" name="exchangeTemp[${exchangeRowCounter}][id]" value="${existingData.id}">` :
                    '';
                const hiddenNikField =
                    `<input type="hidden" name="exchangeTemp[${exchangeRowCounter}][nik_karyawan]" value="${nik}">`;

                exchangeRow.innerHTML = `
                                                                ${hiddenIdField}
                                                                ${hiddenNikField}
                                                                <button type="button" class="copy-paste-btn" 
                                                                        onclick="copyExchangeData('${rowId}')" 
                                                                        title="Copy Exchange Data">
                                                                    <i class="fas fa-copy"></i>
                                                                </button>
                                                                <button type="button" class="paste-btn exchange-paste-btn" 
                                                                        onclick="pasteExchangeData('${rowId}')" 
                                                                        title="No exchange data to paste"
                                                                        disabled>
                                                                    <i class="fas fa-paste"></i>
                                                                </button>
                                                                <button type="button" class="btn btn-sm btn-danger position-absolute" 
                                                                        style="top: 10px; right: 10px; width: 30px; height: 30px; padding: 0; border-radius: 50%;"
                                                                        onclick="removeExchangeTransaction('${rowId}', '${nik}')">
                                                                    <i class="fas fa-times"></i>
                                                                </button>
                                                                <div class="row g-3">
                                                                    <div class="col-md-12">
                                                                        <label class="form-label">Details/Keterangan <span class="text-danger">*</span></label>
                                                                        <input type="text" class="form-control ${hasDetailsError ? 'is-invalid' : ''}" 
                                                                               name="exchangeTemp[${exchangeRowCounter}][details]" 
                                                                               value="${escapeHtml(defaultDetails)}" 
                                                                               placeholder="Contoh: Exchange untuk biaya akomodasi hotel" 
                                                                               required>
                                                                        ${hasDetailsError ? `<div class="invalid-feedback d-block">${validationErrors[validationPrefix + '.details'][0]}</div>` : ''}
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <label class="form-label">Jumlah Awal <span class="text-danger">*</span></label>
                                                                        <div class="input-group ${hasJumlahAwalError ? 'has-validation' : ''}">
                                                                            <input type="text" class="currency-input form-control ${hasJumlahAwalError ? 'is-invalid' : ''}" 
                                                                                   name="exchangeTemp[${exchangeRowCounter}][jumlah_awal]" 
                                                                                   value="${defaultJumlahAwal}" placeholder="0" required>
                                                                            <input type="hidden" 
                                                                                   name="exchangeTemp[${exchangeRowCounter}][currency_awal]" 
                                                                                   id="exchange-currency-awal-${exchangeRowCounter}" 
                                                                                   value="${defaultCurrencyAwal}">
                                                                            <input type="text" class="form-control text-center" 
                                                                                   id="exchange-currency-awal-display-${exchangeRowCounter}" 
                                                                                   value="${defaultCurrencyAwal}" 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="exchange-currency-awal-${exchangeRowCounter}">
                                                                                <i class="fas fa-search"></i>
                                                                            </button>
                                                                            ${hasJumlahAwalError ? `<div class="invalid-feedback">${validationErrors[validationPrefix + '.jumlah_awal'][0]}</div>` : ''}
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <label class="form-label">Jumlah Exchanged <span class="text-danger">*</span></label>
                                                                        <div class="input-group ${hasJumlahExchangedError ? 'has-validation' : ''}">
                                                                            <input type="text" class="currency-input form-control ${hasJumlahExchangedError ? 'is-invalid' : ''}" 
                                                                                   name="exchangeTemp[${exchangeRowCounter}][jumlah_exchanged]" 
                                                                                   value="${defaultJumlahExchanged}" placeholder="0" required>
                                                                            <input type="hidden" 
                                                                                   name="exchangeTemp[${exchangeRowCounter}][currency_exchanged]" 
                                                                                   id="exchange-currency-exchanged-${exchangeRowCounter}" 
                                                                                   value="${defaultCurrencyExchanged}">
                                                                            <input type="text" class="form-control text-center" 
                                                                                   id="exchange-currency-exchanged-display-${exchangeRowCounter}" 
                                                                                   value="${defaultCurrencyExchanged}" 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="exchange-currency-exchanged-${exchangeRowCounter}">
                                                                                <i class="fas fa-search"></i>
                                                                            </button>
                                                                            ${hasJumlahExchangedError ? `<div class="invalid-feedback">${validationErrors[validationPrefix + '.jumlah_exchanged'][0]}</div>` : ''}
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <label class="form-label">Tanggal Exchange <span class="text-danger">*</span></label>
                                                                        <input type="text" class="form-control exchange-date-picker ${hasExchangeDateError ? 'is-invalid' : ''}" 
                                                                               name="exchangeTemp[${exchangeRowCounter}][exchange_date]" 
                                                                               value="${defaultExchangeDate}" placeholder="YYYY-MM-DD" required>
                                                                        ${hasExchangeDateError ? `<div class="invalid-feedback d-block">${validationErrors[validationPrefix + '.exchange_date'][0]}</div>` : ''}
                                                    </div>
                                                </div>
                                            `;

                const container = document.getElementById(`exchange-rows-${safeNik}`);
                if (!container) {
                    console.error(`Exchange container not found for NIK: ${nik}`);
                    return;
                }
                container.appendChild(exchangeRow);
                exchangeState[nik].rows.push(rowId);

                // Hide empty state
                const emptyState = document.getElementById(`exchange-empty-${safeNik}`);
                if (emptyState) emptyState.style.display = 'none';

                // Initialize flatpickr for exchange date
                const dateInput = exchangeRow.querySelector('.exchange-date-picker');
                if (dateInput) {
                    flatpickr(dateInput, {
                        dateFormat: 'Y-m-d',
                        allowInput: true,
                        defaultDate: defaultExchangeDate || null
                    });
                }

                // Initialize currency input formatters
                const currencyInputs = exchangeRow.querySelectorAll('.currency-input');
                currencyInputs.forEach(input => {
                    if (window.initializeCurrencyInput) {
                        window.initializeCurrencyInput(input);
                    }
                });

                return rowId;
            };

            window.removeExchangeTransaction = function (rowId, nik) {
                // Konfirmasi hapus menggunakan SweetAlert
                if (typeof Swal === 'undefined' || !Swal.fire) {
                    // Fallback jika SweetAlert tidak tersedia
                    if (!confirm('Hapus exchange ini?')) return;
                    executeExchangeRemoval(rowId, nik);
                    return;
                }

                Swal.fire({
                    title: 'Hapus Exchange?',
                    text: 'Transaksi exchange ini akan dihapus.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Ya, Hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        executeExchangeRemoval(rowId, nik);
                        Swal.fire('Terhapus!', 'Transaksi exchange telah dihapus.', 'success');
                    }
                });
            };

            function executeExchangeRemoval(rowId, nik) {
                const row = document.getElementById(rowId);
                if (row) row.remove();

                if (exchangeState[nik]) {
                    exchangeState[nik].rows = exchangeState[nik].rows.filter(id => id !== rowId);

                    // Show empty state if no rows left
                    if (exchangeState[nik].rows.length === 0) {
                        const safeNik = safeId(nik);
                        const emptyState = document.getElementById(`exchange-empty-${safeNik}`);
                        if (emptyState) emptyState.style.display = 'block';
                    }
                }
            }

            initKaryawanTabs();
            initializeExchangeSection();

            function initKaryawanTabs() {
                const karyawanTabs = document.getElementById('notaKaryawanTabs');
                const karyawanContent = document.getElementById('notaKaryawanTabContent');
                if (!karyawanTabs || !karyawanContent) {
                    console.error('Karyawan tabs containers not found');
                    return;
                }

                let employeeList = Array.isArray(selectedEmployeesForNota) && selectedEmployeesForNota.length > 0 ?
                    selectedEmployeesForNota : [];

                employeeList.forEach((nik, idx) => {
                    const empObj = employeesFull.find(e => e.nik === nik) || {
                        nik: nik,
                        nama: `(NIK: ${nik})`,
                        departemen: ''
                    };

                    // Inisialisasi state untuk setiap karyawan, termasuk counter untuk validasi
                    if (!notaState[nik]) {
                        notaState[nik] = {
                            dateTabs: {},
                            rowCounter: 0
                        };
                    }

                    const safeNik = safeId(nik);

                    const li = document.createElement('li');
                    li.className = 'nav-item';
                    li.innerHTML =
                        `<button class="nav-link ${idx === 0 ? 'active' : ''}" id="nota-emp-${safeNik}-tab" data-bs-toggle="tab" data-bs-target="#nota-emp-pane-${safeNik}" data-nik="${nik}" type="button" role="tab" title="${empObj.departemen || ''}"><i class='fas fa-user me-1'></i>${empObj.nama} <span class='text-white fw-normal' style='font-size:.7rem;'>(${nik})</span></button>`;
                    karyawanTabs.appendChild(li);

                    const pane = document.createElement('div');
                    pane.className = `tab-pane fade ${idx === 0 ? 'show active' : ''}`;
                    pane.id = `nota-emp-pane-${safeNik}`;
                    pane.setAttribute('role', 'tabpanel');
                    pane.setAttribute('data-nik', nik);
                    pane.innerHTML = `<div class="border rounded p-3">
                                                                    <h6 class="mb-2"><i class="fas fa-calendar me-1"></i>Daftar Nota per Tanggal</h6>
                                                                    <ul class="nav nav-tabs anggaran-tabs" id="notaTanggalTabs-${safeNik}" role="tablist"></ul>
                                                                    <div class="tab-content mt-3" id="notaTanggalTabContent-${safeNik}"></div>
                                                                </div>`;
                    karyawanContent.appendChild(pane);
                });



                // Tampilkan state kosong jika tidak ada data awal sama sekali
                employeeList.forEach(nik => {
                    const hasData =
                        notaReimburseData &&
                        Array.isArray(notaReimburseData[nik]) &&
                        notaReimburseData[nik].length > 0;


                    if (!hasData) {

                        showEmptyStateForEmployee(nik);
                    }
                });

                // Proses data nota (baik dari DB atau dari old input)
                // PERBAIKAN: Hapus setTimeout dan proses secara sinkron untuk menghindari race condition
                // Gunakan autoShowTab=false agar tidak switch tab saat loading data
                if (notaReimburseData && typeof notaReimburseData === 'object') {
                    Object.keys(notaReimburseData).forEach(nik => {
                        if (Array.isArray(notaReimburseData[nik])) {
                            notaReimburseData[nik].forEach((item) => {
                                addNotaToDate(item.tanggal_pengeluaran, item, nik, false);
                            });
                        }
                    });
                }
            }

            function formatDisplayDate(isoDate) {
                const p = isoDate.split('-');
                if (p.length !== 3) return isoDate;
                return `${p[2]}/${p[1]}/${p[0]}`;
            }

            // Helper: sort date tabs (newest -> oldest) for a specific employee
            function sortDateTabs(nik) {
                const safeNik = safeId(nik);
                const tabsContainer = document.getElementById(`notaTanggalTabs-${safeNik}`);
                const contentContainer = document.getElementById(`notaTanggalTabContent-${safeNik}`);
                if (!tabsContainer || !contentContainer) return;

                // Collect all tab <li> elements that have data-date
                const tabItems = Array.from(tabsContainer.querySelectorAll('li.nav-item[data-date]'));
                // Sort descending (newest first)
                tabItems.sort((a, b) => b.dataset.date.localeCompare(a.dataset.date));

                // PERBAIKAN: Remove active classes from all tabs first
                tabItems.forEach((li, index) => {
                    const button = li.querySelector('.nav-link');
                    if (button) {
                        button.classList.remove('active');
                    }
                    tabsContainer.appendChild(li);
                });

                // PERBAIKAN: Set first (newest) tab as active
                if (tabItems.length > 0) {
                    const firstButton = tabItems[0].querySelector('.nav-link');
                    if (firstButton) {
                        firstButton.classList.add('active');
                    }
                }

                // Do same ordering for tab panes
                const panes = Array.from(contentContainer.querySelectorAll('.tab-pane[data-date]'));
                panes.sort((a, b) => b.dataset.date.localeCompare(a.dataset.date));

                // PERBAIKAN: Remove active classes and set first pane as active
                panes.forEach((p, index) => {
                    p.classList.remove('show', 'active');
                    contentContainer.appendChild(p);
                });

                if (panes.length > 0) {
                    panes[0].classList.add('show', 'active');
                }
            }

            function ensureDateTab(nik, dateString) {
                if (!notaState[nik]) notaState[nik] = {
                    dateTabs: {}
                };
                const empDates = notaState[nik].dateTabs;
                if (empDates[dateString]) {
                    // Even if already exists, ensure ordering (in case other tabs inserted)
                    sortDateTabs(nik);
                    return empDates[dateString];
                }
                const safeNik = safeId(nik);
                const tabsContainer = document.getElementById(`notaTanggalTabs-${safeNik}`);
                const contentContainer = document.getElementById(`notaTanggalTabContent-${safeNik}`);
                if (!tabsContainer || !contentContainer) {
                    return null;
                }

                // PERBAIKAN: Jangan set active di sini, biar sortDateTabs yang handle
                const safeDate = safeId(dateString);
                const tabId = `nota-date-${safeNik}-${safeDate}`;
                const contentId = `nota-content-${safeNik}-${safeDate}`;

                const tabItem = document.createElement('li');
                tabItem.className = 'nav-item';
                tabItem.dataset.date = dateString; // for sorting
                tabItem.dataset.nik = nik; // store original nik
                tabItem.innerHTML =
                    `<button class="nav-link" id="${tabId}-tab" data-bs-toggle="tab" data-bs-target="#${contentId}" type="button" role="tab"><i class='far fa-calendar-alt me-1'></i>${formatDisplayDate(dateString)}</button>`;
                tabsContainer.appendChild(tabItem);

                const tabContent = document.createElement('div');
                tabContent.className = `tab-pane fade`;
                tabContent.id = contentId;
                tabContent.dataset.date = dateString; // for sorting
                tabContent.dataset.nik = nik; // store original nik
                tabContent.innerHTML =
                    `<div class="card"><div class="card-header pb-2"><h6 class="mb-0">Nota: ${formatDisplayDate(dateString)}</h6></div><div class="card-body"><div id="nota-rows-${safeNik}-${safeDate}" class="mb-2"></div><div class="text-end mt-2"><button type="button" class="btn btn-sm btn-primary" onclick="addNotaRowToDate('${dateString}','${nik}')"><i class='fas fa-plus me-1'></i>Tambah Baris</button></div></div></div>`;
                contentContainer.appendChild(tabContent);

                empDates[dateString] = {
                    tabElement: tabItem,
                    contentElement: tabContent,
                    rows: []
                };
                console.log('Created new date tab for nik:', nik, 'date:', dateString, 'with empty rows array');

                // PERBAIKAN: Sort segera setelah tab dibuat untuk menghindari race condition
                // Pastikan rows container sudah tersedia
                const rowsContainer = document.getElementById(`nota-rows-${safeNik}-${safeDate}`);
                if (!rowsContainer) {
                    console.error(`Failed to create nota-rows container for ${nik}-${dateString}`);
                }
                // Sort tabs immediately after creation - ini akan set active class dengan benar
                sortDateTabs(nik);

                return empDates[dateString];
            }

            function addNotaToDate(dateString, existingData = null, nikParam = null, autoShowTab = true) {
                const nikActive = nikParam || getActiveEmployeeNik();
                if (!notaState[nikActive]) {
                    notaState[nikActive] = {
                        dateTabs: {},
                        rowCounter: 0
                    };
                }

                // Validasi sebelum menambah nota baru (hanya jika bukan loading data awal)
                if (!existingData && !validateAllNotaCards(nikActive)) {
                    return null; // Batalkan penambahan
                }

                // Dapatkan index untuk baris baru ini, yang akan sesuai dengan index validasi backend
                const notaIndexForValidation = notaState[nikActive].rowCounter;
                notaState[nikActive].rowCounter++; // Naikkan counter untuk baris berikutnya

                const proceedWithRowCreation = (rowsContainer) => {
                    const rowId = `nota-row-${++notaRowCounter}`; // Counter global untuk ID HTML unik

                    const defaultTanggal = existingData ? existingData.tanggal_pengeluaran : dateString;
                    const defaultJenis = existingData ? existingData.jenis_biaya : '';
                    const defaultDetails = existingData ? existingData.details || '' : '';
                    const defaultJumlah = existingData ? existingData.jumlah : '';
                    const defaultMataUang = existingData ? existingData.mata_uang : 'IDR';
                    const defaultCreditCard = existingData ? ((parseInt(existingData.is_credit_use) === 1) ?
                        'Ya' : 'Tidak') : 'Tidak';
                    const defaultPrivateUse = existingData ? (existingData.is_private_use == 1 ? 'Ya' :
                        'Tidak') : 'Tidak';

                    const isCustomJenis = defaultJenis && !defaultBiayaOptions.some(biaya => biaya
                        .nama_biaya === defaultJenis);
                    const selectedJenis = isCustomJenis ? 'lainnya' : defaultJenis;
                    const customKeterangan = isCustomJenis ? defaultJenis : (existingData ? existingData
                        .keterangan || '' : '');

                    const notaRow = document.createElement('div');
                    notaRow.className = 'nota-row border rounded p-3 mb-3';
                    notaRow.id = rowId;
                    if (existingData && existingData.id) {
                        notaRow.setAttribute('data-original-id', existingData.id);
                    }
                    const hiddenIdField = existingData && existingData.id ?
                        `<input type="hidden" name="nota[${notaRowCounter}][id]" value="${existingData.id}">` :
                        '';
                    const hiddenNikField =
                        `<input type="hidden" name="nota[${notaRowCounter}][nik_karyawan]" value="${nikActive}">`;

                    notaRow.innerHTML = `
                                                                ${hiddenIdField}
                                                                ${hiddenNikField}
                                                                <button type="button" class="copy-paste-btn" 
                                                                        onclick="copyNotaData('${rowId}')" 
                                                                        title="Copy Nota Data">
                                                                    <i class="fas fa-copy"></i>
                                                                </button>
                                                                <button type="button" class="paste-btn nota-paste-btn" 
                                                                        onclick="pasteNotaData('${rowId}')" 
                                                                        title="No nota data to paste"
                                                                        disabled>
                                                                    <i class="fas fa-paste"></i>
                                                                </button>
                                                                <button type="button" class="nota-delete-btn" onclick="removeNotaRow('${rowId}')" title="Hapus Nota"><i class="fas fa-trash"></i></button>
                                                                <div class="row g-3">
                                                                    <div class="col-md-6"><label class="form-label">Tanggal Pengeluaran <span class="text-danger">*</span></label><input type="text" class="form-control nota-tanggal flatpickr-nota" name="notaTemp[${notaRowCounter}][tanggal_pengeluaran]" value="${defaultTanggal}" data-default-date="${defaultTanggal}" required></div>
                                                                    <div class="col-md-6"><label class="form-label">Jenis Biaya <span class="text-danger">*</span></label><select class="form-select nota-jenis-biaya" name="notaTemp[${notaRowCounter}][jenis_biaya]" required><option value="">Pilih Jenis Biaya</option>${defaultBiayaOptions.map(b => `<option value="${b.nama_biaya}" ${selectedJenis === b.nama_biaya ? 'selected' : ''}>${b.nama_biaya}</option>`).join('')}<option value="lainnya" ${selectedJenis === 'lainnya' ? 'selected' : ''}>Lainnya</option></select></div>
                                                                    <div class="col-md-12 nota-keterangan-container" style="display: ${selectedJenis === 'lainnya' ? 'block' : 'none'};"><label class="form-label">Keterangan <span class="text-danger">*</span></label><input type="text" class="form-control" name="notaTemp[${notaRowCounter}][keterangan]" value="${customKeterangan}"></div>
                                                                    <div class="col-md-12"><label class="form-label">Details <span class="text-danger">*</span></label><input type="text" class="form-control" name="notaTemp[${notaRowCounter}][details]" value="${escapeHtml(defaultDetails)}"></div>
                                                                    <div class="col-md-6"><label class="form-label">Jumlah <span class="text-danger">*</span></label><div class="input-group"><input type="text" step="any" class="currency-input form-control" name="notaTemp[${notaRowCounter}][jumlah]" value="${defaultJumlah}" required><input type="hidden" name="notaTemp[${notaRowCounter}][mata_uang]" id="nota-currency-${notaRowCounter}" value="${defaultMataUang}"><input type="text" class="form-control text-center" id="nota-currency-display-${notaRowCounter}" value="${defaultMataUang}" 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="nota-currency-${notaRowCounter}"><i class="fas fa-search"></i></button></div></div>
                                                                    <div class="col-md-6"><div class="nota-radio-section"><div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                                                        <div class="radio-group-compact"><label class="form-label-sm mb-1">Credit Use</label><div class="d-flex gap-2"><div class="form-check form-check-sm"><input class="form-check-input" type="radio" name="notaTemp[${notaRowCounter}][is_credit_use]" value="1" id="cc-ya-${notaRowCounter}" ${defaultCreditCard === 'Ya' ? 'checked' : ''}><label class="form-check-label" for="cc-ya-${notaRowCounter}">Ya</label></div><div class="form-check form-check-sm"><input class="form-check-input" type="radio" name="notaTemp[${notaRowCounter}][is_credit_use]" value="0" id="cc-tidak-${notaRowCounter}" ${defaultCreditCard === 'Tidak' ? 'checked' : ''}><label class="form-check-label" for="cc-tidak-${notaRowCounter}">Tidak</label></div></div></div>
                                                                        <div class="radio-group-compact"><label class="form-label-sm mb-1">Private Use (Untuk Biaya Lainnya)</label><div class="d-flex gap-2"><div class="form-check form-check-sm"><input class="form-check-input nota-private-use-radio" type="radio" name="notaTemp[${notaRowCounter}][is_private_use]" value="true" id="pu-ya-${notaRowCounter}" ${defaultPrivateUse === 'Ya' ? 'checked' : ''} disabled><label class="form-check-label" for="pu-ya-${notaRowCounter}">Ya</label></div><div class="form-check form-check-sm"><input class="form-check-input nota-private-use-radio" type="radio" name="notaTemp[${notaRowCounter}][is_private_use]" value="false" id="pu-tidak-${notaRowCounter}" ${defaultPrivateUse === 'Tidak' ? 'checked' : ''} disabled><label class="form-check-label" for="pu-tidak-${notaRowCounter}">Tidak</label></div></div></div>
                                                                    </div></div></div>
                                                                    <input type="hidden" name="notaTemp[${notaRowCounter}][nik_karyawan]" value="${nikActive}">
                                                                    ${existingData && existingData.id ? `<input type="hidden" name="notaTemp[${notaRowCounter}][id]" value="${existingData.id}">` : ''}
                                                                </div>`;

                    rowsContainer.appendChild(notaRow);

                    // Periksa dan tampilkan error validasi setelah elemen ditambahkan ke DOM
                    const fieldsToValidate = ['tanggal_pengeluaran', 'jenis_biaya', 'details', 'jumlah',
                        'keterangan', 'jumlah_awal', 'mata_uang_awal'
                    ];
                    fieldsToValidate.forEach(field => {
                        const errorKey =
                            `notaReimburse.${nikActive}.${notaIndexForValidation}.${field}`;
                        if (validationErrors[errorKey]) {
                            const input = notaRow.querySelector(
                                `[name="notaTemp[${notaRowCounter}][${field}]"]`);
                            if (input) {
                                input.classList.add('is-invalid');
                                const errorDiv = document.createElement('div');
                                errorDiv.className = 'invalid-feedback d-block';
                                errorDiv.textContent = validationErrors[errorKey][0];

                                let parent = input.parentElement;
                                if (parent.classList.contains('input-group')) {
                                    parent = parent.parentElement;
                                }
                                parent.appendChild(errorDiv);
                            }
                        }
                    });

                    setupNotaRowListeners(notaRow, notaRowCounter, existingData);
                    return rowId;
                };

                const tabInfo = ensureDateTab(nikActive, dateString);
                if (!tabInfo) return null;
                clearEmptyStateForEmployee(nikActive);

                // PERBAIKAN: Pastikan container sudah ada sebelum menambahkan row
                const safeNik = safeId(nikActive);
                const safeDate = safeId(dateString);
                const rowsContainerId = `nota-rows-${safeNik}-${safeDate}`;
                const rowsContainer = document.getElementById(rowsContainerId);
                if (!rowsContainer) {
                    console.error(`Rows container not found: ${rowsContainerId}`);
                    return null;
                }

                const rowId = proceedWithRowCreation(rowsContainer);

                if (rowId && notaState[nikActive] && notaState[nikActive].dateTabs[dateString]) {
                    notaState[nikActive].dateTabs[dateString].rows.push(rowId);
                }

                // PERBAIKAN: Hanya show tab jika autoShowTab = true (untuk manual add)
                // Saat initial load, jangan switch tab agar tidak mengacaukan render
                if (autoShowTab) {
                    const dateTabButton = document.getElementById(`nota-date-${nikActive}-${dateString}-tab`);
                    if (dateTabButton) new bootstrap.Tab(dateTabButton).show();
                }
                return rowId;
            }

            // ========================================================================
            // =================== EXCHANGE TRANSACTIONS SECTION ===================
            // ========================================================================

            // Copy/Paste Functions for Exchange
            window.copyExchangeData = function (rowId) {
                const row = document.getElementById(rowId);
                if (!row) return;

                const data = {
                    details: row.querySelector('input[name*="[details]"]')?.value || '',
                    jumlah_awal: row.querySelector('input[name*="[jumlah_awal]"]')?.value || '',
                    currency_awal: row.querySelector('input[name*="[currency_awal]"]')?.value || 'IDR',
                    jumlah_exchanged: row.querySelector('input[name*="[jumlah_exchanged]"]')?.value || '',
                    currency_exchanged: row.querySelector('input[name*="[currency_exchanged]"]')?.value ||
                        'IDR',
                    exchange_date: row.querySelector('input[name*="[exchange_date]"]')?.value || ''
                };

                clipboardExchange = data;

                // Visual feedback
                const copyBtn = row.querySelector('.copy-paste-btn');
                if (copyBtn) {
                    const originalHtml = copyBtn.innerHTML;
                    copyBtn.classList.add('copied');
                    copyBtn.innerHTML = '<i class="fas fa-check"></i>';
                    setTimeout(() => {
                        copyBtn.classList.remove('copied');
                        copyBtn.innerHTML = originalHtml;
                    }, 2000);
                }

                // Show paste button
                updatePasteButtonVisibility();

                Swal.fire({
                    icon: 'success',
                    title: 'Exchange Data Copied!',
                    text: 'You can now paste this data to any employee',
                    timer: 1500,
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end'
                });
            };

            window.pasteExchangeData = function (rowId) {
                if (!clipboardExchange) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'No Data to Paste',
                        text: 'Please copy an exchange transaction first',
                        timer: 2000
                    });
                    return;
                }

                const row = document.getElementById(rowId);
                if (!row) return;

                // Fill the current row with clipboard data
                const detailsInput = row.querySelector('input[name*="[details]"]');
                const jumlahAwalInput = row.querySelector('input[name*="[jumlah_awal]"]');
                const currencyAwalHidden = row.querySelector('input[name*="[currency_awal]"]');
                const currencyAwalDisplay = row.querySelector('input[id*="currency-awal-display"]');
                const jumlahExchangedInput = row.querySelector('input[name*="[jumlah_exchanged]"]');
                const currencyExchangedHidden = row.querySelector('input[name*="[currency_exchanged]"]');
                const currencyExchangedDisplay = row.querySelector('input[id*="currency-exchanged-display"]');
                const dateInput = row.querySelector('input[name*="[exchange_date]"]');

                if (detailsInput) detailsInput.value = clipboardExchange.details || '';
                if (jumlahAwalInput) jumlahAwalInput.value = clipboardExchange.jumlah_awal || '';
                if (currencyAwalHidden) currencyAwalHidden.value = clipboardExchange.currency_awal || 'IDR';
                if (currencyAwalDisplay) currencyAwalDisplay.value = clipboardExchange.currency_awal || 'IDR';
                if (jumlahExchangedInput) jumlahExchangedInput.value = clipboardExchange.jumlah_exchanged || '';
                if (currencyExchangedHidden) currencyExchangedHidden.value = clipboardExchange
                    .currency_exchanged || 'IDR';
                if (currencyExchangedDisplay) currencyExchangedDisplay.value = clipboardExchange
                    .currency_exchanged || 'IDR';
                if (dateInput) dateInput.value = clipboardExchange.exchange_date || '';

                Swal.fire({
                    icon: 'success',
                    title: 'Exchange Data Pasted!',
                    timer: 1500,
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end'
                });
            };

            // Copy/Paste Functions for Nota
            window.copyNotaData = function (rowId) {
                const row = document.getElementById(rowId);
                if (!row) return;

                const data = {
                    tanggal_pengeluaran: row.querySelector('input[name*="[tanggal_pengeluaran]"]')?.value ||
                        '',
                    jenis_biaya: row.querySelector('select[name*="[jenis_biaya]"]')?.value || '',
                    keterangan: row.querySelector('input[name*="[keterangan]"]')?.value || '',
                    details: row.querySelector('input[name*="[details]"]')?.value || '',
                    jumlah: row.querySelector('input[name*="[jumlah]"]')?.value || '',
                    mata_uang: row.querySelector('input[name*="[mata_uang]"]')?.value || 'IDR',
                    is_credit_use: row.querySelector('input[name*="[is_credit_use]"]:checked')?.value ||
                        '0',
                    is_private_use: row.querySelector('input[name*="[is_private_use]"]:checked')?.value ||
                        'false'
                };

                clipboardNota = data;

                // Visual feedback
                const copyBtn = row.querySelector('.copy-paste-btn');
                if (copyBtn) {
                    const originalHtml = copyBtn.innerHTML;
                    copyBtn.classList.add('copied');
                    copyBtn.innerHTML = '<i class="fas fa-check"></i>';
                    setTimeout(() => {
                        copyBtn.classList.remove('copied');
                        copyBtn.innerHTML = originalHtml;
                    }, 2000);
                }

                // Show paste button
                updatePasteButtonVisibility();

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

            window.pasteNotaData = function (rowId) {
                if (!clipboardNota) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'No Data to Paste',
                        text: 'Please copy a nota transaction first',
                        timer: 2000
                    });
                    return;
                }

                const row = document.getElementById(rowId);
                if (!row) return;

                // Get the counter from row ID
                const rowCounter = rowId.match(/nota-row-(\d+)/);
                if (!rowCounter) return;
                const counter = rowCounter[1];

                // Fill the current row with clipboard data
                const tanggalInput = row.querySelector('input[name*="[tanggal_pengeluaran]"]');
                const jenisSelect = row.querySelector('select[name*="[jenis_biaya]"]');
                const keteranganInput = row.querySelector('input[name*="[keterangan]"]');
                const detailsInput = row.querySelector('input[name*="[details]"]');
                const jumlahInput = row.querySelector('input[name*="[jumlah]"]');
                const mataUangHidden = row.querySelector('input[name*="[mata_uang]"]');
                const mataUangDisplay = row.querySelector('input[id*="nota-currency-display"]');
                const creditRadioYa = row.querySelector('input[name*="[is_credit_use]"][value="1"]');
                const creditRadioTidak = row.querySelector('input[name*="[is_credit_use]"][value="0"]');
                const privateRadioYa = row.querySelector('input[name*="[is_private_use]"][value="true"]');
                const privateRadioTidak = row.querySelector('input[name*="[is_private_use]"][value="false"]');

                if (tanggalInput) tanggalInput.value = clipboardNota.tanggal_pengeluaran || '';
                if (jenisSelect) {
                    jenisSelect.value = clipboardNota.jenis_biaya || '';
                    // Trigger change event for keterangan field visibility
                    jenisSelect.dispatchEvent(new Event('change'));
                }
                if (keteranganInput) keteranganInput.value = clipboardNota.keterangan || '';
                if (detailsInput) detailsInput.value = clipboardNota.details || '';
                if (jumlahInput) jumlahInput.value = clipboardNota.jumlah || '';
                if (mataUangHidden) mataUangHidden.value = clipboardNota.mata_uang || 'IDR';
                if (mataUangDisplay) mataUangDisplay.value = clipboardNota.mata_uang || 'IDR';

                if (clipboardNota.is_credit_use == '1' && creditRadioYa) {
                    creditRadioYa.checked = true;
                } else if (creditRadioTidak) {
                    creditRadioTidak.checked = true;
                }

                if ((clipboardNota.is_private_use == '1' || clipboardNota.is_private_use == 'true' ||
                    clipboardNota.is_private_use === true) && privateRadioYa) {
                    privateRadioYa.checked = true;
                } else if (privateRadioTidak) {
                    privateRadioTidak.checked = true;
                }

                // Move card to appropriate date tab if date changed
                if (clipboardNota.tanggal_pengeluaran) {
                    moveNotaRowToDate(rowId, clipboardNota.tanggal_pengeluaran);
                }

                Swal.fire({
                    icon: 'success',
                    title: 'Nota Data Pasted!',
                    timer: 1500,
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end'
                });
            };

            function updatePasteButtonVisibility() {
                // Update all exchange paste buttons
                document.querySelectorAll('.exchange-paste-btn').forEach(btn => {
                    if (clipboardExchange !== null) {
                        btn.classList.add('has-data');
                        btn.disabled = false;
                        btn.title = 'Paste Exchange Data';
                    } else {
                        btn.classList.remove('has-data');
                        btn.disabled = true;
                        btn.title = 'No exchange data to paste';
                    }
                });

                // Update all nota paste buttons
                document.querySelectorAll('.nota-paste-btn').forEach(btn => {
                    if (clipboardNota !== null) {
                        btn.classList.add('has-data');
                        btn.disabled = false;
                        btn.title = 'Paste Nota Data';
                    } else {
                        btn.classList.remove('has-data');
                        btn.disabled = true;
                        btn.title = 'No nota data to paste';
                    }
                });
            }

            function initializeExchangeSection() {
                if (!selectedEmployeesForNota || selectedEmployeesForNota.length === 0) {
                    console.warn('No employees selected for exchange section');
                    return;
                }

                const exchangeTabsContainer = getElem('exchangeKaryawanTabs');
                const exchangeTabContent = getElem('exchangeKaryawanTabContent');

                if (!exchangeTabsContainer || !exchangeTabContent) {
                    console.error('Exchange containers not found');
                    return;
                }

                exchangeTabsContainer.innerHTML = '';
                exchangeTabContent.innerHTML = '';

                // Use the same employee list logic as nota
                let employeeList = Array.isArray(selectedEmployeesForNota) && selectedEmployeesForNota.length > 0 ?
                    selectedEmployeesForNota : [];

                employeeList.forEach((nik, index) => {
                    // Use employeesFull (same as nota) instead of allProfiles
                    const empObj = employeesFull.find(e => e.nik === nik) || {
                        nik: nik,
                        nama: `(NIK: ${nik})`,
                        departemen: ''
                    };

                    exchangeState[nik] = {
                        rows: [],
                        rowCounter: 0
                    };

                    const safeNik = safeId(nik);
                    const tabId = `exchange-emp-${safeNik}`;
                    const isActive = index === 0;

                    // Create tab button
                    const tabLi = document.createElement('li');
                    tabLi.className = 'nav-item';
                    tabLi.innerHTML = `
                                                                    <button class="nav-link ${isActive ? 'active' : ''}" 
                                                                            id="${tabId}-tab" 
                                                                            data-bs-toggle="tab" 
                                                                            data-bs-target="#${tabId}" 
                                                                            data-nik="${nik}"
                                                                            type="button" 
                                                                            role="tab"
                                                                            title="${empObj.departemen || ''}">
                                                                        <i class="fas fa-user me-1"></i>${empObj.nama} <span class='text-white fw-normal' style='font-size:.7rem;'>(${nik})</span>
                                                                    </button>
                                                                `;
                    exchangeTabsContainer.appendChild(tabLi);

                    // Create tab pane
                    const tabPane = document.createElement('div');
                    tabPane.className = `tab-pane fade ${isActive ? 'show active' : ''}`;
                    tabPane.id = tabId;
                    tabPane.setAttribute('data-nik', nik);
                    tabPane.innerHTML = `
                                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                                        <h6 class="mb-0">Exchange Transactions untuk ${empObj.nama}</h6>
                                                                        <button type="button" class="btn btn-primary btn-sm" onclick="addExchangeTransaction('${nik}')">
                                                                            <i class="fas fa-plus me-1"></i>Tambah Exchange
                                                                        </button>
                                                                    </div>
                                                                    <div id="exchange-rows-${safeNik}" class="exchange-rows-container">
                                                                        <!-- Exchange rows will be added here -->
                                                                    </div>
                                                                    <div id="exchange-empty-${safeNik}" class="nota-empty-state">
                                                                        <i class="fas fa-exchange-alt"></i>
                                                                        <h6>Belum ada transaksi exchange</h6>
                                                                        <p>Klik tombol "Tambah Exchange" untuk menambahkan transaksi exchange baru</p>
                                                                    </div>
                                                                `;
                    exchangeTabContent.appendChild(tabPane);
                });

                // Load existing exchange data if any
                if (typeof exchangeTransactionsData !== 'undefined' && exchangeTransactionsData) {
                    Object.keys(exchangeTransactionsData).forEach(nik => {
                        if (exchangeTransactionsData[nik] && Array.isArray(exchangeTransactionsData[nik])) {
                            exchangeTransactionsData[nik].forEach((exchangeData, index) => {
                                addExchangeTransaction(nik, exchangeData, index);
                            });
                        }
                    });
                }
            }

            function setupNotaRowListeners(rowElement, counter, existingData = null) {
                const jenisSelect = rowElement.querySelector('.nota-jenis-biaya');
                const keteranganContainer = rowElement.querySelector('.nota-keterangan-container');
                const privateUseRadios = rowElement.querySelectorAll('.nota-private-use-radio');

                const updatePrivateUseState = (jenisValue) => {
                    if (jenisValue === 'lainnya') {
                        privateUseRadios.forEach(radio => radio.disabled = false);
                    } else {
                        privateUseRadios.forEach(radio => {
                            radio.disabled = true;
                            if (radio.value === 'false') radio.checked = true;
                        });
                    }
                };

                jenisSelect.addEventListener('change', function () {
                    keteranganContainer.style.display = this.value === 'lainnya' ? 'block' : 'none';
                    updatePrivateUseState(this.value);
                });
                updatePrivateUseState(jenisSelect.value);

                const dateInput = rowElement.querySelector('.nota-tanggal');
                if (dateInput && !dateInput._flatpickr) {
                    flatpickr(dateInput, {
                        dateFormat: 'Y-m-d',
                        allowInput: true,
                        defaultDate: dateInput.getAttribute('data-default-date') || dateInput.value || null,
                        onChange: function (selectedDates, dateStr) {
                            if (!dateStr) return;
                            const currentDate = findRowDate(rowElement.id);
                            if (dateStr !== currentDate) moveNotaRowToDate(rowElement.id, dateStr);
                        }
                    });
                }
            }

            function getActiveEmployeeNik() {
                const activeBtn = document.querySelector('#notaKaryawanTabs button.nav-link.active');
                if (!activeBtn) {
                    const availableNiks = Object.keys(notaState);
                    if (availableNiks.length > 0) {
                        return availableNiks[0];
                    }
                    return selectedEmployeesForNota && selectedEmployeesForNota.length > 0 ?
                        selectedEmployeesForNota[0] : '15005';
                }
                // Get from data-nik attribute instead of parsing ID
                return activeBtn.getAttribute('data-nik') || activeBtn.id.replace('nota-emp-', '').replace('-tab',
                    '');
            }

            function findRowDate(rowId) {
                for (const [nik, state] of Object.entries(notaState)) {
                    for (const [date, tab] of Object.entries(state.dateTabs)) {
                        if (tab.rows.includes(rowId)) return date;
                    }
                }
                return null;
            }

            function findRowLocation(rowId) {
                console.log('findRowLocation called for rowId:', rowId);
                console.log('Current notaState:', notaState);

                for (const [nik, state] of Object.entries(notaState)) {
                    console.log('Checking NIK:', nik, 'state:', state);
                    if (state.dateTabs) {
                        for (const [date, tab] of Object.entries(state.dateTabs)) {
                            console.log('  Checking date:', date, 'rows:', tab.rows);
                            if (tab.rows && tab.rows.includes(rowId)) {
                                console.log('Found rowId in:', {
                                    date,
                                    nik
                                });
                                return {
                                    date,
                                    nik
                                };
                            }
                        }
                    }
                }
                console.log('Row location not found for rowId:', rowId);
                return {
                    date: null,
                    nik: null
                };
            }

            function moveNotaRowToDate(rowId, newDate) {
                const rowElement = document.getElementById(rowId);
                const loc = findRowLocation(rowId);
                if (loc.date && loc.nik) {
                    const oldRows = notaState[loc.nik].dateTabs[loc.date].rows;
                    const idx = oldRows.indexOf(rowId);
                    if (idx > -1) oldRows.splice(idx, 1);
                }
                ensureDateTab(loc.nik, newDate);
                const newRowsContainer = document.getElementById(`nota-rows-${loc.nik}-${newDate}`);
                if (newRowsContainer) newRowsContainer.appendChild(rowElement);
                notaState[loc.nik].dateTabs[newDate].rows.push(rowId);
                const dateTabButton = document.getElementById(`nota-date-${loc.nik}-${newDate}-tab`);
                if (dateTabButton) dateTabButton.click();
            }

            window.addNotaToDate = (dateString, nik) => addNotaToDate(dateString, null, nik);
            window.addNotaRowToDate = function (dateString, nik) {
                // Validasi sebelum menambah nota baru
                if (!validateAllNotaCards(nik)) {
                    return null; // Batalkan penambahan
                }
                return addNotaToDate(dateString, null, nik);
            };

            // ===== FUNGSI VALIDASI NOTA =====
            function validateNotaCard(cardElement) {
                if (!cardElement) return true;

                let isValid = true;
                cardElement.classList.remove('card-invalid');

                // Validasi Tanggal Pengeluaran
                const tanggalInput = cardElement.querySelector('input[name*="[tanggal_pengeluaran]"]');
                if (tanggalInput && !tanggalInput.value.trim()) {
                    isValid = false;
                    tanggalInput.classList.add('is-invalid');
                } else if (tanggalInput) {
                    tanggalInput.classList.remove('is-invalid');
                }

                // Validasi Jenis Biaya
                const jenisSelect = cardElement.querySelector('select[name*="[jenis_biaya]"]');
                if (jenisSelect && !jenisSelect.value) {
                    isValid = false;
                    jenisSelect.classList.add('is-invalid');
                } else if (jenisSelect) {
                    jenisSelect.classList.remove('is-invalid');
                }

                // Validasi Keterangan (jika visible)
                const keteranganInput = cardElement.querySelector('input[name*="[keterangan]"]');
                const keteranganContainer = cardElement.querySelector('.nota-keterangan-container');
                if (keteranganContainer && keteranganContainer.style.display !== 'none') {
                    if (keteranganInput && !keteranganInput.value.trim()) {
                        isValid = false;
                        keteranganInput.classList.add('is-invalid');
                    } else if (keteranganInput) {
                        keteranganInput.classList.remove('is-invalid');
                    }
                }

                // Validasi Details
                const detailsInput = cardElement.querySelector('input[name*="[details]"]');
                if (detailsInput && !detailsInput.value.trim()) {
                    isValid = false;
                    detailsInput.classList.add('is-invalid');
                } else if (detailsInput) {
                    detailsInput.classList.remove('is-invalid');
                }

                // Validasi Jumlah
                const jumlahInput = cardElement.querySelector('input[name*="[jumlah]"]');
                if (jumlahInput) {
                    const jumlahValue = jumlahInput.value.replace(/,/g, '').trim();
                    if (!jumlahValue || parseFloat(jumlahValue) <= 0) {
                        isValid = false;
                        jumlahInput.classList.add('is-invalid');
                    } else {
                        jumlahInput.classList.remove('is-invalid');
                    }
                }

                // Validasi Mata Uang
                const mataUangInput = cardElement.querySelector('input[name*="[mata_uang]"]');
                if (mataUangInput && !mataUangInput.value.trim()) {
                    isValid = false;
                    const displayInput = cardElement.querySelector('input[id*="nota-currency-display"]');
                    if (displayInput) displayInput.classList.add('is-invalid');
                } else if (mataUangInput) {
                    const displayInput = cardElement.querySelector('input[id*="nota-currency-display"]');
                    if (displayInput) displayInput.classList.remove('is-invalid');
                }

                // Validasi Radio Button is_credit_use
                const creditRadios = cardElement.querySelectorAll('input[name*="[is_credit_use]"]');
                const creditChecked = Array.from(creditRadios).some(radio => radio.checked);
                if (!creditChecked) {
                    isValid = false;
                    creditRadios.forEach(radio => {
                        const label = radio.closest('.form-check');
                        if (label) label.classList.add('is-invalid');
                    });
                } else {
                    creditRadios.forEach(radio => {
                        const label = radio.closest('.form-check');
                        if (label) label.classList.remove('is-invalid');
                    });
                }

                // Validasi Radio Button is_private_use
                const privateRadios = cardElement.querySelectorAll('input[name*="[is_private_use]"]');
                const privateChecked = Array.from(privateRadios).some(radio => radio.checked);
                if (!privateChecked) {
                    isValid = false;
                    privateRadios.forEach(radio => {
                        const label = radio.closest('.form-check');
                        if (label) label.classList.add('is-invalid');
                    });
                } else {
                    privateRadios.forEach(radio => {
                        const label = radio.closest('.form-check');
                        if (label) label.classList.remove('is-invalid');
                    });
                }

                // Tambahkan highlight merah jika tidak valid
                if (!isValid) {
                    cardElement.classList.add('card-invalid');
                }

                return isValid;
            }

            function validateAllNotaCards(nik = null) {
                const targetNik = nik || getActiveEmployeeNik();
                if (!targetNik || !notaState[targetNik]) {
                    return true; // Tidak ada data untuk divalidasi
                }

                let allValid = true;
                let firstInvalidCard = null;
                let firstInvalidDate = null;

                // Loop semua date tabs untuk NIK ini
                const dateTabs = notaState[targetNik].dateTabs;
                for (const [dateString, tabInfo] of Object.entries(dateTabs)) {
                    const rows = tabInfo.rows || [];

                    for (const rowId of rows) {
                        const cardElement = document.getElementById(rowId);
                        if (cardElement && !validateNotaCard(cardElement)) {
                            allValid = false;
                            if (!firstInvalidCard) {
                                firstInvalidCard = cardElement;
                                firstInvalidDate = dateString;
                            }
                        }
                    }
                }

                // Jika ada card yang tidak valid
                if (!allValid && firstInvalidCard) {
                    // Switch ke tab tanggal yang bermasalah
                    const safeNik = safeId(targetNik);
                    const safeDate = safeId(firstInvalidDate);
                    const dateTabButton = document.getElementById(`nota-date-${safeNik}-${safeDate}-tab`);

                    if (dateTabButton) {
                        dateTabButton.click();
                    }

                    // Scroll ke card yang bermasalah
                    setTimeout(() => {
                        firstInvalidCard.scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });
                    }, 300);

                    // Tampilkan peringatan
                    Swal.fire({
                        title: 'Validasi Gagal',
                        text: 'Harap lengkapi semua field yang diperlukan pada nota yang ditandai merah sebelum menambahkan nota baru.',
                        icon: 'warning',
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#3085d6'
                    });
                }

                return allValid;
            }

            // ===== FUNGSI VALIDASI EXCHANGE =====
            function validateExchangeCard(cardElement) {
                if (!cardElement) return true;

                let isValid = true;
                cardElement.classList.remove('card-invalid');

                // Validasi Details
                const detailsInput = cardElement.querySelector('input[name*="[details]"]');
                if (detailsInput && !detailsInput.value.trim()) {
                    isValid = false;
                    detailsInput.classList.add('is-invalid');
                } else if (detailsInput) {
                    detailsInput.classList.remove('is-invalid');
                }

                // Validasi Jumlah Awal
                const jumlahAwalInput = cardElement.querySelector('input[name*="[jumlah_awal]"]');
                if (jumlahAwalInput) {
                    const jumlahValue = jumlahAwalInput.value.replace(/,/g, '').trim();
                    if (!jumlahValue || parseFloat(jumlahValue) <= 0) {
                        isValid = false;
                        jumlahAwalInput.classList.add('is-invalid');
                    } else {
                        jumlahAwalInput.classList.remove('is-invalid');
                    }
                }

                // Validasi Currency Awal
                const currencyAwalInput = cardElement.querySelector('input[name*="[currency_awal]"]');
                if (currencyAwalInput && !currencyAwalInput.value.trim()) {
                    isValid = false;
                    const displayInput = cardElement.querySelector('input[id*="currency-awal-display"]');
                    if (displayInput) displayInput.classList.add('is-invalid');
                } else if (currencyAwalInput) {
                    const displayInput = cardElement.querySelector('input[id*="currency-awal-display"]');
                    if (displayInput) displayInput.classList.remove('is-invalid');
                }

                // Validasi Jumlah Exchanged
                const jumlahExchangedInput = cardElement.querySelector('input[name*="[jumlah_exchanged]"]');
                if (jumlahExchangedInput) {
                    const jumlahValue = jumlahExchangedInput.value.replace(/,/g, '').trim();
                    if (!jumlahValue || parseFloat(jumlahValue) <= 0) {
                        isValid = false;
                        jumlahExchangedInput.classList.add('is-invalid');
                    } else {
                        jumlahExchangedInput.classList.remove('is-invalid');
                    }
                }

                // Validasi Currency Exchanged
                const currencyExchangedInput = cardElement.querySelector('input[name*="[currency_exchanged]"]');
                if (currencyExchangedInput && !currencyExchangedInput.value.trim()) {
                    isValid = false;
                    const displayInput = cardElement.querySelector('input[id*="currency-exchanged-display"]');
                    if (displayInput) displayInput.classList.add('is-invalid');
                } else if (currencyExchangedInput) {
                    const displayInput = cardElement.querySelector('input[id*="currency-exchanged-display"]');
                    if (displayInput) displayInput.classList.remove('is-invalid');
                }

                // Validasi Exchange Date
                const dateInput = cardElement.querySelector('input[name*="[exchange_date]"]');
                if (dateInput && !dateInput.value.trim()) {
                    isValid = false;
                    dateInput.classList.add('is-invalid');
                } else if (dateInput) {
                    dateInput.classList.remove('is-invalid');
                }

                // Tambahkan highlight merah jika tidak valid
                if (!isValid) {
                    cardElement.classList.add('card-invalid');
                }

                return isValid;
            }

            function validateAllExchangeCards(nik = null) {
                // Gunakan NIK dari parameter, atau ambil dari tab aktif
                let targetNik = nik;
                if (!targetNik) {
                    const activeTab = document.querySelector('#exchangeKaryawanTabs button.nav-link.active');
                    if (activeTab) {
                        targetNik = activeTab.getAttribute('data-nik') || activeTab.id.replace('exchange-emp-', '')
                            .replace('-tab', '');
                    }
                }

                if (!targetNik || !exchangeState[targetNik]) {
                    return true; // Tidak ada data untuk divalidasi
                }

                let allValid = true;
                let firstInvalidCard = null;

                const rows = exchangeState[targetNik].rows || [];

                for (const rowId of rows) {
                    const cardElement = document.getElementById(rowId);
                    if (cardElement && !validateExchangeCard(cardElement)) {
                        allValid = false;
                        if (!firstInvalidCard) {
                            firstInvalidCard = cardElement;
                        }
                    }
                }

                // Jika ada card yang tidak valid
                if (!allValid && firstInvalidCard) {
                    // Switch ke tab karyawan yang bermasalah
                    const safeNik = safeId(targetNik);
                    const employeeTabButton = document.getElementById(`exchange-emp-${safeNik}-tab`);

                    if (employeeTabButton) {
                        employeeTabButton.click();
                    }

                    // Scroll ke card yang bermasalah
                    setTimeout(() => {
                        firstInvalidCard.scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });
                    }, 300);

                    // Tampilkan peringatan
                    Swal.fire({
                        title: 'Validasi Gagal',
                        text: 'Harap lengkapi semua field yang diperlukan pada exchange yang ditandai merah sebelum menambahkan exchange baru.',
                        icon: 'warning',
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#3085d6'
                    });
                }

                return allValid;
            }

            // Hook validasi pada event input untuk real-time feedback
            document.addEventListener('input', function (e) {
                const target = e.target;

                // Validasi real-time untuk Nota
                if (target.closest('.nota-row')) {
                    const notaCard = target.closest('.nota-row');
                    // Hapus invalid class saat user mulai mengisi
                    if (target.value.trim()) {
                        target.classList.remove('is-invalid');
                    }
                    // Re-validasi card setelah perubahan
                    setTimeout(() => validateNotaCard(notaCard), 100);
                }

                // Validasi real-time untuk Exchange
                if (target.closest('.exchange-transaction-row')) {
                    const exchangeCard = target.closest('.exchange-transaction-row');
                    // Hapus invalid class saat user mulai mengisi
                    if (target.value.trim()) {
                        target.classList.remove('is-invalid');
                    }
                    // Re-validasi card setelah perubahan
                    setTimeout(() => validateExchangeCard(exchangeCard), 100);
                }
            });

            // Hook validasi pada event change untuk radio buttons
            document.addEventListener('change', function (e) {
                const target = e.target;

                if (target.type === 'radio') {
                    // Validasi real-time untuk Nota radio buttons
                    if (target.closest('.nota-row')) {
                        const notaCard = target.closest('.nota-row');
                        const radioGroup = target.name;
                        const allRadios = notaCard.querySelectorAll(`input[name="${radioGroup}"]`);
                        allRadios.forEach(radio => {
                            const label = radio.closest('.form-check');
                            if (label) label.classList.remove('is-invalid');
                        });
                        setTimeout(() => validateNotaCard(notaCard), 100);
                    }
                }
            });


            window.removeNotaRow = function (rowId) {
                // Konfirmasi hapus menggunakan SweetAlert
                if (typeof Swal === 'undefined' || !Swal.fire) {
                    // Fallback jika SweetAlert tidak tersedia
                    if (!confirm('Hapus nota ini?')) return;
                    executeRemoval(rowId);
                    return;
                }

                Swal.fire({
                    title: 'Hapus Nota?',
                    text: 'Tindakan ini tidak dapat dikembalikan.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Ya, hapus',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        executeRemoval(rowId);
                        Swal.fire({
                            title: 'Terhapus',
                            text: 'Nota berhasil dihapus.',
                            icon: 'success',
                            timer: 1200,
                            showConfirmButton: false
                        });
                    }
                });
            };

            function executeRemoval(rowId) {
                console.log('executeRemoval called for rowId:', rowId);
                const rowElement = document.getElementById(rowId);
                if (!rowElement) {
                    console.log('Row element not found for rowId:', rowId);
                    return;
                }

                const loc = findRowLocation(rowId);
                console.log('Row location found:', loc);

                if (loc.date && loc.nik && notaState[loc.nik] && notaState[loc.nik].dateTabs[loc.date]) {
                    const tabRows = notaState[loc.nik].dateTabs[loc.date].rows;
                    console.log('Current tab rows before removal:', tabRows);

                    const index = tabRows.indexOf(rowId);
                    if (index > -1) {
                        tabRows.splice(index, 1);
                        console.log('Row removed from state. Remaining rows:', tabRows);
                    }

                    // Hapus elemen row terlebih dahulu
                    rowElement.remove();
                    console.log('Row element removed from DOM');

                    // Jika tidak ada row lagi di tab ini, hapus tab
                    if (tabRows.length === 0) {
                        console.log('No more rows in tab, removing tab for date:', loc.date);
                        removeDateTab(loc.nik, loc.date);
                    }
                } else {
                    console.log('Location not found in state, performing fallback removal');
                    // Fallback: hapus elemen jika tidak ditemukan dalam state
                    rowElement.remove();
                }
            }

            function removeDateTab(nik, dateString) {
                console.log('removeDateTab called for nik:', nik, 'date:', dateString);

                if (notaState[nik] && notaState[nik].dateTabs[dateString]) {
                    const obj = notaState[nik].dateTabs[dateString];
                    console.log('Tab object found, removing tab elements');

                    // Cek apakah tab yang akan dihapus sedang aktif
                    const isCurrentlyActive = obj.tabElement.querySelector('.nav-link').classList.contains(
                        'active');
                    console.log('Is tab currently active:', isCurrentlyActive);

                    obj.tabElement.remove();
                    obj.contentElement.remove();
                    delete notaState[nik].dateTabs[dateString];
                    console.log('Tab elements removed from DOM and state');

                    let remainingTabs = Object.keys(notaState[nik].dateTabs);
                    console.log('Remaining tabs:', remainingTabs);

                    if (remainingTabs.length === 0) {
                        console.log('No remaining tabs, showing empty state');
                        showEmptyStateForEmployee(nik);
                    } else if (isCurrentlyActive) {
                        console.log('Removed tab was active, switching to newest remaining tab');
                        // Urutkan descending agar index 0 adalah tanggal terbaru
                        remainingTabs = remainingTabs.sort().reverse();
                        const newestDate = remainingTabs[0];

                        const newestTabObj = notaState[nik].dateTabs[newestDate];
                        if (newestTabObj && newestTabObj.tabElement) {
                            const newestTabButton = newestTabObj.tabElement.querySelector('.nav-link');
                            const newestTabContent = newestTabObj.contentElement;
                            if (newestTabButton && newestTabContent) {
                                // Bersihkan status aktif
                                remainingTabs.forEach(date => {
                                    const tabObj = notaState[nik].dateTabs[date];
                                    if (tabObj && tabObj.tabElement && tabObj.contentElement) {
                                        tabObj.tabElement.querySelector('.nav-link').classList.remove(
                                            'active');
                                        tabObj.contentElement.classList.remove('show', 'active');
                                    }
                                });
                                // Aktifkan tab terbaru
                                newestTabButton.classList.add('active');
                                newestTabContent.classList.add('show', 'active');
                                newestTabButton.click();
                                console.log('Newest remaining tab activated successfully:', newestDate);
                            }
                        }
                    }
                } else {
                    console.log('Tab not found in state for nik:', nik, 'date:', dateString);
                }
            }

            function showEmptyStateForEmployee(nik) {
                const safeNik = safeId(nik);
                const dateTabsContainer = document.getElementById(`notaTanggalTabs-${safeNik}`);
                const dateContentContainer = document.getElementById(`notaTanggalTabContent-${safeNik}`);

                if (dateTabsContainer && dateContentContainer) {
                    dateTabsContainer.innerHTML = '';
                    dateContentContainer.innerHTML = `
                        <div class="nota-empty-state">
                            <i class="fas fa-receipt"></i>
                            <h6>Belum ada nota untuk karyawan ini</h6>
                            <p>Klik tombol di bawah ini untuk menambah nota baru.</p>

                            <!-- BUTTON TAMBAH NOTA DI DALAM DIV -->
                            <button type="button" class="btn-add-nota-inside" onclick="triggerAddNota()" >
                <span><i class="fas fa-plus fa-sm"></i></span>
            </button>

                        </div>
                    `;
                }
            }

            function clearEmptyStateForEmployee(nik) {
                const safeNik = safeId(nik);
                const dateContentContainer = document.getElementById(`notaTanggalTabContent-${safeNik}`);
                if (dateContentContainer) {
                    const emptyState = dateContentContainer.querySelector('.nota-empty-state');
                    if (emptyState) {
                        emptyState.remove();
                    }
                }
            }

            // Fungsi helper untuk mendapatkan tab aktif saat ini
            function getActiveTabForEmployee(nik) {
                const dateTabs = notaState[nik] ? notaState[nik].dateTabs : {};
                const dates = Object.keys(dateTabs);

                for (const date of dates) {
                    const tabObj = dateTabs[date];
                    if (tabObj && tabObj.tabElement) {
                        const tabButton = tabObj.tabElement.querySelector('.nav-link');
                        if (tabButton && tabButton.classList.contains('active')) {
                            return date;
                        }
                    }
                }
                return null;
            }

            // Fungsi debug untuk melihat state saat ini
            window.debugNotaState = function () {
                console.log('Current notaState:', notaState);
                for (const [nik, state] of Object.entries(notaState)) {
                    console.log(`NIK ${nik}:`, state.dateTabs);
                    for (const [date, tab] of Object.entries(state.dateTabs)) {
                        console.log(`  Date ${date}: ${tab.rows.length} rows`, tab.rows);
                    }
                }
            };

            // Fungsi debug tambahan
            window.testRemoveTab = function (nik, date) {
                console.log('Testing remove tab for nik:', nik, 'date:', date);
                removeDateTab(nik, date);
            };

            window.checkNotaRows = function () {
                console.log('Checking all nota rows in DOM:');
                const allNotaRows = document.querySelectorAll('[id^="nota-row-"]');
                allNotaRows.forEach(row => {
                    console.log('Found row:', row.id, 'in DOM');
                });
            };

            window.testAddRow = function () {
                const activeNik = getActiveEmployeeNik();
                const testDate = '2025-09-15';
                console.log('Testing add row for nik:', activeNik, 'date:', testDate);
                const rowId = addNotaToDate(testDate, null, activeNik);
                console.log('Added row with ID:', rowId);
                return rowId;
            };

            window.testRemoveRow = function (rowId) {
                console.log('Testing remove row:', rowId);
                executeRemoval(rowId);
            };

            window.simulateDeleteLastRow = function () {
                console.log('=== SIMULATING DELETE LAST ROW ===');
                const activeNik = getActiveEmployeeNik();
                console.log('Active NIK:', activeNik);

                if (notaState[activeNik]) {
                    const dateTabs = notaState[activeNik].dateTabs;
                    const dates = Object.keys(dateTabs);
                    console.log('Available dates:', dates);

                    if (dates.length > 0) {
                        const firstDate = dates[0];
                        const rows = dateTabs[firstDate].rows;
                        console.log('Rows in first date:', rows);

                        if (rows.length > 0) {
                            console.log('Removing last row:', rows[rows.length - 1]);
                            executeRemoval(rows[rows.length - 1]);
                        } else {
                            console.log('No rows to remove');
                        }
                    } else {
                        console.log('No dates available');
                    }
                } else {
                    console.log('No state for active NIK');
                }
            };

            // Pastikan fungsi tersedia di global scope
            console.log('Debug functions loaded successfully');
        });
    </script>
@endpush