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

@php
    // Variabel $isLocked untuk menonaktifkan tombol jika sudah disubmit
    $isLocked = $assessment && $assessment->self_assessment_submitted_at;
@endphp

<main id="main" class="main">

    <div class="pagetitle">
        <h1>Self Assessment</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">Home</a></li>
                <li class="breadcrumb-item active">Mata Kuliah</li>
            </ol>
        </nav>
    </div>
    
    <section class="section">
        <div class="row">
            <div class="col-lg-12">
                {{-- Tampilkan pesan success/error --}}
                @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
                
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-center">Mata Kuliah yang akan di Konversi</h5>
                        

                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th scope="col">No</th>
                                        <th scope="col">Nama Mata Kuliah</th>
                                        <th scope="col" class="text-center">Status Penilaian</th>
                                        <th scope="col" class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($matkuls as $index => $matkul)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $matkul->nama_matkul }}</td>
                                        <td class="text-center">
                                            <span class="badge {{ ($matkul->penilaian_count == $matkul->cpmk_count && $matkul->cpmk_count > 0) ? 'bg-success' : 'bg-warning' }}">
                                                {{ $matkul->penilaian_count }} / {{ $matkul->cpmk_count }} CPMK Terisi
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            
                                            <button type="button" class="btn btn-sm btn-info btn-detail-cpmk" 
                                                    data-toggle="modal" 
                                                    data-target="#cpmkDetailModal" 
                                                    data-matkul-id="{{ $matkul->id }}" 
                                                    data-matkul-name="{{ $matkul->nama_matkul }}">
                                                Lihat Penilaian
                                            </button>
                                    
                                            {{--
                                            <a href="{{ route('eporto.self-assessment', ['matkul_id' => $matkul->id]) }}"
                                               class="btn btn-outline-success btn-sm "
                                               title="Isi atau Edit Penilaian">
                                                <i class="bi bi-pencil-square"></i> Isi Penilaian
                                            </a>
                                            --}}
                                            <button type="button"
                                                    class="btn btn-success btn-sm"
                                                    onclick="window.location.href='{{ route('eporto.self-assessment', ['matkul_id' => $matkul->id]) }}'"
                                                    @disabled($isLocked)>
                                                <i class="bi bi-pencil-square"></i> Isi Penilaian
                                            </button>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="4" class="text-center">Belum ada mata kuliah yang tersedia.</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                @if($assessment)
                <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" 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>
                            <form action="{{ route('eporto.submit-status-self-assessment') }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin mengirim semua hasil self-assessment? Tindakan ini tidak dapat diurungkan.');">
                                @csrf
                                <button type="submit" class="btn btn-primary"><i class="bi bi-send-check"></i> Kirim Hasil Self-Assessment</button>
                            </form>
                        @endif
                    </div>
                </div>
                @endif
            </div>
        </div>
    </section>
</main>
<div class="modal fade" id="cpmkDetailModal" tabindex="-1" role="dialog" aria-labelledby="cpmkDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cpmkDetailModalLabel">Detail CPMK Mata Kuliah: <span id="matkulName"></span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th style="width: 15%;">Kode CPMK</th>
                                <th style="width: 45%;">Penjelasan</th>
                                <th style="width: 40%;">Bukti yang Diajukan</th>
                            </tr>
                        </thead>
                        <tbody id="cpmkDetailTableBody">
                            <tr><td colspan="3" class="text-center">Memuat data...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>


@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 1. Dapatkan semua tombol 'Detail CPMK'
    const detailButtons = document.querySelectorAll('.btn-detail-cpmk');
    const modalTitle = document.getElementById('matkulName');
    const modalBody = document.getElementById('cpmkDetailTableBody');

    detailButtons.forEach(button => {
        button.addEventListener('click', function() {
            const matkulId = this.getAttribute('data-matkul-id');
            const matkulName = this.getAttribute('data-matkul-name');
            const detailUrl = `/get-cpmk-details/${matkulId}`; // Sesuaikan dengan route di web.php

            // 2. Set judul modal
            modalTitle.textContent = matkulName;

            // 3. Tampilkan status loading
            modalBody.innerHTML = `<tr><td colspan="3" class="text-center"><div class="spinner-border spinner-border-sm me-2" role="status"></div>Memuat detail CPMK...</td></tr>`;
            
            // 4. Panggil API menggunakan fetch
            fetch(detailUrl, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                    // Tidak perlu CSRF token untuk GET request
                }
            })
            .then(response => {
                if (!response.ok) {
                    // Coba baca pesan error dari JSON response jika ada
                    return response.json().catch(() => {
                        throw new Error('Gagal memuat data. Status: ' + response.status);
                    }).then(err => {
                        throw new Error(err.message || 'Gagal memuat data. Silakan coba lagi.');
                    });
                }
                return response.json();
            })
            .then(data => {
                // 5. Periksa data dan isi tabel
                if (data.cpmk_data && data.cpmk_data.length > 0) {
                    let tableRows = '';
                    data.cpmk_data.forEach(cpmk => {
                        let buktiLinks = 'Belum ada bukti';
                    
                        if (cpmk.buktis && cpmk.buktis.length > 0) {
                            buktiLinks = cpmk.buktis.map(bukti => {
                                // Cek apakah file_url ada (diasumsikan diambil dari Bukti Model via fileUrl Attribute)
                                if (bukti.file_url) {
                                    // Menggunakan tag <a> untuk link, target _blank agar file terbuka di tab baru
                                    return `<a href="${bukti.file_url}" target="_blank">${bukti.nama}</a>`;
                                } else {
                                    return bukti.nama;
                                }
                            }).join('<br>'); // Pisahkan nama bukti dengan baris baru
                        }

                        tableRows += `
                            <tr>
                                <td class="align-middle">${cpmk.kode_cpmk}</td>
                                <td class="align-middle">${cpmk.penjelasan}</td>
                                <td class="align-middle">${buktiLinks}</td>
                            </tr>
                        `;
                    });
                    modalBody.innerHTML = tableRows;
                } else {
                    modalBody.innerHTML = '<tr><td colspan="3" class="text-center">Tidak ada data CPMK atau penilaian untuk mata kuliah ini.</td></tr>';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                modalBody.innerHTML = `<tr class="table-danger"><td colspan="3" class="text-center">⚠️ Gagal memuat data: ${error.message}. Silakan coba lagi.</td></tr>`;
            });
        });
    });
});
</script>
@endpush