{% extends 'generic/_base.html' %}
{% load form_helpers %}

{% block title %}Setup Wizard — Step 1 of 3{% endblock %}

{% block content %}
<div class="row">
  <div class="col col-md-12">
    <form action="" method="post" class="form form-horizontal">
      {% csrf_token %}

      <div class="card">
        <div class="card-header">
          <strong>Step 1: Runner Mode &amp; Connection</strong>
        </div>
        <div class="card-body">
          {% if form.non_field_errors %}
            <div class="alert alert-danger" role="alert">
              {{ form.non_field_errors }}
            </div>
          {% endif %}

          <p class="text-muted">
            Choose how the synchronization should run. <strong>Local</strong> runs
            the sync engine inside NetBox. <strong>Remote</strong> connects to an
            external netbox-zabbix-sync webserver.
          </p>

          <div class="mb-3 row">
            <label class="col-sm-3 col-form-label">{{ form.mode.label }}</label>
            <div class="col-sm-9">
              <div class="btn-group" role="group" aria-label="{{ form.mode.label }}">
                {% for radio in form.mode %}
                  <input type="radio" class="btn-check" name="{{ form.mode.html_name }}"
                         id="{{ radio.id_for_label }}" value="{{ radio.data.value }}"
                         {% if radio.data.selected %}checked{% endif %}
                         autocomplete="off">
                  <label class="btn btn-outline-secondary" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
                {% endfor %}
              </div>
              {% if form.mode.help_text %}
                <div class="form-text text-muted">{{ form.mode.help_text }}</div>
              {% endif %}
            </div>
          </div>

          <div id="remote-fields" style="display:none;">
            {% render_field form.url %}
            {% render_field form.token %}
          </div>

          <div id="local-fields" style="display:none;">
            {% render_field form.service_account_password %}

            <div class="mb-3 row">
              <label class="col-sm-3 col-form-label">{{ form.deployment_type.label }}</label>
              <div class="col-sm-9">
                <div class="btn-group" role="group" aria-label="{{ form.deployment_type.label }}">
                  {% for radio in form.deployment_type %}
                    <input type="radio" class="btn-check" name="{{ form.deployment_type.html_name }}"
                           id="{{ radio.id_for_label }}" value="{{ radio.data.value }}"
                           {% if radio.data.selected %}checked{% endif %}
                           autocomplete="off">
                    <label class="btn btn-outline-secondary" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
                  {% endfor %}
                </div>
                {% if form.deployment_type.help_text %}
                  <div class="form-text text-muted">{{ form.deployment_type.help_text }}</div>
                {% endif %}
              </div>
            </div>

            <div id="custom-port-field" style="display:none;">
              {% render_field form.custom_port %}
            </div>
          </div>
        </div>
      </div>

      <div class="text-end my-3">
        <a href="{% url 'plugins:netbox_zabbix_sync_plugin:synchronizationrunner_list' %}" class="btn btn-outline-secondary">
          Cancel
        </a>
        <button type="submit" class="btn btn-primary" id="submit-btn">
          Continue
        </button>
      </div>
    </form>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const modeRadios = document.querySelectorAll('input[name="mode"]');
    const remoteFields = document.getElementById("remote-fields");
    const localFields = document.getElementById("local-fields");
    const submitBtn = document.getElementById("submit-btn");

    const deployRadios = document.querySelectorAll('input[name="deployment_type"]');
    const customPortField = document.getElementById("custom-port-field");

    function toggleMode() {
      const selected = document.querySelector('input[name="mode"]:checked');
      if (!selected) return;
      if (selected.value === "remote") {
        remoteFields.style.display = "";
        localFields.style.display = "none";
        submitBtn.textContent = "Test Connection & Continue";
      } else {
        remoteFields.style.display = "none";
        localFields.style.display = "";
        submitBtn.textContent = "Create Service Account & Continue";
      }
    }

    function toggleCustomPort() {
      const selected = document.querySelector('input[name="deployment_type"]:checked');
      if (selected && selected.value === "custom") {
        customPortField.style.display = "";
      } else {
        customPortField.style.display = "none";
      }
    }

    modeRadios.forEach(function (r) { r.addEventListener("change", toggleMode); });
    deployRadios.forEach(function (r) { r.addEventListener("change", toggleCustomPort); });
    toggleMode();
    toggleCustomPort();
  });
</script>
{% endblock content %}