{% extends "base.html" %}
{% block title %}الاستفسارات الواردة{% endblock %}
{% block content %}
<div class="max-w-6xl mx-auto px-4 py-8">
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-2xl font-serif font-bold text-white flex items-center gap-3">
                <span class="text-gold-400">&#9670;</span> الاستفسارات الواردة
            </h1>
            <p class="text-sm text-slate-400 mt-1">طلبات المستثمرين والشركاء المهتمين بدراساتك</p>
        </div>
        <a href="{{ url_for('marketplace.my_listings') }}" class="text-sm text-slate-400 hover:text-gold-400 transition">&larr; دراساتي</a>
    </div>

    {% if inquiries %}
    <div class="space-y-4">
        {% for inq in inquiries %}
        <div class="bg-white/5 border border-white/10 rounded-xl p-5" id="inq-{{ inq.id }}">
            <div class="flex items-start justify-between gap-4 mb-3">
                <div>
                    <div class="flex items-center gap-2 mb-1">
                        {% set type_labels = {'invest': 'مستثمر', 'partner': 'شريك', 'license': 'ترخيص', 'general': 'عام'} %}
                        {% set type_colors = {'invest': 'emerald', 'partner': 'blue', 'license': 'purple', 'general': 'slate'} %}
                        <span class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-{{ type_colors.get(inq.inquiry_type, 'slate') }}-500/20 text-{{ type_colors.get(inq.inquiry_type, 'slate') }}-400">
                            {{ type_labels.get(inq.inquiry_type, inq.inquiry_type) }}
                        </span>
                        {% if inq.status == 'new' or inq.status == 'read' %}
                        <span class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-yellow-500/20 text-yellow-400">جديد</span>
                        {% elif inq.status == 'accepted' %}
                        <span class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-emerald-500/20 text-emerald-400">مقبول</span>
                        {% elif inq.status == 'rejected' %}
                        <span class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-red-500/20 text-red-400">مرفوض</span>
                        {% elif inq.status == 'replied' %}
                        <span class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-blue-500/20 text-blue-400">تم الرد</span>
                        {% endif %}
                    </div>
                    <h3 class="text-white font-semibold">{{ inq.sender.name }}</h3>
                    <div class="text-xs text-slate-500">{{ inq.sender.email }}</div>
                    {% if inq.contact_info %}
                    <div class="text-xs text-slate-400 mt-1">📞 {{ inq.contact_info }}</div>
                    {% endif %}
                </div>
                <div class="text-right shrink-0">
                    <div class="text-xs text-slate-500">{{ inq.created_at.strftime('%Y-%m-%d %H:%M') }}</div>
                    <div class="text-xs text-slate-400 mt-1">دراسة: {{ inq.listing.title }}</div>
                </div>
            </div>

            <div class="bg-white/5 rounded-lg p-3 mb-3">
                <p class="text-slate-300 text-sm">{{ inq.message }}</p>
            </div>

            {% if inq.reply_message %}
            <div class="bg-gold-500/5 border border-gold-500/10 rounded-lg p-3 mb-3">
                <div class="text-xs text-gold-400 mb-1">ردك:</div>
                <p class="text-slate-300 text-sm">{{ inq.reply_message }}</p>
            </div>
            {% endif %}

            {% if inq.status in ('read', 'new') %}
            <div class="flex flex-wrap gap-2 mt-3">
                <button onclick="showReplyForm({{ inq.id }})" class="text-xs bg-white/5 text-slate-400 px-3 py-1.5 rounded-lg hover:bg-white/10 transition">رد</button>
                <button onclick="replyInquiry({{ inq.id }}, 'accept')" class="text-xs bg-emerald-500/10 text-emerald-400 px-3 py-1.5 rounded-lg hover:bg-emerald-500/20 transition">قبول</button>
                <button onclick="replyInquiry({{ inq.id }}, 'reject')" class="text-xs bg-red-500/10 text-red-400 px-3 py-1.5 rounded-lg hover:bg-red-500/20 transition">رفض</button>
                {% if inq.inquiry_type == 'invest' %}
                <button onclick="addToCRM({{ inq.id }})" class="text-xs bg-purple-500/10 text-purple-400 px-3 py-1.5 rounded-lg hover:bg-purple-500/20 transition">+ إضافة للـ CRM</button>
                {% endif %}
            </div>
            <div id="replyForm-{{ inq.id }}" class="hidden mt-3">
                <textarea id="replyMsg-{{ inq.id }}" rows="2" placeholder="رسالة الرد..."
                    class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm mb-2"></textarea>
                <button onclick="sendReply({{ inq.id }})" class="text-xs bg-gold-500/20 text-gold-400 px-4 py-1.5 rounded-lg hover:bg-gold-500/30 transition">إرسال الرد</button>
            </div>
            {% elif inq.status == 'accepted' and inq.inquiry_type == 'invest' %}
            <div class="mt-3">
                <button onclick="addToCRM({{ inq.id }})" class="text-xs bg-purple-500/10 text-purple-400 px-3 py-1.5 rounded-lg hover:bg-purple-500/20 transition">+ إضافة لإدارة المستثمرين</button>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-16">
        <div class="text-4xl mb-4">💬</div>
        <p class="text-slate-400">لا توجد استفسارات واردة حالياً</p>
    </div>
    {% endif %}
</div>

<script>
function showReplyForm(id) {
    document.getElementById('replyForm-' + id).classList.toggle('hidden');
}
function sendReply(id) {
    const msg = document.getElementById('replyMsg-' + id).value;
    replyInquiry(id, 'reply', msg);
}
function replyInquiry(id, action, msg) {
    fetch('/marketplace/inquiry/' + id + '/reply', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({action: action, reply_message: msg || ''})
    }).then(r => r.json()).then(data => {
        if (data.status === 'ok') location.reload();
        else alert(data.error || 'حدث خطأ');
    });
}
function addToCRM(id) {
    fetch('/marketplace/inquiry/' + id + '/add-to-crm', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'}
    }).then(r => r.json()).then(data => {
        if (data.status === 'ok') alert(data.message || 'تمت الإضافة');
        else alert(data.error || 'حدث خطأ');
    });
}
</script>
{% endblock %}