{% extends "base.html" %}
{% block title %}مراجعة طلبات الملكية الفكرية{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">📋 طلبات الملكية الفكرية</h1>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 text-center">
            <div class="text-2xl font-bold text-indigo-600">{{ patents|length }}</div>
            <div class="text-xs text-gray-500">براءات اختراع</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 text-center">
            <div class="text-2xl font-bold text-purple-600">{{ trademarks|length }}</div>
            <div class="text-xs text-gray-500">علامات تجارية</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 text-center">
            <div class="text-2xl font-bold text-green-600">{{ patents|selectattr('status','equalto','submitted')|list|length }}</div>
            <div class="text-xs text-gray-500">مقدمة</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 text-center">
            <div class="text-2xl font-bold text-amber-600">{{ patents|selectattr('status','equalto','draft')|list|length }}</div>
            <div class="text-xs text-gray-500">مسودات</div>
        </div>
    </div>

    <!-- Patents -->
    <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">🔬 براءات الاختراع</h2>
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow overflow-hidden mb-8">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 dark:bg-gray-700">
                <tr>
                    <th class="px-4 py-3 text-right text-gray-700 dark:text-gray-300">العنوان</th>
                    <th class="px-4 py-3 text-right text-gray-700 dark:text-gray-300">المستخدم</th>
                    <th class="px-4 py-3 text-right text-gray-700 dark:text-gray-300">النوع</th>
                    <th class="px-4 py-3 text-center text-gray-700 dark:text-gray-300">الحالة</th>
                    <th class="px-4 py-3 text-right text-gray-700 dark:text-gray-300">التاريخ</th>
                </tr>
            </thead>
            <tbody class="divide-y dark:divide-gray-700">
                {% for p in patents %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                    <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ p.title_ar or p.title_en or '-' }}</td>
                    <td class="px-4 py-3 text-gray-600 dark:text-gray-400">{{ p.user.name if p.user else '-' }}</td>
                    <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
                        {% if p.filing_type == 'saip' %}🇸🇦 SAIP{% elif p.filing_type == 'gcc' %}🌍 GCC{% else %}🌐 PCT{% endif %}
                    </td>
                    <td class="px-4 py-3 text-center">
                        {% set st = {'draft':'bg-gray-100 text-gray-700','generated':'bg-blue-100 text-blue-700','review':'bg-yellow-100 text-yellow-700','submitted':'bg-green-100 text-green-700'} %}
                        <span class="text-xs px-2 py-1 rounded-full {{ st.get(p.status,'bg-gray-100 text-gray-700') }}">{{ p.status }}</span>
                    </td>
                    <td class="px-4 py-3 text-gray-500">{{ p.created_at.strftime('%Y-%m-%d') }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Trademarks -->
    <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">™️ العلامات التجارية</h2>
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 dark:bg-gray-700">
                <tr>
                    <th class="px-4 py-3 text-right text-gray-700 dark:text-gray-300">العلامة</th>
                    <th class="px-4 py-3 text-right text-gray-700 dark:text-gray-300">المستخدم</th>
                    <th class="px-4 py-3 text-right text-gray-700 dark:text-gray-300">النوع</th>
                    <th class="px-4 py-3 text-center text-gray-700 dark:text-gray-300">الحالة</th>
                    <th class="px-4 py-3 text-right text-gray-700 dark:text-gray-300">التاريخ</th>
                </tr>
            </thead>
            <tbody class="divide-y dark:divide-gray-700">
                {% for tm in trademarks %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                    <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ tm.brand_name_ar or tm.brand_name_en or '-' }}</td>
                    <td class="px-4 py-3 text-gray-600 dark:text-gray-400">{{ tm.user.name if tm.user else '-' }}</td>
                    <td class="px-4 py-3 text-gray-600 dark:text-gray-400">{{ tm.filing_type }}</td>
                    <td class="px-4 py-3 text-center">
                        {% set st = {'draft':'bg-gray-100 text-gray-700','generated':'bg-blue-100 text-blue-700','review':'bg-yellow-100 text-yellow-700','submitted':'bg-green-100 text-green-700'} %}
                        <span class="text-xs px-2 py-1 rounded-full {{ st.get(tm.status,'bg-gray-100 text-gray-700') }}">{{ tm.status }}</span>
                    </td>
                    <td class="px-4 py-3 text-gray-500">{{ tm.created_at.strftime('%Y-%m-%d') }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}