{% extends 'base.html' %}

{% block title %}
    Command-Response
{% endblock %}
  
{% block content %}
    <!-- Container for Command Form and Preview -->
    <div class="container">
        <div class="row">
            <!-- Command Message Dynamic Form -->
            <div class="col-lg-7">
                <form method="post" id="commandForm" action="/send_command">
                    {{ form.hidden_tag() }}

                    <div class="row">
                        {% for field in form %}
                            {% if field.name != 'subtype' and field.name != 'numEntries' and field.name != 'csrf_token' and field.type != 'HiddenField' %}
                                <div class="col-md-4">
                                    <label for="{{ field.id }}" class="form-label">{{ field.label }}</label>
                                    {% if field.id == 'type' %}
                                        <label id="typeInfo" class="text-muted small" style="display: none;">Good luck changing it to a different type!</label>
                                        {{ field(
                                            onchange="setTimeout(function() { document.getElementById('type').selectedIndex = 0; }, 1000);",
                                            onfocus="document.getElementById('typeInfo').style.display='block'",
                                            onblur="document.getElementById('typeInfo').style.display='none'") 
                                        }}
                                    {% else %}
                                        <!-- {{ field(class="form-control form-control-sm") }} -->
                                        {{ field }}
                                    {% endif %}
                                    {% if field.errors %}
                                        <span style="color: red;">{{ ', '.join(field.errors) }}</span>
                                    {% endif %}
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>

                    <div class="row">
                        <div class="col-md-6" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="This is not a part of command message. Only needed for Repeated fields in the message.">
                            <label for="{{ form.numEntries.id }}" class="form-label">{{ form.numEntries.label }}</label>
                            {{ form.numEntries(onfocus="document.getElementById('numEntriesInfo').style.display='block'", onblur="document.getElementById('numEntriesInfo').style.display='none'") }}
                            {% if form.numEntries.errors %}
                                <span style="color: red;">{{ ', '.join(form.numEntries.errors) }}</span>
                            {% endif %}
                            <label id="numEntriesInfo" class="text-muted small" style="display: none;">This is not a part of command message. Only needed for Repeated fields in the message.</label>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <label for="{{ form.subtype.id }}" class="form-label">{{ form.subtype.label }}</label>
                            {{ form.subtype(class="form-select form-select-sm") }}
                            {% if form.subtype.errors %}
                                <span style="color: red;">{{ ', '.join(form.subtype.errors) }}</span>
                            {% endif %}
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 mt-2" id="additionalFieldsContainer">
                            <!-- Container to load additional fields dynamically -->
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-12">
                            <input type="submit" value="Submit" class="btn btn-primary">
                        </div>
                    </div>
                </form>
            </div>

            <!-- Command Message JSON Preview -->
            <div class="col-lg-5">
                <div class="card">
                    <h3 class="card-header">Command Message</h3>
                    <div id="commandMessage" class="card-body"></div>
                    <div id="commandMessageHex" class="card-footer text-body-secondary"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-5">
        <div>
            <div class="col-lg-12 card">
                <h3 class="card-header">Command Response</h3>
                <div id="response" class="card-body"></div>
                <div id="responseHex" class="card-footer text-body-secondary"></div>
            </div>
        </div>
    </div>

    <script>
        // Load additional fields dynamically based on the selected subtype
        var csrf_token = "{{ csrf_token() }}";
        
        $('#{{ form.subtype.id }}').change( function() {
            var selectedSubtype = $(this).val();
            var numEntries = $('#{{ form.numEntries.id }}').val();
    
            $.ajax({
                url: '/get_additional_fields',
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrf_token
                },
                data: { 'subtype': selectedSubtype, 'numEntries': numEntries },
                success: function (response) {
                    $('#additionalFieldsContainer').html(response.additional_fields_html);
                }
            });
    
        })
    </script>
    <script>
        $('#commandForm').submit(function (e) {
            e.preventDefault();  // Prevent the default form submission

            $.ajax({
                url: '/send_command',
                type: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token() }}'
                },
                data: $('#commandForm').serialize(),
                success: function (response) {
                    if (response.status === "success") {
                        $message = $('<pre/>');
                        $message.text(JSON.stringify(response.message, null, 4));
                        $('#commandMessage').html($message);
                        $('#commandMessageHex').html(response.messageHex);
                    }
                    else {
                        alert("Error: " + response.message);
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            })
        })
    </script> 

{% endblock %}