{% extends "base.html" %}
{% block title %}مقارنة التقارير{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <h1 class="text-3xl font-serif font-bold text-white mb-8 flex items-center gap-3">
        <span class="text-gold-400">&#9670;</span> مقارنة التقارير
    </h1>

    <form method="GET" class="glass p-6 rounded-2xl mb-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">التقرير الأول</label>
                <select name="r1" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-gold-500/50 transition">
                    <option value="">-- اختر تقرير --</option>
                    {% for r in reports %}
                    <option value="{{ r.id }}" {% if report1 and r.id == report1.id %}selected{% endif %}>{{ r.project_name }} ({{ r.created_at.strftime('%m/%d') }})</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">التقرير الثاني</label>
                <select name="r2" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-gold-500/50 transition">
                    <option value="">-- اختر تقرير --</option>
                    {% for r in reports %}
                    <option value="{{ r.id }}" {% if report2 and r.id == report2.id %}selected{% endif %}>{{ r.project_name }} ({{ r.created_at.strftime('%m/%d') }})</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <button type="submit" class="mt-4 bg-gold-500 text-black px-8 py-3 rounded-xl font-bold hover:bg-gold-400 transition">قارن</button>
    </form>

    {% if report1 and report2 %}
    {% set s1 = report1.synthesis_result or {} %}
    {% set s2 = report2.synthesis_result or {} %}
    <div class="grid grid-cols-2 gap-6">
        <div class="glass p-6 rounded-2xl">
            <h2 class="text-xl font-bold text-white mb-4">{{ report1.project_name }}</h2>
            <div class="space-y-4">
                <div class="text-center p-4 rounded-xl {% if s1.get('verdict') == 'GO' %}bg-emerald-500/20{% elif s1.get('verdict') == 'NO-GO' %}bg-red-500/20{% else %}bg-yellow-500/20{% endif %}">
                    <div class="text-2xl font-bold {% if s1.get('verdict') == 'GO' %}text-emerald-400{% elif s1.get('verdict') == 'NO-GO' %}text-red-400{% else %}text-yellow-400{% endif %}">{{ s1.get('verdict', 'N/A') }}</div>
                </div>
                {% if s1.get('viability_score', {}).get('overall') %}
                <div class="text-center"><span class="text-4xl font-bold text-gold-400">{{ s1.viability_score.overall }}</span><span class="text-slate-400">/100</span></div>
                {% endif %}
                {% if s1.get('financial_highlights') %}
                <div class="space-y-2">
                    {% for k, v in s1.financial_highlights.items() %}
                    <div class="flex justify-between text-sm"><span class="text-slate-400">{{ k }}</span><span class="text-white">{{ v }}</span></div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>
        <div class="glass p-6 rounded-2xl">
            <h2 class="text-xl font-bold text-white mb-4">{{ report2.project_name }}</h2>
            <div class="space-y-4">
                <div class="text-center p-4 rounded-xl {% if s2.get('verdict') == 'GO' %}bg-emerald-500/20{% elif s2.get('verdict') == 'NO-GO' %}bg-red-500/20{% else %}bg-yellow-500/20{% endif %}">
                    <div class="text-2xl font-bold {% if s2.get('verdict') == 'GO' %}text-emerald-400{% elif s2.get('verdict') == 'NO-GO' %}text-red-400{% else %}text-yellow-400{% endif %}">{{ s2.get('verdict', 'N/A') }}</div>
                </div>
                {% if s2.get('viability_score', {}).get('overall') %}
                <div class="text-center"><span class="text-4xl font-bold text-gold-400">{{ s2.viability_score.overall }}</span><span class="text-slate-400">/100</span></div>
                {% endif %}
                {% if s2.get('financial_highlights') %}
                <div class="space-y-2">
                    {% for k, v in s2.financial_highlights.items() %}
                    <div class="flex justify-between text-sm"><span class="text-slate-400">{{ k }}</span><span class="text-white">{{ v }}</span></div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% elif not report1 and not report2 %}
    <div class="text-center text-slate-400 py-12">اختر تقريرين للمقارنة</div>
    {% endif %}
</div>
{% endblock %}