{{ define "deviceAdd" }}
<link href="/static/css/pages/device.css" rel="stylesheet">

<div class="modal" id="addDeviceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addDeviceModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-add-device-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="addDeviceModalLabel"><i class="icon-add icon-white"></i>Add Device</span>
                <span id="closeDeviceApplyBtn" class="btn btn-transparent" onclick="hideDialog('addDeviceModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <div class="col tab modal-add-device-size">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item rossDevices" role="presentation">
                            <button class="tablinks tab-button" id="rossDevice-tab" data-bs-toggle="tab" data-bs-target="#rossDevice" tabindex="0" type="button" role="tab" aria-controls="rossDevice" aria-selected="true">Ross</button>
                        </li>
                        <li class="nav-item rossDevices" role="presentation">
                            <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
                        </li>
                        {{ if eq .OfflineDevice false }}
                        <li class="nav-item" role="presentation">
                            <button class="tablinks tab-button" id="rossNk-tab" data-bs-toggle="tab" data-bs-target="#rossNkDevice" tabindex="5" type="button" role="tab" aria-controls="rossNkDevice" aria-selected="false">Ross NK</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
                        </li>
                        {{ end }}
                        <li class="nav-item" role="presentation">
                            <button class="tablinks tab-button" id="thirdPartyDevice-tab" data-bs-toggle="tab" data-bs-target="#thirdPartyDevice" tabindex="9" type="button" role="tab" aria-controls="thirdPartyDevice" aria-selected="false">Third Party</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
                        </li>
                    </ul>
                    <div class="tab-content" style="width:100%;height:100%">
                        <div class="tab-pane active content-padder rossDevices" id="rossDevice" role="tabpanel" aria-labelledby="rossDevice-tab">
                            <table class="container-data">
                                <tr class="row-data">
                                    <td class="col-data-label">Protocol:</td>
                                    <td class="col-data-input">
                                        <div class="select-wrapper">
                                            <select class="custom-select" name="rossProtocolId" id="rossProtocolId" tabindex="1" onchange="onRossProtocolChange()">
                                            {{ $enableIpProtocol := .Discovery }}
                                            {{ range .Protocols }}
                                                {{ if eq .IsRoss true }}
                                                {{ if or (ne .Name "IPMatrix") ($enableIpProtocol) }}
                                                    <option value="{{ .Id }}">{{ .Name }} - {{ .Type }}</option>
                                                {{ end }}
                                                {{ end }}
                                            {{ end }}
                                            </select>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="row-data" id="rossIPRow">
                                    <td class="col-data-label col-data-label-80">IP:</td>
                                    <td class="col-data-input"><input class="form-control rounded-0 ip-address-size" name="rossIP" id="rossIP" tabindex="2" onchange="updateApplyButtonState()"></td>
                                </tr>
                                <tr class="row-data" id="rossTypeRow">
                                    <td class="col-data-label">Type:</td>
                                    <td class="col-data-input">
                                        <div class="select-wrapper">
                                            <select class="custom-select" name="rossDeviceModel" id="rossDeviceModel" tabindex="3">
                                            </select>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="row-data">
                                    <td class="col-data-label">Name:</td>
                                    <td class="col-data-input"><input class="form-control rounded-0 name-size-350" name="rossName" id="rossName" tabindex="4" onchange="updateApplyButtonState()"></td>
                                </tr>
                            </table>
                        </div>
                        <div class="tab-pane content-padder" id="rossNkDevice" role="tabpanel" aria-labelledby="rossNk-tab">
                            <div id="rossNkContent">
                                <table class="container-data container-data-margin">
                                    <tr class="row-data">
                                        <td class="col-data-label">Protocol:</td>
                                        <td class="col-data-input">
                                            <div class="select-wrapper">
                                                <select class="custom-select" name="rossNkProtocolId" id="rossNkProtocolId" tabindex="6" onchange="onRossNKProtocolChange()">
                                                    {{ range .Protocols }}
                                                    {{ if eq .IsRossNK true }}
                                                    <option value="{{ .Id }}">{{ .Name }} - {{ .Type }}</option>
                                                    {{ end }}
                                                    {{ end }}
                                                </select>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="row-data">
                                        <td class="col-data-label col-data-label-80">IP:</td>
                                        <td class="col-data-input"><input class="form-control rounded-0 ip-address-size" name="rossNkIP" id="rossNkIP" onchange="clearRossNKTable();updateApplyButtonState()" tabindex="7"></td>
                                    </tr>
                                    <tr class="row-data">
                                        <td class="col-data-label col-data-label-80">Get Device List:</td>
                                        <td class="col-data-input"><button class="btn btn-list" tabindex="8" onclick="getRossNkDevices()"/><i class="icon-btn icon-list"></i></td>
                                    </tr>
                                </table>
                                <div class="grid-wrapper-discovery" id="rossNkTable">
                                    <div id="rossNkGrid" style="height: 100%;width: 400px;margin-left: 10px;" class="ag-theme-balham-dark"></div>
                                </div>
                            </div>
                            <div class="container-data" id="rossNkWarning" style="display: none;">
                                <p class="modal-title" style="display: inline;"><img class="icon-alarm-warning" style="padding-bottom: 6px;"/> <b>Warning:</b> Ross NK devices cannot be added while in Manual Save mode. Please switch to Auto Save mode to add NK devices.</p>
                            </div>
                        </div>
                        <div class="tab-pane content-padder" id="thirdPartyDevice" role="tabpanel" aria-labelledby="thirdPartyDevice-tab">
                            <table class="container-data">
                                <tr class="row-data">
                                    <td class="col-data-label">Protocol:</td>
                                    <td class="col-data-input">
                                        <div class="select-wrapper">
                                            <select class="custom-select" name="thirdPartyProtocolId" id="thirdPartyProtocolId" tabindex="10" onchange="onThirdPartyProtocolChange()">
                                                {{ range .Protocols }}
                                                    {{ if eq .IsRoss false }}
                                                    {{ if eq .IsRossNK false }}
                                                    <option value="{{ .Id }}">{{ .Name }} {{ if ne .Type "simulated" }}- {{ .Type }} {{ end }}</option>
                                                    {{ end }}
                                                    {{ end }}
                                                {{ end }}
                                            </select>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="row-data" id="thirdPartyIPRow">
                                    <td class="col-data-label col-data-label-80">IP:</td>
                                    <td class="col-data-input"><input class="form-control rounded-0 ip-address-size" name="thirdPartyIP" id="thirdPartyIP" tabindex="11" onchange="updateApplyButtonState()"></td>
                                </tr>
                                <tr class="row-data">
                                    <td class="col-data-label">Name:</td>
                                    <td class="col-data-input"><input class="form-control rounded-0 name-size-350" name="thirdPartyName" id="thirdPartyName" tabindex="12" onchange="updateApplyButtonState()"></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="13" onclick="hideDialog('addDeviceModal');" id="cancelDeviceApplyBtn">Cancel</button>
                <button class="btn btn-text" tabindex="14" onclick="handleAddDevice()" id="addDeviceApplyBtn">Apply</button>
            </div>
        </div>
    </div>
</div>
<script src="/static/js/rossNkCheckboxRenderer.js"></script>
<script type="text/javascript" charset="utf-8">
    let rossNkColumnDefs = [
        {field: "Device", suppressMovable: true},
        {field: "Serial", suppressMovable: true, hide: true},
        {field: "Add", suppressMovable: true, editable: false, minWidth: 70, filter: false, cellRenderer: RossNkCheckboxRenderer},
    ]

    let rossNkGridOptions = {
        defaultColDef: {
            resizable: true,
        },
        columnDefs: rossNkColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        onCellValueChanged: function(params) {
            if (params.column.colId === 'Add') {
                updateApplyButtonState();
            }
        }
    };

    function checkDatabaseMode() {
        $.ajax({url: "/database/getmode", success: (mode) => {
                const isManualMode = mode == DBMode_CancelApply;
                const rossNkContent = document.getElementById("rossNkContent");
                const rossNkWarning = document.getElementById("rossNkWarning");

                if (isManualMode) {
                    rossNkContent.style.display = "none";
                    rossNkWarning.style.display = "block";
                } else {
                    rossNkContent.style.display = "block";
                    rossNkWarning.style.display = "none";
                }
            }});
    }

    // Check database mode when the modal is shown
    $('#addDeviceModal').on('shown.bs.modal', checkDatabaseMode);

    // Listen for database mode changes
    window.addEventListener(DATABASE_TABLE, function(event) {
        if (document.getElementById("addDeviceModal").style.display !== "none") {
            checkDatabaseMode();
        }
    });

    function getRossNkDevices() {
        let protocolId = document.getElementById("rossNkProtocolId").value;
        let ipElement = document.getElementById("rossNkIP");
        let ip = ipElement.value;
        if (!ipElement.disabled) {
            if (!validateIp(ip)) {
                displayErrorDialog(IpErrorMessage);
                return;
            }
        } else {
            // Ensures that the IP is blank if the field is disabled but someone may have put something
            // else in the field prior to switching the protocol value
            ip = "";
        }
        displayDialog("LoadingModal");
        $.ajax({ url: "/device/fetchnk?&protocolId=" + protocolId + "&frameIp=" + ip,
            success: (result) => {
                hideDialog("LoadingModal");
                if (result.length > 0) {
                    let nkList = [];
                    let disabledList = [];
                    for (let i = 0; i < result.length; i++) {
                        let row = {Device: result[i].name, Serial: result[i].serial, Add: 0};
                        if (result[i].serial !== "") {
                            nkList.push(row);
                        } else {
                            // keep separate list to append all disabled rows at the end of the list for cleaner look
                            disabledList.push(row);
                        }
                    }
                    if (nkList.length > 0) { nkList.unshift({Device: "All", Serial: "", Add: 0}); }
                    rossNkGridOptions.api.setRowData(nkList.concat(disabledList));
                } else {
                    clearRossNKTable();
                }
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
    }

    function clearRossNKTable() {
        rossNkGridOptions.api.setRowData([]);
        rossNkGridOptions.api.hideOverlay();
    }

    const productTypes = {
        ROSS: "ross",
        NK: "nk",
        OTHER: "other"
    };

    function handleAddDevice() {
        let name = "";
        let protocolId;
        let product = "";
        let frameIp = "";
        let serialList;
        let rossDeviceModel = "NA";
        let rossTab = document.getElementById("rossDevice-tab");
        let rossNkTab = document.getElementById("rossNk-tab");
        if (rossTab.classList.contains('active')) {
            {{ if eq .OfflineDevice false }}
            frameIp = document.getElementById("rossIP").value;
            if (!validateIp(frameIp)) {
                displayErrorDialog(IpErrorMessage);
                return;
            }
            {{ else }}
            rossDeviceModel = document.getElementById("rossDeviceModel").value;
            {{ end }}
            name = document.getElementById("rossName").value;
            let protocol = document.getElementById("rossProtocolId");
            protocolId = protocol.value;
            product = productTypes.ROSS;
        } else if (rossNkTab && rossNkTab.classList.contains('active')) {
            let ipElement = document.getElementById("rossNkIP");
            if (!ipElement.disabled) {
                frameIp = ipElement.value;
                if (!validateIp(frameIp)) {
                    displayErrorDialog(IpErrorMessage);
                    return;
                }
            } else {
                // Ensures that the IP is blank if the field is disabled
                frameIp = "";
            }

            protocolId = document.getElementById("rossNkProtocolId").value;
            product = productTypes.NK;
            serialList = [];
            rossNkGridOptions.api.forEachNode((node) => {
                if (node.data.Add && node.data.Device != "All") {
                    serialList.push(node.data.Serial);
                }
            });
        } else {
            name = document.getElementById("thirdPartyName").value;
            {{ if eq .OfflineDevice false }}
            let ip = document.getElementById("thirdPartyIP");
            if (!ip.disabled) {
                frameIp = ip.value;
                if (!validateIp(frameIp)) {
                    displayErrorDialog(IpErrorMessage);
                    return;
                }
            }
            {{ end }}
            protocolId = document.getElementById("thirdPartyProtocolId").value;
            product = productTypes.OTHER;
        }
        name = name.trim();
        // Protocol 1 is Ultrix-TCP which does not require a 'name'
        // The 'name' field is not applicable to Ross NK products
        if (!rossName.disabled && (protocolId != 1) && (product != productTypes.NK)) {
            if (!validateString(name)) {
                displayErrorDialog(NameErrorMessage);
                return;
            }
        }
        hideDialog("addDeviceModal");
        displayProgressBar("Loading device", "Loading new device", function(guid) {
            const urlParameters = [
                "name=" + encodeURIComponent(name),
                "protocolId=" + protocolId,
                "frameIp=" + frameIp,
                "product=" + product,
                "deviceModel=" + rossDeviceModel,
                "serialList="+ serialList,
                getProgressBarURLParameter(guid)
            ];
            $.ajax({url: "/device/add?" + urlParameters.join("&"),
                error: (err) => {
                    displayErrorDialog(err.responseText || JSON.stringify(err));
                }
            });
        }, 50);

    }

    function validateRossTab() {
        const protocol = document.getElementById("rossProtocolId").value;
        if (!protocol) return false;
        {{ if eq .OfflineDevice false }}
        const ip = document.getElementById("rossIP").value;
        if (!ip) return false;
        {{ end }}
        const name = document.getElementById("rossName");
        return name.disabled || name.value.trim() !== "";
    }

    function validateRossNkTab() {
        const protocol = document.getElementById("rossNkProtocolId").value;
        if (!protocol) return false;
        const ip = document.getElementById("rossNkIP");
        if (!ip.disabled && !ip.value) return false;
        let hasSelection = false;
        rossNkGridOptions.api.forEachNode((node) => {
            if (node.data.Serial !== "" && node.data.Add) {
                hasSelection = true;
            }
        });
        return hasSelection;
    }

    function validateThirdPartyTab() {
        const protocol = document.getElementById("thirdPartyProtocolId").value;
        const ip = document.getElementById("thirdPartyIP");
        if (!protocol) {
            return false;
        }
        {{ if eq .OfflineDevice false }}
        if (!ip.disabled && !ip.value) {
            return false;
        }
        {{ end }}
        const name = document.getElementById("thirdPartyName").value;
        return name.trim() !== "";
    }

    function updateApplyButtonState() {
        const applyBtn = document.getElementById("addDeviceApplyBtn");
        if (!applyBtn) {
            return;
        }
        const rossTab = document.getElementById("rossDevice-tab");
        const rossNkTab = document.getElementById("rossNk-tab");
        const thirdPartyTab = document.getElementById("thirdPartyDevice-tab");

        let isValid = false;

        if (rossTab.classList.contains('active')) {
            isValid = validateRossTab();
        } else if (rossNkTab && rossNkTab.classList.contains('active')) {
            isValid = validateRossNkTab();
        } else if (thirdPartyTab.classList.contains('active')) {
            isValid = validateThirdPartyTab();
        }

        applyBtn.disabled = !isValid;
    }

    function onRossProtocolChange() {
        let protocolId = document.getElementById("rossProtocolId");
        let optionText = protocolId.options[protocolId.selectedIndex].text;
        let rossIP = document.getElementById("rossIP");
        let rossName = document.getElementById("rossName");
        rossName.value = "";
        rossIP.value = "";
        {{ if eq .OfflineDevice true }}
            setRowVisible(false, "rossIPRow", "rossIP");
            setRowVisible(true, "rossTypeRow", "rossDeviceModel");
            // Show/hide Type choice and update options in OE
            let rossDeviceModel = document.getElementById("rossDeviceModel");
            if (optionText.includes("Ultrix")) {
                rossDeviceModel.disabled = false;
                updateModelOptions("ultrix");
                selectFirstRossDeviceModelOption();
            } else if (optionText.includes("NK")){
                rossDeviceModel.disabled = false;
                updateModelOptions("nk");
                selectFirstRossDeviceModelOption();
            } else {
                updateModelOptions("other");
                document.getElementById("rossDeviceModel").value = "";
                rossDeviceModel.disabled = true;
            }
            if (optionText.includes("IPMatrix")) {
                rossName.value = "IPMatrix";
                setReadOnly(rossName, true);
            } else if (optionText.includes("NDIMatrix")) {
                rossName.value = "NDIMatrix";
                setReadOnly(rossName, true);
            } else {
                setReadOnly(rossName, false);
            }
        {{ else }}
            setRowVisible(false, "rossTypeRow", "rossDeviceModel");
            setRowVisible(true, "rossIPRow", "rossIP");
            if (optionText.includes("IPMatrix")) {
                rossIP.value = localHostIp;
                setReadOnly(rossIP, true);
                rossName.value = "IPMatrix";
                setReadOnly(rossName, true);
            } else if (optionText.includes("NDIMatrix")) {
                rossIP.value = localHostIp;
                setReadOnly(rossIP, true);
                rossName.value = "NDIMatrix";
                setReadOnly(rossName, true);
            } else {
                setReadOnly(rossIP, false);
                setReadOnly(rossName, false);
            }
            // Show/hide IP input
            if (optionText.includes("tcp") || optionText.includes("udp")) {
                rossIP.disabled = false;
                if (optionText.includes("Ultrix") || optionText.includes("NRG")) {
                    rossName.disabled = true;
                } else {
                    rossName.disabled = false;
                }
                if (optionText.includes("Ross NK") || optionText.includes("Ross Talk")) {
                    rossIP.value = "10.30.150.150";
                }
            } else {
                rossName.disabled = false;
                rossIP.disabled = true;
            }
        {{ end }}
        updateApplyButtonState();
    }

    function onRossNKProtocolChange() {
        let protocolId = document.getElementById("rossNkProtocolId");
        let optionText = protocolId.options[protocolId.selectedIndex].text;
        let rossNkIP = document.getElementById("rossNkIP");
        rossNkIP.value = "";
        if (optionText.includes("tcp")) {
            rossNkIP.disabled = false;
        } else if (optionText.includes("tbus")){
            rossNkIP.disabled = true;
        }
        clearRossNKTable();
        updateApplyButtonState();
    }

    function onThirdPartyProtocolChange() {
        let protocolId = document.getElementById("thirdPartyProtocolId");
        let optionText = protocolId.options[protocolId.selectedIndex].text;
        let thirdPartyName = document.getElementById("thirdPartyName");
        thirdPartyName.value = "";
        {{ if eq .OfflineDevice false }}
            let thirdPartyIP = document.getElementById("thirdPartyIP");
            thirdPartyIP.value = "";
            if (optionText.includes("tcp") || optionText.includes("udp")) {
                thirdPartyIP.disabled = false;
                if (optionText.includes("GVG Native") || optionText.includes("Probel") || optionText.includes("Nvision")) {
                    thirdPartyIP.value = "192.168.1.2";
                } else if (optionText.includes("TSL")) {
                    thirdPartyIP.value = "192.168.1.3";
                }
            } else {
                thirdPartyIP.disabled = true;
            }
        {{ else }}
            setRowVisible(false, "thirdPartyIPRow", "thirdPartyIP");
        {{ end }}
        updateApplyButtonState();
    }

    function setRowVisible(visible, rowId, inputId) {
        let displayType = "";
        if (!visible) {
            displayType = "none";
        }
        document.getElementById(rowId).style.display = displayType;
        document.getElementById(inputId).style.display = displayType;
    }

    function setReadOnly(element, isReadOnly) {
        if (isReadOnly) {
            element.readOnly = true;
            if (!element.classList.contains('read-only')) {
                element.classList.add('read-only');
            }
        } else {
            element.readOnly = false;
            if (element.classList.contains('read-only')) {
                element.classList.remove('read-only');
            }
        }
    }

    document.getElementById("rossProtocolId").addEventListener("change", updateApplyButtonState);
    document.getElementById("rossIP").addEventListener("input", updateApplyButtonState);
    document.getElementById("rossName").addEventListener("input", updateApplyButtonState);
    document.getElementById("rossNkProtocolId").addEventListener("change", updateApplyButtonState);
    document.getElementById("rossNkIP").addEventListener("input", updateApplyButtonState);
    document.getElementById("thirdPartyProtocolId").addEventListener("change", updateApplyButtonState);
    document.getElementById("thirdPartyIP").addEventListener("change", updateApplyButtonState);
    document.getElementById("thirdPartyIP").addEventListener("input", updateApplyButtonState);
    document.getElementById("thirdPartyName").addEventListener("input", updateApplyButtonState);

    document.querySelectorAll('.nav-tabs .nav-item .tab-button').forEach(tab => {
        tab.addEventListener('shown.bs.tab', updateApplyButtonState);
    });

    $('#addDeviceModal').on('shown.bs.modal', updateApplyButtonState);
</script>
{{ end }}