{% extends "base.html" %}
{% block title %}New ticket{% endblock %}
{% block content %}
<div class="app-page-header">
  <h1><i class="fas fa-plus-circle" aria-hidden="true"></i> New ticket</h1>
  <div class="app-page-header-actions">
    <a class="btn btn-secondary btn-sm" href="{{ url_for('organization_tickets_page') }}">Back to list</a>
  </div>
</div>
<form id="f" class="filters-section" style="max-width:560px;padding:14px;">
  <div class="form-group"><label>Title</label><input id="title" required style="width:100%"></div>
  <div class="form-group"><label>Description</label><textarea id="desc" rows="4" style="width:100%"></textarea></div>
  <div class="form-group"><label>Priority</label>
    <select id="pri"><option>Low</option><option selected>Medium</option><option>High</option><option>Urgent</option></select></div>
  <button type="submit" class="btn btn-primary btn-sm">Create</button>
  <a href="{{ url_for('organization_tickets_page') }}" class="btn btn-secondary btn-sm">Cancel</a>
</form>
<pre id="msg" class="muted" style="margin-top:12px;max-height:200px;overflow:auto;"></pre>
<script>
document.getElementById('f').onsubmit = async function(ev){
  ev.preventDefault();
  const msg = document.getElementById('msg');
  msg.textContent = 'Saving…';
  const r = await fetch('/api/portal/organization/tickets', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      title: document.getElementById('title').value,
      description: document.getElementById('desc').value,
      priority: document.getElementById('pri').value,
    })
  });
  const j = await r.json();
  if (j.success && j.id) {
    msg.textContent = 'Created ticket #' + j.id;
    location.href = '/organization/tickets/' + j.id;
  } else {
    msg.textContent = j.error || JSON.stringify(j);
  }
};
</script>
{% endblock %}