{% extends "base.html" %}
{% block title %}QCP তিলাওয়াত পুনরাবৃত্তি — ইসলামইনলাইফ কুরআন অ্যাপ{% endblock %}
{% block body %}
<header>
  <h1>🗣️ তিলাওয়াত পুনরাবৃত্তি</h1>
  <div><a href="{{ url_for('qcp_checkin') }}">QCP চেক-ইন</a> &nbsp;·&nbsp; <a href="{{ url_for('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;">
      🔊 এই অংশটি আপনার কুরআন <strong>পাঠ/তিলাওয়াতের</strong> মান (মাখরাজ) ট্র্যাক করে — এটি আপনার <strong>মুখস্থ করা</strong> সূরা/আয়াতের <a href="{{ url_for('revision_log') }}">পুনরাবৃত্তি লগ</a> থেকে আলাদা।
    </p>
    <p style="font-size:12px; color:#566573; margin:0;">
      মোড: <strong>{% if mode == "sura" %}সূরা{% else %}পৃষ্ঠা{% endif %}-ভিত্তিক</strong>
      {% if entry_count == 0 %} (এখনও পরিবর্তন করা যাবে, যেহেতু আপনার কোনো এন্ট্রি নেই){% endif %}
    </p>
  </div>

  {% if entry_count == 0 %}
  <div class="card">
    <form method="post">
      <input type="hidden" name="action" value="switch_mode">
      <label>মোড</label>
      <select name="mode">
        <option value="sura" {% if mode == "sura" %}selected{% endif %}>সূরা-ভিত্তিক</option>
        <option value="page" {% if mode == "page" %}selected{% endif %}>পৃষ্ঠা-ভিত্তিক</option>
      </select>
      <button type="submit" class="btn-save">মোড সংরক্ষণ করুন</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;">মোট</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;">আজ</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;">এই মাসে</div>
      <div style="font-size:20px; font-weight:bold; color:#6c3483;">{{ stats.this_month }}</div>
    </div>
  </div>

  <div class="card">
    <div class="section-title">একটি এন্ট্রি লগ করুন</div>
    <form method="post">
      <input type="hidden" name="action" value="log">
      {% if mode == "sura" %}
        <label>সূরা</label>
        <select name="sura_no">
          {% for s in suras %}<option value="{{ s.sura_no }}">{{ s.label }}</option>{% endfor %}
        </select>
        <label>আয়াত (ঐচ্ছিক)</label>
        <input type="text" name="verse_detail" placeholder="যেমন All | 1-15">
      {% else %}
        <label>মুসহাফ পৃষ্ঠা</label>
        <input type="text" name="page_no" placeholder="যেমন 15">
      {% endif %}
      <label>মাখরাজের মান</label>
      <select name="makhraj_quality">
        <option value="Strong">শক্তিশালী</option>
        <option value="Average" selected>গড়পড়তা</option>
        <option value="Weak">দুর্বল</option>
      </select>
      <label>নোট (ঐচ্ছিক)</label>
      <textarea name="notes"></textarea>
      <button type="submit" class="btn-save">✅ এন্ট্রি লগ করুন</button>
    </form>
  </div>

  <div class="card">
    <div class="section-title">সাম্প্রতিক এন্ট্রি</div>
    <table>
      <tr><th>তারিখ</th><th>অবস্থান</th><th>মান</th><th>নোট</th></tr>
      {% for e in entries %}
      <tr><td data-label="তারিখ">{{ e.date | fmt_date }}</td><td data-label="অবস্থান">{{ e.location }}</td><td data-label="মান">{{ e.quality | bn_status }}</td><td data-label="নোট">{{ e.notes or "" }}</td></tr>
      {% endfor %}
    </table>
  </div>
</main>
{% endblock %}