{{-- resources/views/admin/akademik/kelas/_form.blade.php --}}
@csrf

<div class="card-body">

  {{-- TAHUN AKADEMIK --}}
  <div class="row">
    <div class="col-md-4 mb-3">
      <label class="form-label">Angkatan <span class="text-danger">*</span></label>
      <select class="form-select" name="angkatan_id" required>
        <option value="" disabled selected>-- Pilih Angkatan --</option>
        @foreach($masterData['angkatans'] as $angkatan)
          <option value="{{ $angkatan->id }}"
            {{ old('angkatan_id', $kela->angkatan_id ?? null) == $angkatan->id ? 'selected' : '' }}>
            {{ $angkatan->tahun_masuk }}
          </option>
        @endforeach
      </select>
    </div>

    <div class="col-md-4 mb-3">
      <label class="form-label">Tahun Ajaran <span class="text-danger">*</span></label>
      <select class="form-select" name="tahun_ajaran_id" required>
        <option value="" disabled selected>-- Pilih Tahun Ajaran --</option>
        @foreach($masterData['tahunAjarans'] as $ta)
          <option value="{{ $ta->id }}"
            {{ old('tahun_ajaran_id', $kela->tahun_ajaran_id ?? null) == $ta->id ? 'selected' : '' }}>
            {{ $ta->tahun_ajaran }}
          </option>
        @endforeach
      </select>
    </div>

    <div class="col-md-4 mb-3">
      <label class="form-label">Semester <span class="text-danger">*</span></label>
      <select class="form-select" name="semester_id" required>
        @foreach($masterData['semesters'] as $semester)
          <option value="{{ $semester->id }}"
            {{ old('semester_id', $kela->semester_id ?? null) == $semester->id ? 'selected' : '' }}>
            {{ $semester->semester }}
          </option>
        @endforeach
      </select>
    </div>
  </div>

  <hr>

  {{-- ROMBEL DINAMIS --}}
  <div class="row">

    <div class="col-md-4 mb-3">
      <label class="form-label">Kelas <span class="text-danger">*</span></label>
      <select class="form-select" id="level_kelas">
        <option value="" disabled selected>-- Pilih Kelas --</option>
        @foreach($masterData['rombels']->pluck('levelKelas')->unique('id') as $lk)
          <option value="{{ $lk->id }}">{{ $lk->level_kelas }}</option>
        @endforeach
      </select>
    </div>

    <div class="col-md-4 mb-3">
      <label class="form-label">Rombel <span class="text-danger">*</span></label>
      <select class="form-select" id="rombel_huruf" disabled>
        <option value="">-- Pilih Rombel --</option>
      </select>
    </div>

    <div class="col-md-4 mb-3">
      <label class="form-label">Gender <span class="text-danger">*</span></label>
      <select class="form-select" id="jenkel" disabled>
        <option value="">-- Pilih Gender --</option>
      </select>
    </div>

  </div>

  <input type="hidden" name="rombel_id" id="rombel_id"
         value="{{ old('rombel_id', $kela->rombel_id ?? '') }}">

  <hr>

  {{-- WALI KELAS--}}
  <div class="row">
    <div class="col-md-12 mb-3">
      <label class="form-label">Wali Kelas</label>
      <select class="form-select" name="guru_id">
        <option value="">-- Tidak Ada Wali Kelas --</option>
        @foreach($masterData['gurus'] as $guru)
          <option value="{{ $guru->id }}"
            {{ old('guru_id', $kela->guru_id ?? null) == $guru->id ? 'selected' : '' }}>
            {{ $guru->name }}
          </option>
        @endforeach
      </select>
    </div>
  </div>

</div>

<div class="card-footer text-end">
  <a href="{{ route('admin.kelas.index') }}" class="btn btn-secondary btn-round">
    Batal
  </a>
  <button type="submit" class="btn btn-primary btn-round">
    Simpan Kelas
  </button>
</div>

@push('scripts')
<script>
  const rombels = @json($masterData['rombels']);

  const levelSelect  = document.getElementById('level_kelas');
  const rombelSelect = document.getElementById('rombel_huruf');
  const jenkelSelect = document.getElementById('jenkel');
  const rombelId     = document.getElementById('rombel_id');

  levelSelect.addEventListener('change', () => {
    rombelSelect.innerHTML = '<option value="">-- Pilih Rombel --</option>';
    jenkelSelect.innerHTML = '<option value="">-- Pilih Gender --</option>';
    rombelSelect.disabled = true;
    jenkelSelect.disabled = true;
    rombelId.value = '';

    const filtered = rombels.filter(r => r.level_kelas_id == levelSelect.value);
    const hurufs = [...new Set(filtered.map(r => r.rombel))];

    hurufs.forEach(h => {
      rombelSelect.innerHTML += `<option value="${h}">${h}</option>`;
    });

    if (hurufs.length) rombelSelect.disabled = false;
  });

  rombelSelect.addEventListener('change', () => {
    jenkelSelect.innerHTML = '<option value="">-- Pilih Gender --</option>';
    jenkelSelect.disabled = true;
    rombelId.value = '';

    const filtered = rombels.filter(r =>
      r.level_kelas_id == levelSelect.value &&
      r.rombel == rombelSelect.value
    );

    filtered.forEach(r => {
      jenkelSelect.innerHTML += `
        <option value="${r.jenkel}">
          ${r.jenkel === 'L' ? 'Putra' : 'Putri'}
        </option>`;
    });

    if (filtered.length) jenkelSelect.disabled = false;
  });

  jenkelSelect.addEventListener('change', () => {
    const match = rombels.find(r =>
      r.level_kelas_id == levelSelect.value &&
      r.rombel == rombelSelect.value &&
      r.jenkel == jenkelSelect.value
    );

    rombelId.value = match ? match.id : '';
  });
</script>
@endpush