{% extends "cms/base.html" %}
{% block title %}{% if obj.pk %}Edit Question{% else %}Add Question{% endif %}{% endblock %}
{% block page_title %}FAQ Question{% endblock %}

{% block extra_head %}
<style>
  .req { color:#ff404b;margin-left:3px;font-weight:700; }
  .field-label {
    width:160px;color:var(--cms-muted);font-size:.8rem;font-weight:600;
    white-space:nowrap;vertical-align:middle;padding:.6rem 1rem;
  }
  .field-label.top { vertical-align:top;padding-top:.85rem; }
  .field-td { padding:.5rem 1rem .5rem 0; }
  .field-input {
    width:100%;border:1px solid var(--cms-border);border-radius:6px;
    padding:.45rem .75rem;font-size:.875rem;color:var(--cms-text);
    background:#fff;outline:none;
  }
  .field-input:focus { border-color:#033152; }
  .section-head {
    padding:.75rem 1rem;border-bottom:1px solid var(--cms-border);
    font-size:.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:var(--cms-muted);
  }
  .toggle-row {
    display:flex;align-items:center;gap:.6rem;
    padding:.55rem 1rem;border-bottom:1px solid var(--cms-border);
  }
  .toggle-row:last-child { border-bottom:none; }
  .toggle-row label { font-size:.88rem;color:var(--cms-text);font-weight:500;margin:0;cursor:pointer; }
  .toggle-row input[type=checkbox] { width:auto;accent-color:#033152;flex-shrink:0; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <div>
    <h2>{% if obj.pk %}Edit Question{% else %}Add Question{% endif %}</h2>
    {% if obj.pk %}<div style="font-size:.82rem;color:var(--cms-muted);margin-top:.15rem">{{ obj.question|truncatechars:60 }}</div>{% endif %}
  </div>
  <a href="{% url 'cms_faq' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
</div>

<form method="post" novalidate>
{% csrf_token %}
<div class="row g-3">

  <div class="col-lg-8">

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Question Details</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Category <span class="req">*</span></td>
            <td class="field-td">
              <select name="category" id="f_category" class="field-input" required style="width:auto;min-width:200px">
                <option value="">Select a category</option>
                {% for cat in categories %}
                <option value="{{ cat.pk }}" {% if obj.category_id == cat.pk %}selected{% endif %}>{{ cat.name }}</option>
                {% endfor %}
              </select>
            </td>
          </tr>
          <tr>
            <td class="field-label">Author</td>
            <td class="field-td">
              <select name="added_by" class="field-input" style="width:auto;min-width:200px">
                <option value="">-- Not specified --</option>
                {% for u in cms_users %}
                <option value="{{ u.pk }}" {% if obj.added_by_id == u.pk %}selected{% endif %}>{{ u.get_full_name|default:u.username }}</option>
                {% endfor %}
              </select>
            </td>
          </tr>
          <tr>
            <td class="field-label">Question <span class="req">*</span></td>
            <td class="field-td">
              <input type="text" name="question" id="f_question" value="{{ obj.question }}" class="field-input" autofocus>
              <div class="field-error" id="err_question">Question is required.</div>
            </td>
          </tr>
          <tr>
            <td class="field-label top">Answer <span class="req">*</span></td>
            <td class="field-td">
              <textarea name="answer" id="f_answer" rows="8" class="field-input" style="resize:vertical">{{ obj.answer }}</textarea>
              <div class="field-error" id="err_answer">Answer is required.</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

  <div class="col-lg-4">

    <div class="d-flex gap-2 mb-3">
      <button type="submit" class="btn-cms w-100"><i class="fa-solid fa-floppy-disk me-1"></i>Save Question</button>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Visibility</div>
      <div class="toggle-row">
        <input type="checkbox" name="is_active" id="chk_active" {% if obj.is_active or not obj.pk %}checked{% endif %}>
        <label for="chk_active">Visible on site</label>
      </div>
    </div>

    <a href="{% url 'cms_faq' %}" class="btn-cms-ghost w-100" style="text-align:center;display:block">Cancel</a>

  </div>
</div>
</form>
{% endblock %}

{% block extra_js %}
<script>
(function(){
  var form = document.querySelector('form');
  var REQUIRED = [
    { id:'f_question', err:'err_question', msg:'Question is required.' },
    { id:'f_answer',   err:'err_answer',   msg:'Answer is required.'   },
  ];
  // inject error style
  var s = document.createElement('style');
  s.textContent = '.field-input.error{border-color:#ff404b!important}.field-error{display:none;font-size:.72rem;color:#ff404b;margin-top:.25rem}.field-error.visible{display:block}';
  document.head.appendChild(s);
  form.addEventListener('submit', function(e){
    var firstInvalid = null;
    REQUIRED.forEach(function(r){
      var el = document.getElementById(r.id);
      var errEl = document.getElementById(r.err);
      var val = el.value.trim();
      if(!val){
        el.classList.add('error');
        errEl.textContent = r.msg;
        errEl.classList.add('visible');
        if(!firstInvalid) firstInvalid = el;
      } else {
        el.classList.remove('error');
        errEl.classList.remove('visible');
      }
    });
    if(firstInvalid){ e.preventDefault(); firstInvalid.scrollIntoView({behavior:'smooth',block:'center'}); firstInvalid.focus(); }
  });
  REQUIRED.forEach(function(r){
    var el = document.getElementById(r.id);
    if(el) el.addEventListener('input', function(){
      el.classList.remove('error');
      document.getElementById(r.err).classList.remove('visible');
    });
  });
})();
</script>
{% endblock %}