{% extends "base.html" %}
{% block title %}Recap Today's Recitation — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>📿 Recap Today's Recitation</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;">
      Everything you're due to recite, read, revise, or memorize today — one glance, then get to it.
    </p>
  </div>

  <div class="card recite">
    <div class="section-title">📿 Recite Today</div>
    {% if not recite_items %}
      <p style="font-size:13px; color:#566573;">Nothing queued to recite today. <a href="{{ url_for('today_plan') }}">Add something to Today's Plan</a> to get started.</p>
    {% endif %}
    {% for i in recite_items %}
    <div id="recite_{{ i.id }}" style="display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #eee;">
      <div><strong>{{ i.sura_name or ('Sura ' ~ i.sura_no) }}</strong> — {{ i.verses }}</div>
      <button class="btn-save" style="padding:5px 9px; font-size:12px;" onclick="markReciteDone({{ i.id }})">Done</button>
    </div>
    {% endfor %}
    {% if recite_items %}<a href="{{ url_for('today_plan') }}" style="font-size:13px;">Open Today's Plan →</a>{% endif %}
  </div>

  {% if session_is_admin and ssrp_status %}
  <div class="card recite">
    <div class="section-title">🕌 SSRP — Today's Salat Recitation</div>
    <p style="font-size:14px; margin:6px 0 2px;"><strong>{{ ssrp_status.done_sets }}/{{ ssrp_status.total_sets }} sets</strong> recited &middot; {{ ssrp_status.plan_name }}</p>
    {% if ssrp_status.done_sets < ssrp_status.total_sets %}
      <p style="font-size:13px; color:#a04000; margin:2px 0 8px;">{{ ssrp_status.total_sets - ssrp_status.done_sets }} set(s) still left for today.</p>
    {% else %}
      <p style="font-size:13px; color:#1a7a4a; margin:2px 0 8px;">✅ All sets recited today — well done!</p>
    {% endif %}
    <a href="{{ url_for('ssrp_tonight') }}" style="font-size:13px;">Open SSRP →</a>
  </div>
  {% endif %}

  {% if qcp_status %}
  <div class="card revise">
    <div class="section-title">📖 QCP — Today's Reading</div>
    <p style="font-size:14px; margin:6px 0 2px;">You should be at <strong>Page {{ qcp_status.expected_page }}</strong> by now.</p>
    {% if qcp_status.is_behind %}
      <p style="font-size:13px; color:#a93226; margin:2px 0;">{{ -qcp_status.ahead_behind }} page(s) behind — no problem, dive in.</p>
    {% elif qcp_status.ahead_behind > 0 %}
      <p style="font-size:13px; color:#1a7a4a; margin:2px 0;">{{ qcp_status.ahead_behind }} page(s) ahead — keep it up!</p>
    {% endif %}
    {% if qcp_status.today_logged %}
      <p style="font-size:13px; color:#1a7a4a; margin:2px 0 8px;">✅ Today already logged.</p>
    {% else %}
      <p style="font-size:13px; color:#7d6608; margin:2px 0 8px;">Today not logged yet — {{ qcp_status.daily_pages }} pages due.</p>
    {% endif %}
    <a href="{{ url_for('qcp_checkin') }}" style="font-size:13px;">Open QCP →</a>
  </div>
  {% endif %}

  {% if qcp_recitation_stats %}
  <div class="card revise">
    <div class="section-title">🔊 QCP — Recitation Revision</div>
    {% if qcp_recitation_stats.today > 0 %}
      <p style="font-size:14px; color:#1a7a4a; margin:6px 0 8px;">✅ {{ qcp_recitation_stats.today }} entry logged today.</p>
    {% elif qcp_recitation_stats.total > 0 %}
      <p style="font-size:14px; color:#7d6608; margin:6px 0 2px;">Nothing logged today yet.</p>
      <p style="font-size:13px; color:#566573; margin:2px 0 8px;">
        {{ qcp_recitation_stats.this_month }} logged this month{% if qcp_recitation_stats.last_date %} &middot; last on {{ qcp_recitation_stats.last_date }}{% endif %}.
      </p>
    {% else %}
      <p style="font-size:13px; color:#566573; margin:6px 0 8px;">Track how well you're reciting (Makhraj quality) as you read — nothing logged yet.</p>
    {% endif %}
    <a href="{{ url_for('qcp_recitation') }}" style="font-size:13px;">Open Recitation Revision →</a>
  </div>
  {% endif %}

  <div class="card revise">
    <div class="section-title">🔁 My Memorization — Revision Log</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> — {{ r.verse_detail }}
      <span style="font-size:12px; color:{{ r.urgency_color }}; font-weight:bold;"> &middot; {{ r.urgency_label }}</span>
      {% if r.days_since is not none %}
      <div style="font-size:12px; color:#566573;">{{ r.days_since }} days since last revised</div>
      {% endif %}
    </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_name or ('Sura ' ~ 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 %}
    {% if planner_items %}<a href="{{ url_for('memorization_planning') }}" style="font-size:13px;">Manage Plans →</a>{% endif %}
  </div>

  <div class="card memorize">
    <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 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>{{ item.sura_name or ('Sura ' ~ item.sura_no) }}</strong> — {{ item.verse_detail }}
        <div style="font-size:12px; color:#566573;">{{ item.plan_name }} &middot; {{ item.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 %}
    {% if smgp_items %}<a href="{{ url_for('smgp_list') }}" style="font-size:13px;">Open Goal Plans →</a>{% endif %}
  </div>
</main>

<script>
function markReciteDone(itemId) {
  const fd = new FormData();
  fd.append('item_id', itemId);
  fd.append('done', '1');
  fetch(APP_PREFIX + '/api/plan/toggle-item', { method: 'POST', body: fd })
    .then(() => { document.getElementById('recite_' + itemId).remove(); });
}

function markPlanDone(planId) {
  const fd = new FormData();
  fd.append('plan_id', planId);
  fd.append('status', 'Done');
  fetch(APP_PREFIX + '/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(APP_PREFIX + '/api/smgp/toggle-item', { method: 'POST', body: fd })
    .then(() => { document.getElementById('smgp_' + itemId).remove(); });
}
</script>
{% endblock %}