{% extends 'base.html' %}
{% block content %}
<div class="container mt-2 mb-2 shadow-lg p-4 bg-white rounded">
    <h3 class="mb-4">All Support Tickets <span class="badge bg-secondary">Staff Dashboard</span></h3>
    
    <!-- Search + Filters Form -->
    <form method="get" class="row g-3 mb-4 align-items-end">
        <div class="col-md-5">
            <div class="input-group">
                <input type="text" name="q" class="form-control" placeholder="Search tickets (ID, customer, subject...)" 
                       value="{{ query|default:'' }}">
                <button type="submit" class="btn btn-primary">Search</button>
            </div>
        </div>
        <div class="col-md-3">
            <select name="status" class="form-select">
                <option value="">All Statuses</option>
                {% for value, label in status_choices %}
                <option value="{{ value }}" {% if request.GET.status == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-3">
            <select name="priority" class="form-select">
                <option value="">All Priorities</option>
                {% for value, label in priority_choices %}
                <option value="{{ value }}" {% if request.GET.priority == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-1">
            <a href="{% url 'shop:all_tickets_dashboard' %}" class="btn btn-outline-secondary w-100">Clear</a>
        </div>
    </form>

    <!-- Table remains the same as before -->
    <div class="table-responsive">
        <table class="table table-hover align-middle">
            <thead class="table-dark">
                <tr>
                    <th>ID</th>
                    <th>Customer</th>
                    <th>Subject</th>
                    <th>Priority</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
            {% for ticket in tickets %}
            <tr>
                <td>#{{ ticket.id }}</td>
                <td>{{ ticket.user.username }}<br><small class="text-muted">{{ ticket.user.email }}</small></td>
                <td>{{ ticket.subject|truncatechars:60 }}</td>
                <td>
                    <span class="badge {% if ticket.priority == 'Urgent' %}bg-danger{% elif ticket.priority == 'High' %}bg-warning{% elif ticket.priority == 'Medium' %}bg-info{% else %}bg-secondary{% endif %}">
                        {{ ticket.priority }}
                    </span>
                </td>
                <td>
                    <span class="badge {% if ticket.status == 'Resolved' %}bg-success{% elif ticket.status == 'In Progress' %}bg-primary{% else %}bg-secondary{% endif %}">
                        {{ ticket.status }}
                    </span>
                </td>
                <td>{{ ticket.created_at|date:"d M Y" }}</td>
                <td>
                    <a href="{% url 'admin:shop_ticket_change' ticket.id %}" class="btn btn-sm btn-outline-primary">Manage</a>
                </td>
            </tr>
            {% empty %}
            <tr><td colspan="7" class="text-center py-4">No tickets match your search/filters.</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}