{% extends "base.html" %}
{% block title %}New QCP Plan — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>➕ New QCP Plan</h1>
  <div><a href="{{ url_for('qcp_checkin') }}">Check-In</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% if error %}<div class="msg msg-error">{{ error }}</div>{% endif %}

  <div class="card">
    <form method="post">
      <label>Target Days <span style="font-weight:normal; color:#566573;">(how many days to complete the whole Quran once)</span></label>
      <input type="text" id="targetDays" name="target_days" placeholder="e.g. 61 (for a full Quran in ~2 months)" required oninput="recalcDailyPages()">

      <label>Daily Pages Target <span style="font-weight:normal; color:#566573;">(auto-calculated)</span></label>
      <input type="text" id="dailyPagesDisplay" readonly placeholder="Enter Target Days above first" style="background:#eef1f3; cursor:not-allowed;">
      <div id="dailyPagesNote" style="font-size:12px; color:#566573; margin:-6px 0 10px;"></div>

      <div class="row">
        <div>
          <label>Entry Mode</label>
          <select name="entry_mode">
            <option value="manual">Manual (choose Done/Not Done/Partial)</option>
            <option value="auto_done">Auto-Done (assume done unless marked otherwise)</option>
          </select>
        </div>
        <div>
          <label>Progress Tracker View</label>
          <select name="progress_tracker">
            <option value="all_days">Show All Days</option>
            <option value="not_done_only">Show Not-Done Only</option>
          </select>
        </div>
      </div>

      <label>Compensation Time (if you miss a day)</label>
      <select name="compensation_time">
        <option value="None">None</option>
        <option value="Same day night">Same day night</option>
        <option value="Next day before Zuhr">Next day before Zuhr</option>
      </select>

      <label>Notes (optional)</label>
      <textarea name="plan_note" placeholder="optional"></textarea>

      <button type="submit" class="btn-save">💾 Create Plan</button>
    </form>
  </div>
</main>

<script>
// The single source of truth for the total content-page count is the
// server (services/qcp_service.py's TOTAL_QURAN_PAGES) -- passed in here
// rather than hardcoded, so this can never silently drift out of sync
// with the number the server actually uses when it creates the plan.
const TOTAL_QURAN_PAGES = {{ total_quran_pages }};

function recalcDailyPages() {
  const daysField = document.getElementById('targetDays');
  const display = document.getElementById('dailyPagesDisplay');
  const note = document.getElementById('dailyPagesNote');
  const days = parseInt(daysField.value, 10);

  if (!days || days <= 0) {
    display.value = '';
    note.textContent = '';
    return;
  }

  const dailyPages = Math.ceil(TOTAL_QURAN_PAGES / days);
  display.value = dailyPages + ' pages/day';
  note.textContent = `${TOTAL_QURAN_PAGES} pages ÷ ${days} days, rounded up so you finish within your target.`;
}
</script>
{% endblock %}