<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Create New Instance From Template</title>
    <link rel="stylesheet" type="text/css" href="../{{ style.skin_css }}">
    <link rel="stylesheet" type="text/css" href="../static/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    {% include 'legacy/bloom_header.html' %}
    <h1>Create New Instance From Template <a href="/euid_details?euid={{ template_euid }}" target="template">{{ template_euid }}</a></h1>
    <h2 style="padding-left: 25px;">{{ name }}</h2>
    <hr style="padding-left: 25px;">

    {% if has_ui_form_properties %}
        <label class="switch">
            <input type="checkbox" id="toggleSwitch" checked>
            <span class="slider round"></span>
        </label>
        <label for="toggleSwitch">Toggle UI Form Properties</label>
    {% endif %}

    <form method="post" action="/create_instance">
        <input type="hidden" name="template_euid" value="{{ template_euid }}" />
        
        <div id="defaultFields" style="display: none;">
            {% for field in fields %}
                <div>
                    <label for="default_{{ field.name }}">{{ field.label }}</label>
                    {% if field.type == "select" %}
                        <select name="default_{{ field.name }}" id="default_{{ field.name }}">
                            {% for option in field.options %}
                                <option value="{{ option }}">{{ option }}</option>
                            {% endfor %}
                        </select>
                    {% else %}
                        <input type="{{ field.type }}" name="default_{{ field.name }}" id="default_{{ field.name }}" />
                    {% endif %}
                </div>
            {% endfor %}
        </div>

        <div id="uiFields">
            {% for field in ui_fields %}
                <div>
                    <label for="ui_{{ field.name }}">{{ field.label }}</label>
                    {% if field.type == "select" %}
                        <select name="ui_{{ field.name }}" id="ui_{{ field.name }}">
                            {% for option in field.options %}
                                <option value="{{ option }}">{{ option }}</option>
                            {% endfor %}
                        </select>
                    {% else %}
                        <input type="{{ field.type }}" name="ui_{{ field.name }}" id="ui_{{ field.name }}" />
                    {% endif %}
                </div>
            {% endfor %}
        </div>
        
        <br>
        <button type="submit">CREATE INSTANCE</button>
    </form>

    <script>
        const controlledProperties = {{ controlled_properties_js | safe }};
        
        function updateDependentFields(prefix) {
            function populateSelectField(selectFieldId, options) {
                const selectField = $(`#${selectFieldId}`);
                selectField.empty();
                options.forEach(function(option) {
                    selectField.append(new Option(option, option));
                });
                selectField.trigger('change');
            }

            function handleFieldChange(field, dependentField, enumObj) {
                $(`#${field}`).change(function() {
                    const selectedValue = $(this).val();
                    const dependentOptions = enumObj[selectedValue] || [];
                    populateSelectField(`${prefix}${dependentField}`, dependentOptions);
                });
            }

            Object.keys(controlledProperties).forEach(function(prop) {
                if (controlledProperties[prop].type === "dependent string") {
                    const dependentField = controlledProperties[prop].on;
                    const enumObj = controlledProperties[prop].enum;
                    handleFieldChange(`${prefix}${dependentField}`, prop, enumObj);
                }
            });
        }

        $(document).ready(function() {
            updateDependentFields('ui_');
            updateDependentFields('default_');

            {% if has_ui_form_properties %}
                $('#toggleSwitch').change(function() {
                    if ($(this).is(':checked')) {
                        $('#defaultFields').hide();
                        $('#uiFields').show();
                        updateDependentFields('ui_');  // Ensure dependent fields are updated after toggling
                    } else {
                        $('#defaultFields').show();
                        $('#uiFields').hide();
                        updateDependentFields('default_');  // Ensure dependent fields are updated after toggling
                    }
                }).trigger('change'); // Trigger change to set initial state
            {% else %}
                $('#defaultFields').show();
            {% endif %}
        });
    </script>
</body>
</html>
