{% extends "base.html" %}
{% load i18n %}


{% block title %}{{ _("Voimaperheet") }}{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            <h1>{{ _("Voimaperheet-neuvolakysely") }}</h1>
            <h3>{{ _("vanhemmille tai huoltajille 4-vuotiaan lapsen laajan terveystarkastuksen tueksi") }}</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">

            <form method="POST" action="." class="form-horizontal" id="productForm">
                <ul class="nav nav-pills">
                    {% for c, qs in questions_by_category.iteritems  %}
                    <li class="active">
                        <a href="#form-part-{{ forloop.counter }}" data-toggle="tab">{{forloop.counter }}</a></li>
                    {% endfor %}
                </ul>
                {% csrf_token %}
                <div class="row">
                    {{ form.non_field_errors }}
                </div>

                {% for category, questions in questions_by_category.iteritems  %}
                    {% include 'partials/question_category.html' %}
                {% endfor %}
                <div class="help-block with-errors"></div>

                <button type="submit" class="form-submit-btn btn btn-success btn-lg btn-block" id="sendButton">{{ _('Lähetä') }}!</button>
             <!-- Previous/Next buttons -->
                <ul class="pager wizard"><span class="custom-progress">
                    <li class="custom-progress-prev"><a href="#form-part-prev" aria-label="Previous">&laquo; {{ _('Edellinen') }}</a></li>
                    <li class="custom-progress-next"><a href="#form-part-next" aria-label="Next">{{ _('Seuraava') }} &raquo;</a></li>
                </ul></span>
                 <ul class="pager wizard">
                    <li class="previous"><a href="javascript: void(0);">Previous</a></li>
                    <li class="next"><a href="javascript: void(0);">Next</a></li>
                </ul>
            </form>
        </div>
    </div>

    <!--
    <nav>
        <div class="text-center">
            <ul class="pagination">
                <li class="custom-progress-prev">
                    <span class="custom-progress">
                        <a href="#form-part-prev" aria-label="Previous">&laquo; {{ _('Edellinen') }}</a>
                    </span>
                </li>

                {% for c, qs in questions_by_category.iteritems  %}
                    <li class="part-link-{{ forloop.counter }}">
                        <span class="custom-progress">
                            <a href="#form-part-{{ forloop.counter }}"> {{forloop.counter }} </a>
                        </span>
                    </li>
                {% endfor %}

                <li class="custom-progress-next">
                    <span class="custom-progress">
                        <a href="#form-part-next" aria-label="Next">{{ _('Seuraava') }} &raquo;</a>
                    </span>
                </li>
            </ul>
        </div>
    </nav>-->


{% endblock %}

{% block extra_js %}
    {{ block.super }}


    <script>

    $(document).ready(function() {
        //$('body, input[type=text]').addClass('form-control');
        $('body, input[type=text]').attr("required", "true");

        $("#productForm")
            .formValidation({
                framework: 'bootstrap',
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                excluded: ':disabled',
            })

        .bootstrapWizard({
            tabClass: 'nav nav-pills',
            onTabClick: function(tab, navigation, index) {
                return validateTab(index);
            },
            onNext: function(tab, navigation, index) {
                var numTabs    = $('#productForm').find('.wrapper-div').length,
                    isValidTab = validateTab(index - 1);
                if (!isValidTab) {
                    return false;
                }

                return true;
            },
            onPrevious: function(tab, navigation, index) {
                return validateTab(index + 1);
            },
            onTabShow: function(tab, navigation, index) {
                // Update the label of Next button when we are at the last tab
                var numTabs = $('#productForm').find('.wrapper-div').length;
                $('#productForm')
                    .find('.next')
                        .removeClass('disabled')    // Enable the Next button
                        .find('a')
                        .html(index === numTabs - 1 ? 'Install' : 'Next');
            }
        });


        function validateTab(index) {
            var fv   = $('#productForm').data('formValidation'), // FormValidation instance
                // The current tab
                $tab = $('#productForm').find('.wrapper-div').eq(index);

            // Validate the container
            fv.validateContainer($tab);

            var isValidStep = fv.isValidContainer($tab);
            if (isValidStep === false || isValidStep === null) {
                // Do not jump to the target tab
                return false;
            }

            return true;

        }
    });

        // Jaa formi osiin
        $(function() {
            var $parts = $('.form-part');

            if ($parts.length === 0) { return }

            // Initial part number is 1
            var partNumber = 1;

            var updateParts = function (activePartNumber) {
                // Hide all form parts
                $('.form-part').css('display', 'none');

                // Display the correct form part
                $('#form-part-' + activePartNumber).css('display', 'block');

                // Remove active class from every part link
                $('.custom-progress a')
                    .removeClass('custom-active');

                // Add active class to the correct part link
                $('.part-link-' + activePartNumber + ' a')
                    .addClass('custom-active');

                // Set correct href to prev button
                $('.custom-progress-prev a')
                    .attr('href', '#form-part-' + (activePartNumber-1));

                // Set correct href to next button
                $('.custom-progress-next a')
                    .attr('href', '#form-part-' + (activePartNumber+1));

                // Display prev button if not on the first part
                if (activePartNumber > 1) {
                    $('.custom-progress-prev').css('display', 'inline');
                } else {
                    $('.custom-progress-prev').css('display', 'none');
                }

                // Display next button if not on the last part
                if (activePartNumber < $parts.length) {
                    $('.custom-progress-next').css('display', 'inline');
                } else {
                    $('.custom-progress-next').css('display', 'none');
                }

                // Display the submit button if on the last part
                if (activePartNumber === $parts.length) {
                    $('.form-submit-btn').css('display', 'inline');
                } else {
                    $('.form-submit-btn').css('display', 'none');
                }
            }

            // Actions to the page numbers
            $('.custom-progress a').click(function(event) {
                event.preventDefault();

                // Get the new part number
                var partNumber = parseInt(event.target.hash.split('-').slice(-1));

                // Scroll the page up
                scrollTo(0,0);

                updateParts(partNumber);
            });

            updateParts(partNumber);

        });

    </script>
{% endblock %}