{% extends "base.html" %}

{% block title %}RelayDesk Support Center{% endblock %}
{% block meta_description %}Submit, triage, and resolve lightweight support tickets with threaded replies and clean status tracking.{% endblock %}

{% block content %}
<section class="hero-section position-relative overflow-hidden">
  <div class="hero-shape hero-shape-one" aria-hidden="true"></div>
  <div class="hero-shape hero-shape-two" aria-hidden="true"></div>
  <div class="container position-relative py-5 py-lg-6">
    <div class="row align-items-center g-5">
      <div class="col-lg-7">
        <span class="eyebrow">Internal support center</span>
        <h1 class="display-4 fw-bold mt-3 mb-4">Support that moves every ticket from request to resolved.</h1>
        <p class="lead text-muted mb-4">RelayDesk gives your team a lightweight intake desk, live status board, searchable ticket queue, and threaded replies in a polished Bootstrap workspace.</p>
        <form class="hero-search d-flex flex-column flex-sm-row gap-2" action="{% url 'ticket_list' %}" method="get" role="search">
          <label class="visually-hidden" for="hero-search">Search tickets</label>
          <input id="hero-search" class="form-control form-control-lg" type="search" name="q" placeholder="Search subject, requester, or ticket details">
          <button class="btn btn-primary btn-lg" type="submit">Search tickets</button>
        </form>
        <div class="d-flex flex-wrap gap-3 mt-4">
          <a class="btn btn-primary btn-lg" href="{% url 'ticket_create' %}">Submit a ticket</a>
          <a class="btn btn-outline-dark btn-lg" href="{% url 'ticket_list' %}">Open queue</a>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="glass-card quick-intake-card">
          <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
            <div>
              <span class="section-kicker">Fast intake</span>
              <h2 class="h3 mb-1">Create a ticket</h2>
              <p class="text-muted mb-0">Capture the request and start a trackable support thread.</p>
            </div>
            <span class="spark-icon" aria-hidden="true">✦</span>
          </div>
          <form method="post" novalidate>
            {% csrf_token %}
            {% include "core/partials/form_errors.html" with form=ticket_form %}
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label" for="{{ ticket_form.requester_name.id_for_label }}">{{ ticket_form.requester_name.label }}</label>
                {{ ticket_form.requester_name }}
                {% include "core/partials/field_errors.html" with field=ticket_form.requester_name %}
              </div>
              <div class="col-md-6">
                <label class="form-label" for="{{ ticket_form.requester_email.id_for_label }}">{{ ticket_form.requester_email.label }}</label>
                {{ ticket_form.requester_email }}
                {% include "core/partials/field_errors.html" with field=ticket_form.requester_email %}
              </div>
              <div class="col-md-6">
                <label class="form-label" for="{{ ticket_form.category.id_for_label }}">Category</label>
                {{ ticket_form.category }}
                {% include "core/partials/field_errors.html" with field=ticket_form.category %}
              </div>
              <div class="col-md-6">
                <label class="form-label" for="{{ ticket_form.priority.id_for_label }}">Priority</label>
                {{ ticket_form.priority }}
                {% include "core/partials/field_errors.html" with field=ticket_form.priority %}
              </div>
              <div class="col-12">
                <label class="form-label" for="{{ ticket_form.subject.id_for_label }}">Subject</label>
                {{ ticket_form.subject }}
                {% include "core/partials/field_errors.html" with field=ticket_form.subject %}
              </div>
              <div class="col-12">
                <label class="form-label" for="{{ ticket_form.description.id_for_label }}">{{ ticket_form.description.label }}</label>
                {{ ticket_form.description }}
                {% include "core/partials/field_errors.html" with field=ticket_form.description %}
              </div>
            </div>
            <button class="btn btn-secondary w-100 mt-4" type="submit">Create support thread</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="container metrics-strip my-5">
  <div class="row g-3">
    <div class="col-6 col-lg-3">
      <div class="metric-card">
        <span>Total tickets</span>
        <strong>{{ stats.total }}</strong>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="metric-card">
        <span>Open</span>
        <strong>{{ stats.open }}</strong>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="metric-card">
        <span>In triage</span>
        <strong>{{ stats.triage }}</strong>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="metric-card">
        <span>Resolved</span>
        <strong>{{ stats.resolved }}</strong>
      </div>
    </div>
  </div>
</section>

<section class="container my-5">
  <div class="row g-4 align-items-stretch">
    <div class="col-lg-5">
      <div class="support-card h-100">
        <span class="section-kicker">Workflow</span>
        <h2>Simple, visible triage</h2>
        <p class="text-muted">Every request starts with category and priority, lands in the queue, then moves through status updates and replies until it is resolved.</p>
        <div class="workflow-steps">
          <div><span>1</span><strong>Submit</strong><small>Requester creates a ticket</small></div>
          <div><span>2</span><strong>Triage</strong><small>Staff filters, assigns, and updates status</small></div>
          <div><span>3</span><strong>Resolve</strong><small>Threaded replies keep context together</small></div>
        </div>
      </div>
    </div>
    <div class="col-lg-7">
      <div class="support-card h-100">
        <div class="d-flex flex-column flex-md-row justify-content-between gap-3 mb-3">
          <div>
            <span class="section-kicker">Live queue</span>
            <h2 class="mb-0">Recent tickets</h2>
          </div>
          <a class="btn btn-outline-dark align-self-start" href="{% url 'ticket_list' %}">View all</a>
        </div>
        {% if recent_tickets %}
        <div class="ticket-list-mini">
          {% for ticket in recent_tickets %}
          <a class="ticket-mini-row" href="{{ ticket.get_absolute_url }}">
            <span>
              <strong>{{ ticket.ticket_number }}</strong>
              <small>{{ ticket.subject }}</small>
            </span>
            <span class="status-badge status-{{ ticket.status }}">{{ ticket.get_status_display }}</span>
          </a>
          {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
          <div class="empty-shape" aria-hidden="true"></div>
          <h3>No tickets yet</h3>
          <p>Create the first request from the intake form and it will appear here instantly.</p>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>
{% endblock %}