@extends('layouts.admin')
@section('title', 'Dashboard')
@push('styles')
<style>
/* ── KPI Cards ──────────────────────────────────────────── */
.kpi-grid   { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-bottom:24px; }
.kpi-card   {
    background:#fff; border:1px solid #e5e7eb; border-radius:14px;
    padding:20px 18px; position:relative; overflow:hidden;
    transition: box-shadow .2s, transform .2s;
}
.kpi-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px); }
.kpi-icon   { position:absolute; top:12px; right:14px; opacity:.07; }
.kpi-label  { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#9ca3af; margin-bottom:5px; }
.kpi-value  { font-size:1.55rem; font-weight:800; color:#111827; line-height:1.1; }
.kpi-sub    { font-size:.7rem; color:#6b7280; margin-top:5px; }
.kpi-bar    { margin-top:9px; height:4px; background:#f1f5f9; border-radius:999px; overflow:hidden; }
.kpi-bar-fill { height:4px; border-radius:999px; transition:width .8s ease; }

/* ── Shortcut Grid ───────────────────────────────────────── */
.shortcut-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:10px; margin-bottom:24px; }

.shortcut-card {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:16px 10px; background:#fff; border:1.5px solid #e5e7eb; border-radius:12px;
    text-decoration:none; color:#374151; font-size:.73rem; font-weight:700; text-align:center;
    transition:all .18s;
}
.shortcut-card:hover { border-color:var(--color-primary); background:#f5f3ff; color:var(--color-primary); transform:translateY(-1px); }

/* ── Charts Row ─────────────────────────────────────────── */
.charts-row { display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-bottom:20px; }

/* ── Forecast Row ───────────────────────────────────────── */
.forecast-row { margin-bottom:20px; }

/* ── Ops Row ────────────────────────────────────────────── */
.ops-row  { display:grid; grid-template-columns:1fr 360px; gap:20px; }

/* ── Card base ──────────────────────────────────────────── */
.panel {
    background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden;
}
.panel-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:13px 20px; border-bottom:1px solid #f1f5f9;
    font-weight:700; font-size:.84rem; background:#fafafa;
}
.panel-header a { font-size:.72rem; color:var(--color-primary); font-weight:600; text-decoration:none; }

/* ── Alert bar ──────────────────────────────────────────── */
.alert-bar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.alert-chip {
    display:flex; align-items:center; gap:8px;
    padding:10px 16px; border-radius:10px; font-size:.8rem; font-weight:600;
    cursor:pointer; text-decoration:none;
}
.alert-chip.danger  { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.alert-chip.warning { background:#fffbeb; color:#d97706; border:1px solid #fde68a; }
.alert-chip.info    { background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe; }
.alert-chip:hover { filter:brightness(.95); }

/* ── Ops rows ───────────────────────────────────────────── */
.arrival-row { display:flex; align-items:center; justify-content:space-between; padding:11px 20px; border-bottom:1px solid #f8fafc; font-size:.83rem; }
.arrival-row:last-child { border-bottom:none; }
.arrival-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.74rem; flex-shrink:0; }

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:1400px) { .kpi-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:1200px) { .shortcut-grid { grid-template-columns:repeat(4,1fr); } }
@media(max-width:1000px) { .charts-row { grid-template-columns:1fr; } }
@media(max-width:800px)  { .kpi-grid { grid-template-columns:1fr 1fr; } .shortcut-grid { grid-template-columns:repeat(3,1fr); } .ops-row { grid-template-columns:1fr; } }
@media(max-width:500px)  { .kpi-grid { grid-template-columns:1fr; } .shortcut-grid { grid-template-columns:1fr 1fr; } }
</style>
@endpush

@section('content')

{{-- ═══ PAGE HEADER ════════════════════════════════════════ --}}
<div class="page-header">
    <div>
        <h1 class="page-title">Painel de Operações</h1>
        <p class="page-subtitle">{{ $hotelName }} — {{ now()->locale('pt_BR')->isoFormat('dddd, D [de] MMMM [de] YYYY') }}</p>
    </div>
    <div class="flex gap-sm">
        <a href="{{ route('admin.financial.cashbox') }}" class="btn btn-secondary btn-sm">
            <i data-lucide="wallet" style="width:14px;height:14px;"></i>
            @if($openCashbox) Caixa Aberto ✓ @else Abrir Caixa @endif
        </a>
    </div>
</div>

{{-- ═══ ALERTAS OPERACIONAIS ════════════════════════════════ --}}
@if($alerts->count() > 0)
<div class="alert-bar">
    @foreach($alerts as $alert)
    <a href="{{ $alert['link'] }}" class="alert-chip {{ $alert['type'] }}">
        <i data-lucide="{{ $alert['icon'] }}" style="width:15px;height:15px;flex-shrink:0;"></i>
        {{ $alert['message'] }}
    </a>
    @endforeach
</div>
@endif

{{-- ═══ KPIs ════════════════════════════════════════════════ --}}
<div class="kpi-grid">

    {{-- Receita Hoje --}}
    <div class="kpi-card" style="border-top:3px solid #6366f1;">
        <div class="kpi-icon"><i data-lucide="trending-up" style="width:42px;height:42px;color:#6366f1;"></i></div>
        <div class="kpi-label">Receita Hoje</div>
        <div class="kpi-value">R$ {{ number_format($revenueToday,2,',','.') }}</div>
        <div class="kpi-sub">Mês: R$ {{ number_format($revenueMonth,2,',','.') }}</div>
    </div>

    {{-- Ocupação --}}
    <div class="kpi-card" style="border-top:3px solid #22c55e;">
        <div class="kpi-icon"><i data-lucide="bed-double" style="width:42px;height:42px;color:#22c55e;"></i></div>
        <div class="kpi-label">Ocupação</div>
        <div class="kpi-value">{{ $occupancyRate }}%</div>
        <div class="kpi-sub">{{ $inHouse }} de {{ $totalRooms }} UHs</div>
        <div class="kpi-bar"><div class="kpi-bar-fill" style="width:{{ $occupancyRate }}%;background:linear-gradient(90deg,#22c55e,#16a34a);"></div></div>
    </div>

    {{-- Movimentos Hoje --}}
    <div class="kpi-card" style="border-top:3px solid #f59e0b;">
        <div class="kpi-icon"><i data-lucide="calendar-check" style="width:42px;height:42px;color:#f59e0b;"></i></div>
        <div class="kpi-label">Movimentos Hoje</div>
        <div style="display:flex;gap:18px;align-items:center;margin-top:2px;">
            <div>
                <div class="kpi-value" style="color:#16a34a;font-size:1.4rem;">{{ $arrivalsToday }}</div>
                <div class="kpi-sub">Chegadas</div>
            </div>
            <div style="width:1px;height:34px;background:#e5e7eb;"></div>
            <div>
                <div class="kpi-value" style="color:#dc2626;font-size:1.4rem;">{{ $departuresToday }}</div>
                <div class="kpi-sub">Saídas</div>
            </div>
        </div>
    </div>

    {{-- Saldo Pendente --}}
    <div class="kpi-card" style="border-top:3px solid #ef4444;">
        <div class="kpi-icon"><i data-lucide="alert-circle" style="width:42px;height:42px;color:#ef4444;"></i></div>
        <div class="kpi-label">Saldo Pendente</div>
        <div class="kpi-value" style="color:{{ $pendingBalance > 0 ? '#dc2626' : '#16a34a' }};">
            R$ {{ number_format(max(0,$pendingBalance),2,',','.') }}
        </div>
        <div class="kpi-sub">in-house sem quitação</div>
    </div>

    {{-- RevPAR --}}
    <div class="kpi-card" style="border-top:3px solid #8b5cf6;">
        <div class="kpi-icon"><i data-lucide="bar-chart-2" style="width:42px;height:42px;color:#8b5cf6;"></i></div>
        <div class="kpi-label">RevPAR</div>
        <div class="kpi-value">R$ {{ number_format($revPAR,2,',','.') }}</div>
        <div class="kpi-sub">receita/UH disponível/dia</div>
    </div>

    {{-- NPS Score do Mês --}}
    <div class="kpi-card" style="border-top:3px solid #ec4899;">
        <div class="kpi-icon"><i data-lucide="star" style="width:42px;height:42px;color:#ec4899;"></i></div>
        <div class="kpi-label">NPS do Mês</div>
        @if($npsScore !== null)
        <div class="kpi-value" style="color:{{ $npsScore >= 50 ? '#16a34a' : ($npsScore >= 25 ? '#d97706' : '#dc2626') }};">
            {{ $npsScore >= 0 ? '+' : '' }}{{ $npsScore }}
        </div>
        <div class="kpi-sub">{{ $npsCount }} avaliações</div>
        @else
        <div class="kpi-value" style="color:#9ca3af;">—</div>
        <div class="kpi-sub">sem dados este mês</div>
        @endif
        <div class="kpi-bar"><div class="kpi-bar-fill" style="width:{{ $npsScore !== null ? min(100, max(0, $npsScore + 100)/2) : 0 }}%;background:linear-gradient(90deg,#ec4899,#db2777);"></div></div>
    </div>

</div>

{{-- ═══ ATALHOS ══════════════════════════════════════════════ --}}
<div class="shortcut-grid">
    @php
    $shortcuts = [
        ['href' => route('admin.map.index'),                                    'icon' => 'plus-circle',     'label' => 'Nova Reserva', 'color' => '#6366f1'],
        ['href' => route('admin.map.index'),                                    'icon' => 'map',             'label' => 'Mapa',          'color' => '#06b6d4'],
        ['href' => route('admin.reservations.index', ['status'=>'confirmed']),  'icon' => 'log-in',          'label' => 'Check-in',     'color' => '#22c55e'],
        ['href' => route('admin.reservations.index', ['status'=>'checked_in']), 'icon' => 'log-out',         'label' => 'Check-out',    'color' => '#f59e0b'],
        ['href' => route('admin.financial.cashbox'),                            'icon' => 'wallet',          'label' => 'Meu Caixa',    'color' => '#10b981'],
        ['href' => route('admin.day-use.index'),                                'icon' => 'coffee',          'label' => 'Day Use',       'color' => '#d97706'],
        ['href' => route('admin.events.index'),                                 'icon' => 'calendar-days',   'label' => 'Eventos',       'color' => '#8b5cf6'],
        ['href' => route('admin.nps.index'),                                    'icon' => 'star',            'label' => 'NPS',           'color' => '#f59e0b'],
    ];
    @endphp
    @foreach($shortcuts as $s)
    <a href="{{ $s['href'] }}" class="shortcut-card">
        <i data-lucide="{{ $s['icon'] }}" style="width:22px;height:22px;color:{{ $s['color'] }};"></i>
        {{ $s['label'] }}
    </a>
    @endforeach
</div>

{{-- ═══ GRÁFICOS ECHARTS ═════════════════════════════════════ --}}
<div class="charts-row">

    {{-- Gráfico de Área — Receita 30 dias --}}
    <div class="panel">
        <div class="panel-header">
            <span style="display:flex;align-items:center;gap:8px;">
                <i data-lucide="trending-up" style="width:15px;height:15px;color:#6366f1;"></i>
                Receita — Últimos 30 Dias
            </span>
            <a href="{{ route('admin.reports.revenue') }}">Ver relatório completo →</a>
        </div>
        <div id="chart-revenue" style="height:240px;padding:4px;"></div>
    </div>

    {{-- Gráfico de Rosca — Por Canal --}}
    <div class="panel">
        <div class="panel-header">
            <span style="display:flex;align-items:center;gap:8px;">
                <i data-lucide="pie-chart" style="width:15px;height:15px;color:#f59e0b;"></i>
                Receita por Canal
            </span>
        </div>
        <div id="chart-channel" style="height:240px;"></div>
    </div>

</div>

{{-- ═══ PROJEÇÃO DE OCUPAÇÃO ═══════════════════════════════════ --}}
<div class="forecast-row">
    <div class="panel">
        <div class="panel-header">
            <span style="display:flex;align-items:center;gap:8px;">
                <i data-lucide="calendar" style="width:15px;height:15px;color:#22c55e;"></i>
                Projeção de Ocupação — Próximos 30 Dias
            </span>
        </div>
        <div id="chart-forecast" style="height:160px;padding:4px;"></div>
    </div>
</div>

{{-- ═══ OPERACIONAL ══════════════════════════════════════════ --}}
<div class="ops-row">

    {{-- Próximas chegadas --}}
    <div>
        <div class="panel" style="margin-bottom:16px;">
            <div class="panel-header">
                <span style="display:flex;align-items:center;gap:8px;">
                    <i data-lucide="calendar" style="width:15px;height:15px;color:var(--color-primary);"></i>
                    Próximas Chegadas
                </span>
                <a href="{{ route('admin.reservations.index', ['status'=>'confirmed']) }}">Ver todas →</a>
            </div>
            @forelse($upcomingArrivals as $res)
            <div class="arrival-row">
                <div style="display:flex;align-items:center;gap:12px;">
                    <div class="arrival-avatar" style="background:linear-gradient(135deg,#6366f1,#8b5cf6);">
                        {{ strtoupper(substr($res->guest?->first_name ?? 'G', 0, 1)) }}
                    </div>
                    <div>
                        <div style="font-weight:600;">{{ $res->guest?->full_name }}</div>
                        <div style="font-size:.71rem;color:#6b7280;">
                            {{ $res->room?->name ?? 'Sem UH' }} · {{ $res->nights }} diária(s)
                            @if($res->guest?->vip_level && $res->guest->vip_level !== 'none')
                                <span style="background:#fef3c7;color:#d97706;padding:0 5px;border-radius:4px;font-size:.65rem;font-weight:700;text-transform:uppercase;">
                                    {{ strtoupper($res->guest->vip_level) }}
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
                <div style="text-align:right;">
                    <div style="font-weight:700;color:var(--color-primary);">{{ $res->check_in_expected->format('d/m') }}</div>
                    <div style="font-size:.7rem;color:#9ca3af;">{{ $res->locator }}</div>
                </div>
            </div>
            @empty
            <div style="text-align:center;padding:32px;color:#9ca3af;font-size:.83rem;">Nenhuma chegada programada.</div>
            @endforelse
        </div>

        {{-- Próximos Eventos --}}
        @if($upcomingEvents->count() > 0)
        <div class="panel" style="margin-bottom:16px;">
            <div class="panel-header">
                <span style="display:flex;align-items:center;gap:8px;">
                    <i data-lucide="calendar-days" style="width:15px;height:15px;color:#8b5cf6;"></i>
                    Próximos Eventos
                </span>
                <a href="{{ route('admin.events.index') }}">Ver todos →</a>
            </div>
            @foreach($upcomingEvents as $evt)
            <div class="arrival-row">
                <div style="display:flex;align-items:center;gap:12px;">
                    <div class="arrival-avatar" style="background:linear-gradient(135deg,#8b5cf6,#a78bfa);">
                        <i data-lucide="calendar-days" style="width:16px;height:16px;"></i>
                    </div>
                    <div>
                        <div style="font-weight:600;font-size:.83rem;">{{ $evt->name }}</div>
                        <div style="font-size:.71rem;color:#6b7280;">
                            {{ $evt->space?->name ?? 'Sem Salão' }}
                            @if($evt->status === 'confirmed')
                            <span style="background:#dcfce7;color:#15803d;padding:0 5px;border-radius:4px;font-size:.65rem;font-weight:700;">CONFIRMADO</span>
                            @else
                            <span style="background:#fef3c7;color:#b45309;padding:0 5px;border-radius:4px;font-size:.65rem;font-weight:700;">PENDENTE</span>
                            @endif
                        </div>
                    </div>
                </div>
                <div style="text-align:right;">
                    <div style="font-weight:700;color:#8b5cf6;">{{ $evt->event_date->format('d/m') }}</div>
                    <div style="font-size:.7rem;color:#9ca3af;">{{ $evt->start_time ?? '' }}</div>
                </div>
            </div>
            @endforeach
        </div>
        @endif

        {{-- Relatórios rápidos --}}
        <div class="panel">
            <div class="panel-header">
                <span style="display:flex;align-items:center;gap:8px;">
                    <i data-lucide="bar-chart-2" style="width:15px;height:15px;color:var(--color-primary);"></i>
                    Relatórios
                </span>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px;">
                <a href="{{ route('admin.reports.revenue') }}"  style="display:flex;align-items:center;gap:8px;padding:11px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;text-decoration:none;color:#374151;font-size:.8rem;font-weight:600;">
                    <i data-lucide="trending-up" style="width:15px;height:15px;color:#6366f1;"></i> Receitas
                </a>
                <a href="{{ route('admin.reports.occupancy') }}" style="display:flex;align-items:center;gap:8px;padding:11px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;text-decoration:none;color:#374151;font-size:.8rem;font-weight:600;">
                    <i data-lucide="bed-double" style="width:15px;height:15px;color:#22c55e;"></i> Ocupação
                </a>
                <a href="{{ route('admin.financial.transactions') }}" style="display:flex;align-items:center;gap:8px;padding:11px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;text-decoration:none;color:#374151;font-size:.8rem;font-weight:600;">
                    <i data-lucide="receipt" style="width:15px;height:15px;color:#f59e0b;"></i> Transações
                </a>
                <a href="{{ route('admin.nps.index') }}" style="display:flex;align-items:center;gap:8px;padding:11px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;text-decoration:none;color:#374151;font-size:.8rem;font-weight:600;">
                    <i data-lucide="star" style="width:15px;height:15px;color:#ec4899;"></i> NPS
                </a>
            </div>
        </div>
    </div>

    {{-- Sidebar: pagamentos + status --}}
    <div>
        <div class="panel" style="margin-bottom:16px;">
            <div class="panel-header">
                <span style="display:flex;align-items:center;gap:8px;">
                    <i data-lucide="credit-card" style="width:15px;height:15px;color:#22c55e;"></i>
                    Últimos Pagamentos
                </span>
                <a href="{{ route('admin.financial.transactions') }}">Ver todos →</a>
            </div>
            @forelse($recentPayments as $p)
            <div style="display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid #f8fafc;font-size:.8rem;">
                <div>
                    <div style="font-weight:600;">{{ $p->reservation?->locator }} · {{ $p->reservation?->guest?->full_name }}</div>
                    <div style="font-size:.7rem;color:#6b7280;">{{ $p->method?->name }} · {{ $p->paid_at->diffForHumans() }}</div>
                </div>
                <span style="font-weight:700;color:#16a34a;">R$ {{ number_format((float)$p->amount,2,',','.') }}</span>
            </div>
            @empty
            <div style="text-align:center;padding:24px;color:#9ca3af;font-size:.83rem;">Nenhum pagamento hoje.</div>
            @endforelse
        </div>

        {{-- Status do Sistema --}}
        <div class="panel" style="padding:18px 20px;">
            <div style="font-weight:700;font-size:.84rem;margin-bottom:13px;display:flex;align-items:center;gap:8px;">
                <i data-lucide="info" style="width:15px;height:15px;color:var(--color-primary);"></i>
                Status do Sistema
            </div>
            @php
            $items = [
                ['label' => 'Hotel',      'value' => $hotelName],
                ['label' => 'Perfil',     'value' => $userRole],
                ['label' => 'Data/Hora',  'value' => now()->format('d/m/Y H:i')],
                ['label' => 'Fase Atual', 'value' => 'Fase 29 — Superadmin SaaS'],
                ['label' => 'Caixa',      'value' => $openCashbox ? '✓ Aberto' : '× Fechado'],
            ];
            @endphp
            @foreach($items as $it)
            <div style="display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid #f8fafc;font-size:.8rem;">
                <span style="color:#6b7280;">{{ $it['label'] }}</span>
                <span style="font-weight:600;color:{{ $it['label'] === 'Caixa' && $openCashbox ? '#16a34a' : '#111827' }};">{{ $it['value'] }}</span>
            </div>
            @endforeach
        </div>
    </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() {

    // ── Paleta de cores ────────────────────────────────────────
    const PRIMARY  = '#6366f1';
    const COLORS   = ['#6366f1','#22c55e','#f59e0b','#3b82f6','#ec4899','#14b8a6','#8b5cf6','#ef4444'];

    // ── Dados PHP injetados ────────────────────────────────────
    const revDates  = @json($revenueChartDates);
    const revValues = @json($revenueChartValues);
    const channelData = @json($revenueByChannel);
    const forecastDates  = @json($occupancyForecastDates);
    const forecastValues = @json($occupancyForecastValues);

    // ─────────────────────────────────────────────────────────
    // 1. Gráfico de Área — Receita 30 dias
    // ─────────────────────────────────────────────────────────
    const chartRevenue = echarts.init(document.getElementById('chart-revenue'));
    chartRevenue.setOption({
        grid: { top:30, right:20, bottom:30, left:58 },
        tooltip: {
            trigger:'axis',
            formatter: params => {
                const p = params[0];
                return `<b>${p.name}</b><br>R$ ${Number(p.value).toLocaleString('pt-BR',{minimumFractionDigits:2})}`;
            }
        },
        xAxis: {
            type:'category', data:revDates, boundaryGap:false,
            axisLine:{ lineStyle:{color:'#e5e7eb'} },
            axisLabel:{ color:'#9ca3af', fontSize:10,
                interval: revDates.length > 15 ? Math.floor(revDates.length/7) : 0 },
            splitLine:{ show:false }
        },
        yAxis: {
            type:'value',
            axisLabel:{ color:'#9ca3af', fontSize:10, formatter: v => 'R$'+( v >= 1000 ? (v/1000).toFixed(0)+'k' : v ) },
            splitLine:{ lineStyle:{color:'#f1f5f9'} }
        },
        series:[{
            type:'line', data:revValues, smooth:true, symbol:'none',
            lineStyle:{ width:2.5, color: PRIMARY },
            areaStyle:{
                color: new echarts.graphic.LinearGradient(0,0,0,1,[
                    { offset:0, color:'rgba(99,102,241,.35)' },
                    { offset:1, color:'rgba(99,102,241,.02)' }
                ])
            }
        }]
    });

    // ─────────────────────────────────────────────────────────
    // 2. Gráfico de Rosca — Receita por Canal
    // ─────────────────────────────────────────────────────────
    const chartChannel = echarts.init(document.getElementById('chart-channel'));
    chartChannel.setOption({
        tooltip: {
            trigger:'item',
            formatter: p => `<b>${p.name}</b><br>R$ ${Number(p.value).toLocaleString('pt-BR',{minimumFractionDigits:2})}<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:['45%','70%'], center:['62%','50%'],
            data: channelData.length > 0 ? channelData : [{ name:'Sem dados', value:1 }],
            label:{ show:false },
            emphasis:{ itemStyle:{ shadowBlur:10, shadowOffsetX:0, shadowColor:'rgba(0,0,0,.1)' } }
        }]
    });

    // ─────────────────────────────────────────────────────────
    // 3. Gráfico de Barras — Projeção de Ocupação
    // ─────────────────────────────────────────────────────────
    const chartForecast = echarts.init(document.getElementById('chart-forecast'));
    chartForecast.setOption({
        grid:{ top:18, right:20, bottom:28, left:46 },
        tooltip:{
            trigger:'axis',
            formatter: params => `<b>${params[0].name}</b><br>Ocupação: ${params[0].value}%`
        },
        xAxis:{
            type:'category', data:forecastDates,
            axisLine:{ lineStyle:{color:'#e5e7eb'} },
            axisLabel:{ color:'#9ca3af', fontSize:9,
                interval: forecastDates.length > 15 ? Math.floor(forecastDates.length/7) : 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:forecastValues, barMaxWidth:14,
            itemStyle:{ borderRadius:[4,4,0,0],
                color: params => {
                    const v = params.value;
                    if(v >= 80) return '#ef4444';
                    if(v >= 60) return '#f59e0b';
                    return '#22c55e';
                }
            },
            emphasis:{ itemStyle:{ opacity:.8 } }
        }]
    });

    // ── Redimensionar gráficos quando a janela mudar ───────────
    window.addEventListener('resize', () => {
        chartRevenue.resize();
        chartChannel.resize();
        chartForecast.resize();
    });

});
</script>
@endpush