{% extends "base.html" %}
{% load static %}

{% block title %}Liste des Simulations - ECOLUX{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="bg-white rounded-lg shadow-lg p-6">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-3xl font-bold text-gray-800">📊 Simulations ECOLUX</h1>
            <div class="text-sm text-gray-600">
                Total: {{ simulations.paginator.count }} simulation{{ simulations.paginator.count|pluralize }}
            </div>
        </div>

        <!-- Filtres -->
        <div class="bg-gray-50 rounded-lg p-4 mb-6">
            <form method="GET" class="flex flex-wrap gap-4 items-end">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Statut</label>
                    <select name="status" class="border border-gray-300 rounded-md px-3 py-2">
                        <option value="">Tous les statuts</option>
                        {% for value, label in status_choices %}
                            <option value="{{ value }}" {% if current_status == value %}selected{% endif %}>
                                {{ label }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Recherche</label>
                    <input type="text" name="search" value="{{ search_query }}" 
                           placeholder="Nom, email, type..." 
                           class="border border-gray-300 rounded-md px-3 py-2">
                </div>
                
                <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">
                    Filtrer
                </button>
                
                {% if search_query or current_status %}
                    <a href="{% url 'app:simulation_list' %}" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-md">
                        Réinitialiser
                    </a>
                {% endif %}
            </form>
        </div>

        <!-- Liste des simulations -->
        <div class="overflow-x-auto">
            <table class="min-w-full bg-white border border-gray-200 rounded-lg">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projet</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Coût Total</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for simulation in simulations %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">
                            #{{ simulation.id }}
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ simulation.customer.full_name }}</div>
                            <div class="text-sm text-gray-500">{{ simulation.customer.email }}</div>
                            {% if simulation.customer.phone %}
                                <div class="text-sm text-gray-500">{{ simulation.customer.phone }}</div>
                            {% endif %}
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">{{ simulation.project_type }}</div>
                            <div class="text-sm text-gray-500">{{ simulation.standing }} - {{ simulation.niveau }}</div>
                            <div class="text-sm text-gray-500">{{ simulation.region }}</div>
                            <div class="text-xs text-gray-400">
                                ST: {{ simulation.surface_terrain }}m² - SB: {{ simulation.surface_batie }}m²
                            </div>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            <div class="text-lg font-bold text-green-600">
                                {{ simulation.cout_total|floatformat:0 }} FCFA
                            </div>
                            <div class="text-xs text-gray-500">
                                {{ simulation.prix_m2 }} FCFA/m²
                            </div>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            {% if simulation.status == 'COMPLETED' %}
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                    Terminée
                                </span>
                            {% elif simulation.status == 'QUOTE_REQUESTED' %}
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                    Devis demandé
                                </span>
                            {% elif simulation.status == 'QUOTE_SENT' %}
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800">
                                    Devis envoyé
                                </span>
                            {% else %}
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
                                    {{ simulation.get_status_display }}
                                </span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">
                            {{ simulation.created_at|date:"d/m/Y H:i" }}
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm">
                            <a href="{% url 'app:simulation_detail' simulation.id %}" 
                               class="text-blue-600 hover:text-blue-900 mr-3">
                                Voir détails
                            </a>
                            {% if simulation.customer.phone %}
                                <a href="https://wa.me/{{ simulation.customer.phone|cut:'+' }}" 
                                   target="_blank"
                                   class="text-green-600 hover:text-green-900">
                                    WhatsApp
                                </a>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="px-4 py-8 text-center text-gray-500">
                            Aucune simulation trouvée.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        {% if simulations.has_other_pages %}
        <div class="mt-6 flex justify-center">
            <nav class="flex space-x-2">
                {% if simulations.has_previous %}
                    <a href="?page={{ simulations.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if current_status %}&status={{ current_status }}{% endif %}" 
                       class="px-3 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">
                        Précédent
                    </a>
                {% endif %}

                <span class="px-3 py-2 bg-blue-500 text-white rounded">
                    Page {{ simulations.number }} sur {{ simulations.paginator.num_pages }}
                </span>

                {% if simulations.has_next %}
                    <a href="?page={{ simulations.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if current_status %}&status={{ current_status }}{% endif %}" 
                       class="px-3 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">
                        Suivant
                    </a>
                {% endif %}
            </nav>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}
