{% extends "base.html" %}
{% block title %}Progress Report — IslamInLife Quran App{% endblock %}
{% block body %}
<style>
  @media print {
    header, .no-print { display: none !important; }
    body { background: white; }
    .card { box-shadow: none; border: 1px solid #ccc; }
  }
</style>
<header>
  <h1>📊 Progress Report</h1>
  <div>{{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div class="card no-print">
    <form method="get">
      <div class="row">
        <div><label>From</label><input type="date" name="date_from" value="{{ date_from }}"></div>
        <div><label>To</label><input type="date" name="date_to" value="{{ date_to }}"></div>
      </div>
      <button type="submit" class="btn-save">Update Report</button>
      <button type="button" class="btn" style="background:#1a5276;" onclick="window.print()">🖨️ Print / Save as PDF</button>
    </form>
  </div>

  <div class="card" style="background:#eaf2fb;">
    <h2 style="margin:0;">Progress Report</h2>
    <p style="font-size:13px; color:#566573;">{{ date_from }} to {{ date_to }}</p>
  </div>

  <div class="card">
    <div class="section-title">📖 QCP</div>
    <p style="font-size:14px;">{{ summary.total_pages }} pages read across {{ summary.days_qcp_active }} active days.</p>
  </div>

  <div class="card">
    <div class="section-title">🔁 Revision</div>
    <p style="font-size:14px;">
      {{ summary.total_revisions }} sessions —
      {{ summary.revision_strong }} strong, {{ summary.revision_average }} average, {{ summary.revision_weak }} weak.
    </p>
  </div>

  <div class="card">
    <div class="section-title">🎯 SMGP</div>
    <p style="font-size:14px;">{{ summary.total_memorized }} items memorized in this period.</p>
  </div>

  {% if session_is_admin %}
  <div class="card">
    <div class="section-title">🕌 SSRP <span style="font-size:11px; color:#7d6608;">(Admin only)</span></div>
    <p style="font-size:14px;">{{ summary.total_sets_recited }} sets recited across {{ summary.nights_ssrp_active }} active nights.</p>
  </div>
  {% endif %}

  <div class="card">
    <div class="section-title">🗓️ Planner</div>
    <p style="font-size:14px;">
      {{ summary.planner_total }} plans due — {{ summary.planner_done }} done, {{ summary.planner_missed }} missed,
      {{ summary.planner_pending }} still pending.
    </p>
  </div>

  <div class="card">
    <div class="section-title">🔍📖💭 FSR</div>
    <p style="font-size:14px;">{{ summary.fsr_stages_completed }} Find/Study/Reflect stages completed.</p>
  </div>
</main>
{% endblock %}