{% extends 'base.html' %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-secondary text-white">Configuración del Sistema</div>
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label for="precio_kwh" class="form-label">Precio Global del kWh ($)</label>
                        <input type="number" step="0.0001" name="precio_kwh" class="form-control" value="{{ precio_kwh }}" required>
                        <div class="form-text">Este valor se utilizará para todos los cálculos de ahorro en nuevas simulaciones.</div>
                    </div>
                    <button type="submit" class="btn btn-primary">Guardar Configuración</button>
                    <a href="{{ url_for('main.index') }}" class="btn btn-link">Volver al Inicio</a>
                </form>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header {{ 'bg-warning' if casa_editar else 'bg-success' }} text-white">
                {{ 'Editar Casa' if casa_editar else 'Agregar Nueva Casa' }}
            </div>
            <div class="card-body">
                <form action="{{ url_for('main.editar_casa', id_casa=casa_editar.id_casa) if casa_editar else url_for('main.nueva_casa') }}" method="POST">
                    <div class="mb-3">
                        <label for="nombre" class="form-label">Nombre de la Casa</label>
                        <input type="text" name="nombre" class="form-control" placeholder="Ej: Casa de Playa" value="{{ casa_editar.nombre if casa_editar else '' }}" required>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="id_ciudad" class="form-label">Ciudad / Provincia</label>
                            <select name="id_ciudad" class="form-select" required>
                                {% for ciudad in ciudades %}
                                <option value="{{ ciudad.id_ciudad }}" {{ 'selected' if casa_editar and casa_editar.id_ciudad == ciudad.id_ciudad else '' }}>
                                    {{ ciudad.nombre_ciudad }} ({{ ciudad.provincia }})
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="area_techo" class="form-label">Área de Techo Disponible (m²)</label>
                            <input type="number" step="0.1" name="area_techo" class="form-control" value="{{ casa_editar.area_techo if casa_editar else '' }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="orientacion" class="form-label">Orientación del Techo</label>
                            <select class="form-select" id="orientacion" name="orientacion" required>
                                {% set orientaciones = ['Norte', 'Sur', 'Este', 'Oeste', 'Noreste', 'Noroeste', 'Sureste', 'Suroeste', 'Plano'] %}
                                {% for o in orientaciones %}
                                <option value="{{ o }}" {{ 'selected' if casa_editar and casa_editar.orientacion == o else '' }}>{{ o }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="inclinacion" class="form-label">Inclinación del Techo (Grados)</label>
                            <input type="number" step="1" class="form-control" id="inclinacion" name="inclinacion" value="{{ casa_editar.inclinacion if casa_editar else '0' }}" required>
                            <div class="form-text">0° es plano. Típico es 15-30°.</div>
                        </div>
                    </div>
                    <button type="submit" class="btn {{ 'btn-warning' if casa_editar else 'btn-success' }}">
                        {{ 'Actualizar Casa' if casa_editar else 'Guardar Casa' }}
                    </button>
                    {% if casa_editar %}
                    <a href="{{ url_for('main.configuracion') }}" class="btn btn-secondary">Cancelar</a>
                    {% endif %}
                </form>
            </div>
        </div>

        {% if casas %}
        <div class="card mt-4 mb-4">
            <div class="card-header bg-info text-white">Casas Registradas</div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Nombre</th>
                                <th>Ciudad</th>
                                <th>Área (m²)</th>
                                <th>Orientación</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for casa in casas %}
                            <tr>
                                <td>{{ casa.nombre }}</td>
                                <td>{{ casa.ciudad.nombre_ciudad }}</td>
                                <td>{{ casa.area_techo }}</td>
                                <td>{{ casa.orientacion }}</td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ url_for('main.configuracion', edit_id=casa.id_casa) }}" class="btn btn-sm btn-warning">Editar</a>
                                        <form action="{{ url_for('main.eliminar_casa', id_casa=casa.id_casa) }}" method="POST" onsubmit="return confirm('¿Estás seguro de eliminar esta casa?');" style="display: inline;">
                                            <button type="submit" class="btn btn-sm btn-danger">Eliminar</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}