{% extends "@QbaBitCore/Form/edit.html.twig" %}
{% block form_inner %}
    <script>
        var listData= null;
    </script>
    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">


            <li class=" active"><a data-toggle="tab" href="#tab_general"
                                   class="">{{ 'general' | trans({}, 'seguridad') }}</a></li>

            {% if form.metaData is defined %}
                <li class=" "><a data-toggle="tab" href="#tab_destinatary"
                                 class="">{{ "metadata" | trans({}, 'mail_template') }}</a></li>
            {% endif %}
        </ul>
        <div class="tab-content">


            <div class="tab-pane  active" id="tab_general">
                <div class="row nmlf">
                    <div class="col-md-2">
                        {{ form_row(form.image_file) }}
                    </div>
                    <div class="col-md-10">
                        <div class="row">
                            <div class="col-md-10">
                                {{ form_row(form.name, {'attr':{'class': 'form-control'} }) }}
                            </div>
                            <div class="col-md-2 " style="margin-top: 30px">
                                {{ form_widget(form.active) }}
                            </div>
                        </div>
                        <div class="row">
                            {#<div class="col-md-3">#}
                            {#{{ form_row(form.rangeStart) }}#}
                            {#</div>#}
                            {#<div class="col-md-3">#}
                            {#{{ form_row(form.rangeEnd ) }}#}
                            {#</div>#}
                            <div class="col-md-6">
                                {% if form.category is defined %}
                                    <div class="row">
                                        <div class="col-xs-10" style="    padding-right: 0;">
                                            {{ form_row(form.category) }}
                                        </div>

                                    </div>

                                {% else %}
                                    <label style="width: 100%">{{ "category"|trans([],"mail_template") }}</label>
                                    {{ form.vars.data.category.name }}
                                {% endif %}
                            </div>

                            {#<div class="col-md-10">#}
                            {#{{ form_row(form.subject, {'attr':{'class': 'form-control'} }) }}#}
                            {#</div>#}
                        </div>

                    </div>


                </div>

                <div class="row nmlf">
                    <div class="col-md-12">
                        {{ form_row(form.body) }}
                    </div>
                </div>
                <div class="row nmlf">
                    <div class="col-md-12">
                        {{ form_row(form.varChilds) }}
                    </div>
                </div>
            </div>
            {% if form.metaData is defined %}
                <div class="tab-pane  " id="tab_destinatary">
                    <div class="row nmlf">
                        <div class="col-md-12">

                            {{ form_row(form.metaData) }}

                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>


    <script>

        var automatic = false;
        var relatedClasses = JSON.parse('{{ relatedClasses|json_encode|raw }}');
        function QbaBitMailTemplateSetter()
        {

            function hasLabel(id,label)
            {
                var g = $("#"+id+" optgroup");
                for(var i=0;i<g.length;g++)
                    if($(g[i]).attr("label")==label)
                        return true;
                return false;

            }

            function createNew(desc,value,label,list)
            {

                if(automatic==false && list!=null)
                {
                    var s =  $("#gridview_{{ form.varChilds.vars.id }} .row");
                    var ls = $(s).find("select");
                    //                    $(ls).find("option").remove();

                    var selected = false;
                    for(var f =0; f<ls.length;f++)
                    {
                        var f1 = $(ls).find("option");
                        for (var f3=0;f3<f1.length;f3++)
                            if($(f1[f3]).attr("value")=="")
                                $(f1[f3]).remove();
                        var t="";
                        for(var i=0;i<list.length;i++)
                        {
                            if(!hasLabel(ls[f].id,list[i].label))
                            {
                                t+= '  <optgroup id="'+list[i].id+'" label="'+list[i].label+'">';
                                for (var k =0;k<list[i].properties.length;k++)
                                {
                                    var v = list[i].properties[k].id;
                                    var l = list[i].properties[k].caption;
                                    var sel = "";
                                    if($(ls[f]).val()==null && $("#"+ls[f].id+">option").length==0 && !selected )
                                    {
                                        sel = (value==v?'selected':'');
                                        selected = sel!="";
                                    }

                                    var q ='<option '+sel+' value="'+v+'">'+l+'</option>';

                                    t+=q;

                                }
                                t+='</optgroup>';
                            }

                        }
                        $(ls[f]).append(t);


                    }

                    var t = $(ls[ls.length-1]).parent().find("input")[0].id;
                    var c = controlList.get(t);

                    if(c!=null)
                        c.create();

                }


            }

            controlList.add("{{ form.varChilds.vars.id }}",[{
                "addItem":function () {
                    var  s =  $("#gridview_{{ form.varChilds.vars.id }} .row");
                    $(s[s.length-1]).find("optgroup").remove();
                    createNew(null,null,null,listData);




                } }
            ],"ListeableControl");
            function hasItem(name)
            {

                    for(var i=0;i<listData.length;i++)
                        if(listData[i].label==name)
                            return true;
                    return false;


            }
            function deleteNotExits() {
                var ls =  $("#gridview_{{ form.varChilds.vars.id }} .row").find("select").parent().find("input");
                var t = Array();

                for (var i=0;i<ls.length;i++)
                    t.push(ls[i].value);
                for (var i=0;i<ls.length;i++)
                {
                    if(t[i].indexOf(".")!==-1)
                    {
                        var s = t[i].split(".");
                        var item  = getItem(s,listData,0);
                        if(item==null)
                            $(ls[i]).parent().parent().remove();

                    }

                }


            }
            function updateItems(j)
            {

                listData=j;
                var s =  $("#gridview_{{ form.varChilds.vars.id }} .row");

                deleteNotExits();
                for(var i=0;i<j.length;i++)
                {
                    for(var k=0;k<j[i].properties.length;k++)
                    {
                        var exist =false;
                        var s =  $("#gridview_{{ form.varChilds.vars.id }} .row");
                        for(var w = 0;w<s.length;w++)
                        {
                            var ls1 = $(s[w]).find("input[type=hidden]");
                            if($(ls1).val()==j[i].properties[k].id)
                            {
                                exist =true;
                                break;
                            }
                        }
                        if(!exist)
                        {
                            automatic =true;
                            $("#{{ form.varChilds.vars.id }}_new").click();
                            automatic =false;
                            s =  $("#gridview_{{ form.varChilds.vars.id }} .row");
                            $(s[s.length-1]).find("optgroup").remove();

                            $(s[s.length-1]).find("input[type=hidden]").val(j[i].properties[k].id);

                            createNew(j[i].properties[k].description,j[i].properties[k].id,j[i].properties[k].caption,j);
                        }
                    }



                }

                var s =$("#gridview_{{ form.varChilds.vars.id }} .row select");
                for(var i=0;i<s.length;i++)
                {


                    var gs = $(s[i]).find("optgroup");
                    for(var k=0;k<gs.length;k++)
                    {

                        var g = $(gs[k]);
                        if(!hasItem(g.attr("label")))
                         $(g).remove();


                    }
                }
            }
            $("#qbabit_mailbundle_email_template_category").on("change",function(e){

                 var newData = null;
                 var selected = $("#qbabit_mailbundle_email_template_category option[value="+qbabit_mailbundle_email_template_category.value+"]").html();
                 for(var i=0;i<relatedClasses.length;i++)
                     if(relatedClasses[i].name==selected)
                     {
                         newData = relatedClasses[i];
                         break;
                     }
                 updateItems(newData.childs);


            });

            $("#addLinkedClass").on("click",function (e) {

                var t = '{{ url("emailtemplatecategory_related_classes",{id:-1}) }}'.replace("-1",$("#qbabit_mailbundle_email_template_category").val());

                MKLib.AjaxRequest(t, null, function (j) {
                    listData=j;
                    var s =  $("#gridview_{{ form.varChilds.vars.id }} .row");

                    deleteNotExits();
                    for(var i=0;i<j.length;i++)
                    {
                        for(var k=0;k<j[i].properties.length;k++)
                        {
                            var exist =false;
                            var s =  $("#gridview_{{ form.varChilds.vars.id }} .row");
                            for(var w = 0;w<s.length;w++)
                            {
                                var ls1 = $(s[w]).find("select");
                                if($(ls1).val()==j[i].properties[k].id)
                                {
                                    exist =true;
                                    break;
                                }
                            }
                            if(!exist)
                            {
                                automatic =true;
                                $("#{{ form.varChilds.vars.id }}_new").click();
                                automatic =false;
                                s =  $("#gridview_{{ form.varChilds.vars.id }} .row");
                                $(s[s.length-1]).find("optgroup").remove();

                                $(s[s.length-1]).find("input[type=hidden]").val(j[i].properties[k].id);

                                createNew(j[i].properties[k].description,j[i].properties[k].id,j[i].properties[k].caption,j);
                            }
                        }



                    }




                    MKLib.unlockScreen();
                }, 'json',"GET",true);
            });
        }


        {% if app.request.isXmlHttpRequest == false %}
        window.addEventListener('load', function() {
                QbaBitMailTemplateSetter();

            }
        );
        {% else %}
        jQuery(function(){

            QbaBitMailTemplateSetter();

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


{% endblock %}