@extends('portofolio::layout.user')
@section('content')
<main id="main" class="main">

    <div class="pagetitle">
        <h1>Form Layouts</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('eporto.self-assessment-table') }}">Mata Kuliah</a></li>
                <li class="breadcrumb-item active">Self Assessment</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->
    
    {{-- BAGIAN BARU: PANDUAN KOMPRESI PDF --}}
    <div class="alert alert-info border-light shadow-sm mb-4" role="alert">
        <h4 class="alert-heading"><i class="bi bi-info-circle me-2"></i>Ukuran File Terlalu Besar?</h4>
        <p>Batas maksimal setiap file adalah <strong>10MB</strong>. Jika file Anda lebih besar, ikuti langkah berikut:</p>
        <hr>
        <div class="accordion" id="accordionExample">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                        Langkah-Langkah Mengompres PDF (iLovePDF)
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <ol>
                            <li><strong>Buka Halaman Kompresi:</strong> Klik link ini <a href="https://www.ilovepdf.com/id/mengompres-pdf" target="_blank" class="fw-bold text-decoration-underline">ilovepdf.com/id/mengompres-pdf</a>.</li>
                            <li><strong>Pilih File:</strong> Klik tombol merah <strong>"Pilih file PDF"</strong> atau seret file Anda langsung ke area tersebut.</li>
                            <li><strong>Pilih Tingkat Kompresi:</strong> 
                                <ul>
                                    <li><em>Kompresi Ekstrim</li>
                                    <li><em>Kompresi Direkomendasikan</li>
                                    <li><em>Kompresi Rendah</li>
                                </ul>
                            </li>
                            <li><strong>Klik Kompres PDF:</strong> Klik tombol di pojok kanan bawah.</li>
                            <li><strong>Unduh File:</strong> File akan otomatis terunduh atau klik <strong>"Unduh PDF yang sudah dikompres"</strong>.</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- END BAGIAN BARU --}}

    @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
    
    <section class="section">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        @if($matkul)
                            <h5 class="card-title text-center">Formulir Penilaian untuk Mata Kuliah: <br><strong>{{ $matkul->nama_matkul ?? '' }}</strong></h5>
                        @endif
                         

                        @if($matkul)
                            <form action="{{ route('eporto.add-self-assessment', ['matkul_id' => $matkul->id]) }}" method="POST" enctype="multipart/form-data" class="row g-3">
                                @csrf
                                <input type="hidden" name="matkul_id" value="{{ $matkul->id }}">
                                
                                <input type="hidden" name="deleted_bukti_ids[]" id="deleted-bukti-ids">

                                @foreach ($cpmks as $cpmk)
                                    @php
                                        // Ambil assessment yang sudah ada atau null
                                        $assessment = $existingAssessments[$cpmk->id] ?? null;
                                    @endphp
                                    <div class="col-12 border p-3 mb-4 rounded shadow-sm bg-light">
                                        <h6>**CPMK : {{ $cpmk->penjelasan }}**</h6>
                                        
                                        <div class="mb-3">
                                            <label class="form-label">Penilaian Anda (Tingkat Penguasaan)</label>
                                            <select name="nilai[{{ $cpmk->id }}]" class="form-select" required>
                                                <option value="" disabled {{ is_null(old('nilai.' . $cpmk->id, $assessment ? $assessment->nilai : null)) ? 'selected' : '' }}>Pilih Nilai</option>
                                                <option value="Sangat Baik" {{ old('nilai.' . $cpmk->id, $assessment ? $assessment->nilai : null) == 'Sangat Baik' ? 'selected' : '' }}>Sangat Baik</option>
                                                <option value="Baik" {{ old('nilai.' . $cpmk->id, $assessment ? $assessment->nilai : null) == 'Baik' ? 'selected' : '' }}>Baik</option>
                                                <option value="Tidak Pernah" {{ old('nilai.' . $cpmk->id, $assessment ? $assessment->nilai : null) == 'Tidak Pernah' ? 'selected' : '' }}>Tidak Pernah</option>
                                            </select>
                                        </div>

                                        <div class="card p-3 bg-white">
                                            <h6 class="card-title mt-0">Daftar Bukti (Dokumen/File)</h6>

                                            <div id="existing-bukti-items-{{ $cpmk->id }}">
                                                @if ($assessment && $assessment->bukti->isNotEmpty())
                                                    @foreach ($assessment->bukti as $bukti)
                                                        <div class="border p-3 mb-2 existing-bukti-item position-relative" data-bukti-id="{{ $bukti->id }}">
                                                            <button type="button" class="btn-close position-absolute top-0 end-0 p-2 remove-existing-bukti" data-bukti-id="{{ $bukti->id }}"></button>
                                                            
                                                            <input type="hidden" name="bukti_lama[{{ $cpmk->id }}][{{ $bukti->id }}][id]" value="{{ $bukti->id }}">
                                                            
                                                            <div class="mb-2">
                                                                <label class="form-label small">Nama Bukti Lama</label>
                                                                <input type="text" name="bukti_lama[{{ $cpmk->id }}][{{ $bukti->id }}][nama]" value="{{ old('bukti_lama.' . $cpmk->id . '.' . $bukti->id . '.nama', $bukti->nama) }}" class="form-control" placeholder="Nama Bukti">
                                                            </div>
                                                            <div class="mb-2">
                                                                <label class="form-label small">Jenis Bukti Lama</label>
                                                                <select name="bukti_lama[{{ $cpmk->id }}][{{ $bukti->id }}][jenis_bukti]" class="form-select">
                                                                    <option value="Sertifikat" {{ old('bukti_lama.' . $cpmk->id . '.' . $bukti->id . '.jenis_bukti', $bukti->jenis_bukti) == 'Sertifikat' ? 'selected' : '' }}>Sertifikat</option>
                                                                    <option value="Dokumen" {{ old('bukti_lama.' . $cpmk->id . '.' . $bukti->id . '.jenis_bukti', $bukti->jenis_bukti) == 'Dokumen' ? 'selected' : '' }}>Dokumen</option>
                                                                    <option value="Video" {{ old('bukti_lama.' . $cpmk->id . '.' . $bukti->id . '.jenis_bukti', $bukti->jenis_bukti) == 'Video' ? 'selected' : '' }}>Video</option>
                                                                </select>
                                                            </div>
                                                            <div class="mb-2">
                                                                <label class="form-label small">File Saat Ini</label>
                                                                <div><a href="{{ $bukti->file_url }}" target="_blank" class="btn btn-sm btn-info">Lihat File ({{ pathinfo($bukti->file, PATHINFO_EXTENSION) }})</a></div>
                                                            </div>
                                                            <div class="mb-2">
                                                                <label class="form-label small">Ganti File (Opsional)</label>
                                                                <input type="file" name="bukti_lama[{{ $cpmk->id }}][{{ $bukti->id }}][file_new]" class="form-control">
                                                                <div class="form-text">Maks 10MB (JPG, JPEG, PNG, PDF)</div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                            
                                            <div id="new-bukti-items-{{ $cpmk->id }}" class="mt-3">
                                                </div>

                                            <button type="button" class="btn btn-sm btn-success mt-2 add-bukti" data-cpmk-id="{{ $cpmk->id }}">
                                                <i class="ri-add-line"></i> Tambah Bukti Baru
                                            </button>
                                        </div>

                                    </div>
                                @endforeach

                                <div class="col-12 text-end">
                                    <button type="submit" class="btn btn-primary">Simpan dan Perbarui Self Assessment</button>
                                </div>
                            </form>@else
                            <div class="alert alert-info">Silakan pilih mata kuliah di atas untuk memulai pengisian Self Assessment.</div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
</main><!-- End #main -->

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('change', function(e) {
        if (e.target && e.target.type === 'file') {
            const file = e.target.files[0];
            const maxSize = 10 * 1024 * 1024; // 10MB

            if (file && file.size > maxSize) {
                alert(`⚠️ FILE TERLALU BESAR (${(file.size / (1024 * 1024)).toFixed(2)} MB)\n\nMaaf, batas maksimal adalah 10MB per file.\nSilakan kompres file Anda terlebih dahulu di ilovepdf.com menggunakan panduan di bagian atas halaman ini.`);
                e.target.value = ''; 
            }
        }
    });

    const deletedIdsInput = document.getElementById('deleted-bukti-ids');
    let deletedIds = [];

    document.querySelectorAll('.add-bukti').forEach(button => {
        button.addEventListener('click', function() {
            const cpmkId = this.getAttribute('data-cpmk-id');
            const container = document.getElementById(`new-bukti-items-${cpmkId}`);
            const uniqueIndex = Date.now(); 
            
            const newForm = document.createElement('div');
            newForm.className = 'border p-3 mb-3 position-relative bg-light-secondary new-bukti-item';
            newForm.innerHTML = `
                <button type="button" class="btn-close position-absolute top-0 end-0 p-2" aria-label="Close" onclick="this.parentElement.remove()"></button>
                <h7 class="small fst-italic">Bukti Baru</h7>
                <div class="mb-2">
                    <label class="form-label small">Nama Bukti Baru</label>
                    <input type="text" name="bukti_baru[${cpmkId}][${uniqueIndex}][nama]" class="form-control" required>
                </div>
                <div class="mb-2">
                    <label class="form-label small">Jenis Bukti Baru</label>
                    <select name="bukti_baru[${cpmkId}][${uniqueIndex}][jenis_bukti]" class="form-select">
                        <option value="Sertifikat">Sertifikat</option>
                        <option value="Dokumen">Dokumen</option>
                        <option value="Video">Video</option>
                    </select>
                </div>
                <div class="mb-2">
                    <label class="form-label small">Upload File</label>
                    <input type="file" name="bukti_baru[${cpmkId}][${uniqueIndex}][file]" class="form-control" required>
                    <div class="form-text">Maks 10MB (JPG, JPEG, PNG, PDF)</div>
                </div>
            `;
            container.appendChild(newForm);
        });
    });

    // Handle hapus bukti lama
    document.querySelectorAll('.remove-existing-bukti').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const buktiId = this.getAttribute('data-bukti-id');
            const item = this.closest('.existing-bukti-item');

            if (confirm(`Apakah Anda yakin ingin menghapus bukti ini? Penghapusan akan permanen setelah form disimpan.`)) {
                if (!deletedIds.includes(buktiId)) {
                    deletedIds.push(buktiId);
                }
                deletedIdsInput.value = deletedIds.join(',');
                item.remove();
            }
        });
    });

    if (deletedIdsInput.value) {
        deletedIds = deletedIdsInput.value.split(',');
    }
});
</script>
@endpush