{% extends "base.html" %}
{% block title %}طلباتي - النماذج الأولية{% endblock %}
{% block content %}
<div class="max-w-6xl mx-auto px-4 py-8">
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">📋 طلبات النماذج الأولية</h1>
            <p class="text-gray-500 mt-1">تتبع حالة طلباتك وعروض الأسعار</p>
        </div>
        <a href="{{ url_for('prototyping.index') }}" class="bg-indigo-600 text-white px-5 py-2.5 rounded-lg hover:bg-indigo-700 transition">🏭 دليل المصانع</a>
    </div>

    {% if requests %}
    <div class="space-y-4">
        {% for req in requests %}
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-5 border border-gray-100 dark:border-gray-700 hover:shadow-lg transition">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div class="flex-1">
                    <div class="flex items-center gap-3 mb-2">
                        <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ req.title }}</h3>
                        {% set status_colors = {'draft': 'bg-gray-100 text-gray-700', 'sent': 'bg-blue-100 text-blue-700', 'quoted': 'bg-yellow-100 text-yellow-700', 'accepted': 'bg-green-100 text-green-700', 'in_production': 'bg-purple-100 text-purple-700', 'delivered': 'bg-emerald-100 text-emerald-700', 'cancelled': 'bg-red-100 text-red-700'} %}
                        {% set status_labels = {'draft': 'مسودة', 'sent': 'مُرسل', 'quoted': 'تم التسعير', 'accepted': 'مقبول', 'in_production': 'قيد التصنيع', 'delivered': 'تم التسليم', 'cancelled': 'ملغي'} %}
                        <span class="text-xs px-2.5 py-1 rounded-full font-medium {{ status_colors.get(req.status, 'bg-gray-100 text-gray-700') }}">
                            {{ status_labels.get(req.status, req.status) }}
                        </span>
                    </div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">{{ req.report.project_name if req.report else '' }}</p>
                    <div class="flex flex-wrap gap-4 text-xs text-gray-500">
                        {% if req.factory %}
                        <span>🏭 {{ req.factory.name_ar or req.factory.name }}</span>
                        {% endif %}
                        <span>📦 الكمية: {{ req.quantity }}</span>
                        {% if req.budget_range %}
                        <span>💰 {{ req.budget_range }}</span>
                        {% endif %}
                        <span>📅 {{ req.created_at.strftime('%Y-%m-%d') }}</span>
                        {% if req.quotes.count() > 0 %}
                        <span class="text-green-600 font-medium">💬 {{ req.quotes.count() }} عرض سعر</span>
                        {% endif %}
                    </div>
                </div>
                <a href="{{ url_for('prototyping.view_request', req_id=req.id) }}" class="inline-flex items-center gap-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition text-sm">
                    عرض التفاصيل →
                </a>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-16 bg-white dark:bg-gray-800 rounded-xl shadow">
        <div class="text-5xl mb-4">📋</div>
        <h3 class="text-xl font-bold text-gray-700 dark:text-gray-300 mb-2">لا توجد طلبات بعد</h3>
        <p class="text-gray-500 mb-4">ابدأ بتصفح دليل المصانع وأرسل أول طلب نموذج أولي</p>
        <a href="{{ url_for('prototyping.index') }}" class="inline-block bg-indigo-600 text-white px-6 py-2.5 rounded-lg hover:bg-indigo-700 transition">🏭 تصفح المصانع</a>
    </div>
    {% endif %}
</div>
{% endblock %}