{% extends "base.html" %}
{% block title %}QCP Progress Tracker — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>📅 QCP Progress Tracker</h1>
  <div><a href="{{ url_for('qcp_checkin') }}">Check-In</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% include "_qcp_banner.html" %}
  {% if not plan %}
    <div class="card"><p>No active QCP plan.</p></div>
  {% else %}
    <div class="card">
      <label>Show</label>
      <select onchange="window.location.href=APP_PREFIX + '/qcp/tracker?filter=' + this.value">
        <option value="all" {% if not not_done_only %}selected{% endif %}>All Days</option>
        <option value="not_done" {% if not_done_only %}selected{% endif %}>Not Done / Partial Only</option>
      </select>
    </div>

    {% if not entries %}
      <div class="card"><p>No entries to show.</p></div>
    {% endif %}

    <div class="card">
      <table>
        <tr><th>Date</th><th>Status</th><th>Pages</th><th>Notes</th><th></th></tr>
        {% for e in entries %}
        <tr id="row_{{ e.log_date }}">
          <td data-label="Date">{{ e.log_date }}{% if e.auto_filled %} <span style="font-size:11px; color:#7d6608;">🤖 Auto</span>{% endif %}</td>
          <td data-label="Status"><span class="view">{{ e.status | replace('_', ' ') | capitalize }}</span>
            <select class="edit" style="display:none;">
              <option value="done" {% if e.status == 'done' %}selected{% endif %}>Done</option>
              <option value="partial" {% if e.status == 'partial' %}selected{% endif %}>Partial</option>
              <option value="not_done" {% if e.status == 'not_done' %}selected{% endif %}>Not Done</option>
            </select>
          </td>
          <td data-label="Pages"><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="Notes"><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;">Edit</a>
            <a href="#" class="save-link" style="display:none; color:#1a7a4a;" onclick="saveEditDay('{{ e.log_date }}'); return false;">Save</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 || 'Could not save this correction.');
    });
}
</script>
{% endblock %}