@extends('guru.layouts.app')

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

@section('content')
<section class="section">
  <div class="section-header">
    <h1>Tambah 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">Tambah</div>
    </div>
  </div>

  <div class="section-body">
    <div class="card">
      <div class="card-header">
        <h4>Form Tambah Ujian</h4>
      </div>
      <div class="card-body">
        <form action="{{ route('guru.ujian.store') }}" method="POST">
          @csrf

          <div class="form-group">
            <label for="mapel_id">Mata Pelajaran</label>
            <select name="mapel_id" id="mapel_id" class="form-control" required>
              <option value="">-- Pilih Mapel --</option>
              @foreach ($mapels as $mapel)
                <option value="{{ $mapel->id }}" {{ old('mapel_id') == $mapel->id ? 'selected' : '' }}>
                  {{ $mapel->nama_mapel }}
                </option>
              @endforeach
            </select>
          </div>

          <div class="form-group">
            <label for="judul">Judul Ujian</label>
            <input type="text" name="judul" id="judul" class="form-control" value="{{ old('judul') }}" required>
          </div>

          <div class="form-group">
            <label for="waktu">Waktu Ujian (menit)</label>
            <input type="number" name="waktu" id="waktu" class="form-control" value="{{ old('waktu') }}" required min="1">
          </div>

          <div class="form-group">
            <label for="soal">Nama Soal</label>
            <input type="text" name="soal" id="soal" class="form-control" value="{{ old('soal') }}">
          </div>

          <div class="form-group">
            <label for="terbit">Terbitkan Secara Umum?</label>
            <select name="terbit" id="terbit" class="form-control" required>
              <option value="1" {{ old('terbit') == '1' ? 'selected' : '' }}>Ya</option>
              <option value="0" {{ old('terbit', '0') == '0' ? 'selected' : '' }}>Tidak</option>
            </select>
          </div>

          <div class="form-group">
            <label for="bobot_pg">Bobot Pilihan Ganda (%)</label>
            <input type="number" name="bobot_pg" id="bobot_pg" class="form-control" value="{{ old('bobot_pg', 0) }}" required min="0" max="100">
          </div>

          <div class="form-group">
            <label for="bobot_essay">Bobot Essay (%)</label>
            <input type="number" name="bobot_essay" id="bobot_essay" class="form-control" value="{{ old('bobot_essay', 0) }}" required min="0" max="100">
          </div>

          <div class="form-group">
            <label><strong>Pilih Kelas, Deadline, dan Terbitkan per Kelas</strong></label>
            <div class="row">
              @foreach ($kelas as $item)
                <div class="col-md-4 mb-3">
                  <div class="border rounded p-3" id="kelas-card-{{ $item->id }}">
                    <div class="form-check">
                      <input
                        type="checkbox"
                        class="form-check-input kelas-checkbox"
                        id="kelas_{{ $item->id }}"
                        name="kelas[{{ $item->id }}][selected]"
                        value="1"
                        {{ old('kelas.'.$item->id.'.selected') ? 'checked' : '' }}
                      >
                      <label class="form-check-label font-weight-bold" for="kelas_{{ $item->id }}">
                        {{ $item->nama_kelas }} {{ $item->tingkat }}
                      </label>
                    </div>

                    <div class="mt-2">
                      <label for="deadline_{{ $item->id }}" class="form-label">Deadline</label>
                      <input
                        type="date"
                        name="kelas[{{ $item->id }}][deadline]"
                        class="form-control form-control-sm"
                        id="deadline_{{ $item->id }}"
                        value="{{ old('kelas.'.$item->id.'.deadline') }}"
                        {{ old('kelas.'.$item->id.'.selected') ? '' : 'disabled' }}
                      >
                    </div>

                    <div class="form-check mt-2">
                      <input
                        type="checkbox"
                        class="form-check-input terbit-checkbox"
                        id="terbit_{{ $item->id }}"
                        name="kelas[{{ $item->id }}][terbit]"
                        value="1"
                        {{ old('kelas.'.$item->id.'.terbit') ? 'checked' : '' }}
                        {{ old('kelas.'.$item->id.'.selected') ? '' : 'disabled' }}
                      >
                      <label class="form-check-label" for="terbit_{{ $item->id }}">
                        Terbitkan?
                      </label>
                    </div>
                  </div>
                </div>
              @endforeach
            </div>
          </div>

          <button type="submit" class="btn btn-primary">Simpan</button>
        </form>
      </div>
    </div>
  </div>
</section>
@endsection

@push('scripts')
<script>
  document.querySelectorAll('.kelas-checkbox').forEach(checkbox => {
    checkbox.addEventListener('change', function () {
      const card = this.closest('.border.rounded.p-3');
      const deadlineInput = card.querySelector('input[type="date"]');
      const terbitCheckbox = card.querySelector('.terbit-checkbox');

      if (this.checked) {
        deadlineInput.removeAttribute('disabled');
        deadlineInput.setAttribute('required', true);
        terbitCheckbox.removeAttribute('disabled');
      } else {
        deadlineInput.value = '';
        deadlineInput.setAttribute('disabled', true);
        deadlineInput.removeAttribute('required');
        terbitCheckbox.checked = false;
        terbitCheckbox.setAttribute('disabled', true);
      }
    });
  });
</script>
@endpush