{% extends "base.html" %}
{% block title %}Raspored časova — Idriz Admin{% endblock %}
{% block extra_css %}
  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; max-width: 720px; }
  .panel h2 { margin: 0 0 4px; font-size: 15px; }
  .panel p.hint { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; }
  table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; max-width: 720px; margin-bottom: 20px; }
  th, td { text-align: left; padding: 10px 14px; font-size: 14px; }
  th { background: #fafbfc; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
  tr:not(:last-child) td { border-bottom: 1px solid var(--line); }
  a.edit { color: var(--accent); text-decoration: none; font-weight: 600; }
  input[type=text], textarea { width: 100%; padding: 9px 12px; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; }
  textarea { min-height: 120px; }
  .row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
  .row > div { flex: 1; min-width: 140px; }
  label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
  button { padding: 9px 18px; font-size: 14px; font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 8px; cursor: pointer; }
  button:hover { filter: brightness(1.05); }
  button.small { padding: 5px 10px; font-size: 12.5px; }
  button.danger { background: var(--bad); }
  .badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:12.5px; font-weight:600; }
  .b1 { background:#e6f0ff; color:#2f6df6; } .b2 { background:#fdf1dd; color:#c9820a; }
  .muted { color: var(--muted); }
  .empty { color: var(--muted); font-style: italic; }
{% endblock %}
{% block content %}
  <h1>Raspored časova</h1>
  <p class="sub">Djeca, smjene i raspored. Smjena se mijenja sedmično — postavi je jednim datumom po djetetu.</p>

  {% if djeca %}
  <table>
    <thead><tr><th>Dijete</th><th>Razred</th><th>Smjena danas</th><th>Časova</th><th></th><th></th></tr></thead>
    <tbody>
      {% for d in djeca %}
      <tr>
        <td><strong>{{ d.ime }}</strong></td>
        <td>{{ d.razred or "—" }}</td>
        <td>
          {% if d.smjena_danas %}<span class="badge b{{ d.smjena_danas }}">{{ d.smjena_danas }}. smjena</span>
          {% else %}<span class="muted">nema smjene</span>{% endif %}
        </td>
        <td>{{ d.broj_casova }}</td>
        <td><a class="edit" href="{{ url_for('raspored.dijete', ime=d.ime) }}">Uredi ›</a></td>
        <td>
          <form method="post" onsubmit="return confirm('Obrisati {{ d.ime }}?');" style="margin:0;">
            <input type="hidden" name="action" value="delete"><input type="hidden" name="ime" value="{{ d.ime }}">
            <button type="submit" class="small danger">Obriši</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="empty">Još nema dodane djece.</p>
  {% endif %}

  <div class="panel">
    <h2>Dodaj dijete</h2>
    <form method="post" class="row">
      <input type="hidden" name="action" value="add">
      <div><label>Ime</label><input type="text" name="ime" placeholder="npr. Ahmed"></div>
      <div><label>Razred</label><input type="text" name="razred" placeholder="npr. VI-4"></div>
      <div style="flex:0;"><button type="submit">Dodaj</button></div>
    </form>
  </div>

  <div class="panel">
    <h2>Uvoz CSV-a</h2>
    <p class="hint">Kolone: dijete, razred, smjena, dan, redni_broj_casa, pocetak, kraj, predmet. Zamjenjuje raspored za djecu iz fajla; smjenu/datum postavi ručno po uvozu.</p>
    <form method="post" enctype="multipart/form-data">
      <input type="hidden" name="action" value="csv">
      <input type="file" name="csvfile" accept=".csv,text/csv" style="margin-bottom:10px;">
      <p class="hint">ili zalijepi CSV ovdje:</p>
      <textarea name="csvtext" placeholder="dijete,razred,smjena,dan,redni_broj_casa,pocetak,kraj,predmet&#10;..."></textarea>
      <div style="margin-top:12px;"><button type="submit">Uvezi</button></div>
    </form>
  </div>
{% endblock %}