{% extends "cms/base.html" %}
{% block title %}{% if obj.pk %}Edit{% else %}New{% endif %} {% if is_upgrade %}Upgrade{% else %}Plugin{% endif %}{% endblock %}
{% block page_title %}{% if obj.pk %}Edit{% else %}New{% endif %} {% if is_upgrade %}Upgrade{% else %}Plugin{% endif %}{% endblock %}

{% block extra_head %}
<style>
  .req { color:#ff404b;margin-left:3px;font-weight:700; }
  .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);
  }
  .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; }
  .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; }
  .form-table td { border:none; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2>{% if obj.pk %}Edit{% else %}New{% endif %} {% if is_upgrade %}Upgrade{% else %}Plugin{% endif %}</h2>
  <a href="{% if is_upgrade %}{% url 'cms_plugin_upgrades' %}{% else %}{% url 'cms_plugins' %}{% endif %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
</div>

<form method="post">
  {% 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">What This Is</div>
        <table class="cms-table form-table" style="margin:0">
          <tbody>
            {% if is_upgrade %}
            <tr>
              <td class="field-label">Upgrade <span class="req">*</span></td>
              <td class="field-td">
                <select name="section" id="upgradeSection" class="field-input" required>
                  <option value="">Choose what is being upgraded</option>
                  {% for val, label in sections %}
                  <option value="{{ val }}" {% if obj.section == val %}selected{% endif %}>{{ label }}</option>
                  {% endfor %}
                </select>
              </td>
            </tr>
            <tr>
              <td class="field-label" id="upgradeKeyLabel">Moves To <span class="req">*</span></td>
              <td class="field-td">
                <select name="upgrade_key" id="upgradeKey" class="field-input" required>
                  <option value="">Choose the section above first</option>
                  <optgroup label="Server" data-for="server">
                    {% for val, label in server_upgrades %}
                    <option value="{{ val }}" data-for="server" {% if obj.upgrade_key == val %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                  </optgroup>
                  <optgroup label="Plan" data-for="panel">
                    {% for val, label in plan_upgrades %}
                    <option value="{{ val }}" data-for="panel" {% if obj.upgrade_key == val %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                  </optgroup>
                </select>
                <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.25rem">Upgrades are never bought at a checkout. The tenant requests this, you quote it, and it goes out as an invoice.</div>
              </td>
            </tr>
            {% else %}
            <tr>
              <td class="field-label">Section <span class="req">*</span></td>
              <td class="field-td">
                <select name="section" class="field-input" required>
                  <option value="">Choose a section</option>
                  {% for val, label in sections %}
                  <option value="{{ val }}" {% if obj.section == val %}selected{% endif %}>{{ label }}</option>
                  {% endfor %}
                </select>
              </td>
            </tr>
            <tr>
              <td class="field-label">Points At <span class="req">*</span></td>
              <td class="field-td">
                <select name="target" class="field-input" required>
                  <option value="">Choose from the catalogue</option>
                  <optgroup label="Products and Subscriptions">
                    {% for p in products %}
                    <option value="product:{{ p.pk }}" {% if obj.product_id == p.pk %}selected{% endif %}>{{ p.name }} &mdash; &pound;{{ p.price }}</option>
                    {% endfor %}
                  </optgroup>
                  <optgroup label="Services">
                    {% for s in services %}
                    <option value="service:{{ s.pk }}" {% if obj.service_id == s.pk %}selected{% endif %}>{{ s.title }}</option>
                    {% endfor %}
                  </optgroup>
                  <optgroup label="Panel Modules">
                    {% for key, label in modules %}
                    <option value="module:{{ key }}" {% if obj.module_key == key %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                  </optgroup>
                </select>
                <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.25rem">Name, price and description come from whatever you pick here, so you only maintain them in one place.</div>
              </td>
            </tr>
            <tr>
              <td class="field-label">Buying <span class="req">*</span></td>
              <td class="field-td">
                <select name="fulfilment" class="field-input" required>
                  {% for val, label in fulfilments %}
                  <option value="{{ val }}" {% if obj.fulfilment == val %}selected{% endif %}>{{ label }}</option>
                  {% endfor %}
                </select>
              </td>
            </tr>
            {% endif %}
          </tbody>
        </table>
      </div>

      <div class="cms-card" style="padding:0;overflow:hidden">
        <div class="section-head">How It Reads In The Panel</div>
        <table class="cms-table form-table" style="margin:0">
          <tbody>
            <tr>
              <td class="field-label">Title Override</td>
              <td class="field-td"><input type="text" name="title_override" value="{{ obj.title_override }}" placeholder="Leave blank to use the catalogue name" class="field-input"></td>
            </tr>
            <tr>
              <td class="field-label">One Line</td>
              <td class="field-td"><input type="text" name="blurb" value="{{ obj.blurb }}" placeholder="Shown under the title on the card" class="field-input"></td>
            </tr>
            <tr>
              <td class="field-label">Price Label</td>
              <td class="field-td"><input type="text" name="price_label" value="{{ obj.price_label }}" placeholder="e.g. from £299 per month" class="field-input"></td>
            </tr>
            <tr>
              <td class="field-label">Price Override</td>
              <td class="field-td"><input type="number" step="0.01" name="price_override" value="{{ obj.price_override|default_if_none:'' }}" placeholder="Blank uses the catalogue price" class="field-input" style="max-width:180px"></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</button>
      </div>

      <div class="cms-card" style="padding:0;overflow:hidden">
        <div class="section-head">Visibility</div>
        <div style="padding:.9rem 1rem">
          <div class="toggle-row" style="padding-left:0;padding-right:0">
            <input type="checkbox" id="isActive" name="is_active" {% if obj.is_active or not obj.pk %}checked{% endif %}>
            <label for="isActive">Active</label>
          </div>
          <div class="toggle-row" style="padding-left:0;padding-right:0;margin-bottom:.5rem">
            <input type="checkbox" id="isFeatured" name="is_featured" {% if obj.is_featured %}checked{% endif %}>
            <label for="isFeatured">Featured</label>
          </div>
          <div style="font-size:.78rem;color:var(--cms-muted);font-weight:600;margin-bottom:.3rem">Plans</div>
          <input type="text" name="visible_plans" value="{{ obj.visible_plans }}" placeholder="Blank means every plan" class="field-input">
          <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.25rem">Comma separated, e.g. signature, store</div>
        </div>
      </div>

      <a href="{% if is_upgrade %}{% url 'cms_plugin_upgrades' %}{% else %}{% url 'cms_plugins' %}{% endif %}" class="btn-cms-ghost w-100 mt-3" style="text-align:center;display:block">Cancel</a>

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

{% block extra_js %}
{% if is_upgrade %}
<script>
(function () {
  var section = document.getElementById('upgradeSection');
  var key     = document.getElementById('upgradeKey');
  var label   = document.getElementById('upgradeKeyLabel');
  if (!section || !key || !label) { return; }

  var LABELS = { server: 'Server Type', panel: 'New Plan' };

  function sync() {
    var want = section.value;
    var groups = key.getElementsByTagName('optgroup');
    for (var i = 0; i < groups.length; i++) {
      var showGroup = groups[i].getAttribute('data-for') === want;
      groups[i].hidden = !showGroup;
      groups[i].disabled = !showGroup;
    }
    for (var j = 0; j < key.options.length; j++) {
      var o = key.options[j];
      var owner = o.getAttribute('data-for');
      if (!owner) { continue; }
      var show = owner === want;
      o.hidden = !show;
      o.disabled = !show;
      if (!show && o.selected) { key.selectedIndex = 0; }
    }
    label.innerHTML = (LABELS[want] || 'Moves To') + ' <span class="req">*</span>';
    key.options[0].text = want ? 'Choose one' : 'Choose the upgrade above first';
  }

  section.addEventListener('change', sync);
  sync();
})();
</script>
{% endif %}
{% endblock %}