{% extends "base.html" %}
{% block title %}{{ ticket.subject }}{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-12">
    <div class="flex items-center gap-4 mb-8">
        <a href="{{ url_for('tickets.my_tickets') }}" class="text-slate-400 hover:text-white">←</a>
        <div class="flex-1">
            <div class="flex items-center gap-3">
                <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>
            </div>
            <h1 class="text-xl font-bold text-white mt-2">{{ ticket.subject }}</h1>
            <p class="text-sm text-slate-400">{{ ticket.course.title_ar }}</p>
        </div>
    </div>

    <!-- Application details for "apply" type tickets -->
    {% if ticket.ticket_type == 'apply' %}
    {% if ticket.application_budget or ticket.application_city or ticket.application_timeline or ticket.application_team_size %}
    <div class="glass p-4 rounded-2xl mb-6">
        <h3 class="text-sm font-bold text-gold-500 mb-3">تفاصيل المشروع</h3>
        <div class="grid grid-cols-2 gap-4 text-sm">
            {% if ticket.application_budget %}
            <div>
                <span class="text-slate-400">الميزانية:</span>
                <span class="text-white mr-2">{{ "{:,.0f}".format(ticket.application_budget) }} ريال</span>
            </div>
            {% endif %}
            {% if ticket.application_city %}
            <div>
                <span class="text-slate-400">مدينة التنفيذ:</span>
                <span class="text-white mr-2">{{ ticket.application_city }}</span>
            </div>
            {% endif %}
            {% if ticket.application_team_size %}
            <div>
                <span class="text-slate-400">حجم الفريق:</span>
                <span class="text-white mr-2">{{ ticket.application_team_size }} أعضاء</span>
            </div>
            {% endif %}
        </div>
        {% if ticket.application_timeline %}
        <div class="mt-3">
            <span class="text-slate-400 text-sm">الجدول الزمني:</span>
            <p class="text-white mt-1">{{ ticket.application_timeline }}</p>
        </div>
        {% endif %}
    </div>
    {% endif %}
    {% endif %}

    <!-- Messages -->
        {% if ticket.status != 'closed' %}
        <button id="closeBtn" class="text-sm px-4 py-2 rounded-lg bg-red-500/20 text-red-400 hover:bg-red-500/30 transition">
            إغلاق التذكرة
        </button>
        {% else %}
        <button id="reopenBtn" class="text-sm px-4 py-2 rounded-lg bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30 transition">
            إعادة فتح
        </button>
        {% endif %}
    </div>

    <!-- Messages -->
    <div id="messagesContainer" class="space-y-4 mb-6">
        {% for msg in ticket.messages %}
        <div class="flex {% if msg.is_from_student %}justify-end{% else %}justify-start{% endif %}">
            <div class="max-w-[70%] glass p-4 rounded-2xl {% if msg.is_from_student %}bg-gold-500/10{% else %}bg-white/5{% endif %}">
                <div class="flex items-center gap-2 mb-2">
                    <span class="text-sm font-medium text-white">{{ msg.sender.name }}</span>
                    <span class="text-xs text-slate-500">{{ msg.created_at.strftime('%H:%M') }}</span>
                </div>
                <p class="text-slate-300">{{ msg.message }}</p>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Reply Form -->
    {% if ticket.status != 'closed' %}
    <form id="replyForm" class="glass p-4 rounded-2xl">
        <textarea id="messageInput" rows="3" required
            class="w-full bg-black/30 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-slate-500 focus:outline-none focus:border-gold-500 resize-none"
            placeholder="اكتب ردك..."></textarea>
        <div class="flex justify-end mt-3">
            <button type="submit" id="sendBtn"
                class="bg-gold-500 hover:bg-gold-600 text-black font-bold px-6 py-2 rounded-lg transition">
                إرسال
            </button>
        </div>
    </form>
    {% endif %}
</div>

<script>
const ticketId = {{ ticket.id }};
let lastMessageId = {{ ticket.messages.order_by(TrainerTicketMessage.id.desc()).first().id if ticket.messages.count() > 0 else 0 }};

document.getElementById('replyForm')?.addEventListener('submit', async function(e) {
    e.preventDefault();
    const btn = document.getElementById('sendBtn');
    const input = document.getElementById('messageInput');
    const message = input.value.trim();

    if (!message) return;

    btn.disabled = true;
    btn.textContent = 'جاري الإرسال...';

    const formData = new FormData();
    formData.append('message', message);
    formData.append('csrf_token', '{{ csrf_token() }}');

    try {
        const response = await fetch(`/tickets/${ticketId}/message`, {
            method: 'POST',
            body: formData
        });

        const data = await response.json();

        if (data.success) {
            input.value = '';
            location.reload();
        } else {
            alert(data.error || 'حدث خطأ');
        }
    } catch (err) {
        alert('حدث خطأ في الاتصال');
    } finally {
        btn.disabled = false;
        btn.textContent = 'إرسال';
    }
});

document.getElementById('closeBtn')?.addEventListener('click', async function() {
    if (!confirm('هل أنت متأكد من إغلاق التذكرة؟')) return;

    const formData = new FormData();
    formData.append('csrf_token', '{{ csrf_token() }}');

    const response = await fetch(`/tickets/${ticketId}/close`, {
        method: 'POST',
        body: formData
    });

    if (response.ok) {
        location.reload();
    }
});

document.getElementById('reopenBtn')?.addEventListener('click', async function() {
    const formData = new FormData();
    formData.append('csrf_token', '{{ csrf_token() }}');

    const response = await fetch(`/tickets/${ticketId}/reopen`, {
        method: 'POST',
        body: formData
    });

    if (response.ok) {
        location.reload();
    }
});

// Poll for new messages every 5 seconds
setInterval(async function() {
    if ({{ 'true' if ticket.status != 'closed' else 'false' }}) {
        try {
            const response = await fetch(`/tickets/api/${ticketId}/messages?last_id=${lastMessageId}`);
            const data = await response.json();

            if (data.messages && data.messages.length > 0) {
                location.reload();
            }
        } catch (err) {
            // Ignore errors
        }
    }
}, 5000);
</script>
{% endblock %}