@extends('siswa.layouts.app')

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

@section('content')
<section class="section">
    <div class="section-header">
    <h1>Daftar Mapel</h1>
    <div class="section-header-breadcrumb">
      <div class="breadcrumb-item active"><a href="{{ route('siswa.dashboard') }}">Dashboard</a></div>
       <div class="breadcrumb-item active"><a href="{{ route('siswa.pelajaran.index') }}">Mata pelajaran</a></div>
      <div class="breadcrumb-item">Daftar materi</div>
    </div>
  </div>


  <div class="section-body">
    <div class="row">
      @forelse ($materiUtama as $item)
        <div class="col-lg-4 col-md-6 mb-4">
          <div class="card 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->judul }}</h5>
              <p class="text-muted flex-grow-1">Materi utama tanpa induk.</p>
              <a href="{{ route('siswa.materi.show', $item->id) }}" class="btn btn-primary mt-auto">
                Lihat Materi <i class="fas fa-arrow-right ms-1"></i>
              </a>
            </div>
          </div>
        </div>
      @empty
        <div class="col-12">
          <div class="alert alert-light text-center p-5 shadow-sm">
            <i class="fas fa-book fa-2x text-secondary mb-3"></i>
            <h5 class="mb-2">Belum ada materi utama</h5>
            <p class="text-muted mb-0">Materi utama akan ditampilkan di sini jika sudah tersedia.</p>
          </div>
        </div>
      @endforelse
    </div>
  </div>

  <div class="section-header mt-5">
    <h1>Daftar Sub Materi</h1>
  </div>

  <div class="section-body">
    <div class="row">
      @forelse ($materiAnak as $item)
        <div class="col-lg-4 col-md-6 mb-4">
          <div class="card shadow-sm h-100">
            <div class="card-body d-flex flex-column">
              <div class="mb-3">
                <i class="fas fa-file-alt fa-2x text-success"></i>
              </div>
              <h5 class="card-title">{{ $item->judul }}</h5>
              <p class="text-muted flex-grow-1">
                Sub materi dari <strong>{{ $item->parent->judul ?? 'Materi tidak diketahui' }}</strong>.
              </p>
              <a href="{{ route('siswa.materi.show', $item->id) }}" class="btn btn-success mt-auto">
                Buka Materi <i class="fas fa-arrow-right ms-1"></i>
              </a>
            </div>
          </div>
        </div>
      @empty
        <div class="col-12">
          <div class="alert alert-light text-center p-5 shadow-sm">
            <i class="fas fa-file-alt fa-2x text-secondary mb-3"></i>
            <h5 class="mb-2">Belum ada sub materi</h5>
            <p class="text-muted mb-0">Sub materi akan muncul di sini jika sudah ditambahkan oleh guru.</p>
          </div>
        </div>
      @endforelse
    </div>
  </div>
</section>
@endsection