<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Estudio de ahorro Energético personalizado - {{ invoice_data.client_name }}</title>
    <base href="{{ request.url_root }}">
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.38;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 12px;
        }
        
        .header {
            background: linear-gradient(135deg, #b401f5, #ed1794);
            color: white;
            padding: 14px;
            border-radius: 10px;
            margin-bottom: 16px;
        }
        
        .header-content {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .logo {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
        }
        
        .header-text {
            flex: 1;
        }
        
        .header-text h1 {
            margin: 0 0 5px 0;
            font-size: 24px;
        }
        
        .header-text p {
            margin: 0;
            font-size: 14px;
            opacity: 0.9;
        }
        
        .commercial-info, .client-info {
            background-color: #f8f9fa;
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 12px;
            border-left: 4px solid #0b99fd;
        }
        
        .advisor-content {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .advisor-info {
            flex: 1;
        }
        
        .advisor-photo {
            flex-shrink: 0;
        }
        
        .advisor-image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #0b99fd;
        }
        
        .client-info {
            background: #f8f9fa;
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 12px;
        }
        /* Igualar padding con Datos del Cliente */
        .commercial-info { padding: 12px; }
        
        .plan-card {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            margin-bottom: 18px;
            overflow: hidden;
            page-break-before: always;
            page-break-inside: avoid;
        }
        .plan-card:first-child {
            page-break-before: auto;
        }
         
        .plan-header {
            background: #0b99fd;
            color: white;
            padding: 8px 12px;
            border-radius: 5px;
            margin-bottom: 12px;
        }
        
        .savings {
            background: #b401f5;
            color: white;
            padding: 8px;
            border-radius: 5px;
            text-align: center;
            margin: 6px 0;
            font-weight: bold;
            font-size: 16px;
        }
        
        .cost {
            background: #17a2b8;
            color: white;
            padding: 8px;
            border-radius: 5px;
            text-align: center;
            margin: 6px 0;
            font-weight: bold;
            font-size: 16px;
        }
        
        .price-table {
            width: 100%;
            border-collapse: collapse;
            margin: 6px 0;
        }
        
        .price-table th {
            background: #6c757d;
            color: white;
            padding: 6px;
            text-align: left;
        }
        
        .price-table td {
            padding: 6px;
            border-bottom: 1px solid #dee2e6;
        }
        
        .footer {
            margin-top: 18px;
            padding-top: 12px;
            border-top: 2px solid #dee2e6;
            text-align: center;
            color: #6c757d;
        }
        
        h1, h2, h3 {
            color: #0b99fd;
        }
        
        .text-center { text-align: center; }
        .mb-20 { margin-bottom: 14px; }

        /* Unificar margen de títulos en tarjetas */
        .commercial-info h3, .client-info h3 {
            margin: 0 0 8px 0;
        }

        /* Nota del asesor (primera página) */
        .advisor-note {
            background: #6d28d9; /* morado sólido legible en PDF */
            color: #ffffff;
            padding: 10px 12px;
            border-radius: 8px;
            margin: 12px 0;
        }
        .advisor-note h3 {
            margin: 0 0 6px 0;
            color: #ffffff;
            font-size: 16px;
        }
        .advisor-note .note-text {
            margin: 0;
            font-style: italic;
            font-size: 14px;
        }
        /* Salto de página forzado */
        .page-break {
            page-break-before: always;
        }

        /* Reglas de impresión para consistencia */
        @page { size: A4; margin: 12mm; }
        @media print {
            html, body { margin: 0; padding: 0; }
            * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
            .header, .commercial-info, .client-info, .advisor-note, .plan-card, .company-info-page { page-break-inside: avoid; break-inside: avoid; }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-content">
            <img src="{{ url_for('static', filename='img/LOGO-OLE-CONTULTING-COLOR.png', _external=True) }}" alt="OLE Consulting" style="width: 120px; height: auto; margin-bottom: 10px;">
            <div class="header-text">
                <h1 style="color: #000000; margin: 0; font-size: 32px;">Estudio de ahorro Energético personalizado</h1>
                <p>OLE Consulting - Expertos en Ahorro Energético</p>
            </div>
        </div>
    </div>

    <!-- Información del Comercial -->
    <div class="commercial-info">
        <h3>Asesor Energético</h3>
        <div class="advisor-content">
            <div class="advisor-photo">
                <img src="{{ advisor_image_url }}" alt="{{ commercial.first_name }} {{ commercial.last_name }}" class="advisor-image">
            </div>
            <div class="advisor-info">
                <p><strong>Nombre:</strong> {{ commercial.first_name }} {{ commercial.last_name }}</p>
                <p><strong>Email:</strong> {{ commercial.email }}</p>
            </div>
        </div>
    </div>

    {# Variables auxiliares para email/teléfono y costes #}
    {% set client_email = invoice_data.get('client_email') %}
    {% set client_phone = invoice_data.get('client_phone') %}
    {% set current_annual = invoice_data.get('current_annual_cost') %}
    {% set current_monthly_cost = (current_annual/12) if current_annual else 0 %}

    <!-- Información del Cliente -->
    <div class="client-info">
        <h3>Datos del Cliente</h3>
        <p><strong>Nombre:</strong> {{ invoice_data.get('client_name', 'N/A') }}</p>
        <p><strong>Email:</strong> {{ invoice_data.get('client_email', 'N/A') }}</p>
        <p><strong>Teléfono:</strong> {{ invoice_data.get('client_phone', 'N/A') }}</p>
    </div>

    <!-- Información del Suministro -->
    <div class="client-info">
        <h3>Datos del Suministro</h3>
        <p><strong>Dirección:</strong> {{ invoice_data.get('supply_address', 'N/A') }}</p>
        <p><strong>CUPS:</strong> {{ invoice_data.get('cups', 'N/A') }}</p>
        <p><strong>Tarifa:</strong> {{ invoice_data.get('tariff_type', 'N/A') }}</p>
        <p><strong>Consumo Anual:</strong> {% if invoice_data.get('annual_consumption') %}{{ "%.0f"|format(invoice_data.get('annual_consumption')) }} kWh{% else %}N/A{% endif %}</p>
        <p><strong>Coste Mensual Actual:</strong> {% if current_monthly_cost > 0 %}{{ "%.2f"|format(current_monthly_cost) }}€/mes{% else %}N/A{% endif %}</p>
        <p><strong>Comercializadora:</strong> {{ invoice_data.get('provider_name', 'N/A') }}</p>
    </div>

    {% if proposal_data.custom_comment %}
    <!-- Segunda página para la nota del asesor con header -->
    <div class="page-break"></div>
    <div class="header">
        <div class="header-content">
            <img src="{{ url_for('static', filename='img/LOGO-OLE-CONTULTING-COLOR.png', _external=True) }}" alt="OLE Consulting" style="width: 120px; height: auto; margin-bottom: 10px;">
            <div class="header-text">
                <h1 style="color: #000000; margin: 0; font-size: 32px;">Estudio de ahorro Energético personalizado</h1>
                <p>OLE Consulting - Expertos en Ahorro Energético</p>
            </div>
        </div>
    </div>
    <div class="advisor-note">
        <h3>Nota de tu asesor</h3>
        <p class="note-text">"{{ proposal_data.custom_comment }}"</p>
    </div>
    {% endif %}

    {% for plan in proposal_data.selected_plans %}
    <div class="plan-card">
        <h2 class="text-center mb-20">Plan Recomendado</h2>
        <div class="plan-header">
            <h3 style="margin: 0; color: white;">{{ plan.get('provider', plan.get('supplier', 'Comercializadora')) }}</h3>
            <p style="margin: 5px 0 0 0; opacity: 0.9;">Propuesta energética personalizada</p>
        </div>

        <div class="savings">
            AHORRO ANUAL: {{ "%.0f"|format(plan.get('yearly_savings', plan.get('annual_savings', 0))) }}€
        </div>
        
        <div class="cost">
            NUEVO COSTE MENSUAL: {{ "%.2f"|format(plan.get('ole_cost', plan.get('new_total_cost', plan.get('monthly_cost', 0)))) }}€
        </div>

        <!-- Precios de Energía -->
        <h4>Precios de Energía (€/kWh)</h4>
        <table class="price-table">
            <thead>
                <tr>
                    <th>Período</th>
                    <th>Precio</th>
                </tr>
            </thead>
            <tbody>
                {% for period, price in plan.get('energy_prices', {}).items() %}
                <tr>
                    <td>{{ period }}</td>
                    <td>{{ "%.6f"|format(price) }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <!-- Precios de Potencia -->
        <h4>Precios de Potencia (€/kW/día)</h4>
        <table class="price-table">
            <thead>
                <tr>
                    <th>Período</th>
                    <th>Precio</th>
                </tr>
            </thead>
            <tbody>
                {% for period, price in plan.get('power_prices', {}).items() %}
                <tr>
                    <td>{{ period }}</td>
                    <td>{{ "%.6f"|format(price) }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <p><strong>Permanencia:</strong> {{ plan.get('permanence', 'Sin permanencia') }}</p>
        <p><strong>Tipo de Tarifa:</strong> {{ plan.get('tariff_type', 'Fija') }}</p>
        <p><strong>Duración del Plan:</strong> {{ plan.get('duration', plan.get('plan_duration', '12 meses')) }}</p>
        <p><strong>Nota:</strong> El presente estudio de ahorro solo considera precios de energia y potencia, no se esta considerando costes fuera de nuestro poder comerciales como los son impuestos, cargos de peajes, alquiler de contador, etc.</p>
    </div>
    {% endfor %}

    <!-- Página final con información de la empresa -->
    <div class="company-info-page" style="page-break-before: always; padding: 24px 16px; text-align: center;">
        <div class="company-header" style="margin-bottom: 24px;">
            <img src="{{ url_for('static', filename='img/LOGO-OLE-CONTULTING-COLOR.png', _external=True) }}" alt="OLE Consulting" style="width: 120px; height: auto; margin-bottom: 10px;">
            <h2 style="color: #0b99fd; margin: 0; font-size: 32px;">OLE CONSULTING</h2>
            <p style="color: #666; font-size: 18px; margin: 10px 0;">Tu socio estratégico en asesoría energética</p>
        </div>
        
        <div class="company-description" style="max-width: 600px; margin: 0 auto; text-align: justify; line-height: 1.5; font-size: 16px; color: #333;">
            <p>En <strong>OLÉ CONSULTING</strong>, somos tu socio estratégico en asesoría y consultoría energética. Nos especializamos en optimizar tus recursos y garantizar el cumplimiento normativo.</p>
            
            <p>Nuestras soluciones están diseñadas para generar un <strong>ahorro tangible</strong> y un <strong>crecimiento sostenible</strong>, ayudándote a mejorar la eficiencia de tu negocio.</p>
            
            <p>Con años de experiencia en el sector energético, nuestro equipo de expertos te acompaña en cada paso del proceso, desde el análisis inicial hasta la implementación de las mejores tarifas del mercado.</p>
            
            <p style="text-align: center; margin-top: 20px; font-weight: bold; color: #0b99fd;">¡Tu ahorro tu ahorro energético, nuestra prioridad!</p>
        </div>
    </div>

    <div class="footer">
        <p><strong>OLE Consulting</strong> - Consultoría Energética</p>
        <p>Fecha: {{ current_date }}</p>
        <p style="font-size: 12px; margin-top: 8px;">
            <strong>Nota:</strong> Esta propuesta es válida durante la fecha informada por las comercializadoras. Los precios pueden estár sujetos a cambios repentinos según las condiciones del mercado.
        </p>
    </div>
</body>
</html>
