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

@section('content')
    <style>
        /* === TAB NAVIGATION — Active = Green Teal (#028284) === */
        html body ul#tnaTab .nav-link {
            background-color: transparent;
            color: #67748e;
            font-weight: 600;
            padding: 10px 24px;
            border-radius: 0.5rem;
            border: none;
            transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        }

        html body ul#tnaTab .nav-link:hover {
            color: #028284;
            background-color: rgba(2, 130, 132, 0.08);
        }

        html body ul#tnaTab .nav-link.active {
            background-color: #028284 !important;
            color: #ffffff !important;
            box-shadow: 0 4px 12px rgba(2, 130, 132, 0.35) !important;
        }

        html body ul#tnaTab .nav-link .badge {
            font-size: 0.7rem;
            padding: 2px 7px;
            border-radius: 0.35rem;
            background-color: rgba(0, 0, 0, 0.15);
            color: inherit;
            margin-left: 4px;
        }

        html body ul#tnaTab .nav-link.active .badge {
            background-color: rgba(255, 255, 255, 0.25) !important;
            color: #ffffff !important;
        }

        /* Select2 */
        .select2-container {
            width: 100% !important;
        }

        /* Hide Select2 containers that render outside their parent in view mode */
        .select2-container--default .select2-selection--single {
            min-height: 38px;
            border: 1px solid #d2d6da;
            border-radius: 0.5rem;
            padding: 4px 8px;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 28px;
            font-size: 0.875rem;
            color: #344767;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field {
            border: 1px solid #d2d6da;
            border-radius: 0.375rem;
            padding: 8px 12px;
            font-size: 0.875rem;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field:focus {
            border-color: #028284;
            outline: none;
            box-shadow: 0 0 0 2px rgba(2, 130, 132, 0.1);
        }

        .select2-container--default .select2-results__option {
            padding: 8px 12px;
            font-size: 0.875rem;
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #028284;
        }

        .select2-container--default .select2-selection--multiple {
            border: 1px solid #d2d6da;
            border-radius: 0.5rem;
            padding: 4px 8px;
            min-height: 42px;
            background-color: #fff;
        }

        .select2-container--default.select2-container--focus .select2-selection--multiple {
            border-color: #028284;
            box-shadow: 0 0 0 2px rgba(2, 130, 132, 0.1);
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #028284;
            border: none;
            border-radius: 0.375rem;
            color: #fff;
            padding: 4px 10px;
            margin: 3px 4px 3px 0;
            font-size: 0.875rem;
            display: inline-flex;
            align-items: center;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
            margin-right: 6px;
            font-size: 1rem;
            font-weight: bold;
            border: none;
            background: transparent;
            padding: 0;
            cursor: pointer;
            order: -1;
        }

        .select2-container--default .select2-selection--multiple .select2-choice__remove:hover {
            color: #ffcccc;
        }

        .select2-container--default .select2-selection--multiple .select2-search__field {
            margin-top: 5px;
            font-size: 0.875rem;
        }

        .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
            color: #adb5bd;
        }

        .select2-container--default .select2-dropdown {
            border: 1px solid #d2d6da;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-top: 4px;
        }

        .select2-container--default .select2-results__option {
            padding: 10px 12px;
            font-size: 0.875rem;
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #028284;
            color: #fff;
        }

        .select2-container--default .select2-results__option[aria-selected=true] {
            background-color: #e8f5f5;
            color: #028284;
            font-weight: 500;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field {
            border: 1px solid #d2d6da;
            border-radius: 0.375rem;
            padding: 8px 12px;
            font-size: 0.875rem;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field:focus {
            border-color: #028284;
            outline: none;
            box-shadow: 0 0 0 2px rgba(2, 130, 132, 0.1);
        }

        .select2-container--default .select2-selection--multiple .select2-selection__clear {
            margin-right: 10px;
            font-size: 1.2rem;
            color: #6c757d;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__clear:hover {
            color: #dc3545;
        }

        /* Multi-select: keep dropdown open, highlight selected rows */
        .select2-container--default .select2-results__option[aria-selected=true] {
            background-color: #d4f0f0;
            color: #028284;
            font-weight: 600;
        }

        .select2-container--default .select2-results__option[aria-selected=true]:hover,
        .select2-container--default .select2-results__option--highlighted[aria-selected=true] {
            background-color: #b8e6e6 !important;
            color: #028284 !important;
        }

        /* Edit mode styles */
        .edit-mode.form-control,
        .edit-mode.form-select {
            border: 1px solid #028284;
            background-color: #f0fafa;
        }

        .edit-mode .form-check-input:checked {
            background-color: #028284;
            border-color: #028284;
        }

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

        #tnaUnifiedEdit .form-control,
        #tnaUnifiedEdit .form-select {
            border: 1px solid #d2d6da;
            border-radius: 0.5rem;
            padding: 0.625rem 0.75rem;
        }

        #tnaUnifiedEdit .form-control:focus,
        #tnaUnifiedEdit .form-select:focus {
            border-color: #028284;
            box-shadow: 0 0 0 2px rgba(2, 130, 132, 0.1);
        }

        .edit-allocation-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.4rem 0.65rem;
            border-radius: 0.5rem;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .edit-allocation-badge.is-assigned {
            color: #0f6848;
            background: #d1f4e5;
            border: 1px solid #86dfbd;
        }

        .edit-allocation-badge.is-unassigned {
            color: #9a6700;
            background: #fff3cd;
            border: 1px solid #ffe69c;
        }

        .hrd-required-field {
            background-color: #fff8e1 !important;
            border: 1px solid #f6c343 !important;
            border-radius: 0.5rem;
            box-shadow: 0 0 0 3px rgba(246, 195, 67, 0.12);
        }

        tr.hrd-required-field>td {
            background-color: #fff8e1 !important;
        }

        .hrd-required-badge {
            font-size: 0.65rem;
            vertical-align: middle;
        }

        /* Participant and schedule editor — aligned with trstna/add */
        .participant-source-panel,
        .schedule-allocation-board {
            padding: 1rem;
            border: 1px solid #dfe5ec;
            border-radius: .75rem;
            background: #f8fafc;
        }

        .participant-source-row,
        .participant-mode-switch,
        .participant-modal-toolbar,
        .participant-summary,
        .participant-pool-label {
            display: flex;
            align-items: center;
        }

        .participant-source-row,
        .participant-modal-toolbar,
        .participant-pool-label {
            justify-content: space-between;
            gap: 1rem;
        }

        .participant-source-title {
            color: #344767;
            font-size: .85rem;
            font-weight: 700;
        }

        .participant-mode-switch {
            flex-shrink: 0;
            gap: .7rem;
        }

        .participant-mode-label {
            color: #98a2b3;
            font-size: .78rem;
            font-weight: 600;
            white-space: nowrap;
        }

        .participant-mode-label.active {
            color: #025f61;
            font-weight: 700;
        }

        .participant-source-switch {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }

        .participant-switch-control {
            position: relative;
            display: inline-flex;
            flex: 0 0 54px;
            width: 54px;
            height: 30px;
            margin: 0;
            padding: 3px;
            border: 1px solid #cbd3dc;
            border-radius: 999px;
            background: #dfe4ea;
            cursor: pointer;
            transition: .2s ease;
        }

        .participant-switch-knob {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 2px 5px rgba(52, 71, 103, .25);
            transition: transform .2s ease;
        }

        .participant-source-switch:checked+.participant-switch-control {
            border-color: #028284;
            background: #028284;
            box-shadow: 0 0 0 3px rgba(2, 130, 132, .1);
        }

        .participant-source-switch:checked+.participant-switch-control .participant-switch-knob {
            transform: translateX(24px);
        }

        .participant-source-help {
            display: flex;
            align-items: flex-start;
            gap: .45rem;
            margin-top: .7rem;
            color: #67748e;
            font-size: .72rem;
        }

        .participant-source-help i {
            margin-top: .1rem;
            color: #028284;
        }

        #eDepartmentParticipantControls {
            margin-top: .8rem;
            padding-top: .8rem;
            border-top: 1px solid #e3e8ee;
        }

        .participant-empty-state {
            padding: 1.25rem;
            border: 1px dashed #ced4da;
            border-radius: .65rem;
            color: #8392ab;
            text-align: center;
            background: #fafafa;
        }

        .participant-reset-button {
            padding: .32rem .65rem;
            color: #dc3545;
            font-size: .7rem;
            font-weight: 700;
            border: 1px solid #f1b8bd;
            border-radius: .45rem;
            background: #fff;
        }

        .participant-reset-button:hover:not(:disabled) {
            color: #fff;
            border-color: #dc3545;
            background: #dc3545;
        }

        .participant-reset-button:disabled {
            color: #aab2bf;
            border-color: #e3e8ee;
            background: #f8f9fa;
            cursor: not-allowed;
        }

        .participant-department-card {
            height: 100%;
            overflow: hidden;
            border: 1px solid #dfe5ec;
            border-radius: .8rem;
            background: #fff;
            box-shadow: 0 2px 8px rgba(52, 71, 103, .06);
        }

        .participant-department-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: .75rem 1rem;
            color: #025f61;
            font-size: .875rem;
            font-weight: 700;
            background: #e8f7f7;
        }

        .participant-department-card-body {
            max-height: 250px;
            overflow-y: auto;
        }

        .selected-participant-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            padding: .65rem 1rem;
            border-top: 1px solid #f0f1f3;
            font-size: .82rem;
        }

        .selected-participant-item:first-child {
            border-top: 0;
        }

        .participant-remove-btn {
            min-width: 28px;
            width: 28px;
            height: 28px;
            margin: 0;
            padding: 0;
            color: #ea0606;
            border: 1px solid #f8b4b4;
            border-radius: 50%;
            background: #fff5f5;
        }

        .participant-modal-content {
            overflow: hidden;
            border: 0;
            border-radius: .9rem;
            box-shadow: 0 15px 45px rgba(23, 43, 77, .2);
        }

        .participant-modal-body {
            padding: 1rem 1.25rem;
            background: #f5f7fa;
        }

        .participant-modal-guide {
            display: flex;
            gap: .75rem;
            margin-bottom: .85rem;
            padding: .8rem 1rem;
            color: #344767;
            font-size: .8rem;
            background: #edf8f8;
            border: 1px solid #cdeaea;
            border-radius: .65rem;
        }

        .participant-modal-guide>i {
            color: #028284;
            font-size: 1.1rem;
        }

        .participant-modal-guide p {
            margin-top: .15rem;
            color: #67748e;
        }

        .participant-search-wrap {
            position: relative;
            flex: 1;
            max-width: 440px;
        }

        .participant-search-wrap>i {
            position: absolute;
            top: 50%;
            left: .9rem;
            z-index: 1;
            color: #8392ab;
            transform: translateY(-50%);
        }

        .participant-search-wrap .form-control {
            min-height: 46px;
            padding-left: 2.5rem;
            background: #fff;
        }

        .participant-summary {
            gap: .5rem;
        }

        .participant-summary-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 86px;
            padding: .35rem .7rem;
            border: 1px solid #dfe5ec;
            border-radius: .6rem;
            background: #fff;
        }

        .participant-summary-item span {
            color: #344767;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.15;
        }

        .participant-summary-item small {
            margin-top: .15rem;
            color: #8392ab;
            font-size: .67rem;
            text-transform: uppercase;
        }

        .participant-summary-item.selected {
            border-color: #b7dddd;
            background: #f2fbfb;
        }

        .participant-summary-item.selected span {
            color: #028284;
        }

        .participant-summary-item.excluded {
            border-color: #f5cccc;
            background: #fff8f8;
        }

        .participant-summary-item.excluded span {
            color: #dc3545;
        }

        .department-participant-table-wrap,
        .schedule-participant-modal-table-wrap {
            overflow: hidden;
            border: 1px solid #dfe5ec;
            border-radius: .75rem;
            background: #fff;
        }

        .department-participant-table thead th,
        .schedule-participant-modal-table thead th {
            padding: .7rem .8rem;
            color: #67748e;
            font-size: .68rem;
            text-transform: uppercase;
            background: #f8fafc;
        }

        .department-participant-table tbody td,
        .schedule-participant-modal-table tbody td {
            padding: .65rem .8rem;
            color: #344767;
            font-size: .75rem;
            vertical-align: middle;
            border-bottom: 1px solid #edf0f4;
        }

        .department-popup-header td {
            color: #025f61 !important;
            font-weight: 700;
            background: #e8f7f7;
        }

        .department-employee-row.is-excluded {
            background: #fff8f8;
        }

        .participant-select-toggle,
        .schedule-modal-select {
            min-width: 82px;
            padding: .32rem .6rem;
            color: #028284;
            font-size: .68rem;
            font-weight: 700;
            border: 1px solid #9bd5d6;
            border-radius: 999px;
            background: #fff;
        }

        .participant-select-toggle.selected,
        .schedule-modal-select.selected {
            color: #fff;
            border-color: #028284;
            background: #028284;
        }

        .schedule-modal-select:disabled {
            color: #8392ab;
            border-color: #dfe5ec;
            background: #edf0f4;
        }

        .department-select-all-button {
            padding: .3rem .65rem;
            color: #027b7d;
            font-size: .7rem;
            font-weight: 700;
            border: 1px solid #9bd5d6;
            border-radius: .45rem;
            background: #fff;
        }

        .participant-search-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 220px;
            color: #8392ab;
            text-align: center;
            border: 1px dashed #ced4da;
            border-radius: .75rem;
            background: #fff;
        }

        .participant-search-empty strong {
            color: #344767;
        }

        .participant-search-empty span {
            margin-top: .2rem;
            font-size: .78rem;
        }

        .participant-pool-label {
            margin: .75rem 0 .4rem;
            color: #67748e;
            font-size: .72rem;
            font-weight: 700;
        }

        .schedule-participant-dropzone {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            gap: .55rem;
            min-height: 82px;
            padding: .65rem;
            border: 1px dashed #b9c4d0;
            border-radius: .65rem;
            background: #fbfcfd;
            transition: .15s ease;
        }

        .unassigned-participant-pool {
            min-height: 92px;
            border-color: #eccb87;
            background: #fffaf0;
        }

        .schedule-participant-dropzone.is-drag-over {
            border-color: #028284;
            background: #ecfafa;
            box-shadow: inset 0 0 0 2px rgba(2, 130, 132, .1);
        }

        .schedule-participant-chip {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            max-width: 260px;
            padding: .45rem .55rem;
            border: 1px solid #d8e1ea;
            border-radius: .55rem;
            background: #fff;
            box-shadow: 0 2px 5px rgba(52, 71, 103, .05);
            cursor: grab;
            user-select: none;
        }

        .schedule-participant-chip.is-dragging {
            opacity: .4;
        }

        .participant-drag-handle {
            color: #aab2bf;
        }

        .schedule-participant-chip-copy {
            min-width: 0;
        }

        .schedule-participant-chip-copy strong,
        .schedule-participant-chip-copy small {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .schedule-participant-chip-copy strong {
            color: #344767;
            font-size: .72rem;
        }

        .schedule-participant-chip-copy small {
            color: #8392ab;
            font-size: .6rem;
        }

        .participant-unassign-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            padding: 0;
            color: #dc3545;
            font-size: .62rem;
            border: 0;
            border-radius: 50%;
            background: #fff0f1;
        }

        .schedule-dropzone-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: .3rem;
            width: 100%;
            min-height: 58px;
            color: #98a2b3;
            font-size: .7rem;
            text-align: center;
            pointer-events: none;
        }

        .schedule-dropzone-empty.is-complete {
            color: #15835a;
        }

        .schedule-create-row {
            overflow: visible;
            border-color: #dfe5ec !important;
            background: #fff;
        }

        .schedule-create-header {
            min-height: 58px;
            background: #f8fafc;
        }

        .schedule-collapse-toggle {
            display: inline-flex;
            align-items: center;
            gap: .65rem;
            min-width: 0;
            padding: 0;
            border: 0;
            background: transparent;
        }

        .schedule-chevron {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 28px;
            width: 28px;
            height: 28px;
            color: #027b7d;
            font-size: .68rem;
            border-radius: 7px;
            background: #e4f5f5;
            transition: transform .2s ease;
        }

        .schedule-collapse-toggle[aria-expanded="false"] .schedule-chevron {
            transform: rotate(-90deg);
        }

        .schedule-header-copy {
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            min-width: 0;
            text-align: left;
        }

        .schedule-header-summary {
            display: flex;
            flex-wrap: wrap;
            gap: .3rem;
            margin-top: .18rem;
            color: #8392ab;
            font-size: .66rem;
            font-weight: 600;
        }

        .schedule-header-summary i {
            color: #028284;
        }

        .schedule-create-body {
            border-top: 1px solid #edf0f4;
        }

        .schedule-participant-modal-table tr.is-selected {
            background: #f2fbfb;
        }

        .schedule-participant-modal-table tr.is-unavailable {
            background: #f7f8fa;
            opacity: .7;
        }

        .schedule-used-badge,
        .schedule-current-badge {
            display: inline-block;
            padding: .22rem .45rem;
            font-size: .62rem;
            font-weight: 700;
            border-radius: 999px;
        }

        .schedule-used-badge {
            color: #67748e;
            background: #e9edf2;
        }

        .schedule-current-badge {
            color: #027b7d;
            background: #dcf3f3;
        }

        @media (max-width: 767.98px) {

            .participant-source-row,
            .participant-modal-toolbar {
                align-items: stretch;
                flex-direction: column;
            }

            .participant-mode-switch {
                justify-content: center;
            }

            .participant-search-wrap {
                width: 100%;
                max-width: none;
            }

            .participant-summary {
                width: 100%;
            }

            .participant-summary-item {
                flex: 1;
                min-width: 0;
            }
        }
    </style>
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    {{-- Top Action Bar --}}
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="d-flex align-items-center gap-2">
                <button class="btn btn-secondary mb-0" id="btnBack" data-href="{{ url($url_menu) }}"> Back</button>
                @if ($authorize->edit == '1' && $list->status != 'finish' && $list->approval_hrd != 'approved')
                    <button class="btn btn-warning mb-0" id="btnToggleEdit" onclick="toggleEditMode()">
                        <i class="fas fa-edit me-1"></i>
                        <span class="font-weight-bold">Edit Mode</span>
                    </button>
                    <button class="btn btn-success mb-0 d-none" id="btnSaveAll" onclick="saveUnifiedAll()">
                        <i class="fas fa-save me-1"></i>
                        <span class="font-weight-bold">Save</span>
                    </button>
                    @if ($is_hrd_approver && $list->approval_hrd === 'pending')
                        <button class="btn btn-primary mb-0 d-none" id="btnSaveApproveHrd" onclick="saveUnifiedAll(true)">
                            <i class="fas fa-check-circle me-1"></i>
                            <span class="font-weight-bold">Save & Approve HRD</span>
                        </button>
                    @endif
                    {{-- <button class="btn btn-info mb-0 d-none" id="btnCancelEdit" onclick="cancelEditMode()">
                        <i class="fas fa-eye me-1"></i>
                        <span class="font-weight-bold">View Mode</span>
                    </button> --}}
                @endif
            </div>
        </div>
    </div>

    {{-- Unsaved Changes Banner --}}
    <div id="unsavedBanner" class="d-none mx-4 mt-2">
        <div class="alert alert-warning d-flex align-items-center gap-2 py-2 mb-0" role="alert"
            style="border-left: 4px solid #fb6340; border-radius: 0.5rem;">
            <i class="fas fa-exclamation-circle text-warning fs-6"></i>
            <span class="text-sm">
                <strong>You have unsaved TNA changes.</strong>
                Click <strong>Save</strong> to apply them, or <strong>View Mode</strong> to discard.
            </span>
        </div>
    </div>
    <div class="container-fluid py-4">
        {{-- Tab Navigation --}}
        <div class="card shadow-lg mb-3" style="background: #e9ecef !important;">
            <div class="card-body p-2">
                <ul class="nav nav-pills nav-fill" id="tnaTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="header-tab" data-bs-toggle="pill" data-bs-target="#header"
                            type="button" role="tab">
                            <i class="fas fa-file-alt me-1"></i> Header
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="detail-tab" data-bs-toggle="pill" data-bs-target="#detail"
                            type="button" role="tab">
                            <i class="fas fa-list me-1"></i> Detail TNA

                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="schedule-tab" data-bs-toggle="pill" data-bs-target="#schedule"
                            type="button" role="tab">
                            <i class="fas fa-calendar me-1"></i> Schedule
                            <span class="badge">{{ $list->schedule_count ?? 0 }}</span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>

        @php
            $editDetail = $details->first();
            $unifiedSchedules = $schedules
                ->map(function ($schedule) {
                    return [
                        'id' => $schedule->id,
                        'tna_date' => $schedule->tna_date,
                        'tna_start_time' => $schedule->tna_start_time ? substr($schedule->tna_start_time, 0, 5) : '',
                        'tna_end_time' => $schedule->tna_end_time ? substr($schedule->tna_end_time, 0, 5) : '',
                        'duration_minutes' => $schedule->duration_minutes,
                        'institution_name' => $schedule->institution_name ?? 'internal',
                        'trainer_name' => $schedule->trainer_name ?? '',
                        'trainer_nik' => $schedule->trainer_nik ?? '',
                        'participants' => json_decode($schedule->nik, true) ?: [],
                        'status' => $schedule->status,
                    ];
                })
                ->values();
        @endphp
        {{-- Unified editor: mirrors the create form and is only visible in Edit Mode. --}}
        <div id="tnaUnifiedEdit" class="d-none">
            <div class="unified-edit-pane" data-pane="header">
                <div class="card shadow-sm mb-3">
                    <div class="card-header pb-0">
                        <h6 class="mb-0"><i class="fas fa-file-alt me-2 text-primary"></i>TNA Header</h6>
                    </div>
                    <hr class="horizontal dark mt-2 mb-0">
                    <div class="card-body p-4">
                        <div class="row g-4">
                            <div class="col-12">
                                <label class="form-label fw-bold">Training Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control unified-edit-input" id="eNameTrn"
                                    value="{{ $list->name_trn }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Requestor <span class="text-danger">*</span></label>
                                <select class="form-select unified-edit-input" id="eRequestor" style="width:100%">
                                    @foreach ($karyawan_list as $employee)
                                        <option value="{{ $employee->nik }}"
                                            {{ (string) $list->requestor_nik === (string) $employee->nik ? 'selected' : '' }}>
                                            {{ $employee->nama }} ({{ $employee->nik }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Estimated Date</label>
                                <input type="date" class="form-control unified-edit-input" id="eMonthEstimation"
                                    value="{{ $list->month_estimation ? \Carbon\Carbon::parse($list->month_estimation)->format('Y-m-d') : '' }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold">Description <span class="text-danger">*</span></label>
                                <textarea class="form-control unified-edit-input" id="eDescription" rows="3" required>{{ $list->description }}</textarea>
                            </div>
                            <div
                                class="col-md-4 {{ $is_user_request && $is_hrd_approver ? 'hrd-required-field p-3' : '' }}">
                                <label class="form-label fw-bold">Training Type
                                    @if ($is_user_request && $is_hrd_approver)
                                        <span class="badge bg-warning text-white hrd-required-badge">HRD Required</span>
                                    @endif
                                </label>
                                <select class="form-select unified-edit-input" id="eTypeTraining">
                                    <option value="reguler" {{ $list->type_training === 'reguler' ? 'selected' : '' }}>
                                        Reguler</option>
                                    <option value="academy" {{ $list->type_training === 'academy' ? 'selected' : '' }}>
                                        Academy</option>
                                </select>
                            </div>
                            <div
                                class="col-md-4 {{ $is_user_request && $is_hrd_approver ? 'hrd-required-field p-3' : '' }}">
                                <label class="form-label fw-bold">With Score
                                    @if ($is_user_request && $is_hrd_approver)
                                        <span class="badge bg-warning text-white hrd-required-badge">HRD Required</span>
                                    @endif
                                </label>
                                <select class="form-select unified-edit-input" id="eWithScore">
                                    <option value="0" {{ !$list->with_score ? 'selected' : '' }}>No</option>
                                    <option value="1" {{ $list->with_score ? 'selected' : '' }}>Yes</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Superior (Atasan)</label>
                                <select class="form-select unified-edit-input" id="eSuperior" style="width:100%">
                                    <option value="">-- Select Superior --</option>
                                    @foreach ($superior_list as $superior)
                                        <option value="{{ $superior->nik }}"
                                            {{ (string) $list->superior_nik === (string) $superior->nik ? 'selected' : '' }}>
                                            {{ $superior->nama }} ({{ $superior->nik }})
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Suggested from Organization Structure; it can still be
                                    changed.</small>
                            </div>
                            <div
                                class="col-12 {{ $is_user_request && $is_hrd_approver ? 'hrd-required-field p-3' : '' }}">
                                <label class="form-label fw-bold">Participants <span class="text-danger">*</span>
                                    @if ($is_user_request && $is_hrd_approver)
                                        <span class="badge bg-warning text-white hrd-required-badge">HRD Required</span>
                                    @endif
                                </label>
                                <div class="participant-source-panel mb-3">
                                    <div class="participant-source-row">
                                        <span class="participant-source-title">Add Participants Based On</span>
                                        <div class="participant-mode-switch" role="group"
                                            aria-label="Metode penambahan participant">
                                            <span class="participant-mode-label active" id="eParticipantModeName">
                                                <i class="fas fa-user me-1"></i>By Name
                                            </span>
                                            <input class="participant-source-switch" type="checkbox"
                                                id="eParticipantSourceToggle">
                                            <label class="participant-switch-control" for="eParticipantSourceToggle"
                                                title="Ubah metode penambahan participant">
                                                <span class="participant-switch-knob"></span>
                                            </label>
                                            <span class="participant-mode-label" id="eParticipantModeDepartment">
                                                <i class="fas fa-building me-1"></i>By Department
                                            </span>
                                        </div>
                                    </div>
                                    <div class="participant-source-help" id="eParticipantSourceHelp">
                                        <i class="fas fa-info-circle"></i>
                                        <span>Gunakan kolom pencarian untuk memilih participant berdasarkan nama atau
                                            NIK.</span>
                                    </div>
                                    <div id="eDepartmentParticipantControls" class="row g-2 d-none">
                                        <div class="col-md-9">
                                            <select class="form-select" id="eParticipantDepartmentSelect" multiple
                                                style="width:100%">
                                                @foreach ($departemen_list as $departemen)
                                                    @php
                                                        $employeeCount = $karyawan_list
                                                            ->where('id_departemen', $departemen->id)
                                                            ->count();
                                                    @endphp
                                                    @if ($employeeCount > 0)
                                                        <option value="{{ $departemen->id }}">
                                                            {{ $departemen->nama }} ({{ $employeeCount }} karyawan)
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3 d-grid">
                                            <button type="button" class="btn btn-outline-primary mb-0"
                                                id="eAddDepartmentParticipantsBtn">
                                                <i class="fas fa-users me-1"></i>Add Participants
                                            </button>
                                        </div>
                                        <div class="col-12">
                                            <small class="text-muted">Semua karyawan aktif pada departemen terpilih akan
                                                ditampilkan untuk dikonfirmasi.</small>
                                        </div>
                                    </div>
                                </div>

                                <div id="eParticipantNameControls">
                                    <label class="form-label text-sm fw-bold mb-1">Search / Add Participant by Name</label>
                                    <select class="form-select unified-edit-input" id="eParticipants" multiple
                                        style="width:100%">
                                        @foreach ($karyawan_list->groupBy('departemen_name') as $deptName => $employees)
                                            <optgroup label="{{ $deptName ?: 'No Department' }}">
                                                @foreach ($employees as $employee)
                                                    <option value="{{ $employee->nik }}"
                                                        data-department-id="{{ $employee->id_departemen }}"
                                                        data-department-name="{{ $deptName ?: 'No Department' }}"
                                                        data-employee-name="{{ $employee->nama }}"
                                                        {{ in_array((string) $employee->nik, array_map('strval', $participant_pool_raw), true) ? 'selected' : '' }}>
                                                        {{ $employee->nama }} ({{ $employee->nik }})
                                                    </option>
                                                @endforeach
                                            </optgroup>
                                        @endforeach
                                    </select>
                                </div>
                                <small class="text-muted"><i class="fas fa-info-circle me-1"></i>Required — every
                                    participant must be allocated to one schedule.</small>

                                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mt-4 mb-2">
                                    <label class="form-label text-sm fw-bold mb-0">Selected Participants List</label>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="badge bg-secondary" id="eSelectedParticipantCount">0
                                            participant</span>
                                        <button type="button" class="participant-reset-button"
                                            id="eResetParticipantsBtn" disabled>
                                            <i class="fas fa-rotate-left me-1"></i>Reset Participant
                                        </button>
                                    </div>
                                </div>
                                <div id="eSelectedParticipantCards" class="row g-3"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="unified-edit-pane d-none" data-pane="detail">
                <div class="card shadow-sm mb-3">
                    <div class="card-header pb-0">
                        <h6 class="mb-0"><i class="fas fa-list me-2 text-primary"></i>TNA Detail</h6>
                    </div>
                    <hr class="horizontal dark mt-2 mb-0">
                    <div class="card-body p-4">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label fw-bold">Problem Description <span
                                        class="text-danger">*</span></label>
                                <textarea class="form-control unified-edit-input" id="eProblemDesc" rows="4">{{ $editDetail->problem_desc ?? '' }}</textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold">Proposed Training <span
                                        class="text-danger">*</span></label>
                                <textarea class="form-control unified-edit-input" id="eProposedTrn" rows="4">{{ $editDetail->proposed_trn ?? '' }}</textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold">Training Method</label>
                                <input type="text" class="form-control unified-edit-input" id="eTrnMethod"
                                    value="{{ $editDetail->trn_method ?? '' }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="unified-edit-pane d-none" data-pane="schedule">
                <div class="card shadow-sm">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                        <h6 class="mb-0"><i class="fas fa-calendar me-2 text-primary"></i>Training Schedule</h6>
                        <div class="d-flex align-items-center gap-2">
                            <button type="button" class="btn btn-outline-secondary btn-sm mb-0"
                                id="eToggleAllSchedules">
                                <i class="fas fa-angles-up me-1"></i><span>Collapse All</span>
                            </button>
                            <button type="button" class="btn btn-success btn-sm mb-0" id="eAddSchedule"><i
                                    class="fas fa-plus me-1"></i>Add Schedule</button>
                        </div>
                    </div>
                    <hr class="horizontal dark mt-2 mb-0">
                    <div class="card-body">
                        <div class="schedule-allocation-board mb-3">
                            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2">
                                <div>
                                    <span class="text-sm fw-bold text-dark d-block">Participant Allocation</span>
                                    <small class="text-muted">Drag participant ke schedule tujuan atau gunakan tombol Pilih
                                        via Modal.</small>
                                </div>
                                <span class="badge bg-primary text-white" id="eAllocationCount">0 / 0 scheduled</span>
                            </div>
                            <div class="participant-pool-label">
                                <span><i class="fas fa-user-clock me-1"></i>Belum Terjadwal</span>
                                <span class="badge bg-light text-dark" id="eUnassignedParticipantCount">0</span>
                            </div>
                            <div class="schedule-participant-dropzone unassigned-participant-pool" id="eAllocationStatus"
                                data-edit-drop-target="unassigned">
                                <small class="text-muted">Pilih participant pada Header terlebih dahulu.</small>
                            </div>
                        </div>
                        <div id="eScheduleRows"></div>
                        <small class="text-muted"><i class="fas fa-info-circle me-1"></i>Satu participant hanya dapat
                            ditempatkan pada satu schedule.</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                {{-- Tab Content --}}
                <div class="tab-content" id="tnaTabContent">
                    {{-- HEADER TAB --}}
                    <div class="tab-pane fade show active" id="header" role="tabpanel" aria-labelledby="header-tab">
                        <div class="row">
                            {{-- Detail TNA & Data Request --}}
                            <div class="col-md-6">
                                <div class="card mb-3">
                                    <div class="card-header pb-0">
                                        <h6 class="mb-0">TNA Detail</h6>
                                    </div>
                                    <hr class="horizontal dark mt-2 mb-0">
                                    <div class="card-body pt-3">
                                        <table class="table table-borderless table-sm mb-0">
                                            <tr>
                                                <td width="40%"><strong>TNA ID</strong></td>
                                                <td width="5%">:</td>
                                                <td>{{ $list->id }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Training Name</strong></td>
                                                <td>:</td>
                                                <td>
                                                    <span class="view-mode">{{ $list->name_trn }}</span>
                                                    <input type="text"
                                                        class="form-control form-control-sm edit-mode d-none"
                                                        id="hNameTrn" value="{{ $list->name_trn }}" required>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong>Department</strong></td>
                                                <td>:</td>
                                                <td>{{ $list->department ?: '-' }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Section</strong></td>
                                                <td>:</td>
                                                <td>{{ $list->section ?: '-' }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Training Type</strong>
                                                </td>
                                                <td>:</td>
                                                <td>
                                                    <span class="view-mode">{{ ucfirst($list->type_training) }}</span>
                                                    <select class="form-select form-select-sm edit-mode d-none"
                                                        id="hTypeTraining">
                                                        <option value="reguler"
                                                            {{ $list->type_training == 'reguler' ? 'selected' : '' }}>
                                                            Reguler</option>
                                                        <option value="academy"
                                                            {{ $list->type_training == 'academy' ? 'selected' : '' }}>
                                                            Academy</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong>With Score</strong>
                                                </td>
                                                <td>:</td>
                                                <td>
                                                    <span class="view-mode">{{ $list->with_score ? 'Yes' : 'No' }}</span>
                                                    <div class="form-check form-switch edit-mode d-none">
                                                        <input class="form-check-input" type="checkbox" id="hWithScore"
                                                            {{ $list->with_score ? 'checked' : '' }}
                                                            style="width: 2.5em; height: 1.3em;">
                                                        <label class="form-check-label ms-1 small"
                                                            id="hWithScoreLabel">{{ $list->with_score ? 'Yes' : 'No' }}</label>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong>Estimated Date</strong></td>
                                                <td>:</td>
                                                <td>
                                                    <span
                                                        class="view-mode">{{ $list->month_estimation ? \Carbon\Carbon::parse($list->month_estimation)->format('d F Y') : '-' }}</span>
                                                    <input type="date"
                                                        class="form-control form-control-sm edit-mode d-none"
                                                        id="hMonthEstimation"
                                                        value="{{ $list->month_estimation ? \Carbon\Carbon::parse($list->month_estimation)->format('Y-m-d') : '' }}">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong>Status</strong></td>
                                                <td>:</td>
                                                <td>
                                                    @if ($list->status == 'draft')
                                                        <span class="badge bg-secondary">Draft</span>
                                                    @elseif ($list->status == 'aktif')
                                                        <span class="badge bg-primary">Active</span>
                                                    @elseif ($list->status == 'finish')
                                                        <span class="badge bg-success">Finish</span>
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong>Description <span class="text-danger">*</span></strong></td>
                                                <td>:</td>
                                                <td>
                                                    <span
                                                        class="view-mode">{{ Str::limit($list->description, 50) ?: '-' }}</span>
                                                    <textarea class="form-control form-control-sm edit-mode d-none" id="hDescription" rows="2" required>{{ $list->description }}</textarea>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>

                                {{-- Participant Pool Section --}}
                                <div class="card mb-3">
                                    <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                                        <h6 class="mb-0">TNA Participants
                                        </h6>
                                        @if ($list->status != 'finish' && $authorize->edit == '1')
                                            <button type="button" class="btn btn-sm btn-success edit-gated d-none"
                                                data-bs-toggle="modal" data-bs-target="#editParticipantsModal">
                                                <i class="fas fa-users me-1"></i> Manage Participants
                                            </button>
                                        @endif
                                    </div>
                                    <hr class="horizontal dark mt-2 mb-0">
                                    <div class="card-body pt-3">
                                        @if (count($participant_pool) > 0)
                                            <div id="participantPoolBody" class="d-flex flex-wrap gap-2">
                                                @foreach ($participant_pool as $participant)
                                                    <span class="badge bg-info text-white px-3 py-2">
                                                        {{ $participant['name'] }} ({{ $participant['nik'] }})
                                                    </span>
                                                @endforeach
                                            </div>
                                        @else
                                            <div id="participantPoolBody">
                                                <p class="text-muted text-center mb-0">
                                                    <i class="fas fa-users-slash me-1"></i> No participants yet
                                                </p>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="card mb-3">
                                    <div class="card-header pb-0">
                                        <h6 class="mb-0">Request Data</h6>
                                    </div>
                                    <hr class="horizontal dark mt-2 mb-0">
                                    <div class="card-body pt-3">
                                        <table class="table table-borderless table-sm mb-0">
                                            <tr>
                                                <td width="40%"><strong>Requestor</strong></td>
                                                <td width="5%">:</td>
                                                <td>{{ $list->requestor_name }} ({{ $list->requestor_nik }})</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Supervisor</strong></td>
                                                <td>:</td>
                                                <td>
                                                    @if ($atasan_nik)
                                                        {{ $atasan_name }} ({{ $atasan_nik }})
                                                    @else
                                                        <span class="text-muted fst-italic small">Not in structure — HRD
                                                            approves</span>
                                                    @endif
                                                </td>
                                            </tr>
                                            {{-- Estimated Date moved to TNA Detail card --}}
                                            <tr>
                                                <td><strong>Approval HRD</strong></td>
                                                <td>:</td>
                                                <td>
                                                    @if ($list->approval_hrd == 'approved')
                                                        <span class="badge bg-success"><i
                                                                class="fas fa-check me-1"></i>Approved</span>
                                                    @elseif ($list->approval_hrd == 'rejected')
                                                        <span class="badge bg-danger"><i
                                                                class="fas fa-times me-1"></i>Rejected</span>
                                                    @else
                                                        <span class="badge bg-warning text-white"><i
                                                                class="fas fa-clock me-1"></i>Pending</span>
                                                    @endif
                                                </td>
                                            </tr>
                                            @if ($list->approval_hrd == 'rejected' && $list->reject_reason_hrd)
                                                <tr>
                                                    <td><strong class="text-danger">HRD Rejection Reason</strong></td>
                                                    <td>:</td>
                                                    <td class="text-danger">{{ $list->reject_reason_hrd }}</td>
                                                </tr>
                                            @endif
                                            <tr>
                                                <td><strong>Supervisor Approval</strong></td>
                                                <td>:</td>
                                                <td>
                                                    @if ($list->approval_atasan == 'approved')
                                                        <span class="badge bg-success"><i
                                                                class="fas fa-check me-1"></i>Approved</span>
                                                    @elseif ($list->approval_atasan == 'rejected')
                                                        <span class="badge bg-danger"><i
                                                                class="fas fa-times me-1"></i>Rejected</span>
                                                    @else
                                                        <span class="badge bg-warning text-white"><i
                                                                class="fas fa-clock me-1"></i>Pending</span>
                                                    @endif
                                                </td>
                                            </tr>
                                            @if ($list->approval_atasan == 'rejected' && $list->reject_reason_atasan)
                                                <tr>
                                                    <td><strong class="text-danger">Supervisor Rejection Reason</strong>
                                                    </td>
                                                    <td>:</td>
                                                    <td class="text-danger">{{ $list->reject_reason_atasan }}</td>
                                                </tr>
                                            @endif
                                            {{-- Description moved to TNA Detail card --}}
                                        </table>
                                    </div>
                                </div>

                                {{-- Approval Buttons --}}
                                @if ($list->status != 'finish')
                                    <div class="card mb-3">
                                        <div class="card-header pb-0">
                                            <h6 class="mb-0">Approval Actions</h6>
                                        </div>
                                        <hr class="horizontal dark mt-2 mb-0">
                                        <div class="card-body pt-3">
                                            {{-- Warning: Detail TNA & Schedule belum diisi --}}
                                            @php
                                                $hasDetail = ($list->detail_count ?? 0) > 0;
                                                $hasSchedule = ($list->schedule_count ?? 0) > 0;
                                                $canApprove = $hasDetail && $hasSchedule;
                                            @endphp

                                            @if (!$canApprove && ($is_hrd_approver || $is_atasan_approver))
                                                <div class="alert alert-warning mb-3" role="alert">
                                                    <i class="fas fa-exclamation-triangle me-1"></i>
                                                    <strong>Approval cannot be done yet!</strong>
                                                    <ul class="mb-0 mt-1 small">
                                                        @if (!$hasDetail)
                                                            <li>Detail TNA has not been filled. Please fill it in the
                                                                <strong>Detail TNA</strong> tab.
                                                            </li>
                                                        @endif
                                                        @if (!$hasSchedule)
                                                            <li>Schedule has not been filled. Please fill it in the
                                                                <strong>Schedule</strong> tab.
                                                            </li>
                                                        @endif
                                                    </ul>
                                                </div>
                                            @endif

                                            {{-- HRD Approval Section --}}
                                            @if ($list->approval_hrd == 'pending' && $is_hrd_approver)
                                                <div class="mb-3">
                                                    <label class="form-label fw-bold text-muted small mb-2">HRD
                                                        Approval</label>
                                                    @if ($canApprove)
                                                        <div class="d-flex gap-2 edit-gated d-none">
                                                            <button type="button" class="btn btn-success flex-fill"
                                                                onclick="approveHrd()">
                                                                <i class="fas fa-check me-1"></i> Approve
                                                            </button>
                                                            <button type="button" class="btn btn-danger flex-fill"
                                                                onclick="rejectHrd()">
                                                                <i class="fas fa-times me-1"></i> Reject
                                                            </button>
                                                        </div>
                                                    @else
                                                        <div class="d-flex gap-2">
                                                            <button type="button" class="btn btn-secondary flex-fill"
                                                                disabled>
                                                                <i class="fas fa-check me-1"></i> Approve
                                                            </button>
                                                            <button type="button" class="btn btn-secondary flex-fill"
                                                                disabled>
                                                                <i class="fas fa-times me-1"></i> Reject
                                                            </button>
                                                        </div>
                                                        <small class="text-warning d-block mt-1">
                                                            <i class="fas fa-exclamation-triangle me-1"></i>Complete Detail
                                                            TNA & Schedule first
                                                        </small>
                                                    @endif
                                                </div>
                                            @endif

                                            {{-- Show HRD rejection message --}}
                                            @if ($list->approval_hrd == 'rejected')
                                                <div class="alert alert-danger mb-3" role="alert">
                                                    <i class="fas fa-times-circle me-1"></i> <strong>Rejected by
                                                        HRD</strong>
                                                    @if ($list->reject_reason_hrd)
                                                        <p class="mb-0 mt-1 small">Reason: {{ $list->reject_reason_hrd }}
                                                        </p>
                                                    @endif
                                                </div>
                                            @endif

                                            {{-- Atasan Approval Section --}}
                                            @if ($list->approval_atasan == 'pending' && $is_atasan_approver && $list->approval_hrd != 'rejected')
                                                <div class="mb-3">
                                                    <label class="form-label fw-bold text-muted small mb-2">
                                                        Supervisor Approval
                                                        @if ($atasan_nik)
                                                            <span class="text-muted fw-normal">({{ $atasan_name }} —
                                                                {{ $atasan_nik }})</span>
                                                        @else
                                                            <span class="text-muted fw-normal">(HRD — no supervisor found
                                                                in structure)</span>
                                                        @endif
                                                    </label>
                                                    @if ($list->approval_hrd == 'approved' && $canApprove)
                                                        {{-- Supervisor: tombol langsung tanpa Edit Mode --}}
                                                        <div class="d-flex gap-2">
                                                            <button type="button" class="btn btn-success flex-fill"
                                                                onclick="approveAtasan()">
                                                                <i class="fas fa-check me-1"></i> Approve
                                                            </button>
                                                            <button type="button" class="btn btn-danger flex-fill"
                                                                onclick="rejectAtasan()">
                                                                <i class="fas fa-times me-1"></i> Reject
                                                            </button>
                                                        </div>
                                                    @elseif ($list->approval_hrd == 'approved' && !$canApprove)
                                                        <div class="d-flex gap-2">
                                                            <button type="button" class="btn btn-secondary flex-fill"
                                                                disabled>
                                                                <i class="fas fa-check me-1"></i> Approve
                                                            </button>
                                                            <button type="button" class="btn btn-secondary flex-fill"
                                                                disabled>
                                                                <i class="fas fa-times me-1"></i> Reject
                                                            </button>
                                                        </div>
                                                        <small class="text-warning d-block mt-1">
                                                            <i class="fas fa-exclamation-triangle me-1"></i>Complete Detail
                                                            TNA & Schedule first
                                                        </small>
                                                    @else
                                                        <div class="d-flex gap-2">
                                                            <button type="button" class="btn btn-secondary flex-fill"
                                                                disabled>
                                                                <i class="fas fa-check me-1"></i> Approve
                                                            </button>
                                                            <button type="button" class="btn btn-secondary flex-fill"
                                                                disabled>
                                                                <i class="fas fa-times me-1"></i> Reject
                                                            </button>
                                                        </div>
                                                        <small class="text-warning d-block mt-1">
                                                            <i class="fas fa-exclamation-triangle me-1"></i>HRD must
                                                            approve first
                                                        </small>
                                                    @endif
                                                </div>
                                            @endif

                                            {{-- Show Atasan rejection message --}}
                                            @if ($list->approval_atasan == 'rejected')
                                                <div class="alert alert-danger mb-3" role="alert">
                                                    <i class="fas fa-times-circle me-1"></i> <strong>Rejected by
                                                        Supervisor</strong>
                                                    @if ($list->reject_reason_atasan)
                                                        <p class="mb-0 mt-1 small">Reason:
                                                            {{ $list->reject_reason_atasan }}</p>
                                                    @endif
                                                </div>
                                            @endif

                                            {{-- Convert to TRN --}}
                                            @if ($list->approval_hrd == 'approved' && $list->approval_atasan == 'approved' && $is_hrd_approver)
                                                <div class="alert alert-success mb-2" role="alert">
                                                    <i class="fas fa-check-circle me-1"></i> All approvals complete. TNA
                                                    can be converted to TRN.
                                                </div>
                                                <button type="button" class="btn btn-primary w-100 edit-gated d-none"
                                                    onclick="convertToTrn()">
                                                    <i class="fas fa-exchange-alt me-1"></i> Convert to TRN
                                                </button>
                                            @elseif ($list->approval_hrd == 'approved' && $list->approval_atasan == 'approved' && !$is_hrd_approver)
                                                <div class="alert alert-success mb-2" role="alert">
                                                    <i class="fas fa-check-circle me-1"></i> All approvals complete.
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    {{-- DETAIL TAB --}}
                    @php $detailSingle = $details->first(); @endphp
                    <div class="tab-pane fade" id="detail" role="tabpanel" aria-labelledby="detail-tab">
                        <div class="card mb-3">
                            <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">TNA Detail</h6>
                            </div>
                            <hr class="horizontal dark mt-2 mb-0">
                            <div class="card-body pt-3">
                                @if ($detailSingle)
                                    {{-- Detail sudah ada: tampilkan sebagai form read-only, bisa di-edit --}}
                                    <form id="detailForm">
                                        <input type="hidden" id="detailId" value="{{ $detailSingle->id }}">
                                        <div class="row">
                                            <div class="col-md-12 mb-3">
                                                <label class="form-label fw-bold">Problem Description <span
                                                        class="text-danger">*</span></label>
                                                <textarea class="form-control" id="fProblemDesc" rows="4" readonly>{{ $detailSingle->problem_desc }}</textarea>
                                            </div>
                                            <div class="col-md-12 mb-3">
                                                <label class="form-label fw-bold">Proposed Training <span
                                                        class="text-danger">*</span></label>
                                                <textarea class="form-control" id="fProposedTrn" rows="4" readonly>{{ $detailSingle->proposed_trn }}</textarea>
                                            </div>
                                            <div class="col-md-12 mb-3">
                                                <label class="form-label fw-bold">Training Method</label>
                                                <input type="text" class="form-control" id="fTrnMethod"
                                                    value="{{ $detailSingle->trn_method }}" readonly>
                                            </div>
                                        </div>
                                    </form>
                                @else
                                    {{-- Belum ada detail: tampilkan form input langsung --}}
                                    @if ($list->status != 'finish' && $authorize->add == '1')
                                        <form id="addDetailFormInline">
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <label class="form-label fw-bold">Problem Description <span
                                                            class="text-danger">*</span></label>
                                                    <textarea class="form-control" id="nProblemDesc" rows="4" required
                                                        placeholder="Describe the problem to be solved..." readonly></textarea>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <label class="form-label fw-bold">Proposed Training <span
                                                            class="text-danger">*</span></label>
                                                    <textarea class="form-control" id="nProposedTrn" rows="4" required placeholder="Proposed training..."
                                                        readonly></textarea>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <label class="form-label fw-bold">Training Method</label>
                                                    <input type="text" class="form-control" id="nTrnMethod"
                                                        placeholder="Training method (e.g., workshop, online, seminar)..."
                                                        readonly>
                                                </div>
                                            </div>
                                        </form>
                                    @else
                                        <div class="text-center text-muted py-4">
                                            <i class="fas fa-clipboard-list fa-2x mb-2 d-block"></i>
                                            <p class="mb-0">No TNA detail yet.</p>
                                        </div>
                                    @endif
                                @endif
                            </div>
                        </div>
                    </div>

                    {{-- SCHEDULE TAB --}}
                    <div class="tab-pane fade" id="schedule" role="tabpanel" aria-labelledby="schedule-tab">
                        <div class="card mb-3">
                            <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">Training Schedule</h6>
                                @if ($schedules->isNotEmpty())
                                    @php
                                        $totalMinutes = 0;
                                        foreach ($schedules as $schedule) {
                                            $minutes = $schedule->duration_minutes;
                                            if (
                                                $minutes === null &&
                                                $schedule->tna_start_time &&
                                                $schedule->tna_end_time
                                            ) {
                                                $startMinutes =
                                                    (int) substr($schedule->tna_start_time, 0, 2) * 60 +
                                                    (int) substr($schedule->tna_start_time, 3, 2);
                                                $endMinutes =
                                                    (int) substr($schedule->tna_end_time, 0, 2) * 60 +
                                                    (int) substr($schedule->tna_end_time, 3, 2);
                                                $minutes = max(0, $endMinutes - $startMinutes);
                                            }
                                            $totalMinutes += (int) $minutes;
                                        }
                                        $totalHours = $totalMinutes ? intdiv($totalMinutes, 60) : 0;
                                        $totalRemainder = $totalMinutes ? $totalMinutes % 60 : 0;
                                    @endphp
                                    <span class="badge bg-light text-dark">
                                        <i class="fas fa-hourglass-half me-1 text-primary"></i>
                                        Total Durasi:
                                        {{ $totalHours ? $totalHours . ' jam' . ($totalRemainder ? ' ' . $totalRemainder . ' menit' : '') : ($totalRemainder ? $totalRemainder . ' menit' : '0 menit') }}
                                    </span>
                                @endif
                                @if ($list->status != 'finish' && $authorize->add == '1')
                                    <button type="button" class="btn btn-success btn-sm edit-gated d-none"
                                        data-bs-toggle="modal" data-bs-target="#addScheduleModal">
                                        <i class="fas fa-plus me-1"></i> Add Schedule
                                    </button>
                                @endif
                            </div>
                            <hr class="horizontal dark mt-2 mb-0">
                            <div class="card-body pt-3">
                                @if (count($participant_pool) == 0)
                                    <div class="alert alert-warning">
                                        <i class="fas fa-exclamation-triangle me-1"></i>
                                        <strong>Notice:</strong> Add TNA participants in the Header tab first before adding
                                        schedules.
                                    </div>
                                @endif
                                <div class="table-responsive">
                                    <table class="table table-hover" id="scheduleTable">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th>No</th>
                                                <th>Date</th>
                                                <th>Duration</th>
                                                <th>Trainer</th>
                                                <th>Participants</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($schedules as $index => $schedule)
                                                <tr class="schedule-row">
                                                    <td>{{ $index + 1 }}</td>
                                                    <td>{{ \Carbon\Carbon::parse($schedule->tna_date)->translatedFormat('l, d F Y') }}<br><small>{{ $schedule->tna_start_time ? substr($schedule->tna_start_time, 0, 5) : '-' }}
                                                            -
                                                            {{ $schedule->tna_end_time ? substr($schedule->tna_end_time, 0, 5) : '-' }}</small>
                                                    </td>
                                                    @php
                                                        $durationMinutes = $schedule->duration_minutes;
                                                        if (
                                                            $durationMinutes === null &&
                                                            $schedule->tna_start_time &&
                                                            $schedule->tna_end_time
                                                        ) {
                                                            $startMinutes =
                                                                (int) substr($schedule->tna_start_time, 0, 2) * 60 +
                                                                (int) substr($schedule->tna_start_time, 3, 2);
                                                            $endMinutes =
                                                                (int) substr($schedule->tna_end_time, 0, 2) * 60 +
                                                                (int) substr($schedule->tna_end_time, 3, 2);
                                                            $durationMinutes = max(0, $endMinutes - $startMinutes);
                                                        }
                                                        $durationHours = $durationMinutes
                                                            ? intdiv((int) $durationMinutes, 60)
                                                            : 0;
                                                        $durationRemainder = $durationMinutes
                                                            ? (int) $durationMinutes % 60
                                                            : 0;
                                                        $durationLabel = !$durationMinutes
                                                            ? '-'
                                                            : ($durationHours
                                                                ? $durationHours .
                                                                    ' jam' .
                                                                    ($durationRemainder
                                                                        ? ' ' . $durationRemainder . ' menit'
                                                                        : '')
                                                                : $durationRemainder . ' menit');
                                                    @endphp
                                                    <td><span class="badge bg-light text-dark"><i
                                                                class="fas fa-hourglass-half me-1 text-primary"></i>{{ $durationLabel }}</span>
                                                    </td>
                                                    <td>
                                                        <strong>{{ $schedule->trainer_name ?: '-' }}</strong><br><small
                                                            class="text-muted">{{ ucfirst($schedule->institution_name ?? 'internal') }}{{ $schedule->trainer_nik ? ' · ' . $schedule->trainer_nik : '' }}</small>
                                                    </td>
                                                    <td>
                                                        @foreach ($schedule->participant_list as $participant)
                                                            <span
                                                                class="badge bg-secondary me-1 mb-1">{{ $participant['name'] }}</span>
                                                        @endforeach
                                                    </td>
                                                    <td>
                                                        @if ($schedule->status == 'aktif')
                                                            <span class="badge bg-primary">Active</span>
                                                        @else
                                                            <span class="badge bg-success">Completed</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr class="empty-schedule-row">
                                                    <td colspan="6" class="text-center text-muted py-4">
                                                        <i class="fas fa-calendar-times fa-2x mb-2 d-block"></i>
                                                        <p class="mb-0">No schedules yet</p>
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Unified edit: choose participants by department --}}
    <div class="modal fade" id="eDepartmentParticipantsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content participant-modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title mb-1"><i class="fas fa-users me-2"></i>Choose Participant by Department
                        </h5>
                        <p class="text-sm text-muted mb-0">Klik Selected untuk mengecualikan karyawan dari training.</p>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body participant-modal-body">
                    <div class="participant-modal-guide">
                        <i class="fas fa-info-circle"></i>
                        <div><strong>Semua karyawan otomatis dipilih</strong>
                            <p class="mb-0">Ubah menjadi Select pada karyawan yang tidak diikutkan, lalu klik <b>Terapkan
                                    Participant</b>.</p>
                        </div>
                    </div>
                    <div class="participant-modal-toolbar">
                        <div class="participant-search-wrap">
                            <i class="fas fa-search"></i>
                            <input type="search" class="form-control" id="eDepartmentParticipantSearch"
                                placeholder="Cari nama atau NIK..." autocomplete="off">
                        </div>
                        <div class="participant-summary">
                            <div class="participant-summary-item"><span id="eModalTotalCount">0</span><small>Total</small>
                            </div>
                            <div class="participant-summary-item selected"><span
                                    id="eModalSelectedCount">0</span><small>Dipilih</small></div>
                            <div class="participant-summary-item excluded"><span
                                    id="eModalExcludedCount">0</span><small>Dikecualikan</small></div>
                        </div>
                    </div>
                    <div id="eDepartmentEmployeeGroups"></div>
                    <div id="eDepartmentParticipantEmpty" class="participant-search-empty d-none">
                        <i class="fas fa-search mb-2"></i><strong>Karyawan tidak ditemukan</strong>
                        <span>Coba gunakan nama atau NIK yang berbeda.</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <span class="me-auto text-sm fw-bold" id="eModalParticipantCount"></span>
                    <button type="button" class="btn btn-secondary mb-0" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary mb-0" id="eApplyDepartmentParticipantsBtn">
                        <i class="fas fa-check me-1"></i>Terapkan Participant
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Unified edit: choose participants for a schedule --}}
    <div class="modal fade" id="eScheduleParticipantsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content participant-modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title mb-1"><i class="fas fa-user-plus me-2"></i>Pilih Participant Schedule <span
                                id="eScheduleParticipantModalNumber"></span></h5>
                        <p class="text-sm text-muted mb-0">Pilih participant yang belum dialokasikan ke schedule lain.</p>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body participant-modal-body">
                    <div class="participant-search-wrap mb-3" style="max-width:none">
                        <i class="fas fa-search"></i>
                        <input type="search" class="form-control" id="eScheduleParticipantSearch"
                            placeholder="Cari nama atau NIK..." autocomplete="off">
                    </div>
                    <div class="table-responsive schedule-participant-modal-table-wrap">
                        <table class="table schedule-participant-modal-table mb-0">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width:110px">Selection</th>
                                    <th style="width:170px">NIK</th>
                                    <th>Nama Participant</th>
                                    <th style="width:150px">Status</th>
                                </tr>
                            </thead>
                            <tbody id="eScheduleParticipantModalRows"></tbody>
                        </table>
                    </div>
                    <div class="participant-search-empty d-none" id="eScheduleParticipantEmpty">
                        <i class="fas fa-users mb-2"></i><strong>Participant tidak tersedia</strong>
                        <span>Semua participant mungkin sudah dialokasikan atau tidak cocok dengan pencarian.</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <span class="me-auto text-sm fw-bold" id="eScheduleParticipantModalCount">0 dipilih</span>
                    <button type="button" class="btn btn-secondary mb-0" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary mb-0" id="eApplyScheduleParticipantsBtn">
                        <i class="fas fa-check me-1"></i>Terapkan Participant
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Description Modal --}}
    <div class="modal fade" id="descModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Description</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    {{ $list->description ?: 'No description' }}
                </div>
            </div>
        </div>
    </div>

    {{-- Edit Participants Modal --}}
    <div class="modal fade" id="editParticipantsModal" tabindex="-1" data-bs-backdrop="static"
        data-bs-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-users me-2"></i>Manage TNA Participants</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="editParticipantsForm">
                        {{-- Department Filter --}}
                        <div class="mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-building me-1"></i> Filter by Department
                            </label>
                            <select class="form-select" id="deptFilter">
                                <option value="all">All Departments</option>
                                @foreach ($departemen_list as $dept)
                                    <option value="{{ $dept->id }}">{{ $dept->nama }}</option>
                                @endforeach
                            </select>
                        </div>

                        <hr class="my-3">

                        {{-- Participants Select --}}
                        <div class="mb-3">
                            <label class="form-label fw-bold">Select TNA Participants <span
                                    class="text-danger">*</span></label>
                            <select class="form-select" name="participants[]" id="editParticipantsSelect" multiple
                                required style="width: 100%;">
                                @php
                                    $grouped = $karyawan_list->groupBy('departemen_name');
                                @endphp
                                @foreach ($grouped as $deptName => $employees)
                                    <optgroup label="{{ $deptName ?: 'No Department' }}"
                                        data-dept-id="{{ $employees->first()->id_departemen }}">
                                        @foreach ($employees as $karyawan)
                                            <option value="{{ $karyawan->nik }}"
                                                data-dept="{{ $karyawan->id_departemen }}"
                                                {{ in_array($karyawan->nik, $participant_pool_raw) ? 'selected' : '' }}>
                                                {{ $karyawan->nama }} ({{ $karyawan->nik }})
                                            </option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                            <small class="text-muted"><i class="fas fa-info-circle me-1"></i>Filter by department first,
                                then type to search</small>
                        </div>

                        {{-- Selected count --}}
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-sm text-muted" id="selectedCount">0 participant(s) selected</span>
                            <button type="button" class="btn btn-sm btn-outline-danger" id="btnClearAll"
                                onclick="clearAllParticipants()">
                                <i class="fas fa-times me-1"></i> Clear All
                            </button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Cancel
                    </button>
                    <button type="button" class="btn btn-success" onclick="submitUpdateParticipants()">
                        <i class="fas fa-save me-1"></i> Save
                    </button>
                </div>
            </div>
        </div>
    </div>



    {{-- Add Schedule Modal --}}
    <div class="modal fade" id="addScheduleModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Schedule</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="addScheduleForm">
                        <div class="mb-3">
                            <label class="form-label fw-bold">Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="tna_date" required
                                min="{{ \Carbon\Carbon::today()->format('Y-m-d') }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">TNA Participants <span class="text-danger">*</span></label>
                            @if (count($available_participants) > 0)
                                <div id="addScheduleParticipantWrap">
                                    <select class="form-select" name="participants[]" id="addParticipants" multiple
                                        required style="width: 100%;">
                                        @foreach ($available_participants as $participant)
                                            <option value="{{ $participant['nik'] }}">{{ $participant['name'] }}
                                                ({{ $participant['nik'] }})
                                            </option>
                                        @endforeach
                                    </select>
                                    <small class="text-muted"><i class="fas fa-info-circle me-1"></i>Only participants not
                                        yet assigned to any schedule are shown</small>
                                </div>
                                <div id="addScheduleNoParticipants" class="alert alert-info mb-0 d-none">
                                    <i class="fas fa-check-circle me-1"></i> All participants have been assigned to a
                                    schedule.
                                </div>
                            @else
                                <div id="addScheduleParticipantWrap" class="d-none">
                                    <select class="form-select" name="participants[]" id="addParticipants" multiple
                                        required style="width: 100%;"></select>
                                </div>
                                <div id="addScheduleNoParticipants" class="alert alert-info mb-0">
                                    <i class="fas fa-check-circle me-1"></i> All participants have been assigned to a
                                    schedule.
                                </div>
                            @endif
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-arrow-left me-1"></i> Back
                    </button>
                    @if (count($available_participants) > 0)
                        <button type="button" class="btn btn-success" id="btnSubmitAddSchedule"
                            onclick="submitAddSchedule()">
                            <i class="fas fa-check me-1"></i> Add
                        </button>
                    @else
                        <button type="button" class="btn btn-success" id="btnSubmitAddSchedule"
                            onclick="submitAddSchedule()" disabled>
                            <i class="fas fa-check me-1"></i> Add
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Reschedule Modal --}}
    <div class="modal fade" id="rescheduleModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Reschedule</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="rescheduleForm">
                        <input type="hidden" name="schedule_id" id="rescheduleId">
                        <div class="mb-3">
                            <label class="form-label fw-bold">Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="tna_date" id="rescheduleDate" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">TNA Participants <span class="text-danger">*</span></label>
                            <select class="form-select" name="participants[]" id="rescheduleParticipants" multiple
                                required style="width: 100%;">
                                @foreach ($participant_pool as $participant)
                                    <option value="{{ $participant['nik'] }}">{{ $participant['name'] }}
                                        ({{ $participant['nik'] }})
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted"><i class="fas fa-info-circle me-1"></i>Select from participants
                                already registered in TNA</small>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-arrow-left me-1"></i> Back
                    </button>
                    <button type="button" class="btn btn-success" onclick="submitReschedule()">
                        <i class="fas fa-save me-1"></i> Save
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('js')
    {{-- Select2 JS (local asset) --}}
    <script src="{{ asset('/') }}assets/js/select2.min.js"></script>
    <script>
        @if (session('clear_tna_create_draft'))
            localStorage.removeItem('trstna_create_draft_v1');
        @endif

        var encryptedId = '{{ encrypt($list->id) }}';
        var isEditMode = false;
        var isDirty = false; // tracks unsaved header field changes

        // ── Trainer Name Select2 (only init when edit mode + visible) ──────
        var trainerSelect2Ready = false;

        function initTrainerSelect2Safe() {
            setTimeout(function() {
                try {
                    if ($('#fTrainerNameSelect').length && !$('#fTrainerNameSelect').hasClass(
                            'select2-hidden-accessible') && !$('#fTrainerWrapSelect').hasClass(
                            'd-none')) {
                        $('#fTrainerNameSelect').select2({
                            placeholder: 'Search trainer...',
                            allowClear: true,
                            width: '100%',
                            tags: true
                        });
                    }
                    if ($('#nTrainerNameSelect').length && !$('#nTrainerNameSelect').hasClass(
                            'select2-hidden-accessible') && !$('#nTrainerWrapSelect').hasClass(
                            'd-none')) {
                        $('#nTrainerNameSelect').select2({
                            placeholder: 'Search trainer...',
                            allowClear: true,
                            width: '100%',
                            tags: true
                        });
                    }
                    trainerSelect2Ready = true;
                } catch (e) {
                    console.warn('Trainer Select2 error:', e);
                }
            }, 200);
        }

        // ── Pending state (temporary, not yet in DB) ──────────────────
        var pendingParticipants = null; // null = not changed; array of {nik, name} = changed
        var pendingSchedules = []; // array of {tna_date, niks:[], names:[]}
        var unifiedScheduleIndex = 0;
        var unifiedScheduleInitialized = false;
        var refreshingUnifiedAllocation = false;
        var superiorByRequestor = @json($superior_by_requestor);
        var initialUnifiedSchedules = @json($unifiedSchedules);
        @php
            $unifiedTrainerOptionData = $karyawan_list
                ->map(function ($trainer) {
                    return [
                        'nik' => (string) $trainer->nik,
                        'name' => $trainer->nama,
                        'label' => $trainer->nik . ' - ' . $trainer->nama . ' - ' . ($trainer->departemen_name ?: 'No Dept'),
                    ];
                })
                ->values();
        @endphp
        var unifiedTrainerOptions = {{ Illuminate\Support\Js::from($unifiedTrainerOptionData) }};
        @php
            $unifiedParticipantDepartmentMap = $karyawan_list->filter(fn($employee) => !empty($employee->id_departemen))->groupBy(fn($employee) => (string) $employee->id_departemen)->map(
                fn($employees) => [
                    'name' => $employees->first()->departemen_name ?: 'No Department',
                    'employees' => $employees
                        ->map(
                            fn($employee) => [
                                'nik' => (string) $employee->nik,
                                'name' => $employee->nama,
                            ],
                        )
                        ->values(),
                ],
            );
        @endphp
        var unifiedParticipantDepartmentMap = {{ Illuminate\Support\Js::from($unifiedParticipantDepartmentMap) }};
        var configuredUnifiedDepartments = new Set();
        var activeUnifiedScheduleIndex = null;

        function escapeUnifiedText(value) {
            return $('<div>').text(value == null ? '' : String(value)).html();
        }

        function unifiedMinimumDate() {
            var today = '{{ date('Y-m-d') }}';
            var estimation = $('#eMonthEstimation').val();
            return estimation && estimation > today ? estimation : today;
        }

        function unifiedAssignments() {
            var assignments = {};
            $('#eScheduleRows .unified-schedule-row').each(function(position) {
                ($(this).find('.unified-schedule-participants').val() || []).forEach(function(nik) {
                    assignments[String(nik)] = position + 1;
                });
            });
            return assignments;
        }

        function unifiedParticipantOptions(selectedValues, scheduleNumber, assignments) {
            var selected = (selectedValues || []).map(String);
            var html = '';
            $('#eParticipants option:selected').each(function() {
                var nik = String($(this).val());
                var assignedSchedule = assignments[nik];
                var unavailable = assignedSchedule && assignedSchedule !== scheduleNumber && !selected.includes(
                    nik);
                var text = $(this).text().trim() + (unavailable ? ' — Scheduled in Schedule ' + assignedSchedule :
                    '');
                html += '<option value="' + $('<div>').text(nik).html() + '" ' +
                    (selected.includes(nik) ? 'selected ' : '') + (unavailable ? 'disabled' : '') + '>' +
                    $('<div>').text(text).html() + '</option>';
            });
            return html;
        }

        function legacyRefreshUnifiedAllocation() {
            if (refreshingUnifiedAllocation) return;
            refreshingUnifiedAllocation = true;
            var assignments = unifiedAssignments();
            var participants = [];
            $('#eParticipants option:selected').each(function() {
                participants.push({
                    nik: String($(this).val()),
                    label: $(this).text().trim()
                });
            });

            $('#eScheduleRows .unified-schedule-row').each(function(position) {
                var number = position + 1;
                var select = $(this).find('.unified-schedule-participants');
                var current = (select.val() || []).map(String);
                $(this).find('.unified-schedule-number').text(number);
                $(this).find('.unified-schedule-count').text(current.length + ' participant' + (current.length ===
                    1 ? '' : 's'));
                select.html(unifiedParticipantOptions(current, number, assignments)).trigger('change.select2');
                var dateInput = $(this).find('.unified-schedule-date')[0];
                var minimum = unifiedMinimumDate();
                $(dateInput).attr('min', minimum);
                var invalid = dateInput.value && dateInput.value < minimum;
                dateInput.setCustomValidity(invalid ? 'Tanggal schedule minimal ' + minimum : '');
                $(dateInput).toggleClass('is-invalid', !!invalid);
            });

            var assignedCount = participants.filter(function(item) {
                return assignments[item.nik];
            }).length;
            $('#eAllocationCount').text(assignedCount + ' / ' + participants.length + ' scheduled');
            $('#schedule-tab .badge').text($('#eScheduleRows .unified-schedule-row').length);
            $('#eAllocationStatus').html(participants.length ? participants.map(function(item) {
                var number = assignments[item.nik];
                return '<span class="edit-allocation-badge ' + (number ? 'is-assigned' : 'is-unassigned') +
                    '">' +
                    '<i class="fas ' + (number ? 'fa-check-circle' : 'fa-clock') + '"></i>' +
                    $('<div>').text(item.label).html() + ' · ' + (number ? 'Schedule ' + number :
                        'Not scheduled') + '</span>';
            }).join('') : '<small class="text-muted">Select participants in Header first.</small>');
            refreshingUnifiedAllocation = false;
        }

        function unifiedHeaderParticipantMap() {
            var participants = {};
            $('#eParticipants option:selected').each(function() {
                var nik = String($(this).val());
                participants[nik] = {
                    nik: nik,
                    name: String($(this).data('employee-name') || $(this).text()).trim(),
                    department: String($(this).data('department-name') || 'No Department')
                };
            });
            return participants;
        }

        function setUnifiedScheduleParticipants(row, niks) {
            var participantMap = unifiedHeaderParticipantMap();
            var options = (niks || []).map(String).filter(function(nik) {
                return participantMap[nik];
            }).map(function(nik) {
                var participant = participantMap[nik];
                return '<option value="' + escapeUnifiedText(nik) + '" selected>' +
                    escapeUnifiedText(participant.name) + ' (' + escapeUnifiedText(nik) + ')</option>';
            }).join('');
            row.find('.unified-schedule-participants').html(options);
        }

        function unifiedParticipantChip(participant, removable) {
            return '<div class="schedule-participant-chip" draggable="true" data-edit-nik="' + escapeUnifiedText(participant
                    .nik) + '">' +
                '<span class="participant-drag-handle"><i class="fas fa-grip-vertical"></i></span>' +
                '<span class="schedule-participant-chip-copy"><strong>' + escapeUnifiedText(participant.name) +
                '</strong>' +
                '<small>' + escapeUnifiedText(participant.nik) + ' &middot; ' + escapeUnifiedText(participant.department) +
                '</small></span>' +
                (removable ?
                    '<button type="button" class="participant-unassign-button" title="Kembalikan ke Belum Terjadwal"><i class="fas fa-times"></i></button>' :
                    '') +
                '</div>';
        }

        function formatUnifiedScheduleDate(value) {
            if (!value) return '-';
            var date = new Date(value + 'T00:00:00');
            return isNaN(date.getTime()) ? value : new Intl.DateTimeFormat('id-ID', {
                day: '2-digit',
                month: 'short',
                year: 'numeric'
            }).format(date);
        }

        function getUnifiedScheduleDurationMinutes(startTime, endTime) {
            if (!startTime || !endTime) return null;
            var startParts = startTime.split(':').map(Number);
            var endParts = endTime.split(':').map(Number);
            var duration = (endParts[0] * 60 + endParts[1]) - (startParts[0] * 60 + startParts[1]);
            return Number.isFinite(duration) && duration > 0 ? duration : null;
        }

        function formatUnifiedScheduleDuration(minutes) {
            if (!minutes) return '-';
            var hours = Math.floor(minutes / 60);
            var remainingMinutes = minutes % 60;
            if (!hours) return remainingMinutes + ' menit';
            return hours + ' jam' + (remainingMinutes ? ' ' + remainingMinutes + ' menit' : '');
        }

        function updateUnifiedScheduleSummary(row) {
            var date = row.find('.unified-schedule-date').val() || '';
            var start = row.find('.unified-schedule-start').val() || '-';
            var end = row.find('.unified-schedule-end').val() || '-';
            var duration = getUnifiedScheduleDurationMinutes(
                row.find('.unified-schedule-start').val(),
                row.find('.unified-schedule-end').val()
            );
            var academyTooShort = duration !== null && duration < 30;
            console.log(academyTooShort, duration);
            row.find('.schedule-summary-date').text(formatUnifiedScheduleDate(date));
            row.find('.schedule-summary-time').text(start + ' - ' + end);
            row.find('.unified-schedule-duration').val(formatUnifiedScheduleDuration(duration));
            row.find('.schedule-summary-duration').text(formatUnifiedScheduleDuration(duration));
            row.find('.unified-schedule-end').toggleClass('is-invalid', academyTooShort)[0].setCustomValidity(
                academyTooShort ?
                'Durasi schedule Academy minimal 30 menit.' : '');
            row.find('.unified-schedule-duration-help')
                .toggleClass('text-muted', !academyTooShort)
                .toggleClass('text-danger', academyTooShort)
                .text(academyTooShort ? 'Durasi minimal 30 menit.' : '');
        }

        function refreshUnifiedAllocation() {
            if (refreshingUnifiedAllocation) return;
            refreshingUnifiedAllocation = true;
            var participantMap = unifiedHeaderParticipantMap();
            var participants = Object.values(participantMap);
            var usedNiks = new Set();

            $('#eScheduleRows .unified-schedule-row').each(function() {
                var row = $(this);
                var current = (row.find('.unified-schedule-participants').val() || []).map(String)
                    .filter(function(nik) {
                        return participantMap[nik] && !usedNiks.has(nik);
                    });
                current.forEach(function(nik) {
                    usedNiks.add(nik);
                });
                setUnifiedScheduleParticipants(row, current);
            });

            var assignments = unifiedAssignments();
            $('#eScheduleRows .unified-schedule-row').each(function(position) {
                var row = $(this);
                var current = (row.find('.unified-schedule-participants').val() || []).map(String);
                row.find('.unified-schedule-number').text(position + 1);
                row.find('.unified-schedule-count').text(current.length + ' participant' + (current.length === 1 ?
                    '' : 's'));
                row.find('.schedule-participant-dropzone').html(current.length ? current.map(function(nik) {
                        return unifiedParticipantChip(participantMap[nik], true);
                    }).join('') :
                    '<div class="schedule-dropzone-empty"><i class="fas fa-hand-pointer"></i><span>Drop participant di sini atau pilih melalui modal</span></div>'
                );

                var dateInput = row.find('.unified-schedule-date')[0];
                var minimum = unifiedMinimumDate();
                $(dateInput).attr('min', minimum);
                var invalid = dateInput.value && dateInput.value < minimum;
                dateInput.setCustomValidity(invalid ? 'Tanggal schedule minimal ' + minimum : '');
                $(dateInput).toggleClass('is-invalid', !!invalid);
                updateUnifiedScheduleSummary(row);
            });

            var assignedCount = participants.filter(function(item) {
                return assignments[item.nik];
            }).length;
            $('#eAllocationCount').text(assignedCount + ' / ' + participants.length + ' scheduled')
                .removeClass('bg-primary bg-success bg-warning text-dark')
                .addClass(participants.length && assignedCount === participants.length ? 'bg-success' :
                    'bg-warning text-dark');
            var unassigned = participants.filter(function(item) {
                return !assignments[item.nik];
            });
            $('#eUnassignedParticipantCount').text(unassigned.length);
            $('#eAllocationStatus').html(!participants.length ?
                '<div class="schedule-dropzone-empty"><i class="fas fa-users"></i><span>Pilih participant pada Header terlebih dahulu</span></div>' :
                (unassigned.length ? unassigned.map(function(item) {
                        return unifiedParticipantChip(item, false);
                    }).join('') :
                    '<div class="schedule-dropzone-empty is-complete"><i class="fas fa-check-circle"></i><span>Semua participant sudah terjadwal</span></div>'
                ));
            $('#schedule-tab .badge').text($('#eScheduleRows .unified-schedule-row').length);
            refreshingUnifiedAllocation = false;
        }

        function addUnifiedSchedule(data) {
            data = data || {};
            var index = unifiedScheduleIndex++;
            var selected = data.participants || [];
            var trainerOptionsHtml = ['<option value="">-- Select Trainer --</option>'].concat(unifiedTrainerOptions.map(
                function(trainer) {
                    return '<option value="' + $('<div>').text(trainer.name).html() + '" data-nik="' + $('<div>')
                        .text(trainer.nik).html() + '" ' +
                        (String(data.trainer_nik || '') === trainer.nik ? 'selected' : '') + '>' + $('<div>').text(
                            trainer.label).html() + '</option>';
                })).join('');
            var row = $(`<div class="border rounded mb-3 unified-schedule-row schedule-create-row" data-id="${data.id || ''}" data-index="${index}">
                <div class="schedule-create-header d-flex justify-content-between align-items-center gap-2 p-3">
                    <button type="button" class="schedule-collapse-toggle" data-bs-toggle="collapse"
                        data-bs-target="#unifiedScheduleBody${index}" aria-expanded="true" aria-controls="unifiedScheduleBody${index}">
                        <span class="schedule-chevron"><i class="fas fa-chevron-down"></i></span>
                        <span class="schedule-header-copy">
                            <span class="fw-bold text-sm text-dark">Schedule <span class="unified-schedule-number"></span></span>
                            <span class="schedule-header-summary">
                                <span><i class="far fa-calendar-alt me-1"></i><span class="schedule-summary-date">-</span></span>
                                <span>·</span>
                                <span><i class="far fa-clock me-1"></i><span class="schedule-summary-time">-</span></span>
                                <span>&middot;</span>
                                <span><i class="fas fa-hourglass-half me-1"></i><span class="schedule-summary-duration">-</span></span>
                            </span>
                        </span>
                    </button>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-light text-dark unified-schedule-count">0 participants</span>
                        <button type="button" class="btn btn-outline-danger btn-sm remove-unified-schedule mb-0" title="Remove Schedule"><i class="fas fa-trash"></i></button>
                    </div>
                </div>
                <div class="collapse show schedule-create-body" id="unifiedScheduleBody${index}">
                <div class="row g-3 align-items-end p-3 pt-0">
                    <div class="col-md-3"><label class="form-label fw-bold">Date <span class="text-danger">*</span></label>
                        <input type="date" class="form-control unified-edit-input unified-schedule-date" value="${$('<div>').text(data.tna_date || '').html()}" min="${unifiedMinimumDate()}">
                        <small class="text-danger unified-schedule-date-help d-none"></small></div>
                    <div class="col-md-3"><label class="form-label fw-bold">Start Time <span class="text-danger">*</span></label><input type="time" class="form-control unified-edit-input unified-schedule-start" value="${$('<div>').text(data.tna_start_time || '').html()}"></div>
                    <div class="col-md-3"><label class="form-label fw-bold">End Time <span class="text-danger">*</span></label><input type="time" class="form-control unified-edit-input unified-schedule-end" value="${$('<div>').text(data.tna_end_time || '').html()}"></div>
                    <div class="col-md-3"><label class="form-label fw-bold">Duration</label><div class="input-group"><span class="input-group-text"><i class="fas fa-hourglass-half"></i></span><input type="text" class="form-control unified-schedule-duration bg-light" value="-" readonly tabindex="-1"></div><small class="text-muted unified-schedule-duration-help">Terisi otomatis dari waktu.</small></div>
                    <div class="col-md-6"><label class="form-label fw-bold">Institution Type <span class="text-danger">*</span></label><select class="form-select unified-edit-input unified-schedule-institution"><option value="internal" ${data.institution_name !== 'external' ? 'selected' : ''}>Internal</option><option value="external" ${data.institution_name === 'external' ? 'selected' : ''}>External</option></select></div>
                    <div class="col-md-6 unified-trainer-internal-wrap"><label class="form-label fw-bold">Trainer <span class="text-danger">*</span></label><select class="form-select unified-edit-input unified-schedule-trainer-internal" style="width:100%">${trainerOptionsHtml}</select></div>
                    <div class="col-md-6 unified-trainer-external-wrap d-none"><label class="form-label fw-bold">Trainer <span class="text-danger">*</span></label><input type="text" class="form-control unified-edit-input unified-schedule-trainer-external" value="${$('<div>').text(data.institution_name === 'external' ? (data.trainer_name || '') : '').html()}"></div>
                    <div class="col-12">
                        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2">
                            <label class="form-label fw-bold mb-0">Participants <span class="text-danger">*</span></label>
                            <button type="button" class="btn btn-outline-primary btn-sm mb-0 open-unified-schedule-participant-modal">
                                <i class="fas fa-users me-1"></i>Pilih via Modal
                            </button>
                        </div>
                        <select class="unified-schedule-participants d-none" multiple></select>
                        <div class="schedule-participant-dropzone" data-edit-drop-target="schedule" data-edit-schedule-index="${index}">
                            <div class="schedule-dropzone-empty"><i class="fas fa-hand-pointer"></i><span>Drop participant di sini atau pilih melalui modal</span></div>
                        </div>
                    </div>
                </div></div></div>`);
            $('#eScheduleRows').append(row);
            setUnifiedScheduleParticipants(row, selected);
            row.find('.unified-schedule-trainer-internal').select2({
                placeholder: 'Select trainer...',
                width: '100%'
            });
            syncUnifiedScheduleTrainer(row);
            updateUnifiedScheduleSummary(row);
            refreshUnifiedAllocation();
        }

        function syncUnifiedScheduleTrainer(row) {
            var internal = row.find('.unified-schedule-institution').val() === 'internal';
            row.find('.unified-trainer-internal-wrap').toggleClass('d-none', !internal);
            row.find('.unified-trainer-external-wrap').toggleClass('d-none', internal);
            row.find('.unified-schedule-trainer-internal').prop('disabled', !internal);
            row.find('.unified-schedule-trainer-external').prop('disabled', internal);
        }

        function initializeUnifiedEditor() {
            if (unifiedScheduleInitialized) return;
            unifiedScheduleInitialized = true;
            $('#eRequestor, #eSuperior, #eTrainerSelect').select2({
                width: '100%'
            });
            $('#eParticipants').select2({
                placeholder: 'Search participants...',
                allowClear: true,
                width: '100%'
            });
            $('#eParticipantDepartmentSelect').select2({
                placeholder: 'Select one or more departments...',
                allowClear: true,
                width: '100%'
            });
            initialUnifiedSchedules.forEach(addUnifiedSchedule);
            if (!initialUnifiedSchedules.length) addUnifiedSchedule();
            syncUnifiedTrainer();
            renderUnifiedSelectedParticipantCards();
            refreshUnifiedAllocation();
            updateUnifiedToggleAllButton();
        }

        function syncUnifiedTrainer() {
            var internal = $('#eInstitution').val() === 'internal';
            $('#eInternalTrainerWrap').toggleClass('d-none', !internal);
            $('#eExternalTrainerWrap').toggleClass('d-none', internal);
        }

        function renderUnifiedSelectedParticipantCards() {
            var groups = {};
            $('#eParticipants option:selected').each(function() {
                var departmentId = String($(this).data('department-id') || 'none');
                if (!groups[departmentId]) groups[departmentId] = {
                    name: String($(this).data('department-name') || 'No Department'),
                    employees: []
                };
                groups[departmentId].employees.push({
                    nik: String($(this).val()),
                    name: String($(this).data('employee-name') || $(this).text()).trim()
                });
            });
            var count = Object.values(groups).reduce(function(total, group) {
                return total + group.employees.length;
            }, 0);
            $('#eSelectedParticipantCount').text(count + ' participant');
            $('#eResetParticipantsBtn').prop('disabled', count === 0);
            if (!count) {
                $('#eSelectedParticipantCards').html(
                    '<div class="col-12"><div class="participant-empty-state">No participants have been selected yet.</div></div>'
                );
                return;
            }
            var cards = Object.values(groups).sort(function(a, b) {
                return a.name.localeCompare(b.name);
            }).map(function(group) {
                var employees = group.employees.sort(function(a, b) {
                    return a.name.localeCompare(b.name);
                }).map(function(employee) {
                    return '<div class="selected-participant-item"><div><span class="fw-bold">' +
                        escapeUnifiedText(employee.name) +
                        '</span><small class="text-muted ms-1">' + escapeUnifiedText(employee.nik) +
                        '</small></div>' +
                        '<button type="button" class="btn participant-remove-btn" data-edit-remove-nik="' +
                        escapeUnifiedText(employee.nik) +
                        '" title="Exclude participant"><i class="fas fa-times"></i></button></div>';
                }).join('');
                return '<div class="col-lg-6"><div class="participant-department-card"><div class="participant-department-card-header">' +
                    '<span><i class="fas fa-building me-2"></i>' + escapeUnifiedText(group.name) + '</span>' +
                    '<span class="badge bg-light text-dark">' + group.employees.length + '</span></div>' +
                    '<div class="participant-department-card-body">' + employees + '</div></div></div>';
            }).join('');
            $('#eSelectedParticipantCards').html(cards);
        }

        function updateUnifiedDepartmentModalCount() {
            var checkboxes = $('#eDepartmentEmployeeGroups .e-department-employee-checkbox');
            var checked = checkboxes.filter(':checked').length;
            var total = checkboxes.length;
            $('#eModalParticipantCount').text(checked + ' dari ' + total + ' karyawan dipilih');
            $('#eModalTotalCount').text(total);
            $('#eModalSelectedCount').text(checked);
            $('#eModalExcludedCount').text(total - checked);
            $('#eDepartmentEmployeeGroups .department-employee-row').each(function() {
                var isSelected = $(this).find('.e-department-employee-checkbox').is(':checked');
                $(this).toggleClass('is-excluded', !isSelected).find('.participant-select-toggle')
                    .toggleClass('selected', isSelected)
                    .html(isSelected ? '<i class="fas fa-check me-1"></i>Selected' :
                        '<i class="fas fa-plus me-1"></i>Select');
            });
            $('#eDepartmentEmployeeGroups .department-group-count').each(function() {
                var departmentId = String($(this).data('department-id'));
                var group = $('.e-department-employee-checkbox[data-department-id="' + departmentId + '"]');
                var selected = group.filter(':checked').length;
                $(this).text(selected + ' / ' + group.length + ' selected');
                $('.e-department-select-all[data-department-id="' + departmentId + '"]').text(selected === group
                    .length ? 'Deselect All' : 'Select All');
            });
        }

        function filterUnifiedDepartmentParticipants() {
            var keyword = String($('#eDepartmentParticipantSearch').val() || '').trim().toLowerCase();
            var visible = 0;
            $('#eDepartmentEmployeeGroups .department-popup-header').each(function() {
                var departmentId = String($(this).data('department-id'));
                var groupVisible = 0;
                $('.department-employee-row[data-edit-department-id="' + departmentId + '"]').each(function() {
                    var show = !keyword || $(this).text().toLowerCase().includes(keyword);
                    $(this).toggle(show);
                    if (show) {
                        visible++;
                        groupVisible++;
                    }
                });
                $(this).toggle(groupVisible > 0);
            });
            $('#eDepartmentEmployeeGroups .department-participant-table-wrap').toggle(visible > 0);
            $('#eDepartmentParticipantEmpty').toggleClass('d-none', visible > 0);
        }

        function openUnifiedDepartmentParticipantsModal() {
            var departmentIds = ($('#eParticipantDepartmentSelect').val() || []).map(String);
            if (!departmentIds.length) {
                Swal.fire({
                    title: 'Pilih departemen',
                    text: 'Pilih minimal satu departemen terlebih dahulu.',
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                });
                return;
            }
            var current = new Set(($('#eParticipants').val() || []).map(String));
            var number = 0;
            var rows = departmentIds.map(function(departmentId, groupIndex) {
                var department = unifiedParticipantDepartmentMap[departmentId];
                if (!department) return '';
                var configured = configuredUnifiedDepartments.has(departmentId);
                var employees = department.employees.map(function(employee, employeeIndex) {
                    number++;
                    var checked = !configured || current.has(String(employee.nik));
                    var checkboxId = 'eDeptEmployee_' + groupIndex + '_' + employeeIndex;
                    return '<tr class="department-employee-row ' + (checked ? '' : 'is-excluded') +
                        '" data-edit-department-id="' + escapeUnifiedText(departmentId) + '">' +
                        '<td class="text-center"><input class="e-department-employee-checkbox" type="checkbox" hidden id="' +
                        checkboxId + '" data-department-id="' + escapeUnifiedText(departmentId) +
                        '" value="' + escapeUnifiedText(employee.nik) + '" ' + (checked ? 'checked' : '') +
                        '>' +
                        '<button type="button" class="participant-select-toggle ' + (checked ? 'selected' :
                            '') + '" data-edit-checkbox-id="' + checkboxId + '">' +
                        (checked ? '<i class="fas fa-check me-1"></i>Selected' :
                            '<i class="fas fa-plus me-1"></i>Select') + '</button></td>' +
                        '<td class="text-center text-muted">' + number + '</td><td class="fw-bold">' +
                        escapeUnifiedText(employee.nik) + '</td><td>' + escapeUnifiedText(employee.name) +
                        '</td></tr>';
                }).join('');
                return '<tr class="department-popup-header" data-department-id="' + escapeUnifiedText(
                        departmentId) +
                    '"><td colspan="4"><div class="d-flex align-items-center justify-content-between gap-2">' +
                    '<span><i class="fas fa-building me-2"></i>' + escapeUnifiedText(department.name) +
                    '</span><div class="d-flex align-items-center gap-2">' +
                    '<span class="badge bg-light text-dark department-group-count" data-department-id="' +
                    escapeUnifiedText(departmentId) + '"></span>' +
                    '<button type="button" class="department-select-all-button e-department-select-all" data-department-id="' +
                    escapeUnifiedText(departmentId) + '">Deselect All</button></div></div></td></tr>' + employees;
            }).join('');
            $('#eDepartmentEmployeeGroups').html(
                '<div class="table-responsive department-participant-table-wrap"><table class="table department-participant-table mb-0"><thead><tr>' +
                '<th class="text-center" style="width:120px">Selection</th><th class="text-center" style="width:58px">No.</th><th style="width:190px">NIK</th><th>Nama Karyawan</th>' +
                '</tr></thead><tbody>' + rows + '</tbody></table></div>');
            $('#eDepartmentParticipantSearch').val('');
            updateUnifiedDepartmentModalCount();
            filterUnifiedDepartmentParticipants();
            bootstrap.Modal.getOrCreateInstance(document.getElementById('eDepartmentParticipantsModal')).show();
        }

        function unifiedAssignmentIndexes() {
            var assignments = {};
            $('#eScheduleRows .unified-schedule-row').each(function() {
                var index = String($(this).data('index'));
                ($(this).find('.unified-schedule-participants').val() || []).forEach(function(nik) {
                    assignments[String(nik)] = index;
                });
            });
            return assignments;
        }

        function moveUnifiedParticipant(nik, targetIndex) {
            nik = String(nik);
            $('#eScheduleRows .unified-schedule-row').each(function() {
                var row = $(this);
                setUnifiedScheduleParticipants(row, (row.find('.unified-schedule-participants').val() || []).map(
                    String).filter(function(value) {
                    return value !== nik;
                }));
            });
            if (targetIndex != null) {
                var target = $('#eScheduleRows .unified-schedule-row').filter(function() {
                    return String($(this).data('index')) === String(targetIndex);
                }).first();
                var values = (target.find('.unified-schedule-participants').val() || []).map(String);
                if (target.length && !values.includes(nik)) {
                    values.push(nik);
                    setUnifiedScheduleParticipants(target, values);
                }
            }
            refreshUnifiedAllocation();
            markDirty();
        }

        function openUnifiedScheduleParticipantModal(row) {
            var participantMap = unifiedHeaderParticipantMap();
            var assignments = unifiedAssignmentIndexes();
            activeUnifiedScheduleIndex = String(row.data('index'));
            var scheduleNumber = $('#eScheduleRows .unified-schedule-row').index(row) + 1;
            $('#eScheduleParticipantModalNumber').text(scheduleNumber);
            var rows = Object.values(participantMap).sort(function(a, b) {
                return a.name.localeCompare(b.name);
            }).map(function(participant) {
                var assignedIndex = assignments[participant.nik];
                var current = assignedIndex === activeUnifiedScheduleIndex;
                var unavailable = assignedIndex !== undefined && !current;
                var assignedRow = unavailable ? $('#eScheduleRows .unified-schedule-row').filter(function() {
                    return String($(this).data('index')) === String(assignedIndex);
                }).first() : $();
                var assignedNumber = assignedRow.length ? $('#eScheduleRows .unified-schedule-row').index(
                    assignedRow) + 1 : null;
                return '<tr class="' + (unavailable ? 'is-unavailable' : (current ? 'is-selected' : '')) +
                    '"><td class="text-center">' +
                    '<button type="button" class="schedule-modal-select ' + (current ? 'selected' : '') +
                    '" data-edit-modal-nik="' + escapeUnifiedText(participant.nik) + '" ' + (unavailable ?
                        'disabled' : '') + '>' +
                    '<i class="fas ' + (current ? 'fa-check' : (unavailable ? 'fa-lock' : 'fa-plus')) +
                    ' me-1"></i>' + (current ? 'Selected' : (unavailable ? 'Used' : 'Select')) + '</button></td>' +
                    '<td class="fw-bold">' + escapeUnifiedText(participant.nik) + '</td><td>' + escapeUnifiedText(
                        participant.name) + '</td><td>' +
                    (unavailable ? '<span class="schedule-used-badge">Schedule ' + assignedNumber + '</span>' : (
                        current ? '<span class="schedule-current-badge">Schedule ini</span>' :
                        '<span class="text-muted text-xs">Belum terjadwal</span>')) + '</td></tr>';
            }).join('');
            $('#eScheduleParticipantModalRows').html(rows);
            $('#eScheduleParticipantSearch').val('');
            filterUnifiedScheduleParticipants();
            updateUnifiedScheduleModalCount();
            bootstrap.Modal.getOrCreateInstance(document.getElementById('eScheduleParticipantsModal')).show();
        }

        function updateUnifiedScheduleModalCount() {
            $('#eScheduleParticipantModalCount').text($('#eScheduleParticipantModalRows .schedule-modal-select.selected')
                .length + ' participant dipilih');
        }

        function filterUnifiedScheduleParticipants() {
            var keyword = String($('#eScheduleParticipantSearch').val() || '').trim().toLowerCase();
            var visible = 0;
            $('#eScheduleParticipantModalRows tr').each(function() {
                var show = !keyword || $(this).text().toLowerCase().includes(keyword);
                $(this).toggle(show);
                if (show) visible++;
            });
            $('#eScheduleParticipantsModal .schedule-participant-modal-table-wrap').toggleClass('d-none', visible === 0);
            $('#eScheduleParticipantEmpty').toggleClass('d-none', visible > 0);
        }

        function updateUnifiedToggleAllButton() {
            var hasOpen = $('#eScheduleRows .schedule-create-body.show').length > 0;
            $('#eToggleAllSchedules').find('i').attr('class', hasOpen ? 'fas fa-angles-up me-1' :
                'fas fa-angles-down me-1');
            $('#eToggleAllSchedules span').text(hasOpen ? 'Collapse All' : 'Expand All');
        }

        $(document).on('change', '#eParticipantSourceToggle', function() {
            var byDepartment = $(this).is(':checked');
            $('#eDepartmentParticipantControls').toggleClass('d-none', !byDepartment);
            $('#eParticipantNameControls').toggleClass('d-none', byDepartment);
            $('#eParticipantModeName').toggleClass('active', !byDepartment);
            $('#eParticipantModeDepartment').toggleClass('active', byDepartment);
            $('#eParticipantSourceHelp').html(byDepartment ?
                '<i class="fas fa-info-circle"></i><span>Pilih satu atau beberapa departemen, lalu klik <b>Add Participants</b>.</span>' :
                '<i class="fas fa-info-circle"></i><span>Gunakan kolom pencarian untuk memilih participant berdasarkan nama atau NIK.</span>'
            );
        });
        $(document).on('click', '#eAddDepartmentParticipantsBtn', openUnifiedDepartmentParticipantsModal);
        $(document).on('keydown', '#eParticipantDepartmentSelect + .select2 .select2-selection', function(event) {
            if (event.key === 'Enter' && ($('#eParticipantDepartmentSelect').val() || []).length &&
                !$('#eParticipantDepartmentSelect').data('select2').isOpen()) {
                event.preventDefault();
                $('#eParticipantDepartmentSelect').select2('close');
                setTimeout(openUnifiedDepartmentParticipantsModal, 0);
            }
        });
        $(document).on('input', '#eDepartmentParticipantSearch', filterUnifiedDepartmentParticipants);
        $(document).on('click', '#eDepartmentEmployeeGroups .participant-select-toggle', function() {
            var checkbox = document.getElementById($(this).data('edit-checkbox-id'));
            checkbox.checked = !checkbox.checked;
            updateUnifiedDepartmentModalCount();
        });
        $(document).on('click', '#eDepartmentEmployeeGroups .e-department-select-all', function() {
            var departmentId = String($(this).data('department-id'));
            var group = $('.e-department-employee-checkbox[data-department-id="' + departmentId + '"]');
            group.prop('checked', group.filter(':checked').length !== group.length);
            updateUnifiedDepartmentModalCount();
        });
        $(document).on('click', '#eApplyDepartmentParticipantsBtn', function() {
            var departmentIds = ($('#eParticipantDepartmentSelect').val() || []).map(String);
            var participants = new Set(($('#eParticipants').val() || []).map(String));
            departmentIds.forEach(function(departmentId) {
                var department = unifiedParticipantDepartmentMap[departmentId];
                if (!department) return;
                department.employees.forEach(function(employee) {
                    participants.delete(String(employee.nik));
                });
                $('.e-department-employee-checkbox[data-department-id="' + departmentId + '"]:checked')
                    .each(function() {
                        participants.add(String($(this).val()));
                    });
                configuredUnifiedDepartments.add(departmentId);
            });
            $('#eParticipants').val(Array.from(participants)).trigger('change');
            bootstrap.Modal.getOrCreateInstance(document.getElementById('eDepartmentParticipantsModal')).hide();
        });
        $(document).on('click', '[data-edit-remove-nik]', function() {
            var removedNik = String($(this).data('edit-remove-nik'));
            $('#eParticipants').val(($('#eParticipants').val() || []).map(String).filter(function(nik) {
                return nik !== removedNik;
            })).trigger('change');
        });
        $(document).on('click', '#eResetParticipantsBtn', function() {
            var count = ($('#eParticipants').val() || []).length;
            if (!count) return;
            Swal.fire({
                title: 'Reset semua participant?',
                text: count + ' participant akan dihapus dari Header dan alokasi Schedule.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Reset',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#8392ab'
            }).then(function(result) {
                if (result.isConfirmed) $('#eParticipants').val([]).trigger('change');
            });
        });

        $(document).on('click', '#eScheduleRows .open-unified-schedule-participant-modal', function() {
            openUnifiedScheduleParticipantModal($(this).closest('.unified-schedule-row'));
        });
        $(document).on('click', '#eScheduleParticipantModalRows .schedule-modal-select:not(:disabled)', function() {
            $(this).toggleClass('selected');
            var selected = $(this).hasClass('selected');
            $(this).html(selected ? '<i class="fas fa-check me-1"></i>Selected' :
                '<i class="fas fa-plus me-1"></i>Select');
            $(this).closest('tr').toggleClass('is-selected', selected);
            updateUnifiedScheduleModalCount();
        });
        $(document).on('input', '#eScheduleParticipantSearch', filterUnifiedScheduleParticipants);
        $(document).on('click', '#eApplyScheduleParticipantsBtn', function() {
            var row = $('#eScheduleRows .unified-schedule-row').filter(function() {
                return String($(this).data('index')) === activeUnifiedScheduleIndex;
            }).first();
            var niks = $('#eScheduleParticipantModalRows .schedule-modal-select.selected').map(function() {
                return String($(this).data('edit-modal-nik'));
            }).get();
            setUnifiedScheduleParticipants(row, niks);
            refreshUnifiedAllocation();
            markDirty();
            bootstrap.Modal.getOrCreateInstance(document.getElementById('eScheduleParticipantsModal')).hide();
        });
        $(document).on('click', '#eScheduleRows .participant-unassign-button', function(event) {
            event.stopPropagation();
            moveUnifiedParticipant($(this).closest('.schedule-participant-chip').data('edit-nik'), null);
        });
        $(document).on('dragstart', '#tnaUnifiedEdit .schedule-participant-chip', function(event) {
            event.originalEvent.dataTransfer.setData('text/plain', String($(this).data('edit-nik')));
            event.originalEvent.dataTransfer.effectAllowed = 'move';
            $(this).addClass('is-dragging');
        }).on('dragend', '#tnaUnifiedEdit .schedule-participant-chip', function() {
            $('#tnaUnifiedEdit .schedule-participant-chip').removeClass('is-dragging');
            $('#tnaUnifiedEdit .schedule-participant-dropzone').removeClass('is-drag-over');
        }).on('dragover', '#tnaUnifiedEdit .schedule-participant-dropzone', function(event) {
            event.preventDefault();
            event.originalEvent.dataTransfer.dropEffect = 'move';
            $(this).addClass('is-drag-over');
        }).on('dragleave', '#tnaUnifiedEdit .schedule-participant-dropzone', function(event) {
            var related = event.originalEvent.relatedTarget;
            if (!related || !this.contains(related)) $(this).removeClass('is-drag-over');
        }).on('drop', '#tnaUnifiedEdit .schedule-participant-dropzone', function(event) {
            event.preventDefault();
            var nik = event.originalEvent.dataTransfer.getData('text/plain');
            var target = $(this).data('edit-drop-target') === 'schedule' ? String($(this).data(
                'edit-schedule-index')) : null;
            $('#tnaUnifiedEdit .schedule-participant-dropzone').removeClass('is-drag-over');
            if (nik) moveUnifiedParticipant(nik, target);
        });
        $(document).on('click', '#eToggleAllSchedules', function() {
            var collapseAll = $('#eScheduleRows .schedule-create-body.show').length > 0;
            $('#eScheduleRows .schedule-create-body').each(function() {
                var collapse = bootstrap.Collapse.getOrCreateInstance(this, {
                    toggle: false
                });
                collapseAll ? collapse.hide() : collapse.show();
            });
        });
        $(document).on('shown.bs.collapse hidden.bs.collapse', '#eScheduleRows .schedule-create-body',
            updateUnifiedToggleAllButton);

        $(document).on('click', '#eAddSchedule', function() {
            addUnifiedSchedule();
            updateUnifiedToggleAllButton();
            markDirty();
        });
        $(document).on('click', '.remove-unified-schedule', function() {
            $(this).closest('.unified-schedule-row').remove();
            if (!$('#eScheduleRows .unified-schedule-row').length) addUnifiedSchedule();
            refreshUnifiedAllocation();
            updateUnifiedToggleAllButton();
            markDirty();
        });
        $(document).on('change',
            '#eParticipants, .unified-schedule-participants, .unified-schedule-date, #eMonthEstimation',
            function() {
                if ($(this).is('#eParticipants')) renderUnifiedSelectedParticipantCards();
                refreshUnifiedAllocation();
                markDirty();
            });
        $(document).on('input change', '#eScheduleRows .unified-schedule-start, #eScheduleRows .unified-schedule-end',
            function() {
                updateUnifiedScheduleSummary($(this).closest('.unified-schedule-row'));
            });
        $(document).on('change', '#eTypeTraining', function() {
            $('#eScheduleRows .unified-schedule-row').each(function() {
                updateUnifiedScheduleSummary($(this));
            });
        });
        $(document).on('change', '.unified-schedule-institution', function() {
            syncUnifiedScheduleTrainer($(this).closest('.unified-schedule-row'));
            markDirty();
        });
        $(document).on('change', '#eInstitution', function() {
            syncUnifiedTrainer();
            markDirty();
        });
        $(document).on('input change', '#tnaUnifiedEdit .unified-edit-input', markDirty);
        $(document).on('change', '#eRequestor', function() {
            var superior = superiorByRequestor[String($(this).val() || '')];
            if (superior && superior.superior_nik) $('#eSuperior').val(String(superior.superior_nik)).trigger(
                'change');
        });
        $(document).on('shown.bs.tab', '#tnaTab [data-bs-toggle="pill"]', function(event) {
            if (!isEditMode) return;
            var pane = String($(event.target).data('bs-target') || '').replace('#', '');
            $('#tnaUnifiedEdit .unified-edit-pane').addClass('d-none');
            $('#tnaUnifiedEdit .unified-edit-pane[data-pane="' + pane + '"]').removeClass('d-none');
        });

        // NIKs already scheduled in DB — used for duplicate check
        var scheduledNiksInDb = @json(collect($schedules)->flatMap(fn($s) => json_decode($s->nik, true) ?? [])->unique()->values());

        // ============================
        // DIRTY STATE HELPERS
        // ============================

        function markDirty() {
            if (!isDirty) {
                isDirty = true;
                showUnsavedBanner();
            }
        }

        function hasUnsavedChanges() {
            return isDirty || pendingParticipants !== null || pendingSchedules.length > 0;
        }

        function clearDirty() {
            isDirty = false;
            pendingParticipants = null;
            pendingSchedules = [];
            sessionStorage.removeItem('tna_edit_mode_{{ $list->id }}');
            $('#unsavedBanner').addClass('d-none');
        }

        function showUnsavedBanner() {
            $('#unsavedBanner').removeClass('d-none');
        }

        function confirmDiscardIfDirty(actionLabel) {
            if (!hasUnsavedChanges()) return Promise.resolve(true);
            return Swal.fire({
                title: 'Unsaved Changes',
                html: 'You have unsaved changes.<br>If you ' + actionLabel +
                    ', those changes will be <strong>lost</strong>.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Discard & continue',
                cancelButtonText: 'Stay here'
            }).then(function(result) {
                return result.isConfirmed;
            });
        }

        // ============================
        // GLOBAL EDIT MODE TOGGLE
        // ============================
        function toggleEditMode() {
            try {
                isEditMode = true;
                sessionStorage.setItem('tna_edit_mode_{{ $list->id }}', '1');
                initializeUnifiedEditor();
                $('#tnaTabContent').addClass('d-none');
                $('#tnaUnifiedEdit').removeClass('d-none');
                var activePane = String($('#tnaTab .nav-link.active').data('bs-target') || '#header').replace('#', '');
                $('#tnaUnifiedEdit .unified-edit-pane').addClass('d-none');
                $('#tnaUnifiedEdit .unified-edit-pane[data-pane="' + activePane + '"]').removeClass('d-none');
                // Show edit fields, hide view fields
                $('.view-mode').addClass('d-none');
                $('.edit-mode').removeClass('d-none');
                // Show edit-gated buttons, hide placeholders
                $('.edit-gated').removeClass('d-none');
                $('.edit-gated-placeholder').addClass('d-none');
                // Detail tab: enable fields
                $('#fProblemDesc').prop('readonly', false);
                $('#fProposedTrn').prop('readonly', false);
                $('#fInstitution').prop('disabled', false);
                $('#fTrnMethod').prop('readonly', false);
                // Trainer: show edit controls, hide view text
                if ($('#fTrainerView').length) $('#fTrainerView').addClass('d-none');
                var fInst = $('#fInstitution').val() || 'internal';
                if (fInst === 'external') {
                    $('#fTrainerWrapInput').removeClass('d-none');
                } else {
                    $('#fTrainerWrapSelect').removeClass('d-none');
                }
                // Add detail form
                $('#nProblemDesc').prop('readonly', false);
                $('#nProposedTrn').prop('readonly', false);
                $('#nInstitution').prop('disabled', false);
                $('#nTrnMethod').prop('readonly', false);
                $('#nTrainerNameInput').prop('readonly', false);
            } catch (e) {
                console.error('toggleEditMode error (before buttons):', e);
            }
            // Show Save/View Mode, hide Edit Mode button — MUST execute
            $('#btnToggleEdit').addClass('d-none');
            $('#btnSaveAll').removeClass('d-none');
            $('#btnSaveApproveHrd').removeClass('d-none');
            $('#btnCancelEdit').removeClass('d-none');
            // Init Select2 delayed
            initTrainerSelect2Safe();
            // Track header field changes for dirty detection
            $('#hNameTrn, #hMonthEstimation, #hDescription').off('input.dirty').on('input.dirty', markDirty);
            $('#hTypeTraining, #hWithScore').off('change.dirty').on('change.dirty', markDirty);
            // With Score switch label update on change
            $('#hWithScore').off('change.label').on('change.label', function() {
                $('#hWithScoreLabel').text(this.checked ? 'Yes' : 'No');
            });
        }

        function cancelEditMode() {
            confirmDiscardIfDirty('switch to View Mode').then(function(confirmed) {
                if (!confirmed) return;
                clearDirty();
                isEditMode = false;
                $('#tnaUnifiedEdit').addClass('d-none');
                $('#tnaTabContent').removeClass('d-none');
                // Hide edit fields, show view fields
                $('.view-mode').removeClass('d-none');
                $('.edit-mode').addClass('d-none');
                // Hide edit-gated buttons, show placeholders
                $('.edit-gated').addClass('d-none');
                $('.edit-gated-placeholder').removeClass('d-none');
                // Detail tab: lock fields
                $('#fProblemDesc').prop('readonly', true);
                $('#fProposedTrn').prop('readonly', true);
                $('#fInstitution').prop('disabled', true);
                $('#fTrnMethod').prop('readonly', true);
                // Trainer: hide edit controls, show view text
                $('#fTrainerView').removeClass('d-none');
                $('#fTrainerWrapSelect').addClass('d-none');
                $('#fTrainerWrapInput').addClass('d-none');
                if ($('#fTrainerNameSelect').length) $('#fTrainerNameSelect').prop('disabled', true);
                $('#fTrainerNameInput').prop('readonly', true);
                // Show Edit Mode button, hide Save/View Mode
                $('#btnToggleEdit').removeClass('d-none');
                $('#btnSaveAll').addClass('d-none');
                $('#btnSaveApproveHrd').addClass('d-none');
                $('#btnCancelEdit').addClass('d-none');
                // Reload to reset field values to server state
                location.reload();
            });
        }

        function saveUnifiedAll(approveHrdAfterSave, approvalConfirmed) {
            approveHrdAfterSave = approveHrdAfterSave === true;
            var participants = ($('#eParticipants').val() || []).map(String);
            var schedules = [];
            var scheduledNiks = [];
            var scheduleValid = true;
            var academyDurationInvalid = false;
            var duplicateSchedule = false;
            var scheduleSignatures = new Set();
            $('#eScheduleRows .unified-schedule-row').each(function() {
                var date = $(this).find('.unified-schedule-date').val();
                var startTime = $(this).find('.unified-schedule-start').val();
                var endTime = $(this).find('.unified-schedule-end').val();
                var institution = $(this).find('.unified-schedule-institution').val();
                var trainerSelect = $(this).find('.unified-schedule-trainer-internal');
                var trainerName = institution === 'internal' ? (trainerSelect.val() || '') : ($(this).find(
                    '.unified-schedule-trainer-external').val() || '');
                var trainerNik = institution === 'internal' ? (trainerSelect.find('option:selected').data('nik') ||
                    '') : '';
                var minimum = $(this).find('.unified-schedule-date').attr('min');
                var niks = ($(this).find('.unified-schedule-participants').val() || []).map(String);
                if (!date || date < minimum || !startTime || !endTime || endTime <= startTime || !trainerName || !
                    niks.length) scheduleValid = false;
                if (
                    (getUnifiedScheduleDurationMinutes(startTime, endTime) || 0) < 30) academyDurationInvalid =
                    true;
                var trainerKey = institution === 'internal' ? String(trainerNik) : String(trainerName).trim()
                    .toLowerCase();
                var signature = [date, startTime, endTime, institution, trainerKey].join('|');
                if (scheduleSignatures.has(signature)) duplicateSchedule = true;
                scheduleSignatures.add(signature);
                scheduledNiks = scheduledNiks.concat(niks);
                schedules.push({
                    id: $(this).data('id') || null,
                    tna_date: date,
                    tna_start_time: startTime,
                    tna_end_time: endTime,
                    institution_name: institution,
                    trainer_name: trainerName,
                    trainer_nik: trainerNik,
                    participants: niks
                });
            });

            var requiredValid = $('#eNameTrn').val().trim() && $('#eRequestor').val() &&
                $('#eDescription').val().trim() && $('#eProblemDesc').val().trim() &&
                $('#eProposedTrn').val().trim() && participants.length;
            var duplicate = scheduledNiks.some(function(nik, index) {
                return scheduledNiks.indexOf(nik) !== index;
            });
            var missing = participants.some(function(nik) {
                return !scheduledNiks.includes(nik);
            });
            var outsider = scheduledNiks.some(function(nik) {
                return !participants.includes(nik);
            });

            console.log(requiredValid, scheduleValid, academyDurationInvalid, duplicateSchedule, duplicate, missing,
                outsider, scheduledNiks);
            if (!requiredValid || !scheduleValid || academyDurationInvalid || duplicateSchedule || duplicate || missing ||
                outsider || scheduledNiks
                .length !== participants.length) {
                Swal.fire({
                    title: 'Invalid Data!',
                    text: !requiredValid ? 'Please complete all required fields in the TNA Header and Detail.' : (!
                        scheduleValid ?
                        'The date, time, trainer, and participants for each schedule must be valid.' :
                        (academyDurationInvalid ? 'Duration of each schedule must be at least 30 minutes.' : (
                            duplicateSchedule ?
                            'The date, start time, end time, and trainer cannot be the same as another schedule.' :
                            (duplicate ?
                                'A participant cannot be assigned to more than one schedule.' :
                                'All participants must be allocated to exactly one schedule.')))),
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            if (approveHrdAfterSave && approvalConfirmed !== true) {
                Swal.fire({
                    title: 'Save and Approve TNA?',
                    text: 'All changes will be saved and this TNA will be approved by HRD.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, Save & Approve',
                    cancelButtonText: 'Cancel',
                    confirmButtonColor: '#028284'
                }).then(function(result) {
                    if (result.isConfirmed) saveUnifiedAll(true, true);
                });
                return;
            }

            var payload = {
                _token: '{{ csrf_token() }}',
                id: encryptedId,
                unified_edit: '1',
                name_trn: $('#eNameTrn').val().trim(),
                requestor_nik: $('#eRequestor').val(),
                superior_nik: $('#eSuperior').val() || '',
                type_training: $('#eTypeTraining').val(),
                with_score: $('#eWithScore').val(),
                month_estimation: $('#eMonthEstimation').val() || '',
                description: $('#eDescription').val().trim(),
                participants: participants,
                detail_id: '{{ $editDetail->id ?? '' }}',
                problem_desc: $('#eProblemDesc').val().trim(),
                proposed_trn: $('#eProposedTrn').val().trim(),
                trn_method: $('#eTrnMethod').val() || '',
                schedules: schedules,
                approve_hrd: approveHrdAfterSave ? '1' : '0'
            };

            $('#btnSaveAll, #btnSaveApproveHrd').prop('disabled', true);
            var $activeSaveButton = approveHrdAfterSave ? $('#btnSaveApproveHrd') : $('#btnSaveAll');
            $activeSaveButton.html('<i class="fas fa-spinner fa-spin me-1"></i> Saving...');
            Swal.fire({
                title: approveHrdAfterSave ? 'Saving and approving TNA...' : 'Saving TNA...',
                text: approveHrdAfterSave ?
                    'Please wait while the changes and HRD approval are processed.' :
                    'Please wait while all changes are saved.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: function() {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: '{{ url('trstna/update-header') }}',
                type: 'POST',
                data: payload,
                success: function(response) {
                    clearDirty();
                    Swal.fire({
                            title: 'Success!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonColor: '#028284'
                        })
                        .then(function() {
                            window.location.href = '{{ url($url_menu) }}';
                        });
                },
                error: function(xhr) {
                    $('#btnSaveAll').prop('disabled', false).html(
                        '<i class="fas fa-save me-1"></i><span class="font-weight-bold">Save</span>');
                    $('#btnSaveApproveHrd').prop('disabled', false).html(
                        '<i class="fas fa-check-circle me-1"></i><span class="font-weight-bold">Save & Approve HRD</span>'
                    );
                    Swal.fire({
                        title: 'Error!',
                        text: xhr.responseJSON?.error || xhr.responseJSON?.message ||
                            'Terjadi kesalahan',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }

        function saveAll() {
            var nameTrn = $('#hNameTrn').val();
            var description = $('#hDescription').val().trim();
            if (!nameTrn || !description) {
                var missing = [];
                if (!nameTrn) missing.push('Training Name');
                if (!description) missing.push('Description');
                Swal.fire({
                    title: 'Error!',
                    text: missing.join(', ') + ' wajib diisi!',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            var payload = {
                _token: '{{ csrf_token() }}',
                id: encryptedId,
                name_trn: nameTrn,
                type_training: $('#hTypeTraining').val(),
                with_score: $('#hWithScore').is(':checked') ? '1' : '0',
                month_estimation: $('#hMonthEstimation').val() || null,
                description: $('#hDescription').val() || ''
            };

            // Include pending participants if changed
            if (pendingParticipants !== null) {
                pendingParticipants.forEach(function(p, i) {
                    payload['participants[' + i + ']'] = p.nik;
                });
            }

            // Include pending schedules if any
            if (pendingSchedules.length > 0) {
                pendingSchedules.forEach(function(sched, i) {
                    payload['new_schedules[' + i + '][tna_date]'] = sched.tna_date;
                    sched.niks.forEach(function(nik, j) {
                        payload['new_schedules[' + i + '][nik][' + j + ']'] = nik;
                    });
                });
            }

            // Include detail data if existing detail (update)
            var detailId = $('#detailId').val();
            if (detailId) {
                // Sync hidden field sebelum kirim — pastikan value terkini dari Select2 atau input
                var fInst = $('#fInstitution').val();
                if (fInst === 'external') {
                    $('#fTrainerName').val($('#fTrainerNameInput').val() || '');
                    $('#fTrainerNik').val(''); // external: NIK null
                } else {
                    $('#fTrainerName').val($('#fTrainerNameSelect').val() || '');
                    var selectedNik = $('#fTrainerNameSelect').find('option:selected').data('nik') || '';
                    $('#fTrainerNik').val(selectedNik);
                }

                payload.detail_id = detailId;
                payload.problem_desc = $('#fProblemDesc').val();
                payload.proposed_trn = $('#fProposedTrn').val();
                payload.institution_name = $('#fInstitution').val();
                payload.trainer_name = $('#fTrainerName').val();
                payload.trainer_nik = $('#fTrainerNik').val();
                payload.trn_method = $('#fTrnMethod').val();
            }

            // Include new detail data if add detail form exists (create new)
            var newProblemDesc = $('#nProblemDesc').val();
            var newProposedTrn = $('#nProposedTrn').val();
            if (!detailId && newProblemDesc && newProposedTrn) {
                // Sync hidden field sebelum kirim
                var nInst = $('#nInstitution').val();
                if (nInst === 'external') {
                    $('#nTrainerName').val($('#nTrainerNameInput').val() || '');
                    $('#nTrainerNik').val(''); // external: NIK null
                } else {
                    $('#nTrainerName').val($('#nTrainerNameSelect').val() || '');
                    var selectedNik = $('#nTrainerNameSelect').find('option:selected').data('nik') || '';
                    $('#nTrainerNik').val(selectedNik);
                }

                payload.new_detail = '1';
                payload.problem_desc = newProblemDesc;
                payload.proposed_trn = newProposedTrn;
                payload.institution_name = $('#nInstitution').val();
                payload.trainer_name = $('#nTrainerName').val();
                payload.trainer_nik = $('#nTrainerNik').val();
                payload.trn_method = $('#nTrnMethod').val();
            }

            // Disable save button to prevent double click
            $('#btnSaveAll').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Saving...');

            $.ajax({
                url: '{{ url('trstna/update-header') }}',
                type: 'POST',
                data: payload,
                success: function(response) {
                    if (response.success) {
                        clearDirty();
                        Swal.fire({
                            title: 'Success!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonColor: '#028284'
                        }).then(() => location.reload());
                    }
                },
                error: function(xhr) {
                    $('#btnSaveAll').prop('disabled', false).html(
                        '<i class="fas fa-save me-1"></i><span class="font-weight-bold">Save</span>');
                    Swal.fire({
                        title: 'Error!',
                        text: xhr.responseJSON?.error || 'Terjadi kesalahan',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }

        // Initialize Select2 on page load
        $(document).ready(function() {

            const params = new URLSearchParams(window.location.search);

            if (params.get('mode') === 'edit') {
                toggleEditMode();
            }
            // ---- Intercept Back button to warn about unsaved changes ----
            $('#btnBack').on('click', function(e) {
                e.preventDefault();

                const href = $(this).data('href');
                const isPureSuperior = @json($is_atasan_approver && !$is_hrd_approver);

                if (isPureSuperior) {
                    window.location.href = href;
                    return;
                }

                if (!isEditMode) {
                    window.location.href = href;
                    return;
                }

                Swal.fire({
                    title: 'Discard unsaved changes?',
                    text: 'Unsaved changes will be lost.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, Go Back',
                    cancelButtonText: 'Stay on Page',
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d'
                }).then(function(result) {
                    if (result.isConfirmed) {
                        clearDirty();
                        window.location.href = href;
                    }
                });
            });

            // ---- Tab Persistence via URL Hash ----
            // Restore last active tab from URL hash
            var hash = window.location.hash;
            if (hash) {
                var tabTrigger = $('#tnaTab button[data-bs-target="' + hash + '"]');
                if (tabTrigger.length) {
                    var tab = new bootstrap.Tab(tabTrigger[0]);
                    tab.show();
                }
            }
            // Save active tab to URL hash on change
            $('#tnaTab button').on('shown.bs.tab', function(e) {
                var target = $(e.target).data('bs-target');
                if (history.replaceState) {
                    history.replaceState(null, null, target);
                } else {
                    window.location.hash = target;
                }
            });
            // Store all original options for filtering
            var allOptions = $('#editParticipantsSelect').html();

            // Select2 for Edit Participants Modal
            function formatParticipantOption(option) {
                if (!option.id) return option.text;
                var isSelected = option.element && option.element.selected;
                var $el = $(
                    '<span style="display:flex;align-items:center;justify-content:space-between;width:100%;padding:2px 0;">' +
                    '<span>' + option.text + '</span>' +
                    (isSelected ?
                        '<span style="color:#028284;font-size:1rem;font-weight:bold;">&#10003;</span>' :
                        '<span style="width:1rem;display:inline-block;"></span>') +
                    '</span>');
                return $el;
            }

            function initParticipantsSelect2() {
                if ($('#editParticipantsSelect').hasClass('select2-hidden-accessible')) {
                    $('#editParticipantsSelect').select2('destroy');
                }
                $('#editParticipantsSelect').select2({
                    placeholder: 'Type to search participants...',
                    allowClear: true,
                    closeOnSelect: false,
                    dropdownParent: $('#editParticipantsModal'),
                    width: '100%',
                    templateResult: formatParticipantOption,
                    language: {
                        noResults: function() {
                            return 'No results found';
                        },
                        searching: function() {
                            return 'Searching...';
                        }
                    }
                });

                $('#editParticipantsSelect').on('select2:select select2:unselect', function(e) {
                    updateSelectedCount();
                    // Re-render option yang baru di-toggle supaya tanda centang langsung update
                    var changedId = e.params.data.id;
                    var isNowSelected = e.type === 'select2:select';
                    $('#editParticipantsModal').find('.select2-results__option').each(function() {
                        var data = $(this).data('data');
                        if (data && String(data.id) === String(changedId)) {
                            var $icon = $(this).find('span > span:last-child');
                            if (isNowSelected) {
                                $icon.html('&#10003;').css({
                                    'color': '#028284',
                                    'font-weight': 'bold',
                                    'font-size': '1rem'
                                });
                            } else {
                                $icon.html('').css({});
                            }
                        }
                    });
                });

                updateSelectedCount();
            }

            initParticipantsSelect2();

            // Department filter change handler
            $('#deptFilter').on('change', function() {
                var selectedDept = $(this).val();
                var currentSelected = $('#editParticipantsSelect').val() || [];

                // Restore all options first
                $('#editParticipantsSelect').html(allOptions);

                if (selectedDept !== 'all') {
                    // Hide optgroups that don't match, but keep selected options visible
                    $('#editParticipantsSelect optgroup').each(function() {
                        var groupDeptId = $(this).data('dept-id');
                        if (String(groupDeptId) !== String(selectedDept)) {
                            // Keep only selected options from non-matching groups
                            $(this).find('option').each(function() {
                                if (currentSelected.indexOf($(this).val()) === -1) {
                                    $(this).remove();
                                }
                            });
                            // Remove empty optgroups
                            if ($(this).find('option').length === 0) {
                                $(this).remove();
                            }
                        }
                    });
                }

                // Re-select previously selected values
                $('#editParticipantsSelect').val(currentSelected);
                initParticipantsSelect2();
            });

            // Update selected count on change — handled inside initParticipantsSelect2

            function updateSelectedCount() {
                var count = ($('#editParticipantsSelect').val() || []).length;
                $('#selectedCount').text(count + ' participant(s) selected');
            }

            // Initial count
            updateSelectedCount();

            // Reset filter when modal is opened
            $('#editParticipantsModal').on('show.bs.modal', function() {
                $('#deptFilter').val('all');
                $('#editParticipantsSelect').html(allOptions);
                var currentSelected = $('#editParticipantsSelect').val() || [];
                // Re-apply selections
                @json($participant_pool_raw).forEach(function(nik) {
                    if (currentSelected.indexOf(nik) === -1) {
                        currentSelected.push(nik);
                    }
                });
                $('#editParticipantsSelect').val(currentSelected);
                initParticipantsSelect2();
            });

            // Select2 for Add Schedule Modal
            $('#addParticipants').select2({
                placeholder: 'Select participants...',
                allowClear: true,
                dropdownParent: $('#addScheduleModal'),
                width: '100%',
                language: {
                    noResults: function() {
                        return 'No results found';
                    },
                    searching: function() {
                        return 'Searching...';
                    }
                }
            });

            // Select2 for Reschedule Modal
            $('#rescheduleParticipants').select2({
                placeholder: 'Select participants...',
                allowClear: true,
                dropdownParent: $('#rescheduleModal'),
                width: '100%',
                language: {
                    noResults: function() {
                        return 'No results found';
                    },
                    searching: function() {
                        return 'Searching...';
                    }
                }
            });



            // Re-init Select2 saat tab Detail TNA ditampilkan (karena elemen harus visible)
            $('button[data-bs-target="#detail"]').on('shown.bs.tab', function() {
                if (isEditMode && !trainerSelect2Ready) {
                    initTrainerSelect2Safe();
                }
            });

            // Sync select/input to hidden (name + nik)
            $(document).on('change', '#fTrainerNameSelect', function() {
                $('#fTrainerName').val($(this).val());
                var selectedNik = $(this).find('option:selected').data('nik') || '';
                $('#fTrainerNik').val(selectedNik);
            });
            $(document).on('change', '#nTrainerNameSelect', function() {
                $('#nTrainerName').val($(this).val());
                var selectedNik = $(this).find('option:selected').data('nik') || '';
                $('#nTrainerNik').val(selectedNik);
            });
            $(document).on('input', '#fTrainerNameInput', function() {
                $('#fTrainerName').val($(this).val());
                $('#fTrainerNik').val(''); // external: NIK selalu null
            });
            $(document).on('input', '#nTrainerNameInput', function() {
                $('#nTrainerName').val($(this).val());
                $('#nTrainerNik').val(''); // external: NIK selalu null
            });

            // Toggle trainer based on institution
            $(document).on('change', '#fInstitution', function() {
                if ($(this).val() === 'internal') {
                    $('#fTrainerWrapSelect').removeClass('d-none');
                    $('#fTrainerWrapInput').addClass('d-none');
                    $('#fTrainerName').val($('#fTrainerNameSelect').val() || '');
                    // Sync NIK dari select yang aktif
                    var selectedNik = $('#fTrainerNameSelect').find('option:selected').data('nik') || '';
                    $('#fTrainerNik').val(selectedNik);
                    initTrainerSelect2Safe();
                } else {
                    $('#fTrainerWrapSelect').addClass('d-none');
                    $('#fTrainerWrapInput').removeClass('d-none');
                    $('#fTrainerName').val($('#fTrainerNameInput').val() || '');
                    $('#fTrainerNik').val(''); // external: NIK null
                }
            });
            $(document).on('change', '#nInstitution', function() {
                if ($(this).val() === 'internal') {
                    $('#nTrainerWrapSelect').removeClass('d-none');
                    $('#nTrainerWrapInput').addClass('d-none');
                    $('#nTrainerName').val($('#nTrainerNameSelect').val() || '');
                    var selectedNik = $('#nTrainerNameSelect').find('option:selected').data('nik') || '';
                    $('#nTrainerNik').val(selectedNik);
                    initTrainerSelect2Safe();
                } else {
                    $('#nTrainerWrapSelect').addClass('d-none');
                    $('#nTrainerWrapInput').removeClass('d-none');
                    $('#nTrainerName').val($('#nTrainerNameInput').val() || '');
                    $('#nTrainerNik').val(''); // external: NIK null
                }
            });

            // Reset form when Add Schedule modal is closed
            $('#addScheduleModal').on('hidden.bs.modal', function() {
                $('#addScheduleForm')[0].reset();
                $('#addParticipants').val(null).trigger('change');
            });

            // Reset reschedule form when modal is closed
            $('#rescheduleModal').on('hidden.bs.modal', function() {
                $('#rescheduleParticipants').val(null).trigger('change');
            });
        });

        // Clear all selected participants
        function clearAllParticipants() {
            $('#editParticipantsSelect').val(null).trigger('change');
            updateSelectedCount();
        }

        // Update Participants — staged (DOM only, saved on Save click)
        function submitUpdateParticipants() {
            var selectedNiks = $('#editParticipantsSelect').val();

            if (!selectedNiks || selectedNiks.length == 0) {
                Swal.fire({
                    title: 'Error!',
                    text: 'Select at least 1 participant!',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            // Build participant objects from selected options
            var participants = [];
            selectedNiks.forEach(function(nik) {
                var optText = $('#editParticipantsSelect option[value="' + nik + '"]').text();
                var name = optText.replace(/\s*\([^)]*\)\s*$/, '').trim();
                participants.push({
                    nik: nik,
                    name: name
                });
            });

            // Store in pending state
            pendingParticipants = participants;
            markDirty();

            // Update DOM — participant pool badges
            var $poolBody = $('#participantPoolBody');
            $poolBody.empty();
            if (participants.length > 0) {
                var html = '<div class="d-flex flex-wrap gap-2">';
                participants.forEach(function(p) {
                    html += '<span class="badge bg-info text-white px-3 py-2">' + p.name + ' (' + p.nik +
                        ')</span>';
                });
                html += '</div>';
                $poolBody.html(html);
            } else {
                $poolBody.html(
                    '<p class="text-muted text-center mb-0"><i class="fas fa-users-slash me-1"></i> No participants yet</p>'
                );
            }

            // Refresh available participants in Add Schedule modal
            refreshAvailableParticipantsInScheduleModal(participants);

            $('#editParticipantsModal').modal('hide');
            Swal.fire({
                title: 'Participants Staged',
                text: participants.length + ' participant(s) selected. Click Save to apply.',
                icon: 'info',
                timer: 2000,
                showConfirmButton: false,
                confirmButtonColor: '#028284'
            });
        }

        /** Rebuild participant options in Add Schedule modal based on current pending pool */
        function refreshAvailableParticipantsInScheduleModal(participants) {
            var $select = $('#addParticipants');
            if (!$select.length) return;

            var usedNiks = scheduledNiksInDb.slice();
            pendingSchedules.forEach(function(s) {
                usedNiks = usedNiks.concat(s.niks);
            });

            if ($select.hasClass('select2-hidden-accessible')) $select.select2('destroy');
            $select.empty();
            var hasOptions = false;
            participants.forEach(function(p) {
                if (usedNiks.indexOf(p.nik) === -1) {
                    $select.append('<option value="' + p.nik + '">' + p.name + ' (' + p.nik + ')</option>');
                    hasOptions = true;
                }
            });
            $select.select2({
                placeholder: 'Select participants...',
                allowClear: true,
                dropdownParent: $('#addScheduleModal'),
                width: '100%'
            });

            if (!hasOptions) {
                $('#addScheduleNoParticipants').removeClass('d-none');
                $('#addScheduleParticipantWrap').addClass('d-none');
                $('#btnSubmitAddSchedule').prop('disabled', true);
            } else {
                $('#addScheduleNoParticipants').addClass('d-none');
                $('#addScheduleParticipantWrap').removeClass('d-none');
                $('#btnSubmitAddSchedule').prop('disabled', false);
            }
        }

        // =============================================
        // INLINE DETAIL FUNCTIONS (1 TNA = 1 Detail)
        // =============================================

        // Submit Add Detail (inline form, belum ada detail)
        function submitAddDetailInline() {
            var problemDesc = $('#nProblemDesc').val();
            var proposedTrn = $('#nProposedTrn').val();
            var institution = $('#nInstitution').val();
            // Sync hidden field sebelum baca
            if (institution === 'external') {
                $('#nTrainerName').val($('#nTrainerNameInput').val() || '');
                $('#nTrainerNik').val('');
            } else {
                $('#nTrainerName').val($('#nTrainerNameSelect').val() || '');
                var selectedNik = $('#nTrainerNameSelect').find('option:selected').data('nik') || '';
                $('#nTrainerNik').val(selectedNik);
            }
            var trainerName = $('#nTrainerName').val();
            var trainerNik = $('#nTrainerNik').val();
            var trnMethod = $('#nTrnMethod').val();

            if (!problemDesc || !proposedTrn) {
                Swal.fire({
                    title: 'Error!',
                    text: 'Problem Description dan Proposed Training harus diisi!',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            $.ajax({
                url: '{{ url('trstna/add-detail') }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    tna_id: encryptedId,
                    problem_desc: problemDesc,
                    proposed_trn: proposedTrn,
                    institution_name: institution,
                    trainer_name: trainerName,
                    trainer_nik: trainerNik,
                    trn_method: trnMethod
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            title: 'Success!',
                            text: response.message + ' (will be visible after Save)',
                            icon: 'success',
                            confirmButtonColor: '#028284'
                        });
                    }
                },
                error: function(xhr) {
                    Swal.fire({
                        title: 'Error!',
                        text: xhr.responseJSON?.error || 'Terjadi kesalahan',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }

        // Enable edit mode pada form read-only
        function enableEditDetail() {
            $('#fProblemDesc').prop('readonly', false);
            $('#fProposedTrn').prop('readonly', false);
            $('#fInstitution').prop('disabled', false);
            $('#fTrnMethod').prop('readonly', false);
            // Trainer: show edit controls
            $('#fTrainerView').addClass('d-none');
            var fInst = $('#fInstitution').val();
            if (fInst === 'external') {
                $('#fTrainerWrapInput').removeClass('d-none');
                // Sync hidden field dengan input text
                $('#fTrainerName').val($('#fTrainerNameInput').val() || '');
                $('#fTrainerNik').val(''); // external: NIK null
            } else {
                $('#fTrainerWrapSelect').removeClass('d-none');
                // Sync hidden field dengan select + NIK
                $('#fTrainerName').val($('#fTrainerNameSelect').val() || '');
                var selectedNik = $('#fTrainerNameSelect').find('option:selected').data('nik') || '';
                $('#fTrainerNik').val(selectedNik);
            }
            initTrainerSelect2Safe();
            $('#detailEditActions').removeClass('d-none');
            $('#btnEditDetail').addClass('d-none');
        }

        // Cancel edit — kembalikan ke read-only
        function cancelEditDetail() {
            $('#fProblemDesc').prop('readonly', true);
            $('#fProposedTrn').prop('readonly', true);
            $('#fInstitution').prop('disabled', true);
            $('#fTrnMethod').prop('readonly', true);
            // Trainer: hide edit, show view
            $('#fTrainerView').removeClass('d-none');
            $('#fTrainerWrapSelect').addClass('d-none');
            $('#fTrainerWrapInput').addClass('d-none');
            $('#detailEditActions').addClass('d-none');
            $('#btnEditDetail').removeClass('d-none');
        }

        // Submit Update Detail (inline)
        function submitUpdateDetailInline() {
            var detailId = $('#detailId').val();
            var problemDesc = $('#fProblemDesc').val();
            var proposedTrn = $('#fProposedTrn').val();
            var institution = $('#fInstitution').val();
            // Sync hidden field sebelum baca — pastikan value terkini
            if (institution === 'external') {
                $('#fTrainerName').val($('#fTrainerNameInput').val() || '');
                $('#fTrainerNik').val('');
            } else {
                $('#fTrainerName').val($('#fTrainerNameSelect').val() || '');
                var selectedNik = $('#fTrainerNameSelect').find('option:selected').data('nik') || '';
                $('#fTrainerNik').val(selectedNik);
            }
            var trainerName = $('#fTrainerName').val();
            var trainerNik = $('#fTrainerNik').val();
            var trnMethod = $('#fTrnMethod').val();

            if (!problemDesc || !proposedTrn) {
                Swal.fire({
                    title: 'Error!',
                    text: 'Problem Description dan Proposed Training harus diisi!',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            $.ajax({
                url: '{{ url('trstna/update-detail') }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    detail_id: detailId,
                    problem_desc: problemDesc,
                    proposed_trn: proposedTrn,
                    institution_name: institution,
                    trainer_name: trainerName,
                    trainer_nik: trainerNik,
                    trn_method: trnMethod
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            title: 'Success!',
                            text: response.message + ' (will be visible after Save)',
                            icon: 'success',
                            confirmButtonColor: '#028284'
                        });
                    }
                },
                error: function(xhr) {
                    Swal.fire({
                        title: 'Error!',
                        text: xhr.responseJSON?.error || 'Terjadi kesalahan',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }

        // Approve HRD
        function approveHrd() {
            Swal.fire({
                title: 'Approval Confirmation',
                text: 'Are you sure you want to approve as HRD?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes, Approve',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ url('trstna/approve-hrd') }}',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: encryptedId
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    title: 'Success!',
                                    text: response.message,
                                    icon: 'success',
                                    confirmButtonColor: '#028284'
                                }).then(() => location.reload());
                            }
                        },
                        error: function(xhr) {
                            Swal.fire({
                                title: 'Error!',
                                text: xhr.responseJSON?.error || 'An error occurred',
                                icon: 'error',
                                confirmButtonColor: '#028284'
                            });
                        }
                    });
                }
            });
        }

        // Approve Atasan
        function approveAtasan() {
            Swal.fire({
                title: 'Approval Confirmation',
                html: '<p>Make sure you have obtained the signature from the Direct Supervisor on the printed TNA form.</p>',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Signed',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ url('trstna/approve-atasan') }}',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: encryptedId
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    title: 'Success!',
                                    text: response.message,
                                    icon: 'success',
                                    confirmButtonColor: '#028284'
                                }).then(() => location.reload());
                            }
                        },
                        error: function(xhr) {
                            Swal.fire({
                                title: 'Error!',
                                text: xhr.responseJSON?.error || 'An error occurred',
                                icon: 'error',
                                confirmButtonColor: '#028284'
                            });
                        }
                    });
                }
            });
        }

        // Reject HRD
        function rejectHrd() {
            Swal.fire({
                title: 'Reject HRD Approval',
                html: '<p>Are you sure you want to reject this TNA?</p>',
                input: 'textarea',
                inputLabel: 'Rejection Reason',
                inputPlaceholder: 'Enter rejection reason...',
                inputAttributes: {
                    'aria-label': 'Rejection Reason'
                },
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Reject',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#d33',
                inputValidator: (value) => {
                    if (!value) {
                        return 'Rejection reason is required!'
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ url('trstna/reject-hrd') }}',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: encryptedId,
                            reason: result.value
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    title: 'Success!',
                                    text: response.message,
                                    icon: 'success',
                                    confirmButtonColor: '#028284'
                                }).then(() => location.reload());
                            }
                        },
                        error: function(xhr) {
                            Swal.fire({
                                title: 'Error!',
                                text: xhr.responseJSON?.error || 'An error occurred',
                                icon: 'error',
                                confirmButtonColor: '#028284'
                            });
                        }
                    });
                }
            });
        }

        // Reject Atasan
        function rejectAtasan() {
            Swal.fire({
                title: 'Reject Supervisor Approval',
                html: '<p>Are you sure you want to reject this TNA on behalf of the Supervisor?</p>',
                input: 'textarea',
                inputLabel: 'Rejection Reason',
                inputPlaceholder: 'Enter rejection reason...',
                inputAttributes: {
                    'aria-label': 'Rejection Reason'
                },
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Reject',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#d33',
                inputValidator: (value) => {
                    if (!value) {
                        return 'Rejection reason is required!'
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ url('trstna/reject-atasan') }}',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: encryptedId,
                            reason: result.value
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    title: 'Success!',
                                    text: response.message,
                                    icon: 'success',
                                    confirmButtonColor: '#028284'
                                }).then(() => location.reload());
                            }
                        },
                        error: function(xhr) {
                            Swal.fire({
                                title: 'Error!',
                                text: xhr.responseJSON?.error || 'An error occurred',
                                icon: 'error',
                                confirmButtonColor: '#028284'
                            });
                        }
                    });
                }
            });
        }

        // Add Schedule — staged (DOM only, saved on Save click)
        function submitAddSchedule() {
            var form = $('#addScheduleForm');
            var date = form.find('input[name="tna_date"]').val();
            var selectedNiks = $('#addParticipants').val();

            if (!date || !selectedNiks || selectedNiks.length == 0) {
                Swal.fire({
                    title: 'Error!',
                    text: 'Date and participants are required!',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            // Validate: date must be >= today
            var today = new Date();
            today.setHours(0, 0, 0, 0);
            var selectedDate = new Date(date);
            if (selectedDate < today) {
                Swal.fire({
                    title: 'Invalid Date!',
                    text: 'Schedule date must be today or in the future.',
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            // Duplicate check against DB-scheduled + already-pending NIKs
            var usedNiks = scheduledNiksInDb.slice();
            pendingSchedules.forEach(function(s) {
                usedNiks = usedNiks.concat(s.niks);
            });
            var duplicates = selectedNiks.filter(function(n) {
                return usedNiks.indexOf(n) !== -1;
            });
            if (duplicates.length > 0) {
                Swal.fire({
                    title: 'Duplicate Participants',
                    text: 'Some participants are already scheduled: ' + duplicates.join(', '),
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            // Build name list for display
            var names = [];
            selectedNiks.forEach(function(nik) {
                var optText = $('#addParticipants option[value="' + nik + '"]').text();
                names.push(optText.replace(/\s*\([^)]*\)\s*$/, '').trim());
            });

            // Store in pending state
            pendingSchedules.push({
                tna_date: date,
                niks: selectedNiks,
                names: names
            });
            markDirty();

            // Append row to schedule table DOM
            var rowIndex = $('#scheduleTable tbody tr.schedule-row').length +
                $('#scheduleTable tbody tr.pending-schedule-row').length + 1;
            var badgesHtml = names.map(function(n) {
                return '<span class="badge bg-secondary me-1 mb-1">' + n + '</span>';
            }).join('');
            var dateFormatted = new Date(date).toLocaleDateString('id-ID', {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });

            $('#scheduleTable tbody tr.empty-schedule-row').remove();
            $('#scheduleTable tbody').append(
                '<tr class="pending-schedule-row table-warning">' +
                '<td>' + rowIndex + '</td>' +
                '<td>' + dateFormatted +
                ' <span class="badge bg-warning text-white ms-1"><i class="fas fa-clock me-1"></i>Pending</span>' +
                '</td>' +
                '<td>' + badgesHtml + '</td>' +
                '<td><span class="badge bg-secondary">Active</span></td>' +
                '<td><button type="button" class="btn btn-sm btn-outline-danger" onclick="removePendingSchedule(this, \'' +
                date + '\')" title="Remove"><i class="fas fa-trash"></i></button></td>' +
                '</tr>'
            );

            // Refresh available participants for next schedule
            var currentPool = pendingParticipants !== null ? pendingParticipants :
                @json(collect($participant_pool)->map(fn($p) => ['nik' => $p['nik'], 'name' => $p['name']]));
            refreshAvailableParticipantsInScheduleModal(currentPool);

            $('#addScheduleModal').modal('hide');
            $('#addScheduleForm')[0].reset();
            $('#addParticipants').val(null).trigger('change');

            Swal.fire({
                title: 'Schedule Staged',
                text: 'Schedule for ' + dateFormatted + ' added. Click Save to apply.',
                icon: 'info',
                timer: 2000,
                showConfirmButton: false,
                confirmButtonColor: '#028284'
            });
        }

        function removePendingSchedule(btn, date) {
            pendingSchedules = pendingSchedules.filter(function(s) {
                return s.tna_date !== date;
            });
            $(btn).closest('tr').remove();
            // Re-number rows
            var i = 1;
            $('#scheduleTable tbody tr:not(.empty-schedule-row)').each(function() {
                $(this).find('td:first').text(i++);
            });
            if ($('#scheduleTable tbody tr').length === 0) {
                $('#scheduleTable tbody').append(
                    '<tr class="empty-schedule-row"><td colspan="5" class="text-center text-muted py-4">' +
                    '<i class="fas fa-calendar-times fa-2x mb-2 d-block"></i><p class="mb-0">No schedules yet</p></td></tr>'
                );
            }
            if (!hasUnsavedChanges()) {
                $('#unsavedBanner').addClass('d-none');
                isDirty = false;
            }
            var currentPool = pendingParticipants !== null ? pendingParticipants :
                @json(collect($participant_pool)->map(fn($p) => ['nik' => $p['nik'], 'name' => $p['name']]));
            refreshAvailableParticipantsInScheduleModal(currentPool);
        }

        // Open Reschedule Modal
        function openRescheduleModal(scheduleId) {
            $.ajax({
                url: '{{ url('trstna/get-schedule') }}',
                type: 'GET',
                data: {
                    schedule_id: scheduleId
                },
                success: function(response) {
                    if (response.success) {
                        $('#rescheduleId').val(response.data.id);
                        $('#rescheduleDate').val(response.data.tna_date);
                        // Set Select2 values properly
                        $('#rescheduleParticipants').val(response.data.participants).trigger('change');
                        $('#rescheduleModal').modal('show');
                    }
                },
                error: function(xhr) {
                    Swal.fire({
                        title: 'Error!',
                        text: xhr.responseJSON?.error || 'An error occurred',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }

        // Submit Reschedule
        function submitReschedule() {
            var scheduleId = $('#rescheduleId').val();
            var date = $('#rescheduleDate').val();
            var participants = $('#rescheduleParticipants').val();

            if (!date || !participants || participants.length == 0) {
                Swal.fire({
                    title: 'Error!',
                    text: 'Date and participants are required!',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            $.ajax({
                url: '{{ url('trstna/reschedule') }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    schedule_id: scheduleId,
                    tna_date: date,
                    nik: participants
                },
                success: function(response) {
                    if (response.success) {
                        $('#rescheduleModal').modal('hide');
                        Swal.fire({
                            title: 'Success!',
                            text: response.message + ' (will be visible after Save)',
                            icon: 'success',
                            confirmButtonColor: '#028284'
                        });
                    }
                },
                error: function(xhr) {
                    Swal.fire({
                        title: 'Error!',
                        text: xhr.responseJSON?.error || 'An error occurred',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }

        // Complete Schedule
        function completeSchedule(scheduleId) {
            Swal.fire({
                title: 'Confirmation',
                text: 'Mark this schedule as completed?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes, Complete',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#28a745'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ url('trstna/complete-schedule') }}',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            schedule_id: scheduleId
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    title: 'Success!',
                                    text: response.message + ' (will be visible after Save)',
                                    icon: 'success',
                                    confirmButtonColor: '#028284'
                                });
                            }
                        },
                        error: function(xhr) {
                            Swal.fire({
                                title: 'Error!',
                                text: xhr.responseJSON?.error || 'An error occurred',
                                icon: 'error',
                                confirmButtonColor: '#028284'
                            });
                        }
                    });
                }
            });
        }

        // Delete Schedule
        function deleteSchedule(scheduleId) {
            Swal.fire({
                title: 'Delete Confirmation',
                text: 'Are you sure you want to delete this schedule?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Delete',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#d33'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ url('trstna/delete-schedule') }}',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            schedule_id: scheduleId
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    title: 'Success!',
                                    text: response.message + ' (will be visible after Save)',
                                    icon: 'success',
                                    confirmButtonColor: '#028284'
                                });
                            }
                        },
                        error: function(xhr) {
                            Swal.fire({
                                title: 'Error!',
                                text: xhr.responseJSON?.error || 'An error occurred',
                                icon: 'error',
                                confirmButtonColor: '#028284'
                            });
                        }
                    });
                }
            });
        }

        // Convert to TRN
        function convertToTrn(id) {
            id = id || encryptedId;

            Swal.fire({
                title: 'Convert TNA to TRN',
                html: `
                    <div class="text-start">
                        <p class="mb-2">You will be redirected to the TRN form with the TNA data automatically filled in.</p>
                        <ul class="mb-0 ps-3">
                            <li>TNA ID and Training Name will be pre-filled</li>
                            <li>Schedule data from TNA will be transferred to the TRN form</li>
                        </ul>
                    </div>
                `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Convert',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#2ecc71'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location = '{{ url('trstrn/add') }}?from_tna=' + encodeURIComponent(id);
                }
            });
        }
    </script>
@endpush