@extends('guru.layout')

@section('title', '')

@section('content')
    <div class="card">
        <div class="card-header bg-success text-white">
            <h5 class="mb-0"><i class="bi bi-people me-1"></i> Peserta Didik</h5>
            <p class="mb-0 small text-white-50">Daftar peserta didik sesuai kelas  Anda </p>
        </div>
        <div class="card-body">
            <div class="mb-3 d-flex justify-content-between align-items-start">
                <div>
                    <h6 class="mb-1">Daftar Peserta Didik</h6>
                    @php $activePeriode = \App\Services\PeriodeService::getActive(); @endphp
                    @if($activePeriode)
                        @php $isTarget = trim($activePeriode->tahun_pelajaran) === '2025/2026' && trim($activePeriode->semester) === 'Ganjil'; @endphp
                        <small class="{{ $isTarget ? 'text-danger' : 'text-muted' }}">Tahun Pelajaran: @if($isTarget)<strong>{{ $activePeriode->tahun_pelajaran }}</strong>@else{{ $activePeriode->tahun_pelajaran }}@endif &middot; Semester: @if($isTarget)<strong>{{ $activePeriode->semester }}</strong>@else{{ $activePeriode->semester }}@endif</small>
                    @else
                        <small class="text-muted">Belum ada periode aktif</small>
                    @endif
                </div>
                <div>
                    {{-- Guru tidak dapat menambah peserta didik --}}
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th style="width:60px;">#</th>
                            <th>NIS</th>
                            <th>Nama</th>
                            <th>Kelas</th>
                            <th style="width:120px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($pesertas ?? [] as $i => $p)
                            <tr>
                                <td>{{ $i + 1 }}</td>
                                <td>{{ $p->nis ?? ($p['nis'] ?? ($p->nisn ?? ($p['nisn'] ?? '-'))) }}</td>
                                <td>{{ $p->nama ?? ($p['nama'] ?? ($p->user->name ?? ($p['user']['name'] ?? '-'))) }}</td>
                                <td>{{ $p->kelas->nama ?? ($p['kelas'] ?? ($p['kelas_nama'] ?? '-')) }}</td>
                                <td>
                                    {{-- For safety, do not show create/edit buttons here for guru. Provide read-only view modal. --}}
                                    <button class="btn btn-sm btn-primary btn-view"
                                        data-id="{{ $p->id ?? ($p['id'] ?? '') }}"
                                        data-nis="{{ $p->nis ?? ($p['nis'] ?? '') }}"
                                        data-nisn="{{ $p->nisn ?? ($p['nisn'] ?? '') }}"
                                        data-nama="{{ $p->nama ?? ($p['nama'] ?? ($p->user->name ?? ($p['user']['name'] ?? ''))) }}"
                                        data-nama_panggilan="{{ $p->nama_panggilan ?? ($p['nama_panggilan'] ?? '') }}"
                                        data-jenis_kelamin="{{ $p->jenis_kelamin ?? ($p['jenis_kelamin'] ?? '') }}"
                                        data-agama="{{ $p->agama ?? ($p['agama'] ?? '') }}"
                                        data-tingkat_awal="{{ $p->tingkat_awal ?? ($p['tingkat_awal'] ?? '') }}"
                                        data-fase="{{ $p->fase ?? ($p['fase'] ?? '') }}"
                                        data-kelas="{{ is_object($p->kelas) ? ($p->kelas->nama ?? '') : ($p->kelas ?? ($p['kelas'] ?? '')) }}"
                                        data-rombel="{{ $p->rombel ?? ($p['rombel'] ?? '') }}"
                                        data-bs-toggle="modal" data-bs-target="#viewPesertaModal">Lihat</button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center">Tidak ada peserta didik untuk kelas Anda.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <!-- View Modal for Guru (read-only) -->
    <div class="modal fade" id="viewPesertaModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-success bg-opacity-25">
                    <h5 class="modal-title text-dark">Detail Peserta Didik</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-2">
                        <div class="col-md-4">
                            <label class="form-label">NIS</label>
                            <input id="view_nis" class="form-control" readonly />
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">NISN</label>
                            <input id="view_nisn" class="form-control" readonly />
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Nama Lengkap</label>
                            <input id="view_nama" class="form-control" readonly />
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Nama Panggilan</label>
                            <input id="view_nama_panggilan" class="form-control" readonly />
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Jenis Kelamin</label>
                            <input id="view_jenis_kelamin" class="form-control" readonly />
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Agama</label>
                            <input id="view_agama" class="form-control" readonly />
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Tingkat Awal</label>
                            <input id="view_tingkat_awal" class="form-control" readonly />
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Fase</label>
                            <input id="view_fase" class="form-control" readonly />
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Kelas</label>
                            <input id="view_kelas" class="form-control" readonly />
                        </div>

                        <div class="col-12">
                            <label class="form-label">Rombel</label>
                            <input id="view_rombel" class="form-control" readonly />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.btn-view').forEach(function(btn){
                btn.addEventListener('click', function(){
                    document.getElementById('view_nis').value = this.dataset.nis || '';
                    document.getElementById('view_nisn').value = this.dataset.nisn || '';
                    document.getElementById('view_nama').value = this.dataset.nama || '';
                    document.getElementById('view_nama_panggilan').value = this.dataset.nama_panggilan || '';
                    document.getElementById('view_jenis_kelamin').value = this.dataset.jenis_kelamin || '';
                    document.getElementById('view_agama').value = this.dataset.agama || '';
                    document.getElementById('view_tingkat_awal').value = this.dataset.tingkat_awal || '';
                    document.getElementById('view_fase').value = this.dataset.fase || '';
                    document.getElementById('view_kelas').value = this.dataset.kelas || '';
                    document.getElementById('view_rombel').value = this.dataset.rombel || '';
                });
            });
        });
    </script>
@endsection