@extends('layouts.model')

@section('content')

<style>
    html,
    body {
        width: 100%;
        min-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    body .sidebar,
    body .main-sidebar,
    body .left-sidebar,
    body #sidebar,
    body .app-sidebar,
    body .sidebar-wrapper {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body .main,
    body #main,
    body .content,
    body #content,
    body .main-panel,
    body .main-wrapper,
    body .content-wrapper,
    body .main-content,
    body .page-content,
    body .page-wrapper,
    body .app-main,
    body .app-body,
    body main,
    body .container,
    body .container-fluid,
    body .main-container,
    body .content-container {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        transform: none !important;
    }

    body .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .tabela-dashboard {
        display: flex;
        position: relative;
        box-sizing: border-box;
        flex-direction: column;
        width: 100vw;
        max-width: 100vw;
        min-height: calc(100vh - 74px);
        margin: 0;
        padding: 8px 10px;
        background-color: #f3f5f7;
    }

    #conteudoTabelaVeiculos {
        flex: 1 0 auto;
        width: 100%;
        min-width: 0;
    }

    .tabela-cabecalho {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin-bottom: 7px;
    }

    .tabela-titulo {
        margin: 0;
        color: #334155;
        font-size: 22px;
        font-weight: 600;
        line-height: 1.2;
    }

    .tabela-subtitulo {
        margin-top: 2px;
        color: #7b8794;
        font-size: 10px;
    }

    .tabela-acoes {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 7px;
    }

    .tabela-botao {
        display: inline-flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-height: 32px;
        padding: 6px 11px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        background-color: #ffffff;
        color: #475569;
        font-size: 11px;
        line-height: 1;
        text-decoration: none !important;
        white-space: nowrap;
        cursor: pointer;
        transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    }

    .tabela-botao:hover {
        border-color: #087cf0;
        color: #087cf0;
        text-decoration: none !important;
    }

    .tabela-botao-primario {
        border-color: #087cf0;
        background-color: #087cf0;
        color: #ffffff;
    }

    .tabela-botao-primario:hover {
        border-color: #0668c9;
        background-color: #0668c9;
        color: #ffffff;
    }

    .tabela-botao-tv {
        border-color: #7c3aed;
        background-color: #7c3aed;
        color: #ffffff;
    }

    .tabela-botao-tv:hover {
        border-color: #6d28d9;
        background-color: #6d28d9;
        color: #ffffff;
    }

    .tabela-botao-tv.pausado {
        border-color: #16a34a;
        background-color: #16a34a;
        color: #ffffff;
    }

    .tabela-botao-navegacao {
        width: 34px;
        padding-right: 6px;
        padding-left: 6px;
    }

    .tabela-botao:disabled {
        cursor: wait;
        opacity: 0.65;
    }

    .tabela-modo-tv-painel {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 7px;
        padding: 7px 10px;
        border: 1px solid #c4b5fd;
        border-radius: 7px;
        background-color: #f5f3ff;
        box-shadow: 0 2px 6px rgba(124, 58, 237, 0.08);
        color: #5b21b6;
        font-size: 11px;
    }

    .tabela-modo-tv-status {
        display: inline-block;
        margin-right: 14px;
        color: #7c3aed;
        font-weight: 700;
    }

    .tabela-modo-tv-painel strong {
        color: #4c1d95;
    }

    .tabela-resumo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 5px;
        color: #64748b;
        font-size: 10px;
    }

    .tabela-cards-contexto {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: 8px;
        color: #475569;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .tabela-cards-categoria {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        margin-bottom: 8px;
    }

    .tabela-card {
        display: flex;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: flex-start;
        min-height: 76px;
        padding: 6px 8px;
        border: 1px solid #e2e8f0;
        border-left: 4px solid #64748b;
        border-radius: 0;
        background-color: #ffffff;
        box-shadow: none;
    }

    .tabela-card[data-cor="truck"] { border-left-color: #087cf0; }
    .tabela-card[data-cor="bitruck"] { border-left-color: #16a34a; }
    .tabela-card[data-cor="carreta"] { border-left-color: #d97706; }
    .tabela-card[data-cor="britagem"] { border-left-color: #7c3aed; }
    .tabela-card[data-cor="betoneira"] { border-left-color: #0f766e; }

    .tabela-card-titulo {
        color: #64748b;
        font-size: 7.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .tabela-card-valor {
        margin-top: 6px;
        color: #0f172a;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.1;
    }

    .tabela-card-detalhe {
        margin-top: 4px;
        color: #64748b;
        font-size: 8px;
        line-height: 1.3;
    }

    .tabela-card-comparativo {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        margin-top: 6px;
        border: 1px solid #e2e8f0;
        border-radius: 0;
        overflow: hidden;
        background: #ffffff;
    }

    .tabela-card-comparativo-coluna {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 5px 2px;
        border-left: 1px solid #e2e8f0;
        text-align: center;
        background: #ffffff;
    }

    .tabela-card-comparativo-coluna:first-child {
        border-left: 0;
    }

    .tabela-card-comparativo-coluna span {
        display: block;
        color: #64748b;
        font-size: 6.5px;
        font-weight: 700;
        letter-spacing: 0.03em;
        line-height: 1.1;
        text-transform: lowercase;
    }

    .tabela-card-comparativo-coluna strong {
        display: block;
        margin-top: 2px;
        color: #0f172a;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.2;
    }

    .tabela-card-comparativo-coluna.ativo {
        background: #ffffff;
    }

    .tabela-card-comparativo-coluna.ativo strong {
        color: #0f172a;
    }

    .tabela-container {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        border: 1px solid #dfe6ed;
        border-radius: 7px;
        background-color: #ffffff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
        scrollbar-width: thin;
        scrollbar-color: #94a3b8 #e2e8f0;
    }

    .tabela-container::-webkit-scrollbar {
        height: 9px;
    }

    .tabela-container::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: #e2e8f0;
    }

    .tabela-container::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #94a3b8;
    }

    .tabela-veiculos-comparativo {
        width: 100%;
        min-width: 1760px;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: fixed;
        color: #334155;
        font-size: 11px;
    }

    .tabela-veiculos-comparativo thead th {
        position: sticky;
        z-index: 3;
        box-sizing: border-box;
        border-right: 1px solid #dbe3eb;
        border-bottom: 1px solid #cbd5e1;
        color: #475569;
        font-weight: 700;
        text-align: center;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .tabela-cabecalho-periodos th {
        top: 0;
        height: 46px;
        padding: 6px 5px;
        font-size: 10px;
    }

    .tabela-cabecalho-indicadores th {
        top: 46px;
        height: 34px;
        padding: 6px 5px;
        font-size: 9px;
    }

    .tabela-coluna-posicao,
    .tabela-coluna-placa,
    .tabela-coluna-categoria {
        top: 0 !important;
        z-index: 5 !important;
        vertical-align: middle;
        background-color: #e9eef3;
    }

    .tabela-coluna-posicao {
        width: 60px;
    }

    .tabela-coluna-placa {
        width: 125px;
        text-align: left !important;
    }

    .tabela-coluna-categoria {
        width: 115px;
        text-align: left !important;
        border-right: 3px solid #94a3b8 !important;
    }

    .tabela-periodo {
        overflow: hidden;
    }

    .tabela-periodo-titulo,
    .tabela-periodo-data {
        display: block;
    }

    .tabela-periodo-titulo {
        font-size: 12px;
        line-height: 1.1;
    }

    .tabela-periodo-data {
        margin-top: 3px;
        font-size: 8px;
        font-weight: 500;
        opacity: 0.85;
        text-transform: none;
    }

    .tabela-periodo-marcacao {
        display: inline-block;
        margin-top: 6px;
        padding: 3px 7px;
        border-radius: 999px;
        background: rgba(16, 185, 129, 0.18);
        color: #14532d;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .tabela-periodo-hoje {
        border-top: 4px solid #16a34a;
        background-color: #dcfce7;
        color: #166534 !important;
    }

    .tabela-periodo-ontem {
        border-top: 4px solid #0284c7;
        background-color: #e0f2fe;
        color: #075985 !important;
    }

    .tabela-periodo-trinta-dias {
        border-top: 4px solid #7c3aed;
        background-color: #ede9fe;
        color: #5b21b6 !important;
    }

    .tabela-subcoluna-hoje {
        background-color: #f0fdf4;
        color: #166534 !important;
    }

    .tabela-subcoluna-ontem {
        background-color: #f0f9ff;
        color: #075985 !important;
    }

    .tabela-subcoluna-trinta-dias {
        background-color: #f5f3ff;
        color: #5b21b6 !important;
    }

    .tabela-cabecalho-indicadores th:nth-child(4),
    .tabela-cabecalho-indicadores th:nth-child(8),
    .tabela-cabecalho-indicadores th:nth-child(12) {
        border-right: 3px solid #94a3b8;
    }

    .tabela-veiculos-comparativo tbody td {
        box-sizing: border-box;
        height: 47px;
        padding: 7px 5px;
        border-right: 1px solid #edf1f5;
        border-bottom: 1px solid #e5eaf0;
        vertical-align: middle;
        text-align: center;
        white-space: nowrap;
        transition: filter 0.15s ease;
    }

    .tabela-veiculos-comparativo tbody tr:hover td {
        filter: brightness(0.975);
    }

    .tabela-celula-posicao {
        width: 60px;
    }

    .tabela-placa {
        width: 125px;
        color: #1e3a5f;
        font-size: 14px;
        font-weight: 700;
        text-align: left !important;
    }

    .tabela-celula-categoria {
        width: 115px;
        color: #475569;
        font-size: 10px;
        text-align: left !important;
        border-right: 3px solid #94a3b8 !important;
    }

    .tabela-periodo-celula {
        width: 112px;
        font-size: 10px;
    }

    .tabela-hoje-celula {
        background-image: linear-gradient(rgba(240, 253, 244, 0.34), rgba(240, 253, 244, 0.34));
    }

    .tabela-ontem-celula {
        background-image: linear-gradient(rgba(240, 249, 255, 0.44), rgba(240, 249, 255, 0.44));
    }

    .tabela-trinta-dias-celula {
        background-image: linear-gradient(rgba(245, 243, 255, 0.44), rgba(245, 243, 255, 0.44));
    }

    .tabela-linha-veiculo td:nth-child(7),
    .tabela-linha-veiculo td:nth-child(11),
    .tabela-linha-veiculo td:nth-child(15) {
        border-right: 3px solid #94a3b8;
    }

    .tabela-categoria-linha td {
        height: 38px !important;
        padding: 7px 10px !important;
        border-top: 1px solid #dfe6ed;
        border-right: 0 !important;
        border-bottom: 1px solid #dfe6ed !important;
        background-color: #f8fafc !important;
    }

    .tabela-categoria-conteudo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .tabela-categoria-nome {
        color: #334155;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .tabela-categoria-quantidade {
        padding: 3px 8px;
        border-radius: 10px;
        background-color: #e9eef3;
        color: #64748b;
        font-size: 9px;
    }

    .tabela-categoria-truck td { border-left: 5px solid #087cf0; }
    .tabela-categoria-bitruck td { border-left: 5px solid #16a34a; }
    .tabela-categoria-carreta td { border-left: 5px solid #d97706; }
    .tabela-categoria-britagem td { border-left: 5px solid #7c3aed; }
    .tabela-categoria-betoneira td { border-left: 5px solid #0f766e; }
    .tabela-categoria-sem_categoria td { border-left: 5px solid #94a3b8; }

    .tabela-linha-eficiencia-verde td {
        background-color: #f0fdf4;
    }

    .tabela-linha-eficiencia-amarela td {
        background-color: #fefce8;
    }

    .tabela-linha-eficiencia-vermelha td {
        background-color: #fef2f2;
    }

    .tabela-linha-eficiencia-verde td:first-child {
        border-left: 5px solid #16a34a;
    }

    .tabela-linha-eficiencia-amarela td:first-child {
        border-left: 5px solid #eab308;
    }

    .tabela-linha-eficiencia-vermelha td:first-child {
        border-left: 5px solid #dc2626;
    }

    .tabela-ranking {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 27px;
        min-width: 27px;
        height: 27px;
        border-radius: 50%;
        background-color: #e2e8f0;
        color: #475569;
        font-size: 10px;
        font-weight: 700;
    }

    .tabela-ranking-1 {
        background-color: #facc15;
        color: #713f12;
    }

    .tabela-ranking-2 {
        background-color: #cbd5e1;
        color: #334155;
    }

    .tabela-ranking-3 {
        background-color: #fdba74;
        color: #7c2d12;
    }

    .tabela-tempo-movimento {
        color: #15803d;
        font-weight: 700;
    }

    .tabela-tempo-parado {
        color: #d97706;
        font-weight: 600;
    }

    .tabela-eficiencia {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 60px;
        padding: 4px 6px;
        border-radius: 12px;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

    .tabela-eficiencia-verde {
        background-color: #bbf7d0;
        color: #166534;
    }

    .tabela-eficiencia-amarela {
        background-color: #fef08a;
        color: #854d0e;
    }

    .tabela-eficiencia-vermelha {
        background-color: #fecaca;
        color: #991b1b;
    }

    .tabela-sem-registros {
        padding: 35px !important;
        color: #64748b;
        font-size: 13px;
        text-align: center;
    }

    .tabela-rodape {
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 34px;
        margin-top: 7px;
        padding: 5px 9px;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        background-color: #ffffff;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
        color: #64748b;
        font-size: 9px;
    }

    .tabela-status {
        display: inline-block;
        margin-right: 12px;
        color: #16a34a;
        font-weight: 600;
    }

    .tabela-status.atualizando {
        color: #087cf0;
    }

    .tabela-status.erro {
        color: #dc2626;
    }

    @media (min-width: 1800px) {
        .tabela-veiculos-comparativo {
            min-width: 100%;
        }

        .tabela-periodo-celula {
            font-size: 11px;
        }

        .tabela-eficiencia {
            min-width: 64px;
            font-size: 11px;
        }
    }

    @media (max-width: 1200px) {
        .tabela-cabecalho,
        .tabela-modo-tv-painel {
            align-items: flex-start;
            flex-direction: column;
        }

        .tabela-acoes {
            width: 100%;
            flex-wrap: wrap;
        }
    }

    @media (max-width: 700px) {
        .tabela-dashboard {
            padding: 6px;
        }

        .tabela-titulo {
            font-size: 18px;
        }

        .tabela-resumo,
        .tabela-rodape {
            align-items: flex-start;
            flex-direction: column;
        }
    }


    /*
    |--------------------------------------------------------------------------
    | Ajuste compacto para TV Full HD
    |--------------------------------------------------------------------------
    */

    .tabela-dashboard {
        padding: 6px 8px;
    }

    .tabela-cabecalho {
        margin-bottom: 5px;
    }

    .tabela-modo-tv-painel {
        margin-bottom: 5px;
        padding: 5px 9px;
    }

    .tabela-resumo {
        margin-bottom: 4px;
    }

    .tabela-container {
        overflow-x: hidden;
    }

    .tabela-veiculos-comparativo {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
        font-size: 9px;
    }

    .tabela-cabecalho-periodos th {
        height: 38px;
        padding: 4px 3px;
    }

    .tabela-cabecalho-indicadores th {
        top: 38px;
        height: 28px;
        padding: 4px 2px;
        font-size: 8px;
    }

    .tabela-periodo-titulo {
        font-size: 11px;
    }

    .tabela-periodo-data {
        margin-top: 1px;
        font-size: 7px;
    }

    .tabela-coluna-posicao,
    .tabela-coluna-placa,
    .tabela-coluna-categoria {
        height: 66px !important;
        padding: 4px 3px !important;
        border-top: 4px solid #64748b !important;
        background-color: #e2e8f0 !important;
        color: #334155 !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    .tabela-coluna-posicao {
        width: 3.2%;
    }

    .tabela-coluna-placa {
        width: 7.2%;
    }

    .tabela-coluna-categoria {
        width: 6.1%;
        border-right: 2px solid #94a3b8 !important;
    }

    .tabela-periodo-hoje,
    .tabela-periodo-ontem,
    .tabela-periodo-trinta-dias {
        width: auto;
    }

    .tabela-subcoluna-hoje,
    .tabela-subcoluna-ontem,
    .tabela-subcoluna-trinta-dias {
        width: 6.958%;
    }

    .tabela-veiculos-comparativo tbody td {
        height: 36px;
        padding: 3px 2px;
        font-size: 8.5px;
    }

    .tabela-celula-posicao {
        width: 3.2%;
    }

    .tabela-placa {
        width: 7.2%;
        padding-left: 5px !important;
        font-size: 11px;
        text-align: left !important;
    }

    .tabela-celula-categoria {
        width: 6.1%;
        padding-left: 4px !important;
        border-right: 2px solid #94a3b8 !important;
        font-size: 8.5px;
        text-align: left !important;
    }

    .tabela-periodo-celula {
        width: 6.958%;
        padding-right: 1px !important;
        padding-left: 1px !important;
        font-size: 8.5px;
    }

    .tabela-cabecalho-indicadores th:nth-child(4),
    .tabela-cabecalho-indicadores th:nth-child(8),
    .tabela-cabecalho-indicadores th:nth-child(12),
    .tabela-linha-veiculo td:nth-child(7),
    .tabela-linha-veiculo td:nth-child(11),
    .tabela-linha-veiculo td:nth-child(15) {
        border-right: 2px solid #94a3b8;
    }

    .tabela-categoria-linha td {
        height: 29px !important;
        padding: 4px 7px !important;
    }

    .tabela-categoria-nome {
        font-size: 10px;
    }

    .tabela-categoria-quantidade {
        padding: 2px 6px;
        font-size: 7px;
    }

    .tabela-ranking {
        width: 22px;
        min-width: 22px;
        height: 22px;
        font-size: 8px;
    }

    .tabela-eficiencia {
        min-width: 45px;
        padding: 2px 3px;
        border-radius: 9px;
        font-size: 8px;
    }

    .tabela-tempo-movimento,
    .tabela-tempo-parado {
        font-size: 8.5px;
    }

    .tabela-rodape {
        min-height: 29px;
        margin-top: 4px;
        padding: 3px 7px;
    }

    .tabela-cards-categoria {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .tabela-card {
        min-height: 78px;
        padding: 7px 8px 7px 10px;
    }

    .tabela-card-titulo {
        font-size: 8px;
    }

    .tabela-card-valor {
        font-size: 15px;
    }

    .tabela-card-detalhe {
        font-size: 8px;
    }

    @media (min-width: 1500px) {
        .tabela-veiculos-comparativo {
            width: 100%;
            min-width: 0;
        }
    }

    @media (max-width: 1499px) {
        .tabela-container {
            overflow-x: auto;
        }

        .tabela-veiculos-comparativo {
            min-width: 1450px;
        }
    }

</style>

<div class="tabela-dashboard">
    <div class="tabela-cabecalho">
        <div>
            <h1 class="tabela-titulo">Resumo dos Veículos em Tabela</h1>
            <div class="tabela-subtitulo">Exibição automática por categoria com comparativo de hoje, dia anterior e últimos 30 dias</div>
        </div>

        <div class="tabela-acoes">
            <button type="button" id="btnModoTv" class="tabela-botao tabela-botao-tv"><i class="fa fa-pause"></i> Pausar rotação</button>
            <button type="button" id="btnCategoriaAnterior" class="tabela-botao tabela-botao-navegacao" title="Categoria anterior"><i class="fa fa-chevron-left"></i></button>
            <button type="button" id="btnProximaCategoria" class="tabela-botao tabela-botao-navegacao" title="Próxima categoria"><i class="fa fa-chevron-right"></i></button>
            <a href="{{ route('dashboard.resumoVeiculos') }}" class="tabela-botao"><i class="fa fa-th"></i> Visualizar cards</a>
            <button type="button" id="btnAtualizarTabela" class="tabela-botao tabela-botao-primario"><i class="fa fa-refresh"></i> Atualizar</button>
        </div>
    </div>

    <div id="painelModoTv" class="tabela-modo-tv-painel">
        <div>
            <span class="tabela-modo-tv-status"><i class="fa fa-television"></i> Modo TV ativo</span>
            <span>Categoria: <strong id="categoriaAtualTv">Carregando...</strong></span>
            <span class="tabela-cards-contexto" id="cardsIndicadoresContexto">Dados: hoje · dia anterior · acumulado</span>
        </div>
        <div>Próxima categoria em <strong id="contadorModoTv">15</strong> segundo(s)</div>
    </div>

    <div class="tabela-resumo">
        <span id="quantidadeFiltrada">Exibindo {{ $resumoPorVeiculo->count() }} veículo(s)</span>
        <span>Data: {{ \Carbon\Carbon::parse($dataAtual)->format('d/m/Y') }}</span>
    </div>

    @php
        $indicadoresTransportePorCategoria = $indicadoresTransportePorCategoria ?? [];
        $dataContextoCards = \Carbon\Carbon::parse($dataAtual)->format('d/m/Y');
    @endphp

    @if($exibirQuadroIndicadores ?? false)
        @include('dashboard.resumo-veiculos.partials.quadro-indicadores')
    @endif
    <div id="conteudoTabelaVeiculos">
        @include('dashboard.partials.resumo-veiculos-tabela-conteudo')
    </div>

    <footer class="tabela-rodape">
        <div>
            <span id="statusAtualizacaoTabela" class="tabela-status">Atualização automática ativa</span>
            <span>Última atualização: <strong id="ultimaAtualizacaoTabela">{{ now()->format('d/m/Y H:i:s') }}</strong></span>
        </div>
        <div>Dados: 60 s | Categoria: 15 s</div>
    </footer>
</div>

<script>
(function () {
    var atualizandoTabela = false;
    var temporizadorTabela = null;
    var tempoAtualizacaoTabela = 600000;

    var modoTvAtivo = true;
    var temporizadorModoTv = null;
    var temporizadorContadorTv = null;
    var categoriasModoTv = [];
    var indiceCategoriaTv = 0;
    var tempoCategoriaTv = 15000;
    var segundosRestantesTv = 15;
    var indicadoresTransportePorCategoria = @json($indicadoresTransportePorCategoria ?? []);
    var indicadoresComparativos = @json($indicadoresComparativos ?? []);

    document.addEventListener('DOMContentLoaded', function () {
        configurarEventos();
        ajustarTabelaTelaCheia();
        iniciarAtualizacaoAutomatica();
        iniciarModoTv();

        window.addEventListener(
            'resize',
            ajustarTabelaTelaCheia
        );

        document.addEventListener(
            'visibilitychange',
            function () {
                if (document.hidden) {
                    pararTemporizadoresModoTv();
                    return;
                }

                atualizarTabela();
            }
        );

        setTimeout(
            ajustarTabelaTelaCheia,
            200
        );
    });

    function configurarEventos()
    {
        var btnAtualizar = document.getElementById(
            'btnAtualizarTabela'
        );

        var btnModoTv = document.getElementById(
            'btnModoTv'
        );

        var btnAnterior = document.getElementById(
            'btnCategoriaAnterior'
        );

        var btnProxima = document.getElementById(
            'btnProximaCategoria'
        );

        if (btnAtualizar) {
            btnAtualizar.addEventListener(
                'click',
                atualizarTabela
            );
        }

        if (btnModoTv) {
            btnModoTv.addEventListener(
                'click',
                alternarModoTv
            );
        }

        if (btnAnterior) {
            btnAnterior.addEventListener(
                'click',
                categoriaAnteriorTv
            );
        }

        if (btnProxima) {
            btnProxima.addEventListener(
                'click',
                proximaCategoriaTv
            );
        }
    }

    function iniciarAtualizacaoAutomatica()
    {
        if (temporizadorTabela !== null) {
            clearInterval(temporizadorTabela);
        }

        temporizadorTabela = setInterval(
            function () {
                if (!document.hidden) {
                    atualizarTabela();
                }
            },
            tempoAtualizacaoTabela
        );
    }

    function atualizarTabela()
    {
        if (atualizandoTabela) {
            return;
        }

        var botao = document.getElementById(
            'btnAtualizarTabela'
        );

        var status = document.getElementById(
            'statusAtualizacaoTabela'
        );

        var conteudo = document.getElementById(
            'conteudoTabelaVeiculos'
        );

        if (!botao || !status || !conteudo) {
            return;
        }

        var categoriaAtual = null;

        if (
            categoriasModoTv.length > 0 &&
            indiceCategoriaTv >= 0 &&
            indiceCategoriaTv < categoriasModoTv.length
        ) {
            categoriaAtual = categoriasModoTv[
                indiceCategoriaTv
            ];
        }

        atualizandoTabela = true;
        pararTemporizadoresModoTv();

        botao.disabled = true;
        botao.innerHTML =
            '<i class="fa fa-spinner fa-spin"></i> ' +
            'Atualizando';

        status.className =
            'tabela-status atualizando';

        status.textContent =
            'Atualizando informações...';

        fetch(
            '{{ route('dashboard.resumoVeiculos.tabela.atualizar') }}',
            {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                cache: 'no-store'
            }
        )
            .then(function (response) {
                if (!response.ok) {
                    throw new Error(
                        'A atualização retornou o status ' +
                        response.status +
                        '.'
                    );
                }

                return response.json();
            })
            .then(function (response) {
                if (!response.success) {
                    throw new Error(
                        response.message ||
                        'Não foi possível atualizar a tabela.'
                    );
                }

                conteudo.innerHTML = response.html;

                if (response.indicadores) {
                    indicadoresTransportePorCategoria = response.indicadores;
                }

                if (response.comparativos) {
                    indicadoresComparativos = response.comparativos;
                }

                montarCategoriasModoTv();

                var categoriaRestaurada = categoriaAtual;

                if (
                    !categoriaRestaurada ||
                    categoriasModoTv.indexOf(categoriaRestaurada) === -1
                ) {
                    categoriaRestaurada = categoriasModoTv[0] || null;
                }

                if (categoriaRestaurada) {
                    indiceCategoriaTv = categoriasModoTv.indexOf(categoriaRestaurada);

                    if (indiceCategoriaTv === -1) {
                        indiceCategoriaTv = 0;
                    }
                } else {
                    indiceCategoriaTv = 0;
                }

                var ultimaAtualizacao = document.getElementById(
                    'ultimaAtualizacaoTabela'
                );

                if (ultimaAtualizacao) {
                    ultimaAtualizacao.textContent = response.atualizado_em || ultimaAtualizacao.textContent;
                }

                if (modoTvAtivo) {
                    exibirCategoriaTv();
                    iniciarTemporizadoresModoTv();
                } else {
                    exibirTodasCategorias();
                    atualizarCardsCategoria(categoriaRestaurada || 'truck');
                }

                status.className = 'tabela-status';
                status.textContent =
                    'Atualização automática ativa';

                ajustarTabelaTelaCheia();
            })
            .catch(function (erro) {
                console.error(
                    'Erro ao atualizar a tabela:',
                    erro
                );

                status.className =
                    'tabela-status erro';

                status.textContent =
                    'Falha na atualização. ' +
                    'Nova tentativa em breve.';

                if (modoTvAtivo) {
                    iniciarTemporizadoresModoTv();
                }
            })
            .finally(function () {
                atualizandoTabela = false;
                botao.disabled = false;

                botao.innerHTML =
                    '<i class="fa fa-refresh"></i> ' +
                    'Atualizar';
            });
    }

    function alternarModoTv()
    {
        if (modoTvAtivo) {
            pausarModoTv();
        } else {
            iniciarModoTv();
        }
    }

    function iniciarModoTv()
    {
        montarCategoriasModoTv();

        if (categoriasModoTv.length === 0) {
            return;
        }

        modoTvAtivo = true;

        var botao = document.getElementById(
            'btnModoTv'
        );

        var painel = document.getElementById(
            'painelModoTv'
        );

        if (botao) {
            botao.classList.remove('pausado');
            botao.innerHTML =
                '<i class="fa fa-pause"></i> ' +
                'Pausar rotação';
        }

        if (painel) {
            painel.style.display = 'flex';
        }

        exibirCategoriaTv();
        iniciarTemporizadoresModoTv();
    }

    function pausarModoTv()
    {
        modoTvAtivo = false;
        pararTemporizadoresModoTv();

        var botao = document.getElementById(
            'btnModoTv'
        );

        var painel = document.getElementById(
            'painelModoTv'
        );

        if (botao) {
            botao.classList.add('pausado');
            botao.innerHTML =
                '<i class="fa fa-play"></i> ' +
                'Retomar rotação';
        }

        if (painel) {
            painel.style.display = 'none';
        }

        exibirTodasCategorias();
        atualizarCardsCategoria(null);
    }

    function montarCategoriasModoTv()
    {
        var categoriasEncontradas = [];
        var cabecalhos = document.querySelectorAll(
            '.tabela-bloco-categoria'
        );

        cabecalhos.forEach(function (cabecalho) {
            var categoria = cabecalho.getAttribute(
                'data-categoria'
            );

            if (!categoria) {
                return;
            }

            var linhas = document.querySelectorAll(
                '.tabela-linha-veiculo' +
                '[data-categoria="' +
                categoria +
                '"]'
            );

            if (
                linhas.length > 0 &&
                categoriasEncontradas.indexOf(
                    categoria
                ) === -1
            ) {
                categoriasEncontradas.push(categoria);
            }
        });

        categoriasModoTv = categoriasEncontradas;

        if (
            indiceCategoriaTv >=
            categoriasModoTv.length
        ) {
            indiceCategoriaTv = 0;
        }
    }

    function exibirCategoriaTv()
    {
        if (
            !modoTvAtivo ||
            categoriasModoTv.length === 0
        ) {
            return;
        }

        if (
            indiceCategoriaTv >=
            categoriasModoTv.length
        ) {
            indiceCategoriaTv = 0;
        }

        if (indiceCategoriaTv < 0) {
            indiceCategoriaTv =
                categoriasModoTv.length - 1;
        }

        var categoria = categoriasModoTv[
            indiceCategoriaTv
        ];

        var linhasVeiculos = document.querySelectorAll(
            '.tabela-linha-veiculo'
        );

        var cabecalhos = document.querySelectorAll(
            '.tabela-bloco-categoria'
        );

        var quantidade = 0;

        linhasVeiculos.forEach(function (linha) {
            var exibir = linha.getAttribute(
                'data-categoria'
            ) === categoria;

            linha.style.display = exibir ? '' : 'none';

            if (exibir) {
                quantidade++;
            }
        });

        cabecalhos.forEach(function (cabecalho) {
            var exibir = cabecalho.getAttribute(
                'data-categoria'
            ) === categoria;

            cabecalho.style.display = exibir
                ? ''
                : 'none';
        });

        atualizarNomeCategoriaTv(categoria);
        atualizarQuantidade(quantidade);
        atualizarCardsCategoria(categoria);
        atualizarContextoCardsCategoria(categoria);

        segundosRestantesTv = Math.round(
            tempoCategoriaTv / 1000
        );

        atualizarContadorModoTv();

        var container = document.querySelector(
            '.tabela-container'
        );

        if (container) {
            container.scrollLeft = 0;
        }

        window.scrollTo({
            top: 0,
            left: 0,
            behavior: 'smooth'
        });
    }

    function atualizarContextoCardsCategoria(categoria)
    {
        var elemento = document.getElementById('cardsIndicadoresContexto');

        if (!elemento) {
            return;
        }

        var nomes = {
            truck: 'Truck',
            bitruck: 'Bitruck',
            carreta: 'Carreta',
            britagem: 'Britagem',
            betoneira: 'Betoneira',
            sem_categoria: 'Sem categoria'
        };

        var dataHoje = '{{ $dataContextoCards }}';
        var nomeCategoria = categoria ? (nomes[categoria] || categoria) : 'total geral';

        if (categoria) {
            elemento.textContent = 'Dados: hoje · dia anterior · acumulado · ' + nomeCategoria + ' · ' + dataHoje;
            return;
        }

        elemento.textContent = 'Dados: hoje · dia anterior · acumulado · total geral · ' + dataHoje;
    }

    function atualizarCardsCategoria(categoria)
    {
        var obterValor = function (objeto, chave) {
            if (objeto && Object.prototype.hasOwnProperty.call(objeto, chave)) {
                return objeto[chave];
            }

            console.error('Indicador não encontrado:', chave, objeto);
            return null;
        };

        var numero = function (valor, padrao) {
            if (valor === null || valor === undefined || isNaN(Number(valor))) {
                return padrao;
            }

            return Number(valor);
        };

        var numeroDecimal = function (valor, padrao) {
            var valorNumerico = numero(valor, padrao);
            return Number.isFinite(valorNumerico) ? valorNumerico : padrao;
        };

        var formatarPeso = function (valor) {
            if (valor === null || valor === undefined) {
                return '--';
            }

            var valorNumerico = numeroDecimal(valor, 0);
            return valorNumerico.toLocaleString('pt-BR', {
                minimumFractionDigits: 0,
                maximumFractionDigits: 3
            }) + ' t';
        };

        var formatarPercentual = function (valor) {
            if (valor === null || valor === undefined) {
                return '--';
            }

            return numeroDecimal(valor, 0).toLocaleString('pt-BR', {
                minimumFractionDigits: 1,
                maximumFractionDigits: 1
            }) + '%';
        };

        var categoriaDados = categoria
            ? obterValor(indicadoresTransportePorCategoria, categoria)
            : null;

        var dadosTotais = {};
        if (!categoria || !indicadoresTransportePorCategoria || Object.keys(indicadoresTransportePorCategoria).length === 0) {
            dadosTotais = {
                frota_ativa: 0,
                programados: 0,
                operacionais: 0,
                sem_programacao: 0,
                preenchidas: 0,
                possiveis: 0,
                viagens_programadas: 0,
                viagens_concluidas: 0,
                peso_programado_t: 0,
                cumprimento: 0,
                eficiencia_operacional: 0,
                eficiencia_periodo_texto: 'Dados das categorias'
            };

            Object.keys(indicadoresTransportePorCategoria || {}).forEach(function (chaveCategoria) {
                var categoriaItem = indicadoresTransportePorCategoria[chaveCategoria] || {};
                var item = obterValor(categoriaItem, 'hoje') || obterValor(categoriaItem, 'atual') || {};
                dadosTotais.frota_ativa += numero(item.frota_ativa, 0);
                dadosTotais.programados += numero(item.programados, 0);
                dadosTotais.operacionais += numero(item.operacionais, 0);
                dadosTotais.preenchidas += numero(item.preenchidas, 0);
                dadosTotais.possiveis += numero(item.possiveis, 0);
                dadosTotais.viagens_programadas += numero(item.viagens_programadas, 0);
                dadosTotais.viagens_concluidas += numero(item.viagens_concluidas, 0);
                dadosTotais.peso_programado_t += numeroDecimal(item.peso_programado_t, 0);
                dadosTotais.cumprimento += numeroDecimal(item.cumprimento, 0);
                dadosTotais.eficiencia_operacional += numeroDecimal(item.eficiencia_operacional, 0) * Math.max(numero(item.frota_ativa, 0), 1);
            });

            var totalFrota = Math.max(dadosTotais.frota_ativa, 1);
            dadosTotais.eficiencia_operacional = dadosTotais.eficiencia_operacional / totalFrota;
            dadosTotais.sem_programacao = Math.max(dadosTotais.frota_ativa - dadosTotais.programados, 0);
            dadosTotais.cumprimento = dadosTotais.viagens_programadas > 0
                ? (dadosTotais.viagens_concluidas / dadosTotais.viagens_programadas) * 100
                : 0;
        }

        var dadosAtuais = categoria
            ? (obterValor(categoriaDados, 'hoje') || obterValor(categoriaDados, 'atual') || {})
            : dadosTotais;
        var comparativoCategoria = categoria
            ? obterValor(indicadoresComparativos, categoria)
            : null;
        var dadosOntem = comparativoCategoria ? (obterValor(comparativoCategoria, 'ontem') || {}) : dadosAtuais;
        var dadosHoje = comparativoCategoria ? (obterValor(comparativoCategoria, 'hoje') || dadosAtuais) : dadosAtuais;
        var dadosPeriodo = comparativoCategoria ? (obterValor(comparativoCategoria, 'periodo') || {}) : dadosAtuais;
        var cardCor = categoria || 'truck';
        var cards = document.querySelectorAll('.tabela-card');

        cards.forEach(function (card) {
            card.setAttribute('data-cor', cardCor);
        });

        var atualizarTexto = function (id, valor) {
            var elemento = document.getElementById(id);
            if (elemento) {
                elemento.textContent = valor;
            }
        };

        var frotaAtiva = obterValor(dadosAtuais, 'frota_ativa');
        var programados = obterValor(dadosAtuais, 'programados');
        var operacionais = obterValor(dadosAtuais, 'operacionais');
        var semProgramacao = obterValor(dadosAtuais, 'sem_programacao');
        var preenchidas = numero(obterValor(dadosAtuais, 'preenchidas'), 0);
        var possiveis = numero(obterValor(dadosAtuais, 'possiveis'), 0);
        var viagensProgramadas = obterValor(dadosAtuais, 'viagens_programadas');
        var viagensConcluidas = numero(obterValor(dadosAtuais, 'viagens_concluidas'), 0);
        var pesoProgramado = obterValor(dadosAtuais, 'peso_programado_t');
        var cumprimento = obterValor(dadosAtuais, 'cumprimento');
        var eficiencia = obterValor(dadosAtuais, 'eficiencia_operacional');
        var frotaAtivaNumero = numero(frotaAtiva, 0);
        var programadosNumero = numero(programados, 0);
        var operacionaisNumero = numero(operacionais, 0);
        var semProgramacaoNumero = numero(semProgramacao, 0);
        var viagensProgramadasNumero = numero(viagensProgramadas, 0);

        atualizarTexto('cardFrotaAtivaValor', frotaAtiva === null ? '--' : frotaAtiva);
        atualizarTexto('cardFrotaAtivaDetalhe', frotaAtiva === null ? '--' : frotaAtiva + ' veículos');

        atualizarTexto('cardProgramadosValor', programados === null ? '--' : programados);
        atualizarTexto('cardProgramadosDetalhe', semProgramacao === null ? '--' : semProgramacao + ' sem programação');

        atualizarTexto('cardOperacionaisValor', operacionais === null ? '--' : operacionais);
        atualizarTexto('cardOperacionaisDetalhe', operacionais === null || frotaAtiva === null ? '--' : (frotaAtivaNumero - operacionaisNumero) + ' não operacionais');

        var coberturaAtual = possiveis > 0 ? (preenchidas / possiveis) * 100 : 0;
        var preenchidasOntem = obterValor(dadosOntem, 'preenchidas');
        var possiveisOntem = obterValor(dadosOntem, 'possiveis');
        var preenchidasPeriodo = obterValor(dadosPeriodo, 'preenchidas');
        var possiveisPeriodo = obterValor(dadosPeriodo, 'possiveis');
        var coberturaOntem = possiveisOntem === null
            ? null
            : (numero(possiveisOntem, 0) > 0 ? (numero(preenchidasOntem, 0) / numero(possiveisOntem, 0)) * 100 : 0);
        var coberturaPeriodo = possiveisPeriodo === null
            ? null
            : (numero(possiveisPeriodo, 0) > 0 ? (numero(preenchidasPeriodo, 0) / numero(possiveisPeriodo, 0)) * 100 : 0);

        atualizarTexto('cardCoberturaValor', formatarPercentual(possiveis === null ? null : coberturaAtual));
        atualizarTexto('cardCoberturaOntem', formatarPercentual(coberturaOntem));
        atualizarTexto('cardCoberturaHoje', formatarPercentual(coberturaAtual));
        atualizarTexto('cardCoberturaPeriodo', formatarPercentual(coberturaPeriodo));

        var viagensOntem = obterValor(dadosOntem, 'viagens_programadas');
        var viagensPeriodo = obterValor(dadosPeriodo, 'viagens_programadas');

        atualizarTexto('cardViagensProgramadasValor', viagensProgramadas === null ? '--' : viagensProgramadas);
        atualizarTexto('cardViagensProgramadasOntem', viagensOntem === null ? '--' : viagensOntem);
        atualizarTexto('cardViagensProgramadasHoje', viagensProgramadas === null ? '--' : viagensProgramadas);
        atualizarTexto('cardViagensProgramadasPeriodo', viagensPeriodo === null ? '--' : viagensPeriodo);

        var pesoOntem = numeroDecimal(dadosOntem.peso_programado_t, 0);
        var pesoPeriodo = numeroDecimal(dadosPeriodo.peso_programado_t, 0);

        atualizarTexto('cardPesoProgramadoValor', formatarPeso(pesoProgramado));
        atualizarTexto('cardPesoProgramadoOntem', formatarPeso(pesoOntem));
        atualizarTexto('cardPesoProgramadoHoje', formatarPeso(pesoProgramado));
        atualizarTexto('cardPesoProgramadoPeriodo', formatarPeso(pesoPeriodo));

        var cumprimentoOntem = numeroDecimal(dadosOntem.cumprimento, 0);
        var cumprimentoPeriodo = numeroDecimal(dadosPeriodo.cumprimento, 0);

        atualizarTexto('cardCumprimentoValor', formatarPercentual(cumprimento));
        atualizarTexto('cardCumprimentoOntem', formatarPercentual(cumprimentoOntem));
        atualizarTexto('cardCumprimentoHoje', formatarPercentual(cumprimento));
        atualizarTexto('cardCumprimentoPeriodo', formatarPercentual(cumprimentoPeriodo));

        var eficienciaOntem = numeroDecimal(dadosOntem.eficiencia_operacional, 0);
        var eficienciaPeriodo = numeroDecimal(dadosPeriodo.eficiencia_operacional, 0);

        atualizarTexto('cardEficienciaOperacionalValor', formatarPercentual(eficiencia));
        atualizarTexto('cardEficienciaOperacionalOntem', formatarPercentual(eficienciaOntem));
        atualizarTexto('cardEficienciaOperacionalHoje', formatarPercentual(eficiencia));
        atualizarTexto('cardEficienciaOperacionalPeriodo', formatarPercentual(eficienciaPeriodo));
        atualizarContextoCardsCategoria(categoria);
    }

    function exibirTodasCategorias()
    {
        var linhas = document.querySelectorAll(
            '.tabela-linha-veiculo, ' +
            '.tabela-bloco-categoria'
        );

        linhas.forEach(function (linha) {
            linha.style.display = '';
        });

        atualizarQuantidade(
            document.querySelectorAll(
                '.tabela-linha-veiculo'
            ).length
        );
        atualizarCardsCategoria(null);
    }

    function proximaCategoriaTv()
    {
        if (!modoTvAtivo) {
            iniciarModoTv();
            return;
        }

        indiceCategoriaTv++;

        if (
            indiceCategoriaTv >=
            categoriasModoTv.length
        ) {
            indiceCategoriaTv = 0;
        }

        exibirCategoriaTv();
        iniciarTemporizadoresModoTv();
    }

    function categoriaAnteriorTv()
    {
        if (!modoTvAtivo) {
            iniciarModoTv();
            return;
        }

        indiceCategoriaTv--;

        if (indiceCategoriaTv < 0) {
            indiceCategoriaTv =
                categoriasModoTv.length - 1;
        }

        exibirCategoriaTv();
        iniciarTemporizadoresModoTv();
    }

    function pararTemporizadoresModoTv()
    {
        if (temporizadorModoTv !== null) {
            clearInterval(temporizadorModoTv);
            temporizadorModoTv = null;
        }

        if (temporizadorContadorTv !== null) {
            clearInterval(temporizadorContadorTv);
            temporizadorContadorTv = null;
        }
    }

    function iniciarTemporizadoresModoTv()
    {
        if (!modoTvAtivo) {
            return;
        }

        pararTemporizadoresModoTv();

        segundosRestantesTv = Math.round(
            tempoCategoriaTv / 1000
        );

        atualizarContadorModoTv();
        reiniciarTemporizadorModoTv();
        iniciarContadorModoTv();
    }

    function reiniciarTemporizadorModoTv()
    {
        if (temporizadorModoTv !== null) {
            clearInterval(temporizadorModoTv);
        }

        temporizadorModoTv = setInterval(
            function () {
                if (
                    modoTvAtivo &&
                    !document.hidden &&
                    !atualizandoTabela
                ) {
                    indiceCategoriaTv++;

                    if (
                        indiceCategoriaTv >=
                        categoriasModoTv.length
                    ) {
                        indiceCategoriaTv = 0;
                    }

                    exibirCategoriaTv();
                }
            },
            tempoCategoriaTv
        );
    }

    function iniciarContadorModoTv()
    {
        if (temporizadorContadorTv !== null) {
            clearInterval(temporizadorContadorTv);
        }

        temporizadorContadorTv = setInterval(
            function () {
                if (
                    !modoTvAtivo ||
                    document.hidden ||
                    atualizandoTabela
                ) {
                    return;
                }

                segundosRestantesTv--;

                if (segundosRestantesTv <= 0) {
                    segundosRestantesTv = Math.round(
                        tempoCategoriaTv / 1000
                    );
                }

                atualizarContadorModoTv();
            },
            1000
        );
    }

    function atualizarContadorModoTv()
    {
        var contador = document.getElementById(
            'contadorModoTv'
        );

        if (contador) {
            contador.textContent =
                segundosRestantesTv;
        }
    }

    function atualizarNomeCategoriaTv(categoria)
    {
        var nomes = {
            truck: 'Truck',
            bitruck: 'Bitruck',
            carreta: 'Carreta',
            britagem: 'Britagem',
            betoneira: 'Betoneira',
            sem_categoria: 'Sem categoria'
        };

        var elemento = document.getElementById(
            'categoriaAtualTv'
        );

        if (elemento) {
            elemento.textContent =
                nomes[categoria] || categoria;
        }
    }

    function atualizarQuantidade(quantidade)
    {
        var elemento = document.getElementById(
            'quantidadeFiltrada'
        );

        if (elemento) {
            elemento.textContent =
                'Exibindo ' +
                quantidade +
                ' veículo(s)';
        }
    }

    function ajustarTabelaTelaCheia()
    {
        var dashboard = document.querySelector(
            '.tabela-dashboard'
        );

        if (!dashboard) {
            return;
        }

        var elementoPai = dashboard.parentElement;

        while (
            elementoPai &&
            elementoPai !== document.body
        ) {
            elementoPai.style.width = '100%';
            elementoPai.style.maxWidth = 'none';
            elementoPai.style.marginLeft = '0';
            elementoPai.style.marginRight = '0';
            elementoPai.style.paddingLeft = '0';
            elementoPai.style.paddingRight = '0';
            elementoPai.style.overflow = 'visible';
            elementoPai.style.transform = 'none';
            elementoPai = elementoPai.parentElement;
        }

        dashboard.style.marginLeft = '0';
        dashboard.style.marginRight = '0';
        dashboard.style.transform = 'none';
        dashboard.style.width = '100vw';
        dashboard.style.maxWidth = '100vw';

        var esquerda = dashboard
            .getBoundingClientRect()
            .left;

        if (esquerda !== 0) {
            dashboard.style.transform =
                'translateX(' +
                (-esquerda) +
                'px)';
        }
    }
})();
</script>
@endsection