{% load cms_tags  djangocms_forms_tags i18n sekizai_tags staticfiles %}

<script type="application/javascript">
var form = {
{% for item in results.form_data %}
        {% if item.label %}
        '{{ item.label }}'
        {% else %}
        '{{ item.name }}'
        {% endif %}
        : { 
            'size': 
            {% if item.value == True %}
            1
            {% elif item.value == False or item.value == None %}
            0
            {% else %}
            {{ item.value|length }}
            {% endif %}
            ,
            {% if item.type != 'checkbox_multiple' %}
                'values': '{{ item.value }}',
            {% else %}
                'values': [
                {% if item.value|length > 0 %}
                    {% for val in item.value %}
                    '{{ val }}',
                    {% endfor %}

                {% endif %}
                ],
            {% endif %}
            'name': '{{ item.name }}'
        },
{% endfor %}
};
</script>

<div class="forms" id="{{ instance.form_id }}">
    {% if instance.title %}
        <h3 class="title">{{ instance.title }}</h3>
    {% endif %}
    {% if instance.description %}
        <div class="description">
            {{ instance.description|safe }}
        </div>
    {% endif %}


    <div class="form-wrapper">
        <form action="{{ form.submission_url }}" method="POST" enctype="multipart/form-data">
            <div class="form-errors" style="display:none;"></div>

            <div id="{{ tabs_list_id }}" ng-tabs class="tabs-plugin service-trademark-product-class">
                <div class="headers">
                    <ul class="tabs-list list-unstyled list-inline">
                        {% for field in form.visible_fields %}
                            {% if field|is_checkboxselectmultiple %}
                                {% if forloop.first %}  
                                    <li ng-tab-head="active" class="text-nowrap"><a ng-click="$event.preventDefault()" href="#{{ field.id_for_label }}">{{ field.label }}</a> <span class="category_size badge" id="{{ field.name }}_label"></span></li>
                                {% else %}
                                    <li ng-tab-head="active"><a ng-click="$event.preventDefault()" href="#{{ field.id_for_label }}">{{ field.label }}</a> <span class="category_size badge" id="{{ field.name }}_label"></span></li>
                                {% endif %}

                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
                <div class="variants">
                {% for field in form.visible_fields %}
                    <div id="{{ field.id_for_label }}" ng-tab-body class="tab-body">
                        {% if field|is_checkboxselectmultiple %}
                            {{ field }}
                        {% endif %}

                    </div>
                {% endfor %}
                </div>
            </div>
                {% verbatim %}  
                    <div ng-show="classes_values.length > 0">
                    <h5>{{ GetNoun(classes, 'Выбранн', 'Выбраны', 'Выбрано') }} {{ classes }}  {{ GetNoun(classes, 'класс', 'класса', 'классов') }}</h5>
                        <ul class="list-unstyled list-inline">
                            <li ng-repeat="title in classes_values"><span class="label label-default">{{ title }}</span></li>
                        </ul>
                    </div>
                    {% endverbatim %}  
            {% for field in form.visible_fields %}
                {% if not field|is_checkboxselectmultiple %}
                    <div class="field-wrapper {{ field|input_class }} {{ field.css_classes }}">
                        <div class="field-errors" style="display:none;"></div>
                        {% if field|is_checkbox %}
                            {{ field }}
                        {% endif %}
                        <label for="{{ field.id_for_label }}">
                            {{ field.label }}
                        </label>
                        {% if field|is_textarea %}
                            <div id="help-text-{{ field.auto_id }}" class="help-text">{{ field.help_text|safe }}</div>
                        {% endif %}
                        {% if not field|is_checkbox %}
                            <p>{{ field }}</p>
                        {% endif %}
                        {% if not field|is_textarea and field.help_text %}
                            <div id="help-text-{{ field.auto_id }}" class="help-text">{{ field.help_text|safe }}</div>
                        {% endif %}
                    </div>
                {% endif %}
            {% endfor %}


           
            {% csrf_token %}

            {% for hidden in form.hidden_fields %}
                {{ hidden }}
            {% endfor %}
            <div class="button-wrapper submit">
                <button class="form-button btn btn-primary" type="submit" value="{{ instance.submit_btn_txt }}">{{ instance.submit_btn_txt }}</button>
            </div>
        </form>
    </div>
    <div class="form-success" style="display: none;">
        {% if instance.post_submit_msg %}
            <p>{{ instance.post_submit_msg|safe }}</p>
        {% else %}
            {% blocktrans %}
                <h3>Submission successful</h3>
                <p>Thank You! Your form has been successfully submitted!</p>
            {% endblocktrans %}
        {% endif %}
    </div>
</div>

{% addtoblock "js" %}
    <script src="{% static 'js/djangocms_forms/libs/jquery.form.min.js' %}"></script>
    <script src="{% static 'js/djangocms_forms/djangocms_forms.js' %}"></script>
    <script type="application/javascript">
        $(function() {
           $('.forms').djangocms_forms();

            $(".service-trademarks-class-form input[type=checkbox]").each(function () {
                $(this).change(updateCount);
              });

              function updateCount () {
                var count = $(".service-trademarks-class-form input[type=checkbox]:checked").size(),
                    scope = angular.element($('.bill')).scope(),
                    categories = {},
                    classes_values = [];

                $(".service-trademarks-class-form input[type=checkbox]:checked").each(function () {
                    var $el = $(this),
                        name = $el.attr('name');

                        classes_values = classes_values.concat($el.val());
                        if(categories[name] > 0) {
                            categories[name] += 1;
                        } else {
                            categories[name] = 1;
                        }
                });


                if(count == 0) {
                    if(scope.classes > 0) {
                        count = scope.classes;
                    } else {
                        count = 1;
                    }
                }

                scope.$apply(function () {
                    scope.classes = count;
                    $(".category_size").html("");
                    for(var index in categories) {
                        var cat_count = categories[index];

                        $("#" + index + "_label").html(cat_count);
                    }

                    if(scope.classes > 5) {
                        scope.extra_classes = scope.classes - 5;
                    } else {
                        scope.extra_classes = 0;
                    }
                    if(scope.classes > 3) {
                        scope.kz_extra_classes = scope.classes - 3;
                    } else {
                        scope.kz_extra_classes = 0;
                    }

                    scope.classes_values = classes_values;
                });
              };
        });
    </script>
{% endaddtoblock %}