{% extends "public/base.html" %}
{% block title %}Submit a Ticket — My Account{% endblock %}

{% block content %}
<div style="max-width:640px;margin:0 auto;padding:3rem 1.5rem 5rem">

  <div style="margin-bottom:2rem">
    <a href="{% url 'portal_dashboard' %}" style="font-size:.82rem;color:rgba(255,255,255,.6);text-decoration:none">
      <i class="fa-solid fa-arrow-left me-1"></i> Back to My Account
    </a>
  </div>

  <div style="margin-bottom:2rem">
    <h1 style="font-size:1.4rem;font-weight:800;color:#ffffff;margin:0 0 6px">Submit a Ticket</h1>
    <p style="font-size:.88rem;color:rgba(255,255,255,.7);margin:0">We will get back to you as soon as possible.</p>
  </div>

  {% for msg in messages %}
  <div style="background:{% if msg.tags == 'error' %}#fef2f2;border:1px solid #fecaca;color:#dc2626{% else %}#f0fdf4;border:1px solid #bbf7d0;color:#16a34a{% endif %};border-radius:10px;padding:12px 16px;margin-bottom:1.25rem;font-size:.88rem;display:flex;align-items:center;gap:10px">
    <i class="fa-solid {% if msg.tags == 'error' %}fa-circle-exclamation{% else %}fa-circle-check{% endif %}"></i>
    {{ msg }}
  </div>
  {% endfor %}

  <div style="background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:2rem;box-shadow:0 4px 24px rgba(3,49,82,.08)">
    <form method="post">
      {% csrf_token %}

      <div style="margin-bottom:1.1rem">
        <label style="display:block;font-size:.8rem;font-weight:700;color:#374151;margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em">
          Order Reference <span style="font-weight:400;color:#9ca3af">(optional)</span>
        </label>
        <input type="text" name="order_ref" value="{{ order_ref }}"
          style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:.65rem .85rem;font-size:.95rem;color:#1f2937;outline:none;box-sizing:border-box"
          placeholder="e.g. FT619539">
        <p style="margin:4px 0 0;font-size:.78rem;color:#9ca3af">Leave blank if not related to a specific order.</p>
      </div>

      <div style="margin-bottom:1.1rem">
        <label style="display:block;font-size:.8rem;font-weight:700;color:#374151;margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em">Subject</label>
        <input type="text" name="subject" required maxlength="200"
          style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:.65rem .85rem;font-size:.95rem;color:#1f2937;outline:none;box-sizing:border-box"
          placeholder="e.g. Question about my project timeline">
      </div>

      <div style="margin-bottom:1.5rem">
        <label style="display:block;font-size:.8rem;font-weight:700;color:#374151;margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em">Message</label>
        <textarea name="message" required rows="6"
          style="width:100%;border:1px solid #d1d5db;border-radius:8px;padding:.65rem .85rem;font-size:.95rem;color:#1f2937;outline:none;box-sizing:border-box;resize:vertical;font-family:inherit"
          placeholder="Please describe your query in as much detail as possible..."></textarea>
      </div>

      <div style="display:flex;gap:.75rem;flex-wrap:wrap">
        <button type="submit" style="flex:1;min-width:180px;background:#033152;color:#fff;border:none;border-radius:8px;padding:.75rem 1.25rem;font-size:.95rem;font-weight:700;cursor:pointer">
          <i class="fa-solid fa-paper-plane me-1"></i> Submit Ticket
        </button>
        <a href="{% url 'portal_dashboard' %}" style="flex:1;min-width:120px;background:#f3f4f6;color:#374151;border-radius:8px;padding:.75rem 1.25rem;font-size:.95rem;font-weight:600;text-align:center;text-decoration:none">
          Cancel
        </a>
      </div>
    </form>
  </div>

  <div style="margin-top:1.5rem;text-align:center">
    <p style="font-size:.85rem;color:rgba(255,255,255,.6);margin:0">
      Before submitting, check our <a href="{% url 'faq' %}" style="color:#ffffff;text-decoration:underline">FAQ</a> — your answer may already be there.
    </p>
  </div>

</div>
{% endblock %}