{% extends "base.html" %}
{% block title %}QCP Check-In — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>📖 QCP Daily Check-In</h1>
  <div><a href="{{ url_for('qcp_tracker') }}">Tracker</a> &nbsp;·&nbsp; <a href="{{ url_for('qcp_completions') }}">Completions</a> &nbsp;·&nbsp; <a href="{{ url_for('qcp_recitation') }}">Recitation Revision</a> &nbsp;·&nbsp; {{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div id="msgBox"></div>

  {% if not plan %}
    <div class="card">
      <p>No active QCP plan yet.</p>
      <a class="btn btn-save" style="display:inline-block; text-decoration:none;" href="{{ url_for('qcp_new_plan') }}">
        ➕ Create a QCP Plan
      </a>
    </div>
  {% else %}
    <div class="card" style="background:#eaf2fb;">
      <div style="font-size:13px; color:#566573;">Daily target: {{ plan.daily_pages }} pages/day</div>
      <div id="pctText" style="font-size:26px; font-weight:bold; color:#1a5276; margin-top:4px;">
        {{ progress.pct_pages }}% complete
      </div>
      <div style="font-size:13px; color:#566573;">
        {{ progress.total_done }} / {{ progress.total_pages }} pages &middot;
        {% if progress.ahead_behind >= 0 %}
          <span style="color:#1a7a4a;">{{ progress.ahead_behind }} pages ahead</span>
        {% else %}
          <span style="color:#a93226;">{{ -progress.ahead_behind }} pages behind</span>
        {% endif %}
      </div>
    </div>

    <div class="card">
      <div class="section-title">Today ({{ today }})</div>
      {% if today_entry %}
        <p style="font-size:14px;">
          Already logged today: <strong>{{ today_entry.status | replace('_', ' ') | capitalize }}</strong>
          ({{ today_entry.pages_done }} pages). Logging again below will update it.
        </p>
      {% endif %}
      <button class="btn-save" onclick="logQcp('done')">✅ Done Today</button>
      <button class="btn-delete" onclick="logQcp('not_done')">❌ Not Done Today</button>
      <div style="margin-top:12px;">
        <label>◐ Partial — pages actually read today</label>
        <div class="row">
          <div><input type="text" id="partialPages" placeholder="e.g. 3"></div>
          <div><button class="btn-clear" onclick="logQcp('partial')" style="width:100%;">Log Partial</button></div>
        </div>
      </div>
      <label>Notes (optional)</label>
      <textarea id="qcpNotes" placeholder="optional..."></textarea>
    </div>

    <div class="card">
      <div class="section-title">This Week</div>
      <p style="font-size:14px;">{{ progress.week_done }} done &middot; {{ progress.week_missed }} missed &middot; {{ progress.week_pages }} pages read</p>
    </div>
  {% endif %}
</main>

<script>
function showMsg(text, isError) {
  const box = document.getElementById('msgBox');
  box.innerHTML = `<div class="msg ${isError ? 'msg-error' : 'msg-success'}">${text}</div>`;
  if (!isError) setTimeout(() => location.reload(), 900);
}

function logQcp(action) {
  const fd = new FormData();
  fd.append('action', action);
  fd.append('notes', document.getElementById('qcpNotes').value);
  if (action === 'partial') fd.append('pages_done', document.getElementById('partialPages').value);

  fetch('/api/qcp/log', { method: 'POST', body: fd })
    .then(r => r.json().then(d => ({ ok: r.ok, body: d })))
    .then(({ ok, body }) => {
      if (ok && body.ok) showMsg('✅ Logged.', false);
      else showMsg(body.error || 'Could not log this.', true);
    });
}
</script>
{% endblock %}