{% extends "base.html" %}
{% block title %}Ders Programı — {{ bordro_adi(bt) }}{% endblock %}
{% block icerik %}
<h1>{{ bordro_adi(bt) }} — Haftalık Ders Programı</h1>

<p style="color:#7a8699;max-width:900px">
  Kişinin haftada hangi gün kaç saat ders okuttuğunu bir kez tanımlayın; puantaj
  sayfasındaki <b>🗓 Ders Programından Doldur</b> düğmesi ayın tamamını bu
  programa göre doldurur. Resmî tatil günleri atlanır. Boş bıraktığınız gün
  "ders yok" demektir. Program değişirse burayı güncellemeniz yeterli.
</p>

<form method="post">
{# Puantajdaki desenin aynısı: arama, sıra no, programı olmayan kişinin
   belirginleşmesi, imlecin bulunduğu satırın vurgulanması. #}
<div class="kaydet-cubugu">
  <input type="search" id="prog-ara" class="ara-kutu" placeholder="🔍 Kişi ara…"
         oninput="progFiltrele()" aria-label="Kişi ara">
  <span id="prog-ara-sonuc" style="color:#7a8699"></span>
</div>

<div id="prog-uyari" class="uyari" style="display:none"></div>

<div class="puantaj-sarici">
<table class="puantaj" id="prog-izgara">
  <tr>
    <th class="sira-baslik">#</th>
    <th class="ad-baslik">Adı Soyadı</th><th class="tur-baslik">Ders Türü</th>
    {% for g, adi in GUNLER %}
    <th class="{% if g >= 6 %}haftasonu{% endif %}">{{ adi }}</th>
    {% endfor %}
    <th>Haftalık<br>Toplam</th>
  </tr>
  {% for s in satirlar %}
    {% set kisi_sira = loop.index %}
    {% for kod, adi in s.turler %}
    <tr data-pid="{{ s.p.id }}">
      {% if loop.first %}
      <td class="sira-hucre" rowspan="{{ s.turler | length }}">{{ kisi_sira }}</td>
      <td class="ad-hucre" rowspan="{{ s.turler | length }}">{{ s.p.ad }} {{ s.p.soyad }}</td>
      {% endif %}
      <td class="tur-hucre">{{ adi }}</td>
      {% for g, gadi in GUNLER %}
      <td class="{% if g >= 6 %}haftasonu-h{% endif %}">
        <input class="saat prog" name="p{{ s.p.id }}_{{ kod }}_{{ g }}"
               maxlength="4" aria-label="{{ s.p.ad }} {{ adi }} {{ gadi }}"
               value="{{ s.hucreler.get((kod, g), '') or '' }}">
      </td>
      {% endfor %}
      <td class="toplam satir-toplam">0</td>
    </tr>
    {% endfor %}
  {% endfor %}
  {% if satirlar %}
  <tr class="genel-toplam-satiri">
    <td class="sira-hucre"></td>
    <td class="ad-hucre" id="prog-genel-kisi">TOPLAM</td>
    <td class="tur-hucre"></td>
    {% for g, gadi in GUNLER %}<td class="{% if g >= 6 %}haftasonu-h{% endif %}"></td>{% endfor %}
    <td class="toplam" id="prog-genel-saat">0</td>
  </tr>
  {% endif %}
</table>
</div>

{% if satirlar %}
<div class="kaydet-cubugu">
  <button type="submit">💾 Ders Programını Kaydet</button>
  <a class="dugme ikincil" href="{{ url_for('puantaj', bid=bt.id, yil=yil, ay=ay) }}">
    🗓 Puantaja dön</a>
</div>
{% else %}
<p>Ders türü seçili aktif kişi yok.
  <a href="{{ url_for('personel', bid=bt.id, yil=yil, ay=ay) }}">Kişiler sayfasına git</a></p>
{% endif %}
</form>
{% endblock %}

{% block script %}
<script>
/* Haftalık toplam canlı güncellenir — mutemet "bu kişi haftada kaç saat?"
   sorusunu tabloyu terk etmeden görebilsin. */
function satirToplam(tr) {
  let t = 0;
  tr.querySelectorAll('input.prog').forEach(i => {
    const v = parseFloat(i.value.replace(',', '.'));
    if (!isNaN(v)) t += v;
  });
  tr.querySelector('.satir-toplam').textContent = (t % 1 === 0) ? t : t.toFixed(1);
  programsizIsaretle(tr.dataset.pid);
  genelToplam();
}

/** İmlecin bulunduğu KİŞİNİN tüm satırları vurgulanır (puantajdaki gibi). */
function etkinKisi(pid) {
  document.querySelectorAll('#prog-izgara tr.etkin').forEach(tr => tr.classList.remove('etkin'));
  if (!pid) return;
  document.querySelectorAll(`#prog-izgara tr[data-pid="${pid}"]`)
    .forEach(tr => tr.classList.add('etkin'));
}

/** Ders programı tanımlanmamış kişinin adı belirgin olur.
    Bu kişiler puantajdaki "Ders Programından Doldur" işleminde atlanıyor —
    eksikliğin burada görünmesi gerekiyor. */
function programsizIsaretle(pid) {
  if (!pid) return;
  const satirlar = document.querySelectorAll(`#prog-izgara tr[data-pid="${pid}"]`);
  let dolu = false;
  satirlar.forEach(tr => tr.querySelectorAll('input.prog').forEach(i => {
    if (i.value.trim() !== '') dolu = true;
  }));
  satirlar.forEach(tr => tr.classList.toggle('bos-kisi', !dolu));
}

/** Programsız kişi sayısı + haftalık genel toplam. */
function genelToplam() {
  const pidler = [...new Set([...document.querySelectorAll('#prog-izgara tr[data-pid]')]
                    .map(tr => tr.dataset.pid))];
  let saat = 0;
  document.querySelectorAll('#prog-izgara tr[data-pid] td.satir-toplam').forEach(td => {
    const v = parseFloat(td.textContent.replace(',', '.'));
    if (!isNaN(v)) saat += v;
  });
  const kh = document.getElementById('prog-genel-kisi');
  if (kh) kh.textContent = `TOPLAM (${pidler.length} kişi)`;
  const sh = document.getElementById('prog-genel-saat');
  if (sh) sh.textContent = (saat % 1 === 0) ? saat : saat.toFixed(1);

  const programsiz = pidler.filter(p =>
    document.querySelector(`#prog-izgara tr[data-pid="${p}"]`).classList.contains('bos-kisi'));
  const u = document.getElementById('prog-uyari');
  if (programsiz.length) {
    u.textContent = `${programsiz.length} kişinin haftalık ders programı tanımlı değil — ` +
      'puantajdaki "Ders Programından Doldur" bu kişileri atlar.';
    u.style.display = '';
  } else {
    u.style.display = 'none';
  }
}

/** Ada göre süzme (puantajdaki arama ile aynı). */
function progFiltrele() {
  const q = (document.getElementById('prog-ara').value || '').toLocaleLowerCase('tr').trim();
  const gizli = new Set();
  document.querySelectorAll('#prog-izgara td.ad-hucre').forEach(td => {
    const tr = td.closest('tr');
    if (!tr.dataset.pid) return;
    if (q && !td.textContent.trim().toLocaleLowerCase('tr').includes(q)) {
      gizli.add(tr.dataset.pid);
    }
  });
  let gorunen = 0;
  const pidler = new Set();
  document.querySelectorAll('#prog-izgara tr[data-pid]').forEach(tr => {
    const gizliMi = gizli.has(tr.dataset.pid);
    tr.style.display = gizliMi ? 'none' : '';
    if (!gizliMi) pidler.add(tr.dataset.pid);
  });
  gorunen = pidler.size;
  const toplamKisi = new Set([...document.querySelectorAll('#prog-izgara tr[data-pid]')]
                       .map(tr => tr.dataset.pid)).size;
  document.getElementById('prog-ara-sonuc').textContent =
    q ? `${gorunen} / ${toplamKisi} kişi` : '';
}

document.querySelectorAll('#prog-izgara tr[data-pid]').forEach(tr => {
  satirToplam(tr);
  tr.querySelectorAll('input.prog').forEach(inp => {
    inp.addEventListener('input', () => {
      const v = inp.value.trim().replace(',', '.');
      if (v !== '' && isNaN(parseFloat(v))) { inp.value = ''; return; }
      satirToplam(tr);
    });
    inp.addEventListener('focus', () => etkinKisi(tr.dataset.pid));
    inp.addEventListener('blur', () => etkinKisi(null));
  });
});
genelToplam();
</script>
{% endblock %}