{% extends "base.html" %}
{% block title %}QCP Recitation Revision — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🗣️ Recitation Revision</h1>
  <div><a href="{{ url_for('qcp_checkin') }}">QCP Check-In</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% include "_qcp_banner.html" %}
  {% if error %}<div class="msg msg-error">{{ error }}</div>{% endif %}

  <div class="card" style="background:#eaf2fb;">
    <p style="font-size:13px; margin:0 0 6px;">
      🔊 This section tracks your Quran <strong>reading/recitation</strong> quality (Makhraj) — it's separate from your <a href="{{ url_for('revision_log') }}">Revision Log</a> of <strong>memorized</strong> Sura/Verses.
    </p>
    <p style="font-size:12px; color:#566573; margin:0;">
      Mode: <strong>{{ mode | capitalize }}-based</strong>
      {% if entry_count == 0 %} (can still be changed, since you have no entries yet){% endif %}
    </p>
  </div>

  {% if entry_count == 0 %}
  <div class="card">
    <form method="post">
      <input type="hidden" name="action" value="switch_mode">
      <label>Mode</label>
      <select name="mode">
        <option value="sura" {% if mode == "sura" %}selected{% endif %}>Sura-based</option>
        <option value="page" {% if mode == "page" %}selected{% endif %}>Page-based</option>
      </select>
      <button type="submit" class="btn-save">Save Mode</button>
    </form>
  </div>
  {% endif %}

  <div class="card" style="display:flex; flex-wrap:wrap; gap:12px;">
    <div style="flex:1; min-width:100px;">
      <div style="font-size:12px; color:#566573;">Total</div>
      <div style="font-size:20px; font-weight:bold; color:#1a5276;">{{ stats.total }}</div>
    </div>
    <div style="flex:1; min-width:100px;">
      <div style="font-size:12px; color:#566573;">Today</div>
      <div style="font-size:20px; font-weight:bold; color:#1a7a4a;">{{ stats.today }}</div>
    </div>
    <div style="flex:1; min-width:100px;">
      <div style="font-size:12px; color:#566573;">This Month</div>
      <div style="font-size:20px; font-weight:bold; color:#6c3483;">{{ stats.this_month }}</div>
    </div>
  </div>

  <div class="card">
    <div class="section-title">Log an Entry</div>
    <form method="post">
      <input type="hidden" name="action" value="log">
      {% if mode == "sura" %}
        <label>Sura</label>
        <select name="sura_no">
          {% for s in suras %}<option value="{{ s.sura_no }}">{{ s.label }}</option>{% endfor %}
        </select>
        <label>Verses (optional)</label>
        <input type="text" name="verse_detail" placeholder="e.g. All | 1-15">
      {% else %}
        <label>Mushaf Page</label>
        <input type="text" name="page_no" placeholder="e.g. 15">
      {% endif %}
      <label>Makhraj Quality</label>
      <select name="makhraj_quality">
        <option>Strong</option>
        <option selected>Average</option>
        <option>Weak</option>
      </select>
      <label>Notes (optional)</label>
      <textarea name="notes"></textarea>
      <button type="submit" class="btn-save">✅ Log Entry</button>
    </form>
  </div>

  <div class="card">
    <div class="section-title">Recent Entries</div>
    <table>
      <tr><th>Date</th><th>Location</th><th>Quality</th><th>Notes</th></tr>
      {% for e in entries %}
      <tr><td data-label="Date">{{ e.date }}</td><td data-label="Location">{{ e.location }}</td><td data-label="Quality">{{ e.quality }}</td><td data-label="Notes">{{ e.notes or "" }}</td></tr>
      {% endfor %}
    </table>
  </div>
</main>
{% endblock %}