#+TITLE: Wird Tracker
#+OPTIONS: toc:nil num:nil
#+NO_SIDENOTES: t
#+COMMENTS: nil
#+SLUG: wird-tracker

This page tracks my daily awrād and spiritual practices.

#+BEGIN_EXPORT html

<div id="wird-app">

  <!-- Today Panel -->
  <section id="today-panel" class="wird-panel">
    <div class="wird-panel-header">
      <h2 id="today-date">—</h2>
      <div id="today-progress-wrap">
        <div id="today-progress-bar"><div id="today-progress-fill"></div></div>
        <span id="today-progress-label">0 / 5 complete</span>
      </div>
    </div>
    <div id="wird-cards"></div>
  </section>

  <!-- Nafl Prayers Panel -->
  <section id="nafl-panel" class="wird-panel">
    <div class="wird-panel-header">
      <h2>Nafl Prayers</h2>
    </div>
    <div id="nafl-cards">

      <div class="nafl-card" id="nafl-salatul_tawbah">
        <div class="nafl-icon">🤲</div>
        <div class="nafl-name">Ṣalāt al-Tawbah</div>
        <div class="nafl-sub">2 rakʿāt · repentance</div>
        <button class="nafl-toggle" data-type="salatul_tawbah">Mark as prayed</button>
      </div>

      <div class="nafl-card" id="nafl-salatul_hajaat">
        <div class="nafl-icon">🌙</div>
        <div class="nafl-name">Ṣalāt al-Ḥājah</div>
        <div class="nafl-sub">2 rakʿāt · need &amp; supplication</div>
        <button class="nafl-toggle" data-type="salatul_hajaat">Mark as prayed</button>
      </div>

      <div class="nafl-card" id="nafl-tahajjud">
        <div class="nafl-icon">⭐</div>
        <div class="nafl-name">Tahajjud</div>
        <div class="nafl-sub">night vigil prayer</div>
        <button class="nafl-toggle" data-type="tahajjud">Mark as prayed</button>
      </div>

    </div>
    <div id="nafl-completion-bar-wrap">
      <div id="nafl-bar-track">
        <div id="nafl-completion-bar"></div>
      </div>
      <span id="nafl-completion-label">0 / 3 today</span>
    </div>
  </section>

  <!-- Shaykh Meeting Panel -->
  <section id="meeting-panel" class="wird-panel">
    <div class="wird-panel-header">
      <h2>Meeting with the Shaykh</h2>
      <button id="log-meeting-btn" class="btn-primary">+ Log Meeting</button>
    </div>
    <div id="meeting-panel-body">
      <p style="color:var(--muted);font-style:italic">Loading…</p>
    </div>
  </section>

  <!-- Khatm Tracker -->
  <section id="khatm-panel" class="wird-panel">
    <div class="wird-panel-header">
      <h2>Khatm — Qurʾān Completions</h2>
      <button id="log-khatm-btn" class="btn-primary">+ Log Khatm</button>
    </div>
    <div id="khatm-stats-row">
      <div class="stat-chip">
        <span class="stat-val" id="khatm-total">—</span>
        <span class="stat-lbl">total khatms</span>
      </div>
      <div class="stat-chip">
        <span class="stat-val" id="khatm-this-year">—</span>
        <span class="stat-lbl">this year</span>
      </div>
      <div class="stat-chip">
        <span class="stat-val" id="khatm-avg-days">—</span>
        <span class="stat-lbl">avg days between</span>
      </div>
      <div class="stat-chip">
        <span class="stat-val" id="khatm-last">—</span>
        <span class="stat-lbl">last completed</span>
      </div>
    </div>
    <div id="khatm-list">
      <p style="color:var(--muted);font-style:italic">Loading…</p>
    </div>
  </section>

  <!-- Khatm Modal -->
  <dialog id="khatm-modal">
    <form id="khatm-form" method="dialog">
      <h3>Log Khatm</h3>
      <div class="modal-body">

        <div class="field-group">
          <label for="khatm-date">Date completed</label>
          <input type="date" id="khatm-date" required>
        </div>

        <div class="field-group">
          <label for="khatm-recitation">Recitation type <span class="optional">(optional)</span></label>
          <select id="khatm-recitation">
            <option value="">— select —</option>
            <option value="tilawah">Tilāwah (reading)</option>
            <option value="hifz">Ḥifẓ (memorisation)</option>
            <option value="tadabbur">Tadabbur (reflection)</option>
          </select>
        </div>

        <div class="field-group">
          <label for="khatm-notes">Notes <span class="optional">(optional)</span></label>
          <textarea id="khatm-notes" rows="3" placeholder="Any reflections…"></textarea>
        </div>

      </div>
      <div id="khatm-modal-actions">
        <button type="button" id="khatm-cancel">Cancel</button>
        <button type="submit" class="btn-primary">Save</button>
      </div>
    </form>
  </dialog>

  <!-- Log Entry Modal -->
  <dialog id="log-modal">
    <form id="log-form" method="dialog">
      <h3 id="modal-title">Log Entry</h3>
      <div class="modal-body">

        <div class="field-group">
          <label for="log-date">Date</label>
          <input type="date" id="log-date" required>
        </div>

        <div class="field-group">
          <label for="log-type">Wird</label>
          <select id="log-type" required>
            <option value="durood">Durood</option>
            <option value="istighfar">Istighfar</option>
            <option value="quran">Qurʾān (juz)</option>
            <option value="muraqabah">Murāqabah (min)</option>
            <option value="wuqoof_qalbi">Wuqūf Qalbī</option>
            <option value="shaykh_meeting" style="display:none">Meeting with Shaykh</option>
          </select>
        </div>

        <!-- Numeric amount — count/juz/min wirds -->
        <div class="field-group" id="value-group">
          <label for="log-value">Amount</label>
          <input type="number" id="log-value" min="0" step="0.5" placeholder="0">
        </div>

        <!-- Rating picker — wuqoof qalbi only -->
        <div class="field-group" id="rating-group" style="display:none">
          <label>Quality of presence</label>
          <div class="modal-pips" id="modal-pips">
            <button type="button" class="modal-pip" data-val="1">
              <span class="pip-dot"></span>
              <span class="pip-lbl">distracted</span>
            </button>
            <button type="button" class="modal-pip" data-val="2">
              <span class="pip-dot"></span>
              <span class="pip-lbl">scattered</span>
            </button>
            <button type="button" class="modal-pip" data-val="3">
              <span class="pip-dot"></span>
              <span class="pip-lbl">present</span>
            </button>
            <button type="button" class="modal-pip" data-val="4">
              <span class="pip-dot"></span>
              <span class="pip-lbl">attentive</span>
            </button>
            <button type="button" class="modal-pip" data-val="5">
              <span class="pip-dot"></span>
              <span class="pip-lbl">absorbed</span>
            </button>
          </div>
          <input type="hidden" id="log-rating-value">
        </div>

        <!-- Shaykh meeting note -->
        <div class="field-group" id="shaykh-group" style="display:none">
          <p style="font-size:.85rem;color:var(--muted);margin:0">Set the date above to when the meeting took place.</p>
        </div>

        <div class="field-group">
          <label for="log-notes">Notes <span class="optional">(optional)</span></label>
          <textarea id="log-notes" rows="3" placeholder="Any reflections…"></textarea>
        </div>

      </div>
      <div id="modal-actions">
        <button type="button" id="modal-cancel">Cancel</button>
        <button type="submit" id="modal-save" class="btn-primary">Save</button>
      </div>
    </form>
  </dialog>

    <!-- Mutāla'ah (Study) Panel -->
  <section id="motalah-panel" class="wird-panel">
    <div class="wird-panel-header">
      <h2>Mutālaʿah — Study</h2>
      <button id="log-motalah-btn" class="btn-primary">+ Log Session</button>
    </div>

    <!-- Today summary -->
    <div id="motalah-today-row">
      <div class="motalah-today-stat">
        <span class="motalah-today-val" id="motalah-today-mins">—</span>
        <span class="motalah-today-lbl">min today</span>
      </div>
      <div class="motalah-today-stat">
        <span class="motalah-today-val" id="motalah-streak">—</span>
        <span class="motalah-today-lbl">day streak</span>
      </div>
      <div class="motalah-today-stat">
        <span class="motalah-today-val" id="motalah-total-hrs">—</span>
        <span class="motalah-today-lbl">hrs this month</span>
      </div>
      <div class="motalah-today-stat">
        <span class="motalah-today-val" id="motalah-books-count">—</span>
        <span class="motalah-today-lbl">books touched</span>
      </div>
    </div>

    <!-- Recent sessions -->
    <div id="motalah-sessions-wrap">
      <p style="color:var(--muted);font-style:italic">Loading…</p>
    </div>
  </section>

  <!-- Mutāla'ah Log Modal -->
  <dialog id="motalah-modal">
    <form id="motalah-form" method="dialog">
      <h3>Log Study Session</h3>
      <div class="modal-body">

        <div class="field-group">
          <label for="motalah-date">Date</label>
          <input type="date" id="motalah-date" required>
        </div>

        <div class="field-group">
          <label for="motalah-duration">Duration (minutes)</label>
          <input type="number" id="motalah-duration" min="1" step="1" placeholder="e.g. 45" required>
        </div>

        <div class="field-group">
          <label>Books covered <span class="optional">(optional)</span></label>
          <div class="book-search-wrap">
            <span class="book-search-icon">🔍</span>
            <input type="text" id="motalah-book-search" placeholder="Search your library…" autocomplete="off">
            <div id="book-search-results"></div>
          </div>
          <div id="selected-books-chips"></div>
          <!-- Hidden to carry selected IDs for JS -->
          <select id="motalah-books" multiple style="display:none"></select>
        </div>

        <div class="field-group">
          <label for="motalah-notes">Notes <span class="optional">(optional)</span></label>
          <textarea id="motalah-notes" rows="3" placeholder="What did you cover?"></textarea>
        </div>

      </div>
      <div id="motalah-modal-actions">
        <button type="button" id="motalah-cancel">Cancel</button>
        <button type="submit" id="motalah-save" class="btn-primary">Save</button>
      </div>
    </form>
  </dialog>

  <!-- Heatmap -->
  <section id="heatmap-panel" class="wird-panel">
    <div class="wird-panel-header">
      <h2>Consistency</h2>
      <select id="heatmap-type">
        <option value="__all__">All wirds</option>
        <option value="durood">Durood</option>
        <option value="istighfar">Istighfar</option>
        <option value="quran">Qurʾān</option>
        <option value="muraqabah">Murāqabah</option>
        <option value="wuqoof_qalbi">Wuqūf Qalbī</option>
        <option value="nafl">Nafl prayers</option>
        <option value="khatm">Khatm</option>
        <option value="motalah">Mutālaʿah</option>
      </select>
    </div>
    <div id="heatmap-wrap">
      <div id="heatmap-month-labels"></div>
      <div id="heatmap-grid"></div>
      <div id="heatmap-legend">
        <span class="hm-legend-lbl">less</span>
        <span class="hm-swatch" data-level="0"></span>
        <span class="hm-swatch" data-level="1"></span>
        <span class="hm-swatch" data-level="2"></span>
        <span class="hm-swatch" data-level="3"></span>
        <span class="hm-swatch" data-level="4"></span>
        <span class="hm-legend-lbl">more</span>
      </div>
    </div>
    <div id="heatmap-stats"></div>
  </section>

  <!-- Trends -->
  <section id="trends-panel" class="wird-panel">
    <div class="wird-panel-header">
      <h2>Trends</h2>
      <div id="trend-controls">
        <select id="trend-type">
          <option value="durood">Durood</option>
          <option value="istighfar">Istighfar</option>
          <option value="quran">Qurʾān</option>
          <option value="muraqabah">Murāqabah</option>
          <option value="wuqoof_qalbi">Wuqūf Qalbī</option>
          <option value="motalah">Mutālaʿah</option>
        </select>
        <select id="trend-range">
          <option value="14">14 days</option>
          <option value="30" selected>30 days</option>
          <option value="90">90 days</option>
        </select>
      </div>
    </div>
    <canvas id="trend-chart"></canvas>
    <div id="trend-stats"></div>
  </section>

  <!-- History -->
  <section id="history-panel" class="wird-panel">
    <div class="wird-panel-header">
      <h2>History</h2>
      <button id="open-log-btn" class="btn-primary">+ Log Entry</button>
    </div>
    <div id="history-table-wrap">
      <table id="history-table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Wird</th>
            <th>Amount</th>
            <th>vs Target</th>
            <th>Notes</th>
          </tr>
        </thead>
        <tbody id="history-body">
          <tr><td colspan="5" class="loading-cell">Loading…</td></tr>
        </tbody>
      </table>
    </div>
  </section>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
#+END_EXPORT