{% extends "base.html" %}
{% block title %}علامة تجارية - {{ tm.brand_name_ar or '' }}{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-8">
    {% if not shared %}
    <div class="mb-6 flex items-center justify-between">
        <a href="{{ url_for('ip.index') }}" class="text-indigo-600 hover:underline text-sm">← العودة للملكية الفكرية</a>
        <div class="flex gap-2">
            <a href="{{ url_for('ip.edit_trademark', app_id=tm.id) }}" class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-lg hover:bg-gray-300 transition text-sm">✏️ تعديل</a>
            <a href="{{ url_for('ip.export_trademark', app_id=tm.id) }}" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition text-sm">📄 تصدير Word</a>
            <button onclick="window.print()" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition text-sm">🖨️ طباعة</button>
            <button onclick="document.getElementById('shareModal').classList.remove('hidden')" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition text-sm">🔗 مشاركة</button>
        </div>
    </div>
    {% endif %}

    <!-- Header -->
    <div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl shadow-lg p-6 mb-6 text-white print:bg-white print:text-black print:border">
        <div class="flex items-center gap-3 mb-3">
            <span class="text-3xl">™️</span>
            <div>
                <h1 class="text-2xl font-bold">طلب تسجيل علامة تجارية</h1>
                <p class="text-purple-200 print:text-gray-500">
                    {% if tm.filing_type == 'saip' %}الهيئة السعودية للملكية الفكرية{% elif tm.filing_type == 'gcc' %}مكتب براءات مجلس التعاون{% else %}تسجيل دولي (مدريد){% endif %}
                </p>
            </div>
        </div>
        {% set st_labels = {'draft': 'مسودة', 'generated': 'تم التوليد', 'review': 'قيد المراجعة', 'submitted': 'تم التقديم'} %}
        <div class="flex gap-4 text-sm text-purple-200 print:text-gray-500">
            <span>الحالة: {{ st_labels.get(tm.status, tm.status) }}</span>
            <span>التاريخ: {{ tm.created_at.strftime('%Y-%m-%d') }}</span>
        </div>
    </div>

    <div class="space-y-6 print:space-y-4">
        <!-- Applicant -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 print:shadow-none print:border">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4 border-b dark:border-gray-700 pb-2">بيانات مقدم الطلب</h2>
            {% set app = tm.applicant_json or {} %}
            <div class="grid grid-cols-2 gap-3 text-sm">
                <div><span class="text-gray-500">الاسم (عربي):</span> <strong class="dark:text-white">{{ app.get('name_ar', '-') }}</strong></div>
                <div><span class="text-gray-500">الاسم (إنجليزي):</span> <strong class="dark:text-white">{{ app.get('name_en', '-') }}</strong></div>
                <div class="col-span-2"><span class="text-gray-500">العنوان:</span> <strong class="dark:text-white">{{ app.get('address', '-') }}</strong></div>
                <div><span class="text-gray-500">الجنسية:</span> <strong class="dark:text-white">{{ app.get('nationality', '-') }}</strong></div>
                <div><span class="text-gray-500">الهاتف:</span> <strong class="dark:text-white">{{ app.get('phone', '-') }}</strong></div>
                <div><span class="text-gray-500">البريد:</span> <strong class="dark:text-white">{{ app.get('email', '-') }}</strong></div>
            </div>
        </div>

        <!-- Brand Name -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 print:shadow-none print:border">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4 border-b dark:border-gray-700 pb-2">العلامة التجارية</h2>
            <div class="text-center py-6 bg-gray-50 dark:bg-gray-700 rounded-xl mb-4">
                <div class="text-3xl font-bold text-gray-900 dark:text-white mb-2">{{ tm.brand_name_ar or '-' }}</div>
                <div class="text-xl text-gray-600 dark:text-gray-400" dir="ltr">{{ tm.brand_name_en or '' }}</div>
            </div>
            {% if tm.color_claim %}
            <div class="text-sm"><span class="text-gray-500">ادعاء اللون:</span> <strong class="dark:text-white">{{ tm.color_claim }}</strong></div>
            {% endif %}
        </div>

        <!-- Nice Classes -->
        {% if tm.nice_classes_json %}
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 print:shadow-none print:border">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4 border-b dark:border-gray-700 pb-2">تصنيف نيس</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                {% for c in tm.nice_classes_json %}
                {% set nc = nice_classes|selectattr('num', 'equalto', c)|first %}
                {% if nc %}
                <div class="flex items-center gap-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg p-3 text-sm">
                    <span class="bg-purple-600 text-white w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold">{{ nc.num }}</span>
                    <div>
                        <div class="font-medium text-gray-900 dark:text-white">{{ nc.ar }}</div>
                        <div class="text-xs text-gray-500">{{ nc.en }}</div>
                    </div>
                </div>
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Goods/Services -->
        {% if tm.goods_services_description %}
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 print:shadow-none print:border">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4 border-b dark:border-gray-700 pb-2">وصف السلع والخدمات</h2>
            <p class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line leading-relaxed">{{ tm.goods_services_description }}</p>
        </div>
        {% endif %}
    </div>
</div>

{% if not shared %}
<!-- Share Modal -->
<div id="shareModal" 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 class="flex gap-2">
            <input type="text" id="shareUrl" value="{{ url_for('ip.share_trademark', token=tm.share_token, _external=True) }}" readonly class="flex-1 border rounded-lg px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" dir="ltr">
            <button onclick="navigator.clipboard.writeText(document.getElementById('shareUrl').value).then(()=>alert('تم نسخ الرابط!'))" class="bg-purple-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-purple-700 transition">نسخ</button>
        </div>
        <button onclick="document.getElementById('shareModal').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 text-sm">إغلاق</button>
    </div>
</div>
{% endif %}

<style>
@media print {
    nav, footer, .no-print, button, a[href] { display: none !important; }
    body { background: white !important; }
}
</style>
{% endblock %}