{% block qba_bit_template_edit_select_type_widget %}

    <input type="hidden" id="{{ form.vars.id }}" name="{{ form.vars.full_name }}" value='{{ form.vars.data|json_encode|raw }}'>
    <div class="row box box-widget ">
        <div class="box-header with-border col-lg-6">
            {{ form_widget(form_child.children[form.vars.id~"_name"]) }}
        </div>
        <div class="box-body col-lg-6">
            {{ form_widget(form_child.children[form.vars.id~"_color"]) }}
        </div>
    </div>

    <script>

        function  QbaBitUpdateEditSelectType{{ form.vars.id }}() {
           let object = new Object();
            let  v=$("#{{ form_child.children[form.vars.id~"_name"].vars.id }}").val();
            {#v = $("#{{ form_child.children[form.vars.id~"_name"].vars.id }} option[value="+v+"]").html();#}
            object["id"]= v;
            object["color"]= $("#{{  form_child.children[form.vars.id~"_color"].vars.id}}").val();
            $("#{{ form.vars.id }}").val(JSON.stringify(object));

        }
        function  QbaBitUpdateEditSelectTypeName{{ form.vars.id }}() {
            if(templateFilteredData_{{ form.vars.id }}!=null)
            {
                let prev =$("#{{ form_child.children[form.vars.id~"_name"].vars.id }}").val();
                {#$("#{{ form_child.children[form.vars.id~"_name"].vars.id }}").off("change");#}
                $("#{{ form_child.children[form.vars.id~"_name"].vars.id }} option").remove();
                let all =templatesData_{{ form.vars.id }};
                let filter = templateFilteredData_{{ form.vars.id }};
                let html="";
                let keys = Object.keys(all);
                for (let i = 0; i<keys.length;i++)
                {
                    let item = all[keys[i]];
                    if(filter.indexOf(parseInt(keys[i]))!=-1)
                    {
                        html+=" <option value='"+keys[i]+"'>"+item.name+"</option>";
                    }
                }
                $("#{{ form_child.children[form.vars.id~"_name"].vars.id }}").html(html);

                $("#{{ form_child.children[form.vars.id~"_name"].vars.id }}").off("change").on("change",function (e) {
                    let  v=$("#{{ form_child.children[form.vars.id~"_name"].vars.id }}").val();
                    if(v!=null)
                    {

                        $("#select2-{{form_child.children[form.vars.id~"_name"].vars.id }}-container").html(templatesData_{{ form.vars.id }}[v].name);
                        let c = $("#{{ form_child.children[form.vars.id~"_color"].vars.id }}");
                        let all =templatesData_{{ form.vars.id }};
                        c.find("option").remove().change();
                        let html  = "";
                        let colors = Object.keys(all[v].metaData.colors);
                        for (let i = 0; i < colors.length; i++) {
                            let color = all[v].metaData.colors[colors[i]];
                            html+="<option value='"+colors[i]+"'>"+color+"</option>";

                        }
                        c.html(html).change();
                        QbaBitUpdateEditSelectType{{ form.vars.id }}();
                    }

                });
                if(prev==""|| prev==null)
                    prev = $($("#{{ form_child.children[form.vars.id~"_name"].vars.id }} option")[0]).attr("value");
                $("#{{ form_child.children[form.vars.id~"_name"].vars.id }}").val(prev).change();
                {#$("#{{ form_child.children[form.vars.id~"_name"].vars.id }}").change();#}
            }
            else
            {
                $("#{{ form_child.children[form.vars.id~"_name"].vars.id }}").off("change").on("change",function (e) {
                let  v=$("#{{ form_child.children[form.vars.id~"_name"].vars.id }}").val();

                if(v!=""&& v!=null)
                {
                    $("#select2-{{ form_child.children[form.vars.id~"_name"].vars.id }}-container").html(templatesData_{{ form.vars.id }}[v].name);
                    let c = $("#{{ form_child.children[form.vars.id~"_color"].vars.id }}");
                    let all =templatesData_{{ form.vars.id }};
                    c.find("option").remove().change();
                    let html  = "";
                    let colors = Object.keys(all[v].metaData.colors);
                    for (let i = 0; i < colors.length; i++) {
                        let color = all[v].metaData.colors[colors[i]];
                        html+="<option value='"+colors[i]+"'>"+color+"</option>";

                    }
                    c.html(html).change();
                    QbaBitUpdateEditSelectType{{ form.vars.id }}();
                }

            });
                $("#{{ form_child.children[form.vars.id~"_name"].vars.id }}").change();

            }


        }
        var templatesData_{{ form.vars.id }} = JSON.parse('{{ form.vars.templates|json_encode|raw }}');
        var templateFilteredData_{{ form.vars.id }} = JSON.parse('{{ form.vars.filteredBy|json_encode|raw }}');
        function QbaBitEditSelectType{{ form.vars.id }}() {



            $("#{{ form_child.children[form.vars.id~"_name"].vars.id }}").removeAttr("name");
            $("#{{ form_child.children[form.vars.id~"_color"].vars.id }}").removeAttr("name");
            QbaBitUpdateEditSelectTypeName{{ form.vars.id }}();

            $("#{{ form_child.children[form.vars.id~"_color"].vars.id }}").on("change",function (e) {
                QbaBitUpdateEditSelectType{{ form.vars.id }}();
            });
            let data = ('{{ form.vars.data|json_encode|raw }}');
            data=JSON.parse(data.replace('"{','{').replace('}"','}'));
            let options =  $("#{{ form_child.children[form.vars.id~"_name"].vars.id }} option");
            for (let i = 0; i < options.length; i++) {
                let o = $(options[i]);
                if(o.attr("value")==data.id)
                {

                    $("#{{ form_child.children[form.vars.id~"_name"].vars.id }}").val(o.attr("value")).change();
                    $("#{{ form_child.children[form.vars.id~"_color"].vars.id }}").val(data.color).change();
                    break;
                }
            }


        }
        {% if app.request.isXmlHttpRequest == false %}
        window.addEventListener('load', function() {
            QbaBitEditSelectType{{ form.vars.id }}();

            }
        );

        {% else %}
        jQuery(function(){

            QbaBitEditSelectType{{ form.vars.id }}();

        });
        {% endif %}
    </script>


{% endblock %}