@extends('siswa.layouts.app')

@section('content')
<section class="section">
  <div class="section-header">
    <h1>Hasil Pilihan Mapel</h1>
    <div class="section-header-breadcrumb">
      <div class="breadcrumb-item active">
        <a href="{{ route('siswa.dashboard') }}">Dashboard</a>
      </div>
      <div class="breadcrumb-item">Hasil Angket</div>
    </div>
  </div>

  <div class="section-body">
    <div class="card">
      <div class="card-header">
        <h4>Isi Angket Pilihan Mapel</h4>
      </div>
      <div class="card-body">

        @if($angket)
        <div class="alert alert-warning">
          Anda sudah mengisi angket. Terima kasih!
        </div>
        @endif

        @if ($errors->any())
        <div class="alert alert-danger">
          <ul class="mb-0">
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
        @endif

        <form action="{{ route('siswa.angket.store') }}" method="POST" @if($angket) style="display:none;" @endif>
          @csrf

          {{-- Informasi Siswa --}}
          <div class="form-group">
            <label>Nama</label>
            <input type="text" class="form-control" value="{{ $siswa->nama }}" disabled>
          </div>
          <div class="form-group">
            <label>Jenis Kelamin</label>
            <input type="text" class="form-control" value="{{ $siswa->jenis_kelamin }}" disabled>
          </div>
          <div class="form-group">
            <label>Kelas</label>
            <input type="text" class="form-control" value="{{ $siswa->kelas->nama_kelas ?? '-' }}{{ $siswa->kelas->tingkat ?? '-' }}" disabled>
          </div>

          {{-- Cita-cita --}}
          <div class="form-group">
            <label for="cita_cita">Cita-cita</label>
            <textarea name="cita_cita" id="cita_cita" class="form-control" rows="3">{{ old('cita_cita') }}</textarea>
          </div>

          {{-- Rencana --}}
          <div class="form-group">
            <label for="rencana">Rencana Setelah Kuliah</label>
            <textarea name="rencana" id="rencana" class="form-control" rows="3">{{ old('rencana') }}</textarea>
          </div>

          {{-- Prodi --}}
          <div class="form-group">
            <label for="prodi_id">Pilih Prodi Lanjutan Jika Kuliah</label>
            <select name="prodi_id" id="prodi_id" class="form-control" required>
              <option value="">-- Pilih Prodi --</option>
              @foreach($prodis as $prodi)
              <option value="{{ $prodi->id }}" {{ old('prodi_id') == $prodi->id ? 'selected' : '' }}>
                {{ $prodi->nama }}
              </option>
              @endforeach
            </select>
          </div>

          {{-- Pilihan Paket Pertama --}}
          <div class="form-group">
            <label for="paket_pertama_id">Pilih Paket Mapel Pertama</label>
            <select name="paket_pertama_id" id="paket_pertama_id" class="form-control" required>
              <option value="">-- Pilih Paket Pertama --</option>
              @foreach($paketMapels as $paket)
              <option value="{{ $paket->id }}" {{ old('paket_pertama_id') == $paket->id ? 'selected' : '' }}>
                {{ $paket->nama_paket }}
              </option>
              @endforeach
            </select>
            <div id="mapel-paket-pertama" class="mt-2"></div>
          </div>

          {{-- Pilihan Paket Kedua --}}
          <div class="form-group">
            <label for="paket_kedua_id">Pilih Paket Mapel Kedua (Opsional)</label>
            <select name="paket_kedua_id" id="paket_kedua_id" class="form-control">
              <option value="">-- Pilih Paket Kedua --</option>
              @foreach($paketMapels as $paket)
              <option value="{{ $paket->id }}" {{ old('paket_kedua_id') == $paket->id ? 'selected' : '' }}>
                {{ $paket->nama_paket }}
              </option>
              @endforeach
            </select>
            <div id="mapel-paket-kedua" class="mt-2"></div>
          </div>

          {{-- Pilihan Paket Ketiga --}}
          <div class="form-group">
            <label for="paket_ketiga_id">Pilih Paket Mapel Ketiga (Opsional)</label>
            <select name="paket_ketiga_id" id="paket_ketiga_id" class="form-control">
              <option value="">-- Pilih Paket Ketiga --</option>
              @foreach($paketMapels as $paket)
              <option value="{{ $paket->id }}" {{ old('paket_ketiga_id') == $paket->id ? 'selected' : '' }}>
                {{ $paket->nama_paket }}
              </option>
              @endforeach
            </select>
            <div id="mapel-paket-ketiga" class="mt-2"></div>
          </div>

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

<script>
  const paketMapels = @json($paketMapels->load('mapels'));

  function setupPaketListener(selectId, mapelDivId) {
    const select = document.getElementById(selectId);
    const mapelDiv = document.getElementById(mapelDivId);

    select.addEventListener('change', function () {
      const paketId = this.value;
      const paket = paketMapels.find(p => p.id == paketId);

      if (paket) {
        let html = '<h6 class="mt-2">Mata Pelajaran dalam ' + paket.nama_paket + '</h6><ul class="list-group">';
        paket.mapels.forEach(mapel => {
          html += '<li class="list-group-item">' + mapel.nama_mapel + '</li>';
        });
        html += '</ul>';
        mapelDiv.innerHTML = html;
      } else {
        mapelDiv.innerHTML = '';
      }

      disableSelectedOptions();
    });

    if (select.value) {
      select.dispatchEvent(new Event('change'));
    }
  }

  function disableSelectedOptions() {
    const selects = [
      document.getElementById('paket_pertama_id'),
      document.getElementById('paket_kedua_id'),
      document.getElementById('paket_ketiga_id')
    ];

    const selectedValues = selects.map(select => select.value);

    selects.forEach(currentSelect => {
      const currentValue = currentSelect.value;
      [...currentSelect.options].forEach(option => {
        if (
          option.value !== "" &&
          option.value !== currentValue &&
          selectedValues.includes(option.value)
        ) {
          option.disabled = true;
        } else {
          option.disabled = false;
        }
      });
    });
  }

  setupPaketListener('paket_pertama_id', 'mapel-paket-pertama');
  setupPaketListener('paket_kedua_id', 'mapel-paket-kedua');
  setupPaketListener('paket_ketiga_id', 'mapel-paket-ketiga');
</script>

@endsection