{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block content %}
<div class="row g-4 mb-5">
    
    <div class="col-12 col-lg-8">
        <div class="card h-100">
            <div class="card-body d-flex flex-column justify-content-center p-5 text-center">
                <h2 class="card-title fw-bold text-primary">Need Help? We're Here for You.</h2>
                <p class="card-text text-muted mb-4">
                    Our support team is ready to assist you with any questions or issues.
                    Raise a new ticket, and we'll get back to you as soon as possible.
                </p>
                <a href="{% url 'create_ticket' request.dealer.slug %}" class="btn btn-phoenix-primary btn-lg shadow-sm w-50 mx-auto">
                    Raise a New Ticket
                </a>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-4">
        <div class="card h-100">
            <div class="card-body p-4">
                <h5 class="card-title fw-bold">Quick Links</h5>
                <p class="card-text text-muted">Explore common resources to find answers quickly.</p>
                <ul class="list-unstyled mb-0">
                    <li class="mb-3">
                        <a href="#" class="d-flex align-items-center text-decoration-none">
                            <span class="fs-4 text-secondary me-2"><i class="fas fa-search"></i></span>
                            <span class="text-dark">Search our knowledge base</span>
                        </a>
                    </li>
                    <li class="mb-3">
                        <a href="#" class="d-flex align-items-center text-decoration-none">
                            <span class="fs-4 text-success me-2"><i class="fas fa-question-circle"></i></span>
                            <span class="text-dark">View frequently asked questions</span>
                        </a>
                    </li>
                    <li class="mb-3">
                        <a href="#" class="d-flex align-items-center text-decoration-none">
                            <span class="fs-4 text-info me-2"><i class="fas fa-bell"></i></span>
                            <span class="text-dark">Check system status updates</span>
                        </a>
                    </li>
                </ul>
            </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">
    <div class="card-header border-bottom d-flex justify-content-between align-items-center p-4">
        <h5 class="card-title mb-0">My Tickets</h5>
        <div class="input-group w-50">
            <input type="text" class="form-control" placeholder="Search by ID or subject..." aria-label="Search tickets">
            <button class="btn btn-outline-secondary" type="button">
                <i class="fas fa-search"></i>
            </button>
        </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">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">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for ticket in tickets %}
                    <tr>
                        <td class="text-muted">#{{ 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>{{ ticket.created_at|date:"M d, Y" }} <span class="text-muted small">{{ ticket.created_at|time:"H:i" }}</span></td>
                        <td class="text-end">
                            <a href="{% url 'ticket_detail' request.dealer.slug ticket.id %}" class="btn btn-sm btn-outline-primary">
                                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">No tickets found.</p>
                            <p class="text-muted small">All your past and present tickets will appear here.</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}