{% extends "core/base.html" %}
{% block title %}Audit Log — SwiftPOS{% endblock %}

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

  <!-- Page Header -->
  <div class="d-flex align-items-center justify-content-between mb-4">
    <div>
      <h1 class="h3 mb-0 fw-bold" style="background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">
        <i class="fas fa-shield-alt me-2"></i>Audit Log
      </h1>
      <p class="text-muted mb-0">{{ total_count }} total events tracked</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 Date</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 Date</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">Action</label>
          <select name="action" class="form-select">
            <option value="">All Actions</option>
            {% for code, label in action_choices %}
              <option value="{{ code }}" {% if action_filter == code %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-3">
          <label class="form-label small fw-semibold text-muted">User</label>
          <select name="user_id" class="form-select">
            <option value="">All Users</option>
            {% for u in users_list %}
              <option value="{{ u.id }}" {% if user_filter == u.id|stringformat:"s" %}selected{% endif %}>{{ u.username }} ({{ u.get_role_display }})</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-2 d-flex gap-2">
          <button type="submit" class="btn btn-primary w-100">
            <i class="fas fa-filter me-1"></i>Filter
          </button>
          <a href="{% url 'audit_log' %}" class="btn btn-outline-secondary w-100">Clear</a>
        </div>
      </form>
    </div>
  </div>

  <!-- Audit 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,#667eea,#764ba2);color:#fff;">
            <tr>
              <th class="ps-4" style="border-radius:16px 0 0 0;">Timestamp</th>
              <th>User</th>
              <th>Role</th>
              <th>Action</th>
              <th>Target</th>
              <th class="pe-4" style="border-radius:0 16px 0 0;">IP Address</th>
            </tr>
          </thead>
          <tbody>
            {% for entry in page_obj %}
            <tr>
              <td class="ps-4">
                <span class="badge bg-light text-dark border">
                  {{ entry.timestamp|date:"Y-m-d" }}<br>
                  <small class="text-muted">{{ entry.timestamp|date:"H:i:s" }}</small>
                </span>
              </td>
              <td>
                {% if entry.user %}
                  <strong>{{ entry.user.username }}</strong>
                {% else %}
                  <span class="text-muted">Unknown</span>
                {% endif %}
              </td>
              <td>
                {% if entry.user %}
                  <span class="badge 
                    {% if entry.user.role == 'admin' %}bg-danger
                    {% elif entry.user.role == 'manager' %}bg-warning text-dark
                    {% else %}bg-info text-dark{% endif %}">
                    {{ entry.user.get_role_display }}
                  </span>
                {% endif %}
              </td>
              <td>
                {% with action=entry.action %}
                <span class="badge
                  {% if 'delete' in action %}bg-danger
                  {% elif 'login' in action or 'logout' in action %}bg-success
                  {% elif 'create' in action or 'add' in action %}bg-primary
                  {% elif 'edit' in action %}bg-warning text-dark
                  {% elif 'pin' in action %}bg-purple text-white
                  {% else %}bg-secondary{% endif %}">
                  {{ entry.get_action_display }}
                </span>
                {% endwith %}
              </td>
              <td>
                <small class="text-muted">{{ entry.target|default:"—" }}</small>
              </td>
              <td class="pe-4">
                <code class="small">{{ entry.ip_address|default:"—" }}</code>
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="6" class="text-center py-5 text-muted">
                <i class="fas fa-shield-alt fa-3x mb-3 opacity-25 d-block"></i>
                No audit log entries match your filters.
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <!-- Pagination -->
      {% if page_obj.has_other_pages %}
      <div class="d-flex justify-content-center py-3">
        <nav>
          <ul class="pagination pagination-sm mb-0">
            {% if page_obj.has_previous %}
              <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}&date_from={{ date_from }}&date_to={{ date_to }}&action={{ action_filter }}&user_id={{ user_filter }}">‹</a>
              </li>
            {% endif %}
            {% for num in page_obj.paginator.page_range %}
              <li class="page-item {% if page_obj.number == num %}active{% endif %}">
                <a class="page-link" href="?page={{ num }}&date_from={{ date_from }}&date_to={{ date_to }}&action={{ action_filter }}&user_id={{ user_filter }}">{{ num }}</a>
              </li>
            {% endfor %}
            {% if page_obj.has_next %}
              <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}&date_from={{ date_from }}&date_to={{ date_to }}&action={{ action_filter }}&user_id={{ user_filter }}">›</a>
              </li>
            {% endif %}
          </ul>
        </nav>
      </div>
      {% endif %}
    </div>
  </div>

</div>
{% endblock %}