{% extends "base.html" %}
{% block title %}İlk Kurulum — Bordrolarınız{% endblock %}
{% block icerik %}
<h1>Hangi bordroları kullanacaksınız?</h1>

<div class="panel">
  <p>Ödemeleriniz birden fazla müdürlük üzerinden yapılıyorsa <b>her müdürlük için
  ayrı bir bordro</b> açın. Aynı türden birden fazla bordro açabilirsiniz:
  kurum adı bordronun adında görünür ve bordronun üstünde basılır, hesap türü
  hesabın nasıl yapılacağını belirler.</p>
  <p style="color:#7a8699">Örnek: hesap türü <i>Usta Öğretici</i>, kurum adı
  <i>Temel Eğitim</i> → bordronun adı <b>Temel Eğitim — Usta Öğretici</b> olur ve
  usta öğretici kurallarıyla hesaplanır. Kurum adını boş bırakırsanız yalnız
  tür adı görünür. İmza bilgilerini ve eksik kalanları sonradan Ayarlar'dan
  tamamlayabilir, yeni bordro ekleyebilirsiniz.</p>

  <form method="post">
    <table class="liste" id="satirlar" style="max-width:720px">
      <tr><th style="width:40px">#</th><th>Kurum (Müdürlük) Adı</th><th>Hesap Türü</th></tr>
      {% for i in range(1, 4) %}
      <tr>
        <td>{{ i }}</td>
        <td><input name="ad_{{ i }}" placeholder="ör. Temel Eğitim" style="width:100%"></td>
        <td>
          <select name="statu_{{ i }}">
            <option value="">— seçilmedi —</option>
            {% for s, adi in STATULER.items() %}<option value="{{ s }}">{{ adi }}</option>{% endfor %}
          </select>
        </td>
      </tr>
      {% endfor %}
    </table>
    <p>
      <button type="button" class="ikincil" onclick="satirEkle()">+ Satır ekle</button>
      <button type="submit">✓ Bordroları Oluştur</button>
    </p>
  </form>
</div>

{% if var_mi %}
<p><a href="{{ url_for('anasayfa') }}">← Ana sayfaya dön</a></p>
{% endif %}
{% endblock %}

{% block script %}
<script>
let sonSira = 3;
function satirEkle() {
  if (sonSira >= 20) return;
  sonSira++;
  const tablo = document.getElementById('satirlar');
  const ornek = tablo.rows[tablo.rows.length - 1];
  const yeni = ornek.cloneNode(true);
  yeni.cells[0].textContent = sonSira;
  const ad = yeni.querySelector('input');
  ad.name = 'ad_' + sonSira; ad.value = '';
  const sec = yeni.querySelector('select');
  sec.name = 'statu_' + sonSira; sec.selectedIndex = 0;
  tablo.appendChild(yeni);
}
</script>
{% endblock %}