{% extends "base.html" %}

{% block title %}Selección de Planes{% endblock %}

{% block styles %}
<style>
    /* Estilos generales */
    .plans-selection-section {
        padding: 48px 0;
    }
    .plans-container {
        max-width: 1200px;
        margin: 0 auto;
        background-color: #ffffff;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        padding: 40px;
        position: relative;
    }
    @media (max-width: 767px) {
        .plans-container {
            padding: 24px;
        }
    }
    
    /* Cabecera */
    .section-header {
        margin-bottom: 32px;
        text-align: center;
    }
    .section-title {
        font-size: 32px;
        font-weight: 600;
        color: #111;
        margin-bottom: 12px;
    }
    .section-subtitle {
        font-size: 18px;
        color: #6B7280;
    }
    
    /* Información del cliente */
    .client-info {
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #f0f0f0;
    }
    .client-cups {
        font-size: 0.85rem;
        color: #6B7280;
        font-family: monospace;
        letter-spacing: 1px;
    }
    
    /* Tarjetas de planes */
    .plans-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 24px;
        margin-bottom: 32px;
    }
    .plan-card {
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        border: 1px solid #e0e0e0;
    }
    .plan-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }
    .plan-card.best-offer {
        border: 2px solid #c206dc;
    }
    .best-offer-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #c206dc;
        color: white;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        z-index: 10;
    }
    .plan-header {
        padding: 20px;
        background-color: #f8f9fa;
        border-bottom: 1px solid #e0e0e0;
    }
    .plan-name {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;
    }
    .plan-supplier {
        font-size: 14px;
        color: #6B7280;
    }
    .plan-body {
        padding: 20px;
    }
    .plan-feature {
        margin-bottom: 16px;
    }
    .feature-label {
        font-size: 14px;
        color: #6B7280;
        margin-bottom: 4px;
    }
    .feature-value {
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }
    .plan-savings {
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid #e0e0e0;
        text-align: center;
    }
    .savings-amount {
        font-size: 28px;
        font-weight: 600;
        color: #c206dc;
    }
    .savings-label {
        font-size: 14px;
        color: #6B7280;
        margin-bottom: 4px;
    }
    .savings-percentage {
        font-size: 18px;
        font-weight: 600;
        color: #c206dc;
        margin-top: 4px;
    }
    .plan-footer {
        padding: 20px;
        background-color: #f8f9fa;
        text-align: center;
        border-top: 1px solid #e0e0e0;
    }
    .btn-select-plan {
        display: inline-block;
        background-color: #c206dc;
        color: white;
        border: none;
        border-radius: 6px;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }
    .btn-select-plan:hover {
        background-color: #a005b8;
        color: white;
    }
    
    /* Tarjeta de explicación */
    .explanation-card {
        background-color: #f0f7ff;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 32px;
    }
    .explanation-header {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
    }
    .explanation-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #0d6efd;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        font-size: 18px;
    }
    .explanation-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
    }
    .explanation-content {
        font-size: 14px;
        color: #4B5563;
        line-height: 1.5;
    }
</style>
{% endblock %}

{% block content %}
<div class="section plans-selection-section">
    <div class="container">
        <div class="plans-container">
            <!-- Cabecera -->
            <div class="section-header">
                <h1 class="section-title">Selección de Planes para el Cliente</h1>
                <p class="section-subtitle">Selecciona el plan que mejor se adapte a las necesidades del cliente</p>
            </div>

            <!-- Información del cliente -->
            <div class="client-info">
                <h4>Detalles del cliente</h4>
                
                <!-- Datos confirmados del cliente/factura -->
                {% if client_name or supply_address or provider_name or cups %}
                <div class="invoice-details">
                    <style>
                        .invoice-details {
                            margin-top: 15px;
                        }
                        .detail-item {
                            display: flex;
                            margin-bottom: 6px;
                            font-size: 13px;
                            color: #555;
                        }
                        .detail-item i {
                            width: 18px;
                            margin-right: 8px;
                            color: #777;
                        }
                        .detail-label {
                            font-weight: 500;
                            margin-right: 6px;
                            min-width: 80px;
                        }
                    </style>
                    
                    {% if client_name %}
                    <div class="detail-item">
                        <i class="fas fa-user"></i>
                        <span class="detail-label">Cliente:</span>
                        <span>{{ client_name }}</span>
                    </div>
                    {% endif %}
                    
                    {% if cups %}
                    <div class="detail-item">
                        <i class="fas fa-plug"></i>
                        <span class="detail-label">CUPS:</span>
                        <span>{{ cups }}</span>
                    </div>
                    {% endif %}
                    
                    {% if supply_address %}
                    <div class="detail-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span class="detail-label">Dirección:</span>
                        <span>{{ supply_address }}</span>
                    </div>
                    {% endif %}
                    
                    {% if provider_name %}
                    <div class="detail-item">
                        <i class="fas fa-building"></i>
                        <span class="detail-label">Comercializadora:</span>
                        <span>{{ provider_name }}</span>
                    </div>
                    {% endif %}
                    
                    {% if billing_period %}
                    <div class="detail-item">
                        <i class="fas fa-calendar"></i>
                        <span class="detail-label">Periodo:</span>
                        <span>{{ billing_period }} ({{ billing_days }} días)</span>
                    </div>
                    {% endif %}
                    
                    {% if tariff_type %}
                    <div class="detail-item">
                        <i class="fas fa-tag"></i>
                        <span class="detail-label">Tarifa:</span>
                        <span>{{ tariff_type }}</span>
                    </div>
                    {% endif %}
                </div>
                {% endif %}
            </div>
            
            <!-- Tarjeta de explicación -->
            <div class="explanation-card">
                <div class="explanation-header">
                    <div class="explanation-icon">
                        <i class="fas fa-info"></i>
                    </div>
                    <h3 class="explanation-title">Comparativa de planes</h3>
                </div>
                <div class="explanation-content">
                    <p>A continuación se muestran todos los planes disponibles para este cliente basados en su consumo actual y tipo de tarifa. 
                    Todos los cálculos consideran el consumo real detectado en la factura y los precios oficiales de cada plan.</p>
                    <p>Seleccione un plan para ver los detalles completos del ahorro y presentar al cliente.</p>
                </div>
            </div>

            <!-- Tarjetas de planes -->
            <div class="plans-grid">
                {% if plans %}
                    {% for plan in plans %}
                    <div class="plan-card {% if plan.best_option %}best-offer{% endif %}">
                        {% if plan.best_option %}
                        <div class="best-offer-badge">Mejor Oferta</div>
                        {% endif %}
                        <div class="plan-header">
                            <h3 class="plan-name">{{ plan.name }}</h3>
                            <p class="plan-supplier">{{ plan.supplier }}</p>
                        </div>
                        <div class="plan-body">
                            {% if plan.total_power_kw %}
                            <div class="plan-feature">
                                <p class="feature-label">Potencia Total</p>
                                <p class="feature-value">{{ "%.1f"|format(plan.total_power_kw) }} kW</p>
                            </div>
                            {% endif %}
                            <div class="plan-feature">
                                <p class="feature-label">Precio Energía P1</p>
                                <p class="feature-value">{{ "%.6f"|format(plan.energy_prices.P1|default(0)) }} €/kWh</p>
                            </div>
                            <div class="plan-feature">
                                <p class="feature-label">Precio Potencia P1</p>
                                <p class="feature-value">{{ "%.5f"|format(plan.power_prices.P1|default(0)) }} €/kW/día</p>
                            </div>
                            <div class="plan-feature">
                                <p class="feature-label">Permanencia</p>
                                <p class="feature-value">{{ plan.contract_duration|default(12) }} meses</p>
                            </div>
                            <div class="plan-feature" style="background: #f8f9fa; padding: 8px; border-radius: 4px; margin: 8px 0;">
                                <p class="feature-label" style="font-weight: bold; color: #2563eb;">Coste mensual estimado</p>
                                <p class="feature-value" style="font-size: 1.2em; font-weight: bold; color: #2563eb;">{{ "%.2f"|format(plan.ole_cost|default(0)) }} €/mes</p>
                            </div>
                            <div class="plan-savings">
                                {% if plan.is_savings %}
                                    <p class="savings-label">Ahorro anual estimado</p>
                                    <p class="savings-amount">{{ plan.yearly_savings|round|int }} €</p>
                                    <p class="savings-percentage">{{ "%.1f"|format(plan.savings_percentage|default(0)) }}% ahorro</p>
                                {% else %}
                                    <p class="savings-label" style="color: #dc2626;">Coste adicional anual</p>
                                    <p class="savings-amount" style="color: #dc2626;">+{{ plan.yearly_loss|round|int }} €</p>
                                    <p class="savings-percentage" style="color: #dc2626;">{{ "%.1f"|format(plan.savings_percentage|default(0)) }}% más caro</p>
                                {% endif %}
                            </div>
                        </div>
                        <div class="plan-footer">
                            <a href="{{ url_for('commercial_invoice.select_plan', plan_index=loop.index0) }}" class="btn-select-plan">
                                Ver estudio
                            </a>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="col-12">
                        <div style="text-align: center; padding: 40px; color: #6B7280;">
                            <i class="fas fa-info-circle" style="font-size: 48px; margin-bottom: 16px;"></i>
                            <h4>No hay planes disponibles</h4>
                            <p>No se encontraron planes para el tipo de tarifa detectado.</p>
                            <p>Contacte con soporte técnico para más información.</p>
                        </div>
                    </div>
                {% endif %}
            </div>
            
            <!-- Botón para propuesta personalizada -->
            <div class="text-center mt-4 mb-4">
                <a href="{{ url_for('commercial_invoice.generate_proposal') }}" class="btn btn-success btn-lg">
                    <i class="fas fa-file-contract me-2"></i>Generar Propuesta Personalizada
                </a>
                <p class="text-muted mt-2 small">Selecciona múltiples planes y añade comentarios personalizados para el cliente</p>
            </div>
            
            <!-- Nota sobre personalización -->
            <div style="text-align: center; margin-top: 32px; color: #6B7280; font-size: 14px;">
                <p>Los cálculos mostrados son una estimación basada en los datos de la factura proporcionada.</p>
                <p>Para un cálculo más preciso, contacte con nuestro equipo de soporte.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Efecto hover en las tarjetas
        const planCards = document.querySelectorAll('.plan-card');
        
        planCards.forEach(card => {
            card.addEventListener('mouseover', function() {
                this.style.transform = 'translateY(-5px)';
                this.style.boxShadow = '0 8px 24px rgba(0, 0, 0, 0.1)';
            });
            
            card.addEventListener('mouseout', function() {
                this.style.transform = '';
                this.style.boxShadow = '';
            });
        });
        
        // Destacar la mejor oferta si existe
        const bestOffer = document.querySelector('.plan-card.best-offer');
        if (bestOffer) {
            bestOffer.style.animation = 'pulse 2s infinite';
        }
    });
    
    // Añadir animación de pulso
    const style = document.createElement('style');
    style.innerHTML = `
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(194, 6, 220, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(194, 6, 220, 0); }
            100% { box-shadow: 0 0 0 0 rgba(194, 6, 220, 0); }
        }
    `;
    document.head.appendChild(style);
</script>
{% endblock %}