{% extends "base.html" %}
{% block title %}{{ ime }} — Raspored — 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: 900px; }
  .panel h2 { margin: 0 0 12px; font-size: 15px; }
  .row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
  .row > div { flex: 0 0 auto; }
  label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
  input, select { padding: 8px 10px; font-size: 14px; border: 1px solid var(--line); border-radius: 7px; font-family: inherit; background:#fff; color:var(--ink); }
  input[type=text], input[type=date] { min-width: 150px; }
  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); }
  a.back { color: var(--muted); text-decoration: none; font-size: 13px; }
  table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  th, td { padding: 5px 7px; text-align: left; }
  th { color: var(--muted); font-weight: 600; font-size: 12px; border-bottom: 1px solid var(--line); }
  td input[type=text], td input[type=time] { min-width: 0; width: 100%; }
  .c-sm { width: 70px; } .c-dan { width: 130px; } .c-br { width: 55px; } .c-vr { width: 105px; } .c-del { width: 40px; text-align:center; }
  .predmet input { width: 100%; }
  .scroll { overflow-x: auto; }
{% endblock %}
{% block content %}
  <a class="back" href="{{ url_for('raspored.index') }}">‹ Nazad na djecu</a>
  <h1>{{ ime }}</h1>
  <p class="sub">Uređivanje osnovnih podataka i rasporeda.</p>

  <div class="panel">
    <h2>Osnovno i smjena</h2>
    <form method="post" class="row">
      <input type="hidden" name="action" value="osnovno">
      <div><label>Razred</label><input type="text" name="razred" value="{{ dijete.razred }}"></div>
      <div><label>Datum (referentni)</label><input type="date" name="sidro_datum" value="{{ dijete.sidro.datum if dijete.sidro else '' }}"></div>
      <div><label>Smjena tog datuma</label>
        <select name="sidro_smjena">
          <option value="1" {{ 'selected' if dijete.sidro and dijete.sidro.smjena == 1 else '' }}>1. smjena</option>
          <option value="2" {{ 'selected' if dijete.sidro and dijete.sidro.smjena == 2 else '' }}>2. smjena</option>
        </select>
      </div>
      <div><label>&nbsp;</label><button type="submit">Sačuvaj</button></div>
    </form>
    <p class="sub" style="margin-top:10px;">Iz tog jednog datuma se računa smjena za svaki dan (mijenja se sedmično).</p>
  </div>

  <div class="panel">
    <h2>Raspored (uredi, dodaj, obriši)</h2>
    <form method="post">
      <input type="hidden" name="action" value="raspored">
      <input type="hidden" name="nrows" value="{{ nrows }}">
      <div class="scroll">
      <table>
        <thead><tr><th class="c-sm">Smjena</th><th class="c-dan">Dan</th><th class="c-br">Br.</th><th class="c-vr">Početak</th><th class="c-vr">Kraj</th><th class="predmet">Predmet</th><th class="c-del">Obriši</th></tr></thead>
        <tbody>
          {% for r in grid %}
          {% set i = loop.index0 %}
          <tr>
            <td class="c-sm"><select name="r{{ i }}_smjena">
              <option value="1" {{ 'selected' if r.smjena == 1 else '' }}>1</option>
              <option value="2" {{ 'selected' if r.smjena == 2 else '' }}>2</option>
            </select></td>
            <td class="c-dan"><select name="r{{ i }}_dan">
              <option value="" {{ 'selected' if not r.dan else '' }}>—</option>
              {% for d in dani %}<option value="{{ d }}" {{ 'selected' if r.dan == d else '' }}>{{ d }}</option>{% endfor %}
            </select></td>
            <td class="c-br"><input type="text" name="r{{ i }}_br" value="{{ r.br if r.br is defined else '' }}"></td>
            <td class="c-vr"><input type="time" name="r{{ i }}_pocetak" value="{{ r.pocetak if r.pocetak is defined else '' }}"></td>
            <td class="c-vr"><input type="time" name="r{{ i }}_kraj" value="{{ r.kraj if r.kraj is defined else '' }}"></td>
            <td class="predmet"><input type="text" name="r{{ i }}_predmet" value="{{ r.predmet if r.predmet is defined else '' }}"></td>
            <td class="c-del"><input type="checkbox" name="r{{ i }}_del"></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      </div>
      <div style="margin-top:14px;"><button type="submit">Sačuvaj raspored</button></div>
    </form>
    <p class="sub" style="margin-top:10px;">Prazni redovi na dnu su za dodavanje novih časova. Za brisanje označi "Obriši" pa Sačuvaj.</p>
  </div>

  <div class="panel">
    <h2>Vannastavne aktivnosti (treninzi, mekteb...)</h2>
    <p class="sub" style="margin:-6px 0 12px;">Fiksno vrijeme, ponavljaju se sedmično, nisu vezane za smjenu — mogu biti i vikendom.</p>
    <form method="post">
      <input type="hidden" name="action" value="aktivnosti">
      <input type="hidden" name="anrows" value="{{ anrows }}">
      <div class="scroll">
      <table>
        <thead><tr><th class="c-dan">Dan</th><th class="c-vr">Početak</th><th class="c-vr">Kraj</th><th class="predmet">Naziv</th><th class="c-del">Obriši</th></tr></thead>
        <tbody>
          {% for a in agrid %}
          {% set i = loop.index0 %}
          <tr>
            <td class="c-dan"><select name="a{{ i }}_dan">
              <option value="" {{ 'selected' if not a.dan else '' }}>—</option>
              {% for d in svi_dani %}<option value="{{ d }}" {{ 'selected' if a.dan == d else '' }}>{{ d }}</option>{% endfor %}
            </select></td>
            <td class="c-vr"><input type="time" name="a{{ i }}_pocetak" value="{{ a.pocetak if a.pocetak is defined else '' }}"></td>
            <td class="c-vr"><input type="time" name="a{{ i }}_kraj" value="{{ a.kraj if a.kraj is defined else '' }}"></td>
            <td class="predmet"><input type="text" name="a{{ i }}_naziv" value="{{ a.naziv if a.naziv is defined else '' }}" placeholder="npr. Trening, Mekteb"></td>
            <td class="c-del"><input type="checkbox" name="a{{ i }}_del"></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      </div>
      <div style="margin-top:14px;"><button type="submit">Sačuvaj aktivnosti</button></div>
    </form>
  </div>
{% endblock %}