{% extends "layout/base.html" %}

{% block content %}
<h2 class="mb-3">Tickets &amp; Remarks</h2>

<ul class="nav nav-tabs mb-3">
  <li class="nav-item">
    <a class="nav-link {% if tab == 'tickets' %}active{% endif %}" href="{{ url_for('main.tickets_page', tab='tickets', active=('1' if active_only else '0'), customer_id=customer_id, backup_software=backup_software, backup_type=backup_type, q=q) }}">Tickets</a>
  </li>
  <li class="nav-item">
    <a class="nav-link {% if tab == 'remarks' %}active{% endif %}" href="{{ url_for('main.tickets_page', tab='remarks', active=('1' if active_only else '0'), customer_id=customer_id, backup_software=backup_software, backup_type=backup_type, q=q) }}">Remarks</a>
  </li>
</ul>

<form method="get" class="row g-2 align-items-end mb-3">
  <input type="hidden" name="tab" value="{{ tab }}" />

  <div class="col-auto">
    <label class="form-label" for="flt_active">Status</label>
    <select class="form-select" id="flt_active" name="active">
      <option value="1" {% if active_only %}selected{% endif %}>Active</option>
      <option value="0" {% if not active_only %}selected{% endif %}>All</option>
    </select>
  </div>

  <div class="col-auto">
    <label class="form-label" for="flt_customer">Customer</label>
    <select class="form-select" id="flt_customer" name="customer_id">
      <option value="0">All</option>
      {% for c in customers %}
        <option value="{{ c.id }}" {% if customer_id == c.id %}selected{% endif %}>{{ c.name }}</option>
      {% endfor %}
    </select>
  </div>

  <div class="col-auto">
    <label class="form-label" for="flt_backup">Backup software</label>
    <input class="form-control" id="flt_backup" name="backup_software" value="{{ backup_software }}" />
  </div>

  <div class="col-auto">
    <label class="form-label" for="flt_type">Backup type</label>
    <input class="form-control" id="flt_type" name="backup_type" value="{{ backup_type }}" />
  </div>

  <div class="col-auto" style="min-width: 260px;">
    <label class="form-label" for="flt_q">Search</label>
    <input class="form-control" id="flt_q" name="q" value="{{ q }}" placeholder="ticket code / job" />
  </div>

  <div class="col-auto">
    <button class="btn btn-primary" type="submit">Filter</button>
    <a class="btn btn-outline-secondary" href="{{ url_for('main.tickets_page', tab=tab) }}">Reset</a>
  </div>
</form>

{% if tab == 'tickets' %}
  <div class="table-responsive">
    <table class="table table-sm table-hover align-middle">
      <thead class="table-light">
        <tr>
          <th>Status</th>
          <th>Ticket code</th>
          <th>Customers</th>
          <th>Scope</th>
          <th class="text-end">Linked runs</th>
          <th>Active from</th>
          <th>Start date</th>
          <th>Resolved at</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% if tickets %}
          {% for t in tickets %}
            <tr>
              <td>
                {% if t.active %}
                  <span title="Active">🎫</span> Active
                {% else %}
                  <span title="Resolved">✅</span> Resolved
                {% endif %}
              </td>
              <td class="text-nowrap">{{ t.ticket_code }}</td>
              <td>{{ t.customers }}</td>
              <td>{{ t.scope_summary }}</td>
              <td class="text-end">{{ t.linked_runs }}</td>
              <td class="text-nowrap">{{ t.active_from_date }}</td>
              <td class="text-nowrap">{{ t.start_date }}</td>
              <td class="text-nowrap">{{ t.resolved_at|local_datetime }}</td>
              <td class="text-nowrap">
                <a class="btn btn-sm btn-outline-primary" href="{{ url_for('main.ticket_detail', ticket_id=t.id) }}">View</a>
                {% if t.active and t.job_id %}
                  <a class="btn btn-sm btn-outline-secondary ms-1" href="{{ url_for('main.job_detail', job_id=t.job_id) }}">Job page</a>
                {% endif %}
                {% if t.active and (active_role in ['admin','operator']) %}
                  <form method="post" action="{{ url_for('main.api_ticket_resolve', ticket_id=t.id) }}" class="d-inline">
                    <button class="btn btn-sm btn-outline-success" type="submit">Resolve</button>
                  </form>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        {% else %}
          <tr>
            <td colspan="9" class="text-muted text-center py-3">No tickets found.</td>
          </tr>
        {% endif %}
      </tbody>
    </table>
  </div>
{% else %}
  <div class="table-responsive">
    <table class="table table-sm table-hover align-middle">
      <thead class="table-light">
        <tr>
          <th>Status</th>
          <th>Remark</th>
          <th>Customers</th>
          <th>Scope</th>
          <th class="text-end">Linked runs</th>
          <th>Start date</th>
          <th>Resolved at</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% if remarks %}
          {% for r in remarks %}
            <tr>
              <td>
                {% if r.active %}
                  <span title="Active">💬</span> Active
                {% else %}
                  <span title="Resolved">✅</span> Resolved
                {% endif %}
              </td>
              <td>
                <div class="text-muted small">{{ r.preview }}</div>
              </td>
              <td>{{ r.customers }}</td>
              <td>{{ r.scope_summary }}</td>
              <td class="text-end">{{ r.linked_runs }}</td>
              <td class="text-nowrap">{{ r.start_date }}</td>
              <td class="text-nowrap">{{ r.resolved_at|local_datetime }}</td>
              <td class="text-nowrap">
                <a class="btn btn-sm btn-outline-primary" href="{{ url_for('main.remark_detail', remark_id=r.id) }}">View</a>
                {% if r.active and r.job_id %}
                  <a class="btn btn-sm btn-outline-secondary ms-1" href="{{ url_for('main.job_detail', job_id=r.job_id) }}">Job page</a>
                {% endif %}
                {% if r.active and (active_role in ['admin','operator']) %}
                  <form method="post" action="{{ url_for('main.api_remark_resolve', remark_id=r.id) }}" class="d-inline">
                    <button class="btn btn-sm btn-outline-success" type="submit">Resolve</button>
                  </form>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        {% else %}
          <tr>
            <td colspan="8" class="text-muted text-center py-3">No remarks found.</td>
          </tr>
        {% endif %}
      </tbody>
    </table>
  </div>
{% endif %}

{% endblock %}