{% extends "base.html" %}
{% block title %}Multi-Currency — {{ report.project_name }}{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto px-4 py-12">
    <a href="{{ url_for('study.view', report_id=report.id) }}" class="text-sm text-slate-400 hover:text-white transition mb-4 inline-block">&larr; العودة للتقرير</a>
    <div class="mb-8">
        <div class="text-xs text-gold-500 font-mono tracking-widest uppercase">MULTI-CURRENCY CONVERTER</div>
        <h1 class="text-2xl font-bold text-white">تحويل العملات — {{ report.project_name }}</h1>
    </div>
    <div class="glass p-6 rounded-xl border border-white/10 mb-6">
        <div class="grid grid-cols-3 gap-4 items-end">
            <div>
                <label class="text-xs text-slate-400 block mb-1">المبلغ</label>
                <input id="amount" type="number" value="100000" class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
            </div>
            <div>
                <label class="text-xs text-slate-400 block mb-1">من</label>
                <select id="fromCur" class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
                    {% for code, info in currencies.items() %}
                    <option value="{{ code }}" {{ 'selected' if code == source }}>{{ info.symbol }} {{ code }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="text-xs text-slate-400 block mb-1">إلى</label>
                <select id="toCur" class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
                    {% for code, info in currencies.items() %}
                    <option value="{{ code }}" {{ 'selected' if code == target }}>{{ info.symbol }} {{ code }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div id="result" class="mt-6 text-center">
            <div class="text-3xl text-gold-400 font-bold" id="resultValue">—</div>
        </div>
    </div>
    <div class="glass p-5 rounded-xl border border-white/10">
        <h3 class="text-sm text-slate-400 font-mono uppercase mb-3">Exchange Rates (vs USD)</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            {% for code, info in currencies.items() %}
            <div class="bg-white/5 p-3 rounded-lg text-center">
                <div class="text-xs text-slate-500">{{ info.name }}</div>
                <div class="text-white font-bold">{{ info.symbol }} {{ code }}</div>
                <div class="text-xs text-gold-400">{{ info.rate_to_usd }}</div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
<script>
function convert() {
    const amt = parseFloat(document.getElementById('amount').value) || 0;
    const from = document.getElementById('fromCur').value;
    const to = document.getElementById('toCur').value;
    fetch('{{ url_for("advanced.convert_currency") }}', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({amount: amt, from, to})
    }).then(r => r.json()).then(d => {
        document.getElementById('resultValue').textContent = d.result ? d.result.toLocaleString() + ' ' + to : 'Error';
    });
}
document.getElementById('amount').addEventListener('input', convert);
document.getElementById('fromCur').addEventListener('change', convert);
document.getElementById('toCur').addEventListener('change', convert);
convert();
</script>
{% endblock %}