{{-- resources/views/admin/akademik/nilai-siswa/show.blade.php --}}
@extends('layouts.admin')
@section('title', 'Input Nilai Terintegrasi')

@section('content')
<div class="page-inner">
  <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-3">
    <div>
      <h3 class="fw-bold mb-1">Manajemen Akademik: Nilai Terintegrasi</h3>
      <h6 class="op-7 mb-2">Manajemen & Input Nilai Siswa Terintegrasi sesuai Jadwal KBM.</h6>
    </div>
    <div class="ms-md-auto py-2 py-md-0">
        <a href="{{ route('admin.nilai-siswa.index', ['tahun_ajaran' => $kela->tahun_ajaran_id, 'semester' => $kela->semester_id]) }}" class="btn btn-secondary btn-sm shadow-sm">
          <i class="fa fa-arrow-left me-1"></i> Kembali ke Daftar Kelas
        </a>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="card card-round shadow-sm border-0">
          <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center flex-wrap py-3">
              <div class="card-title text-white mb-0" style="font-size: 1.1rem;">
                  <i class="fa fa-edit me-2 text-warning"></i> Lembar Penilaian: 
                  <span class="fw-bold text-warning">{{ $kela->rombel?->levelKelas?->level_kelas ?? '-' }} - {{ $kela->rombel?->rombel ?? '-' }} ({{ ($kela->rombel?->jenkel ?? '') == 'L' ? 'Putra' : 'Putri' }})</span>
              </div>
              <span class="badge bg-light text-dark shadow-sm">Semester {{ $kela->semester?->semester ?? '-' }}</span>
          </div>
          
          <div class="card-body p-0">
              <input type="hidden" id="globalKelasId" value="{{ $kela->id }}">
              
              <div class="table-responsive">
                  <table class="table table-bordered table-hover align-middle mb-0">
                      <thead class="table-light text-center align-middle">
                          <tr>
                              <th width="3%">No</th>
                              <th width="20%">Identitas Siswa</th>
                              <th width="25%">Mata Pelajaran & Guru</th>
                              
                              @foreach($jenisPenilaian as $jenis)
                                <th class="bg-light text-primary" style="min-width: 100px;">
                                    {{ $jenis->nama_jenis }} <br>
                                    <small class="text-muted fw-normal">({{ $jenis->bobot }}%)</small>
                                </th>
                              @endforeach
                              
                              <th width="5%">Aksi</th>
                          </tr>
                      </thead>
                      <tbody>
                          @php $groupedJadwals = $jadwals->groupBy('mapel_id'); @endphp
                          
                          @forelse ($siswas as $index => $siswa)
                              @php $jadwalCount = $groupedJadwals->count() ?: 1; @endphp
                              
                              @if($groupedJadwals->count() > 0)
                                  @php $jIndex = 0; @endphp
                                  @foreach($groupedJadwals as $mapelId => $jadwalGroup)
                                      @php
                                          $firstJadwal = $jadwalGroup->first();
                                      @endphp
                                      
                                      <tr id="row-{{ $siswa->id }}-{{ $mapelId }}" class="bg-white">
                                          @if($jIndex === 0)
                                              <td rowspan="{{ $jadwalCount }}" class="text-center align-middle fw-bold">{{ $index + 1 }}</td>
                                              
                                              <td rowspan="{{ $jadwalCount }}" class="align-middle px-3 text-start">
                                                  <div class="d-flex align-items-center">
                                                      <img src="{{ $siswa->img ? asset('uploads/siswa/'.$siswa->img) : asset('kaiadmin/assets/img/iconuser.png') }}" 
                                                           alt="{{ $siswa->name }}"
                                                           class="avatar-md rounded-circle me-3 border shadow-sm flex-shrink-0" style="width:50px; height:50px; object-fit:cover;">
                                                      <div class="lh-sm">
                                                          <div class="fw-bold text-dark mb-1" style="font-size: 0.95rem;">{{ $siswa->name }}</div>
                                                          <div class="small text-muted">NIS: {{ $siswa->nis ?? '-' }}</div>
                                                      </div>
                                                  </div>
                                              </td>
                                          @endif
                                          
                                          <td class="px-3">
                                              <div class="fw-bold text-primary mb-1">
                                                  <i class="fa fa-book me-1 opacity-75"></i> {{ $firstJadwal->mapel->mapelNama->nama_mapel ?? '-' }}
                                              </div>
                                              <div class="small text-muted">
                                                  <i class="fa fa-user-tie me-1"></i> {{ $firstJadwal->guru->name ?? '-' }}
                                              </div>
                                              
                                              <input type="hidden" class="input-mapel" value="{{ $mapelId }}">
                                              <input type="hidden" class="input-guru" value="{{ $firstJadwal->guru_id }}">
                                          </td>

                                          @foreach($jenisPenilaian as $jenis)
                                            @php
                                                $key = $siswa->id . '-' . $mapelId . '-' . $jenis->id;
                                                $rawNilai = $nilaiData[$key]?->nilai ?? '';
                                                $nilaiTampil = ($rawNilai !== '') ? (float) $rawNilai : '';
                                            @endphp
                                            <td class="p-2">
                                                <input type="number" step="0.01" min="0" max="100" 
                                                       class="form-control form-control-sm text-center fw-bold input-nilai shadow-none border-primary-subtle" 
                                                       data-jenis="{{ $jenis->id }}"
                                                       value="{{ $nilaiTampil }}" placeholder="-">
                                            </td>
                                          @endforeach
                                          
                                          <td class="text-center align-middle px-2">
                                              <div class="btn-group" role="group">
                                                <button type="button" class="btn btn-primary btn-sm shadow-sm btn-save-row" 
                                                        data-siswa="{{ $siswa->id }}" 
                                                        data-mapel="{{ $mapelId }}"
                                                        data-bs-toggle="tooltip" title="Simpan Nilai">
                                                    <i class="fa fa-save"></i>
                                                </button>
                                              </div>
                                          </td>
                                      </tr>
                                      @php $jIndex++; @endphp
                                  @endforeach
                              @else
                                  <tr>
                                      <td class="text-center align-middle fw-bold">{{ $index + 1 }}</td>
                                      <td class="align-middle px-3 text-start">
                                          <div class="d-flex align-items-center">
                                              <img src="{{ $siswa->img ? asset('uploads/siswa/'.$siswa->img) : asset('kaiadmin/assets/img/iconuser.png') }}" class="avatar-sm rounded-circle me-3 border shadow-sm" style="width:45px; height:45px; object-fit:cover;">
                                              <div>
                                                  <div class="fw-bold text-dark">{{ $siswa->name }}</div>
                                                  <small class="text-muted"><i class="fa fa-id-card me-1"></i> {{ $siswa->nis ?? '-' }}</small>
                                              </div>
                                          </div>
                                      </td>
                                      <td colspan="100%" class="text-center text-muted py-4 fst-italic">
                                          <i class="fa fa-exclamation-circle text-warning me-1"></i> Belum ada Jadwal Mata Pelajaran di Rombel ini.
                                      </td>
                                  </tr>
                              @endif
                          @empty
                              <tr>
                                  <td colspan="100%" class="text-center py-5 text-muted">
                                      <i class="fa fa-users fa-3x mb-3 opacity-50"></i><br>
                                      <h5>Belum ada data siswa di Rombel ini.</h5>
                                  </td>
                              </tr>
                          @endforelse 
                      </tbody>
                  </table>
              </div>
          </div>
      </div>
    </div>
  </div>

</div>

@push('scripts')
<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)
    });

    document.querySelectorAll('.btn-save-row').forEach(btn => {
        btn.addEventListener('click', function() {
            const sId = this.dataset.siswa;
            const mId = this.dataset.mapel; 
            const row = document.getElementById(`row-${sId}-${mId}`);
            
            const originalIcon = this.innerHTML;
            this.classList.replace('btn-primary', '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-success');
                this.innerHTML = '<i class="fa fa-check"></i>';
                
                setTimeout(() => { 
                    this.className = 'btn btn-primary btn-sm shadow-sm btn-save-row'; 
                    this.innerHTML = originalIcon;
                    this.disabled = false;
                    
                    row.querySelectorAll('.input-nilai').forEach(input => {
                        if(input.value !== '') {
                           input.value = parseFloat(input.value); 
                        }
                    });
                    
                }, 1500);
            })
            .catch(error => {
                this.classList.replace('btn-warning', 'btn-danger');
                this.innerHTML = '<i class="fa fa-times"></i>';
                
                setTimeout(() => { 
                    this.className = 'btn btn-primary btn-sm shadow-sm btn-save-row'; 
                    this.innerHTML = originalIcon;
                    this.disabled = false;
                }, 1500);
                
                swal({
                    title: "Gagal Menyimpan",
                    text: error.message,
                    icon: "error",
                    dangerMode: true,
                });
            });
        });
    });
});
</script>
@endpush
@endsection