{% extends "base.html" %}
{% block title %}دليل المصانع - النماذج الأولية{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-8">
    <div class="flex flex-col md:flex-row md:items-center md: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.my_requests') }}" class="mt-4 md:mt-0 inline-flex items-center gap-2 bg-indigo-600 text-white px-5 py-2.5 rounded-lg hover:bg-indigo-700 transition">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
            طلباتي
        </a>
    </div>

    <!-- Filters -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 mb-6">
        <form method="GET" class="flex flex-wrap gap-4 items-end">
            <div class="flex-1 min-w-[200px]">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">بحث</label>
                <input type="text" name="q" value="{{ q }}" placeholder="اسم المصنع..." 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>
                <select name="country" class="border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">الكل</option>
                    {% for c in countries %}
                    <option value="{{ c }}" {% if current_country == c %}selected{% endif %}>
                        {% if c == 'SA' %}🇸🇦 السعودية{% elif c == 'AE' %}🇦🇪 الإمارات{% elif c == 'CN' %}🇨🇳 الصين{% elif c == 'TR' %}🇹🇷 تركيا{% elif c == 'EG' %}🇪🇬 مصر{% else %}{{ c }}{% endif %}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">القطاع</label>
                <select name="sector" class="border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">الكل</option>
                    {% for s in sectors %}
                    <option value="{{ s }}" {% if current_sector == s %}selected{% endif %}>{{ s }}</option>
                    {% endfor %}
                </select>
            </div>
            <button type="submit" class="bg-gray-800 text-white px-5 py-2 rounded-lg hover:bg-gray-900 transition">بحث</button>
        </form>
    </div>

    <!-- Factory Grid -->
    {% if factories %}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for f in factories %}
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition overflow-hidden border border-gray-100 dark:border-gray-700">
            <div class="p-5">
                <div class="flex items-start justify-between mb-3">
                    <div>
                        <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ f.name_ar or f.name }}</h3>
                        <p class="text-sm text-gray-500">{{ f.name if f.name_ar else '' }}</p>
                    </div>
                    {% if f.is_verified %}
                    <span class="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full font-medium">✓ موثّق</span>
                    {% endif %}
                </div>
                <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
                    <span>📍 {{ f.city }},
                        {% if f.country == 'SA' %}السعودية{% elif f.country == 'AE' %}الإمارات{% elif f.country == 'CN' %}الصين{% elif f.country == 'TR' %}تركيا{% elif f.country == 'EG' %}مصر{% else %}{{ f.country }}{% endif %}
                    </span>
                </div>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">{{ f.description_ar or f.description or '' }}</p>

                {% if f.capabilities_json %}
                <div class="flex flex-wrap gap-1 mb-3">
                    {% for cap in f.capabilities_json[:4] %}
                    <span class="bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 text-xs px-2 py-0.5 rounded-full">{{ cap }}</span>
                    {% endfor %}
                    {% if f.capabilities_json|length > 4 %}
                    <span class="text-xs text-gray-400">+{{ f.capabilities_json|length - 4 }}</span>
                    {% endif %}
                </div>
                {% endif %}

                {% if f.sectors_json %}
                <div class="flex flex-wrap gap-1 mb-3">
                    {% for sec in f.sectors_json[:3] %}
                    <span class="bg-purple-50 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300 text-xs px-2 py-0.5 rounded-full">{{ sec }}</span>
                    {% endfor %}
                </div>
                {% endif %}

                <div class="text-xs text-gray-500 mb-4">
                    الحد الأدنى للطلب: {{ f.min_order }} وحدة
                </div>

                <div class="flex gap-2">
                    {% if f.website_url %}
                    <a href="{{ f.website_url }}" target="_blank" class="flex-1 text-center text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 transition">🌐 الموقع</a>
                    {% endif %}
                    <a href="#" onclick="selectFactory({{ f.id }})" class="flex-1 text-center text-sm bg-indigo-600 text-white rounded-lg px-3 py-2 hover:bg-indigo-700 transition">📩 طلب نموذج</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-16 bg-white dark:bg-gray-800 rounded-xl">
        <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">جرّب تغيير معايير البحث</p>
    </div>
    {% endif %}
</div>

<!-- Select Report Modal -->
<div id="reportModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-md w-full p-6">
        <h3 class="text-lg font-bold mb-4 dark:text-white">اختر دراسة الجدوى</h3>
        <div id="reportList" class="space-y-2 max-h-60 overflow-y-auto"></div>
        <button onclick="document.getElementById('reportModal').classList.add('hidden')" class="mt-4 w-full border rounded-lg py-2 hover:bg-gray-50 dark:hover:bg-gray-700 transition dark:text-white">إلغاء</button>
    </div>
</div>

<script>
let selectedFactoryId = null;
function selectFactory(fid) {
    selectedFactoryId = fid;
    fetch('/api/v1/my-reports', {headers: {'X-CSRFToken': '{{ csrf_token() }}'}})
        .then(r => r.json())
        .then(data => {
            const list = document.getElementById('reportList');
            if (data.reports && data.reports.length) {
                list.innerHTML = data.reports.map(r =>
                    `<a href="/prototyping/request/${r.id}?factory_id=${selectedFactoryId}" class="block p-3 border rounded-lg hover:bg-indigo-50 dark:hover:bg-gray-700 transition dark:text-white">${r.project_name}</a>`
                ).join('');
            } else {
                list.innerHTML = '<p class="text-gray-500 text-center py-4">لا توجد دراسات جدوى. أنشئ دراسة أولاً.</p>';
            }
            document.getElementById('reportModal').classList.remove('hidden');
        })
        .catch(() => {
            window.location.href = '/dashboard';
        });
}
</script>
{% endblock %}