@extends(getenv("THEME") . ".layouts.argo")

@section("content")
    
    
@php
    use Illuminate\Support\Facades\DB;
    use Carbon\Carbon;
    $todasFilas = [];
    $totalQueues = $totalQueues ?? 0;
    $totalAgentUnique = $totalAgentUnique ?? 0;
    $waitingCalls = $waitingCalls ?? 0;

    $queuesByName = [];

    if (isset($queues) && is_iterable($queues)) {
        foreach ($queues as $queueItem) {
            if (!empty($queueItem->name)) {
                $queuesByName[(string) $queueItem->name] = $queueItem->descricao ?? $queueItem->name;
            }
        }
    }

    if (isset($allQueues) && is_array($allQueues)) {
        $totalQueues = count($allQueues);
        $uniqueAgents = [];
        $waitingCalls = 0;

        foreach ($allQueues as $queueData) {
            
            $queueTitle = data_get($queueData, "queue");
            $queueKey = (string) data_get($queueData, "queue", "");
            if (isset($queuesByName[$queueKey])) {
                $queueTitle = $queuesByName[$queueKey];
            }
            $agents = [];
            $entries = [];

            $members = data_get($queueData, "members", []);
            if (is_iterable($members)) {
                foreach ($members as $membro) {
                    //dd($membro);
                    $statusRaw = data_get($membro, "status", "");
                    $statusKey = "indisponivel";

                    if ($statusRaw === "Livre") {
                        $statusKey = "livre";
                    } elseif ($statusRaw === "Ocupado") {
                        $statusKey = "ocupado";
                    } elseif ($statusRaw === "Chamando") {
                        $statusKey = "chamando";
                    } elseif (in_array($statusRaw, ["Em uso", "Em espera (hold)"], true)) {
                        $statusKey = "em_uso";
                    } elseif (in_array($statusRaw, ["Chamando/Em uso"], true)) {
                        $statusKey = "chamando_em_uso";
                    } elseif (in_array($statusRaw, ["Indisponível", "Inválido"], true)) {
                        $statusKey = "indisponivel";
                    }

                    
                    $memberInterface = data_get($membro, "interface", "-");
                    $agents[] = [
                        "nome" => data_get($membro, "name", "-"),
                        "interface" => $memberInterface,
                        "status" => $statusKey,
                        "numero" => "-",
                        "duracao" => "-",
                        "calls" => data_get($membro, "callsTaken", 0)
                    ];

                    if (!empty($memberInterface)) {
                        $uniqueAgents[$memberInterface] = true;
                    }
                }
            }

            $queueEntries = data_get($queueData, "entries", []);
            if (is_iterable($queueEntries)) {
                foreach ($queueEntries as $entrie) {
                    $entries[] = [
                        "posicao" => data_get($entrie, "position", "-"),
                        "callerid" => data_get($entrie, "calleridnum", "-"),
                        "nome" => data_get($entrie, "calleridname", "-"),
                        "tempo" => data_get($entrie, "wait", "-"),
                        "canal" => data_get($entrie, "channel", "-"),
                        "uniqueid" => data_get($entrie, "uniqueid", "-")
                    ];
                }

                $waitingCalls += count($queueEntries);
            }

            $todasFilas[] = [
                "key" => $queueKey,
                "titulo" => $queueTitle,
                "agentes" => $agents,
                "espera" => $entries
            ];
        }

        $totalAgentUnique = count(array_keys($uniqueAgents));
    }
@endphp



<div class="container-fluid py-4">
    
    <div class="row mb-4">
        <div class="col-12 text-center">
            <h1 class="fw-bold text-dark mb-0">Painel de Filas</h1>
            <small class="text-muted d-none d-sm-block">Monitoramento em tempo real</small>
        </div>
    </div>

    <div class="row g-3 mb-4 align-items-stretch">
        <div class="col-12 col-lg-6">
            <div id="box_main" class="mb-3">
                <form action={{route(getenv("THEME") . ".dash_queue.search")}} method="POST" class="position-relative">
                    @csrf
                    <input type="hidden" name="method" value="first">
                    <div class="d-flex align-items-center gap-2">
                        <button id="button_select" type="button" class="btn btn-b border rounded-3 px-3 d-flex align-items-center gap-2">
                            <i class="fas fa-filter text-default"></i>
                            <span class="d-none d-sm-inline">Filtrar filas</span>
                            <i id="icon" class="fas fa-chevron-down fa-fw small"></i>
                        </button>
                        <button id="button_filter" type="submit" class="btn btn-b border rounded-3 px-3">Aplicar</button>
                    </div>

                    <div id="box_items" class="d-none">
                        <div id="item_confirmed" class="d-flex flex-row flex-wrap gap-1"></div>
                    </div>

                    <div id="content_select" class="d-none position-absolute start-0 mt-2 border rounded bg-white shadow-sm" style="min-width: 320px; max-height: 260px; z-index: 1000; overflow-y: auto;">
                        <div class="d-flex flex-column px-3 py-3">
                            <div class="text-muted small mb-2">Selecione as filas</div>
                            @forelse ($queues as $queue)
                                @php
                                    $checked = false;
                                @endphp

                                @if(isset($queuesQuery))
                                    @foreach($queuesQuery as $queueQuery)
                                        @if($queue->id == $queueQuery->id)
                                            @php
                                                $checked = true;
                                            @endphp
                                        @endif
                                    @endforeach
                                @endif

                                <label class="d-flex align-items-center gap-2 mb-2">
                                    <input class="items_select" type="checkbox" name="queue[{{$queue->id}}]" id="{{$queue->id}}" {{ $checked ? "checked" : "" }}>
                                    <span>{{$queue->descricao}}</span>
                                </label>
                            @empty
                                <p class="mb-0">Nao ha filas cadastradas</p>
                            @endforelse
                        </div>
                    </div>
                </form>
            </div>

            <div class="row g-3">
                <div class="col-4">
            <div class="card card-stat bg-blue h-70 shadow-sm">
                <div class="card-body d-flex flex-column align-items-center justify-content-center p-3 text-white text-center" style="min-height: 120px;">
                    <div class="mb-1 opacity-75" style="font-size: clamp(0.7rem, 1.2vw, 1.1rem);">Total Filas</div>
                    <div id="totalQueues" class="mb-2 fw-bold" style="font-size: clamp(1.2rem, 2.2vw, 2.0rem);">{{isset($totalQueues) ? $totalQueues : 0}}</div>
                    {{-- <i class="fas fa-list-ul fa-lg opacity-50" style="font-size: clamp(1rem, 1.8vw, 1.8rem);"></i> --}}
                </div>
            </div>
                </div>
                <div class="col-4">
            <div class="card card-stat bg-green h-70 shadow-sm">
                <div class="card-body d-flex flex-column align-items-center justify-content-center p-3 text-white text-center" style="min-height: 120px;">
                    <div class="mb-1 opacity-75" style="font-size: clamp(0.7rem, 1.2vw, 1.1rem);">Agentes</div>
                    <div id="totalAgentUnique" class="mb-2 fw-bold" style="font-size: clamp(1.2rem, 2.2vw, 2.0rem);">{{isset($totalAgentUnique) ? $totalAgentUnique : 0}}</div>
                    {{-- <i class="fas fa-users fa-lg opacity-50" style="font-size: clamp(1rem, 1.8vw, 1.8rem);"></i> --}}
                </div>
            </div>
                </div>
                <div class="col-4">
            <div class="card card-stat bg-red h-70 shadow-sm">
                <div class="card-body d-flex flex-column align-items-center justify-content-center p-3 text-white text-center" style="min-height: 120px;">
                    <div class="mb-1 opacity-75" style="font-size: clamp(0.7rem, 1.2vw, 1.1rem);">Chamadas em espera</div>
                    <div id="waitingCalls" class="mb-2 fw-bold" style="font-size: clamp(1.2rem, 2.2vw, 2.0rem);">{{isset($waitingCalls) ? $waitingCalls : 0}}</div>
                    {{-- <i class="fas fa-phone-slash fa-lg opacity-50" style="font-size: clamp(1rem, 1.8vw, 1.8rem);"></i> --}}
                </div>
            </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="row g-3">
                <div class="col-12 col-md-6">
                    <div class="card shadow-sm border-0 h-100 rounded-3">
                        <div class="card-body d-flex justify-content-center align-items-center p-2">
                            <div class="text-center" style="width: 190px;">
                                <div style="width: 190px; height: 190px; margin: 0 auto;">
                                    <canvas class="small text-muted fw-bold" id="graficoAgentes" width="190" height="190" style="max-width: 100%; max-height: 190px;"></canvas>
                                </div>
                                <div id="graficoAgentesLegend" class="mt-1"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="card shadow-sm border-0 h-100 rounded-3">
                        <div class="card-body d-flex justify-content-center align-items-center p-2">
                            <div class="text-center" style="width: 190px;">
                                <div style="width: 190px; height: 190px; margin: 0 auto;">
                                    <canvas class="small text-muted fw-bold" id="graficoTotais" width="190" height="190" style="max-width: 100%; max-height: 190px;"></canvas>
                                </div>
                                <div id="graficoTotaisLegend" class="mt-1"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- @php

        $showMember = false;

        foreach($allQueues as $queuesMembers) {

            if(!empty($queuesMembers["members"])) {

                $showMember = true;

            }

        }

    @endphp --}}

    
    @foreach($todasFilas as $fila)
    <div class="row g-4 mb-4" data-queue-key="{{ $fila['key'] }}">
        
        <div class="col-lg-6">
            <div class="card shadow-sm border-0 rounded-3 h-100">
                <div class="card-header bg-white border-0 pt-1 pb-0">
                    <h5 class="fw-bold">{{ $fila['titulo'] }}</h5>
                </div>
                <div class="card-body p-0 mt-3">
                    <div class="table-responsive">
                        <table class="table table-modern mb-0">
                            <thead>
                                <tr>
                                    <th class="ps-3 text-center">Nome</th>
                                    <th class="text-center">Interface</th>
                                    <th class="text-center">Status</th>
                                    <th class="text-center">Numero</th>
                                    <th class="text-center">Duração</th>
                                    <th class="pe-3 text-center">CallsTaken</th>
                                </tr>
                            </thead>
                            <tbody data-queue-key="{{ $fila['key'] }}" data-queue-type="members">
                                @forelse($fila['agentes'] as $agente)
                                    {{-- Lógica de classe CSS baseada no status usando diretiva @class (Laravel 8+) ou lógica manual --}}
                                    <tr class="@if($agente['status'] == 'livre') status-livre @elseif($agente['status'] == 'ocupado' || $agente['status'] == 'em uso') status-ocupado  @elseif($agente['status'] == 'indisponivel') status-indisponivel @elseif($agente['status'] == 'chamando') status-chamando @endif">
                                        <td class="ps-3 fw-bold text-center">{{ $agente['nome'] }}</td>
                                        <td class="text-center">{{ $agente['interface'] }}</td>
                                        <td class="text-center">
                                            @switch($agente['status'])
                                                @case('livre')
                                                    <span class="badge bg-success">Livre</span>
                                                    @break
                                                @case('ocupado')
                                                    <span class="badge bg-danger">Ocupado</span>
                                                    @break
                                                @case('chamando')
                                                    <span class="badge bg-success">Chamando</span>
                                                    @break
                                                @case('em_uso')
                                                    <span class="badge bg-danger">Em uso</span>
                                                    @break
                                                @case('chamando_em_uso')
                                                    <span class="badge bg-warning">Chamando/Em uso</span>
                                                    @break
                                                @case('indisponivel')
                                                    <span class="badge bg-secondary">Indisponível</span>
                                                    @break
                                                @default
                                                    <span class="badge bg-light text-dark">{{ $agente['status'] }}</span>
                                            @endswitch
                                        </td>
                                        <td class="text-center">{{ $agente['numero'] }}</td>
                                        <td class="text-center">{{ $agente['duracao'] }}</td>
                                        <td class="pe-3 text-center">{{ $agente['calls'] }}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="6" class="text-center py-3 text-muted">Nenhum agente logado.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card shadow-sm border-0 rounded-3 h-100">
                <div class="card-header bg-white border-0 pt-1 pb-0">
                    <h5 class="fw-bold">Entradas em espera...</h5>
                </div>
                <div class="card-body p-0 mt-3 d-flex flex-column">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light text-dark">
                                <tr>
                                    <th class="ps-3 border-0 text-center">Posição</th>
                                    <th class="border-0 text-center">Calleridnum</th>
                                    <th class="border-0 text-center">Calleridname</th>
                                    <th class="border-0 text-center">Espera</th>
                                    <th class="border-0 text-center">Canal</th>
                                    <th class="pe-3 border-0 text-center">Uniqueid</th>
                                </tr>
                            </thead>
                            <tbody data-queue-key="{{ $fila['key'] }}" data-queue-type="entries">
                                @forelse($fila['espera'] as $chamada)
                                    <tr>
                                        <td class="ps-3 text-center">{{ $chamada['posicao'] }}</td>
                                        <td class="text-center">{{ $chamada['callerid'] }}</td>
                                        <td class="text-center">{{ $chamada['nome'] }}</td>
                                        <td class="fw-bold text-danger text-center">{{ $chamada['tempo'] }}</td>
                                        <td class="text-center"><small>{{ $chamada['canal'] }}</small></td>
                                        <td class="pe-3 text-center"><small>{{ $chamada['uniqueid'] }}</small></td>
                                    </tr>
                                @empty
                                    <tr><td colspan="6" class="text-center py-3 text-muted">Nenhuma chamada em espera no momento</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
    @endforeach

</div>

@endsection

<script>
    (function () {
        function disableLegendDefaults(chart) {
            if (!chart || !chart.defaults) {
                return;
            }

            if (chart.defaults.global && chart.defaults.global.legend) {
                chart.defaults.global.legend.display = false;
            }

            if (chart.defaults.plugins && chart.defaults.plugins.legend) {
                chart.defaults.plugins.legend.display = false;
            }
        }

        function wrapChartConstructor(chart) {
            if (!chart || chart.__dashboardQueueWrapped) {
                return;
            }

            function WrappedChart(ctx, config) {
                if (config && config.type === "pie") {
                    config.type = "doughnut";
                }

                if (config) {
                    config.options = config.options || {};
                    if (config.options.legend) {
                        config.options.legend.display = false;
                    }
                    if (config.options.plugins && config.options.plugins.legend) {
                        config.options.plugins.legend.display = false;
                    }
                }

                return new chart(ctx, config);
            }

            Object.keys(chart).forEach(function (key) {
                WrappedChart[key] = chart[key];
            });

            WrappedChart.defaults = chart.defaults;
            WrappedChart.prototype = chart.prototype;
            WrappedChart.__dashboardQueueWrapped = true;
            window.Chart = WrappedChart;
        }

        function patchAxios() {
            if (!window.axios || typeof window.axios.post !== "function") {
                return;
            }

            if (window.axios.__dashboardQueueWrapped) {
                return;
            }

            var originalPost = window.axios.post.bind(window.axios);
            window.axios.post = function (url, data, config) {
                if (typeof url === "string") {
                    url = url.replace(/\/dashboard\/queue(\?.*)?$/, "/dashboard/search");
                    url = url.replace(/\/queue(\?.*)?$/, "/search");
                }
                return originalPost(url, data, config);
            };
            window.axios.__dashboardQueueWrapped = true;
        }

        window.addEventListener("DOMContentLoaded", function () {
            if (window.Chart) {
                disableLegendDefaults(window.Chart);
                wrapChartConstructor(window.Chart);
            }
            patchAxios();
        });
    })();
</script>

<script>
    window.queuesQuery = @json($queuesQuery ?? []);
    window.requestPayload = @json($requestPayload ?? []);

    window.addEventListener("DOMContentLoaded", function () {
        var storageKey = "dashboardQueueFilters";
        var filterForm = document.querySelector("form[action*='dash_queue.search']");
        var items = Array.prototype.slice.call(document.querySelectorAll(".items_select"));

        function getSavedFilters() {
            try {
                var raw = window.localStorage.getItem(storageKey);
                return raw ? JSON.parse(raw) : [];
            } catch (err) {
                return [];
            }
        }

        function saveFilters(ids) {
            try {
                window.localStorage.setItem(storageKey, JSON.stringify(ids));
            } catch (err) {
                return;
            }
        }

        function getSelectedIds() {
            return items.filter(function (item) { return item.checked; }).map(function (item) { return item.id; });
        }

        if (items.length) {
            items.forEach(function (item) {
                item.addEventListener("change", function () {
                    saveFilters(getSelectedIds());
                });
            });
        }

        if (filterForm) {
            filterForm.addEventListener("submit", function () {
                saveFilters(getSelectedIds());
            });
        }

        var saved = getSavedFilters();
        if (saved.length && items.length) {
            items.forEach(function (item) {
                if (saved.indexOf(item.id) !== -1) {
                    item.checked = true;
                }
            });
        }
        
        if ((!window.queuesQuery || window.queuesQuery.length === 0) && saved.length && filterForm) {
            filterForm.submit();
        }
        
    });
    
</script>

<!-- Script de Atualização Automática dos Dados -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (!window.queuesQuery || window.queuesQuery.length === 0) {
            return;
        }

        const totalQueues = document.querySelector("#totalQueues");
        const totalAgentUnique = document.querySelector("#totalAgentUnique");
        const waitingCalls = document.querySelector("#waitingCalls");

        if (!totalQueues || !totalAgentUnique || !waitingCalls) {
            return;
        }

        // Verificar se Chart está disponível
        if (!window.Chart) {
            console.warn("Chart.js não está carregado");
            return;
        }

        // PROTEÇÃO: Destruir qualquer gráfico PIE antigo que possa ter sido criado pelo código legado
        const graficoAgentesCanvas = document.querySelector("#graficoAgentes");
        const graficoTotaisCanvas = document.querySelector("#graficoTotais");
        
        if (graficoAgentesCanvas && typeof Chart.getChart === "function") {
            const oldChart = Chart.getChart(graficoAgentesCanvas);
            if (oldChart) {
                oldChart.destroy();
            }
        }
        
        if (graficoTotaisCanvas && typeof Chart.getChart === "function") {
            const oldChart = Chart.getChart(graficoTotaisCanvas);
            if (oldChart) {
                oldChart.destroy();
            }
        }

        if (Chart.defaults && Chart.defaults.global && Chart.defaults.global.legend) {
            Chart.defaults.global.legend.display = false;
        }

        if (Chart.defaults && Chart.defaults.plugins && Chart.defaults.plugins.legend) {
            Chart.defaults.plugins.legend.display = false;
        }

        const graficoAgentes = document.querySelector("#graficoAgentes");
        const graficoTotais = document.querySelector("#graficoTotais");
        const chartCutout = "50%";
        const chartBorderWidth = 2;

        let graficoAgentesInstance = null;
        let graficoTotaisInstance = null;

        function getExistingChart(canvas) {
            if (!canvas || !window.Chart) {
                return null;
            }

            if (typeof Chart.getChart === "function") {
                return Chart.getChart(canvas) || null;
            }

            if (Chart.instances) {
                var instances = Object.values(Chart.instances);
                for (var i = 0; i < instances.length; i += 1) {
                    if (instances[i] && instances[i].canvas === canvas) {
                        return instances[i];
                    }
                }
            }

            return null;
        }

        function ensureChartOptions(chart) {
            if (!chart || !chart.config) {
                return;
            }

            var cutoutPercent = parseInt(chartCutout, 10);
            chart.config.type = "doughnut";
            chart.options = chart.options || {};
            chart.options.maintainAspectRatio = false;
            chart.options.cutout = chartCutout;
            if (!Number.isNaN(cutoutPercent)) {
                chart.options.cutoutPercentage = cutoutPercent;
            }
            chart.options.legend = chart.options.legend || {};
            chart.options.legend.display = false;
            chart.options.plugins = chart.options.plugins || {};
            chart.options.plugins.legend = chart.options.plugins.legend || {};
            chart.options.plugins.legend.display = false;

            if (chart.data && chart.data.datasets && chart.data.datasets[0]) {
                chart.data.datasets[0].borderWidth = chartBorderWidth;
                chart.data.datasets[0].borderColor = "#ffffff";
            }
        }

        const centerTextPlugin = {
            id: "centerTextMax",
            beforeDraw: function (chart) {
                if (!chart || !chart.data || !chart.data.datasets || !chart.data.datasets[0]) {
                    return;
                }

                var data = chart.data.datasets[0].data || [];
                var totalValue = 0;
                for (var i = 0; i < data.length; i += 1) {
                    totalValue += Number(data[i]) || 0;
                }

                if (!chart.chartArea) {
                    return;
                }

                var ctx = chart.ctx;
                var chartArea = chart.chartArea;
                var centerX = (chartArea.left + chartArea.right) / 2;
                var centerY = (chartArea.top + chartArea.bottom) / 2;

                ctx.save();
                ctx.fillStyle = "#1f2937";
                ctx.font = "700 32px Open Sans, sans-serif";
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                ctx.fillText(String(totalValue), centerX, centerY);
                ctx.restore();
            }
        };

        function ensureCenterPlugin(chart) {
            if (!chart || !chart.config) {
                return;
            }

            chart.config.plugins = chart.config.plugins || [];
            var hasPlugin = chart.config.plugins.some(function (plugin) {
                return plugin && plugin.id === centerTextPlugin.id;
            });

            if (!hasPlugin) {
                chart.config.plugins.push(centerTextPlugin);
            }
        }

        // Função para renderizar legendas personalizadas
        function renderLegend(chart, container) {
            if (!chart || !container) {
                return;
            }

            var labels = chart.data && chart.data.labels ? chart.data.labels : [];
            var dataset = chart.data && chart.data.datasets ? chart.data.datasets[0] : null;
            var colors = dataset && dataset.backgroundColor ? dataset.backgroundColor : [];

            var html = "<div class=\"d-flex flex-wrap justify-content-center small text-muted\" style=\"max-width: 190px; margin: 0 auto; line-height: 1.2; font-size: 10px;\">";

            labels.forEach(function (label, index) {
                var color = colors[index] || "#999";
                html += "<span class=\"d-inline-flex align-items-center me-2 mb-1\" style=\"flex: 0 0 33.333%; max-width: 33.333%;\">" +
                    "<span style=\"display:inline-block;width:8px;height:8px;border-radius:1px;background:" + color + ";margin-right:6px;flex:0 0 auto;\"></span>" +
                    "<span style=\"display:inline-block;max-width:120px;overflow:hidden;text-overflow:ellipsis;\">" + label + "</span>" +
                    "</span>";
            });

            html += "</div>";
            container.innerHTML = html;
        }

        // Criar gráficos se existirem
        if (graficoAgentes && window.requestPayload && window.requestPayload.payload) {
            const data = window.requestPayload.payload;
            graficoAgentesInstance = getExistingChart(graficoAgentes);
            if (!graficoAgentesInstance) {
                graficoAgentesInstance = new Chart(graficoAgentes, {
                    type: "doughnut",
                    data: {
                        labels: ["Em Atendimento", "Em Pausa", "Livres", "Ocupados", "Outros"],
                        datasets: [{
                            label: "Status por Agente",
                            data: [
                                data.summary.members.emAtendimento,
                                data.summary.members.pausados,
                                data.summary.members.livres,
                                data.summary.members.ocupados,
                                data.summary.members.outros
                            ],
                            backgroundColor: [
                                "#dc3545",
                                "#0dcaf0",
                                "#198754",
                                "#ffc107",
                                "#6c757d"
                            ],
                            hoverOffset: 4,
                            borderWidth: chartBorderWidth,
                            borderColor: "#ffffff"
                        }]
                    },
                    options: {
                        maintainAspectRatio: false,
                        cutout: chartCutout,
                        plugins: {
                            legend: {
                                display: false
                            },
                            centerTextMax: {}
                        }
                    },
                    plugins: [centerTextPlugin]
                });
            }
            ensureChartOptions(graficoAgentesInstance);
            ensureCenterPlugin(graficoAgentesInstance);
            graficoAgentesInstance.update();
            
            // Renderizar legenda abaixo do gráfico
            const legendContainer = document.querySelector("#graficoAgentesLegend");
            renderLegend(graficoAgentesInstance, legendContainer);
        }

        if (graficoTotais) {
            const data = window.requestPayload && window.requestPayload.payload ? window.requestPayload.payload : {};
            graficoTotaisInstance = getExistingChart(graficoTotais);
            if (!graficoTotaisInstance) {
                graficoTotaisInstance = new Chart(graficoTotais, {
                    type: "doughnut",
                    data: {
                        labels: ["Chamadas", "Completadas", "Abandonadas"],
                        datasets: [{
                            label: "Totais",
                            data: [
                                data.summary ? data.summary.paramsTotals.calls || 0 : 0,
                                data.summary ? data.summary.paramsTotals.completed || 0 : 0,
                                data.summary ? data.summary.paramsTotals.abandoned || 0 : 0
                            ],
                            backgroundColor: [
                                "#0d6efd",
                                "#198754",
                                "#dc3545"
                            ],
                            hoverOffset: 4,
                            borderWidth: chartBorderWidth,
                            borderColor: "#ffffff"
                        }]
                    },
                    options: {
                        maintainAspectRatio: false,
                        cutout: chartCutout,
                        plugins: {
                            legend: {
                                display: false
                            },
                            centerTextMax: {}
                        }
                    },
                    plugins: [centerTextPlugin]
                });
            }
            ensureChartOptions(graficoTotaisInstance);
            ensureCenterPlugin(graficoTotaisInstance);
            graficoTotaisInstance.update();
            
            // Renderizar legenda abaixo do gráfico
            const legendContainer = document.querySelector("#graficoTotaisLegend");
            renderLegend(graficoTotaisInstance, legendContainer);
        }

        // Construir objeto de filas para requisição
        const queuesRequest = {};
        window.queuesQuery.forEach(queue => {
            queuesRequest[queue.id] = "on";
        });

        function postJson(url, payload) {
            if (window.axios && typeof window.axios.post === "function") {
                return window.axios.post(url, payload).then(function (response) {
                    return response && response.data ? response.data : null;
                });
            }

            var tokenMeta = document.querySelector("meta[name='csrf-token']");
            var csrfToken = tokenMeta ? tokenMeta.getAttribute("content") : "";
            return fetch(url, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": csrfToken
                },
                body: JSON.stringify(payload)
            }).then(function (res) {
                if (!res.ok) {
                    throw new Error("Request failed with status " + res.status);
                }
                return res.json();
            });
        }

        function updateData() {
            var url = window.location.pathname.replace(/\/queue(\?.*)?$/, "/search");
            postJson(url, {
                method: "update",
                queue: queuesRequest
            })
            .then(function (data) {
                if (!data) {
                    return;
                }

                function formatDuration(value) {
                    if (value === null || value === undefined || value === "") {
                        return "00:00:00";
                    }

                    if (typeof value === "number" || /^\d+$/.test(String(value))) {
                        var total = Math.max(0, parseInt(value, 10));
                        var hours = Math.floor(total / 3600);
                        var mins = Math.floor((total % 3600) / 60);
                        var secs = total % 60;
                        return String(hours).padStart(2, "0") + ":" + String(mins).padStart(2, "0") + ":" + String(secs).padStart(2, "0");
                    }

                    return value;
                }

                if (totalQueues) totalQueues.innerHTML = data.payload.summary.totalQueues;
                if (totalAgentUnique) totalAgentUnique.innerHTML = data.payload.summary.totalMembersUnique;
                if (waitingCalls) waitingCalls.innerHTML = data.payload.summary.waitingCalls;

                if (data && data.payload && data.payload.queues) {
                    data.payload.queues.forEach(function (queueData) {
                        var queueKey = queueData.queue;
                        var membersBody = document.querySelector("tbody[data-queue-key='" + queueKey + "'][data-queue-type='members']");
                        var entriesBody = document.querySelector("tbody[data-queue-key='" + queueKey + "'][data-queue-type='entries']");

                        if (membersBody) {
                            if (queueData.members && queueData.members.length) {
                                var rowsMembers = "";
                                queueData.members.forEach(function (member) {
                                    var statusRaw = member.status || "";
                                    var rowClass = "";
                                    var badgeClass = "bg-light text-dark";
                                    var badgeLabel = statusRaw || "-";

                                    if (statusRaw === "Livre") {
                                        rowClass = "status-livre";
                                        badgeClass = "bg-success";
                                        badgeLabel = "Livre";
                                    } else if (statusRaw === "Ocupado") {
                                        rowClass = "status-ocupado";
                                        badgeClass = "bg-danger";
                                        badgeLabel = "Ocupado";
                                    } else if (statusRaw === "Chamando") {
                                        rowClass = "status-ocupado";
                                        badgeClass = "bg-success";
                                        badgeLabel = "Chamando";
                                    } else if (["Em uso", "Em espera (hold)"].indexOf(statusRaw) !== -1) {
                                        rowClass = "status-ocupado";
                                        badgeClass = "bg-danger";
                                        badgeLabel = "Em uso";
                                    } else if (statusRaw === "Chamando/Em uso") {
                                        rowClass = "status-ocupado";
                                        badgeClass = "bg-success";
                                        badgeLabel = "Chamando/Em uso";
                                    } else if (["Indisponível", "Inválido"].indexOf(statusRaw) !== -1) {
                                        rowClass = "status-indisponivel";
                                        badgeClass = "bg-secondary";
                                        badgeLabel = "Indisponivel";
                                    }

                                    var numberValue = member.number || "-";
                                    var duracaoValue = member.duracao || "00:00:00";

                                    rowsMembers += "<tr class=\"" + rowClass + "\">" +
                                        "<td class=\"ps-3 fw-bold text-center\">" + (member.name || "-") + "</td>" +
                                        "<td class=\"text-center\">" + (member.interface || "-") + "</td>" +
                                        "<td class=\"text-center\"><span class=\"badge " + badgeClass + "\">" + badgeLabel + "</span></td>" +
                                        "<td class=\"text-center\">" + numberValue + "</td>" +
                                        "<td class=\"text-center\">" + formatDuration(duracaoValue) + "</td>" +
                                        "<td class=\"pe-3 text-center\">" + (member.callsTaken || 0) + "</td>" +
                                        "</tr>";
                                });
                                membersBody.innerHTML = rowsMembers;
                            } else {
                                membersBody.innerHTML = "<tr><td colspan=\"6\" class=\"text-center py-3 text-muted\">Nenhum agente logado.</td></tr>";
                            }
                        }

                        if (entriesBody) {
                            if (queueData.entries && queueData.entries.length) {
                                var rowsEntries = "";
                                queueData.entries.forEach(function (entry) {
                                    rowsEntries += "<tr>" +
                                        "<td class=\"ps-3 text-center\">" + (entry.position || "-") + "</td>" +
                                        "<td class=\"text-center\">" + (entry.calleridnum || "-") + "</td>" +
                                        "<td class=\"text-center\">" + (entry.calleridname || "-") + "</td>" +
                                        "<td class=\"fw-bold text-danger text-center\">" + (entry.wait || "-") + "</td>" +
                                        "<td class=\"text-center\"><small>" + (entry.channel || "-") + "</small></td>" +
                                        "<td class=\"pe-3 text-center\"><small>" + (entry.uniqueid || "-") + "</small></td>" +
                                        "</tr>";
                                });
                                entriesBody.innerHTML = rowsEntries;
                            } else {
                                entriesBody.innerHTML = "<tr><td colspan=\"6\" class=\"text-center py-3 text-muted\">Nenhuma chamada em espera no momento</td></tr>";
                            }
                        }
                    });
                }

                if (graficoAgentesInstance) {
                    ensureCenterPlugin(graficoAgentesInstance);
                    graficoAgentesInstance.data.datasets[0].data = [
                        data.payload.summary.members.emAtendimento,
                        data.payload.summary.members.pausados,
                        data.payload.summary.members.livres,
                        data.payload.summary.members.ocupados,
                        data.payload.summary.members.outros
                    ];
                    graficoAgentesInstance.update();
                    const legendContainer = document.querySelector("#graficoAgentesLegend");
                    renderLegend(graficoAgentesInstance, legendContainer);
                }

                if (graficoTotaisInstance) {
                    ensureCenterPlugin(graficoTotaisInstance);
                    graficoTotaisInstance.data.datasets[0].data = [
                        data.payload.summary.paramsTotals.calls,
                        data.payload.summary.paramsTotals.completed,
                        data.payload.summary.paramsTotals.abandoned
                    ];
                    graficoTotaisInstance.update();
                    const legendContainer = document.querySelector("#graficoTotaisLegend");
                    renderLegend(graficoTotaisInstance, legendContainer);
                }
            })
            .catch(function (error) {
                console.error("Erro ao atualizar dados:", error.message || error);
            });
        }

        // Atualizar a cada 1 segundo
        setInterval(updateData, 1000);
    });
</script>