{% extends 'base_customer.html' %}

{% block title %}My Support Tickets - Optinet Global Links{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>My Support Tickets</h2>
                <a href="{% url 'tickets:ticket_create' %}" class="btn btn-primary">
                    <i class="bi bi-plus"></i> Create Ticket
                </a>
            </div>

            {% if page_obj %}
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Ticket #</th>
                                        <th>Subject</th>
                                        <th>Priority</th>
                                        <th>Status</th>
                                        <th>Created</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for ticket in page_obj %}
                                    <tr>
                                        <td>
                                            <code class="bg-dark px-2 py-1 rounded">{{ ticket.ticket_number }}</code>
                                        </td>
                                        <td>
                                            <div>
                                                <strong>{{ ticket.title }}</strong>
                                                {% if ticket.category %}
                                                    <br>
                                                    <small class="text-secondary">
                                                        <i class="bi bi-tag me-1"></i>{{ ticket.category.name }}
                                                    </small>
                                                {% endif %}
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-{% if ticket.priority == 'urgent' %}danger{% elif ticket.priority == 'high' %}warning{% elif ticket.priority == 'medium' %}primary{% else %}secondary{% endif %}">
                                                {% if ticket.priority == 'urgent' %}
                                                    <i class="bi bi-exclamation-triangle-fill me-1"></i>
                                                {% elif ticket.priority == 'high' %}
                                                    <i class="bi bi-arrow-up me-1"></i>
                                                {% endif %}
                                                {{ ticket.get_priority_display }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge bg-{% if ticket.status == 'closed' %}success{% elif ticket.status == 'resolved' %}info{% elif ticket.status == 'in_progress' %}warning{% else %}secondary{% endif %}">
                                                {% if ticket.status == 'closed' %}
                                                    <i class="bi bi-check-circle me-1"></i>
                                                {% elif ticket.status == 'in_progress' %}
                                                    <i class="bi bi-clock me-1"></i>
                                                {% endif %}
                                                {{ ticket.get_status_display }}
                                            </span>
                                        </td>
                                        <td>
                                            <div>
                                                {{ ticket.created_at|date:"M d, Y" }}
                                                <br>
                                                <small class="text-secondary">{{ ticket.created_at|time:"H:i" }}</small>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="{% url 'tickets:ticket_detail' ticket.ticket_id %}" class="btn btn-sm btn-outline-primary">
                                                <i class="bi bi-eye me-1"></i> View
                                            </a>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        {% if page_obj.has_other_pages %}
                        <nav aria-label="Page navigation">
                            <ul class="pagination justify-content-center">
                                {% if page_obj.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
                                    </li>
                                {% endif %}

                                {% for num in page_obj.paginator.page_range %}
                                    {% if page_obj.number == num %}
                                        <li class="page-item active">
                                            <span class="page-link">{{ num }}</span>
                                        </li>
                                    {% else %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                                        </li>
                                    {% endif %}
                                {% endfor %}

                                {% if page_obj.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                        {% endif %}
                    </div>
                </div>
            {% else %}
                <div class="card">
                    <div class="card-body text-center">
                        <h5>No tickets found</h5>
                        <p class="text-muted">You haven't created any support tickets yet.</p>
                        <a href="{% url 'tickets:ticket_create' %}" class="btn btn-primary">Create Your First Ticket</a>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}