{% extends "base.html" %}
{% block title %}طلب نموذج أولي - {{ report.project_name }}{% endblock %}
{% block extra_head %}
<style>
@media print {
    /* Hide everything except NDA content */
    nav, footer, header, .print-controls,
    .no-print { display: none !important; }

    body, html { background: white !important; color: #1a1a1a !important; }

    /* Hide all page sections */
    .proto-page-header,
    .proto-ai-specs,
    .proto-cost-estimator,
    .proto-nda-wrapper > .flex,
    .proto-nda-wrapper > p,
    .proto-nda-wrapper > button,
    .proto-form { display: none !important; }

    /* Show only NDA result */
    #ndaResult {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
        background: white !important;
        color: #1a1a1a !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 11pt;
        line-height: 1.7;
    }
    #ndaResult button { display: none !important; }

    /* Hide NDA wrapper styling for print */
    .proto-nda-wrapper {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}
</style>
{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-8">
    <div class="mb-6 no-print">
        <a href="{{ url_for('prototyping.index') }}" class="text-indigo-600 hover:underline text-sm">← العودة لدليل المصانع</a>
    </div>

    <div class="proto-page-header bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-6">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">🏭 طلب نموذج أولي</h1>
        <p class="text-gray-500 mb-1">المشروع: <strong>{{ report.project_name }}</strong></p>
        {% if factory %}
        <p class="text-gray-500">المصنع: <strong>{{ factory.name_ar or factory.name }}</strong></p>
        {% endif %}
    </div>

    <!-- AI Specs Generator -->
    <div class="proto-ai-specs bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-900/20 dark:to-purple-900/20 rounded-xl p-5 mb-6 border border-indigo-100 dark:border-indigo-800">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-bold text-indigo-800 dark:text-indigo-300">🤖 توليد المواصفات بالذكاء الاصطناعي</h3>
            <button onclick="generateSpecs()" id="specsBtn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition text-sm">توليد المواصفات</button>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400">سيقوم الذكاء الاصطناعي بتحليل دراسة الجدوى وتوليد مواصفات تقنية تفصيلية للمنتج</p>
        <div id="specsResult" class="hidden mt-4 bg-white dark:bg-gray-800 rounded-lg p-4 text-sm"></div>
    </div>

    <!-- Cost Estimator -->
    <div class="proto-cost-estimator bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-xl p-5 mb-6 border border-green-100 dark:border-green-800">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-bold text-green-800 dark:text-green-300">💰 تقدير التكلفة</h3>
            <button onclick="estimateCost()" id="costBtn" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition text-sm">{{ 'إعادة تقدير التكلفة' if existing and existing.cost_estimate_json else 'تقدير التكلفة' }}</button>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400">تقدير تكلفة النموذج الأولي بناءً على المواصفات والكمية</p>
        <div id="costResult" class="{{ '' if existing and existing.cost_estimate_json else 'hidden' }} mt-4 bg-white dark:bg-gray-800 rounded-lg p-4 text-sm"></div>
    </div>

    <!-- NDA Generator -->
    <div class="proto-nda-wrapper bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 rounded-xl p-5 mb-6 border border-amber-100 dark:border-amber-800">
        <div class="flex items-center justify-between mb-3">
            <div class="flex items-center gap-3">
                <h3 class="font-bold text-amber-800 dark:text-amber-300">🔒 اتفاقية عدم إفشاء (NDA)</h3>
                {% if existing and existing.nda_status %}
                {% set nda_st = existing.nda_status %}
                {% 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 id="ndaStatusBadge" class="text-xs px-2 py-1 rounded-full font-medium {{ nda_colors.get(nda_st, 'bg-gray-100 text-gray-700') }}">{{ nda_labels.get(nda_st, nda_st) }}</span>
                {% endif %}
            </div>
            <button onclick="generateNDA()" id="ndaBtn" class="bg-amber-600 text-white px-4 py-2 rounded-lg hover:bg-amber-700 transition text-sm">{{ 'إعادة توليد NDA' if existing and existing.nda_html else 'توليد NDA' }}</button>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400">أنشئ اتفاقية عدم إفشاء لحماية تصميمك قبل مشاركته مع المصنع</p>
        <div id="ndaResult" class="{{ '' if existing and existing.nda_html else 'hidden' }} mt-4 bg-white dark:bg-gray-800 rounded-lg p-4 text-sm max-h-96 overflow-y-auto">{% if existing and existing.nda_html %}{{ existing.nda_html|safe }}{% endif %}</div>
        {% if existing and existing.nda_html %}
        <div id="ndaActions" class="mt-3 flex gap-2 flex-wrap">
            <button onclick="window.print()" class="bg-gray-200 text-gray-700 px-4 py-1.5 rounded-lg text-sm hover:bg-gray-300">🖨️ طباعة</button>
            {% if not existing.nda_status or existing.nda_status in ('draft', 'rejected') %}
            <button onclick="sendNDA()" id="sendNdaBtn" class="bg-blue-600 text-white px-4 py-1.5 rounded-lg text-sm hover:bg-blue-700">📩 إرسال للمصنع</button>
            {% endif %}
        </div>
        {% endif %}
    </div>

    <!-- Request Form -->
    <form method="POST" class="proto-form bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 space-y-5">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        {% if factory %}
        <input type="hidden" name="factory_id" value="{{ factory.id }}">
        {% else %}
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">اختر المصنع</label>
            <select name="factory_id" class="w-full border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <option value="">-- إرسال للجميع --</option>
                {% for f in factories %}
                <option value="{{ f.id }}">{{ f.name_ar or f.name }} ({{ f.city }})</option>
                {% endfor %}
            </select>
        </div>
        {% endif %}

        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">اسم المنتج/النموذج <span class="text-red-500">*</span></label>
            <input type="text" name="title" value="{{ report.project_name }}" required 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 name="description" rows="5" class="w-full border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="صف المنتج بالتفصيل: المواد، الأبعاد، الوظائف...">{{ report.project_description }}</textarea>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">المواصفات التقنية (JSON)</label>
            <textarea name="specifications_json" id="specsField" rows="4" class="w-full border rounded-lg px-3 py-2 font-mono text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder='{"materials": [...], "dimensions": "..."}' dir="ltr"></textarea>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">الكمية المطلوبة</label>
                <input type="number" name="quantity" value="10" 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>
                <input type="text" name="budget_range" placeholder="مثال: 5000-15000 ريال" 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>
                <input type="date" name="deadline" class="w-full border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
        </div>

        {% if existing and existing.nda_status == 'approved' %}
        <div class="flex items-center gap-2 bg-green-50 dark:bg-green-900/20 p-3 rounded-lg border border-green-200 dark:border-green-800">
            <input type="checkbox" name="include_nda" value="1" checked id="includeNda" class="h-4 w-4 text-green-600 rounded">
            <label for="includeNda" class="text-sm text-green-800 dark:text-green-300">تضمين اتفاقية عدم الإفشاء المعتمدة (NDA) مع الطلب</label>
        </div>
        {% endif %}

        <button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition font-medium text-lg">📩 إرسال طلب النموذج الأولي</button>
    </form>
</div>

<script>
const reportId = {{ report.id }};

function generateSpecs() {
    const btn = document.getElementById('specsBtn');
    btn.disabled = true; btn.textContent = 'جاري التوليد...';
    fetch('/prototyping/api/generate-specs', {
        method: 'POST', headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token() }}'},
        body: JSON.stringify({report_id: reportId})
    }).then(r => r.json()).then(data => {
        btn.disabled = false; btn.textContent = 'توليد المواصفات';
        if (data.specs) {
            const el = document.getElementById('specsResult');
            el.classList.remove('hidden');
            let html = '<div class="space-y-2">';
            for (const [k, v] of Object.entries(data.specs)) {
                html += `<div><strong class="text-gray-700 dark:text-gray-300">${k}:</strong> <span class="text-gray-600 dark:text-gray-400">${Array.isArray(v) ? v.join('، ') : v}</span></div>`;
            }
            html += '</div><button onclick="applySpecs()" class="mt-3 bg-indigo-100 text-indigo-700 px-4 py-1.5 rounded-lg text-sm hover:bg-indigo-200 transition">تطبيق على النموذج</button>';
            el.innerHTML = html;
            window._generatedSpecs = data.specs;
        } else {
            alert(data.error || 'حدث خطأ');
        }
    }).catch(() => { btn.disabled = false; btn.textContent = 'توليد المواصفات'; });
}

function applySpecs() {
    if (window._generatedSpecs) {
        document.getElementById('specsField').value = JSON.stringify(window._generatedSpecs, null, 2);
    }
}

function estimateCost() {
    const btn = document.getElementById('costBtn');
    btn.disabled = true; btn.textContent = 'جاري التقدير...';
    const specs = window._generatedSpecs || {};
    const qty = document.querySelector('[name=quantity]').value || 10;
    fetch('/prototyping/api/estimate-cost', {
        method: 'POST', headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token() }}'},
        body: JSON.stringify({report_id: reportId, specs: specs, quantity: parseInt(qty)})
    }).then(r => r.json()).then(data => {
        btn.disabled = false; btn.textContent = 'تقدير التكلفة';
        if (data.estimate) {
            const el = document.getElementById('costResult');
            el.classList.remove('hidden');
            const e = data.estimate;
            let html = `<div class="grid grid-cols-2 gap-3">
                <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.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.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.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.lead_time || '-'}</div></div>
            </div>`;
            if (e.price_comparison) {
                html += '<div class="mt-3 text-xs"><strong>مقارنة الأسعار:</strong>';
                for (const [k, v] of Object.entries(e.price_comparison)) html += ` ${k}: ${v} |`;
                html += '</div>';
            }
            el.innerHTML = html;
        }
    }).catch(() => { btn.disabled = false; btn.textContent = 'تقدير التكلفة'; });
}

function generateNDA() {
    const btn = document.getElementById('ndaBtn');
    btn.disabled = true; btn.textContent = 'جاري التوليد...';
    fetch('/prototyping/api/generate-nda', {
        method: 'POST', headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token() }}'},
        body: JSON.stringify({report_id: reportId, factory_name: '{{ factory.name_ar if factory else "" }}'})
    }).then(r => r.json()).then(data => {
        btn.disabled = false; btn.textContent = 'توليد NDA';
        if (data.nda) {
            const el = document.getElementById('ndaResult');
            el.classList.remove('hidden');
            el.innerHTML = data.nda;
            window._requestId = data.request_id;
            // Show action buttons
            let actionsEl = document.getElementById('ndaActions');
            if (!actionsEl) {
                actionsEl = document.createElement('div');
                actionsEl.id = 'ndaActions';
                actionsEl.className = 'mt-3 flex gap-2 flex-wrap';
                el.parentElement.appendChild(actionsEl);
            }
            actionsEl.innerHTML = '<button onclick="window.print()" class="bg-gray-200 text-gray-700 px-4 py-1.5 rounded-lg text-sm hover:bg-gray-300">🖨️ طباعة</button>' +
                '<button onclick="sendNDA()" id="sendNdaBtn" class="bg-blue-600 text-white px-4 py-1.5 rounded-lg text-sm hover:bg-blue-700">📩 إرسال للمصنع</button>';
        }
    }).catch(() => { btn.disabled = false; btn.textContent = 'توليد NDA'; });
}

function sendNDA() {
    const reqId = window._requestId || {{ existing.id if existing else 0 }};
    if (!reqId) { alert('يرجى توليد NDA أولاً'); return; }
    const btn = document.getElementById('sendNdaBtn');
    if (btn) { btn.disabled = true; btn.textContent = 'جاري الإرسال...'; }
    fetch(`/prototyping/api/send-nda/${reqId}`, {
        method: 'POST', headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token() }}'}
    }).then(r => r.json()).then(data => {
        if (data.success) {
            if (btn) { btn.textContent = '✓ تم الإرسال'; btn.classList.replace('bg-blue-600', 'bg-green-600'); btn.classList.replace('hover:bg-blue-700', 'hover:bg-green-700'); }
            // Update status badge
            let badge = document.getElementById('ndaStatusBadge');
            if (!badge) {
                badge = document.createElement('span');
                badge.id = 'ndaStatusBadge';
                badge.className = 'text-xs px-2 py-1 rounded-full font-medium';
                document.querySelector('.proto-nda-wrapper h3').parentElement.appendChild(badge);
            }
            badge.className = 'text-xs px-2 py-1 rounded-full font-medium bg-blue-100 text-blue-700';
            badge.textContent = 'بانتظار موافقة المدير';
        } else {
            alert(data.error || 'حدث خطأ');
            if (btn) { btn.disabled = false; btn.textContent = '📩 إرسال للمصنع'; }
        }
    }).catch(() => { if (btn) { btn.disabled = false; btn.textContent = '📩 إرسال للمصنع'; } });
}

{% if existing and existing.cost_estimate_json %}
// Load saved cost estimate on page load
document.addEventListener('DOMContentLoaded', function() {
    const e = {{ existing.cost_estimate_json|tojson }};
    const el = document.getElementById('costResult');
    let html = `<div class="grid grid-cols-2 gap-3">
        <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.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.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.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.lead_time || '-'}</div></div>
    </div>`;
    if (e.price_comparison) {
        html += '<div class="mt-3 text-xs"><strong>مقارنة الأسعار:</strong>';
        for (const [k, v] of Object.entries(e.price_comparison)) html += ` ${k}: ${v} |`;
        html += '</div>';
    }
    el.innerHTML = html;
});
{% endif %}
</script>
{% endblock %}