{% extends "base.html" %}
{% block title %}পরিকল্পনা পরিচালনা করুন — ইসলামইনলাইফ কুরআন অ্যাপ{% endblock %}
{% block body %}
<header>
  <h1>🗓️ মুখস্থকরণ পরিকল্পনা পরিচালনা করুন</h1>
  <div><a href="{{ url_for('memorization') }}">এন্ট্রি ফর্ম</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">হোম</a></div>
</header>
<main>
  <div id="msgBox"></div>

  <div class="card" style="background:#eaf2fb; font-size:13px; color:#1a3a5c;">
    ℹ️ <strong>এটি কীভাবে কাজ করে:</strong> পরিকল্পনা এমন কিছুর জন্য যা আপনি <em>এখনও</em> মুখস্থ করেননি।
    একটি পরিকল্পনা <strong>সম্পন্ন</strong> চিহ্নিত করলে স্বয়ংক্রিয়ভাবে
    <a href="{{ url_for('memorization') }}">এন্ট্রি ফর্মে</a> একটি রেকর্ড তৈরি হয় (অথবা লিংক হয়) — আপনাকে সেখানে আলাদাভাবে এটি লিখতে হবে না।
    ইতিমধ্যে কিছু মুখস্থ করেছেন এবং তা পুনরায় দেখতে বা শক্তিশালী করতে চান? এখানে আবার পরিকল্পনা না করে
    <a href="{{ url_for('revision_log') }}">পুনরাবৃত্তি</a> ব্যবহার করুন।
  </div>

  <div class="card">
    <label>অবস্থা অনুযায়ী ফিল্টার করুন</label>
    <select onchange="window.location.href=APP_PREFIX + '/memorization/planning?status=' + this.value">
      {% for opt in ["All", "Pending", "Done", "Missed"] %}
      <option value="{{ opt }}" {% if opt == status_filter %}selected{% endif %}>{{ opt | bn_status }}</option>
      {% endfor %}
    </select>
  </div>

  {% for p in plans %}
  <div class="card">
    <div style="display:flex; justify-content:space-between; align-items:flex-start;">
      <div>
        <strong>{{ p.sura_name }}</strong> — {{ p.verse_detail }}
        <div style="font-size:12px; color:#566573;">
          {{ p.plan_type | bn_status }} &middot; {{ p.date_from | fmt_date }} → {{ p.date_to | fmt_date }} &middot;
          <span style="font-weight:bold;">{{ p.status | bn_status }}</span>
          {% if p.status == "Pending" and p.days_remaining is not none %}
            &middot; <span style="{% if p.days_remaining < 0 %}color:#a93226;{% elif p.days_remaining <= 2 %}color:#e67e22;{% else %}color:#566573;{% endif %} font-weight:bold;">{{ p.days_remaining | days_remaining_text }}</span>
          {% endif %}
        </div>
        {% if p.notes %}<div style="font-size:12px; margin-top:4px;">{{ p.notes }}</div>{% endif %}
        {% if p.linked_memo_id %}
          <div style="font-size:12px; margin-top:4px;">
            🔗 <a href="{{ url_for('memorization', sura_no=p.sura_no) }}">এন্ট্রি ফর্মের সাথে লিংক করা</a>
          </div>
        {% endif %}
      </div>
      <div style="text-align:right;">
        <button class="btn-save" style="padding:6px 10px; font-size:12px;" onclick="markPlan({{ p.id }}, 'Done')">সম্পন্ন</button>
        <button class="btn-delete" style="padding:6px 10px; font-size:12px;" onclick="markPlan({{ p.id }}, 'Missed')">মিস হয়েছে</button><br>
        <a href="#" onclick="deletePlan({{ p.id }}); return false;" style="font-size:12px; color:#a93226;">মুছুন</a>
      </div>
    </div>
  </div>
  {% endfor %}
  {% if not plans %}
    <div class="card"><p>এই ফিল্টারের সাথে কোনো পরিকল্পনা মেলে না।</p></div>
  {% endif %}

  <div class="card">
    <div class="section-title">নতুন পরিকল্পনা যোগ করুন</div>
    <label>সূরা</label>
    <select id="p_sura">
      {% for s in suras %}<option value="{{ s.sura_no }}">{{ s.label }}</option>{% endfor %}
    </select>
    <label>আয়াত</label>
    <input type="text" id="p_verses" placeholder="যেমন All | 5 | 1-15">
    <div class="row">
      <div>
        <label>পরিকল্পনার ধরন</label>
        <select id="p_type">
          <option value="Daily">দৈনিক</option><option value="Weekly">সাপ্তাহিক</option><option value="Fortnightly">পাক্ষিক</option><option value="Monthly">মাসিক</option>
        </select>
      </div>
      <div>
        <label>শুরুর তারিখ</label>
        <input type="date" id="p_from" value="{{ today }}">
      </div>
      <div>
        <label>শেষ তারিখ</label>
        <input type="date" id="p_to" value="{{ today }}">
      </div>
    </div>
    <label>নোট</label>
    <textarea id="p_notes" placeholder="ঐচ্ছিক"></textarea>
    <button class="btn-save" onclick="savePlan()">💾 পরিকল্পনা সংরক্ষণ করুন</button>
  </div>
</main>

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

function savePlan() {
  const fd = new FormData();
  fd.append('sura_no', document.getElementById('p_sura').value);
  fd.append('verse_detail', document.getElementById('p_verses').value);
  fd.append('plan_type', document.getElementById('p_type').value);
  fd.append('date_from', document.getElementById('p_from').value);
  fd.append('date_to', document.getElementById('p_to').value);
  fd.append('notes', document.getElementById('p_notes').value);
  fetch(APP_PREFIX + '/api/planning/save', { method: 'POST', body: fd })
    .then(r => r.json().then(d => ({ ok: r.ok, body: d })))
    .then(({ ok, body }) => {
      if (ok && body.ok) showMsg('✅ সংরক্ষণ করা হয়েছে।', false);
      else showMsg(body.error || 'সংরক্ষণ করা যায়নি।', true);
    });
}

function markPlan(id, status) {
  const fd = new FormData();
  fd.append('plan_id', id);
  fd.append('status', status);
  fetch(APP_PREFIX + '/api/planning/mark', { method: 'POST', body: fd })
    .then(r => r.json())
    .then(d => {
      if (status === 'Done' && d.created_entry) {
        showMsg('✅ সম্পন্ন চিহ্নিত করা হয়েছে — এর জন্য একটি নতুন এন্ট্রি ফর্ম রেকর্ড তৈরি করা হয়েছে।', false);
      } else if (status === 'Done' && d.linked_memo_id) {
        showMsg('✅ সম্পন্ন চিহ্নিত করা হয়েছে — এর জন্য আপনার বিদ্যমান এন্ট্রি ফর্ম রেকর্ডের সাথে লিংক করা হয়েছে।', false);
      } else {
        showMsg('✅ আপডেট করা হয়েছে।', false);
      }
    });
}

function deletePlan(id) {
  if (!confirm('এই পরিকল্পনাটি মুছে ফেলবেন?')) return;
  const fd = new FormData();
  fd.append('plan_id', id);
  fetch(APP_PREFIX + '/api/planning/delete', { method: 'POST', body: fd }).then(() => location.reload());
}
</script>
{% endblock %}