{% extends "hmi-base.html" %}


{% block header-extras %}
    {{ block.super }}
    <script>
        function diagButtonUpdate() {
            if ($("#allStopped").val() == "Y") {
                $("#advanced-diag-button").removeAttr("disabled");
            } else {
                $("#advanced-diag-button").attr("disabled", "disabled");
            }
        }
        $(function () {
            diagButtonUpdate();

            $("#timezone-button").click(function () {
                window.location.href = "/hmi/timezone/"
            });

            $("#blister-select-button").click(function () {
               window.location.href = "/hmi/change_blister/"
            });

            $("#network-button").click(function () {
                window.location.href = "/hmi/network/"
            });

            $("#advanced-diag-button").click(function () {
                $("#adv-diag-pin").show();
            });

            $('.pin-keyboard-key-auth').on('click', function() {
                let button_value = $(this).text();
                let input_field = $('#id_pin');
                if (button_value === 'Submit'){
                    if (input_field.val() === '9717'){
                        window.location.href = "/hmi/advdiag/";
                    } else {
                        input_field.val('');
                    }
                } else if(button_value === '') {
                    console.log('del')
                    input_field.val(input_field.val().slice(0, -1));
                } else {
                    input_field.val(input_field.val() + button_value);
                }
            })

            $('#adv-pin-close').on('click', function() {
                $('#id_pin').val('');
                $('#adv-diag-pin').hide();
            })

            setInterval(function () {
                diagButtonUpdate()
            }, 1000);
            /*1 seconds*/

            $("#confirm-dialog").dialog({
                autoOpen: false,
                closeOnEscape: false,
                model: true,
                draggable: false,
                buttons: [
                    {
                        text: "Yes",
                        "class": 'dialog-button',
                        click: function () {
                            $("#settingsDisplayForm").submit();
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "No",
                        "class": 'dialog-button',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("#shutdown-computer-button").click(function () {
                $("#confirm-action-name").text("Shutdown Computer");
                $("#form_submit_button").val("shutdown-computer");
                $("#confirm-dialog").dialog("open");
            });
        });
    </script>
{% endblock %}

{% block content %}
    <div id="confirm-dialog" title="Confirm Action">
        <p id="confirm-action-name" name="confirm-action-name">
            Action Requested
        </p>

        <p>
            Are you sure?
        </p>
    </div>

<!--  Copied from normal pin login but only tied to local javascript code  -->
    <div id="adv-diag-pin" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front hmi-dialog-auth" tabindex="-1" role="dialog" aria-describedby="pin-login-auth" aria-labelledby="ui-id-1" style="height: auto; width: 300px; top: 103.5px; left: 247px; display: none;">
        <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
            <span id="ui-id-1" class="ui-dialog-title">Enter PIN</span>
            <button id="adv-pin-close" style="visibility: visible; font-weight: bolder; color: black; border: solid grey 2px; position: absolute; right: .5em; border-radius: .2em;">X</button>
        </div>
        <div id="pin-login-auth" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 86px; max-height: none; height: auto;">
            <form id="hmi-pin-login-form-auth" method="post" autocomplete="off">
                <input type="password" name="pin" required="" class="pin-input-auth" id="id_pin" readonly="" style="background: white;">
            </form>
            <div id="pin-keyboard-wrapper-auth">
                <div class="pin-keyboard-auth">
                    <div class="pin-keyboard-row-auth">
                        <div class="pin-keyboard-cell-auth"><button class="pin-keyboard-key-auth btn btn-default btn-default-auth">7</button></div>
                        <div class="pin-keyboard-cell-auth"><button class="pin-keyboard-key-auth btn btn-default btn-default-auth">8</button></div>
                        <div class="pin-keyboard-cell-auth"><button class="pin-keyboard-key-auth btn btn-default btn-default-auth">9</button></div>
                    </div>
                    <div class="pin-keyboard-row-auth">
                        <div class="pin-keyboard-cell-auth"><button class="pin-keyboard-key-auth btn btn-default btn-default-auth">4</button></div>
                        <div class="pin-keyboard-cell-auth"><button class="pin-keyboard-key-auth btn btn-default btn-default-auth">5</button></div>
                        <div class="pin-keyboard-cell-auth"><button class="pin-keyboard-key-auth btn btn-default btn-default-auth">6</button></div>
                    </div>
                    <div class="pin-keyboard-row-auth">
                        <div class="pin-keyboard-cell-auth"><button class="pin-keyboard-key-auth btn btn-default btn-default-auth">1</button></div>
                        <div class="pin-keyboard-cell-auth"><button class="pin-keyboard-key-auth btn btn-default btn-default-auth">2</button></div>
                        <div class="pin-keyboard-cell-auth"><button class="pin-keyboard-key-auth btn btn-default btn-default-auth">3</button></div>
                    </div>
                    <div class="pin-keyboard-row-auth">
                        <div class="pin-keyboard-cell-auth"><button class="pin-keyboard-key-auth btn btn-default btn-default-auth" style="font-size: 16px; padding-left: 10px;">Submit</button></div>
                        <div class="pin-keyboard-cell-auth"><button class="pin-keyboard-key-auth btn btn-default btn-default-auth">0</button></div>
                        <div class="pin-keyboard-cell-auth"><button class="pin-keyboard-key-auth btn btn-default btn-default-auth"><div class="icon-arrow-left"></div></button></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form name="settingsDisplayForm" id="settingsDisplayForm" method="post">
        {% csrf_token %}
        <div class="grey-background">
            <table style="width: 100%;">
                <tr>
                    <td class="settings-top-cell">
                        <fieldset class="titled-border-fieldset-top-settings">
                            <legend class="titled-border-legend">
                                Internal Printer
                            </legend>
                            <table class="user-maintenance-table">
                                <tr style="width: 100%;">
                                    <td style="height: 20px;">Firmware Version: {{ printer_status.firmware }}</td>
                                </tr>
                                <tr style="width: 100%;">
                                    <td style="height: 100px;">
                                        <button id="print-test-label-button" name="print-test-label-button" class="print-test-label-button">
                                            <img class="img-rounded" src="{{ STATIC_URL }}img/cc_fileprint.png"> Print Test Label
                                        </button>
                                    </td>
                                    <td style="height: 100px;">
                                        <button id="calibrate-printer-button" name="calibrate-printer-button" class="print-test-label-button">
                                            Calibrate Printer
                                        </button>
                                    </td>
                                </tr>
                            </table>
                        </fieldset>
                    </td>
                </tr>
                <tr>
                    <td class="settings-bottom-cell">
                        <fieldset class="titled-border-fieldset-bottom-settings">
                            <legend class="titled-border-legend">
                                Miscellaneous
                            </legend>

                            <table class="user-maintenance-table">
                                <tr style="width: 100%;">
                                    <td style="height: 90px;">
                                        <button class="settings-button" id="blister-select-button" name="blister-select-button" type="button">
                                            <table class="settings-button-table">
                                                <tr>
                                                    <td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL }}img/cc_kivio.png">
                                                    </td>
                                                    <td class="settings-bottom-button-cell">Change
                                                        <br/>
                                                        Blister Card
                                                    </td>
                                                </tr>
                                            </table>
                                        </button>
                                    </td>
                                    <td style="height: 90px;">
                                        <button id="timezone-button" name="timezone-button" type="button" class="settings-button">
                                            <table class="settings-button-table">
                                                <tr>
                                                    <td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL }}img/cc_app_clock.png">
                                                    </td>
                                                    <td class="settings-bottom-button-cell">Set
                                                        <br/>
                                                        Timezone
                                                    </td>
                                                </tr>
                                            </table>
                                        </button>
                                    </td>
                                    <td style="height: 90px;">
                                        <button id="calibrate-touchscreen-button" name="calibrate-touchscreen-button" class="settings-button">
                                            <table class="settings-button-table">
                                                <tr>
                                                    <td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL }}img/cc_display.png">
                                                    </td>
                                                    <td class="settings-bottom-button-cell">Calibrate Touchscreen</td>
                                                </tr>
                                            </table>
                                        </button>
                                    </td>
                                </tr>
                                <tr style="width: 100%;">
                                    <td style="height: 90px;">
                                        <button id="network-button" name="network-button" type="button" class="settings-button">
                                            <table class="settings-button-table">
                                                <tr>
                                                    <td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL }}img/cc_network.png">
                                                    </td>
                                                    <td class="settings-bottom-button-cell">Configure Network</td>
                                                </tr>
                                            </table>
                                        </button>
                                    </td>
                                    <td style="height: 90px;">
                                        <button class="settings-button" type="button" id="advanced-diag-button" name="advanced-diag-button">
                                            <table class="settings-button-table">
                                                <tr>
                                                    <td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL }}img/cc_adv_train.png">
                                                    </td>
                                                    <td class="settings-bottom-button-cell">Advanced Diagnostics</td>
                                                </tr>
                                            </table>
                                        </button>
                                    </td>
                                    <td style="height: 90px;">
                                        <button class="settings-button" id="shutdown-computer-button" name="shutdown-computer-button" type="button">
                                            <table class="settings-button-table">
                                                <tr>
                                                    <td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL }}img/cc_shutdown.png">
                                                    </td>
                                                    <td class="settings-bottom-button-cell">Shutdown Computer</td>
                                                </tr>
                                            </table>
                                        </button>
                                    </td>
                                </tr>
                            </table>
                        </fieldset>
                    </td>
                </tr>
                <!--tr>
                    <td>
                        <p>
                            System Version: Unknown
                        </p></td>
                </tr-->
            </table>
        </div>
    <input type="hidden" name="form_submit_button" id="form_submit_button" value=""/>
    </form>
{% endblock %}