<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estimation 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: #1e1810;
            color: #F8F7F3;
            padding: 15px;
            margin: -20mm -15mm 15px -15mm;
            text-align: center;
            border-bottom: 3px solid #F9C349;
        }
        
        .header h1 {
            font-size: 20px;
            font-weight: bold;
            margin: 0 0 8px 0;
            color: #F9C349;
        }
        
        .header p {
            margin: 3px 0;
            font-size: 12px;
        }
        
        .section {
            background: #F8F7F3;
            border: 1px solid #F9C349;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 15px;
        }
        
        .section-title {
            color: #1e1810;
            font-size: 14px;
            font-weight: bold;
            border-bottom: 1px solid #F9C349;
            padding-bottom: 6px;
            margin-bottom: 10px;
        }
        
        .info-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 15px;
        }
        
        .info-table td {
            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.1);
            width: 40%;
        }
        
        .info-value {
            background-color: rgba(248, 247, 243, 0.8);
        }
        
        .total-section {
            background: #F9C349;
            color: #1e1810;
            text-align: center;
            padding: 15px;
            border-radius: 6px;
            margin: 15px 0;
        }
        
        .total-section h2 {
            font-size: 16px;
            margin: 0 0 8px 0;
        }
        
        .total-amount {
            font-size: 22px;
            font-weight: bold;
            margin: 8px 0;
        }
        
        .details-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        
        .details-table td {
            padding: 8px;
            text-align: center;
            border: 1px solid #1e1810;
            font-weight: bold;
        }
        
        .details-header {
            background: rgba(249, 195, 73, 0.2);
        }
        
        .footer {
            background: #1e1810;
            color: #F8F7F3;
            padding: 15px;
            margin: 30px -15mm -20mm -15mm;
            text-align: center;
            font-size: 11px;
        }
        
        .disclaimer {
            background: rgba(249, 195, 73, 0.1);
            border: 1px solid #F9C349;
            border-radius: 6px;
            padding: 15px;
            margin: 20px 0;
            font-style: italic;
        }
        
        .logo {
            font-size: 20px;
            font-weight: bold;
            color: #F9C349;
        }
        
        .options-list {
            list-style: none;
            padding: 0;
        }
        
        .options-list li {
            background: rgba(249, 195, 73, 0.1);
            padding: 8px 12px;
            margin: 5px 0;
            border-radius: 4px;
            border-left: 4px solid #F9C349;
        }
    </style>
</head>
<body>
    <!-- En-tête -->
    <div class="header">
        <div class="logo">🏗️ ECOLUX BTP</div>
        <h1>ESTIMATION DE PROJET</h1>
        <p><strong>"Le nec plus ultra de l'habitat"</strong></p>
        <p>Date: {{ today|date:"d/m/Y" }} | Réf: EST-{{ simulation.id }}</p>
    </div>

    <!-- Informations client -->
    <div class="section">
        <div class="section-title">📋 INFORMATIONS CLIENT</div>
        <table class="info-table">
            <tr>
                <td class="info-label">Nom complet:</td>
                <td class="info-value">{{ simulation.customer.full_name }}</td>
            </tr>
            <tr>
                <td class="info-label">Email:</td>
                <td class="info-value">{{ simulation.customer.email }}</td>
            </tr>
            <tr>
                <td class="info-label">Téléphone:</td>
                <td class="info-value">{{ simulation.customer.phone }}</td>
            </tr>
            {% if simulation.localisation_projet %}
            <tr>
                <td class="info-label">Localisation:</td>
                <td class="info-value">{{ simulation.localisation_projet }}</td>
            </tr>
            {% endif %}
        </table>
    </div>

    <!-- Caractéristiques du projet -->
    <div class="section">
        <div class="section-title">🏗️ CARACTÉRISTIQUES DU PROJET</div>
        <table class="info-table">
            <tr>
                <td class="info-label">Type de projet:</td>
                <td class="info-value">{{ simulation.project_type }}</td>
            </tr>
            <tr>
                <td class="info-label">Standing:</td>
                <td class="info-value">{{ simulation.standing }}</td>
            </tr>
            <tr>
                <td class="info-label">Hauteur:</td>
                <td class="info-value">{{ simulation.niveau }}</td>
            </tr>
            <tr>
                <td class="info-label">Région:</td>
                <td class="info-value">{{ simulation.region }}</td>
            </tr>
            <tr>
                <td class="info-label">Surface terrain:</td>
                <td class="info-value">{{ simulation.surface_terrain }} m²</td>
            </tr>
            <tr>
                <td class="info-label">Surface construite:</td>
                <td class="info-value">{{ simulation.surface_batie }} m²</td>
            </tr>
            <tr>
                <td class="info-label">Ascenseur:</td>
                <td class="info-value">{% if simulation.ascenseur %}Oui{% else %}Non{% endif %}</td>
            </tr>
            <tr>
                <td class="info-label">Type de fondation:</td>
                <td class="info-value">{{ simulation.fondation_choice }}</td>
            </tr>
        </table>
    </div>

    <!-- Détails des coûts -->
    <div class="section">
        <div class="section-title">💰 DÉTAIL DES COÛTS</div>
        <table class="details-table">
            <tr class="details-header">
                <td>Poste</td>
                <td>Montant (FCFA)</td>
            </tr>
            <tr>
                <td>🏗️ Gros Œuvre</td>
                <td>{{ cout_gros_oeuvre_formatted }}</td>
            </tr>
            <tr>
                <td>🎨 Second Œuvre</td>
                <td>{{ cout_second_oeuvre_formatted }}</td>
            </tr>
            {% if simulation.cout_ascenseur > 0 %}
            <tr>
                <td>🛗 Ascenseur</td>
                <td>{{ cout_ascenseur_formatted }}</td>
            </tr>
            {% endif %}
        </table>
    </div>

    <!-- Total du projet -->
    <div class="total-section">
        <h2>💎 COÛT TOTAL DU PROJET</h2>
        <div class="total-amount">{{ cout_total_formatted }} FCFA</div>
        <p><em>Standing {{ simulation.standing }} - {{ simulation.surface_batie }} m²</em></p>
    </div>

    <!-- Avertissements et disclaimers -->
    <div class="disclaimer">
        <p><strong>⚠️ IMPORTANT :</strong></p>
        <p>• Cette estimation est indicative et basée sur les paramètres saisis.</p>
        <p>• Le devis définitif sera établi après visite technique et étude de sol.</p>
        <p>• Validité de l'estimation : 30 jours à compter de la date d'émission.</p>
    </div>

    <!-- Pied de page -->
    <div class="footer">
        <p><strong>ECOLUX BTP - "Le nec plus ultra de l'habitat"</strong></p>
        <p>📞 +221 77 996 26 26 | 📧 contact.ecolux@gmail.com</p>
        <p>📍 Dakar, Sénégal</p>
        <p style="font-size: 10px; margin-top: 10px;">Estimation générée le {{ today|date:"d/m/Y à H:i" }} | Réf: EST-{{ simulation.id }}</p>
    </div>
</body>
</html>
