{% extends "base.html" %}
{% block title %}Help — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>❓ Help</h1>
  <div><a href="{{ url_for('home') }}">Home</a></div>
</header>
<main style="max-width:760px;">

  <details class="card" open>
    <summary style="cursor:pointer; font-weight:bold; font-size:16px; color:#1a3a5c;">📑 Contents (tap to jump)</summary>
    <div style="margin-top:10px; line-height:2;">
      <a href="#intro">📖 Introduction</a><br>
      <a href="#account">🔐 Login, Registration &amp; Account</a><br>
      <a href="#home">📊 Home Dashboard</a><br>
      <a href="#simple_plan">📿 Simple Plan for Today</a><br>
      <a href="#memorization">📿 My Sura Memorization</a><br>
      <a href="#revision">🔁 Revision</a><br>
      {% if session_is_admin %}<a href="#ssrp">🕌 SSRP <span style="color:#7d6608;">(Admin only)</span></a><br>{% endif %}
      <a href="#qcp">📖 Quran Completion Planner (QCP)</a><br>
      <a href="#fsr">📝 FSR — Find / Study / Reflect</a><br>
      <a href="#smgp">🎯 Special Memo Goal Plans (SMGP)</a><br>
      <a href="#lss">🧩 LSS — Learn Sura Sequence</a><br>
      {% if session_is_admin %}<a href="#tafseer">📚 Tafseer References <span style="color:#7d6608;">(Admin only)</span></a><br>{% endif %}
      <a href="#suras">📋 Browse &amp; Search Suras</a><br>
      <a href="#today_in_hifz">🗓️ Today in Hifz</a><br>
      <a href="#backup">💾 Data Backup</a><br>
      {% if session_is_admin %}<a href="#admin_users">👥 Manage Users <span style="color:#7d6608;">(Admin only)</span></a><br>{% endif %}
      <a href="#limitations">⚠️ Known Limitations</a><br>
    </div>
  </details>

  <div class="card">
    <h2 id="intro" style="margin-top:0;">📖 Introduction</h2>
    <p>IslamInLife Quran App (IQA) helps you track your Quran memorization, revision, recitation planning, and reflections — all from your account, accessible on any device.</p>
    <p>New here? Start with <strong>Simple Plan for Today</strong> or <strong>My Sura Memorization</strong> — most people build up from there. This page explains every section in the app in the order you're most likely to use them.</p>
  </div>

  <div class="card">
    <h2 id="account">🔐 Login, Registration &amp; Account</h2>
    <p>Use <strong>Register New User</strong> on the login screen to create an account. If you forget your password, <strong>Forgot Password?</strong> sends a reset link to your registered email.</p>
    <p>Once logged in, your username appears in the top-right of every page — click it (or go to <strong>Account</strong>) to update your display name or change your password.</p>
    <p>All your data (memorization entries, plans, revisions, reflections) is private to your account — other users, including admins, cannot see your personal records.</p>
  </div>

  <div class="card">
    <h2 id="home">📊 Home Dashboard</h2>
    <p>Your Home page is a quick summary, not a place you enter data directly. Each card links to the actual feature:</p>
    <ul>
      <li><strong>Today in Hifz</strong> — pulls together your Revision Due, Planner, and Goal Plans in one place.</li>
      <li><strong>Hifz Entries / Revised Today / FSR Pending</strong> — quick counters.</li>
      {% if session_is_admin %}<li><strong>SSRP</strong> — only visible to Admin accounts.</li>{% endif %}
      <li><strong>Simple Plan for Today</strong> — your quick daily to-do list.</li>
      <li><strong>My Sura Memorization</strong> — your actual memorization record.</li>
      <li><strong>Browse &amp; Search Suras</strong> — reference info for any sura.</li>
    </ul>
  </div>

  <div class="card">
    <h2 id="simple_plan">📿 Simple Plan for Today</h2>
    <p>A lightweight daily checklist with four sections: <strong>Memorize</strong>, <strong>Revise</strong>, <strong>Recite</strong> (in Salat), and <strong>Visual reading</strong> from Mushaf. Each has its own "Type" dropdown (Memo Type / Revision Type / Recitation Type / Reading Type) with four options: Complete Sura, Single Verse, Verse Range, Multiple Ranges.</p>
    <p>Choosing <strong>Complete Sura</strong> auto-fills Verses as "All" — you don't need to type anything else. The other three types need you to type the actual verse(s).</p>
    <p>Ticking <strong>Done</strong> on a Memorize item automatically adds it to <strong>My Sura Memorization</strong> for you (skipped if a matching entry already exists there) — un-ticking never removes or changes that record, since memorizing something doesn't "un-happen."</p>
  </div>

  <div class="card">
    <h2 id="memorization">📿 My Sura Memorization</h2>
    <p>This is the hub for everything about what you've actually memorized. It has four sections, each with a distinct job:</p>

    <h3>Entry Form — the actual record</h3>
    <p>This is your single source of truth: pick a Sura, choose a Memo Type, enter Verses (or leave it as "All" for a Complete Sura), and set Status (Memorized / In Progress) and Quality (Strong / Average / Weak). Every existing entry can be edited or deleted directly here at any time.</p>

    <h3>Memorized &amp; In-progress</h3>
    <p>A read-only report — percentage memorized per sura, and your overall progress across the whole Quran. It's calculated live from Entry Form; there's nothing to enter here.</p>

    <h3>Planning</h3>
    <p>For scheduling what you <em>haven't</em> memorized yet — not a second place to log what's already done. Marking a plan <strong>Done</strong> automatically creates (or links to) the matching Entry Form record for you. If you try to plan something that's an exact match to something already marked Memorized in Entry Form, the app blocks it — use Revision instead for revisiting something you've already memorized.</p>

    <h3>Sequence</h3>
    <p>A read-only, Quran-ordered list of everything you've memorized (optionally including "In Progress" items) — useful as a quick reference for reciting things in order, e.g. in Salat.</p>
  </div>

  <div class="card">
    <h2 id="revision">🔁 Revision</h2>
    <p>A dedicated space for logging and tracking when you revisit material you've already memorized — separate from Planning, which is only for new memorization.</p>
    <ul>
      <li><strong>Revision Mode Setup</strong> — configure how you track revision.</li>
      <li><strong>Revision Log</strong> — record a revision session.</li>
      <li><strong>Revision Due</strong> — what's due for review based on your settings.</li>
      <li><strong>Revision Summary</strong> — a report of your revision activity over time.</li>
    </ul>
  </div>

  {% if session_is_admin %}
  <div class="card">
    <h2 id="ssrp">🕌 SSRP — Salat Sura Recitation Plan <span style="font-size:12px; color:#7d6608;">(Admin only)</span></h2>
    <p>Plan and track what to recite, set by set (2 rakat per set), for any Salat — Fard, Sunnah, Taraweeh, Witr, etc.</p>
    <ul>
      <li><strong>Salat Types</strong> — manage the list of Salat types (Fajr Fard, Taraweeh, Witr, ...). "Add Common Salat Types" seeds the usual ones in one click.</li>
      <li><strong>My Plans</strong> — create a plan (name, Salat Type, rakat count, and for 3-rakat Salat whether it's Maghrib or Witr; for 4-rakat Fard, an option for the last set to be Al-Fatiha only).</li>
      <li><strong>Fill Sets</strong> — enter the sura/verses for each set. The app enforces the <strong>Short Sura Gap Rule</strong> (two short suras, 86–114, can't be exactly one sura apart in the same set) and blocks reciting the exact same verses twice anywhere in the plan.</li>
      <li><strong>SSRP</strong> (tracking page) — pick any of your plans and tick off sets as recited tonight; the checklist resets automatically each day.</li>
    </ul>
    <p>This whole section is only visible to Admin accounts.</p>
  </div>
  {% endif %}

  <div class="card">
    <h2 id="qcp">📖 Quran Completion Planner (QCP)</h2>
    <p>Two connected tools under one name:</p>
    <h3>Completion Plan</h3>
    <p>Set a daily-pages target and a number of days to complete reading the whole Quran (a Khatm). Each day, check in as <strong>Done</strong>, <strong>Partial</strong> (enter how many pages you actually read), or <strong>Not Done</strong>. You can only have one active plan running at a time — trying to start a new one while another is active takes you straight to checking in on the existing one instead.</p>
    <ul>
      <li><strong>Check-in</strong> — mark today's progress.</li>
      <li><strong>Tracker</strong> — your full daily log, optionally filtered to Not Done days only.</li>
      <li><strong>Completions</strong> — your history of finished Khatms, with a running count.</li>
    </ul>
    <h3>Recitation</h3>
    <p>A separate log for tracking recitation quality — rate your Makhraj (pronunciation/articulation) as you recite, either by <strong>Sura</strong> or by <strong>Mushaf Page</strong>. Pick a mode once; it locks after your first entry, so delete all your entries first if you need to switch modes later.</p>
  </div>

  <div class="card">
    <h2 id="fsr">📝 FSR — Find / Study / Reflect</h2>
    <p>For recording lessons you draw from the Quran, each one moving through three independent stages — <strong>Find</strong>, <strong>Study</strong>, and <strong>Reflect</strong> — each markable done separately, each with its own notes.</p>
    <p>When adding a lesson: Title and Lesson Type are required; you can also add an anchor reference and/or a specific Sura, a description, a source hint, a <strong>Basis</strong> (where/why this lesson came from), tags, a priority (Normal/High), and a "Notify Me" flag.</p>
    <p>The main <strong>Check-in</strong> page only shows lessons still pending at least one stage. The <strong>Lessons</strong> list lets you filter by Pending Find / Pending Study / Pending Reflect, Notify On, High Priority, or Complete.</p>
  </div>

  <div class="card">
    <h2 id="smgp">🎯 Special Memo Goal Plans (SMGP)</h2>
    <p>For structured memorization goals with multiple items and a deadline — e.g. "memorize Juz Amma by Ramadan." A plan has a name, an occasion, a date range, and notes. Add Sura/Verse items to it, and mark each one <strong>Memorized</strong> as you complete it — the plan shows a running done/total count. Only plans with status <strong>Active</strong> appear on the main list.</p>
  </div>

  <div class="card">
    <h2 id="lss">🧩 LSS — Learn Sura Sequence</h2>
    <p>Three parts for practicing and testing the order of the suras:</p>
    <ul>
      <li><strong>Home</strong> — shows a random window of 3–5 consecutive suras to help you learn/practice the sequence, plus your overall progress.</li>
      <li><strong>General Quiz</strong> — multiple-choice questions testing sura-order knowledge in general.</li>
      <li><strong>Hifz Sequence Quiz</strong> — the same idea, but built specifically from the suras you've actually memorized.</li>
    </ul>
    <p>Both quizzes keep track of your answer history for your stats.</p>
  </div>

  {% if session_is_admin %}
  <div class="card">
    <h2 id="tafseer">📚 Tafseer References <span style="font-size:12px; color:#7d6608;">(Admin only)</span></h2>
    <p>Browse and search reference tafseer content by sura and book. <strong>Notes</strong> here are shared, app-wide reference notes tied to the tafseer content itself — not private per-user notes — which is why this whole section is Admin only.</p>
  </div>
  {% endif %}

  <div class="card">
    <h2 id="suras">📋 Browse &amp; Search Suras</h2>
    <p>A reference lookup for any sura — verse counts, Juz, and Mushaf page numbers. Handy any time you just need to check a fact about a sura without it being tied to your memorization records.</p>
  </div>

  <div class="card">
    <h2 id="today_in_hifz">🗓️ Today in Hifz</h2>
    <p>A single combined view pulling together what's due for Revision, your Simple Plan for the day, and your Goal Plan progress — the fastest way to see "what do I need to do today," without opening three separate pages.</p>
  </div>

  <div class="card">
    <h2 id="backup">💾 Data Backup</h2>
    <p>Download a backup of your data from here. Keeping an occasional personal backup is always a good habit, independent of anything the app itself does on the server side.</p>
  </div>

  {% if session_is_admin %}
  <div class="card">
    <h2 id="admin_users">👥 Manage Users <span style="font-size:12px; color:#7d6608;">(Admin only)</span></h2>
    <p>Add, edit, or remove user accounts, and reset a user's password if they're locked out. Only visible to Admin accounts.</p>
  </div>
  {% endif %}

  <div class="card" style="background:#fdedec; color:#922b21;">
    <h2 id="limitations" style="margin-top:0;">⚠️ Known Limitations</h2>
    <p>For now, please avoid these two sections — they're not ready yet and will be fixed in a future update:</p>
    <ul>
      <li><strong>Quran Text Viewer</strong></li>
      <li><strong>Audio Playback</strong></li>
    </ul>
  </div>

</main>
{% endblock %}