{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="section confirm-tariff-section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10 col-lg-8">
                <div class="tariff-confirmation-card">
                    <div class="card-header">
                        <h1>Confirma los datos de tu factura</h1>
                        <p class="subtitle">Para ofrecerte un cálculo preciso, hemos extraído estos datos de tu factura. Por favor, revísalos y corrige lo necesario.</p>
                    </div>
                    
                    <div class="card-body">
                        <form method="POST" action="{{ url_for('invoice.confirm_tariff') }}">
                            <!-- Datos generales -->
                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0">Datos generales</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label for="client_name" class="form-label">Nombre del titular</label>
                                            <input type="text" class="form-control" id="client_name" name="client_name" value="{{ detection.client_name or '' }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="cups" class="form-label">CUPS</label>
                                            <input type="text" class="form-control" id="cups" name="cups" value="{{ detection.cups or '' }}">
                                        </div>
                                        <div class="col-12">
                                            <label for="supply_address" class="form-label">Dirección de suministro</label>
                                            <input type="text" class="form-control" id="supply_address" name="supply_address" value="{{ detection.supply_address or '' }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="provider_name" class="form-label">Comercializadora actual</label>
                                            <input type="text" class="form-control" id="provider_name" name="provider_name" value="{{ detection.provider_name or '' }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="invoice_date" class="form-label">Fecha factura</label>
                                            <input type="text" class="form-control" id="invoice_date" name="invoice_date" value="{{ detection.invoice_date or '' }}">
                                        </div>
                                        <div class="col-md-5">
                                            <label for="billing_start_date" class="form-label">Inicio periodo</label>
                                            <input type="text" class="form-control" id="billing_start_date" name="billing_start_date" value="{{ detection.billing_start_date or '' }}">
                                        </div>
                                        <div class="col-md-5">
                                            <label for="billing_end_date" class="form-label">Fin periodo</label>
                                            <input type="text" class="form-control" id="billing_end_date" name="billing_end_date" value="{{ detection.billing_end_date or '' }}">
                                        </div>
                                        <div class="col-md-2">
                                            <label for="billing_days" class="form-label">Días</label>
                                            <input type="text" class="form-control" id="billing_days" name="billing_days" value="{{ detection.billing_days or '' }}">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Tipo de peaje -->
                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0">Tipo de peaje</h5>
                                </div>
                                <div class="card-body">
                                    <div class="tariff-options">
                                        <div class="tariff-option">
                                            <input type="radio" name="tariff_type" id="tariff_2_0" value="2.0TD" 
                                                   {% if detection.tariff == '2.0TD' %}checked{% endif %}>
                                            <label for="tariff_2_0">
                                                <span class="tariff-name">2.0TD</span>
                                                <span class="tariff-description">Para hogares y pequeños negocios con potencia ≤ 15 kW</span>
                                            </label>
                                        </div>
                                        
                                        <div class="tariff-option">
                                            <input type="radio" name="tariff_type" id="tariff_3_0" value="3.0TD" 
                                                   {% if detection.tariff == '3.0TD' %}checked{% endif %}>
                                            <label for="tariff_3_0">
                                                <span class="tariff-name">3.0TD</span>
                                                <span class="tariff-description">Para empresas con potencia > 15 kW en baja tensión</span>
                                            </label>
                                        </div>
                                        
                                        <div class="tariff-option">
                                            <input type="radio" name="tariff_type" id="tariff_6_1" value="6.1TD" 
                                                   {% if detection.tariff == '6.1TD' %}checked{% endif %}>
                                            <label for="tariff_6_1">
                                                <span class="tariff-name">6.1TD</span>
                                                <span class="tariff-description">Para consumos industriales en media o alta tensión (≥ 1kV)</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Potencias contratadas -->
                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0">Potencias contratadas (kW)</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        {% for period in ['P1', 'P2', 'P3', 'P4', 'P5', 'P6'] %}
                                            {% if period in detection.power_periods or not detection.power_periods %}
                                            <div class="col-md-4 col-lg-2">
                                                <label for="power_periods_{{ period }}" class="form-label">{{ period }}</label>
                                                <input type="text" class="form-control" id="power_periods_{{ period }}" name="power_periods_{{ period }}" value="{{ detection.power_periods[period] if detection.power_periods and period in detection.power_periods else '' }}">
                                            </div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>

                            <!-- Precios de potencia -->
                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0">Precios de potencia (€/kW/{% if detection.power_price_unit %}{{ detection.power_price_unit }}{% else %}año{% endif %})</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        {% for period in ['P1', 'P2', 'P3', 'P4', 'P5', 'P6'] %}
                                            {% if period in detection.power_prices or not detection.power_prices %}
                                            <div class="col-md-4 col-lg-2">
                                                <label for="power_prices_{{ period }}" class="form-label">{{ period }}</label>
                                                <input type="text" class="form-control" id="power_prices_{{ period }}" name="power_prices_{{ period }}" value="{{ detection.power_prices[period] if detection.power_prices and period in detection.power_prices else '' }}">
                                            </div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>

                            <!-- Consumos de energía -->
                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0">Consumos de energía (kWh)</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        {% for period in ['P1', 'P2', 'P3', 'P4', 'P5', 'P6'] %}
                                            {% if period in detection.energy_consumption or not detection.energy_consumption %}
                                            <div class="col-md-4 col-lg-2">
                                                <label for="energy_consumption_{{ period }}" class="form-label">{{ period }}</label>
                                                <input type="text" class="form-control" id="energy_consumption_{{ period }}" name="energy_consumption_{{ period }}" value="{{ detection.energy_consumption[period] if detection.energy_consumption and period in detection.energy_consumption else '' }}">
                                            </div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>

                            <!-- Precios de energía -->
                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0">Precios de energía (€/kWh)</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        {% for period in ['P1', 'P2', 'P3', 'P4', 'P5', 'P6'] %}
                                            {% if period in detection.energy_prices or not detection.energy_prices %}
                                            <div class="col-md-4 col-lg-2">
                                                <label for="energy_prices_{{ period }}" class="form-label">{{ period }}</label>
                                                <input type="text" class="form-control" id="energy_prices_{{ period }}" name="energy_prices_{{ period }}" value="{{ detection.energy_prices[period] if detection.energy_prices and period in detection.energy_prices else '' }}">
                                            </div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>

                            <!-- Energía reactiva -->
                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0">Energía reactiva (kVArh)</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        {% for period in ['P1', 'P2', 'P3', 'P4', 'P5', 'P6'] %}
                                            {% if period in detection.reactive_energy or not detection.reactive_energy %}
                                            <div class="col-md-4 col-lg-2">
                                                <label for="reactive_energy_{{ period }}" class="form-label">{{ period }}</label>
                                                <input type="text" class="form-control" id="reactive_energy_{{ period }}" name="reactive_energy_{{ period }}" value="{{ detection.reactive_energy[period] if detection.reactive_energy and period in detection.reactive_energy else '' }}">
                                            </div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>

                            <!-- Precios de energía reactiva -->
                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0">Precios de energía reactiva (€/kVArh)</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        {% for period in ['P1', 'P2', 'P3', 'P4', 'P5', 'P6'] %}
                                            {% if period in detection.reactive_energy_prices or not detection.reactive_energy_prices %}
                                            <div class="col-md-4 col-lg-2">
                                                <label for="reactive_energy_prices_{{ period }}" class="form-label">{{ period }}</label>
                                                <input type="text" class="form-control" id="reactive_energy_prices_{{ period }}" name="reactive_energy_prices_{{ period }}" value="{{ detection.reactive_energy_prices[period] if detection.reactive_energy_prices and period in detection.reactive_energy_prices else '' }}">
                                            </div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>

                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary btn-lg">Confirmar datos y calcular ahorro <i class="fas fa-arrow-right ms-2"></i></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_styles %}
<style>
    .confirm-tariff-section {
        padding-top: 150px;
        padding-bottom: 60px;
    }
    
    .tariff-confirmation-card {
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    
    .detection-data-item {
        margin-top: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #eaeaea;
        padding-bottom: 10px;
    }
    
    .detection-data-item .label {
        font-weight: 600;
        margin-right: 10px;
        color: #555;
    }
    
    .detection-data-section {
        margin-top: 20px;
        padding: 15px;
        background-color: #f9f9f9;
        border-radius: 8px;
        border: 1px solid #eaeaea;
    }
    
    .detection-data-section h3 {
        font-size: 1rem;
        margin-bottom: 15px;
        color: #333;
    }
    
    .data-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }
    
    .data-grid-item {
        background-color: white;
        padding: 10px;
        border-radius: 6px;
        border: 1px solid #eee;
        text-align: center;
    }
    
    .period-label {
        display: block;
        font-weight: 600;
        color: #c206dc; /* Color primario */
        margin-bottom: 5px;
    }
    
    .period-value {
        display: block;
        font-size: 0.9rem;
    }
    
    .card-header {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        color: #fff;
        padding: 25px 30px;
    }
    
    .card-header h1 {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }
    
    .card-header .subtitle {
        opacity: 0.85;
        margin: 0;
    }
    
    .card-body {
        padding: 30px;
    }
    
    .detection-info {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 30px;
    }
    
    .tariff-explainer h2 {
        font-size: 1.4rem;
        margin-bottom: 20px;
        color: #333;
    }
    
    .tariff-options {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 25px;
    }
    
    .tariff-option {
        position: relative;
    }
    
    .tariff-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .tariff-option label {
        display: flex;
        flex-direction: column;
        padding: 15px 20px;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }
    
    .tariff-option input[type="radio"]:checked + label {
        border-color: var(--primary-color);
        background-color: rgba(var(--primary-rgb), 0.05);
    }
    
    .tariff-name {
        font-size: 1.2rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
    }
    
    .tariff-description {
        font-size: 0.9rem;
        color: #666;
    }
    
    .tariff-info-box {
        display: flex;
        align-items: flex-start;
        background-color: #e8f4ff;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 30px;
    }
    
    .tariff-info-box i {
        color: #0d6efd;
        font-size: 1.2rem;
        margin-right: 10px;
        margin-top: 2px;
    }
    
    .tariff-info-box p {
        margin: 0;
        font-size: 0.9rem;
    }
    
    .submit-area {
        display: flex;
        justify-content: center;
    }
    
    .submit-area button {
        min-width: 200px;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        border: none;
        transition: all 0.3s ease;
    }
    
    .submit-area button:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .submit-area button i {
        margin-left: 8px;
    }
    
    /* Responsive */
    @media (max-width: 767px) {
        .confirm-tariff-section {
            padding-top: 80px;
        }
        
        .card-header {
            padding: 20px;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .tariff-explainer h2 {
            font-size: 1.2rem;
        }
    }
</style>
{% endblock %}