{% extends "base.html" %}
{% block title %}تذاكري{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl font-serif font-bold text-white">
            {% if current_user.role == 'trainer' %}
            تذاكر الطلاب
            {% elif current_user.role == 'admin' %}
            جميع التذاكر
            {% else %}
            تذاكري
            {% endif %}
        </h1>
        <a href="{{ url_for('courses.index') }}" class="text-sm text-slate-400 hover:text-gold-400">
            استعراض الدورات ←
        </a>
    </div>

    <!-- Filters -->
    <div class="glass p-4 rounded-2xl mb-6 flex items-center gap-4">
        <a href="{{ url_for('tickets.my_tickets') }}" class="text-sm px-3 py-1 rounded {% if not status_filter %}bg-gold-500 text-black{% else %}bg-white/10 text-white hover:bg-white/20{% endif %} transition">الكل</a>
        <a href="{{ url_for('tickets.my_tickets', status='open') }}" class="text-sm px-3 py-1 rounded {% if status_filter == 'open' %}bg-gold-500 text-black{% else %}bg-white/10 text-white hover:bg-white/20{% endif %} transition">مفتوحة</a>
        <a href="{{ url_for('tickets.my_tickets', status='in_progress') }}" class="text-sm px-3 py-1 rounded {% if status_filter == 'in_progress' %}bg-gold-500 text-black{% else %}bg-white/10 text-white hover:bg-white/20{% endif %} transition">قيد المعالجة</a>
        <a href="{{ url_for('tickets.my_tickets', status='resolved') }}" class="text-sm px-3 py-1 rounded {% if status_filter == 'resolved' %}bg-gold-500 text-black{% else %}bg-white/10 text-white hover:bg-white/20{% endif %} transition">تم الحل</a>
        <a href="{{ url_for('tickets.my_tickets', status='closed') }}" class="text-sm px-3 py-1 rounded {% if status_filter == 'closed' %}bg-gold-500 text-black{% else %}bg-white/10 text-white hover:bg-white/20{% endif %} transition">مغلقة</a>
    </div>

    <!-- Tickets List -->
    <div class="space-y-3">
        {% for ticket in tickets %}
        <a href="{{ url_for('tickets.detail', ticket_id=ticket.id) }}" class="block glass p-5 rounded-2xl hover:bg-white/5 transition">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <div class="flex items-center gap-3 mb-2">
                        <span class="text-xs px-2 py-0.5 rounded-full
                            {% if ticket.ticket_type == 'help' %}bg-blue-500/20 text-blue-400
                            {% else %}bg-emerald-500/20 text-emerald-400{% endif %}">
                            {{ ticket.type_label_ar }}
                        </span>
                        <span class="text-xs px-2 py-0.5 rounded-full
                            {% if ticket.status == 'open' %}bg-yellow-500/20 text-yellow-400
                            {% elif ticket.status == 'in_progress' %}bg-blue-500/20 text-blue-400
                            {% elif ticket.status == 'resolved' %}bg-emerald-500/20 text-emerald-400
                            {% else %}bg-slate-500/20 text-slate-400{% endif %}">
                            {{ ticket.status_label_ar }}
                        </span>
                        <span class="text-xs text-slate-500">{{ ticket.created_at.strftime('%Y/%m/%d') }}</span>
                    </div>
                    <h3 class="text-white font-medium">{{ ticket.subject }}</h3>
                    <p class="text-sm text-slate-400 mt-1">{{ ticket.course.title_ar }}</p>
                    {% if ticket.last_message %}
                    <p class="text-xs text-slate-500 mt-2 truncate">{{ ticket.last_message.message }}</p>
                    {% endif %}
                </div>
                <div class="text-slate-400">→</div>
            </div>
        </a>
        {% else %}
        <div class="glass p-12 rounded-2xl text-center text-slate-400">
            <p>لا توجد تذاكر بعد</p>
            <a href="{{ url_for('courses.index') }}" class="inline-block mt-4 text-gold-400 hover:text-gold-300">
                استعرض الدورات المتاحة
            </a>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}