{% extends "base.html" %}
{% block title %}QCP অগ্রগতি ট্র্যাকার — ইসলামইনলাইফ কুরআন অ্যাপ{% endblock %}
{% block body %}
<header>
  <h1>📅 QCP অগ্রগতি ট্র্যাকার</h1>
  <div><a href="{{ url_for('qcp_checkin') }}">চেক-ইন</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">হোম</a></div>
</header>
<main>
  {% include "_qcp_banner.html" %}
  {% if not plan %}
    <div class="card"><p>কোনো সক্রিয় QCP পরিকল্পনা নেই।</p></div>
  {% else %}
    <div class="card">
      <label>দেখান</label>
      <select onchange="window.location.href=APP_PREFIX + '/qcp/tracker?filter=' + this.value">
        <option value="all" {% if not not_done_only %}selected{% endif %}>সকল দিন</option>
        <option value="not_done" {% if not_done_only %}selected{% endif %}>শুধুমাত্র সম্পন্ন-হয়নি / আংশিক</option>
      </select>
    </div>

    {% if not entries %}
      <div class="card"><p>দেখানোর মতো কোনো এন্ট্রি নেই।</p></div>
    {% endif %}

    <div class="card">
      <table>
        <tr><th>তারিখ</th><th>অবস্থা</th><th>পৃষ্ঠা</th><th>নোট</th><th></th></tr>
        {% for e in entries %}
        <tr id="row_{{ e.log_date }}">
          <td data-label="তারিখ">{{ e.log_date | fmt_date }}{% if e.auto_filled %} <span style="font-size:11px; color:#7d6608;">🤖 স্বয়ংক্রিয়</span>{% endif %}</td>
          <td data-label="অবস্থা"><span class="view">{{ e.status | bn_status }}</span>
            <select class="edit" style="display:none;">
              <option value="done" {% if e.status == 'done' %}selected{% endif %}>সম্পন্ন</option>
              <option value="partial" {% if e.status == 'partial' %}selected{% endif %}>আংশিক</option>
              <option value="not_done" {% if e.status == 'not_done' %}selected{% endif %}>সম্পন্ন হয়নি</option>
            </select>
          </td>
          <td data-label="পৃষ্ঠা"><span class="view">{{ e.pages_done }}</span>
            <input class="edit" type="text" style="display:none; width:70px;" value="{{ e.pages_done }}">
          </td>
          <td data-label="নোট"><span class="view">{{ e.notes or "" }}</span>
            <input class="edit" type="text" style="display:none;" value="{{ e.notes or '' }}">
          </td>
          <td>
            <a href="#" class="edit-link" onclick="startEditDay('{{ e.log_date }}'); return false;">সম্পাদনা</a>
            <a href="#" class="save-link" style="display:none; color:#1a7a4a;" onclick="saveEditDay('{{ e.log_date }}'); return false;">সংরক্ষণ</a>
          </td>
        </tr>
        {% endfor %}
      </table>
    </div>
  {% endif %}
</main>

<script>
function startEditDay(logDate) {
  const row = document.getElementById('row_' + logDate);
  row.querySelectorAll('.view').forEach(el => el.style.display = 'none');
  row.querySelectorAll('.edit').forEach(el => el.style.display = 'inline-block');
  row.querySelector('.edit-link').style.display = 'none';
  row.querySelector('.save-link').style.display = 'inline';
}

function saveEditDay(logDate) {
  const row = document.getElementById('row_' + logDate);
  const status = row.querySelector('td:nth-child(2) select').value;
  const pages = row.querySelector('td:nth-child(3) input').value;
  const notes = row.querySelector('td:nth-child(4) input').value;

  const fd = new FormData();
  fd.append('log_date', logDate);
  fd.append('status', status);
  fd.append('pages_done', pages);
  fd.append('notes', notes);

  fetch(APP_PREFIX + '/api/qcp/edit-day', { method: 'POST', body: fd })
    .then(r => r.json().then(d => ({ ok: r.ok, body: d })))
    .then(({ ok, body }) => {
      if (ok && body.ok) location.reload();
      else alert(body.error || 'এই সংশোধন সংরক্ষণ করা যায়নি।');
    });
}
</script>
{% endblock %}