{% extends 'base.html' %}

{% block header_title %}قاعدة بيانات العملاء (CRM){% endblock %}

{% block content %}
<div class="mb-4 flex space-x-4 space-x-reverse border-b border-gray-200 overflow-x-auto">
    <a href="?status=all" class="{% if current_status == 'all' %}border-indigo-500 text-indigo-600{% else %}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{% endif %} whitespace-nowrap pb-4 px-4 border-b-2 font-medium text-sm">
        كل المراسلات
    </a>
    <a href="?status=active" class="{% if current_status == 'active' %}border-indigo-500 text-indigo-600{% else %}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{% endif %} whitespace-nowrap pb-4 px-4 border-b-2 font-medium text-sm">
        العملاء الحاليين 💼
    </a>
    <a href="?status=vip" class="{% if current_status == 'vip' %}border-indigo-500 text-indigo-600{% else %}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{% endif %} whitespace-nowrap pb-4 px-4 border-b-2 font-medium text-sm">
        العملاء المميزين (VIP) ⭐️
    </a>
</div>

<div class="bg-white shadow-sm rounded-lg border border-gray-200 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 text-right">
            <thead class="bg-gray-50">
                <tr>
                <th scope="col" class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">العميل</th>
                <th scope="col" class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">الشركة</th>
                <th scope="col" class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الهاتف</th>
                <th scope="col" class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
                <th scope="col" class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">الرسائل</th>
                <th scope="col" class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراء</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            {% for client in clients %}
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10">
                            <span class="inline-flex items-center justify-center h-10 w-10 rounded-full bg-blue-100">
                                <span class="text-blue-600 font-medium text-lg">{{ client.name|default:client.email|make_list|first|upper }}</span>
                            </span>
                        </div>
                        <div class="mr-4">
                            <div class="text-sm font-medium text-gray-900">{{ client.name|default:"(بدون اسم)" }}</div>
                            <div class="text-sm text-gray-500">{{ client.email }}</div>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ client.company|default:"-" }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ client.phone|default:"-" }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                        {% if client.status == 'vip' %}bg-purple-100 text-purple-800
                        {% elif client.status == 'active' %}bg-green-100 text-green-800
                        {% elif client.status == 'spam' %}bg-red-100 text-red-800
                        {% else %}bg-gray-100 text-gray-800{% endif %}">
                        {{ client.get_status_display }}
                    </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-100 text-indigo-800">
                        {{ client.emails.count }} رسائل
                    </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <a href="{% url 'client_profile' client.id %}" class="text-indigo-600 hover:text-indigo-900">فتح البروفايل <i class="fas fa-arrow-left text-xs mr-1"></i></a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="5" class="px-6 py-12 text-center">
                    <i class="fas fa-users text-gray-300 text-5xl mb-4"></i>
                    <h3 class="text-lg font-medium text-gray-900">لا يوجد عملاء حتى الآن</h3>
                    <p class="mt-1 text-sm text-gray-500">سيتم إضافة العملاء تلقائياً عندما تستقبل إيميلات جديدة.</p>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
</div>
{% endblock %}