{% extends "base.html" %}
{% block title %}New SSRP Plan — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>➕ New SSRP Plan</h1>
  <div><a href="{{ url_for('ssrp_plans_list') }}">My Plans</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% if error %}<div class="msg msg-error">{{ error }}</div>{% endif %}

  <div class="card">
    <form method="post">
      <label>Plan Name</label>
      <input type="text" name="plan_name" placeholder="e.g. Ramadan Night 1" required>

      <label>Salat Type</label>
      <select name="salat_type_id" required>
        <option value="">— Select a Salat Type —</option>
        {% for st in salat_types %}<option value="{{ st.id }}">{{ st.salat_type_name }}</option>{% endfor %}
      </select>
      <div style="font-size:12px; margin:-4px 0 8px;"><a href="{{ url_for('ssrp_salat_types') }}" target="_blank" rel="noopener">+ New Type</a> (opens in a new tab; refresh this page afterwards)</div>

      <label>Number of Rakat</label>
      <input type="text" id="numRakat" name="num_rakat" placeholder="e.g. 4, 8, 20, or 3 for Maghrib/Witr" required onchange="updateRules()">

      <div id="fatihaRule" style="display:none;" class="done-check">
        <input type="checkbox" name="fatiha_only_last_set" value="1" id="fatihaCheck">
        <label for="fatihaCheck">Last set (rakat 3 &amp; 4) is Al-Fatiha only — Fard Salat rule</label>
      </div>

      <div id="threeRakatRule" style="display:none;">
        <label>This 3-rakat Salat is:</label>
        <select name="salat_3_rakat_type">
          <option value="maghrib">Maghrib (rakat 3 has no sura)</option>
          <option value="witr">Witr (rakat 3 has its own sura)</option>
        </select>
      </div>

      <label>Notes (optional)</label>
      <textarea name="notes"></textarea>

      <button type="submit" class="btn-save">💾 Create Plan &amp; Continue to Fill Sets</button>
    </form>
  </div>
</main>

<script>
function updateRules() {
  const n = parseInt(document.getElementById('numRakat').value);
  document.getElementById('fatihaRule').style.display = (n === 4) ? 'block' : 'none';
  document.getElementById('threeRakatRule').style.display = (n === 3) ? 'block' : 'none';
}
</script>
{% endblock %}