{{-- resources/views/admin/akademik/kurikulum/kelola_asesmen.blade.php --}}

<form action="{{ route('admin.kurikulum.asesmen.update') }}" method="POST">
    @csrf
    <input type="hidden" name="kurikulum_id" value="{{ $kurikulum->id }}">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h5 class="fw-bold text-dark m-0"><i class="fas fa-clipboard-check text-primary me-2"></i> I. RENCANA ASESMEN (KKTP)</h5>
            <small class="text-muted">Kriteria Ketercapaian Tujuan Pembelajaran dan Rubrik Penilaian Siswa.</small>
        </div>
        <div>
            <button type="submit" class="btn btn-success btn-round shadow-sm px-4">
                <i class="fas fa-save me-1"></i> Simpan Matriks KKTP
            </button>
        </div>
    </div>

    <div class="alert shadow-sm border-0 rounded-4 mb-4 p-4 d-flex align-items-center" style="background-color: #f0f8ff; border-left: 5px solid #0d6efd !important;">
        <div class="me-4">
            <div class="bg-primary text-white rounded-circle d-flex justify-content-center align-items-center shadow-sm" style="width: 50px; height: 50px;">
                <i class="fas fa-magic fs-4"></i>
            </div>
        </div>
        <div>
            <h6 class="fw-bold text-primary mb-1" style="font-size: 1.05rem;">Integrasi Penilaian Otomatis</h6>
            <p class="text-dark mb-0" style="line-height: 1.6; font-size: 0.85rem;">
                Rubrik dan Interval Nilai yang Bapak/Ibu susun di tabel ini akan <strong>otomatis terhubung</strong> dengan modul <b>Input Nilai Siswa</b> dan cetak Rapor. Saat guru memasukkan angka (misal: 85), sistem akan otomatis membaca tabel ini dan memberikan predikat <b>"Baik"</b> beserta deskripsi capaiannya pada Rapor Siswa secara <i>real-time</i>.
            </p>
        </div>
    </div>

    <div class="card card-round shadow-sm border-0">
        <div class="card-header d-flex justify-content-between align-items-center py-3 bg-white">
            <div class="card-title" style="font-size: 1.1rem;">
                <i class="fa fa-table me-2 text-primary"></i> 
                Matriks Rubrik Penilaian (Interval)
            </div>
            <div class="text-muted small">
                <i class="fas fa-info-circle text-warning me-1"></i> Kosongkan jika tidak ada deskripsi khusus.
            </div>
        </div>
        
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped table-hover align-middle mb-0 border-top-0">
                    <thead class="table-dark text-center align-middle">
                        <tr>
                            <th rowspan="2" width="3%" class="border-secondary border-end">No</th>
                            <th rowspan="2" width="25%" class="border-secondary border-end text-start">Tujuan Pembelajaran (TP)</th>
                            <th colspan="4" class="border-secondary text-uppercase" style="background-color: #2b2b2b;">Interval Nilai & Deskripsi Ketercapaian</th>
                        </tr>
                        <tr>
                            <th width="18%" class="border-secondary border-end" style="background-color: #dc3545;">
                                Perlu Bimbingan<br><small class="fw-normal">(0 - 69)</small>
                            </th>
                            <th width="18%" class="border-secondary border-end" style="background-color: #fd7e14;">
                                Cukup<br><small class="fw-normal">(70 - 79)</small>
                            </th>
                            <th width="18%" class="border-secondary border-end" style="background-color: #0d6efd;">
                                Baik<br><small class="fw-normal">(80 - 89)</small>
                            </th>
                            <th width="18%" class="border-secondary" style="background-color: #198754;">
                                Sangat Baik<br><small class="fw-normal">(90 - 100)</small>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @if($cps->isEmpty() || $cps->sum(function($cp) { return $cp->tps->count(); }) == 0)
                            <tr>
                                <td colspan="6" class="text-center py-5 text-muted border-secondary">
                                    <i class="fas fa-box-open fa-3x mb-3 opacity-50"></i>
                                    <h5>Belum Ada Data Tujuan Pembelajaran</h5>
                                    <p class="mb-0">Pastikan Bapak/Ibu telah mengisi data TP di tab <b>Tujuan CP (TP)</b> terlebih dahulu.</p>
                                </td>
                            </tr>
                        @else
                            @php $noKktp = 1; @endphp
                            @foreach($cps as $cp)
                                @if($cp->tps->count() > 0)
                                    <tr style="background-color: #e9ecef;">
                                        <td colspan="6" class="fw-bold text-dark py-2 px-4 border-secondary">
                                            <i class="fa fa-caret-right text-primary me-2"></i> Elemen : {{ $cp->elemen }}
                                        </td>
                                    </tr>
                                    
                                    @foreach($cp->tps as $tp)
                                        @php 
                                            $valBimbingan = $tp->kktp_bimbingan ?? '';
                                            $valCukup = $tp->kktp_cukup ?? '';
                                            $valBaik = $tp->kktp_baik ?? '';
                                            $valSangatBaik = $tp->kktp_sangat_baik ?? '';
                                        @endphp
                                        <tr>
                                            <td class="text-center fw-bold text-secondary border-secondary border-end align-top pt-3">
                                                {{ $noKktp++ }}
                                            </td>
                                            <td class="align-top small p-3 border-secondary border-end text-justify">
                                                {!! nl2br(e($tp->tujuan_teks)) !!}
                                            </td>
                                            <td class="align-top p-0 border-secondary border-end bg-white">
                                                <textarea name="kktp[{{ $tp->id }}][bimbingan]" class="form-control border-0 shadow-none w-100 h-100 p-2" rows="4" style="font-size: 0.8rem; resize: none;" placeholder="Deskripsi untuk siswa yang belum mencapai ketuntasan...">{{ $valBimbingan }}</textarea>
                                            </td>
                                            <td class="align-top p-0 border-secondary border-end bg-white">
                                                <textarea name="kktp[{{ $tp->id }}][cukup]" class="form-control border-0 shadow-none w-100 h-100 p-2" rows="4" style="font-size: 0.8rem; resize: none;" placeholder="Deskripsi ketuntasan minimal (cukup)...">{{ $valCukup }}</textarea>
                                            </td>
                                            <td class="align-top p-0 border-secondary border-end bg-white">
                                                <textarea name="kktp[{{ $tp->id }}][baik]" class="form-control border-0 shadow-none w-100 h-100 p-2" rows="4" style="font-size: 0.8rem; resize: none;" placeholder="Deskripsi ketuntasan yang baik...">{{ $valBaik }}</textarea>
                                            </td>
                                            <td class="align-top p-0 border-secondary bg-white">
                                                <textarea name="kktp[{{ $tp->id }}][sangat_baik]" class="form-control border-0 shadow-none w-100 h-100 p-2" rows="4" style="font-size: 0.8rem; resize: none;" placeholder="Deskripsi pengayaan / sangat baik...">{{ $valSangatBaik }}</textarea>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</form>

<style>
    textarea[name^="kktp"]:focus {
        background-color: #f8f9fa !important; 
        outline: none !important;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.1) !important;
    }
</style>