{% extends "base.html" %}
{% block title %}طلب براءة اختراع جديد{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-8">
    <div class="mb-6">
        <a href="{{ url_for('ip.index') }}" class="text-indigo-600 hover:underline text-sm">← العودة للملكية الفكرية</a>
    </div>

    <div class="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">المشروع: <strong>{{ report.project_name }}</strong></p>
    </div>

    <!-- Filing Type Selection -->
    <form method="POST" class="space-y-6">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4">اختر جهة التقديم</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                {% for key, info in filing_info.items() %}
                <label class="relative cursor-pointer">
                    <input type="radio" name="filing_type" value="{{ key }}" {% if key == 'saip' %}checked{% endif %} class="peer sr-only">
                    <div class="border-2 border-gray-200 dark:border-gray-600 rounded-xl p-5 text-center hover:border-indigo-300 peer-checked:border-indigo-600 peer-checked:bg-indigo-50 dark:peer-checked:bg-indigo-900/20 transition">
                        <div class="text-3xl mb-2">{{ info.icon }}</div>
                        <h3 class="font-bold text-gray-900 dark:text-white text-sm mb-1">{{ info.name_ar }}</h3>
                        <p class="text-xs text-gray-500">{{ info.description_ar }}</p>
                        <a href="{{ info.url }}" target="_blank" class="text-xs text-indigo-600 hover:underline mt-2 inline-block">الموقع الرسمي ↗</a>
                    </div>
                </label>
                {% endfor %}
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 space-y-4">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-2">عنوان الاختراع</h2>
            <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_ar" 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>
                <input type="text" name="title_en" class="w-full border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white" dir="ltr">
            </div>
        </div>

        <button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-xl hover:bg-indigo-700 transition font-medium text-lg">إنشاء الطلب والمتابعة →</button>
    </form>
</div>
{% endblock %}