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

<div class="card-body">

  @if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
      <div class="fw-bold mb-1"><i class="fa fa-exclamation-triangle me-1"></i> GAGAL MENYIMPAN!</div>
      <ul class="mb-0 ps-3">
        @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif

  <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>

  <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>

  <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');

  const oldRombelId = "{{ old('rombel_id', $kela->rombel_id ?? '') }}";
  
  let initLevel = "";
  let initHuruf = "";
  let initJenkel = "";

  if (oldRombelId) {
      const matchRombel = rombels.find(r => r.id == oldRombelId);
      if (matchRombel) {
          initLevel  = matchRombel.level_kelas_id;
          initHuruf  = matchRombel.rombel.toString().trim();
          initJenkel = matchRombel.jenkel.toString().trim().toUpperCase();
      }
  }

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

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

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

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

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

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

    const uniqueJenkels = [...new Set(filtered.map(r => r.jenkel.toString().trim().toUpperCase()))];

    uniqueJenkels.forEach(j => {
      const label = (j === 'L') ? 'Putra' : (j === 'P' ? 'Putri' : j);
      jenkelSelect.innerHTML += `<option value="${j}">${label}</option>`;
    });

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

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

        rombelId.value = match ? match.id : '';
    }
  });

  document.addEventListener("DOMContentLoaded", function() {
      if (initLevel) {
          levelSelect.value = initLevel;
          levelSelect.dispatchEvent(new Event('change'));

          if (initHuruf) {
              rombelSelect.value = initHuruf;
              rombelSelect.dispatchEvent(new Event('change'));

              if (initJenkel) {
                  jenkelSelect.value = initJenkel;
                  jenkelSelect.dispatchEvent(new Event('change'));
              }
          }
      }
      
      if (oldRombelId) {
          rombelId.value = oldRombelId;
      }
  });
</script>
@endpush