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

{% block title %}Simulation #{{ simulation.id }} - ECOLUX{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="bg-white rounded-lg shadow-lg p-6">
        <!-- Header -->
        <div class="flex justify-between items-center mb-6">
            <div>
                <h1 class="text-3xl font-bold text-gray-800">
                    📋 Simulation #{{ simulation.id }}
                </h1>
                <p class="text-gray-600 mt-2">
                    Créée le {{ simulation.created_at|date:"d/m/Y à H:i" }}
                </p>
            </div>
            <div class="text-right">
                {% if simulation.status == 'COMPLETED' %}
                    <span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full bg-green-100 text-green-800">
                        ✅ Terminée
                    </span>
                {% elif simulation.status == 'QUOTE_REQUESTED' %}
                    <span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full bg-blue-100 text-blue-800">
                        📋 Devis demandé
                    </span>
                {% elif simulation.status == 'QUOTE_SENT' %}
                    <span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full bg-purple-100 text-purple-800">
                        📤 Devis envoyé
                    </span>
                {% endif %}
                <a href="{% url 'app:simulation_list' %}" 
                   class="ml-4 bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-md">
                    ← Retour à la liste
                </a>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Informations client -->
            <div class="bg-blue-50 rounded-lg p-6">
                <h2 class="text-xl font-bold text-blue-800 mb-4">👤 Informations Client</h2>
                <div class="space-y-3">
                    <div>
                        <span class="font-medium text-gray-700">Nom :</span>
                        <span class="text-gray-900">{{ simulation.customer.full_name }}</span>
                    </div>
                    <div>
                        <span class="font-medium text-gray-700">Email :</span>
                        <a href="mailto:{{ simulation.customer.email }}" 
                           class="text-blue-600 hover:text-blue-800">
                            {{ simulation.customer.email }}
                        </a>
                    </div>
                    {% if simulation.customer.phone %}
                    <div>
                        <span class="font-medium text-gray-700">Téléphone :</span>
                        <a href="tel:{{ simulation.customer.phone }}" 
                           class="text-blue-600 hover:text-blue-800">
                            {{ simulation.customer.phone }}
                        </a>
                    </div>
                    {% endif %}
                    <div>
                        <span class="font-medium text-gray-700">Client depuis :</span>
                        <span class="text-gray-900">{{ simulation.customer.created_at|date:"d/m/Y" }}</span>
                    </div>
                    <div>
                        <span class="font-medium text-gray-700">Nombre de simulations :</span>
                        <span class="text-gray-900">{{ simulation.customer.simulation_count }}</span>
                    </div>
                    {% if simulation.customer.phone %}
                    <div class="pt-2">
                        <a href="https://wa.me/{{ simulation.customer.phone|cut:'+' }}" 
                           target="_blank"
                           class="inline-flex items-center px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-md">
                            📱 Contacter sur WhatsApp
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Paramètres du projet -->
            <div class="bg-green-50 rounded-lg p-6">
                <h2 class="text-xl font-bold text-green-800 mb-4">🏗️ Projet</h2>
                <div class="space-y-3">
                    <div>
                        <span class="font-medium text-gray-700">Type :</span>
                        <span class="text-gray-900">{{ simulation.project_type }}</span>
                    </div>
                    <div>
                        <span class="font-medium text-gray-700">Standing :</span>
                        <span class="text-gray-900">{{ simulation.standing }}</span>
                    </div>
                    <div>
                        <span class="font-medium text-gray-700">Hauteur :</span>
                        <span class="text-gray-900">{{ simulation.niveau }}</span>
                    </div>
                    <div>
                        <span class="font-medium text-gray-700">Région :</span>
                        <span class="text-gray-900">{{ simulation.region }}</span>
                    </div>
                    <div>
                        <span class="font-medium text-gray-700">Surface terrain :</span>
                        <span class="text-gray-900">{{ simulation.surface_terrain }} m²</span>
                    </div>
                    <div>
                        <span class="font-medium text-gray-700">Surface bâtie :</span>
                        <span class="text-gray-900">{{ simulation.surface_batie }} m²</span>
                    </div>
                    <div>
                        <span class="font-medium text-gray-700">Ascenseur :</span>
                        <span class="text-gray-900">{{ simulation.ascenseur|yesno:"Oui,Non" }}</span>
                    </div>
                    <div>
                        <span class="font-medium text-gray-700">Fondation :</span>
                        <span class="text-gray-900">{{ simulation.fondation_choice }}</span>
                    </div>
                    {% if simulation.options_sans_prix %}
                    <div>
                        <span class="font-medium text-gray-700">Options :</span>
                        <ul class="list-disc list-inside text-gray-900 mt-1">
                            {% for option in simulation.options_sans_prix %}
                                <li>{{ option }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Estimation financière -->
            <div class="bg-yellow-50 rounded-lg p-6">
                <h2 class="text-xl font-bold text-yellow-800 mb-4">💰 Estimation</h2>
                <div class="space-y-3">
                    <div>
                        <span class="font-medium text-gray-700">Gros Œuvre :</span>
                        <span class="text-gray-900 font-bold">{{ simulation.cout_gros_oeuvre|floatformat:0 }} FCFA</span>
                    </div>
                    <div>
                        <span class="font-medium text-gray-700">Second Œuvre :</span>
                        <span class="text-gray-900 font-bold">{{ simulation.cout_second_oeuvre|floatformat:0 }} FCFA</span>
                    </div>
                    {% if simulation.cout_ascenseur > 0 %}
                    <div>
                        <span class="font-medium text-gray-700">Ascenseur :</span>
                        <span class="text-gray-900 font-bold">{{ simulation.cout_ascenseur|floatformat:0 }} FCFA</span>
                    </div>
                    {% endif %}
                    <hr class="border-yellow-200">
                    <div class="text-lg">
                        <span class="font-bold text-gray-700">TOTAL :</span>
                        <span class="text-green-600 font-black text-xl">{{ simulation.cout_total|floatformat:0 }} FCFA</span>
                    </div>
                    <div>
                        <span class="font-medium text-gray-700">Prix au m² :</span>
                        <span class="text-gray-900 font-bold">{{ simulation.prix_m2|floatformat:0 }} FCFA/m²</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Informations complémentaires pour le devis -->
        {% if simulation.is_quote_requested %}
        <div class="mt-6 bg-purple-50 rounded-lg p-6">
            <h2 class="text-xl font-bold text-purple-800 mb-4">📝 Informations de devis</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-3">
                    {% if simulation.localisation_projet %}
                    <div>
                        <span class="font-medium text-gray-700">Localisation :</span>
                        <span class="text-gray-900">{{ simulation.localisation_projet }}</span>
                    </div>
                    {% endif %}
                    
                    {% if simulation.a_terrain is not None %}
                    <div>
                        <span class="font-medium text-gray-700">Possède un terrain :</span>
                        <span class="text-gray-900">{{ simulation.a_terrain|yesno:"Oui,Non" }}</span>
                    </div>
                    {% endif %}

                    {% if simulation.adresse_terrain %}
                    <div>
                        <span class="font-medium text-gray-700">Adresse terrain :</span>
                        <span class="text-gray-900">{{ simulation.adresse_terrain }}</span>
                    </div>
                    {% endif %}

                    <div>
                        <span class="font-medium text-gray-700">Souhaite conseil terrain :</span>
                        <span class="text-gray-900">{{ simulation.conseil_terrain|yesno:"Oui,Non" }}</span>
                    </div>
                </div>

                <div class="space-y-3">
                    {% if simulation.projet_actuel is not None %}
                    <div>
                        <span class="font-medium text-gray-700">Projet actuel :</span>
                        <span class="text-gray-900">{{ simulation.projet_actuel|yesno:"Oui,Non" }}</span>
                    </div>
                    {% endif %}

                    {% if simulation.delai_projet %}
                    <div>
                        <span class="font-medium text-gray-700">Délai souhaité :</span>
                        <span class="text-gray-900">{{ simulation.delai_projet }}</span>
                    </div>
                    {% endif %}

                    {% if simulation.a_plan is not None %}
                    <div>
                        <span class="font-medium text-gray-700">Possède un plan :</span>
                        <span class="text-gray-900">{{ simulation.a_plan|yesno:"Oui,Non" }}</span>
                    </div>
                    {% endif %}
                </div>
            </div>

            {% if simulation.message_client %}
            <div class="mt-4">
                <span class="font-medium text-gray-700">Message du client :</span>
                <div class="mt-2 p-3 bg-white rounded border">
                    {{ simulation.message_client|linebreaks }}
                </div>
            </div>
            {% endif %}
        </div>
        {% endif %}

        <!-- Métadonnées techniques -->
        <div class="mt-6 bg-gray-50 rounded-lg p-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">🔧 Informations techniques</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                {% if simulation.ip_address %}
                <div>
                    <span class="font-medium text-gray-700">Adresse IP :</span>
                    <span class="text-gray-600">{{ simulation.ip_address }}</span>
                </div>
                {% endif %}
                <div>
                    <span class="font-medium text-gray-700">Dernière modification :</span>
                    <span class="text-gray-600">{{ simulation.updated_at|date:"d/m/Y H:i" }}</span>
                </div>
                <div>
                    <span class="font-medium text-gray-700">ID unique :</span>
                    <span class="text-gray-600">#{{ simulation.id }}</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}