{% extends 'base_software.html' %}

{% from 'host/common.html' import edit_field %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="/static/jquery/css/inventory.css">
    <script>

    $(function() {
        $('#import-spinner').hide();

        $('#on-finish-submit').on('click', function(e) {
            var trimmed_data = trim_lines($('#data_list').val());
            if (!trimmed_data) {
                bootbox.alert('<img src="/static/error.png">&nbsp; Please input data.');
                return false;
            }
            $('#import-spinner').show();
            $.ajax({
                url: "/inventory/api/import_inventory",
                type: "POST",
                dataType: 'json',
                data: {
                    general_notes: trim_lines($('#general_notes').val()),
                    data_list: trimmed_data
                },
                success: function(data) {
                    $('#import-spinner').hide();
                    if (data.status == 'OK') {
                        if (data.unimported_inventory.length == 0) {
                            bootbox.alert("Data has been imported successfully!", function() {
                                window.location = "{{ url_for('inventory.import_inventory') }}";
                            });
                        } else {
                            bootbox.alert("Data has been imported successfully. However, since duplicate serial numbers have been found, the following data was not imported:<br><br>" + data.unimported_inventory.join("<br />"), function() {
                                window.location = "{{ url_for('inventory.import_inventory') }}";
                            });
                        }

                    } else {
                        bootbox.alert('<img src="/static/error.png">&nbsp;Following errors were encountered: <br><br>' + comma2br(data.status));
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });

            return false;
        });

        $('.wizard-card').bootstrapWizard({
            'tabClass': 'nav nav-pills',
            'nextSelector': '.btn-next',
            'previousSelector': '.btn-previous',

             onInit : function(tab, navigation, index){

               //check number of tabs and fill the entire row
               var $total = navigation.find('li').length;
               $width = 100/$total;

               $display_width = $(document).width();

               if ($display_width < 600 && $total > 3) {
                   $width = 50;
               }

               navigation.find('li').css('width',$width + '%');

            },
            onNext: function(tab, navigation, index){


            },
            onTabClick : function(tab, navigation, index){
                // Disable the possibility to click on tabs
                return false;
            },
            onTabShow: function(tab, navigation, index) {
                var $total = navigation.find('li').length;
                var $current = index+1;

                var wizard = navigation.closest('.wizard-card');

                // If it's the last tab then hide the last button and show the finish instead
                if ($current >= $total) {
                    $(wizard).find('.btn-next').hide();
                    $(wizard).find('.btn-finish').show();
                } else {
                    $(wizard).find('.btn-next').show();
                    $(wizard).find('.btn-finish').hide();
                }
            }
        });




    });

    </script>
{% endblock %}

{% block main %}


<div class="row">
    <div class="col-sm-8 col-sm-offset-2">
        <!--      Wizard container        -->
        <div id="wizard-dialog" class="wizard-container">
            <div class="card wizard-card wizard-border csm-blue" id="wizard">
                <form class="form-horizontal" method="post">
                    <div class="wizard-header">
                        <h3>
                            Import Inventory <br>
                        </h3>
                    </div>
                    <ul>
                        <li><a href="#general" data-toggle="tab">NOTES</a></li>
                        <li><a href="#import_data" data-toggle="tab">IMPORT DATA</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane" id="general">
                            <div class="row">
                                <h4 class="info-text">If the import data does not contain notes, the notes entered below will be used.</h4>
                                {{ edit_field(form.general_notes, field_width="col-sm-12", spellcheck="false", rows="10", class="form-control") }}
                            </div>
                        </div>
                        <div class="tab-pane" id="import_data">
                            <div class="row">
                                <a class="btn btn-sm btn-default pull-right" data-toggle="collapse" href="#import-instructions" style="margin-right: 10px;">Import Instructions <b class="caret"></b></a>
                                <div class="collapse" id="import-instructions">
                                    <div class="col-sm-12">
                                        <ul>
                                            <li>Paste the import data onto the text window below.</li>
                                            <li>The first data line must be a header line.</li>
                                            <li>The data fields must be comma delimited.</li>
                                            <li>If a data field does not contain any value, leave it blank.</li>
                                            <li>The serial number data field cannot be blank.</li>
                                            <li>For data with duplicate serial numbers, only the first data entry will be imported, the rest will be ignored.</li>
                                            <li>The notes data field must be double-quoted, if not blank.</li>
                                            <li>Acceptable header fields are serial_number, model_name, and notes.</li>
                                            <li>Mandatory header field is serial_number.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="col-sm-12" style="font-family: monospace;font-size:medium">
                                <b>serial_number,model_name,notes</b>&nbsp;<- header (model_name and notes are optional)<br>
                                FOC162980AA,, <- leave blank for empty field(s)<br>
                                FOT1981P81A,A9K-RSP440-SE,"spare RSP"<br>
                            </div>
                            {{ edit_field(form.data_list, field_width="col-sm-12", spellcheck="false", rows="10", class="form-control") }}
                        </div>
                    </div>
                    <div class="wizard-footer">
                        <div class="pull-right">
                            <input type='button' class='btn btn-next btn-fill btn-primary btn-wd btn-sm' name='next' value='Next' />
                            <input id='on-finish-submit' data-dismiss="modal" type='button' class='btn btn-finish btn-fill btn-primary btn-wd btn-sm' name='finish' value='Finish' />
                        </div>
                        <div class="pull-left">
                            <input type='button' class='btn btn-previous btn-fill btn-default btn-wd btn-sm' name='previous' value='Previous' />
                        </div>
                        <span class="import-spinner">
                            <center><img id="import-spinner" src="{{ url_for('static', filename='spinner.gif') }}"></center>
                        </span>
                        <div class="clearfix"></div>
                    </div>
                </form>
            </div>
        </div>
        <!-- wizard container -->
    </div>
</div>
{% endblock %}