@extends('siswa.layouts.app')

@section('page_title', 'Mengerjakan Ujian')

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


  <div class="section-body" data-aos="fade-up" data-aos-delay="100">
    <form action="{{ route('siswa.ujian.submit', $ujian->id) }}" method="POST">
      @csrf

      <div class="mb-5">
        <h4 class="mb-4">Soal Pilihan Ganda</h4>
        @foreach ($ujian->soalPilgan as $soal)
          <div class="card card-info mb-4 shadow-sm">
            <div class="card-body">
              <p><strong>{{ $loop->iteration }}. {{ $soal->pertanyaan }}</strong></p>
              @foreach (['A', 'B', 'C', 'D'] as $opt)
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="pg[{{ $soal->id }}]" id="pg{{ $soal->id }}{{ $opt }}" value="{{ $opt }}">
                  <label class="form-check-label" for="pg{{ $soal->id }}{{ $opt }}">
                    {{ $soal->{'opsi_' . strtolower($opt)} }}
                  </label>
                </div>
              @endforeach
            </div>
          </div>
        @endforeach
      </div>

      <div class="mb-5">
        <h4 class="mb-4">Soal Essay</h4>
        @foreach ($ujian->soalEssay as $soal)
          <div class="card card-warning mb-4 shadow-sm">
            <div class="card-body">
              <p><strong>{{ $loop->iteration }}. {{ $soal->pertanyaan }}</strong></p>
              <textarea name="essay[{{ $soal->id }}]" class="form-control" rows="5" placeholder="Tuliskan jawaban Anda di sini..."></textarea>
            </div>
          </div>
        @endforeach
      </div>

      <button type="submit" class="btn btn-success btn-lg">
        <i class="bi bi-check-circle"></i> Kumpulkan Ujian
      </button>
    </form>
  </div>
</section>
@endsection