{% extends "backend/template.html" %}

{% block content %}
{% with messages = get_flashed_messages() %}
{% for message in messages %}
{{ message }}
{% endfor %}
{% endwith%}
<div class="container mt-3">
    <!-- Inicia Botonera -->
    {% if backlink %}
        <a href="{{ backlink }}" class="btn btn-secondary">Regresar</a>
        <!-- Botón de cancelación -->
        <a href="{{ url_for('.view_record', record_id=institution.id, classid=classid, backlink=backlink) }}" type="button" class="btn btn-secondary">Cancelar</a>
        <!-- Botón para borrar -->
        <form action="{{ url_for('.delete_record', record_id=institution.id, classid=classid, backlink=backlink) }}" method="post"
        style="display: inline;"><input type="hidden" id="csrf_token" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="btn btn-danger"
        onclick="return confirm('¿Estás seguro de que quieres eliminar esta institución?');">Borrar</button>
        </form>
    {% else %}
        <button onclick="window.history.back();" class="btn btn-secondary">Regresar</button>
        <a href="{{ url_for('.view_record', record_id=institution.id, classid=classid) }}" type="button" class="btn btn-secondary">Cancelar</a>
        <!-- Botón para borrar -->
        <form action="{{ url_for('.delete_record', record_id=institution.id, classid=classid, backlink=backlink) }}" method="post"
        style="display: inline;"><input type="hidden" id="csrf_token" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="btn btn-danger"
        onclick="return confirm('¿Estás seguro de que quieres eliminar esta institución?');">Borrar</button>
        </form>
    {% endif %}
    <!-- Finaliza Botonera -->

    <h2>Editar {{ classname }}: {{institution.id}}</h2>
    <form method="post" enctype="multipart/form-data">
        <input type="hidden" id="csrf_token" name="csrf_token" value="{{ csrf_token() }}">
        
        <div class="card">
            <div class="card-body">
                <div class="row">
                    {% for container_name, container_data in containers.items() %}
                    <div class="{{ container_data.class }}">
                        {% if container_data.title %}<h3>{{ container_data.title }}</h3>{% endif %}
                        {% for key, value in container_data.fields.items() %}
                        {% set field_value = institution|safe_getattr(value.id) %}
                        {% if field_value == None %}
                            {% set field_value = value.default %}
                        {% endif %}
                        <div class="mb-3  {{ value.class }}">
                            
                            {% if value.input == "parent" or value.name == "parent" %}
                                <input type="hidden" id="{{ value.id }}" name="{{ value.id }}" value="{{ field_value }}" >
                            {% else %}
                                <label for="{{ value.id }}" class="form-label">{{ value.label }}</label>
                                {% if value.input == "checkbox" and value.type == "Boolean" %}
                                <input class="form-check-input" type="checkbox" id="{{ value.id }}" name="{{ value.id }}" {%
                                    if field_value %} checked {% endif %}>
                                {% elif value.input == "checkbox" and value.type != "Boolean" %}
                                    {% for option in value.options %}
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="{{ value.id }}-{{ loop.index }}" name="{{ value.id }}" value="{{ option.value }}" {% if option.value in field_value %} checked {% endif %}>
                                        <label class="form-check-label" for="{{ value.id }}-{{ loop.index }}">
                                            {{ option.label }}
                                        </label>
                                    </div>
                                    {% endfor %}
                                {% elif value.input == "number" or value.input == "float" %}
                                <input class="form-control" {% if value.id=="id" %} disabled {% endif %} type="number"
                                    id="{{ value.id }}" name="{{ value.id }}" value="{{ field_value }}" {% if
                                    value.input=="float" %} step="0.01" {% else %} step="1" {% endif %}>
                                {% elif value.input == "textarea" %}
                                <textarea class="form-control" id="{{ value.id }}" name="{{ value.id }}"
                                    maxlength="{{ value.maxlength }}">{{ field_value }}</textarea>
                                {% elif value.input == "select" %}
                                <select class="form-control" id="{{ value.id }}" name="{{ value.id }}">
                                    {% for option in value.options %}
                                    <option value="{{ option.value }}" {% if option.value==field_value %} selected {% endif %}>
                                        {{ option.label }}</option>
                                    {% endfor %}
                                </select>
                                {% elif value.input == "image" %}
                                <img id="preview-{{ value.id }}"
                                    src="{{ url_for('static', filename='uploads/' ~ field_value) }}" width="200">
                                <!-- Checkbox para decidir si eliminar la imagen actual -->
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="delete-{{ value.id }}"
                                        name="delete-{{ value.id }}">
                                    <label class="form-check-label" for="delete-{{ value.id }}">
                                        Eliminar imagen actual
                                    </label>
                                </div>
                                <!-- Input para subir una nueva imagen, solo se muestra si el usuario selecciona eliminar la imagen actual -->
                                <input class="form-control" type="file" id="{{ value.id }}" name="{{ value.id }}"
                                    accept=".png, .jpg, .jpeg, .gif" style="display: none;">
                                <script>
                                    // JavaScript para manejar la visibilidad del input de archivo en función del checkbox
                                    document.getElementById('delete-{{ value.id }}').onchange = function () {
                                        var fileInput = document.getElementById('{{ value.id }}');
                                        if (this.checked) {
                                            fileInput.style.display = 'block'; // Muestra el input si el checkbox está marcado
                                        } else {
                                            fileInput.style.display = 'none'; // Oculta el input si el checkbox no está marcado
                                        }
                                    };
                                    // Previsualización de la imagen cargada
                                    document.getElementById('{{ value.id }}').onchange = function (evt) {
                                        var output = document.getElementById('preview-{{ value.id }}');
                                        output.src = URL.createObjectURL(evt.target.files[0]);
                                        output.onload = function () {
                                            URL.revokeObjectURL(output.src); // Liberar memoria
                                        }
                                    };
                                </script>
                                {% elif value.input == "email" %}
                                <input class="form-control" type="email" id="{{ value.id }}" name="{{ value.id }}"
                                    value="{{ field_value }}" maxlength="{{ value.maxlength }}">
                                {% else %}
                                <input class="form-control" type="text" id="{{ value.id }}" name="{{ value.id }}"
                                    value="{{ field_value }}" maxlength="{{ value.maxlength }}">
                                {% endif %}
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                    {% endfor%}
                </div>
                <!-- Botón de envío -->
                <button type="submit" class="btn btn-primary">Guardar</button>
            </div>
        </div>
    </form>
    {% endblock %}