{% load bootstrap %}
{% load staticfiles %}

<form class="form-horizontal" id="RecalculateUnitsForm" action="{% url 'Applications.Measure.views.measure_unit_recalculation_form' %}" method="post">
    <div hidden>
        {{ form.lldevicelist | bootstrap_horizontal }}
    </div>

    <ul class="nav nav-tabs" id="NotificationTabs">
        <li class="active"><a data-toggle="tab" href="#notification_menu_f1">
            {% if lang == 'hr' %}
                Protok 1
            {% else %}
                Flow 1
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_f2">
            {% if lang == 'hr' %}
                Protok 2
            {% else %}
                Flow 2
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_t1">
            {% if lang == 'hr' %}
                Ukupni protok 1
            {% else %}
                Total flow 1
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_t2">
            {% if lang == 'hr' %}
                Ukupni protok 2
            {% else %}
                Total flow 2
            {% endif %}
        </a></li>
    </ul>

    <div class="tab-content">
        <div id="notification_menu_f1" class="tab-pane fade in active" style="margin-top: 15px">
            {{ form.flow1recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.flow1recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.flow1recalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_f2" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.flow2recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.flow2recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.flow2recalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_t1" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.totalflow1recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.totalflow1recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.totalflow1recalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_t2" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.totalflow2recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.totalflow2recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.totalflow2recalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
    </div>
</form>

<button type="button" style="margin-top:20px;" class="btn btn-primary btn-block" onclick="save_recalculate_units();">
    {% if lang == 'hr' %}
        Spremi promjene
    {% else %}
        Save changes
    {% endif %}
</button>


<script type="text/javascript">


    function save_recalculate_units() {
        var frm = $('#RecalculateUnitsForm');
        var frmData=frm.serialize();
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            headers: {'X-CSRFToken': getCookie('csrftoken')},
            success: function (data) {
                if (data==='Ok'){
                    alert('Data saved');
                }else{
                    alert('Error saving');
                }
            },
            error: function(data) {
                alert('Error saving');
            }
        });
    }
</script>