@extends('layouts.mobile', ['title' => 'Edit Upload Nota'])

@section('content')
    @php
        // Ambil data 'old' untuk nota reimburse jika ada.
        // Controller sudah mengirimnya sebagai array, jadi tidak perlu json_decode.
        $submittedNotaData = old('notaReimburse');
        $submittedExchangeData = old('exchangeTransactions');
    @endphp

    @push('css')
        {{-- Flatpickr --}}
        <link rel="stylesheet" href="{{ asset('/') }}assets/css/flatpickr.min.css">

        <style>
            /* ===== [BARU] STYLING UNTUK VALIDASI ===== */
            .mobile-form-control.is-invalid,
            .mobile-select.is-invalid {
                border-color: #ef4444 !important;
                /* Warna merah */
            }

            .invalid-feedback {
                display: block;
                width: 100%;
                margin-top: 6px;
                font-size: 0.8rem;
                color: #dc2626;
                font-weight: 500;
            }

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

            @keyframes mobileCardShake {

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

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

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

            .mobile-nota-item.card-invalid,
            .mobile-exchange-item.card-invalid {
                border: 2px solid #ef4444 !important;
                background-color: #fff5f5 !important;
            }

            .card-invalid .mobile-nota-header,
            .card-invalid .mobile-exchange-header {
                background-color: #fee2e2 !important;
                border-bottom-color: #fca5a5 !important;
            }

            .card-invalid .mobile-nota-date,
            .card-invalid .mobile-exchange-title {
                color: #dc2626 !important;
            }

            /* Styling untuk toggle switch yang invalid */
            .mobile-switch.is-invalid .mobile-slider {
                border: 2px solid #ef4444;
            }

            .mobile-toggle-group.is-invalid {
                padding: 8px;
                background-color: #fff5f5;
                border-radius: 8px;
                border: 1px solid #ef4444;
            }

            /* Mobile-First Responsive Design */
            .mobile-container {
                padding: 8px;
                max-width: 100%;
                overflow-x: hidden;
            }

            .mobile-card {
                background: white;
                border-radius: 12px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                margin-bottom: 16px;
                overflow: hidden;
            }

            .mobile-card-header {
                background: linear-gradient(135deg, #028284 0%, #026668 100%);
                color: white;
                padding: 16px;
                font-weight: 600;
                font-size: 1.1rem;
                border-bottom: none;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .mobile-card-body {
                padding: 16px;
            }

            .mobile-form-group {
                margin-bottom: 20px;
            }

            .mobile-form-label {
                display: block;
                font-weight: 600;
                color: #374151;
                margin-bottom: 6px;
                font-size: 0.9rem;
            }

            .mobile-form-control {
                width: 100%;
                padding: 12px 16px;
                border: 2px solid #e5e7eb;
                border-radius: 8px;
                font-size: 16px;
                /* Prevent zoom on iOS */
                transition: border-color 0.2s ease;
                background-color: #fff;
                font-family: inherit;
            }

            .mobile-form-control:focus {
                outline: none;
                border-color: #667eea;
                box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            }

            .mobile-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 12px 20px;
                border-radius: 8px;
                font-weight: 600;
                font-size: 0.9rem;
                text-decoration: none;
                border: none;
                cursor: pointer;
                transition: all 0.2s ease;
                gap: 8px;
                min-height: 48px;
                /* Touch-friendly */
                font-family: inherit;
            }

            .mobile-btn:focus {
                outline: none;
                box-shadow: 0 0 0 3px rgba(2, 130, 132, 0.3);
            }

            .mobile-btn-primary {
                background: #028284;
                color: white;
            }

            .mobile-btn-primary:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(2, 130, 132, 0.3);
                background: #026668;
                color: white;
                text-decoration: none;
            }

            .mobile-btn-success {
                background: linear-gradient(135deg, #10b981 0%, #059669 100%);
                color: white;
            }

            .mobile-btn-danger {
                background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
                color: white;
            }

            .mobile-btn-secondary {
                background: #f3f4f6;
                color: #374151;
                border: 1px solid #d1d5db;
            }

            .mobile-btn-block {
                width: 100%;
                display: flex;
            }

            .mobile-btn:disabled {
                opacity: 0.6;
                cursor: not-allowed;
                transform: none !important;
            }

            /* Employee Tabs */
            .mobile-employee-tabs {
                display: flex;
                overflow-x: auto;
                background: #f9fafb;
                border-radius: 8px;
                padding: 4px;
                margin-bottom: 16px;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }

            .mobile-employee-tabs::-webkit-scrollbar {
                display: none;
            }

            .mobile-employee-tab {
                flex: none;
                min-width: 120px;
                padding: 10px 16px;
                background: transparent;
                border: none;
                border-radius: 6px;
                font-weight: 500;
                color: #6b7280;
                transition: all 0.2s ease;
                white-space: nowrap;
                text-align: center;
                font-family: inherit;
                cursor: pointer;
            }

            .mobile-employee-tab:focus {
                outline: none;
                box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.5);
            }

            .mobile-employee-tab.active {
                background: white;
                color: #667eea;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }

            /* Date Tabs */
            .mobile-date-tabs {
                display: flex;
                overflow-x: auto;
                background: #f3f4f6;
                border-radius: 6px;
                padding: 3px;
                margin-bottom: 12px;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }

            .mobile-date-tabs::-webkit-scrollbar {
                display: none;
            }

            .mobile-date-tab {
                flex: none;
                min-width: 100px;
                padding: 8px 12px;
                background: transparent;
                border: none;
                border-radius: 4px;
                font-weight: 500;
                color: #6b7280;
                font-size: 0.8rem;
                transition: all 0.2s ease;
                white-space: nowrap;
                text-align: center;
                font-family: inherit;
                cursor: pointer;
            }

            .mobile-date-tab.active {
                background: #028284;
                color: white;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }

            /* Nota Form */
            .mobile-nota-container {
                /* Removed internal scroll to rely on page scroll */
                /* max-height: 70vh; */
                /* overflow-y: auto; */
                scrollbar-width: thin;
                scrollbar-color: #cbd5e0 #f7fafc;
            }

            .mobile-nota-item {
                background: #f9fafb;
                border: 1px solid #e5e7eb;
                border-radius: 8px;
                padding: 16px;
                margin-bottom: 12px;
                position: relative;
            }

            .mobile-nota-item:last-child {
                margin-bottom: 0;
            }

            .mobile-nota-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 12px;
                padding-bottom: 8px;
                border-bottom: 1px solid #e5e7eb;
                gap: 12px;
            }

            .mobile-nota-date {
                font-weight: 600;
                color: #374151;
                font-size: 0.9rem;
                flex: 1;
                min-width: 0;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }

            .mobile-nota-delete {
                background: #fee2e2;
                color: #dc2626;
                border: none;
                width: 32px;
                height: 32px;
                min-width: 32px;
                flex-shrink: 0;
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.8rem;
                cursor: pointer;
                transition: background-color 0.2s ease;
            }

            .mobile-nota-delete:hover,
            .mobile-nota-delete:focus {
                background: #fecaca;
                outline: none;
            }

            .mobile-row {
                display: grid;
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .mobile-row.two-cols {
                grid-template-columns: 1fr 1fr;
            }

            .mobile-row.three-cols {
                grid-template-columns: 1fr 1fr 1fr;
            }

            .mobile-select {
                width: 100%;
                padding: 12px 16px;
                border: 2px solid #e5e7eb;
                border-radius: 8px;
                font-size: 16px;
                background-color: white;
                appearance: none;
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
                background-position: right 12px center;
                background-repeat: no-repeat;
                background-size: 16px;
                padding-right: 40px;
                font-family: inherit;
            }

            .mobile-select:focus {
                outline: none;
                border-color: #667eea;
                box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            }

            /* Radio Button Styling */
            .mobile-radio-group {
                display: flex;
                gap: 16px;
                margin-top: 4px;
            }

            .mobile-radio-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                /* This will push the input to the far right */
                gap: 8px;
                width: 100%;
                /* Ensure it takes full width to align properly */
            }

            .mobile-radio-item input[type="radio"] {
                width: 18px;
                height: 18px;
                accent-color: #667eea;
            }

            .mobile-radio-item label {
                font-size: 0.9rem;
                color: #374151;
                cursor: pointer;
                margin: 0;
            }

            /* Currency and Amount Input */
            .mobile-currency-amount {
                display: flex;
                gap: 8px;
                align-items: center;
                position: relative;
            }

            .mobile-currency-amount .mobile-form-control {
                flex: 1;
            }

            .mobile-currency-btn {
                flex: 0 0 50px;
                height: 48px;
                padding: 12px 8px;
                background: #028284;
                color: white;
                border: none;
                border-radius: 8px;
                font-size: 0.9rem;
                cursor: pointer;
                transition: all 0.2s ease;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 2px 4px rgba(2, 130, 132, 0.2);
                position: relative;
            }

            .mobile-currency-btn:hover {
                background: #026668;
                transform: translateY(-1px);
                box-shadow: 0 4px 8px rgba(2, 130, 132, 0.3);
            }

            .mobile-currency-btn:focus {
                outline: none;
                box-shadow: 0 0 0 3px rgba(2, 130, 132, 0.3);
            }

            /* Currency Badge - shows selected currency */
            .mobile-currency-badge {
                position: absolute;
                top: -8px;
                right: -8px;
                /* Updated to danger color */
                background: #ef4444;
                /* danger */
                color: #ffffff;
                font-size: 0.7rem;
                font-weight: 600;
                padding: 2px 6px;
                border-radius: 12px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
                z-index: 10;
                min-width: 32px;
                text-align: center;
            }

            /* Add Button */
            .mobile-add-nota-btn {
                position: fixed;
                bottom: 20px;
                right: 20px;
                width: 56px;
                height: 56px;
                background: #028284;
                color: white;
                border: none;
                border-radius: 50%;
                box-shadow: 0 4px 12px rgba(2, 130, 132, 0.3);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.5rem;
                cursor: pointer;
                transition: all 0.2s ease;
                z-index: 1000;
            }

            .mobile-add-nota-btn:hover,
            .mobile-add-nota-btn:focus {
                background: #026668;
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(2, 130, 132, 0.4);
                outline: none;
            }

            /* Add Nota Tab Container */
            .mobile-add-nota-tab-container {
                border-top: 1px solid #e5e7eb;
                padding-top: 16px;
            }

            .mobile-add-nota-tab-container .mobile-btn {
                background: linear-gradient(135deg, #028284 0%, #026668 100%);
                color: white;
                border: 2px solid transparent;
                transition: all 0.2s ease;
                font-weight: 600;
            }

            .mobile-add-nota-tab-container .mobile-btn:hover {
                background: linear-gradient(135deg, #026668 0%, #024244 100%);
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(2, 130, 132, 0.3);
            }

            .mobile-add-nota-tab-container .mobile-btn:active {
                transform: translateY(0);
                box-shadow: 0 2px 8px rgba(2, 130, 132, 0.2);
            }

            /* Loading Spinner */
            .mobile-loading {
                display: inline-block;
                width: 20px;
                height: 20px;
                border: 2px solid #f3f3f3;
                border-top: 2px solid #667eea;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }

            @keyframes spin {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }

            /* Alert Messages */
            .mobile-alert {
                padding: 12px 16px;
                border-radius: 8px;
                margin-bottom: 16px;
                font-weight: 500;
            }

            .mobile-alert-success {
                background: #d1fae5;
                color: #065f46;
                border: 1px solid #a7f3d0;
            }

            .mobile-alert-danger {
                background: #fee2e2;
                color: #991b1b;
                border: 1px solid #fca5a5;
            }

            .mobile-alert-info {
                background: #dbeafe;
                color: #1e40af;
                border: 1px solid #93c5fd;
            }

            /* Existing data badge */
            .mobile-existing-badge {
                background: #e0e7ff;
                color: #3730a3;
                padding: 4px 8px;
                border-radius: 4px;
                font-size: 0.75rem;
                font-weight: 500;
                margin-left: 8px;
            }

            /* Sticky save button */
            .mobile-save-container {
                position: sticky;
                bottom: 0;
                background: white;
                padding: 16px;
                border-top: 1px solid #e5e7eb;
                box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
                z-index: 100;
            }

            /* Empty state */
            .mobile-empty-state {
                text-align: center;
                padding: 40px 20px;
                color: #9ca3af;
            }

            .mobile-empty-state i {
                font-size: 3rem;
                margin-bottom: 16px;
                display: block;
            }

            /* Flatpickr overrides for mobile */
            .flatpickr-calendar {
                z-index: 99998 !important;
                font-size: 14px !important;
            }

            .flatpickr-calendar.open {
                z-index: 99998 !important;
            }

            /* Ensure flatpickr input is clickable */
            .flatpickr-input {
                cursor: pointer !important;
                background-color: white !important;
            }

            .flatpickr-input:focus {
                outline: none !important;
                border-color: #667eea !important;
                box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
            }

            /* Mobile flatpickr styles */
            .flatpickr-calendar .flatpickr-day {
                height: 40px !important;
                line-height: 40px !important;
                min-width: 40px !important;
            }

            .flatpickr-calendar .flatpickr-months {
                padding: 10px !important;
            }

            .flatpickr-calendar .flatpickr-weekdays {
                height: 40px !important;
            }

            .flatpickr-calendar .flatpickr-weekday {
                line-height: 40px !important;
            }

            /* Search field in currency modal */
            .currency-search {
                margin-bottom: 16px;
                pointer-events: auto !important;
                z-index: 10010 !important;
            }

            .currency-search input {
                width: 100%;
                padding: 12px 16px;
                border: 2px solid #e5e7eb;
                border-radius: 8px;
                font-size: 16px;
                background-color: white;
                font-family: inherit;
                pointer-events: auto !important;
                z-index: 10011 !important;
            }

            .currency-search input:focus {
                outline: none;
                border-color: #667eea;
                box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            }

            /* Currency list styling */
            .currency-list {
                max-height: 300px;
                overflow-y: auto;
                pointer-events: auto !important;
                z-index: 10012 !important;
            }

            .currency-item {
                padding: 12px 16px;
                border: none;
                background: white;
                width: 100%;
                text-align: left;
                cursor: pointer;
                transition: background-color 0.2s ease;
                display: flex;
                justify-content: space-between;
                align-items: center;
                pointer-events: auto !important;
                z-index: 10013 !important;
                position: relative;
            }

            .currency-item:hover {
                background: #f3f4f6 !important;
            }

            .currency-item:focus {
                background: #e5e7eb !important;
                outline: none;
            }

            .currency-item:active {
                background: #d1d5db !important;
            }

            .currency-item.hidden {
                display: none;
            }

            .currency-code {
                font-weight: 600;
                color: #374151;
                pointer-events: none;
            }

            .currency-name {
                color: #6b7280;
                font-size: 0.9rem;
                pointer-events: none;
            }

            /* Responsive adjustments */
            @media (max-width: 640px) {
                .mobile-container {
                    padding: 4px;
                }

                .mobile-card-body {
                    padding: 12px;
                }

                .mobile-row.two-cols,
                .mobile-row.three-cols {
                    grid-template-columns: 1fr;
                }

                .mobile-currency-amount {
                    gap: 6px;
                }

                .mobile-currency-btn {
                    flex: 0 0 45px;
                    height: 44px;
                    font-size: 0.8rem;
                }

                .mobile-currency-badge {
                    font-size: 0.65rem;
                    padding: 1px 4px;
                    min-width: 28px;
                    top: -6px;
                    right: -6px;
                }

                .mobile-radio-group {
                    flex-direction: column;
                    gap: 8px;
                }
            }

            /* Disabled state */
            .mobile-form-control:disabled,
            .mobile-select:disabled,
            .mobile-btn:disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }

            /* Focus visible for better accessibility */
            .mobile-btn:focus-visible,
            .mobile-form-control:focus-visible,
            .mobile-select:focus-visible {
                outline: 2px solid #667eea;
                outline-offset: 2px;
            }

            /* Desktop Mode Link */
            .mobile-desktop-link {
                background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
                color: white;
                padding: 16px;
                border-radius: 12px;
                margin-bottom: 16px;
                text-decoration: none;
                display: flex;
                align-items: center;
                justify-content: space-between;
                box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
                transition: all 0.2s ease;
            }

            .mobile-desktop-link:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
                text-decoration: none;
                color: white;
            }

            .mobile-desktop-link-content {
                flex: 1;
            }

            .mobile-desktop-link-title {
                font-weight: 600;
                font-size: 1rem;
                margin-bottom: 4px;
            }

            .mobile-desktop-link-desc {
                font-size: 0.85rem;
                opacity: 0.9;
                line-height: 1.4;
            }

            .mobile-desktop-link-icon {
                font-size: 1.5rem;
                opacity: 0.8;
            }
            /* Serahkan Link */
            .mobile-serahkan-link {
                background: linear-gradient(135deg, #f51743 0%, #7a0000 100%);
                color: white;
                padding: 16px;
                border-radius: 12px;
                margin-bottom: 16px;
                text-decoration: none;
                display: flex;
                align-items: center;
                justify-content: space-between;
                box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
                transition: all 0.2s ease;
            }

            .mobile-serahkan-link:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
                text-decoration: none;
                color: white;
            }

            .mobile-serahkan-link-content {
                flex: 1;
            }

            .mobile-serahkan-link-title {
                font-weight: 600;
                font-size: 1rem;
                margin-bottom: 4px;
            }

            .mobile-serahkan-link-desc {
                font-size: 0.85rem;
                opacity: 0.9;
                line-height: 1.4;
            }

            .mobile-serahkan-link-icon {
                font-size: 1.5rem;
                opacity: 0.8;
            }

            /* Info Card */
            .mobile-info-card {
                background: #f0f9ff;
                border: 1px solid #0ea5e9;
                border-radius: 8px;
                padding: 12px;
                margin-bottom: 16px;
            }

            .mobile-info-card-header {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 8px;
                color: #0369a1;
                font-weight: 600;
                font-size: 0.9rem;
            }

            .mobile-info-card-content {
                color: #0c4a6e;
                font-size: 0.85rem;
                line-height: 1.5;
            }

            .mobile-info-card-content ul {
                margin: 8px 0 0 0;
                padding-left: 20px;
            }

            .mobile-info-card-content li {
                margin-bottom: 4px;
            }

            /* Enhanced Dropdown UI */
            .dropdown-touch-wrapper {
                position: relative;
                display: flex;
                align-items: center;
                background: #fff;
                border: 2px solid #e5e7eb;
                border-radius: 10px;
                padding: 4px 44px 4px 44px;
                /* space for icons */
                transition: border-color .2s, box-shadow .2s, background .2s;
                min-height: 56px;
                cursor: pointer;
            }

            .dropdown-touch-wrapper:focus-within {
                border-color: #667eea;
                box-shadow: 0 0 0 4px rgba(102, 126, 234, .15);
            }

            .dropdown-touch-wrapper:active {
                background: #f3f4f6;
            }

            .dropdown-touch-wrapper select {
                background: transparent;
                border: none;
                outline: none;
                font-size: 15px;
                width: 100%;
                padding: 8px 0;
                appearance: none;
                font-family: inherit;
                color: #111827;
            }

            .dropdown-touch-wrapper select:focus {
                outline: none;
            }

            .dropdown-touch-wrapper .dropdown-left-icon {
                position: absolute;
                left: 14px;
                color: #028284;
                font-size: 1rem;
                pointer-events: none;
            }

            .dropdown-touch-wrapper .dropdown-caret {
                position: absolute;
                right: 14px;
                color: #6b7280;
                font-size: .95rem;
                pointer-events: none;
                display: flex;
                align-items: center;
            }

            .dropdown-hint {
                margin-top: 6px;
                font-size: .7rem;
                text-transform: uppercase;
                letter-spacing: .5px;
                font-weight: 600;
                color: #6b7280;
                display: flex;
                align-items: center;
                gap: 4px;
            }

            .dropdown-hint i {
                font-size: .65rem;
                color: #9ca3af;
            }

            .dropdown-placeholder-option {
                color: #9ca3af;
            }

            .dropdown-touch-wrapper.placeholder-active select {
                color: #6b7280;
            }

            /* Styling for the new Toggle Switch */
            .mobile-toggle-group {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
            }

            .mobile-toggle-label {
                font-size: 0.9rem;
                color: #374151;
                font-weight: 600;
            }

            .mobile-switch {
                position: relative;
                display: inline-block;
                width: 60px;
                height: 34px;
            }

            .mobile-switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }

            .mobile-slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ccc;
                transition: .4s;
                border-radius: 34px;
            }

            .mobile-slider:before {
                position: absolute;
                content: "";
                height: 26px;
                width: 26px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                transition: .4s;
                border-radius: 50%;
            }

            input:checked+.mobile-slider {
                background-color: #028284;
                /* Your primary color */
            }

            input:disabled+.mobile-slider {
                background-color: #e5e7eb;
                cursor: not-allowed;
            }


            input:checked+.mobile-slider:before {
                transform: translateX(26px);
            }

            /* Add text inside the slider */
            .mobile-slider:after {
                content: 'TDK';
                /* Text for NO */
                color: white;
                display: block;
                position: absolute;
                transform: translate(-50%, -50%);
                top: 50%;
                left: 70%;
                font-size: 10px;
                font-weight: bold;
                font-family: sans-serif;
            }

            input:checked+.mobile-slider:after {
                content: 'YA';
                /* Text for YES */
                left: 35%;
            }

            @media (max-width:640px) {
                .dropdown-touch-wrapper {
                    min-height: 52px;
                    padding-left: 42px;
                    padding-right: 42px;
                }
            }

            /* Emphasis animation to hint tap */
            .dropdown-touch-wrapper.flash-hint {
                animation: ddFlash 1.2s ease-in-out 1;
            }

            @keyframes ddFlash {
                0% {
                    box-shadow: 0 0 0 0 rgba(2, 130, 132, 0.0);
                }

                40% {
                    box-shadow: 0 0 0 6px rgba(2, 130, 132, 0.15);
                }

                100% {
                    box-shadow: 0 0 0 0 rgba(2, 130, 132, 0);
                }
            }

            /* ===== SwalFire Currency Modal Styling ===== */
            .swal-currency-container {
                z-index: 99999 !important;
            }

            .swal-currency-popup {
                font-family: inherit !important;
            }

            .swal-currency-item {
                transition: all 0.2s ease !important;
                font-family: inherit !important;
            }

            .swal-currency-item:hover {
                background-color: #f3f4f6 !important;
                border-color: #d1d5db !important;
                transform: translateY(-1px);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
            }

            .swal-currency-item:active {
                transform: translateY(0) !important;
                background-color: #e5e7eb !important;
            }

            /* ================================================== */

            /* ===== EXCHANGE TRANSACTIONS SECTION ===== */
            .mobile-exchange-item {
                background: #f0f9ff;
                border: 1px solid #bae6fd;
                border-radius: 8px;
                padding: 16px;
                margin-bottom: 12px;
                position: relative;
            }

            .mobile-exchange-item:last-child {
                margin-bottom: 0;
            }

            .mobile-exchange-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 12px;
                padding-bottom: 8px;
                border-bottom: 1px solid #bae6fd;
                gap: 12px;
            }

            .mobile-exchange-title {
                font-weight: 600;
                color: #0369a1;
                font-size: 0.9rem;
                flex: 1;
                min-width: 0;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }

            .mobile-exchange-delete {
                background: #fee2e2;
                color: #dc2626;
                border: none;
                width: 32px;
                height: 32px;
                min-width: 32px;
                flex-shrink: 0;
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.8rem;
                cursor: pointer;
                transition: background-color 0.2s ease;
            }

            .mobile-exchange-delete:hover,
            .mobile-exchange-delete:focus {
                background: #fecaca;
                outline: none;
            }

            .mobile-exchange-add-btn {
                position: fixed;
                bottom: 90px;
                right: 20px;
                width: 56px;
                height: 56px;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                border: none;
                border-radius: 50%;
                box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.3rem;
                cursor: pointer;
                transition: all 0.2s ease;
                z-index: 1000;
            }

            .mobile-exchange-add-btn:hover,
            .mobile-exchange-add-btn:focus {
                background: linear-gradient(135deg, #5568d3 0%, #653a8a 100%);
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
                outline: none;
            }

            #exchangeKaryawanTabs .mobile-employee-tab {
                background: transparent;
                border: none;
            }

            #exchangeKaryawanTabs .mobile-employee-tab.active {
                background: white;
                color: #667eea;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }

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

            .mobile-copy-btn:active {
                transform: scale(0.95);
            }

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

            @keyframes mobilePulseSuccess {

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

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

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

            .mobile-paste-btn:active:not(:disabled) {
                transform: scale(0.95);
            }

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

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

            @keyframes mobilePulseOrange {

                0%,
                100% {
                    opacity: 1;
                }

                50% {
                    opacity: 0.7;
                }
            }

            .mobile-nota-item .mobile-copy-btn,
            .mobile-exchange-item .mobile-copy-btn {
                right: 100px;
            }

            .mobile-nota-item .mobile-paste-btn,
            .mobile-exchange-item .mobile-paste-btn {
                right: 50px;
            }

            /* ===== MOBILE FAB (Floating Action Button) WITH BUBBLE MENU ===== */
            .mobile-fab-container {
                position: fixed;
                bottom: 20px;
                right: 20px;
                z-index: 1050;
            }

            .mobile-fab-main-btn {
                width: 56px;
                height: 56px;
                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.3rem;
                transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
                position: relative;
                z-index: 1052;
            }

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

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

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

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

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

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

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

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

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

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

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

            .mobile-fab-menu-item-label {
                background: rgba(0, 0, 0, 0.8);
                color: white;
                padding: 6px 12px;
                border-radius: 16px;
                font-size: 0.75rem;
                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;
            }

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

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

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

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

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

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

            /* Backdrop overlay */
            .mobile-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;
            }

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

            /* Pulse animation for main button */
            @keyframes mobileFabPulse {
                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);
                }
            }

            .mobile-fab-main-btn.pulse {
                animation: mobileFabPulse 2s infinite;
            }
        </style>
    @endpush

    {{-- Check if form is successfully posted --}}
    @if ($isPosted == true)
        {{-- Redirect to url_menu --}}
        <script>
            window.location.href = "{{ url($url_menu) }}";
        </script>
    @endif

    <div class="mobile-container">
        @if ($errors->any())
            <div class="mobile-alert mobile-alert-danger">
                <i class="fas fa-exclamation-triangle"></i>
                <strong>Terdapat kesalahan:</strong>
                <ul style="margin: 8px 0 0 0; padding-left: 20px;">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if (session('message-unique'))
            <div class="mobile-alert mobile-alert-{{ session('class', 'info') }}">
                <i class="fas fa-info-circle"></i>
                {{ session('message-unique') }}
            </div>
        @endif

        <!-- [DIUBAH] Desktop Mode Link - Kini memicu popup -->
        <a href="javascript:void(0);" onclick="showDesktopModeConfirmation(this)"
            data-url="{{ url('/rbstpj/edit/' . encrypt($permohonanPerizinanId) . '?force_desktop=1') }}"
            class="mobile-desktop-link">
            <div class="mobile-desktop-link-content">
                <div class="mobile-desktop-link-title">
                    <i class="fas fa-desktop"></i> Buka Mode Desktop
                </div>
                <div class="mobile-desktop-link-desc">
                    Akses fitur lengkap kasbon & extend perjalanan
                </div>
            </div>
            <div class="mobile-desktop-link-icon">
                <i class="fas fa-external-link-alt"></i>
            </div>
        </a>

        <!-- SERAHKAN KARYAWAN MODE MOBILE -->
         @php
                                    $pw_detail = $perwakilan_detail->first(); // Ambil item pertama
                                @endphp
        <a href="javascript:void(0);" class="mobile-serahkan-link" onclick="handleSerahkanClickMobile(
            '{{ $permohonanPerizinanId }}',
             {{ $pw_detail->is_serahkan ? 'true' : 'false' }},
            '{{ $pw_detail->nama_perwakilan ?? '' }}',
            '{{ $pw_detail->departemen_perwakilan ?? '' }}'
        )">
            <div class="mobile-serahkan-link-content">
                <div class="mobile-serahkan-link-title">
                    <i class="fas fa-share"></i> Serahkan ke Karyawan
                    @if ($pw_detail->is_serahkan)
                        <span class="badge bg-success rounded-circle d-inline-flex align-items-center justify-content-center ms-2"
                            style="width:18px;height:18px;padding:0;" title="Sudah diserahkan">
                            <i class="fas fa-check" style="font-size:10px;"></i>
                        </span>
                    @endif
                </div>
                <div class="mobile-serahkan-link-desc">
                    Tekan untuk menyerahkan upload nota ke karyawan lain
                </div>
            </div>
        </a>
       

        <!-- [DIHAPUS] Information Card yang menjelaskan fitur desktop telah dihapus dari sini -->

        <!-- Employee Selector (Dropdown) -->
        @if (isset($nikKaryawan) && $nikKaryawan->count() > 0)
            <div class="mobile-card">
                <div class="mobile-card-header">
                    <i class="fas fa-users"></i>
                    <span>Karyawan</span>
                </div>
                <div class="mobile-card-body">
                    <div class="mobile-form-group" style="margin:0;">
                        <label class="mobile-form-label"
                            style="margin-bottom:6px; display:flex; align-items:center; gap:6px;">
                            <i class="fas fa-user-circle" style="color:#028284;"></i> Pilih Karyawan
                        </label>
                        <div class="dropdown-touch-wrapper" id="employeeDropdownWrapper">
                            <i class="fas fa-user dropdown-left-icon"></i>
                            <select id="employeeSelect" aria-label="Pilih Karyawan" onchange="switchEmployee(this.value)">
                                <option value="" disabled selected hidden class="dropdown-placeholder-option">-- Pilih
                                    Karyawan --</option>
                                @foreach ($nikKaryawan as $index => $karyawan)
                                    <option value="{{ $karyawan->nik }}" {{ $index === 0 ? 'data-initial="1"' : '' }}>
                                        {{ $karyawan->nama }} ({{ $karyawan->nik }})
                                    </option>
                                @endforeach
                            </select>
                            <span class="dropdown-caret"><i class="fas fa-chevron-down"></i></span>
                        </div>
                        <div class="dropdown-hint"><i class="fas fa-hand-pointer"></i> Ketuk untuk memilih / mengganti
                            karyawan</div>
                    </div>
                    <!-- Original tabs retained but hidden for existing JS logic -->
                    <div class="mobile-employee-tabs" id="employeeTabs" style="display:none;">
                        @foreach ($nikKaryawan as $index => $karyawan)
                            <button type="button" class="mobile-employee-tab {{ $index === 0 ? 'active' : '' }}"
                                data-nik="{{ $karyawan->nik }}" onclick="switchEmployee('{{ $karyawan->nik }}')">
                                <i class="fas fa-user"></i> {{ $karyawan->nama }}
                            </button>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif

        <!-- Nota Reimbursement Form -->
        <form id="notaForm" method="POST" action="{{ route('permohonan.reimburse.update') }}"
            enctype="multipart/form-data">
            @csrf
            @method('POST')

            <!-- Mobile Form Identifier -->
            <input type="hidden" name="is_mobile" value="true">
            <input type="hidden"
           name="nik_karyawan_to_delete"
           id="nik_karyawan_to_delete"
           value='@json($nikKaryawan ?? [])'>

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

            <div class="mobile-card">
                <div class="mobile-card-header">
                    <i class="fas fa-receipt"></i> Form Upload Nota
                </div>
                <div class="mobile-card-body">
                    <!-- Date Selector (Dropdown) -->
                    <div class="mobile-form-group" style="margin-bottom:12px;">
                        <label class="mobile-form-label"
                            style="margin-bottom:6px; display:flex; align-items:center; gap:6px;">
                            <i class="fas fa-calendar-day" style="color:#028284;"></i> Tanggal Nota
                        </label>
                        <div class="dropdown-touch-wrapper" id="dateDropdownWrapper">
                            <i class="fas fa-calendar-alt dropdown-left-icon"></i>
                            <select id="dateSelect" aria-label="Pilih Tanggal Nota">
                                <option value="" disabled selected hidden class="dropdown-placeholder-option">-- Pilih
                                    / Tambah Nota --</option>
                            </select>
                            <span class="dropdown-caret"><i class="fas fa-chevron-down"></i></span>
                        </div>
                        <div class="dropdown-hint"><i class="fas fa-info-circle"></i> Otomatis terisi saat Anda menambah
                            nota baru</div>
                    </div>
                    <!-- Hidden original date tabs container -->
                    <div class="mobile-date-tabs" id="dateTabs" style="display:none;"></div>

                    <!-- Nota Container -->
                    <div class="mobile-nota-container" id="notaContainer">
                        <!-- Nota items will be populated by JavaScript -->
                    </div>

                    <!-- Add Note Button for Current Tab -->
                    <div class="mobile-add-nota-tab-container" style="margin-top: 16px; text-align: center;">
                        <button type="button" class="mobile-btn mobile-btn-primary" id="addNotaTabButton"
                            onclick="addNotaToCurrentTab()"
                            style="width: 100%; justify-content: center; padding: 14px 20px;">
                            <i class="fas fa-plus-circle"></i>
                            <span id="addNotaTabButtonText">Tambah nota (Tanggal Sesuai Tab)</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Exchange Transactions Form -->
            <div class="mobile-card" id="exchangeTransactionsForm">
                <div class="mobile-card-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <i class="fas fa-exchange-alt"></i> Form Upload Exchange
                </div>
                <div class="mobile-card-body">
                    <!-- Employee Tabs for Exchange -->
                    @if (isset($nikKaryawan) && $nikKaryawan->count() > 0)
                        <div class="mobile-employee-tabs" id="exchangeKaryawanTabs">
                            <!-- Exchange employee tabs will be populated by JavaScript -->
                        </div>
                    @endif

                    <!-- Exchange Container for each employee -->
                    <div id="exchangeContainer">
                        <!-- Exchange items will be populated by JavaScript -->
                    </div>

                    <!-- Add Exchange Button -->
                    <div class="mobile-add-nota-tab-container" style="margin-top: 16px; text-align: center;">
                        <button type="button" class="mobile-btn mobile-btn-primary" id="addExchangeButton"
                            onclick="addExchangeToCurrentEmployee()"
                            style="width: 100%; justify-content: center; padding: 14px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                            <i class="fas fa-plus-circle"></i>
                            <span>Tambah Exchange</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Save Button Container -->
            <div class="mobile-save-container">
                <div class="mobile-row">
                    <button type="button" class="mobile-btn mobile-btn-secondary" onclick="history.back()">
                        <i class="fas fa-arrow-left"></i> Kembali
                    </button>
                    @if ($authorize->edit == '1')
                        <button type="submit" class="mobile-btn mobile-btn-primary" id="saveButton">
                            <i class="fas fa-save"></i> Simpan
                        </button>
                        @if ($isPengaju)
                            <button type="button" class="mobile-btn mobile-btn-success" id="postButton">
                                <i class="fas fa-paper-plane"></i> Post
                            </button>
                        @endif
                    @endif
                </div>

                <!-- [DIUBAH] Quick Desktop Access - Kini memicu popup -->
                <div class="mobile-row" style="margin-top: 12px;">
                    <a href="javascript:void(0);" onclick="showDesktopModeConfirmation(this)"
                        data-url="{{ url('/rbstpj/edit/' . encrypt($permohonanPerizinanId) . '?force_desktop=1') }}"
                        class="mobile-btn mobile-btn-secondary mobile-btn-block"
                        style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; border: none;">
                        <i class="fas fa-desktop"></i> Mode Desktop
                        <span style="font-size: 0.75rem; opacity: 0.9; margin-left: 4px;">(Kasbon & Extend)</span>
                    </a>
                </div>
            </div>
        </form>

        <!-- Mobile FAB (Floating Action Button) with Bubble Menu -->
        <div class="mobile-fab-backdrop" id="mobileFabBackdrop"></div>
        <div class="mobile-fab-container">
            <div class="mobile-fab-menu" id="mobileFabMenu">
                <!-- Scroll to Nota -->
                <div class="mobile-fab-menu-item">
                    <span class="mobile-fab-menu-item-label">Scroll ke Nota</span>
                    <button type="button" class="mobile-fab-menu-item-btn scroll-nota-btn" id="mobileScrollToNotaBtn"
                        title="Scroll ke Form Nota">
                        <i class="fas fa-receipt"></i>
                    </button>
                </div>

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

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

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

            <!-- Main FAB Button -->
            <button type="button" class="mobile-fab-main-btn pulse" id="mobileFabMainBtn" title="Menu Aksi Cepat">
                <i class="fas fa-plus"></i>
            </button>
        </div>
        </div>

    </div>
    <!-- Currency Modal replaced with SwalFire implementation -->

     <!-- MODAL MOBILE -->
        <div class="modal fade" id="searchModalProfilesSerahkanMobile" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title">Pilih Karyawan</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body table-responsive">
                        <table class="table table-bordered table-striped w-100" id="list_profiles_serahkan_mobile">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th width="50" class="text-center"></th>
                                    <th>NIK</th>
                                    <th>Nama</th>
                                    <th>Departemen</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($profilesSerahkan as $profile)
                                    <tr>
                                        <td class="text-center">
                                            <input type="checkbox"
                                                class="form-check-input profile-select-check-mobile"
                                                data-nik="{{ $profile->nik }}">
                                        </td>
                                        <td>{{ $profile->nik }}</td>
                                        <td>{{ $profile->nama }}</td>
                                        <td>{{ $profile->departemen ?? 'N/A' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        <button id="submitSerahkanBtnMobile" class="btn btn-primary" disabled>
                            <i class="fas fa-share"></i> Serahkan Upload Nota
                        </button>
                    </div>

                </div>
            </div>
@endsection

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

    <script>
        // Fungsi untuk menampilkan popup konfirmasi mode desktop
        function showDesktopModeConfirmation(element) {
            const desktopUrl = element.getAttribute('data-url');
            if (!desktopUrl) return;

            Swal.fire({
                title: '<i class="fas fa-desktop"></i> Fitur Tambahan di Mode Desktop',
                html: `
                    <div style="text-align: left; padding: 0 10px;">
                        <p style="margin-bottom: 16px;">Mode desktop menyediakan fitur tambahan yang tidak tersedia di versi mobile:</p>
                        <ul style="list-style: none; padding-left: 0; margin-bottom: 20px;">
                            <li style="display: flex; align-items: flex-start; margin-bottom: 12px;">
                                <i class="fas fa-file-invoice-dollar" style="color: #028284; margin-right: 12px; margin-top: 5px; width: 20px; text-align: center;"></i>
                                <div><strong style="display: block; color: #333;">Detail Kasbon</strong><span style="font-size: 0.9em; color: #555;">Lihat riwayat kasbon, saldo outstanding, dan laporan lengkap.</span></div>
                            </li>
                            <li style="display: flex; align-items: flex-start;">
                                <i class="fas fa-route" style="color: #028284; margin-right: 12px; margin-top: 5px; width: 20px; text-align: center;"></i>
                                <div><strong style="display: block; color: #333;">Extend Perjalanan</strong><span style="font-size: 0.9em; color: #555;">Perpanjang tanggal perjalanan dinas dengan approval.</span></div>
                            </li>
                        </ul>
                        <div style="background: #fef9c3; color: #92400e; border: 1px solid #fde047; border-radius: 8px; padding: 12px; font-size: 0.85em; display: flex; align-items: center; gap: 8px;"><i class="fas fa-exclamation-triangle"></i><span><strong>Peringatan:</strong> Tampilan mode desktop mungkin tidak optimal di perangkat mobile.</span></div>
                    </div>`,
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#028284',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Ya, Lanjutkan',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Membuka Mode Desktop...',
                        text: 'Mohon tunggu...',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });
                    window.location.href = desktopUrl;
                }
            });
        }

        // --- MAIN SCRIPT INITIALIZATION ---
        document.addEventListener("DOMContentLoaded", function() {
            console.log('DOM loaded, initializing mobile form...');

            let selectedNikMobile = null;
            let permohonanIdMobile = null;

            window.handleSerahkanClickMobile = function(id, isSerahkan, namaPerwakilan, departemenPerwakilan) {
                permohonanIdMobile = id;
                selectedNikMobile = null;

                if (isSerahkan) {
                    Swal.fire({
                        title: 'Nota sudah diserahkan',
                        html: `Upload nota ini sudah diserahkan ke karyawan <b>${namaPerwakilan}</b> - <b>${departemenPerwakilan}</b>.<br>Tekan tombol Ganti apabila ingin mengganti karyawan.`,
                        icon: 'info',
                        showCancelButton: true,
                        confirmButtonText: 'Ganti',
                        cancelButtonText: 'Batal',
                        reverseButtons: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            openSerahkanModalMobile(id);
                        }
                    });
                } else {
                    openSerahkanModalMobile(id);
                }
            };

            window.openSerahkanModalMobile = function(id) {
                permohonanIdMobile = id;
                selectedNikMobile = null;

                // reset checkbox & tombol
                document.querySelectorAll('.profile-select-check-mobile').forEach(cb => cb.checked = false);
                document.getElementById('submitSerahkanBtnMobile').disabled = true;

                const modalEl = document.getElementById('searchModalProfilesSerahkanMobile');
                const modal = new bootstrap.Modal(modalEl);
                modal.show();
            };

            // HANYA BOLEH PILIH 1
            document.querySelectorAll('.profile-select-check-mobile').forEach(cb => {
                cb.addEventListener('change', function() {
                    document.querySelectorAll('.profile-select-check-mobile').forEach(other => {
                        if (other !== this) other.checked = false;
                    });

                    if (this.checked) {
                        selectedNikMobile = this.dataset.nik;
                        document.getElementById('submitSerahkanBtnMobile').disabled = false;
                    } else {
                        selectedNikMobile = null;
                        document.getElementById('submitSerahkanBtnMobile').disabled = true;
                    }
                });
            });

            document.getElementById('submitSerahkanBtnMobile').addEventListener('click', function () {
                if (!selectedNikMobile || !permohonanIdMobile) return;

                Swal.fire({
                    title: 'Konfirmasi',
                    text: 'Yakin serahkan upload nota ke karyawan terpilih?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Serahkan',
                    cancelButtonText: 'Batal',
                    reverseButtons: true
                }).then((result) => {

                    if (!result.isConfirmed) return;

                    Swal.fire({
                        title: 'Memproses...',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });

                    fetch("{{ url('/serahkan') }}/" + permohonanIdMobile, {
                        method: "POST",
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}",
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify({
                            nik_perwakilan_karyawan: selectedNikMobile
                        })
                    })
                    .then(res => res.json())
                    .then(res => {
                        if (res.success) {
                            const modalEl = document.getElementById('searchModalProfilesSerahkanMobile');
                            const modalInstance = bootstrap.Modal.getInstance(modalEl);
                            if (modalInstance) modalInstance.hide();

                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: 'Upload nota berhasil diserahkan',
                                timer: 1500,
                                showConfirmButton: false
                            })
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                text: res.message || 'Terjadi kesalahan'
                            });
                        }
                    })
                    .catch(() => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Gagal menghubungi server'
                        });
                    });
                });
            });

            let profileTableMobile;

            $(document).on('shown.bs.modal', '#searchModalProfilesSerahkanMobile', function () {
                if (!$.fn.DataTable.isDataTable('#list_profiles_serahkan_mobile')) {
                    profileTableMobile = $('#list_profiles_serahkan_mobile').DataTable({
                        pageLength: 5,
                        ordering: false,
                        lengthChange: false,
                        autoWidth: false
                    });
                } else {
                    profileTableMobile.columns.adjust().draw();
                }
            });

            // [DIUBAH] 1. MENGAMBIL DATA DARI SERVER & VALIDASI
            const validationErrors = @json($errors->toArray());
            const submittedNotaData = @json($submittedNotaData);
            const initialNotaData = @json($notaReimburse ?? []);
            const notaData = submittedNotaData || initialNotaData; // Data utama: prioritaskan dari old()

            const karyawanData = @json($nikKaryawan ?? []);
            const currenciesData = @json($currencies ?? []);
            const defaultBiayaOptions = @json($defaultBiaya ?? []);

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

            if (!karyawanData || karyawanData.length === 0) {
                console.error('No karyawan data available, aborting.');
                return;
            }

            // --- STATE VARIABLES ---
            let currentEmployeeNik = karyawanData.length > 0 ? karyawanData[0].nik : null;
            let globalNotaCounter = 0; // Untuk ID HTML unik
            let currentTargetInput = null;
            let formIsDirty = false; // Awalnya false, hanya berubah jika user melakukan perubahan
            const notaState = {};

            // Exchange state variables
            let exchangeState = {};
            let globalExchangeCounter = 0;
            let currentExchangeEmployeeNik = karyawanData.length > 0 ? karyawanData[0].nik : null;

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

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

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

                clipboardExchange = data;

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

                // Show paste button
                updatePasteButtonVisibility();

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

            window.pasteExchangeData = function(exchangeId) {
                if (!clipboardExchange) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tidak Ada Data',
                        text: 'Silakan copy exchange terlebih dahulu',
                        timer: 2000
                    });
                    return;
                }

                const item = document.getElementById('exchange-' + exchangeId);
                if (!item) return;

                // Fill the current exchange item with clipboard data
                const detailsInput = item.querySelector('textarea[name*="[details]"]');
                const jumlahAwalInput = item.querySelector('input[name*="[jumlah_awal]"]');
                const currencyAwalHidden = item.querySelector('input[name*="[currency_awal]"]');
                const jumlahExchangedInput = item.querySelector('input[name*="[jumlah_exchanged]"]');
                const currencyExchangedHidden = item.querySelector('input[name*="[currency_exchanged]"]');
                const dateInput = item.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 (jumlahExchangedInput) jumlahExchangedInput.value = clipboardExchange.jumlah_exchanged || '';
                if (currencyExchangedHidden) currencyExchangedHidden.value = clipboardExchange
                    .currency_exchanged || 'IDR';
                if (dateInput) dateInput.value = clipboardExchange.exchange_date || '';

                // Update currency badges
                const currencyAwalBtn = item.querySelector('button[onclick*="awal"]');
                const currencyExchangedBtn = item.querySelector('button[onclick*="exchanged"]');
                if (currencyAwalBtn) {
                    const badge = currencyAwalBtn.querySelector('.mobile-currency-badge');
                    if (badge) badge.textContent = clipboardExchange.currency_awal || 'IDR';
                    currencyAwalBtn.title = `Pilih Mata Uang: ${clipboardExchange.currency_awal || 'IDR'}`;
                }
                if (currencyExchangedBtn) {
                    const badge = currencyExchangedBtn.querySelector('.mobile-currency-badge');
                    if (badge) badge.textContent = clipboardExchange.currency_exchanged || 'IDR';
                    currencyExchangedBtn.title =
                        `Pilih Mata Uang: ${clipboardExchange.currency_exchanged || 'IDR'}`;
                }

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

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

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

                clipboardNota = data;

                // Visual feedback
                const copyBtn = item.querySelector('.mobile-copy-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 Copied!',
                    text: 'Data berhasil disalin',
                    timer: 1500,
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end'
                });
            };

            window.pasteNotaData = function(notaId) {
                if (!clipboardNota) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tidak Ada Data',
                        text: 'Silakan copy nota terlebih dahulu',
                        timer: 2000
                    });
                    return;
                }

                const item = document.getElementById(notaId);
                if (!item) return;

                // Fill the current nota item with clipboard data
                const tanggalInput = item.querySelector('input[name*="[tanggal_pengeluaran]"]');
                const jenisSelect = item.querySelector('select[name*="[jenis_biaya]"]');
                const keteranganInput = item.querySelector('input[name*="[keterangan]"]');
                const detailsInput = item.querySelector('input[name*="[details]"]');
                const jumlahInput = item.querySelector('input[name*="[jumlah]"]');
                const mataUangHidden = item.querySelector('input[name*="[mata_uang]"]');
                const creditCheckbox = item.querySelector('input[name*="[is_credit_use]"][type="checkbox"]');
                const privateCheckbox = item.querySelector('input[name*="[is_private_use]"][type="checkbox"]');

                if (tanggalInput) tanggalInput.value = clipboardNota.tanggal_pengeluaran || '';
                if (jenisSelect) {
                    jenisSelect.value = clipboardNota.jenis_biaya || '';
                    // Trigger change 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 (creditCheckbox) {
                    creditCheckbox.checked = (clipboardNota.is_credit_use == '1' || clipboardNota
                        .is_credit_use === true);
                }

                if (privateCheckbox) {
                    privateCheckbox.checked = (clipboardNota.is_private_use == '1' || clipboardNota
                        .is_private_use === true);
                }

                // Update currency badge
                const currencyBtn = item.querySelector('button[onclick*="showCurrencyModal"]');
                if (currencyBtn) {
                    const badge = currencyBtn.querySelector('.mobile-currency-badge');
                    if (badge) badge.textContent = clipboardNota.mata_uang || 'IDR';
                    currencyBtn.title = `Pilih Mata Uang: ${clipboardNota.mata_uang || 'IDR'}`;
                }

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

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

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

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

            // --- MOBILE FAB MENU CONTROL ---
            const mobileFabMainBtn = document.getElementById('mobileFabMainBtn');
            const mobileFabMenu = document.getElementById('mobileFabMenu');
            const mobileFabBackdrop = document.getElementById('mobileFabBackdrop');
            let mobileFabIsOpen = false;

            function toggleMobileFabMenu() {
                mobileFabIsOpen = !mobileFabIsOpen;
                if (mobileFabIsOpen) {
                    mobileFabMenu.classList.add('active');
                    mobileFabBackdrop.classList.add('active');
                    mobileFabMainBtn.classList.add('active');
                } else {
                    mobileFabMenu.classList.remove('active');
                    mobileFabBackdrop.classList.remove('active');
                    mobileFabMainBtn.classList.remove('active');
                }
            }

            function closeMobileFabMenu() {
                if (mobileFabIsOpen) {
                    mobileFabIsOpen = false;
                    mobileFabMenu.classList.remove('active');
                    mobileFabBackdrop.classList.remove('active');
                    mobileFabMainBtn.classList.remove('active');
                }
            }

            if (mobileFabMainBtn) {
                mobileFabMainBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    toggleMobileFabMenu();
                });
            }

            if (mobileFabBackdrop) {
                mobileFabBackdrop.addEventListener('click', closeMobileFabMenu);
            }

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

            // Setup FAB menu item actions
            const mobileScrollToNotaBtn = document.getElementById('mobileScrollToNotaBtn');
            const mobileAddNotaBtn = document.getElementById('mobileAddNotaBtn');
            const mobileScrollToExchangeBtn = document.getElementById('mobileScrollToExchangeBtn');
            const mobileAddExchangeBtn = document.getElementById('mobileAddExchangeBtn');
            const notaFormSection = document.getElementById('notaReimburseForm');
            const exchangeFormSection = document.getElementById('exchangeTransactionsForm');

            if (mobileScrollToNotaBtn && notaFormSection) {
                mobileScrollToNotaBtn.addEventListener('click', function() {
                    notaFormSection.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                });
            }

            if (mobileAddNotaBtn) {
                mobileAddNotaBtn.addEventListener('click', function() {
                    addNotaToCurrentDate();
                });
            }

            if (mobileScrollToExchangeBtn && exchangeFormSection) {
                mobileScrollToExchangeBtn.addEventListener('click', function() {
                    exchangeFormSection.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                });
            }

            if (mobileAddExchangeBtn) {
                mobileAddExchangeBtn.addEventListener('click', function() {
                    addExchangeToCurrentDate();
                });
            }

            // --- APP INITIALIZATION ---
            initializeApp();

            function initializeApp() {
                try {
                    // [DIUBAH] 2. INISIALISASI STATE DENGAN COUNTER UNTUK VALIDASI
                    karyawanData.forEach(emp => {
                        notaState[emp.nik] = {
                            dateTabs: {},
                            rowCounter: 0 // Counter per karyawan untuk mencocokkan index validasi
                        };
                    });

                    renderExistingNota();
                    setupPostButton();
                    setupFormChangeDetection();
                    initializeAllFlatpickr();

                    // Initialize button states setelah semua data existing di-load
                    // Pada initial load, form belum dirty jadi button harus disabled
                    setTimeout(() => {
                        updatePostButtonState();
                        updateSaveButtonState();
                    }, 200);

                    // Setup dropdown date selector event
                    const dateSelect = document.getElementById('dateSelect');
                    if (dateSelect) {
                        dateSelect.addEventListener('change', function() {
                            if (this.value && currentEmployeeNik) {
                                switchToDateTab(currentEmployeeNik, this.value);
                            }
                        });
                    }

                    // Initialize exchange section
                    initializeExchangeSection();
                    renderExistingExchange();

                    // Auto-select first employee in dropdown (after all functions are defined)
                    // Use setTimeout to ensure all window functions are available
                    setTimeout(() => {
                        autoSelectInitialEmployee();
                    }, 100);

                    console.log('App initialized successfully. Initial Nota State:', notaState);
                } catch (error) {
                    console.error('Error initializing app:', error);
                    alert('Terjadi kesalahan saat memuat aplikasi. Silakan refresh halaman.');
                }
            }

            // --- CORE LOGIC ---

            // [DIUBAH] 3. FUNGSI INTI UNTUK MENAMBAH NOTA DENGAN LOGIKA VALIDASI
            function addNotaToDate(dateString, existingData = null, nikParam = null) {
                const nik = nikParam || currentEmployeeNik;
                if (!nik || !notaState[nik]) return;

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

                // Dapatkan index nota untuk karyawan ini (cocok dengan index validasi backend)
                const notaIndexForValidation = notaState[nik].rowCounter;
                notaState[nik].rowCounter++; // Naikkan counter untuk nota berikutnya

                ensureDateTab(nik, dateString);

                const notaId = `nota_${nik}_${globalNotaCounter++}`;
                const notaHtml = createNotaHtml(notaId, dateString, existingData, nik, notaIndexForValidation);

                const container = getNotaContainerForDate(nik, dateString);
                if (container) {
                    const emptyState = container.querySelector('.mobile-empty-state');
                    if (emptyState) emptyState.remove();

                    container.insertAdjacentHTML('beforeend', notaHtml);

                    const notaElement = document.getElementById(notaId);
                    if (notaElement) {
                        const fields = ['tanggal_pengeluaran', 'jenis_biaya', 'keterangan', 'details', 'jumlah',
                            'mata_uang', 'jumlah_awal', 'mata_uang_awal'
                        ];
                        fields.forEach(field => {
                            const errorKey = `notaReimburse.${nik}.${notaIndexForValidation}.${field}`;
                            if (validationErrors[errorKey]) {
                                const input = notaElement.querySelector(
                                    `[name="notaReimburse[${nik}][${notaIndexForValidation}][${field}]"]`
                                );
                                if (input) {
                                    input.classList.add('is-invalid');
                                    let parent = input.parentElement;
                                    if (parent.classList.contains('mobile-currency-amount') || parent
                                        .classList.contains('mobile-toggle-group') || parent.classList
                                        .contains('mobile-switch')) {
                                        parent = parent.closest('.mobile-form-group');
                                    }
                                    const errorDiv = document.createElement('div');
                                    errorDiv.className = 'invalid-feedback';
                                    errorDiv.textContent = validationErrors[errorKey][0];
                                    parent.appendChild(errorDiv);
                                }
                            }
                        });
                    }

                    initializeFlatpickrForNota(notaId, dateString);
                    setupNotaEventListeners(notaId);

                    if (!notaState[nik].dateTabs[dateString].notaIds) {
                        notaState[nik].dateTabs[dateString].notaIds = [];
                    }
                    notaState[nik].dateTabs[dateString].notaIds.push(notaId);

                    switchToDateTab(nik, dateString);

                    setTimeout(() => {
                        const element = document.getElementById(notaId);
                        if (element && !existingData) element.scrollIntoView({
                            behavior: 'smooth',
                            block: 'nearest'
                        });
                    }, 100);

                    // Hanya set dirty jika ini nota baru (bukan existing data)
                    if (!existingData) {
                        setFormDirty(true);
                    }
                }
                return notaId;
            }

            // [DIUBAH] 4. FUNGSI CREATE HTML DENGAN INDEX VALIDASI
            function createNotaHtml(notaId, dateString, data = null, nik, notaIndex) {
                const isExisting = data && data.id;
                const notaData = data || {};

                const isLainnyaSelected = notaData.jenis_biaya && !defaultBiayaOptions.some(b => b.nama_biaya ===
                    notaData.jenis_biaya);
                const privateUseDisabled = isLainnyaSelected ? '' : 'disabled';
                const privateUseCheckedYa = notaData.is_private_use == 1 || String(notaData.is_private_use) ===
                    'true' ? 'checked' : '';

                const creditUseChecked = notaData.is_credit_use == 1 || String(notaData.is_credit_use) === 'true' ?
                    'checked' : '';

                const selectedJenis = isLainnyaSelected ? 'lainnya' : (notaData.jenis_biaya || '');
                const customKeterangan = isLainnyaSelected ? notaData.jenis_biaya : (notaData.keterangan || '');

                return `
                    <div class="mobile-nota-item" id="${notaId}" data-nik="${nik}" data-date="${dateString}" style="display: block;">
                        <div class="mobile-nota-header">
                            <div class="mobile-nota-date">${formatDisplayDate(notaData.tanggal_pengeluaran || dateString)}</div>
                            <div class="mobile-copy-paste-container">
                                <button type="button" class="mobile-copy-btn" onclick="copyNotaData('${notaId}')" title="Copy Nota">
                                    <i class="fas fa-copy"></i>
                                    <span>Copy</span>
                                </button>
                                <button type="button" class="mobile-paste-btn mobile-nota-paste-btn" onclick="pasteNotaData('${notaId}')" title="Paste Nota" disabled>
                                    <i class="fas fa-paste"></i>
                                    <span>Paste</span>
                                </button>
                            </div>
                            <button type="button" class="mobile-nota-delete" onclick="removeNota('${notaId}')" title="Hapus Nota"><i class="fas fa-trash"></i></button>
                        </div>
                        
                        ${isExisting ? `<input type="hidden" name="notaReimburse[${nik}][${notaIndex}][id]" value="${notaData.id}">` : ''}
                        
                        <div class="mobile-form-group"><label class="mobile-form-label">Tanggal Pengeluaran *</label><input type="text" id="${notaId}_tanggal" name="notaReimburse[${nik}][${notaIndex}][tanggal_pengeluaran]" class="mobile-form-control flatpickr-nota" value="${notaData.tanggal_pengeluaran || dateString}" required autocomplete="off"></div>
                        <div class="mobile-form-group"><label class="mobile-form-label">Jenis Biaya *</label><select name="notaReimburse[${nik}][${notaIndex}][jenis_biaya]" class="mobile-select jenis-biaya-select" data-nota-id="${notaId}" required><option value="">Pilih Jenis Biaya</option>${getJenisBiayaOptions(selectedJenis)}<option value="lainnya" ${selectedJenis === 'lainnya' ? 'selected' : ''}>Lainnya</option></select></div>
                        <div class="mobile-form-group keterangan-group" id="${notaId}_keterangan_group" style="display: ${isLainnyaSelected ? 'block' : 'none'};"><label class="mobile-form-label">Keterangan <span class="text-danger">*</span></label><input type="text" name="notaReimburse[${nik}][${notaIndex}][keterangan]" class="mobile-form-control" value="${customKeterangan}"></div>
                        <div class="mobile-form-group"><label class="mobile-form-label">Detail <span class="text-danger">*</span></label><input type="text" name="notaReimburse[${nik}][${notaIndex}][details]" class="mobile-form-control" value="${notaData.details || ''}"></div>
                        <div class="mobile-form-group"><label class="mobile-form-label">Jumlah & Mata Uang *</label><div class="mobile-currency-amount"><input type="text" step="any" name="notaReimburse[${nik}][${notaIndex}][jumlah]" class="currency-input mobile-form-control" value="${notaData.jumlah || ''}" required><input type="hidden" name="notaReimburse[${nik}][${notaIndex}][mata_uang]" id="${notaId}_currency" value="${notaData.mata_uang || 'IDR'}"><button type="button" class="mobile-currency-btn" onclick="showCurrencyModal('${notaId}')" title="Pilih Mata Uang: ${notaData.mata_uang || 'IDR'}"><i class="fas fa-search"></i><span class="mobile-currency-badge">${notaData.mata_uang || 'IDR'}</span></button></div></div>
                        <div class="mobile-row two-cols">
                            <div class="mobile-form-group"><div class="mobile-toggle-group"><label class="mobile-toggle-label">Credit Use</label><input type="hidden" name="notaReimburse[${nik}][${notaIndex}][is_credit_use]" value="0"><label class="mobile-switch"><input type="checkbox" name="notaReimburse[${nik}][${notaIndex}][is_credit_use]" value="1" ${creditUseChecked}><span class="mobile-slider"></span></label></div></div>
                            <div class="mobile-form-group"><div class="mobile-toggle-group"><label class="mobile-toggle-label">Private Use</label><input type="hidden" name="notaReimburse[${nik}][${notaIndex}][is_private_use]" value="0"><label class="mobile-switch"><input type="checkbox" name="notaReimburse[${nik}][${notaIndex}][is_private_use]" value="1" class="private-use-switch" ${privateUseCheckedYa} ${privateUseDisabled}><span class="mobile-slider"></span></label></div></div>
                        </div>
                    </div>
                `;
            }

            function renderExistingNota() {
                if (notaData && typeof notaData === 'object') {
                    Object.keys(notaData).forEach(nik => {
                        if (Array.isArray(notaData[nik])) {
                            notaData[nik].forEach((nota) => {
                                const notaId = addNotaToDate(nota.tanggal_pengeluaran, nota, nik);
                                if (notaId) {
                                    setTimeout(() => initializeFlatpickrForNota(notaId, nota
                                        .tanggal_pengeluaran), 100);
                                }
                            });
                        }
                    });
                }

                if (currentEmployeeNik) {
                    renderNotaForEmployee(currentEmployeeNik);
                }
                setTimeout(forceInitAllNotaDatepickers, 500);
            }

            // --- UI & HELPER FUNCTIONS (TIDAK ADA PERUBAHAN SIGNIFIKAN DI BAWAH INI) ---

            window.switchEmployee = function(nik) {
                currentEmployeeNik = nik;
                document.querySelectorAll('.mobile-employee-tab').forEach(tab => tab.classList.remove(
                    'active'));
                const activeTab = document.querySelector(`[data-nik="${nik}"]`);
                if (activeTab) activeTab.classList.add('active');

                renderNotaForEmployee(nik);
                refreshDateDropdown();
                updateEmployeePlaceholderState();
            };

            function autoSelectInitialEmployee() {
                const empSelect = document.getElementById('employeeSelect');
                if (empSelect) {
                    const real = Array.from(empSelect.options).find(o => !o.disabled && !o.hidden && o.value !==
                        '');
                    if (real && !empSelect.value) {
                        empSelect.value = real.value;
                        // Use window.switchEmployee to ensure it's available
                        if (typeof window.switchEmployee === 'function') {
                            window.switchEmployee(real.value);
                        }
                    }
                    updateEmployeePlaceholderState();
                }
            }

            function flashDropdownHint(wrapperId, delay = 0) {
                const wrapper = document.getElementById(wrapperId);
                if (!wrapper) return;
                setTimeout(() => {
                    wrapper.classList.add('flash-hint');
                    setTimeout(() => wrapper.classList.remove('flash-hint'), 1400);
                }, delay);
            }

            function updateEmployeePlaceholderState() {
                const wrapper = document.getElementById('employeeDropdownWrapper');
                const select = document.getElementById('employeeSelect');
                if (!wrapper || !select) return;
                wrapper.classList.toggle('placeholder-active', !select.value);
            }

            function updateDatePlaceholderState() {
                const wrapper = document.getElementById('dateDropdownWrapper');
                const select = document.getElementById('dateSelect');
                if (!wrapper || !select) return;
                wrapper.classList.toggle('placeholder-active', !select.value);
            }

            window.addNotaToCurrentDate = function() {
                if (!currentEmployeeNik) {
                    alert('Pilih karyawan terlebih dahulu');
                    return;
                }

                // Validasi sebelum menambah nota baru
                if (!validateAllNotaCards(currentEmployeeNik)) {
                    return; // Batalkan jika ada card yang belum valid
                }

                const today = new Date().toISOString().split('T')[0];
                addNotaToDate(today, null, currentEmployeeNik);
            };

            window.addNotaToCurrentTab = function() {
                if (!currentEmployeeNik) {
                    alert('Pilih karyawan terlebih dahulu');
                    return;
                }

                // Validasi sebelum menambah nota baru
                if (!validateAllNotaCards(currentEmployeeNik)) {
                    return; // Batalkan jika ada card yang belum valid
                }

                const activeTab = document.querySelector('.mobile-date-tab.active');
                let targetDate = (activeTab && activeTab.dataset.date) ? activeTab.dataset.date : new Date()
                    .toISOString().split('T')[0];
                addNotaToDate(targetDate, null, currentEmployeeNik);
            };

            function ensureDateTab(nik, dateString) {
                if (!notaState[nik]) notaState[nik] = {
                    dateTabs: {}
                };
                if (notaState[nik].dateTabs[dateString]) return;

                let tabButton = null;
                if (nik === currentEmployeeNik) {
                    const dateTabs = document.getElementById('dateTabs');
                    if (dateTabs) {
                        tabButton = document.createElement('button');
                        tabButton.type = 'button';
                        tabButton.className = 'mobile-date-tab';
                        tabButton.dataset.nik = nik;
                        tabButton.dataset.date = dateString;
                        tabButton.innerHTML = `<i class="fas fa-calendar"></i> ${formatDisplayDate(dateString)}`;
                        tabButton.onclick = () => switchToDateTab(nik, dateString);
                        dateTabs.appendChild(tabButton);
                    }
                }
                notaState[nik].dateTabs[dateString] = {
                    tabElement: tabButton,
                    notaIds: []
                };
            }

            function switchToDateTab(nik, dateString) {
                document.querySelectorAll('.mobile-date-tab').forEach(tab => tab.classList.remove('active'));
                const targetTab = document.querySelector(`[data-nik="${nik}"][data-date="${dateString}"]`);
                if (targetTab) targetTab.classList.add('active');

                document.querySelectorAll('.mobile-nota-item').forEach(item => {
                    item.style.display = (item.dataset.nik === nik && item.dataset.date === dateString) ?
                        'block' : 'none';
                });

                const hasItems = document.querySelector(
                    `.mobile-nota-item[data-nik="${nik}"][data-date="${dateString}"]`);
                if (hasItems) {
                    const emptyEl = document.querySelector('.mobile-empty-state');
                    if (emptyEl) emptyEl.remove();
                }

                updateAddNotaButtonText(dateString);
                setTimeout(forceInitAllNotaDatepickers, 120);
            }

            function updateAddNotaButtonText(dateString) {
                const buttonText = document.getElementById('addNotaTabButtonText');
                if (buttonText) {
                    buttonText.textContent = dateString ? `Tambah nota (${formatDisplayDate(dateString)})` :
                        'Tambah nota (Tanggal Sesuai Tab)';
                }
                refreshDateDropdown();
            }

            function getNotaContainerForDate(nik, dateString) {
                return document.getElementById('notaContainer');
            }

            function forceInitAllNotaDatepickers() {
                document.querySelectorAll('.flatpickr-nota:not(.fp-initialized)').forEach(inp => {
                    if (inp.id) {
                        const notaId = inp.id.replace('_tanggal', '');
                        initializeFlatpickrForNota(notaId, inp.value);
                    }
                });
            }

            function initializeFlatpickrForNota(notaId, currentDate) {
                const dateInput = document.getElementById(`${notaId}_tanggal`);
                if (!dateInput || dateInput.classList.contains('fp-initialized')) return;

                if (dateInput._flatpickr) dateInput._flatpickr.destroy();

                const fpInstance = flatpickr(dateInput, {
                    dateFormat: 'Y-m-d',
                    defaultDate: currentDate || new Date(),
                    disableMobile: true,
                    onChange: (selectedDates, dateStr) => {
                        if (dateStr && dateStr !== dateInput.dataset.originalDate) {
                            dateInput.dataset.originalDate = dateStr;
                            moveNotaToDate(notaId, dateStr);
                        }
                    },
                    onReady: () => {
                        dateInput.dataset.originalDate = dateInput.value;
                        dateInput.classList.add('fp-initialized');
                    }
                });
                dateInput._flatpickr = fpInstance;
            }

            function moveNotaToDate(notaId, newDate) {
                const notaElement = document.getElementById(notaId);
                if (!notaElement) return;

                const oldNik = notaElement.dataset.nik;
                const oldDate = notaElement.dataset.date;
                notaElement.dataset.date = newDate;

                ensureDateTab(oldNik, newDate);

                if (notaState[oldNik] && notaState[oldNik].dateTabs[oldDate]) {
                    const index = notaState[oldNik].dateTabs[oldDate].notaIds.indexOf(notaId);
                    if (index > -1) notaState[oldNik].dateTabs[oldDate].notaIds.splice(index, 1);
                }

                notaState[oldNik].dateTabs[newDate].notaIds.push(notaId);
                switchToDateTab(oldNik, newDate);
                setFormDirty(true);
            }

            function setupNotaEventListeners(notaId) {
                const notaElement = document.getElementById(notaId);
                if (!notaElement) return;

                notaElement.querySelectorAll('input, select, textarea').forEach(input => {
                    input.addEventListener('change', () => setFormDirty(true));
                    input.addEventListener('input', () => setFormDirty(true));
                });

                const jenisSelect = notaElement.querySelector('.jenis-biaya-select');
                const keteranganGroup = notaElement.querySelector('.keterangan-group');
                const privateUseSwitch = notaElement.querySelector('.private-use-switch');

                const updatePrivateUseState = (selectedValue) => {
                    if (privateUseSwitch) {
                        privateUseSwitch.disabled = selectedValue !== 'lainnya';
                        if (selectedValue !== 'lainnya') privateUseSwitch.checked = false;
                        if (keteranganGroup) keteranganGroup.style.display = selectedValue === 'lainnya' ?
                            'block' : 'none';
                    }
                };

                if (jenisSelect) jenisSelect.addEventListener('change', () => updatePrivateUseState(jenisSelect
                    .value));

                if (jenisSelect) updatePrivateUseState(jenisSelect.value);
            }

            window.removeNota = function(notaId) {
                const notaElement = document.getElementById(notaId);
                if (!notaElement) 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) return;
                    const nik = notaElement.dataset.nik;
                    const date = notaElement.dataset.date;

                    if (notaState[nik] && notaState[nik].dateTabs[date]) {
                        const notaIds = notaState[nik].dateTabs[date].notaIds;
                        const index = notaIds.indexOf(notaId);
                        if (index > -1) notaIds.splice(index, 1);
                        if (notaIds.length === 0) removeDateTab(nik, date);
                    }
                    notaElement.remove();
                    setFormDirty(true);
                    Swal.fire({
                        icon: 'success',
                        title: 'Dihapus',
                        text: 'Nota berhasil dihapus.',
                        timer: 1400,
                        showConfirmButton: false
                    });
                });
            };

            function removeDateTab(nik, date) {
                if (notaState[nik] && notaState[nik].dateTabs[date]) {
                    const tabInfo = notaState[nik].dateTabs[date];
                    if (tabInfo.tabElement) tabInfo.tabElement.remove();
                    delete notaState[nik].dateTabs[date];

                    const remainingDates = Object.keys(notaState[nik].dateTabs);
                    if (remainingDates.length > 0) {
                        switchToDateTab(nik, remainingDates[0]);
                    } else if (nik === currentEmployeeNik) {
                        showEmptyState();
                    }
                }
            }

            function getJenisBiayaOptions(selectedValue) {
                return defaultBiayaOptions.map(biaya =>
                    `<option value="${biaya.nama_biaya}" ${selectedValue === biaya.nama_biaya ? 'selected' : ''}>${biaya.nama_biaya}</option>`
                ).join('');
            }

            window.showCurrencyModal = function(targetId) {
                currentTargetInput = targetId;
                let currencyOptionsHtml = currenciesData.map(c =>
                    `<div class="swal-currency-item" onclick="selectCurrencyFromSwal('${c.code}')" style="padding: 12px 16px; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 8px; cursor: pointer; background: white;"><div style="display: flex; justify-content: space-between; align-items: center;"><span style="font-weight: 600;">${c.code}</span><span style="color: #6b7280; font-size: 0.9rem;">${c.negara_nama}</span></div></div>`
                ).join('');
                Swal.fire({
                    title: '<i class="fas fa-coins"></i> Pilih Mata Uang',
                    html: `<div style="text-align: left;"><div style="margin-bottom: 16px;"><input type="text" id="swalCurrencySearch" placeholder="Cari..." style="width: 100%; padding: 12px; border: 2px solid #e5e7eb; border-radius: 8px;"></div><div id="swalCurrencyList" style="max-height: 300px; overflow-y: auto;">${currencyOptionsHtml}</div></div>`,
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'Batal',
                    didOpen: () => {
                        const searchInput = document.getElementById('swalCurrencySearch');
                        searchInput.addEventListener('input', () => {
                            const term = searchInput.value.toLowerCase();
                            document.querySelectorAll('.swal-currency-item').forEach(
                                item => {
                                    item.style.display = item.textContent.toLowerCase()
                                        .includes(term) ? 'block' : 'none';
                                });
                        });
                    }
                });
            };

            window.selectCurrencyFromSwal = function(code) {
                if (currentTargetInput) {
                    const isExchange = currentTargetInput.includes('_exchange');
                    const baseId = currentTargetInput.replace('_exchange', '');
                    const hiddenInput = document.getElementById(
                        `${baseId}${isExchange ? '_exchange' : ''}_currency`);
                    const buttonElement = document.querySelector(
                        `[onclick="showCurrencyModal('${currentTargetInput}')"]`);
                    if (hiddenInput) hiddenInput.value = code;
                    if (buttonElement) {
                        const badge = buttonElement.querySelector('.mobile-currency-badge');
                        if (badge) badge.textContent = code;
                        buttonElement.title = `Mata Uang: ${code} - Klik untuk ganti`;
                    }
                    setFormDirty(true);
                }
                Swal.close();
                currentTargetInput = null;
            };

            function renderNotaForEmployee(nik) {
                const dateTabs = document.getElementById('dateTabs');
                if (dateTabs) dateTabs.innerHTML = '';
                document.querySelectorAll('.mobile-nota-item').forEach(item => item.style.display = 'none');

                if (notaState[nik] && notaState[nik].dateTabs) {
                    const dates = Object.keys(notaState[nik].dateTabs).sort((a, b) => b.localeCompare(
                        a)); // Sort newest first

                    dates.forEach((date, index) => {
                        const tabButton = document.createElement('button');
                        tabButton.type = 'button';
                        tabButton.className = `mobile-date-tab`;
                        tabButton.dataset.nik = nik;
                        tabButton.dataset.date = date;
                        tabButton.innerHTML = `<i class="fas fa-calendar"></i> ${formatDisplayDate(date)}`;
                        tabButton.onclick = () => switchToDateTab(nik, date);
                        dateTabs.appendChild(tabButton);
                        notaState[nik].dateTabs[date].tabElement = tabButton;
                    });

                    if (dates.length > 0) {
                        const emptyEl = document.querySelector('.mobile-empty-state');
                        if (emptyEl) emptyEl.remove();
                        switchToDateTab(nik, dates[0]);
                    } else {
                        showEmptyState();
                    }
                } else {
                    showEmptyState();
                }
            }

            function initializeAllFlatpickr() {
                setTimeout(() => {
                    document.querySelectorAll('.flatpickr-nota:not(.fp-initialized)').forEach(input => {
                        if (input.id) {
                            const notaId = input.id.replace('_tanggal', '');
                            initializeFlatpickrForNota(notaId, input.value);
                        }
                    });
                }, 500);
            }

            function showEmptyState() {
                const container = document.getElementById('notaContainer');
                if (!container) return;
                const anyVisibleForCurrent = Array.from(container.querySelectorAll('.mobile-nota-item')).some(el =>
                    el.style.display !== 'none' && el.dataset.nik === currentEmployeeNik);
                if (anyVisibleForCurrent) {
                    const existingEmpty = container.querySelector('.mobile-empty-state');
                    if (existingEmpty) existingEmpty.remove();
                    return;
                }
                if (!container.querySelector('.mobile-empty-state')) {
                    container.innerHTML =
                        `<div class="mobile-empty-state"><i class="fas fa-receipt"></i><p>Belum ada nota</p><p style="font-size: 0.8rem;">Tap tombol + untuk menambah nota</p></div>`;
                }
                updateAddNotaButtonText(null);
                const dateSelect = document.getElementById('dateSelect');
                if (dateSelect) dateSelect.innerHTML =
                    '<option value="" disabled selected hidden>-- Tambah Nota Baru --</option>';
            }

            function refreshDateDropdown() {
                const select = document.getElementById('dateSelect');
                if (!select) return;
                const tabs = document.querySelectorAll(`.mobile-date-tab[data-nik="${currentEmployeeNik}"]`);
                const activeTab = document.querySelector('.mobile-date-tab.active');
                const activeDate = activeTab ? activeTab.dataset.date : '';
                select.innerHTML = '<option value="" disabled selected hidden>-- Pilih / Tambah Nota --</option>';
                tabs.forEach(tab => {
                    const opt = document.createElement('option');
                    opt.value = tab.dataset.date;
                    opt.textContent = tab.textContent.trim();
                    if (tab.dataset.date === activeDate) opt.selected = true;
                    select.appendChild(opt);
                });
                if (activeDate) select.value = activeDate;
                updateDatePlaceholderState();
            }

            function formatDisplayDate(dateString) {
                if (!dateString) return '';
                const [year, month, day] = dateString.split('-');
                return `${day}/${month}/${year}`;
            }

            function setupFormChangeDetection() {
                const form = document.getElementById('notaForm');
                if (form) {
                    form.addEventListener('change', () => setFormDirty(true));
                    form.addEventListener('input', () => setFormDirty(true));
                }
                // PENTING: Jangan update button state di initial load
                // Button state akan di-update setelah semua data existing di-load (lihat initializeApp)
                // Ini memastikan button hanya berubah ketika user melakukan perubahan
            }

            function setFormDirty(isDirty) {
                if (formIsDirty === isDirty) return;
                formIsDirty = isDirty;
                updatePostButtonState();
                updateSaveButtonState();
            }

            function updatePostButtonState() {
                const postButton = document.getElementById('postButton');
                if (postButton) {
                    postButton.disabled = formIsDirty;
                    postButton.innerHTML = formIsDirty ? '<i class="fas fa-exclamation-triangle"></i> Simpan Dulu' :
                        '<i class="fas fa-paper-plane"></i> Post';
                    postButton.classList.toggle('mobile-btn-success', !formIsDirty);
                    postButton.classList.toggle('mobile-btn-secondary', formIsDirty);
                }
            }

            function updateSaveButtonState() {
                const saveButton = document.getElementById('saveButton');
                if (!saveButton) return;
                saveButton.disabled = !formIsDirty;
                saveButton.innerHTML = !formIsDirty ? '<i class="fas fa-check-circle"></i> Tersimpan' :
                    '<i class="fas fa-save"></i> Simpan';
                saveButton.classList.toggle('mobile-btn-primary', formIsDirty);
                saveButton.classList.toggle('mobile-btn-secondary', !formIsDirty);
            }

            // --- SAVE BUTTON LOADING STATE MANAGEMENT (MOBILE) ---
            (function() {
                const notaForm = document.getElementById('notaForm');
                const saveButton = document.getElementById('saveButton');
                if (!notaForm || !saveButton) return;

                const originalSaveHtml = saveButton.innerHTML;

                function startSaveLoading() {
                    if (saveButton.dataset.loading === 'true') return; // already loading
                    saveButton.dataset.loading = 'true';
                    saveButton.disabled = true;
                    saveButton.classList.add('disabled');
                    saveButton.innerHTML = '<span class="spinner-border spinner-border-sm align-middle me-2" role="status" aria-hidden="true"></span><span>Menyimpan...</span>';
                }

                function resetSaveLoading() {
                    saveButton.dataset.loading = 'false';
                    saveButton.disabled = false;
                    saveButton.classList.remove('disabled');
                    saveButton.innerHTML = originalSaveHtml;
                }

                function showInlineFormAlert(message, duration = 4000) {
                    // Remove old inline alert if any
                    const existing = document.getElementById('mobile-inline-alert');
                    if (existing) existing.remove();

                    const alert = document.createElement('div');
                    alert.id = 'mobile-inline-alert';
                    alert.className = 'mobile-inline-alert';
                    alert.style.cssText = 'background:#fff3cd;border:1px solid #ffeeba;padding:10px;border-radius:6px;margin-bottom:10px;color:#856404;';
                    alert.textContent = message;

                    const container = document.querySelector('.mobile-card-body') || notaForm;
                    if (container) container.insertBefore(alert, container.firstChild);

                    if (duration > 0) setTimeout(() => {
                        if (alert) alert.remove();
                    }, duration);
                }

                // Attach to submit: defer starting loading so other handlers (validation) can prevent submit
                notaForm.addEventListener('submit', function(e) {
                    // Run full validation before submit (no SweetAlert popups; show inline alerts and focus)
                    let allValid = true;
                    if (typeof notaState === 'object') {
                        Object.keys(notaState).forEach(nik => {
                            if (!validateAllNotaCards(nik, false)) allValid = false;
                        });
                    }
                    if (typeof exchangeState === 'object') {
                        Object.keys(exchangeState).forEach(nik => {
                            if (!validateAllExchangeCards(nik, false)) allValid = false;
                        });
                    }

                    if (!allValid) {
                        e.preventDefault();
                        if (typeof resetSaveLoading === 'function') resetSaveLoading();
                        // show inline alert near form top
                        if (typeof window.showInlineFormAlert === 'function') window.showInlineFormAlert('Terdapat field yang belum terisi. Harap lengkapi field yang ditandai.');
                        return;
                    }

                    setTimeout(() => {
                        if (e.defaultPrevented) return; // prevented by other handlers
                        const active = document.activeElement;
                        if (active === saveButton || (active && active.type === 'submit' && active.id === 'saveButton')) {
                            if (notaForm.checkValidity()) {
                                startSaveLoading();
                            }
                        }
                    }, 0);
                }, true);

                // Guard against double clicks: do NOT start loading here; let submit handler decide after validations
                saveButton.addEventListener('click', function(e) {
                    if (saveButton.dataset.loading === 'true') {
                        e.preventDefault();
                        e.stopImmediatePropagation();
                        return false;
                    }
                    // Allow the form submit event to run validations and start loading if all checks pass
                });

                // Expose reset for other scripts if needed
                window.resetMobileSaveButton = resetSaveLoading;
                window.showInlineFormAlert = showInlineFormAlert;
            })();

            function setupPostButton() {
                const postButton = document.getElementById('postButton');
                if (postButton) {
                    postButton.addEventListener('click', function() {
                        if (formIsDirty) {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Perhatian!',
                                text: 'Harap simpan perubahan terlebih dahulu.',
                                confirmButtonText: 'OK'
                            });
                            return;
                        }
                        Swal.fire({
                            title: 'Konfirmasi Post Data',
                            text: 'Yakin ingin memposting data? Data yang sudah dipost tidak dapat diubah lagi.',
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonColor: '#028284',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Ya, Post Data!',
                            cancelButtonText: 'Batal'
                        }).then((result) => {
                            if (result.isConfirmed) postData();
                        });
                    });
                }
            }

            function postData() {
                Swal.fire({
                    title: 'Memproses...',
                    text: 'Sedang memposting data...',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });
                const formData = new FormData(document.getElementById('notaForm'));
                formData.append('idprzn', @json($permohonanPerizinanId ?? null));
                formData.append('idrbst', @json($permohonanReimburseId ?? null));

                fetch('{{ route('permohonan.reimburse.post') }}', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.ok ? response.json() : Promise.reject(response))
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil!',
                                    text: 'Data berhasil di-post.',
                                    confirmButtonText: 'OK'
                                })
                                .then(() => window.location.href = "{{ url('/rbstpj') }}");
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal!',
                                text: data.error || 'Terjadi kesalahan.',
                                confirmButtonText: 'OK'
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        Swal.fire({
                            icon: 'error',
                            title: 'Terjadi Kesalahan',
                            text: 'Gagal mem-post data. Silakan coba lagi.',
                            confirmButtonText: 'OK'
                        });
                    });
            }

            document.getElementById('notaForm').addEventListener('submit', function(e) {
                // If a prior handler prevented submission (client-side validation failed), do not start loading
                if (e.defaultPrevented) {
                    if (typeof resetMobileSaveButton === 'function') resetMobileSaveButton();
                    // Stop further submit processing
                    e.stopImmediatePropagation();
                    return;
                }

                pruneHiddenNotaFields();
                transformExchangeDataBeforeSubmit();
                const submitButton = document.getElementById('saveButton');
                if (submitButton) {
                    // Start loading UI only when actual submission proceeds
                    submitButton.disabled = true;
                    submitButton.innerHTML = '<span class="mobile-loading"></span> Menyimpan...';
                }
            });

            function pruneHiddenNotaFields() {
                document.querySelectorAll('.mobile-nota-item').forEach(item => {
                    const jenisSelect = item.querySelector('.jenis-biaya-select');
                    if (jenisSelect && jenisSelect.value !== 'lainnya') {
                        item.querySelector('input[name*="[keterangan]"]')?.remove();
                    }
                });
            }

            // ===== EXCHANGE TRANSACTIONS FUNCTIONS =====

            function initializeExchangeSection() {
                console.log('Initializing exchange section...');
                const exchangeTabsContainer = document.getElementById('exchangeKaryawanTabs');
                if (!exchangeTabsContainer) return;

                exchangeTabsContainer.innerHTML = '';

                karyawanData.forEach((emp, idx) => {
                    const empNik = emp.nik;
                    const empName = emp.nama || 'Unknown';

                    if (!exchangeState[empNik]) {
                        exchangeState[empNik] = [];
                    }

                    const tabBtn = document.createElement('button');
                    tabBtn.type = 'button';
                    tabBtn.className = 'mobile-employee-tab' + (idx === 0 ? ' active' : '');
                    tabBtn.setAttribute('data-nik', empNik);
                    tabBtn.innerHTML = `<i class="fas fa-user"></i> ${empName}`;
                    tabBtn.onclick = () => switchExchangeEmployee(empNik);
                    exchangeTabsContainer.appendChild(tabBtn);
                });
            }

            window.switchExchangeEmployee = function(nik) {
                // Sync current employee's data before switching
                if (currentExchangeEmployeeNik) {
                    syncExchangeDataFromDOM(currentExchangeEmployeeNik);
                }

                currentExchangeEmployeeNik = nik;

                // Update tab active state
                document.querySelectorAll('#exchangeKaryawanTabs .mobile-employee-tab').forEach(tab => {
                    if (tab.getAttribute('data-nik') === nik) {
                        tab.classList.add('active');
                    } else {
                        tab.classList.remove('active');
                    }
                });

                renderExchangeForEmployee(nik);
            };

            function syncExchangeDataFromDOM(nik) {
                // Capture current exchange data from DOM before re-rendering
                const exchanges = exchangeState[nik] || [];
                exchanges.forEach(exchange => {
                    const exchangeEl = document.getElementById(exchange.id);
                    if (exchangeEl) {
                        // Get current values from DOM
                        const details = exchangeEl.querySelector('[name*="[details]"]')?.value || '';
                        const jumlahAwal = exchangeEl.querySelector('[name*="[jumlah_awal]"]')?.value || '';
                        const currencyAwal = exchangeEl.querySelector('[name*="[currency_awal]"]')?.value ||
                            '';
                        const jumlahExchanged = exchangeEl.querySelector('[name*="[jumlah_exchanged]"]')
                            ?.value || '';
                        const currencyExchanged = exchangeEl.querySelector('[name*="[currency_exchanged]"]')
                            ?.value || '';
                        const exchangeDate = exchangeEl.querySelector('[name*="[exchange_date]"]')?.value ||
                            '';
                        const exchangeRate = exchangeEl.querySelector('[name*="[exchange_rate]"]')?.value ||
                            '';

                        // Update exchangeState with current DOM data
                        exchange.data = {
                            details: details,
                            jumlah_awal: jumlahAwal,
                            currency_awal: currencyAwal,
                            jumlah_exchanged: jumlahExchanged,
                            currency_exchanged: currencyExchanged,
                            exchange_date: exchangeDate,
                            exchange_rate: exchangeRate
                        };
                    }
                });
            }

            function renderExchangeForEmployee(nik) {
                const container = document.getElementById('exchangeContainer');
                if (!container) return;

                // Sync data from DOM before clearing
                syncExchangeDataFromDOM(nik);

                container.innerHTML = '';

                const exchanges = exchangeState[nik] || [];

                if (exchanges.length === 0) {
                    container.innerHTML = `
                        <div class="mobile-empty-state">
                            <i class="fas fa-exchange-alt"></i>
                            <h6>Belum ada exchange</h6>
                            <p>Klik tombol "Tambah Exchange" untuk menambahkan transaksi exchange</p>
                        </div>
                    `;
                    return;
                }

                exchanges.forEach(exchange => {
                    const exchangeHtml = createExchangeHtml(exchange.id, exchange.data, nik, exchanges
                        .indexOf(exchange), exchange.validationIndex);
                    container.insertAdjacentHTML('beforeend', exchangeHtml);

                    // Initialize flatpickr for this exchange item
                    setTimeout(() => {
                        initializeFlatpickrForExchange(exchange.id, exchange.data?.exchange_date ||
                            '');
                    }, 50);
                });
            }

            function createExchangeHtml(exchangeId, data = null, nik, exchangeIndex, validationIndex = null) {
                const d = data || {};

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

                return `
                    <div class="mobile-exchange-item" id="exchange-${exchangeId}" data-nik="${nik}">
                        <div class="mobile-exchange-header">
                            <span class="mobile-exchange-title"><i class="fas fa-exchange-alt"></i> Exchange #${exchangeIndex + 1}</span>
                            <div class="mobile-copy-paste-container">
                                <button type="button" class="mobile-copy-btn" onclick="copyExchangeData('exchange-${exchangeId}')" title="Copy Exchange">
                                    <i class="fas fa-copy"></i>
                                    <span>Copy</span>
                                </button>
                                <button type="button" class="mobile-paste-btn mobile-exchange-paste-btn" onclick="pasteExchangeData('exchange-${exchangeId}')" title="Paste Exchange" disabled>
                                    <i class="fas fa-paste"></i>
                                    <span>Paste</span>
                                </button>
                            </div>
                            <button type="button" class="mobile-exchange-delete" onclick="removeExchange(${exchangeId}, '${nik}')" title="Hapus">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </div>
                        
                        <input type="hidden" name="exchangeTransactions[${exchangeIndex}][nik]" value="${nik}">
                        
                        <div class="mobile-form-group">
                            <label class="mobile-form-label">Detail/Keterangan</label>
                            <textarea name="exchangeTransactions[${exchangeIndex}][details]" class="mobile-form-control ${hasDetailsError ? 'is-invalid' : ''}" rows="2" placeholder="Masukkan keterangan exchange">${d.details || ''}</textarea>
                            ${hasDetailsError ? `<div class="invalid-feedback d-block">${validationErrors[validationPrefix + '.details'][0]}</div>` : ''}
                        </div>
                        
                        <div class="mobile-form-group">
                            <label class="mobile-form-label">Jumlah Awal & Mata Uang *</label>
                            <div class="mobile-currency-amount">
                                <input type="text" step="any" name="exchangeTransactions[${exchangeIndex}][jumlah_awal]" class="currency-input mobile-form-control ${hasJumlahAwalError ? 'is-invalid' : ''}" value="${d.jumlah_awal || ''}" placeholder="0" required>
                                <input type="hidden" name="exchangeTransactions[${exchangeIndex}][currency_awal]" id="exchange-${exchangeId}-currency-awal" value="${d.currency_awal || 'IDR'}">
                                <button type="button" class="mobile-currency-btn" onclick="showCurrencyModal('exchange-${exchangeId}-awal')" title="Pilih Mata Uang: ${d.currency_awal || 'IDR'}">
                                    <i class="fas fa-search"></i>
                                    <span class="mobile-currency-badge">${d.currency_awal || 'IDR'}</span>
                                </button>
                            </div>
                            ${hasJumlahAwalError ? `<div class="invalid-feedback d-block">${validationErrors[validationPrefix + '.jumlah_awal'][0]}</div>` : ''}
                        </div>
                        
                        <div class="mobile-form-group">
                            <label class="mobile-form-label">Jumlah Exchanged & Mata Uang *</label>
                            <div class="mobile-currency-amount">
                                <input type="text" step="any" name="exchangeTransactions[${exchangeIndex}][jumlah_exchanged]" class="currency-input mobile-form-control ${hasJumlahExchangedError ? 'is-invalid' : ''}" value="${d.jumlah_exchanged || ''}" placeholder="0" required>
                                <input type="hidden" name="exchangeTransactions[${exchangeIndex}][currency_exchanged]" id="exchange-${exchangeId}-currency-exchanged" value="${d.currency_exchanged || 'USD'}">
                                <button type="button" class="mobile-currency-btn" onclick="showCurrencyModal('exchange-${exchangeId}-exchanged')" title="Pilih Mata Uang: ${d.currency_exchanged || 'USD'}">
                                    <i class="fas fa-search"></i>
                                    <span class="mobile-currency-badge">${d.currency_exchanged || 'USD'}</span>
                                </button>
                            </div>
                            ${hasJumlahExchangedError ? `<div class="invalid-feedback d-block">${validationErrors[validationPrefix + '.jumlah_exchanged'][0]}</div>` : ''}
                        </div>
                        
                        <div class="mobile-row">
                            <div class="mobile-form-group">
                                <label class="mobile-form-label">Tanggal Exchange</label>
                                <input type="text" name="exchangeTransactions[${exchangeIndex}][exchange_date]" class="mobile-form-control exchange-date-picker ${hasExchangeDateError ? 'is-invalid' : ''}" id="exchange-date-${exchangeId}" value="${d.exchange_date || ''}" placeholder="Pilih tanggal" readonly>
                                ${hasExchangeDateError ? `<div class="invalid-feedback d-block">${validationErrors[validationPrefix + '.exchange_date'][0]}</div>` : ''}
                            </div>
                        </div>
                    </div>
                `;
            }

            window.addExchangeToCurrentEmployee = function() {
                const nik = currentExchangeEmployeeNik;
                if (!nik) return;

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

                addExchangeTransaction(nik);
            };

            window.addExchangeToCurrentDate = function() {
                const nik = currentExchangeEmployeeNik || (karyawanData.length > 0 ? karyawanData[0].nik :
                    null);
                if (!nik) return;

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

                const today = new Date().toISOString().split('T')[0];
                addExchangeTransaction(nik, {
                    exchange_date: today
                }, null, true); // Pass flag isNewCard = true untuk trigger scroll

                // Scroll akan ditangani oleh addExchangeTransaction
            };

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

                const exchangeId = ++globalExchangeCounter; // Simpan hanya counter number

                if (!exchangeState[nik]) {
                    exchangeState[nik] = [];
                }

                const newExchange = {
                    id: exchangeId,
                    data: existingData || {},
                    validationIndex: validationIndex
                };

                exchangeState[nik].push(newExchange);

                if (currentExchangeEmployeeNik === nik) {
                    const container = document.getElementById('exchangeContainer');
                    if (container) {
                        // Remove empty state if exists
                        const emptyState = container.querySelector('.mobile-empty-state');
                        if (emptyState) {
                            emptyState.remove();
                        }

                        // Append new exchange HTML without re-rendering existing ones
                        const exchangeIndex = exchangeState[nik].length - 1;
                        const exchangeHtml = createExchangeHtml(exchangeId, existingData || {}, nik, exchangeIndex,
                            validationIndex);
                        container.insertAdjacentHTML('beforeend', exchangeHtml);

                        // Initialize flatpickr and scroll to new item
                        setTimeout(() => {
                            initializeFlatpickrForExchange(exchangeId, existingData?.exchange_date || '');
                            // Scroll ke card yang baru ditambahkan (dengan prefix "exchange-")
                            // Gunakan isNewCard flag untuk menentukan apakah perlu scroll
                            const newExchangeEl = document.getElementById(`exchange-${exchangeId}`);
                            if (newExchangeEl && (isNewCard || !existingData)) {
                                newExchangeEl.scrollIntoView({
                                    behavior: 'smooth',
                                    block: 'center'
                                });
                            }
                        }, 100);
                    }
                }

                // Hanya set dirty jika ini exchange baru (bukan existing data)
                if (!existingData || isNewCard) {
                    setFormDirty(true);
                }
            }

            window.removeExchange = function(exchangeId, nik) {
                Swal.fire({
                    title: 'Konfirmasi Hapus',
                    text: 'Apakah Anda yakin ingin menghapus exchange ini?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc2626',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Ya, Hapus',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Sync data from DOM before removing
                        syncExchangeDataFromDOM(nik);

                        const exchanges = exchangeState[nik] || [];
                        const idx = exchanges.findIndex(ex => ex.id === exchangeId);
                        if (idx !== -1) {
                            exchanges.splice(idx, 1);
                        }

                        // Re-render to update exchange numbers
                        renderExchangeForEmployee(nik);
                        setFormDirty(true);
                        Swal.fire('Terhapus!', 'Exchange berhasil dihapus.', 'success');
                    }
                });
            };

            function renderExistingExchange() {
                if (!exchangeTransactionsData) return;

                // Handle both array and object formats
                let exchangeArray = [];
                if (Array.isArray(exchangeTransactionsData)) {
                    exchangeArray = exchangeTransactionsData;
                } else if (typeof exchangeTransactionsData === 'object') {
                    // Convert object to array if it's in object format (keyed by NIK)
                    Object.keys(exchangeTransactionsData).forEach(nik => {
                        const nikData = exchangeTransactionsData[nik];
                        if (Array.isArray(nikData)) {
                            nikData.forEach(exchange => {
                                exchangeArray.push({
                                    ...exchange,
                                    nik: nik
                                });
                            });
                        }
                    });
                }

                if (exchangeArray.length === 0) return;

                exchangeArray.forEach((exchange, index) => {
                    const nik = exchange.nik;
                    if (!nik) return;

                    addExchangeTransaction(nik, {
                        details: exchange.details,
                        jumlah_awal: exchange.jumlah_awal,
                        currency_awal: exchange.currency_awal,
                        jumlah_exchanged: exchange.jumlah_exchanged,
                        currency_exchanged: exchange.currency_exchanged,
                        exchange_date: exchange.exchange_date,
                    }, index);
                });
            }

            function initializeFlatpickrForExchange(exchangeId, currentDate) {
                const input = document.getElementById(`exchange-date-${exchangeId}`);
                if (!input) return;

                // Destroy existing instance if any
                if (input._flatpickr) input._flatpickr.destroy();

                const fpInstance = flatpickr(input, {
                    dateFormat: 'Y-m-d',
                    defaultDate: currentDate || null,
                    disableMobile: true, // Consistent with nota
                    allowInput: true, // Allow manual input
                    onChange: (selectedDates, dateStr) => {
                        // Mark form as dirty when date changes
                        setFormDirty(true);
                    }
                });

                // Store instance for future reference
                input._flatpickr = fpInstance;
            }

            window.showCurrencyModalForExchange = function(targetId) {
                // targetId format: 'exchange-123-awal' or 'exchange-123-exchanged'
                showCurrencyModal(targetId);
            };

            function transformExchangeDataBeforeSubmit() {
                // Remove all existing exchange hidden inputs
                document.querySelectorAll('input[name^="exchangeTransactions["]').forEach(inp => {
                    if (inp.type === 'hidden' && !inp.closest('.mobile-exchange-item')) {
                        inp.remove();
                    }
                });

                const form = document.getElementById('notaForm');
                let globalIdx = 0;

                karyawanData.forEach(emp => {
                    const nik = emp.nik;
                    const exchanges = exchangeState[nik] || [];

                    exchanges.forEach(exchange => {
                        const exchangeEl = document.getElementById(exchange.id);
                        if (!exchangeEl) return;

                        // Get values from the visible exchange item
                        const details = exchangeEl.querySelector('[name*="[details]"]')?.value ||
                            '';
                        const jumlahAwal = exchangeEl.querySelector('[name*="[jumlah_awal]"]')
                            ?.value || '';
                        const currencyAwal = exchangeEl.querySelector('[name*="[currency_awal]"]')
                            ?.value || '';
                        const jumlahExchanged = exchangeEl.querySelector(
                            '[name*="[jumlah_exchanged]"]')?.value || '';
                        const currencyExchanged = exchangeEl.querySelector(
                            '[name*="[currency_exchanged]"]')?.value || '';
                        const exchangeDate = exchangeEl.querySelector('[name*="[exchange_date]"]')
                            ?.value || '';

                        // Create hidden inputs with consistent naming
                        const fields = {
                            nik: nik,
                            details: details,
                            jumlah_awal: jumlahAwal,
                            currency_awal: currencyAwal,
                            jumlah_exchanged: jumlahExchanged,
                            currency_exchanged: currencyExchanged,
                            exchange_date: exchangeDate
                        };

                        Object.entries(fields).forEach(([key, value]) => {
                            const hiddenInput = document.createElement('input');
                            hiddenInput.type = 'hidden';
                            hiddenInput.name = `exchangeTransactions[${globalIdx}][${key}]`;
                            hiddenInput.value = value;
                            form.appendChild(hiddenInput);
                        });

                        globalIdx++;
                    });
                });

                console.log('Exchange data transformed:', globalIdx, 'exchanges');
            }

            // ===== FUNGSI VALIDASI NOTA (MOBILE) =====
            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 keteranganGroup = keteranganInput?.closest('.mobile-form-group');
                if (keteranganGroup && keteranganGroup.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');
                    addInvalidFeedback(detailsInput, 'Field ini harus diisi');
                } else if (detailsInput) {
                    detailsInput.classList.remove('is-invalid');
                    removeInvalidFeedback(detailsInput);
                }

                // 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');
                        addInvalidFeedback(jumlahInput, 'Jumlah harus lebih besar dari 0');
                    } else {
                        jumlahInput.classList.remove('is-invalid');
                        removeInvalidFeedback(jumlahInput);
                    }
                }

                // Validasi Mata Uang
                const mataUangInput = cardElement.querySelector('input[name*="[mata_uang]"]');
                if (mataUangInput && !mataUangInput.value.trim()) {
                    isValid = false;
                    // Highlight currency button jika ada
                    const currencyBtn = cardElement.querySelector('button[onclick*="showCurrencyModal"]');
                    if (currencyBtn) currencyBtn.classList.add('is-invalid');
                    addInvalidFeedback(mataUangInput, 'Pilih mata uang');
                } else if (mataUangInput) {
                    const currencyBtn = cardElement.querySelector('button[onclick*="showCurrencyModal"]');
                    if (currencyBtn) currencyBtn.classList.remove('is-invalid');
                    removeInvalidFeedback(mataUangInput);
                }

                // Validasi Toggle Switch Credit Use
                const creditCheckbox = cardElement.querySelector('input[name*="[is_credit_use]"][type="checkbox"]');
                if (creditCheckbox !== null) {
                    // Toggle switch selalu punya nilai (checked atau unchecked), jadi valid
                    const toggleGroup = creditCheckbox.closest('.mobile-toggle-group');
                    if (toggleGroup) toggleGroup.classList.remove('is-invalid');
                }

                // Validasi Toggle Switch Private Use
                const privateCheckbox = cardElement.querySelector(
                    'input[name*="[is_private_use]"][type="checkbox"]');
                if (privateCheckbox !== null) {
                    // Toggle switch selalu punya nilai (checked atau unchecked), jadi valid
                    const toggleGroup = privateCheckbox.closest('.mobile-toggle-group');
                    if (toggleGroup) toggleGroup.classList.remove('is-invalid');
                }

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

                return isValid;
            }

            function validateAllNotaCards(nik = null, showAlert = true) {
                const targetNik = nik || currentEmployeeNik;
                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 notaIds = tabInfo.notaIds || [];

                    for (const notaId of notaIds) {
                        const cardElement = document.getElementById(notaId);
                        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
                    switchToDateTab(targetNik, firstInvalidDate);

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

                    if (showAlert) {
                        // Tampilkan peringatan (untuk aksi Add)
                        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: '#028284'
                        });
                    } else {
                        // Fokus ke field pertama yang invalid dan tambahkan inline alert
                        const invalidField = firstInvalidCard.querySelector('.is-invalid') || firstInvalidCard.querySelector('input,select,textarea');
                        if (invalidField && typeof invalidField.focus === 'function') {
                            setTimeout(() => invalidField.focus(), 350);
                        }
                        if (typeof window.showInlineFormAlert === 'function') window.showInlineFormAlert('Terdapat field yang belum terisi. Harap lengkapi field yang ditandai.');
                    }
                }

                return allValid;
            }

            // Helper untuk menampilkan pesan inline pada mobile
            function addInvalidFeedback(inputEl, message) {
                if (!inputEl) return;
                const parent = inputEl.parentElement || inputEl.closest('.mobile-form-group') || inputEl.parentElement;
                if (!parent) return;
                let feedback = parent.querySelector('.invalid-feedback.mobile-inline');
                if (!feedback) {
                    feedback = document.createElement('div');
                    feedback.className = 'invalid-feedback mobile-inline';
                    feedback.style.display = 'block';
                    feedback.style.marginTop = '6px';
                    feedback.style.color = '#dc3545';
                    parent.appendChild(feedback);
                }
                feedback.textContent = message;
            }

            function removeInvalidFeedback(inputEl) {
                if (!inputEl) return;
                const parent = inputEl.parentElement || inputEl.closest('.mobile-form-group');
                if (!parent) return;
                const feedback = parent.querySelector('.invalid-feedback.mobile-inline');
                if (feedback) feedback.remove();
            }

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

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

                // Validasi Details
                const detailsInput = cardElement.querySelector('textarea[name*="[details]"]');
                if (detailsInput && !detailsInput.value.trim()) {
                    isValid = false;
                    detailsInput.classList.add('is-invalid');
                    addInvalidFeedback(detailsInput, 'Field ini harus diisi');
                } else if (detailsInput) {
                    detailsInput.classList.remove('is-invalid');
                    removeInvalidFeedback(detailsInput);
                }

                // 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');
                        addInvalidFeedback(jumlahAwalInput, 'Jumlah harus lebih besar dari 0');
                    } else {
                        jumlahAwalInput.classList.remove('is-invalid');
                        removeInvalidFeedback(jumlahAwalInput);
                    }
                }

                // Validasi Currency Awal
                const currencyAwalInput = cardElement.querySelector('input[name*="[currency_awal]"]');
                if (currencyAwalInput && !currencyAwalInput.value.trim()) {
                    isValid = false;
                    // Highlight currency button
                    const currencyBtn = cardElement.querySelector('button[onclick*="awal"]');
                    if (currencyBtn) currencyBtn.classList.add('is-invalid');
                } else if (currencyAwalInput) {
                    const currencyBtn = cardElement.querySelector('button[onclick*="awal"]');
                    if (currencyBtn) currencyBtn.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');
                        addInvalidFeedback(jumlahExchangedInput, 'Jumlah harus lebih besar dari 0');
                    } else {
                        jumlahExchangedInput.classList.remove('is-invalid');
                        removeInvalidFeedback(jumlahExchangedInput);
                    }
                }

                // Validasi Currency Exchanged
                const currencyExchangedInput = cardElement.querySelector('input[name*="[currency_exchanged]"]');
                if (currencyExchangedInput && !currencyExchangedInput.value.trim()) {
                    isValid = false;
                    // Highlight currency button
                    const currencyBtn = cardElement.querySelector('button[onclick*="exchanged"]');
                    if (currencyBtn) currencyBtn.classList.add('is-invalid');
                } else if (currencyExchangedInput) {
                    const currencyBtn = cardElement.querySelector('button[onclick*="exchanged"]');
                    if (currencyBtn) currencyBtn.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, showAlert = true) {
                const targetNik = nik || currentExchangeEmployeeNik;
                if (!targetNik || !exchangeState[targetNik]) {
                    return true; // Tidak ada data untuk divalidasi
                }

                let allValid = true;
                let firstInvalidCard = null;

                const exchanges = exchangeState[targetNik] || [];

                for (const exchange of exchanges) {
                    // Tambahkan prefix "exchange-" saat mencari element
                    const cardElement = document.getElementById(`exchange-${exchange.id}`);
                    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 (jika perlu)
                    if (currentExchangeEmployeeNik !== targetNik && typeof window.switchExchangeEmployee ===
                        'function') {
                        window.switchExchangeEmployee(targetNik);
                    }

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

                    if (showAlert) {
                        // Tampilkan peringatan (untuk aksi Add)
                        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: '#028284'
                        });
                    } else {
                        const invalidField = firstInvalidCard.querySelector('.is-invalid') || firstInvalidCard.querySelector('input,select,textarea');
                        if (invalidField && typeof invalidField.focus === 'function') {
                            setTimeout(() => invalidField.focus(), 350);
                        }
                        if (typeof window.showInlineFormAlert === 'function') window.showInlineFormAlert('Terdapat field yang belum terisi pada exchange. Harap lengkapi field yang ditandai.');
                    }
                }

                return allValid;
            }

            // Global listeners to clear inline invalid indicators while typing/changing -- do not revalidate
            document.addEventListener('input', function(e) {
                const target = e.target;
                if (!target) return;
                // Remove is-invalid class and inline feedback when user types
                if (target.classList && target.classList.contains('is-invalid')) {
                    target.classList.remove('is-invalid');
                }
                if (typeof removeInvalidFeedback === 'function') removeInvalidFeedback(target);

                // If this was an amount or currency input, also clear currency button highlight
                let parentCurrency = null;
                try {
                    parentCurrency = target.closest ? target.closest('.mobile-currency-amount') : null;
                } catch (err) {
                    parentCurrency = null;
                }
                if (parentCurrency) {
                    const btn = parentCurrency.querySelector('button[onclick*="showCurrencyModal"]');
                    if (btn) btn.classList.remove('is-invalid');
                }
            });

            document.addEventListener('change', function(e) {
                const target = e.target;
                if (!target) return;
                if (target.type === 'checkbox') {
                    const toggleGroup = target.closest('.mobile-toggle-group');
                    if (toggleGroup) toggleGroup.classList.remove('is-invalid');
                }
            });

        }); // end DOMContentLoaded
    </script>
@endpush