{{-- resources/views/public/guru/nilai_show.blade.php --}}
@extends('layouts.app')
@section('title', 'Input Nilai - ' . ($setting->web_name ?? 'Sekolah'))

@section('content')
@include('public.guru._hero')

<section class="section light-background pt-1 pb-5">
    <div class="container" data-aos="fade-up">
        
        <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
            <div>
                <h3 class="fw-bold mb-1 text-dark">
                    <i class="fas fa-edit text-success me-2"></i> Rombel: {{ $kela->rombel?->levelKelas?->level_kelas ?? '-' }} - {{ $kela->rombel?->rombel ?? '-' }} 
                    ({{ ($kela->rombel?->jenkel ?? '') == 'L' ? 'Putra' : 'Putri' }})
                </h3>
                <h6 class="op-7 mb-2 text-muted">Manajemen Lembar Penilaian Siswa. Semester {{ $kela->semester?->semester ?? '-' }}</h6>
            </div>
            <div class="ms-md-auto py-2 py-md-0">
                <a href="{{ route('guru.nilai.index') }}" class="btn btn-secondary btn-sm btn-round shadow-sm px-3">
                    <i class="fa fa-arrow-left me-1"></i> Kembali ke Daftar Kelas
                </a>
            </div>
        </div>

        <form id="formNilaiMassal" method="POST" action="#">
            @csrf
            <input type="hidden" id="globalKelasId" name="kelas_id" value="{{ $kela->id }}">

            @php $groupedJadwals = $jadwals->groupBy('mapel_id'); @endphp

            @if($groupedJadwals->isEmpty())
                <div class="alert alert-warning text-center py-5 rounded-4 shadow-sm border-0 bg-white">
                    <i class="fa fa-exclamation-circle fa-3x text-warning mb-3 opacity-75"></i>
                    <h5 class="fw-bold text-dark">Tidak Ada Mata Pelajaran</h5>
                    <p class="mb-0 text-muted">Anda tidak memiliki jadwal mengajar di Rombel ini.</p>
                </div>
            @else
                @foreach($groupedJadwals as $mapelId => $jadwalGroup)
                    @php
                        $firstJadwal = $jadwalGroup->first();
                        $masterMapelId = optional($firstJadwal->mapel)->mapel_nama_id ?? $firstJadwal->mapel_id;
                        $kurikulumMapel = $kurikulums->firstWhere('mapel_id', $masterMapelId);
                        
                        $groupedTPs = collect();
                        $semesterAktif = $kela->semester->semester ?? ''; 

                        if($kurikulumMapel && $kurikulumMapel->cps) {
                            $validTpTextsForSemester = [];
                            $protas = \App\Models\Akademik\KurikulumProta::where('kurikulum_id', $kurikulumMapel->id)
                                        ->where('semester', $semesterAktif)
                                        ->get();

                            foreach($protas as $prota) {
                                $atp = \App\Models\Akademik\KurikulumAtp::find($prota->kurikulum_atp_id);
                                if($atp) {
                                    $alurs = json_decode($atp->tahapan, true);
                                    if(is_array($alurs) && isset($alurs[$prota->alur_index])) {
                                        $tpsDalamAlur = $alurs[$prota->alur_index]['tps'] ?? [];
                                        foreach($tpsDalamAlur as $t) {
                                            $validTpTextsForSemester[] = trim(strip_tags($t));
                                        }
                                    }
                                }
                            }

                            foreach($kurikulumMapel->cps as $cp) {
                                $tpsForThisCp = collect();
                                $elemenNama = $cp->elemen ?? 'Elemen Umum';
                                if($cp->tps) {
                                    foreach($cp->tps as $tp) {
                                        $tpTeks = trim(strip_tags($tp->tujuan_teks));
                                        $isAssigned = false;
                                        foreach($validTpTextsForSemester as $validText) {
                                            if($tpTeks === $validText || str_contains($tpTeks, $validText) || str_contains($validText, $tpTeks)) {
                                                $isAssigned = true;
                                                break;
                                            }
                                        }
                                        if (empty($validTpTextsForSemester) || $isAssigned) {
                                            $tpsForThisCp->push($tp);
                                        }
                                    }
                                }
                                if($tpsForThisCp->isNotEmpty()) {
                                    $groupedTPs->put($elemenNama, $tpsForThisCp);
                                }
                            }
                        }
                    @endphp

                    <div class="card card-round shadow-sm border-0 rounded-4 overflow-hidden mb-4">
                        <div class="card-header bg-white text-dark py-3 border-bottom-0">
                            <div class="d-flex justify-content-between align-items-center flex-wrap">
                                <div class="card-title text-dark m-0" style="font-size: 1.1rem;">
                                    <i class="fa fa-book me-2 text-primary"></i> 
                                    Mata Pelajaran: <span class="fw-bold text-primary">{{ $firstJadwal->mapel->mapelNama->nama_mapel ?? '-' }}</span>
                                </div>
                                <div>
                                    <span class="badge bg-primary shadow-sm px-3 py-2">Semester {{ $kela->semester?->semester ?? '-' }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="card-body p-0">
                            <ul class="nav nav-tabs nav-line nav-color-success px-3" id="nilaiTab-{{ $mapelId }}" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active fw-bold" id="formatif-tab-{{ $mapelId }}" data-bs-toggle="tab" href="#formatif-{{ $mapelId }}" role="tab" aria-selected="true">
                                        <i class="fas fa-tasks me-1"></i> Penilaian Formatif (Reguler)
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link fw-bold text-dark" id="sumatif-tab-{{ $mapelId }}" data-bs-toggle="tab" href="#sumatif-{{ $mapelId }}" role="tab" aria-selected="false">
                                        <i class="fas fa-award me-1"></i> Sumatif Lingkup Materi (TP)
                                    </a>
                                </li>
                            </ul>

                            <div class="tab-content" id="nilaiTabContent-{{ $mapelId }}">
                                <div class="tab-pane fade show active" id="formatif-{{ $mapelId }}" role="tabpanel" aria-labelledby="formatif-tab-{{ $mapelId }}">
                                    @include('public.guru.nilai_show_formatif')
                                </div>

                                <div class="tab-pane fade" id="sumatif-{{ $mapelId }}" role="tabpanel" aria-labelledby="sumatif-tab-{{ $mapelId }}">
                                    @include('public.guru.nilai_show_sumatif')
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </form>
    </div>
</section>
@endsection

@push('scripts')
<style>
    #header { background-color: #263351 !important; }
    #header.header-scrolled { background-color: rgba(38, 51, 81, 0.95) !important; }
    .input-nilai { transition: all 0.2s ease; }
    .input-nilai:focus { 
        box-shadow: inset 0 0 5px rgba(13, 110, 253, 0.2) !important; 
        border-color: #198754 !important;
        background-color: #f8f9fa !important;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });

    function updatePredikatSumatif(input) {
        const val = parseFloat(input.value);
        const tr = input.closest('tr');
        const badgeCapai = tr.querySelector('.ketercapaian-badge');
        const textKet = tr.querySelector('.keterangan-text');

        if (isNaN(val) || input.value === '') {
            if(badgeCapai) badgeCapai.innerHTML = '<span class="text-muted fst-italic">-</span>';
            if(textKet) textKet.innerHTML = '<span class="text-muted fst-italic">-</span>';
            input.classList.remove('bg-success-subtle', 'bg-primary-subtle', 'bg-warning-subtle', 'bg-danger-subtle');
            return;
        }

        input.classList.remove('bg-success-subtle', 'bg-primary-subtle', 'bg-warning-subtle', 'bg-danger-subtle');

        if (val >= 90) {
            if(badgeCapai) badgeCapai.innerHTML = '<span class="badge bg-success shadow-sm w-100 py-1">Sangat Baik</span>';
            if(textKet) textKet.innerHTML = '<span class="text-success fw-bold">' + input.dataset.sangatBaik + '</span>';
            input.classList.add('bg-success-subtle');
        } else if (val >= 80) {
            if(badgeCapai) badgeCapai.innerHTML = '<span class="badge bg-primary shadow-sm w-100 py-1">Baik</span>';
            if(textKet) textKet.innerHTML = '<span class="text-primary fw-bold">' + input.dataset.baik + '</span>';
            input.classList.add('bg-primary-subtle');
        } else if (val >= 70) {
            if(badgeCapai) badgeCapai.innerHTML = '<span class="badge bg-warning text-dark shadow-sm w-100 py-1">Cukup</span>';
            if(textKet) textKet.innerHTML = '<span class="text-dark fw-bold">' + input.dataset.cukup + '</span>';
            input.classList.add('bg-warning-subtle');
        } else if (val >= 0) {
            if(badgeCapai) badgeCapai.innerHTML = '<span class="badge bg-danger shadow-sm w-100 py-1">Perlu Bimbingan</span>';
            if(textKet) textKet.innerHTML = '<span class="text-danger fw-bold">' + input.dataset.bimbingan + '</span>';
            input.classList.add('bg-danger-subtle');
        }
    }

    function hitungTotalFormatif(tr) {
        let total = 0;
        let adaIsi = false;
        
        tr.querySelectorAll('.input-nilai-formatif').forEach(input => {
            let val = parseFloat(input.value);
            let bobot = parseFloat(input.dataset.bobot) || 0;
            if(!isNaN(val)) {
                total += (val * bobot / 100);
                adaIsi = true;
            }
        });
        
        let spanTotal = tr.querySelector('.total-formatif-text');
        let spanKet = tr.querySelector('.keterangan-formatif-text');
        
        if(!adaIsi) {
            if(spanTotal) spanTotal.innerText = '-';
            if(spanKet) spanKet.innerHTML = '<span class="text-muted fst-italic">-</span>';
            return;
        }

        let cleanTotal = parseFloat(total.toFixed(2));
        if(spanTotal) spanTotal.innerText = cleanTotal; 
        
        if(total >= 70) {
            if(spanKet) spanKet.innerHTML = '<span class="badge bg-success shadow-sm w-100 py-1">Tuntas</span>';
        } else {
            if(spanKet) spanKet.innerHTML = '<span class="badge bg-danger shadow-sm w-100 py-1">Belum Tuntas</span>';
        }
    }

    document.querySelectorAll('.input-nilai-sumatif').forEach(input => {
        updatePredikatSumatif(input); 
        input.addEventListener('input', function() { updatePredikatSumatif(this); });
    });

    document.querySelectorAll('.input-nilai-formatif').forEach(input => {
        const tr = input.closest('tr');
        hitungTotalFormatif(tr);
        input.addEventListener('input', function() { hitungTotalFormatif(tr); });
    });

    document.querySelectorAll('.btn-save-row').forEach(btn => {
        btn.addEventListener('click', function() {
            if(this.dataset.type !== 'formatif') return; 

            const sId = this.dataset.siswa;
            const mId = this.dataset.mapel; 
            const row = document.getElementById(`row-formatif-${sId}-${mId}`);
            
            const originalIcon = this.innerHTML;
            this.classList.replace('btn-success', 'btn-warning');
            this.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
            this.disabled = true;

            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('kelas_id', document.getElementById('globalKelasId').value);
            formData.append('mapel_id', row.querySelector('.input-mapel').value);
            formData.append('guru_id', row.querySelector('.input-guru').value);

            row.querySelectorAll('.input-nilai').forEach(input => {
                const jId = input.dataset.jenis;
                const val = input.value;
                if(val !== '') { formData.append(`nilai[${sId}][${jId}][nilai]`, val); }
            });

            fetch('{{ route("admin.nilai-siswa.store") }}', { 
                method: 'POST', 
                headers: {'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json'}, 
                body: formData 
            })
            .then(async r => {
                const d = await r.json();
                if (!r.ok) throw new Error(d.message || 'Terjadi kesalahan sistem.');
                return d;
            })
            .then(d => {
                this.classList.replace('btn-warning', 'btn-primary');
                this.innerHTML = '<i class="fa fa-check"></i>';
                setTimeout(() => { 
                    this.className = 'btn btn-icon btn-sm btn-success btn-round btn-save-row shadow-sm'; 
                    this.innerHTML = originalIcon;
                    this.disabled = false;
                }, 1500);
            })
            .catch(error => {
                this.classList.replace('btn-warning', 'btn-danger');
                this.innerHTML = '<i class="fa fa-times"></i>';
                setTimeout(() => { 
                    this.className = 'btn btn-icon btn-sm btn-success btn-round btn-save-row shadow-sm'; 
                    this.innerHTML = originalIcon;
                    this.disabled = false;
                }, 1500);
                alert("Gagal Menyimpan: " + error.message);
            });
        });
    });

    document.querySelectorAll('.btn-save-sumatif').forEach(btn => {
        btn.addEventListener('click', function() {
            const sId = this.dataset.siswa;
            const mId = this.dataset.mapel; 
            const card = document.getElementById(`card-sumatif-${sId}-${mId}`);
            
            const originalIcon = this.innerHTML;
            this.classList.replace('btn-success', 'btn-warning');
            this.innerHTML = '<i class="fa fa-spinner fa-spin me-1"></i> Menyimpan...';
            this.disabled = true;

            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('kelas_id', document.getElementById('globalKelasId').value);
            formData.append('mapel_id', card.querySelector('.input-mapel').value);
            formData.append('guru_id', card.querySelector('.input-guru').value);

            card.querySelectorAll('.input-nilai-sumatif').forEach(input => {
                const tpId = input.dataset.tpId;
                const val = input.value;
                if(val !== '' && tpId) { 
                    formData.append(`nilai[${sId}][${tpId}][nilai]`, val); 
                }
            });

            fetch('{{ route("guru.nilai.store_sumatif") }}', { 
                method: 'POST', 
                headers: {'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json'}, 
                body: formData 
            })
            .then(async r => {
                const d = await r.json();
                if (!r.ok) throw new Error(d.message || 'Terjadi kesalahan sistem.');
                return d;
            })
            .then(d => {
                this.classList.replace('btn-warning', 'btn-primary');
                this.innerHTML = '<i class="fa fa-check me-1"></i> Tersimpan';
                setTimeout(() => { 
                    this.className = 'btn btn-sm btn-success btn-round shadow-sm px-4 fw-bold btn-save-sumatif'; 
                    this.innerHTML = originalIcon;
                    this.disabled = false;
                }, 2000);
            })
            .catch(error => {
                this.classList.replace('btn-warning', 'btn-danger');
                this.innerHTML = '<i class="fa fa-times me-1"></i> Gagal';
                setTimeout(() => { 
                    this.className = 'btn btn-sm btn-success btn-round shadow-sm px-4 fw-bold btn-save-sumatif'; 
                    this.innerHTML = originalIcon;
                    this.disabled = false;
                }, 2000);
                alert("Gagal Menyimpan: " + error.message);
            });
        });
    });
});
</script>
@endpush