{% extends "base.html" %}
{% block title %}SSRP — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🕌 SSRP</h1>
  <div><a href="{{ url_for('ssrp_plans_list') }}">My Plans</a> &nbsp;·&nbsp; <a href="{{ url_for('ssrp_salat_types') }}">Salat Types</a> &nbsp;·&nbsp; {{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% if plan_choices %}
  <div class="card">
    <label>Viewing Plan</label>
    <select onchange="window.location.href='{{ url_for('ssrp_tonight') }}?plan_id=' + this.value">
      {% for pc in plan_choices %}
      <option value="{{ pc.id }}" {% if pc.id == selected_plan_id %}selected{% endif %}>
        {{ pc.plan_name }} — [{{ pc.type_name }}] ({{ pc.sets_done }}/{{ pc.max_sets }} sets)
      </option>
      {% endfor %}
    </select>
  </div>
  {% endif %}

  {% if not plan %}
    <div class="card">
      {% if plan_choices %}
        <p>Pick a plan above to track tonight's recitation.</p>
      {% else %}
        <p>No SSRP plan yet. <a href="{{ url_for('ssrp_new_plan') }}">Create one</a> to start tracking your nightly recitation here.</p>
      {% endif %}
    </div>
  {% else %}
    <div class="card" style="background:#eaf2fb;">
      <div style="font-weight:bold; font-size:16px; color:#1a5276;">{{ plan.plan_name }}</div>
      <div style="font-size:13px; color:#566573;">{{ type_name }} &middot; {{ plan.num_rakat }} rakat</div>
      <div id="progressText" style="font-size:20px; font-weight:bold; margin-top:8px;">{{ done_count }}/{{ total_count }} sets recited tonight</div>
      <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; margin-top:10px;">▶▶ Play Full Plan (coming soon)</button>
    </div>

    {% for r in rows %}
    <div class="card" style="{% if r.recited %}background:#eafaf1;{% endif %}">
      <div style="display:flex; justify-content:space-between; align-items:flex-start;">
        <div>
          <div style="font-weight:bold; color:#1a3a5c;">Set {{ r.set_no }}</div>
          {% if r.fatiha_only %}
            <div style="font-size:13px; color:#566573;">Al-Fatiha only (Fard, last set) &mdash; always counts as done</div>
          {% elif not r.filled %}
            <div style="font-size:13px; color:#a93226;">Not filled in yet &mdash; <a href="{{ url_for('ssrp_fill_sets', plan_id=plan.id) }}">fill it in</a></div>
          {% else %}
            <div style="font-size:13px;">Rakat 1: <strong>{{ r.rakat1_sura }}</strong> ({{ r.rakat1_verses }})</div>
            {% if r.rakat2_sura %}
              <div style="font-size:13px;">Rakat 2: <strong>{{ r.rakat2_sura }}</strong> ({{ r.rakat2_verses }})</div>
            {% endif %}
          {% endif %}
        </div>
        <div class="done-check" style="margin:0;">
          <input type="checkbox" id="set_{{ r.set_no }}" onchange="toggleSet({{ r.set_no }}, this.checked)"
                 {% if r.recited %}checked{% endif %} {% if r.fatiha_only %}disabled{% endif %}>
          <label style="margin:0;" for="set_{{ r.set_no }}">Recited</label>
        </div>
      </div>
    </div>
    {% endfor %}
  {% endif %}
</main>

<script>
function toggleSet(setNo, checked) {
  const fd = new FormData();
  fd.append('plan_id', {{ plan.id if plan else 'null' }});
  fd.append('set_no', setNo);
  fd.append('mark', checked ? '1' : '0');
  fetch('/api/ssrp/toggle-set', { method: 'POST', body: fd })
    .then(r => r.json())
    .then(d => {
      if (d.ok) {
        document.getElementById('progressText').textContent = `${d.done_count}/${d.total_count} sets recited tonight`;
      } else {
        alert(d.error || 'Could not update this set.');
        document.getElementById('set_' + setNo).checked = !checked;
      }
    });
}
</script>
{% endblock %}