@section('title', 'Estatísticas KS da porta ' . $stream->port)
@include('admin/includes/header')
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
@section('head')
@endsection

<main class="flex-shrink-0 mt-2">
    <div class="container">

        <div class="row mb-3">
            <div class="col-md-12 d-flex align-middle">
                <div>
                    <h4 class="mb-0">
                        Estatísticas KS &middot; porta {{ $stream->port }} ({{ $stream->autodj_port }})
                        <span class="badge rounded-pill bg-secondary opacity-75 align-middle ms-1" style="font-size:.6em">Painel antigo</span>
                    </h4>
                    <small class="text-muted">
                        {{ $stream->server_name ? strtoupper($stream->server_name) : 'N/A' }}
                        &middot; {{ $stream->streamtitle ?: 'Sem identificação' }}
                        &middot; {{ $stream->revenda ?: 'Sem revenda' }}
                    </small>
                </div>
                <div class="ms-auto">
                    <a href="{{ route('admin.estatisticas-ks') }}" class="btn btn-sm btn-secondary">
                        <i class="bi bi-arrow-left"></i> Voltar
                    </a>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-body">
                <div class="row g-2 align-items-end">
                    <div class="col-sm-6 col-md-3">
                        <label class="form-label small mb-1" for="dataInicio">Data inicial</label>
                        <input type="date" id="dataInicio" class="form-control form-control-sm" value="{{ $inicio }}">
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <label class="form-label small mb-1" for="dataFim">Data final</label>
                        <input type="date" id="dataFim" class="form-control form-control-sm" value="{{ $fim }}">
                    </div>
                    <div class="col-md-6 d-flex flex-wrap gap-2">
                        <button type="button" class="btn btn-sm btn-success" id="aplicarFiltro">Aplicar filtro</button>
                        <div class="btn-group btn-group-sm ms-auto">
                            <button type="button" class="btn btn-primary" id="exportarXlsx">
                                <i class="bi bi-file-earmark-spreadsheet"></i> Planilha
                            </button>
                            <button type="button" class="btn btn-outline-primary" id="exportarCsv">CSV</button>
                            <button type="button" class="btn btn-outline-primary" id="exportarPng">
                                <i class="bi bi-image"></i> Relatório PNG
                            </button>
                        </div>
                    </div>
                </div>
                <div class="small text-muted mt-2" id="periodoAtual"></div>
                <div class="alert alert-warning py-2 px-3 mt-2 mb-0 d-none" id="avisoVazio">
                    Nenhuma audiência registrada nesse período.
                </div>
            </div>
        </div>

        <div class="row g-2 mb-3" id="cardsResumo">
            <div class="col-6 col-md-3">
                <div class="card h-100"><div class="card-body py-2">
                    <div class="small text-muted">Conexões</div>
                    <div class="fs-4 fw-semibold" id="rsConexoes">-</div>
                </div></div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card h-100"><div class="card-body py-2">
                    <div class="small text-muted">Ouvintes únicos</div>
                    <div class="fs-4 fw-semibold" id="rsUnicos">-</div>
                </div></div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card h-100"><div class="card-body py-2">
                    <div class="small text-muted">Tempo total</div>
                    <div class="fs-5 fw-semibold" id="rsTempoTotal">-</div>
                </div></div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card h-100"><div class="card-body py-2">
                    <div class="small text-muted">Tempo médio por conexão</div>
                    <div class="fs-5 fw-semibold" id="rsTempoMedio">-</div>
                </div></div>
            </div>
            <div class="col-12 col-md-6">
                <div class="card h-100"><div class="card-body py-2">
                    <div class="small text-muted">Dia de maior audiência</div>
                    <div class="fs-6 fw-semibold" id="rsMelhorDia">-</div>
                </div></div>
            </div>
            <div class="col-12 col-md-6">
                <div class="card h-100"><div class="card-body py-2">
                    <div class="small text-muted">Horário de maior audiência</div>
                    <div class="fs-6 fw-semibold" id="rsMelhorHora">-</div>
                </div></div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header d-flex align-items-center">
                <span>Ouvintes por dia</span>
                <span class="spinner-border spinner-border-sm text-secondary ms-2 d-none" id="loadDia"></span>
                <button type="button" class="btn btn-sm btn-outline-secondary ms-auto btn-png" data-canvas="graficoDia" data-nome="ouvintes_por_dia">PNG</button>
            </div>
            <div class="card-body" style="height: 320px">
                <canvas id="graficoDia"></canvas>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header d-flex align-items-center">
                <span>Ouvintes por faixa horária</span>
                <span class="spinner-border spinner-border-sm text-secondary ms-2 d-none" id="loadHora"></span>
                <button type="button" class="btn btn-sm btn-outline-secondary ms-auto btn-png" data-canvas="graficoHora" data-nome="ouvintes_por_hora">PNG</button>
            </div>
            <div class="card-body" style="height: 320px">
                <canvas id="graficoHora"></canvas>
            </div>
        </div>

        <div class="row g-3 mb-3">
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header d-flex align-items-center">
                        <span>Audiência por dia da semana</span>
                        <span class="spinner-border spinner-border-sm text-secondary ms-2 d-none" id="loadSemana"></span>
                        <button type="button" class="btn btn-sm btn-outline-secondary ms-auto btn-png" data-canvas="graficoSemana" data-nome="dia_da_semana">PNG</button>
                    </div>
                    <div class="card-body" style="height: 300px">
                        <canvas id="graficoSemana"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header d-flex align-items-center">
                        <span>Tempo de permanência</span>
                        <span class="spinner-border spinner-border-sm text-secondary ms-2 d-none" id="loadDuracao"></span>
                        <button type="button" class="btn btn-sm btn-outline-secondary ms-auto btn-png" data-canvas="graficoDuracao" data-nome="tempo_de_permanencia">PNG</button>
                    </div>
                    <div class="card-body" style="height: 300px">
                        <canvas id="graficoDuracao"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header d-flex align-items-center">
                <span>Mapa de calor &middot; dia da semana x hora</span>
                <span class="spinner-border spinner-border-sm text-secondary ms-2 d-none" id="loadCalor"></span>
                <button type="button" class="btn btn-sm btn-outline-secondary ms-auto btn-png" data-canvas="graficoCalor" data-nome="mapa_de_calor">PNG</button>
            </div>
            <div class="card-body">
                <canvas id="graficoCalor" style="width:100%"></canvas>
                <div class="small text-muted mt-2" id="legendaCalor"></div>
            </div>
        </div>

        <div class="row g-3 mb-3">
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header d-flex align-items-center">
                        <span>Países</span>
                        <span class="spinner-border spinner-border-sm text-secondary ms-2 d-none" id="loadPais"></span>
                        <button type="button" class="btn btn-sm btn-outline-secondary ms-auto btn-png" data-canvas="graficoPais" data-nome="paises">PNG</button>
                    </div>
                    <div class="card-body" style="height: 320px">
                        <canvas id="graficoPais"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header d-flex align-items-center">
                        <span>Cidades</span>
                        <span class="spinner-border spinner-border-sm text-secondary ms-2 d-none" id="loadCidade"></span>
                    </div>
                    <div class="card-body" style="max-height:320px; overflow-y:auto">
                        <table class="table table-sm table-hover align-middle mb-0">
                            <thead class="table-light">
                            <tr>
                                <th class="th-sticky" style="position:sticky;top:0;z-index:2;">Cidade</th>
                                <th class="th-sticky" style="position:sticky;top:0;z-index:2;">País</th>
                                <th class="th-sticky text-end" style="position:sticky;top:0;z-index:2;">Conexões</th>
                            </tr>
                            </thead>
                            <tbody id="tabelaCidades"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header d-flex align-items-center">
                <span>Ouvintes mais assíduos</span>
                <span class="spinner-border spinner-border-sm text-secondary ms-2 d-none" id="loadTop"></span>
            </div>
            <div class="card-body">
                <div style="max-height:320px; overflow-y:auto">
                    <table class="table table-sm table-hover align-middle mb-0">
                        <thead class="table-light">
                        <tr>
                            <th class="th-sticky" style="position:sticky;top:0;z-index:2;width:140px">IP</th>
                            <th class="th-sticky" style="position:sticky;top:0;z-index:2;">Cidade</th>
                            <th class="th-sticky" style="position:sticky;top:0;z-index:2;">País</th>
                            <th class="th-sticky text-end" style="position:sticky;top:0;z-index:2;width:100px">Conexões</th>
                            <th class="th-sticky text-end" style="position:sticky;top:0;z-index:2;width:120px">Tempo total</th>
                            <th class="th-sticky text-end" style="position:sticky;top:0;z-index:2;width:110px">Última</th>
                        </tr>
                        </thead>
                        <tbody id="tabelaTop"></tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card mb-5">
            <div class="card-header d-flex align-items-center">
                <span>Conexões detalhadas</span>
                <span class="spinner-border spinner-border-sm text-secondary ms-2 d-none" id="loadConexoes"></span>
                <div class="ms-auto" style="width: 220px">
                    <input type="text" class="form-control form-control-sm" id="filtroIp" placeholder="Filtrar por IP">
                </div>
            </div>
            <div class="card-body">
                <div style="max-height:480px; overflow-y:auto">
                    <table class="table table-sm table-hover align-middle mb-0">
                        <thead class="table-light">
                        <tr>
                            <th class="th-sticky" style="position:sticky;top:0;z-index:2;width:110px">Data</th>
                            <th class="th-sticky" style="position:sticky;top:0;z-index:2;width:90px">Hora</th>
                            <th class="th-sticky" style="position:sticky;top:0;z-index:2;width:140px">IP</th>
                            <th class="th-sticky" style="position:sticky;top:0;z-index:2;">Cidade</th>
                            <th class="th-sticky" style="position:sticky;top:0;z-index:2;">País</th>
                            <th class="th-sticky text-end" style="position:sticky;top:0;z-index:2;width:120px">Tempo</th>
                        </tr>
                        </thead>
                        <tbody id="tabelaConexoes"></tbody>
                    </table>
                </div>
                <div class="d-flex align-items-center mt-2">
                    <div class="small text-muted" id="infoConexoes"></div>
                    <div class="ms-auto btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-secondary" id="paginaAnterior">Anterior</button>
                        <button type="button" class="btn btn-outline-secondary" id="paginaProxima">Próxima</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</main>

@include('admin/includes/footer')

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<script>
    var porta = "{{ $stream->port }}";
    var portaDj = "{{ $stream->autodj_port }}";
    var servidorNome = "{{ $stream->server_name ? strtoupper($stream->server_name) : 'N/A' }}";
    var identificacao = @json($stream->streamtitle ?: 'Sem identificação');
    var revendaNome = @json($stream->revenda ?: 'Sem revenda');

    var urlResumo = "{{ route('admin.estatisticas-ks.api.resumo', [$stream->port]) }}";
    var urlDia = "{{ route('admin.estatisticas-ks.api.dia', [$stream->port]) }}";
    var urlHora = "{{ route('admin.estatisticas-ks.api.hora', [$stream->port]) }}";
    var urlPais = "{{ route('admin.estatisticas-ks.api.pais', [$stream->port]) }}";
    var urlCidade = "{{ route('admin.estatisticas-ks.api.cidade', [$stream->port]) }}";
    var urlConexoes = "{{ route('admin.estatisticas-ks.api.conexoes', [$stream->port]) }}";
    var urlSemana = "{{ route('admin.estatisticas-ks.api.semana', [$stream->port]) }}";
    var urlDuracao = "{{ route('admin.estatisticas-ks.api.duracao', [$stream->port]) }}";
    var urlCalor = "{{ route('admin.estatisticas-ks.api.calor', [$stream->port]) }}";
    var urlTop = "{{ route('admin.estatisticas-ks.api.top', [$stream->port]) }}";
    var urlExportar = "{{ route('admin.estatisticas-ks.exportar', [$stream->port]) }}";

    var graficoDia = null;
    var graficoHora = null;
    var graficoPais = null;
    var graficoSemana = null;
    var graficoDuracao = null;
    var paginaConexoes = 1;
    var modoRelatorio = false;

    var dados = {
        periodo: null,
        resumo: null,
        dia: null,
        hora: null,
        pais: null,
        cidade: null,
        semana: null,
        duracao: null,
        calor: null,
        top: null
    };

    var cores = ['#0d6efd', '#198754', '#dc3545', '#fd7e14', '#6f42c1', '#20c997', '#ffc107', '#0dcaf0', '#6c757d', '#d63384', '#adb5bd'];

    function temaEscuro () {
        var alvo = document.documentElement.getAttribute('data-bs-theme') || document.body.getAttribute('data-bs-theme');
        return alvo === 'dark';
    }

    function escuroAtivo () {
        return !modoRelatorio && temaEscuro();
    }

    function corTexto () {
        return escuroAtivo() ? '#cfd4db' : '#495057';
    }

    function aplicarTemaGraficos () {
        if (typeof Chart === 'undefined') return;
        Chart.defaults.color = corTexto();
        Chart.defaults.borderColor = escuroAtivo() ? 'rgba(255,255,255,.12)' : 'rgba(0,0,0,.1)';
    }

    function numero (valor) {
        return Number(valor || 0).toLocaleString('pt-BR');
    }

    var pluginValores = {
        id: 'valores',
        afterDatasetsDraw: function (chart) {
            if (!chart.options.mostrarValores) return;

            var ctx = chart.ctx;
            var tipo = chart.config.type;
            var horizontal = chart.options.indexAxis === 'y';

            ctx.save();
            ctx.font = '600 11px system-ui, -apple-system, sans-serif';

            chart.data.datasets.forEach(function (conjunto, indiceConjunto) {
                var meta = chart.getDatasetMeta(indiceConjunto);
                if (meta.hidden) return;

                var passo = (tipo === 'line' || tipo === 'bar') && meta.data.length > 31
                    ? Math.ceil(meta.data.length / 31)
                    : 1;

                meta.data.forEach(function (elemento, indice) {
                    var valor = conjunto.data[indice];
                    if (!valor) return;
                    if (passo > 1 && indice % passo !== 0) return;

                    var texto = numero(valor);

                    if (tipo === 'doughnut' || tipo === 'pie') {
                        var total = conjunto.data.reduce(function (a, b) { return a + b; }, 0);
                        if (total === 0 || (valor / total) < 0.04) return;

                        var posicao = elemento.tooltipPosition();
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.lineWidth = 3;
                        ctx.strokeStyle = 'rgba(0,0,0,.45)';
                        ctx.strokeText(texto, posicao.x, posicao.y);
                        ctx.fillStyle = '#ffffff';
                        ctx.fillText(texto, posicao.x, posicao.y);
                        return;
                    }

                    ctx.fillStyle = corTexto();

                    if (horizontal) {
                        ctx.textAlign = 'left';
                        ctx.textBaseline = 'middle';
                        ctx.fillText(texto, elemento.x + 6, elemento.y);
                    } else {
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';
                        ctx.fillText(texto, elemento.x, elemento.y - 4);
                    }
                });
            });

            ctx.restore();
        }
    };

    function animacao () {
        return modoRelatorio ? false : undefined;
    }

    function periodo () {
        return {
            inicio: $('#dataInicio').val(),
            fim: $('#dataFim').val()
        };
    }

    function carregando (id, ativo) {
        if (ativo) {
            $(id).removeClass('d-none');
        } else {
            $(id).addClass('d-none');
        }
    }

    function renderResumo () {
        var d = dados.resumo;
        if (!d) return;

        $('#rsConexoes').text(numero(d.conexoes));
        $('#rsUnicos').text(numero(d.ouvintes_unicos));
        $('#rsTempoTotal').text(d.tempo_total_formatado);
        $('#rsTempoMedio').text(d.tempo_medio_formatado);
        $('#rsMelhorDia').text(d.melhor_dia ? d.melhor_dia.data + ' (' + numero(d.melhor_dia.conexoes) + ' conexões)' : 'Sem audiência no período');
        $('#rsMelhorHora').text(d.melhor_hora ? d.melhor_hora.hora + ' (' + numero(d.melhor_hora.conexoes) + ' conexões)' : 'Sem audiência no período');

        if (d.conexoes > 0) {
            $('#avisoVazio').addClass('d-none');
        } else {
            $('#avisoVazio').removeClass('d-none');
        }
    }

    function renderDia () {
        if (!dados.dia) return;
        if (graficoDia) graficoDia.destroy();

        graficoDia = new Chart(document.getElementById('graficoDia'), {
            type: 'line',
            plugins: [pluginValores],
            data: {
                labels: dados.dia.map(function (i) { return i.data_br; }),
                datasets: [
                    { label: 'Conexões', data: dados.dia.map(function (i) { return i.conexoes; }), borderColor: cores[0], backgroundColor: 'rgba(13,110,253,.15)', fill: true, tension: .3, pointRadius: 2 },
                    { label: 'Ouvintes únicos', data: dados.dia.map(function (i) { return i.unicos; }), borderColor: cores[1], backgroundColor: 'rgba(25,135,84,.12)', fill: true, tension: .3, pointRadius: 2 }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: animacao(),
                mostrarValores: modoRelatorio,
                interaction: { mode: 'index', intersect: false },
                scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }
            }
        });
    }

    function renderHora () {
        if (!dados.hora) return;
        if (graficoHora) graficoHora.destroy();

        graficoHora = new Chart(document.getElementById('graficoHora'), {
            type: 'bar',
            plugins: [pluginValores],
            data: {
                labels: dados.hora.map(function (i) { return i.faixa; }),
                datasets: [{ label: 'Conexões', data: dados.hora.map(function (i) { return i.conexoes; }), backgroundColor: cores[0] }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: animacao(),
                mostrarValores: true,
                scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }
            }
        });
    }

    function renderSemana () {
        if (!dados.semana) return;
        if (graficoSemana) graficoSemana.destroy();

        graficoSemana = new Chart(document.getElementById('graficoSemana'), {
            type: 'bar',
            plugins: [pluginValores],
            data: {
                labels: dados.semana.map(function (i) { return i.dia; }),
                datasets: [
                    { label: 'Conexões', data: dados.semana.map(function (i) { return i.conexoes; }), backgroundColor: cores[0] },
                    { label: 'Ouvintes únicos', data: dados.semana.map(function (i) { return i.unicos; }), backgroundColor: cores[1] }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: animacao(),
                mostrarValores: true,
                scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }
            }
        });
    }

    function renderDuracao () {
        if (!dados.duracao) return;
        if (graficoDuracao) graficoDuracao.destroy();

        var lista = dados.duracao;

        graficoDuracao = new Chart(document.getElementById('graficoDuracao'), {
            type: 'bar',
            plugins: [pluginValores],
            data: {
                labels: lista.map(function (i) { return i.faixa; }),
                datasets: [{ label: 'Conexões', data: lista.map(function (i) { return i.conexoes; }), backgroundColor: cores[4] }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                animation: animacao(),
                mostrarValores: true,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function (ctx) {
                                var item = lista[ctx.dataIndex];
                                return numero(item.conexoes) + ' conexões (' + item.percentual + '%)';
                            }
                        }
                    }
                },
                scales: { x: { beginAtZero: true, ticks: { precision: 0 } } }
            }
        });
    }

    function renderPais () {
        if (!dados.pais) return;
        if (graficoPais) graficoPais.destroy();

        var lista = dados.pais;

        graficoPais = new Chart(document.getElementById('graficoPais'), {
            type: 'doughnut',
            plugins: [pluginValores],
            data: {
                labels: lista.map(function (i) { return i.pais + ' — ' + numero(i.conexoes) + ' (' + i.percentual + '%)'; }),
                datasets: [{ data: lista.map(function (i) { return i.conexoes; }), backgroundColor: cores }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: animacao(),
                mostrarValores: true,
                plugins: {
                    legend: { position: 'right', labels: { boxWidth: 12, font: { size: 11 } } },
                    tooltip: {
                        callbacks: {
                            label: function (ctx) {
                                var item = lista[ctx.dataIndex];
                                return item.pais + ': ' + numero(item.conexoes) + ' (' + item.percentual + '%)';
                            }
                        }
                    }
                }
            }
        });
    }

    function renderCidades () {
        var tbody = $('#tabelaCidades');
        tbody.empty();

        if (!dados.cidade || !dados.cidade.length) {
            tbody.append('<tr><td colspan="3" class="text-center text-muted">Sem dados no período</td></tr>');
            return;
        }

        dados.cidade.forEach(function (c) {
            tbody.append('<tr><td class="small">' + c.cidade + '</td><td class="small text-muted">' + c.pais + '</td><td class="small text-end">' + numero(c.conexoes) + '</td></tr>');
        });
    }

    function renderTop () {
        var tbody = $('#tabelaTop');
        tbody.empty();

        if (!dados.top || !dados.top.length) {
            tbody.append('<tr><td colspan="6" class="text-center text-muted">Sem dados no período</td></tr>');
            return;
        }

        dados.top.forEach(function (o) {
            tbody.append(
                '<tr>' +
                '<td class="small text-nowrap">' + o.ip + '</td>' +
                '<td class="small">' + o.cidade + '</td>' +
                '<td class="small text-muted">' + o.pais + '</td>' +
                '<td class="small text-end">' + numero(o.conexoes) + '</td>' +
                '<td class="small text-end text-nowrap">' + o.tempo_total_formatado + '</td>' +
                '<td class="small text-end text-nowrap">' + o.ultima + '</td>' +
                '</tr>'
            );
        });
    }

    function desenharCalor () {
        if (!dados.calor) return;

        var canvas = document.getElementById('graficoCalor');
        var ctx = canvas.getContext('2d');
        var escuro = escuroAtivo();

        var margemEsq = 62;
        var margemTopo = 22;
        var celula = 26;
        var largura = margemEsq + 24 * celula;
        var altura = margemTopo + 7 * celula + 4;
        var escala = window.devicePixelRatio || 1;

        canvas.width = largura * escala;
        canvas.height = altura * escala;
        canvas.style.maxWidth = largura + 'px';
        canvas.style.height = 'auto';
        ctx.setTransform(escala, 0, 0, escala, 0, 0);
        ctx.clearRect(0, 0, largura, altura);

        ctx.font = '11px system-ui, -apple-system, sans-serif';
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'left';
        ctx.fillStyle = escuro ? '#cfd4db' : '#495057';

        for (var h = 0; h < 24; h++) {
            if (h % 2 === 0) {
                ctx.fillText(('0' + h).slice(-2), margemEsq + h * celula + 3, margemTopo - 10);
            }
        }

        for (var d = 0; d < 7; d++) {
            ctx.fillStyle = escuro ? '#cfd4db' : '#495057';
            ctx.fillText(dados.calor.dias[d].substring(0, 3), 4, margemTopo + d * celula + celula / 2);

            for (var hh = 0; hh < 24; hh++) {
                var valor = dados.calor.matriz[d][hh];
                var intensidade = dados.calor.maximo > 0 ? Math.sqrt(valor / dados.calor.maximo) : 0;

                if (valor === 0) {
                    ctx.fillStyle = escuro ? 'rgba(255,255,255,.05)' : 'rgba(0,0,0,.04)';
                } else {
                    ctx.fillStyle = 'rgba(13,110,253,' + (0.15 + 0.85 * intensidade).toFixed(3) + ')';
                }

                ctx.fillRect(margemEsq + hh * celula + 1, margemTopo + d * celula + 1, celula - 2, celula - 2);
            }
        }

        canvas.onmousemove = function (evento) {
            var caixa = canvas.getBoundingClientRect();
            var proporcao = largura / caixa.width;
            var x = (evento.clientX - caixa.left) * proporcao;
            var y = (evento.clientY - caixa.top) * proporcao;
            var coluna = Math.floor((x - margemEsq) / celula);
            var linha = Math.floor((y - margemTopo) / celula);

            if (coluna >= 0 && coluna < 24 && linha >= 0 && linha < 7) {
                canvas.title = dados.calor.dias[linha] + ' ' + ('0' + coluna).slice(-2) + 'h: ' + numero(dados.calor.matriz[linha][coluna]) + ' conexões';
            } else {
                canvas.title = '';
            }
        };
    }

    function carregarResumo () {
        $.getJSON(urlResumo, periodo()).done(function (response) {
            dados.resumo = response.data;
            dados.periodo = response.periodo;
            renderResumo();
            $('#periodoAtual').text('Período: ' + response.periodo.inicio_br + ' até ' + response.periodo.fim_br + ' (' + response.periodo.dias + ' dias)');
        }).fail(function () {
            $('#periodoAtual').html('<span class="text-danger">Não foi possível carregar o resumo.</span>');
        });
    }

    function carregarDia () {
        carregando('#loadDia', true);
        $.getJSON(urlDia, periodo()).done(function (response) {
            carregando('#loadDia', false);
            dados.dia = response.data;
            renderDia();
        }).fail(function () {
            carregando('#loadDia', false);
        });
    }

    function carregarHora () {
        carregando('#loadHora', true);
        $.getJSON(urlHora, periodo()).done(function (response) {
            carregando('#loadHora', false);
            dados.hora = response.data;
            renderHora();
        }).fail(function () {
            carregando('#loadHora', false);
        });
    }

    function carregarSemana () {
        carregando('#loadSemana', true);
        $.getJSON(urlSemana, periodo()).done(function (response) {
            carregando('#loadSemana', false);
            dados.semana = response.data;
            renderSemana();
        }).fail(function () {
            carregando('#loadSemana', false);
        });
    }

    function carregarDuracao () {
        carregando('#loadDuracao', true);
        $.getJSON(urlDuracao, periodo()).done(function (response) {
            carregando('#loadDuracao', false);
            dados.duracao = response.data;
            renderDuracao();
        }).fail(function () {
            carregando('#loadDuracao', false);
        });
    }

    function carregarPais () {
        carregando('#loadPais', true);
        $.getJSON(urlPais, Object.assign(periodo(), { limite: 10 })).done(function (response) {
            carregando('#loadPais', false);
            dados.pais = response.data;
            renderPais();
        }).fail(function () {
            carregando('#loadPais', false);
        });
    }

    function carregarCidade () {
        carregando('#loadCidade', true);
        $.getJSON(urlCidade, Object.assign(periodo(), { limite: 15 })).done(function (response) {
            carregando('#loadCidade', false);
            dados.cidade = response.data;
            renderCidades();
        }).fail(function () {
            carregando('#loadCidade', false);
        });
    }

    function carregarCalor () {
        carregando('#loadCalor', true);
        $.getJSON(urlCalor, periodo()).done(function (response) {
            carregando('#loadCalor', false);
            dados.calor = response.data;
            desenharCalor();
            $('#legendaCalor').text(dados.calor.maximo > 0
                ? 'Quanto mais forte a cor, maior o número de conexões. Pico: ' + numero(dados.calor.maximo) + ' conexões em uma faixa.'
                : 'Sem audiência registrada no período.');
        }).fail(function () {
            carregando('#loadCalor', false);
        });
    }

    function carregarTop () {
        carregando('#loadTop', true);
        $.getJSON(urlTop, Object.assign(periodo(), { limite: 20 })).done(function (response) {
            carregando('#loadTop', false);
            dados.top = response.data;
            renderTop();
        }).fail(function () {
            carregando('#loadTop', false);
        });
    }

    function carregarConexoes (pagina) {
        paginaConexoes = pagina || 1;
        carregando('#loadConexoes', true);

        var parametros = Object.assign(periodo(), { page: paginaConexoes, per_page: 50, ip: $('#filtroIp').val() });

        $.getJSON(urlConexoes, parametros).done(function (response) {
            carregando('#loadConexoes', false);
            var tbody = $('#tabelaConexoes');
            tbody.empty();

            if (!response.data.length) {
                tbody.append('<tr><td colspan="6" class="text-center text-muted">Nenhuma conexão registrada no período</td></tr>');
            }

            response.data.forEach(function (c) {
                tbody.append(
                    '<tr>' +
                    '<td class="small text-nowrap">' + c.data_br + '</td>' +
                    '<td class="small text-nowrap">' + c.hora + '</td>' +
                    '<td class="small text-nowrap">' + c.ip + '</td>' +
                    '<td class="small">' + c.cidade + '</td>' +
                    '<td class="small text-muted">' + c.pais + '</td>' +
                    '<td class="small text-end text-nowrap">' + c.tempo_formatado + '</td>' +
                    '</tr>'
                );
            });

            var p = response.paginacao;
            $('#infoConexoes').text('Página ' + p.pagina + ' de ' + p.ultima_pagina + ' — ' + numero(p.total) + ' registros');
            $('#paginaAnterior').prop('disabled', p.pagina <= 1);
            $('#paginaProxima').prop('disabled', p.pagina >= p.ultima_pagina);
        }).fail(function () {
            carregando('#loadConexoes', false);
            $('#tabelaConexoes').html('<tr><td colspan="6" class="text-center text-danger">Erro ao carregar as conexões</td></tr>');
        });
    }

    function renderTudo () {
        renderResumo();
        renderDia();
        renderHora();
        renderSemana();
        renderDuracao();
        renderPais();
        renderCidades();
        renderTop();
        desenharCalor();
    }

    function atualizarTudo () {
        carregarResumo();
        carregarDia();
        carregarHora();
        carregarSemana();
        carregarDuracao();
        carregarPais();
        carregarCidade();
        carregarCalor();
        carregarTop();
        carregarConexoes(1);
    }

    function nomeArquivo (prefixo, extensao) {
        return prefixo + '_' + $('#dataInicio').val() + '_a_' + $('#dataFim').val() + '.' + extensao;
    }

    function baixarCanvas (canvas, nome) {
        var destino = document.createElement('canvas');
        destino.width = canvas.width;
        destino.height = canvas.height;

        var ctx = destino.getContext('2d');
        ctx.fillStyle = escuroAtivo() ? '#1a1d24' : '#ffffff';
        ctx.fillRect(0, 0, destino.width, destino.height);
        ctx.drawImage(canvas, 0, 0);

        var link = document.createElement('a');
        link.download = nome;
        link.href = destino.toDataURL('image/png');
        link.click();
    }

    var PAGINA_L = 1920;
    var PAGINA_A = 1080;
    var MARGEM = 70;
    var TOPO_CONTEUDO = 150;
    var BASE_CONTEUDO = 1010;

    function larguraConteudo () {
        return PAGINA_L - MARGEM * 2;
    }

    function alturaConteudo () {
        return BASE_CONTEUDO - TOPO_CONTEUDO;
    }

    function resumoMensal () {
        var meses = {};
        var ordem = [];

        dados.dia.forEach(function (d) {
            var partes = d.data_br.split('/');
            var chave = partes[1] + '/' + partes[2];

            if (!meses[chave]) {
                meses[chave] = { mes: chave, conexoes: 0, dias: 0, segundos: 0 };
                ordem.push(chave);
            }

            meses[chave].conexoes += d.conexoes;
            meses[chave].segundos += d.tempo_total_segundos;
            if (d.conexoes > 0) meses[chave].dias++;
        });

        return ordem.map(function (chave) {
            var m = meses[chave];
            var media = m.dias > 0 ? Math.round(m.conexoes / m.dias) : 0;

            return [m.mes, numero(m.conexoes), numero(m.dias), numero(media), formatarSegundos(m.segundos)];
        });
    }

    function formatarSegundos (segundos) {
        var horas = Math.floor(segundos / 3600);
        var minutos = Math.floor((segundos % 3600) / 60);
        var resto = segundos % 60;

        return ('0' + horas).slice(-2) + ':' + ('0' + minutos).slice(-2) + ':' + ('0' + resto).slice(-2);
    }

    function itensResumo () {
        var d = dados.resumo || {};

        return [
            ['Conexões', numero(d.conexoes)],
            ['Ouvintes únicos', numero(d.ouvintes_unicos)],
            ['Tempo total de audiência', d.tempo_total_formatado || '-'],
            ['Tempo médio por conexão', d.tempo_medio_formatado || '-'],
            ['Maior tempo em uma conexão', d.tempo_maximo_formatado || '-'],
            ['Dias com audiência', numero(d.dias_com_audiencia)],
            ['Dia de maior audiência', d.melhor_dia ? d.melhor_dia.data : '-'],
            ['Horário de maior audiência', d.melhor_hora ? d.melhor_hora.hora.split(' - ')[0] : '-']
        ];
    }

    function desenharMoldura (ctx, ox, oy, numeroPagina, totalPaginas, subtitulo) {
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(ox, oy, PAGINA_L, PAGINA_A);

        ctx.textBaseline = 'middle';
        ctx.textAlign = 'left';
        ctx.fillStyle = '#111418';
        ctx.font = '700 30px system-ui, -apple-system, sans-serif';
        ctx.fillText('Relatório de audiência', ox + MARGEM, oy + 62);

        if (subtitulo) {
            ctx.font = '600 17px system-ui, -apple-system, sans-serif';
            ctx.fillStyle = '#5b6675';
            ctx.fillText(subtitulo, ox + MARGEM, oy + 100);
        }

        ctx.textAlign = 'right';
        ctx.font = '17px system-ui, -apple-system, sans-serif';
        ctx.fillStyle = '#5b6675';

        var textoPeriodo = dados.periodo
            ? dados.periodo.inicio_br + ' a ' + dados.periodo.fim_br + ' · ' + dados.periodo.dias + ' dias'
            : 'Período não identificado';

        ctx.fillText(textoPeriodo, ox + PAGINA_L - MARGEM, oy + 62);

        ctx.strokeStyle = '#e1e5ea';
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(ox + MARGEM, oy + 126);
        ctx.lineTo(ox + PAGINA_L - MARGEM, oy + 126);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(ox + MARGEM, oy + BASE_CONTEUDO + 26);
        ctx.lineTo(ox + PAGINA_L - MARGEM, oy + BASE_CONTEUDO + 26);
        ctx.stroke();

        ctx.font = '14px system-ui, -apple-system, sans-serif';
        ctx.fillStyle = '#8a939e';
        ctx.textAlign = 'left';
        ctx.fillText('Gerado em ' + new Date().toLocaleString('pt-BR'), ox + MARGEM, oy + BASE_CONTEUDO + 52);
        ctx.textAlign = 'right';
        ctx.fillText(numeroPagina + ' de ' + totalPaginas, ox + PAGINA_L - MARGEM, oy + BASE_CONTEUDO + 52);

        ctx.strokeStyle = '#d8dde3';
        ctx.strokeRect(ox + .5, oy + .5, PAGINA_L - 1, PAGINA_A - 1);
    }

    function desenharKpis (ctx, x, y, largura) {
        var itens = itensResumo();
        var espaco = 18;
        var colunas = 4;
        var larguraCartao = (largura - espaco * (colunas - 1)) / colunas;
        var alturaCartao = 108;

        itens.forEach(function (item, indice) {
            var cx = x + (indice % colunas) * (larguraCartao + espaco);
            var cy = y + Math.floor(indice / colunas) * (alturaCartao + espaco);

            ctx.fillStyle = '#f5f7f9';
            ctx.fillRect(cx, cy, larguraCartao, alturaCartao);
            ctx.strokeStyle = '#e4e8ec';
            ctx.lineWidth = 1;
            ctx.strokeRect(cx + .5, cy + .5, larguraCartao - 1, alturaCartao - 1);

            ctx.textAlign = 'left';
            ctx.font = '15px system-ui, -apple-system, sans-serif';
            ctx.fillStyle = '#5b6675';
            ctx.fillText(item[0], cx + 18, cy + 32);

            ctx.font = '700 30px system-ui, -apple-system, sans-serif';
            ctx.fillStyle = '#111418';
            ctx.fillText(item[1], cx + 18, cy + 74);
        });

        return Math.ceil(itens.length / colunas) * (alturaCartao + espaco);
    }

    function desenharGrafico (ctx, id, titulo, x, y, largura, altura) {
        var origem = document.getElementById(id);

        ctx.textAlign = 'left';
        ctx.font = '700 18px system-ui, -apple-system, sans-serif';
        ctx.fillStyle = '#111418';
        ctx.fillText(titulo, x, y + 12);

        if (!origem || !origem.width) return;

        var areaY = y + 34;
        var areaA = altura - 34;
        var fator = Math.min(largura / origem.width, areaA / origem.height);
        var l = origem.width * fator;
        var a = origem.height * fator;

        ctx.drawImage(origem, x + (largura - l) / 2, areaY + (areaA - a) / 2, l, a);
    }

    function desenharTabela (ctx, titulo, colunas, linhas, x, y, largura) {
        ctx.textAlign = 'left';
        ctx.font = '700 18px system-ui, -apple-system, sans-serif';
        ctx.fillStyle = '#111418';
        ctx.fillText(titulo, x, y + 12);

        var topo = y + 34;
        var total = colunas.reduce(function (a, c) { return a + c.largura; }, 0);
        var fator = largura / total;

        ctx.fillStyle = '#eef1f4';
        ctx.fillRect(x, topo, largura, 30);

        var cx = x;
        ctx.font = '600 14px system-ui, -apple-system, sans-serif';
        ctx.fillStyle = '#41474f';

        colunas.forEach(function (coluna) {
            var w = coluna.largura * fator;
            ctx.textAlign = coluna.direita ? 'right' : 'left';
            ctx.fillText(coluna.titulo, coluna.direita ? cx + w - 12 : cx + 12, topo + 15);
            cx += w;
        });

        linhas.forEach(function (linha, indice) {
            var ly = topo + 30 + indice * 26;

            if (indice % 2 === 1) {
                ctx.fillStyle = '#f7f8fa';
                ctx.fillRect(x, ly, largura, 26);
            }

            var lx = x;
            ctx.font = '14px system-ui, -apple-system, sans-serif';
            ctx.fillStyle = '#20242b';

            colunas.forEach(function (coluna, ic) {
                var w = coluna.largura * fator;
                ctx.textAlign = coluna.direita ? 'right' : 'left';
                ctx.fillText(String(linha[ic]), coluna.direita ? lx + w - 12 : lx + 12, ly + 13);
                lx += w;
            });
        });

        ctx.strokeStyle = '#e1e5ea';
        ctx.lineWidth = 1;
        ctx.strokeRect(x + .5, topo + .5, largura - 1, 30 + linhas.length * 26);

        return 34 + 30 + linhas.length * 26;
    }

    function tabelaPaises () {
        return {
            titulo: 'Países',
            colunas: [
                { titulo: 'País', largura: 300 },
                { titulo: 'Conexões', largura: 150, direita: true },
                { titulo: 'Ouvintes únicos', largura: 160, direita: true },
                { titulo: '%', largura: 110, direita: true }
            ],
            linhas: (dados.pais || []).map(function (p) {
                return [p.pais, numero(p.conexoes), numero(p.unicos), p.percentual + '%'];
            })
        };
    }

    function tabelaCidades () {
        return {
            titulo: 'Cidades',
            colunas: [
                { titulo: 'Cidade', largura: 280 },
                { titulo: 'País', largura: 200 },
                { titulo: 'Conexões', largura: 140, direita: true },
                { titulo: 'Únicos', largura: 120, direita: true }
            ],
            linhas: (dados.cidade || []).map(function (c) {
                return [c.cidade, c.pais, numero(c.conexoes), numero(c.unicos)];
            })
        };
    }

    function tabelaHoras () {
        return {
            titulo: 'Por faixa horária',
            colunas: [
                { titulo: 'Faixa', largura: 220 },
                { titulo: 'Conexões', largura: 150, direita: true },
                { titulo: 'Únicos', largura: 130, direita: true },
                { titulo: 'Médio (min)', largura: 150, direita: true }
            ],
            linhas: (dados.hora || []).map(function (h) {
                return [h.faixa, numero(h.conexoes), numero(h.unicos), String(h.tempo_medio_minutos).replace('.', ',')];
            })
        };
    }

    function tabelaTop () {
        return {
            titulo: 'Ouvintes mais assíduos',
            colunas: [
                { titulo: 'IP', largura: 180 },
                { titulo: 'Cidade', largura: 200 },
                { titulo: 'País', largura: 150 },
                { titulo: 'Conexões', largura: 120, direita: true },
                { titulo: 'Tempo total', largura: 140, direita: true }
            ],
            linhas: (dados.top || []).map(function (o) {
                return [o.ip, o.cidade, o.pais, numero(o.conexoes), o.tempo_total_formatado];
            })
        };
    }

    function tabelaPeriodo () {
        var porDia = dados.dia && dados.dia.length <= 60;

        if (porDia) {
            return {
                titulo: 'Detalhe por dia',
                colunas: [
                    { titulo: 'Data', largura: 150 },
                    { titulo: 'Conexões', largura: 130, direita: true },
                    { titulo: 'Únicos', largura: 110, direita: true },
                    { titulo: 'Médio (min)', largura: 130, direita: true },
                    { titulo: 'Tempo total', largura: 150, direita: true }
                ],
                linhas: dados.dia.map(function (d) {
                    return [d.data_br, numero(d.conexoes), numero(d.unicos), String(d.tempo_medio_minutos).replace('.', ','), d.tempo_total_formatado];
                })
            };
        }

        if (!dados.dia) return null;

        return {
            titulo: 'Resumo por mês',
            colunas: [
                { titulo: 'Mês', largura: 150 },
                { titulo: 'Conexões', largura: 130, direita: true },
                { titulo: 'Dias com audiência', largura: 170, direita: true },
                { titulo: 'Média diária', largura: 140, direita: true },
                { titulo: 'Tempo total', largura: 150, direita: true }
            ],
            linhas: resumoMensal()
        };
    }

    function linhasPorColuna () {
        return Math.floor((alturaConteudo() - 64) / 26);
    }

    function paginasRelatorio () {
        var paginas = [];
        var porColuna = linhasPorColuna();

        paginas.push({ subtitulo: 'Visão geral do período', tipo: 'resumo' });
        paginas.push({ subtitulo: 'Comportamento por horário', tipo: 'horarios' });
        paginas.push({ subtitulo: 'Origem da audiência', tipo: 'origem', porColuna: porColuna });

        var tabela = tabelaPeriodo();
        var linhas = tabela ? tabela.linhas : [];

        paginas.push({
            subtitulo: 'Faixa horária e ' + (tabela ? tabela.titulo.toLowerCase() : 'período'),
            tipo: 'detalhe',
            tabela: tabela,
            linhas: linhas.slice(0, porColuna * 2),
            porColuna: porColuna
        });

        var restante = linhas.slice(porColuna * 2);
        var porPagina = porColuna * 3;
        var partes = Math.ceil(restante.length / porPagina);

        for (var i = 0; i < partes; i++) {
            paginas.push({
                subtitulo: tabela.titulo + ' (continuação ' + (i + 1) + '/' + partes + ')',
                tipo: 'periodoExtra',
                tabela: tabela,
                linhas: restante.slice(i * porPagina, (i + 1) * porPagina),
                porColuna: porColuna
            });
        }

        return paginas;
    }

    function desenharPagina (ctx, pagina, ox, oy) {
        var x = ox + MARGEM;
        var y = oy + TOPO_CONTEUDO;
        var largura = larguraConteudo();
        var altura = alturaConteudo();
        var espaco = 26;
        var meia = (largura - espaco) / 2;
        var terco = (largura - espaco * 2) / 3;

        if (pagina.tipo === 'resumo') {
            var usado = desenharKpis(ctx, x, y, largura);
            desenharGrafico(ctx, 'graficoDia', 'Ouvintes por dia', x, y + usado + 10, largura, altura - usado - 10);
        }

        if (pagina.tipo === 'horarios') {
            var alturaTopo = Math.round(altura * 0.48);
            desenharGrafico(ctx, 'graficoHora', 'Ouvintes por faixa horária', x, y, largura, alturaTopo);

            var yBaixo = y + alturaTopo + espaco;
            var alturaBaixo = altura - alturaTopo - espaco;

            desenharGrafico(ctx, 'graficoSemana', 'Audiência por dia da semana', x, yBaixo, terco, alturaBaixo);
            desenharGrafico(ctx, 'graficoDuracao', 'Tempo de permanência', x + terco + espaco, yBaixo, terco, alturaBaixo);
            desenharGrafico(ctx, 'graficoCalor', 'Mapa de calor · dia x hora', x + (terco + espaco) * 2, yBaixo, terco, alturaBaixo);
        }

        if (pagina.tipo === 'origem') {
            var paises = tabelaPaises();
            var cidades = tabelaCidades();
            var alturaGrafico = Math.round(altura * 0.44);

            desenharGrafico(ctx, 'graficoPais', 'Países', x, y, terco, alturaGrafico);
            desenharTabela(ctx, paises.titulo, paises.colunas, paises.linhas.slice(0, Math.floor((altura - alturaGrafico - espaco - 64) / 26)), x, y + alturaGrafico + espaco, terco);
            desenharTabela(ctx, cidades.titulo, cidades.colunas, cidades.linhas.slice(0, pagina.porColuna), x + terco + espaco, y, terco);

            var top = tabelaTop();
            desenharTabela(ctx, top.titulo, top.colunas, top.linhas.slice(0, pagina.porColuna), x + (terco + espaco) * 2, y, terco);
        }

        if (pagina.tipo === 'detalhe') {
            var horas = tabelaHoras();
            desenharTabela(ctx, horas.titulo, horas.colunas, horas.linhas.slice(0, pagina.porColuna), x, y, terco);

            if (pagina.tabela) {
                for (var c = 0; c < 2; c++) {
                    var fatia = pagina.linhas.slice(c * pagina.porColuna, (c + 1) * pagina.porColuna);
                    if (!fatia.length) continue;

                    desenharTabela(
                        ctx,
                        c === 0 ? pagina.tabela.titulo : ' ',
                        pagina.tabela.colunas,
                        fatia,
                        x + (terco + espaco) * (c + 1),
                        y,
                        terco
                    );
                }
            }
        }

        if (pagina.tipo === 'periodoExtra') {
            for (var i = 0; i < 3; i++) {
                var parte = pagina.linhas.slice(i * pagina.porColuna, (i + 1) * pagina.porColuna);
                if (!parte.length) continue;

                desenharTabela(
                    ctx,
                    i === 0 ? pagina.tabela.titulo : ' ',
                    pagina.tabela.colunas,
                    parte,
                    x + (terco + espaco) * i,
                    y,
                    terco
                );
            }
        }
    }

    function gradeRelatorio (total) {
        if (total <= 1) return 1;
        if (total <= 4) return 2;
        if (total <= 9) return 3;
        return 4;
    }

    function montarRelatorio () {
        var paginas = paginasRelatorio();
        var colunas = gradeRelatorio(paginas.length);
        var linhasGrade = Math.ceil(paginas.length / colunas);

        var canvas = document.createElement('canvas');
        canvas.width = PAGINA_L * colunas;
        canvas.height = PAGINA_A * linhasGrade;

        var ctx = canvas.getContext('2d');
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.textBaseline = 'middle';

        paginas.forEach(function (pagina, indice) {
            var ox = (indice % colunas) * PAGINA_L;
            var oy = Math.floor(indice / colunas) * PAGINA_A;

            desenharMoldura(ctx, ox, oy, indice + 1, paginas.length, pagina.subtitulo);
            desenharPagina(ctx, pagina, ox, oy);
        });

        var link = document.createElement('a');
        link.download = nomeArquivo('relatorio_audiencia', 'png');
        link.href = canvas.toDataURL('image/png');
        link.click();
    }

    function gerarRelatorio () {
        var botao = $('#exportarPng');
        botao.prop('disabled', true).text('Gerando...');

        modoRelatorio = true;
        aplicarTemaGraficos();
        renderTudo();

        setTimeout(function () {
            try {
                montarRelatorio();
            } finally {
                modoRelatorio = false;
                aplicarTemaGraficos();
                renderTudo();
                botao.prop('disabled', false).html('<i class="bi bi-image"></i> Relatório PNG');
            }
        }, 400);
    }

    $('#aplicarFiltro').on('click', function () {
        atualizarTudo();
    });

    $('#dataInicio, #dataFim').on('keyup', function (e) {
        if (e.key === 'Enter' || e.keyCode === 13) {
            atualizarTudo();
        }
    });

    $(document).ajaxStart(function () {
        $('#aplicarFiltro').prop('disabled', true).text('Atualizando...');
    });

    $(document).ajaxStop(function () {
        $('#aplicarFiltro').prop('disabled', false).text('Aplicar filtro');
    });

    $('#filtroIp').on('keyup', function (e) {
        if (e.key === 'Enter' || e.keyCode === 13) {
            carregarConexoes(1);
        }
    });

    $('#paginaAnterior').on('click', function () {
        if (paginaConexoes > 1) carregarConexoes(paginaConexoes - 1);
    });

    $('#paginaProxima').on('click', function () {
        carregarConexoes(paginaConexoes + 1);
    });

    $(document).on('click', '.btn-png', function () {
        var canvas = document.getElementById($(this).attr('data-canvas'));
        if (canvas) baixarCanvas(canvas, nomeArquivo($(this).attr('data-nome'), 'png'));
    });

    $('#exportarXlsx').on('click', function () {
        var p = periodo();
        window.location = urlExportar + '?inicio=' + p.inicio + '&fim=' + p.fim + '&formato=xlsx';
    });

    $('#exportarCsv').on('click', function () {
        var p = periodo();
        window.location = urlExportar + '?inicio=' + p.inicio + '&fim=' + p.fim + '&formato=csv';
    });

    $('#exportarPng').on('click', function () {
        gerarRelatorio();
    });

    $(document).ready(function () {
        aplicarTemaGraficos();
        atualizarTudo();

        var observador = new MutationObserver(function () {
            aplicarTemaGraficos();
            renderTudo();
        });

        observador.observe(document.documentElement, { attributes: true, attributeFilter: ['data-bs-theme'] });
        observador.observe(document.body, { attributes: true, attributeFilter: ['data-bs-theme'] });
    });
</script>

<style>
.th-sticky {
    background: #f8f9fa;
}

[data-bs-theme="dark"] .th-sticky {
    background: #20242d;
    color: #e7eaee;
}

[data-bs-theme="dark"] .table {
    --bs-table-color: #dfe3e8;
    --bs-table-bg: transparent;
    --bs-table-border-color: #343a44;
    --bs-table-hover-bg: rgba(255, 255, 255, .07);
    --bs-table-hover-color: #ffffff;
    --bs-table-striped-bg: rgba(255, 255, 255, .04);
    --bs-table-striped-color: #dfe3e8;
    --bs-table-active-bg: rgba(255, 255, 255, .08);
    --bs-table-active-color: #ffffff;
}

[data-bs-theme="dark"] .table > thead.table-light {
    --bs-table-color: #e7eaee;
    --bs-table-bg: #20242d;
    --bs-table-border-color: #343a44;
    --bs-table-hover-bg: #20242d;
    --bs-table-hover-color: #e7eaee;
    color: #e7eaee;
    border-color: #343a44;
}

[data-bs-theme="dark"] .table .text-muted {
    color: #9aa3ae !important;
}
</style>