@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: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        transform: none !important;
    }

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

    .tv-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;
    }

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

    .tv-cabecalho {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 45px;
        margin-bottom: 6px;
    }

    .tv-titulo {
        margin: 0;
        color: #34495e;
        font-size: 21px;
        font-weight: 500;
        line-height: 1.2;
    }

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

    .tv-periodo {
        padding: 6px 11px;
        border-radius: 18px;
        background-color: #ffffff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
        color: #64748b;
        font-size: 10px;
        white-space: nowrap;
    }

    .tv-estrutura {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 8px;
        width: 100%;
        align-items: start;
    }

    .tv-veiculos {
        min-width: 0;
        width: 100%;
    }

    .tv-veiculos-cabecalho {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 25px;
        margin-bottom: 6px;
    }

    .tv-veiculos-titulo {
        color: #475569;
        font-size: 14px;
        font-weight: 600;
    }

    .tv-quantidade {
        padding: 3px 8px;
        border-radius: 12px;
        background-color: #e9eef3;
        color: #607080;
        font-size: 9px;
        white-space: nowrap;
    }

    /* Cinco categorias principais na mesma linha em Full HD. */
    .tv-grid-categorias {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 7px;
        width: 100%;
        align-items: start;
    }

    .tv-coluna-categoria {
        min-width: 0;
        overflow: hidden;
        border: 1px solid #dfe6ed;
        border-radius: 7px;
        background-color: #eef1f4;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    }

    .tv-coluna-categoria-cabecalho {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 64px;
        padding: 6px 7px;
        overflow: hidden;
        border-left: 5px solid #64748b;
        border-radius: 6px 6px 0 0;
        background-color: #ffffff;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
    }

    .tv-coluna-categoria-identificacao {
        display: flex;
        align-items: center;
        min-width: 0;
        overflow: hidden;
    }

    .tv-coluna-categoria-imagem-container {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 44px;
        margin-right: 6px;
        overflow: hidden;
        border-radius: 6px;
        background-color: #f8fafc;
    }

    .tv-coluna-categoria-imagem {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .tv-coluna-categoria-informacoes {
        min-width: 0;
        overflow: hidden;
    }

    .tv-coluna-categoria-titulo {
        overflow: hidden;
        color: #334155;
        font-size: 11px;
        font-weight: 700;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .tv-coluna-categoria-subtitulo {
        margin-top: 2px;
        overflow: hidden;
        color: #94a3b8;
        font-size: 7px;
        font-weight: 400;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tv-coluna-categoria-quantidade {
        flex: 0 0 auto;
        margin-left: 3px;
        padding: 2px 5px;
        border-radius: 10px;
        background-color: #edf2f7;
        color: #64748b;
        font-size: 7px;
        white-space: nowrap;
    }

    .tv-coluna-categoria-corpo {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 6px;
    }

    .tv-coluna-categoria-vazia {
        padding: 22px 8px;
        color: #94a3b8;
        font-size: 9px;
        text-align: center;
    }

    .tv-coluna-truck .tv-coluna-categoria-cabecalho {
        border-left-color: #087cf0;
    }

    .tv-coluna-truck .tv-coluna-categoria-titulo {
        color: #075bb5;
    }

    .tv-coluna-bitruck .tv-coluna-categoria-cabecalho {
        border-left-color: #16a34a;
    }

    .tv-coluna-bitruck .tv-coluna-categoria-titulo {
        color: #15803d;
    }

    .tv-coluna-carreta .tv-coluna-categoria-cabecalho {
        border-left-color: #d97706;
    }

    .tv-coluna-carreta .tv-coluna-categoria-titulo {
        color: #b45309;
    }

    .tv-coluna-britagem .tv-coluna-categoria-cabecalho {
        border-left-color: #7c3aed;
    }

    .tv-coluna-britagem .tv-coluna-categoria-titulo {
        color: #6d28d9;
    }

    .tv-coluna-betoneira .tv-coluna-categoria-cabecalho {
        border-left-color: #0f766e;
    }

    .tv-coluna-betoneira .tv-coluna-categoria-titulo {
        color: #0f766e;
    }

    .tv-coluna-sem_categoria {
        grid-column: 1 / -1;
    }

    .tv-coluna-sem_categoria .tv-coluna-categoria-cabecalho {
        border-left-color: #94a3b8;
    }

    .tv-coluna-sem_categoria .tv-coluna-categoria-titulo {
        color: #64748b;
    }

    .tv-coluna-sem_categoria .tv-coluna-categoria-corpo {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }

    .tv-coluna-categoria .tv-card-veiculo,
    .tv-coluna-categoria-corpo .tv-card-veiculo {
        width: 100%;
        min-width: 0;
    }

    .tv-card-veiculo {
        position: relative;
        box-sizing: border-box;
        min-width: 0;
        overflow: hidden;
        border: 1px solid #dfe6ed;
        border-radius: 6px;
        background-color: #ffffff;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .tv-card-veiculo-cabecalho {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 31px;
        padding: 3px 5px;
        border-bottom: 1px solid #edf1f5;
    }

    .tv-card-veiculo-cabecalho-esquerda {
        display: flex;
        align-items: center;
        min-width: 0;
        overflow: hidden;
    }

    .tv-posicao-eficiencia {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 23px;
        min-width: 23px;
        height: 23px;
        margin-right: 5px;
        border-radius: 50%;
        background-color: #e2e8f0;
        color: #475569;
        font-size: 9px;
        font-weight: 700;
    }

    .tv-posicao-eficiencia-primeiro {
        background-color: #facc15;
        color: #713f12;
    }

    .tv-posicao-eficiencia-segundo {
        background-color: #cbd5e1;
        color: #334155;
    }

    .tv-posicao-eficiencia-terceiro {
        background-color: #fdba74;
        color: #7c2d12;
    }

    .tv-placa {
        overflow: hidden;
        color: #334155;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.2px;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tv-dias {
        flex: 0 0 auto;
        margin-left: 3px;
        padding: 2px 4px;
        border-radius: 8px;
        background-color: #edf2f7;
        color: #718096;
        font-size: 7px;
        white-space: nowrap;
    }

    .tv-card-veiculo-corpo {
        padding: 4px 5px;
    }

    .tv-card-valores {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3px;
    }

    .tv-indicador-label {
        overflow: hidden;
        margin-bottom: 1px;
        color: #8492a6;
        font-size: 7px;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tv-indicador-valor {
        overflow: hidden;
        color: #334155;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tv-texto-movimento {
        color: #16a34a;
    }

    .tv-texto-parado {
        color: #d97706;
    }

    .tv-percentual-linha {
        display: flex;
        justify-content: space-between;
        margin-top: 3px;
        color: #718096;
        font-size: 7px;
        line-height: 1.1;
    }

    .tv-progresso {
        width: 100%;
        height: 4px;
        margin-top: 2px;
        overflow: hidden;
        border-radius: 5px;
        background-color: #e8edf2;
    }

    .tv-progresso-barra {
        height: 100%;
        border-radius: 5px;
        background-color: #22a447;
    }

    .tv-card-rodape {
        display: flex;
        justify-content: space-between;
        gap: 3px;
        margin-top: 3px;
        padding-top: 3px;
        border-top: 1px solid #edf1f5;
        color: #7c8795;
        font-size: 6px;
        line-height: 1.1;
    }

    .tv-card-rodape span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tv-card-rodape strong {
        color: #475569;
    }

    .tv-card-veiculo.tv-eficiencia-verde {
        border-color: #86d69d;
        border-left: 5px solid #16a34a;
        background-color: #f7fdf9;
    }

    .tv-card-veiculo.tv-eficiencia-amarela {
        border-color: #f5cf74;
        border-left: 5px solid #eab308;
        background-color: #fffdf5;
    }

    .tv-card-veiculo.tv-eficiencia-vermelha {
        border-color: #f2a0a0;
        border-left: 5px solid #dc2626;
        background-color: #fff8f8;
    }

    .tv-card-veiculo.tv-eficiencia-verde .tv-card-veiculo-cabecalho {
        background-color: #f0fdf4;
    }

    .tv-card-veiculo.tv-eficiencia-amarela .tv-card-veiculo-cabecalho {
        background-color: #fefce8;
    }

    .tv-card-veiculo.tv-eficiencia-vermelha .tv-card-veiculo-cabecalho {
        background-color: #fef2f2;
    }

    .tv-card-veiculo.tv-eficiencia-verde .tv-percentual-linha,
    .tv-card-veiculo.tv-eficiencia-verde .tv-percentual-linha strong {
        color: #15803d;
    }

    .tv-card-veiculo.tv-eficiencia-amarela .tv-percentual-linha,
    .tv-card-veiculo.tv-eficiencia-amarela .tv-percentual-linha strong {
        color: #a16207;
    }

    .tv-card-veiculo.tv-eficiencia-vermelha .tv-percentual-linha,
    .tv-card-veiculo.tv-eficiencia-vermelha .tv-percentual-linha strong {
        color: #b91c1c;
    }

    .tv-card-veiculo.tv-eficiencia-verde .tv-progresso-barra {
        background-color: #16a34a;
    }

    .tv-card-veiculo.tv-eficiencia-amarela .tv-progresso-barra {
        background-color: #eab308;
    }

    .tv-card-veiculo.tv-eficiencia-vermelha .tv-progresso-barra {
        background-color: #dc2626;
    }

    .tv-coluna-totais {
        display: flex;
        position: sticky;
        top: 5px;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }

    .tv-card-total {
        overflow: hidden;
        border: 0;
        border-radius: 7px;
        background-color: #ffffff;
        box-shadow: 0 3px 9px rgba(15, 23, 42, 0.10);
    }

    .tv-card-total-cabecalho {
        padding: 6px 9px;
        color: #ffffff;
    }

    .tv-card-hoje .tv-card-total-cabecalho {
        background-color: #16a34a;
    }

    .tv-card-dia .tv-card-total-cabecalho {
        background-color: #17a2b8;
    }

    .tv-card-periodo .tv-card-total-cabecalho {
        background-color: #087cf0;
    }

    .tv-total-titulo {
        margin-bottom: 1px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.15;
    }

    .tv-total-data {
        font-size: 8px;
        opacity: 0.95;
    }

    .tv-card-total-corpo {
        padding: 6px 9px;
    }

    .tv-total-valores {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .tv-total-bloco {
        min-width: 0;
        margin-bottom: 5px;
    }

    .tv-total-label {
        overflow: hidden;
        margin-bottom: 1px;
        color: #8492a6;
        font-size: 8px;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tv-total-valor {
        overflow: hidden;
        color: #087cf0;
        font-size: 18px;
        font-weight: 300;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tv-total-valor-movimento {
        color: #16a34a;
    }

    .tv-card-hoje .tv-total-valor {
        color: #15803d;
    }

    .tv-total-percentual {
        display: flex;
        justify-content: space-between;
        margin-bottom: 2px;
        color: #718096;
        font-size: 8px;
    }

    .tv-total-percentual strong {
        color: #16a34a;
    }

    .tv-total-detalhes {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px;
        margin-top: 5px;
        text-align: center;
    }

    .tv-total-detalhe-label {
        overflow: hidden;
        color: #8492a6;
        font-size: 7px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tv-total-detalhe-valor {
        overflow: hidden;
        margin-top: 1px;
        color: #475569;
        font-size: 9px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tv-total-detalhe-parado {
        color: #d99400;
    }

    .tv-sem-registros {
        padding: 35px;
        border: 1px dashed #cbd5e1;
        border-radius: 7px;
        background-color: #ffffff;
        color: #7c8795;
        text-align: center;
    }

    .tv-atualizacao-barra {
        display: flex;
        box-sizing: border-box;
        flex: 0 0 auto;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-height: 36px;
        margin-top: 10px;
        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;
    }

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

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

    .tv-status-atualizacao.erro {
        color: #dc2626;
    }

    .tv-ultima-atualizacao {
        color: #7b8794;
    }

    .tv-botao-atualizar {
        padding: 4px 9px;
        border: 0;
        border-radius: 5px;
        background-color: #087cf0;
        color: #ffffff;
        font-size: 9px;
        cursor: pointer;
    }

    .tv-botao-atualizar:hover {
        background-color: #0668c9;
    }

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

    @media (max-width: 1600px) {
        .tv-estrutura {
            grid-template-columns: minmax(0, 1fr) 260px;
        }

        .tv-grid-categorias {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }
    }

    @media (max-width: 1400px) {
        .tv-grid-categorias {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .tv-coluna-sem_categoria .tv-coluna-categoria-corpo {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 1200px) {
        .tv-estrutura {
            grid-template-columns: 1fr;
        }

        .tv-coluna-totais {
            display: grid;
            position: static;
            grid-row: 1;
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .tv-grid-categorias {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

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

        .tv-cabecalho {
            align-items: flex-start;
            flex-direction: column;
            gap: 5px;
        }

        .tv-grid-categorias {
            grid-template-columns: 1fr;
        }

        .tv-coluna-sem_categoria {
            grid-column: auto;
        }

        .tv-coluna-sem_categoria .tv-coluna-categoria-corpo {
            display: flex;
            flex-direction: column;
        }

        .tv-coluna-totais {
            grid-template-columns: 1fr;
        }

        .tv-atualizacao-barra {
            align-items: stretch;
            flex-direction: column;
            gap: 6px;
        }

        .tv-botao-atualizar {
            width: 100%;
        }
    }
</style>

<div class="tv-dashboard">
    <div id="conteudoResumoVeiculos">
        @include('dashboard.partials.resumo-veiculos-conteudo')
    </div>

    <footer class="tv-atualizacao-barra">
        <div>
            <span id="statusAtualizacaoResumo" class="tv-status-atualizacao">Atualização automática ativa</span>
            <span class="tv-ultima-atualizacao">
                Última atualização:
                <strong id="ultimaAtualizacaoResumo">{{ now()->format('d/m/Y H:i:s') }}</strong>
            </span>
        </div>

        <button type="button" id="btnAtualizarResumo" class="tv-botao-atualizar">
            <i class="fa fa-refresh"></i>
            Atualizar
        </button>
    </footer>
</div>

<script>
(function () {
    var atualizandoResumo = false;
    var temporizadorResumo = null;
    var tempoAtualizacaoResumo = 600000;

    document.addEventListener('DOMContentLoaded', function () {
        ajustarResumoTelaCheia();
        iniciarAtualizacaoAutomatica();

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

        if (botao) {
            botao.addEventListener('click', atualizarResumo);
        }

        window.addEventListener('resize', ajustarResumoTelaCheia);

        document.addEventListener('visibilitychange', function () {
            if (!document.hidden) {
                atualizarResumo();
            }
        });

        setTimeout(ajustarResumoTelaCheia, 200);
    });

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

        temporizadorResumo = setInterval(function () {
            if (!document.hidden) {
                atualizarResumo();
            }
        }, tempoAtualizacaoResumo);
    }

    function atualizarResumo()
    {
        if (atualizandoResumo) {
            return;
        }

        var botao = document.getElementById('btnAtualizarResumo');
        var status = document.getElementById('statusAtualizacaoResumo');
        var conteudo = document.getElementById('conteudoResumoVeiculos');

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

        atualizandoResumo = true;
        botao.disabled = true;
        botao.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Atualizando';
        status.className = 'tv-status-atualizacao atualizando';
        status.textContent = 'Atualizando informações...';

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

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

                conteudo.innerHTML = response.html;

                var ultima = document.getElementById('ultimaAtualizacaoResumo');

                if (ultima) {
                    ultima.textContent = response.atualizado_em;
                }

                status.className = 'tv-status-atualizacao';
                status.textContent = 'Atualização automática ativa';
                ajustarResumoTelaCheia();
            })
            .catch(function (erro) {
                console.error(erro);
                status.className = 'tv-status-atualizacao erro';
                status.textContent = 'Falha na atualização. Nova tentativa em breve.';
            })
            .finally(function () {
                atualizandoResumo = false;
                botao.disabled = false;
                botao.innerHTML = '<i class="fa fa-refresh"></i> Atualizar';
            });
    }

    function ajustarResumoTelaCheia()
    {
        var dashboard = document.querySelector('.tv-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.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