@extends('layouts.admin')
@section('title', 'Indicadores & Analytics')
@section('breadcrumb')
    <span class="breadcrumb-current">Indicadores</span>
@endsection

@push('styles')
<style>
/* ─── Layout ─── */
.ind-header   { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.ind-header h2 { font-size:1.3rem; font-weight:800; color:#111827; margin-bottom:2px; }
.ind-header p  { font-size:.8rem; color:#6b7280; }

/* ─── Period Selector ─── */
.period-tabs { display:flex; gap:6px; background:#f1f5f9; border-radius:10px; padding:4px; }
.period-tab  {
    padding:6px 14px; border-radius:7px; font-size:.78rem; font-weight:700;
    text-decoration:none; color:#6b7280; transition:.15s;
}
.period-tab.active { background:#fff; color:var(--color-primary); box-shadow:0 1px 4px rgba(0,0,0,.1); }
.period-tab:hover:not(.active) { color:#374151; }

/* ─── KPI Comparativo ─── */
.kpi-compare-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
@media(max-width:980px){ .kpi-compare-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:540px){ .kpi-compare-grid { grid-template-columns:1fr; } }

.kpi-compare {
    background:#fff; border:1px solid #e5e7eb; border-radius:14px;
    padding:18px 20px; position:relative; overflow:hidden;
    transition:.2s;
}
.kpi-compare:hover { box-shadow:0 6px 20px rgba(0,0,0,.08); transform:translateY(-2px); }
.kpi-compare::before {
    content:''; position:absolute; inset:0 0 auto 0; height:3px;
    background:var(--kpi-color, #6366f1);
}
.kpi-c-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#9ca3af; margin-bottom:6px; display:flex; align-items:center; gap:5px; }
.kpi-c-value { font-size:1.5rem; font-weight:800; color:#111827; line-height:1.1; margin-bottom:6px; }
.kpi-c-compare { display:flex; align-items:center; gap:6px; font-size:.72rem; }
.kpi-c-badge {
    display:inline-flex; align-items:center; gap:3px;
    padding:2px 7px; border-radius:99px; font-weight:700; font-size:.7rem;
}
.kpi-c-badge.up   { background:#dcfce7; color:#15803d; }
.kpi-c-badge.down { background:#fee2e2; color:#dc2626; }
.kpi-c-badge.flat { background:#f1f5f9; color:#6b7280; }
.kpi-c-prev { color:#9ca3af; }

/* ─── Highlight KPIs (RevPAR, etc.) ─── */
.kpi-highlight-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
@media(max-width:980px){ .kpi-highlight-row { grid-template-columns:1fr 1fr; } }
.kpi-highlight {
    background:linear-gradient(135deg, var(--kh-from), var(--kh-to));
    border-radius:14px; padding:18px 20px; color:#fff;
    position:relative; overflow:hidden;
}
.kpi-highlight::after {
    content:attr(data-icon); position:absolute; right:12px; top:50%; transform:translateY(-50%);
    font-size:2.4rem; opacity:.15;
}
.kpi-h-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; opacity:.8; margin-bottom:5px; }
.kpi-h-value { font-size:1.55rem; font-weight:800; line-height:1.1; }
.kpi-h-sub   { font-size:.7rem; opacity:.75; margin-top:5px; }

/* ─── Chart Panels ─── */
.panel {
    background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; margin-bottom:18px;
}
.panel-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 20px; border-bottom:1px solid #f1f5f9;
    font-weight:700; font-size:.84rem; background:#fafafa;
}
.panel-header .ph-sub { font-size:.72rem; color:#6b7280; font-weight:400; }

/* ─── Charts layout ─── */
.charts-main  { display:grid; grid-template-columns:2fr 1fr; gap:18px; margin-bottom:18px; }
.charts-mid   { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.charts-rosca { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
@media(max-width:1000px){ .charts-main { grid-template-columns:1fr; } .charts-mid { grid-template-columns:1fr; } }
@media(max-width:800px) { .charts-rosca { grid-template-columns:1fr; } }

/* ─── Rankings ─── */
.rankings-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:900px){ .rankings-row { grid-template-columns:1fr; } }

.rank-item { display:flex; align-items:center; gap:10px; padding:10px 20px; border-bottom:1px solid #f8fafc; font-size:.82rem; }
.rank-item:last-child { border-bottom:none; }
.rank-num   { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:800; flex-shrink:0; }
.rank-bar-wrap { flex:1; }
.rank-bar-bg   { height:5px; background:#f1f5f9; border-radius:99px; overflow:hidden; }
.rank-bar-fill { height:5px; border-radius:99px; background:linear-gradient(90deg,#6366f1,#8b5cf6); }

/* ─── VIP Badge ─── */
.vip-badge { padding:1px 6px; border-radius:4px; font-size:.62rem; font-weight:700; text-transform:uppercase; }
.vip-silver   { background:#f1f5f9; color:#475569; }
.vip-gold     { background:#fef3c7; color:#b45309; }
.vip-platinum { background:#ede9fe; color:#7c3aed; }

/* ─── Section title ─── */
.sec-title { font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#9ca3af; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:7px; }
</style>
@endpush

@section('content')

@php
    $periodLabel = match($period) {
        'quarter'  => 'Trimestre Atual',
        'semester' => 'Últimos 6 Meses',
        'year'     => 'Ano Atual',
        default    => 'Mês Atual',
    };

    function pctDiff($current, $prev): array {
        if ($prev == 0) return ['pct' => null, 'dir' => 'flat'];
        $pct = round(($current - $prev) / $prev * 100, 1);
        return ['pct' => $pct, 'dir' => $pct > 0 ? 'up' : ($pct < 0 ? 'down' : 'flat')];
    }
@endphp

{{-- ═══ HEADER ════════════════════════════════════════════════════════════ --}}
<div class="ind-header">
    <div>
        <h2>📊 Indicadores & Analytics</h2>
        <p>{{ $periodLabel }} · {{ $fromDt->format('d/m/Y') }} a {{ $toDt->format('d/m/Y') }} · {{ $totalRooms }} UH{{ $totalRooms !== 1 ? 's' : '' }}</p>
    </div>
    <div class="period-tabs">
        @foreach(['month'=>'Mês','quarter'=>'Trimestre','semester'=>'6 Meses','year'=>'Ano'] as $key=>$label)
        <a href="{{ route('admin.indicators.index', ['period'=>$key]) }}"
           class="period-tab {{ $period === $key ? 'active' : '' }}">{{ $label }}</a>
        @endforeach
    </div>
</div>

{{-- ═══ KPIs COMPARATIVOS ═════════════════════════════════════════════════ --}}
<div class="sec-title">
    <i data-lucide="bar-chart-2" style="width:13px;height:13px;"></i>
    Comparativo — {{ $periodLabel }} vs. Período Anterior
</div>

@php
$revenueChg    = pctDiff($revenue,      $revenuePrev);
$reservChg     = pctDiff($reservations, $reservationsPrev);
$adrChg        = pctDiff($adr,          $adrPrev);
$occChg        = pctDiff($avgOcc,       $avgOccPrev);
$ticketChg     = pctDiff($ticketMedio,  $ticketMedioPrev);
$nightsChg     = pctDiff($nightsSold,   $nightsSoldPrev);
@endphp

<div class="kpi-compare-grid">

    {{-- Receita --}}
    <div class="kpi-compare" style="--kpi-color:#6366f1;">
        <div class="kpi-c-label"><i data-lucide="dollar-sign" style="width:11px;height:11px;color:#6366f1;"></i>Receita do Período</div>
        <div class="kpi-c-value">R$ {{ number_format($revenue,2,',','.') }}</div>
        <div class="kpi-c-compare">
            @if($revenueChg['pct'] !== null)
                <span class="kpi-c-badge {{ $revenueChg['dir'] }}">
                    {{ $revenueChg['dir'] === 'up' ? '▲' : '▼' }} {{ abs($revenueChg['pct']) }}%
                </span>
            @endif
            <span class="kpi-c-prev">anterior: R$ {{ number_format($revenuePrev,2,',','.') }}</span>
        </div>
    </div>

    {{-- Reservas --}}
    <div class="kpi-compare" style="--kpi-color:#22c55e;">
        <div class="kpi-c-label"><i data-lucide="calendar-check" style="width:11px;height:11px;color:#22c55e;"></i>Reservas</div>
        <div class="kpi-c-value">{{ $reservations }}</div>
        <div class="kpi-c-compare">
            @if($reservChg['pct'] !== null)
                <span class="kpi-c-badge {{ $reservChg['dir'] }}">
                    {{ $reservChg['dir'] === 'up' ? '▲' : '▼' }} {{ abs($reservChg['pct']) }}%
                </span>
            @endif
            <span class="kpi-c-prev">anterior: {{ $reservationsPrev }}</span>
        </div>
    </div>

    {{-- ADR --}}
    <div class="kpi-compare" style="--kpi-color:#f59e0b;">
        <div class="kpi-c-label"><i data-lucide="tag" style="width:11px;height:11px;color:#f59e0b;"></i>ADR (Diária Média)</div>
        <div class="kpi-c-value">R$ {{ number_format($adr,2,',','.') }}</div>
        <div class="kpi-c-compare">
            @if($adrChg['pct'] !== null)
                <span class="kpi-c-badge {{ $adrChg['dir'] }}">
                    {{ $adrChg['dir'] === 'up' ? '▲' : '▼' }} {{ abs($adrChg['pct']) }}%
                </span>
            @endif
            <span class="kpi-c-prev">anterior: R$ {{ number_format($adrPrev,2,',','.') }}</span>
        </div>
    </div>

    {{-- Ocupação --}}
    <div class="kpi-compare" style="--kpi-color:#3b82f6;">
        <div class="kpi-c-label"><i data-lucide="bed-double" style="width:11px;height:11px;color:#3b82f6;"></i>Ocupação Média</div>
        <div class="kpi-c-value">{{ $avgOcc }}%</div>
        <div class="kpi-c-compare">
            @if($occChg['pct'] !== null)
                <span class="kpi-c-badge {{ $occChg['dir'] }}">
                    {{ $occChg['dir'] === 'up' ? '▲' : '▼' }} {{ abs($occChg['pct']) }}%
                </span>
            @endif
            <span class="kpi-c-prev">anterior: {{ $avgOccPrev }}%</span>
        </div>
    </div>

    {{-- Ticket Médio --}}
    <div class="kpi-compare" style="--kpi-color:#ec4899;">
        <div class="kpi-c-label"><i data-lucide="receipt" style="width:11px;height:11px;color:#ec4899;"></i>Ticket Médio</div>
        <div class="kpi-c-value">R$ {{ number_format($ticketMedio,2,',','.') }}</div>
        <div class="kpi-c-compare">
            @if($ticketChg['pct'] !== null)
                <span class="kpi-c-badge {{ $ticketChg['dir'] }}">
                    {{ $ticketChg['dir'] === 'up' ? '▲' : '▼' }} {{ abs($ticketChg['pct']) }}%
                </span>
            @endif
            <span class="kpi-c-prev">anterior: R$ {{ number_format($ticketMedioPrev,2,',','.') }}</span>
        </div>
    </div>

    {{-- Noites Vendidas --}}
    <div class="kpi-compare" style="--kpi-color:#14b8a6;">
        <div class="kpi-c-label"><i data-lucide="moon" style="width:11px;height:11px;color:#14b8a6;"></i>Noites Vendidas</div>
        <div class="kpi-c-value">{{ $nightsSold }}</div>
        <div class="kpi-c-compare">
            @if($nightsChg['pct'] !== null)
                <span class="kpi-c-badge {{ $nightsChg['dir'] }}">
                    {{ $nightsChg['dir'] === 'up' ? '▲' : '▼' }} {{ abs($nightsChg['pct']) }}%
                </span>
            @endif
            <span class="kpi-c-prev">anterior: {{ $nightsSoldPrev }}</span>
        </div>
    </div>

    {{-- Taxa de Cancelamento --}}
    <div class="kpi-compare" style="--kpi-color:#ef4444;">
        <div class="kpi-c-label"><i data-lucide="x-circle" style="width:11px;height:11px;color:#ef4444;"></i>Taxa de Cancelamento</div>
        <div class="kpi-c-value" style="color:{{ $cancellationRate > 15 ? '#dc2626' : ($cancellationRate > 8 ? '#d97706' : '#111827') }};">{{ $cancellationRate }}%</div>
        <div class="kpi-c-compare">
            <span class="kpi-c-prev">das reservas criadas no período</span>
        </div>
    </div>

    {{-- RevPAR --}}
    <div class="kpi-compare" style="--kpi-color:#8b5cf6;">
        <div class="kpi-c-label"><i data-lucide="trending-up" style="width:11px;height:11px;color:#8b5cf6;"></i>RevPAR</div>
        <div class="kpi-c-value">R$ {{ number_format($revpar,2,',','.') }}</div>
        <div class="kpi-c-compare">
            <span class="kpi-c-prev">receita/UH disponível/dia</span>
        </div>
    </div>

</div>

{{-- ═══ GRÁFICO PRINCIPAL: Receita 12 meses + ADR ══════════════════════════ --}}
<div class="sec-title">
    <i data-lucide="line-chart" style="width:13px;height:13px;"></i>
    Evolução dos Indicadores
</div>

<div class="charts-main">
    <div class="panel">
        <div class="panel-header">
            <span style="display:flex;align-items:center;gap:7px;">
                <i data-lucide="trending-up" style="width:14px;height:14px;color:#6366f1;"></i>
                Receita Mensal — Últimos 12 Meses
            </span>
            <span class="ph-sub">Barras com gradiente indicam tendência</span>
        </div>
        <div id="chart-monthly-revenue" style="height:260px;padding:4px;"></div>
    </div>
    <div class="panel">
        <div class="panel-header">
            <span style="display:flex;align-items:center;gap:7px;">
                <i data-lucide="tag" style="width:14px;height:14px;color:#f59e0b;"></i>
                ADR por Mês
            </span>
            <span class="ph-sub">Diária Média Realizada</span>
        </div>
        <div id="chart-adr" style="height:260px;padding:4px;"></div>
    </div>
</div>

{{-- ═══ OCUPAÇÃO DIÁRIA ════════════════════════════════════════════════════ --}}
<div class="panel">
    <div class="panel-header">
        <span style="display:flex;align-items:center;gap:7px;">
            <i data-lucide="calendar" style="width:14px;height:14px;color:#22c55e;"></i>
            Ocupação Diária — {{ $periodLabel }}
        </span>
        <span class="ph-sub">Heatmap de intensidade por cor</span>
    </div>
    <div id="chart-daily-occ" style="height:200px;padding:4px;"></div>
</div>

{{-- ═══ ROSCAS: Pagamento + Canal ════════════════════════════════════════ --}}
<div class="charts-rosca">
    <div class="panel">
        <div class="panel-header">
            <span style="display:flex;align-items:center;gap:7px;">
                <i data-lucide="credit-card" style="width:14px;height:14px;color:#3b82f6;"></i>
                Receita por Forma de Pagamento
            </span>
        </div>
        <div id="chart-payment" style="height:230px;"></div>
    </div>
    <div class="panel">
        <div class="panel-header">
            <span style="display:flex;align-items:center;gap:7px;">
                <i data-lucide="share-2" style="width:14px;height:14px;color:#ec4899;"></i>
                Receita por Canal de Venda
            </span>
        </div>
        <div id="chart-channel" style="height:230px;"></div>
    </div>
</div>

{{-- ═══ RANKINGS ═══════════════════════════════════════════════════════════ --}}
<div class="sec-title" style="margin-top:4px;">
    <i data-lucide="award" style="width:13px;height:13px;"></i>
    Rankings do Período
</div>

<div class="rankings-row">

    {{-- Ranking de Quartos --}}
    <div class="panel">
        <div class="panel-header">
            <span style="display:flex;align-items:center;gap:7px;">
                <i data-lucide="bed-double" style="width:14px;height:14px;color:#6366f1;"></i>
                Top Quartos por Faturamento
            </span>
        </div>
        @php $maxRoom = $topRooms->max('total') ?: 1; @endphp
        @forelse($topRooms as $i => $room)
        <div class="rank-item">
            <div class="rank-num" style="background:{{ ['#6366f1','#8b5cf6','#a78bfa','#c4b5fd','#ddd6fe','#ede9fe','#f5f3ff','#faf5ff'][$i] }};color:{{ $i < 3 ? '#fff' : '#7c3aed' }};">{{ $i+1 }}</div>
            <div class="rank-bar-wrap">
                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
                    <span style="font-weight:600;font-size:.8rem;">{{ $room->room ?? '—' }}</span>
                    <div style="text-align:right;">
                        <span style="font-weight:700;font-size:.8rem;color:#6366f1;">R$ {{ number_format((float)$room->total,2,',','.') }}</span>
                        <span style="font-size:.68rem;color:#9ca3af;margin-left:5px;">{{ $room->stays }} reserva{{ $room->stays != 1 ? 's' : '' }}</span>
                    </div>
                </div>
                <div class="rank-bar-bg">
                    <div class="rank-bar-fill" style="width:{{ round($room->total / $maxRoom * 100) }}%;background:linear-gradient(90deg,#6366f1,#8b5cf6);"></div>
                </div>
            </div>
        </div>
        @empty
        <div style="text-align:center;padding:28px;color:#9ca3af;font-size:.82rem;">Nenhum dado no período.</div>
        @endforelse
    </div>

    {{-- Ranking de Hóspedes --}}
    <div class="panel">
        <div class="panel-header">
            <span style="display:flex;align-items:center;gap:7px;">
                <i data-lucide="users" style="width:14px;height:14px;color:#22c55e;"></i>
                Top Hóspedes por Receita
            </span>
        </div>
        @forelse($topGuests as $i => $guest)
        <div class="rank-item">
            <div class="rank-num" style="background:{{ ['#22c55e','#16a34a','#15803d','#166534','#14532d','#052e16','#052e16','#052e16','#052e16','#052e16'][$i] }};color:#fff;">{{ $i+1 }}</div>
            <div class="rank-bar-wrap">
                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
                    <div>
                        <span style="font-weight:600;font-size:.8rem;">{{ trim($guest->guest_name) ?: 'Hóspede #'.$guest->guest_id }}</span>
                        @if($guest->vip_level && $guest->vip_level !== 'none')
                            <span class="vip-badge vip-{{ $guest->vip_level }}">{{ strtoupper($guest->vip_level) }}</span>
                        @endif
                    </div>
                    <div style="text-align:right;">
                        <span style="font-weight:700;font-size:.8rem;color:#16a34a;">R$ {{ number_format((float)$guest->total,2,',','.') }}</span>
                        <span style="font-size:.68rem;color:#9ca3af;margin-left:5px;">{{ $guest->stays }}x</span>
                    </div>
                </div>
                <div class="rank-bar-bg">
                    <div class="rank-bar-fill" style="width:{{ round($guest->total / $maxGuestTotal * 100) }}%;background:linear-gradient(90deg,#22c55e,#16a34a);"></div>
                </div>
            </div>
        </div>
        @empty
        <div style="text-align:center;padding:28px;color:#9ca3af;font-size:.82rem;">Nenhum dado no período.</div>
        @endforelse
    </div>

</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    const COLORS = ['#6366f1','#22c55e','#f59e0b','#3b82f6','#ec4899','#14b8a6','#8b5cf6','#ef4444','#f97316','#06b6d4'];

    // ─── Dados injetados ──────────────────────────────────────────────────────
    const monthlyLabels  = @json($monthlyRevenue['labels']);
    const monthlyValues  = @json($monthlyRevenue['values']);
    const adrLabels      = @json($monthlyAdr['labels']);
    const adrValues      = @json($monthlyAdr['values']);
    const occLabels      = @json($dailyOccupancy['labels']);
    const occValues      = @json($dailyOccupancy['values']);
    const paymentData    = @json($byPaymentMethod);
    const channelData    = @json($byChannel);

    // ── Formatador BRL ────────────────────────────────────────────────────────
    const brl = v => 'R$ ' + Number(v).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

    // ─── 1. Receita Mensal 12 meses ──────────────────────────────────────────
    const chartRevMonthly = echarts.init(document.getElementById('chart-monthly-revenue'));
    chartRevMonthly.setOption({
        grid: { top: 30, right: 20, bottom: 36, left: 70 },
        tooltip: {
            trigger: 'axis',
            formatter: p => `<b>${p[0].name}</b><br>${brl(p[0].value)}`
        },
        xAxis: {
            type: 'category', data: monthlyLabels,
            axisLine: { lineStyle: { color: '#e5e7eb' } },
            axisLabel: { color: '#9ca3af', fontSize: 10, rotate: monthlyLabels.length > 8 ? 30 : 0 },
            splitLine: { show: false }
        },
        yAxis: {
            type: 'value',
            axisLabel: { color: '#9ca3af', fontSize: 10, formatter: v => v >= 1000 ? 'R$' + (v / 1000).toFixed(0) + 'k' : 'R$' + v },
            splitLine: { lineStyle: { color: '#f1f5f9' } }
        },
        series: [{
            type: 'bar', data: monthlyValues, barMaxWidth: 36,
            itemStyle: {
                borderRadius: [6, 6, 0, 0],
                color: params => {
                    const max = Math.max(...monthlyValues, 1);
                    const ratio = params.value / max;
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: `rgba(99,102,241,${0.5 + ratio * 0.5})` },
                        { offset: 1, color: `rgba(139,92,246,0.4)` }
                    ]);
                }
            },
            emphasis: { itemStyle: { opacity: 0.85 } },
            label: {
                show: monthlyValues.length <= 12,
                position: 'top', fontSize: 9, color: '#6b7280',
                formatter: p => p.value > 0 ? (p.value >= 1000 ? (p.value / 1000).toFixed(0) + 'k' : p.value) : ''
            }
        }]
    });

    // ─── 2. ADR por mês ──────────────────────────────────────────────────────
    const chartAdr = echarts.init(document.getElementById('chart-adr'));
    chartAdr.setOption({
        grid: { top: 30, right: 20, bottom: 36, left: 65 },
        tooltip: {
            trigger: 'axis',
            formatter: p => `<b>${p[0].name}</b><br>ADR: ${brl(p[0].value)}`
        },
        xAxis: {
            type: 'category', data: adrLabels, boundaryGap: false,
            axisLine: { lineStyle: { color: '#e5e7eb' } },
            axisLabel: { color: '#9ca3af', fontSize: 10, rotate: adrLabels.length > 8 ? 30 : 0 },
            splitLine: { show: false }
        },
        yAxis: {
            type: 'value',
            axisLabel: { color: '#9ca3af', fontSize: 10, formatter: v => 'R$' + v },
            splitLine: { lineStyle: { color: '#f1f5f9' } }
        },
        series: [{
            type: 'line', data: adrValues, smooth: true, symbol: 'circle', symbolSize: 6,
            lineStyle: { width: 2.5, color: '#f59e0b' },
            itemStyle: { color: '#f59e0b', borderColor: '#fff', borderWidth: 2 },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(245,158,11,.25)' },
                    { offset: 1, color: 'rgba(245,158,11,.02)' }
                ])
            }
        }]
    });

    // ─── 3. Ocupação Diária ───────────────────────────────────────────────────
    const chartOcc = echarts.init(document.getElementById('chart-daily-occ'));
    chartOcc.setOption({
        grid: { top: 14, right: 20, bottom: 28, left: 46 },
        tooltip: {
            trigger: 'axis',
            formatter: p => `<b>${p[0].name}</b><br>Ocupação: <b>${p[0].value}%</b>`
        },
        xAxis: {
            type: 'category', data: occLabels,
            axisLine: { lineStyle: { color: '#e5e7eb' } },
            axisLabel: {
                color: '#9ca3af', fontSize: 9,
                interval: occLabels.length > 20 ? Math.floor(occLabels.length / 10) : 0
            },
            splitLine: { show: false }
        },
        yAxis: {
            type: 'value', max: 100, min: 0,
            axisLabel: { color: '#9ca3af', fontSize: 9, formatter: '{value}%' },
            splitLine: { lineStyle: { color: '#f1f5f9' } }
        },
        series: [{
            type: 'bar', data: occValues, barMaxWidth: 20,
            itemStyle: {
                borderRadius: [4, 4, 0, 0],
                color: params => {
                    const v = params.value;
                    if (v >= 90) return '#dc2626';
                    if (v >= 70) return '#f59e0b';
                    if (v >= 40) return '#22c55e';
                    return '#93c5fd';
                }
            }
        }],
        markLine: {
            silent: true,
            data: [{ yAxis: 70, lineStyle: { type: 'dashed', color: '#f59e0b', width: 1 }, label: { formatter: '70%', fontSize: 9 } }]
        }
    });

    // ─── 4. Rosca — Forma de Pagamento ────────────────────────────────────────
    const chartPayment = echarts.init(document.getElementById('chart-payment'));
    chartPayment.setOption({
        tooltip: {
            trigger: 'item',
            formatter: p => `<b>${p.name}</b><br>${brl(p.value)}<br>${p.percent}%`
        },
        legend: {
            orient: 'vertical', left: 'left', top: 'middle',
            textStyle: { color: '#6b7280', fontSize: 11 },
            icon: 'circle', itemWidth: 10, itemHeight: 10,
        },
        color: COLORS,
        series: [{
            type: 'pie', radius: ['42%', '68%'], center: ['62%', '50%'],
            data: paymentData.length > 0 ? paymentData : [{ name: 'Sem dados', value: 1 }],
            label: { show: false },
            emphasis: { itemStyle: { shadowBlur: 12, shadowColor: 'rgba(0,0,0,.15)' } }
        }]
    });

    // ─── 5. Rosca — Canal de Venda ────────────────────────────────────────────
    const chartChannel = echarts.init(document.getElementById('chart-channel'));
    chartChannel.setOption({
        tooltip: {
            trigger: 'item',
            formatter: p => `<b>${p.name}</b><br>${brl(p.value)}<br>${p.percent}%`
        },
        legend: {
            orient: 'vertical', left: 'left', top: 'middle',
            textStyle: { color: '#6b7280', fontSize: 11 },
            icon: 'circle', itemWidth: 10, itemHeight: 10,
        },
        color: ['#ec4899','#8b5cf6','#f97316','#06b6d4','#22c55e','#f59e0b','#6366f1','#ef4444'],
        series: [{
            type: 'pie', radius: ['42%', '68%'], center: ['62%', '50%'],
            data: channelData.length > 0 ? channelData : [{ name: 'Sem dados', value: 1 }],
            label: { show: false },
            emphasis: { itemStyle: { shadowBlur: 12, shadowColor: 'rgba(0,0,0,.15)' } }
        }]
    });

    // ── Resize todos juntos ────────────────────────────────────────────────────
    window.addEventListener('resize', () => {
        chartRevMonthly.resize();
        chartAdr.resize();
        chartOcc.resize();
        chartPayment.resize();
        chartChannel.resize();
    });

});
</script>
@endpush