{% extends "base.html" %}
{% block title %}Manage Salat Types — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>⚙️ Manage Salat Types</h1>
  <div><a href="{{ url_for('ssrp_tonight') }}">SSRP</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% if error %}<div class="msg msg-error">{{ error }}</div>{% endif %}
  {% if success %}<div class="msg msg-success">{{ success }}</div>{% endif %}

  <div class="card">
    <div class="section-title">{% if editing %}✏️ Editing: '{{ editing.salat_type_name }}'{% else %}➕ Add New Salat Type{% endif %}</div>
    <form method="post">
      {% if editing %}<input type="hidden" name="type_id" value="{{ editing.id }}">{% endif %}
      <label>Salat Type Name</label>
      <input type="text" name="name" placeholder="e.g. Isha Sunnah" value="{{ editing.salat_type_name if editing else '' }}" required>
      <label>Typical Rakat (optional)</label>
      <select name="typical_rakat">
        <option value="">— Not set —</option>
        {% for n in rakat_options %}
        <option value="{{ n }}" {% if editing and editing.typical_rakat == n %}selected{% endif %}>{{ n }}</option>
        {% endfor %}
      </select>
      <label>Notes (optional)</label>
      <input type="text" name="notes" value="{{ editing.notes if editing and editing.notes else '' }}">
      <button type="submit" class="btn-save">{% if editing %}💾 Update{% else %}+ Add Salat Type{% endif %}</button>
      {% if editing %}<a class="btn" style="background:#7f8c8d; display:inline-block; text-decoration:none;" href="{{ url_for('ssrp_salat_types') }}">✖ Cancel</a>{% endif %}
    </form>
  </div>

  <div class="card">
    <form method="post" onsubmit="return confirm('This adds any common Salat Types you don\'t already have (Fajr/Zuhr/Asr/Maghrib/Isha Fard, Zuhr Sunnah, Witr, Taraweeh), each pre-tagged with its typical rakat count. Anything you already have stays untouched. Continue?');">
      <input type="hidden" name="action" value="add_common">
      <button type="submit" class="btn" style="background:#6c3483; color:white; border:none;">✨ Add Common Salat Types</button>
    </form>
  </div>

  {% for t in types %}
  <div class="card">
    <div style="display:flex; justify-content:space-between; align-items:center;">
      <div>
        <strong>{{ t.name }}</strong>
        {% if t.typical_rakat %}<span style="font-size:12px; color:#566573;"> &middot; {{ t.typical_rakat }} rakat</span>{% endif %}
        <div style="font-size:12px; color:#566573;">Used in {{ t.plans_count }} plan(s)</div>
        {% if t.notes %}<div style="font-size:12px;">{{ t.notes }}</div>{% endif %}
      </div>
      <div>
        <a href="{{ url_for('ssrp_salat_types', edit=t.id) }}" style="font-size:13px; margin-right:10px;">Edit</a>
        <a href="#" onclick="deleteType({{ t.id }}, {{ t.plans_count }}); return false;" style="font-size:13px; color:#a93226;">Delete</a>
      </div>
    </div>
  </div>
  {% endfor %}
</main>

<script>
function deleteType(id, plansCount) {
  let msg = 'Delete this Salat Type?';
  if (plansCount > 0) msg += ` It is used in ${plansCount} plan(s) — those plans will keep their sets, just lose this type label.`;
  if (!confirm(msg)) return;
  fetch(`/api/ssrp/salat-types/${id}/delete`, { method: 'POST' })
    .then(() => location.reload());
}
</script>
{% endblock %}