@extends('guru.layouts.app')

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

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

  <div class="section-body">
    <div class="card">
      <div class="card-header">
        <h4>Form Edit Ujian</h4>
      </div>
      <div class="card-body">
        <form action="{{ route('guru.ujian.update', $ujian->id) }}" method="POST">
          @csrf
          @method('PUT')

          <div class="row">
            <div class="form-group col-md-6">
              <label for="judul">Judul Ujian</label>
              <input type="text" name="judul" class="form-control" value="{{ old('judul', $ujian->judul) }}" required>
            </div>
            <div class="form-group col-md-6">
              <label for="tanggal_post">Tanggal Posting</label>
              <input type="date" name="tanggal_post" class="form-control" value="{{ old('tanggal_post', $ujian->tanggal_post->format('Y-m-d')) }}" required>
            </div>
            <div class="form-group col-md-4">
              <label for="waktu">Waktu Ujian (Menit)</label>
              <input type="number" name="waktu" class="form-control" value="{{ old('waktu', $ujian->waktu) }}" required>
            </div>
            <div class="form-group col-md-4">
              <label for="bobot_pg">Bobot PG (%)</label>
              <input type="number" name="bobot_pg" class="form-control" value="{{ old('bobot_pg', $ujian->bobot_pg) }}" required>
            </div>
            <div class="form-group col-md-4">
              <label for="bobot_essay">Bobot Essay (%)</label>
              <input type="number" name="bobot_essay" class="form-control" value="{{ old('bobot_essay', $ujian->bobot_essay) }}" required>
            </div>
            <div class="form-group col-md-6">
              <label for="soal">Nama Soal</label>
              <input type="text" name="soal" class="form-control" value="{{ old('soal', $ujian->soal) }}" required>
            </div>
            <div class="form-group col-md-6">
              <label for="terbit">Status Terbit</label>
              <select name="terbit" class="form-control" required>
                <option value="1" {{ old('terbit', $ujian->terbit) == 1 ? 'selected' : '' }}>Terbit</option>
                <option value="0" {{ old('terbit', $ujian->terbit) == 0 ? 'selected' : '' }}>Belum Terbit</option>
              </select>
            </div>
          </div>

          <hr>
          <h5 class="mb-3">Kelas yang Ditugaskan</h5>

          @php $kelasUjian = $ujian->kelas->keyBy('id'); @endphp

          @foreach ($kelas as $item)
          @php
            $related = $kelasUjian->has($item->id);
            $deadline = $related ? old("kelas.$item->id.deadline", optional($kelasUjian[$item->id]->pivot)->deadline) : '';
            $terbitKelas = $related ? old("kelas.$item->id.terbit", optional($kelasUjian[$item->id]->pivot)->terbit) : false;
          @endphp
          <div class="border p-3 rounded mb-3">
            <div class="form-row align-items-center">
              <div class="form-group col-md-4 mb-0">
                <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input kelas-checkbox" id="kelas{{ $item->id }}"
                         name="kelas[{{ $item->id }}][id]" value="{{ $item->id }}" {{ $related ? 'checked' : '' }}>
                  <label class="custom-control-label" for="kelas{{ $item->id }}">{{ $item->nama_kelas }} (Tingkat {{ $item->tingkat }})</label>
                </div>
              </div>
              <div class="form-group col-md-4 mb-0">
                <input type="date" name="kelas[{{ $item->id }}][deadline]"
                       class="form-control" value="{{ $deadline }}" {{ $related ? '' : 'disabled' }}>
              </div>
              <div class="form-group col-md-4 mb-0">
                <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input terbit-checkbox" id="terbit{{ $item->id }}"
                         name="kelas[{{ $item->id }}][terbit]" value="1"
                         {{ $terbitKelas ? 'checked' : '' }} {{ $related ? '' : 'disabled' }}>
                  <label class="custom-control-label" for="terbit{{ $item->id }}">Terbitkan untuk kelas ini</label>
                </div>
              </div>
            </div>
          </div>
          @endforeach

          <div class="form-group mt-4">
            <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Simpan Perubahan</button>
            <a href="{{ route('guru.ujian.index') }}" class="btn btn-secondary">Batal</a>
          </div>

        </form>
      </div>
    </div>
  </div>
</section>

@push('scripts')
<script>
  document.querySelectorAll('.kelas-checkbox').forEach(checkbox => {
    checkbox.addEventListener('change', function () {
      const parent = this.closest('.form-row');
      const deadline = parent.querySelector('input[type="date"]');
      const terbit = parent.querySelector('.terbit-checkbox');

      if (this.checked) {
        deadline.removeAttribute('disabled');
        deadline.required = true;
        terbit.removeAttribute('disabled');
      } else {
        deadline.value = '';
        deadline.setAttribute('disabled', true);
        deadline.required = false;
        terbit.checked = false;
        terbit.setAttribute('disabled', true);
      }
    });
  });

  window.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.kelas-checkbox').forEach(cb => cb.dispatchEvent(new Event('change')));
  });
</script>
@endpush
@endsection