@php
    $cplItems = old('cpl_items', $formData['cplItems']);
    $cpmkItems = old('cpmk_items', $formData['cpmkItems']);
    $subCpmkItems = old('sub_cpmk_items', $formData['subCpmkItems']);
    $mainReferences = old('main_references', $formData['mainReferences']);
    $supportingReferences = old('supporting_references', $formData['supportingReferences']);
    $approvals = old('approvals', $formData['approvals']);
    $meetings = old('meetings', $formData['meetings']);
    $curriculumCourseOptions = $formData['curriculumCourseOptions'] ?? [];
    $curriculumCourseProfiles = $formData['curriculumCourseProfiles'] ?? [];
    $activeSemesterCourseAssignments = $formData['activeSemesterCourseAssignments'] ?? [];
    $coursePrerequisiteMap = $formData['coursePrerequisiteMap'] ?? [];
    $assessmentLearningOptions = $formData['assessmentLearningOptions'] ?? [];
    $signatureOptions = $formData['signatureOptions'] ?? [];
    $defaultLeftSignatureOption = $formData['defaultLeftSignatureOption'] ?? [];
    $authorizationAutoFill = $formData['authorizationAutoFill'] ?? [];
    $documentCodeSequence = str_pad((string) ((int) preg_replace('/\D/', '', (string) optional($rps)->document_code) ?: 1), 4, '0', STR_PAD_LEFT);
    if (filled(optional($rps)->document_code) && preg_match('/\/(\d+)$/', (string) $rps->document_code, $documentCodeMatch)) {
        $documentCodeSequence = str_pad($documentCodeMatch[1], 4, '0', STR_PAD_LEFT);
    }


    $manualRpsCleanOptionText = function (mixed $value): string {
        if (is_array($value)) {
            $value = implode(' ', array_filter(array_map(fn ($item) => is_scalar($item) ? (string) $item : '', $value)));
        }

        return trim(preg_replace('/\s+/u', ' ', (string) $value) ?? '');
    };

    $manualRpsCleanPointText = function (mixed $value) use ($manualRpsCleanOptionText): string {
        if (is_array($value)) {
            $value = implode("
", array_filter(array_map(fn ($item) => is_scalar($item) ? (string) $item : '', $value)));
        }

        $text = str_replace(["
", "
"], "
", (string) $value);
        $text = preg_replace('/\s*;\s*/u', "
", $text) ?? $text;
        $text = preg_replace('/\s*[•●▪]\s*/u', "
", $text) ?? $text;

        $lines = collect(explode("
", $text))
            ->map(fn ($line) => $manualRpsCleanOptionText($line))
            ->filter()
            ->unique()
            ->values()
            ->all();

        return implode(', ', $lines);
    };

    $manualRpsReadSettingRows = function (string $key): array {
        try {
            if (! \Illuminate\Support\Facades\Schema::hasColumn('app_settings', $key)) {
                return [];
            }

            $settings = \App\Models\AppSetting::current();
            $value = $settings->getAttribute($key);

            if (is_array($value)) {
                return $value;
            }

            if (is_string($value) && trim($value) !== '') {
                $decoded = json_decode($value, true);
                return is_array($decoded) ? $decoded : [];
            }
        } catch (\Throwable $exception) {
            return [];
        }

        return [];
    };


    $manualRpsBuildSubCpmkOptionText = function (mixed $code, mixed $description) use ($manualRpsCleanOptionText): string {
        $cleanCode = $manualRpsCleanOptionText($code);
        $cleanDescription = $manualRpsCleanOptionText($description);

        if ($cleanCode !== '' && $cleanDescription !== '') {
            return $cleanCode.' - '.$cleanDescription;
        }

        return $cleanCode !== '' ? $cleanCode : $cleanDescription;
    };

    $weeklySubCpmkOptions = collect($subCpmkItems)
        ->map(fn ($item) => $manualRpsBuildSubCpmkOptionText($item['code'] ?? '', $item['description'] ?? ''))
        ->filter()
        ->unique()
        ->values()
        ->all();

    $manualRpsStudentAssignmentRows = $manualRpsReadSettingRows('student_assignment_models');
    if ($manualRpsStudentAssignmentRows === [] && class_exists(\App\Services\StudentAssignmentModelDefaults::class)) {
        $manualRpsStudentAssignmentRows = \App\Services\StudentAssignmentModelDefaults::rows();
    }

    $manualRpsLearningMediaRows = $manualRpsReadSettingRows('learning_media_models');
    if ($manualRpsLearningMediaRows === [] && class_exists(\App\Services\LearningMediaDefaults::class)) {
        $manualRpsLearningMediaRows = \App\Services\LearningMediaDefaults::rows();
    }

    $manualRpsLectureDurationRows = $manualRpsReadSettingRows('lecture_duration_models');
    if ($manualRpsLectureDurationRows === [] && class_exists(\App\Services\LectureDurationDefaults::class)) {
        $manualRpsLectureDurationRows = \App\Services\LectureDurationDefaults::rows();
    }

    $manualRpsExtractOptionPoints = function (mixed $value) use ($manualRpsCleanOptionText): array {
        if (is_array($value)) {
            $rawItems = [];
            array_walk_recursive($value, function ($item) use (&$rawItems) {
                if (is_scalar($item)) {
                    $rawItems[] = (string) $item;
                }
            });
            $text = implode("\n", $rawItems);
        } else {
            $text = (string) $value;
        }

        $text = str_replace(["\r\n", "\r"], "\n", $text);
        $text = preg_replace('/\s*;\s*/u', "\n", $text) ?? $text;
        $text = preg_replace('/\s*[•●▪]\s*/u', "\n", $text) ?? $text;

        return collect(explode("\n", $text))
            ->map(fn ($line) => $manualRpsCleanOptionText($line))
            ->filter()
            ->unique()
            ->values()
            ->all();
    };

    $manualRpsBuildAssignmentOptionsForRow = function (array $row) use ($manualRpsCleanOptionText, $manualRpsExtractOptionPoints): array {
        $name = $manualRpsCleanOptionText($row['name'] ?? '');
        $description = $manualRpsCleanOptionText($row['description'] ?? '');
        $examples = $manualRpsExtractOptionPoints($row['examples'] ?? ($row['items'] ?? ''));
        $notes = $manualRpsCleanOptionText($row['notes'] ?? '');

        if ($examples === []) {
            $examples = [''];
        }

        $options = [];
        foreach ($examples as $example) {
            $parts = [];
            if ($name !== '') {
                $parts[] = $name;
            }
            if ($description !== '') {
                $parts[] = 'Deskripsi: '.$description;
            }
            if ($example !== '') {
                $parts[] = 'Contoh/Bentuk/Platform: '.$example;
            }
            if ($notes !== '') {
                $parts[] = 'Tujuan/Catatan: '.$notes;
            }

            $option = trim(implode(' - ', $parts));
            if ($option !== '') {
                $options[] = $option;
            }
        }

        return array_values(array_unique($options));
    };

    $manualRpsBuildMediaOptionsForRow = function (array $row) use ($manualRpsCleanOptionText, $manualRpsExtractOptionPoints): array {
        $name = $manualRpsCleanOptionText($row['name'] ?? '');
        $description = $manualRpsCleanOptionText($row['description'] ?? '');
        $items = $manualRpsExtractOptionPoints($row['items'] ?? ($row['examples'] ?? ''));
        $notes = $manualRpsCleanOptionText($row['notes'] ?? '');

        if ($items === []) {
            $items = [''];
        }

        $options = [];
        foreach ($items as $item) {
            $parts = [];
            if ($name !== '') {
                $parts[] = $name;
            }
            if ($description !== '') {
                $parts[] = 'Deskripsi: '.$description;
            }
            if ($item !== '') {
                $parts[] = 'Contoh/Bentuk/Platform: '.$item;
            }
            if ($notes !== '') {
                $parts[] = 'Catatan/Tujuan: '.$notes;
            }

            $option = trim(implode(' - ', $parts));
            if ($option !== '') {
                $options[] = $option;
            }
        }

        return array_values(array_unique($options));
    };

    $manualRpsStudentAssignmentOptions = [
        'luring' => collect($manualRpsStudentAssignmentRows)->filter(fn ($row) => ($row['mode'] ?? 'luring') === 'luring')->flatMap(fn ($row) => $manualRpsBuildAssignmentOptionsForRow(is_array($row) ? $row : []))->filter()->unique()->values()->all(),
        'daring' => collect($manualRpsStudentAssignmentRows)->filter(fn ($row) => ($row['mode'] ?? 'luring') === 'daring')->flatMap(fn ($row) => $manualRpsBuildAssignmentOptionsForRow(is_array($row) ? $row : []))->filter()->unique()->values()->all(),
    ];

    $manualRpsLearningMediaOptions = [
        'luring' => collect($manualRpsLearningMediaRows)->filter(fn ($row) => ($row['mode'] ?? 'luring') === 'luring')->flatMap(fn ($row) => $manualRpsBuildMediaOptionsForRow(is_array($row) ? $row : []))->filter()->unique()->values()->all(),
        'daring' => collect($manualRpsLearningMediaRows)->filter(fn ($row) => ($row['mode'] ?? 'luring') === 'daring')->flatMap(fn ($row) => $manualRpsBuildMediaOptionsForRow(is_array($row) ? $row : []))->filter()->unique()->values()->all(),
    ];

    $manualRpsBuildLectureDurationOptionsForRow = function (array $row) use ($manualRpsCleanOptionText): array {
        $context = $manualRpsCleanOptionText($row['context'] ?? '');
        $syncDuration = $manualRpsCleanOptionText($row['sync_duration'] ?? '');
        $asyncDuration = $manualRpsCleanOptionText($row['async_duration'] ?? '');
        $notes = $manualRpsCleanOptionText($row['notes'] ?? '');

        $labelParts = [];
        if ($context !== '') {
            $labelParts[] = $context;
        }
        if ($syncDuration !== '') {
            $labelParts[] = $syncDuration;
        }
        if ($asyncDuration !== '') {
            $labelParts[] = $asyncDuration;
        }
        if ($notes !== '') {
            $labelParts[] = $notes;
        }

        $valueParts = array_filter([$syncDuration, $asyncDuration], fn ($item) => $item !== '');
        $value = trim(implode(' - ', $valueParts));
        $label = trim(implode(' - ', $labelParts));

        if ($value === '') {
            return [];
        }

        return [[
            'label' => $label !== '' ? $label : $value,
            'value' => $value,
        ]];
    };

    $manualRpsLectureDurationOptions = collect($manualRpsLectureDurationRows)
        ->flatMap(fn ($row) => $manualRpsBuildLectureDurationOptionsForRow(is_array($row) ? $row : []))
        ->filter(fn ($option) => is_array($option) && filled($option['value'] ?? ''))
        ->unique('value')
        ->values()
        ->all();
@endphp

<div class="panel manual-rps-panel">
    <h2 class="section-title">Identitas Dokumen</h2>
    <p class="helper">Disusun mengikuti blok awal template kampus: identitas mata kuliah, kode dokumen, bobot SKS, semester, dan otorisasi penyusunan.</p>
    <div class="table-wrap">
        <table class="manual-rps-table manual-rps-identity-table">
            <colgroup>
                <col style="width: 13%;">
                <col style="width: 20%;">
                <col style="width: 13%;">
                <col style="width: 18%;">
                <col style="width: 13%;">
                <col style="width: 23%;">
            </colgroup>
            <tbody>
                <tr>
                    <th class="manual-rps-label">Kode Dokumen</th>
                    <td>
                        <input id="document_code" name="document_code" value="{{ old('document_code', $rps->document_code) }}" placeholder="RPS/PMAT/FKIP/V/2026/0001" data-auto-document-code data-document-sequence="{{ $documentCodeSequence }}" readonly>
                        <div class="meta" style="margin-top: 6px;">Otomatis: RPS/Kode Prodi/Kode Fakultas/Bulan Romawi/Tahun/Nomor Urut.</div>
                    </td>
                    <th class="manual-rps-label">Tanggal Penyusunan</th>
                    <td>
                        <input id="compile_date" type="date" name="compile_date" value="{{ old('compile_date', optional($rps->compile_date)->format('Y-m-d')) }}" data-auto-compile-date readonly>
                        <div class="meta" style="margin-top: 6px;">Otomatis: Gasal/Ganjil = 31 Agustus tahun berjalan, Genap = 28 Februari tahun berjalan.</div>
                    </td>
                    <th class="manual-rps-label">Status</th>
                    <td>
                        <select id="status" name="status">
                            @foreach (['draft' => 'Draft', 'final' => 'Final'] as $value => $label)
                                <option value="{{ $value }}" @selected(old('status', $rps->status) === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </td>
                </tr>
                <tr>
                    <th class="manual-rps-label">Universitas</th>
                    <td colspan="3"><input id="university_name" name="university_name" value="{{ old('university_name', $rps->university_name) }}" placeholder="Contoh: Universitas Muhammadiyah Parepare" required></td>
                    <th class="manual-rps-label">Fakultas</th>
                    <td><input id="faculty_name" name="faculty_name" value="{{ old('faculty_name', $rps->faculty_name) }}" placeholder="Contoh: Fakultas Keguruan dan Ilmu Pendidikan" required></td>
                </tr>
                <tr>
                    <th class="manual-rps-label">Program Studi</th>
                    <td colspan="5"><input id="study_program_name" name="study_program_name" value="{{ old('study_program_name', $rps->study_program_name) }}" placeholder="Contoh: Program Studi Pendidikan Matematika" required></td>
                </tr>
                <tr>
                    <th class="manual-rps-label">Mata Kuliah (MK)</th>
                    <td colspan="3">
                        <select id="course_name" name="course_name" data-curriculum-course-select required>
                            <option value="">Pilih Mata Kuliah dari Struktur Mata Kuliah</option>
                            @foreach ($curriculumCourseOptions as $option)
                                <option value="{{ $option }}" @selected(old('course_name', $rps->course_name) === $option)>{{ $option }}</option>
                            @endforeach
                            @if (filled(old('course_name', $rps->course_name)) && ! in_array(old('course_name', $rps->course_name), $curriculumCourseOptions, true))
                                <option value="{{ old('course_name', $rps->course_name) }}" selected>{{ old('course_name', $rps->course_name) }}</option>
                            @endif
                        </select>
                    </td>
                    <th class="manual-rps-label">Kode MK</th>
                    <td>
                        <div class="manual-rps-field-stack">
                            <input id="course_code" name="course_code" value="{{ old('course_code', $rps->course_code) }}" placeholder="Contoh: MWP12028">
                            <div class="manual-rps-field-alternatives" data-curriculum-alternatives-for="course_code" hidden></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th class="manual-rps-label">Rumpun MK</th>
                    <td>
                        <div class="manual-rps-field-stack">
                            <input id="course_group" name="course_group" value="{{ old('course_group', $rps->course_group) }}" placeholder="Contoh: Teknologi Pendidikan">
                            <div class="manual-rps-field-alternatives" data-curriculum-alternatives-for="course_group" hidden></div>
                        </div>
                    </td>
                    <th class="manual-rps-label">BOBOT (SKS)</th>
                    <td>
                        <div class="manual-rps-field-stack">
                            <input id="sks" type="number" min="0" max="12" name="sks" value="{{ old('sks', $rps->sks) }}" placeholder="3">
                            <div class="manual-rps-field-alternatives" data-curriculum-alternatives-for="sks" hidden></div>
                        </div>
                    </td>
                    <th class="manual-rps-label">Semester</th>
                    <td>
                        <div class="manual-rps-field-stack">
                            <input id="semester" name="semester" value="{{ old('semester', $rps->semester) }}" placeholder="Contoh: II">
                            <div class="manual-rps-field-alternatives" data-curriculum-alternatives-for="semester" hidden></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th class="manual-rps-label">SKS Teori (T)</th>
                    <td><input id="sks_theory" type="number" min="0" max="12" name="sks_theory" value="{{ old('sks_theory', $rps->sks_theory) }}" placeholder="2"></td>
                    <th class="manual-rps-label">SKS Praktik (P)</th>
                    <td><input id="sks_practice" type="number" min="0" max="12" name="sks_practice" value="{{ old('sks_practice', $rps->sks_practice) }}" placeholder="1"></td>
                    <th class="manual-rps-label">Dosen Pengampu</th>
                    <td>
                        <input id="lecturer_name" name="lecturer_name" value="{{ old('lecturer_name', $rps->lecturer_name) }}" placeholder="Otomatis dari Pembagian Mata Kuliah aktif" data-auto-lecturer-from-assignment>
                        <div class="meta" style="margin-top: 6px;">Otomatis mengikuti dosen pada Pembagian Mata Kuliah untuk periode aktif.</div>
                    </td>
                </tr>
                <tr>
                    <th class="manual-rps-label">Mata Kuliah Syarat</th>
                    <td colspan="5">
                        <input id="prerequisite_course" name="prerequisite_course" value="{{ old('prerequisite_course', $rps->prerequisite_course) }}" placeholder="Otomatis dari Mata Kuliah Syarat pada Informasi Kurikulum Prodi" data-auto-prerequisite-from-curriculum>
                        <div class="meta" style="margin-top: 6px;">Otomatis mengikuti Mata Kuliah Syarat pada Informasi Kurikulum Prodi.</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="actions" style="margin-top: 14px;">
    <button class="btn" type="submit" name="save_scope" value="identity">Simpan Bagian</button>
</div>

<div class="panel manual-rps-panel">
    <h2 class="section-title">Otorisasi</h2>
    <p class="helper">Meniru blok otorisasi template RPS kampus: Pengembang RPS, Koordinator RMK, dan Ketua PRODI.</p>
    <div class="table-wrap">
        <table class="manual-rps-table manual-rps-approval-table">
            <thead>
                <tr>
                    <th style="width: 25%;">Peran</th>
                    <th style="width: 30%;">Nama Penandatangan</th>
                    <th style="width: 20%;">NIDN / Identitas</th>
                    <th style="width: 15%;">Tanggal</th>
                    <th style="width: 6%;">No</th>
                    <th style="width: 8%;">Aksi</th>
                </tr>
            </thead>
            <tbody class="manual-rps-tbody" data-repeater-list="approvals">
                @foreach ($approvals as $index => $item)
                    <tr class="repeater-row">
                        <td><input name="approvals[{{ $index }}][role_name]" value="{{ $item['role_name'] ?? '' }}" placeholder="Contoh: Pengembang RPS"></td>
                        <td><input name="approvals[{{ $index }}][signer_name]" value="{{ $item['signer_name'] ?? '' }}" placeholder="Contoh: Henra Ahmad, S.Pd., M.Pd."></td>
                        <td><input name="approvals[{{ $index }}][signer_identifier]" value="{{ $item['signer_identifier'] ?? '' }}" placeholder="Opsional"></td>
                        <td><input type="date" name="approvals[{{ $index }}][approval_date]" value="{{ $item['approval_date'] ?? '' }}"></td>
                        <td><span class="manual-rps-row-no">{{ $index + 1 }}</span></td>
                        <td class="manual-rps-action-cell"><button class="btn secondary manual-rps-delete-row" type="button" data-delete-repeater-row>Hapus</button></td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="actions" style="margin-top: 14px;">
        <button class="btn secondary" type="button" data-add-approval>Tambah Penandatangan</button>
        <button class="btn" type="submit" name="save_scope" value="approvals">Simpan Bagian</button>
    </div>
</div>

<div class="panel manual-rps-panel">
    <h2 class="section-title">Blok Tanda Tangan PDF</h2>
    <p class="helper">Bagian ini dipakai untuk mengisi blok tanda tangan kiri dan kanan pada halaman terakhir PDF. File tanda tangan harus PNG agar hasil export tetap rapi.</p>
    <div class="table-wrap">
        <table class="manual-rps-table manual-rps-signature-table">
            <colgroup>
                <col style="width: 18%;">
                <col style="width: 32%;">
                <col style="width: 18%;">
                <col style="width: 32%;">
            </colgroup>
            <tbody>
                <tr>
                    <th class="manual-rps-label">Nama Penandatangan Kiri</th>
                    <td>
                        @php
                            $selectedLeftSigner = old('acknowledged_by_name', $rps->acknowledged_by_name);
                            if (blank($selectedLeftSigner) && filled($defaultLeftSignatureOption['name'] ?? null)) {
                                $selectedLeftSigner = $defaultLeftSignatureOption['name'];
                            }
                            $selectedLeftSignerOption = collect($signatureOptions)->first(fn ($option) => ($option['name'] ?? '') === $selectedLeftSigner);
                            $leftSignerNidn = old('acknowledged_by_nidn', $rps->acknowledged_by_nidn);
                            if (blank($leftSignerNidn) && filled($selectedLeftSignerOption['identifier_value'] ?? null)) {
                                $leftSignerNidn = $selectedLeftSignerOption['identifier_value'];
                            }
                            $leftSignerSignaturePath = old('acknowledged_by_signature_path', $rps->acknowledged_by_signature_path);
                            if (blank($leftSignerSignaturePath) && filled($selectedLeftSignerOption['signature_path'] ?? null)) {
                                $leftSignerSignaturePath = $selectedLeftSignerOption['signature_path'];
                            }
                            $rightSignerName = old('lecturer_name', $rps->lecturer_name);
                            $rightSignerNidn = old('lecturer_nidn', $rps->lecturer_nidn);
                            $rightSignerSignaturePath = old('lecturer_signature_path', $rps->lecturer_signature_path);
                            if (blank($rightSignerNidn) || blank($rightSignerSignaturePath)) {
                                $facultyIdentityMapForSignature = $authorizationAutoFill['faculty_members'] ?? [];
                                foreach (preg_split('/[;\n]+/', (string) $rightSignerName) ?: [] as $rightSignerItem) {
                                    $rightSignerKey = mb_strtolower(trim($rightSignerItem));
                                    if ($rightSignerKey === '' || empty($facultyIdentityMapForSignature[$rightSignerKey])) {
                                        continue;
                                    }
                                    $rightSignerData = $facultyIdentityMapForSignature[$rightSignerKey];
                                    if (blank($rightSignerNidn) && filled($rightSignerData['identifier'] ?? null)) {
                                        $rightSignerNidn = $rightSignerData['identifier'];
                                    }
                                    if (blank($rightSignerSignaturePath) && filled($rightSignerData['signature_path'] ?? null)) {
                                        $rightSignerSignaturePath = $rightSignerData['signature_path'];
                                    }
                                    if (filled($rightSignerNidn) && filled($rightSignerSignaturePath)) {
                                        break;
                                    }
                                }
                            }
                        @endphp
                        <select name="acknowledged_by_name" data-left-signature-select>
                            <option value="">Pilih Penandatangan Kiri</option>
                            @foreach ($signatureOptions as $option)
                                <option
                                    value="{{ $option['name'] }}"
                                    data-nidn="{{ $option['identifier_value'] ?? '' }}"
                                    data-signature-path="{{ $option['signature_path'] ?? '' }}"
                                    data-signature-url="{{ $option['signature_url'] ?? '' }}"
                                    @selected($selectedLeftSigner === ($option['name'] ?? ''))
                                >{{ $option['label'] ?? $option['name'] }}</option>
                            @endforeach
                            @if (filled($selectedLeftSigner) && ! collect($signatureOptions)->contains(fn ($option) => ($option['name'] ?? '') === $selectedLeftSigner))
                                <option value="{{ $selectedLeftSigner }}" selected>{{ $selectedLeftSigner }}</option>
                            @endif
                        </select>
                    </td>
                    <th class="manual-rps-label">Nama Penandatangan Kanan</th>
                    <td>
                        <input value="{{ $rightSignerName }}" placeholder="Mengikuti field Dosen Pengampu" data-right-signature-name readonly>
                        <div class="helper" style="margin-top: 8px;">Nama ini mengikuti isian <strong>Dosen Pengampu</strong> pada tabel identitas dokumen.</div>
                    </td>
                </tr>
                <tr>
                    <th class="manual-rps-label">NIDN Kiri</th>
                    <td><input name="acknowledged_by_nidn" data-left-signature-nidn value="{{ $leftSignerNidn }}" placeholder="Contoh: 0012345678"></td>
                    <th class="manual-rps-label">NIDN Kanan</th>
                    <td><input name="lecturer_nidn" data-right-signature-nidn value="{{ $rightSignerNidn }}" placeholder="Contoh: 0012345678"></td>
                </tr>
                <tr>
                    <th class="manual-rps-label">Upload Tanda Tangan Kiri (PNG)</th>
                    <td>
                        <input type="hidden" name="acknowledged_by_signature_path" data-left-signature-path value="{{ $leftSignerSignaturePath }}">
                        <input type="file" name="acknowledged_by_signature" accept="image/png">
                        <div data-left-signature-preview-wrap style="margin-top: 10px; {{ filled($leftSignerSignaturePath) ? '' : 'display:none;' }}">
                            <img
                                data-left-signature-preview
                                src="{{ filled($leftSignerSignaturePath) ? asset($leftSignerSignaturePath) : '' }}"
                                alt="Tanda tangan kiri"
                                style="max-height: 72px; max-width: 220px;"
                            >
                        </div>
                        <div class="helper" style="margin-top: 8px;">Jika nama dipilih dari daftar, tanda tangan tersimpan akan otomatis dipakai. Upload manual tetap bisa digunakan bila ingin mengganti.</div>
                    </td>
                    <th class="manual-rps-label">Upload Tanda Tangan Kanan (PNG)</th>
                    <td>
                        <input type="hidden" name="lecturer_signature_path" data-right-signature-path value="{{ $rightSignerSignaturePath }}">
                        <input type="file" name="lecturer_signature" accept="image/png">
                        <div data-right-signature-preview-wrap style="margin-top: 10px; {{ filled($rightSignerSignaturePath) ? '' : 'display:none;' }}">
                            <img
                                data-right-signature-preview
                                src="{{ filled($rightSignerSignaturePath) ? asset($rightSignerSignaturePath) : '' }}"
                                alt="Tanda tangan kanan"
                                style="max-height: 72px; max-width: 220px;"
                            >
                        </div>
                        <div class="helper" style="margin-top: 8px;">Jika Dosen Pengampu memiliki TTD PNG pada SDM / Daftar Dosen, gambar tanda tangan kanan otomatis dipakai. Upload manual tetap bisa digunakan bila ingin mengganti.</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="actions" style="margin-top: 14px;">
    <button class="btn" type="submit" name="save_scope" value="signatures">Simpan Bagian</button>
</div>

<div class="panel manual-rps-panel manual-rps-excel-import-panel" data-manual-rps-excel-import-panel data-template-url="{{ route('rps.manual-import.template') }}" data-import-url="{{ route('rps.manual-import.excel') }}">
    <h2 class="section-title">Import Excel Sub-CPMK, Pustaka, dan Rencana Pembelajaran Mingguan</h2>
    <p class="helper">Gunakan template Excel untuk mengisi bagian Sub-CPMK dan Rencana Pembelajaran Mingguan. Jika tersedia kolom Pustaka Utama/Pendukung pada file, data pustaka juga akan diisi otomatis. Data akan diterapkan ke form terlebih dahulu dan tetap perlu disimpan.</p>
    <div class="manual-rps-import-actions">
        <a class="btn secondary" href="{{ route('rps.manual-import.template') }}">Download Template Excel</a>
        <input type="file" accept=".xlsx,.xls,.csv" data-manual-rps-excel-file>
        <button class="btn" type="button" data-manual-rps-excel-import>Upload Excel dan Terapkan ke Form</button>
    </div>
    <div class="helper" data-manual-rps-excel-status style="margin-top: 10px;"></div>
</div>

<div class="panel manual-rps-panel">
    <h2 class="section-title">Capaian Pembelajaran</h2>
    <p class="helper">Urutannya diselaraskan dengan template: `CPL-PRODI yang dibebankan pada MK`, `CPMK`, lalu `Sub-CPMK`.</p>
    @foreach ([
        'cpl_items' => ['title' => 'CPL-PRODI yang dibebankan pada MK', 'rows' => $cplItems],
        'cpmk_items' => ['title' => 'Capaian Pembelajaran Mata Kuliah (CPMK)', 'rows' => $cpmkItems],
        'sub_cpmk_items' => ['title' => 'Sub-CPMK', 'rows' => $subCpmkItems],
    ] as $groupName => $group)
        <div class="manual-rps-subsection">
            <h3 class="section-title">{{ $group['title'] }}</h3>
            <div class="table-wrap">
                <table class="manual-rps-table manual-rps-outcome-table">
                    <colgroup>
                        <col style="width: 7%;">
                        <col style="width: 22%;">
                        <col style="width: 63%;">
                        <col style="width: 8%;">
                    </colgroup>
                    <thead>
                        <tr>
                            <th style="width: 7%;">No</th>
                            <th style="width: 22%;">Kode</th>
                            <th>Uraian</th>
                            <th style="width: 8%;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="manual-rps-tbody" data-repeater-list="{{ $groupName }}">
                        @foreach ($group['rows'] as $index => $item)
                            <tr class="repeater-row">
                                <td><span class="manual-rps-row-no">{{ $index + 1 }}</span></td>
                                <td>
                                    @if ($groupName === 'sub_cpmk_items')
                                        <select name="{{ $groupName }}[{{ $index }}][code]" data-sub-cpmk-code-select>
                                            <option value="">Pilih Sub-CPMK</option>
                                            @for ($subCpmkNumber = 1; $subCpmkNumber <= 14; $subCpmkNumber++)
                                                <option value="{{ 'Sub-CPMK '.$subCpmkNumber }}" @selected(($item['code'] ?? '') === ('Sub-CPMK '.$subCpmkNumber))>{{ 'Sub-CPMK '.$subCpmkNumber }}</option>
                                            @endfor
                                        </select>
                                    @else
                                        <input name="{{ $groupName }}[{{ $index }}][code]" value="{{ $item['code'] ?? '' }}" placeholder="{{ $groupName === 'cpl_items' ? 'Contoh: CPL-5' : 'Contoh: CPMK1 (CPL-5)' }}">
                                    @endif
                                </td>
                                <td>
                                    <textarea class="manual-rps-textarea-lg" name="{{ $groupName }}[{{ $index }}][description]" placeholder="{{ $groupName === 'cpl_items'
                                        ? 'Contoh: Lulusan mampu mengembangkan media, model, dan perangkat pembelajaran matematika berbasis teknologi...'
                                        : ($groupName === 'cpmk_items'
                                            ? 'Contoh: Menguasai konsep dasar aplikasi komputer untuk mendukung pembelajaran inovatif berbasis teknologi dan budaya lokal.'
                                            : 'Contoh: Mahasiswa mampu menjelaskan konsep dan fungsi dasar perangkat lunak komputer untuk pembelajaran matematika.') }}">{{ $item['description'] ?? '' }}</textarea>
                                </td>
                                <td class="manual-rps-action-cell"><button class="btn secondary manual-rps-delete-row" type="button" data-delete-repeater-row>Hapus</button></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="actions" style="margin-top: 14px;">
                <button class="btn secondary" type="button" data-add-outcome="{{ $groupName }}">Tambah {{ $group['title'] }}</button>
            </div>
        </div>
    @endforeach
</div>
<div class="actions" style="margin-top: 14px;">
    <button class="btn" type="submit" name="save_scope" value="learning-outcomes">Simpan Bagian</button>
</div>

<div class="panel manual-rps-panel">
    <h2 class="section-title">Deskripsi Singkat MK dan Bahan Kajian</h2>
    <div class="table-wrap">
        <table class="manual-rps-table manual-rps-description-table">
            <colgroup>
                <col style="width: 24%;">
                <col style="width: 76%;">
            </colgroup>
            <tbody>
                <tr>
                    <th class="manual-rps-label" style="width: 24%;">Deskripsi Singkat MK</th>
                    <td>
                        <div class="manual-rps-field-stack">
                            <textarea class="manual-rps-textarea-xl" id="course_description" name="course_description" placeholder="Contoh: Mata kuliah ini membahas konsep, fungsi, dan pemanfaatan aplikasi komputer untuk mendukung pembelajaran matematika berbasis teknologi digital, budaya lokal, dan pengembangan media pembelajaran inovatif.">{{ old('course_description', $rps->course_description) }}</textarea>
                            <div class="manual-rps-field-alternatives" data-curriculum-alternatives-for="course_description" hidden></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th class="manual-rps-label">Bahan Kajian / Materi Pembelajaran</th>
                    <td>
                        <div class="manual-rps-field-stack">
                            <textarea class="manual-rps-textarea-xl" id="study_materials" name="study_materials" placeholder="Contoh: Pengenalan perangkat lunak komputer untuk pembelajaran matematika&#10;Pengolahan data matematika menggunakan spreadsheet&#10;Pemanfaatan GeoGebra untuk visualisasi konsep matematika&#10;Produksi konten multimedia pembelajaran">{{ old('study_materials', $rps->study_materials) }}</textarea>
                            <div class="manual-rps-field-alternatives" data-curriculum-alternatives-for="study_materials" hidden></div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="actions" style="margin-top: 14px;">
    <button class="btn" type="submit" name="save_scope" value="descriptions">Simpan Bagian</button>
</div>

<div class="panel manual-rps-panel">
    <h2 class="section-title">Pustaka</h2>
    @foreach ([
        'main_references' => ['title' => 'Pustaka Utama', 'rows' => $mainReferences],
        'supporting_references' => ['title' => 'Pustaka Pendukung', 'rows' => $supportingReferences],
    ] as $groupName => $group)
        <div class="manual-rps-subsection">
            <h3 class="section-title">{{ $group['title'] }}</h3>
            <div class="table-wrap">
                <table class="manual-rps-table manual-rps-reference-table">
                    <colgroup>
                        <col style="width: 7%;">
                        <col style="width: 85%;">
                        <col style="width: 8%;">
                    </colgroup>
                    <thead>
                        <tr>
                            <th style="width: 7%;">No</th>
                            <th>Referensi</th>
                            <th style="width: 8%;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="manual-rps-tbody" data-repeater-list="{{ $groupName }}">
                        @foreach ($group['rows'] as $index => $item)
                            <tr class="repeater-row">
                                <td><span class="manual-rps-row-no">{{ $index + 1 }}</span></td>
                                <td>
                                    <textarea class="manual-rps-textarea-lg" name="{{ $groupName }}[{{ $index }}][citation]" placeholder="{{ $groupName === 'main_references'
                                        ? 'Contoh: Media Pembelajaran Matematika. (n.d.). Media pembelajaran matematika (PDF). Universitas Muhammadiyah Parepare.'
                                        : 'Contoh: Vinsensia, D. (2024). Pelatihan software matematika GeoGebra sebagai media. JPKM.' }}">{{ $item['citation'] ?? '' }}</textarea>
                                </td>
                                <td class="manual-rps-action-cell"><button class="btn secondary manual-rps-delete-row" type="button" data-delete-repeater-row>Hapus</button></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="actions" style="margin-top: 14px;">
                <button class="btn secondary" type="button" data-add-reference="{{ $groupName }}">Tambah Referensi</button>
            </div>
        </div>
    @endforeach
</div>
<div class="actions" style="margin-top: 14px;">
    <button class="btn" type="submit" name="save_scope" value="references">Simpan Bagian</button>
</div>

<div class="panel manual-rps-panel">
    <h2 class="section-title">Rencana Pembelajaran Mingguan</h2>
    <p class="helper">Tab dipertahankan agar pengisian lebih leluasa, tetapi isi setiap tab sekarang disusun dalam bentuk tabel kerja yang lebih dekat ke struktur template kampus.</p>
    <div class="tabs-shell" data-tabs-shell="meetings">
        <div class="tabs-nav">
            @foreach ($meetings as $index => $meeting)
                @php
                    $sessionType = $meeting['session_type'] ?? 'regular';
                    $buttonLabel = $sessionType === 'uts' ? 'Pekan 8 / UTS' : ($sessionType === 'uas' ? 'Pekan 16 / UAS' : 'Pekan '.$meeting['week_number']);
                @endphp
                <button class="tab-button {{ $index === 0 ? 'active' : '' }}" type="button" data-tab-target="meeting-{{ $index }}">{{ $buttonLabel }}</button>
            @endforeach
        </div>

        @foreach ($meetings as $index => $meeting)
            @php
                $sessionType = $meeting['session_type'] ?? 'regular';
                $kicker = $sessionType === 'uts' ? 'Ujian Tengah Semester' : ($sessionType === 'uas' ? 'Ujian Akhir Semester' : 'Pertemuan Reguler');
            @endphp
            <div class="tab-panel {{ $index === 0 ? 'active' : '' }}" data-tab-panel="meeting-{{ $index }}">
                <div class="tab-kicker">{{ $kicker }}</div>
                <div class="table-wrap">
                    <table class="manual-rps-table manual-rps-weekly-table">
                        <tbody>
                            <tr>
                                <th class="manual-rps-label" style="width: 18%;">Pekan Ke-</th>
                                <td style="width: 16%;"><input type="number" min="1" max="16" name="meetings[{{ $index }}][week_number]" value="{{ $meeting['week_number'] }}" placeholder="1"></td>
                                <th class="manual-rps-label" style="width: 18%;">Jenis Sesi</th>
                                <td style="width: 16%;">
                                    <select name="meetings[{{ $index }}][session_type]">
                                        @foreach (['regular' => 'Reguler', 'uts' => 'UTS', 'uas' => 'UAS'] as $value => $label)
                                            <option value="{{ $value }}" @selected(($meeting['session_type'] ?? 'regular') === $value)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <th class="manual-rps-label" style="width: 18%;">Bobot Penilaian (%)</th>
                                <td style="width: 14%;"><input type="number" min="0" max="100" step="0.01" name="meetings[{{ $index }}][assessment_weight]" value="{{ $meeting['assessment_weight'] ?? '' }}" placeholder="4"></td>
                            </tr>
                            <tr>
                                <th class="manual-rps-label">Sub-CPMK</th>
                                <td colspan="5">
                                    <select class="manual-rps-sub-cpmk-meeting-select" name="meetings[{{ $index }}][sub_cpmk]" data-weekly-sub-cpmk-select>
                                        <option value="">Pilih Sub-CPMK dari daftar Sub-CPMK</option>
                                        @foreach ($weeklySubCpmkOptions as $subCpmkOption)
                                            <option value="{{ $subCpmkOption }}" @selected(($meeting['sub_cpmk'] ?? '') === $subCpmkOption)>{{ $subCpmkOption }}</option>
                                        @endforeach
                                        @if (filled($meeting['sub_cpmk'] ?? '') && ! in_array($meeting['sub_cpmk'], $weeklySubCpmkOptions, true))
                                            <option value="{{ $meeting['sub_cpmk'] }}" selected>{{ $meeting['sub_cpmk'] }}</option>
                                        @endif
                                    </select>
                                    <p class="helper" style="margin-top: 6px;">Pilihan diambil dari bagian Sub-CPMK di atas dengan format Kode - Uraian.</p>
                                </td>
                            </tr>
                            <tr>
                                <th class="manual-rps-label">Indikator</th>
                                <td colspan="5"><textarea class="manual-rps-textarea-md" name="meetings[{{ $index }}][indicator]" placeholder="Contoh: Ketepatan dalam mengklasifikasikan fungsi berbagai perangkat lunak komputer untuk pembelajaran matematika. (C4 – menganalisis)">{{ $meeting['indicator'] ?? '' }}</textarea></td>
                            </tr>
                            <tr>
                                <th class="manual-rps-label">Kriteria Penilaian</th>
                                <td colspan="2">
                                    <div class="manual-rps-field-stack">
                                        <select data-assessment-learning-picker data-assessment-source="assessment_criteria" data-target-name="meetings[{{ $index }}][assessment_criteria]">
                                            <option value="">Pilih Kriteria Penilaian</option>
                                            @foreach (($assessmentLearningOptions['assessment_criteria'] ?? []) as $option)
                                                <option value="{{ $option }}">{{ $option }}</option>
                                            @endforeach
                                        </select>
                                        <textarea class="manual-rps-textarea-sm" name="meetings[{{ $index }}][assessment_criteria]" placeholder="Contoh: Kuantitatif. Bobot ditentukan berdasarkan tingkat kesulitan Taksonomi Bloom (C3–C6).">{{ $meeting['assessment_criteria'] ?? '' }}</textarea>
                                    </div>
                                </td>
                                <th class="manual-rps-label">Teknik Penilaian</th>
                                <td colspan="2">
                                    <div class="manual-rps-field-stack">
                                        <select data-assessment-learning-picker data-assessment-source="assessment_techniques" data-target-name="meetings[{{ $index }}][assessment_form]">
                                            <option value="">Pilih Teknik Penilaian</option>
                                            @foreach (($assessmentLearningOptions['assessment_techniques'] ?? []) as $option)
                                                <option value="{{ $option }}">{{ $option }}</option>
                                            @endforeach
                                        </select>
                                        <textarea class="manual-rps-textarea-sm" name="meetings[{{ $index }}][assessment_form]" placeholder="Contoh: Tes, non-tes, observasi, penugasan, presentasi, atau proyek.">{{ $meeting['assessment_form'] ?? '' }}</textarea>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th class="manual-rps-label">Pembelajaran Luring (offline)</th>
                                <td colspan="2">
                                    <div class="manual-rps-field-stack">
                                        <select class="manual-rps-readable-select" data-manual-rps-bullet-picker data-target-name="meetings[{{ $index }}][offline_activity]">
                                            <option value="">Pilihan Durasi Perkuliahan</option>
                                            @foreach ($manualRpsLectureDurationOptions as $option)
                                                <option value="{{ $option['value'] }}">{{ $option['label'] }}</option>
                                            @endforeach
                                        </select>
                                        <select class="manual-rps-readable-select" data-manual-rps-bullet-picker data-target-name="meetings[{{ $index }}][offline_activity]">
                                            <option value="">Pilih Pembelajaran Luring (offline)</option>
                                            @foreach (($assessmentLearningOptions['offline_learning'] ?? []) as $option)
                                                <option value="{{ $option }}">{{ $option }}</option>
                                            @endforeach
                                        </select>
                                        <select class="manual-rps-readable-select" data-manual-rps-bullet-picker data-target-name="meetings[{{ $index }}][offline_activity]">
                                            <option value="">Pilih Model Penugasan (offline)</option>
                                            @foreach (($manualRpsStudentAssignmentOptions['luring'] ?? []) as $option)
                                                <option value="{{ $option }}">{{ $option }}</option>
                                            @endforeach
                                        </select>
                                        <select class="manual-rps-readable-select" data-manual-rps-bullet-picker data-target-name="meetings[{{ $index }}][offline_activity]">
                                            <option value="">Pilih Media Pembelajaran (offline)</option>
                                            @foreach (($manualRpsLearningMediaOptions['luring'] ?? []) as $option)
                                                <option value="{{ $option }}">{{ $option }}</option>
                                            @endforeach
                                        </select>
                                        <textarea class="manual-rps-textarea-md manual-rps-autogrow-textarea" data-manual-rps-auto-grow name="meetings[{{ $index }}][offline_activity]" placeholder="Contoh:&#10;• Sinkronus 2 × 50 menit - Asinkronus 1 × 50 menit&#10;• Tatap Muka: 2 x 50 Menit&#10;• Tugas Individu - Deskripsi: Mahasiswa mengerjakan tugas secara mandiri - Contoh/Bentuk/Platform: Ringkasan materi, Resume jurnal - Tujuan/Catatan: Melatih kemandirian&#10;• Media Cetak - Deskripsi: Media berbentuk bahan fisik yang dibaca - Contoh/Bentuk/Platform: Buku teks, Modul pembelajaran">{{ $meeting['offline_activity'] ?? '' }}</textarea>
                                    </div>
                                </td>
                                <th class="manual-rps-label">Pembelajaran Daring (online)</th>
                                <td colspan="2">
                                    <div class="manual-rps-field-stack">
                                        <select class="manual-rps-readable-select" data-manual-rps-bullet-picker data-target-name="meetings[{{ $index }}][online_activity]">
                                            <option value="">Pilihan Durasi Perkuliahan</option>
                                            @foreach ($manualRpsLectureDurationOptions as $option)
                                                <option value="{{ $option['value'] }}">{{ $option['label'] }}</option>
                                            @endforeach
                                        </select>
                                        <select class="manual-rps-readable-select" data-manual-rps-bullet-picker data-target-name="meetings[{{ $index }}][online_activity]">
                                            <option value="">Pilih Pembelajaran Daring (online)</option>
                                            @foreach (($assessmentLearningOptions['online_learning'] ?? []) as $option)
                                                <option value="{{ $option }}">{{ $option }}</option>
                                            @endforeach
                                        </select>
                                        <select class="manual-rps-readable-select" data-manual-rps-bullet-picker data-target-name="meetings[{{ $index }}][online_activity]">
                                            <option value="">Pilih Model Penugasan (online)</option>
                                            @foreach (($manualRpsStudentAssignmentOptions['daring'] ?? []) as $option)
                                                <option value="{{ $option }}">{{ $option }}</option>
                                            @endforeach
                                        </select>
                                        <select class="manual-rps-readable-select" data-manual-rps-bullet-picker data-target-name="meetings[{{ $index }}][online_activity]">
                                            <option value="">Pilih Media Pembelajaran (online)</option>
                                            @foreach (($manualRpsLearningMediaOptions['daring'] ?? []) as $option)
                                                <option value="{{ $option }}">{{ $option }}</option>
                                            @endforeach
                                        </select>
                                        <textarea class="manual-rps-textarea-md manual-rps-autogrow-textarea" data-manual-rps-auto-grow name="meetings[{{ $index }}][online_activity]" placeholder="Contoh:&#10;• Sinkronus 1 × 50 menit - Asinkronus 2 × 50 menit&#10;• Diskusi LMS, forum kelas, unggah tugas mandiri, atau isi '-' jika tidak ada.&#10;• Diskusi Forum Online - Deskripsi: Mahasiswa berdiskusi melalui forum digital - Contoh/Bentuk/Platform: Tanya jawab, Analisis topik - Tujuan/Catatan: Melatih argumentasi&#10;• Platform LMS - Contoh/Bentuk/Platform: Google Classroom, Moodle, Canvas">{{ $meeting['online_activity'] ?? '' }}</textarea>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th class="manual-rps-label">Materi Pembelajaran [Pustaka]</th>
                                <td colspan="5"><textarea class="manual-rps-textarea-lg" name="meetings[{{ $index }}][study_material]" placeholder="Contoh: Pengenalan Perangkat Lunak Komputer untuk Pembelajaran Matematika&#10;Media Pembelajaran Matematika. (n.d.). Media pembelajaran matematika (PDF). Universitas Muhammadiyah Parepare.">{{ $meeting['study_material'] ?? '' }}</textarea></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        @endforeach
    </div>
</div>
<div class="actions" style="margin-top: 14px;">
    <button class="btn" type="submit" name="save_scope" value="meetings">Simpan Bagian</button>
</div>

<div class="actions" style="margin-top: 20px;">
    <button class="btn" type="submit">Simpan RPS</button>
    <a class="btn secondary" href="{{ route('rps.index') }}">Batal</a>
</div>

<style>
    .manual-rps-action-cell {
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }

    .manual-rps-delete-row {
        padding: 7px 10px;
        font-size: 12px;
        border-color: #fecaca;
        color: #991b1b;
        background: #fff7f7;
    }


    .manual-rps-autogrow-textarea {
        min-height: 120px;
        overflow: hidden;
        resize: vertical;
        line-height: 1.55;
        white-space: pre-wrap;
    }


    .manual-rps-readable-picker {
        position: relative;
        width: 100%;
    }

    .manual-rps-readable-select {
        display: none !important;
    }

    .manual-rps-readable-trigger {
        width: 100%;
        min-height: 44px;
        padding: 10px 44px 10px 14px;
        border: 1px solid #cfe0ff;
        border-radius: 10px;
        background: #fff;
        color: #10233f;
        font: inherit;
        line-height: 1.35;
        text-align: left;
        cursor: pointer;
        position: relative;
    }

    .manual-rps-readable-trigger::after {
        content: '⌄';
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-54%);
        color: #10233f;
        font-size: 18px;
    }

    .manual-rps-readable-trigger:hover,
    .manual-rps-readable-trigger:focus {
        border-color: #8ab8ff;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
        outline: none;
    }

    .manual-rps-readable-panel {
        position: fixed;
        z-index: 5000;
        display: none;
        max-height: 360px;
        overflow: auto;
        background: #fff;
        border: 1px solid #9ec5ff;
        border-radius: 12px;
        box-shadow: 0 18px 45px rgba(15, 35, 70, 0.18);
        padding: 6px;
    }

    .manual-rps-readable-picker.is-open .manual-rps-readable-panel {
        display: block;
    }

    .manual-rps-readable-option {
        width: 100%;
        padding: 9px 12px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #1f2937;
        font: inherit;
        line-height: 1.4;
        text-align: left;
        cursor: pointer;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .manual-rps-readable-option:hover,
    .manual-rps-readable-option:focus {
        background: #eef5ff;
        outline: none;
    }

    .manual-rps-readable-option.is-placeholder {
        color: #64748b;
        font-weight: 600;
        background: #f6f9ff;
    }

    /* Dropdown panjang khusus bagian pembelajaran: tampil turun di bawah tombol,
       tidak naik menutupi header, dan teks panjang wrap agar terbaca penuh. */
    .manual-rps-readable-panel {
        position: static !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
        margin-top: 6px;
        max-height: 360px !important;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .manual-rps-readable-option {
        white-space: normal !important;
        word-break: normal;
        overflow-wrap: anywhere;
        line-height: 1.45;
        min-height: 40px;
    }

    .manual-rps-sub-cpmk-meeting-select {
        min-height: 44px;
        white-space: normal;
    }

    .manual-rps-import-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    .manual-rps-import-actions input[type="file"] {
        max-width: 360px;
    }

</style>

<template id="outcome-row-template">
    <tr class="repeater-row">
        <td><span class="manual-rps-row-no"></span></td>
        <td><input data-name="code"></td>
        <td><textarea class="manual-rps-textarea-lg" data-name="description"></textarea></td>
        <td class="manual-rps-action-cell"><button class="btn secondary manual-rps-delete-row" type="button" data-delete-repeater-row>Hapus</button></td>
    </tr>
</template>

<template id="reference-row-template">
    <tr class="repeater-row">
        <td><span class="manual-rps-row-no"></span></td>
        <td><textarea class="manual-rps-textarea-lg" data-name="citation"></textarea></td>
        <td class="manual-rps-action-cell"><button class="btn secondary manual-rps-delete-row" type="button" data-delete-repeater-row>Hapus</button></td>
    </tr>
</template>

<template id="approval-row-template">
    <tr class="repeater-row">
        <td><input data-name="role_name"></td>
        <td><input data-name="signer_name"></td>
        <td><input data-name="signer_identifier"></td>
        <td><input type="date" data-name="approval_date"></td>
        <td><span class="manual-rps-row-no"></span></td>
        <td class="manual-rps-action-cell"><button class="btn secondary manual-rps-delete-row" type="button" data-delete-repeater-row>Hapus</button></td>
    </tr>
</template>

<script>
    const curriculumCourseProfiles = @json($curriculumCourseProfiles, JSON_UNESCAPED_UNICODE);
    const activeSemesterCourseAssignments = @json($activeSemesterCourseAssignments, JSON_UNESCAPED_UNICODE);
    const coursePrerequisiteMap = @json($coursePrerequisiteMap, JSON_UNESCAPED_UNICODE);
    const authorizationAutoFill = @json($authorizationAutoFill, JSON_UNESCAPED_UNICODE);
    const curriculumFieldSelectors = {
        course_code: '#course_code',
        course_group: '#course_group',
        sks: '#sks',
        semester: '#semester',
        course_description: '#course_description',
        study_materials: '#study_materials',
    };



    function manualRpsPositionReadablePanel(wrapper) {
        const panel = wrapper.querySelector('.manual-rps-readable-panel');
        if (!panel) return;

        panel.style.width = '100%';
        panel.style.left = '';
        panel.style.top = '';
        panel.style.maxHeight = '360px';
    }

    function manualRpsCloseReadableSelects(except = null) {
        document.querySelectorAll('.manual-rps-readable-picker.is-open').forEach((wrapper) => {
            if (wrapper !== except) wrapper.classList.remove('is-open');
        });
    }

    function manualRpsInitReadableSelects(scope = document) {
        scope.querySelectorAll('select.manual-rps-readable-select').forEach((select) => {
            if (select.dataset.manualRpsReadableReady === '1') return;
            select.dataset.manualRpsReadableReady = '1';

            const wrapper = document.createElement('div');
            wrapper.className = 'manual-rps-readable-picker';
            select.parentNode.insertBefore(wrapper, select);
            wrapper.appendChild(select);

            const placeholder = select.options?.[0]?.textContent?.trim() || 'Pilih opsi';
            const trigger = document.createElement('button');
            trigger.type = 'button';
            trigger.className = 'manual-rps-readable-trigger';
            trigger.textContent = placeholder;
            trigger.setAttribute('aria-haspopup', 'listbox');
            trigger.setAttribute('aria-expanded', 'false');
            wrapper.appendChild(trigger);

            const panel = document.createElement('div');
            panel.className = 'manual-rps-readable-panel';
            panel.setAttribute('role', 'listbox');
            wrapper.appendChild(panel);

            Array.from(select.options || []).forEach((option, index) => {
                const button = document.createElement('button');
                button.type = 'button';
                button.className = 'manual-rps-readable-option' + (index === 0 ? ' is-placeholder' : '');
                button.textContent = option.textContent.trim();
                button.title = option.textContent.trim();
                button.setAttribute('role', 'option');
                button.addEventListener('click', () => {
                    if (index === 0 || `${option.value ?? ''}`.trim() === '') {
                        manualRpsCloseReadableSelects();
                        trigger.textContent = placeholder;
                        return;
                    }
                    select.value = option.value;
                    select.dispatchEvent(new Event('change', { bubbles: true }));
                    trigger.textContent = placeholder;
                    manualRpsCloseReadableSelects();
                });
                panel.appendChild(button);
            });

            trigger.addEventListener('click', (event) => {
                event.preventDefault();
                const willOpen = !wrapper.classList.contains('is-open');
                manualRpsCloseReadableSelects(wrapper);
                wrapper.classList.toggle('is-open', willOpen);
                trigger.setAttribute('aria-expanded', willOpen ? 'true' : 'false');
                if (willOpen) {
                    manualRpsPositionReadablePanel(wrapper);
                    panel.querySelector('.manual-rps-readable-option')?.focus({ preventScroll: true });
                }
            });
        });
    }

    document.addEventListener('click', (event) => {
        if (!event.target.closest('.manual-rps-readable-picker')) {
            manualRpsCloseReadableSelects();
        }
    });

    window.addEventListener('resize', () => {
        document.querySelectorAll('.manual-rps-readable-picker.is-open').forEach(manualRpsPositionReadablePanel);
    });

    window.addEventListener('scroll', () => {
        document.querySelectorAll('.manual-rps-readable-picker.is-open').forEach(manualRpsPositionReadablePanel);
    }, true);

    function setTableRows(listName, templateId, rows, valueMapper) {
        const list = document.querySelector(`[data-repeater-list="${listName}"]`);

        if (!list) {
            return;
        }

        list.innerHTML = '';

        if (!Array.isArray(rows) || rows.length === 0) {
            appendRepeaterItem(listName, templateId);
            return;
        }

        rows.forEach((row, index) => {
            const template = document.getElementById(templateId);
            const fragment = template.content.cloneNode(true);
            const mapped = valueMapper(row, index);

            fragment.querySelectorAll('[data-name]').forEach((field) => {
                const key = field.dataset.name;
                field.name = `${listName}[${index}][${key}]`;
                field.value = mapped[key] ?? '';
            });

            const newRow = fragment.querySelector('.repeater-row');
            normalizeOutcomeCodeField(listName, newRow, index, mapped.code ?? '');
            list.appendChild(fragment);
        });

        refreshManualRowNumbers(list);
    }

    function normalizedOptionValues(options) {
        if (!Array.isArray(options)) {
            return [];
        }

        return Array.from(new Set(options
            .map((value) => typeof value === 'string' ? value.trim() : `${value ?? ''}`.trim())
            .filter((value) => value !== '')));
    }

    function renderAlternativeFieldOptions(fieldKey, options) {
        const container = document.querySelector(`[data-curriculum-alternatives-for="${fieldKey}"]`);
        const fieldSelector = curriculumFieldSelectors[fieldKey];
        const field = fieldSelector ? document.querySelector(fieldSelector) : null;
        const normalizedOptions = normalizedOptionValues(options);

        if (!container || !field) {
            return;
        }

        if (normalizedOptions.length <= 1) {
            container.innerHTML = '';
            container.hidden = true;
            return;
        }

        const select = document.createElement('select');
        select.className = 'manual-rps-alternative-select';
        normalizedOptions.forEach((option) => {
            const optionElement = document.createElement('option');
            optionElement.value = option;
            optionElement.textContent = option;
            optionElement.selected = `${field.value ?? ''}`.trim() === option;
            select.appendChild(optionElement);
        });

        select.addEventListener('change', (event) => {
            field.value = event.target.value;
            if (fieldKey === 'semester') {
                refreshManualRpsCompileDate();
                refreshManualRpsDocumentCode();
            }
        });

        const label = document.createElement('label');
        label.className = 'manual-rps-alternative-label';
        label.textContent = 'Pilihan data resmi:';

        container.innerHTML = '';
        container.append(label, select);
        container.hidden = false;
    }

    function applyAlternativeFieldSets(profile) {
        const options = profile?.official_course?.field_options ?? {};

        renderAlternativeFieldOptions('course_code', options.course_codes ?? []);
        renderAlternativeFieldOptions('course_group', options.course_groups ?? []);
        renderAlternativeFieldOptions('sks', options.sks_values ?? []);
        renderAlternativeFieldOptions('semester', options.semester_values ?? []);
        renderAlternativeFieldOptions('course_description', options.course_descriptions ?? []);
        renderAlternativeFieldOptions('study_materials', options.study_material_sets ?? []);
    }

    function normalizeManualCourseName(value) {
        return `${value ?? ''}`.trim().toLocaleLowerCase('id-ID');
    }

    function manualRpsDocumentWords(value) {
        return `${value ?? ''}`
            .toUpperCase()
            .replace(/PROGRAM STUDI|PRODI|JURUSAN/g, ' ')
            .replace(/[^A-Z\s]/g, ' ')
            .trim()
            .split(/\s+/)
            .filter((word) => word && !['DAN', 'DI', 'KE', 'UNTUK', 'THE', 'OF', 'AND'].includes(word));
    }

    function manualRpsDocumentLetters(value, fallback) {
        const words = manualRpsDocumentWords(value);

        if (words.length === 0) {
            return fallback;
        }

        if (words[0] === 'PENDIDIKAN' && words[1]) {
            return `P${words[1].slice(0, 3)}`;
        }

        let code = words.map((word) => word.charAt(0)).join('');

        if (code.length < 3 && words[1]) {
            code += words[1].slice(1, 3 - code.length + 1);
        }

        return (code || fallback).slice(0, 6);
    }

    function manualRpsRomanMonth(month) {
        return {
            1: 'I',
            2: 'II',
            3: 'III',
            4: 'IV',
            5: 'V',
            6: 'VI',
            7: 'VII',
            8: 'VIII',
            9: 'IX',
            10: 'X',
            11: 'XI',
            12: 'XII',
        }[month] || 'I';
    }

    function manualRpsSemesterNumberFromText(value) {
        const text = `${value ?? ''}`.trim().toUpperCase();
        const numberMatch = text.match(/\d+/);

        if (numberMatch) {
            return Math.max(1, Number.parseInt(numberMatch[0], 10));
        }

        const roman = text.replace(/[^IVXLCDM]/g, '');

        if (!roman) {
            return null;
        }

        const values = { I: 1, V: 5, X: 10, L: 50, C: 100, D: 500, M: 1000 };
        let total = 0;
        let previous = 0;

        roman.split('').reverse().forEach((char) => {
            const current = values[char] || 0;

            if (current < previous) {
                total -= current;
            } else {
                total += current;
                previous = current;
            }
        });

        return total > 0 ? total : null;
    }

    function manualRpsNormalizeTerm(value) {
        const text = `${value ?? ''}`.trim().toLocaleLowerCase('id-ID');

        if (!text) {
            return null;
        }

        if (text.includes('gasal') || text.includes('ganjil') || text.includes('odd')) {
            return 'odd';
        }

        if (text.includes('genap') || text.includes('even')) {
            return 'even';
        }

        const semesterNumber = manualRpsSemesterNumberFromText(text);

        if (semesterNumber !== null) {
            return semesterNumber % 2 === 1 ? 'odd' : 'even';
        }

        return null;
    }

    function manualRpsActiveAssignmentTerm(courseName) {
        const targetName = normalizeManualCourseName(courseName);

        if (!targetName || !Array.isArray(activeSemesterCourseAssignments)) {
            return null;
        }

        const matchedRow = activeSemesterCourseAssignments.find((row) => normalizeManualCourseName(row.course_name) === targetName && manualRpsNormalizeTerm(row.term));

        return matchedRow ? manualRpsNormalizeTerm(matchedRow.term) : null;
    }

    function refreshManualRpsCompileDate() {
        const compileDateField = document.querySelector('[data-auto-compile-date]');

        if (!compileDateField) {
            return;
        }

        const courseName = document.querySelector('#course_name')?.value ?? '';
        const semesterValue = document.querySelector('#semester')?.value ?? '';
        const term = manualRpsActiveAssignmentTerm(courseName) || manualRpsNormalizeTerm(semesterValue);
        const year = new Date().getFullYear();

        if (term === 'odd') {
            compileDateField.value = `${year}-08-31`;
            return;
        }

        if (term === 'even') {
            compileDateField.value = `${year}-02-28`;
        }
    }

    function refreshManualRpsDocumentCode() {
        const documentCodeField = document.querySelector('[data-auto-document-code]');

        if (!documentCodeField) {
            return;
        }

        const studyProgramCode = manualRpsDocumentLetters(document.querySelector('#study_program_name')?.value ?? '', 'PRODI');
        const facultyCode = manualRpsDocumentLetters(document.querySelector('#faculty_name')?.value ?? '', 'FAK');
        const rawDate = document.querySelector('#compile_date')?.value ?? '';
        const date = rawDate ? new Date(`${rawDate}T00:00:00`) : new Date();
        const month = Number.isNaN(date.getTime()) ? (new Date().getMonth() + 1) : (date.getMonth() + 1);
        const year = Number.isNaN(date.getTime()) ? new Date().getFullYear() : date.getFullYear();
        const sequence = `${documentCodeField.dataset.documentSequence || '0001'}`.padStart(4, '0');

        documentCodeField.value = ['RPS', studyProgramCode, facultyCode, manualRpsRomanMonth(month), year, sequence].join('/');
    }

    function applyCoursePrerequisitesFromCurriculum(courseName) {
        const targetName = normalizeManualCourseName(courseName);
        const prerequisiteField = document.querySelector('#prerequisite_course');

        if (!prerequisiteField) {
            return;
        }

        if (!targetName || !coursePrerequisiteMap || typeof coursePrerequisiteMap !== 'object') {
            prerequisiteField.value = '';
            return;
        }

        prerequisiteField.value = coursePrerequisiteMap[targetName] || '';
    }

    function manualRpsFacultyIdentifierForNames(names) {
        const identityMap = authorizationAutoFill?.faculty_members || {};
        const identifiers = String(names || '')
            .split(';')
            .map((item) => item.trim())
            .filter(Boolean)
            .map((name) => identityMap[normalizeManualCourseName(name)]?.identifier || '')
            .filter(Boolean);

        return Array.from(new Set(identifiers)).join('; ');
    }

    function manualRpsFacultySignatureForNames(names) {
        const identityMap = authorizationAutoFill?.faculty_members || {};
        const signatures = String(names || '')
            .split(';')
            .map((item) => item.trim())
            .filter(Boolean)
            .map((name) => identityMap[normalizeManualCourseName(name)] || {})
            .filter((item) => item.signature_path || item.signature_url);

        return signatures[0] || { signature_path: '', signature_url: '' };
    }

    function refreshManualRpsRightSignature() {
        const lecturerField = document.querySelector('#lecturer_name');
        const rightNameField = document.querySelector('[data-right-signature-name]');
        const rightNidnField = document.querySelector('[data-right-signature-nidn]');
        const rightPathField = document.querySelector('[data-right-signature-path]');
        const rightPreviewWrap = document.querySelector('[data-right-signature-preview-wrap]');
        const rightPreviewImage = document.querySelector('[data-right-signature-preview]');
        const lecturerName = lecturerField?.value || '';
        const signature = manualRpsFacultySignatureForNames(lecturerName);
        const identifier = manualRpsFacultyIdentifierForNames(lecturerName);

        if (rightNameField) {
            rightNameField.value = lecturerName;
        }

        if (rightNidnField && identifier !== '') {
            rightNidnField.value = identifier;
            rightNidnField.dispatchEvent(new Event('input', { bubbles: true }));
        }

        if (rightPathField && signature.signature_path) {
            rightPathField.value = signature.signature_path;
        }

        const activeSignaturePath = signature.signature_path || rightPathField?.value || '';

        if (rightPreviewWrap && rightPreviewImage) {
            if (signature.signature_url) {
                rightPreviewImage.src = signature.signature_url;
                rightPreviewWrap.style.display = '';
            } else if (activeSignaturePath) {
                rightPreviewImage.src = `/${activeSignaturePath}`.replace('//', '/');
                rightPreviewWrap.style.display = '';
            } else {
                rightPreviewImage.removeAttribute('src');
                rightPreviewWrap.style.display = 'none';
            }
        }
    }

    function manualRpsHeadOfStudyProgram() {
        return authorizationAutoFill?.head_of_study_program || { name: '', identifier: '' };
    }

    function manualRpsRmkCoordinatorForGroup(groupName) {
        const map = authorizationAutoFill?.rmk_coordinators || {};
        return map[normalizeManualCourseName(groupName)] || { name: '', identifier: '' };
    }

    function setManualRpsApprovalValue(field, value) {
        if (!field || value === undefined || value === null || String(value).trim() === '') {
            return;
        }

        field.value = value;
        field.dispatchEvent(new Event('input', { bubbles: true }));
        field.dispatchEvent(new Event('change', { bubbles: true }));
    }

    function refreshManualRpsAuthorizations() {
        const approvalRows = document.querySelectorAll('[data-repeater-list="approvals"] .repeater-row');
        const lecturerName = document.querySelector('#lecturer_name')?.value || '';
        const courseGroup = document.querySelector('#course_group')?.value || '';
        const compileDate = document.querySelector('#compile_date')?.value || '';
        const developer = {
            name: lecturerName,
            identifier: manualRpsFacultyIdentifierForNames(lecturerName),
        };
        const rmkCoordinator = manualRpsRmkCoordinatorForGroup(courseGroup);
        const headOfStudyProgram = manualRpsHeadOfStudyProgram();

        refreshManualRpsRightSignature();

        approvalRows.forEach((row) => {
            const roleField = row.querySelector('input[name*="[role_name]"]');
            const signerField = row.querySelector('input[name*="[signer_name]"]');
            const identifierField = row.querySelector('input[name*="[signer_identifier]"]');
            const dateField = row.querySelector('input[name*="[approval_date]"]');
            const role = normalizeManualCourseName(roleField?.value || '');
            let source = null;

            if (role.includes('pengembang')) {
                source = developer;
            } else if (role.includes('koordinator') || role.includes('rmk')) {
                source = rmkCoordinator;
            } else if (role.includes('ketua') || role.includes('kaprodi') || role.includes('prodi')) {
                source = headOfStudyProgram;
            }

            if (!source) {
                return;
            }

            setManualRpsApprovalValue(signerField, source.name || '');
            setManualRpsApprovalValue(identifierField, source.identifier || '');
            setManualRpsApprovalValue(dateField, compileDate || '');
        });
    }

    function applyActiveSemesterCourseAssignment(courseName) {
        const targetName = normalizeManualCourseName(courseName);
        const lecturerField = document.querySelector('#lecturer_name');

        if (!targetName || !Array.isArray(activeSemesterCourseAssignments)) {
            if (lecturerField) lecturerField.value = '';
            return;
        }

        const matchedRows = activeSemesterCourseAssignments.filter((row) => normalizeManualCourseName(row.course_name) === targetName);

        if (matchedRows.length === 0) {
            if (lecturerField) lecturerField.value = '';
            return;
        }

        const courseCodeField = document.querySelector('#course_code');
        const lecturerNames = Array.from(new Set(matchedRows.map((row) => `${row.lecturer_name ?? ''}`.trim()).filter(Boolean)));
        const courseCodes = Array.from(new Set(matchedRows.map((row) => `${row.course_code ?? ''}`.trim()).filter(Boolean)));

        if (lecturerField) {
            lecturerField.value = lecturerNames.length > 0 ? lecturerNames.join('; ') : '';
            lecturerField.dispatchEvent(new Event('input', { bubbles: true }));
            lecturerField.dispatchEvent(new Event('change', { bubbles: true }));
        }

        if (courseCodeField && courseCodes.length > 0 && `${courseCodeField.value ?? ''}`.trim() === '') {
            courseCodeField.value = courseCodes[0];
        }

        refreshManualRpsCompileDate();
        refreshManualRpsDocumentCode();
        refreshManualRpsAuthorizations();
    }

    function applyCurriculumProfile(courseName) {
        const profile = curriculumCourseProfiles[courseName];

        if (!profile || !profile.official_course) {
            applyActiveSemesterCourseAssignment(courseName);
            applyCoursePrerequisitesFromCurriculum(courseName);
            return;
        }

        const officialCourse = profile.official_course;

        const assignValue = (selector, value, { preserveIfEmpty = true } = {}) => {
            const field = document.querySelector(selector);

            if (!field) {
                return;
            }

            const normalizedValue = value ?? '';

            if (normalizedValue === '' && preserveIfEmpty) {
                return;
            }

            field.value = normalizedValue;
        };

        assignValue('#university_name', profile.institution?.institution_name ?? '');
        assignValue('#faculty_name', profile.institution?.faculty_name ?? '');
        assignValue('#study_program_name', profile.institution?.study_program_name ?? '');
        refreshManualRpsDocumentCode();
        assignValue('#course_code', officialCourse.course_code ?? '');
        assignValue('#course_group', officialCourse.course_type ?? '');
        assignValue('#sks', officialCourse.sks ?? '', { preserveIfEmpty: false });
        assignValue('#semester', officialCourse.semester ?? '');
        refreshManualRpsCompileDate();
        refreshManualRpsDocumentCode();
        assignValue('#course_description', officialCourse.description ?? '');

        const studyMaterialLines = Array.isArray(officialCourse.study_material_lines) ? officialCourse.study_material_lines : [];
        if (studyMaterialLines.length > 0) {
            assignValue('#study_materials', studyMaterialLines.join('\n'), { preserveIfEmpty: false });
        }

        setTableRows('cpl_items', 'outcome-row-template', officialCourse.cpl_items ?? [], (row) => ({
            code: row.code ?? '',
            description: row.description ?? '',
        }));

        setTableRows('cpmk_items', 'outcome-row-template', officialCourse.cpmk_items ?? [], (row) => ({
            code: row.code ?? '',
            description: row.description ?? '',
        }));

        applyAlternativeFieldSets(profile);
        applyActiveSemesterCourseAssignment(courseName);
        applyCoursePrerequisitesFromCurriculum(courseName);
    }

    function shouldApplyCurriculumProfileOnLoad(courseName) {
        if (!courseName) {
            return false;
        }

        const importantValues = [
            document.querySelector('#course_code')?.value ?? '',
            document.querySelector('#course_description')?.value ?? '',
            document.querySelector('#study_materials')?.value ?? '',
            document.querySelector('[name="cpl_items[0][description]"]')?.value ?? '',
            document.querySelector('[name="cpmk_items[0][description]"]')?.value ?? '',
        ].map((value) => value.trim());

        return importantValues.every((value) => value === '');
    }

    function refreshManualRowNumbers(list) {
        Array.from(list.children).forEach((row, index) => {
            row.querySelectorAll('.manual-rps-row-no').forEach((target) => {
                target.textContent = index + 1;
            });
        });
    }

    function subCpmkCodeOptions() {
        return Array.from({ length: 14 }, (_, index) => `Sub-CPMK ${index + 1}`);
    }

    function manualRpsCleanInlineText(value) {
        return `${value ?? ''}`.replace(/\s+/g, ' ').trim();
    }

    function buildWeeklySubCpmkOptionsFromRows() {
        const list = document.querySelector('[data-repeater-list="sub_cpmk_items"]');

        if (!list) {
            return [];
        }

        const options = [];

        list.querySelectorAll('.repeater-row').forEach((row) => {
            const code = manualRpsCleanInlineText(row.querySelector('[name$="[code]"]')?.value ?? '');
            const description = manualRpsCleanInlineText(row.querySelector('[name$="[description]"]')?.value ?? '');
            const text = code && description ? `${code} - ${description}` : (code || description);

            if (text && !options.includes(text)) {
                options.push(text);
            }
        });

        return options;
    }

    function refreshWeeklySubCpmkDropdowns() {
        const options = buildWeeklySubCpmkOptionsFromRows();

        document.querySelectorAll('[data-weekly-sub-cpmk-select]').forEach((select) => {
            const currentValue = select.value;
            select.innerHTML = '';

            const placeholder = document.createElement('option');
            placeholder.value = '';
            placeholder.textContent = options.length > 0
                ? 'Pilih Sub-CPMK dari daftar Sub-CPMK'
                : 'Isi Sub-CPMK terlebih dahulu';
            select.appendChild(placeholder);

            options.forEach((text) => {
                const option = document.createElement('option');
                option.value = text;
                option.textContent = text;
                option.selected = currentValue === text;
                select.appendChild(option);
            });

            if (currentValue && !options.includes(currentValue)) {
                const option = document.createElement('option');
                option.value = currentValue;
                option.textContent = currentValue;
                option.selected = true;
                select.appendChild(option);
            }
        });
    }

    document.addEventListener('input', (event) => {
        if (event.target.closest('[data-repeater-list="sub_cpmk_items"]')) {
            refreshWeeklySubCpmkDropdowns();
        }
    });

    document.addEventListener('change', (event) => {
        if (event.target.closest('[data-repeater-list="sub_cpmk_items"]')) {
            refreshWeeklySubCpmkDropdowns();
        }
    });

    function normalizeOutcomeCodeField(listName, row, index, selectedValue = '') {
        if (listName !== 'sub_cpmk_items' || !row) {
            return;
        }

        const oldField = row.querySelector('[data-name="code"], [name$="[code]"]');

        if (!oldField || oldField.tagName === 'SELECT') {
            if (oldField) {
                oldField.name = `${listName}[${index}][code]`;
                oldField.value = selectedValue;
            }
            return;
        }

        const select = document.createElement('select');
        select.name = `${listName}[${index}][code]`;
        select.dataset.name = 'code';
        select.dataset.subCpmkCodeSelect = 'true';

        const placeholder = document.createElement('option');
        placeholder.value = '';
        placeholder.textContent = 'Pilih Sub-CPMK';
        select.appendChild(placeholder);

        subCpmkCodeOptions().forEach((code) => {
            const option = document.createElement('option');
            option.value = code;
            option.textContent = code;
            option.selected = selectedValue === code;
            select.appendChild(option);
        });

        oldField.replaceWith(select);
    }

    function appendRepeaterItem(listName, templateId) {
        const list = document.querySelector(`[data-repeater-list="${listName}"]`);
        const template = document.getElementById(templateId);
        const fragment = template.content.cloneNode(true);
        const index = list.children.length;

        fragment.querySelectorAll('[data-name]').forEach((field) => {
            field.name = `${listName}[${index}][${field.dataset.name}]`;
        });

        const newRow = fragment.querySelector('.repeater-row');
        normalizeOutcomeCodeField(listName, newRow, index);

        list.appendChild(fragment);
        refreshManualRowNumbers(list);

        if (listName === 'sub_cpmk_items') {
            refreshWeeklySubCpmkDropdowns();
        }
    }

    document.querySelectorAll('[data-add-outcome]').forEach((button) => {
        button.addEventListener('click', () => appendRepeaterItem(button.dataset.addOutcome, 'outcome-row-template'));
    });

    document.querySelectorAll('[data-add-reference]').forEach((button) => {
        button.addEventListener('click', () => appendRepeaterItem(button.dataset.addReference, 'reference-row-template'));
    });

    const approvalButton = document.querySelector('[data-add-approval]');
    if (approvalButton) {
        approvalButton.addEventListener('click', () => appendRepeaterItem('approvals', 'approval-row-template'));
    }

    document.addEventListener('click', (event) => {
        const deleteButton = event.target.closest('[data-delete-repeater-row]');

        if (!deleteButton) {
            return;
        }

        const row = deleteButton.closest('.repeater-row');
        const list = row?.closest('[data-repeater-list]');

        if (!row || !list) {
            return;
        }

        if (list.children.length <= 1) {
            row.querySelectorAll('input, textarea, select').forEach((field) => {
                field.value = '';
            });
            refreshManualRowNumbers(list);
            if (list.dataset.repeaterList === 'sub_cpmk_items') {
                refreshWeeklySubCpmkDropdowns();
            }
            return;
        }

        row.remove();

        Array.from(list.children).forEach((currentRow, rowIndex) => {
            currentRow.querySelectorAll('[name]').forEach((field) => {
                field.name = field.name.replace(/\[[0-9]+\]/, `[${rowIndex}]`);
            });
        });

        refreshManualRowNumbers(list);
        if (list.dataset.repeaterList === 'sub_cpmk_items') {
            refreshWeeklySubCpmkDropdowns();
        }
    });

    document.querySelectorAll('[data-repeater-list]').forEach((list) => refreshManualRowNumbers(list));
    refreshWeeklySubCpmkDropdowns();

    function manualRpsSetFieldByName(name, value) {
        const field = Array.from(document.querySelectorAll('input, textarea, select')).find((item) => item.getAttribute('name') === name);
        if (!field) {
            return;
        }

        if (field.tagName === 'SELECT') {
            const optionExists = Array.from(field.options).some((option) => option.value === value);
            if (value && !optionExists) {
                const option = document.createElement('option');
                option.value = value;
                option.textContent = value;
                field.appendChild(option);
            }
        }

        field.value = value ?? '';
        field.dispatchEvent(new Event('input', { bubbles: true }));
        field.dispatchEvent(new Event('change', { bubbles: true }));

        if (field.matches('[data-manual-rps-auto-grow]')) {
            field.style.height = 'auto';
            field.style.height = `${Math.max(field.scrollHeight + 2, 120)}px`;
        }
    }

    function manualRpsApplyImportedExcelData(payload) {
        const data = payload || {};

        if (Array.isArray(data.sub_cpmk_items) && data.sub_cpmk_items.length > 0) {
            setTableRows('sub_cpmk_items', 'outcome-row-template', data.sub_cpmk_items, (row, index) => ({
                code: row.code || `Sub-CPMK ${index + 1}`,
                description: row.description || '',
            }));
            refreshWeeklySubCpmkDropdowns();
        }

        if (Array.isArray(data.main_references) && data.main_references.length > 0) {
            setTableRows('main_references', 'reference-row-template', data.main_references, (row) => ({
                citation: row.citation || '',
            }));
        }

        if (Array.isArray(data.supporting_references) && data.supporting_references.length > 0) {
            setTableRows('supporting_references', 'reference-row-template', data.supporting_references, (row) => ({
                citation: row.citation || '',
            }));
        }

        if (Array.isArray(data.meetings)) {
            data.meetings.forEach((meeting) => {
                const week = Number.parseInt(meeting.week_number, 10);
                if (!week) {
                    return;
                }

                const weekInput = Array.from(document.querySelectorAll('input[name$="[week_number]"]')).find((input) => Number.parseInt(input.value, 10) === week);
                const match = weekInput?.name?.match(/^meetings\[(\d+)\]/);
                if (!match) {
                    return;
                }

                const index = match[1];
                const fields = {
                    session_type: meeting.session_type || (week === 8 ? 'uts' : (week === 16 ? 'uas' : 'regular')),
                    sub_cpmk: meeting.sub_cpmk || '',
                    indicator: meeting.indicator || '',
                    assessment_criteria: meeting.assessment_criteria || '',
                    assessment_form: meeting.assessment_form || '',
                    offline_activity: meeting.offline_activity || '',
                    online_activity: meeting.online_activity || '',
                    study_material: meeting.study_material || '',
                    assessment_weight: meeting.assessment_weight || '',
                };

                Object.entries(fields).forEach(([key, value]) => {
                    manualRpsSetFieldByName(`meetings[${index}][${key}]`, value);
                });
            });
        }

        document.querySelectorAll('[data-repeater-list]').forEach((list) => refreshManualRowNumbers(list));
        refreshWeeklySubCpmkDropdowns();
    }

    const manualRpsExcelImportButton = document.querySelector('[data-manual-rps-excel-import]');
    const manualRpsExcelFileInput = document.querySelector('[data-manual-rps-excel-file]');
    const manualRpsExcelImportPanel = document.querySelector('[data-manual-rps-excel-import-panel]');
    const manualRpsExcelStatus = document.querySelector('[data-manual-rps-excel-status]');

    manualRpsExcelImportButton?.addEventListener('click', async () => {
        const file = manualRpsExcelFileInput?.files?.[0];
        const importUrl = manualRpsExcelImportPanel?.dataset.importUrl;
        const csrfToken = document.querySelector('input[name="_token"]')?.value || document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

        if (!file) {
            if (manualRpsExcelStatus) manualRpsExcelStatus.textContent = 'Pilih file Excel terlebih dahulu.';
            return;
        }

        if (!importUrl) {
            if (manualRpsExcelStatus) manualRpsExcelStatus.textContent = 'URL import Excel tidak ditemukan.';
            return;
        }

        const formData = new FormData();
        formData.append('template_file', file);

        manualRpsExcelImportButton.disabled = true;
        if (manualRpsExcelStatus) manualRpsExcelStatus.textContent = 'Membaca file Excel...';

        try {
            const response = await fetch(importUrl, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json',
                },
                body: formData,
            });

            const result = await response.json().catch(() => ({}));

            if (!response.ok) {
                throw new Error(result.message || 'File Excel belum bisa diproses.');
            }

            manualRpsApplyImportedExcelData(result.data || {});
            if (manualRpsExcelStatus) manualRpsExcelStatus.textContent = result.message || 'Data Excel berhasil diterapkan ke form. Klik Simpan untuk menyimpan ke database.';
        } catch (error) {
            if (manualRpsExcelStatus) manualRpsExcelStatus.textContent = error.message || 'Terjadi kesalahan saat membaca Excel.';
        } finally {
            manualRpsExcelImportButton.disabled = false;
        }
    });

    ['#study_program_name', '#faculty_name', '#compile_date'].forEach((selector) => {
        document.querySelector(selector)?.addEventListener('input', refreshManualRpsDocumentCode);
        document.querySelector(selector)?.addEventListener('change', refreshManualRpsDocumentCode);
    });

    ['#semester', '#course_name'].forEach((selector) => {
        document.querySelector(selector)?.addEventListener('input', () => {
            refreshManualRpsCompileDate();
            refreshManualRpsDocumentCode();
        });
        document.querySelector(selector)?.addEventListener('change', () => {
            refreshManualRpsCompileDate();
            refreshManualRpsDocumentCode();
        });
    });

    refreshManualRpsCompileDate();
    refreshManualRpsDocumentCode();
    refreshManualRpsAuthorizations();

    ['#lecturer_name', '#course_group', '#compile_date'].forEach((selector) => {
        document.querySelector(selector)?.addEventListener('input', refreshManualRpsAuthorizations);
        document.querySelector(selector)?.addEventListener('change', refreshManualRpsAuthorizations);
    });

    const courseSelect = document.querySelector('[data-curriculum-course-select]');
    if (courseSelect) {
        courseSelect.addEventListener('change', (event) => {
            const selectedCourse = event.target.value;

            if (!selectedCourse) {
                return;
            }

            applyCurriculumProfile(selectedCourse);
        });

        if (shouldApplyCurriculumProfileOnLoad(courseSelect.value)) {
            applyCurriculumProfile(courseSelect.value);
        } else if (courseSelect.value && curriculumCourseProfiles[courseSelect.value]) {
            applyAlternativeFieldSets(curriculumCourseProfiles[courseSelect.value]);
            applyCoursePrerequisitesFromCurriculum(courseSelect.value);
        } else if (courseSelect.value) {
            applyCoursePrerequisitesFromCurriculum(courseSelect.value);
            refreshManualRpsAuthorizations();
        }
    }

    refreshManualRpsAuthorizations();

    document.querySelectorAll('[data-tabs-shell]').forEach((shell) => {
        const buttons = shell.querySelectorAll('[data-tab-target]');
        const panels = shell.querySelectorAll('[data-tab-panel]');

        buttons.forEach((button) => {
            button.addEventListener('click', () => {
                const target = button.dataset.tabTarget;

                buttons.forEach((item) => item.classList.remove('active'));
                panels.forEach((panel) => panel.classList.remove('active'));

                button.classList.add('active');
                shell.querySelector(`[data-tab-panel="${target}"]`)?.classList.add('active');
            });
        });
    });
</script>

<script>
    (() => {
        document.querySelectorAll('[data-assessment-learning-picker]').forEach((picker) => {
            picker.addEventListener('change', () => {
                const value = picker.value;
                const targetName = picker.getAttribute('data-target-name');

                if (!value || !targetName) {
                    return;
                }

                const target = Array.from(document.querySelectorAll('textarea, input')).find((field) => field.getAttribute('name') === targetName);

                if (!target) {
                    return;
                }

                target.value = value;
                target.dispatchEvent(new Event('input', { bubbles: true }));
                picker.value = '';
            });
        });


        function manualRpsResizeTextarea(field) {
            if (!field || field.tagName !== 'TEXTAREA') {
                return;
            }

            field.style.height = 'auto';
            const nextHeight = Math.max(field.scrollHeight + 2, 120);
            field.style.height = `${nextHeight}px`;
        }

        function manualRpsInitAutoGrowTextareas(root = document) {
            root.querySelectorAll('[data-manual-rps-auto-grow]').forEach((field) => {
                manualRpsResizeTextarea(field);
                field.addEventListener('input', () => manualRpsResizeTextarea(field));
                field.addEventListener('change', () => manualRpsResizeTextarea(field));
            });
        }

        function manualRpsCleanBulletText(line) {
            return `${line ?? ''}`.replace(/^[\s•\-–—]+/u, '').trim();
        }

        function manualRpsAppendBulletToField(target, value) {
            const selectedValue = `${value ?? ''}`.trim();

            if (!target || selectedValue === '') {
                return;
            }

            const existingLines = `${target.value ?? ''}`
                .split(/\r\n|\r|\n/)
                .map((line) => line.trim())
                .filter((line) => line !== '');

            const alreadyExists = existingLines.some((line) => manualRpsCleanBulletText(line) === selectedValue);

            if (!alreadyExists) {
                existingLines.push(`• ${selectedValue}`);
            }

            target.value = existingLines.join('\n');
            manualRpsResizeTextarea(target);
            target.dispatchEvent(new Event('input', { bubbles: true }));
            target.dispatchEvent(new Event('change', { bubbles: true }));
        }

        document.querySelectorAll('[data-manual-rps-bullet-picker]').forEach((picker) => {
            picker.addEventListener('change', () => {
                const value = `${picker.value ?? ''}`.trim();
                const targetName = picker.getAttribute('data-target-name');

                if (!value || !targetName) {
                    return;
                }

                let localTarget = null;
                try {
                    localTarget = picker.closest('.manual-rps-field-stack')?.querySelector(`textarea[name="${CSS.escape(targetName)}"], input[name="${CSS.escape(targetName)}"]`);
                } catch (error) {
                    localTarget = null;
                }

                const globalTarget = Array.from(document.querySelectorAll('textarea, input')).find((field) => field.getAttribute('name') === targetName);
                const target = localTarget || globalTarget;

                if (!target) {
                    picker.value = '';
                    return;
                }

                manualRpsAppendBulletToField(target, value);
                picker.value = '';
            });
        });

        manualRpsInitReadableSelects();
        manualRpsInitAutoGrowTextareas();
        window.addEventListener('load', () => {
            manualRpsInitReadableSelects();
            manualRpsInitAutoGrowTextareas();
        });
    })();
</script>


<script>
    (() => {
        const select = document.querySelector('[data-left-signature-select]');
        const nidnInput = document.querySelector('[data-left-signature-nidn]');
        const pathInput = document.querySelector('[data-left-signature-path]');
        const previewWrap = document.querySelector('[data-left-signature-preview-wrap]');
        const previewImage = document.querySelector('[data-left-signature-preview]');

        if (!select) {
            return;
        }

        const applyLeftSignature = (force = true) => {
            const option = select.options[select.selectedIndex];

            if (!option) {
                return;
            }

            const nidn = option.getAttribute('data-nidn') || '';
            const signaturePath = option.getAttribute('data-signature-path') || '';
            const signatureUrl = option.getAttribute('data-signature-url') || '';

            if (nidnInput && nidn !== '' && (force || nidnInput.value.trim() === '')) {
                nidnInput.value = nidn;
                nidnInput.dispatchEvent(new Event('input', { bubbles: true }));
            }

            if (pathInput && (force || pathInput.value.trim() === '')) {
                pathInput.value = signaturePath;
            }

            if (previewWrap && previewImage) {
                if (signatureUrl !== '') {
                    previewImage.src = signatureUrl;
                    previewWrap.style.display = '';
                } else if (signaturePath === '') {
                    previewImage.removeAttribute('src');
                    previewWrap.style.display = 'none';
                }
            }
        };

        select.addEventListener('change', () => applyLeftSignature(true));
        applyLeftSignature(false);
    })();
</script>