{% 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 () {
        var table_finished_drawing = 0;
        var search_clicked = false;
        var search_spinner = $('#search_spinner');
        var no_inventory_match = $('#no-inventory');
        var search_filters = {};
        search_spinner.css("visibility", "hidden");

        no_inventory_match.hide();

        function prepare_filters_for_rest_api(json_data, search_available_or_not) {
            json_data.available = search_available_or_not;

            if (search_filters['serial_number']) {
                json_data.serial_number = search_filters['serial_number'];
            }

            if (search_filters['region_ids']) {
                json_data.region_ids = search_filters['region_ids']
            }
            if (search_filters['chassis_types']) {
                json_data.chassis_types = search_filters['chassis_types']
            }
            if (search_filters['software_versions']) {
                json_data.software_versions = search_filters['software_versions']
            }
            if (search_filters['partial_model_names']) {
                json_data.partial_model_names = search_filters['partial_model_names']
            }
            if (search_filters['model_names']) {
                json_data.model_names = search_filters['model_names']
            }

            if (search_filters['vid']) {
                json_data.vid = search_filters['vid'];
            }

            return json_data;
        }

        var available_inventory_table = $("#available-inventory-datatable").DataTable({
            "serverSide": true,
            "ajax": {
                "url": "{{ url_for('datatable.api_search_inventory') }}",
                "data": function (d) {
                    prepare_filters_for_rest_api(d, true);
                    define_column_names(d);
                }
            },
            "columns": [
                { "data": "model_name" },
                { "data": "serial_number" },
                { "data": "vid" },
                { "data": "description" },
                { "data": "notes"}
            ],
            "order": [
                [0, "asc"]
            ],
            "pageLength": 100,
            "columnDefs": [{
                "targets": 0,
                "data": 'model_name'
            }, {
                "targets": 1,
                "data": 'serial_number'
            }, {
                "targets": 2,
                "data": 'vid'
            }, {
                "targets": 3,
                "data": 'description'
            }, {
                "targets": 4,
                "data": 'notes'
            }]
        }).on('draw.dt', function(e, settings, json) {
            if (available_inventory_table.page.info().recordsTotal > 0) {

                if ($('li#available').length == 0) {
                    $('<li id="available"><a data-toggle="tab" href="#available-inventory">Available &nbsp;<span id="badge-available" class="customized-badge-height badge alert-info">0</span></a></li>').appendTo('#search-inventory-tabs');
                }
                $('#badge-available').html(available_inventory_table.page.info().recordsTotal);

            }
            if (search_clicked) {
                post_handling_after_drawing_table();
            }
        });

        var in_use_inventory_table = $("#in-use-inventory-datatable").DataTable({
            "serverSide": true,
            "ajax": {
                "url": "{{ url_for('datatable.api_search_inventory') }}",
                "data": function (d) {
                    prepare_filters_for_rest_api(d, false);
                    define_column_names(d);

                }
            },
            "columns": [
                { "data": "model_name" },
                { "data": "name" },
                { "data": "serial_number" },
                { "data": "vid" },
                { "data": "description" },
                { "data": "hostname" },
                { "data": "chassis" },
                { "data": "platform" },
                { "data": "software" },
                { "data": "region" },
                { "data": "location" },
                { "data": "last_successful_retrieval", "orderable": false }
            ],
            "order": [
                [5, "asc"]
            ],
            "pageLength": 100,
            "columnDefs": [{
                "targets": 0,
                "data": 'model_name'
            }, {
                "targets": 1,
                "data": 'name'
            }, {
                "targets": 2,
                "data": 'serial_number'
            }, {
                "targets": 3,
                "data": 'vid'
            }, {
                "targets": 4,
                "data": 'description'
            }, {
                "targets": 5,
                "data": 'hostname',
                "render": function(data, type, row) {
                    return '<a target="_blank" href="/host_dashboard/hosts/' + row['hostname'] + '/">' + row['hostname'] + '</a>';
                }
            },  {
                "targets": 6,
                "data": 'chassis'
            }, {
                "targets": 7,
                "data": 'platform'
            }, {
                "targets": 8,
                "data": 'software'
            }, {
                "targets": 9,
                "data": 'region'
            }, {
                "targets": 10,
                "data": 'location'
            }, {
                "targets": 11,
                "data": 'last_successful_retrieval',
                "render": function(data, type, row) {
                    if (row['inventory_retrieval_status'] == 'failed') {
                        return '<span style="color:red;">' + data + '</span>';
                    } else {
                        return data;
                    }
                }
            }]
        }).on('draw.dt', function(e, settings, json) {
            if (in_use_inventory_table.page.info().recordsTotal > 0) {
                if ($('li#in-use').length == 0) {
                    $('#search-inventory-tabs').prepend('<li id="in-use"><a data-toggle="tab" href="#in-use-inventory">In Use &nbsp;<span id="badge-in-use" class="customized-badge-height badge alert-info">0</span></a></li>');
                }
                $('#badge-in-use').html(in_use_inventory_table.page.info().recordsTotal);
            }
            if (search_clicked) {
                post_handling_after_drawing_table();
            }
        });


        $('#search').on('click', function(e) {
            search_spinner.css("visibility", "visible");
            $('#search-inventory-tabs').empty();
            $('#tables').hide();
            search_clicked = true;
            set_search_filters();
            in_use_inventory_table.ajax.reload();
            available_inventory_table.ajax.reload();
        });

        function set_search_filters() {
            if ($('#serial_number').val() == "") {
                search_filters['serial_number'] = null;
            } else {
                search_filters['serial_number'] = $('#serial_number').val();
            }

            assign_search_filter($('#region-selector'), 'region_ids');
            assign_search_filter($('#chassis-selector'), 'chassis_types');
            assign_search_filter($('#software-selector'), 'software_versions');


            if ($('#model-name-selector').prop('disabled')) {
                search_filters['model_names'] = null;
                search_filters['partial_model_names'] = $('#partial_model_names').val();
            } else {
                search_filters['partial_model_names'] = null;
                assign_search_filter($('#model-name-selector'), 'model_names');
            }

            if ($('#vid').val() == "") {
                search_filters['vid'] = null;
            } else {
                search_filters['vid'] = $('#vid').val();
            }
        }

        function assign_search_filter(filter_jquery_field, filter_name) {
            if (filter_jquery_field.val()) {
                search_filters[filter_name] = filter_jquery_field.val().toString()
            } else {
                search_filters[filter_name] = null
            }
        }

        function post_handling_after_drawing_table() {
            table_finished_drawing++;
            if(table_finished_drawing == 2) {
                search_spinner.css("visibility", "hidden");
                if ($('div.scrollableTable').length == 0) {
                    $('#in-use-inventory-datatable').wrap("<div class='scrollableTable'></div>");
                    $('#available-inventory-datatable').wrap("<div class='scrollableTable'></div>");
                }

                if (in_use_inventory_table.page.info().recordsTotal == 0) {
                    if (available_inventory_table.page.info().recordsTotal > 0) {
                        $('a[href=#available-inventory]').tab('show');
                        no_inventory_match.hide();
                        $('#tables').show();
                    } else {
                        no_inventory_match.show();
                    }
                } else {
                    if (available_inventory_table.page.info().recordsTotal > 0) {
                        var selected_tab = $.cookie('search-inventory-tab') == null ? '#in-use-inventory' : $.cookie('search-inventory-tab');
                        $('a[href=' + selected_tab + ']').tab('show');
                    } else {
                        $('a[href=#in-use-inventory]').tab('show');
                    }

                    no_inventory_match.hide();
                    $('#tables').show();
                }

                $('#search-inventory-result').show();
                table_finished_drawing = 0;
            }
        }

        $('#search-inventory-tabs').on('shown.bs.tab', function (e) {
            $.cookie('search-inventory-tab', $('.nav-tabs .active > a').attr('href'));
        });

        setInterval(function() {
            // user paging is not reset on reload - https://datatables.net/reference/api/ajax.reload()
            in_use_inventory_table.ajax.reload(null, false);
            available_inventory_table.ajax.reload(null, false);
        }, 10000);


        $('#region-selector').select2({
            placeholder: "Optional",
            allowClear: true,
            ajax: {
                url: "/home/api/get_regions/",
                dataType: 'json',
                processResults: function(data, page) {
                    return {
                        results: data.data
                    };
                },
                data: function(params) {
                    return {
                        q: params.term, // search term
                        page: params.page
                    };
                }
            }
        });
        $('#chassis-selector').select2({
            placeholder: "Optional",
            allowClear: true,
            ajax: {
                url: "/inventory/api/get_chassis_types/",
                dataType: 'json',
                processResults: function(data, page) {
                    return {
                        results: data.data
                    };
                },
                data: function(params) {
                    return {
                        q: params.term, // search term
                        page: params.page
                    };
                }
            }
        });
        $('#software-selector').select2({
            placeholder: "Optional",
            allowClear: true,
            ajax: {
                url: "/inventory/api/get_software_versions/",
                dataType: 'json',
                processResults: function(data, page) {
                    return {
                        results: data.data
                    };
                },
                data: function(params) {
                    return {
                        q: params.term, // search term
                        page: params.page
                    };
                }
            }
        });
        $('#model-name-selector').select2({
            placeholder: "Optional",
            allowClear: true,
            ajax: {
                url: "/inventory/api/get_model_names/",
                dataType: 'json',
                processResults: function(data, page) {
                    return {
                        results: data.data
                    };
                },
                data: function(params) {
                    return {
                        q: params.term, // search term
                        page: params.page
                    };
                }
            }
        });

        $('#model-name-selector').on("change", function (e) {
            if ($('#model-name-selector').val()) {
                $('#partial_model_names').prop('disabled', true);
            } else {
                $('#partial_model_names').prop('disabled', false);
            }
        });

        $('#partial_model_names').on("input", function (e) {
            if ($('#partial_model_names').val() != '') {
                $('#model-name-selector').prop('disabled', true);
            } else {
                $('#model-name-selector').prop('disabled', false);
            }
        });

        $('#export').click(function() {
            $('#export-inventory-information-dialog').modal('show');
        });

        $('#on-export-inventory-submit').click(function() {
            if ($('#send_email').prop('checked')) {
                if ($('#user_email').val().trim() == "") {
                    bootbox.alert("Email Address has not been specified.");
                    return false;
                } else {
                    $.ajax({
                        url: "/inventory/api/check_if_email_notify_enabled/",
                        dataType: 'json',
                        success: function(result) {
                            if (result.email_notify_enabled) {
                                submit_export_form();
                            } else {
                                bootbox.alert("<img src='/static/error.png'>&nbsp;Please enable Email Notification at <a target='_blank' href='{{ url_for('admin_console.home') }}'>Tools > Admin Console > Notifications</a> in Software page.");
                                return false;
                            }
                        }
                    });
                }

            } else {
                submit_export_form();
            }

        });


        function submit_export_form() {
            $('#hidden_serial_number').val($('#serial_number').val());
            $('#hidden_region_ids').val($('#region-selector').val());
            $('#hidden_chassis_types').val($('#chassis-selector').val());
            $('#hidden_software_versions').val($('#software-selector').val());

            if ($('#model-name-selector').prop('disabled')) {
                $('#hidden_model_names').val('');
                $('#hidden_partial_model_names').val($('#partial_model_names').val());
            } else if ($('#partial_model_names').prop('disabled')) {
                $('#hidden_model_names').val($('#model-name-selector').val());
                $('#hidden_partial_model_names').val('');
            } else {
                $('#hidden_model_names').val('');
                $('#hidden_partial_model_names').val('');
            }

            $('#hidden_vid').val($('#vid').val());

            $('#export-inventory-information-form').attr('action', "{{ url_for('inventory.export_inventory_information') }}");
            $('#export-inventory-information-dialog').modal('hide');
            $('#export-inventory-information-form').submit();

        }
        $('[data-toggle="popover_email"]').popover({
            trigger : 'click',
            placement : 'top',
            html : true,
            content : function() {
                return $('#popover_email').html()
            }
        });

        function define_column_names(d) {
            var column_names = [];
            for(index = 0; index < d.columns.length; index++) {
                column_names.push(d.columns[index].data)
            }
            d.column_names = column_names.join(',');
        }

    })

    </script>
{% endblock %}

{% macro custom_edit_field(field, field_width="col-sm-4", label_field_width="col-sm-2", catch_kwargs=true, extra_field="None") %}
    <label class="{{ label_field_width }} control-label" id="label_{{ field.id }}">{{ field.label.text }}</label>
    <div class="{{ field_width }}">
        {{ field(class="form-control", style="border: 1px solid #aaa;", **kwargs) }}
    </div>
{% endmacro %}

{% macro selector_row(label, field) %}
    <div class="row custom-margin">
        <label class="col-sm-2 control-label" id="label_{{ field }}">{{ label }}</label>
        <div class="col-sm-4">
            <select multiple="multiple" class="form-control" id="{{ field }}-selector"></select>
        </div>
    </div>
{% endmacro %}

{% block main %}

<div id="popover_email" style="display: none">
  <pre>By default, the email address in the user account
is used. To define it, go to <a href="{{ url_for('authenticate.current_user_edit') }}">Tools > Edit User</a>
in Software page. Or, you may enter one or more
comma-delimited email address(es) here.</pre>
</div>

<div id="export-inventory-information-dialog" class="modal" role="dialog">
    <div class="modal-dialog">
        <form method="post" id="export-inventory-information-form" class="form-horizontal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <h4>
                        <center>Export Inventory Search Results</center>
                    </h4>
                </div>
                <div class="modal-body">
                    {{ edit_field(export_results_form.export_format, field_width="col-sm-6", class="form-control") }}
                    {% set info ='<a href="javascript://"><span class="glyphicon glyphicon-info-sign" style="color:dodgerblue"
                           aria-hidden="true" data-toggle="popover_email"></span></a>' %}
                    <div class="form-group">
                        <label class="col-sm-4 control-label" style="padding-top: 10px;padding-left: 0px;" id="label_{{ export_results_form.send_email.id }}">{{ export_results_form.send_email.label.text }}</label>
                        {{ info | safe }}
                        <div class="col-sm-6" style="width:50px;">
                            {{ export_results_form.send_email(type='checkbox', class="form-control", style="-webkit-box-shadow:none") }}
                        </div>
                        <div class="col-sm-6" style="padding-top: 5px;padding-left: 0px;">
                            {{ export_results_form.user_email(class="form-control", placeholder="Comma-delimited Email Address(es)") }}
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <div class="form-actions">
                        <div class="btn col-sm-offset-4">
                            <button id="on-export-inventory-submit" type="button" class="btn btn-primary">OK</button>
                            <button class="btn" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
                <input id="hidden_serial_number" name="{{ export_results_form.hidden_serial_number.name }}" value="{{ export_results_form.hidden_serial_number.data }}" type="hidden">
                <input id="hidden_region_ids" name="{{ export_results_form.hidden_region_ids.name }}" value="{{ export_results_form.hidden_region_ids.data }}" type="hidden">
                <input id="hidden_chassis_types" name="{{ export_results_form.hidden_chassis_types.name }}" value="{{ export_results_form.hidden_chassis_types.data }}" type="hidden">
                <input id="hidden_software_versions" name="{{ export_results_form.hidden_software_versions.name }}" value="{{ export_results_form.hidden_software_versions.data }}" type="hidden">
                <input id="hidden_model_names" name="{{ export_results_form.hidden_model_names.name }}" value="{{ export_results_form.hidden_model_names.data }}" type="hidden">
                <input id="hidden_partial_model_names" name="{{ export_results_form.hidden_partial_model_names.name }}" value="{{ export_results_form.hidden_partial_model_names.data }}" type="hidden">
                <input id="hidden_vid" name="{{ export_results_form.hidden_vid.name }}" value="{{ export_results_form.hidden_vid.data }}" type="hidden">
            </div>
        </form>
    </div>
</div>

<div class="form-horizontal form-group row">
    <div class="container well">
        <legend>Search Inventory:</legend>
        <hr style="margin-top:10px;margin-bottom:30px;">
        <div class="row custom-margin">
            {{ custom_edit_field(search_inventory_form.serial_number, placeholder="Optional") }}
        </div>
        {{ selector_row("Region", "region") }}
        {{ selector_row("Chassis", "chassis") }}
        {{ selector_row("Software", "software") }}

        <div class="row custom-margin">
            <label class="col-sm-2 control-label" id="label_model_name">Model Name (PID)</label>

            <div id="model-name-selector-div" class="col-sm-4">
                <select multiple="multiple" class="form-control" id="model-name-selector"></select>
            </div>

        </div>
        <div class="row custom-margin">
            <label class="col-sm-2 control-label" id="label_model_name" style="margin-left: 50px;">OR</label>
            {{ search_inventory_form.partial_model_names(class="form-control", placeholder="Comma-delimited Partial or Full PID(s)", style="width: 28.2%;display:inline;border: 1px solid #aaa;") }}

        </div>

        <div class="row custom-margin">
            {{ custom_edit_field(search_inventory_form.vid, placeholder="Optional") }}

             <span id="search_spinner" style="margin-left:10%; display:inline-block;">
                <img src="{{ url_for('static', filename='spinner.gif') }}">
            </span>
            <button id="search" type="button" class="btn btn-primary">
                Search
            </button>
            <button type="button" id="export" class="btn btn-primary">
                Export
            </button>
        </div>
    </div>
    <div class="container" id="search-inventory-result" style="display:none;">
        <br>
        <br>
        <h4>Results:</h4>
        <hr style="margin-top:10px;margin-bottom:30px;">
        <div id="no-inventory"><h4>No inventory matches the search criteria.</h4></div>
        <div id="tables" class="row">
            <div class="col-sm-12">
                <ul class="nav nav-tabs" id="search-inventory-tabs">
                </ul>
                <div class="tab-content" style="margin-top:20px;">
                    <div id="available-inventory" class="tab-pane fade in active">
                        <table class="display table" id="available-inventory-datatable">
                            <thead>
                                <tr>
                                    <th>Model Name</th>
                                    <th>Serial Number</th>
                                    <th>VID</th>
                                    <th>Description</th>
                                    <th>Notes</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div id="in-use-inventory" class="tab-pane fade">
                        <table class="display table" id="in-use-inventory-datatable">
                            <thead>
                                <tr>
                                    <th>Model Name</th>
                                    <th>Name</th>
                                    <th>Serial Number</th>
                                    <th>VID</th>
                                    <th>Description</th>
                                    <th>Hostname</th>
                                    <th>Chassis</th>
                                    <th>Platform</th>
                                    <th>Software</th>
                                    <th>Region</th>
                                    <th>Location</th>
                                    <th>Last Successful Retrieval</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


{% endblock %}