@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    <style>
        /* Match the tab navigation used by trstna/show. */
        html body ul#createTnaTab .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#createTnaTab .nav-link:hover {
            color: #028284;
            background-color: rgba(2, 130, 132, 0.08);
        }

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

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

        /* Argon injects this indicator; the active link itself is our indicator. */
        html body ul#createTnaTab>.moving-tab {
            display: none !important;
        }

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

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

        .participant-allocation-badge.is-unassigned {
            color: #9a6700;
            background: #fff3cd;
            border: 1px solid #ffe69c;
        }
    </style>
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4 mb-3">
        <div class="card-body p-3">
            <div class="d-flex align-items-center gap-2">
                <a href="{{ url($url_menu) }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Back
                </a>
                @if ($authorize->add == '1')
                    <button type="button" class="btn btn-primary" id="saveTnaBtn" onclick="submitForm()">
                        <i class="fas fa-save me-2"></i>Save
                    </button>
                @endif
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <form role="form" method="POST" action="{{ url($url_menu) }}" id="createTnaForm"
                    enctype="multipart/form-data">
                    @csrf
                    {{-- TAB BAR HEADER, DETAIL, SCHEDULE --}}
                    <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="createTnaTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="create-header-tab" data-bs-toggle="pill"
                                        data-bs-target="#create-header" type="button" role="tab">
                                        <i class="fas fa-file-alt me-1"></i> Header
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="create-detail-tab" data-bs-toggle="pill"
                                        data-bs-target="#create-detail" type="button" role="tab">
                                        <i class="fas fa-list me-1"></i> Detail TNA
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="create-schedule-tab" data-bs-toggle="pill"
                                        data-bs-target="#create-schedule" type="button" role="tab">
                                        <i class="fas fa-calendar me-1"></i> Schedule
                                        <span class="badge" id="createScheduleCount">0</span>
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="create-header" role="tabpanel">
                            <div class="card shadow-sm">

                                <div class="card-body p-4">
                                    {{-- alert error --}}
                                    @if ($errors->any())
                                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-exclamation-triangle me-2"></i>
                                                <div>
                                                    <strong>Validation Error!</strong>
                                                    <ul class="mb-0 mt-2">
                                                        @foreach ($errors->all() as $error)
                                                            <li>{{ $error }}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                        </div>
                                    @endif

                                    <div class="row g-4">
                                        <div class="card-header p-0">
                                            <h6 class="mb-0"><i class="fas fa-file-alt me-2 text-primary"></i>TNA
                                                Header</h6>
                                        </div>
                                        {{-- Training Name --}}
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="form-label text-sm font-weight-bold text-dark">
                                                    Training Name <span class="text-danger">*</span>
                                                </label>
                                                <input type="text"
                                                    class="form-control @error('name_trn') is-invalid @enderror"
                                                    id="name_trn" name="name_trn" value="{{ old('name_trn') }}"
                                                    placeholder="Enter training name" maxlength="255" required>
                                                @error('name_trn')
                                                    <div class="invalid-feedback d-block">
                                                        <i class="fas fa-exclamation-circle me-1"></i>{{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>

                                        {{-- Requestor --}}
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label text-sm font-weight-bold text-dark">
                                                    Requestor <span class="text-danger">*</span>
                                                </label>
                                                <select class="form-select @error('requestor_nik') is-invalid @enderror"
                                                    id="requestorSelect" name="requestor_nik" required style="width: 100%;">
                                                    <option value="">-- Select Requestor --</option>
                                                    @foreach ($karyawan_list as $karyawan)
                                                        <option value="{{ $karyawan->nik }}"
                                                            {{ old('requestor_nik') == $karyawan->nik ? 'selected' : '' }}>
                                                            {{ $karyawan->nama }} ({{ $karyawan->nik }})
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('requestor_nik')
                                                    <div class="invalid-feedback d-block">
                                                        <i class="fas fa-exclamation-circle me-1"></i>{{ $message }}
                                                    </div>
                                                @enderror
                                                <small class="text-muted"><i class="fas fa-info-circle me-1"></i>Request
                                                    will appear on this person's dashboard</small>
                                            </div>
                                        </div>

                                        {{-- Estimated Date --}}
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label text-sm font-weight-bold text-dark">
                                                    Estimated Date
                                                </label>
                                                <input type="date"
                                                    class="form-control @error('month_estimation') is-invalid @enderror"
                                                    id="month_estimation" name="month_estimation"
                                                    value="{{ old('month_estimation') }}">
                                                @error('month_estimation')
                                                    <div class="invalid-feedback d-block">
                                                        <i class="fas fa-exclamation-circle me-1"></i>{{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>

                                        {{-- Description --}}
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="form-label text-sm font-weight-bold text-dark">
                                                    Description <span class="text-danger">*</span>
                                                </label>
                                                <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description"
                                                    rows="3" placeholder="Enter training description" required>{{ old('description') }}</textarea>
                                                @error('description')
                                                    <div class="invalid-feedback d-block">
                                                        <i class="fas fa-exclamation-circle me-1"></i>{{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>

                                        <hr class="my-2">

                                        {{-- Training Type --}}
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="form-label text-sm font-weight-bold text-dark">
                                                    Training Type
                                                </label>
                                                <select class="form-select" id="type_training" name="type_training">
                                                    <option value="reguler"
                                                        {{ old('type_training') == 'reguler' ? 'selected' : '' }}>Reguler
                                                    </option>
                                                    <option value="academy"
                                                        {{ old('type_training') == 'academy' ? 'selected' : '' }}>Academy
                                                    </option>
                                                </select>
                                            </div>
                                        </div>

                                        {{-- With Score --}}
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="form-label text-sm font-weight-bold text-dark">
                                                    With Score
                                                </label>
                                                <select class="form-select" id="with_score" name="with_score">
                                                    <option value="0"
                                                        {{ old('with_score') == '0' ? 'selected' : '' }}>No</option>
                                                    <option value="1"
                                                        {{ old('with_score') == '1' ? 'selected' : '' }}>Yes</option>
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Superior --}}
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="form-label text-sm font-weight-bold text-dark">
                                                    Superior (Atasan)
                                                </label>
                                                <select class="form-select" id="superiorSelect" name="superior_nik"
                                                    style="width: 100%;">
                                                    <option value="">-- Select Superior --</option>
                                                    @foreach ($superior_list as $superior)
                                                        <option value="{{ $superior->nik }}"
                                                            {{ old('superior_nik') == $superior->nik ? 'selected' : '' }}>
                                                            {{ $superior->nama }} ({{ $superior->nik }})
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <small class="text-muted" id="superiorHelp">
                                                    Automatically suggested from Organization Structure, but can be changed.
                                                </small>
                                            </div>
                                        </div>

                                        {{-- Participants --}}
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="form-label text-sm font-weight-bold text-dark">
                                                    Participants
                                                </label>
                                                <div class="participant-source-panel mb-3">
                                                    <div class="participant-source-row">
                                                        <div class="participant-source-heading">
                                                            <span class="participant-source-title">Add Participants Based
                                                                On</span>

                                                        </div>

                                                        <div class="participant-mode-switch" role="group"
                                                            aria-label="Metode penambahan participant">
                                                            <span class="participant-mode-label" id="participantModeName">
                                                                <i class="fas fa-user me-1"></i>By Name
                                                            </span>
                                                            <input class="participant-source-switch" type="checkbox"
                                                                id="participantSourceToggle" name="participant_source"
                                                                value="department"
                                                                {{ old('participant_source') === 'department' ? 'checked' : '' }}>
                                                            <label class="participant-switch-control"
                                                                for="participantSourceToggle"
                                                                title="Ubah metode penambahan participant">
                                                                <span class="participant-switch-knob"></span>
                                                            </label>
                                                            <span class="participant-mode-label"
                                                                id="participantModeDepartment">
                                                                <i class="fas fa-building me-1"></i>By Department
                                                            </span>
                                                        </div>
                                                    </div>

                                                    <div class="participant-source-help" id="participantSourceHelp">
                                                        <i class="fas fa-info-circle"></i>
                                                        <span>Gunakan kolom pencarian di bawah untuk memilih participant
                                                            berdasarkan nama atau NIK.</span>
                                                    </div>

                                                    <div id="departmentParticipantControls" class="row g-2 d-none">
                                                        <div class="col-md-9">
                                                            <select class="form-select" id="participantDepartmentSelect"
                                                                multiple style="width: 100%;">
                                                                @foreach ($departemen_list as $departemen)
                                                                    @php
                                                                        $employeeCount = $karyawan_list
                                                                            ->where('id_departemen', $departemen->id)
                                                                            ->count();
                                                                    @endphp
                                                                    @if ($employeeCount > 0)
                                                                        <option value="{{ $departemen->id }}">
                                                                            {{ $departemen->nama }} ({{ $employeeCount }}
                                                                            karyawan)
                                                                        </option>
                                                                    @endif
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-md-3 d-grid">
                                                            <button type="button" class="btn btn-outline-primary mb-0"
                                                                id="addDepartmentParticipantsBtn">
                                                                <i class="fas fa-users me-1"></i> Add Participants
                                                            </button>
                                                        </div>
                                                        <div class="col-12">
                                                            <small class="text-muted">All active employees from the
                                                                selected departments will be added.</small>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div id="participantNameControls">
                                                    <label class="form-label text-sm font-weight-bold text-dark mb-1">
                                                        Search / Add Participant by Name
                                                    </label>
                                                    <select class="form-select" id="participantsSelect"
                                                        name="participants[]" multiple style="width: 100%;">
                                                        @php
                                                            $grouped = $karyawan_list->groupBy('departemen_name');
                                                        @endphp
                                                        @foreach ($grouped as $deptName => $employees)
                                                            <optgroup label="{{ $deptName ?: 'No Department' }}">
                                                                @foreach ($employees as $karyawan)
                                                                    <option value="{{ $karyawan->nik }}"
                                                                        data-department-id="{{ $karyawan->id_departemen }}"
                                                                        data-department-name="{{ $deptName ?: 'No Department' }}"
                                                                        data-employee-name="{{ $karyawan->nama }}"
                                                                        {{ is_array(old('participants')) && in_array($karyawan->nik, old('participants')) ? 'selected' : '' }}>
                                                                        {{ $karyawan->nama }} ({{ $karyawan->nik }})
                                                                    </option>
                                                                @endforeach
                                                            </optgroup>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <small class="text-muted"><i class="fas fa-info-circle me-1"></i>Required
                                                    — every participant must be allocated to a schedule.</small>
                                                <div
                                                    class="d-flex flex-wrap justify-content-between align-items-center gap-2 mt-4 mb-2">
                                                    <label class="form-label text-sm font-weight-bold text-dark mb-0">
                                                        Selected Participants List
                                                    </label>
                                                    <div class="d-flex flex-wrap align-items-center gap-2">
                                                        <span class="badge bg-secondary" id="selectedParticipantCount">0
                                                            participant</span>
                                                        <button type="button" class="participant-reset-button"
                                                            id="resetParticipantsBtn" disabled
                                                            title="Hapus semua participant terpilih">
                                                            <i class="fas fa-rotate-left me-1"></i>Reset Participant
                                                        </button>
                                                    </div>
                                                </div>
                                                <div id="selectedParticipantCards" class="row g-3"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @include('traing.trstna._partials.create_detail_schedule')
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="departmentParticipantsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title mb-1"><i class="fas fa-users me-2"></i>Choose Participant by Department
                        </h5>
                        <p class="text-sm text-muted mb-0">Click Selected to exclude employees from the training.</p>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="participant-modal-guide">
                        <div class="participant-modal-guide-icon"><i class="fas fa-info-circle"></i></div>
                        <div>
                            <strong>All employees are automatically selected</strong>
                            <p class="mb-0">Click the <b>Selected</b> button on employees who are not attending the
                                training, then
                                click <b>Apply Participants</b>.</p>
                        </div>
                    </div>
                    <div class="participant-modal-toolbar">
                        <div class="participant-search-wrap">
                            <i class="fas fa-search"></i>
                            <input type="search" class="form-control" id="departmentParticipantSearch"
                                placeholder="Cari nama atau NIK..." autocomplete="off">
                        </div>
                        <div class="participant-summary">
                            <div class="participant-summary-item total">
                                <span id="modalTotalCount">0</span><small>Total</small>
                            </div>
                            <div class="participant-summary-item selected">
                                <span id="modalSelectedCount">0</span><small>Selected</small>
                            </div>
                            <div class="participant-summary-item excluded">
                                <span id="modalExcludedCount">0</span><small>Excluded</small>
                            </div>
                        </div>
                    </div>
                    <div id="departmentEmployeeGroups"></div>
                </div>
                <div class="modal-footer">
                    <span class="me-auto text-sm font-weight-bold" id="modalParticipantCount"></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="applyDepartmentParticipantsBtn">
                        <i class="fas fa-check me-1"></i>Terapkan Participant
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="scheduleParticipantsModal" 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="scheduleParticipantModalNumber"></span></h5>
                        <p class="text-sm text-muted mb-0">Pilih participant yang belum dialokasikan ke schedule lain.</p>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="participant-search-wrap mb-3" style="max-width:none;">
                        <i class="fas fa-search"></i>
                        <input type="search" class="form-control" id="scheduleParticipantSearch"
                            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 style="width:110px;" class="text-center">Selection</th>
                                    <th style="width:170px;">NIK</th>
                                    <th>Nama Participant</th>
                                    <th style="width:150px;">Status</th>
                                </tr>
                            </thead>
                            <tbody id="scheduleParticipantModalRows"></tbody>
                        </table>
                    </div>
                    <div class="participant-search-empty d-none" id="scheduleParticipantEmpty">
                        <i class="fas fa-users mb-2"></i>
                        <strong>Participant tidak tersedia</strong>
                        <span>Semua participant mungkin sudah dialokasikan atau tidak cocok dengan pencarian.</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <span class="me-auto text-sm font-weight-bold" id="scheduleParticipantModalCount">0 dipilih</span>
                    <button type="button" class="btn btn-secondary mb-0" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary mb-0" id="applyScheduleParticipantsBtn">
                        <i class="fas fa-check me-1"></i>Terapkan Participant
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <link href="{{ asset('/') }}assets/css/select2.min.css" rel="stylesheet">
    <style>
        .card {
            border-radius: 0.75rem;
            border: none;
        }

        .card-header.bg-gradient-primary {
            background: linear-gradient(87deg, #028284 0, #01a6a9 100%) !important;
            border-radius: 0.75rem 0.75rem 0 0 !important;
            padding: 1.5rem;
        }

        .icon-shape {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.75rem;
        }

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

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

        .btn-primary {
            background: linear-gradient(87deg, #028284 0, #01a6a9 100%);
            border: none;
            padding: 0.625rem 1.5rem;
            font-size: 0.9375rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }

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

        .btn-secondary {
            background-color: #8392AB;
            border: none;
            padding: 0.625rem 1.5rem;
            font-size: 0.9375rem;
            font-weight: 600;
        }

        textarea.form-control {
            resize: vertical;
            min-height: 80px;
        }

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

        .select2-container--default .select2-selection--single:focus,
        .select2-container--default .select2-selection--multiple:focus {
            border-color: #028284;
        }

        .participant-source-panel {
            padding: 1rem;
            border: 1px solid #e9ecef;
            border-radius: 0.65rem;
            background: #f8f9fa;
        }

        .participant-source-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.75rem;
        }

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

        .participant-source-heading small {
            display: block;
            margin-top: 0.15rem;
            color: #8392ab;
            font-size: 0.73rem;
        }

        .participant-source-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.25rem;
        }

        .participant-mode-switch {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            flex-shrink: 0;
        }

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

        .participant-switch-control {
            position: relative;
            display: inline-flex;
            flex: 0 0 54px;
            width: 54px;
            height: 30px;
            margin: 0;
            padding: 3px;
            border: 1px solid #cbd3dc;
            border-radius: 999px;
            background: #dfe4ea;
            cursor: pointer;
            box-shadow: inset 0 1px 2px rgba(52, 71, 103, 0.08);
            transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }

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

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

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

        .participant-source-switch:focus-visible+.participant-switch-control {
            outline: 3px solid rgba(2, 130, 132, 0.2);
            outline-offset: 2px;
        }

        .participant-mode-label {
            color: #98a2b3;
            font-size: 0.78rem;
            font-weight: 600;
            white-space: nowrap;
            transition: color 0.2s ease;
        }

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

        .participant-source-help {
            display: flex;
            align-items: flex-start;
            gap: 0.45rem;
            margin-top: 0.7rem;
            color: #67748e;
            font-size: 0.72rem;
            line-height: 1.4;
        }

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

        #departmentParticipantControls {
            margin-top: 0.8rem;
            padding-top: 0.8rem;
            border-top: 1px solid #e3e8ee;
        }

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

        .participant-reset-button {
            padding: 0.32rem 0.65rem;
            color: #dc3545;
            font-size: 0.7rem;
            font-weight: 700;
            border: 1px solid #f1b8bd;
            border-radius: 0.45rem;
            background: #fff;
            cursor: pointer;
            transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
        }

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

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

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

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

        .department-popup-header {
            position: sticky;
            top: 0;
            z-index: 2;
            min-height: 54px;
            padding: 0.85rem 1.1rem;
            border-bottom: 1px solid #d5eded;
        }

        .department-popup-header label {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

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

        .selected-participant-item,
        .department-employee-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0.65rem 1rem;
            border-top: 1px solid #f0f1f3;
            font-size: 0.82rem;
        }

        .selected-participant-item:first-child,
        .department-employee-row:first-child {
            border-top: 0;
        }

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

        .department-employee-row {
            display: grid !important;
            grid-template-columns: 20px minmax(0, 1fr);
            align-items: start;
            justify-content: initial;
            min-width: 0;
            min-height: 68px;
            padding: 0.75rem;
            border: 1px solid #edf0f4 !important;
            border-radius: 0.6rem;
            background: #fff;
            cursor: pointer;
            transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
        }

        .department-employee-row:hover {
            border-color: #75c7c8 !important;
            background: #f4fbfb;
            transform: translateY(-1px);
        }

        .department-employee-row:has(.department-employee-checkbox:checked) {
            border-color: #b7dddd !important;
            background: #f7fcfc;
        }

        .department-employee-row .form-check-input {
            margin: 0.1rem 0 0;
        }

        .department-employee-row strong {
            display: block;
            overflow: hidden;
            color: #344767;
            font-size: 0.84rem;
            line-height: 1.3;
            text-overflow: ellipsis;
        }

        .department-employee-row small {
            margin-top: 0.25rem;
            font-size: 0.72rem;
        }

        .department-popup-employees {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.65rem;
            padding: 0.85rem;
            background: #fbfcfd;
        }

        #departmentParticipantsModal .modal-dialog {
            max-width: 1080px;
        }

        #departmentParticipantsModal .modal-content {
            overflow: hidden;
            border: 0;
            border-radius: 0.9rem;
            box-shadow: 0 15px 45px rgba(23, 43, 77, 0.2);
        }

        #departmentParticipantsModal .modal-header,
        #departmentParticipantsModal .modal-footer {
            padding: 1rem 1.25rem;
            border-color: #edf0f4;
        }

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

        .participant-modal-guide {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            margin-bottom: 0.85rem;
            padding: 0.8rem 1rem;
            color: #344767;
            font-size: 0.8rem;
            background: #edf8f8;
            border: 1px solid #cdeaea;
            border-radius: 0.65rem;
        }

        .participant-modal-guide-icon {
            color: #028284;
            font-size: 1.1rem;
            line-height: 1.2;
        }

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

        .participant-modal-toolbar {
            display: flex;
            align-items: stretch;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 0.85rem;
        }

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

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

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

        .participant-summary {
            display: flex;
            gap: 0.5rem;
        }

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

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

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

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

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

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

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

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

        .department-participant-table {
            width: 100%;
            table-layout: fixed;
        }

        .department-participant-table thead th {
            position: sticky;
            top: 0;
            z-index: 4;
            padding: 0.75rem 1rem;
            color: #67748e;
            font-size: 0.72rem;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            background: #fff;
            border-bottom: 1px solid #dfe5ec;
        }

        .department-participant-table .department-popup-header {
            display: table-row;
            position: static;
            min-height: 0;
            padding: 0;
            background: transparent;
            border: 0;
        }

        .department-participant-table .department-popup-header td {
            padding: 0.75rem 1rem;
            color: #025f61;
            background: #e8f7f7;
            border-top: 1px solid #cfe8e8;
            border-bottom: 1px solid #cfe8e8;
        }

        .department-participant-table .department-popup-header:first-child td {
            border-top: 0;
        }

        .department-participant-table .department-employee-row {
            display: table-row !important;
            min-height: 0;
            padding: 0;
            background: #fff;
            border: 0 !important;
            border-radius: 0;
            transform: none;
        }

        .department-participant-table .department-employee-row:hover {
            background: #f4fbfb;
            transform: none;
        }

        .department-participant-table .department-employee-row:has(.department-employee-checkbox:checked) {
            background: #f9fdfd;
        }

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

        .department-participant-table .department-employee-row.is-excluded td:not(:first-child) {
            color: #98a2b3 !important;
        }

        .department-participant-table .department-employee-row td {
            overflow: hidden;
            padding: 0.7rem 1rem;
            font-size: 0.82rem;
            vertical-align: middle;
            text-overflow: ellipsis;
            white-space: nowrap;
            border-bottom: 1px solid #edf0f4;
        }

        .department-participant-table .department-employee-name {
            display: block;
            overflow: hidden;
            color: #344767;
            font-weight: 600;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
        }

        .participant-select-toggle {
            min-width: 82px;
            padding: 0.34rem 0.65rem;
            color: #028284;
            font-size: 0.7rem;
            font-weight: 700;
            border: 1px solid #9bd5d6;
            border-radius: 999px;
            background: #fff;
            cursor: pointer;
            transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
        }

        .participant-select-toggle:hover {
            border-color: #028284;
            background: #f0fafa;
        }

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

        .participant-select-toggle.selected:hover {
            border-color: #dc3545;
            background: #dc3545;
        }

        .participant-select-toggle.selected:hover i::before {
            content: "\f068";
        }

        .department-select-all-button {
            padding: 0.3rem 0.65rem;
            color: #027b7d;
            font-size: 0.7rem;
            font-weight: 700;
            border: 1px solid #9bd5d6;
            border-radius: 0.45rem;
            background: #fff;
            cursor: pointer;
        }

        .department-select-all-button:hover {
            color: #fff;
            border-color: #028284;
            background: #028284;
        }

        .department-select-all-label {
            color: #67748e;
            font-size: 0.72rem;
            font-weight: 500;
        }

        .participant-status-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 104px;
            padding: 0.28rem 0.55rem;
            font-size: 0.68rem;
            font-weight: 700;
            border-radius: 999px;
        }

        .participant-status-badge.selected {
            color: #027b7d;
            background: #dcf3f3;
        }

        .participant-status-badge.excluded {
            color: #c5303e;
            background: #fde8ea;
        }

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

        .participant-search-empty i {
            font-size: 1.5rem;
        }

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

        .participant-search-empty span {
            margin-top: 0.2rem;
            font-size: 0.78rem;
        }

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

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

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

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

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

        .schedule-header-summary {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.3rem;
            margin-top: 0.18rem;
            color: #8392ab;
            font-size: 0.66rem;
            font-weight: 600;
        }

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

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

        .schedule-summary-separator {
            color: #c1c7d0;
        }

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

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

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

        .participant-pool-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 0.75rem;
            margin-bottom: 0.4rem;
            color: #67748e;
            font-size: 0.72rem;
            font-weight: 700;
        }

        .schedule-participant-dropzone {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            gap: 0.55rem;
            min-height: 82px;
            padding: 0.65rem;
            border: 1px dashed #b9c4d0;
            border-radius: 0.65rem;
            background: #fbfcfd;
            transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.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, 0.1);
        }

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

        .schedule-participant-chip:active {
            cursor: grabbing;
        }

        .schedule-participant-chip.is-dragging {
            opacity: 0.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: 0.72rem;
        }

        .schedule-participant-chip-copy small {
            margin-top: 0.08rem;
            color: #8392ab;
            font-size: 0.6rem;
        }

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

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

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

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

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

        .schedule-participant-modal-table tbody td {
            padding: 0.65rem 0.8rem;
            color: #344767;
            font-size: 0.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: 0.7;
        }

        .schedule-modal-select {
            min-width: 76px;
            padding: 0.3rem 0.55rem;
            color: #028284;
            font-size: 0.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: 0.22rem 0.45rem;
            font-size: 0.62rem;
            font-weight: 700;
            border-radius: 999px;
        }

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

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

        @media (max-width: 991.98px) {
            .department-popup-employees {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 575.98px) {
            .department-popup-employees {
                grid-template-columns: 1fr;
            }

            .department-participant-table {
                min-width: 660px;
            }
        }

        @media (max-width: 767.98px) {
            .participant-source-row {
                align-items: flex-start;
                flex-direction: column;
                gap: 0.8rem;
            }

            .participant-modal-toolbar {
                flex-direction: column;
            }

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

            .participant-summary-item {
                flex: 1;
                min-width: 0;
            }
        }
    </style>
@endpush

@push('js')
    <script src="{{ asset('/') }}assets/js/select2.min.js"></script>
    <script>
        let isSubmittingTna = false;

        $(document).ready(function() {
            $('#requestorSelect').select2({
                placeholder: 'Search requestor...',
                allowClear: true,
                width: '100%'
            });

            const superiorByRequestor = @json($superior_by_requestor);

            $('#superiorSelect').select2({
                placeholder: 'Search superior...',
                allowClear: true,
                width: '100%'
            });

            function fillSuperior() {
                const requestorNik = String($('#requestorSelect').val() || '');
                const superior = superiorByRequestor[requestorNik];

                if (superior && superior.superior_nik) {
                    $('#superiorSelect').val(String(superior.superior_nik)).trigger('change');
                    $('#superiorHelp').removeClass('text-warning').addClass('text-muted')
                        .text('Suggested from Organization Structure; you can select another superior.');
                } else {
                    $('#superiorSelect').val('').trigger('change');
                    $('#superiorHelp').removeClass('text-muted').addClass('text-warning')
                        .text(requestorNik ?
                            'Superior not found in the Organization Structure.' :
                            'Select a requestor to get a superior suggestion.');
                }
            }

            $('#requestorSelect').on('change', fillSuperior);

            // hanya dijalankan jika tidak ada nilai lama untuk superior_nik, agar tidak menimpa nilai lama saat validasi gagal
            @if (!old('superior_nik'))
                fillSuperior();
            @endif

            $('#participantsSelect').select2({
                placeholder: 'Search participants...',
                allowClear: true,
                width: '100%'
            });

            $('#participantDepartmentSelect').select2({
                placeholder: 'Select one or more departments...',
                allowClear: true,
                width: '100%'
            });

            @php
                $participantDepartmentMap = $karyawan_list->filter(fn($employee) => !empty($employee->id_departemen))->groupBy(fn($employee) => (string) $employee->id_departemen)->map(
                    fn($employees) => [
                        'name' => $employees->first()->departemen_name ?: 'No Department',
                        'employees' => $employees
                            ->map(
                                fn($employee) => [
                                    'nik' => (string) $employee->nik,
                                    'name' => $employee->nama,
                                ],
                            )
                            ->values(),
                    ],
                );
            @endphp

            const participantDepartmentMap = @json($participantDepartmentMap);

            // untuk menyimpan daftar department yang sudah dikonfigurasi agar tidak perlu memuat ulang data saat membuka modal
            const configuredParticipantDepartments = new Set();

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

            // render selected participant cards grouped by department
            function renderSelectedParticipantCards() {
                const selectedNiks = ($('#participantsSelect').val() || []).map(String);
                const groups = {};

                selectedNiks.forEach(function(nik) {
                    const option = $('#participantsSelect option').filter(function() {
                        return String($(this).val()) === nik;
                    }).first();
                    const departmentId = String(option.data('department-id') || 'none');
                    const departmentName = String(option.data('department-name') || 'No Department');
                    if (!groups[departmentId]) groups[departmentId] = {
                        name: departmentName,
                        employees: []
                    };
                    groups[departmentId].employees.push({
                        nik: nik,
                        name: String(option.data('employee-name') || option.text()).trim()
                    });
                });

                $('#selectedParticipantCount').text(`${selectedNiks.length} participant`);

                // reset participants button is disabled if no participants are selected
                $('#resetParticipantsBtn').prop('disabled', selectedNiks.length === 0);
                if (!selectedNiks.length) {
                    $('#selectedParticipantCards').html(
                        '<div class="col-12"><div class="participant-empty-state">No participants have been selected yet.</div></div>'
                    );
                    return;
                }

                const cards = Object.values(groups).sort((a, b) => a.name.localeCompare(b.name)).map(function(
                group) {
                    const employees = group.employees.sort((a, b) => a.name.localeCompare(b.name)).map(
                        function(employee) {
                            return `<div class="selected-participant-item">
                            <div><span class="font-weight-bold">${escapeParticipantText(employee.name)}</span>
                                <small class="text-muted ms-1">${escapeParticipantText(employee.nik)}</small></div>
                            <button type="button" class="btn participant-remove-btn" data-nik="${escapeParticipantText(employee.nik)}" title="Exclude participant">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>`;
                        }).join('');
                    return `<div class="col-lg-6">
                        <div class="participant-department-card">
                            <div class="participant-department-card-header">
                                <span><i class="fas fa-building me-2"></i>${escapeParticipantText(group.name)}</span>
                                <span class="badge bg-light text-dark">${group.employees.length}</span>
                            </div>
                            <div class="participant-department-card-body">${employees}</div>
                        </div>
                    </div>`;
                }).join('');
                $('#selectedParticipantCards').html(cards);
            }

            // set initial state of participant source toggle and help text
            $('#participantSourceToggle').on('change', function() {
                const byDepartment = $(this).is(':checked');
                $('#departmentParticipantControls').toggleClass('d-none', !byDepartment);
                $('#participantNameControls').toggleClass('d-none', byDepartment);
                $('#participantModeName').toggleClass('active', !byDepartment);
                $('#participantModeDepartment').toggleClass('active', byDepartment);
                $('#participantSourceHelp').html(byDepartment ?
                    '<i class="fas fa-info-circle"></i><span>Select one or more departments, then press Enter or click <b>Add</b> to select the employees to be included.</span>' :
                    '<i class="fas fa-info-circle"></i><span>Use the search field below to select participants by name or NIK.</span>'
                );
            });
            $('#participantSourceToggle').trigger('change');

            function updateModalParticipantCount() {
                const checked = $('#departmentEmployeeGroups .department-employee-checkbox:checked').length;
                const total = $('#departmentEmployeeGroups .department-employee-checkbox').length;
                const excluded = total - checked;
                $('#modalParticipantCount').text(`${checked} from ${total} employees selected`);
                $('#modalTotalCount').text(total);
                $('#modalSelectedCount').text(checked);
                $('#modalExcludedCount').text(excluded);

                // config button select all/deselect all text and state
                $('#departmentEmployeeGroups .department-employee-row').each(function() {
                    const isSelected = $(this).find('.department-employee-checkbox').is(':checked');
                    $(this).toggleClass('is-selected', isSelected).toggleClass('is-excluded', !isSelected);
                    $(this).find('.participant-select-toggle')
                        .toggleClass('selected', isSelected)
                        .attr('title', isSelected ? 'Click to exclude' : 'Click to select')
                        .html(isSelected ?
                            '<i class="fas fa-check me-1"></i>Selected' :
                            '<i class="fas fa-plus me-1"></i>Select');
                });

                // button bulk select
                $('#departmentEmployeeGroups .department-group-count').each(function() {
                    const departmentId = String($(this).data('department-id'));
                    const group = $(`.department-employee-checkbox[data-department-id="${departmentId}"]`);
                    const selectedCount = group.filter(':checked').length;
                    $(this).text(`${selectedCount} / ${group.length} selected`);
                    $(`.department-select-all-button[data-department-id="${departmentId}"]`)
                        .text(selectedCount === group.length ? 'Deselect All' : 'Select All')
                        .toggleClass('has-selection', selectedCount > 0);
                });
            }

            // fitur pencarian peserta departemen di modal
            function filterDepartmentParticipants() {
                // menangkap inputan pada field pencarian dan mengubahnya menjadi huruf kecil untuk pencocokan yang tidak sensitif terhadap huruf besar/kecil
                const keyword = String($('#departmentParticipantSearch').val() || '').trim().toLowerCase();
                let totalVisible = 0;
                $('#departmentEmployeeGroups .department-popup-header').each(function() {
                    const departmentId = String($(this).data('department-id'));
                    const rows = $(`.department-employee-row[data-department-id="${departmentId}"]`);
                    let visibleCount = 0;
                    rows.each(function() {
                        const visible = !keyword || $(this).text().toLowerCase().includes(keyword);
                        $(this).toggle(visible);
                        if (visible) {
                            visibleCount++;
                            totalVisible++;
                        }
                    });
                    $(this).toggle(visibleCount > 0);
                });
                $('#departmentEmployeeGroups .department-participant-table').toggle(totalVisible > 0);
                $('#participantSearchEmpty').toggleClass('d-none', totalVisible > 0);
            }

            function openDepartmentParticipantsModal() {
                const departmentIds = ($('#participantDepartmentSelect').val() || []).map(String);
                if (!departmentIds.length) {
                    Swal.fire({
                        title: 'Pilih departemen',
                        text: 'Pilih minimal satu departemen terlebih dahulu.',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                const currentParticipants = new Set(($('#participantsSelect').val() || []).map(String));
                let participantNumber = 0;
                const tableRows = departmentIds.map(function(departmentId, groupIndex) {
                    const department = participantDepartmentMap[departmentId];
                    if (!department) return '';
                    const isConfigured = configuredParticipantDepartments.has(departmentId);
                    const employees = department.employees.map(function(employee, employeeIndex) {
                        participantNumber++;
                        const checked = !isConfigured || currentParticipants.has(String(employee
                            .nik));
                        const checkboxId = `deptEmployee_${groupIndex}_${employeeIndex}`;
                        return `<tr class="department-employee-row ${checked ? 'is-selected' : 'is-excluded'}"
                            data-department-id="${escapeParticipantText(departmentId)}">
                            <td class="text-center">
                                <input class="form-check-input department-employee-checkbox" type="checkbox"
                                    id="${checkboxId}" data-department-id="${escapeParticipantText(departmentId)}"
                                    value="${escapeParticipantText(employee.nik)}" ${checked ? 'checked' : ''} hidden>
                                <button type="button" class="participant-select-toggle ${checked ? 'selected' : ''}"
                                    data-checkbox-id="${checkboxId}"
                                    title="${checked ? 'Klik untuk mengecualikan' : 'Klik untuk memilih'}">
                                    <i class="fas ${checked ? 'fa-check' : 'fa-plus'} me-1"></i>${checked ? 'Selected' : 'Select'}
                                </button>
                            </td>
                            <td class="text-center text-muted">${participantNumber}</td>
                            <td class="font-weight-bold text-dark">${escapeParticipantText(employee.nik)}</td>
                            <td><span class="department-employee-name">${escapeParticipantText(employee.name)}</span></td>
                        </tr>`;
                    }).join('');
                    return `<tr class="department-popup-header" data-department-id="${escapeParticipantText(departmentId)}">
                            <td colspan="4">
                                <div class="d-flex align-items-center justify-content-between gap-3">
                                    <div class="font-weight-bold">
                                        <i class="fas fa-building me-2"></i>${escapeParticipantText(department.name)}
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="badge bg-light text-dark department-group-count"
                                            data-department-id="${escapeParticipantText(departmentId)}"></span>
                                        <button type="button" class="department-select-all-button"
                                            data-department-id="${escapeParticipantText(departmentId)}">Deselect All</button>
                                    </div>
                                </div>
                            </td>
                        </tr>${employees}`;
                }).join('');

                $('#departmentEmployeeGroups').html(`<div class="table-responsive department-participant-table-wrap w-100">
                    <table class="table department-participant-table mb-0">
                        <thead>
                            <tr>
                                <th class="text-center" style="width: 120px;">Selection</th>
                                <th class="text-center" style="width: 58px;">No.</th>
                                <th style="width: 190px;">NIK</th>
                                <th>Nama Karyawan</th>
                            </tr>
                        </thead>
                        <tbody>${tableRows}</tbody>
                    </table>
                </div>
                <div id="participantSearchEmpty" class="participant-search-empty d-none">
                    <i class="fas fa-search mb-2"></i>
                    <strong>Karyawan tidak ditemukan</strong>
                    <span>Coba gunakan nama atau NIK yang berbeda.</span>
                </div>`);
                $('#departmentParticipantSearch').val('');
                updateModalParticipantCount();
                bootstrap.Modal.getOrCreateInstance(document.getElementById('departmentParticipantsModal')).show();
            }

            $('#addDepartmentParticipantsBtn').on('click', openDepartmentParticipantsModal);

            $('#departmentParticipantSearch').on('input', filterDepartmentParticipants);

            $('#participantDepartmentSelect').next('.select2').find('.select2-selection').on('keydown', function(
                event) {
                if (event.key === 'Enter' && !$('#participantDepartmentSelect').data('select2').isOpen()) {
                    event.preventDefault();
                    openDepartmentParticipantsModal();
                }
            });

            $(document).on('keydown', '#participantDepartmentSelect + .select2 .select2-search__field', function(
                event) {
                const hasDepartments = ($('#participantDepartmentSelect').val() || []).length > 0;
                if (event.key === 'Enter' && hasDepartments && !String($(this).val() || '').trim()) {
                    event.preventDefault();
                    event.stopPropagation();
                    $('#participantDepartmentSelect').select2('close');
                    setTimeout(openDepartmentParticipantsModal, 0);
                }
            });

            $('#departmentEmployeeGroups').on('click', '.department-select-all-button', function() {
                const departmentId = String($(this).data('department-id'));
                const groupCheckboxes = $(
                    `.department-employee-checkbox[data-department-id="${departmentId}"]`);
                const shouldSelect = groupCheckboxes.filter(':checked').length !== groupCheckboxes.length;
                groupCheckboxes.prop('checked', shouldSelect);
                updateModalParticipantCount();
            }).on('click', '.participant-select-toggle', function() {
                const checkbox = document.getElementById($(this).data('checkbox-id'));
                checkbox.checked = !checkbox.checked;
                updateModalParticipantCount();
            });

            $('#applyDepartmentParticipantsBtn').on('click', function() {
                const departmentIds = ($('#participantDepartmentSelect').val() || []).map(String);
                const participants = new Set(($('#participantsSelect').val() || []).map(String));
                departmentIds.forEach(function(departmentId) {
                    const department = participantDepartmentMap[departmentId];
                    if (!department) return;
                    department.employees.forEach(employee => participants.delete(String(employee
                        .nik)));
                    $(`.department-employee-checkbox[data-department-id="${departmentId}"]:checked`)
                        .each(function() {
                            participants.add(String($(this).val()));
                        });
                    configuredParticipantDepartments.add(departmentId);
                });
                $('#participantsSelect').val(Array.from(participants)).trigger('change');
                bootstrap.Modal.getOrCreateInstance(document.getElementById('departmentParticipantsModal'))
                    .hide();
            });

            $('#selectedParticipantCards').on('click', '.participant-remove-btn', function() {
                const removedNik = String($(this).data('nik'));
                const participants = ($('#participantsSelect').val() || []).map(String).filter(nik =>
                    nik !== removedNik);
                $('#participantsSelect').val(participants).trigger('change');
            });

            $('#resetParticipantsBtn').on('click', function() {
                const participantCount = ($('#participantsSelect').val() || []).length;
                if (!participantCount) return;

                Swal.fire({
                    title: 'Reset semua participant?',
                    text: `${participantCount} participant akan dihapus dari Header dan alokasi Schedule.`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Reset',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#8392ab'
                }).then(function(result) {
                    if (!result.isConfirmed) return;
                    $('#participantsSelect').val([]).trigger('change');
                });
            });

            $('#participantsSelect').on('change', renderSelectedParticipantCards);
            renderSelectedParticipantCards();

            @php
                $trainerOptionData = $karyawan_list
                    ->map(function ($trainer) {
                        return [
                            'nik' => (string) $trainer->nik,
                            'name' => $trainer->nama,
                            'label' => $trainer->nik . ' - ' . $trainer->nama . ' - ' . ($trainer->departemen_name ?: 'No Dept'),
                        ];
                    })
                    ->values();
            @endphp
            const trainerOptions = {{ Illuminate\Support\Js::from($trainerOptionData) }};

            let scheduleIndex = 0;
            const oldSchedules = @json(old('schedules', []));
            const hasServerOldInput = @json(session()->hasOldInput());
            const tnaDraftKey = 'trstna_create_draft_v1';
            let localDraft = null;

            try {
                localDraft = JSON.parse(localStorage.getItem(tnaDraftKey) || 'null');
            } catch (error) {
                localStorage.removeItem(tnaDraftKey);
            }

            function collectTnaDraft() {
                const schedules = [];
                $('.schedule-create-row').each(function() {
                    schedules.push({
                        tna_date: $(this).find('input[type="date"]').val() || '',
                        tna_start_time: $(this).find('.schedule-start-time').val() || '',
                        tna_end_time: $(this).find('.schedule-end-time').val() || '',
                        institution_name: $(this).find('.schedule-institution').val() || 'internal',
                        trainer_name: $(this).find('.schedule-institution').val() === 'internal' ?
                            ($(this).find('.schedule-trainer-internal').val() || '') : ($(this)
                                .find('.schedule-trainer-external').val() || ''),
                        trainer_nik: $(this).find('.schedule-institution').val() === 'internal' ?
                            ($(this).find('.schedule-trainer-internal option:selected').data(
                                'nik') || '') : '',
                        participants: ($(this).find('.schedule-participants').val() || []).map(
                            String)
                    });
                });

                return {
                    name_trn: $('#name_trn').val() || '',
                    requestor_nik: $('#requestorSelect').val() || '',
                    month_estimation: $('#month_estimation').val() || '',
                    description: $('#description').val() || '',
                    type_training: $('#type_training').val() || 'reguler',
                    with_score: $('#with_score').val() || '0',
                    superior_nik: $('#superiorSelect').val() || '',
                    participants: ($('#participantsSelect').val() || []).map(String),
                    problem_desc: $('#problem_desc').val() || '',
                    proposed_trn: $('#proposed_trn').val() || '',
                    trn_method: $('[name="trn_method"]').val() || '',
                    schedules: schedules,
                    saved_at: new Date().toISOString()
                };
            }

            function saveTnaDraft() {
                localStorage.setItem(tnaDraftKey, JSON.stringify(collectTnaDraft()));
            }
            window.saveTnaDraft = saveTnaDraft;

            function restoreTnaDraft(draft) {
                $('#name_trn').val(draft.name_trn || '');
                $('#requestorSelect').val(draft.requestor_nik || '').trigger('change');
                $('#month_estimation').val(draft.month_estimation || '');
                $('#description').val(draft.description || '');
                $('#type_training').val(draft.type_training || 'reguler').trigger('change');
                $('#with_score').val(draft.with_score || '0').trigger('change');
                $('#superiorSelect').val(draft.superior_nik || '').trigger('change');
                $('#participantsSelect').val((draft.participants || []).map(String)).trigger('change');
                $('#problem_desc').val(draft.problem_desc || '');
                $('#proposed_trn').val(draft.proposed_trn || '');
                $('[name="trn_method"]').val(draft.trn_method || '');
            }

            function minimumScheduleDate() {
                const today = '{{ date('Y-m-d') }}';
                const estimationDate = $('#month_estimation').val();
                return estimationDate && estimationDate > today ? estimationDate : today;
            }

            function syncScheduleDateMinimum() {
                const minimumDate = minimumScheduleDate();
                $('.schedule-create-row input[type="date"]').each(function() {
                    const dateInput = this;
                    $(dateInput).attr('min', minimumDate);
                    const isInvalid = dateInput.value && dateInput.value < minimumDate;
                    dateInput.setCustomValidity(isInvalid ? `Tanggal schedule minimal ${minimumDate}.` :
                        '');
                    $(dateInput).toggleClass('is-invalid', Boolean(isInvalid));
                    $(dateInput).siblings('.schedule-date-help')
                        .toggleClass('d-none', !isInvalid)
                        .text(isInvalid ? `Tanggal minimal ${minimumDate}.` : '');
                });
            }

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

            function updateScheduleHeaderSummary(row) {
                const date = row.find('input[type="date"]').val() || '';
                const startTime = row.find('.schedule-start-time').val() || '-';
                const endTime = row.find('.schedule-end-time').val() || '-';
                row.find('.schedule-summary-date').text(formatScheduleSummaryDate(date));
                row.find('.schedule-summary-time').text(`${startTime} - ${endTime}`);
                row.find('.schedule-summary-duration').text(calculateDuration(
                    row.find('.schedule-start-time').val(),
                    row.find('.schedule-end-time').val()
                ));
            }



            function calculateDuration(startTime, endTime) {
                const diffMinutes = getScheduleDurationMinutes(startTime, endTime);
                if (!diffMinutes) return '-';
                const hours = Math.floor(diffMinutes / 60);
                const minutes = diffMinutes % 60;
                if (!hours) return `${minutes} menit`;
                return `${hours} jam${minutes ? ` ${minutes} menit` : ''}`;
            }

            function updateScheduleDuration(row) {
                const startTime = row.find('.schedule-start-time').val() || '';
                const endTime = row.find('.schedule-end-time').val() || '';
                const durationMinutes = getScheduleDurationMinutes(startTime, endTime);
                console.log(durationMinutes);
                const academyTooShort = $('#type_training').val() === 'academy' && durationMinutes !== null &&
                    durationMinutes < 30;
                row.find('.schedule-duration').val(calculateDuration(startTime, endTime));
                row.find('.schedule-end-time').toggleClass('is-invalid', academyTooShort)[0].setCustomValidity(
                    academyTooShort ?
                    'Durasi schedule Academy minimal 30 menit.' : 'null');
                row.find('.schedule-duration-help')
                    .toggleClass('text-muted', !academyTooShort)
                    .toggleClass('text-danger', academyTooShort)
                    .text(academyTooShort ? 'Durasi Academy minimal 30 menit.' : '');
            }

            let refreshingScheduleAllocation = false;

            function getScheduleAssignments() {
                const assignments = {};
                $('.schedule-create-row').each(function(position) {
                    ($(this).find('.schedule-participants').val() || []).forEach(function(nik) {
                        assignments[String(nik)] = position + 1;
                    });
                });
                return assignments;
            }

            function participantOptions(selectedValues, scheduleNumber = null, assignments = {}) {
                const selected = (selectedValues || []).map(String);
                let html = '';
                $('#participantsSelect option:selected').each(function() {
                    const value = String($(this).val());
                    const assignedSchedule = assignments[value];
                    const assignedElsewhere = assignedSchedule && assignedSchedule !== scheduleNumber && !
                        selected.includes(value);
                    const optionText = $(this).text().trim() +
                        (assignedElsewhere ? ` — Scheduled in Schedule ${assignedSchedule}` : '');
                    const label = $('<div>').text(optionText).html();
                    html +=
                        `<option value="${$('<div>').text(value).html()}" ${selected.includes(value) ? 'selected' : ''} ${assignedElsewhere ? 'disabled' : ''}>${label}</option>`;
                });
                return html;
            }

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

            function setScheduleParticipants(row, niks) {
                const participantMap = getHeaderParticipantMap();
                const options = niks.filter(nik => participantMap[String(nik)]).map(function(nik) {
                    const participant = participantMap[String(nik)];
                    return `<option value="${escapeParticipantText(participant.nik)}" selected>${escapeParticipantText(participant.name)} (${escapeParticipantText(participant.nik)})</option>`;
                }).join('');
                row.find('.schedule-participants').html(options);
            }

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

            function refreshScheduleAllocation() {
                if (refreshingScheduleAllocation) return;
                refreshingScheduleAllocation = true;

                const participantMap = getHeaderParticipantMap();
                const participants = Object.values(participantMap);
                const usedNiks = new Set();

                $('.schedule-create-row').each(function() {
                    const row = $(this);
                    const current = (row.find('.schedule-participants').val() || []).map(String)
                        .filter(nik => participantMap[nik] && !usedNiks.has(nik));
                    current.forEach(nik => usedNiks.add(nik));
                    setScheduleParticipants(row, current);
                });

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

                const assignedCount = participants.filter(item => assignments[item.nik]).length;
                $('#participantAllocationCount')
                    .text(`${assignedCount} / ${participants.length} scheduled`)
                    .removeClass('bg-secondary bg-success bg-warning text-dark')
                    .addClass(participants.length && assignedCount === participants.length ? 'bg-success' :
                        'bg-warning text-dark');

                if (!participants.length) {
                    $('#unassignedParticipantCount').text('0');
                    $('#participantAllocationStatus').html(
                        '<div class="schedule-dropzone-empty"><i class="fas fa-users"></i><span>Pilih participant pada Header terlebih dahulu</span></div>'
                    );
                } else {
                    const unassigned = participants.filter(item => !assignments[item.nik]);
                    $('#unassignedParticipantCount').text(unassigned.length);
                    $('#participantAllocationStatus').html(unassigned.length ?
                        unassigned.map(item => participantDragCard(item)).join('') :
                        '<div class="schedule-dropzone-empty is-complete"><i class="fas fa-check-circle"></i><span>Semua participant sudah terjadwal</span></div>'
                    );
                }

                refreshingScheduleAllocation = false;
            }

            function addScheduleRow(data = {}) {
                const index = scheduleIndex++;
                const date = data.tna_date || '';
                const safeDate = $('<div>').text(String(date)).html();
                const selected = data.participants || [];
                const trainerOptionHtml = ['<option value="">-- Select Trainer --</option>'].concat(trainerOptions
                    .map(function(trainer) {
                        const selectedTrainer = String(data.trainer_nik || '') === trainer.nik ?
                            ' selected' : '';
                        return `<option value="${$('<div>').text(trainer.name).html()}" data-nik="${$('<div>').text(trainer.nik).html()}"${selectedTrainer}>${$('<div>').text(trainer.label).html()}</option>`;
                    })).join('');
                const row = $(`
                    <div class="border rounded mb-3 schedule-create-row" data-index="${index}">
                        <div class="schedule-create-header d-flex justify-content-between align-items-center gap-2 p-3">
                            <button type="button" class="schedule-collapse-toggle" data-bs-toggle="collapse"
                                data-bs-target="#scheduleCreateBody${index}" aria-expanded="true"
                                aria-controls="scheduleCreateBody${index}">
                                <span class="schedule-chevron"><i class="fas fa-chevron-down"></i></span>
                                <span class="schedule-header-copy">
                                    <span class="fw-bold text-sm text-dark">Schedule <span class="schedule-number"></span></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">·</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-allocation-count">0 participants</span>
                                <button type="button" class="btn btn-outline-danger btn-sm remove-schedule mb-0" title="Remove Schedule"><i class="fas fa-trash"></i></button>
                            </div>
                        </div>
                        <div class="collapse show schedule-create-body" id="scheduleCreateBody${index}">
                        <div class="row g-3 align-items-end p-3 pt-0">
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" name="schedules[${index}][tna_date]" value="${safeDate}" min="${minimumScheduleDate()}" required>
                                <small class="text-danger schedule-date-help d-none"></small>
                            </div>
                            <div class="col-md-3"><label class="form-label fw-bold">Start Time <span class="text-danger">*</span></label><input type="time" class="form-control schedule-start-time" name="schedules[${index}][tna_start_time]" value="${$('<div>').text(data.tna_start_time || '').html()}" required></div>
                            <div class="col-md-3"><label class="form-label fw-bold">End Time <span class="text-danger">*</span></label><input type="time" class="form-control schedule-end-time" name="schedules[${index}][tna_end_time]" value="${$('<div>').text(data.tna_end_time || '').html()}" required></div>
                            <div class="col-md-3"><label class="form-label fw-bold">Duration</label><div class="input-group"><span class="input-group-text"><i class="fas fa-hourglass-half"></i></span><input type="text" class="form-control schedule-duration bg-light" value="-" readonly tabindex="-1"></div><small class="text-muted schedule-duration-help"></small></div>
                            <div class="col-md-6"><label class="form-label fw-bold">Institution Type <span class="text-danger">*</span></label><select class="form-select schedule-institution" name="schedules[${index}][institution_name]"><option value="internal" ${data.institution_name !== 'external' ? 'selected' : ''}>Internal</option><option value="external" ${data.institution_name === 'external' ? 'selected' : ''}>External</option></select></div>
                            <div class="col-md-6 schedule-trainer-internal-wrap"><label class="form-label fw-bold">Trainer <span class="text-danger">*</span></label><select class="form-select schedule-trainer-internal" name="schedules[${index}][trainer_name]" style="width:100%">${trainerOptionHtml}</select><input type="hidden" class="schedule-trainer-nik" name="schedules[${index}][trainer_nik]" value="${$('<div>').text(data.trainer_nik || '').html()}"></div>
                            <div class="col-md-6 schedule-trainer-external-wrap d-none"><label class="form-label fw-bold">Trainer <span class="text-danger">*</span></label><input type="text" class="form-control schedule-trainer-external" value="${$('<div>').text(data.institution_name === 'external' ? (data.trainer_name || '') : '').html()}"></div>
                            <div class="col-12">
                                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2">
                                    <label class="form-label fw-bold mb-0">Participants <span class="text-danger">*</span></label>
                                    <button type="button" class="btn btn-outline-primary btn-sm mb-0 open-schedule-participant-modal">
                                        <i class="fas fa-users me-1"></i>Pilih via Modal
                                    </button>
                                </div>
                                <select class="schedule-participants d-none" name="schedules[${index}][participants][]" multiple>${participantOptions(selected)}</select>
                                <div class="schedule-participant-dropzone" data-drop-target="schedule" data-schedule-index="${index}">
                                    <div class="schedule-dropzone-empty"><i class="fas fa-hand-pointer"></i><span>Drop participant di sini atau pilih melalui modal</span></div>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>`);
                $('#scheduleRows').append(row);
                row.find('.schedule-trainer-internal').select2({
                    placeholder: 'Select trainer...',
                    width: '100%'
                });
                syncScheduleTrainer(row);
                updateScheduleHeaderSummary(row);
                updateScheduleDuration(row);
                $('#createScheduleCount').text($('.schedule-create-row').length);
                refreshScheduleAllocation();
                syncScheduleDateMinimum();
            }

            function syncScheduleTrainer(row) {
                const internal = row.find('.schedule-institution').val() === 'internal';
                row.find('.schedule-trainer-internal-wrap').toggleClass('d-none', !internal);
                row.find('.schedule-trainer-external-wrap').toggleClass('d-none', internal);
                row.find('.schedule-trainer-internal').prop('disabled', !internal);
                row.find('.schedule-trainer-external').prop('disabled', internal);
                row.find('.schedule-trainer-internal').attr('name', internal ?
                    `schedules[${row.data('index')}][trainer_name]` : '');
                row.find('.schedule-trainer-external').attr('name', internal ? '' :
                    `schedules[${row.data('index')}][trainer_name]`);
                row.find('.schedule-trainer-nik').val(internal ? (row.find(
                    '.schedule-trainer-internal option:selected').data('nik') || '') : '');
            }

            let activeScheduleParticipantIndex = null;

            function getScheduleAssignmentIndexes() {
                const assignments = {};
                $('.schedule-create-row').each(function() {
                    const scheduleIndexValue = String($(this).data('index'));
                    ($(this).find('.schedule-participants').val() || []).forEach(function(nik) {
                        assignments[String(nik)] = scheduleIndexValue;
                    });
                });
                return assignments;
            }

            function moveParticipantToSchedule(nik, targetScheduleIndex = null) {
                nik = String(nik);
                $('.schedule-create-row').each(function() {
                    const row = $(this);
                    const remaining = (row.find('.schedule-participants').val() || []).map(String)
                        .filter(value => value !== nik);
                    setScheduleParticipants(row, remaining);
                });

                if (targetScheduleIndex !== null) {
                    const targetRow = $('.schedule-create-row').filter(function() {
                        return String($(this).data('index')) === String(targetScheduleIndex);
                    }).first();
                    if (targetRow.length) {
                        const targetNiks = (targetRow.find('.schedule-participants').val() || []).map(String);
                        if (!targetNiks.includes(nik)) targetNiks.push(nik);
                        setScheduleParticipants(targetRow, targetNiks);
                    }
                }

                refreshScheduleAllocation();
                if (typeof window.saveTnaDraft === 'function') window.saveTnaDraft();
            }

            function updateScheduleParticipantModalCount() {
                const selectedCount = $('#scheduleParticipantModalRows .schedule-modal-select.selected').length;
                $('#scheduleParticipantModalCount').text(`${selectedCount} participant dipilih`);
            }

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

            function openScheduleParticipantModal(row) {
                const participantMap = getHeaderParticipantMap();
                const participants = Object.values(participantMap).sort((a, b) => a.name.localeCompare(b.name));
                const assignments = getScheduleAssignmentIndexes();
                activeScheduleParticipantIndex = String(row.data('index'));
                const scheduleNumber = $('.schedule-create-row').index(row) + 1;
                $('#scheduleParticipantModalNumber').text(scheduleNumber);
                $('#scheduleParticipantSearch').val('');

                const rows = participants.map(function(participant) {
                    const assignedIndex = assignments[participant.nik];
                    const isCurrent = assignedIndex === activeScheduleParticipantIndex;
                    const isUnavailable = assignedIndex !== undefined && !isCurrent;
                    const assignedRow = isUnavailable ? $('.schedule-create-row').filter(function() {
                        return String($(this).data('index')) === assignedIndex;
                    }).first() : $();
                    const assignedNumber = assignedRow.length ? $('.schedule-create-row').index(
                        assignedRow) + 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(participant.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(participant.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('');

                $('#scheduleParticipantModalRows').html(rows);
                updateScheduleParticipantModalCount();
                filterScheduleParticipantModal();
                bootstrap.Modal.getOrCreateInstance(document.getElementById('scheduleParticipantsModal')).show();
            }

            $('#scheduleRows').on('click', '.open-schedule-participant-modal', function() {
                openScheduleParticipantModal($(this).closest('.schedule-create-row'));
            }).on('click', '.participant-unassign-button', function(event) {
                event.stopPropagation();
                moveParticipantToSchedule($(this).closest('.schedule-participant-chip').attr('data-nik'));
            });

            $('#scheduleParticipantModalRows').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);
                updateScheduleParticipantModalCount();
            });

            $('#scheduleParticipantSearch').on('input', filterScheduleParticipantModal);

            $('#applyScheduleParticipantsBtn').on('click', function() {
                const row = $('.schedule-create-row').filter(function() {
                    return String($(this).data('index')) === activeScheduleParticipantIndex;
                }).first();
                const niks = $('#scheduleParticipantModalRows .schedule-modal-select.selected').map(
                    function() {
                        return String($(this).attr('data-nik'));
                    }).get();
                setScheduleParticipants(row, niks);
                refreshScheduleAllocation();
                if (typeof window.saveTnaDraft === 'function') window.saveTnaDraft();
                bootstrap.Modal.getOrCreateInstance(document.getElementById('scheduleParticipantsModal'))
                    .hide();
            });

            $(document).on('dragstart', '.schedule-participant-chip', function(event) {
                const nik = String($(this).attr('data-nik'));
                event.originalEvent.dataTransfer.setData('text/plain', nik);
                event.originalEvent.dataTransfer.effectAllowed = 'move';
                $(this).addClass('is-dragging');
            }).on('dragend', '.schedule-participant-chip', function() {
                $('.schedule-participant-chip').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) {
                const relatedTarget = event.originalEvent.relatedTarget;
                if (!relatedTarget || !this.contains(relatedTarget)) $(this).removeClass('is-drag-over');
            }).on('drop', '.schedule-participant-dropzone', function(event) {
                event.preventDefault();
                const nik = event.originalEvent.dataTransfer.getData('text/plain');
                const targetIndex = $(this).data('drop-target') === 'schedule' ?
                    String($(this).data('schedule-index')) : null;
                $('.schedule-participant-dropzone').removeClass('is-drag-over');
                if (nik) moveParticipantToSchedule(nik, targetIndex);
            });

            function updateToggleAllSchedulesButton() {
                const bodies = $('.schedule-create-body');
                const hasOpenSchedule = bodies.filter('.show').length > 0;
                $('#toggleAllSchedulesBtn')
                    .attr('title', hasOpenSchedule ? 'Tutup semua detail schedule' : 'Buka semua detail schedule')
                    .find('i').attr('class', hasOpenSchedule ? 'fas fa-angles-up me-1' : 'fas fa-angles-down me-1');
                $('#toggleAllSchedulesBtn span').text(hasOpenSchedule ? 'Collapse All' : 'Expand All');
            }

            $('#addScheduleBtn').on('click', () => {
                addScheduleRow();
                updateToggleAllSchedulesButton();
            });

            $('#toggleAllSchedulesBtn').on('click', function() {
                const shouldCollapse = $('.schedule-create-body.show').length > 0;
                $('.schedule-create-body').each(function() {
                    const collapse = bootstrap.Collapse.getOrCreateInstance(this, {
                        toggle: false
                    });
                    if (shouldCollapse) collapse.hide();
                    else collapse.show();
                });
            });

            $('#scheduleRows').on('shown.bs.collapse hidden.bs.collapse', '.schedule-create-body',
                updateToggleAllSchedulesButton);
            $('#scheduleRows').on('click', '.remove-schedule', function() {
                $(this).closest('.schedule-create-row').remove();
                if (!$('.schedule-create-row').length) addScheduleRow();
                $('#createScheduleCount').text($('.schedule-create-row').length);
                refreshScheduleAllocation();
                updateToggleAllSchedulesButton();
            });
            $('#participantsSelect').on('change', function() {
                refreshScheduleAllocation();
            });
            $('#scheduleRows').on('change', '.schedule-participants', refreshScheduleAllocation);
            $('#scheduleRows').on('change', '.schedule-institution, .schedule-trainer-internal', function() {
                syncScheduleTrainer($(this).closest('.schedule-create-row'));
            });

            if (localDraft && !hasServerOldInput) {
                restoreTnaDraft(localDraft);
            }

            const schedulesToRestore = !hasServerOldInput && localDraft && Array.isArray(localDraft.schedules) ?
                localDraft.schedules : oldSchedules;
            if (Array.isArray(schedulesToRestore) && schedulesToRestore.length) {
                schedulesToRestore.forEach(addScheduleRow);
            } else {
                addScheduleRow();
            }
            updateToggleAllSchedulesButton();

            $('#month_estimation').on('change', syncScheduleDateMinimum);
            $('#type_training').on('change', function() {
                $('.schedule-create-row').each(function() {
                    updateScheduleDuration($(this));
                });
            });
            $('#scheduleRows').on('input change', 'input[type="date"], .schedule-start-time, .schedule-end-time',
                function() {
                    const row = $(this).closest('.schedule-create-row');
                    updateScheduleHeaderSummary(row);
                    updateScheduleDuration(row);
                });
            $('#scheduleRows').on('change', 'input[type="date"]', syncScheduleDateMinimum);
            $('#createTnaForm').on('input change', 'input, textarea, select', saveTnaDraft);
            window.addEventListener('beforeunload', saveTnaDraft);
            syncScheduleDateMinimum();

            @if ($errors->has('problem_desc') || $errors->has('proposed_trn'))
                bootstrap.Tab.getOrCreateInstance(document.querySelector('[data-bs-target="#create-detail"]'))
                    .show();
            @elseif ($errors->has('schedules') || $errors->has('schedules.*'))
                bootstrap.Tab.getOrCreateInstance(document.querySelector('[data-bs-target="#create-schedule"]'))
                    .show();
            @endif
        });

        function getScheduleDurationMinutes(startTime, endTime) {
            if (!startTime || !endTime) return null;
            const [startH, startM] = startTime.split(':').map(Number);
            const [endH, endM] = endTime.split(':').map(Number);
            const startMinutes = startH * 60 + startM;
            const endMinutes = endH * 60 + endM;
            const diffMinutes = endMinutes - startMinutes;
            return Number.isFinite(diffMinutes) && diffMinutes > 0 ? diffMinutes : null;
        }

        function submitForm() {
            if (isSubmittingTna) return;

            if (typeof window.saveTnaDraft === 'function') {
                window.saveTnaDraft();
            }

            var name = $('#name_trn').val();
            var requestor = $('#requestorSelect').val();
            var description = $('#description').val().trim();
            var participants = $('#participantsSelect').val() || [];
            var problem = $('#problem_desc').val().trim();
            var proposed = $('#proposed_trn').val().trim();
            var scheduleRows = $('.schedule-create-row').length;

            if (!name || !requestor || !description || !participants.length || !problem || !proposed || !scheduleRows) {
                var missing = [];
                if (!name) missing.push('Training Name');
                if (!requestor) missing.push('Requestor');
                if (!description) missing.push('Description');
                if (!participants.length) missing.push('Participants');
                if (!problem) missing.push('Problem Description');
                if (!proposed) missing.push('Proposed Training');
                if (!scheduleRows) missing.push('Schedule');

                Swal.fire({
                    title: 'Validation Error',
                    text: missing.join(', ') + ' wajib diisi!',
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                });
                if (!problem || !proposed) {
                    bootstrap.Tab.getOrCreateInstance(document.querySelector('[data-bs-target="#create-detail"]')).show();
                } else if (!participants.length || !scheduleRows) {
                    bootstrap.Tab.getOrCreateInstance(document.querySelector('[data-bs-target="#create-schedule"]')).show();
                }
                return;
            }

            var scheduled = [];
            var scheduleValid = true;
            var invalidScheduleDate = false;
            var academyDurationInvalid = false;
            var duplicateSchedule = false;
            var scheduleSignatures = new Set();
            $('.schedule-create-row').each(function() {
                var date = $(this).find('input[type="date"]').val();
                var startTime = $(this).find('.schedule-start-time').val();
                var endTime = $(this).find('.schedule-end-time').val();
                var institution = $(this).find('.schedule-institution').val();
                var trainerName = institution === 'internal' ? $(this).find(
                    '.schedule-trainer-internal').val() : $(this).find('.schedule-trainer-external').val();
                var trainerKey = institution === 'internal' ?
                    String($(this).find('.schedule-trainer-internal option:selected').data('nik') || '') :
                    String(trainerName || '').trim().toLowerCase();
                var minimumDate = $(this).find('input[type="date"]').attr('min');
                var niks = $(this).find('.schedule-participants').val() || [];
                if (!date || !startTime || !endTime || endTime <= startTime || !trainerName || !niks.length)
                    scheduleValid = false;
                if ($('#type_training').val() === 'academy' &&
                    (getScheduleDurationMinutes(startTime, endTime) || 0) < 30) academyDurationInvalid = true;
                if (date && minimumDate && date < minimumDate) invalidScheduleDate = true;
                var signature = [date, startTime, endTime, institution, trainerKey].join('|');
                if (scheduleSignatures.has(signature)) duplicateSchedule = true;
                scheduleSignatures.add(signature);
                scheduled = scheduled.concat(niks.map(String));
            });
            var duplicate = scheduled.some((nik, index) => scheduled.indexOf(nik) !== index);
            var missingSchedule = participants.map(String).filter(nik => !scheduled.includes(nik));
            if (!scheduleValid || invalidScheduleDate || academyDurationInvalid || duplicateSchedule || duplicate ||
                missingSchedule.length ||
                scheduled.length !==
                participants.length) {
                var scheduleErrorMessage = 'The date, time, trainer, and participant schedule are required.';
                if (invalidScheduleDate) scheduleErrorMessage =
                    'The schedule date cannot be earlier than the Estimated Date or today.';
                else if (academyDurationInvalid) scheduleErrorMessage = 'Durasi setiap schedule Academy minimal 30 menit.';
                else if (duplicateSchedule) scheduleErrorMessage =
                    'The date, start time, end time, and trainer cannot be the same as another schedule.';
                else if (duplicate) scheduleErrorMessage = 'A participant cannot be assigned to more than one schedule.';
                else if (missingSchedule.length) scheduleErrorMessage = 'All participants must be assigned to a schedule.';
                Swal.fire({
                    title: 'Schedule is not valid yet.',
                    text: scheduleErrorMessage,
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                });
                bootstrap.Tab.getOrCreateInstance(document.querySelector('[data-bs-target="#create-schedule"]')).show();
                return;
            }

            isSubmittingTna = true;
            $('#saveTnaBtn').prop('disabled', true);

            Swal.fire({
                title: 'Saving TNA...',
                text: 'Please wait. Your Header, Detail, and Schedule are being saved.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: () => Swal.showLoading()
            });

            // Give SweetAlert time to render before the browser starts navigation.
            setTimeout(function() {
                document.getElementById('createTnaForm').submit();
            }, 100);
        }
    </script>
@endpush