{{-- resources/views/public/guru/nilai_show_sumatif.blade.php --}}
<div class="alert alert-light border-0 border-bottom m-0 py-2 px-3 small text-muted mb-4">
    <i class="fas fa-magic text-warning me-1"></i> Mode Sumatif (KKTP): Penilaian Rapor berdasarkan Tujuan Pembelajaran (TP) per Siswa.
</div>

@if($groupedTPs->isEmpty())
    <div class="alert alert-warning text-center py-5 mx-3 rounded-4 border-0 shadow-sm">
        <i class="fas fa-exclamation-triangle fa-3x mb-3 text-warning opacity-75"></i>
        <h5 class="fw-bold text-dark">Belum Ada Tujuan Pembelajaran Semester Ini</h5>
        <p class="mb-0 text-muted">Silakan atur dan tugaskan TP ke Semester {{ $kela->semester?->semester ?? '-' }} di menu <strong>Program Tahunan (Prota)</strong>.</p>
    </div>
@else
    <div class="row row-cols-1 g-4 px-2 px-md-3 pb-4">
        @forelse ($siswas as $index => $siswa)
            <div class="col" id="card-sumatif-{{ $siswa->id }}-{{ $mapelId }}">
                <div class="card h-100 border border-secondary-subtle shadow-sm rounded-4 overflow-hidden">
                    
                    <div class="card-header bg-light border-bottom pt-3 pb-3 d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center">
                            <span class="badge bg-primary me-3 shadow-sm px-3 py-2" style="font-size: 0.9rem;">{{ $index + 1 }}</span>
                            <img src="{{ $siswa->img ? asset('uploads/siswa/'.$siswa->img) : asset('kaiadmin/assets/img/iconuser.png') }}" class="avatar-sm rounded-circle me-3 border border-2 shadow-sm" style="width:55px; height:55px; object-fit:cover;">
                            <div class="lh-sm">
                                <div class="fw-bold text-dark mb-1" style="font-size: 1.15rem;">{{ $siswa->name }}</div>
                                <small class="text-muted fw-bold"><i class="fa fa-id-card me-1 text-primary"></i> NIPD: {{ $siswa->nipd ?? '-' }}</small>
                            </div>
                        </div>
                        
                        <div class="d-none d-sm-block">
                            <button type="button" class="btn btn-success btn-round shadow-sm px-4 fw-bold btn-save-sumatif" 
                                    data-siswa="{{ $siswa->id }}" data-mapel="{{ $mapelId }}"
                                    data-bs-toggle="tooltip" title="Simpan Semua Nilai Sumatif Siswa Ini">
                                <i class="fa fa-save me-1"></i> Simpan Nilai
                            </button>
                        </div>
                    </div>

                    <input type="hidden" name="nilai[{{ $siswa->id }}][{{ $mapelId }}][mapel_id]" class="input-mapel" value="{{ $mapelId }}">
                    <input type="hidden" name="nilai[{{ $siswa->id }}][{{ $mapelId }}][guru_id]" class="input-guru" value="{{ $firstJadwal->guru_id }}">

                    <div class="card-body bg-white pt-4 pb-4 px-3 px-md-4">
                        
                        @foreach($groupedTPs as $elemenNama => $tpsDalamElemen)
                            <div class="mb-5">
                                {{-- Judul Elemen --}}
                                <h6 class="fw-bold text-dark border-bottom pb-2 mb-3" style="font-size: 0.95rem;">
                                    <i class="fa fa-layer-group text-warning me-2"></i>Elemen: <span class="text-primary">{{ $elemenNama }}</span>
                                </h6>
                                
                                <div class="table-responsive">
                                    <table class="table table-bordered table-sm align-middle mb-0" style="font-size: 0.85rem;">
                                        <thead class="table-light text-center">
                                            <tr>
                                                <th width="5%" class="py-2">No</th>
                                                <th width="40%">Tujuan Pembelajaran (TP)</th>
                                                <th width="10%">Nilai</th>
                                                <th width="15%">Ketercapaian</th>
                                                <th width="30%">Keterangan</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php $noTp = 1; @endphp
                                            @foreach($tpsDalamElemen as $tp)
                                                @php
                                                    $valBimbingan = $tp->kktp_bimbingan ?? 'Perlu Bimbingan dalam menguasai materi.';
                                                    $valCukup = $tp->kktp_cukup ?? 'Cukup menguasai materi pembelajaran.';
                                                    $valBaik = $tp->kktp_baik ?? 'Menunjukkan penguasaan materi yang baik.';
                                                    $valSangatBaik = $tp->kktp_sangat_baik ?? 'Sangat Baik dan komprehensif.';
                                                    
                                                    $keySumatif = $siswa->id . '-' . $mapelId . '-' . ($tp->id ?? '');
                                                    $rawNilaiSumatif = $nilaiSumatifData[$keySumatif]?->nilai ?? '';
                                                    $nilaiTampilSumatif = ($rawNilaiSumatif !== '') ? (float) $rawNilaiSumatif : '';
                                                @endphp
                                                <tr>
                                                    <td class="text-center fw-bold text-secondary">{{ $noTp++ }}</td>
                                                    
                                                    <td class="text-start pe-2 py-2">
                                                        {!! nl2br(e(strip_tags($tp->tujuan_teks))) !!}
                                                    </td>
                                                    
                                                    <td class="text-center p-1">
                                                        <input type="number" step="0.01" min="0" max="100" 
                                                               class="form-control form-control-sm text-center fw-bold input-nilai-sumatif shadow-none mx-auto" 
                                                               style="max-width: 70px; border-color: #0d6efd;"
                                                               data-tp-id="{{ $tp->id ?? '' }}"
                                                               data-bimbingan="{{ $valBimbingan }}"
                                                               data-cukup="{{ $valCukup }}"
                                                               data-baik="{{ $valBaik }}"
                                                               data-sangat-baik="{{ $valSangatBaik }}"
                                                               value="{{ $nilaiTampilSumatif }}"
                                                               placeholder="-">
                                                    </td>
                                                    
                                                    <td class="text-center align-middle p-1">
                                                        <span class="ketercapaian-badge text-muted fst-italic">-</span>
                                                    </td>
                                                    
                                                    <td class="text-start small align-middle p-2">
                                                        <span class="keterangan-text text-muted fst-italic lh-sm d-block">-</span>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="card-footer bg-light border-top text-end py-3 d-block d-sm-none">
                        <button type="button" class="btn btn-success btn-round shadow-sm px-4 fw-bold w-100 btn-save-sumatif" 
                                data-siswa="{{ $siswa->id }}" data-mapel="{{ $mapelId }}"
                                data-bs-toggle="tooltip" title="Simpan Nilai Sumatif Siswa Ini">
                            <i class="fa fa-save me-1"></i> Simpan Nilai
                        </button>
                    </div>

                </div>
            </div>
        @empty
            <div class="col-12 text-center py-5 text-muted bg-white rounded-4 border">
                <i class="fa fa-users-slash fa-3x mb-3 opacity-25"></i><br>
                <h5>Belum ada data siswa di kelas ini.</h5>
            </div>
        @endforelse 
    </div>
@endif