{% extends "base.html" %}
{% block title %}FSR চেক-ইন — ইসলামইনলাইফ কুরআন অ্যাপ{% endblock %}
{% block body %}
<header>
  <h1>🔍📖💭 FSR চেক-ইন</h1>
  <div><a href="{{ url_for('fsr_lessons_list') }}">সকল পাঠ</a> &nbsp;·&nbsp; <a href="{{ url_for('fsr_new_lesson') }}">+ নতুন পাঠ</a> &nbsp;·&nbsp; <a href="{{ url_for('fsr_lesson_types') }}">ধরন</a> &nbsp;·&nbsp; <a href="{{ url_for('fsr_basis_types') }}">ভিত্তির ধরন</a> &nbsp;·&nbsp; <a href="{{ url_for('fsr_tags') }}">ট্যাগ</a> &nbsp;·&nbsp; {{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">হোম</a></div>
</header>
<main>
  <div class="card" style="background:#f5eef8;">
    <div style="font-size:14px;">{{ complete_count }}টি সম্পন্ন &middot; {{ lessons | length }}টি অপেক্ষমাণ &middot; মোট {{ total_count }}টি</div>
  </div>

  {% if not lessons %}
    <div class="card"><p>কোনো অপেক্ষমাণ পাঠ নেই — সবকিছু সম্পন্ন, অথবা এখনও কিছু যোগ করা হয়নি।</p></div>
  {% endif %}

  {% for l in lessons %}
  <div class="card" id="lesson_{{ l.id }}">
    <div style="display:flex; justify-content:space-between;">
      <div style="font-weight:bold; color:#1a3a5c; font-size:15px;">{{ l.title }}</div>
      <div><a href="/fsr/{{ l.id }}" style="font-size:12px; margin-right:8px;">দেখুন</a><a href="/fsr/{{ l.id }}/edit" style="font-size:12px;">সম্পাদনা</a></div>
    </div>
    <div style="font-size:12px; color:#566573; margin-bottom:8px;">
      {{ l.lesson_type }}{% if l.anchor_ref %} &middot; {{ l.anchor_ref }}{% endif %}
      {% if l.priority == "High" %}<span style="color:#a93226; font-weight:bold;"> &middot; উচ্চ অগ্রাধিকার</span>{% endif %}
    </div>
    <div style="display:flex; gap:16px; flex-wrap:wrap;">
      <div class="done-check">
        <input type="checkbox" id="find_{{ l.id }}" {% if l.find_done == "Yes" %}checked{% endif %}
               onchange="toggleStage({{ l.id }}, 'find', this.checked)">
        <label for="find_{{ l.id }}" style="margin:0;">🔍 অনুসন্ধান</label>
      </div>
      <div class="done-check">
        <input type="checkbox" id="study_{{ l.id }}" {% if l.study_done == "Yes" %}checked{% endif %}
               onchange="toggleStage({{ l.id }}, 'study', this.checked)">
        <label for="study_{{ l.id }}" style="margin:0;">📖 অধ্যয়ন</label>
      </div>
      <div class="done-check">
        <input type="checkbox" id="reflect_{{ l.id }}" {% if l.reflect_done == "Yes" %}checked{% endif %}
               onchange="toggleStage({{ l.id }}, 'reflect', this.checked)">
        <label for="reflect_{{ l.id }}" style="margin:0;">💭 ভাবনা</label>
      </div>
    </div>
  </div>
  {% endfor %}
</main>

<script>
function toggleStage(lessonId, stage, checked) {
  const fd = new FormData();
  fd.append('lesson_id', lessonId);
  fd.append('stage', stage);
  fd.append('mark', checked ? '1' : '0');
  fetch(APP_PREFIX + '/api/fsr/toggle-stage', { method: 'POST', body: fd })
    .then(r => r.json())
    .then(d => {
      if (!d.ok) {
        alert(d.error || 'এই পর্যায়টি আপডেট করা যায়নি।');
        document.getElementById(stage + '_' + lessonId).checked = !checked;
        return;
      }
      if (d.all_done) {
        setTimeout(() => location.reload(), 500);
      }
    });
}
</script>
{% endblock %}