@extends('layout.assessor')
@php
use App\Models\Bukti;
@endphp
@section('content')

<main id="main" class="main">
    <div class="pagetitle">
        <h1>Form Mahasiswa</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                <li class="breadcrumb-item"><a href="/list-name-table">Ajuan Form</a></li>
                <li class="breadcrumb-item"><a href="{{ route('detail-user', ['id' => $calon_mahasiswa_id]) }}">Data Calon Mahasiswa</a></li>
                <li class="breadcrumb-item active">Form Mahasiswa</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->
    
    <section class="section">
        <div class="row">
            <div class="col-lg-13">
                <div class="card">
                    <div class="card-body"> 
                    <div class="container mt-5">

                        <br>
                        @if($errors->any())
                        <div class="alert alert-danger bg-danger text-light border-0 alert-dismissible fade show" role="alert">
                            <strong>Perhatian!</strong>
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                        @endif
                        <h5 class="card-title text-center">{{ $matkul->nama_matkul }}</h5>
                        <!--<button type="button" class="btn btn-warning mb-3 float-end" data-toggle="modal" data-target="#exampleModalLongEdit">Edit</button>-->
                        
                        <div class="mt-3">
                            <div class="ijazah-overview-assessor mx-4 my-3">
                                <!-- <div class="row mb-3">
                                    <div class="col-lg-3 col-md-4 label">Score VATM</div>
                                    <div class="col-lg-9 col-md-8">
                                        {{ $matkulScore ? $matkulScore->score : '-' }}
                                    </div>
                                </div> -->
                        
                                <div class="row mb-3">
                                    <div class="col-lg-3 col-md-4 label">Status</div>
                                    <div class="col-md-8">
                                        <span class="badge {{ $matkulScore && $matkulScore->status ? ($matkulScore->status == 'Lolos' ? 'bg-success' : 'bg-danger') : 'bg-secondary' }} ps-4 pe-4" style="font-size: 0.8em;">
                                            {{ $matkulScore ? $matkulScore->status : '-' }}
                                        </span>
                                    </div>
                                </div>
                        
                                <div class="row mb-3">
                                    <div class="col-lg-3 col-md-4 label">Nilai</div>
                                    <div class="col-lg-9 col-md-8">
                                        {{ $matkulScore ? $matkulScore->nilai : '-' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <form action="{{ route('input_calculate') }}" method="POST" enctype="multipart/form-data" id="assessmentForm">
                            @csrf
                            
                            <input type="hidden" name="matkul_id" value="{{ $matkul->id }}">
                            <input type="hidden" name="assessor_id" value="{{ $assessor_id }}">
                            <input type="hidden" name="calon_mahasiswa_id" value="{{ $calon_mahasiswa_id }}">

                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th rowspan="2">Kemampuan Akhir Yang Diharapkan/ Capaian Pembelajaran Mata Kuliah</th>
                                        <th colspan="3">Profisiensi pengetahuan dan keterampilan saat ini*</th>
                                        <th colspan="4">Hasil evaluasi Asesor (diisi oleh Asesor)</th>
                                        <th colspan="3">Bukti yang disampaikan*</th>
                                    </tr>
                                    <tr>
                                        <th>Sangat baik</th>
                                        <th>Baik</th>
                                        <th>Tidak pernah</th>
                                        <th>V <br>(0-35)</th>
                                        <th>A <br>(0-35)</th>
                                        <th>T <br>(0-15)</th>
                                        <th>M <br>(0-15)</th>
                                        <th>Nama bukti</th>
                                        <th>Jenis bukti</th>
                                        <th>File bukti</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($self_assessment_camaba as $index => $self_assessment)
                                        <tr>
                                            <td>{{ $self_assessment->cpmk->penjelasan ?? '-' }}</td>
                                            <td>@if($self_assessment->nilai == 'Sangat Baik') ✓ @endif</td>
                                            <td>@if($self_assessment->nilai == 'Baik') ✓ @endif</td>
                                            <td>@if($self_assessment->nilai == 'Tidak Pernah') ✓ @endif</td>
                                            
                                            <td><input type="number" id="nilai_V_{{ $index }}" name="nilai[{{ $index }}][V]" min="0" max="35" required value="{{ old('nilai.'.$index.'.V') }}" 
                                            class="input-number @error('nilai.'.$index.'.V') is-invalid @enderror" data-cpmk="{{ $self_assessment->cpmk_id ?? '' }}"></td>

                                            <td><input type="number" id="nilai_A_{{ $index }}" name="nilai[{{ $index }}][A]" min="0" max="35" required value="{{ old('nilai.'.$index.'.A') }}" 
                                            class="input-number @error('nilai.'.$index.'.A') is-invalid @enderror" data-cpmk="{{ $self_assessment->cpmk_id ?? '' }}"></td>

                                            <td><input type="number" id="nilai_T_{{ $index }}" name="nilai[{{ $index }}][T]" min="0" max="15" required value="{{ old('nilai.'.$index.'.T') }}" 
                                            class="input-number @error('nilai.'.$index.'.T') is-invalid @enderror" data-cpmk="{{ $self_assessment->cpmk_id ?? '' }}"></td>

                                            <td><input type="number" id="nilai_M_{{ $index }}" name="nilai[{{ $index }}][M]" min="0" max="15" required value="{{ old('nilai.'.$index.'.M') }}"
                                            class="input-number @error('nilai.'.$index.'.M') is-invalid @enderror" data-cpmk="{{ $self_assessment->cpmk_id ?? '' }}"></td>

                                            <td>
                                                @if($self_assessment->bukti->isNotEmpty())
                                                    @foreach($self_assessment->bukti as $bukti_item)
                                                        <div>· {{ $bukti_item->nama }}</div>
                                                    @endforeach
                                                @else
                                                    <span>-</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($self_assessment->bukti->isNotEmpty())
                                                    @foreach($self_assessment->bukti as $bukti_item)
                                                        <div>{{ $bukti_item->jenis_bukti }}</div>
                                                    @endforeach
                                                @else
                                                    <span>-</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($self_assessment->bukti->isNotEmpty())
                                                    @foreach($self_assessment->bukti as $bukti_item)
                                                        <div class="mb-2">
                                                            <a href="{{ asset($bukti_item->file) }}" target="_blank" class="btn btn-sm btn-primary">
                                                                Lihat File {{ $bukti_item->nama }} 
                                                            </a>
                                                        </div>
                                                    @endforeach
                                                @else
                                                    <span>File tidak tersedia</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <div class="form-group mt-4">
                                <label for="keterangan_penilaian">
                                    Keterangan / Catatan Penilaian Assessor
                                </label>

                                <textarea
                                    name="keterangan_penilaian"
                                    id="keterangan_penilaian"
                                    class="form-control"
                                    rows="4"
                                    {{ ($isFormDisabled ?? false) ? 'disabled' : '' }}
                                    placeholder="Tuliskan catatan penilaian untuk mata kuliah ini..."
                                >{{ old('keterangan_penilaian', $matkulScore->keterangan_penilaian ?? '') }}</textarea>
                            </div>
                            <div class="modal-footer">
                                <a type="button" class="btn btn-danger mt-2" href="{{ route('detail-user', ['id' => $calon_mahasiswa_id]) }}">Tutup</a>
                                <button type="submit" class="btn btn-warning mt-2" id="submitBtn">Save</button>
                            </div>
                            <!-- @if (session('success'))
                                <div class="alert alert-success mt-3">
                                    {{ session('success') }}
                                </div>
                            @endif

                            @if (session('error'))
                                <div class="alert alert-danger mt-3">
                                    {{ session('error') }}
                                </div>
                            @endif -->

                        </form>
                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Modal Konfirmasi -->
</main>



<script>
document.addEventListener('DOMContentLoaded', function() {
    // Variabel unik untuk storage key, sudah benar.
    const matkulId = {{ $matkul->id }};
    const calonMahasiswaId = {{ $calon_mahasiswa_id }};
    const storageKey = `assessmentScores_${matkulId}_${calonMahasiswaId}`;

    const form = document.querySelector('form[id="assessmentForm"]');
    const submitBtn = document.getElementById('submitBtn');

    if (!form || !submitBtn) return;
    
    // =========================================================================
    // SOLUSI 1: Pindahkan definisi fungsi ke lingkup yang lebih tinggi
    // =========================================================================

    // Fungsi untuk menyimpan nilai ke Local Storage
    function saveScores() {
        const inputs = document.querySelectorAll('input.input-number[data-cpmk]');
        const scores = {};
        
        inputs.forEach(input => {
            const cpmkId = input.dataset.cpmk;
            // Dapatkan tipe (V, A, T, M) dari ID input
            const type = input.id.split('_')[1]; 
            
            if (!cpmkId || !type) return;
            
            if (!scores[cpmkId]) {
                scores[cpmkId] = {};
            }
            
            scores[cpmkId][type] = input.value;
        });
        
        localStorage.setItem(storageKey, JSON.stringify(scores));
    }

    // Fungsi untuk memuat nilai dari Local Storage
    function loadScores() {
        const savedScores = localStorage.getItem(storageKey);
        if (!savedScores) {
            return; // Keluar jika tidak ada data
        }
        
        try {
            const scores = JSON.parse(savedScores);
            
            Object.keys(scores).forEach(cpmkId => {
                Object.keys(scores[cpmkId]).forEach(type => {
                    // =========================================================================
                    // SOLUSI 2: Perbaiki selector CSS dari '$=' (diakhiri dengan) menjadi '*=' (mengandung)
                    // =========================================================================
                    const selector = `input.input-number[data-cpmk="${cpmkId}"][id*="_${type}_"]`;
                    const input = document.querySelector(selector);

                    if (input) {
                        input.value = scores[cpmkId][type];
                    }
                });
            });
        } catch (e) {
            console.error('Gagal memuat skor dari Local Storage:', e);
        }
    }
    
    // =========================================================================
    // PANGGIL FUNGSI DAN ATUR EVENT LISTENER
    // =========================================================================

    // 1. Panggil loadScores() saat halaman pertama kali dimuat
    loadScores();

    // 2. Tambahkan event listener 'change' untuk setiap input untuk menyimpan nilai
    document.querySelectorAll('input.input-number[data-cpmk]').forEach(input => {
        input.addEventListener('change', saveScores);
    });

    // 3. Tambahkan event listener untuk validasi saat tombol submit di-klik
    submitBtn.addEventListener('click', function(e) {
        let isValid = true;
        const numberInputs = form.querySelectorAll('input[type="number"]');
        let firstError = null;
        
        numberInputs.forEach(input => {
            const value = parseInt(input.value, 10);
            const max = parseInt(input.max, 10);
            const min = parseInt(input.min, 10);
            
            // Reset error state
            input.classList.remove('is-invalid');
            const existingError = input.nextElementSibling;
            if (existingError && existingError.classList.contains('invalid-feedback')) {
                existingError.remove();
            }
            
            // Validate
            if (isNaN(value) || value < min || value > max) {
                isValid = false;
                input.classList.add('is-invalid');
                
                const errorDiv = document.createElement('div');
                errorDiv.className = 'invalid-feedback d-block';
                errorDiv.textContent = `Nilai harus antara ${min}-${max}.`;
                input.parentNode.appendChild(errorDiv);
                
                if (!firstError) {
                    firstError = input;
                }
            }
        });
        
        if (!isValid) {
            e.preventDefault(); // Hentikan submit form jika tidak valid
            
            const alertHtml = `
                <div class="alert alert-danger bg-danger text-light border-0 alert-dismissible fade show" role="alert">
                    <strong>Perhatian!</strong> Terdapat kesalahan dalam pengisian form. Harap periksa kembali nilai yang dimasukkan.
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            `;
            
            const existingAlert = form.querySelector('.alert.alert-danger');
            const cardTitle = form.closest('.card-body').querySelector('.card-title');
            
            if (existingAlert) {
                existingAlert.remove();
            }
            cardTitle.insertAdjacentHTML('afterend', alertHtml);

            if (firstError) {
                firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                firstError.focus();
            }
        }
        // SOLUSI 3: Panggilan saveScores() dihapus dari sini karena sudah ditangani oleh event 'change'
    });
 
    // 4. Bersihkan storage saat form berhasil di-submit
    form.addEventListener('submit', function() {
        // Cek lagi apakah form valid sebelum menghapus, untuk jaga-jaga
        let isValid = true;
        form.querySelectorAll('input[type="number"]').forEach(input => {
            if (input.classList.contains('is-invalid') || input.value === '') {
                isValid = false;
            }
        });

        if(isValid) {
            localStorage.removeItem(storageKey);
        }
    });
});
</script>



@endsection