{% extends 'base_software.html' %}

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

{% block head %}
<script>

$(function() {

    $('#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;
        }
        $.ajax({
            url: "/host_import/api/import_hosts",
            type: "POST",
            dataType: 'json',
            data: {
                region_id: $('#region').val(),
                jump_host_id: $('#jump_host').val(),
                software_profile_id: $('#software_profile').val(),
                data_list: trimmed_data
            },
            success: function(data) {
                // re-initialize
                $('#import_errors').val('');

                if (data.status == 'OK') {
                    bootbox.alert("Data has been imported successfully!", function() {
                        window.location = "{{ url_for('host_import.import_hosts') }}";
                    });
                } else {
                    $('#import_errors').val(data.status);
                    display_view_import_error_dialog();
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });

        return false;
    });

    function display_view_import_error_dialog() {
        $('#view-import-error-dialog').modal({show: true, backdrop: 'static'});
    }

    $('#import_range').on('click', function(e) {
        //display_ip_range_dialog();
        $('#ip-range-dialog').modal({
            show: true,
            backdrop: 'static'
        });
    });

    $('.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){
            if (index == 1) {
                if ($('#region option:selected').val() == -1) {
                    bootbox.alert("Region is mandatory, but it has not been specified.");
                    return false;
                }
            } //etc.

        },
        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();
            }
        }
    });

    $('#on-ip-range-dialog-done').on('click', function(e) {
        if (validate_ip_range_input() == false) {
            return false;
        }
        var role = $('#role').val()
        if (role.indexOf(',') >= 0) {
            role = '"' + role + '"';
        }

        var step = $('#step').val()
        if (step == '' || !$.isNumeric(step)) {
            step = 1;
        } else {
            step = parseInt(step);
        }

        $.ajax({
            url: "/host_import/api/generate_ip_range",
            dataType: 'json',
            type: 'POST',
            data: {
                data_list: trim_lines($('#data_list').val()),
                beginIP: $('#beginIP').val(),
                endIP: $('#endIP').val(),
                step: step,
                region2: $('#region2').val(),
                role: role,
                connection: $('#connection_type').val(),
                username: $('#username').val(),
                password: $('#password').val()
            },
            success: function(data) {
                if(data.status == 'OK'){
                    old_data_list = trim_lines($('#data_list').val())
                    new_data_list = old_data_list + data.data_list
                    $('#data_list').val(new_data_list);
                } else {
                    bootbox.alert(data.status)
                }
            }
        });

    });

    function validate_ip_range_input(){
        beginIP = $('#beginIP').val()
        endIP = $('#endIP').val()

        if (beginIP == '' || endIP == '') {
            bootbox.alert("You must specify a beginning and an ending IP address.");
            return false;
        }

        begin = beginIP.split('.');
        end = endIP.split('.');
        if (begin.length != 4 || end.length != 4) {
            bootbox.alert("An invalid IP address has been entered");
            return false;
        }

        for (i=0; i<4; i++) {
            b = parseInt(begin[i]);
            e = parseInt(end[i]);

            if (b > 255 || e > 255) {
                bootbox.alert("An invalid IP address has been entered.");
                return false;
            }
        }

        for (i=0; i<4; i++) {
            b = parseInt(begin[i]);
            e = parseInt(end[i]);

            if (b < e) {
                return true;
            } else if (b > e) {
                bootbox.alert("Beginning IP cannot be greater than ending IP.");
                return false
            }
        }

        bootbox.alert("Beginning and ending IPs cannot be the same.");
        return false;
    }

});

</script>

<style>
    .modal-dialog {
        width: 850px;
    }
</style>

{% endblock %}

{% block main %}

{{ ip_range_dialog(ip_range_dialog_form) }}

<div id="view-import-error-dialog" class="modal" role="dialog">
    <div class="modal-dialog">
        <form method="post" class="form-horizontal">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <center><img src="/static/error.png">&nbsp;<strong>Followings are detected import errors</strong></center><br>
                    {{ edit_field(form.import_errors, rows="15", style="width: 100%; white-space: nowrap;", field_width="col-sm-12", class="form-control") }}
                </div>
            </div>
        </form>
    </div>
</div>


<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 Hosts <br>
                        </h3>
                    </div>
                    <ul>
                        <li><a href="#general" data-toggle="tab">GENERAL</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 a region, the region selected below will be used.<br>
                                    The jump host and software profile are optional.</h4>
                                {{ edit_field(form.region, field_width="col-sm-4", class="form-control") }}
                                {{ edit_field(form.jump_host, field_width="col-sm-4", class="form-control") }}
                                {{ edit_field(form.software_profile, field_width="col-sm-4", class="form-control", placeholder="Optional") }}
                            </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>
                                <h4 class="info-text">Click Import Instructions for more information.</h4>
                                <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 row is the header which identifies the data being imported.</li>
                                            <li>Mandatory header fields are hostname, ip, and connection (acceptable values: 'telnet' or 'ssh').</li>
                                            <li>Acceptable header fields are hostname, region, location, roles, ip, username, password, connection, port, and enable_password.</li>
                                            <li>The second row onwards are import data which must match the header and the data fields must be comma delimited.</li>
                                            <li>The following data fields roles, ip, and port may contain multiple values.</li>
                                            <li>If a data field contains multiple values, they must be separated by comma(s) and the data field must be double-quoted.</li>
                                            <li>If a data field does not contain any value, leave it blank.</li>
                                            <li>If no username and password is specified, the default host username and password defined on CSM Server will be used.</li>
                                            <li>The enable_password field is only needed for IOS and IOS XE devices.</li>
                                            <li>Acceptable characters for hostname and region are a-z, A-Z, 0-9, and (). -_</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="col-sm-12" style="font-family: monospace;font-size:medium">
                                <b>hostname,region,location,roles,ip,username,password,connection,port,enable_password</b> <- header<br>
                                myhost1,California USA,blg 20,,172.27.22.34,johnsmith,john123,telnet,, <- blank for empty fields<br>
                                myhost2,California USA,blg 20,PE,172.27.22.35,davidsmith,david123,ssh,"2033,2034",
                            </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 type="button" class="btn btn-fill btn-finish btn-default btn-wd btn-sm" name="import_range" id="import_range" value="Use IP Range" />
                            <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>
                        <div class="clearfix"></div>
                    </div>
                </form>
            </div>
        </div>
        <!-- wizard container -->
    </div>
</div>
{% endblock %}