{% extends "base.html" %}
{% block title %}সকল পরিকল্পনা — ইসলামইনলাইফ কুরআন অ্যাপ{% 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>📋 সকল পরিকল্পনা</h1>
  <div><a href="{{ url_for('today_plan') }}">আজকের পরিকল্পনা</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">হোম</a></div>
</header>
<main>
  <div class="card no-print">
    <form method="get">
      <div class="row">
        <div><label>থেকে</label><input type="date" name="date_from" value="{{ date_from }}"></div>
        <div><label>পর্যন্ত</label><input type="date" name="date_to" value="{{ date_to }}"></div>
      </div>
      <button type="submit" class="btn-save">সময়সীমা আপডেট করুন</button>
      <button type="button" class="btn" style="background:#1a5276;" onclick="window.print()">🖨️ প্রিন্ট</button>
    </form>
  </div>

  <div class="card" style="background:#eaf2fb;">
    <p style="font-size:13px; color:#566573; margin:0;">{{ date_from | fmt_date }} থেকে {{ date_to | fmt_date }} &middot; {{ days | length }} দিনের পরিকল্পনা</p>
  </div>

  {% if not days %}
    <div class="card"><p>এই সময়সীমায় কোনো পরিকল্পনা পাওয়া যায়নি।</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 | fmt_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>সূরা</th><th>আয়াত</th>{% if s.key == "visual" %}<th>পৃষ্ঠা</th>{% endif %}<th>অবস্থা</th>
          </tr>
          {% for r in s.rows %}
          <tr>
            <td data-label="সূরা">{{ r.sura_label }}</td>
            <td data-label="আয়াত">{{ r.verses }}</td>
            {% if s.key == "visual" %}<td data-label="পৃষ্ঠা">{{ r.page or "—" }}</td>{% endif %}
            <td data-label="অবস্থা">{{ "✅ সম্পন্ন" if r.done else "⬜ এখনও নয়" }}</td>
          </tr>
          {% endfor %}
        </table>
      </div>
      {% endif %}
    {% endfor %}

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