{% extends "base.html" %}
{% block title %}Edit Plan — {{ plan.plan_name }} — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>✏️ Edit Plan — {{ plan.plan_name }}</h1>
  <div><a href="{{ url_for('ssrp_fill_sets', plan_id=plan.id) }}">Fill Sets</a> &nbsp;·&nbsp; <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" value="{{ plan.plan_name }}" 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 }}" {% if st.id == plan.salat_type_id %}selected{% endif %}>{{ 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" value="{{ plan.num_rakat }}" required onchange="updateRules()">
      <p style="font-size:12px; color:#a93226; margin:2px 0 8px;">
        ⚠️ Changing the rakat count changes how many sets this plan has. Sets you've already
        filled in beyond the new count are kept in the database but won't be shown or used anymore.
      </p>

      <div id="fatihaRule" style="display:none;" class="done-check">
        <input type="checkbox" name="fatiha_only_last_set" value="1" id="fatihaCheck" {% if plan.fatiha_only_last_set %}checked{% endif %}>
        <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" {% if plan.salat_3_rakat_type == 'maghrib' %}selected{% endif %}>Maghrib (rakat 3 has no sura)</option>
          <option value="witr" {% if plan.salat_3_rakat_type == 'witr' %}selected{% endif %}>Witr (rakat 3 has its own sura)</option>
        </select>
      </div>

      <label>Notes (optional)</label>
      <textarea name="notes">{{ plan.notes or '' }}</textarea>

      <button type="submit" class="btn-save">💾 Update Plan</button>
    </form>
  </div>

  <div class="card">
    <button type="button" class="btn-delete" onclick="deletePlan()">🗑 Delete This Plan</button>
  </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';
}
updateRules();

function deletePlan() {
  if (!confirm("Delete plan '{{ plan.plan_name }}'? This also removes all its saved sets. This cannot be undone.")) return;
  fetch('/api/ssrp/{{ plan.id }}/delete', { method: 'POST' })
    .then(r => r.json())
    .then(d => {
      if (d.ok) window.location.href = "{{ url_for('ssrp_plans_list') }}";
      else alert(d.error || 'Could not delete this plan.');
    });
}
</script>
{% endblock %}