{% extends "base.html" %}

{% block title %}{% trans %}Edit Classroom{% endtrans %} - {{ classroom.code_display }} - Edu-Space Admin{% endblock %}

{% block content %}
<div class="container-fluid pt-5 mt-4">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-1">
                        <i class="bi bi-pencil-square text-primary me-2"></i>{% trans %}Edit Classroom{% endtrans %}
                    </h1>
                    <p class="text-muted small mb-0">{{ classroom.building }} — {{ classroom.code }}</p>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ url_for('classrooms.view_classroom', id=classroom.id) }}" class="btn btn-outline-primary">
                        <i class="bi bi-eye me-1"></i>{% trans %}Ver Ficha{% endtrans %}
                    </a>
                    <a href="{{ url_for('classrooms.list_classrooms') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-1"></i>{% trans %}Back to Classrooms{% endtrans %}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-body-tertiary border-0 py-3 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 h6 fw-bold">
                        <i class="bi bi-door-open text-primary me-2"></i>{% trans %}Classroom Information{% endtrans %}
                    </h5>
                    <span class="badge bg-secondary-subtle text-secondary font-monospace border">ID #{{ classroom.id }}</span>
                </div>
                <div class="card-body p-4">
                    <form method="POST" id="classroom-form" novalidate>
                        {{ form.hidden_tag() }}
                        
                        <div class="row g-3">
                            <div class="col-md-4">
                                {{ form.building.label(class="form-label fw-semibold") }}
                                {{ form.building(class="form-control" + (" is-invalid" if form.building.errors else ""), placeholder="Edificio Central") }}
                                {% if form.building.errors %}
                                    <div class="invalid-feedback">{{ form.building.errors[0] }}</div>
                                {% endif %}
                            </div>
                            
                            <div class="col-md-4">
                                {{ form.room_number.label(class="form-label fw-semibold") }}
                                {{ form.room_number(class="form-control" + (" is-invalid" if form.room_number.errors else ""), placeholder="402") }}
                                {% if form.room_number.errors %}
                                    <div class="invalid-feedback">{{ form.room_number.errors[0] }}</div>
                                {% endif %}
                            </div>
                            
                            <div class="col-md-4">
                                {{ form.floor.label(class="form-label fw-semibold") }}
                                {{ form.floor(class="form-control" + (" is-invalid" if form.floor.errors else "")) }}
                                {% if form.floor.errors %}
                                    <div class="invalid-feedback">{{ form.floor.errors[0] }}</div>
                                {% endif %}
                            </div>
                            
                            <div class="col-md-6">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    {{ form.capacity.label(class="form-label fw-semibold mb-0") }}
                                    <button type="button" class="btn btn-sm btn-outline-primary py-0 px-2" id="btnInfinity" style="font-size: 0.8rem;" title="{% trans %}Asignar capacidad ilimitada{% endtrans %}">
                                        <i class="bi bi-infinity me-1"></i>{% trans %}Ilimitada (∞){% endtrans %}
                                    </button>
                                </div>
                                <div class="input-group">
                                    {{ form.capacity(class="form-control" + (" is-invalid" if form.capacity.errors else ""), id="capacityInput", placeholder="ej. 35 o ∞") }}
                                    <span class="input-group-text bg-body-tertiary text-muted font-monospace"><i class="bi bi-people"></i></span>
                                </div>
                                <div class="form-text small text-muted mt-1">
                                    <i class="bi bi-info-circle text-info me-1"></i>{% trans %}Para aulas virtuales o eventos sin aforo restringido, ingrese <strong>∞</strong> o <strong>0</strong> (Capacidad ilimitada).{% endtrans %}
                                </div>
                                {% if form.capacity.errors %}
                                    <div class="invalid-feedback d-block">{{ form.capacity.errors[0] }}</div>
                                {% endif %}
                            </div>
                            
                            <div class="col-md-6 d-flex align-items-center pt-md-4">
                                <div class="form-check form-switch pt-2">
                                    {{ form.is_active(class="form-check-input", role="switch") }}
                                    {{ form.is_active.label(class="form-check-label fw-semibold") }}
                                </div>
                            </div>
                            
                            <div class="col-12">
                                {{ form.description.label(class="form-label fw-semibold") }}
                                {{ form.description(class="form-control" + (" is-invalid" if form.description.errors else ""), rows="3", placeholder="Detalles sobre equipamiento o uso preferente del aula...") }}
                                {% if form.description.errors %}
                                    <div class="invalid-feedback">{{ form.description.errors[0] }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Live Preview Card -->
                        <div class="alert alert-info border-0 mt-4 mb-0">
                            <h6 class="alert-heading fw-bold mb-2">
                                <i class="bi bi-info-circle me-1"></i>{% trans %}Vista Previa de Identificador{% endtrans %}
                            </h6>
                            <div id="classroom-preview">
                                <p class="mb-0">
                                    {% trans %}Código de visualización{% endtrans %}: 
                                    <strong id="preview-code" class="text-primary font-monospace fs-6">{{ classroom.code_display }}</strong>
                                </p>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top">
                            <a href="{{ url_for('classrooms.view_classroom', id=classroom.id) }}" class="btn btn-outline-secondary">
                                {% trans %}Cancelar{% endtrans %}
                            </a>
                            <button type="submit" class="btn btn-primary px-4">
                                <i class="bi bi-check-circle me-1"></i>{% trans %}Guardar Cambios{% endtrans %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    var buildingInput = document.getElementById('building');
    var roomInput = document.getElementById('room_number');
    var previewCode = document.getElementById('preview-code');
    var capacityInput = document.getElementById('capacityInput');
    var btnInfinity = document.getElementById('btnInfinity');
    
    function updatePreview() {
        var b = buildingInput ? buildingInput.value.trim() : '';
        var r = roomInput ? roomInput.value.trim() : '';
        if (b && r) {
            previewCode.textContent = b + '-' + r;
        } else if (r) {
            previewCode.textContent = r;
        } else {
            previewCode.textContent = '---';
        }
    }
    
    if (buildingInput) buildingInput.addEventListener('input', updatePreview);
    if (roomInput) roomInput.addEventListener('input', updatePreview);

    if (btnInfinity && capacityInput) {
        btnInfinity.addEventListener('click', function() {
            capacityInput.value = '∞';
            capacityInput.focus();
        });
    }
});
</script>
{% endblock %}