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

<div class="x_panel">
    <div class="x_title">
        <h2>
            Production and testing information
        </h2>
        <ul class="nav navbar-right panel_toolbox">
            <li class="dropdownDeviceSelectMenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"  onclick="WizartResetProduction()"><i class="fa fa-remove"></i></a>
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div class="x_content" style="">
        <form class="form-horizontal" id="DeviceProductionForm" action="{% url 'Applications.Devices.Production.views.production_return_form' %}" method="post">
            {{ form.device}}
            {{ form.status | bootstrap_horizontal }}
            {{ form.note | bootstrap_horizontal }}
            <hr>
            <div id="wizard" class="form_wizard wizard_horizontal" style="border: solid; border-width:thin; padding: 10pt">
                <ul class="wizard_steps">
                    <li>
                        <a href="#step-1">
                            <span class="step_no">1</span>
                            <span class="step_descr">Programming<br />
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#step-2">
                            <span class="step_no">2</span>
                            <span class="step_descr">Preparation<br />
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#step-3">
                            <span class="step_no">3</span>
                            <span class="step_descr">Hardware test<br />
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#step-4">
                            <span class="step_no">4</span>
                            <span class="step_descr">Functional test<br />
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#step-5">
                            <span class="step_no">5</span>
                            <span class="step_descr">Finalization<br />
                            </span>
                        </a>
                    </li>
                </ul>
                <div id="step-1">
                    <h2 class="StepTitle" style="text-align: center">Step 1 - Programming</h2>

                    {{ form.arm_bootloader_programmed | bootstrap_horizontal }}
                    {{ form.arm_bootloader_version | bootstrap_horizontal }}
                    {{ form.pic_programmed | bootstrap_horizontal }}
                    {{ form.pic_version | bootstrap_horizontal }}
                    {{ form.arm_software_programmed | bootstrap_horizontal }}
                    {{ form.arm_software_version | bootstrap_horizontal }}
                    {{ form.current_consumption | bootstrap_horizontal }}
                    {{ form.step1_note | bootstrap_horizontal }}

                </div>
                <div id="step-2">
                    <h2 class="StepTitle" style="text-align: center">Step 2 - Preparation</h2>
                    {{ form.identifier_inserted | bootstrap_horizontal }}
                    {{ form.sd_inserted | bootstrap_horizontal }}
                    {{ form.sd_formatted | bootstrap_horizontal }}
                    {{ form.step2_note | bootstrap_horizontal }}
                </div>
                <div id="step-3">
                    <h2 class="StepTitle" style="text-align: center">Step 3 - Hardware test</h2>
                    {{ form.oscillator_checked | bootstrap_horizontal }}
                    {{ form.analog_power_checked | bootstrap_horizontal }}
                    {{ form.ai1_read_value | bootstrap_horizontal }}
                    {{ form.ai1_checked | bootstrap_horizontal }}
                    {{ form.ai2_read_value | bootstrap_horizontal }}
                    {{ form.ai2_checked | bootstrap_horizontal }}
                    {{ form.di1_checked | bootstrap_horizontal }}
                    {{ form.di2_checked | bootstrap_horizontal }}
                    {{ form.lcd_checked | bootstrap_horizontal }}
                    {{ form.keyboard_checked | bootstrap_horizontal }}
                    {{ form.power_charging_checked | bootstrap_horizontal }}
                    {{ form.usb_charging_checked | bootstrap_horizontal }}
                    {{ form.step3_note | bootstrap_horizontal }}
                </div>
                <div id="step-4">
                    <h2 class="StepTitle" style="text-align: center">Step 4 - Functional test</h2>
                    {{ form.time_sync_ok | bootstrap_horizontal }}
                    {{ form.fast_log_ok | bootstrap_horizontal }}
                    {{ form.interval_ok | bootstrap_horizontal }}
                    {{ form.realtime_ok | bootstrap_horizontal }}
                    {{ form.step4_note | bootstrap_horizontal }}
                </div>
                <div id="step-5">
                    <h2 class="StepTitle" style="text-align: center">Step 5 - Finalization</h2>
                    {{ form.date_time_set | bootstrap_horizontal }}
                    {{ form.total_resetted | bootstrap_horizontal }}
                    {{ form.coating | bootstrap_horizontal }}
                    {{ form.screwing | bootstrap_horizontal }}
                    {{ form.step5_note | bootstrap_horizontal }}
                </div>

            </div>

        </form>
    </div>
</div>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="PromptWindow" aria-hidden="true" data-backdrop="static" style="overflow-y:scroll">
    <div class="modal-dialog modal-lg" role="document" >
        <div class="modal-content" id="PromptWindowContent">
            <input type="hidden" value="{{ device_id }}" name="device_id">
            <input type="hidden" value="{{ device_identifier }}" name="device_identifier">
            <h2>
                You have possibly missed to save device information. Do you want to save new status?
            </h2>
            <ul class="nav nav-tabs" id="DeviceGeneralInformation">
                <li class="active"><a>
                    <form class="form-horizontal">
                        {{ form.device}}
                        {{ form.status | bootstrap_horizontal }}
                        {{ form.note | bootstrap_horizontal }}
                    </form>
                </a></li>
            </ul>
            <button type="button" class="btn btn-primary" onclick="modalSaveForm()" data-toggle="modal" id="modalSaveButton">Save</button>
            <button type="button" class="btn btn-primary" onclick="modalCancel()" data-toggle="modal" id="modalCloseButton">Close</button>
            <hr>
        </div>
    </div>
</div>

<script src="/static/vendors/jQuery-Smart-Wizard/js/jquery.smartWizard.js"></script>
<script type="text/javascript">

    $(document).ready(function() {
        FormChanged = false;
        initWizard();
        $('#DeviceProductionForm input').on( 'input', function() {
            $(".buttonFinish").removeClass("btn-primary");
            $(".buttonFinish").addClass("btn-warning");
            FormChanged = true;
        });
        $('#DeviceProductionForm select').on( 'input', function() {
            $(".buttonFinish").removeClass("btn-primary");
            $(".buttonFinish").addClass("btn-warning");
            FormChanged = true;
        });
    });

    function modalSaveForm() {
    }

    function modalCancel() {

    }

    function initWizard() {
        $('#wizard').smartWizard({
            selected: {{ step }},
            transitionEffect: 'slide',
            enableFinishButton: true, // makes finish button enabled always
            labelFinish: 'Save',
            onLeaveStep: WizardLeaveStep, // triggers when leaving a step
            onShowStep: null,  // triggers when showing a step
            onFinish: WizardFinishClicked  // triggers when Finish button is clicked
        });

        $('.buttonNext').addClass('btn btn-info');
        $('.buttonPrevious').addClass('btn btn-info');
        $('.buttonFinish').addClass('btn btn-primary');
    }

    function WizardLeaveStep(element, context) {
        var isStepValid = true;
        WizardSaveCurrentStep(context.toStep-1);
        WizardSubmitForm();
        return isStepValid;
    }

    function WizardFinishClicked() {
        WizardSubmitForm();
    }

    function WizardSubmitForm(){
        var frm = $('#DeviceProductionForm');
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            headers: {'X-CSRFToken': getCookie('csrftoken')},
            success: function (data) {
                if (data==='Ok'){
                    $(".buttonFinish").removeClass("btn-warning");
                    $(".buttonFinish").addClass("btn-primary");
                }else{
                    alert('Error saving production information');
                }
            },
            error: function(data) {
                alert('Error saving production information');
            }
        });
    }

    function WizardSaveCurrentStep(step_number){
        var submit_info = { 'device_id' : '{{ device_id }}',
                            'step'      : step_number};

        $.ajax({
            type    : 'POST',
            url     : "{% url 'Applications.Devices.Production.views.production_save_step' %}",
            data    : JSON.stringify(submit_info),
            headers : {'X-CSRFToken': getCookie('csrftoken')},
            success: function (data) {

            },
            error: function(data) {
                alert(data);
            }
        });

    }

    function  WizartResetProduction() {
        var r = confirm("Are you sure you want to reset production information?");
        if (r === true) {
            var submit_info = { 'device_id' : '{{ device_id }}'};

            $.ajax({
                type    : 'POST',
                url     : "{% url 'Applications.Devices.Production.views.production_reset' %}",
                data    : JSON.stringify(submit_info),
                headers : {'X-CSRFToken': getCookie('csrftoken')},
                success: function (data) {

                    if (data.status==='Ok'){
                        refreshProductionForm();
                    }else{ 
                        alert('Error reseting production information');
                    }
                },
                error: function(data) {
                    alert(data);
                }
            });
        }
    }



</script>