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

@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-3">Manajemen Akademik: Input Nilai Siswa</h3>
      <h6 class="op-7 mb-2">Pilih Rombel berdasarkan Tahun Ajaran & Semester aktif.</h6>
    </div>
  </div>

  @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
        <i class="fa fa-check-circle me-2"></i> {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  @endif
  @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
        <i class="fa fa-exclamation-triangle me-2"></i> {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  @endif

  <div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-3">
      <form action="{{ route('admin.nilai-siswa.index') }}" method="GET" class="m-0" id="filterForm">
        <div class="row g-3 align-items-end">
          
          <div class="col-md-3">
            <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-calendar-check me-1"></i> Tahun Ajaran</label>
            <select name="tahun_ajaran" class="form-select border-primary-subtle bg-light fw-bold" onchange="this.form.submit()">
              <option value="">-- Semua Tahun Ajaran --</option>
              @foreach($tahunAjarans ?? [] as $ta)
                <option value="{{ $ta->id }}" {{ request('tahun_ajaran', $selectedTahunId ?? '') == $ta->id ? 'selected' : '' }}>
                  {{ $ta->tahun_ajaran }} {{ $ta->is_active ? '(Aktif)' : '' }}
                </option>
              @endforeach
            </select>
          </div>

          <div class="col-md-3">
            <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-adjust me-1"></i> Semester</label>
            <select name="semester" class="form-select border-primary-subtle bg-light fw-bold" onchange="this.form.submit()">
              <option value="">-- Semua Semester --</option>
              @foreach($semesters ?? [] as $sem)
                <option value="{{ $sem->id }}" {{ request('semester') == $sem->id ? 'selected' : '' }}>
                  {{ $sem->semester }}
                </option>
              @endforeach
            </select>
          </div>

          <div class="col-md-3">
            <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-venus-mars me-1"></i> Jenis Kelamin</label>
            <select name="jenkel" class="form-select border-primary-subtle bg-light fw-bold" onchange="this.form.submit()">
              <option value="">Semua (Putra & Putri)</option>
              <option value="L" {{ request('jenkel') == 'L' ? 'selected' : '' }}>Putra (L)</option>
              <option value="P" {{ request('jenkel') == 'P' ? 'selected' : '' }}>Putri (P)</option>
            </select>
          </div>

          <div class="col-md-3">
            <label class="form-label fw-bold small text-muted mb-1"><i class="fas fa-layer-group me-1"></i> Tingkat Kelas</label>
            <select name="level" class="form-select border-primary-subtle bg-light fw-bold" onchange="this.form.submit()">
              <option value="">Semua Tingkat</option>
              @foreach($levelKelas ?? [] as $lvl)
                <option value="{{ $lvl->id }}" {{ request('level') == $lvl->id ? 'selected' : '' }}>
                  Kelas {{ $lvl->level_kelas }}
                </option>
              @endforeach
            </select>
          </div>

        </div>
      </form>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="card card-round shadow-sm border-0">
        <div class="card-header d-flex justify-content-between align-items-center py-3">
          <div class="card-title" style="font-size: 1.1rem;">
            <i class="fa fa-school me-2 text-primary"></i> 
            Daftar Kelas & Rombongan Belajar
          </div>
        </div>
        
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover table-striped align-middle mb-0">
              <thead class="table-dark text-center">
                <tr>
                  <th width="5%">No</th>
                  <th width="30%" class="text-start">Identitas Rombel</th>
                  <th width="15%">Tahun & Semester</th>
                  <th width="20%" class="text-start">Wali Kelas</th>
                  <th width="15%">Aksi</th>
                </tr>
              </thead>
              <tbody>
                @forelse ($kelas as $item)
                  <tr class="text-center">
                    <td class="fw-bold">{{ $loop->iteration + ($kelas->firstItem() - 1) }}</td>
                    
                    <td class="text-start px-3">
                      <div class="fw-bold text-primary" style="font-size: 1.05rem;">
                        {{ $item->rombel?->levelKelas?->level_kelas ?? '-' }} - {{ $item->rombel?->rombel ?? '-' }} 
                      </div>
                      <small class="{{ ($item->rombel?->jenkel ?? '') == 'L' ? 'text-primary' : 'text-danger' }} fw-bold">
                        @if(($item->rombel?->jenkel ?? '') == 'L') <i class="fa fa-male me-1"></i> Putra
                        @elseif(($item->rombel?->jenkel ?? '') == 'P') <i class="fa fa-female me-1"></i> Putri
                        @else -
                        @endif
                      </small>
                    </td>
                    
                    <td>
                      <span class="badge bg-light text-dark shadow-sm border mb-1">{{ $item->tahunAjaran?->tahun_ajaran ?? '-' }}</span><br>
                      <span class="badge bg-secondary shadow-sm">{{ $item->semester?->semester ?? '-' }}</span>
                    </td>
                    
                    <td class="text-start px-3">
                      <div class="d-flex align-items-center">
                        @php
                          $foto = $item->waliKelas?->status?->img;
                          $pathFoto = $foto ? asset('uploads/guru/' . $foto) : asset('kaiadmin/assets/img/iconuser.png');
                        @endphp
                        <img src="{{ $pathFoto }}" alt="Wali" class="avatar-sm rounded-circle border shadow-sm me-2" style="width: 35px; height: 35px; object-fit: cover;">
                        <div>
                          <div class="fw-bold text-dark" style="font-size: 0.85rem;">{{ $item->waliKelas?->name ?? 'Belum Diatur' }}</div>
                        </div>
                      </div>
                    </td>
                    
                    <td>
                      <div class="btn-group" role="group">
                        <a href="{{ route('admin.nilai-siswa.show', $item->id) }}" 
                           class="btn btn-primary btn-sm shadow-sm" 
                           data-bs-toggle="tooltip" 
                           title="Lihat & Input Nilai">
                          <i class="fa fa-eye me-1"></i> Input Nilai
                        </a>
                      </div>
                    </td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="5" class="text-center py-5">
                      <i class="fa fa-folder-open fa-3x text-muted mb-3 opacity-50"></i><br>
                      <span class="text-muted fw-bold">Belum ada Rombongan Belajar (Rombel) untuk kriteria filter ini.</span><br>
                      <small class="text-muted">Silakan ganti opsi filter di atas atau tambah rombel di menu Manajemen Akademik.</small>
                    </td>
                  </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
        
        @if(method_exists($kelas, 'links') && $kelas->hasPages())
        <div class="card-footer bg-light border-top">
            <div class="d-flex justify-content-end">
              {{ $kelas->withQueryString()->links('pagination::bootstrap-5') }}
            </div>
        </div>
        @endif
        
      </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)
    });
});
</script>
@endpush
@endsection