{% extends "base.html" %}
{% block title %}All Plans — 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>📋 All Plans</h1>
  <div><a href="{{ url_for('today_plan') }}">Today's Plan</a> &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 Range</button>
      <button type="button" class="btn" style="background:#1a5276;" onclick="window.print()">🖨️ Print</button>
    </form>
  </div>

  <div class="card" style="background:#eaf2fb;">
    <p style="font-size:13px; color:#566573; margin:0;">{{ date_from }} to {{ date_to }} &middot; {{ days | length }} day(s) with a plan</p>
  </div>

  {% if not days %}
    <div class="card"><p>No plans found in this date range.</p></div>
  {% endif %}

  {% for d in days %}
  <div class="card" style="border:2px solid #1a3a5c;">
    <h3 style="margin-top:0; color:#1a3a5c;">🗓️ {{ d.plan_date }}</h3>

    {% for s in d.sections %}
      {% if s.rows %}
      <div style="margin-bottom:14px;">
        <div class="section-title" style="font-size:14px;">{{ s.icon }} {{ s.title }}</div>
        <table>
          <tr>
            <th>Sura</th><th>Verses</th>{% if s.key == "visual" %}<th>Page</th>{% endif %}<th>Status</th>
          </tr>
          {% for r in s.rows %}
          <tr>
            <td data-label="Sura">{{ r.sura_label }}</td>
            <td data-label="Verses">{{ r.verses }}</td>
            {% if s.key == "visual" %}<td data-label="Page">{{ r.page or "—" }}</td>{% endif %}
            <td data-label="Status">{{ "✅ Done" if r.done else "⬜ Not yet" }}</td>
          </tr>
          {% endfor %}
        </table>
      </div>
      {% endif %}
    {% endfor %}

    {% if d.notes %}
    <div style="font-size:13px; color:#566573;"><strong>Notes:</strong> {{ d.notes }}</div>
    {% endif %}
  </div>
  {% endfor %}
</main>
{% endblock %}