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

@section('content')
    <style>
        html body #createTrnTab>.moving-tab,
        html body #createTrnTab .moving-tab {
            display: none !important;
            visibility: hidden !important;
        }

        html body ul#createTrnTab .nav-link {
            background: transparent !important;
            color: #67748e !important;
            font-weight: 600;
            padding: 10px 24px;
            border-radius: 0.5rem;
            border: none !important;
            box-shadow: none !important;
        }

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

        html body ul#createTrnTab .nav-link.active {
            color: #fff !important;
            background: linear-gradient(87deg, #028284 0, #01a6a9 100%) !important;
            box-shadow: 0 4px 12px rgba(2, 130, 132, 0.35) !important;
        }

        html body ul#createTrnTab .nav-link.active .badge {
            color: #fff !important;
            background-color: rgba(255, 255, 255, 0.25) !important;
        }
    </style>
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card shadow-lg mb-3">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center gap-2">
                            <button type="button" class="btn btn-secondary mb-0" onclick="history.back()">
                                <i class="fas fa-arrow-left me-2"></i> Back
                            </button>
                            <button type="button" class="btn btn-primary mb-0" id="btnSubmit" onclick="submitForm()">
                                <i class="fas fa-save me-2"></i> Update
                            </button>
                            @if ($can_transfer_participant ?? false)
                                <button type="button" class="btn btn-warning mb-0" id="btnTransfer">
                                    <i class="fas fa-exchange-alt me-2"></i> Transfer Participant
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="card bg-transparent shadow-none mb-4">
                    {{-- Header --}}
                    <div class="card-header d-none">
                        <h6 class="mb-2">Add TRN</h6>

                    </div>

                    <div class="card-body p-0">
                        <form id="trnForm">
                            @csrf
                            <input type="hidden" id="edit_trn_id" value="{{ $edit_trn_id ?? '' }}">
                            <input type="hidden" id="can_transfer_participant"
                                value="{{ $can_transfer_participant ?? false ? 1 : 0 }}">
                            <input type="hidden" id="is_convert_flow" value="{{ $is_convert_flow ?? 0 }}">
                            <input type="hidden" id="can_manage"
                                value="{{ $can_manage ?? false ? 1 : 0 }}">

                            @if ($is_convert_flow ?? 0)
                                <div class="alert alert-info d-flex align-items-center mb-3" role="alert">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <span>This TRN is being created from an approved TNA. Header and schedule data have been
                                        prefilled.</span>
                                </div>
                            @endif

                            <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="createTrnTab" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link active" id="step1Label" data-bs-toggle="pill"
                                                data-bs-target="#step1" type="button" role="tab" aria-controls="step1"
                                                aria-selected="true">
                                                <i class="fas fa-file-alt me-1"></i> Header
                                            </button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="step2Label" data-bs-toggle="pill"
                                                data-bs-target="#step2" type="button" role="tab" aria-controls="step2"
                                                aria-selected="false">
                                                <i class="fas fa-calendar me-1"></i> Schedule
                                                <span class="badge"
                                                    id="trnScheduleCount">{{ count($prefill['schedules'] ?? []) }}</span>
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="tab-content" id="createTrnTabContent">
                                {{-- Step 1: TRN --}}
                                <div id="step1" class="tab-pane fade show active card shadow-sm p-4" role="tabpanel"
                                    aria-labelledby="step1Label" tabindex="0">
                                    <div class="card-header bg-transparent p-0 mb-4">
                                        <h6 class="mb-0"><i class="fas fa-file-alt me-2 text-primary"></i>TRN Header</h6>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label">ID TNA <span class="text-danger">*</span></label>
                                            @if (isset($trn))
                                                <input type="text" name="disp_id_trs_tna_header"
                                                    value="{{ ($prefill['id_trs_tna_header'] ?? '') .
                                                        ' - ' .
                                                        ($prefill['nama_trn'] ?? '') .
                                                        ' - (' .
                                                        (!empty($prefill['estimated_date']) ? date('d-m-Y', strtotime($prefill['estimated_date'])) : '-') .
                                                        ')' }}"
                                                    class="form-control" readonly>

                                                <input type="hidden" name="id_trs_tna_header" id="id_trs_tna_header"
                                                    value="{{ $prefill['id_trs_tna_header'] ?? '' }}">
                                            @else
                                                <select class="form-control select2" id="id_trs_tna_header"
                                                    name="id_trs_tna_header" required>

                                                    <option value=""></option>

                                                    @foreach ($id_tna_list as $tna)
                                                        <option value="{{ $tna->value }}"
                                                            data-training-name="{{ $tna->name_trn }}"
                                                            data-proposed-training="{{ $tna->proposed_trn ?? '' }}"
                                                            {{ ($prefill['id_trs_tna_header'] ?? '') == $tna->value ? 'selected' : '' }}>

                                                            {{ $tna->name }}
                                                            ({{ $tna->name_trn }})
                                                            ({{ $tna->month_estimation ? date('d-m-Y', strtotime($tna->month_estimation)) : '-' }})

                                                        </option>
                                                    @endforeach

                                                </select>
                                            @endif
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label">Training Name <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="nama_trn" name="nama_trn"
                                                value="{{ $prefill['nama_trn'] ?? '' }}" required>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label">Target Training</label>
                                            <textarea class="form-control" id="target_trn" name="target_trn" rows="3">{{ $prefill['proposed_trn'] ?? '' }}</textarea>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 mb-3">
                                            <label class="form-label">Cost</label>

                                            <div class="input-group">
                                                <span class="input-group-text">Rp</span>

                                                <!-- yang dilihat user -->
                                                <input type="text" class="form-control rupiah-input"
                                                    id="biaya_display" placeholder="0" autocomplete="off"
                                                    data-target="biaya">

                                                <!-- yang dikirim ke controller -->
                                                <input type="hidden" id="biaya" name="biaya"
                                                    value="{{ $prefill['biaya'] ?? 0 }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label">Diusulkan</label>
                                            <select class="form-control select2-single" id="diusulkan" name="diusulkan">
                                                <option value=""> </option>
                                                @foreach ($approvers as $approver)
                                                    <option value="{{ $approver->value }}"
                                                        data-supervisor-nik="{{ $approver->supervisor_nik }}"
                                                        data-supervisor-name="{{ $approver->supervisor_name }}"
                                                        {{ (string) ($prefill['diusulkan'] ?? '') === (string) $approver->value ? 'selected' : '' }}>
                                                        {{ $approver->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label">Diketahui</label>
                                            <select class="form-control select2-single" id="diketahui" name="diketahui">
                                                <option value=""></option>
                                                @foreach ($approvers as $approver)
                                                    <option value="{{ $approver->value }}"
                                                        data-supervisor-nik="{{ $approver->supervisor_nik }}"
                                                        data-supervisor-name="{{ $approver->supervisor_name }}"
                                                        {{ (string) ($prefill['diketahui'] ?? '') === (string) $approver->value ? 'selected' : '' }}>
                                                        {{ $approver->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label">Disetujui</label>
                                            <select class="form-control select2-single" id="disetujui" name="disetujui">
                                                <option value=""></option>
                                                @foreach ($approvers as $approver)
                                                    <option value="{{ $approver->value }}"
                                                        data-supervisor-nik="{{ $approver->supervisor_nik }}"
                                                        data-supervisor-name="{{ $approver->supervisor_name }}"
                                                        {{ (string) ($prefill['disetujui'] ?? '') === (string) $approver->value ? 'selected' : '' }}>
                                                        {{ $approver->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                </div>

                                {{-- Step 2: Schedule --}}
                                <div id="step2" class="tab-pane fade card shadow-sm" role="tabpanel"
                                    aria-labelledby="step2Label" tabindex="0">
                                    <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>
                                        <button type="button"
                                            class="btn btn-success btn-sm mb-0 {{ $can_manage ?? false ? '' : 'd-none' }}"
                                            id="btnAddSchedule" onclick="addScheduleItem()">
                                            <i class="fas fa-plus me-1"></i>Add Schedule
                                        </button>
                                    </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.</small>
                                                </div>
                                                <div class="d-flex align-items-center gap-2">
                                                    <span class="badge bg-primary text-white"
                                                        id="trnParticipantAllocationCount">0 / 0 scheduled</span>
                                                </div>
                                            </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="trnUnassignedParticipantCount">0</span>
                                            </div>
                                            <div class="schedule-participant-dropzone unassigned-participant-pool"
                                                id="trnParticipantAllocationStatus" data-drop-target="unassigned">
                                                <small class="text-muted">Select a TNA with participants first.</small>
                                            </div>
                                        </div>

                                        <div id="scheduleContainer">
                                            @php
                                                $displaySchedules = collect($prefill['schedules'] ?? []);
                                                if ($displaySchedules->isEmpty()) {
                                                    $displaySchedules = collect([[]]);
                                                }
                                            @endphp
                                            @foreach ($displaySchedules as $idx => $prefillSchedule)
                                                <div class="schedule-item border rounded mb-3"
                                                    data-schedule-index="{{ $idx }}">
                                                    <input type="hidden" class="schedule-id"
                                                        name="schedules[{{ $idx }}][id]"
                                                        value="{{ $prefillSchedule['id'] ?? '' }}">
                                                    <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="#trnScheduleBody{{ $idx }}"
                                                            aria-expanded="true">
                                                            <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-title">Schedule
                                                                    {{ $idx + 1 }}</span>
                                                                <span class="schedule-header-summary">
                                                                    <span><i class="far fa-calendar-alt"></i><span
                                                                            class="schedule-summary-date">-</span></span>
                                                                    <span
                                                                        class="schedule-summary-separator">&middot;</span>
                                                                    <span><i class="far fa-clock"></i><span
                                                                            class="schedule-summary-time">-</span></span>
                                                                    <span
                                                                        class="schedule-summary-separator">&middot;</span>
                                                                    <span><i class="fas fa-hourglass-half"></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 schedule-participant-count">{{ count($prefillSchedule['participants'] ?? []) }}
                                                                Participants</span>
                                                            <button type="button"
                                                                class="btn btn-outline-danger btn-sm mb-0 remove-schedule-button {{ $can_manage ?? false ? '' : 'd-none' }}"
                                                                onclick="removeScheduleItem(this)"
                                                                title="Remove schedule"><i
                                                                    class="fas fa-trash"></i></button>
                                                        </div>
                                                    </div>
                                                    <div class="collapse show schedule-create-body"
                                                        id="trnScheduleBody{{ $idx }}">
                                                        <div class="row g-3 align-items-end p-3 pt-0">
                                                            <div class="col-md-3">
                                                                <label class="form-label">Date <span
                                                                        class="text-danger">*</span></label>
                                                                <input type="date" class="form-control datepicker"
                                                                    name="schedules[{{ $idx }}][jadwal_trn]"
                                                                    value="{{ $prefillSchedule['jadwal_trn'] ?? '' }}"
                                                                    required>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <label class="form-label">Start Time <span
                                                                        class="text-danger">*</span></label>
                                                                <input type="time" class="form-control schedule-start"
                                                                    name="schedules[{{ $idx }}][time_start]"
                                                                    value="{{ $prefillSchedule['time_start'] ?? '' }}"
                                                                    required>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <label class="form-label">End Time <span
                                                                        class="text-danger">*</span></label>
                                                                <input type="time" class="form-control schedule-end"
                                                                    name="schedules[{{ $idx }}][time_end]"
                                                                    value="{{ $prefillSchedule['time_end'] ?? '' }}"
                                                                    required>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <label class="form-label">Duration</label>
                                                                <div class="input-group">
                                                                    <span class="input-group-text"><i
                                                                            class="fas fa-hourglass-half"></i></span>
                                                                    <input type="hidden" class="schedule-duration"
                                                                        name="schedules[{{ $idx }}][duration]"
                                                                        value="{{ $prefillSchedule['duration'] ?? '' }}"
                                                                        readonly required>
                                                                    <input type="text"
                                                                        class="form-control schedule-duration-display bg-light"
                                                                        readonly tabindex="-1">
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label class="form-label">Place <span
                                                                        class="text-danger">*</span></label>
                                                                <input type="text" class="form-control"
                                                                    name="schedules[{{ $idx }}][place]"
                                                                    value="{{ $prefillSchedule['place'] ?? '' }}"
                                                                    placeholder="Training location" required>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label class="form-label">Trainer <small
                                                                        class="text-muted">(dari TNA)</small></label>
                                                                <select class="form-control schedule-trainer-select"
                                                                    name="schedules[{{ $idx }}][trainer_nik]"
                                                                    {{ $can_manage ?? false ? '' : 'disabled' }}
                                                                    required>
                                                                    <option value=""></option>
                                                                    @foreach ($trainers as $trainer)
                                                                        <option value="{{ $trainer->value }}"
                                                                            {{ (string) ($prefillSchedule['trainer_nik'] ?? '') === (string) $trainer->value ? 'selected' : '' }}>
                                                                            {{ $trainer->value }} - {{ $trainer->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </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 mb-0">Participants <span
                                                                            class="text-danger">*</span></label>
                                                                    <button type="button"
                                                                        class="btn btn-outline-primary btn-sm mb-0 open-trn-schedule-participant-modal {{ $can_manage ?? false ? '' : 'd-none' }}">
                                                                        <i class="fas fa-users me-1"></i>Pilih via Modal
                                                                    </button>
                                                                </div>
                                                                <select
                                                                    name="schedules[{{ $idx }}][participants][]"
                                                                    class="form-control schedule-participants d-none"
                                                                    multiple required>
                                                                    @foreach ($participants as $participant)
                                                                        <option value="{{ $participant->value }}"
                                                                            {{ in_array((string) $participant->value, array_map('strval', $prefillSchedule['participants'] ?? []), true) ? 'selected' : '' }}>
                                                                            {{ $participant->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                                <div class="schedule-participant-dropzone"
                                                                    data-drop-target="schedule"
                                                                    data-schedule-index="{{ $idx }}">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <small class="text-muted"><i class="fas fa-info-circle me-1"></i>A participant
                                            selected in one schedule is automatically unavailable in the other
                                            schedules.</small>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" id="prefillScheduleCount" value="{{ $prefill_schedule_count }}">
    <script type="application/json" id="participantsDataJson">
    @json($participants)
</script>
    <script type="application/json" id="trainersDataJson">
    @json($trainers)
</script>

    <div class="modal fade" id="trnScheduleParticipantsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="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="trnScheduleParticipantModalNumber"></span>
                        </h5>
                        <p class="text-sm text-muted mb-0">Participant yang sudah digunakan pada schedule lain tidak dapat
                            dipilih.</p>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="participant-search-wrap mb-3">
                        <i class="fas fa-search"></i>
                        <input type="search" class="form-control" id="trnScheduleParticipantSearch"
                            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="trnScheduleParticipantModalRows"></tbody>
                        </table>
                    </div>
                    <div class="schedule-modal-empty d-none" id="trnScheduleParticipantEmpty">
                        <i class="fas fa-users mb-2"></i><strong>Participant tidak tersedia</strong>
                        <span>Tidak ada participant yang cocok dengan pencarian.</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <span class="me-auto text-sm font-weight-bold" id="trnScheduleParticipantModalCount">0 participant
                        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="applyTrnScheduleParticipantsBtn">
                        <i class="fas fa-check me-1"></i>Terapkan Participant
                    </button>
                </div>
            </div>
        </div>
    </div>

    @if ($can_transfer_participant ?? false)
        <div class="modal fade" id="transferParticipantModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <div>
                            <h5 class="modal-title mb-1"><i class="fas fa-people-arrows me-2"></i>Transfer Participant
                            </h5>
                            <p class="text-sm text-muted mb-0">Select participants from another TRN to transfer to this
                                schedule when updating.</p>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label fw-bold">Participant <span class="text-danger">*</span></label>
                            <select class="form-control" id="transferParticipantSelect" style="width:100%"></select>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6"><label class="form-label fw-bold">Source TRN <span
                                        class="text-danger">*</span></label><select class="form-control"
                                    id="fromTrnField" style="width:100%"></select></div>
                            <div class="col-md-6"><label class="form-label">Target TRN</label><input class="form-control"
                                    id="targetTrnField" readonly></div>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6"><label class="form-label fw-bold">Source Schedule</label><select
                                    class="form-control" id="transferSourceScheduleSelect" style="width:100%" disabled>
                                    <option value=""></option>
                                </select></div>
                            <div class="col-md-6"><label class="form-label fw-bold">Target Schedule <span
                                        class="text-danger">*</span></label><select class="form-control"
                                    id="transferTargetScheduleSelect" style="width:100%"></select></div>
                            <div class="col-md-6"><label class="form-label">Status Participant</label><input
                                    class="form-control" id="transferParticipantStatus" readonly></div>
                            <div class="col-12"><label class="form-label">Note <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="transferParticipantNote" rows="3" maxlength="255"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary mb-0" data-bs-dismiss="modal">Batal</button>
                        <button type="button" class="btn btn-warning mb-0" id="stageParticipantTransferBtn">
                            <i class="fas fa-arrow-right-arrow-left me-1"></i>Add Transfer
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Loading Modal --}}
    <div class="modal fade" id="loadingModal" tabindex="-1" aria-labelledby="loadingModalLabel" aria-hidden="true"
        data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius: 15px; border: none; background-color: rgb(255, 255, 255);">
                <div class="modal-body text-center py-5">
                    <div class="mb-4">
                        <div class="spinner-border" style="color: #008B8B;" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                    <p class="text-muted mb-0">Processing...</p>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        html body ul#createTrnTab .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#createTrnTab .nav-link:hover {
            color: #028284;
            background-color: rgba(2, 130, 132, 0.08);
        }

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

        html body ul#createTrnTab .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#createTrnTab .nav-link.active .badge {
            background-color: rgba(255, 255, 255, 0.25) !important;
            color: #fff !important;
        }

        .schedule-allocation-board {
            padding: 1rem;
            border: 1px solid #dfe5ec;
            border-radius: .75rem;
            background: #f8fafc;
        }

        .schedule-create-header {
            background: #f8fafc;
            border-radius: .75rem .75rem 0 0;
        }

        .schedule-collapse-toggle {
            display: flex;
            align-items: center;
            gap: .65rem;
            flex: 1;
            padding: 0;
            text-align: left;
            border: 0;
            background: transparent;
        }

        .schedule-chevron {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            color: #028284;
            border-radius: .55rem;
            background: #dcf3f3;
            transition: transform .2s ease;
        }

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

        .schedule-header-copy,
        .schedule-header-summary {
            display: flex;
        }

        .schedule-header-copy {
            flex-direction: column;
            gap: .2rem;
        }

        .schedule-header-summary {
            align-items: center;
            flex-wrap: wrap;
            gap: .35rem;
            color: #67748e;
            font-size: .68rem;
        }

        .schedule-header-summary>span:not(.schedule-summary-separator) {
            display: inline-flex;
            align-items: center;
            gap: .25rem;
        }

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

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

        .remove-schedule-button {
            min-width: 74px;
        }

        .participant-pool-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            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: border-color .15s ease, background-color .15s ease, box-shadow .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 {
            margin-top: .08rem;
            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;
        }

        .participant-search-wrap {
            position: relative;
        }

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

        .participant-search-wrap .form-control {
            padding-left: 2.45rem;
        }

        .schedule-participant-modal-table-wrap {
            overflow: hidden;
            border: 1px solid #dfe5ec;
            border-radius: .7rem;
        }

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

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

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

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

        .schedule-modal-select {
            min-width: 76px;
            padding: .3rem .55rem;
            color: #028284;
            font-size: .66rem;
            font-weight: 700;
            border: 1px solid #9bd5d6;
            border-radius: 999px;
            background: #fff;
        }

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

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

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

        .schedule-modal-empty {
            flex-direction: column;
            align-items: center;
            padding: 2rem;
            color: #8392ab;
            text-align: center;
        }

        .schedule-modal-empty:not(.d-none) {
            display: flex;
        }

        /* Argon adds a sliding indicator to nav-pills; the active tab is the indicator here. */
        html body ul#createTrnTab>.moving-tab {
            display: none !important;
        }

        .card {
            border-radius: 0.75rem;
            border: none;
        }

        .form-label {
            margin-bottom: 0.5rem;
            color: #344767;
            font-size: 0.875rem;
            font-weight: 600;
        }

        .form-control,
        .form-select {
            border: 1px solid #d2d6da;
            border-radius: 0.5rem;
            padding: 0.625rem 0.75rem;
            font-size: 0.875rem;
            transition: all 0.2s ease;
        }

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

        .select2-container--default .select2-selection--single,
        .select2-container--default .select2-selection--multiple {
            border: 1px solid #d2d6da !important;
            border-radius: 0.5rem !important;
            min-height: 40px;
            padding: 2px 8px;
        }

        #scheduleContainer .schedule-item {
            width: 100%;
        }

        #scheduleContainer .schedule-item>.card {
            border: 1px solid #e9ecef;
            box-shadow: none;
        }

        .trn-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;
        }

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

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

        #successModal .modal-content {
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
        }

        #successModal svg {
            animation: checkmark 0.5s ease-in-out;
        }

        @keyframes checkmark {
            0% {
                transform: scale(0);
                opacity: 0;
            }

            50% {
                transform: scale(1.2);
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        #loadingModal .modal-content {
            background-color: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }

        #loadingModal .spinner-border {
            width: 3rem;
            height: 3rem;
            border-width: 0.3em;
        }
    </style>
@endpush

@push('js')
    <script>
        $(document).on('shown.bs.tab', '#createTrnTab button[data-bs-toggle="pill"]', function(event) {
            if ($(event.target).attr('data-bs-target') !== '#step2') return;

            $('#step2 .select2').each(function() {
                $(this).next('.select2-container').css('width', '100%');
            });
            refreshAllScheduleParticipantOptions();
        });

        // Helper function to reinitialize a specific select2
        function reinitializeSelect2(selectElement) {
            try {
                if (!selectElement || selectElement.length === 0) return;

                // Save current values before destroying
                const currentValues = $(selectElement).val();

                // Destroy existing Select2
                if ($(selectElement).data('select2')) {
                    $(selectElement).select2('destroy');
                }

                // Reinitialize Select2
                $(selectElement).select2({
                    placeholder: "Pilih Participant",
                    allowClear: true,
                    width: '100%',
                    closeOnSelect: false
                });

                // Restore values
                if (currentValues && currentValues.length > 0) {
                    $(selectElement).val(currentValues);
                }

                console.log('Select2 reinitialized for', selectElement.attr('name'));
            } catch (e) {
                console.error('Error reinitializing Select2:', e);
            }
        }

        // Helper function to re-attach event listeners to a select
        function attachSelectListeners(selectElement) {
            $(selectElement)
                .off('change.trnAllocation')
                .on('change.trnAllocation', refreshTrnParticipantAllocation);
        }
        let debounceRefreshTimer = null;
        let currentStep = 1;
        let scheduleCount = 0;
        let participantsData = [];
        let trainersData = [];
        let transferParticipantOptions = [];
        let transferEmployees = [];
        let pendingParticipantTransfers = [];
        const canManageOutsideTna = document.getElementById('can_manage')?.value === '1';
        let isUpdatingParticipants = false; // Prevent infinite recursion

        // Get prefill data from HTML
        const prefillScheduleCount = parseInt(document.getElementById('prefillScheduleCount')?.value || '0', 10);
        scheduleCount = Math.max(prefillScheduleCount, 1) - 1;
        participantsData = JSON.parse(document.getElementById('participantsDataJson')?.textContent || '[]');
        trainersData = JSON.parse(document.getElementById('trainersDataJson')?.textContent || '[]');

        function loadTransferParticipantOptions() {
            $('#transferParticipantSelect').empty().append('<option value="">Loading...</option>');
            $('#transferSourceScheduleSelect').empty().append('<option value=""></option>').prop('disabled', true);
            $('#transferTargetScheduleSelect').empty().append('<option value="">Loading...</option>');
            $('#transferParticipantStatus').val('');
            $('#fromTrnField').val('');
            $('#fromTrnField').prop('disabled', true);
            $('#transferParticipantNote').val('');
            bootstrap.Modal.getOrCreateInstance(document.getElementById('transferParticipantModal')).show();
            $('#targetTrnField').val($('#edit_trn_id').val());

            $.get('{{ route('trn.participant.transfers.options') }}', {
                target_trn_id: $('#edit_trn_id').val()
            }).done(function(response) {
                transferParticipantOptions = response.data || [];
                transferEmployees = response.employees || [];
                const pendingNiks = new Set(pendingParticipantTransfers.map(item => String(item.nik)));
                const participantOptions = ['<option value=""></option>'].concat(transferEmployees
                    .filter(item => !pendingNiks.has(String(item.nik)))
                    .map(item =>
                        `<option value="${escapeParticipantText(item.nik)}" ${item.transfer_blocked ? 'disabled' : ''}>${escapeParticipantText(item.nik)} - ${escapeParticipantText(item.name || '-')}${item.transfer_blocked ? ' (gunakan Reschedule)' : ''}</option>`
                    ));

                const scheduleOptions = getCurrentScheduleOptions();

                if ($('#transferParticipantSelect').hasClass('select2-hidden-accessible')) {
                    $('#transferParticipantSelect').select2('destroy');
                }
                $('#transferParticipantSelect').val('').html(participantOptions.join(''));
                $('#transferTargetScheduleSelect').html(scheduleOptions.join(''));
                $('#fromTrnField').html('<option value=""></option>');
                $('#transferParticipantSelect').select2({
                    dropdownParent: $('#transferParticipantModal'),
                    placeholder: 'Pilih participant...',
                    width: '100%'
                });
            }).fail(function(xhr) {
                bootstrap.Modal.getOrCreateInstance(document.getElementById('transferParticipantModal')).hide();
                Swal.fire('Tidak dapat memuat participant', xhr.responseJSON?.message || 'Terjadi kesalahan.',
                    'error');
            });
        }

        $(document).on('click', '#btnTransfer', loadTransferParticipantOptions);

        $(document).on('change', '#transferParticipantSelect', function() {
            const nik = String(this.value || '');
            const sources = transferParticipantOptions.filter(item => String(item.nik) === nik);
            const sourceTrns = sources.filter((item, index, items) => items.findIndex(candidate =>
                String(candidate.source_trn_id) === String(item.source_trn_id)) === index);
            const sourceOptions = ['<option value=""></option>'].concat(sourceTrns.map(item =>
                `<option value="${escapeParticipantText(item.source_trn_id)}">${escapeParticipantText(item.source_trn_id)} - ${escapeParticipantText(item.source_training_name || '-')}</option>`
            ));
            $('#fromTrnField').html(sourceOptions.join('')).prop('disabled', sourceTrns.length === 0);
            updateSourceScheduleField(nik, '');
            $('#transferParticipantStatus').val(sources.length ?
                `Ada di ${sourceTrns.length} TRN lain; schedule source terdeteksi otomatis.` :
                'Participant tambahan; tidak memiliki source TRN atau source schedule.');
        });

        function updateSourceScheduleField(nik, sourceTrnId) {
            const sourceSchedule = transferParticipantOptions.find(item =>
                String(item.nik) === String(nik) &&
                String(item.source_trn_id) === String(sourceTrnId)
            );
            $('#transferSourceScheduleSelect').html(sourceSchedule ?
                `<option value="${escapeParticipantText(sourceSchedule.source_schedule_id)}">${escapeParticipantText(sourceSchedule.source_date || '-')} - Schedule #${escapeParticipantText(sourceSchedule.source_schedule_id)}</option>` :
                '<option value=""></option>'
            ).prop('disabled', true);
        }

        $(document).on('change', '#fromTrnField', function() {
            updateSourceScheduleField($('#transferParticipantSelect').val(), $(this).val());
        });

        function getCurrentScheduleOptions() {
            const options = ['<option value=""></option>'];
            $('#scheduleContainer .schedule-item').each(function() {
                const item = $(this);
                const scheduleId = String(item.find('.schedule-id').val() || '');
                const scheduleIndex = String(item.data('schedule-index'));
                const date = item.find('input[name*="jadwal_trn"]').val() || '-';
                const start = item.find('.schedule-start').val() || '';
                const end = item.find('.schedule-end').val() || '';
                const place = item.find('input[name*="[place]"]').val() || '-';
                const timeRange = start && end ? ` (${start} - ${end})` : '';
                const value = scheduleId ? scheduleId : `new:${scheduleIndex}`;
                options.push(
                    `<option value="${escapeParticipantText(value)}">${escapeParticipantText(date)}${timeRange} - ${escapeParticipantText(place)}</option>`
                );
            });
            return options;
        }

        $(document).on('click', '#stageParticipantTransferBtn', function() {
            const nik = String($('#transferParticipantSelect').val() || '');
            const sourceTrnId = String($('#fromTrnField').val() || '');
            const sourceScheduleId = String($('#transferSourceScheduleSelect').val() || '');
            const targetScheduleValue = String($('#transferTargetScheduleSelect').val() || '');
            const targetScheduleId = /^\d+$/.test(targetScheduleValue) ? Number(targetScheduleValue) : null;
            const targetScheduleIndex = targetScheduleValue.startsWith('new:') ? Number(targetScheduleValue
                .substring(4)) : null;
            const note = String($('#transferParticipantNote').val() || '').trim();
            const selectedEmployee = transferEmployees.find(item => String(item.nik) === nik);
            const hasSourceTrn = transferParticipantOptions.some(item => String(item.nik) === nik);
            if (selectedEmployee?.transfer_blocked) {
                Swal.fire('Transfer tidak tersedia',
                    'Participant berada pada schedule yang sudah realized. Gunakan fitur reschedule.', 'warning'
                );
                return;
            }
            if (!nik || (!targetScheduleId && targetScheduleIndex === null) || !note || (hasSourceTrn && !
                    sourceTrnId)) {
                Swal.fire('Data belum lengkap',
                    'Pilih participant, Source TRN jika participant memiliki source, schedule tujuan, dan isi note transfer.',
                    'warning');
                return;
            }

            const alreadyPending = pendingParticipantTransfers.some(item => String(item.nik) === nik);
            if (alreadyPending) {
                Swal.fire('Participant sudah dipilih', 'Participant ini sudah ada dalam daftar transfer sementara.',
                    'warning');
                return;
            }

            pendingParticipantTransfers.push({
                target_schedule_id: targetScheduleId,
                target_schedule_index: targetScheduleIndex,
                nik: nik,
                source_trn_id: sourceTrnId || null,
                source_schedule_id: sourceScheduleId || null,
                note: note
            });

            const employee = transferEmployees.find(item => String(item.nik) === nik);
            if (employee && !participantsData.some(item => String(item.value) === nik)) {
                participantsData.push({
                    value: nik,
                    name: employee.name || nik,
                    is_transfer: true
                });
            }

            const targetItem = targetScheduleIndex !== null ?
                $(`#scheduleContainer .schedule-item[data-schedule-index="${targetScheduleIndex}"]`) :
                $(`#scheduleContainer .schedule-item`).filter(function() {
                    return String($(this).find('.schedule-id').val() || '') === String(targetScheduleId);
                }).first();
            if (targetItem && targetItem.length) {
                const participantSelect = targetItem.find('.schedule-participants');
                const selectedNiks = (participantSelect.val() || []).map(String);
                if (!selectedNiks.includes(nik)) selectedNiks.push(nik);
                participantSelect.html(buildParticipantOptions(selectedNiks)).val(selectedNiks);
                refreshAllScheduleParticipantOptions();
            }

            bootstrap.Modal.getOrCreateInstance(document.getElementById('transferParticipantModal')).hide();
            Swal.fire('Transfer ditambahkan', 'Transfer akan diproses saat tombol Update ditekan.', 'info');
        });

        function buildTrainerOptions(selectedNik = '') {
            const selected = String(selectedNik || '');
            return '<option value=""></option>' + trainersData.map(function(trainer) {
                const nik = String(trainer.value);
                return `<option value="${escapeParticipantText(nik)}" ${nik === selected ? 'selected' : ''}>${escapeParticipantText(nik)} - ${escapeParticipantText(trainer.name)}</option>`;
            }).join('');
        }

        function debounceRefreshParticipants() {
            if (debounceRefreshTimer) {
                clearTimeout(debounceRefreshTimer);
            }
            debounceRefreshTimer = setTimeout(function() {
                refreshAllScheduleParticipantOptions();
            }, 300); // Wait 300ms after last change before refreshing
        }

        function buildParticipantOptions(selectedValues = []) {
            const selectedSet = new Set((selectedValues || []).map(String));
            let options = '';

            participantsData.forEach(function(participant) {
                const value = String(participant.value);
                const selected = selectedSet.has(value) ? 'selected' : '';
                options += `<option value="${value}" ${selected}>${participant.name}</option>`;
            });

            return options;
        }

        function refreshAllScheduleParticipantOptions() {
            if (isUpdatingParticipants) return; // Prevent recursion

            isUpdatingParticipants = true;

            try {
                // Simply refresh all schedule items with updated options
                $('.schedule-item').each(function() {
                    refreshScheduleParticipantOptions(this);
                });
            } finally {
                isUpdatingParticipants = false;
                refreshTrnParticipantAllocation();
            }
        }

        function refreshTrnParticipantAllocation() {
            const assigned = new Map();
            $('.schedule-item').each(function() {
                const scheduleItem = $(this);
                const selected = scheduleItem.find('select[name*="participants"]').val() || [];
                const dropzone = scheduleItem.find('[data-drop-target="schedule"]');
                $(this).find('.schedule-participant-count').text(selected.length + ' Participants');
                selected.forEach(function(nik) {
                    assigned.set(String(nik), scheduleItem[0]);
                });
                renderParticipantDropzone(dropzone, selected, true);
            });

            const total = participantsData.length;
            $('#trnParticipantAllocationCount').text(assigned.size + ' / ' + total + ' scheduled');
            const unassigned = participantsData
                .map(participant => String(participant.value))
                .filter(nik => !assigned.has(nik));
            $('#trnUnassignedParticipantCount').text(unassigned.length);

            if (!total) {
                $('#trnParticipantAllocationStatus').html(
                    '<small class="text-muted">Select a TNA with participants first.</small>');
                return;
            }
            renderParticipantDropzone($('#trnParticipantAllocationStatus'), unassigned, false);
        }

        function participantByNik(nik) {
            return participantsData.find(participant => String(participant.value) === String(nik));
        }

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

        function renderParticipantDropzone(dropzone, niks, showRemove) {
            if (!dropzone.length) return;
            if (!niks.length) {
                const message = showRemove ? 'Drop participant di sini' : 'Semua participant sudah terjadwal.';
                dropzone.html(
                    `<div class="schedule-dropzone-empty"><i class="fas fa-hand-pointer"></i><span>${message}</span></div>`
                );
                return;
            }

            dropzone.html(niks.map(function(nik) {
                const participant = participantByNik(nik);
                if (!participant) return '';
                const safeNik = escapeParticipantText(nik);
                const safeName = escapeParticipantText(participant.name);
                const sourceBadge = participant.is_transfer ?
                    '<span class="badge bg-info text-white ms-1">Transfer</span>' :
                    (participant.is_additional ?
                        '<span class="badge bg-warning text-dark ms-1">Additional</span>' : '');
                const removeAdditional = !showRemove && participant.is_additional ?
                    '<button type="button" class="participant-unassign-button participant-remove-additional-button" title="Hapus dari pool"><i class="fas fa-times"></i></button>' :
                    '';
                return `<div class="schedule-participant-chip" draggable="${canManageOutsideTna ? 'true' : 'false'}" data-nik="${safeNik}">
                    <i class="fas fa-grip-vertical participant-drag-handle"></i>
                    <div class="schedule-participant-chip-copy"><strong>${safeName}${sourceBadge}</strong><small>${safeNik}</small></div>
                    ${showRemove && canManageOutsideTna ? '<button type="button" class="participant-unassign-button" title="Lepas dari schedule"><i class="fas fa-times"></i></button>' : ''}
                    ${removeAdditional}
                </div>`;
            }).join(''));
        }

        function moveParticipantToSchedule(nik, targetScheduleItem) {
            const normalizedNik = String(nik);
            $('.schedule-item select[name*="participants"]').each(function() {
                const values = ($(this).val() || []).map(String).filter(value => value !== normalizedNik);
                $(this).val(values);
            });
            if (targetScheduleItem) {
                const select = $(targetScheduleItem).find('select[name*="participants"]');
                const values = (select.val() || []).map(String);
                if (!values.includes(normalizedNik)) values.push(normalizedNik);
                select.val(values);
            }
            refreshTrnParticipantAllocation();
        }

        function formatTrnScheduleDate(value) {
            if (!value) return '-';
            const date = new Date(`${value}T00:00:00`);
            return Number.isNaN(date.getTime()) ? value : date.toLocaleDateString('id-ID', {
                day: '2-digit',
                month: 'short',
                year: 'numeric'
            });
        }

        function formatTrnDuration(minutes) {
            const value = parseInt(minutes || '0', 10);
            if (!value) return '-';
            const hours = Math.floor(value / 60);
            const remainder = value % 60;
            if (!hours) return `${remainder} menit`;
            return `${hours} jam${remainder ? ` ${remainder} menit` : ''}`;
        }

        function updateTrnScheduleSummary(scheduleItem) {
            const row = $(scheduleItem);
            const start = row.find('.schedule-start').val() || '-';
            const end = row.find('.schedule-end').val() || '-';
            row.find('.schedule-summary-date').text(formatTrnScheduleDate(row.find('input[type="date"]').val()));
            row.find('.schedule-summary-time').text(`${start} - ${end}`);
            const duration = formatTrnDuration(row.find('.schedule-duration').val());
            row.find('.schedule-summary-duration').text(duration);
            row.find('.schedule-duration-display').val(duration);
        }

        let activeTrnScheduleItem = null;

        function trnScheduleAssignments() {
            const assignments = new Map();
            $('.schedule-item').each(function() {
                const item = this;
                ($(this).find('.schedule-participants').val() || []).forEach(nik => assignments.set(String(nik),
                    item));
            });
            return assignments;
        }

        function updateTrnScheduleModalCount() {
            const count = $('#trnScheduleParticipantModalRows .schedule-modal-select.selected').length;
            $('#trnScheduleParticipantModalCount').text(`${count} participant dipilih`);
        }

        function filterTrnScheduleParticipantModal() {
            const keyword = String($('#trnScheduleParticipantSearch').val() || '').trim().toLowerCase();
            let visible = 0;
            $('#trnScheduleParticipantModalRows tr').each(function() {
                const show = !keyword || $(this).text().toLowerCase().includes(keyword);
                $(this).toggle(show);
                if (show) visible++;
            });
            $('.schedule-participant-modal-table-wrap').toggleClass('d-none', visible === 0);
            $('#trnScheduleParticipantEmpty').toggleClass('d-none', visible > 0);
        }

        function openTrnScheduleParticipantModal(scheduleItem) {
            activeTrnScheduleItem = scheduleItem;
            const assignments = trnScheduleAssignments();
            const current = new Set(($(scheduleItem).find('.schedule-participants').val() || []).map(String));
            const scheduleNumber = $('.schedule-item').index(scheduleItem) + 1;
            $('#trnScheduleParticipantModalNumber').text(scheduleNumber);
            $('#trnScheduleParticipantSearch').val('');

            const rows = participantsData.map(function(participant) {
                const nik = String(participant.value);
                const assignedItem = assignments.get(nik);
                const isCurrent = current.has(nik);
                const isUnavailable = assignedItem && assignedItem !== scheduleItem;
                const assignedNumber = isUnavailable ? $('.schedule-item').index(assignedItem) + 1 : null;
                return `<tr class="${isUnavailable ? 'is-unavailable' : (isCurrent ? 'is-selected' : '')}">
                    <td class="text-center"><button type="button" class="schedule-modal-select ${isCurrent ? 'selected' : ''}"
                        data-nik="${escapeParticipantText(nik)}" ${isUnavailable ? 'disabled' : ''}>
                        <i class="fas ${isCurrent ? 'fa-check' : (isUnavailable ? 'fa-lock' : 'fa-plus')} me-1"></i>${isCurrent ? 'Selected' : (isUnavailable ? 'Used' : 'Select')}
                    </button></td>
                    <td class="font-weight-bold">${escapeParticipantText(nik)}</td>
                    <td>${escapeParticipantText(participant.name)}</td>
                    <td>${isUnavailable ? `<span class="schedule-used-badge">Schedule ${assignedNumber}</span>` :
                        (isCurrent ? '<span class="schedule-current-badge">Schedule ini</span>' : '<span class="text-muted text-xs">Belum terjadwal</span>')}</td>
                </tr>`;
            }).join('');
            $('#trnScheduleParticipantModalRows').html(rows);
            updateTrnScheduleModalCount();
            filterTrnScheduleParticipantModal();
            bootstrap.Modal.getOrCreateInstance(document.getElementById('trnScheduleParticipantsModal')).show();
        }

        function loadParticipantsByTna(tnaId, callback) {
            if (!tnaId) {
                participantsData = [];
                refreshAllScheduleParticipantOptions();
                if (typeof callback === 'function') callback();
                return;
            }

            $.ajax({
                url: '{{ url('trstrn/tna-participants') }}',
                type: 'GET',
                data: {
                    tna_id: tnaId
                },
                success: function(response) {
                    if (response.success) {
                        participantsData = (response.data || []).map(participant => ({
                            ...participant,
                            is_additional: false
                        }));
                        refreshAllScheduleParticipantOptions();
                    }
                },
                error: function() {
                    participantsData = [];
                    refreshAllScheduleParticipantOptions();
                },
                complete: function() {
                    // Jalan setelah success ATAU error, memastikan participantsData sudah final
                    if (typeof callback === 'function') callback();
                }
            });
        }

        function loadTnaSchedules(tnaId) {
            console.log('loadTnaSchedules called with tnaId:', tnaId);

            if ($('#is_convert_flow').val() == '1') {
                console.log('Convert flow detected - skipping loadTnaSchedules');
                return;
            }

            if (!tnaId) {
                console.log('No TNA ID - clearing and adding empty schedule');
                clearScheduleContainer();
                setTimeout(function() {
                    scheduleCount = 0;
                    addScheduleItem();
                }, 100);
                return;
            }
            $.ajax({
                url: '{{ url('trstrn/tna-schedules') }}',
                type: 'GET',
                data: {
                    tna_id: tnaId
                },
                success: function(response) {
                    console.log('AJAX success - response:', response);

                    if (response.success && response.data && response.data.length > 0) {
                        console.log('Loading', response.data.length, 'schedules from TNA');
                        clearScheduleContainer();

                        // Add delay to ensure container is cleared
                        setTimeout(function() {
                            scheduleCount = -1; // Will be incremented in loop

                            response.data.forEach(function(schedule) {
                                addScheduleItem(schedule);
                            });

                            // Reinitialize plugins for new elements
                            console.log('About to initialize plugins');
                            initializePlugins();
                            console.log('Plugins initialized');

                            // Setup change listener for new selects AFTER initialization
                            console.log('Setting up listeners for AJAX-loaded schedules');
                            $('#scheduleContainer').find('select[name*="participants"]').each(
                                function() {
                                    attachSelectListeners(this);
                                });
                            refreshAllScheduleParticipantOptions();
                            console.log('Listeners attached to all schedules');
                        }, 50);
                    } else {
                        // No schedules in TNA - keep 1 empty schedule
                        console.log(
                            'No schedules found or empty response - clearing and adding empty schedule');
                        clearScheduleContainer();

                        setTimeout(function() {
                            scheduleCount = 0;
                            addScheduleItem();
                        }, 100);
                    }
                },
                error: function(xhr) {
                    console.error('AJAX error loading schedules:', xhr);

                    // On error - keep 1 empty schedule
                    clearScheduleContainer();

                    setTimeout(function() {
                        scheduleCount = 0;
                        addScheduleItem();
                    }, 100);

                    // Show alert only if it's a 500 error
                    if (xhr.status === 500) {
                        let errorMsg = 'Gagal memuat jadwal dari TNA';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        console.error('Server error:', errorMsg);
                    }
                }
            });
        }

        function clearScheduleContainer() {
            console.log('clearScheduleContainer called');
            const $container = $('#scheduleContainer');

            // Find all select2 elements
            const $selects = $container.find('select.select2');
            console.log('Found', $selects.length, 'select elements to destroy');

            // Prevent any select2 event triggers by temporarily disabling them
            $selects.each(function() {
                const $select = $(this);

                // Disable the element to prevent event triggers
                $select.prop('disabled', true);

                // Remove from DOM to prevent any listeners from firing
                const $parent = $select.parent();
                $select.remove();

                // Try to destroy after removal
                try {
                    // Force remove select2 data
                    if ($select.data('select2')) {
                        $select.data('select2', null);
                        $select.removeData('select2');
                    }
                } catch (e) {
                    console.error('Error cleaning select2 data:', e);
                }
            });

            // Empty container completely
            $container.empty();
            console.log('Container emptied');
        }

        // Global function to initialize select2
        function initializePlugins() {
            console.log('initializePlugins called');

            // Initialize select2 only if function exists
            if (typeof $.fn.select2 !== 'undefined') {
                try {
                    // Multiple select for participants - ONLY in current step
                    let multiSelects = [];
                    if (currentStep === 2) {
                        // Step 2: only initialize schedules participants
                        multiSelects = $('#scheduleContainer').find('select.select2').select2({
                            placeholder: "Pilih Participant",
                            allowClear: true,
                            width: '100%',
                            closeOnSelect: false
                        });
                    } else {
                        // Step 1: check if any select2 in schedules (shouldn't be visible)
                        multiSelects = $('#scheduleContainer').find('select.select2').select2({
                            placeholder: "Pilih Participant",
                            allowClear: true,
                            width: '100%',
                            closeOnSelect: false
                        });
                    }
                    console.log('Initialized', multiSelects.length, 'multi-select elements');

                    $('#scheduleContainer .schedule-trainer-select:not(:disabled)').each(function() {
                        if (!$(this).data('select2')) {
                            $(this).select2({
                                placeholder: 'Pilih trainer...',
                                allowClear: true,
                                width: '100%'
                            });
                        }
                    });

                    // Single select for diketahui and disetujui - always initialize
                    const singleSelects = $(' #diusulkan, #diketahui, #disetujui').select2({
                        placeholder: "-- Pilih --",
                        allowClear: true,
                        width: '100%',
                        closeOnSelect: true
                    });
                    // const singleSelects = $('#id_trs_tna_header, #diusulkan, #diketahui, #disetujui').select2({
                    //     placeholder: "-- Pilih --",
                    //     allowClear: true,
                    //     width: '100%',
                    //     closeOnSelect: true
                    // });
                    console.log('Initialized', singleSelects.length, 'single-select elements');

                    $('.select2-selection').css('border', '0px');
                } catch (e) {
                    console.error('Error in initializePlugins:', e);
                }
            } else {
                console.warn('Select2 plugin not loaded');
            }
        }

        // Define nextStep as global function BEFORE document.ready
        function switchTrnStep(step) {
            $('.select2, .select2-single').each(function() {
                if ($(this).data('select2')) $(this).select2('close');
            });

            currentStep = step;
            $('#step1').toggle(step === 1);
            $('#step2').toggle(step === 2);
            $('#step1Label').toggleClass('active', step === 1);
            $('#step2Label').toggleClass('active', step === 2);

            if (step === 2) {
                setTimeout(function() {
                    $('#step2 .select2').each(function() {
                        $(this).next('.select2-container').css('width', '100%').show();
                    });
                    refreshAllScheduleParticipantOptions();
                }, 0);
            }
        }

        function nextStep() {
            // Force close all Select2 dropdowns
            $('.select2, .select2-single').trigger('blur').each(function() {
                if ($(this).data('select2')) {
                    $(this).select2('close');
                }
            });

            // Hide ALL Select2 containers
            $('.select2-container').hide();

            // Show only Step 2 select containers
            $('select[name*="participants"]').each(function() {
                const $select = $(this);
                if ($select.data('select2')) {
                    $select.data('select2').dropdown.$container.show();
                }
            });

            // Show step 2
            $('#step1').hide();
            $('#step2').show();
            $('#step1Circle').css('background-color', '#ddd');
            $('#step1Label').css('color', '#666');
            $('#step2Circle').css('background-color', '#17a2b8');
            $('#step2Circle').css('color', '#fff');
            $('#step2Label').css('color', '#000');
            $('#step1Label').removeClass('active');
            $('#step2Label').addClass('active');
            currentStep = 2;

            setTimeout(function() {
                // ✅ DEBUG DULU sebelum refresh
                console.log('=== DEBUG PREFILL vs participantsData ===');

                // Cek option[selected] di setiap schedule
                $('.schedule-item').each(function(idx) {
                    const $select = $(this).find('select[name*="participants"]');
                    console.log('Schedule', idx, 'select name:', $select.attr('name'));
                    console.log('Schedule', idx, 'selected options di HTML:');
                    $select.find('option').each(function() {
                        console.log('  option value:', $(this).val(),
                            '| selected attr:', $(this).attr('selected'),
                            '| text:', $(this).text().trim());
                    });
                });

                // Cek participantsData
                console.log('participantsData count:', participantsData.length);
                console.log('participantsData sample:', participantsData.slice(0, 3));

                refreshAllScheduleParticipantOptions();
            }, 0);
        }

        // Define previousStep as global function
        function previousStep() {
            showStep(1);
        }

        function showStep(step) {
            // Force close all Select2 dropdowns
            $('.select2, .select2-single').trigger('blur').each(function() {
                if ($(this).data('select2')) {
                    $(this).select2('close');
                }
            });

            // Hide ALL Select2 containers
            $('.select2-container').hide();

            currentStep = step;

            if (step === 1) {
                $('#step1').show();
                $('#step2').hide();

                // Show ONLY Step 1 select containers based on field names
                // Step 1 contains: id_trs_tna_header, diusulkan, diketahui, disetujui
                $('select#id_trs_tna_header, select#diusulkan, select#diketahui, select#disetujui').each(function() {
                    const $select = $(this);
                    if ($select.data('select2')) {
                        // Get the Select2 dropdown container and show it
                        $select.data('select2').dropdown.$container.show();
                    }
                });

                $('#step1Circle').css('background-color', '#17a2b8');
                $('#step1Label').css('color', '#000');
                $('#step2Circle').css({
                    'background-color': '#ddd',
                    'color': '#666'
                });
                $('#step2Label').css('color', '#666');
                $('#step1Label').addClass('active');
                $('#step2Label').removeClass('active');
            } else {
                $('#step1').hide();
                $('#step2').show();

                // Show ONLY Step 2 select containers (participants in schedules)
                $('select[name*="participants"]').each(function() {
                    const $select = $(this);
                    if ($select.data('select2')) {
                        // Get the Select2 dropdown container and show it
                        $select.data('select2').dropdown.$container.show();
                    }
                });

                $('#step1Circle').css('background-color', '#ddd');
                $('#step1Label').css('color', '#666');
                $('#step2Circle').css({
                    'background-color': '#17a2b8',
                    'color': '#fff'
                });
                $('#step2Label').css('color', '#000');
                $('#step1Label').removeClass('active');
                $('#step2Label').addClass('active');
            }
        }

        function validateStep1() {
            let isValid = true;
            let message = '';

            if (!$('#id_trs_tna_header').val()) {
                message += 'ID TNA harus diisi\n';
                isValid = false;
            }
            if (!$('#nama_trn').val()) {
                message += 'Training Name harus diisi\n';
                isValid = false;
            }
            if (!isValid) {
                alert(message);
            }

            return isValid;
        }

        function hitungDurasi(scheduleItem) {
            const $item = $(scheduleItem);
            const jamMulai = $item.find('.schedule-start').val();
            const jamSelesai = $item.find('.schedule-end').val();

            if (jamMulai && jamSelesai) {
                const [jm, mm] = jamMulai.split(':').map(Number);
                const [js, ms] = jamSelesai.split(':').map(Number);

                let mulai = jm * 60 + mm;
                let selesai = js * 60 + ms;

                $item.find('.schedule-duration').val(selesai > mulai ? selesai - mulai : '');
            } else {
                $item.find('.schedule-duration').val('');
            }
            updateTrnScheduleSummary($item);
        }

        // Define removeScheduleItem as global function
        function removeScheduleItem(button) {
            console.log('removeScheduleItem called');
            const scheduleItem = $(button).closest('.schedule-item');
            const $select = scheduleItem.find('select.select2');

            // Destroy select2 first
            if ($select.data('select2')) {
                try {
                    console.log('Destroying select2 on removed item');
                    $select.select2('destroy');
                } catch (e) {
                    console.error('Error destroying select2:', e);
                }
            }

            // Remove the item from DOM
            scheduleItem.remove();
            updateTrnScheduleCount();
            console.log('Schedule item removed');

            // Refresh participant options with delay to ensure DOM is updated
            debounceRefreshParticipants();
        }

        function getUsedParticipantsInPage() {
            const usedParticipants = new Set();

            // Get all selected participants from all schedule items in the page
            $('.schedule-item').each(function() {
                const selectedValues = $(this).find('select[name*="participants"]').val() || [];
                selectedValues.forEach(function(value) {
                    usedParticipants.add(String(value));
                });
            });

            return usedParticipants;
        }

        function buildParticipantOptionsExcludingUsed(selectedValues = [], excludeSet = new Set()) {
            const selectedSet = new Set((selectedValues || []).map(String));
            let options = '';

            participantsData.forEach(function(participant) {
                const value = String(participant.value);
                // Show if it's currently selected or not used in other schedules
                if (selectedSet.has(value) || !excludeSet.has(value)) {
                    const selected = selectedSet.has(value) ? 'selected' : '';
                    options += `<option value="${value}" ${selected}>${participant.name}</option>`;
                }
            });

            return options;
        }

        function refreshScheduleParticipantOptions(scheduleItem) {
            const participantSelect = $(scheduleItem).find('select[name*="participants"]');
            const selected = (participantSelect.val() || []).map(String);
            participantSelect.html(buildParticipantOptions(selected)).val(selected);
            attachSelectListeners(participantSelect);
        }

        function addScheduleItem(data = {}) {
            scheduleCount++;

            const selectedParticipants = (data.participants || []).map(String);
            const participantOptions = buildParticipantOptions(selectedParticipants);
            const safeDate = escapeParticipantText(data.jadwal_trn || data.tanggal || data.tna_date || '');
            const safeStart = escapeParticipantText(data.time_start || '');
            const safeEnd = escapeParticipantText(data.time_end || '');
            const safeDuration = escapeParticipantText(data.duration || '');
            const safePlace = escapeParticipantText(data.place || '');
            const trainerOptions = buildTrainerOptions(data.trainer_nik || '');

            const newSchedule = `
            <div class="schedule-item border rounded mb-3" data-schedule-index="${scheduleCount}">
                <input type="hidden" class="schedule-id" name="schedules[${scheduleCount}][id]" value="${escapeParticipantText(data.id || '')}">
                <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="#trnScheduleBody${scheduleCount}" aria-expanded="true">
                        <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-title">Schedule</span>
                            <span class="schedule-header-summary">
                                <span><i class="far fa-calendar-alt"></i><span class="schedule-summary-date">-</span></span>
                                <span class="schedule-summary-separator">&middot;</span>
                                <span><i class="far fa-clock"></i><span class="schedule-summary-time">-</span></span>
                                <span class="schedule-summary-separator">&middot;</span>
                                <span><i class="fas fa-hourglass-half"></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 schedule-participant-count">0 Participants</span>
                        <button type="button" class="btn btn-outline-danger btn-sm mb-0 remove-schedule-button ${canManageOutsideTna ? '' : 'd-none'}" onclick="removeScheduleItem(this)" title="Remove schedule"><i class="fas fa-trash"></i></button>
                    </div>
                </div>
                <div class="collapse show schedule-create-body" id="trnScheduleBody${scheduleCount}">
                <div class="row g-3 align-items-end p-3 pt-0">
                    <div class="col-md-3"><label class="form-label">Date <span class="text-danger">*</span></label><input type="date" class="form-control datepicker" name="schedules[${scheduleCount}][jadwal_trn]" value="${safeDate}" required></div>
                    <div class="col-md-3"><label class="form-label">Start Time <span class="text-danger">*</span></label><input type="time" class="form-control schedule-start" name="schedules[${scheduleCount}][time_start]" value="${safeStart}" required></div>
                    <div class="col-md-3"><label class="form-label">End Time <span class="text-danger">*</span></label><input type="time" class="form-control schedule-end" name="schedules[${scheduleCount}][time_end]" value="${safeEnd}" required></div>
                    <div class="col-md-3"><label class="form-label">Duration</label><div class="input-group"><span class="input-group-text"><i class="fas fa-hourglass-half"></i></span><input type="hidden" class="schedule-duration" name="schedules[${scheduleCount}][duration]" value="${safeDuration}" required><input type="text" class="form-control schedule-duration-display bg-light" value="-" readonly tabindex="-1"></div></div>
                    <div class="col-md-6"><label class="form-label">Place <span class="text-danger">*</span></label><input type="text" class="form-control" name="schedules[${scheduleCount}][place]" value="${safePlace}" placeholder="Training location" required></div>
                    <div class="col-md-6"><label class="form-label">Trainer <small class="text-muted">(dari TNA)</small></label><select class="form-control schedule-trainer-select" name="schedules[${scheduleCount}][trainer_nik]" ${canManageOutsideTna ? '' : 'disabled'} required>${trainerOptions}</select></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 mb-0">Participants <span class="text-danger">*</span></label>
                            <button type="button" class="btn btn-outline-primary btn-sm mb-0 open-trn-schedule-participant-modal ${canManageOutsideTna ? '' : 'd-none'}"><i class="fas fa-users me-1"></i>Pilih via Modal</button>
                        </div>
                        <select name="schedules[${scheduleCount}][participants][]" class="form-control schedule-participants d-none" multiple required>${participantOptions}</select>
                        <div class="schedule-participant-dropzone" data-drop-target="schedule" data-schedule-index="${scheduleCount}"></div>
                    </div>
                </div>
                </div>
            </div>
        `;

            $('#scheduleContainer').append(newSchedule);
            updateTrnScheduleCount();

            // Delay initialization slightly to ensure DOM is fully rendered
            setTimeout(function() {
                // Reinitialize select2 for new elements
                initializePlugins();

                // Setup change listener for the new select AFTER initialization
                const newSelect = $('#scheduleContainer').find('.schedule-item:last select[name*="participants"]');
                console.log('Attaching listeners to new select...');

                attachSelectListeners(newSelect);

                // Initial refresh to hide used participants
                console.log('Doing initial refresh to hide used participants');
                refreshAllScheduleParticipantOptions();
            }, 10);
        }

        function updateTrnScheduleCount() {
            const $items = $('#scheduleContainer .schedule-item');
            $('#trnScheduleCount').text($items.length);
            $items.each(function(index) {
                $(this).find('.schedule-title').text('Schedule ' + (index + 1));
                updateTrnScheduleSummary(this);
            });
        }

        $(document)
            .on('click', '.open-trn-schedule-participant-modal', function() {
                openTrnScheduleParticipantModal($(this).closest('.schedule-item')[0]);
            })
            .on('dragstart', '.schedule-participant-chip', function(event) {
                if (!canManageOutsideTna) return event.preventDefault();
                const nik = String($(this).data('nik'));
                event.originalEvent.dataTransfer.setData('text/plain', nik);
                event.originalEvent.dataTransfer.effectAllowed = 'move';
                $(this).addClass('is-dragging');
            })
            .on('dragend', '.schedule-participant-chip', function() {
                $(this).removeClass('is-dragging');
                $('.schedule-participant-dropzone').removeClass('is-drag-over');
            })
            .on('dragover', '.schedule-participant-dropzone', function(event) {
                event.preventDefault();
                event.originalEvent.dataTransfer.dropEffect = 'move';
                $(this).addClass('is-drag-over');
            })
            .on('dragleave', '.schedule-participant-dropzone', function(event) {
                if (!this.contains(event.relatedTarget)) $(this).removeClass('is-drag-over');
            })
            .on('drop', '.schedule-participant-dropzone', function(event) {
                event.preventDefault();
                $(this).removeClass('is-drag-over');
                const nik = event.originalEvent.dataTransfer.getData('text/plain');
                if (!nik) return;
                const target = $(this).data('drop-target') === 'schedule' ? $(this).closest('.schedule-item')[0] : null;
                moveParticipantToSchedule(nik, target);
            })
            .on('click', '.participant-unassign-button:not(.participant-remove-additional-button)', function() {
                moveParticipantToSchedule($(this).closest('.schedule-participant-chip').data('nik'), null);
            });

        $('#trnScheduleParticipantModalRows').on('click', '.schedule-modal-select:not(:disabled)', function() {
            $(this).toggleClass('selected');
            const 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);
            updateTrnScheduleModalCount();
        });

        $('#trnScheduleParticipantSearch').on('input', filterTrnScheduleParticipantModal);

        $('#applyTrnScheduleParticipantsBtn').on('click', function() {
            if (!activeTrnScheduleItem || !document.body.contains(activeTrnScheduleItem)) return;
            const niks = $('#trnScheduleParticipantModalRows .schedule-modal-select.selected').map(function() {
                return String($(this).data('nik'));
            }).get();
            const select = $(activeTrnScheduleItem).find('.schedule-participants');
            select.val(niks);
            refreshTrnParticipantAllocation();
            bootstrap.Modal.getOrCreateInstance(document.getElementById('trnScheduleParticipantsModal')).hide();
        });

        let additionalEmployeeData = [];

        function updateAdditionalParticipantCount() {
            const count = $('#additionalParticipantRows .schedule-modal-select.selected').length;
            $('#additionalParticipantCount').text(`${count} participant dipilih`);
        }

        function filterAdditionalParticipants() {
            const keyword = String($('#additionalParticipantSearch').val() || '').trim().toLowerCase();
            let visible = 0;
            $('#additionalParticipantRows tr').each(function() {
                const show = !keyword || $(this).text().toLowerCase().includes(keyword);
                $(this).toggle(show);
                if (show) visible++;
            });
            $('#additionalParticipantTableWrap').toggleClass('d-none', visible === 0);
            $('#additionalParticipantEmpty').toggleClass('d-none', visible > 0);
        }

        function renderAdditionalParticipantModal() {
            const existingNiks = new Set(participantsData.map(participant => String(participant.value)));
            const available = additionalEmployeeData.filter(employee => !existingNiks.has(String(employee.value)));
            const rows = available.map(function(employee) {
                return `<tr>
                    <td class="text-center"><button type="button" class="schedule-modal-select" data-nik="${escapeParticipantText(employee.value)}">
                        <i class="fas fa-plus me-1"></i>Select
                    </button></td>
                    <td class="font-weight-bold">${escapeParticipantText(employee.value)}</td>
                    <td>${escapeParticipantText(employee.name)}</td>
                    <td>${escapeParticipantText(employee.dept_name || 'No Department')}</td>
                </tr>`;
            }).join('');
            $('#additionalParticipantRows').html(rows);
            updateAdditionalParticipantCount();
            filterAdditionalParticipants();
        }

        $('#openAdditionalParticipantModalBtn').on('click', function() {
            $('#additionalParticipantSearch').val('');
            $('#additionalParticipantRows').html(
                '<tr><td colspan="4" class="text-center py-4">Loading...</td></tr>');
            bootstrap.Modal.getOrCreateInstance(document.getElementById('additionalParticipantModal')).show();
            $.get('{{ url('trstrn/all-employees') }}')
                .done(function(response) {
                    additionalEmployeeData = response.data || [];
                    renderAdditionalParticipantModal();
                })
                .fail(function(xhr) {
                    bootstrap.Modal.getOrCreateInstance(document.getElementById('additionalParticipantModal'))
                        .hide();
                    Swal.fire('Gagal', xhr.responseJSON?.message || 'Gagal memuat daftar karyawan.', 'error');
                });
        });

        $('#additionalParticipantRows').on('click', '.schedule-modal-select', function() {
            $(this).toggleClass('selected');
            const 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);
            updateAdditionalParticipantCount();
        });

        $('#additionalParticipantSearch').on('input', filterAdditionalParticipants);

        $('#applyAdditionalParticipantsBtn').on('click', function() {
            const selectedNiks = $('#additionalParticipantRows .schedule-modal-select.selected').map(function() {
                return String($(this).data('nik'));
            }).get();
            if (!selectedNiks.length) {
                Swal.fire('Pilih Participant', 'Pilih minimal satu participant untuk ditambahkan.', 'warning');
                return;
            }
            const selectedSet = new Set(selectedNiks);
            additionalEmployeeData.forEach(function(employee) {
                if (!selectedSet.has(String(employee.value))) return;
                participantsData.push({
                    ...employee,
                    is_additional: true
                });
            });
            refreshAllScheduleParticipantOptions();
            bootstrap.Modal.getOrCreateInstance(document.getElementById('additionalParticipantModal')).hide();
        });

        $(document).on('click', '.participant-remove-additional-button', function(event) {
            event.stopPropagation();
            const nik = String($(this).closest('.schedule-participant-chip').data('nik'));
            participantsData = participantsData.filter(participant => String(participant.value) !== nik || !
                participant.is_additional);
            $('.schedule-participants').each(function() {
                $(this).val(($(this).val() || []).map(String).filter(value => value !== nik));
            });
            refreshAllScheduleParticipantOptions();
        });

        function submitForm() {
            // Convert form data to JSON for better handling
            const data = {
                id_trs_tna_header: $('#id_trs_tna_header').val(),
                nama_trn: $('#nama_trn').val(),
                target_trn: $('#target_trn').val(),
                biaya: $('#biaya').val() ? parseInt($('#biaya').val()) : 0,
                approval_diketahui: @js($prefill['approval_diketahui'] ?? 'P'),
                approval_disetujui: @js($prefill['approval_disetujui'] ?? 'P'),
                diusulkan: $('#diusulkan').val(),
                diketahui: $('#diketahui').val(),
                disetujui: $('#disetujui').val(),
                is_convert_flow: $('#is_convert_flow').val() || '0',
                transfers: pendingParticipantTransfers,
                schedules: []
            };

            // Collect schedules
            $('.schedule-item').each(function(index) {
                let dateValue = $(this).find('input[name*="jadwal_trn"]').val();
                let participants = $(this).find('select[name*="participants"]').val();

                // Convert date from dd/mm/yyyy to yyyy-mm-dd
                if (dateValue && dateValue.includes('/')) {
                    const parts = dateValue.split('/');
                    if (parts.length === 3) {
                        dateValue = parts[2] + '-' + parts[1] + '-' + parts[0]; // yyyy-mm-dd
                    }
                }

                const schedule = {
                    id: $(this).find('.schedule-id').val() || null,
                    jadwal_trn: dateValue,
                    place: $(this).find('input[name*="[place]"]').val(),
                    time_start: $(this).find('.schedule-start').val(),
                    time_end: $(this).find('.schedule-end').val(),
                    duration: parseInt($(this).find('.schedule-duration').val() || '0', 10),
                    trainer_nik: $(this).find('.schedule-trainer-select').val() || '',
                    participants: participants || [] // Array of selected participants
                };
                data.schedules.push(schedule);
            });

            // Validate before submit
            if (!data.id_trs_tna_header) {
                Swal.fire({
                    title: 'Validation Error',
                    text: 'ID TNA harus diisi',
                    icon: 'warning',
                    confirmButtonColor: '#FFC107'
                });
                return;
            }
            if (!data.nama_trn) {
                Swal.fire({
                    title: 'Validation Error',
                    text: 'Training Name harus diisi',
                    icon: 'warning',
                    confirmButtonColor: '#FFC107'
                });
                return;
            }
            if (data.schedules.length === 0) {
                Swal.fire({
                    title: 'Validation Error',
                    text: 'Minimal harus ada 1 schedule',
                    icon: 'warning',
                    confirmButtonColor: '#FFC107'
                });
                return;
            }

            // Check each schedule
            for (let i = 0; i < data.schedules.length; i++) {
                if (!data.schedules[i].jadwal_trn) {
                    Swal.fire({
                        title: 'Validation Error',
                        text: 'Schedule ' + (i + 1) + ': Date harus diisi',
                        icon: 'warning',
                        confirmButtonColor: '#FFC107'
                    });
                    return;
                }
                if (!data.schedules[i].place || !data.schedules[i].time_start ||
                    !data.schedules[i].time_end || !data.schedules[i].duration) {
                    Swal.fire({
                        title: 'Validation Error',
                        text: 'Schedule ' + (i + 1) + ': Place, Start Time, End Time, dan Duration harus lengkap',
                        icon: 'warning',
                        confirmButtonColor: '#FFC107'
                    });
                    return;
                }
                if (!data.schedules[i].participants || data.schedules[i].participants.length === 0) {
                    Swal.fire({
                        title: 'Validation Error',
                        text: 'Schedule ' + (i + 1) + ': Participant harus dipilih minimal 1',
                        icon: 'warning',
                        confirmButtonColor: '#FFC107'
                    });
                    return;
                }
            }

            // Show loading modal
            $('#loadingModal').modal('show');

            // Disable submit button
            $('#btnSubmit').prop('disabled', true);

            // Submit via AJAX
            $.ajax({
                url: '{{ url($url_menu . '/' . ($edit_trn_id ?? '')) }}',
                type: 'PUT',
                data: JSON.stringify(data),
                contentType: 'application/json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    // Hide loading modal
                    $('#loadingModal').modal('hide');

                    if (response.success) {
                        Swal.fire({
                            title: 'Success',
                            text: 'Data Successfully Saved',
                            icon: 'success',
                            confirmButtonColor: '#4CAF50',
                            allowOutsideClick: false,
                            allowEscapeKey: false
                        }).then(() => {
                            window.location = '{{ url($url_menu) }}';
                        });
                    } else {
                        // Re-enable submit button
                        $('#btnSubmit').prop('disabled', false);
                        Swal.fire({
                            title: 'Failed',
                            text: 'Failed to save data: ' + response.message,
                            icon: 'error',
                            confirmButtonColor: '#DC3545'
                        });
                    }
                },
                error: function(xhr) {
                    // Hide loading modal
                    $('#loadingModal').modal('hide');

                    // Re-enable submit button
                    $('#btnSubmit').prop('disabled', false);

                    let message = 'Terjadi kesalahan saat menyimpan data';
                    if (xhr.responseJSON) {
                        if (xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        }
                        if (xhr.responseJSON.errors) {
                            message += '\n\nDetail errors:\n';
                            Object.keys(xhr.responseJSON.errors).forEach(function(key) {
                                message += '- ' + key + ': ' + xhr.responseJSON.errors[key].join(', ') +
                                    '\n';
                            });
                        }
                    }
                    Swal.fire({
                        title: 'Error',
                        text: message,
                        icon: 'error',
                        confirmButtonColor: '#DC3545'
                    });
                }
            });
        }

        function formatCost() {
            document.querySelectorAll('.rupiah-input').forEach(function(displayInput) {
                const targetId = displayInput.dataset.target;
                const hiddenInput = document.getElementById(targetId);

                if (!hiddenInput) return;

                const initialValue = String(hiddenInput.value || '').replace(/\D/g, '');
                displayInput.value = initialValue && Number(initialValue) > 0 ?
                    Number(initialValue).toLocaleString('id-ID') : '';

                displayInput.addEventListener('input', function() {
                    let value = this.value.replace(/\D/g, '');

                    hiddenInput.value = value || 0;

                    this.value = value ?
                        Number(value).toLocaleString('id-ID') :
                        '';
                });
            });
        }


        $(document).ready(function() {
            console.log('Document ready - initializing');

            // GET ID TNA WITH STRICT IS CONVERT
            @if (!isset($trn))

                $('#id_trs_tna_header').select2({
                    placeholder: 'Pilih atau cari TNA',
                    width: '100%'
                });
            @endif

            // Initialize plugins on page load
            initializePlugins();

            // Auto-calculate duration independently for every schedule.
            $(document).on('change', '.schedule-start, .schedule-end', function() {
                hitungDurasi($(this).closest('.schedule-item'));
            });
            $(document).on('change', '.schedule-item input[type="date"]', function() {
                updateTrnScheduleSummary($(this).closest('.schedule-item'));
            });

            // Setup change listener for all existing schedule selects
            $('#scheduleContainer').find('select[name*="participants"]').each(function() {
                attachSelectListeners(this);
            });

            // Setup change listener for all existing schedule selects
            $('#scheduleContainer').find('select[name*="participants"]').each(function() {
                attachSelectListeners(this);
            });

            // Initial refresh to hide used participants in existing schedules
            console.log('Doing initial refresh for existing schedules...');
            refreshAllScheduleParticipantOptions();
            updateTrnScheduleCount();

            // Ensure participant options always follow selected TNA.
            console.log('Document ready completed');

            // Auto-populate training name when ID TNA is selected
            $('#id_trs_tna_header').on('change', function() {
                console.log('TNA selection changed');
                const selectedOption = $(this).find('option:selected');
                const trainingName = selectedOption.data('training-name');
                const proposedTraining = selectedOption.attr('data-proposed-training') || '';
                const selectedTnaId = $(this).val();

                console.log('Selected TNA ID:', selectedTnaId, 'Training Name:', trainingName);

                if (trainingName) {
                    $('#nama_trn').val(trainingName);
                } else {
                    $('#nama_trn').val('');
                }

                $('#target_trn').val(proposedTraining);

                loadParticipantsByTna(selectedTnaId, function() {
                    loadTnaSchedules(selectedTnaId);
                });
            });


            // Auto-fill supervisor hierarchy
            $('#diusulkan').on('change', function() {
                const selectedOption = $(this).find('option:selected');
                const supervisorNik = selectedOption.data('supervisor-nik');

                console.log('diusulkan:', $(this).val());
                console.log('supervisor:', supervisorNik);

                if ($('#diketahui').val() === '' && supervisorNik) {
                    $('#diketahui')
                        .val(supervisorNik)
                        .trigger('change');
                }
            });

            $('#diketahui').on('change', function() {
                const selectedOption = $(this).find('option:selected');
                const supervisorNik = selectedOption.data('supervisor-nik');

                console.log('diketahui:', $(this).val());
                console.log('supervisor diketahui:', supervisorNik);

                if ($('#disetujui').val() === '' && supervisorNik) {
                    $('#disetujui')
                        .val(supervisorNik)
                        .trigger('change');
                }
            });


            // BARU set nilai setelah event sudah terdaftar
            const reqConvert = @js($tna_req);
            const currentUserNik = @js($user_login->username ?? null);

            if (reqConvert) {
                $('#diusulkan')
                    .val(reqConvert)
                    .trigger('change');
            } else if (currentUserNik) {
                $('#diusulkan')
                    .val(String(currentUserNik))
                    .trigger('change');
            }

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