{% extends "base.html" %}
{% block title %}Today in Hifz — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>📿 Today in Hifz</h1>
  <div>{{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div class="card">
    <p style="font-size:13px; color:#566573; margin:0;">
      What needs attention today, pulled together from Revision, Planning, and your Goal Plans.
    </p>
  </div>

  <div class="card revise">
    <div class="section-title">🔁 Revision Due</div>
    {% if not revision_items %}
      <p style="font-size:13px; color:#566573;">Nothing urgently due — nice work.</p>
    {% endif %}
    {% for r in revision_items %}
    <div style="padding:8px 0; border-bottom:1px solid #eee;">
      <strong>{{ r.sura_name }}</strong>
      <span style="font-size:12px; color:{{ r.urgency_color }}; font-weight:bold;"> &middot; {{ r.urgency_label }}</span>
      <div style="font-size:12px; color:#566573;">
        {% if r.days_since is not none %}{{ r.days_since }} days since last revised{% else %}Never revised{% endif %}
      </div>
    </div>
    {% endfor %}
    {% if revision_items %}<a href="{{ url_for('revision_log') }}" style="font-size:13px;">Open Revision Log →</a>{% endif %}
  </div>

  <div class="card memorize">
    <div class="section-title">🗓️ Planner — Due Today / Overdue</div>
    {% if not planner_items %}
      <p style="font-size:13px; color:#566573;">Nothing due from your plans today.</p>
    {% endif %}
    {% for p in planner_items %}
    <div id="plan_{{ p.id }}" style="display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #eee;">
      <div>
        <strong>{{ p.sura_no }}</strong> — {{ p.verse_detail }}
        <div style="font-size:12px; color:#566573;">Due {{ p.date_to }} &middot; {{ p.plan_type }}</div>
      </div>
      <button class="btn-save" style="padding:5px 9px; font-size:12px;" onclick="markPlanDone({{ p.id }})">Done</button>
    </div>
    {% endfor %}
  </div>

  <div class="card recite">
    <div class="section-title">🎯 Goal Plan Items — Deadline Approaching</div>
    {% if not smgp_items %}
      <p style="font-size:13px; color:#566573;">Nothing pending across your active goal plans.</p>
    {% endif %}
    {% for item, plan_name, days_remaining in smgp_items %}
    <div id="smgp_{{ item.id }}" style="display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #eee;">
      <div>
        <strong>Sura {{ item.sura_no }}</strong> — {{ item.verse_detail }}
        <div style="font-size:12px; color:#566573;">{{ plan_name }} &middot; {{ days_remaining }} days left</div>
      </div>
      <button class="btn-save" style="padding:5px 9px; font-size:12px;" onclick="markSmgpDone({{ item.id }})">Memorized</button>
    </div>
    {% endfor %}
  </div>
</main>

<script>
function markPlanDone(planId) {
  const fd = new FormData();
  fd.append('plan_id', planId);
  fd.append('status', 'Done');
  fetch('/api/planning/mark', { method: 'POST', body: fd })
    .then(() => { document.getElementById('plan_' + planId).remove(); });
}

function markSmgpDone(itemId) {
  const fd = new FormData();
  fd.append('item_id', itemId);
  fd.append('mark', '1');
  fetch('/api/smgp/toggle-item', { method: 'POST', body: fd })
    .then(() => { document.getElementById('smgp_' + itemId).remove(); });
}
</script>
{% endblock %}