{% extends "base.html" %}
{% block title %}আজকের সহজ পরিকল্পনা — ইসলামইনলাইফ কুরআন অ্যাপ{% endblock %}
{% block body %}
<header>
  <h1>📿 আজকের সহজ পরিকল্পনা</h1>
  <div>{{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('logout') }}">লগআউট</a></div>
</header>
<main>
  <div id="msgBox"></div>

  <div class="card">
    <label>পরিকল্পনা ও বাস্তবায়নের তারিখ</label>
    <input type="date" id="planDate" value="{{ plan_date }}" onchange="window.location.href=APP_PREFIX + '/today-plan?date=' + this.value">
    <a class="btn" style="background:#1a5276; display:inline-block; text-decoration:none; margin-top:8px;"
       href="{{ url_for('today_plan_view') }}" target="_blank" rel="noopener">
      📋 আজকের পরিকল্পনা দেখুন
    </a>
    <a class="btn" style="background:#5b2c6f; display:inline-block; text-decoration:none; margin-top:8px;"
       href="{{ url_for('all_plans_view') }}" target="_blank" rel="noopener">
      🗂️ সকল পরিকল্পনা দেখুন
    </a>
  </div>

  {% macro section(key, cls, icon, title, type_label) %}
  <div class="card {{ cls }}">
    <div class="section-title">{{ icon }} {{ title }}</div>
    <div id="{{ key }}_items">
      {% for it in items[key] %}
      <div class="row" id="item_{{ it.id }}" style="align-items:center; margin-bottom:8px;" data-section="{{ key }}">
        {% if key == "visual" %}<div style="max-width:90px;"><label>পৃষ্ঠা</label><input type="text" class="item-page" id="item_{{ it.id }}_page" value="{{ it.page or '' }}" readonly></div>{% endif %}
        <div>
          <label>সূরা</label>
          <select class="item-sura" id="item_{{ it.id }}_sura" disabled onchange="{% if key == 'visual' %}autoFillItemPage({{ it.id }}){% endif %}">
            {% for s in suras %}<option value="{{ s.sura_no }}" {% if s.sura_no == it.sura_no %}selected{% endif %}>{{ s.label }}</option>{% endfor %}
          </select>
        </div>
        <div>
          <label>{{ type_label }}</label>
          <select class="item-memotype" id="item_{{ it.id }}_memotype" disabled onchange="handleItemMemoTypeChange({{ it.id }})">
            <option value="Complete Sura" {% if it.memo_type == 'Complete Sura' %}selected{% endif %}>সম্পূর্ণ সূরা</option>
            <option value="Single Verse" {% if it.memo_type == 'Single Verse' %}selected{% endif %}>একক আয়াত</option>
            <option value="Verse Range" {% if it.memo_type == 'Verse Range' %}selected{% endif %}>আয়াতের পরিসীমা</option>
            <option value="Multiple Ranges" {% if it.memo_type == 'Multiple Ranges' %}selected{% endif %}>একাধিক পরিসীমা</option>
          </select>
        </div>
        <div>
          <label>আয়াত</label>
          <input type="text" class="item-verses" id="item_{{ it.id }}_verses" value="{{ it.verses }}" readonly
                 {% if key == "visual" %}onchange="autoFillItemPage({{ it.id }})"{% endif %}>
        </div>
        <div class="done-check">
          <input type="checkbox" onchange="toggleItem({{ it.id }}, this.checked)" {% if it.done %}checked{% endif %}>
          <label style="margin:0;">সম্পন্ন</label>
        </div>
        <div id="item_{{ it.id }}_actions">
          <a href="#" onclick="startEditItem({{ it.id }}); return false;" style="font-size:13px; margin-right:8px;">সম্পাদনা</a>
          <a href="#" onclick="deleteItem({{ it.id }}); return false;" style="color:#a93226; font-size:13px;">মুছুন</a>
        </div>
      </div>
      {% endfor %}
    </div>

    <div class="row" id="{{ key }}_addrow" style="align-items:flex-end;">
      {% if key == "visual" %}<div style="max-width:90px;"><label>পৃষ্ঠা</label><input type="text" id="{{ key }}_new_page" readonly placeholder="স্বয়ংক্রিয়ভাবে পূরণ হবে"></div>{% endif %}
      <div>
        <label>সূরা</label>
        <select id="{{ key }}_new_sura" onchange="{% if key == 'visual' %}autoFillPage('{{ key }}'){% endif %}">
          <option value="">— কোনোটি নয় —</option>
          {% for s in suras %}<option value="{{ s.sura_no }}">{{ s.label }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label>{{ type_label }}</label>
        <select id="{{ key }}_new_memotype" onchange="handleNewMemoTypeChange('{{ key }}')">
          <option value="Complete Sura">সম্পূর্ণ সূরা</option>
          <option value="Single Verse">একক আয়াত</option>
          <option value="Verse Range">আয়াতের পরিসীমা</option>
          <option value="Multiple Ranges">একাধিক পরিসীমা</option>
        </select>
      </div>
      <div>
        <label>আয়াত</label>
        <input type="text" id="{{ key }}_new_verses" placeholder="যেমন All | 5 | 1-15"
               {% if key == "visual" %}onchange="autoFillPage('{{ key }}')"{% endif %}>
      </div>
      <div><button class="btn-save" style="margin:0;" onclick="addItem('{{ key }}')">+ যোগ করুন</button></div>
    </div>
  </div>
  {% endmacro %}

  {{ section("memorize", "memorize", "📖", "মুখস্থ করুন (সূরা/আয়াত)", "মুখস্থকরণের ধরন") }}
  {{ section("revise", "revise", "🔁", "পুনরাবৃত্তি করুন (সূরা/আয়াত)", "পুনরাবৃত্তির ধরন") }}
  {{ section("recite", "recite", "🕌", "আজ সালাতে এই সূরা/আয়াত(সমূহ) তিলাওয়াত করুন", "তিলাওয়াতের ধরন") }}
  {{ section("visual", "visual", "👁️", "মুসহাফ থেকে দৃষ্টি পাঠ", "পাঠের ধরন") }}

  <div class="card">
    <label>নোট (ঐচ্ছিক)</label>
    <textarea id="notes" placeholder="আজকের জন্য অন্য কিছু...">{{ notes }}</textarea>
    <button class="btn-save" onclick="saveNotes()">💾 নোট সংরক্ষণ করুন</button>
  </div>

  <div class="card">
    <button class="btn-delete" onclick="deletePlan()">🗑 এই সম্পূর্ণ পরিকল্পনা মুছে ফেলুন</button>
  </div>

  <div class="card">
    <div class="section-title">📋 সাম্প্রতিক পরিকল্পনা (খুলতে একটি সারিতে ট্যাপ করুন)</div>
    <table>
      <tr><th>তারিখ</th><th>যা পরিকল্পিত</th></tr>
      {% for p in recent %}
      <tr class="plan-row" onclick="window.location.href=APP_PREFIX + '/today-plan?date={{ p.plan_date }}'"><td data-label="তারিখ">{{ p.plan_date | fmt_date }}</td><td data-label="যা পরিকল্পিত">{{ p.summary }}</td></tr>
      {% endfor %}
    </table>
  </div>
</main>

<script>
const PLAN_DATE = "{{ plan_date }}";

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

function autoFillPage(key) {
  const sura = document.getElementById(key + '_new_sura').value;
  const verses = document.getElementById(key + '_new_verses').value || 'All';
  const pageField = document.getElementById(key + '_new_page');
  if (!sura) { pageField.value = ''; return; }
  fetch(APP_PREFIX + `/api/plan/auto-fill-page?sura_no=${sura}&verses=${encodeURIComponent(verses)}`)
    .then(r => r.json())
    .then(d => { pageField.value = d.page || ''; });
}

// Verses is only required (and only meaningful) for Single Verse, Verse
// Range, and Multiple Ranges. Complete Sura always covers every verse,
// so it's auto-filled as "All" instead of requiring the user to type
// it -- mirrors the same fix already applied on the Memorization page.
function handleNewMemoTypeChange(key) {
  const memoType = document.getElementById(key + '_new_memotype').value;
  const versesField = document.getElementById(key + '_new_verses');
  if (memoType === 'Complete Sura') {
    versesField.value = 'All';
  } else if (versesField.value === 'All') {
    versesField.value = '';
  }
  if (key === 'visual') autoFillPage(key);
}

function addItem(section) {
  const sura = document.getElementById(section + '_new_sura').value;
  const memoTypeField = document.getElementById(section + '_new_memotype');
  const memoType = memoTypeField ? memoTypeField.value : '';
  let verses = document.getElementById(section + '_new_verses').value.trim();
  if (memoType === 'Complete Sura' && !verses) verses = 'All';

  if (!sura) { showMsg('অনুগ্রহ করে একটি সূরা নির্বাচন করুন।', true); return; }
  if (memoType !== 'Complete Sura' && !verses) {
    showMsg('অনুগ্রহ করে এই মুখস্থকরণের ধরনের জন্য আয়াত লিখুন।', true);
    return;
  }

  const fd = new FormData();
  fd.append('plan_date', PLAN_DATE);
  fd.append('section', section);
  fd.append('sura_no', sura);
  fd.append('memo_type', memoType);
  fd.append('verses', verses);
  if (section === 'visual') {
    fd.append('page', document.getElementById('visual_new_page').value);
  }

  fetch(APP_PREFIX + '/api/plan/add-item', { method: 'POST', body: fd })
    .then(r => r.json().then(d => ({ ok: r.ok, body: d })))
    .then(({ ok, body }) => {
      if (ok && body.ok) { showMsg('✅ যোগ করা হয়েছে।', false); setTimeout(() => location.reload(), 500); }
      else showMsg(body.error || 'যোগ করা যায়নি।', true);
    });
}

function toggleItem(itemId, checked) {
  const fd = new FormData();
  fd.append('item_id', itemId);
  fd.append('done', checked ? '1' : '0');
  fetch(APP_PREFIX + '/api/plan/toggle-item', { method: 'POST', body: fd })
    .then(r => r.json())
    .then(d => { if (!d.ok) showMsg(d.error || 'আপডেট করা যায়নি।', true); });
}

function startEditItem(itemId) {
  document.getElementById(`item_${itemId}_sura`).disabled = false;
  document.getElementById(`item_${itemId}_verses`).readOnly = false;
  const memoTypeField = document.getElementById(`item_${itemId}_memotype`);
  if (memoTypeField) memoTypeField.disabled = false;
  const pageField = document.getElementById(`item_${itemId}_page`);
  if (pageField) pageField.readOnly = true; // page stays auto-filled, not hand-typed

  document.getElementById(`item_${itemId}_actions`).innerHTML = `
    <a href="#" onclick="saveEditItem(${itemId}); return false;" style="color:#1a7a4a; font-size:13px; margin-right:8px;">সংরক্ষণ</a>
    <a href="#" onclick="cancelEditItem(${itemId}); return false;" style="font-size:13px;">বাতিল</a>
  `;
}

function cancelEditItem(itemId) {
  location.reload(); // simplest reliable way to discard an in-progress edit
}

function handleItemMemoTypeChange(itemId) {
  const memoType = document.getElementById(`item_${itemId}_memotype`).value;
  const versesField = document.getElementById(`item_${itemId}_verses`);
  if (memoType === 'Complete Sura') {
    versesField.value = 'All';
  } else if (versesField.value === 'All') {
    versesField.value = '';
  }
  autoFillItemPage(itemId); // no-op for non-visual rows, which have no page field
}

function autoFillItemPage(itemId) {
  const sura = document.getElementById(`item_${itemId}_sura`).value;
  const verses = document.getElementById(`item_${itemId}_verses`).value || 'All';
  const pageField = document.getElementById(`item_${itemId}_page`);
  if (!sura || !pageField) return;
  fetch(APP_PREFIX + `/api/plan/auto-fill-page?sura_no=${sura}&verses=${encodeURIComponent(verses)}`)
    .then(r => r.json())
    .then(d => { pageField.value = d.page || ''; });
}

function saveEditItem(itemId) {
  const sura = document.getElementById(`item_${itemId}_sura`).value;
  const memoTypeField = document.getElementById(`item_${itemId}_memotype`);
  const memoType = memoTypeField ? memoTypeField.value : '';
  let verses = document.getElementById(`item_${itemId}_verses`).value.trim();
  const pageField = document.getElementById(`item_${itemId}_page`);
  if (memoType === 'Complete Sura' && !verses) verses = 'All';

  if (!sura) { showMsg('অনুগ্রহ করে একটি সূরা নির্বাচন করুন।', true); return; }
  if (memoType !== 'Complete Sura' && !verses) {
    showMsg('অনুগ্রহ করে এই মুখস্থকরণের ধরনের জন্য আয়াত লিখুন।', true);
    return;
  }

  const fd = new FormData();
  fd.append('item_id', itemId);
  fd.append('sura_no', sura);
  fd.append('memo_type', memoType);
  fd.append('verses', verses);
  if (pageField) fd.append('page', pageField.value);

  fetch(APP_PREFIX + '/api/plan/update-item', { method: 'POST', body: fd })
    .then(r => r.json().then(d => ({ ok: r.ok, body: d })))
    .then(({ ok, body }) => {
      if (ok && body.ok) { showMsg('✅ আপডেট করা হয়েছে।', false); setTimeout(() => location.reload(), 500); }
      else showMsg(body.error || 'আপডেট করা যায়নি।', true);
    });
}

function deleteItem(itemId) {
  if (!confirm('এই আইটেমটি সরিয়ে ফেলবেন?')) return;
  const fd = new FormData();
  fd.append('item_id', itemId);
  fetch(APP_PREFIX + '/api/plan/delete-item', { method: 'POST', body: fd })
    .then(() => location.reload());
}

function saveNotes() {
  const fd = new FormData();
  fd.append('plan_date', PLAN_DATE);
  fd.append('notes', document.getElementById('notes').value);
  fetch(APP_PREFIX + '/api/plan/update-notes', { method: 'POST', body: fd })
    .then(r => r.json())
    .then(d => { if (d.ok) showMsg('✅ নোট সংরক্ষিত হয়েছে।', false); else showMsg('নোট সংরক্ষণ করা যায়নি।', true); });
}

function deletePlan() {
  if (!confirm('এই তারিখের সম্পূর্ণ পরিকল্পনা, সকল আইটেমসহ মুছে ফেলবেন? এটি পূর্বাবস্থায় ফেরানো যাবে না।')) return;
  const fd = new FormData();
  fd.append('plan_date', PLAN_DATE);
  fetch(APP_PREFIX + '/api/plan/delete', { method: 'POST', body: fd })
    .then(() => { showMsg('মুছে ফেলা হয়েছে।', false); setTimeout(() => location.reload(), 500); });
}

// Run once on load: each "Add new" row defaults to "Complete Sura", so
// Verses needs to be set to "All" immediately, not only on a later
// change event -- same reasoning as the Memorization page fix.
['memorize', 'revise', 'recite', 'visual'].forEach(handleNewMemoTypeChange);
</script>
{% endblock %}