{% 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>
  {% if error %}<div class="msg msg-error">{{ error }}</div>{% endif %}

  <div class="card">
    <form method="post">
      <label>লক্ষ্য দিন <span style="font-weight:normal; color:#566573;">(পুরো কুরআন একবার সম্পূর্ণ করতে কত দিন লাগবে)</span></label>
      <input type="text" id="targetDays" name="target_days" placeholder="যেমন 61 (প্রায় ২ মাসে সম্পূর্ণ কুরআনের জন্য)" required oninput="recalcDailyPages()">

      <label>দৈনিক পৃষ্ঠা লক্ষ্য <span style="font-weight:normal; color:#566573;">(স্বয়ংক্রিয়ভাবে গণনা করা)</span></label>
      <input type="text" id="dailyPagesDisplay" readonly placeholder="প্রথমে উপরে লক্ষ্য দিন লিখুন" 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>এন্ট্রি মোড</label>
          <select name="entry_mode">
            <option value="manual">ম্যানুয়াল (সম্পন্ন/সম্পন্ন হয়নি/আংশিক নির্বাচন করুন)</option>
            <option value="auto_done">স্বয়ংক্রিয়-সম্পন্ন (অন্যথায় চিহ্নিত না করলে সম্পন্ন ধরে নিন)</option>
          </select>
        </div>
        <div>
          <label>অগ্রগতি ট্র্যাকার ভিউ</label>
          <select name="progress_tracker">
            <option value="all_days">সকল দিন দেখান</option>
            <option value="not_done_only">শুধুমাত্র সম্পন্ন-হয়নি দেখান</option>
          </select>
        </div>
      </div>

      <label>পূরণের সময় (যদি কোনো দিন মিস হয়)</label>
      <select name="compensation_time">
        <option value="None">কোনোটি নয়</option>
        <option value="একই দিন রাতে">একই দিন রাতে</option>
        <option value="পরের দিন যোহরের আগে">পরের দিন যোহরের আগে</option>
      </select>

      <label>নোট (ঐচ্ছিক)</label>
      <textarea name="plan_note" placeholder="ঐচ্ছিক"></textarea>

      <button type="submit" class="btn-save">💾 পরিকল্পনা তৈরি করুন</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 + ' পৃষ্ঠা/দিন';
  note.textContent = `${TOTAL_QURAN_PAGES} পৃষ্ঠা ÷ ${days} দিন, আপনার লক্ষ্যের মধ্যে শেষ করার জন্য গোল করা হয়েছে।`;
}
</script>
{% endblock %}