{% extends 'base_schedule_install.html' %}

{% from 'share/select_hosts_by_platform.html' import select_hosts_by_platform %}

{% block child_head %}
<script src="/static/jquery/js/select_hosts_by_platform.js"></script>
{% endblock %}

{% block head_schedule_install %}

$('.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) {
            populate_region_server();

            var selected_hosts = host_selector.get_selected_items();
            if (selected_hosts.length == 0) {
                bootbox.alert("No host has been selected.");
                return false;
            }
            $('#hidden_selected_hosts').val(selected_hosts);
            populate_supported_install_actions(selected_hosts[0]);
        } //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-finish-submit').click(function(e) {
    if (!validate(install_actions)) {
        return false;
    }

    on_final_submit(e, $('#form'), $('#hidden_selected_hosts').val());

    // prevent the form from closing 
    return false;
});

$('#browse-install-history-button').on('click', function(e) {
    var selected_hosts = host_selector.get_selected_items();
    if (selected_hosts.length == 0) {
        bootbox.alert("Host has not been specified.");
    } else {
        on_display_install_history_dialog(selected_hosts);
    }
});

$('#browse-inactive-software-button').on('click', function(e) {
    invoke_host_software_dialog(FILTER_ACTIVATE);
});

$('#browse-remove-software-button').on('click', function(e) {
    invoke_host_software_dialog(FILTER_REMOVE);
});

$('#browse-deactivate-software-button').on('click', function(e) {
    invoke_host_software_dialog(FILTER_DEACTIVATE);
});

function invoke_host_software_dialog(title) {
    var selected_hosts = host_selector.get_selected_items();
    if (selected_hosts.length == 0) {
        bootbox.alert("Host has not been specified.");
    } else {
        on_display_host_software_dialog(get_region_id(), selected_hosts, title);
    }
}

function get_region_id() {
    if ($('#region').val() != null) {
        return $('#region').val();
    }
    return 0;
}

function populate_region_server() {
    region_id = get_region_id();

    // Now, gets the servers for the selected region
    $('#server_dialog_server').empty().append('<option value=-1></option>');
    $('#cisco_dialog_server').empty().append('<option value=-1></option>');

    $.ajax({
        url: "/api/get_servers/region/" + region_id,
        dataType: 'json',
        success: function(data) {
            $.each(data, function(index, element) {
                for (i = 0; i < element.length; i++) {
                    var server_id = element[i].server_id;
                    var hostname = element[i].hostname;

                    $('#server_dialog_server').append('<option value="' + server_id + '">' + hostname + '</option>');
                    $('#cisco_dialog_server').append('<option value="' + server_id + '">' + hostname + '</option>');
                }
            });

        },
        error: function(xhr, status, errorThrown) {
            bootbox.alert("Unable to retrieve server list. Error=" + errorThrown);
        }
    });
}

$('#browse-server-button').on('click', function(e) {
    var selected_hosts = host_selector.get_selected_items();
    if (selected_hosts.length == 0) {
        bootbox.alert("Host has not been specified.");
    } else {
        on_display_server_software_dialog(get_region_id(), selected_hosts);
    }
});

$('#browse-cisco-button').on('click', function(e) {
    var selected_hosts = host_selector.get_selected_items();
    on_display_cisco_software_dialog(get_region_id(), selected_hosts);
});


{% endblock %}

{% block main_schedule_install %}

<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 id="form" class="form-horizontal" method="post">
                    <div class="wizard-header">
                        <h3>
                            Schedule Batch Installations <br>
                        </h3>
                    </div>
                    <ul>
                        <li><a href="#select_hosts" data-toggle="tab">SELECT HOSTS</a></li>
                        <li><a href="#select_install_action" data-toggle="tab">SELECT INSTALL ACTION</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane" id="select_hosts">
                            <div class="row">
                                {{ select_hosts_by_platform(form.platform, form.software, form.region, form.role) }}
                            </div>
                        </div>
                        <div class="tab-pane" id="select_install_action">
                            {{ common_schedule_install_gui() }}
                        </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' />
                            <img id="submit-spinner" src="{{ url_for('static', filename='spinner.gif') }}">
                            <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 %}