{% 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>
    </div>

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

    <!-- Tabs -->
    <div class="flex gap-2 mb-6 border-b dark:border-gray-700">
        <button onclick="showTab('patents')" id="tab-patents" class="px-5 py-2.5 font-medium text-sm border-b-2 border-indigo-600 text-indigo-600 transition">🔬 براءات الاختراع</button>
        <button onclick="showTab('trademarks')" id="tab-trademarks" class="px-5 py-2.5 font-medium text-sm border-b-2 border-transparent text-gray-500 hover:text-gray-700 transition">™️ العلامات التجارية</button>
    </div>

    <!-- Patents Tab -->
    <div id="panel-patents">
        {% if patents %}
        <div class="space-y-4">
            {% for p in patents %}
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-5 border border-gray-100 dark:border-gray-700 hover:shadow-lg transition">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="text-lg">{{ filing_info[p.filing_type].icon if p.filing_type in filing_info else '📄' }}</span>
                            <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ p.title_ar or p.title_en or 'بدون عنوان' }}</h3>
                            {% set st_colors = {'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'} %}
                            {% set st_labels = {'draft': 'مسودة', 'generated': 'تم التوليد', 'review': 'قيد المراجعة', 'submitted': 'تم التقديم'} %}
                            <span class="text-xs px-2.5 py-1 rounded-full font-medium {{ st_colors.get(p.status, 'bg-gray-100 text-gray-700') }}">{{ st_labels.get(p.status, p.status) }}</span>
                        </div>
                        <p class="text-sm text-gray-500">{{ filing_info[p.filing_type].name_ar if p.filing_type in filing_info else '' }}</p>
                        <div class="flex gap-4 text-xs text-gray-400 mt-1">
                            <span>📅 {{ p.created_at.strftime('%Y-%m-%d') }}</span>
                            {% if p.ipc_code %}<span>🏷️ {{ p.ipc_code }}</span>{% endif %}
                            <span>📊 {{ p.report.project_name if p.report else '' }}</span>
                        </div>
                    </div>
                    <div class="flex gap-2">
                        <a href="{{ url_for('ip.edit_patent', app_id=p.id) }}" class="text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-3 py-2 rounded-lg hover:bg-gray-200 transition">✏️ تعديل</a>
                        <a href="{{ url_for('ip.view_patent', app_id=p.id) }}" class="text-sm bg-indigo-600 text-white px-3 py-2 rounded-lg 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 shadow">
            <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 mb-4">ابدأ بإنشاء طلب براءة اختراع من صفحة دراسة الجدوى</p>
        </div>
        {% endif %}
    </div>

    <!-- Trademarks Tab -->
    <div id="panel-trademarks" class="hidden">
        {% if trademarks %}
        <div class="space-y-4">
            {% for tm in trademarks %}
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-5 border border-gray-100 dark:border-gray-700 hover:shadow-lg transition">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="text-lg">™️</span>
                            <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ tm.brand_name_ar or tm.brand_name_en or 'بدون اسم' }}</h3>
                            {% set st_colors = {'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'} %}
                            {% set st_labels = {'draft': 'مسودة', 'generated': 'تم التوليد', 'review': 'قيد المراجعة', 'submitted': 'تم التقديم'} %}
                            <span class="text-xs px-2.5 py-1 rounded-full font-medium {{ st_colors.get(tm.status, 'bg-gray-100 text-gray-700') }}">{{ st_labels.get(tm.status, tm.status) }}</span>
                        </div>
                        <div class="flex gap-4 text-xs text-gray-400 mt-1">
                            <span>📅 {{ tm.created_at.strftime('%Y-%m-%d') }}</span>
                            {% if tm.nice_classes_json %}<span>📂 {{ tm.nice_classes_json|length }} فئة</span>{% endif %}
                        </div>
                    </div>
                    <div class="flex gap-2">
                        <a href="{{ url_for('ip.edit_trademark', app_id=tm.id) }}" class="text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-3 py-2 rounded-lg hover:bg-gray-200 transition">✏️ تعديل</a>
                        <a href="{{ url_for('ip.view_trademark', app_id=tm.id) }}" class="text-sm bg-purple-600 text-white px-3 py-2 rounded-lg hover:bg-purple-700 transition">عرض</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-16 bg-white dark:bg-gray-800 rounded-xl shadow">
            <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 mb-4">ابدأ بإنشاء طلب علامة تجارية من صفحة دراسة الجدوى</p>
        </div>
        {% endif %}
    </div>
</div>

<script>
function showTab(tab) {
    document.getElementById('panel-patents').classList.toggle('hidden', tab !== 'patents');
    document.getElementById('panel-trademarks').classList.toggle('hidden', tab !== 'trademarks');
    document.getElementById('tab-patents').classList.toggle('border-indigo-600', tab === 'patents');
    document.getElementById('tab-patents').classList.toggle('text-indigo-600', tab === 'patents');
    document.getElementById('tab-patents').classList.toggle('border-transparent', tab !== 'patents');
    document.getElementById('tab-patents').classList.toggle('text-gray-500', tab !== 'patents');
    document.getElementById('tab-trademarks').classList.toggle('border-indigo-600', tab === 'trademarks');
    document.getElementById('tab-trademarks').classList.toggle('text-indigo-600', tab === 'trademarks');
    document.getElementById('tab-trademarks').classList.toggle('border-transparent', tab !== 'trademarks');
    document.getElementById('tab-trademarks').classList.toggle('text-gray-500', tab !== 'trademarks');
}
</script>
{% endblock %}