{% extends "base.html" %}

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

{% block content %}
<div id="admin-content" class="container-fluid admin-rates-form">
    <div class="row">
        <div class="col-12 mb-4 admin-header">
            <h1>{{ title }}</h1>
        </div>
    </div>
        
        <div class="row">
            <div class="col-lg-10 offset-lg-1">
                <div class="card">
                    <div class="card-body">
                        <form method="POST" action="{% if rate %}{{ url_for('admin.edit_rate', rate_id=rate.id) }}{% else %}{{ url_for('admin.create_rate') }}{% endif %}">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="name" class="form-label">Nombre de la tarifa *</label>
                                    <input type="text" class="form-control" id="name" name="name" 
                                           value="{{ rate.name if rate else '' }}" required>
                                    <div class="form-text">Nombre identificativo para esta tarifa (ej: "Plan Estable 2025")</div>
                                </div>
                                <div class="col-md-4">
                                    <label for="supplier_id" class="form-label">Comercializadora *</label>
                                    <select class="form-select" id="supplier_id" name="supplier_id" required>
                                        <option value="">Seleccione comercializadora</option>
                                        {% for supplier in suppliers %}
                                            <option value="{{ supplier.id }}" {% if rate and rate.supplier_id == supplier.id %}selected{% endif %}>{{ supplier.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="tariff_type" class="form-label">Tipo de peaje *</label>
                                    <select class="form-select" id="tariff_type" name="tariff_type" required>
                                        <option value="">Seleccione tipo</option>
                                        <option value="2.0TD" {% if rate and rate.tariff_type == '2.0TD' %}selected{% endif %}>2.0TD (≤15kW)</option>
                                        <option value="3.0TD" {% if rate and rate.tariff_type == '3.0TD' %}selected{% endif %}>3.0TD (>15kW)</option>
                                        <option value="6.1TD" {% if rate and rate.tariff_type == '6.1TD' %}selected{% endif %}>6.1TD (Media tensión)</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <label for="valid_from" class="form-label">Válido desde</label>
                                    <input type="date" class="form-control" id="valid_from" name="valid_from"
                                           value="{{ rate.valid_from if rate else '' }}">
                                </div>
                                <div class="col-md-3">
                                    <label for="valid_until" class="form-label">Válido hasta</label>
                                    <input type="date" class="form-control" id="valid_until" name="valid_until"
                                           value="{{ rate.valid_until if rate else '' }}">
                                </div>
                                <div class="col-md-3">
                                    <label for="study_objective" class="form-label">Tipo de cliente</label>
                                    <select name="study_objective" id="study_objective" class="form-select" required>
                                        <option value="PARTICULAR" {% if rate and rate.objective == "PARTICULAR" %} selected {% endif %} >Particular</option>
                                        <option value="EMPRESA_AUTONOMO" {% if rate and rate.objective == "EMPRESA_AUTONOMO" %} selected {% endif %}>Empresa / Autonomo</option>
                                        <option value="COMUNIDAD_PROPIETARIOS" {% if rate and rate.objective == "COMUNIDAD_PROPIETARIOS" %} selected {% endif %}>Comunidad Propietarios</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="zone" class="form-label">Zona tarifaria</label>
                                    <select name="zone" id="zone" class="form-select" required>
                                        <option value="PENINSULA" {% if rate and rate.zone == "PENINSULA" %} selected {% endif %}>Península</option>
                                        <option value="BALEARES" {% if rate and rate.zone == "BALEARES" %} selected {% endif %}>Baleares</option>
                                        <option value="CANARIAS" {% if rate and rate.zone == "CANARIAS" %} selected {% endif %}>Canarias</option>
                                        <option value="CEUTA" {% if rate and rate.zone == "CEUTA" %} selected {% endif %}>Ceuta</option>
                                        <option value="MELILLA" {% if rate and rate.zone == "MELILLA" %} selected {% endif %}>Melilla</option>
                                    </select>
                                </div>
                            </div>
                            
                            <!-- Precios de energía -->
                            <h4 class="mt-4 mb-3">Precios de Energía (€/kWh)</h4>
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="energy_P1" class="form-label">P1</label>
                                    <input type="number" step="0.000001" class="form-control" id="energy_P1" name="energy_P1" 
                                           value="{{ rate.energy_prices.get('P1', '') if rate else '' }}">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="energy_P2" class="form-label">P2</label>
                                    <input type="number" step="0.000001" class="form-control" id="energy_P2" name="energy_P2" 
                                           value="{{ rate.energy_prices.get('P2', '') if rate else '' }}">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="energy_P3" class="form-label">P3</label>
                                    <input type="number" step="0.000001" class="form-control" id="energy_P3" name="energy_P3" 
                                           value="{{ rate.energy_prices.get('P3', '') if rate else '' }}">
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="energy_P4" class="form-label">P4</label>
                                    <input type="number" step="0.000001" class="form-control" id="energy_P4" name="energy_P4" 
                                           value="{{ rate.energy_prices.get('P4', '') if rate else '' }}">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="energy_P5" class="form-label">P5</label>
                                    <input type="number" step="0.000001" class="form-control" id="energy_P5" name="energy_P5" 
                                           value="{{ rate.energy_prices.get('P5', '') if rate else '' }}">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="energy_P6" class="form-label">P6</label>
                                    <input type="number" step="0.000001" class="form-control" id="energy_P6" name="energy_P6" 
                                           value="{{ rate.energy_prices.get('P6', '') if rate else '' }}">
                                </div>
                            </div>
                            
                            <!-- Precios de potencia -->
                            <h4 class="mt-4 mb-3">Precios de Potencia (€/kW/día)</h4>
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="power_P1" class="form-label">P1</label>
                                    <input type="number" step="0.000001" class="form-control" id="power_P1" name="power_P1" 
                                           value="{{ rate.power_prices.get('P1', '') if rate else '' }}">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="power_P2" class="form-label">P2</label>
                                    <input type="number" step="0.000001" class="form-control" id="power_P2" name="power_P2" 
                                           value="{{ rate.power_prices.get('P2', '') if rate else '' }}">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="power_P3" class="form-label">P3</label>
                                    <input type="number" step="0.000001" class="form-control" id="power_P3" name="power_P3" 
                                           value="{{ rate.power_prices.get('P3', '') if rate else '' }}">
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="power_P4" class="form-label">P4</label>
                                    <input type="number" step="0.000001" class="form-control" id="power_P4" name="power_P4" 
                                           value="{{ rate.power_prices.get('P4', '') if rate else '' }}">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="power_P5" class="form-label">P5</label>
                                    <input type="number" step="0.000001" class="form-control" id="power_P5" name="power_P5" 
                                           value="{{ rate.power_prices.get('P5', '') if rate else '' }}">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="power_P6" class="form-label">P6</label>
                                    <input type="number" step="0.000001" class="form-control" id="power_P6" name="power_P6" 
                                           value="{{ rate.power_prices.get('P6', '') if rate else '' }}">
                                </div>
                            </div>
                            
                            <!-- Notas -->
                            <div class="mb-3">
                                <label for="notes" class="form-label">Notas</label>
                                <textarea class="form-control" id="notes" name="notes" rows="3">{{ rate.notes if rate else '' }}</textarea>
                                <div class="form-text">Información adicional sobre esta tarifa</div>
                            </div>
                            
                            <!-- Rate Code (solo lectura) -->
                            {% if rate and rate.rate_code %}
                            <div class="mb-3">
                                <label class="form-label">Rate Code</label>
                                <input type="text" class="form-control" value="{{ rate.rate_code }}" readonly>
                                <div class="form-text">Código único de la tarifa (generado automáticamente)</div>
                            </div>
                            {% endif %}
                            
                            <!-- Botones de acción -->
                            <div class="d-flex justify-content-between align-items-center mt-4">
                                <a href="{{ url_for('admin.list_rates') }}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left"></i> Volver
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> {% if rate %}Actualizar{% else %}Guardar{% endif %} Tarifa
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Script para mostrar/ocultar campos según tipo de tarifa
    document.addEventListener('DOMContentLoaded', function() {
        const tariffTypeSelect = document.getElementById('tariff_type');
        
        tariffTypeSelect.addEventListener('change', function() {
            updateVisiblePeriods(this.value);
        });
        
        // Ejecutar al cargar para configurar estado inicial
        if (tariffTypeSelect.value) {
            updateVisiblePeriods(tariffTypeSelect.value);
        }
        
        function updateVisiblePeriods(tariffType) {
            const visiblePeriods = {
                '2.0TD': ['P1', 'P2', 'P3'],
                '3.0TD': ['P1', 'P2', 'P3', 'P4', 'P5', 'P6'],
                '6.1TD': ['P1', 'P2', 'P3', 'P4', 'P5', 'P6']
            };
            
            // Mostrar solo los periodos correspondientes
            const periods = ['P1', 'P2', 'P3', 'P4', 'P5', 'P6'];
            const activeList = visiblePeriods[tariffType] || [];
            
            periods.forEach(period => {
                const energyField = document.getElementById(`energy_${period}`);
                const powerField = document.getElementById(`power_${period}`);
                
                if (energyField) {
                    const parentDiv = energyField.closest('.col-md-4');
                    if (activeList.includes(period)) {
                        parentDiv.style.display = 'block';
                    } else {
                        parentDiv.style.display = 'none';
                    }
                }
                
                if (powerField) {
                    const parentDiv = powerField.closest('.col-md-4');
                    if (activeList.includes(period)) {
                        parentDiv.style.display = 'block';
                    } else {
                        parentDiv.style.display = 'none';
                    }
                }
            });
        }
    });
</script>
{% endblock %}

{% block extra_styles %}
<style>
    .admin-rates-form label {
        font-weight: 500;
    }
    
    .admin-rates-form .form-text {
        font-size: 0.8rem;
    }
    
    h4 {
        color: var(--primary-color);
        font-weight: 600;
        position: relative;
    }
    
    h4:after {
        content: '';
        display: block;
        width: 50px;
        height: 2px;
        background: var(--primary-color);
        margin-top: 8px;
    }
</style>
{% endblock %}