{% extends "base.html" %}
{% block title %}تذكرة جديدة{% endblock %}
{% block content %}
<div class="max-w-2xl mx-auto px-4 py-12">
    <div class="flex items-center gap-4 mb-8">
        <a href="{{ url_for('courses.detail', slug=course.slug) }}" class="text-slate-400 hover:text-white">←</a>
        <h1 class="text-2xl font-serif font-bold text-white">
            {% if ticket_type == 'help' %}طلب مساعدة{% else %}مساعدة في التنفيذ{% endif %}
        </h1>
    </div>

    <div class="glass p-6 rounded-2xl">
        <div class="mb-6">
            <p class="text-slate-400 text-sm mb-2">الدورة</p>
            <p class="text-white font-medium">{{ course.title_ar }}</p>
        </div>

        <form id="ticketForm" class="space-y-4">
            <input type="hidden" name="ticket_type" value="{{ ticket_type }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

            <div>
                <label class="block text-sm text-slate-400 mb-2">الموضوع</label>
                <input type="text" name="subject" 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"
                    placeholder="اكتب موضوع طلبك...">
            </div>

            <div>
                <label class="block text-sm text-slate-400 mb-2">الرسالة</label>
                <textarea name="message" rows="5" 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>

            <!-- Additional fields for "apply" type only -->
            {% if ticket_type == 'apply' %}
            <div class="space-y-4 mt-6 pt-6 border-t border-white/10">
                <h3 class="text-lg font-bold text-white">تفاصيل المشروع</h3>

                <!-- Budget -->
                <div>
                    <label class="block text-sm text-slate-400 mb-2">الميزانية (ريال)</label>
                    <input type="number" name="application_budget" step="0.01"
                        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"
                        placeholder="الميزانية المتوقعة...">
                </div>

                <!-- City -->
                <div>
                    <label class="block text-sm text-slate-400 mb-2">مدينة التنفيذ</label>
                    <input type="text" name="application_city"
                        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"
                        placeholder="المدينة التي سيتم التنفيذ فيها...">
                </div>

                <!-- Timeline -->
                <div>
                    <label class="block text-sm text-slate-400 mb-2">الجدول الزمني</label>
                    <textarea name="application_timeline" rows="3"
                        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>

                <!-- Team Size -->
                <div>
                    <label class="block text-sm text-slate-400 mb-2">حجم الفريق</label>
                    <input type="number" name="application_team_size" min="1"
                        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"
                        placeholder="عدد أعضاء الفريق...">
                </div>
            </div>
            {% endif %}

            <button type="submit" id="submitBtn"
                class="w-full bg-gold-500 hover:bg-gold-600 text-black font-bold px-6 py-3 rounded-lg transition">
                إرسال الطلب
            </button>
        </form>
    </div>
</div>

<script>
document.getElementById('ticketForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const btn = document.getElementById('submitBtn');
    btn.disabled = true;
    btn.textContent = 'جاري الإرسال...';

    const formData = new FormData(this);

    try {
        const response = await fetch('{{ url_for("tickets.create_ticket", course_id=course.id) }}', {
            method: 'POST',
            body: formData
        });

        const data = await response.json();

        if (data.success) {
            window.location.href = '/tickets/' + data.ticket_id;
        } else {
            alert(data.error || 'حدث خطأ');
            btn.disabled = false;
            btn.textContent = 'إرسال الطلب';
        }
    } catch (err) {
        alert('حدث خطأ في الاتصال');
        btn.disabled = false;
        btn.textContent = 'إرسال الطلب';
    }
});
</script>
{% endblock %}