{% extends "base.html" %}

{% block title %}Support Tickets{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Support Tickets</h1>
    <a href="/tickets/new" class="btn btn-primary">New Ticket</a>
</div>

<div class="card shadow mb-4">
    <div class="card-header bg-light">
        <h5 class="mb-0">Filter Tickets</h5>
    </div>
    <div class="card-body">
        <form action="/tickets" method="get" up-target="#tickets-container" up-transition="cross-fade">
            <div class="row g-3">
                <div class="col-md-4">
                    <label for="status" class="form-label">Status</label>
                    <select class="form-select" id="status" name="status" up-autosubmit>
                        <option value="">All Statuses</option>
                        <option value="open" {% if status == "open" %}selected{% endif %}>Open</option>
                        <option value="in_progress" {% if status == "in_progress" %}selected{% endif %}>In Progress</option>
                        <option value="waiting_for_customer" {% if status == "waiting_for_customer" %}selected{% endif %}>Waiting for Customer</option>
                        <option value="resolved" {% if status == "resolved" %}selected{% endif %}>Resolved</option>
                        <option value="closed" {% if status == "closed" %}selected{% endif %}>Closed</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="priority" class="form-label">Priority</label>
                    <select class="form-select" id="priority" name="priority" up-autosubmit>
                        <option value="">All Priorities</option>
                        <option value="low" {% if priority == "low" %}selected{% endif %}>Low</option>
                        <option value="medium" {% if priority == "medium" %}selected{% endif %}>Medium</option>
                        <option value="high" {% if priority == "high" %}selected{% endif %}>High</option>
                        <option value="critical" {% if priority == "critical" %}selected{% endif %}>Critical</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="search" class="form-label">Search</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="search" name="search" value="{{ search | default(value='') }}" placeholder="Search tickets...">
                        <button class="btn btn-outline-secondary" type="submit">
                            <i class="bi bi-search"></i> Search
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="tickets-container">
    {% if tickets | length > 0 %}
    <div class="table-responsive">
        <table class="table table-hover">
            <thead class="table-light">
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Status</th>
                    <th>Priority</th>
                    <th>Created</th>
                    <th>Updated</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for ticket in tickets %}
                <tr>
                    <td>{{ ticket.id | truncate(length=8) }}</td>
                    <td>
                        <a href="/tickets/{{ ticket.id }}" up-layer="new modal" up-size="large">
                            {{ ticket.title }}
                        </a>
                    </td>
                    <td>
                        <span class="badge 
                            {% if ticket.status == 'Open' %}bg-danger{% endif %}
                            {% if ticket.status == 'In Progress' %}bg-warning{% endif %}
                            {% if ticket.status == 'Waiting for Customer' %}bg-info{% endif %}
                            {% if ticket.status == 'Resolved' %}bg-success{% endif %}
                            {% if ticket.status == 'Closed' %}bg-secondary{% endif %}
                        ">
                            {{ ticket.status }}
                        </span>
                    </td>
                    <td>
                        <span class="badge 
                            {% if ticket.priority == 'Low' %}bg-success{% endif %}
                            {% if ticket.priority == 'Medium' %}bg-info{% endif %}
                            {% if ticket.priority == 'High' %}bg-warning{% endif %}
                            {% if ticket.priority == 'Critical' %}bg-danger{% endif %}
                        ">
                            {{ ticket.priority }}
                        </span>
                    </td>
                    <td>{{ ticket.created_at | date(format="%Y-%m-%d %H:%M") }}</td>
                    <td>{{ ticket.updated_at | date(format="%Y-%m-%d %H:%M") }}</td>
                    <td>
                        <a href="/tickets/{{ ticket.id }}" class="btn btn-sm btn-outline-primary" up-layer="new modal" up-size="large">
                            View
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="alert alert-info">
        <h4 class="alert-heading">No tickets found!</h4>
        <p>There are no tickets matching your filter criteria. Try adjusting your filters or create a new ticket.</p>
        <hr>
        <p class="mb-0">
            <a href="/tickets/new" class="btn btn-primary">Create New Ticket</a>
        </p>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Initialize Unpoly event handlers
    up.on('up:fragment:inserted', function(event) {
        // This will run whenever a fragment is updated via Unpoly
        console.log('Fragment updated:', event.target);
    });
</script>
{% endblock %}