@extends('guru.layouts.app')

@section('title', 'Detail Ujian')

@section('content')
<section class="section">
  <div class="section-header">
    <h1>Detail Ujian</h1>
    <div class="section-header-breadcrumb">
      <div class="breadcrumb-item"><a href="{{ route('guru.dashboard') }}">Dashboard</a></div>
      <div class="breadcrumb-item"><a href="{{ route('guru.ujian.index') }}">Daftar Ujian</a></div>
      <div class="breadcrumb-item active">{{ $ujian->judul }}</div>
    </div>
  </div>

  <div class="section-body">

    {{-- Informasi Umum --}}
    <div class="card mb-4">
      <div class="card-header">
        <h4>Informasi Umum</h4>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-6">
            <p><strong>Judul:</strong> {{ $ujian->judul }}</p>
            <p><strong>Deskripsi:</strong> {{ $ujian->deskripsi ?? '-' }}</p>
            <p><strong>Waktu Pengerjaan:</strong> {{ $ujian->waktu }} menit</p>
          </div>
          <div class="col-md-6">
            <p><strong>Bobot PG:</strong> {{ $ujian->bobot_pg }}%</p>
            <p><strong>Bobot Essay:</strong> {{ $ujian->bobot_essay }}%</p>
            <p><strong>Tanggal Terbit:</strong> {{ $ujian->tanggal_post->format('d M Y H:i') }}</p>
            <p><strong>Status Terbit:</strong> 
              <span class="badge badge-{{ $ujian->terbit ? 'success' : 'secondary' }}">
                {{ $ujian->terbit ? 'Terbit' : 'Belum Terbit' }}
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>

    {{-- Kelas yang Mengikuti --}}
    <div class="card mb-4">
      <div class="card-header">
        <h4>Kelas yang Mengikuti</h4>
      </div>
      <div class="card-body">
        @if($ujian->kelas->count())
        <div class="table-responsive">
          <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>Nama Kelas</th>
                <th>Deadline</th>
                <th>Status Terbit</th>
              </tr>
            </thead>
            <tbody>
              @foreach($ujian->kelas as $kelas)
              <tr>
                <td>{{ $kelas->nama_kelas}}{{ $kelas->tingkat}}</td>
                <td>{{ $kelas->pivot->deadline ? \Carbon\Carbon::parse($kelas->pivot->deadline)->format('d M Y H:i') : '-' }}</td>
                <td>
                  <span class="badge badge-{{ $kelas->pivot->terbit ? 'success' : 'secondary' }}">
                    {{ $kelas->pivot->terbit ? 'Terbit' : 'Belum Terbit' }}
                  </span>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
        @else
        <p class="text-muted">Tidak ada kelas yang ditugaskan.</p>
        @endif
      </div>
    </div>

    {{-- Soal Pilihan Ganda --}}
    <div class="card mb-4">
      <div class="card-header">
        <h4>Soal Pilihan Ganda</h4>
      </div>
      <div class="card-body">
        @forelse($ujian->soalPilgan as $index => $soal)
        <div class="mb-4">
          <strong>Soal {{ $index + 1 }}:</strong>
          <div class="mt-2">{!! $soal->pertanyaan !!}</div>
          <ul class="mt-2">
            <li>A. {{ $soal->opsi_a }}</li>
            <li>B. {{ $soal->opsi_b }}</li>
            <li>C. {{ $soal->opsi_c }}</li>
            <li>D. {{ $soal->opsi_d }}</li>
          </ul>
          <p><strong>Kunci Jawaban:</strong> {{ strtoupper($soal->kunci_jawaban) }}</p>
        </div>
        @empty
        <p class="text-muted">Tidak ada soal pilihan ganda.</p>
        @endforelse
      </div>
    </div>

    {{-- Soal Essay --}}
    <div class="card mb-5">
      <div class="card-header">
        <h4>Soal Essay</h4>
      </div>
      <div class="card-body">
        @forelse($ujian->soalEssay as $index => $soal)
        <div class="mb-4">
          <strong>Soal {{ $index + 1 }}:</strong>
          <div class="mt-2">{!! $soal->pertanyaan !!}</div>
        </div>
        @empty
        <p class="text-muted">Tidak ada soal essay.</p>
        @endforelse
      </div>
    </div>

  </div>
</section>
@endsection