{% extends 'base.html' %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card mb-4">
            <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">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <span>Gestión de Casas</span>
                <button type="button" class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#casaModal" onclick="setupModal('new')">
                    + Nueva Casa
                </button>
            </div>
            <div class="card-body">
                <h5 class="card-title">Casas Registradas</h5>
                {% if casas %}
                <div class="table-responsive mb-4">
                    <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">
                                        <button type="button" class="btn btn-sm btn-warning" 
                                            data-bs-toggle="modal" 
                                            data-bs-target="#casaModal"
                                            onclick="setupModal('edit', {
                                                nombre: '{{ casa.nombre }}',
                                                id_ciudad: '{{ casa.id_ciudad }}',
                                                area_techo: '{{ casa.area_techo }}',
                                                orientacion: '{{ casa.orientacion }}',
                                                inclinacion: '{{ casa.inclinacion }}'
                                            }, '{{ url_for('main.editar_casa', id_casa=casa.id_casa) }}')">
                                            Editar
                                        </button>
                                        <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>
                {% else %}
                <div class="alert alert-info mb-4">No hay casas registradas.</div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="casaModal" tabindex="-1" aria-labelledby="casaModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="casaModalLabel">Gestión de Casa</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="casaForm" method="POST" action="{{ url_for('main.nueva_casa') }}">
                    <div class="mb-3">
                        <label for="nombre" class="form-label">Nombre de la Casa</label>
                        <input type="text" name="nombre" id="nombre" class="form-control" placeholder="Ej: Casa de Playa" required>
                    </div>
                    <div class="mb-3">
                        <label for="id_ciudad" class="form-label">Ciudad / Provincia</label>
                        <select name="id_ciudad" id="id_ciudad" class="form-select" required>
                            {% for ciudad in ciudades %}
                            <option value="{{ ciudad.id_ciudad }}">
                                {{ ciudad.nombre_ciudad }} ({{ ciudad.provincia }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="area_techo" class="form-label">Área de Techo Disponible (m²)</label>
                        <input type="number" step="0.1" name="area_techo" id="area_techo" class="form-control" required>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="orientacion" class="form-label">Orientación</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 }}">{{ o }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="inclinacion" class="form-label">Inclinación (°)</label>
                            <input type="number" step="1" class="form-control" id="inclinacion" name="inclinacion" value="0" required>
                            <div class="form-text">0° es plano. Típico es 15-30°.</div>
                        </div>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary" id="modalSubmitBtn">Guardar Casa</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function setupModal(mode, data, actionUrl) {
    const form = document.getElementById('casaForm');
    const title = document.getElementById('casaModalLabel');
    const btn = document.getElementById('modalSubmitBtn');
    
    if (mode === 'new') {
        title.textContent = 'Agregar Nueva Casa';
        btn.textContent = 'Guardar Casa';
        form.action = "{{ url_for('main.nueva_casa') }}";
        form.reset();
        document.getElementById('inclinacion').value = '0';
    } else if (mode === 'edit') {
        title.textContent = 'Editar Casa';
        btn.textContent = 'Actualizar Casa';
        form.action = actionUrl;
        
        document.getElementById('nombre').value = data.nombre;
        document.getElementById('id_ciudad').value = data.id_ciudad;
        document.getElementById('area_techo').value = data.area_techo;
        document.getElementById('orientacion').value = data.orientacion;
        document.getElementById('inclinacion').value = data.inclinacion;
    }
}
</script>
{% endblock %}