@extends('layout.user')
@section('content')

@php
    // Variabel untuk mengunci form jika sudah pernah submit
    $isLocked = $assessment && $assessment->self_assessment_submitted_at;
@endphp

<style>
    .table-success-soft > td, .table-success-soft > th {
        background-color: #e8f5e9 !important;
        color: #1b5e20 !important;
    }
    .table-success-soft {
        border-left: 5px solid #2e7d32 !important;
    }
    .matkul-header-row.table-primary > td, .matkul-header-row.table-primary > th {
        background-color: #cfe2ff !important;
        color: #084298 !important;
    }
    .searchable-select-wrapper {
        position: relative;
    }
    .searchable-select-wrapper select.matkul-dasar-select {
        display: none;
    }
    .searchable-select-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        user-select: none;
        background-color: #fff;
    }
    .searchable-select-toggle .placeholder-text {
        color: #98a2b3;
    }
    .searchable-select-toggle i {
        color: #98a2b3;
        transition: transform 0.2s ease;
    }
    .searchable-select-wrapper.open .searchable-select-toggle i {
        transform: rotate(180deg);
    }
    .searchable-select-panel {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        z-index: 1060;
        background: #fff;
        border: 1px solid #d0d5dd;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
        overflow: hidden;
        min-width: 220px;
    }
    .searchable-select-wrapper.open .searchable-select-panel {
        display: block;
    }
    .searchable-select-search {
        border: none;
        border-bottom: 1px solid #eaecf0;
        padding: 8px 12px;
        width: 100%;
        font-size: 13px;
        outline: none;
    }
    .searchable-select-options {
        max-height: 200px;
        overflow-y: auto;
    }
    .searchable-select-option {
        padding: 7px 12px;
        font-size: 13px;
        cursor: pointer;
        color: #1d2939;
    }
    .searchable-select-option:hover,
    .searchable-select-option.active {
        background-color: #eef2ff;
    }
    .searchable-select-option.selected {
        font-weight: 600;
        color: #4338ca;
    }
    .searchable-select-empty {
        padding: 8px 12px;
        font-size: 12px;
        color: #98a2b3;
        text-align: center;
    }
    .bukti-file-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        margin-top: 4px;
    }
</style>

<main id="main" class="main">
    <div class="pagetitle">
        <h1>Self Assessment Mata Kuliah</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/user/dashboard') }}">Home</a></li>
                <li class="breadcrumb-item active">Self Assessment</li>
            </ol>
        </nav>
    </div>

    <!-- Include Stepper Component -->
    @include('User.components.rpl-stepper')

    <section class="section">
        <div class="row">
            <div class="col-lg-12">

                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>@foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach</ul>
                    </div>
                @endif

                {{-- <<< PENAMBAHAN PESAN JIKA FORM TERKUNCI >>> --}}
                @if($isLocked)
                    <div class="alert alert-warning d-flex align-items-center" role="alert">
                        <i class="bi bi-lock-fill me-2"></i>
                        <div>
                            Anda telah mengirimkan hasil self-assessment pada tanggal <strong>{{ $assessment->self_assessment_submitted_at->format('d F Y, H:i') }}</strong>. Data tidak dapat diubah lagi.
                        </div>
                    </div>
                @endif
                
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Daftar Mata Kuliah</h5>
                        <!-- PDF Viewer -->
                        <div class="pdf-container mt-3 mb-3">
                            <embed 
                                src="{{ route('view-transkrip', $existing_transkrip->file) }}"
                                type="application/pdf"
                                width="100%"
                                height="600px"
                            />
                        </div>
                        <p>Klik pada salah satu mata kuliah untuk membuka form penilaian.</p>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>No</th>
                                        <th>Nama Mata Kuliah</th>
                                        <th>Status Pengajuan</th>
                                    </tr>
                                </thead>
                                <tbody id="matkul-table-body">
                                    @foreach($matkuls as $matkul)
                                        @php
                                            $currentAssessment = $matkulAssessments->get($matkul->id);
                                            $choice = $currentAssessment->self_assessment_value ?? '';
                                        @endphp
                                        <tr class="matkul-header-row @if($choice == 'Mengajukan' || $choice == 'Tidak Mengajukan') table-success-soft @endif" data-matkul-id="{{ $matkul->id }}" style="{{ $isLocked ? 'cursor: not-allowed;' : 'cursor: pointer;' }}">
                                            <th scope="row">{{ $loop->iteration }}</th>
                                            <td>{{ $matkul->nama_matkul }}</td>
                                            <td>
                                                @if($choice == 'Mengajukan')
                                                    <span class="badge bg-success">Mengajukan</span>
                                                @elseif($choice == 'Tidak Mengajukan')
                                                    <span class="badge bg-danger">Tidak Mengajukan</span>
                                                @else
                                                    <span class="badge bg-secondary">Belum Dipilih</span>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr class="assessment-content-row" id="content-{{$matkul->id}}" style="display: none;">
                                            <td colspan="3" class="p-3">
                                                {{-- Form akan di-generate oleh JavaScript di sini --}}
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body text-center p-4">
                        <h5 class="card-title">Kirim Hasil Self-Assessment Final</h5>
                        @if ($isLocked)
                            <p class="text-muted">Status RPL saat ini adalah <strong>{{ ucwords(str_replace('_', ' ', $assessment->rpl_status)) }}</strong>.</p>
                            <button class="btn btn-success mb-3" disabled><i class="bi bi-check-circle"></i> Sudah Dikirim</button>
                        @else
                            <p>Pastikan semua penilaian telah terisi dengan benar. Setelah dikirim, data tidak dapat diubah kembali.</p>
                            @if($unaddressedMatkulNames->isNotEmpty())
                                <div class="alert alert-warning text-start mx-auto" style="max-width: 600px;">
                                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                                    <strong>Perhatian:</strong> Anda belum memilih Mengajukan/Tidak Mengajukan untuk mata kuliah berikut:
                                    <ul class="mb-1 mt-2">
                                        @foreach($unaddressedMatkulNames as $namaMatkul)
                                            <li>{{ $namaMatkul }}</li>
                                        @endforeach
                                    </ul>
                                    Jika Anda tetap mengirim, mata kuliah tersebut akan otomatis dianggap <strong>"Tidak Mengajukan"</strong>.
                                </div>
                            @endif
                            <form id="submitSelfAssessmentForm" action="{{ route('submit-matkul-self-assessment') }}" method="POST" class="mb-3">
                                @csrf
                                <button type="submit" class="btn btn-primary"><i class="bi bi-send-check"></i> Kirim Hasil Self-Assessment</button>
                            </form>
                        @endif

                        <div class="d-flex justify-content-between mt-4 pt-3 border-top">
                            <a href="{{ route('input-transkrip') }}" class="btn btn-outline-secondary rounded-pill px-4">
                                <i class="bi bi-arrow-left me-2"></i> Sebelumnya
                            </a>
                            @if ($isLocked)
                                <a href="{{ route('view-nilai') }}" class="btn btn-primary rounded-pill px-4">
                                    Selanjutnya (Hasil Penilaian) <i class="bi bi-arrow-right ms-2"></i>
                                </a>
                            @else
                                <button class="btn btn-primary rounded-pill px-4" disabled data-bs-toggle="tooltip" data-bs-placement="top" title="Kirim Self-Assessment untuk melihat hasil penilaian">
                                    Selanjutnya <i class="bi bi-arrow-right ms-2"></i>
                                </button>
                            @endif
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- Modal Preview Bukti -->
    <div class="modal fade" id="buktiPreviewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="buktiPreviewModalLabel">Preview Bukti</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center" id="buktiPreviewModalBody" style="min-height: 300px;">
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Konfirmasi Pengiriman (Tahap 1) -->
    <div class="modal fade" id="confirmSubmitModal1" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-question-circle-fill text-primary me-2"></i>Konfirmasi Pengiriman</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="confirmSubmitModal1Body">
                    <p>Apakah Anda yakin ingin mengirim semua hasil self-assessment ini?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" id="confirmSubmitModal1NextBtn">Lanjutkan</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Konfirmasi Pengiriman (Tahap 2 - Final) -->
    <div class="modal fade" id="confirmSubmitModal2" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-danger">
                <div class="modal-header bg-danger-subtle">
                    <h5 class="modal-title text-danger"><i class="bi bi-exclamation-triangle-fill me-2"></i>Konfirmasi Akhir</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0">Setelah dikirim, seluruh data self-assessment <strong>tidak dapat diubah lagi</strong>. Pastikan seluruh penilaian dan bukti yang diunggah sudah benar.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-danger" id="confirmSubmitModal2ConfirmBtn"><i class="bi bi-send-check me-1"></i> Kirim Sekarang</button>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const isLocked = {{ $isLocked ? 'true' : 'false' }};
    const transkripMatkuls = @json($existing_transkrip->mata_kuliah_transkrip ?? []);
    const matkulsData = @json($matkulsForJs);
    const allCpmkAssessmentsData = @json($allExistingCpmkAssessments);
    const matkulAssessmentsData = @json($matkulAssessments);
    const unaddressedMatkulNames = @json($unaddressedMatkulNames);
    const tableBody = document.getElementById('matkul-table-body');

    function showBuktiPreview(url, filename) {
        const modalEl = document.getElementById('buktiPreviewModal');
        const modalBody = document.getElementById('buktiPreviewModalBody');
        const modalLabel = document.getElementById('buktiPreviewModalLabel');
        modalLabel.textContent = filename || 'Preview Bukti';

        const ext = (filename || url).split('.').pop().toLowerCase().split('?')[0];
        if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) {
            modalBody.innerHTML = `<img src="${url}" class="img-fluid" alt="${filename || ''}">`;
        } else if (ext === 'pdf') {
            modalBody.innerHTML = `<embed src="${url}" type="application/pdf" width="100%" height="500px">`;
        } else {
            modalBody.innerHTML = `<p>Preview tidak tersedia untuk tipe file ini.</p><a href="${url}" target="_blank" class="btn btn-primary btn-sm">Unduh File</a>`;
        }

        const modal = new bootstrap.Modal(modalEl);
        modal.show();
    }

    const submitForm = document.getElementById('submitSelfAssessmentForm');
    if (submitForm) {
        const confirmModal1El = document.getElementById('confirmSubmitModal1');
        const confirmModal1Body = document.getElementById('confirmSubmitModal1Body');
        const confirmModal1NextBtn = document.getElementById('confirmSubmitModal1NextBtn');
        const confirmModal2El = document.getElementById('confirmSubmitModal2');
        const confirmModal2ConfirmBtn = document.getElementById('confirmSubmitModal2ConfirmBtn');
        const confirmModal1 = new bootstrap.Modal(confirmModal1El);
        const confirmModal2 = new bootstrap.Modal(confirmModal2El);

        submitForm.addEventListener('submit', function (event) {
            event.preventDefault();

            if (unaddressedMatkulNames.length > 0) {
                confirmModal1Body.innerHTML = `
                    <p>Anda belum memilih Mengajukan/Tidak Mengajukan untuk mata kuliah berikut:</p>
                    <ul class="mb-2">
                        ${unaddressedMatkulNames.map(n => `<li>${n}</li>`).join('')}
                    </ul>
                    <p class="mb-0">Jika Anda tetap mengirim, mata kuliah tersebut akan otomatis dianggap <strong>"Tidak Mengajukan"</strong>.</p>`;
            } else {
                confirmModal1Body.innerHTML = `<p class="mb-0">Apakah Anda yakin ingin mengirim semua hasil self-assessment ini?</p>`;
            }

            confirmModal1.show();
        });

        confirmModal1NextBtn.addEventListener('click', function () {
            confirmModal1.hide();
            confirmModal2.show();
        });

        confirmModal2ConfirmBtn.addEventListener('click', function () {
            confirmModal2.hide();
            submitForm.submit();
        });
    }

    tableBody.addEventListener('click', function(event) {
        if (isLocked) return; // Jika terkunci, jangan lakukan apa-apa

        const headerRow = event.target.closest('.matkul-header-row');
        if (!headerRow) return;

        const matkulId = headerRow.dataset.matkulId;
        const contentRow = document.getElementById(`content-${matkulId}`);
        const isAlreadyOpen = contentRow.style.display === 'table-row';

        document.querySelectorAll('.assessment-content-row').forEach(row => {
            if(row.id !== `content-${matkulId}`) {
                row.style.display = 'none';
                row.querySelector('td').innerHTML = '';
            }
        });
        
        document.querySelectorAll('.matkul-header-row').forEach(row => {
            row.classList.remove('table-primary');
        });

        if (!isAlreadyOpen) {
            headerRow.classList.add('table-primary');
            contentRow.style.display = 'table-row';
            generateFormContent(contentRow.querySelector('td'), matkulId);
        } else {
            contentRow.style.display = 'none';
            contentRow.querySelector('td').innerHTML = '';
        }
    });

    function generateFormContent(cell, matkulId) {
        const matkul = matkulsData[matkulId];
        const cpmkAssessments = allCpmkAssessmentsData[matkulId] || [];
        const matkulAssessment = matkulAssessmentsData[matkulId] || {};
        const choice = matkulAssessment.self_assessment_value || '';
        const disabledAttr = isLocked ? 'disabled' : ''; // Tambahkan atribut disabled jika terkunci

        let formHtml = `
            <form action="{{ route('store-matkul-self-assessment') }}" method="POST" enctype="multipart/form-data" class="p-3 bg-light border rounded">
                @csrf
                <input type="hidden" name="matkul_id" value="${matkulId}">
                <h5>Formulir Penilaian: <strong>${matkul.nama_matkul}</strong></h5>
                <div class="my-3">
                    <label class="form-label fw-bold">Apakah Anda ingin mengajukan RPL untuk mata kuliah ini?</label>
                    <div class="form-check">
                        <input class="form-check-input choice-radio" type="radio" name="choice" id="ajukan-form-${matkulId}" value="Mengajukan" ${choice === 'Mengajukan' ? 'checked' : ''} ${disabledAttr}>
                        <label class="form-check-label" for="ajukan-form-${matkulId}">Ya, saya ingin mengajukan.</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input choice-radio" type="radio" name="choice" id="tidak-ajukan-form-${matkulId}" value="Tidak Mengajukan" ${choice === 'Tidak Mengajukan' ? 'checked' : ''} ${disabledAttr}>
                        <label class="form-check-label" for="tidak-ajukan-form-${matkulId}">Tidak, saya tidak mengajukan.</label>
                    </div>
                </div>
                <div class="cpmk-section" style="${choice === 'Mengajukan' ? '' : 'display: none;'}">
                    <hr>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 15%;">Sub-CPMK</th>
                                    <th style="width: 25%;">Mata Kuliah Dasar</th>
                                    <th style="width: 10%;">Nilai Dasar</th>
                                    <th style="width: 15%;">Self Assessment</th>
                                    <th style="width: 20%;">Alasan</th>
                                    <th style="width: 15%;">Bukti</th>
                                </tr>
                            </thead>
                            <tbody>`;
        
        if (matkul.cpmk && matkul.cpmk.length > 0) {
            matkul.cpmk.forEach(cpmk => {
                const existing = cpmkAssessments.find(a => a.sub_cpmk_id == cpmk.id) || {};
                const matkulDasar = existing.matkul_dasar || '';
                const nilaiMatkulDasar = existing.nilai_matkul_dasar || '';
                const selfValue = existing.self_assessment_value || '';
                const alasan = existing.alasan || '';

                let existingBuktiList = [];
                if (existing.bukti) {
                    try {
                        const parsed = JSON.parse(existing.bukti);
                        existingBuktiList = Array.isArray(parsed) ? parsed : [existing.bukti];
                    } catch (e) {
                        existingBuktiList = [existing.bukti];
                    }
                }

                let selectOptions = `<option value="">Pilih Mata Kuliah...</option>`;
                transkripMatkuls.forEach(tm => {
                    const isSelected = matkulDasar === tm.nama ? 'selected' : '';
                    selectOptions += `<option value="${tm.nama}" data-nilai="${tm.nilai}" ${isSelected}>${tm.nama}</option>`;
                });
                if (matkulDasar && !transkripMatkuls.some(tm => tm.nama === matkulDasar)) {
                    selectOptions += `<option value="${matkulDasar}" data-nilai="${nilaiMatkulDasar}" selected>${matkulDasar} (Kustom)</option>`;
                }

                let existingBuktiHtml = '';
                existingBuktiList.forEach((path, idx) => {
                    const fullUrl = `{{ asset('') }}${path}`;
                    const fileName = path.split('/').pop();
                    existingBuktiHtml += `<div class="bukti-file-item">
                        <button type="button" class="btn btn-sm btn-outline-info p-1 py-0 bukti-view-btn" style="font-size: 11px;" data-url="${fullUrl}" data-filename="${fileName}"><i class="bi bi-eye"></i> Bukti ${idx + 1}</button>
                        <a href="${fullUrl}" target="_blank" class="btn btn-sm btn-outline-secondary p-1 py-0" style="font-size: 11px;" title="Unduh"><i class="bi bi-download"></i></a>
                    </div>`;
                });

                formHtml += `
                    <tr>
                        <td>${cpmk.penjelasan}</td>
                        <td>
                            <div class="searchable-select-wrapper">
                                <select name="assessments[${cpmk.id}][matkul_dasar]" class="form-select matkul-dasar-select" ${disabledAttr}>
                                    ${selectOptions}
                                </select>
                            </div>
                        </td>
                        <td><input type="text" name="assessments[${cpmk.id}][nilai_matkul_dasar]" class="form-control nilai-matkul-dasar-input" value="${nilaiMatkulDasar}" readonly ${disabledAttr}></td>
                        <td>
                            <select name="assessments[${cpmk.id}][self_assessment_value]" class="form-select" ${disabledAttr}>
                                <option value="" ${selfValue === '' ? 'selected' : ''}>Pilih...</option>
                                <option value="Sangat Baik" ${selfValue === 'Sangat Baik' ? 'selected' : ''}>Sangat Baik</option>
                                <option value="Baik" ${selfValue === 'Baik' ? 'selected' : ''}>Baik</option>
                                <option value="Tidak Pernah" ${selfValue === 'Tidak Pernah' ? 'selected' : ''}>Tidak Pernah</option>
                            </select>
                        </td>
                        <td>
                            <textarea name="assessments[${cpmk.id}][alasan]" class="form-control" rows="2" placeholder="Masukkan alasan..." ${disabledAttr}>${alasan}</textarea>
                        </td>
                        <td>
                            ${disabledAttr ? '' : `
                            <div class="bukti-upload-widget">
                                <input type="file" name="assessments[${cpmk.id}][bukti][]" class="form-control form-control-sm bukti-file-input d-none" multiple>
                                <button type="button" class="btn btn-sm btn-outline-secondary bukti-add-btn"><i class="bi bi-paperclip"></i> Tambah Bukti</button>
                                <div class="bukti-pending-list mt-1"></div>
                            </div>`}
                            <div class="mt-1">${existingBuktiHtml}</div>
                        </td>
                    </tr>`;
            });
        } else {
            formHtml += `<tr><td colspan="6" class="text-center">Tidak ada Sub-CPMK untuk mata kuliah ini.</td></tr>`;
        }
        formHtml += `</tbody></table></div></div>
                <div class="text-center mt-3">
                    <button type="submit" class="btn btn-success" ${disabledAttr}>Simpan Penilaian</button>
                </div>
            </form>`;
        cell.innerHTML = formHtml;

        cell.querySelectorAll('.bukti-view-btn[data-url]').forEach(btn => {
            btn.addEventListener('click', () => {
                showBuktiPreview(btn.dataset.url, btn.dataset.filename);
            });
        });

        cell.querySelectorAll('.choice-radio').forEach(radio => {
            radio.addEventListener('change', function() {
                const cpmkSection = this.closest('form').querySelector('.cpmk-section');
                if(this.value === 'Mengajukan') {
                    cpmkSection.style.display = 'block';
                } else {
                    cpmkSection.style.display = 'none';
                }
            });
        });

        cell.querySelectorAll('.matkul-dasar-select').forEach(select => {
            select.addEventListener('change', function() {
                const selectedOption = this.options[this.selectedIndex];
                const nilai = selectedOption.getAttribute('data-nilai') || '';
                const row = this.closest('tr');
                const nilaiInput = row.querySelector('.nilai-matkul-dasar-input');
                if (nilaiInput) {
                    nilaiInput.value = nilai;
                }
            });
            initSearchableSelect(select);
        });

        cell.querySelectorAll('.bukti-upload-widget').forEach(widget => {
            initBuktiUpload(widget);
        });
    }

    // --- Upload bukti: akumulasi banyak file tanpa menimpa pilihan sebelumnya ---
    function initBuktiUpload(widget) {
        const input = widget.querySelector('.bukti-file-input');
        const addBtn = widget.querySelector('.bukti-add-btn');
        const pendingList = widget.querySelector('.bukti-pending-list');
        let selectedFiles = [];

        function renderPending() {
            pendingList.innerHTML = '';
            selectedFiles.forEach((file, idx) => {
                const item = document.createElement('div');
                item.className = 'bukti-file-item';
                item.innerHTML = `
                    <button type="button" class="btn btn-sm btn-outline-info p-1 py-0 bukti-view-btn" style="font-size: 11px;"><i class="bi bi-eye"></i> ${file.name}</button>
                    <button type="button" class="btn btn-sm btn-link text-danger p-0 bukti-remove-btn" style="font-size: 12px;">&times;</button>`;
                item.querySelector('.bukti-view-btn').addEventListener('click', () => {
                    const objectUrl = URL.createObjectURL(file);
                    showBuktiPreview(objectUrl, file.name);
                });
                item.querySelector('.bukti-remove-btn').addEventListener('click', () => {
                    selectedFiles.splice(idx, 1);
                    syncInput();
                    renderPending();
                });
                pendingList.appendChild(item);
            });
        }

        function syncInput() {
            const dataTransfer = new DataTransfer();
            selectedFiles.forEach(file => dataTransfer.items.add(file));
            input.files = dataTransfer.files;
        }

        addBtn.addEventListener('click', () => input.click());

        input.addEventListener('change', () => {
            Array.from(input.files).forEach(file => selectedFiles.push(file));
            syncInput();
            renderPending();
        });
    }

    // --- Searchable select: dropdown pencarian di atas <select> asli ---
    function initSearchableSelect(select) {
        const wrapper = select.closest('.searchable-select-wrapper');
        if (!wrapper || wrapper.dataset.enhanced === '1') return;
        wrapper.dataset.enhanced = '1';

        const toggle = document.createElement('div');
        toggle.className = 'form-select searchable-select-toggle';
        toggle.innerHTML = '<span class="selected-text placeholder-text"></span><i class="bi bi-chevron-down"></i>';

        const panel = document.createElement('div');
        panel.className = 'searchable-select-panel';
        panel.innerHTML = `
            <input type="text" class="searchable-select-search" placeholder="Cari mata kuliah...">
            <div class="searchable-select-options"></div>
        `;

        wrapper.appendChild(toggle);
        wrapper.appendChild(panel);

        const searchInput = panel.querySelector('.searchable-select-search');
        const optionsContainer = panel.querySelector('.searchable-select-options');
        const selectedTextEl = toggle.querySelector('.selected-text');

        function render(filter = '') {
            const query = filter.trim().toLowerCase();
            optionsContainer.innerHTML = '';
            let matchCount = 0;

            Array.from(select.options).forEach(option => {
                const label = option.textContent;
                if (query && !label.toLowerCase().includes(query)) return;

                matchCount++;
                const item = document.createElement('div');
                item.className = 'searchable-select-option' + (option.value === select.value ? ' selected' : '');
                item.textContent = label;
                item.dataset.value = option.value;
                item.addEventListener('click', () => {
                    select.value = option.value;
                    select.dispatchEvent(new Event('change'));
                    updateToggleLabel();
                    closePanel();
                });
                optionsContainer.appendChild(item);
            });

            if (matchCount === 0) {
                const empty = document.createElement('div');
                empty.className = 'searchable-select-empty';
                empty.textContent = 'Tidak ada mata kuliah ditemukan.';
                optionsContainer.appendChild(empty);
            }
        }

        function updateToggleLabel() {
            const selectedOption = select.options[select.selectedIndex];
            const hasValue = selectedOption && selectedOption.value !== '';
            selectedTextEl.textContent = hasValue ? selectedOption.textContent : (select.options[0] ? select.options[0].textContent : 'Pilih...');
            selectedTextEl.classList.toggle('placeholder-text', !hasValue);
        }

        function openPanel() {
            if (select.disabled) return;
            wrapper.classList.add('open');
            searchInput.value = '';
            render();
            searchInput.focus();
        }

        function closePanel() {
            wrapper.classList.remove('open');
        }

        toggle.addEventListener('click', () => {
            if (wrapper.classList.contains('open')) {
                closePanel();
            } else {
                document.querySelectorAll('.searchable-select-wrapper.open').forEach(w => w.classList.remove('open'));
                openPanel();
            }
        });

        searchInput.addEventListener('input', () => render(searchInput.value));
        searchInput.addEventListener('click', (e) => e.stopPropagation());

        document.addEventListener('click', (e) => {
            if (!wrapper.contains(e.target)) closePanel();
        });

        if (select.disabled) {
            toggle.style.opacity = '0.7';
            toggle.style.cursor = 'not-allowed';
        }

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