<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Devis ECOLUX - {{ simulation.customer.full_name }}</title>
    <style>
        @page {
            size: A4;
            margin: 20mm 15mm;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            font-size: 12px;
            line-height: 1.4;
            color: #1e1810;
            background-color: #F8F7F3;
            margin: 0;
            padding: 0;
        }
        
        .header {
            background: linear-gradient(135deg, #1e1810, #2a1f16);
            color: #F8F7F3;
            padding: 25px;
            margin: -20mm -15mm 25px -15mm;
            text-align: center;
            border-bottom: 5px solid #F9C349;
        }
        
        .header h1 {
            font-size: 26px;
            font-weight: bold;
            margin: 0 0 10px 0;
            color: #F9C349;
        }
        
        .header p {
            margin: 5px 0;
            font-size: 14px;
        }
        
        .section {
            background: #F8F7F3;
            border: 2px solid #F9C349;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: 0 2px 10px rgba(30, 24, 16, 0.1);
        }
        
        .section-title {
            color: #1e1810;
            font-size: 18px;
            font-weight: bold;
            border-bottom: 3px solid #F9C349;
            padding-bottom: 10px;
            margin-bottom: 18px;
            text-transform: uppercase;
        }
        
        .info-grid {
            display: table;
            width: 100%;
            margin-bottom: 15px;
        }
        
        .info-row {
            display: table-row;
        }
        
        .info-label, .info-value {
            display: table-cell;
            padding: 8px 12px;
            border-bottom: 1px solid rgba(249, 195, 73, 0.3);
        }
        
        .info-label {
            font-weight: bold;
            background-color: rgba(249, 195, 73, 0.15);
            width: 45%;
        }
        
        .info-value {
            background-color: rgba(248, 247, 243, 0.8);
        }
        
        .total-section {
            background: linear-gradient(135deg, #F9C349, #e6b041);
            color: #1e1810;
            text-align: center;
            padding: 25px;
            border-radius: 12px;
            margin: 25px 0;
            border: 3px solid #1e1810;
        }
        
        .total-section h2 {
            font-size: 22px;
            margin: 0 0 15px 0;
            text-transform: uppercase;
        }
        
        .total-amount {
            font-size: 32px;
            font-weight: bold;
            margin: 15px 0;
            text-shadow: 1px 1px 2px rgba(30, 24, 16, 0.3);
        }
        
        .details-grid {
            display: table;
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
        }
        
        .details-row {
            display: table-row;
        }
        
        .details-cell {
            display: table-cell;
            padding: 12px;
            text-align: center;
            border: 2px solid #1e1810;
            font-weight: bold;
        }
        
        .details-header {
            background: #1e1810;
            color: #F8F7F3;
        }
        
        .footer {
            background: #1e1810;
            color: #F8F7F3;
            padding: 20px;
            margin: 40px -15mm -20mm -15mm;
            text-align: center;
            font-size: 11px;
        }
        
        .disclaimer {
            background: rgba(249, 195, 73, 0.15);
            border: 2px solid #F9C349;
            border-radius: 8px;
            padding: 20px;
            margin: 25px 0;
            font-style: italic;
        }
        
        .logo {
            font-size: 22px;
            font-weight: bold;
            color: #F9C349;
        }
        
        .options-list {
            list-style: none;
            padding: 0;
        }
        
        .options-list li {
            background: rgba(249, 195, 73, 0.1);
            padding: 12px 15px;
            margin: 8px 0;
            border-radius: 6px;
            border-left: 5px solid #F9C349;
            font-weight: 500;
        }
        
        .project-status {
            background: rgba(30, 24, 16, 0.1);
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
        }
        
        .quote-specific {
            background: linear-gradient(135deg, rgba(249, 195, 73, 0.2), rgba(248, 247, 243, 0.9));
            border: 2px dashed #F9C349;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }
        
        .next-steps {
            background: #1e1810;
            color: #F8F7F3;
            padding: 20px;
            border-radius: 8px;
            margin: 25px 0;
        }
        
        .next-steps h3 {
            color: #F9C349;
            margin-top: 0;
        }
        
        .contact-info {
            background: rgba(249, 195, 73, 0.1);
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- En-tête de devis -->
    <div class="header">
        <div class="logo">🏗️ ECOLUX BTP</div>
        <h1>DEVIS PERSONNALISÉ</h1>
        <p><strong>"Le nec plus ultra de l'habitat"</strong></p>
        <p>Date: {{ today|date:"d/m/Y" }} | Réf: DEV-{{ simulation.id }}</p>
        <p><em>Devis établi suite à votre demande via notre estimateur en ligne</em></p>
    </div>

    <!-- Informations client étendues -->
    <div class="section">
        <div class="section-title">👤 INFORMATIONS CLIENT</div>
        <div class="info-grid">
            <div class="info-row">
                <div class="info-label">Nom complet:</div>
                <div class="info-value">{{ simulation.customer.full_name }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Email:</div>
                <div class="info-value">{{ simulation.customer.email }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Téléphone:</div>
                <div class="info-value">{{ simulation.customer.phone }}</div>
            </div>
            {% if simulation.localisation_projet %}
            <div class="info-row">
                <div class="info-label">Localisation du projet:</div>
                <div class="info-value">{{ simulation.localisation_projet }}</div>
            </div>
            {% endif %}
            {% if simulation.adresse_terrain %}
            <div class="info-row">
                <div class="info-label">Adresse du terrain:</div>
                <div class="info-value">{{ simulation.adresse_terrain }}</div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- État d'avancement du projet -->
    <div class="section">
        <div class="section-title">📋 ÉTAT D'AVANCEMENT DU PROJET</div>
        <div class="project-status">
            <div class="info-grid">
                {% if simulation.a_terrain %}
                <div class="info-row">
                    <div class="info-label">Terrain acquis:</div>
                    <div class="info-value">{% if simulation.a_terrain == 'oui' %}✅ Oui{% else %}❌ Non{% endif %}</div>
                </div>
                {% endif %}
                {% if simulation.projet_actuel %}
                <div class="info-row">
                    <div class="info-label">Projet actuel:</div>
                    <div class="info-value">{% if simulation.projet_actuel == 'oui' %}✅ Oui{% else %}❌ Non{% endif %}</div>
                </div>
                {% endif %}
                {% if simulation.delai_projet %}
                <div class="info-row">
                    <div class="info-label">Délai souhaité:</div>
                    <div class="info-value">{{ simulation.delai_projet }}</div>
                </div>
                {% endif %}
                {% if simulation.a_plan %}
                <div class="info-row">
                    <div class="info-label">Plan existant:</div>
                    <div class="info-value">{% if simulation.a_plan == 'oui' %}✅ Oui{% else %}❌ Non{% endif %}</div>
                </div>
                {% endif %}
                {% if simulation.conseil_terrain %}
                <div class="info-row">
                    <div class="info-label">Conseil terrain souhaité:</div>
                    <div class="info-value">{% if simulation.conseil_terrain %}✅ Oui{% else %}❌ Non{% endif %}</div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Message du client -->
    {% if simulation.message_client %}
    <div class="section">
        <div class="section-title">💬 MESSAGE DU CLIENT</div>
        <div class="quote-specific">
            <p><em>"{{ simulation.message_client }}"</em></p>
        </div>
    </div>
    {% endif %}

    <!-- Caractéristiques du projet -->
    <div class="section">
        <div class="section-title">🏗️ SPÉCIFICATIONS TECHNIQUES</div>
        <div class="info-grid">
            <div class="info-row">
                <div class="info-label">Type de construction:</div>
                <div class="info-value">{{ simulation.project_type }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Niveau de finition:</div>
                <div class="info-value">{{ simulation.standing }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Hauteur du bâtiment:</div>
                <div class="info-value">{{ simulation.niveau }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Région de construction:</div>
                <div class="info-value">{{ simulation.region }}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Superficie terrain:</div>
                <div class="info-value">{{ simulation.surface_terrain }} m²</div>
            </div>
            <div class="info-row">
                <div class="info-label">Surface à construire:</div>
                <div class="info-value">{{ simulation.surface_batie }} m²</div>
            </div>
            <div class="info-row">
                <div class="info-label">Installation ascenseur:</div>
                <div class="info-value">{% if simulation.ascenseur %}✅ Oui{% else %}❌ Non{% endif %}</div>
            </div>
            <div class="info-row">
                <div class="info-label">Type de fondations:</div>
                <div class="info-value">{{ simulation.fondation_choice }}</div>
            </div>
        </div>
    </div>

    <!-- Détail des coûts avec analyse -->
    <div class="section">
        <div class="section-title">💰 ESTIMATION DÉTAILLÉE DES COÛTS</div>
        <div class="details-grid">
            <div class="details-row">
                <div class="details-cell details-header">Phase de construction</div>
                <div class="details-cell details-header">Montant (FCFA)</div>
                <div class="details-cell details-header">Prix/m²</div>
                <div class="details-cell details-header">% du total</div>
            </div>
            <div class="details-row">
                <div class="details-cell">🏗️ Gros Œuvre<br><small>(Structure, fondations, murs)</small></div>
                <div class="details-cell">{{ simulation.cout_gros_oeuvre|floatformat:0 }}</div>
                <div class="details-cell">{{ simulation.cout_gros_oeuvre|div:simulation.surface_batie|floatformat:0 }}</div>
                <div class="details-cell">{{ simulation.cout_gros_oeuvre|div:simulation.cout_total|mul:100|floatformat:1 }}%</div>
            </div>
            <div class="details-row">
                <div class="details-cell">🎨 Second Œuvre<br><small>(Finitions, équipements)</small></div>
                <div class="details-cell">{{ simulation.cout_second_oeuvre|floatformat:0 }}</div>
                <div class="details-cell">{{ simulation.cout_second_oeuvre|div:simulation.surface_batie|floatformat:0 }}</div>
                <div class="details-cell">{{ simulation.cout_second_oeuvre|div:simulation.cout_total|mul:100|floatformat:1 }}%</div>
            </div>
            {% if simulation.cout_ascenseur > 0 %}
            <div class="details-row">
                <div class="details-cell">🛗 Ascenseur<br><small>(Installation complète)</small></div>
                <div class="details-cell">{{ simulation.cout_ascenseur|floatformat:0 }}</div>
                <div class="details-cell">-</div>
                <div class="details-cell">{{ simulation.cout_ascenseur|div:simulation.cout_total|mul:100|floatformat:1 }}%</div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Total avec mise en valeur -->
    <div class="total-section">
        <h2>💎 COÛT TOTAL ESTIMÉ</h2>
        <div class="total-amount">{{ simulation.cout_total|floatformat:0 }} FCFA</div>
        <p><strong>Soit {{ simulation.prix_m2|floatformat:0 }} FCFA/m²</strong></p>
        <p><em>Finition {{ simulation.standing }} - {{ simulation.surface_batie }} m² utiles</em></p>
        <hr style="border-color: #1e1810; margin: 15px 0;">
        <p style="font-size: 14px;"><strong>📅 Durée de construction estimée : 8-12 mois</strong></p>
    </div>

    <!-- Options supplémentaires -->
    {% if simulation.options_sans_prix %}
    <div class="section">
        <div class="section-title">⚙️ OPTIONS SUPPLÉMENTAIRES DEMANDÉES</div>
        <p><strong>Les prestations suivantes nécessitent une étude technique approfondie :</strong></p>
        <ul class="options-list">
            {% for option in simulation.options_sans_prix %}
            <li>✨ {{ option }} <em>(Devis sur mesure après étude)</em></li>
            {% endfor %}
        </ul>
        <div class="contact-info">
            <p><strong>📞 Contactez-nous pour un chiffrage personnalisé de ces options</strong></p>
        </div>
    </div>
    {% endif %}

    <!-- Étapes suivantes -->
    <div class="next-steps">
        <h3>🚀 PROCHAINES ÉTAPES</h3>
        <ol style="padding-left: 20px;">
            <li><strong>Rendez-vous sur site</strong> - Visite technique gratuite de votre terrain</li>
            <li><strong>Étude de faisabilité</strong> - Analyse du sol et contraintes techniques</li>
            <li><strong>Conception des plans</strong> - Création de plans personnalisés</li>
            <li><strong>Devis définitif</strong> - Présentation du devis final détaillé</li>
            <li><strong>Signature du contrat</strong> - Formalisation de notre partenariat</li>
            <li><strong>Lancement des travaux</strong> - Début de la construction</li>
        </ol>
        
        <div style="margin-top: 20px; padding: 15px; background: rgba(249, 195, 73, 0.2); border-radius: 6px;">
            <p style="margin: 0; font-weight: bold; color: #F9C349;">
                💡 Profitez de notre offre : Étude de faisabilité GRATUITE pour tout devis confirmé !
            </p>
        </div>
    </div>

    <!-- Conditions et garanties -->
    <div class="section">
        <div class="section-title">📋 CONDITIONS & GARANTIES ECOLUX</div>
        <div class="info-grid">
            <div class="info-row">
                <div class="info-label">Validité du devis:</div>
                <div class="info-value">45 jours à compter de cette date</div>
            </div>
            <div class="info-row">
                <div class="info-label">Garantie décennale:</div>
                <div class="info-value">✅ Incluse (assurance tous risques chantier)</div>
            </div>
            <div class="info-row">
                <div class="info-label">Suivi de chantier:</div>
                <div class="info-value">✅ Chef de projet dédié + rapports hebdomadaires</div>
            </div>
            <div class="info-row">
                <div class="info-label">Modalités de paiement:</div>
                <div class="info-value">Échelonnement personnalisé selon avancement</div>
            </div>
            <div class="info-row">
                <div class="info-label">Délai de livraison:</div>
                <div class="info-value">Contractuellement garanti</div>
            </div>
        </div>
    </div>

    <!-- Disclaimers importants -->
    <div class="disclaimer">
        <h3 style="color: #1e1810; margin-top: 0;">⚠️ INFORMATIONS IMPORTANTES</h3>
        <p><strong>Cette estimation personnalisée est basée sur vos spécifications et comprend :</strong></p>
        <ul style="margin: 10px 0; padding-left: 20px;">
            <li>Matériaux de qualité selon le standing choisi</li>
            <li>Main d'œuvre qualifiée et encadrement technique</li>
            <li>Marge de sécurité pour aléas techniques (5-10%)</li>
            <li>Respect des normes de construction en vigueur</li>
        </ul>
        
        <p><strong>Le devis définitif pourra varier selon :</strong></p>
        <ul style="margin: 10px 0; padding-left: 20px;">
            <li>Les résultats de l'étude géotechnique du sol</li>
            <li>Les contraintes d'accès et de transport</li>
            <li>Les spécifications techniques finales</li>
            <li>L'évolution des prix des matériaux</li>
        </ul>
        
        <p style="font-weight: bold; text-align: center; margin-top: 20px; color: #1e1810;">
            📞 Une question ? Notre équipe technique est à votre disposition !
        </p>
    </div>

    <!-- Pied de page enrichi -->
    <div class="footer">
        <p><strong>ECOLUX BTP - "Le nec plus ultra de l'habitat"</strong></p>
        <p style="font-size: 12px; margin: 10px 0;">Entreprise générale de bâtiment • Licence professionnelle N° XXX</p>
        
        <div style="display: table; width: 100%; margin: 15px 0;">
            <div style="display: table-cell; width: 50%; text-align: left;">
                <p style="margin: 5px 0;"><strong>📞 Contacts :</strong></p>
                <p style="margin: 3px 0;">+221 77 177 52 45 (WhatsApp)</p>
                <p style="margin: 3px 0;">📧 contact@ecolux-btp.com</p>
            </div>
            <div style="display: table-cell; width: 50%; text-align: right;">
                <p style="margin: 5px 0;"><strong>🌐 Suivez-nous :</strong></p>
                <p style="margin: 3px 0;">www.ecolux-btp.com</p>
                <p style="margin: 3px 0;">📍 Dakar, Sénégal</p>
            </div>
        </div>
        
        <hr style="border-color: #F9C349; margin: 15px 0;">
        <p style="font-size: 10px;">
            Devis personnalisé généré le {{ today|date:"d/m/Y à H:i" }} | 
            Référence : DEV-{{ simulation.id }} | 
            Valable jusqu'au {{ today|add_days:45|date:"d/m/Y" }}
        </p>
    </div>
</body>
</html>
