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

<div class="row" style="height: 100%;">
    <div class="col splitBorder panel-left-pane-style">
        <nav class="navbar navbar-expand" id="paneleditortoolbar">
            <div class="container-fluid">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item dropdown">
                        <button onclick="" class="btn btn-nav-icon" id="navMenuButton" data-bs-toggle="dropdown" role="button" aria-expanded="false" data-toggle="tooltip" data-placement="bottom" title="Navigation Menu"><i class="icon-btn icon-menu" id="navMenuImage"></i></button>
                        <ul class="dropdown-menu dropdown-menu-nav">
                            <li><hr class="dropdown-item-divider" /></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="addPanelMenuButton" onclick="showAddPanelModal()"><i class="icon-btn-nav-menu icon-plain icon-add" id="addPanelMenuImg"></i>Add</button>
                            </li>
                            <li><div class="dropdown-item-divider"></div></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="onPanelMoved(moveUp)" id="moveUpMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-up-disabled" id="moveUpMenuImg"></i>Move Up</button>
                            </li>
                            <li><div class="dropdown-item-divider"></div></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="onPanelMoved(moveDown)" id="moveDownMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-down-disabled" id="moveDownMenuImg"></i>Move Down</button>
                            </li>
                            <li><div class="dropdown-item-divider"></div></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="onPanelMoved(moveTop)" id="moveTopMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-top-disabled" id="moveTopMenuImg"></i>Move to Top</button>
                            </li>
                            <li><div class="dropdown-item-divider"></div></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="onPanelMoved(moveBottom)" id="moveBottomMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-bottom-disabled" id="moveBottomMenuImg"></i>Move to Bottom</button>
                            </li>
                            <li><div class="dropdown-item-divider"></div></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="duplicatePanelCheck()" id="duplicateMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-duplicate-disabled" id="duplicateMenuImg"></i>Duplicate</button>
                            </li>
                            <li><div class="dropdown-item-divider"></div></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="removePanel()" id="deleteMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-delete-disabled" id="deleteMenuImg"></i>Delete</button>
                            </li>
                            <li><hr class="dropdown-item-divider" /></li>
                        </ul>
                    </li>
                    <li>
                        <span><i class="icon-separator"></i></span>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="showAddPanelModal()" id="addPanelButton" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add" id="addPanelImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="onPanelMoved(moveUp)" id="moveUpButton" data-toggle="tooltip" data-placement="bottom" title="Move Up" disabled><i class="icon-btn icon-up-disabled" id="moveUpImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="onPanelMoved(moveDown)" id="moveDownButton" data-toggle="tooltip" data-placement="bottom" title="Move Down" disabled><i class="icon-btn icon-down-disabled" id="moveDownImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="onPanelMoved(moveTop)" id="moveTopButton" data-toggle="tooltip" data-placement="bottom" title="Move to Top" disabled><i class="icon-btn icon-top-disabled" id="moveTopImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="onPanelMoved(moveBottom)" id="moveBottomButton" data-toggle="tooltip" data-placement="bottom" title="Move to Bottom" disabled><i class="icon-btn icon-bottom-disabled" id="moveBottomImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="duplicatePanelCheck()" id="duplicateButton" data-toggle="tooltip" data-placement="bottom" title="Duplicate" disabled><i class="icon-btn icon-duplicate-disabled" id="duplicateImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="removePanel()" id="deleteButton" data-toggle="tooltip" data-placement="bottom" title="Delete" disabled><i class="icon-btn icon-delete-disabled" id="deleteImg"></i></button>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="grid-wrapper-panels" id="paneleditortable">
            <div id="panelGrid" style="height: 100%" class="ag-theme-balham-dark"></div>
        </div>
    </div>
    <div class="col tab panel-editor-style" id="paneleditorsettings">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation" id="settingOption">
                <button class="tablinks tab-button active" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
            </li> 
            <li class="nav-item" role="presentation" id="dataOption">
                <button class="tablinks tab-button" id="data-tab" data-bs-toggle="tab" data-bs-target="#data" type="button" role="tab" aria-controls="data" aria-selected="true">Data</button>
            </li>
            <li class="nav-item" role="presentation" id="dataOptionSeparator">
                <button class="tab-separator" id="data-tabSeparator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
            </li>
            <li class="nav-item" role="presentation" id="layoutOption">
                <button class="tablinks tab-button" id="layout-tab" data-bs-toggle="tab" data-bs-target="#layout" type="button" role="tab" aria-controls="layout" aria-selected="false">Layout</button>
            </li>
            <li class="nav-item" role="presentation" id="layoutOptionSeparator">
                <button class="tab-separator" id="layout-tabSeparator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
            </li>
        </ul>
        <div class="tab-content grid-wrapper-panels">
            <!-- Settings window -->
            <div class="tab-pane show active" id="settings" style="height:100%;width:100%" role="tabpanel" aria-labelledby="settings-tab">
                {{ template "panelsettings" . }}
            </div>
            <!-- Data tab -->
            <div class="tab-pane" id="data" style="height:100%;width:100%" role="tabpanel" aria-labelledby="data-tab">
                {{ template "paneldata" . }}
            </div>
            <!-- Layout window -->
            <div class="tab-pane grid-wrapper-panels" id="layout" style="height:100%;width:100%;" role="tabpanel" aria-labelledby="layout-tab">
                {{ template "panellayout" . }}
            </div>
        </div>
    </div>
</div>

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

<script>
    const objectTypeName = "Panel";

    // Panel Type (panelType) constants in panel-common.go need to match the order and Type ID in Database
    const MatrixType = 1;
    const MultibusType = 2;
    const GroupCategoryType = 3;
    const PushButtonType = 4;
    const CatIndexCategoryType = 5;
    const UltritouchPbType = 6;
    const UltritouchMvType = 7;
    const AudioMixerDesktopType = 8;
    const AudioMixer4ruType = 9;
    const AudioMixer2ruType = 10;
    const Ultritouch4ruSplitType = 11;
    const GroupPbType = 12;

    // Panel element types
    const pLevelType = 0;
    const pSourceType = 1;
    const pDestinationType = 2;
    const pAliasType = 3;
    const pSalvoType = 4;
    const pMixerType = 5;
    if (typeof pFavoritesType === 'undefined') {
        var pFavoritesType = 6;
    }

    // Favorites grid column definitions (defined in paneldata.html with custom cell renderer)
    // availableFavoritePanelColumnDefs and favoritePanelColumnDefs are defined in paneldata.html

    const pElementTypeToName = ["level", "source", "dest", "alias", "salvo", "mixer", "favorite"];

    const  SettingsTabIdPrefix = "settings"
    const  DataTabIdPrefix = "data"
    const  LayoutTabIdPrefix = "layout"
    const  LevelsTabIdPrefix = "levels"
    const  SourcesTabIdPrefix = "sources"
    const  DestinationsTabIdPrefix = "destinations"
    const  SalvosTabIdPrefix = "salvos"
    const  MixersTabIdPrefix = "mixers"
    const  AliasesTabIdPrefix = "aliassets"
    const  FavoritesTabIdPrefix = "favorites"

    // Move direction types
    const moveUp = 0;
    const moveDown = 1;
    const moveTop = 2;
    const moveBottom = 3;

    const sessionKeys = {
        PANEL_SELECTED: "panelEditorId"
    };

    // Debounced function for batching rapid WebSocket notifications
    // Uses debounce() from common.js
    const debouncedFavoritesRefresh = debounce(refreshFavoritesResourceMissingFlags, 150);

    // Tracks pending favorite updates - cleared by WebSocket handler (event-driven pattern per UR-14709)
    const pendingFavoriteUpdates = new Set();

    // Grid Options - Moved to global scope for cross-template access
    var availSourcesGridOptions = {
        defaultColDef: panelDataDefaultProps,
        columnDefs: availPanelColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        getRowId: row => row.data.id,
        onSelectionChanged: onAvailSourceChanged,
    };
    availSourcesGridOptions.addMoreRowsToSend = (selectedIds) => getSourceRowsToSend(availSourcesGridOptions, selectedIds)            

    var panelSourcesGridOptions = {
        defaultColDef: panelDataDefaultProps,
        columnDefs: panelColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        getRowId: row => row.data.id,
        onSelectionChanged: onPanelSourceChanged,
    };
    panelSourcesGridOptions.addMoreRowsToSend = (selectedIds) => getSourceRowsToSend(panelSourcesGridOptions, selectedIds)            

    var availDestinationsGridOptions = {
        defaultColDef: panelDataDefaultProps,
        columnDefs: availPanelColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: onAvailDestinationsChanged,
    };

    var panelDestinationsGridOptions = {
        defaultColDef: panelDataDefaultProps,
        columnDefs: panelColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: onPanelDestinationsChanged,
    };

    var availLevelsGridOptions = {
        defaultColDef: panelDataDefaultProps,
        columnDefs: availPanelColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: onAvailLevelsChanged,
    };

    var panelLevelsGridOptions = {
        defaultColDef: panelDataDefaultProps,
        columnDefs: panelColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: onPanelLevelsChanged,
    };

    var mixerPartitionsGridOptions = {
        defaultColDef: panelDataDefaultProps,
        columnDefs: panelColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: onMixerPartitionsChanged,
    };

    var availSalvosGridOptions = {
        defaultColDef: panelDataDefaultProps,
        columnDefs: availableSalvoPanelColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: onAvailSalvosChanged,
    };

    var availAliasSetsGridOptions = {
        defaultColDef: panelDataDefaultProps,
        columnDefs: availPanelColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: onAvailAliasSetsChanged,
    };

    var panelAliasSetsGridOptions = {
        defaultColDef: panelDataDefaultProps,
        columnDefs: panelColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: onPanelAliasSetsChanged,
    };

    var availMixerPartitionsGridOptions = {
        defaultColDef: panelDataDefaultProps,
        columnDefs: availPanelColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: onAvailMixerPartitionsChanged,
    };
    
    var panelSalvosGridOptions = {
        defaultColDef: panelDataDefaultProps,
        columnDefs: salvoPanelColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: onPanelSalvosChanged,
    };

    // Favorites grid options
    var availFavoritesGridOptions = {
        defaultColDef: panelDataDefaultProps,
        columnDefs: availableFavoritePanelColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: onAvailFavoritesChanged,
        suppressRowClickSelection: false,
        // enableRangeSelection: true, // Requires AG Grid Enterprise
        onRowDataChanged: function() {
            onAvailFavoritesChanged();
        }
    };

    var panelFavoritesGridOptions = {
        defaultColDef: panelDataDefaultProps,
        columnDefs: favoritePanelColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: onPanelFavoritesChanged,
        suppressRowClickSelection: false,
        // enableRangeSelection: true, // Requires AG Grid Enterprise
        onRowDataChanged: function() {
            onPanelFavoritesChanged();
            // Enable/disable sort buttons based on row count
            const hasRows = panelFavoritesGridOptions.api && panelFavoritesGridOptions.api.getDisplayedRowCount() > 0;
            if (hasRows) {
                enableUiButton("favoriteAlphabeticSort");
                enableUiButton("favoriteDatabaseSort");
            } else {
                disableUiButton("favoriteAlphabeticSort");
                disableUiButton("favoriteDatabaseSort");
            }
        }
    };

    const panelsColumnDefs = [
        {field: "id", hide: true, headerName: "DB ID", maxWidth: 300},
        {field: "uiId", headerName: "Panel ID",  suppressMovable: true, maxWidth: 100, getQuickFilterText: () => '', valueSetter: (params) => panelUiidValueSetter(params)},
        {field: "name", suppressMovable: true, minWidth: 150, maxWidth: 300, comparator: naturalSort, getQuickFilterText: () => ''},
        {field: "description", suppressMovable: true, minWidth: 150, maxWidth: 300, getQuickFilterText: () => ''},
        {field: "panelTypeId", hide: true, minWidth: 150, maxWidth: 300},
        {field: "panelType", headerName: "Type", suppressMovable: true, minWidth: 150, maxWidth: 300, getQuickFilterText: () => '', editable: false},
    ];

    const panelsGridOptions = {
        defaultColDef: {
            resizable: true,
            editable: true,
            sortable: true,
            flex: 1,
            filter: true,
            filterParams: multiFilterCondition,
        },
        columnDefs: panelsColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'single',
        onCellValueChanged: onPanelCellValueChanged,
        onSelectionChanged: onPanelRowSelectionChanged,
        stopEditingWhenCellsLoseFocus: true,
        getRowId: row => row.data.id,
    };

    const elementAvailableGridOptions = {
        [pSourceType]: availSourcesGridOptions,
        [pDestinationType]: availDestinationsGridOptions,
        [pLevelType]: availLevelsGridOptions,
        [pSalvoType]: availSalvosGridOptions,
        [pAliasType]: availAliasSetsGridOptions,
        [pMixerType]: availMixerPartitionsGridOptions,
        [pFavoritesType]: availFavoritesGridOptions
    }

    const elementAssignedGridOptions = {
        [pSourceType]: panelSourcesGridOptions,
        [pDestinationType]: panelDestinationsGridOptions,
        [pLevelType]: panelLevelsGridOptions,
        [pSalvoType]: panelSalvosGridOptions,
        [pAliasType]: panelAliasSetsGridOptions,
        [pMixerType]: mixerPartitionsGridOptions,
        [pFavoritesType]: panelFavoritesGridOptions
    }

    async function fetchAssignedCount(panelId, eType) {
        const r = await fetch('/panel/assignedElements?panelId=' + panelId + '&eType=' + eType);
        const data = await r.json();
        return Array.isArray(data) ? data.length : 0;
    }

    async function computeAssignmentCounts(panelId) {
        const fb = function (type) { return fetchAssignedCount(panelId, type); };

        const results = await Promise.all([
            window.panelLevelsGridOptions?.api?.getDisplayedRowCount?.()       ?? fb(pLevelType),
            window.panelSourcesGridOptions?.api?.getDisplayedRowCount?.()      ?? fb(pSourceType),
            window.panelDestinationsGridOptions?.api?.getDisplayedRowCount?.() ?? fb(pDestinationType),
            window.panelSalvosGridOptions?.api?.getDisplayedRowCount?.()       ?? fb(pSalvoType),
            window.panelAliasSetsGridOptions?.api?.getDisplayedRowCount?.()    ?? fb(pAliasType)
        ]);

        const [levels, sources, dests, salvos, aliases] = results;
        return { levels, sources, dests, salvos, aliases };
    }

    async function updatePanelSummaryBar() {
        const api = panelsGridOptions?.api;
        if (!api) return;

        const totalVisible = api.getDisplayedRowCount ? api.getDisplayedRowCount() : 0;

        const sel = api.getSelectedRows ? api.getSelectedRows() : [];
        const selectedLabel = sel.length
            ? (sel[0].name ?? sel[0].description ?? sel[0].id ?? '0')
            : '0';

        setText('panelSummaryTotalValue', totalVisible);
        setText('panelSummarySelectedValue', selectedLabel);

        // Assignments (Levels/Sources/Dests/Salvos/Aliases)
        const panelId = sessionStorage.getItem('panelEditorId');
        if (!panelId) {
            setText('panelSummaryAssignmentsValue', '0/0/0/0/0');
            return;
        }

        setText('panelSummaryAssignmentsValue', '...'); //
        try {
            const c = await computeAssignmentCounts(panelId);
            setText(
                'panelSummaryAssignmentsValue',
                `${c.levels}/${c.sources}/${c.dests}/${c.salvos}/${c.aliases}`
            );
        } catch (e) {
            setText('panelSummaryAssignmentsValue', '-');
        }

        function setText(id, v) {
            const el = document.getElementById(id);
            if (el) el.textContent = String(v);
        }
    }

    document.addEventListener('DOMContentLoaded', function () {// setup the grids after the page has finished loading
        addWSDBListener();
        var gridDiv = document.querySelector('#panelGrid');
        var panelGrid = new agGrid.Grid(gridDiv, panelsGridOptions);
        fetch('/panel/agdata')
           .then((response) => response.json())
           .then((data) => {
                if (data == null) {
                    hidePanelTab(LayoutTabIdPrefix);
                    hidePanelTab(DataTabIdPrefix);
                } else {
                    showPanelTab(DataTabIdPrefix);
                }
                panelsGridOptions.api.setRowData(data);
                panelsGridOptions.api.forEachNode((node) => {
                    if (node.rowIndex == 0) {
                        node.setSelected(true, true);
                    }
                });
           });
        window.addEventListener(DBMODE_TABLE, handleDbModeChange);
    });

    function onPanelRowSelectionChanged(params) {
        const selectedRows = panelsGridOptions.api.getSelectedRows();
        if (selectedRows.length === 1 && dbMode !== DBMode_Protect) {
            sessionStorage.setItem("panelEditorId", selectedRows[0].id);
            panelSelected();
            refreshSelectedPanelSettings(true);
            enableButtonIds([
                "addPanel",
                "addPanelMenu",
                "duplicate",
                "duplicateMenu",
                "delete",
                "deleteMenu",
                "moveUp",
                "moveUpMenu",
                "moveDown",
                "moveDownMenu",
                "moveTop",
                "moveTopMenu",
                "moveBottom",
                "moveBottomMenu"
            ]);
        } else {
            panelSelectedNone();
            refreshSelectedPanelSettings(true);
            if (dbMode === DBMode_Protect) {
                disableButtonIds(["addPanel", "addPanelMenu"])
            }
            disableButtonIds([
                "duplicate",
                "duplicateMenu",
                "delete",
                "deleteMenu",
                "moveUp",
                "moveUpMenu",
                "moveDown",
                "moveDownMenu",
                "moveTop",
                "moveTopMenu",
                "moveBottom",
                "moveBottomMenu"
            ]);
        }
    }

    function refreshSelectedPanelData(elementTypes) {
        let panelId = sessionStorage.getItem("panelEditorId");

        // Fetch available elements
        fetch("/panel/availableElements?panelId=" + panelId + "&eTypes=" + elementTypes)
            .then((response) => {
                if (!response.ok) {
                    return response.text().then(text => { throw new Error(text || response.statusText); });
                }
                return response.json();
            })
            .then((data) => {
                for (const[key,value] of Object.entries(data)) {
                    let gridOptions = elementAvailableGridOptions[key];
                    let firstSelectedAvailableNodeIndex = getFirstSelectedNodeIndex(gridOptions);
                    if (gridOptions && gridOptions.api) {
                        gridOptions.api.setRowData(value);
                        setNodeSelected(gridOptions, firstSelectedAvailableNodeIndex);
                        refreshAvailableButtons(Number(key), !value || value.length === 0);
                    } else {
                        console.warn(`Available grid API not ready for element type ${key}`);
                    }
                }
            }).catch(error => {
                displayErrorDialog(error.message || "An unexpected error occurred");
                console.error(`Error fetching available elements (type ${elementTypes}):`, error);
            });

        // Fetch assigned elements
        fetch("/panel/assignedElements?panelId=" + panelId + "&eTypes=" + elementTypes)
            .then((response) => {
                if (!response.ok) {
                    return response.text().then(text => { throw new Error(text || response.statusText); });
                }
                return response.json();
            })
            .then((data) => {
                for (const[key,value] of Object.entries(data)) {
                    let gridOptions = elementAssignedGridOptions[key]
                    let firstSelectedAssignedNodeIndex = getFirstSelectedNodeIndex(gridOptions);
                    if (gridOptions && gridOptions.api) {
                        gridOptions.api.setRowData(value);
                        if (Number(key) === pDestinationType) {
                            updateOutputMonitorSettings();
                        }
                        if (Number(key) !== pMixerType) {
                            refreshAssignedButtons(Number(key), !value || value.length === 0);
                        }
                        setNodeSelected(gridOptions, firstSelectedAssignedNodeIndex);
                        refreshSelectedPanelViewableWarning(Number(key));
                    } else {
                        console.warn(`Assigned grid API not ready for element type ${key}`);
                    }
                }
            }).catch(error => {
                displayErrorDialog(error.message || "An unexpected error occurred");
                console.error(`Error fetching assigned elements (type ${elementTypes}):`, error);
            });
    }

    function refreshAssignedButtons(elementType, tableEmpty) {
        const buttonTypes = ["Up", "Down", "Top", "Bottom"];
        if (tableEmpty) {
            disableUiButton("unassignAll" + pElementTypeToName[elementType])
            disableUiButton("unassign" + pElementTypeToName[elementType])
            if (elementType != pMixerType) {
                for (let i=0; i<buttonTypes.length; i++) {
                    disableUiButton(pElementTypeToName[elementType] + buttonTypes[i]);
                }
            }
        } else {
            enableUiButton("unassignAll" + pElementTypeToName[elementType])
            enableUiButton("unassign" + pElementTypeToName[elementType])
            if (elementType != pMixerType) {
                for (let i = 0; i < buttonTypes.length; i++) {
                    enableUiButton(pElementTypeToName[elementType] + buttonTypes[i]);
                }
            }
        }
    }

    function refreshAvailableButtons(elementType, tableEmpty) {
        if (tableEmpty) {
            disableUiButton("assignAll" + pElementTypeToName[elementType])
            disableUiButton("assign" + pElementTypeToName[elementType])
        } else {
            enableUiButton("assignAll" + pElementTypeToName[elementType])
            enableUiButton("assign" + pElementTypeToName[elementType])
        }
    }

    function refreshSelectedPanelDataAfterUpdate(availGridOptions, panelGridOptions, elementType, operation) {
        const panelId = sessionStorage.getItem("panelEditorId");
        const selectedIdList = (operation === INSERT_OP) ? getGridSelectedRowIds(availGridOptions, "id") : getGridSelectedRowIds(panelGridOptions, "elementId");
        fetch("/panel/availableElements?panelId=" + panelId + "&eTypes=" + elementType)
            .then((response) => {
                if (!response.ok) {
                    return response.text().then(text => { throw new Error(text || response.statusText); });
                }
                return response.json();
            })
            .then((data) => {
                for (const[key,value] of Object.entries(data)) {
                    const gridOptions = elementAvailableGridOptions[key];
                    const firstSelectedAvailableNodeIndex = getFirstSelectedNodeIndex(gridOptions);
                    gridOptions.api.setRowData(value);
                    refreshAvailableButtons(Number(key), value.length == 0);
                    if (operation === DELETE_OP) {
                        setGridRowsSelectedByIds(gridOptions, selectedIdList, "id");
                    } else {
                        setNodeSelected(gridOptions, firstSelectedAvailableNodeIndex);
                    }
                }
            }).catch(error => {
                displayErrorDialog(error.message || "An unexpected error occurred");
                console.error("Error fetching available elements after update:", error);
            });
        fetch("/panel/assignedElements?panelId=" + panelId + "&eTypes=" + elementType)
            .then((response) => {
                if (!response.ok) {
                    return response.text().then(text => { throw new Error(text || response.statusText); });
                }
                return response.json();
            })
            .then((data) => {
                for (const[key,value] of Object.entries(data)) {
                    const gridOptions = elementAssignedGridOptions[key];
                    const firstSelectedAssignedNodeIndex = getFirstSelectedNodeIndex(gridOptions);
                    gridOptions.api.setRowData(value);
                    if (Number(key) === pDestinationType) {
                        updateOutputMonitorSettings();
                    }
                    refreshAssignedButtons(Number(key), value.length == 0);
                    if (operation !== DELETE_OP) {
                        setGridRowsSelectedByIds(gridOptions, selectedIdList, "elementId");
                    } else {
                        setNodeSelected(gridOptions, firstSelectedAssignedNodeIndex);
                    }
                    refreshSelectedPanelViewableWarning(Number(key));
                }
            }).catch(error => {
                displayErrorDialog(error.message || "An unexpected error occurred");
                console.error("Error fetching assigned elements after update:", error);
            });
    }

    function getGridSelectedRowIds(gridOptions, attribute) {
        let selectedIdList = [];
        let selectedRows = gridOptions.api.getSelectedRows();
        for (let i = 0; i < selectedRows.length; i++) {
            selectedIdList.push(selectedRows[i][attribute]);
        }
        return selectedIdList;
    }

    function setGridRowsSelectedByIds(gridOptions, selectedIdList, attribute) {
        gridOptions.api.forEachNode((node) => {
            if (selectedIdList.includes(node.data[attribute])) {
                node.setSelected(true);
                gridOptions.api.ensureNodeVisible(node, 'middle');
            } else {
                node.setSelected(false);
            }
        });
    }

    function refreshSelectedPanelSources() {
        refreshSelectedPanelData(availSourcesGridOptions, panelSourcesGridOptions, pSourceType);
    }

    function refreshSelectedPanelDestinations() {
        refreshSelectedPanelData(availDestinationsGridOptions, panelDestinationsGridOptions, pDestinationType);
    }

    function refreshSelectedPanelLevels() {
        refreshSelectedPanelData(availLevelsGridOptions, panelLevelsGridOptions, pLevelType);
    }

    function refreshSelectedPanelSalvos() {
        refreshSelectedPanelData(availSalvosGridOptions, panelSalvosGridOptions, pSalvoType);
    }

    function refreshSelectedPanelAliasSets() {
        refreshSelectedPanelData(availAliasSetsGridOptions, panelAliasSetsGridOptions, pAliasType);
    }

    function refreshSelectedMixerPartitions() {
        refreshSelectedPanelData(availMixerPartitionsGridOptions, mixerPartitionsGridOptions, pMixerType);
    }

    function refreshSelectedFavorites() {
        refreshSelectedPanelData(availFavoritesGridOptions, panelFavoritesGridOptions, pFavoritesType);
    }

    function refreshSelectedPanelSettings(refresh) {
        let panelId = sessionStorage.getItem("panelEditorId");
        if (!panelId) {
            // On initial grid load, selection events can fire before a panel is selected.
            // Avoid noisy console warnings and keep settings empty until we have a panelId.
            $('#settings').empty();
            return;
        }
        $.ajax({
            url: "/panel/settings?panelId=" + panelId, success: function (result) {
                $('#settings').html(result);
                updateOutputMonitorSettings();
                updateViewableSettings();
                if (refresh) {
                    refreshSelectedPanelWindows();
                    refreshSelectedPanelData([pSourceType, pDestinationType, pLevelType, pSalvoType, pMixerType, pAliasType, pFavoritesType]);
                }
            },
            error: function (err) {
                displayErrorDialog(err.responseText || "Cannot load panel settings");
            }
        });
    }

    function refreshPanelSettings(refresh) {
        const panelId = sessionStorage.getItem("panelEditorId");
        if (panelId) {
            $.ajax({
                url: "/panel/settings?panelId=" + panelId, success: function (result) {
                    $('#settings').html(result);
                    updateOutputMonitorSettings();
                    updateViewableSettings();
                    if (refresh) {
                        refreshSelectedPanelWindows();
                    }
                },
                error: function (err) {
                    displayErrorDialog(err.responseText || "Cannot load panel settings");
                }
            });
        }
    }

    function refreshSelectedPanelWindows() {
        let panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
        const selectedRows = panelsGridOptions.api.getSelectedRows();
        if (selectedRows.length === 1) {
            showPanelTab(DataTabIdPrefix);
            let selectRow = selectedRows[0];
            let selectWindowType= "";
            let selectBottomWindowType = "";
            let selectDrawerType = "";
            const selectedHomeWindows = panelLayoutWindowsGridOptions.api.getSelectedRows();
            if(selectedHomeWindows.length == 1){
                selectWindowType = selectedHomeWindows[0].windowType;
            }
            const selectedBottomHomeWindows = panelBottomLayoutWindowsGridOptions.api.getSelectedRows();
            if(selectedBottomHomeWindows.length == 1){
                selectBottomWindowType = selectedBottomHomeWindows[0].windowType;
            }
            const selectedDrawerWindows = panelDrawerWindowsGridOptions.api.getSelectedRows();
            if(selectedDrawerWindows.length == 1){
                selectDrawerType = selectedDrawerWindows[0].windowType;
            }
            if(selectRow.panelTypeId === AudioMixerDesktopType || selectRow.panelTypeId === AudioMixer4ruType || selectRow.panelTypeId === AudioMixer2ruType || selectRow.panelTypeId === UltritouchMvType) {
                hideDataTab(SalvosTabIdPrefix);
            } else {
                showDataTab(SalvosTabIdPrefix);
            }
            if (selectRow.panelTypeId === PushButtonType ||
                selectRow.panelTypeId === MultibusType ||
                selectRow.panelTypeId === UltritouchPbType ||
                selectRow.panelTypeId === UltritouchMvType ||
                selectRow.panelTypeId === Ultritouch4ruSplitType ||
                selectRow.panelTypeId === MatrixType ||
                selectRow.panelTypeId === GroupCategoryType ||
                selectRow.panelTypeId === AudioMixerDesktopType ||
                selectRow.panelTypeId === AudioMixer2ruType ||
                selectRow.panelTypeId === AudioMixer4ruType ||
                selectRow.panelTypeId === GroupPbType) {
                showDataTab(AliasesTabIdPrefix);
            } else {
                hideDataTab(AliasesTabIdPrefix);
            }
            
            // Favorites tab is only visible for Ultritouch and GroupPB panel types
            if (selectRow.panelTypeId === UltritouchPbType ||
                selectRow.panelTypeId === UltritouchMvType ||
                selectRow.panelTypeId === Ultritouch4ruSplitType ||
                selectRow.panelTypeId === GroupPbType) {
                showDataTab(FavoritesTabIdPrefix);
            } else {
                hideDataTab(FavoritesTabIdPrefix);
            }
            if (selectRow.panelTypeId === MatrixType || selectRow.panelTypeId === MultibusType) {
                hidePanelTab(LayoutTabIdPrefix);
                hideDataTab(MixersTabIdPrefix);
            } else {
                if (selectRow.panelTypeId === AudioMixerDesktopType || selectRow.panelTypeId === AudioMixer4ruType || selectRow.panelTypeId === AudioMixer2ruType) {
                    showDataTab(MixersTabIdPrefix);
                } else {
                    hideDataTab(MixersTabIdPrefix);
                }
                showPanelTab(LayoutTabIdPrefix);
                setDrawerAvail(selectRow.panelTypeId);
                setBottomLayoutAvail(selectRow.panelTypeId);
                setWindowButtonsAvail(selectRow.panelTypeId);
                fetch('/panel/layouts?panelId=' + panelId)
                    .then((response) => response.json())
                    .then((data) => {
                        panelLayoutWindowsGridOptions.api.setRowData(data.topWindows);
                        onLayoutSelectionChanged();
                        updateWindowPercentLabel(panelLayoutWindowsGridOptions, "homeWindowPercentLabel");
                        refreshPanelGridSelections(selectWindowType, panelLayoutWindowsGridOptions);

                        panelBottomLayoutWindowsGridOptions.api.setRowData(data.bottomWindows);
                        onBottomLayoutSelectionChanged();
                        updateWindowPercentLabel(panelBottomLayoutWindowsGridOptions, "bottomHomeWindowPercentLabel");
                        refreshPanelGridSelections(selectBottomWindowType, panelBottomLayoutWindowsGridOptions);

                        panelDrawerWindowsGridOptions.api.setRowData(data.drawers);
                        onDrawerLayoutSelectionChanged();
                        refreshPanelGridSelections(selectDrawerType, panelDrawerWindowsGridOptions);
                    })
            }
        } else {
            panelSelectedNone();
            hidePanelTab(DataTabIdPrefix);
        }
    }

    function refreshPanelGridSelections(selectType, gridOptions) {
        if(selectType != "") {
            gridOptions.api.forEachNode((node) => {
                    if (node.data.windowType == selectType) {
                        node.setSelected(true);
                    }
                }
            );
        }
    }

    function parseMixerPartitionDataArray(parray) {
        if (parray) {
            let resp = [];
            for (let i = 0; i < parray.length; i++) {
                resp.push(parseMixerPartitionDataItem(parray[i]))
            }
            return resp
        } else {
            return null;
        }
    }

    function parseMixerPartitionDataItem(data) {
        let resp = {
            "id": 0,
            "name": data.name,
        };
        if (data.id != undefined) {
            resp.id = data.id;
        }
        return resp;
    }

    function updateWindowPercentLabel(grid, labelId) {
        let total = 0;
        grid.api.forEachNode((node) => {
            if(node.data.windowType != "MV Pips"){
                total = total + parseInt(node.data.percent);
            }
        })
        let orientationStr = "Width";
        let orientation = document.getElementById("Orientation");
        if(orientation){
            if (orientation.value == 2) {
                orientationStr = "Height";
            }
        }
        let label = document.getElementById(labelId);
        if(total == 100){
            label.innerHTML = "Total " + orientationStr + " (%): <span class='read-only-frame'>" + total + "</span> <i class='icon-alarm-normal'></i>";
        } else {
            label.innerHTML = "Total " + orientationStr + " (%): <span class='read-only-frame'>" + total + "</span> <i class='icon-alarm-error'></i>";
        }
    }

    function hidePanelTab(tabId) {
        let option = document.getElementById(tabId + "Option");
        let optionSeparator = document.getElementById(tabId +"OptionSeparator");
        option.style.display = 'none';
        optionSeparator.style.display = 'none';
        let window = document.getElementById(tabId);
        if (window.classList.contains('active')) {
            window.classList.remove('active');
            let tab = document.getElementById(tabId + "-tab");
            tab.classList.remove('active');
            let settingsWindow = document.getElementById("settings");
            settingsWindow.classList.add('active');
            let settingsTab = document.getElementById("settings-tab");
            settingsTab.classList.add('active');
        }
    }

    function showPanelTab(tabId) {
        let option = document.getElementById(tabId + "Option");
        let optionSeparator = document.getElementById(tabId + "OptionSeparator");
        option.style.display = '';
        optionSeparator.style.display = '';
    }

    function hideDataTab(tabId) {
        let tab = document.getElementById(tabId + "-tab");
        let tabOptionSeparator = document.getElementById(tabId + "-tabSeparator");
        tab.setAttribute("hidden", "hidden");
        tabOptionSeparator.setAttribute("hidden", "hidden");
        let window = document.getElementById(tabId);
        if (window.classList.contains('active')) {
            window.classList.remove('active');
            tab.classList.remove('active');
            let levelsWindow = document.getElementById("levels");
            levelsWindow.classList.add('active');
            let levelsTab = document.getElementById("levels-tab");
            levelsTab.classList.add('active');
        }
    }

    function showDataTab(tabId) {
        let tab = document.getElementById(tabId + "-tab");
        let tabSeparator = document.getElementById(tabId + "-tabSeparator");
        tab.removeAttribute("hidden");
        tabSeparator.removeAttribute("hidden");
    }

    function setBottomLayoutAvail(panelTypeId) {
        if (panelTypeId === Ultritouch4ruSplitType) {
            let homeWindow = document.getElementById("homeWindow");
            homeWindow.style.height = '33%';
            let homeWindowTitle = document.getElementById("homeWindowTitle");
            homeWindowTitle.innerHTML = '<b>Home Windows (top)</b> ';
            let bottomHomeWindow = document.getElementById("bottomHomeWindow");
            bottomHomeWindow.style.height = '33%';
            let drawerWindow = document.getElementById("drawerWindow");
            drawerWindow.style.height = '33%';
        } else {
            let homeWindow = document.getElementById("homeWindow");
            homeWindow.style.height = '50%';
            let homeWindowTitle = document.getElementById("homeWindowTitle");
            homeWindowTitle.innerHTML = '<b>Home Windows</b>';
            let bottomHomeWindow = document.getElementById("bottomHomeWindow");
            bottomHomeWindow.style.height = '0%';
            let drawerWindow = document.getElementById("drawerWindow");
            drawerWindow.style.height = '50%';
        }
    }

    function setDrawerAvail(panelTypeId) {
        if (panelTypeId === GroupCategoryType || panelTypeId === CatIndexCategoryType || panelTypeId === PushButtonType) {
            let drawerWindow = document.getElementById("drawerWindow");
            drawerWindow.style.display = 'none'
        } else {
            let drawerWindow = document.getElementById("drawerWindow");
            drawerWindow.style.display = '';
        }
    }

    function setWindowButtonsAvail(panelTypeId) {
        if (panelTypeId === UltritouchPbType || panelTypeId === UltritouchMvType || panelTypeId === AudioMixerDesktopType || panelTypeId === AudioMixer4ruType || panelTypeId === AudioMixer2ruType || panelTypeId === Ultritouch4ruSplitType || panelTypeId === GroupPbType){
            if (panelTypeId !== GroupPbType) {
                enableWindowButton("windowAddButton");
                enableWindowButton("windowDeleteButton");
            } else {
                disableWindowButton("windowAddButton");
                disableWindowButton("windowDeleteButton");
            }
            enableWindowButton("drawerAddButton");
            enableWindowButton("drawerDeleteButton");
        } else {
            disableWindowButton("windowAddButton");
            disableWindowButton("windowDeleteButton");
            disableWindowButton("drawerAddButton");
            disableWindowButton("drawerDeleteButton");
        }
        enableWindowButton("windowUpButton");
        enableWindowButton("windowDownButton");
        enableWindowButton("windowTopButton");
        enableWindowButton("windowBottomButton");
        enableWindowButton("drawerUpButton");
        enableWindowButton("drawerDownButton");
        enableWindowButton("drawerTopButton");
        enableWindowButton("drawerBottomButton");
    }

    function enableWindowButton(id) {
        let button = document.getElementById(id);
        if (button.classList.contains('disabled')) {
            button.classList.remove('disabled');
        }
        button.classList.add('enabled');
    }

    function disableWindowButton(id) {
        let button = document.getElementById(id);
        if (button.classList.contains('enabled')) {
            button.classList.remove('enabled');
        }
        button.classList.add('disabled');
    }

    function addWSDBListener() {
        var socket = new WebSocket("ws://" + window.location.hostname + ":8080/dsws");
        socket.onopen = function () {
            console.log("Status: Connected\n");
        };
        socket.onmessage = function (event) {
            console.log(event.data);
            const msg = JSON.parse(event.data);
            switch (msg.table) {
                case PANEL_TABLE:
                    let firstSelectedNodeIndex = getFirstSelectedNodeIndex(panelsGridOptions);
                    fetch('/panel/agdata')
                        .then((response) => response.json())
                        .then((data) => {
                            if (msg.operation === INSERT_OP) {
                                const existingData = [];
                                panelsGridOptions.api.forEachNode(node => existingData.push(node.data));
                                const newPanel = data.find(p => p.id === msg.rowIds[0]);
                                if (newPanel) {
                                    panelsGridOptions.api.setRowData([...existingData, newPanel]);
                                    panelsGridOptions.api.forEachNode((node) => {
                                        if (node.data.id === msg.rowIds[0]) {
                                            node.setSelected(true, true);
                                            panelsGridOptions.api.ensureNodeVisible(node, "middle");
                                        }
                                    });
                                }
                            } else {
                                let updateData = [];
                                data.forEach((row) => {
                                    updateData.push({"id": row.id, "uiId": row.uiId, "name": row.name, "description": row.description, "panelTypeId": row.panelTypeId, "panelType": row.panelType});
                                })
                                panelsGridOptions.api.applyTransaction({update: updateData});
                                if (data == null) {
                                    hidePanelTab(LayoutTabIdPrefix);
                                    hidePanelTab(DataTabIdPrefix);
                                } else {
                                    showPanelTab(DataTabIdPrefix);
                                }
                                if (msg.operation === UPDATE_OP) {
                                    let selected = false;
                                    panelsGridOptions.api.forEachNode((node) => {
                                        if (node.data.id === msg.rowIds[0]) {
                                            selected = true;
                                        }
                                    });
                                    if (!selected) {
                                        setNodeSelected(panelsGridOptions, firstSelectedNodeIndex);
                                    } else {
                                        refreshPanelSettings(true);
                                    }
                                } else if (msg.operation === DELETE_OP) {
                                    let deletedRows = [];
                                    msg.rowIds.forEach(function(id) {deletedRows.push(panelsGridOptions.api.getRowNode(id));})
                                    panelsGridOptions.api.applyTransaction({remove: deletedRows});
                                    if (data) {
                                        setNodeSelected(panelsGridOptions, firstSelectedNodeIndex-1);
                                    } else {
                                        panelSelectedNone();
                                        onPanelRowSelectionChanged();
                                    }
                                }
                            }
                        });
                    break;
                case URL_TREE_NODE_TABLE:
                    if (msg.operation === UPDATE_OP) {
                        let selectedRows = panelsGridOptions.api.getSelectedRows();
                        if (selectedRows.length == 1) {
                            let selectedPanelId = selectedRows[0].id;
                            fetch('/panel/agdata')
                                .then((response) => response.json())
                                .then((data) => {
                                    if (data == null) {
                                        hidePanelTab(LayoutTabIdPrefix);
                                        hidePanelTab(DataTabIdPrefix);
                                    } else {
                                        showPanelTab(DataTabIdPrefix);
                                    }
                                    panelsGridOptions.api.setRowData(data);
                                    panelsGridOptions.api.forEachNode((node) => {
                                        if (node.data.id === selectedPanelId) {
                                            node.setSelected(true, true);
                                        }
                                    });
                                });
                        }
                    }
                    break;
                case DATABASE_TABLE:
                    handleDatabaseTableChange(msg, () => {
                        location.reload();
                    });
                    break;
                case PANEL_SOURCE_TABLE:
                case SOURCE_TABLE:
                    refreshSelectedPanelDataAfterUpdate(availSourcesGridOptions, panelSourcesGridOptions, pSourceType, msg.operation);
                    // When sources change, favorites may have resourceMissing flag changes
                    debouncedFavoritesRefresh();
                    break;
                case PANEL_DESTINATION_TABLE:
                case DESTINATION_TABLE:
                    refreshSelectedPanelDataAfterUpdate(availDestinationsGridOptions, panelDestinationsGridOptions, pDestinationType, msg.operation);
                    // When destinations change, favorites may have resourceMissing flag changes
                    debouncedFavoritesRefresh();
                    break;
                case PANEL_LEVEL_TABLE:
                case LEVEL_TABLE:
                    refreshSelectedPanelDataAfterUpdate(availLevelsGridOptions, panelLevelsGridOptions, pLevelType, msg.operation);
                    break;
                case PANEL_SALVO_TABLE:
                case SALVO_TABLE:
                    refreshSelectedPanelDataAfterUpdate(availSalvosGridOptions, panelSalvosGridOptions, pSalvoType, msg.operation);
                    break;
                case PANEL_ALIAS_SET_TABLE:
                case ALIAS_SET_TABLE:
                    refreshSelectedPanelDataAfterUpdate(availAliasSetsGridOptions, panelAliasSetsGridOptions, pAliasType, msg.operation);
                    break;
                case PANEL_MIXER_PARTITION_TABLE:
                case MIXER_PARTITION_TABLE:
                case MIXER_TABLE:
                    refreshSelectedPanelDataAfterUpdate(availMixerPartitionsGridOptions, mixerPartitionsGridOptions, pMixerType, msg.operation);
                    break;
                case PANEL_FAVORITE_TABLE:
                case FAVORITE_TABLE:
                    // Clear pending updates for IDs confirmed by WebSocket (event-driven pattern)
                    if (msg.rowIds && Array.isArray(msg.rowIds)) {
                        msg.rowIds.forEach(id => pendingFavoriteUpdates.delete(id));
                    }
                    // Skip redundant reload if we still have pending updates
                    if (pendingFavoriteUpdates.size > 0) { break; }
                    refreshSelectedPanelDataAfterUpdate(availFavoritesGridOptions, panelFavoritesGridOptions, pFavoritesType, msg.operation);
                    break;
                case FAVORITE_MAPPINGS_TABLE:
                    // Skip if we have pending updates (event-driven sync pattern)
                    if (pendingFavoriteUpdates.size > 0) { break; }
                    // Use debounced function to batch rapid notifications
                    debouncedFavoritesRefresh();
                    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);
        };
    }

    function onPanelCellValueChanged(event) {
        if (event.column.colId == "name") {
            if (!event.newValue) {
                return;
            }
            event.newValue = event.newValue.trim();
            if (!validateString(event.newValue)) {
                displayErrorDialog(NameErrorMessage);
                refreshPanelsGridOptions();
                return;
            }

            const duplicateNamesId = checkForDuplicateNames (panelsGridOptions, "uiId", event.newValue, event.data.uiId);
            if (duplicateNamesId > -1) {
                displayErrorDialog(getDuplicateNamesError(event.newValue, objectTypeName, duplicateNamesId));
                refreshPanelsGridOptions();
                return;
            }
        }
        $.post("/panel/update", event.data);
    }

    function refreshPanelsGridOptions() {
        fetch('/panel/agdata')
            .then((response) => response.json())
            .then((data) => {
                const firstSelectedNodeIndex = panelsGridOptions.api.getSelectedNodes()[0].rowIndex;
                panelsGridOptions.api.setRowData(data);
                setNodeSelected(panelsGridOptions, firstSelectedNodeIndex);
        });
    }

    function duplicatePanelCheck() {
        const selectedData = panelsGridOptions.api.getSelectedRows();
        if (selectedData.length > 0) {
            document.getElementById("duplicatePanelName").value = selectedData[0].name;
        } else {
            document.getElementById("duplicatePanelName").value = "";
        }
        displayDialog('duplicatePanelModal');
    }


    function duplicateSelectedPanel() {
        hideDialog('duplicatePanelModal');
        let panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
        $.ajax({url: "/panel/duplicate?id=" + panelId});
        const selectedData = panelsGridOptions.api.getSelectedRows();
        if (selectedData.length > 0) {
            let errors = [];
            let name = document.getElementById("duplicatePanelName").value;
            name = name.trim();
            if (!validateString(name)) {
                errors.push(NameErrorMessage);
            }

            if (errors.length > 0) {
                displayErrorMessagesDialog("The following errors must be resolved in order to duplicate the alias set", errors);
                return;
            }

            const duplicateNamesId = checkForDuplicateNames(panelsGridOptions, "uiId", name, null);
            if (duplicateNamesId > -1) {
                errors.push(getDuplicateNamesError(name, objectTypeName, duplicateNamesId));
            }

            if (errors.length > 0) {
                displayErrorMessagesDialog("The following errors must be resolved in order to duplicate the panel", errors);
                return;
            }

            const urlParameters = [
                "id=" + selectedData[0].id,
                "name=" + encodeURIComponent(name)
            ];
            hideDialog('duplicatePanelModal');
            displayDialog("LoadingModal");
            $.ajax({
                url: "/panel/duplicate?" + urlParameters.join("&"),
                success: () => {
                    hideDialog("LoadingModal");
                },
                error: (err) => {
                    displayErrorDialog(err.responseText || "An unexpected error occurred");
                }
            });
        } else {
            displayWarningDialog("Please select a panel to duplicate.");
        }
    }

    function removeSelectedPanel() {
        const selectedRows = panelsGridOptions.api.getSelectedRows();
        selectedRows.forEach(rowData => {
            $.ajax({url: "/panel/remove?id=" + rowData.id});
            sessionStorage.removeItem(sessionKeys.PANEL_SELECTED);
        });
        hideDialog("removePanelModal");
    }

    function showAddPanelModal() {
        let id = 1;
        panelsGridOptions.api.forEachNode((node) => {
            if (id < (parseInt(node.data.uiId)+1)) {
                id = parseInt(node.data.uiId)+1;
            }
        })
        document.getElementById('PanelId').value = id;
        document.getElementById("Name").value = "";
        document.getElementById("Description").value = "";
        document.getElementById("PanelType").value = 1;
        displayDialog('addPanelModal');
    }

    function addPanel() {
        let name = document.getElementById("Name").value;
        name = name.trim();
        if (!validateString(name)) {
            displayErrorDialog(NameErrorMessage);
            return;
        }

        const duplicateNamesId = checkForDuplicateNames (panelsGridOptions, "uiId", name, null);
        if (duplicateNamesId > -1) {
            displayErrorDialog(getDuplicateNamesError(name, objectTypeName, duplicateNamesId));
            return;
        }

        let formatName = encodeURIComponent(name);
        let newPanelId = document.getElementById("PanelId").value;
        if (!isNumeric(newPanelId)) {
            displayErrorDialog(IdErrorMessage);
        }

        panelsGridOptions.api.forEachNode((node) => {
            if (newPanelId == parseInt(node.data.uiId)) {
                displayWarningDialog("The current " + objectTypeName + " ID is already in use.  Please select a different ID for this panel.");
            }
        });

        hideDialog("addPanelModal");
        let description = encodeURIComponent(document.getElementById("Description").value);
        let panelType = document.getElementById("PanelType").value;
        $.ajax({
            url: "/panel/add?name=" + formatName + "&description=" + description + "&panelId=" + newPanelId + "&panelType=" + panelType
        });
    }

    function removePanel() {
        const selectedData = panelsGridOptions.api.getSelectedRows()
        if (selectedData.length > 0) {
            displayDialog("removePanelModal");
        } else {
            displayWarningDialog("Please select a panel to delete.");
        }
    }

    function panelSelectedNone() {
        $('#settings').html("");
        const dataEl = document.getElementById("data");
        const layoutEl = document.getElementById("layout");
        if (dataEl) dataEl.style.display = "none";
        if (layoutEl) layoutEl.style.display = "none";
    }

    function panelSelected() {
        const dataEl = document.getElementById("data");
        const layoutEl = document.getElementById("layout");
        if (dataEl) dataEl.style.display = "";
        if (layoutEl) layoutEl.style.display = "";
    }

    function checkOutputMonitorPanelSetting() {
        let selectedPanel = panelsGridOptions.api.getSelectedRows();
        if (selectedPanel.length > 0 && selectedPanel[0].panelTypeId === UltritouchPbType) {
            panelDrawerWindowsGridOptions.api.forEachNode((node) => {
                if (node.data.id === outputMonitorWindowId){
                    refreshSelectedPanelSettings(false);
                }
            });
        }
    }

    function panelUiidValueSetter(params) {
        if (params.newValue === "" || params.newValue === "0" || !isWholeNumber(params.newValue)) {
            displayErrorDialog(IdWholeErrorMessage + "  Zero is also not a valid value for this field.");
            return false;
        }
        let duplicate = false;
        panelsGridOptions.api.forEachNode((node) => {
            if (node.data.id != params.data.id && node.data.uiId == params.newValue) {
                duplicate = true;
            }
        });
        if (duplicate) {
            displayErrorDialog("New Panel ID value is already been used.  Please select another number.");
            return false;
        }
        params.data.uiId = params.newValue;
        return true;
    }

    function onPanelMoved(directionType) {
        let panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
        if (panelId) {
            let check = true;
            if(directionType === moveUp || directionType === moveTop) {
                panelsGridOptions.api.forEachNode((node) => {
                    if (node.rowIndex === 0 && node.isSelected()) {
                        check = false;
                    }
                });
            } else {
                let rowCount = panelsGridOptions.api.getDisplayedRowCount();
                panelsGridOptions.api.forEachNode((node) => {
                    if (node.rowIndex === rowCount-1 && node.isSelected()) {
                        check = false;
                    }
                });
            }
            if(check) {
                displayDialog("LoadingModal");
                $.ajax({
                    url: "/panel/move?panelId="+ panelId + "&direction="+ directionType,
                    success: () => {
                        hideDialog("LoadingModal");
                    },
                    error: (err) => {
                        displayErrorDialog(err.responseText || "An unexpected error occurred");
                    }
                });
            }
        }
    }

    function handleDbModeChange(eventData) {
        dbMode = eventData.detail.dbMode;
        onPanelRowSelectionChanged();
    }
</script>

<div class="modal" id="addPanelModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addPanelModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-add-panel-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="addPanelModalLabel"><i class="icon-add icon-white"></i>Add Panel</span>
                <span class="btn btn-transparent" onclick="hideDialog('addPanelModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table class="container-data">
                    <tr class="row-data">
                        <td class="col-data-label">Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" name="Name" id="Name" tabindex="0"></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Description:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 description-size" name="Description" id="Description" tabindex="1"></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">ID:</td>
                        <td class="col-data-input"><span class="number-wrapper"><input type="number" min="1" class="form-control rounded-0 count-size" name="PanelId" id="PanelId" tabindex="2"></span></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Style:</td>
                        <td class="col-data-input">
                            <div class="select-wrapper">
                                <select class="custom-select" name="PanelType" id="PanelType" tabindex="3">
                                    {{ range .PanelTypes }}
                                    <option value="{{ .Id }}">{{ .Name }}</option>
                                    {{ end }}
                                </select>
                            </div>
                        </td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="5" onclick="hideDialog('addPanelModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="4" onclick="addPanel()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="duplicatePanelModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="duplicatePanelModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-duplicate-panel-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="duplicatePanelModalLabel"><i class="icon-duplicate icon-white"></i>Duplicate Panel</span>
                <span class="btn btn-transparent" onclick="hideDialog('duplicatePanelModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table class="container-data">
                    <tr class="row-data">
                        <td class="col-data-label">New Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" name="duplicatePanelName" id="duplicatePanelName" tabindex="0"></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('duplicatePanelModal')">Cancel</button>
                <button class="btn btn-text" tabindex="1" onclick="duplicateSelectedPanel()">Apply</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="removePanelModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="removePanelModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-remove-panel-size">
        <div class="modal-content">
            <div class="modal-header info-header justify-content-between">
                <span class="modal-title" id="removePanelModalLabel"><i class="icon-delete icon-white"></i>Confirm Delete Panel</span>
                <span class="btn btn-transparent" onclick="hideDialog('removePanelModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data">Are you sure you want to delete the selected panel?</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('removePanelModal')">Cancel</button>
                <button  class="btn btn-text" tabindex="0" onclick="removeSelectedPanel()">Apply</button>
            </div>
        </div>
    </div>
</div>

{{ end }}