{% extends "base.html" %}
{% block title %}FSR Check-In — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🔍📖💭 FSR Check-In</h1>
  <div><a href="{{ url_for('fsr_lessons_list') }}">All Lessons</a> &nbsp;·&nbsp; <a href="{{ url_for('fsr_new_lesson') }}">+ New Lesson</a> &nbsp;·&nbsp; <a href="{{ url_for('fsr_lesson_types') }}">Types</a> &nbsp;·&nbsp; <a href="{{ url_for('fsr_basis_types') }}">Basis Types</a> &nbsp;·&nbsp; <a href="{{ url_for('fsr_tags') }}">Tags</a> &nbsp;·&nbsp; {{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div class="card" style="background:#f5eef8;">
    <div style="font-size:14px;">{{ complete_count }} complete &middot; {{ lessons | length }} pending &middot; {{ total_count }} total</div>
  </div>

  {% if not lessons %}
    <div class="card"><p>No pending lessons — everything's caught up, or nothing's been added yet.</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;">View</a><a href="/fsr/{{ l.id }}/edit" style="font-size:12px;">Edit</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; High Priority</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;">🔍 Find</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;">📖 Study</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;">💭 Reflect</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('/api/fsr/toggle-stage', { method: 'POST', body: fd })
    .then(r => r.json())
    .then(d => {
      if (!d.ok) {
        alert(d.error || 'Could not update this stage.');
        document.getElementById(stage + '_' + lessonId).checked = !checked;
        return;
      }
      if (d.all_done) {
        setTimeout(() => location.reload(), 500);
      }
    });
}
</script>
{% endblock %}