{% extends "base.html" %}
{% block title %}عرض دراسة في السوق{% endblock %}
{% block content %}
<div class="max-w-2xl mx-auto px-4 py-12">
    <div class="mb-8">
        <div class="text-xs text-gold-500 font-mono tracking-widest uppercase">MARKETPLACE</div>
        <h1 class="text-2xl font-bold text-white">عرض دراسة في السوق</h1>
        <p class="text-sm text-slate-400 mt-1">سيتم مراجعة الدراسة من قبل الإدارة قبل نشرها</p>
    </div>
    <form method="POST" action="{{ url_for('marketplace.create_post') }}" class="glass p-6 rounded-xl border border-white/10 space-y-5">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

        <!-- Report Selection -->
        <div>
            <label class="text-xs text-slate-400 block mb-1">اختر الدراسة</label>
            <select name="report_id" required class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
                {% for r in reports %}
                <option value="{{ r.id }}" {{ 'selected' if preselect_report_id == r.id }}>{{ r.project_name }}</option>
                {% endfor %}
            </select>
        </div>

        <!-- Listing Goal -->
        <div>
            <label class="text-xs text-slate-400 block mb-2">هدف العرض</label>
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-2" id="goalSelector">
                {% for g_key, g_val in goal_info.items() %}
                <label class="cursor-pointer">
                    <input type="radio" name="listing_goal" value="{{ g_key }}" class="hidden peer" {{ 'checked' if loop.first }} onchange="toggleGoalFields()">
                    <div class="peer-checked:border-{{ g_val.color }}-500/50 peer-checked:bg-{{ g_val.color }}-500/10 border border-white/10 rounded-lg p-3 text-center transition hover:border-white/20">
                        <div class="text-xl mb-1">{{ g_val.icon }}</div>
                        <div class="text-xs text-slate-300">{{ g_val.label }}</div>
                    </div>
                </label>
                {% endfor %}
            </div>
        </div>

        <!-- Common Fields -->
        <div>
            <label class="text-xs text-slate-400 block mb-1">عنوان العرض</label>
            <input name="title" required class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm" placeholder="عنوان جذاب للدراسة">
        </div>
        <div>
            <label class="text-xs text-slate-400 block mb-1">القطاع</label>
            <select name="sector" class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
                <option value="">اختر القطاع</option>
                {% for s in sectors %}
                <option value="{{ s }}">{{ s }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label class="text-xs text-slate-400 block mb-1">وصف تفصيلي</label>
            <textarea name="description" rows="3" class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm" placeholder="وصف شامل للدراسة ومحتوياتها"></textarea>
        </div>
        <div>
            <label class="text-xs text-slate-400 block mb-1">نص المعاينة (يظهر للزوار قبل الشراء)</label>
            <textarea name="preview_text" rows="2" class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm" placeholder="ملخص قصير يظهر في بطاقة العرض"></textarea>
        </div>
        <div>
            <label class="text-xs text-slate-400 block mb-1">بريد التواصل</label>
            <input name="contact_email" type="email" class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm" placeholder="اختياري">
        </div>

        <!-- Sell / License Fields -->
        <div id="fields_price" class="goal-field">
            <label class="text-xs text-slate-400 block mb-1">السعر (SAR)</label>
            <input name="price" type="number" step="0.01" min="0" class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm" placeholder="0.00">
        </div>

        <!-- Investor Fields -->
        <div id="fields_investor" class="goal-field hidden space-y-4">
            <div>
                <label class="text-xs text-slate-400 block mb-1">مبلغ الاستثمار المطلوب (SAR)</label>
                <input name="investment_needed" type="number" step="0.01" min="0" class="w-full bg-white/5 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>
                <input name="equity_offered" type="number" step="0.1" min="0" max="100" class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
            </div>
        </div>

        <!-- Partner Fields -->
        <div id="fields_partner" class="goal-field hidden space-y-4">
            <div>
                <label class="text-xs text-slate-400 block mb-1">الدور المطلوب من الشريك</label>
                <input name="partner_role" class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm" placeholder="مثال: شريك تقني، شريك تمويلي...">
            </div>
            <div>
                <label class="text-xs text-slate-400 block mb-1">نسبة الحصة المعروضة (%)</label>
                <input name="equity_offered" type="number" step="0.1" min="0" max="100" class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
            </div>
        </div>

        <!-- License Fields -->
        <div id="fields_license" class="goal-field hidden">
            <label class="text-xs text-slate-400 block mb-1">شروط الترخيص</label>
            <textarea name="license_terms" rows="3" class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm" placeholder="شروط وأحكام الترخيص"></textarea>
        </div>

        <!-- AI Auto-Fill -->
        <button type="button" onclick="aiFillListing()" id="aiFillBtn" class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-2.5 rounded-lg text-sm font-medium hover:opacity-90 transition flex items-center justify-center gap-2">
            <span>🤖</span> تعبئة تلقائية بالذكاء الاصطناعي
        </button>
        <button type="submit" class="w-full bg-gold-500/20 border border-gold-500/30 text-gold-400 px-6 py-2.5 rounded-lg text-sm font-medium hover:bg-gold-500/30 transition">
            تقديم للمراجعة
        </button>
    </form>
</div>

<script>
function toggleGoalFields() {
    const goal = document.querySelector('input[name="listing_goal"]:checked').value;
    document.querySelectorAll('.goal-field').forEach(el => el.classList.add('hidden'));
    if (goal === 'sell') document.getElementById('fields_price').classList.remove('hidden');
    if (goal === 'license') {
        document.getElementById('fields_price').classList.remove('hidden');
        document.getElementById('fields_license').classList.remove('hidden');
    }
    if (goal === 'find_investor') document.getElementById('fields_investor').classList.remove('hidden');
    if (goal === 'find_partner') document.getElementById('fields_partner').classList.remove('hidden');
}
toggleGoalFields();

function aiFillListing() {
    const btn = document.getElementById('aiFillBtn');
    const reportId = document.querySelector('select[name="report_id"]').value;
    if (!reportId) { alert('اختر دراسة أولاً'); return; }
    btn.disabled = true; btn.innerHTML = '<span>⏳</span> جاري التعبئة...';
    fetch('/marketplace/api/ai-fill', {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token() }}'},
        body: JSON.stringify({report_id: reportId, goal: document.querySelector('input[name="listing_goal"]:checked')?.value || 'sell'})
    }).then(r => r.json()).then(data => {
        btn.disabled = false; btn.innerHTML = '<span>🤖</span> تعبئة تلقائية بالذكاء الاصطناعي';
        if (data.error) { alert(data.error); return; }
        if (data.title) document.querySelector('input[name="title"]').value = data.title;
        if (data.description) document.querySelector('textarea[name="description"]').value = data.description;
        if (data.preview_text) document.querySelector('textarea[name="preview_text"]').value = data.preview_text;
        if (data.sector) {
            const sel = document.querySelector('select[name="sector"]');
            for (let opt of sel.options) { if (opt.value === data.sector) { opt.selected = true; break; } }
        }
        if (data.price) document.querySelector('input[name="price"]').value = data.price;
        if (data.investment_needed) { const el = document.querySelector('input[name="investment_needed"]'); if (el) el.value = data.investment_needed; }
        if (data.equity_offered) { const el = document.querySelector('input[name="equity_offered"]'); if (el) el.value = data.equity_offered; }
        if (data.partner_role) { const el = document.querySelector('input[name="partner_role"]'); if (el) el.value = data.partner_role; }
        if (data.license_terms) { const el = document.querySelector('textarea[name="license_terms"]'); if (el) el.value = data.license_terms; }
        alert('تم التعبئة بنجاح! راجع البيانات وعدّل ما يلزم.');
    }).catch(() => { btn.disabled = false; btn.innerHTML = '<span>🤖</span> تعبئة تلقائية بالذكاء الاصطناعي'; alert('حدث خطأ'); });
}
</script>
{% endblock %}