{% extends "base.html" %}
{% block title %}طلب نموذج - {{ proto.title }}{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto px-4 py-8">
    <div class="mb-6">
        <a href="{{ url_for('prototyping.my_requests') }}" class="text-indigo-600 hover:underline text-sm">← العودة لطلباتي</a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Request Info -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
                <div class="flex items-start justify-between mb-4">
                    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ proto.title }}</h1>
                    {% 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-sm px-3 py-1 rounded-full font-medium {{ status_colors.get(proto.status, 'bg-gray-100 text-gray-700') }}">
                        {{ status_labels.get(proto.status, proto.status) }}
                    </span>
                </div>

                {% if proto.description %}
                <div class="mb-4">
                    <h3 class="font-medium text-gray-700 dark:text-gray-300 mb-1">الوصف</h3>
                    <p class="text-gray-600 dark:text-gray-400 text-sm whitespace-pre-line">{{ proto.description }}</p>
                </div>
                {% endif %}

                <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 text-center">
                        <div class="text-xs text-gray-500 dark:text-gray-400">الكمية</div>
                        <div class="font-bold text-gray-900 dark:text-white">{{ proto.quantity }}</div>
                    </div>
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 text-center">
                        <div class="text-xs text-gray-500 dark:text-gray-400">الميزانية</div>
                        <div class="font-bold text-gray-900 dark:text-white">{{ proto.budget_range or '-' }}</div>
                    </div>
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 text-center">
                        <div class="text-xs text-gray-500 dark:text-gray-400">الموعد النهائي</div>
                        <div class="font-bold text-gray-900 dark:text-white">{{ proto.deadline.strftime('%Y-%m-%d') if proto.deadline else '-' }}</div>
                    </div>
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 text-center">
                        <div class="text-xs text-gray-500 dark:text-gray-400">تاريخ الطلب</div>
                        <div class="font-bold text-gray-900 dark:text-white">{{ proto.created_at.strftime('%Y-%m-%d') }}</div>
                    </div>
                </div>

                {% if proto.specifications_json %}
                <div>
                    <h3 class="font-medium text-gray-700 dark:text-gray-300 mb-2">المواصفات التقنية</h3>
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 text-sm space-y-1">
                        {% for k, v in proto.specifications_json.items() %}
                        <div><strong class="text-gray-700 dark:text-gray-300">{{ k }}:</strong> <span class="text-gray-600 dark:text-gray-400">{% if v is iterable and v is not string %}{{ v|join('، ') }}{% else %}{{ v }}{% endif %}</span></div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>

            <!-- NDA Section -->
            {% if proto.nda_html %}
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-xl font-bold text-gray-900 dark:text-white">🔒 اتفاقية عدم الإفشاء (NDA)</h2>
                    {% set nda_colors = {'draft': 'bg-gray-100 text-gray-700', 'pending_admin': 'bg-blue-100 text-blue-700', 'pending_factory': 'bg-yellow-100 text-yellow-700', 'approved': 'bg-green-100 text-green-700', 'rejected': 'bg-red-100 text-red-700'} %}
                    {% set nda_labels = {'draft': 'مسودة', 'pending_admin': 'بانتظار موافقة المدير', 'pending_factory': 'بانتظار موافقة المصنع', 'approved': 'معتمدة ✅', 'rejected': 'مرفوضة'} %}
                    <span class="text-xs px-2 py-1 rounded-full font-medium {{ nda_colors.get(proto.nda_status, 'bg-gray-100 text-gray-700') }}">{{ nda_labels.get(proto.nda_status, proto.nda_status or '-') }}</span>
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 text-sm max-h-80 overflow-y-auto">
                    {{ proto.nda_html|safe }}
                </div>
                {% if proto.nda_approved_at %}
                <p class="text-xs text-green-600 mt-2">تمت الموافقة بتاريخ: {{ proto.nda_approved_at.strftime('%Y-%m-%d') }}</p>
                {% endif %}
            </div>
            {% endif %}

            <!-- Cost Estimate -->
            {% if proto.cost_estimate_json %}
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
                <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">💰 تقدير التكلفة</h2>
                <div class="grid grid-cols-2 gap-3">
                    {% set e = proto.cost_estimate_json %}
                    <div class="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg"><div class="text-xs text-gray-500">تكلفة المواد</div><div class="font-bold text-blue-700 dark:text-blue-300">{{ e.get('bom_cost', '-') }}</div></div>
                    <div class="bg-green-50 dark:bg-green-900/20 p-3 rounded-lg"><div class="text-xs text-gray-500">تكلفة الوحدة</div><div class="font-bold text-green-700 dark:text-green-300">{{ e.get('unit_cost', '-') }}</div></div>
                    <div class="bg-purple-50 dark:bg-purple-900/20 p-3 rounded-lg"><div class="text-xs text-gray-500">التكلفة الإجمالية</div><div class="font-bold text-purple-700 dark:text-purple-300">{{ e.get('total_cost', '-') }}</div></div>
                    <div class="bg-amber-50 dark:bg-amber-900/20 p-3 rounded-lg"><div class="text-xs text-gray-500">المدة المتوقعة</div><div class="font-bold text-amber-700 dark:text-amber-300">{{ e.get('lead_time', '-') }}</div></div>
                </div>
                {% if e.get('price_comparison') %}
                <div class="mt-3 text-xs text-gray-500">
                    <strong>مقارنة الأسعار:</strong>
                    {% for k, v in e.price_comparison.items() %} {{ k }}: {{ v }} {% if not loop.last %}|{% endif %}{% endfor %}
                </div>
                {% endif %}
            </div>
            {% endif %}

            <!-- Quotes -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
                <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">💰 عروض الأسعار ({{ quotes|length }})</h2>
                {% if quotes %}
                <div class="space-y-3">
                    {% for q in quotes %}
                    <div class="border dark:border-gray-700 rounded-lg p-4 {% if q.status == 'accepted' %}border-green-300 bg-green-50 dark:bg-green-900/20{% endif %}">
                        <div class="flex items-center justify-between mb-2">
                            <div>
                                <span class="font-bold text-gray-900 dark:text-white">{{ q.factory.name_ar if q.factory else 'مصنع' }}</span>
                                {% if q.status == 'accepted' %}
                                <span class="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full mr-2">✓ مقبول</span>
                                {% elif q.status == 'rejected' %}
                                <span class="text-xs bg-red-100 text-red-700 px-2 py-0.5 rounded-full mr-2">مرفوض</span>
                                {% endif %}
                            </div>
                            <div class="text-left">
                                <div class="text-lg font-bold text-indigo-600">{{ q.total_price }} {{ q.currency }}</div>
                                <div class="text-xs text-gray-500">{{ q.unit_price }} / وحدة</div>
                            </div>
                        </div>
                        <div class="flex gap-4 text-xs text-gray-500 mb-2">
                            <span>⏱️ مدة التسليم: {{ q.lead_time_days }} يوم</span>
                            <span>📅 {{ q.created_at.strftime('%Y-%m-%d') }}</span>
                        </div>
                        {% if q.notes %}
                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">{{ q.notes }}</p>
                        {% endif %}
                        {% if q.status == 'pending' and proto.status != 'in_production' %}
                        <form method="POST" action="{{ url_for('prototyping.accept_quote', req_id=proto.id, quote_id=q.id) }}">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="submit" class="bg-green-600 text-white px-4 py-1.5 rounded-lg text-sm hover:bg-green-700 transition">✓ قبول العرض</button>
                        </form>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-8 text-gray-400">
                    <div class="text-3xl mb-2">💬</div>
                    <p>لم تصل عروض أسعار بعد</p>
                </div>
                {% endif %}
            </div>

            <!-- Messages -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
                <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">💬 المحادثة</h2>
                <div id="messagesList" class="space-y-3 max-h-96 overflow-y-auto mb-4">
                    {% for msg in messages %}
                    <div class="flex {% if msg.sender_type == 'user' %}justify-end{% else %}justify-start{% endif %}">
                        <div class="max-w-[80%] rounded-xl px-4 py-2.5 {% if msg.sender_type == 'user' %}bg-indigo-600 text-white{% else %}bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white{% endif %}">
                            <p class="text-sm">{{ msg.message }}</p>
                            <div class="text-xs mt-1 {% if msg.sender_type == 'user' %}text-indigo-200{% else %}text-gray-400{% endif %}">{{ msg.created_at.strftime('%H:%M %Y-%m-%d') }}</div>
                        </div>
                    </div>
                    {% endfor %}
                    {% if not messages %}
                    <div class="text-center py-4 text-gray-400 text-sm">لا توجد رسائل بعد</div>
                    {% endif %}
                </div>
                <div class="flex gap-2">
                    <input type="text" id="msgInput" placeholder="اكتب رسالتك..." class="flex-1 border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white" onkeypress="if(event.key==='Enter')sendMsg()">
                    <button onclick="sendMsg()" class="bg-indigo-600 text-white px-5 py-2 rounded-lg hover:bg-indigo-700 transition">إرسال</button>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Factory Info -->
            {% if proto.factory %}
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5">
                <h3 class="font-bold text-gray-900 dark:text-white mb-3">🏭 المصنع</h3>
                <div class="space-y-2 text-sm">
                    <div class="font-medium text-gray-900 dark:text-white">{{ proto.factory.name_ar or proto.factory.name }}</div>
                    <div class="text-gray-500">📍 {{ proto.factory.city }}, {{ proto.factory.country }}</div>
                    {% if proto.factory.email %}
                    <div class="text-gray-500">📧 {{ proto.factory.email }}</div>
                    {% endif %}
                    {% if proto.factory.phone %}
                    <div class="text-gray-500">📞 {{ proto.factory.phone }}</div>
                    {% endif %}
                    {% if proto.factory.website_url %}
                    <a href="{{ proto.factory.website_url }}" target="_blank" class="text-indigo-600 hover:underline block">🌐 الموقع الإلكتروني</a>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Report Info -->
            {% if proto.report %}
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5">
                <h3 class="font-bold text-gray-900 dark:text-white mb-3">📊 دراسة الجدوى</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">{{ proto.report.project_name }}</p>
                <a href="{{ url_for('study.view', report_id=proto.report.id) }}" class="text-indigo-600 hover:underline text-sm">عرض الدراسة →</a>
            </div>
            {% endif %}

            <!-- Status Timeline -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5">
                <h3 class="font-bold text-gray-900 dark:text-white mb-4">📈 مراحل الطلب</h3>
                {% set stage_order = ['sent', 'quoted', 'accepted', 'in_production', 'delivered'] %}
                {% set current_idx = stage_order.index(proto.status) if proto.status in stage_order else -1 %}
                {% set stages = [('sent', 'تم الإرسال', '📩'), ('quoted', 'تم التسعير', '💰'), ('accepted', 'تم القبول', '✅'), ('in_production', 'قيد التصنيع', '🏭'), ('delivered', 'تم التسليم', '📦')] %}
                <div class="space-y-3">
                    {% for stage_key, stage_label, stage_icon in stages %}
                    {% set stage_idx = loop.index0 %}
                    {% set is_active = proto.status == stage_key %}
                    {% set is_done = current_idx > stage_idx %}
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm {% if is_active %}bg-indigo-600 text-white{% elif is_done %}bg-green-100 text-green-700{% else %}bg-gray-100 text-gray-400{% endif %}">
                            {{ stage_icon }}
                        </div>
                        <span class="text-sm {% if is_active %}font-bold text-indigo-600{% elif is_done %}text-green-700{% else %}text-gray-400{% endif %}">{{ stage_label }}</span>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Actions -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 space-y-2">
                <button onclick="window.print()" class="w-full flex items-center justify-center gap-2 border dark:border-gray-600 rounded-lg py-2.5 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition dark:text-white">🖨️ طباعة</button>
            </div>
        </div>
    </div>
</div>

<script>
function sendMsg() {
    const input = document.getElementById('msgInput');
    const msg = input.value.trim();
    if (!msg) return;
    fetch('/prototyping/api/send-message/{{ proto.id }}', {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token() }}'},
        body: JSON.stringify({message: msg})
    }).then(r => r.json()).then(data => {
        if (data.success) {
            const list = document.getElementById('messagesList');
            list.innerHTML += `<div class="flex justify-end"><div class="max-w-[80%] rounded-xl px-4 py-2.5 bg-indigo-600 text-white"><p class="text-sm">${msg}</p><div class="text-xs mt-1 text-indigo-200">الآن</div></div></div>`;
            input.value = '';
            list.scrollTop = list.scrollHeight;
        }
    });
}
</script>
{% endblock %}