{#
/**
 * Copyright (C) 2021 Xibo Signage Ltd
 *
 * Xibo - Digital Signage - http://www.xibo.org.uk
 *
 * This file is part of Xibo.
 *
 * Xibo is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version.
 *
 * Xibo is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
 */
#}
{% extends "authed.twig" %}
{% import "inline.twig" as inline %}

{% block pageContent %}
    {% include "theme-dashboard-message.twig" ignore missing %}

    <div class="dashboard-page">
        <div class="page-header">
            <h1>{% trans "Dashboard" %}</h1>
            <p class="text-muted">{% trans "Overview of your digital signage network" %}</p>
        </div>

        <div class="quick-actions-grid">
            <h3 class="section-title">{% trans "Quick Actions" %}</h3>
            <div class="action-cards">
                {% if currentUser.featureEnabled("schedule.view") %}
                    <a class="action-card action-card--modern dashboard-card" href="{{ url_for("schedule.view") }}">
                        <div class="action-icon"><i class="fa fa-calendar"></i></div>
                        <div class="action-label">{% trans "Create Schedule" %}</div>
                    </a>
                {% endif %}

                {% if currentUser.featureEnabled("displays.view") %}
                    <a class="action-card action-card--modern dashboard-card" href="{{ url_for("display.view") }}">
                        <div class="action-icon"><i class="fa fa-desktop"></i></div>
                        <div class="action-label">{% trans "Manage Displays" %}</div>
                    </a>
                {% endif %}

                {% if currentUser.featureEnabled("users.view") and (currentUser.isGroupAdmin() or currentUser.isSuperAdmin()) %}
                    <a class="action-card action-card--modern dashboard-card" href="{{ url_for("user.view") }}">
                        <div class="action-icon"><i class="fa fa-user-plus"></i></div>
                        <div class="action-label">{% trans "Add User" %}</div>
                    </a>
                {% endif %}
            </div>
        </div>

        <div class="kpi-section">
            <div class="kpi-card dashboard-card kpi-card--modern">
                <div class="kpi-header">
                    <p class="kpi-label">{% trans "Displays" %}</p>
                    <div class="kpi-icon-box"><i class="fa fa-desktop"></i></div>
                </div>
                <div class="kpi-body">
                    <div class="kpi-number displays-count">0</div>
                    <div class="kpi-meta displays-comment" data-title="{% trans "Display" %}" data-title-plural="{% trans "Displays" %}"></div>
                </div>
                <div class="kpi-footer">
                    <span class="badge badge-info">{% trans "Status" %}</span>
                    <span class="text-xs text-tertiary">{% trans "Live updates" %}</span>
                </div>
            </div>

            <div class="kpi-card dashboard-card kpi-card--modern">
                <div class="kpi-header">
                    <p class="kpi-label">{% trans "Library" %}</p>
                    <div class="kpi-icon-box"><i class="fa fa-tasks"></i></div>
                </div>
                <div class="kpi-body">
                    <div class="kpi-number">{{ librarySize }}</div>
                    <div class="kpi-meta">{% trans "Library Size" %}</div>
                </div>
                <div class="kpi-footer">
                    <span class="badge badge-secondary">{% trans "Storage" %}</span>
                    <span class="text-xs text-tertiary">{% trans "Usage snapshot" %}</span>
                </div>
            </div>

            <div class="kpi-card dashboard-card kpi-card--modern">
                <div class="kpi-header">
                    <p class="kpi-label">{% trans "Users" %}</p>
                    <div class="kpi-icon-box"><i class="fa fa-users"></i></div>
                </div>
                <div class="kpi-body">
                    <div class="kpi-number">{{ countUsers }}</div>
                    <div class="kpi-meta">{% if countUsers == 1 %}{% trans "User" %}{% else %}{% trans "Users" %}{% endif %}</div>
                </div>
                <div class="kpi-footer">
                    <span class="badge badge-success">{% trans "Active" %}</span>
                    <span class="text-xs text-tertiary">{% trans "Team access" %}</span>
                </div>
            </div>

            <div class="kpi-card dashboard-card kpi-card--modern">
                <div class="kpi-header">
                    <p class="kpi-label">{% trans "Now Showing" %}</p>
                    <div class="kpi-icon-box"><i class="fa fa-cogs"></i></div>
                </div>
                <div class="kpi-body">
                    {% if embeddedWidget != "" %}
                        {{ embeddedWidget|raw }}
                    {% else %}
                        <div class="kpi-number">{{ nowShowing }}</div>
                        <div class="kpi-meta">{% trans "Now Showing" %}</div>
                    {% endif %}
                </div>
                <div class="kpi-footer">
                    <span class="badge badge-info">{% trans "Schedules" %}</span>
                    <span class="text-xs text-tertiary">{% trans "Content activity" %}</span>
                </div>
            </div>
        </div>

        <div class="dashboard-panels">
            <div class="widget dashboard-chart-card dashboard-chart-card--bandwidth dashboard-card">
                <div class="dashboard-chart-header">
                    <div class="dashboard-chart-info">
                        <div class="dashboard-chart-icon"><i class="fa fa-arrow-down" aria-hidden="true"></i></div>
                        <div class="dashboard-chart-meta">
                            <div class="dashboard-chart-heading">
                                {% if xmdsLimit != "" %}
                                    {% trans %}Bandwidth Usage{% endtrans %}
                                {% else %}
                                    {% trans %}Bandwidth Usage{% endtrans %}
                                {% endif %}
                            </div>
                            <div class="dashboard-chart-subtitle">
                                {% if xmdsLimit != "" %}
                                    {% trans %}Limit {{ xmdsLimit }}{% endtrans %}
                                {% else %}
                                    {% trans %}Reporting in {{ bandwidthSuffix }}{% endtrans %}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-chart-actions">
                        {% if currentUser.featureEnabled("displays.reporting") %}
                            <a class="dashboard-chart-link" href="/report/form/bandwidth">{% trans "More Statistics" %}</a>
                        {% endif %}
                        <div class="dashboard-chart-toggle" data-chart="bandwidthChart">
                            <button type="button" class="dashboard-chart-toggle-button is-active" data-chart-type="line" aria-label="{% trans 'Line chart' %}"><i class="fa fa-chart-line" aria-hidden="true"></i></button>
                            <button type="button" class="dashboard-chart-toggle-button" data-chart-type="bar" aria-label="{% trans 'Bar chart' %}"><i class="fa fa-chart-bar" aria-hidden="true"></i></button>
                        </div>
                    </div>
                </div>
                <div class="widget-body dashboard-chart-body">
                    <div class="dashboard-chart-canvas">
                        <canvas id="bandwidthChart" aria-label="{% trans "Bandwidth Usage" %}" role="img"></canvas>
                    </div>
                </div>
            </div>

            <div class="widget dashboard-chart-card dashboard-chart-card--library dashboard-card">
                <div class="dashboard-chart-header">
                    <div class="dashboard-chart-info">
                        <div class="dashboard-chart-icon"><i class="fa fa-hdd-o" aria-hidden="true"></i></div>
                        <div class="dashboard-chart-meta">
                            <div class="dashboard-chart-heading">
                                {% trans "Library Usage" %}
                            </div>
                            <div class="dashboard-chart-subtitle">
                                {% if libraryLimitSet != "" %}
                                    {% trans %}Limit {{ libraryLimit }}{% endtrans %}
                                {% else %}
                                    {% trans "Storage distribution" %}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-chart-actions">
                        <div class="dashboard-chart-toggle" data-chart="libraryChart">
                            <button type="button" class="dashboard-chart-toggle-button is-active" data-chart-type="pie" aria-label="{% trans 'Pie chart' %}"><i class="fa fa-pie-chart" aria-hidden="true"></i></button>
                            <button type="button" class="dashboard-chart-toggle-button" data-chart-type="doughnut" aria-label="{% trans 'Doughnut chart' %}"><i class="fa fa-circle-o" aria-hidden="true"></i></button>
                            <button type="button" class="dashboard-chart-toggle-button" data-chart-type="bar" aria-label="{% trans 'Bar chart' %}"><i class="fa fa-chart-bar" aria-hidden="true"></i></button>
                        </div>
                    </div>
                </div>
                <div class="widget-body dashboard-chart-body">
                    <div class="dashboard-chart-canvas">
                        <canvas id="libraryChart" aria-label="{% trans "Library Usage" %}" role="img"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="dashboard-panels">
            <div class="panel dashboard-card">
                <div class="dashboard-chart-header">
                    <div class="dashboard-chart-info">
                        <div class="dashboard-chart-icon"><i class="fa fa-desktop" aria-hidden="true"></i></div>
                        <div class="dashboard-chart-meta">
                            <div class="dashboard-chart-heading">{% trans "Display Activity" %}</div>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table id="displays" class="table">
                            <thead>
                                <tr>
                                    <th>{% trans "Display" %}</th>
                                    <th>{% trans "Logged In" %}</th>
                                    <th>{% trans "Authorised" %}</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="panel dashboard-card">
                <div class="dashboard-chart-header">
                    <div class="dashboard-chart-info">
                        <div class="dashboard-chart-icon"><i class="fa fa-newspaper-o" aria-hidden="true"></i></div>
                        <div class="dashboard-chart-meta">
                            <div class="dashboard-chart-heading">{% trans "Latest News" %}</div>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    {% if latestNews|length > 0 %}
                        {% for news in latestNews %}
                            <div class="article">
                                <h4 class="article_title">{{ news.title }} <small class="article_date">{{ news.date }}</small></h4>
                                <p>{{ news.description|raw }} {% if news.link %}<a href="{{ news.link }}" title="Read" target="_blank">{% trans "Full Article" %}</a>.{% endif %}</p>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="empty-state-compact">
                            <p>{% trans "No news available." %}</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="dashboard-panels">
            <div class="widget dashboard-chart-card dashboard-card">
                <div class="dashboard-chart-header">
                    <div class="dashboard-chart-info">
                        <div class="dashboard-chart-icon"><i class="fa fa-circle-o" aria-hidden="true"></i></div>
                        <div class="dashboard-chart-meta">
                            <div class="dashboard-chart-heading">{% trans "Display Status" %}</div>
                            <div class="dashboard-chart-subtitle">{% trans "Click on the chart for a breakdown" %}</div>
                        </div>
                    </div>
                    <div class="dashboard-chart-actions">
                        <div class="dashboard-chart-toggle" data-chart="displayStatusChart">
                            <button type="button" class="dashboard-chart-toggle-button is-active" data-chart-type="doughnut" aria-label="{% trans 'Doughnut chart' %}"><i class="fa fa-circle-o" aria-hidden="true"></i></button>
                            <button type="button" class="dashboard-chart-toggle-button" data-chart-type="pie" aria-label="{% trans 'Pie chart' %}"><i class="fa fa-pie-chart" aria-hidden="true"></i></button>
                        </div>
                    </div>
                </div>
                <div class="widget-body dashboard-chart-body">
                    <div class="dashboard-chart-canvas">
                        <canvas id="displayStatusChart" style="clear:both;" aria-label="{% trans "Display Status" %}" role="img"></canvas>
                    </div>
                </div>
            </div>

            <div class="widget dashboard-chart-card dashboard-card">
                <div class="dashboard-chart-header">
                    <div class="dashboard-chart-info">
                        <div class="dashboard-chart-icon"><i class="fa fa-list-alt" aria-hidden="true"></i></div>
                        <div class="dashboard-chart-meta">
                            <div class="dashboard-chart-heading">{% trans "Display Content Status" %}</div>
                            <div class="dashboard-chart-subtitle">{% trans "Click on the chart for a breakdown" %}</div>
                        </div>
                    </div>
                    <div class="dashboard-chart-actions">
                        <div class="dashboard-chart-toggle" data-chart="displayContentChart">
                            <button type="button" class="dashboard-chart-toggle-button is-active" data-chart-type="doughnut" aria-label="{% trans 'Doughnut chart' %}"><i class="fa fa-circle-o" aria-hidden="true"></i></button>
                            <button type="button" class="dashboard-chart-toggle-button" data-chart-type="pie" aria-label="{% trans 'Pie chart' %}"><i class="fa fa-pie-chart" aria-hidden="true"></i></button>
                        </div>
                    </div>
                </div>
                <div class="widget-body dashboard-chart-body">
                    <div class="dashboard-chart-canvas">
                        <canvas id="displayContentChart" style="clear:both;" aria-label="{% trans "Display Content Status" %}" role="img"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="dashboard-panels d-none" id="displayGroupStatusChartRow">
            <div class="widget dashboard-chart-card dashboard-card">
                <div class="dashboard-chart-header">
                    <div class="dashboard-chart-info">
                        <div class="dashboard-chart-icon"><i class="fa fa-sitemap" aria-hidden="true"></i></div>
                        <div class="dashboard-chart-meta">
                            <div class="dashboard-chart-heading" id="dGStatusTitle">{% trans "Display Groups Status" %}</div>
                            <div class="dashboard-chart-subtitle">{% trans "Grouped by status" %}</div>
                        </div>
                    </div>
                    <div class="dashboard-chart-actions">
                        <div class="dashboard-chart-toggle" data-chart="displayGroupStatusChart">
                            <button type="button" class="dashboard-chart-toggle-button is-active" data-chart-type="doughnut" aria-label="{% trans 'Doughnut chart' %}"><i class="fa fa-circle-o" aria-hidden="true"></i></button>
                            <button type="button" class="dashboard-chart-toggle-button" data-chart-type="pie" aria-label="{% trans 'Pie chart' %}"><i class="fa fa-pie-chart" aria-hidden="true"></i></button>
                            <button type="button" class="dashboard-chart-toggle-button" data-chart-type="bar" aria-label="{% trans 'Bar chart' %}"><i class="fa fa-chart-bar" aria-hidden="true"></i></button>
                        </div>
                    </div>
                </div>
                <div class="widget-body dashboard-chart-body">
                    <div class="dashboard-chart-canvas">
                        <canvas id="displayGroupStatusChart" style="clear:both;"></canvas>
                    </div>
                </div>
            </div>

            <div class="widget dashboard-chart-card dashboard-card">
                <div class="dashboard-chart-header">
                    <div class="dashboard-chart-info">
                        <div class="dashboard-chart-icon"><i class="fa fa-folder-o" aria-hidden="true"></i></div>
                        <div class="dashboard-chart-meta">
                            <div class="dashboard-chart-heading" id="dGContentTitle">{% trans "Display Groups Content Status" %}</div>
                            <div class="dashboard-chart-subtitle">{% trans "Grouped by content status" %}</div>
                        </div>
                    </div>
                    <div class="dashboard-chart-actions">
                        <div class="dashboard-chart-toggle" data-chart="displayGroupContentStatusChart">
                            <button type="button" class="dashboard-chart-toggle-button is-active" data-chart-type="doughnut" aria-label="{% trans 'Doughnut chart' %}"><i class="fa fa-circle-o" aria-hidden="true"></i></button>
                            <button type="button" class="dashboard-chart-toggle-button" data-chart-type="pie" aria-label="{% trans 'Pie chart' %}"><i class="fa fa-pie-chart" aria-hidden="true"></i></button>
                            <button type="button" class="dashboard-chart-toggle-button" data-chart-type="bar" aria-label="{% trans 'Bar chart' %}"><i class="fa fa-chart-bar" aria-hidden="true"></i></button>
                        </div>
                    </div>
                </div>
                <div class="widget-body dashboard-chart-body">
                    <div class="dashboard-chart-canvas">
                        <canvas id="displayGroupContentStatusChart" style="clear:both;"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-full d-none dashboard-card" id="displaysGridTable">
            <div class="panel-header">
                <h3>{% trans "Displays" %}</h3>
                {% if currentUser.featureEnabled("displays.view") %}
                    <a class="link-secondary" href="{{ url_for('display.view') }}">{% trans "Displays Page" %}</a>
                {% endif %}
            </div>
            <div class="panel-body">
                <div class="XiboGrid" id="{{ random() }}" data-grid-name="displayGridView">
                    <div class="XiboFilter card mb-3 bg-light d-none">
                        <div class="FilterDiv card-body" id="Filter">
                            <form class="form-inline d-block">
                                <div class="tab-content">
                                    <div class="tab-pane active" id="filter-general">
                                        {{ inline.hidden("displayGroupId") }}
                                        {{ inline.hidden("mediaInventoryStatus") }}
                                        {{ inline.hidden("loggedIn") }}
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="XiboData card pt-3 dashboard-card ots-table-card">
                        <table id="displaysGrid" class="table table-striped" data-state-preference-name="statusDashboardDisplays" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>{% trans "ID" %}</th>
                                    <th>{% trans "Display" %}</th>
                                    <th>{% trans "Status" %}</th>
                                    <th>{% trans "Authorised?" %}</th>
                                    <th>{% trans "Current Layout" %}</th>
                                    <th>{% trans "Storage Available" %}</th>
                                    <th>{% trans "Storage Total" %}</th>
                                    <th>{% trans "Storage Free %" %}</th>
                                    <th>{% trans "Description" %}</th><th>{% trans "Orientation" %}</th>
                                    <th>{% trans "Resolution" %}</th>
                                    {% if currentUser.featureEnabled("tag.tagging") %}<th>{% trans "Tags" %}</th>{% endif %}
                                    <th>{% trans "Default Layout" %}</th>
                                    <th>{% trans "Interleave Default" %}</th>
                                    <th>{% trans "Email Alert" %}</th>
                                    <th>{% trans "Logged In" %}</th>
                                    <th>{% trans "Last Accessed" %}</th>
                                    <th>{% trans "Display Profile" %}</th>
                                    <th>{% trans "Version" %}</th>
                                    <th>{% trans "Device Name" %}</th>
                                    <th>{% trans "IP Address" %}</th>
                                    <th>{% trans "Mac Address" %}</th>
                                    <th>{% trans "Timezone" %}</th>
                                    <th>{% trans "Latitude" %}</th>
                                    <th>{% trans "Longitude" %}</th>
                                    <th>{% trans "Screen shot?" %}</th>
                                    <th>{% trans "Thumbnail" %}</th>
                                    <th>{% trans "CMS Transfer?" %}</th>
                                    <th>{% trans "Bandwidth Limit" %}</th>
                                    <th>{% trans "Last Command" %}</th>
                                    <th>{% trans "XMR Registered" %}</th>
                                    <th>{% trans "Commercial Licence" %}</th>
                                    <th>{% trans "Remote" %}</th>
                                    <th>{% trans "Created Date" %}</th>
                                    <th>{% trans "Modified Date" %}</th>
                                    <th>{% trans "Faults?" %}</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javaScript %}
    <script type="text/javascript" nonce="{{ cspNonce }}">
      const stringToColour = function(str) {
        let hash = 0;
        str.split('').forEach(char => {
          hash = char.charCodeAt(0) + ((hash << 5) - hash);
        });
        let colour = '#';
        for (let i = 0; i < 3; i++) {
          const value = (hash >> (i * 8)) & 0xff;
          colour += value.toString(16).padStart(2, '0');
        }
        return colour;
      }

        var displayGroupStatusChart = null;
        var displayGroupContentStatusChart = null;

        var displayGroupId = null;
        var loggedInStatus = null;
        var mediaInventoryStatus = null;

        var displayGroupIdsContent = [];
        var displayGroupIdsStatus = [];
        var displayGridTable = null

                // Create our charts
                const bandwidthStacked = {% if xmdsLimit %}true{% else %}false{% endif %};

                function pickColor(value, fallback) {
                    if (Array.isArray(value)) return value[0] || fallback;
                    return value || fallback;
                }

                function cacheDatasetStyles(dataset) {
                    if (!dataset._ots) {
                        dataset._ots = {
                            backgroundColor: dataset.backgroundColor,
                            borderColor: dataset.borderColor,
                            fill: dataset.fill
                        };
                    }
                }

                function applyDatasetType(dataset, type, fallbackColor) {
                    cacheDatasetStyles(dataset);
                    dataset.type = type;

                    if (type === 'line') {
                        const color = pickColor(dataset._ots.borderColor || dataset._ots.backgroundColor, fallbackColor);
                        dataset.borderColor = color;
                        dataset.backgroundColor = 'rgba(0, 0, 0, 0)';
                        dataset.fill = false;
                        dataset.tension = 0.35;
                        dataset.pointRadius = 2;
                        dataset.pointHoverRadius = 3;
                        dataset.pointBackgroundColor = color;
                    } else {
                        dataset.backgroundColor = dataset._ots.backgroundColor || dataset.backgroundColor || fallbackColor;
                        dataset.borderColor = dataset._ots.borderColor || dataset.borderColor;
                        dataset.fill = dataset._ots.fill;
                        dataset.tension = 0;
                        dataset.pointRadius = 0;
                    }
                }

                function setBandwidthScaleOptions(chart, type) {
                    if (!chart.options || !chart.options.scales) return;
                    const stacked = type === 'bar' ? bandwidthStacked : false;
                    chart.options.scales.xAxes[0].stacked = stacked;
                    chart.options.scales.yAxes[0].stacked = stacked;
                }

                function setChartType(chart, type, isBandwidth) {
                    chart.config.type = type;
                    chart.data.datasets.forEach(function(dataset) {
                        applyDatasetType(dataset, type, 'rgba(96, 165, 250, 0.9)');
                    });
                    if (isBandwidth) {
                        setBandwidthScaleOptions(chart, type);
                    }
                    chart.update();
                }

                function setLibraryChartType(chart, type) {
                    if (type === 'pie' || type === 'doughnut') {
                        chart.config.type = type;
                        chart.update();
                    } else if (type === 'bar') {
                        // Convert pie data to bar format
                        const labels = chart.data.labels;
                        const data = chart.data.datasets[0].data;
                        const colors = chart.data.datasets[0].backgroundColor;
                        
                        chart.config.type = 'bar';
                        chart.data.datasets[0].type = 'bar';
                        chart.data.datasets[0].backgroundColor = colors;
                        chart.data.datasets[0].borderColor = colors;
                        chart.options.scales = {
                            xAxes: [{ stacked: false }],
                            yAxes: [{ stacked: false }]
                        };
                        chart.update();
                    }
                }

                // Set Chart.js default font/color from CSS variables so charts match theme
                (function(){
                    try {
                        var root = getComputedStyle(document.documentElement);
                        var cssColor = root.getPropertyValue('--ots-text') || root.getPropertyValue('--color-text-primary') || root.getPropertyValue('--color-text');
                        cssColor = (cssColor || '').trim() || '#ffffff';
                        if (window.Chart && Chart.defaults) {
                            // Chart.js v3+ uses Chart.defaults.color
                            if (typeof Chart.defaults.color !== 'undefined') Chart.defaults.color = cssColor;
                            // Backwards compatibility for older Chart.js
                            if (Chart.defaults.global) Chart.defaults.global.defaultFontColor = cssColor;
                            if (Chart.defaults.font) Chart.defaults.font.color = cssColor;
                        }
                    } catch (e) { /* ignore */ }
                })();

                var bandwidthChart = new Chart($("#bandwidthChart"), {
                        type: "line",
                        data: {{ bandwidthWidget|raw }},
                        options: {
                                scales: {
                                        xAxes: [{
                                                stacked: false
                                        }],
                                        yAxes: [{
                                                scaleLabel: {
                                                        display: true,
                                                        labelString: "{{ bandwidthSuffix }}",
                                                },
                                                stacked: false
                                        }]
                                },
                                legend: {
                                        display: false
                                },
                                maintainAspectRatio: false,
                        }
                });

                var libraryData = {{ libraryWidgetData|raw }};
                const libraryLabels = {{ libraryWidgetLabels|raw }};
                var colours = new Array();
                for (var i = 0; i < libraryData.length; i++) {
                  colours.push(stringToColour(libraryLabels[i]));
                }
                var libraryChart = new Chart($("#libraryChart"), {
                    type: 'pie',
                    data: {
                        datasets: [{
                            data: libraryData,
                            backgroundColor: colours
                        }],
                        labels: {{ libraryWidgetLabels|raw }}
                    },
                    options: {
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }
                });

                setChartType(libraryChart, 'pie', false);

                $('.dashboard-chart-toggle').each(function() {
                    const toggle = $(this);
                    const chartId = toggle.data('chart');
                    let chart = null;
                    
                    if (chartId === 'bandwidthChart') {
                        chart = bandwidthChart;
                    } else if (chartId === 'libraryChart') {
                        chart = libraryChart;
                    } else if (chartId === 'displayStatusChart') {
                        chart = displayStatusChart;
                    } else if (chartId === 'displayContentChart') {
                        chart = displayContentChart;
                    } else if (chartId === 'displayGroupStatusChart') {
                        chart = displayGroupStatusChart;
                    } else if (chartId === 'displayGroupContentStatusChart') {
                        chart = displayGroupContentStatusChart;
                    }
                    
                    if (!chart) return;

                    toggle.find('.dashboard-chart-toggle-button').on('click', function(e) {
                        e.preventDefault();
                        const type = $(this).data('chart-type');
                        
                        // Update active state
                        toggle.find('.dashboard-chart-toggle-button').removeClass('is-active');
                        $(this).addClass('is-active');
                        
                        // Update chart type
                        if (chartId === 'libraryChart') {
                            setLibraryChartType(chart, type);
                        } else {
                            setChartType(chart, type, chartId === 'bandwidthChart');
                        }
                    });
                });

        $('.article_date').each(function(index, element) {
          // Replace the ISO date with a nice formatted date "for humans"
          const date = $(element).html();
          if (date) {
            $(element).html(moment(date, systemDateFormat).fromNow());
          }
        });

        var table = $("#displays").DataTable({
            "language": dataTablesLanguage,
            serverSide: true,
            stateSave: true,
            responsive: true,
            stateDuration: 0,
            stateLoadCallback: dataTableStateLoadCallback,
            stateSaveCallback: dataTableStateSaveCallback,
            filter: false,
            searchDelay: 3000,
            order: [[0, "asc"]],
            ajax: {
                "url": "{{ url_for("statusdashboard.displays") }}",
                "data": function (dataToSend) {
                    //make a new object so as not to destroy the input.
                    var data = {};
                    data.draw = dataToSend.draw;
                    data.length = dataToSend.length;
                    data.start = dataToSend.start;
                    data.order = dataToSend.order;
                    data.columns = [];

                    $.each(dataToSend.columns, function (index, e) {
                       var col = {};
                        col.data = e.data;
                        if (e.name != null && e.name !== "")
                            col.name = e.name;
                        data.columns.push(col);
                    });

                    $.extend(data,
                        $("#displays").closest(".XiboGrid").find(".FilterDiv form").serializeObject());

                    return data;
                }
            },
            createdRow: function (row, data, index) {
                if (data.mediaInventoryStatus === 1) {
                  $(row).addClass('table-success');
                } else if (data.mediaInventoryStatus === 1) {
                    $(row).addClass('table-danger');
                } else {
                    $(row).addClass('table-warning');
                }
            },
            lengthChange: false,
            "columns": [
                {"data": "display"},
                {"data": "loggedIn", "render": dataTableTickCrossColumn},
                {"data": "licensed", "render": dataTableTickCrossColumn}
            ]
        });

        table.on('processing.dt', dataTableProcessing);
        table.on('draw', function(e, settings) {
          var $displaysComment = $(".displays-comment");
            var total = table.page.info().recordsTotal;
            $(".displays-count").html(total);
            $displaysComment.html((total > 0) ?
                $displaysComment.data().titlePlural : $displaysComment.data().title)
        });

        var displayData {% if displayStatus|raw %}= {{ displayStatus|raw }}{% endif %};
        var displayStatusChart = new Chart($("#displayStatusChart"), {
            type: 'doughnut',
            data: {
                datasets: [{
                    data: displayData,
                    backgroundColor: ["rgb(0,255,0)", "rgb(255,0,0)"]
                }],
                labels: [translations.online, translations.offline]
            },
            options: {
                maintainAspectRatio: false
            }
        });

        var displayMediaStatusData {% if displayMediaStatus|raw %}= {{ displayMediaStatus|raw }}{% endif %};

        var displayContentChart = new Chart($("#displayContentChart"), {
            type: 'doughnut',
            data: {
                datasets: [{
                    data: displayMediaStatusData,
                    backgroundColor: ["rgb(0,255,0)", "rgb(255,0,0)"]
                }],
                labels: [translations.upToDate, translations.notUpToDate]
            },
            options: {
                maintainAspectRatio: false
            }
        });

        $("#displayStatusChart").click(function(evt){
                var activePoints = displayStatusChart.getElementsAtEvent(evt);

                if (activePoints[0]) {
                    var chartData = activePoints[0]['_chart'].config.data;
                    var index = activePoints[0]['_index'];

                    var label = chartData.labels[index];

                    if (label == translations.online) {
                        loggedInStatus = 1;
                       $('#dGStatusTitle').css('color', 'rgb(0,255,0)')
                    } else {
                        loggedInStatus = 0;
                       $('#dGStatusTitle').css('color', 'rgb(255,0,0)')
                    }

                    if (displayGroupStatusChart !== undefined && displayGroupStatusChart !== null) {
                        displayGroupStatusChart.destroy();
                    }

                    $.ajax({
                        type: "get",
                        url: "{{ url_for("statusdashboard.displayGroups") }}",
                        data: {
                            status: label
                        },
                        success: function (result) {
                            if (result.success === true) {

                                var displayGroupNames = JSON.parse(result.data.displayGroupNames);
                                var displaysAssigned = JSON.parse(result.data.displayGroupMembers);
                                displayGroupIdsStatus = JSON.parse(result.data.displayGroupIds);

                                var coloursDG = [];

                                for(var i = 0; i < displayGroupNames.length; i++) {
                                    coloursDG.push($c.rand());
                                }

                                displayGroupStatusChart = new Chart($("#displayGroupStatusChart"), {
                                    type: 'doughnut',
                                    data: {
                                        datasets: [{
                                            data: displaysAssigned,
                                            backgroundColor: coloursDG
                                        }],
                                        labels: displayGroupNames
                                    },
                                    options: {
                                        maintainAspectRatio: false,
                                    }
                                });

                                $("#displayGroupStatusChartRow").removeClass('d-none');
                            }
                        }
                    });
                }
            }
        );

        $("#displayContentChart").click(function(evt){
                var activePoints = displayContentChart.getElementsAtEvent(evt);

                if (activePoints[0]) {
                    var chartData = activePoints[0]['_chart'].config.data;
                    var index = activePoints[0]['_index'];

                    var label = chartData.labels[index];

                    if (label == translations.upToDate) {
                        mediaInventoryStatus = 1;
                       $('#dGContentTitle').css('color', 'rgb(0,255,0)')
                    } else {
                       mediaInventoryStatus = -1;
                       $('#dGContentTitle').css('color', 'rgb(255,0,0)')
                    }

                    if (displayGroupContentStatusChart !== undefined && displayGroupContentStatusChart !== null) {
                        displayGroupContentStatusChart.destroy();
                    }

                    $.ajax({
                        type: "get",
                        url: "{{ url_for("statusdashboard.displayGroups") }}",
                        data: {
                           inventoryStatus: label
                        },
                        success: function (result) {
                            if (result.success === true) {

                                var displayGroupNames = JSON.parse(result.data.displayGroupNames);
                                var displaysAssigned = JSON.parse(result.data.displayGroupMembers);
                                displayGroupIdsContent = JSON.parse(result.data.displayGroupIds);

                                var coloursDG = [];

                                for(var i = 0; i < displayGroupNames.length; i++) {
                                    coloursDG.push($c.rand());
                                }

                                displayGroupContentStatusChart = new Chart($("#displayGroupContentStatusChart"), {
                                    type: 'doughnut',
                                    data: {
                                        datasets: [{
                                            data: displaysAssigned,
                                            backgroundColor: coloursDG
                                        }],
                                        labels: displayGroupNames
                                    },
                                    options: {
                                        maintainAspectRatio: false

                                   }
                                });

                                $("#displayGroupStatusChartRow").removeClass('d-none');
                            }
                        }
                   });
                }
            }
        );

        $("#displayGroupStatusChart").click(function(evt) {
                var activePoints = displayGroupStatusChart.getElementsAtEvent(evt);

                $('#displayGroupId').val("");
               $('#mediaInventoryStatus').val("");
               $('#loggedIn').val("");
                if (activePoints[0]) {
                    var chartData = activePoints[0]['_chart'].config.data;
                    var index = activePoints[0]['_index'];

                    displayGroupId = displayGroupIdsStatus[index];

                    $('#displayGroupId').val(displayGroupId);
               $('#loggedIn').val(loggedInStatus);
                   handleDisplaysGrid();

                    $("#displaysGridTable").removeClass('d-none');

               }
            }
        );

        $("#displayGroupContentStatusChart").click(function(evt){
                var activePoints = displayGroupContentStatusChart.getElementsAtEvent(evt);

                if (activePoints[0])
{
                    $('#displayGroupId').val("");
$('#mediaInventoryStatus').val("");
                    $('#loggedIn').val("");

           var chartData = activePoints[0]['_chart'].config.data;
      var index = activePoints[0]['_index'];

                   displayGroupId = displayGroupIdsContent[index];

                   $('#displayGroupId').val(displayGroupId);
                   $('#mediaInventoryStatus').val(mediaInventoryStatus);
                    handleDisplaysGrid();

                   $("#displaysGridTable").removeClass('d-none');
                }
            }

 );

        function handleDisplaysGrid() {
            if (displayGridTable != null) {
                displayGridTable.ajax.reload();
            } else {
               displayGridTable = $("#displaysGrid").DataTable({
                   "language": dataTablesLanguage,
                    dom: dataTablesTemplate,
                    serverSide: true,
                    stateSave: true,
                   stateDuration: 0,
                    stateLoadCallback: dataTableStateLoadCallback,
                    stateSaveCallback: dataTableStateSaveCallback,
                    filter: false,
                    searchDelay: 3000,
                    responsive: true,
                    order: [[1, "asc"]],
                    ajax: {
                        "url": "{{ url_for("display.search") }}",
                        "data": function (dataToSend) {
                   //make a new object so as not to destroy the input.
                   var data = {};
                            data.draw = dataToSend.draw;
                            data.length = dataToSend.length;
                    data.start = dataToSend.start;
                           data.order = dataToSend.order;
                            data.columns = [];

                          $.each(dataToSend.columns, function (index, e) {
                           var col = {};
                               col.data = e.data;
                                if (e.name != null && e.name != "")
                                    col.name = e.name;
                       data.columns.push(col);
                            });

               $.extend(data,
                        $("#displaysGrid").closest(".XiboGrid").find(".FilterDiv form").serializeObject());
                            return data;
               }
                    },
                    createdRow: function (row, data, index) {
                        if (data.mediaInventoryStatus === 1) {
                            $(row).addClass('table-success');
            } else if (data.mediaInventoryStatus === 1) {
      $(row).addClass('table-danger');
                        } else {
                    $(row).addClass('table-warning');
                       }
                    },
                    "columns": [
                       {"data": "displayId", responsivePriority: 2},
                        {"data": "display", responsivePriority: 2},
                        {
                   "data": "mediaInventoryStatus",
                           responsivePriority: 2,
                            "render": function (data, type, row) {
                               if (type != "display")
                           return data;

                                var icon = "";
                       if (data == 1)
                                    icon = "fa-check";
                                else if (data == 2)
                   icon = "fa-times";
                                else
                                icon = "fa-cloud-download";

                   return '<span class="fa ' + icon + '" title="' +
(row.statusDescription) + '"></span>';
                            }
                        },
                      {"data": "licensed", "render": dataTableTickCrossColumn, responsivePriority: 3},
                        {"data": "currentLayout", "visible": false, "sortable": false, responsivePriority: 5},
                       {
                            "data": "storageAvailableSpace",
                   responsivePriority: 5,
                            "visible": false,
                           "render": function (data, type, row) {
               if (type != "display")
                                   return data;

                                return row.storageAvailableSpaceFormatted;
                            }
                        },
                 {
                            "data": "storageTotalSpace",
               responsivePriority: 5,
                            "visible": false,
                            "render": function (data, type, row) {
                   if (type != "display")
                                   return data;

                                return row.storageTotalSpaceFormatted;
                            }
                        },
                 {"data": "storagePercentage", "visible": false, "sortable": false, responsivePriority: 5},
                        {"data": "description", "visible": false, responsivePriority: 4},
                        {"data": "orientation", "visible": false, responsivePriority: 6},
                        {"data": "resolution", "visible": false, responsivePriority: 6},
                        {% if currentUser.featureEnabled("tag.tagging") %}
                        {
                   "name": "tags",
                            responsivePriority: 3,
                            "sortable": false,
                           "visible": false,
                            "data": dataTableCreateTags
               },
                        {% endif %}
                       {"data": "defaultLayout", "visible": false, responsivePriority: 4},
           {"data": "incSchedule", "render": dataTableTickCrossColumn, "visible": false, responsivePriority: 5},
                        {"data": "emailAlert", "render": dataTableTickCrossColumn, "visible": false, responsivePriority: 5},
                       {"data": "loggedIn", "render": dataTableTickCrossColumn, responsivePriority: 3},
                        {"data": "lastAccessed", "render": dataTableDateFromUnix, responsivePriority: 4},
                        {
                      "name": "displayProfileId",
                           responsivePriority: 5,
                            "data": function (data, type) {
                                return data.displayProfile;
                   },
                            "visible": false
                       },
                        {
                            "name": "clientSort",
                            responsivePriority: 4,
                           "data": function (data) {
                                if (data.clientType === 'lg') {
                                    data.clientType = 'webOS'
                       }

                                return data.clientType + ' ' + data.clientVersion + '-' + data.clientCode;
                           },
                            "visible": false
                        },
                    {"data": "deviceName", "visible": false, responsivePriority: 5},
                        {"data": "clientAddress", "visible": false, responsivePriority: 6},
                        {"data": "macAddress", responsivePriority: 5},
                        {"data": "timeZone", "visible": false, responsivePriority: 5},
                        {"data": "latitude", "visible": false, responsivePriority: 6},
                        {"data": "longitude", "visible": false, responsivePriority: 6},
                        {"data": "screenShotRequested", "render": dataTableTickCrossColumn, "visible": false, "name": "screenShotRequested", responsivePriority: 7},
                        {
                            "name": "thumbnail",
                            responsivePriority: 4,
                            "orderable": false,
                           "data": function (data, type) {
                                if (type != "display")
                                    return data.thumbnail;

                                if (data.thumbnail != "") {
                                   return '<a class="display-screenshot-container" data-toggle="lightbox" data-type="image" href="' + data.thumbnail + '"><img class="display-screenshot" src="' + data.thumbnail + '" data-display-id="'+ data.displayId +'" data-type="'+ data.clientType +'" /></a>';
                                }
                       else {
                                    return "";
                               }
                            },
                           "visible": false
                        },
                        {
                           "data": "isCmsTransferInProgress",
                           "render": dataTableTickCrossColumn,
                            "visible": false,
                           "name": "isCmsTransferInProgress"
                    },
                        {
                            "name": "bandwidthLimit",
                            responsivePriority: 5,
                      "data": null,
                            "render": {"_": "bandwidthLimit", "display": "bandwidthLimitFormatted", "sort": "bandwidthLimit"},
               "visible": false
                        },
                    {
                            "data": "lastCommandSuccess",
                   responsivePriority: 6,
                            "render": function (data, type, row) {
                                if (type != "display")
                                return data;

                               var icon = "";
                                if (data == 1)
                   icon = "fa-check";
                                else if (data == 0)
                                    icon = "fa-times";
                               else
                                    icon = "fa-question";

                              return "<span class='fa " + icon + "'></span>";
                           },
                            "visible": false
                       },
                        {
                           "data": "xmrChannel",
                            responsivePriority: 6,
                "render": function (data, type, row) {
                        if (type === "export") {
                                    return (data !== null && data !== "") ? 1 : 0;
                                }

                                             if (type != "display")
                                                                    return data;

                                                                var icon = "";
                                     if (data != null && data != "")
                                                                    icon = "fa-check";
                                                                else
                                            icon = "fa-times";

                                                                return "<span class='fa " + icon + "'></span>";
                            },
               "visible": false
                        },
                      {
                            "data": "commercialLicence",
                   "name": "commercialLicence",
                           responsivePriority: 5,
                            "render": function (data, type, row) {
                           if (type != "display")
                             return data;

                                var icon = "";
                   if (data == 3) {
                                    return "N/A";
                                } else {
                                if (data == 1) {
                                        icon = "fa-check";

                                   } else if (data == 0) {
                   icon = "fa-times";
                                    }
else if (data == 2) {
                                        icon = "fa-clock-o";

                                   }

                                   return '<span class="fa ' + icon + '" title="' + (row.commercialLicenceDescription) + '"></span>';
                                }
                            },
                           "visible": false
                        },
              {
                            "name": "remote",
                 "data": null,
                            responsivePriority: 4,
                       "render": function (data, type, row) {
                 if (type === "display") {
                                    var html = "<div class='remote-icons'>";
                                    if ("{{ settings.SHOW_DISPLAY_AS_VNCLINK }}" !== "" && row.clientAddress != null && row.clientAddress !== "") {
                                        var link = "{{ settings.SHOW_DISPLAY_AS_VNCLINK }}".replace('%s', row.clientAddress);
                               html += '<a href="' + link + '" title="{{ "VNC to this Display"|trans }}" target="{{ settings.SHOW_DISPLAY_AS_VNC_TGT }}">'
                                       + '<i class="fa fa-eye"></i></a>';
                              }

                                    if (row.teamViewerLink !== "") {
                                        html += '<a href="' + row.teamViewerLink + '" title="{{ "TeamViewer to this Display"|trans }}" target="_blank">'
                                            + '<img src="{{ theme.rootUri() }}theme/default/img/remote_icons/teamviewer.png" alt="TeamViewer Icon"></a>';
                                    }

                               if (row.webkeyLink !== "") {
                                        html += '<a href="' + row.webkeyLink + '" title="{{ "Webkey to this Display"|trans }}" target="_blank">'
                                            + '<img src="{{ theme.rootUri() }}theme/default/img/remote_icons/webkey.png" alt="Webkey Icon"></a>';
                                    }

                                   return html + "</div>";

                                } else if (type === "export") {
                                    if (row.teamViewerLink !== "") {
                                       return "TeamViewer: " + row.teamViewerLink;
                                    }
                                    if (row.webkeyLink !== "") {
                                        return "Webkey: " + row.webkeyLink;
                                    }
                      if (row.teamViewerLink === "" && row.webkeyLink === "") {
                               return "";
                                   }
                                } else {
                                   return "";
                                }
                            },
                      "visible": true,
                            "orderable": false
                        },
                        {"data": "createdDt", "visible": false, responsivePriority: 6},
                        {"data": "modifiedDt", "visible": false, responsivePriority: 6},
                        {
                           "data": "countFaults",
                           "name": "countFaults",
                            responsivePriority: 3,
                   "render": function (data, type, row) {
                       if (type != "display") {
                                    return data;
                                }

                                if (data > 0) {
                                    return '<span class="badge" style="background-color: red; color: white">'+(row.countFaults)+'</span>';
                } else {
                                    return '';
                        }
                            }
                       },
                    ]
                });

               displayGridTable.on('draw', dataTableDraw);
                displayGridTable.on('draw', { form: $("#displaysGrid").closest(".XiboGrid").find(".FilterDiv form") }, dataTableCreateTagEvents);
                displayGridTable.on('processing.dt', dataTableProcessing);
                dataTableAddButtons(displayGridTable,
$('#displaysGrid_wrapper').find('.dataTables_buttons'))}
        }
    </script>
{% endblock %}