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

{% block title %}Sync Schedule — {{ runner.name }}{% endblock %}

{% block content %}
<div class="row">
  <div class="col col-md-8">

    <div class="card mb-3">
      <div class="card-header"><strong>Current Schedule</strong></div>
      <div class="card-body">
        {% if job %}
          <table class="table table-hover attr-table mb-0">
            <tr>
              <th scope="row">Status</th>
              <td>
                <span class="badge text-bg-{% if job.status == 'scheduled' %}info{% elif job.status == 'running' %}warning{% else %}secondary{% endif %}">
                  {{ job.get_status_display }}
                </span>
              </td>
            </tr>
            <tr>
              <th scope="row">Interval</th>
              <td>{{ interval_label|default:"—" }}</td>
            </tr>
            <tr>
              <th scope="row">Next Run</th>
              <td>{{ job.scheduled|default:"—" }}</td>
            </tr>
            <tr>
              <th scope="row">Job ID</th>
              <td>{{ job.pk }}</td>
            </tr>
          </table>
        {% else %}
          <p class="text-muted mb-0">No sync schedule is active for this runner.</p>
        {% endif %}
      </div>
    </div>

    <form action="" method="post">
      {% csrf_token %}

      <div class="card mb-3">
        <div class="card-header"><strong>{% if job %}Update{% else %}Create{% endif %} Schedule</strong></div>
        <div class="card-body">

          <div class="mb-3 row">
            <label class="col-sm-3 col-form-label">Interval Type</label>
            <div class="col-sm-9">
              <div class="btn-group" role="group" aria-label="Interval type">
                <input type="radio" class="btn-check" name="interval_type" id="interval_type_preset"
                       value="preset" checked autocomplete="off">
                <label class="btn btn-outline-secondary" for="interval_type_preset">Preset</label>
                <input type="radio" class="btn-check" name="interval_type" id="interval_type_custom"
                       value="custom" autocomplete="off">
                <label class="btn btn-outline-secondary" for="interval_type_custom">Custom (minutes)</label>
              </div>
            </div>
          </div>

          <div id="preset-interval" class="mb-3 row">
            <label for="id_interval" class="col-sm-3 col-form-label">Sync Interval</label>
            <div class="col-sm-9">
              <select name="interval" id="id_interval" class="form-select">
                {% for value, label in interval_choices %}
                  <option value="{{ value }}" {% if job and job.interval == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
              </select>
            </div>
          </div>

          <div id="custom-interval" class="mb-3 row" style="display: none;">
            <label for="id_custom_interval" class="col-sm-3 col-form-label">Minutes</label>
            <div class="col-sm-9">
              <input type="number" name="custom_interval" id="id_custom_interval" class="form-control"
                     min="1" step="1" placeholder="e.g. 120"
                     {% if job and job.interval %}value="{{ job.interval }}"{% endif %}>
              <div class="form-text text-muted">Enter any interval in minutes (minimum 1).</div>
            </div>
          </div>

        </div>
      </div>

      <div class="text-end mb-3">
        <a href="{% url 'plugins:netbox_zabbix_sync_plugin:synchronizationrunner' pk=runner.pk %}" class="btn btn-outline-secondary">
          Cancel
        </a>
        {% if job %}
          <button type="submit" name="action" value="delete" class="btn btn-outline-danger"
                  onclick="return confirm('Remove the sync schedule?')">
            Remove Schedule
          </button>
        {% endif %}
        <button type="submit" name="action" value="save" class="btn btn-primary">
          {% if job %}Update{% else %}Create{% endif %} Schedule
        </button>
      </div>
    </form>

  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const presetRadio = document.getElementById('interval_type_preset');
    const customRadio = document.getElementById('interval_type_custom');
    const presetDiv = document.getElementById('preset-interval');
    const customDiv = document.getElementById('custom-interval');

    function toggle() {
      if (customRadio.checked) {
        presetDiv.style.display = 'none';
        customDiv.style.display = '';
      } else {
        presetDiv.style.display = '';
        customDiv.style.display = 'none';
      }
    }

    presetRadio.addEventListener('change', toggle);
    customRadio.addEventListener('change', toggle);
    toggle();
  });
</script>
{% endblock content %}