{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-7">
    <div class="card shadow-sm">
      <div class="card-header bg-light"><h5 class="mb-0">{{ title }}</h5></div>
      <div class="card-body">
        <form method="POST" novalidate>
          {{ form.hidden_tag() }}

          {# Contract selector — UI only; narrows the facility list via AJAX #}
          <div class="mb-3">
            <label class="form-label fw-semibold" for="contract_select">Contract</label>
            <select id="contract_select" class="form-select">
              <option value="">— Select Contract —</option>
              {% for p in projects %}
              <option value="{{ p.id }}">{{ p.name }}</option>
              {% endfor %}
            </select>
          </div>

          {# Facility — populated by JS once a contract is chosen #}
          <div class="mb-3">
            {{ form.facility_id.label(class="form-label fw-semibold") }}
            {{ form.facility_id(class="form-select", id="facility_id") }}
            {% for e in form.facility_id.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
          </div>

          <div class="mb-3">
            {{ form.template_id.label(class="form-label fw-semibold") }}
            {{ form.template_id(class="form-select") }}
            {% for e in form.template_id.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
          </div>

          <div class="mb-3">
            {{ form.inspector_id.label(class="form-label fw-semibold") }}
            {{ form.inspector_id(class="form-select") }}
            {% for e in form.inspector_id.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
          </div>

          <div class="row">
            <div class="col-md-6 mb-3">
              {{ form.frequency.label(class="form-label fw-semibold") }}
              {{ form.frequency(class="form-select") }}
            </div>
            <div class="col-md-6 mb-3">
              {{ form.next_due_date.label(class="form-label fw-semibold") }}
              {{ form.next_due_date(class="form-control", type="date") }}
              {% for e in form.next_due_date.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
              <div class="form-text">Snapped forward to the first matching day.</div>
            </div>
          </div>

          {# ── Weekly: which days of the week ──────────────────────────── #}
          <div class="mb-3 p-3 rounded bg-light border" id="weekly_block" hidden>
            <label class="form-label fw-semibold d-block">{{ form.weekdays.label.text }}</label>
            <div class="d-flex flex-wrap gap-3">
              {% for value, label in form.weekdays.choices %}
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="weekdays"
                       id="weekday_{{ value }}" value="{{ value }}"
                       {% if form.weekdays.data and value in form.weekdays.data %}checked{% endif %}>
                <label class="form-check-label" for="weekday_{{ value }}">{{ label[:3] }}</label>
              </div>
              {% endfor %}
            </div>
            {% for e in form.weekdays.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
            <div class="form-text mb-0">
              Pick every day the inspection recurs — e.g. Mon, Wed, Fri gives three
              inspections a week. The due date rolls to the next selected day each
              time one is submitted.
            </div>
          </div>

          {# ── Monthly: day-of-month OR nth weekday ────────────────────── #}
          <div class="mb-3 p-3 rounded bg-light border" id="monthly_block" hidden>
            <label class="form-label fw-semibold d-block">{{ form.month_mode.label.text }}</label>

            <div class="form-check">
              <input class="form-check-input" type="radio" name="month_mode"
                     id="month_mode_day" value="day_of_month"
                     {% if form.month_mode.data != 'nth_weekday' %}checked{% endif %}>
              <label class="form-check-label" for="month_mode_day">On a day of the month</label>
            </div>
            <div class="ms-4 mb-2" id="dom_row">
              <div class="input-group input-group-sm" style="max-width:16rem;">
                <span class="input-group-text">Day</span>
                {{ form.day_of_month(class="form-control", type="number", min=1, max=31,
                                     placeholder="15") }}
              </div>
              {% for e in form.day_of_month.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
              <div class="form-text mb-0">Months without that day use their last day.</div>
            </div>

            <div class="form-check">
              <input class="form-check-input" type="radio" name="month_mode"
                     id="month_mode_nth" value="nth_weekday"
                     {% if form.month_mode.data == 'nth_weekday' %}checked{% endif %}>
              <label class="form-check-label" for="month_mode_nth">On a weekday of the month</label>
            </div>
            <div class="ms-4" id="nth_row">
              <div class="d-flex gap-2 flex-wrap" style="max-width:24rem;">
                {{ form.nth_week(class="form-select form-select-sm", style="max-width:7rem;") }}
                {{ form.nth_weekday(class="form-select form-select-sm", style="max-width:11rem;") }}
              </div>
              {% for e in form.nth_week.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
              <div class="form-text mb-0">e.g. the 2nd Tuesday of every month.</div>
            </div>
          </div>

          <div class="mb-3">
            {{ form.notes.label(class="form-label fw-semibold") }}
            {{ form.notes(class="form-control", rows=2, placeholder="Optional instructions for the inspector…") }}
          </div>

          <div class="form-check mb-3">
            {{ form.active(class="form-check-input") }}
            {{ form.active.label(class="form-check-label") }}
          </div>

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">Save</button>
            <a href="{{ url_for('scheduled_inspections.index') }}" class="btn btn-outline-secondary">Cancel</a>
          </div>
        </form>
      </div>
    </div>
    <p class="text-muted small mt-2">
      Recurring schedules automatically roll their due date forward each time the
      inspection is completed. The assigned inspector is reminded the day before
      and on the due date; managers are alerted if it becomes overdue.
    </p>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
  'use strict';
  var contractSel = document.getElementById('contract_select');
  var facilitySel = document.getElementById('facility_id');
  if (!contractSel || !facilitySel) { return; }

  var FACILITIES_URL = '{{ url_for("inspections.facilities_for_project", project_id=0) }}'.replace('/0', '/');
  var preProjectId  = {{ selected_project_id | tojson }};
  var preFacilityId = {{ form.facility_id.data | tojson }};

  function setPlaceholder() {
    facilitySel.innerHTML = '<option value="">— Select a Contract first —</option>';
    facilitySel.disabled  = true;
  }

  function loadFacilities(projectId, restoreFacilityId) {
    facilitySel.disabled  = true;
    facilitySel.innerHTML = '<option value="">Loading…</option>';
    fetch(FACILITIES_URL + projectId)
      .then(function (r) { return r.json(); })
      .then(function (data) {
        facilitySel.innerHTML = '<option value="">— Select Facility —</option>';
        data.forEach(function (f) {
          var opt = document.createElement('option');
          opt.value = f.id;
          opt.textContent = f.name;
          if (restoreFacilityId && f.id === restoreFacilityId) { opt.selected = true; }
          facilitySel.appendChild(opt);
        });
        facilitySel.disabled = false;
      })
      .catch(function () {
        facilitySel.innerHTML = '<option value="">Could not load facilities</option>';
      });
  }

  contractSel.addEventListener('change', function () {
    if (this.value) { loadFacilities(this.value, null); }
    else { setPlaceholder(); }
  });

  // Initial state: restore the contract + facility on edit / validation error.
  if (preProjectId) {
    contractSel.value = String(preProjectId);
    loadFacilities(preProjectId, preFacilityId);
  } else {
    setPlaceholder();
  }
}());

// Recurrence blocks: only the one matching the chosen frequency is shown.
// The server clears the columns for the hidden blocks on save, so stale values
// left in the DOM never take effect.
(function () {
  'use strict';
  var freq    = document.getElementById('frequency') ||
                document.querySelector('[name="frequency"]');
  var weekly  = document.getElementById('weekly_block');
  var monthly = document.getElementById('monthly_block');
  if (!freq || !weekly || !monthly) { return; }

  var domRadio = document.getElementById('month_mode_day');
  var nthRadio = document.getElementById('month_mode_nth');
  var domRow   = document.getElementById('dom_row');
  var nthRow   = document.getElementById('nth_row');

  function syncMonthMode() {
    var useNth = nthRadio && nthRadio.checked;
    domRow.style.opacity = useNth ? '.45' : '1';
    nthRow.style.opacity = useNth ? '1' : '.45';
  }

  function syncFrequency() {
    weekly.hidden  = freq.value !== 'weekly';
    monthly.hidden = freq.value !== 'monthly';
    syncMonthMode();
  }

  freq.addEventListener('change', syncFrequency);
  [domRadio, nthRadio].forEach(function (r) {
    if (r) { r.addEventListener('change', syncMonthMode); }
  });
  syncFrequency();
}());
</script>
{% endblock %}