{% extends "base.html" %}
{% block title %}Write a Letter (Word template){% endblock %}

{% block content %}
<div class="container py-4" style="max-width:860px;">
  <h1 class="h5 mb-3">Write a Letter</h1>

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

    <div class="row g-3 mb-3">
      <div class="col-md-6">
        <label class="form-label">Department</label>
        <select id="letterDepartmentSelect" class="form-select">
          <option value="" selected disabled>— Select —</option>
        {% for code,label in sectors %}
          <option value="{{ code }}" {% if code == default_sector %}selected{% endif %}>
            {{ label }}
          </option>
        {% endfor %}
      </select>
    </div>

    <div class="mb-3">
      <label class="form-label">Reference</label>
      <div class="d-flex gap-2">
        <input id="letterReferenceInput" name="our_ref" type="text" class="form-control" />
        <button type="button" class="btn btn-primary" id="letterGetRefBtn">Get_ref</button>
      </div>
    </div>

     <div class="mb-3">
      <label class="form-label">Body</label>
      {{ form.media }}          {# loads CKEditor JS/CSS #}
      {{ form.body_html }}      {# renders the editor #}
      <div class="form-text">Paragraphs are preserved in Word.</div>
    </div>


    <div class="d-flex gap-2">
      <button type="submit" class="btn btn-primary">Download .docx</button>

      <!-- PDF (Windows) -->
      <button formaction="{% url 'letter_generate_pdf' %}" class="btn btn-outline-secondary">Download PDF</button>

      <button formaction="{% url 'letter_print' %}" formtarget="_blank" class="btn btn-dark">Print</button>
    </div>
  </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
  document.getElementById('letterGetRefBtn')?.addEventListener('click', async function () {
    const sector = document.getElementById('letterDepartmentSelect')?.value;
    if (!sector) { alert('Select a department first.'); return; }

    try {
      const res = await fetch("{% url 'preview_reference_json' %}", {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'X-CSRFToken': window.__csrftoken
        },
        body: 'sector=' + encodeURIComponent(sector)
      });
      const data = await res.json();
      if (!res.ok || !data.ok) {
        alert('Preview endpoint returned ' + res.status + '.');
        return;
      }

      // After saving in the modal, put the final ref in the input
      window.openReferenceModal(data.html, function (finalRef) {
        const refInput = document.getElementById('letterReferenceInput');
        if (refInput) refInput.value = finalRef;
      });

    } catch (err) {
      console.error(err);
      alert('Preview request failed.');
    }
  });
</script>
{% endblock %}