{% extends "base.html" %}
{% block title %}طلب - {{ proto.title }} | {{ factory.name_ar or factory.name }}{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto px-4 py-8">
    <div class="mb-6">
        <a href="{{ url_for('prototyping.factory_dashboard') }}" 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'} %}
                    {% set status_labels = {'draft': 'مسودة', 'sent': 'جديد', 'quoted': 'تم التسعير', 'accepted': 'مقبول', 'in_production': 'قيد التصنيع', 'delivered': 'تم التسليم'} %}
                    <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 and proto.nda_status in ('pending_factory', 'approved') %}
            <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 = {'pending_factory': 'bg-amber-100 text-amber-700', 'approved': 'bg-green-100 text-green-700'} %}
                    {% set nda_labels = {'pending_factory': 'بانتظار موافقتك', 'approved': 'معتمدة ✅'} %}
                    <span class="text-xs px-2 py-1 rounded-full font-medium {{ nda_colors.get(proto.nda_status, '') }}">{{ nda_labels.get(proto.nda_status, '') }}</span>
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 text-sm max-h-96 overflow-y-auto mb-4">
                    {{ proto.nda_html|safe }}
                </div>
                {% if proto.nda_status == 'pending_factory' %}
                <div class="flex gap-3">
                    <button onclick="factoryApproveNDA()" id="approveNdaBtn" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 transition text-sm font-medium">✅ الموافقة على NDA</button>
                    <button onclick="factoryRejectNDA()" id="rejectNdaBtn" class="bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 transition text-sm font-medium">❌ رفض NDA</button>
                </div>
                {% 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>
            </div>
            {% endif %}

            <!-- Submit Quote -->
            {% if proto.status in ('sent', 'quoted') %}
            <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="space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">سعر الوحدة (SAR)</label>
                            <input type="number" id="quoteUnitPrice" step="0.01" min="0" class="w-full border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">السعر الإجمالي (SAR)</label>
                            <input type="number" id="quoteTotalPrice" step="0.01" min="0" class="w-full border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">مدة التسليم (أيام)</label>
                        <input type="number" id="quoteLeadTime" min="1" class="w-full border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">ملاحظات</label>
                        <textarea id="quoteNotes" rows="3" class="w-full border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="أي ملاحظات إضافية..."></textarea>
                    </div>
                    <button onclick="submitQuote()" id="submitQuoteBtn" class="w-full bg-indigo-600 text-white py-2.5 rounded-lg hover:bg-indigo-700 transition font-medium">💰 إرسال عرض السعر</button>
                </div>
            </div>
            {% endif %}

            <!-- 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 == 'factory' %}justify-end{% else %}justify-start{% endif %}">
                        <div class="max-w-[80%] rounded-xl px-4 py-2.5 {% if msg.sender_type == 'factory' %}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 == 'factory' %}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">
            <!-- Requester Info -->
            <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.user.name if proto.user else '-' }}</div>
                    {% if proto.report %}
                    <div class="text-gray-500">📊 {{ proto.report.project_name }}</div>
                    {% endif %}
                </div>
            </div>

            <!-- Existing Quotes -->
            {% if quotes %}
            <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">
                    {% for q in quotes %}
                    <div class="border dark:border-gray-700 rounded-lg p-3 text-sm">
                        <div class="flex justify-between">
                            <span class="font-bold text-gray-900 dark:text-white">{{ q.total_price }} {{ q.currency }}</span>
                            {% set q_colors = {'pending': 'text-yellow-600', 'accepted': 'text-green-600', 'rejected': 'text-red-600'} %}
                            <span class="{{ q_colors.get(q.status, 'text-gray-500') }}">{{ q.status }}</span>
                        </div>
                        <div class="text-gray-500 text-xs mt-1">{{ q.created_at.strftime('%Y-%m-%d') }} | {{ q.lead_time_days }} يوم</div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
const csrfToken = '{{ csrf_token() }}';
const reqId = {{ proto.id }};

function factoryApproveNDA() {
    const btn = document.getElementById('approveNdaBtn');
    btn.disabled = true; btn.textContent = 'جاري الموافقة...';
    fetch(`/prototyping/api/factory-approve-nda/${reqId}`, {
        method: 'POST', headers: {'Content-Type': 'application/json', 'X-CSRFToken': csrfToken}
    }).then(r => r.json()).then(data => {
        if (data.success) { location.reload(); }
        else { alert(data.error || 'خطأ'); btn.disabled = false; btn.textContent = '✅ الموافقة على NDA'; }
    }).catch(() => { btn.disabled = false; btn.textContent = '✅ الموافقة على NDA'; });
}

function factoryRejectNDA() {
    if (!confirm('هل أنت متأكد من رفض اتفاقية عدم الإفشاء؟')) return;
    const btn = document.getElementById('rejectNdaBtn');
    btn.disabled = true;
    fetch(`/prototyping/api/factory-reject-nda/${reqId}`, {
        method: 'POST', headers: {'Content-Type': 'application/json', 'X-CSRFToken': csrfToken}
    }).then(r => r.json()).then(data => {
        if (data.success) { location.reload(); }
        else { alert(data.error || 'خطأ'); btn.disabled = false; }
    }).catch(() => { btn.disabled = false; });
}

function submitQuote() {
    const btn = document.getElementById('submitQuoteBtn');
    btn.disabled = true; btn.textContent = 'جاري الإرسال...';
    const data = {
        unit_price: document.getElementById('quoteUnitPrice').value,
        total_price: document.getElementById('quoteTotalPrice').value,
        lead_time_days: document.getElementById('quoteLeadTime').value,
        notes: document.getElementById('quoteNotes').value,
    };
    fetch(`/prototyping/factory/request/${reqId}/quote`, {
        method: 'POST', headers: {'Content-Type': 'application/json', 'X-CSRFToken': csrfToken},
        body: JSON.stringify(data)
    }).then(r => r.json()).then(resp => {
        if (resp.success) { location.reload(); }
        else { alert(resp.error || 'خطأ'); btn.disabled = false; btn.textContent = '💰 إرسال عرض السعر'; }
    }).catch(() => { btn.disabled = false; btn.textContent = '💰 إرسال عرض السعر'; });
}

function sendMsg() {
    const input = document.getElementById('msgInput');
    const msg = input.value.trim();
    if (!msg) return;
    fetch(`/prototyping/api/send-message/${reqId}`, {
        method: 'POST', headers: {'Content-Type': 'application/json', 'X-CSRFToken': csrfToken},
        body: JSON.stringify({message: msg, sender_type: 'factory'})
    }).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 %}