{% 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_av1">
            {% if lang == 'hr' %}
                Napon CH1
            {% else %}
                Voltage CH1
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_av2">
            {% if lang == 'hr' %}
                Napon CH2
            {% else %}
                Voltage CH2
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_ac1">
            {% if lang == 'hr' %}
                Struja CH1
            {% else %}
                Current CH1
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_ac2">
            {% if lang == 'hr' %}
                Struja CH2
            {% else %}
                Current CH2
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_pi1">
            {% if lang == 'hr' %}
                Pulsni CH1
            {% else %}
                Pulse CH1
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_pi2">
            {% if lang == 'hr' %}
                Pulsni CH2
            {% else %}
                Pulse CH2
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_ti1">
            {% if lang == 'hr' %}
                Ukupni CH1
            {% else %}
                Total CH1
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_ti2">
            {% if lang == 'hr' %}
                Ukupni CH2
            {% else %}
                Total CH2
            {% endif %}
        </a></li>
    </ul>
    <div class="tab-content">
        <div id="notification_menu_av1" class="tab-pane fade in active" style="margin-top: 15px">
            {{ form.ch1voltagerecalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.ch1voltagerecalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.ch1voltagerecalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_av2" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.ch2voltagerecalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.ch2voltagerecalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.ch2voltagerecalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_ac1" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.ch1currentrecalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.ch1currentrecalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.ch1currentrecalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_ac2" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.ch2currentrecalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.ch2currentrecalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.ch2currentrecalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_pi1" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.ch1pulsefrequencyrecalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.ch1pulsefrequencyrecalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.ch1pulsefrequencyrecalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_pi2" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.ch2pulsefrequencyrecalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.ch2pulsefrequencyrecalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.ch2pulsefrequencyrecalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_ti1" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.ch1pulsetotalrecalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.ch1pulsetotalrecalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.ch1pulsetotalrecalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_ti2" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.ch2pulsetotalrecalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.ch2pulsetotalrecalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.ch2pulsetotalrecalculatefactor | 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>