{% extends 'base/layout.html' %}

{% block title %}Windows DHCP — Schedule{% endblock %}

{% block content %}
<div class="row">
  <div class="col-12 col-lg-6">

    <div class="card mb-3">
      <h5 class="card-header">Scheduled Sync</h5>
      <div class="card-body">

        <table class="table table-borderless mb-3">
          <tr>
            <th style="width:160px">Next run at</th>
            <td>
              {% if next_sync_job %}
                {% if next_sync_job.status == 'scheduled' and next_sync_job.scheduled %}
                  {{ next_sync_job.scheduled|date:"N j, Y, g:i a" }}
                  <span class="text-muted ms-1">({{ next_sync_job.scheduled|timeuntil }} from now)</span>
                {% elif next_sync_job.status == 'pending' %}
                  <span class="badge text-bg-warning">Queued — running shortly</span>
                {% else %}
                  <span class="text-muted">N/A</span>
                {% endif %}
              {% else %}
                <span class="text-muted">N/A — no sync scheduled</span>
              {% endif %}
            </td>
          </tr>
          {% if next_sync_job and next_sync_job.interval %}
          <tr>
            <th>Repeats every</th>
            <td>{{ next_sync_job.interval }} minute{{ next_sync_job.interval|pluralize }}</td>
          </tr>
          {% endif %}
        </table>

        <div class="d-flex flex-wrap gap-2 align-items-end">

          {% if not next_sync_job or next_sync_job.status != 'pending' %}
          <form id="schedule-form" method="post" action="{% url 'plugins:netbox_windows_dhcp:schedule_sync' %}" class="d-flex align-items-end gap-2">
            {% csrf_token %}
            <input type="hidden" name="action" value="schedule">
            {# start_at_hidden is filled with the UTC ISO string by the script below before submit #}
            <input type="hidden" name="start_at" id="start_at_hidden">
            <div>
              <label for="start_at_local" class="form-label mb-1 small text-muted">Start at (your local time)</label>
              <input type="datetime-local" id="start_at_local" class="form-control form-control-sm" required
                     style="width:220px">
            </div>
            <button type="submit" class="btn btn-warning">
              <i class="mdi mdi-clock-outline"></i> Schedule
            </button>
          </form>
          {% endif %}

        </div>

        <span class="text-muted d-block mt-2 small">
          <i class="mdi mdi-information-outline"></i>
          <strong>Schedule</strong> runs the first sync at the chosen date/time, then repeats on the interval.
          A new Sync Interval saved on the <a href="{% url 'plugins:netbox_windows_dhcp:settings' %}">Settings</a>
          page takes effect the next time you click <strong>Schedule</strong>, or when the recurring sync next
          reschedules itself.
        </span>

      </div>
    </div>

    <div class="card mb-3">
      <h5 class="card-header">On-Demand</h5>
      <div class="card-body">
        <form method="post" action="{% url 'plugins:netbox_windows_dhcp:schedule_sync' %}">
          {% csrf_token %}
          <input type="hidden" name="action" value="run_now">
          <button type="submit" class="btn btn-success">
            <i class="mdi mdi-play-circle-outline"></i> Run Now
          </button>
        </form>
        <span class="text-muted d-block mt-2 small">
          <i class="mdi mdi-information-outline"></i>
          <strong>Run Now</strong> runs a single sync right away. It does not repeat, and it does not change
          the scheduled sync or its interval.
        </span>
      </div>
    </div>

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

{% block javascript %}
{{ block.super }}
<script>
(function () {
  var form = document.getElementById('schedule-form');
  if (!form) return;
  form.addEventListener('submit', function (e) {
    var localInput = document.getElementById('start_at_local');
    var hiddenInput = document.getElementById('start_at_hidden');
    if (!localInput.value) return;
    // new Date() treats a datetime-local string (no tz suffix) as browser local time.
    // toISOString() converts that to UTC so the server gets an unambiguous timestamp.
    hiddenInput.value = new Date(localInput.value).toISOString();
  });
})();
</script>
{% endblock %}