{% extends "core/base.html" %}
{% block title %}Suspicious Activity — SwiftPOS{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-4">

  <div class="d-flex align-items-center justify-content-between mb-4">
    <div>
      <h1 class="h3 fw-bold mb-0" style="background:linear-gradient(135deg,#f5576c,#fa709a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">
        <i class="fas fa-exclamation-triangle me-2"></i>Suspicious Activity
      </h1>
      <p class="text-muted mb-0">
        <span class="badge bg-danger rounded-pill">{{ total_unresolved }}</span> unresolved flags
      </p>
    </div>
  </div>

  <!-- Filters -->
  <div class="card border-0 shadow-sm mb-4" style="border-radius:16px;">
    <div class="card-body">
      <form method="get" class="row g-3 align-items-end">
        <div class="col-md-2">
          <label class="form-label small fw-semibold text-muted">From</label>
          <input type="date" name="date_from" class="form-control" value="{{ date_from }}">
        </div>
        <div class="col-md-2">
          <label class="form-label small fw-semibold text-muted">To</label>
          <input type="date" name="date_to" class="form-control" value="{{ date_to }}">
        </div>
        <div class="col-md-3">
          <label class="form-label small fw-semibold text-muted">Cashier</label>
          <input type="text" name="cashier" class="form-control" placeholder="Username..." value="{{ cashier_filter }}">
        </div>
        <div class="col-md-2">
          <label class="form-label small fw-semibold text-muted">Status</label>
          <select name="resolved" class="form-select">
            <option value="">All</option>
            <option value="no" {% if resolved_filter == 'no' %}selected{% endif %}>Unresolved</option>
            <option value="yes" {% if resolved_filter == 'yes' %}selected{% endif %}>Resolved</option>
          </select>
        </div>
        <div class="col-md-3 d-flex gap-2">
          <button type="submit" class="btn btn-primary flex-fill" style="border-radius:12px;">
            <i class="fas fa-filter me-1"></i>Filter
          </button>
          <a href="{% url 'sales:suspicious_activity' %}" class="btn btn-outline-secondary" style="border-radius:12px;">Clear</a>
        </div>
      </form>
    </div>
  </div>

  <!-- Flags Table -->
  <div class="card border-0 shadow-sm" style="border-radius:16px;">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead style="background:linear-gradient(135deg,#f5576c,#fa709a);color:#fff;">
            <tr>
              <th class="ps-4" style="border-radius:16px 0 0 0;">Order</th>
              <th>Cashier</th>
              <th>Reason</th>
              <th>Amount</th>
              <th>Flagged At</th>
              <th>Status</th>
              <th class="pe-4" style="border-radius:0 16px 0 0;">Action</th>
            </tr>
          </thead>
          <tbody>
            {% for flag in flags %}
            <tr class="{% if not flag.resolved %}table-warning{% endif %}">
              <td class="ps-4">
                <a href="{% url 'sales:print_receipt' flag.order.id %}" class="fw-bold text-decoration-none">
                  {{ flag.order.order_number }}
                </a>
              </td>
              <td>{{ flag.order.cashier }}</td>
              <td>
                <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3">
                  {{ flag.reason }}
                </span>
              </td>
              <td class="fw-bold">{{ flag.order.final_amount|floatformat:2 }}</td>
              <td>
                <small class="text-muted">{{ flag.flagged_at|date:"d M Y H:i" }}</small>
              </td>
              <td>
                {% if flag.resolved %}
                  <span class="badge bg-success">Resolved</span>
                  <br><small class="text-muted">by {{ flag.resolved_by }}</small>
                {% else %}
                  <span class="badge bg-danger">Open</span>
                {% endif %}
              </td>
              <td class="pe-4">
                {% if not flag.resolved %}
                <form method="post" style="display:inline;">
                  {% csrf_token %}
                  <input type="hidden" name="action" value="resolve">
                  <input type="hidden" name="flag_id" value="{{ flag.id }}">
                  <button type="submit" class="btn btn-sm btn-outline-success" style="border-radius:8px;"
                          onclick="return confirm('Mark this as resolved?')">
                    <i class="fas fa-check me-1"></i>Resolve
                  </button>
                </form>
                {% else %}
                  <span class="text-muted small">—</span>
                {% endif %}
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="7" class="text-center py-5 text-muted">
                <i class="fas fa-shield-alt fa-3x mb-3 opacity-25 d-block text-success"></i>
                No suspicious activity found. All clear!
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}