{{ define "content" }}
<link href="/static/css/pages/nrg-mv.css" rel="stylesheet">
<script src="/static/js/inputFields.js"></script>

<table>
    <tr class="row-data">
        <td class="header" colspan="2">NRG-MV License</td>
    </tr>
    <tr class="row-data">
        <td colspan="2">
            <table class="container-data-after-title auto-size">
                <tr class="row-data">
                    <td class="col-data-label auto-size">Request Code:</td>
                    <td class="col-data-input"><input id="requestCode" class="form-control rounded-0 read-only requestcode-input" value="" readonly/></td>
                    <td><span class="separator-style"><i class="icon-separator"></i></span></td>
                    <td class="col-data-label auto-size">License Key:</td>
                    <td class="col-data-input"><input id="licenseKey" class="form-control rounded-0 licensekey-input" value=""/></td>
                    <td><span class="separator-style"><i class="icon-separator"></i></span></td>
                    <td class="col-data-label auto-size">Count:</td>
                    <td class="col-data-input"><input id="licenseCount" class="form-control rounded-0 read-only count-input" value="1" readonly/></td>
                    <td><span class="separator-style"><i class="icon-separator"></i></span></td>
                    <td class="col-data-label auto-size"><button id="licenseApply" class="btn btn-text" onclick="applyLicenseCheck(licenseKey.value)">Apply</button></td>
                    <td><span class="separator-style"><i class="icon-separator"></i></span></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr class="row-data horizontal-line"></tr>
    <tr class="row-data"></tr>
</table>
<table id="nrgmvGlobalSettings" hidden>
    <tr class="row-data">
        <td class="header" colspan="2">NRG-MV Configuration</td>
    </tr>
    <tr class="row-data">
        <td colspan="2">
            <table class="container-data-after-title auto-size">
                <tr class="row-data">
                    <td class="col-data-label auto-size" colspan="2">Output Display Port:</td>
                    <td class="col-data-input">
                        <div id="outputDPWrapper" class="select-wrapper">
                            <select id="outputDP" class="custom-select" onchange="onChangeNrgMvConfigurationValues($('.tab-button.active').text(), {'outputDP': Number(this.value)})">
                                <option value="0">Passthrough</option>
                            </select>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<div class="tab nrgmv-config-tabs" id="tabs" hidden>
    <ul class="nav nav-tabs" role="tablist" id="mvConfigTabs">
        <!-- These get populated by queryNrgMvConfig -->
    </ul>
</div>
<table id="nrgmvConfigTable" hidden>
    <tr class="row-data">
        <td colspan="2">
            <table class="container-data-after-title auto-size">
                <tr class="row-data">
                    <td class="col-data-label auto-size">Enable BNC Output:</td>
                    <td class="col-data-input nrgmv-configuration-cell">
                        <input id="bncOutput" class="form-check-input" type="checkbox" onchange="onChangeNrgMvConfigurationValues($('.tab-button.active').text(), {'outputbnc': this.checked})" value=""/>
                    </td>
                    <td><span class="separator-style"><i class="icon-separator"></i></span></td>
                    <td class="col-data-label auto-size">Audio Bar Channels:</td>
                    <td class="col-data-input nrgmv-configuration-cell">
                        <span class="number-wrapper">
                            <input id="audioBarChannels" class="form-control rounded-0 number-size" type="number" min="1" max="16" oninput="restrictNumberField(this)" onchange="onChangeNrgMvConfigurationValues($('.tab-button.active').text(), {'audiobarchannels': Number(this.value)})" value=""/>
                        </span>
                    </td>
                    <td><span class="separator-style"><i class="icon-separator"></i></span></td>
                    <td class="col-data-label auto-size">EU Meter Bar:</td>
                    <td class="col-data-input nrgmv-configuration-cell">
                        <input id="euMeterBar" class="form-check-input" type="checkbox" onchange="onChangeNrgMvConfigurationValues($('.tab-button.active').text(), {'eumeterbar': this.checked})" value=""/>
                    </td>
                    <td><span class="separator-style"><i class="icon-separator"></i></span></td>
                    <td class="col-data-label auto-size">Audio Bar Peak Hold:</td>
                    <td class="col-data-input nrgmv-configuration-cell">
                        <input id="audioBarPeakHold" class="form-check-input" type="checkbox" onchange="onChangeNrgMvConfigurationValues($('.tab-button.active').text(), {'audiobarpeakhold': this.checked})" value=""/>
                    </td>
                    <td><span class="separator-style"><i class="icon-separator"></i></span></td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label col-150">Output Signal Format:</td>
                    <td class="col-data-input" colspan="11"><input id="outputSignalFormat" class="form-control rounded-0 read-only outputsignal-input" value="" readonly/></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr class="row-data">
        <td class="col-data-input" colspan="2">
            <div class="grid-wrapper">
                <div id="nrgmvGrid" class="ag-theme-balham-dark nrgmv-config-grid"></div>
            </div>
        </td>
    </tr>
    <tr class="row-data">
        <td colspan="2"><p class="container-data-after-title" >* The UMD label can be a string or a regular expression. Check the NRG documentation for the correct formatting.</p></td>
    </tr>
</table>

<div class="modal" id="applyLicenseCheckModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="applyLicenseCheckModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-max-content-size" >
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="applyLicenseCheckModalTitle"><i class="icon-add icon-white"></i>Add License Key</span>
                <span class="btn btn-transparent" onclick="hideDialog('applyLicenseCheckModal');"><i class="icon-close-header"></i></span>
            </div>

            <div class="modal-body" >
                <table class="container-data" >
                    <tr class="row-data">
                        <td colspan="2"> Are you sure you want to apply the license key? </td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-input nrgmv-configuration-cell"><input class="form-check-input" type="checkbox" checked value="" name="mvDstGenerate" id="mvDstGenerate"></td>
                        <td class="auto-size">Generate MV PIPs destinations if available.</td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('applyLicenseCheckModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="1" onclick="applyLicense()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/js/nrg.js"></script>

<script id="license" type="text/javascript" charset="utf-8">
    var currentNrgMvLicense = "";

    function queryNrgMvLicense() {
        $.post("/nrgmv/license", {})
        .done((data) => {
            $("#requestCode").val(data.requestCode);
            $("#licenseKey").val(data.licenseKey);
            currentNrgMvLicense = data.licenseKey;
            $("#licenseCount").val(data.licenseCount);
            if (data.licenseCount > 0) {
                $("#nrgmvGlobalSettings").attr("hidden", false);
                $("#nrgmvConfigTable").attr("hidden", false);
                $("#tabs").attr("hidden", false);
                queryNrgMvConfig()
            }
        })
        .fail(error => {
            console.log(error);
        }); 
    }

    function applyLicenseCheck(key) {
        if (key === "") {
            displayErrorDialog("Please enter a valid license key.")
        } else {
            displayDialog('applyLicenseCheckModal')
        }
    }

    function applyLicense() {
        let mvDstGenerateCheckBox = document.getElementById('mvDstGenerate');
        if (mvDstGenerateCheckBox) {
            sessionStorage.setItem("mvDstGenerate", mvDstGenerateCheckBox.checked);
        }
        onChangeNrgMvConfigurationValues($('.tab-button.active').text(), {'nrgmvLicense': $('#licenseKey').val()});
        $('#licenseKey').val(currentNrgMvLicense)
        hideDialog('applyLicenseCheckModal')
    }
</script>

<script id="mvconfig" type="text/javascript" charset="utf-8">
    function queryHeadConfig() {
        $.post("/nrgmv/head/config?headId=" + $('.tab-button.active').text(), {})
        .done((data) => {
            $("#bncOutput").prop('checked', data.bncOutput);
            $("#euMeterBar").prop('checked', data.euMeterBar);
            $("#audioBarPeakHold").prop('checked', data.audioBarPeakHold);
            $("#audioBarChannels").val(data.audioBarChannels);
            $("#outputSignalFormat").val(data.outputSignalFormat);
            nrgmvGridOptions.api.setRowData(data.pipConfig);
        })
        .fail(error => {
            console.log(error);
        }); 
    }

    function queryNrgMvConfig() {
        $.post("/nrgmv/config", {})
        .done((data) => {
            if (data.heads) {
                let ul = document.getElementById("mvConfigTabs");
                let classes = "tablinks tab-button active";
                data.heads.forEach((head, index) => {
                    if ($('#licenseCount').val() < (index + 1)) {
                        return;
                    }
                    if ($('#outputDP option#Head' + (index+1)).length == 0) {
                        $('#outputDP').append($('<option>', {
                            id: "Head" + (index + 1),
                            value: (index + 1),
                            text: "Head " + (index + 1)
                        }))
                    }
                    let tabId = head.id.replace(/\./g,"") + "tab"
                    if ($('#' + tabId).length == 0) {
                        let li = document.createElement("li");
                        li.setAttribute("class", "nav-item");
                        li.setAttribute("role", "presentation");
                        li.setAttribute("id", tabId)
                        let button = document.createElement("button");
                        button.setAttribute("class", classes);
                        button.setAttribute("id", head.id);
                        button.setAttribute("type", "button");
                        button.setAttribute("role", "tab");
                        button.setAttribute("data-bs-toggle", "tab");
                        button.setAttribute("onclick", "queryHeadConfig()");
                        button.innerHTML = head.id;
                        li.appendChild(button);
                        ul.appendChild(li);
                        classes = "tablinks tab-button";
                    }
                })
                queryHeadConfig();
            }
            $('#outputDP').val(data.outputDP)
        })

    }

    function onChangePip(event) {
        onChangeNrgMvConfigurationValues(event.data.id, {[event.column.colId]: event.newValue})
    }
</script>


<script src="/static/js/checkboxRenderer.js"></script>
<script type="text/javascript" charset="utf-8">
    const columnDefs = [
        {field: "id", headerName: "PIPs", suppressMovable: true, editable: false, minWidth: 150, maxWidth: 300, comparator: naturalSort},
        {field: "umd", headerName: "UMD", suppressMovable: true, editable: true, minWidth: 150, maxWidth: 300, cellRenderer: CheckboxRendererAG},
        {field: "meter", headerName: "Meter", suppressMovable: true, editable: true, minWidth: 150, maxWidth: 300, cellRenderer: CheckboxRendererAG},
        //limit umd label to 24 characters to prevent getting cutoff
        {field: "umdlabel", headerName: "UMD Label*", suppressMovable: true, editable: true, cellEditor: 'agTextCellEditor', cellEditorParams: {maxLength: 24}, minWidth: 300, maxWidth: 1590, getQuickFilterText: () => ''},
    ]

    function gridOptions(colDefs) {
        this.defaultColDef = {
            resizable: true,
            sortable: true,
            flex: 1,
        };
        this.columnDefs = colDefs;
        this.suppressMenuHide = true;
        this.suppressDragLeaveHidesColumns = true;
        this.headerHeight = 36;
        this.rowHeight = 31;
        this.rowSelection = 'none';
        this.stopEditingWhenCellsLoseFocus = true;
        this.onCellValueChanged = onChangePip;
    }

    let nrgmvGridOptions = new gridOptions(columnDefs);

    nrgmvGridOptions.components = {
      checkboxRendererAG: CheckboxRendererAG
    }
    // setup the grids after the page has finished loading
    document.addEventListener('DOMContentLoaded', function () {
        let destinationGrid = new agGrid.Grid(document.querySelector('#nrgmvGrid'), nrgmvGridOptions);
        document.getElementById("nrgmvGrid").ag_grid = nrgmvGrid;
        queryNrgMvLicense();
        addWSDBListener();
    });

    function addWSDBListener() {
        var socket = new WebSocket("ws://" + window.location.hostname + ":8080/dsws");
        socket.onopen = function () {
            console.log("Status: Connected\n");
        };
        socket.onmessage = function (event) {
            const msg = JSON.parse(event.data);
            switch (msg.table) {
                case MV_CONFIG_TABLE:
                case SIGNAL_PRESENCE_TABLE:
                    queryHeadConfig();
                    break;
                case LICENSE_TABLE:
                    console.log("LICENSE_TABLE update")
                    queryNrgMvLicense();
                    if (sessionStorage.getItem("mvDstGenerate")) {
                        $.ajax({
                            url: "/nrgmv/generateMVDestMapping",
                        });
                    }
                    break;
            }
        };
        socket.onerror = function(event) {
            console.log("Connection Error: " + JSON.stringify(event));
        };
        socket.onclose = function (event) {
            console.log("Socket is closed. Reconnect will be attempted in 1 second. Error Code: " +  event.code + ", Reason: " + event.reason);
            setTimeout(function() {
            addWSDBListener();
            }, 1000);
        };
    }
</script>

{{ end }}