@extends('guru.layouts.app')

@section('title', 'Daftar Materi')

@section('content')
<section class="section">
  <div class="section-header">
    <h1>Daftar Mapel yang Diampu</h1>
    <div class="section-header-breadcrumb">
      <div class="breadcrumb-item active">
        <a href="{{ route('guru.dashboard') }}">Dashboard</a>
      </div>
      <div class="breadcrumb-item">Daftar Materi</div>
    </div>
  </div>

  @if (session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
  @endif

  <div class="section-body">

    {{-- FORM FILTER KELAS --}}
    <form method="GET" class="mb-4">
      <div class="form-group">
        <label for="kelas_id">Filter Kelas</label>
        <select name="kelas_id" id="kelas_id" class="form-control" onchange="this.form.submit()">
          <option value="">-- Semua Kelas --</option>
          @foreach ($semuaKelas as $kelas)
            <option value="{{ $kelas->id }}" {{ request('kelas_id') == $kelas->id ? 'selected' : '' }}>
              {{ $kelas->nama_kelas }}  {{ $kelas->tingkat }}
            </option>
          @endforeach
        </select>
      </div>
    </form>

    <div class="row">
      @forelse ($mapelYangDiampu as $item)
        <div class="col-lg-4 col-md-6 mb-4">
          <div class="card card-primary shadow-sm h-100">
            <div class="card-body d-flex flex-column">
              <div class="mb-3">
                <i class="fas fa-book fa-2x text-primary"></i>
              </div>
              <h5 class="card-title">
                {{ $item->mapel->nama_mapel ?? 'Nama Mapel' }}
              </h5>

              <div class="mb-3">
                <strong>Kelas:</strong><br>
                @forelse ($item->kelasMapel as $kelasMapel)
                  @if (!$kelasId || $kelasMapel->kelas_id == $kelasId)
                    <span class="badge badge-info mb-1">
                      {{ $kelasMapel->kelas->nama_kelas ?? 'Kelas Tidak Diketahui' }}
                    </span>
                  @endif
                @empty
                  <span class="text-muted">Tidak ada kelas terdata.</span>
                @endforelse
              </div>

              <p class="card-text flex-grow-1">
                Anda adalah pengampu mata pelajaran ini.
              </p>

              <a href="{{ route('guru.materi.index', $item->mapel_id) }}" class="btn btn-primary mt-auto">
                Kelola Materi <i class="fas fa-arrow-right ms-1"></i>
              </a>
            </div>
          </div>
        </div>
      @empty
        <div class="col-12 text-center">
          <div class="alert alert-info">
            Tidak ada mapel yang diampu.
          </div>
        </div>
      @endforelse
    </div>
  </div>
</section>
@endsection