{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
{% include '_quota_warning.html' %}
<div class="row justify-content-center">
  <div class="col-lg-6">
    <div class="card shadow-sm">
      <div class="card-header bg-danger text-white">
        <h5 class="mb-0"><i class="bi bi-exclamation-triangle"></i> {{ title }}</h5>
      </div>
      <div class="card-body">
        <form method="post" enctype="multipart/form-data">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

          {# 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>

          {# Remaining fields — assigned_to hidden from customer role #}
          {% for field in [form.severity, form.description, form.photo] %}
          <div class="mb-3">
            {{ field.label(class="form-label fw-semibold") }}
            {{ field(class="form-select" if field.type == 'SelectField' else "form-control", rows=4 if field.type == 'TextAreaField' else none) }}
            {% for e in field.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
          </div>
          {% endfor %}
          {% if current_user.role != 'customer' %}
          <div class="mb-3">
            {{ form.assigned_to.label(class="form-label fw-semibold") }}
            {{ form.assigned_to(class="form-select") }}
            {% for e in form.assigned_to.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
          </div>
          {% endif %}

          {# ── Handled By (phase44) — staff only; customers stay internal ── #}
          {% if current_user.role != 'customer' %}
          <hr class="my-3">
          <p class="fw-semibold mb-2">
            <i class="bi bi-person-check me-1 text-secondary"></i>Handled By
          </p>
          <div class="mb-3">
            {{ form.handler_type(class="form-select", id="handlerTypeSelect") }}
            <div class="form-text" id="handlerTypeHelp"></div>
          </div>

          <div id="internalHandlerFields">
            <div class="mb-2">
              {{ form.internal_handler_name.label(class="form-label small fw-semibold mb-1") }}
              {{ form.internal_handler_name(class="form-control form-control-sm",
                 placeholder="Crew member handling this") }}
            </div>
            <div class="mb-3">
              {{ form.internal_handler_contact.label(class="form-label small fw-semibold mb-1") }}
              {{ form.internal_handler_contact(class="form-control form-control-sm",
                 placeholder="Phone or email") }}
            </div>
          </div>

          <div id="facilityHandlerFields" style="display:none;">
            <div class="mb-2">
              {{ form.facility_handler_name.label(class="form-label small fw-semibold mb-1") }}
              {{ form.facility_handler_name(class="form-control form-control-sm",
                 placeholder="Contact name at the facility") }}
            </div>
            <div class="mb-2">
              {{ form.facility_handler_contact.label(class="form-label small fw-semibold mb-1") }}
              {{ form.facility_handler_contact(class="form-control form-control-sm",
                 placeholder="Phone or email") }}
            </div>
            <div class="mb-3">
              {{ form.facility_handler_notes.label(class="form-label small fw-semibold mb-1") }}
              {{ form.facility_handler_notes(class="form-control form-control-sm", rows=2,
                 placeholder="Notes about what they are handling…") }}
            </div>
          </div>

          <div id="vendorHandlerFields" style="display:none;">
            <div class="mb-2">
              {{ form.vendor_name.label(class="form-label small fw-semibold mb-1") }}
              {{ form.vendor_name(class="form-control form-control-sm",
                 placeholder="Contractor or vendor name") }}
            </div>
            <div class="mb-2">
              {{ form.vendor_contact.label(class="form-label small fw-semibold mb-1") }}
              {{ form.vendor_contact(class="form-control form-control-sm",
                 placeholder="Phone or email") }}
            </div>
            <div class="mb-3">
              {{ form.vendor_notes.label(class="form-label small fw-semibold mb-1") }}
              {{ form.vendor_notes(class="form-control form-control-sm", rows=2,
                 placeholder="Scope, quote reference, etc.") }}
            </div>
          </div>

          <script>
          (function(){
            var sel   = document.getElementById('handlerTypeSelect');
            var help  = document.getElementById('handlerTypeHelp');
            var boxes = {
              internal: document.getElementById('internalHandlerFields'),
              facility: document.getElementById('facilityHandlerFields'),
              vendor:   document.getElementById('vendorHandlerFields')
            };
            var notes = {
              internal: {{ (issue_handler_descriptions or {}).get('internal', '')|tojson }},
              facility: {{ (issue_handler_descriptions or {}).get('facility', '')|tojson }},
              vendor:   {{ (issue_handler_descriptions or {}).get('vendor',   '')|tojson }}
            };
            function sync(){
              var v = sel ? sel.value : 'internal';
              for (var k in boxes){
                if (boxes[k]) { boxes[k].style.display = (k === v) ? '' : 'none'; }
              }
              if (help) { help.textContent = notes[v] || ''; }
            }
            if (sel){ sel.addEventListener('change', sync); }
            sync();
          })();
          </script>
          {% endif %}

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-danger">Log Issue</button>
            <a href="{{ url_for('issues.index') }}" class="btn btn-outline-secondary">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
  'use strict';
  var contractSel   = document.getElementById('contract_select');
  var facilitySel   = document.getElementById('facility_id');
  var FACILITIES_URL = '{{ url_for("inspections.facilities_for_project", project_id=0) }}'.replace('/0', '/');

  // Values injected from the route (non-null only after a POST validation error)
  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();
    }
  });

  // Restore state after a POST validation error
  if (preProjectId) {
    contractSel.value = String(preProjectId);
    loadFacilities(preProjectId, preFacilityId);
  } else {
    setPlaceholder();
  }
}());
</script>
{% endblock %}