{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% block title %}
    {% trans "My Tickets" %}
{% endblock title %}
{% block content %}
    <main class="py-5">
        <div class="container">
            <div class="row justify-content-center mb-5">
                <div class="col-lg-8">
                    <div class="card shadow-lg border-0 rounded-4 overflow-hidden animate__animated animate__fadeInDown">
                        <div class="card-header bg-gradient py-4 border-0 rounded-top-4 text-center">
                            <i class="fa-solid fa-headset fa-2x mb-2"></i>
                            <h2 class="card-title fw-bold  mb-0">{% trans "Need Help?" %}</h2>
                        </div>
                        <div class="card-body p-4 p-md-5 text-center bg-white">
                            <p class="card-text text-muted mb-4">
                                {% blocktrans %}
                                    Our support team is ready to assist you. Raise a new ticket below, and we'll get back to you as soon as possible.
                                {% endblocktrans %}
                            </p>
                            <a href="{% url 'create_ticket' request.dealer.slug %}"
                               class="btn btn-phoenix-primary btn-lg shadow-sm">
                                <i class="fa-solid fa-plus me-1"></i>
                                {% trans "Raise a New Ticket" %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% if messages %}
                <div class="alert-container mb-4">
                    {% for message in messages %}
                        <div class="alert alert-{{ message.tags }} alert-dismissible fade show"
                             role="alert">
                            {{ message }}
                            <button type="button"
                                    class="btn-close"
                                    data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
            <div class="card shadow-lg border-0 rounded-4 animate__animated animate__fadeInUp">
                <div class="card-header border-bottom d-flex flex-column flex-md-row justify-content-between align-items-md-center p-4">
                    <h5 class="card-title mb-2 mb-md-0 me-md-4 fw-bold">{% trans "My Tickets" %}</h5>
                    <div class="input-group w-100 w-md-50">{% include 'partials/search_box.html' %}</div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th scope="col" class="text-secondary text-uppercase fw-bold ps-4">ID</th>
                                    <th scope="col" class="text-secondary text-uppercase fw-bold">Subject</th>
                                    <th scope="col" class="text-secondary text-uppercase fw-bold">Status</th>
                                    <th scope="col" class="text-secondary text-uppercase fw-bold">Priority</th>
                                    <th scope="col" class="text-secondary text-uppercase fw-bold">Created</th>
                                    <th scope="col"
                                        class="text-secondary text-uppercase fw-bold text-end pe-4">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for ticket in tickets %}
                                    <tr>
                                        <td class="text-muted ps-4">#{{ ticket.id }}</td>
                                        <td>{{ ticket.subject }}</td>
                                        <td>
                                            <span class="badge {% if ticket.status == 'open' %}bg-primary {% elif ticket.status == 'in_progress' %}bg-info {% elif ticket.status == 'resolved' %}bg-success {% else %}bg-secondary{% endif %}">
                                                {{ ticket.get_status_display }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge {% if ticket.priority == 'low' %}bg-success {% elif ticket.priority == 'medium' %}bg-warning {% elif ticket.priority == 'high' %}bg-danger {% else %}bg-dark{% endif %}">
                                                {{ ticket.get_priority_display }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="d-block">{{ ticket.created_at|date:"M d, Y" }}</span>
                                            <span class="text-muted small d-block">{{ ticket.created_at|time:"H:i" }}</span>
                                        </td>
                                        <td class="text-end pe-4">
                                            <a href="{% url 'ticket_detail' request.dealer.slug ticket.id %}"
                                               class="btn btn-phoenix-primary btn-sm">
                                                <i class="fa-solid fa-eye me-1"></i>
                                                {% trans "View" %}
                                            </a>
                                        </td>
                                    </tr>
                                {% empty %}
                                    <tr>
                                        <td colspan="6" class="text-center text-muted py-5">
                                            <i class="fas fa-ticket-alt fs-2 mb-3"></i>
                                            <p class="mb-0">{% trans "No tickets found." %}</p>
                                            <p class="text-muted small">{% trans "All your past and present tickets will appear here." %}</p>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </main>
{% endblock %}