{% extends "base.html" %}
{% block title %}Planning — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🗓️ Memorization Planning</h1>
  <div><a href="{{ url_for('memorization') }}">Entry Form</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div id="msgBox"></div>

  <div class="card" style="background:#eaf2fb; font-size:13px; color:#1a3a5c;">
    ℹ️ <strong>How this works:</strong> Planning is for what you <em>haven't</em> memorized yet.
    Marking a plan <strong>Done</strong> automatically creates (or links to) a record in
    <a href="{{ url_for('memorization') }}">Entry Form</a> — you don't need to enter it there separately.
    Already memorized something and want to revisit or strengthen it? Use
    <a href="{{ url_for('revision_log') }}">Revision</a> instead of planning it again here.
  </div>

  <div class="card">
    <label>Filter by status</label>
    <select onchange="window.location.href='/memorization/planning?status=' + this.value">
      {% for opt in ["All", "Pending", "Done", "Missed"] %}
      <option value="{{ opt }}" {% if opt == status_filter %}selected{% endif %}>{{ opt }}</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 }} &middot; {{ p.date_from }} → {{ p.date_to }} &middot;
          <span style="font-weight:bold;">{{ p.status }}</span>
        </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) }}">Linked to Entry Form</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')">Done</button>
        <button class="btn-delete" style="padding:6px 10px; font-size:12px;" onclick="markPlan({{ p.id }}, 'Missed')">Missed</button><br>
        <a href="#" onclick="deletePlan({{ p.id }}); return false;" style="font-size:12px; color:#a93226;">Delete</a>
      </div>
    </div>
  </div>
  {% endfor %}
  {% if not plans %}
    <div class="card"><p>No plans match this filter.</p></div>
  {% endif %}

  <div class="card">
    <div class="section-title">Add New Plan</div>
    <label>Sura</label>
    <select id="p_sura">
      {% for s in suras %}<option value="{{ s.sura_no }}">{{ s.label }}</option>{% endfor %}
    </select>
    <label>Verses</label>
    <input type="text" id="p_verses" placeholder="e.g. All | 5 | 1-15">
    <div class="row">
      <div>
        <label>Plan Type</label>
        <select id="p_type">
          <option>Daily</option><option>Weekly</option><option>Fortnightly</option><option>Monthly</option>
        </select>
      </div>
      <div>
        <label>Date From</label>
        <input type="date" id="p_from" value="{{ today }}">
      </div>
      <div>
        <label>Date To</label>
        <input type="date" id="p_to" value="{{ today }}">
      </div>
    </div>
    <label>Notes</label>
    <textarea id="p_notes" placeholder="optional"></textarea>
    <button class="btn-save" onclick="savePlan()">💾 Save Plan</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('/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('✅ Saved.', false);
      else showMsg(body.error || 'Could not save.', true);
    });
}

function markPlan(id, status) {
  const fd = new FormData();
  fd.append('plan_id', id);
  fd.append('status', status);
  fetch('/api/planning/mark', { method: 'POST', body: fd })
    .then(r => r.json())
    .then(d => {
      if (status === 'Done' && d.created_entry) {
        showMsg('✅ Marked Done — created a new Entry Form record for this.', false);
      } else if (status === 'Done' && d.linked_memo_id) {
        showMsg('✅ Marked Done — linked to your existing Entry Form record for this.', false);
      } else {
        showMsg('✅ Updated.', false);
      }
    });
}

function deletePlan(id) {
  if (!confirm('Delete this plan?')) return;
  const fd = new FormData();
  fd.append('plan_id', id);
  fetch('/api/planning/delete', { method: 'POST', body: fd }).then(() => location.reload());
}
</script>
{% endblock %}