{% 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('admin.admin_prototypes') }}" 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>
                <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">المستخدم</div>
                        <div class="font-bold text-gray-900 dark:text-white text-sm">{{ proto.user.name if proto.user 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">المصنع</div>
                        <div class="font-bold text-gray-900 dark:text-white text-sm">{{ proto.factory.name_ar if proto.factory 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">الكمية</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">التاريخ</div>
                        <div class="font-bold text-gray-900 dark:text-white text-sm">{{ proto.created_at.strftime('%Y-%m-%d') }}</div>
                    </div>
                </div>
                {% if proto.description %}
                <p class="text-sm text-gray-600 dark:text-gray-400 whitespace-pre-line">{{ proto.description }}</p>
                {% 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 mb-4">
                    {{ proto.nda_html|safe }}
                </div>
                {% if proto.nda_status == 'pending_admin' %}
                <div class="flex gap-3">
                    <button onclick="adminApproveNDA()" id="approveNdaBtn" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 transition text-sm font-medium">✅ الموافقة وإرسال للمصنع</button>
                    <button onclick="adminRejectNDA()" id="rejectNdaBtn" class="bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 transition text-sm font-medium">❌ رفض</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">{{ 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">{{ 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">{{ 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">{{ e.get('lead_time', '-') }}</div></div>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Send Notification -->
            <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>
                <form method="POST" action="{{ url_for('admin.admin_notify_user') }}" class="space-y-3">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">المستخدم (ID)</label>
                        <input type="number" name="user_id" class="w-full border rounded-lg px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="معرف المستخدم">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">العنوان</label>
                        <input type="text" name="title" class="w-full border rounded-lg px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="عنوان التنبيه" value="مشروع يهمك: {{ proto.title }}">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">الرسالة</label>
                        <textarea name="message" rows="2" class="w-full border rounded-lg px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="نص الرسالة">يرجى مراجعة مشروع «{{ proto.title }}» المقدم من {{ proto.user.name if proto.user else '-' }}</textarea>
                    </div>
                    <input type="hidden" name="link" value="{{ url_for('prototyping.view_request', req_id=proto.id) }}">
                    <button type="submit" class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition text-sm">📩 إرسال التنبيه</button>
                </form>
            </div>

            <!-- Quick 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="flex justify-between"><span class="text-gray-500">الميزانية:</span><span class="text-gray-900 dark:text-white">{{ proto.budget_range or '-' }}</span></div>
                    <div class="flex justify-between"><span class="text-gray-500">الموعد:</span><span class="text-gray-900 dark:text-white">{{ proto.deadline.strftime('%Y-%m-%d') if proto.deadline else '-' }}</span></div>
                    <div class="flex justify-between"><span class="text-gray-500">NDA:</span><span class="text-gray-900 dark:text-white">{{ proto.nda_status or 'لا يوجد' }}</span></div>
                    {% if proto.nda_generated_at %}
                    <div class="flex justify-between"><span class="text-gray-500">تاريخ NDA:</span><span class="text-gray-900 dark:text-white">{{ proto.nda_generated_at.strftime('%Y-%m-%d') }}</span></div>
                    {% endif %}
                    {% if proto.nda_approved_at %}
                    <div class="flex justify-between"><span class="text-gray-500">اعتماد NDA:</span><span class="text-gray-900 dark:text-white">{{ proto.nda_approved_at.strftime('%Y-%m-%d') }}</span></div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

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

function adminApproveNDA() {
    const btn = document.getElementById('approveNdaBtn');
    btn.disabled = true; btn.textContent = 'جاري الموافقة...';
    fetch(`/prototyping/api/admin-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 = '✅ الموافقة وإرسال للمصنع'; }
    }).catch(() => { btn.disabled = false; btn.textContent = '✅ الموافقة وإرسال للمصنع'; });
}

function adminRejectNDA() {
    if (!confirm('هل أنت متأكد من رفض اتفاقية عدم الإفشاء؟')) return;
    const btn = document.getElementById('rejectNdaBtn');
    btn.disabled = true;
    fetch(`/prototyping/api/admin-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; });
}
</script>
{% endblock %}