{% extends 'base.html' %}
{% block title %}IvoryOS | Controller for {{inst.__class__.__name__}}{% endblock %}
{% block body %}
    <div id="overlay" class="overlay">
        <div>
            <h3 id="overlay-text"></h3>
            <div class="spinner-border" role="status"></div>
        </div>
    </div>
    <h1>Controller for {{inst.__class__.__name__}} ({{instrument}})</h1>
    <div class="grid-container" id="sortable-grid">
        {% for function, form in forms.items() %}
            {% if function not in session['hidden_functions'][instrument] %}
                <div class="card" id="{{function}}">
                    <div class="bg-white rounded shadow-sm flex-fill">
                        <a style="float: right" aria-label="Close" href="{{ url_for('control.hide_function', instrument=instrument, function=function) }}"><i class="bi bi-eye-slash-fill"></i></a>
                        <div class="form-control" >
                            <form role="form" method='POST' name="{{function}}" id="{{function}}">
                                <div class="form-group">
                                    {{ form.hidden_tag() }}
                                    {% for field in form %}
                                        {% if field.type not in ['CSRFTokenField', 'HiddenField'] %}
                                            <div class="input-group mb-3">
                                                <label class="input-group-text">{{ field.label.text }}</label>
                                                {% if field.type == "SubmitField" %}
                                                    {{ field(class="btn btn-dark") }}
                                                {% elif field.type == "BooleanField" %}
                                                    {{ field(class="form-check-input") }}
                                                {% else %}
                                                    {{ field(class="form-control") }}
                                                {% endif %}
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                                <div class="input-group mb-3">
                                    <button type="submit" name="{{ function }}" id="{{ function }}" class="form-control" style="background-color: #a5cece;" onclick="submitForm('{{function}}')">{{function}} </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>
    <div class="accordion accordion-flush" id="accordionActions" >
        <div class="accordion-item">
            <h4 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#hidden">
                    Hidden functions
                </button>
            </h4>
        </div>
        <div id="hidden" class="accordion-collapse collapse" data-bs-parent="#accordionActions">
            <div class="accordion-body">
                {% for function in session['hidden_functions'][instrument] %}
                    <div>
                        {{ function }} <a href="{{ url_for('control.remove_hidden', instrument=instrument, function=function) }}"><i class="bi bi-eye-fill"></i></a>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
<script>
    $(function() {
        $("#sortable-grid").sortable({
            items: ".card",
            cursor: "move",
            opacity: 0.7,
            revert: true,
            placeholder: "ui-state-highlight",
            start: function(event, ui) {
                ui.placeholder.height(ui.item.height());
            },
            update: function(event, ui) {
                const newOrder = $("#sortable-grid").sortable("toArray");
                $.ajax({
                    url: `{{url_for("control.save_order", instrument=instrument)}}`,
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ order: newOrder }),
                    success: function() {
                        console.log('Order saved');
                    }
                });
            }
        }).disableSelection();
    });
</script>
    <script>
        const buttonIds = {{ session['card_order'][instrument] | tojson }};

        function addOverlayToButtons(buttonIds) {
            buttonIds.forEach(function(buttonId) {
                document.getElementById(buttonId).addEventListener('submit', function() {
                    // Display the overlay
                    document.getElementById('overlay').style.display = 'block';
                    document.getElementById('overlay-text').innerText = `Processing ${buttonId}...`;
                });
            });
        }

        addOverlayToButtons(buttonIds);
    </script>
{% endblock %}
