{% extends 'base.html' %}

{% block title %}Dashboard - {{ loja_atual.nome }}{% endblock %}

{% block extra_css %}
<style>
    /* ===== Hero / Cabeçalho ===== */
    .dash-hero {
        background: linear-gradient(135deg, #1e4976 0%, #2f639d 100%);
        border-radius: 16px;
        color: #fff;
        padding: 1.4rem 1.6rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 8px 24px rgba(30, 73, 118, 0.25);
    }
    .dash-hero h1 {
        font-size: 1.5rem;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }
    .dash-hero .hero-sub {
        color: rgba(255, 255, 255, 0.75);
        font-size: 0.88rem;
        margin-top: 0.15rem;
    }
    .hero-caixa-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.5rem 0.95rem;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.9rem;
        text-decoration: none;
        white-space: nowrap;
    }
    .hero-caixa-aberto {
        background: rgba(46, 125, 50, 0.85);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.25);
    }
    .hero-caixa-fechado {
        background: #ffffff;
        color: #1e6b34;
    }
    .hero-caixa-badge:hover { filter: brightness(1.05); color: inherit; }

    .hero-actions .btn-light-ghost {
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.3);
        font-weight: 600;
    }
    .hero-actions .btn-light-ghost:hover {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
    }

    /* ===== Filtro de período ===== */
    .filtro-periodo {
        background: #fff;
        border-radius: 14px;
        padding: 0.9rem 1.1rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .filtro-periodo .form-label {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #868e96;
        margin-bottom: 0.25rem;
    }
    .pill {
        border-radius: 999px;
        font-weight: 600;
        font-size: 0.82rem;
        padding: 0.45rem 1rem;
        border: 1.5px solid transparent;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        transition: all 0.15s;
    }
    .pill:hover { filter: brightness(0.95); }
    .pill-verde    { background: #e8f5e9; color: #2e7d32; }
    .pill-ciano    { background: #e0f7fa; color: #00838f; }
    .pill-azul     { background: #e3f2fd; color: #1565c0; }
    .pill-laranja  { background: #fff3e0; color: #e65100; }
    .pill-roxo     { background: #f3e5f5; color: #7b1fa2; }

    /* ===== Cards de estatísticas ===== */
    .stat-modern {
        background: #fff;
        border-radius: 14px;
        padding: 1.15rem 1.25rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        border-bottom: 4px solid var(--cor);
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        height: 100%;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .stat-modern:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(0,0,0,0.1);
    }
    .stat-modern .icon-circle {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        background: var(--cor-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: var(--cor);
        flex-shrink: 0;
    }
    .stat-modern .value {
        font-size: 1.5rem;
        font-weight: 700;
        color: #212529;
        line-height: 1.15;
    }
    .stat-modern .label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #495057;
    }
    .stat-modern .sub {
        font-size: 0.74rem;
        color: #868e96;
    }

    /* ===== Seções ===== */
    .section-title {
        font-size: 1rem;
        font-weight: 700;
        color: #343a40;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 1.75rem 0 0.75rem;
    }
    .section-title i { color: var(--primary-color); }
    .section-title .badge-qtd {
        background: #e3f2fd;
        color: #1565c0;
        border-radius: 999px;
        font-size: 0.75rem;
        padding: 0.15rem 0.6rem;
    }

    /* ===== Cards de conteúdo ===== */
    .content-card {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        height: 100%;
        overflow: hidden;
    }
    .content-card .content-header {
        padding: 0.85rem 1.1rem;
        border-bottom: 1px solid #f0f2f5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
    }
    .content-card .content-header h5 {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #212529;
    }
    .content-card .content-header i { color: var(--primary-color); }
    .content-card .content-body { padding: 0.5rem 0; }

    /* Vendas: tabela limpa */
    .content-card table { margin: 0; }
    .content-card td:first-child strong { color: var(--primary-color); }

    /* Parcelas */
    .parcela-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.7rem 1.1rem;
        border-bottom: 1px solid #f4f6f8;
    }
    .parcela-item:last-child { border-bottom: none; }
    .parcela-nome { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.1rem; }
    .parcela-meta { font-size: 0.78rem; color: #868e96; }
    .parcela-valor { font-weight: 700; color: #1565c0; white-space: nowrap; }
    .tag-urgencia {
        font-size: 0.68rem;
        font-weight: 700;
        border-radius: 999px;
        padding: 0.15rem 0.55rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        display: inline-block;
        margin-left: 0.35rem;
    }
    .tag-hoje    { background: #fdecea; color: #c0392b; }
    .tag-3dias   { background: #fff3e0; color: #e65100; }
    .tag-5dias   { background: #e0f7fa; color: #00838f; }
    .tag-vencida { background: #343a40; color: #fff; }

    /* ===== Alertas de atenção ===== */
    .alerta-card {
        border-radius: 14px;
        padding: 1rem 1.15rem;
        display: flex;
        align-items: flex-start;
        gap: 0.9rem;
        height: 100%;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .alerta-card .alerta-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
    }
    .alerta-card h6 { font-weight: 700; margin-bottom: 0.15rem; font-size: 0.92rem; }
    .alerta-card p { font-size: 0.84rem; margin-bottom: 0.25rem; }
    .alerta-card a { font-size: 0.82rem; font-weight: 600; text-decoration: none; }
    .alerta-estoque  { background: #fff8e1; border: 1px solid #ffe08a; }
    .alerta-estoque .alerta-icon { background: #ffe082; color: #b26a00; }
    .alerta-estoque a { color: #b26a00; }
    .alerta-parcela  { background: #e3f2fd; border: 1px solid #a7cdf0; }
    .alerta-parcela .alerta-icon { background: #90caf9; color: #0d47a1; }
    .alerta-parcela a { color: #1565c0; }

    /* ===== Badge e mini-stats do gráfico ===== */
    .chart-badge {
        display: inline-grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: #e3f2fd;
        color: #1565c0;
        font-size: 1.3rem;
    }
    .chart-mini {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.6rem 0.95rem;
        border-radius: 12px;
        min-width: 170px;
    }
    .chart-mini-icon {
        display: inline-grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 1.05rem;
        flex-shrink: 0;
    }
    .chart-mini-label { font-size: 0.74rem; font-weight: 600; color: #495057; }
    .chart-mini-value { font-size: 1.05rem; font-weight: 700; line-height: 1.15; color: #212529; }
    .chart-mini-sub { font-size: 0.7rem; color: #868e96; line-height: 1.25; }
    .chart-mini.tone-green  { background: #eafaf0; } .chart-mini.tone-green .chart-mini-icon { background: #c6ecd6; color: #1e7e34; }
    .chart-mini.tone-purple { background: #f4efff; } .chart-mini.tone-purple .chart-mini-icon { background: #ddd1fb; color: #7655b2; }
    .chart-mini.tone-red    { background: #fdecee; } .chart-mini.tone-red .chart-mini-icon { background: #f5c3c8; color: #b02a37; }

    /* ===== FAB PDV ===== */
    .fab-pdv {
        width: 78px;
        height: 78px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 22px rgba(39, 174, 96, 0.45);
        transition: transform 0.2s;
    }
    .fab-pdv:hover { transform: scale(1.07); }
    .fab-pdv i { font-size: 1.9rem; }

    @media (max-width: 575.98px) {
        .dash-hero { padding: 1.1rem 1.2rem; }
        .dash-hero h1 { font-size: 1.2rem; }
        .stat-modern .value { font-size: 1.3rem; }
    }
</style>
{% endblock %}

{% block content %}
<!-- ===== Hero ===== -->
<div class="dash-hero d-flex justify-content-between align-items-center flex-wrap gap-3">
    <div>
        <h1><i class="bi bi-speedometer2"></i> Painel da Loja</h1>
        <div class="hero-sub"><i class="bi bi-calendar3"></i> {{ periodo_texto }} · <strong>{{ quantidade_vendas }}</strong> venda(s) realizadas</div>
    </div>
    <div class="d-flex gap-2 align-items-center hero-actions">
        {% if caixa_aberto %}
            <span class="hero-caixa-badge hero-caixa-aberto"><i class="bi bi-cash-coin"></i> Caixa Aberto</span>
        {% else %}
            <a href="{% url 'abrir_caixa' %}" class="hero-caixa-badge hero-caixa-fechado"><i class="bi bi-cash-coin"></i> Abrir Caixa</a>
        {% endif %}
        <a href="{% url 'pdv' %}" class="btn btn-light-ghost"><i class="bi bi-cart-check"></i> Novo PDV</a>
    </div>
</div>

<!-- ===== Filtro de Período ===== -->
<div class="filtro-periodo">
    <form method="get" class="row g-2 align-items-end">
        <div class="col-md-3 col-6">
            <label class="form-label">De</label>
            <input type="date" class="form-control" name="data_inicio" value="{{ data_inicio }}">
        </div>
        <div class="col-md-3 col-6">
            <label class="form-label">Até</label>
            <input type="date" class="form-control" name="data_fim" value="{{ data_fim }}">
        </div>
        <div class="col-md-2 col-6">
            <button type="submit" class="btn btn-primary w-100"><i class="bi bi-funnel"></i> Filtrar</button>
        </div>
        <div class="col-md-4 col-6 text-md-end">
            <label class="form-label">Atalhos</label><br>
        </div>
    </form>
    <div class="mt-2 d-flex gap-2 flex-wrap">
        {% for p in periodos_rapidos %}
        <a href="{{ p.url }}" class="pill {{ p.classe }}"><i class="bi bi-clock"></i> {{ p.label }}</a>
        {% endfor %}
    </div>
</div>

<!-- ===== Cards de Estatísticas ===== -->
<div class="row g-3">
    <div class="col-lg-3 col-md-6 col-sm-6">
        <div class="stat-modern" style="--cor: #1565c0; --cor-bg: #e3f2fd;">
            <div class="icon-circle"><i class="bi bi-cart3"></i></div>
            <div>
                <div class="value" style="color: var(--cor);">R$ {{ total_vendas_mes|floatformat:2 }}</div>
                <div class="label">Vendas no período</div>
                <div class="sub">Todas as formas de pagamento</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 col-sm-6">
        <div class="stat-modern" style="--cor: #2e7d32; --cor-bg: #e8f5e9;">
            <div class="icon-circle"><i class="bi bi-cash-coin"></i></div>
            <div>
                <div class="value" style="color: var(--cor);">R$ {{ recebido_caixa_fisico_mes|floatformat:2 }}</div>
                <div class="label">Total no caixa</div>
                <div class="sub">À vista + recebimento de parcelas</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 col-sm-6">
        <div class="stat-modern" style="--cor: #e65100; --cor-bg: #fff3e0;">
            <div class="icon-circle"><i class="bi bi-wallet2"></i></div>
            <div>
                <div class="value" style="color: var(--cor);">R$ {{ gastos_mes|floatformat:2 }}</div>
                <div class="label">Gastos do período</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 col-sm-6">
        <div class="stat-modern" style="--cor: {% if resultado_real_mes >= 0 %}#7b1fa2{% else %}#c0392b{% endif %}; --cor-bg: {% if resultado_real_mes >= 0 %}#f3e5f5{% else %}#fdecea{% endif %};">
            <div class="icon-circle">
                <i class="bi {% if resultado_real_mes >= 0 %}bi-graph-up{% else %}bi-graph-down{% endif %}"></i>
            </div>
            <div>
                <div class="value" style="color: var(--cor);">R$ {{ resultado_real_mes|floatformat:2 }}</div>
                <div class="label">Resultado do caixa</div>
                <div class="sub">Receitas - Gastos - Juros cartão</div>
            </div>
        </div>
    </div>
</div>

<!-- ===== Alertas ===== -->
{% if produtos_estoque_baixo > 0 or parcelas_alerta %}
<div class="row g-3 mt-1 mb-0">
    {% if produtos_estoque_baixo > 0 %}
    <div class="col-md-6">
        <div class="alerta-card alerta-estoque">
            <div class="alerta-icon"><i class="bi bi-exclamation-triangle"></i></div>
            <div>
                <h6>Estoque baixo</h6>
                <p><strong>{{ produtos_estoque_baixo }}</strong> produto(s) precisam de reposição.</p>
                <a href="{% url 'lista_produtos' %}">Ver produtos <i class="bi bi-arrow-right"></i></a>
            </div>
        </div>
    </div>
    {% endif %}
    {% if parcelas_alerta %}
    <div class="col-md-6">
        <div class="alerta-card alerta-parcela">
            <div class="alerta-icon"><i class="bi bi-calendar-check"></i></div>
            <div>
                <h6>Parcelas a vencer</h6>
                <p><strong>{{ parcelas_alerta.count }}</strong> parcela(s) vencendo nos próximos 5 dias.</p>
                <a href="{% url 'lista_parcelas' %}">Ver parcelas <i class="bi bi-arrow-right"></i></a>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endif %}

<!-- ===== Vendas Recentes ===== -->
<div class="section-title">
    <i class="bi bi-clock-history"></i> Vendas Recentes
    {% if vendas_recentes %}<span class="badge-qtd">{{ vendas_recentes|length }}</span>{% endif %}
    <a href="{% url 'lista_vendas' %}" class="ms-auto text-decoration-none" style="font-size: 0.82rem; font-weight: 600;">Ver todas <i class="bi bi-arrow-right"></i></a>
</div>

<div class="row g-3">
    <div class="col-lg-8">
        <div class="content-card">
            <div class="content-body">
                {% if vendas_recentes %}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead>
                                <tr>
                                    <th>Número</th>
                                    <th>Cliente</th>
                                    <th>Data</th>
                                    <th class="text-end">Total</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for venda in vendas_recentes %}
                                <tr>
                                    <td><strong>#{{ venda.numero_venda }}</strong></td>
                                    <td>{{ venda.cliente.nome|default:"Cliente Anônimo" }}</td>
                                    <td class="text-muted">{{ venda.data_venda|date:"d/m/Y H:i" }}</td>
                                    <td class="text-end"><strong>R$ {{ venda.total|floatformat:2 }}</strong></td>
                                    <td class="text-end">
                                        <a href="{% url 'detalhe_venda' venda.id %}" class="btn btn-sm btn-outline-primary" title="Detalhes">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                        <a href="{% url 'imprimir_cupom' venda.id %}" class="btn btn-sm btn-outline-secondary" title="Imprimir cupom" target="_blank">
                                            <i class="bi bi-printer"></i>
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center text-muted py-4">
                        <i class="bi bi-inbox" style="font-size: 2rem;"></i>
                        <div class="mt-2">Nenhuma venda realizada ainda.</div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- ===== Parcelas para Receber ===== -->
    <div class="col-lg-4">
        <div class="content-card">
            <div class="content-body">
                {% if parcelas_alerta %}
                    {% for parcela in parcelas_alerta %}
                    <div class="parcela-item">
                        <div>
                            <div class="parcela-nome">#{{ parcela.venda.numero_venda }} · {{ parcela.venda.cliente.nome|default:"Sem cliente" }}</div>
                            <div class="parcela-meta">Vence em {{ parcela.data_vencimento|date:"d/m/Y" }}
                                {% if parcela.alerta_vencimento == 'hoje' %}
                                    <span class="tag-urgencia tag-hoje">Hoje</span>
                                {% elif parcela.alerta_vencimento == '3dias' %}
                                    <span class="tag-urgencia tag-3dias">{% if parcela.dias_para_vencimento == 1 %}Amanhã{% else %}{{ parcela.dias_para_vencimento }} dias{% endif %}</span>
                                {% elif parcela.alerta_vencimento == '5dias' %}
                                    <span class="tag-urgencia tag-5dias">{% if parcela.dias_para_vencimento == 1 %}Amanhã{% else %}{{ parcela.dias_para_vencimento }} dias{% endif %}</span>
                                {% elif parcela.alerta_vencimento == 'vencida' %}
                                    <span class="tag-urgencia tag-vencida">Vencida</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="parcela-valor">R$ {{ parcela.valor|floatformat:2 }}</div>
                    </div>
                    {% endfor %}
                    <div class="py-3 text-center">
                        <a href="{% url 'lista_parcelas' %}" class="text-decoration-none" style="font-size: 0.82rem; font-weight: 600;">Ver todas as parcelas <i class="bi bi-arrow-right"></i></a>
                    </div>
                {% else %}
                    <div class="text-center text-muted py-4">
                        <i class="bi bi-check2-circle" style="font-size: 2rem; color: #2e7d32;"></i>
                        <div class="mt-2">Nenhuma parcela vencendo nos próximos dias.</div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- ===== Gráfico ===== -->
{% if tem_chart %}
<div class="section-title"><i class="bi bi-bar-chart"></i> Resumo de Vendas</div>
<div class="content-card h-auto">
    <div class="content-body" style="padding: 1.1rem 1.35rem 1.25rem;">
        <div class="d-flex flex-wrap gap-3 align-items-center mb-2">
            <div class="d-flex align-items-center gap-3 me-auto">
                <span class="chart-badge"><i class="bi bi-bar-chart-fill"></i></span>
                <div>
                    <div style="font-weight: 700; font-size: 1.05rem; line-height: 1.2;">Resumo de Vendas por Dia</div>
                    <div style="font-size: .8rem; color: #868e96;">{{ periodo_texto }}</div>
                </div>
            </div>
            <div class="chart-mini tone-green"><span class="chart-mini-icon"><i class="bi bi-cash-stack"></i></span><div><div class="chart-mini-label">Total do período</div><div class="chart-mini-value">R$ {{ chart_total|floatformat:2 }}</div><div class="chart-mini-sub"><i class="bi bi-receipt"></i> {{ quantidade_vendas }} venda(s) no período</div></div></div>
            <div class="chart-mini tone-purple"><span class="chart-mini-icon"><i class="bi bi-graph-up"></i></span><div><div class="chart-mini-label">Média por dia com venda</div><div class="chart-mini-value">R$ {{ chart_media|floatformat:2 }}</div></div></div>
            <div class="chart-mini {% if chart_crescimento >= 0 %}tone-green{% else %}tone-red{% endif %}"><span class="chart-mini-icon"><i class="bi {% if chart_crescimento >= 0 %}bi-arrow-up-right{% else %}bi-arrow-down-right{% endif %}"></i></span><div><div class="chart-mini-label">Crescimento</div><div class="chart-mini-value {% if chart_crescimento >= 0 %}text-success{% else %}text-danger{% endif %}">{{ chart_crescimento|floatformat:1 }}%</div><div class="chart-mini-sub">vs. período anterior</div></div></div>
        </div>
        <div style="height: 230px; position: relative;">
            <canvas id="graficoResumo"></canvas>
        </div>
    </div>
</div>
{% endif %}

<!-- ===== FAB PDV ===== -->
<div class="position-fixed bottom-0 end-0 m-4 no-print" style="z-index: 1000;">
    <a href="{% url 'pdv' %}" class="btn btn-success fab-pdv" title="Abrir PDV">
        <i class="bi bi-cart-plus"></i>
    </a>
</div>
{% endblock %}

{% block extra_js %}
{% if tem_chart %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    var ctx = document.getElementById('graficoResumo');
    if (!ctx) return;

    const labels = {{ chart_labels|safe }};
    const dias = {{ chart_dias|safe }};
    const valores = {{ chart_valores|safe }};

    // Desenho de linha vertical tracejada no ponto em hover
    const linhaVertical = {
        id: 'linhaVertical',
        defaults: { color: '#4a90e2', dash: [5, 5] },
        afterDatasetsDraw(chart) {
            const ativo = chart.tooltip?.getActiveElements();
            if (!ativo?.length) return;
            const x = ativo[0].element.x;
            const area = chart.chartArea;
            const ctx2 = chart.ctx, cor = linhaVertical.defaults.color;
            ctx2.save();
            ctx2.setLineDash([5, 5]);
            ctx2.strokeStyle = cor;
            ctx2.lineWidth = 1.4;
            ctx2.beginPath();
            ctx2.moveTo(x, area.top);
            ctx2.lineTo(x, area.bottom);
            ctx2.stroke();
            ctx2.restore();
        }
    };

    var gradiente = ctx.getContext('2d').createLinearGradient(0, 0, 0, 230);
    gradiente.addColorStop(0, 'rgba(74, 144, 226, 0.38)');
    gradiente.addColorStop(1, 'rgba(74, 144, 226, 0)');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels.map((l, i) => [l, dias[i][1]]),
            datasets: [{
                label: 'Vendas',
                data: valores,
                borderColor: '#1e8bff',
                borderWidth: 3,
                data: valores,
                tension: 0.4,
                fill: true,
                backgroundColor: gradiente,
                pointRadius: (c) => (c.dataIndex === 0 || c.dataIndex === labels.length - 1) ? 6 : 0,
                pointHoverRadius: 7,
                pointBackgroundColor: '#4a90e2',
                pointBorderColor: '#ffffff',
                pointBorderWidth: 2,
                segment: {
                    borderColor: (seg) => {
                        if (seg.p1DataIndex === labels.length - 2) return '#2fd6c8';
                        return '#1e8bff';
                    }
                }
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: '#14253d',
                    cornerRadius: 10,
                    padding: 12,
                    titleFont: { size: 13, weight: '700' },
                    bodyFont: { size: 12.5 },
                    displayColors: false,
                    callbacks: {
                        label: function (contexto) {
                            return '  Vendas   R$ ' + contexto.parsed.y.toFixed(2).replace('.', ',');
                        }
                    }
                }
            },
            scales: {
                x: {
                    grid: { display: false },
                    ticks: { color: '#8a97a8', font: { size: 12 } }
                },
                y: {
                    beginAtZero: true,
                    border: { display: false },
                    grid: { color: '#eef1f5' },
                    ticks: {
                        maxTicksLimit: 5,
                        color: '#8a97a8',
                        font: { size: 12 },
                        callback: function (valor) {
                            return 'R$ ' + valor;
                        }
                    }
                }
            }
        },
        plugins: [linhaVertical]
    });
});
</script>
{% endif %}
{% endblock %}