{% extends "base.html" %}
{% block title %}Fill Sets — {{ plan.plan_name }} — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>📝 Fill Sets — {{ plan.plan_name }}</h1>
  <div><a href="{{ url_for('ssrp_plans_list') }}">My Plans</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% if error %}<div class="msg msg-error">{{ error }}</div>{% endif %}
  {% if success %}<div class="msg msg-success">{{ success }}</div>{% endif %}

  <div class="card" style="background:#eaf2fb;">
    <p style="font-size:13px; color:#566573; margin:0;">
      {{ plan.num_rakat }} rakat &middot; fill in each set's sura/verses below.
    </p>
    <a href="{{ url_for('ssrp_edit_plan', plan_id=plan.id) }}" style="font-size:13px;">✏️ Edit Plan Details</a>
  </div>

  {% for r in rows %}
  <div class="card" {% if error_set_no == r.set_no %}style="border:1.5px solid #a93226;"{% endif %}>
    <div class="section-title">Set {{ r.set_no }}</div>
    {% if r.fatiha_only %}
      <p style="font-size:13px; color:#566573;">Al-Fatiha only — no sura selection needed for this set.</p>
    {% else %}
      <form method="post">
        <input type="hidden" name="set_no" value="{{ r.set_no }}">
        <label>Rakat 1 — Sura</label>
        <select name="rakat1_sura_no">
          {% for s in suras %}<option value="{{ s.sura_no }}" {% if s.sura_no == r.rakat1_sura_no %}selected{% endif %}>{{ s.label }}</option>{% endfor %}
        </select>
        <label>Rakat 1 — Verses</label>
        <input type="text" name="rakat1_verses" value="{{ r.rakat1_verses }}" placeholder="e.g. All | 1-5">

        {% if not r.single_rakat %}
        <label>Rakat 2 — Sura</label>
        <select name="rakat2_sura_no">
          <option value="">— None —</option>
          {% for s in suras %}<option value="{{ s.sura_no }}" {% if s.sura_no == r.rakat2_sura_no %}selected{% endif %}>{{ s.label }}</option>{% endfor %}
        </select>
        <label>Rakat 2 — Verses</label>
        <input type="text" name="rakat2_verses" value="{{ r.rakat2_verses }}" placeholder="e.g. All | 1-5">
        {% endif %}

        <button type="submit" class="btn-save">💾 Save Set {{ r.set_no }}</button>
        {% if r.filled %}
        <button type="button" class="btn-delete" onclick="clearSet({{ r.set_no }})">🗑 Clear This Set</button>
        <button type="button" disabled title="Audio playback isn't available on the web app yet" style="background:#aab7b8; color:white; border:none; border-radius:5px; padding:8px 14px; cursor:not-allowed;">▶ Play Set (coming soon)</button>
        {% endif %}
      </form>
    {% endif %}
  </div>
  {% endfor %}

  <div class="card">
    <button type="button" disabled title="Audio playback isn't available on the web app yet" style="background:#aab7b8; color:white; border:none; border-radius:5px; padding:10px 16px; cursor:not-allowed; margin-bottom:8px;">▶▶ Play Full Plan (coming soon)</button>
    <br>
    <a class="btn" style="background:#1a5276; display:inline-block; text-decoration:none;" href="{{ url_for('ssrp_tonight') }}">
      🕌 Go to SSRP
    </a>
  </div>
</main>

<script>
function clearSet(setNo) {
  if (!confirm(`Clear Set ${setNo}? This removes its sura/verses so you can re-enter them.`)) return;
  const fd = new FormData();
  fd.append('set_no', setNo);
  fetch(`/api/ssrp/{{ plan.id }}/clear-set`, { method: 'POST', body: fd })
    .then(r => r.json())
    .then(d => {
      if (d.ok) location.reload();
      else alert(d.error || 'Could not clear this set.');
    });
}
</script>
{% endblock %}