{% extends "base.html" %}
{% block title %}{{ plan.plan_name if plan else "Plan" }} — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🎯 {{ plan.plan_name if plan else "Plan Not Found" }}</h1>
  <div><a href="{{ url_for('smgp_list') }}">All Plans</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% if not plan %}
    <div class="card"><p>This plan doesn't exist, or isn't yours.</p></div>
  {% else %}
    <div class="card" style="background:#f5eef8;">
      <div id="progressText" style="font-size:20px; font-weight:bold; color:#6c3483;">{{ done_count }}/{{ total_count }} memorized</div>
    </div>

    {% for i in items %}
    <div class="card" style="{% if i.status == 'Memorized' %}background:#eafaf1;{% endif %}">
      <div style="display:flex; justify-content:space-between; align-items:center;">
        <div>
          <strong>{{ i.sura_name }}</strong>
          <div style="font-size:13px; color:#566573;">{{ i.verse_detail }}</div>
        </div>
        <div class="done-check" style="margin:0;">
          <input type="checkbox" id="item_{{ i.id }}" {% if i.status == "Memorized" %}checked{% endif %}
                 onchange="toggleItem({{ i.id }}, this.checked)">
          <label style="margin:0;" for="item_{{ i.id }}">Memorized</label>
        </div>
      </div>
    </div>
    {% endfor %}

    <div class="card">
      <div class="section-title">Add Item to This Plan</div>
      <div id="addItemMsg"></div>
      <label>Sura</label>
      <select id="newItemSura">
        {% for s in suras %}<option value="{{ s.sura_no }}">{{ s.label }}</option>{% endfor %}
      </select>
      <label>Verses</label>
      <input type="text" id="newItemVerses" placeholder="e.g. All | 1-15">
      <button class="btn-save" onclick="addItem()">+ Add Item</button>
    </div>
  {% endif %}
</main>

<script>
function addItem() {
  const fd = new FormData();
  fd.append('plan_id', {{ plan.id if plan else 'null' }});
  fd.append('sura_no', document.getElementById('newItemSura').value);
  fd.append('verse_detail', document.getElementById('newItemVerses').value);
  fetch('/api/smgp/add-item', { method: 'POST', body: fd })
    .then(r => r.json().then(d => ({ ok: r.ok, body: d })))
    .then(({ ok, body }) => {
      if (ok && body.ok) location.reload();
      else document.getElementById('addItemMsg').innerHTML = `<div class="msg msg-error">${body.error || 'Could not add item.'}</div>`;
    });
}

function toggleItem(itemId, checked) {
  const fd = new FormData();
  fd.append('item_id', itemId);
  fd.append('mark', checked ? '1' : '0');
  fetch('/api/smgp/toggle-item', { method: 'POST', body: fd })
    .then(r => r.json())
    .then(d => {
      if (!d.ok) {
        alert(d.error || 'Could not update this item.');
        document.getElementById('item_' + itemId).checked = !checked;
        return;
      }
      document.getElementById('progressText').textContent = `${d.done_count}/${d.total_count} memorized`;
    });
}
</script>
{% endblock %}