@extends('layouts.admin')
@section('title', 'Central de Relatórios')
@section('breadcrumb')
    <span class="breadcrumb-current">Relatórios</span>
@endsection
@push('styles')
<style>
/* ─── Layout ─── */
.rp-header   { margin-bottom:28px; }
.rp-header h2 { font-size:1.35rem; font-weight:800; color:#111827; margin-bottom:4px; }
.rp-header p  { font-size:.83rem; color:#6b7280; }

/* ─── KPI Row ─── */
.kpi-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
@media(max-width:860px){ .kpi-strip { grid-template-columns:1fr 1fr; } }
.kpi-box { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:20px 22px; position:relative; overflow:hidden; transition:.2s; }
.kpi-box:hover { box-shadow:0 4px 20px rgba(0,0,0,.08); transform:translateY(-2px); }
.kpi-box::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; }
.kpi-box.v1::before { background:linear-gradient(90deg,#6366f1,#8b5cf6); }
.kpi-box.v2::before { background:linear-gradient(90deg,#22c55e,#16a34a); }
.kpi-box.v3::before { background:linear-gradient(90deg,#f59e0b,#d97706); }
.kpi-box.v4::before { background:linear-gradient(90deg,#3b82f6,#0ea5e9); }
.kpi-box .lbl { font-size:.69rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#9ca3af; margin-bottom:8px; display:flex; align-items:center; gap:5px; }
.kpi-box .val { font-size:1.7rem; font-weight:800; color:#111827; line-height:1; margin-bottom:4px; }
.kpi-box .sub { font-size:.73rem; color:#6b7280; }
.kpi-box .ico { position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:2rem; opacity:.08; }

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

/* ─── Report Cards Grid ─── */
.rp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:28px; }
@media(max-width:900px){ .rp-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .rp-grid { grid-template-columns:1fr; } }

.rp-card {
    background:#fff; border:1px solid #e5e7eb; border-radius:16px;
    padding:22px; display:flex; flex-direction:column; gap:12px;
    transition:.2s; cursor:default; position:relative; overflow:hidden;
}
.rp-card:hover { box-shadow:0 6px 28px rgba(0,0,0,.09); transform:translateY(-3px); border-color:#d1d5db; }
.rp-card-icon {
    width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; flex-shrink:0;
}
.rp-card-title  { font-size:.92rem; font-weight:800; color:#111827; margin-bottom:2px; }
.rp-card-desc   { font-size:.77rem; color:#6b7280; line-height:1.45; flex:1; }
.rp-card-actions{ display:flex; gap:7px; flex-wrap:wrap; margin-top:4px; }
.btn-view {
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 12px; border-radius:8px; font-size:.76rem; font-weight:700;
    text-decoration:none; border:1.5px solid #e5e7eb; color:#374151; background:#f9fafb;
    transition:.15s;
}
.btn-view:hover { background:#f1f5f9; border-color:#d1d5db; }
.btn-pdf {
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 12px; border-radius:8px; font-size:.76rem; font-weight:700;
    text-decoration:none; color:#fff; transition:.15s;
}
.btn-pdf:hover { opacity:.88; transform:scale(1.02); }

/* ─── Accent strips per card ─── */
.rp-card::after {
    content:''; position:absolute; inset:0 0 auto 0; height:3px;
    background:var(--card-color, #6366f1); opacity:.85;
}

/* ─── Quick links ─── */
.quick-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(max-width:600px){ .quick-grid { grid-template-columns:1fr; } }
.quick-link {
    display:flex; align-items:center; gap:12px;
    padding:14px 16px; background:#fff; border:1px solid #e5e7eb;
    border-radius:12px; text-decoration:none; color:#374151;
    font-size:.82rem; font-weight:600; transition:.15s;
}
.quick-link:hover { background:#f8fafc; border-color:#d1d5db; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.quick-link .q-icon { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }

/* ─── Month badge ─── */
.month-badge { display:inline-flex; align-items:center; gap:6px; background:#f0f9ff; border:1px solid #bae6fd; color:#0369a1; padding:5px 10px; border-radius:8px; font-size:.73rem; font-weight:600; margin-bottom:18px; }
</style>
@endpush
@section('content')

@php
    $monthName = now()->locale('pt_BR')->isoFormat('MMMM [de] YYYY');
    $monthStart = now()->startOfMonth()->toDateString();
    $monthEnd   = now()->endOfMonth()->toDateString();
    $today      = now()->toDateString();
@endphp

{{-- Header --}}
<div class="rp-header">
    <h2>📊 Central de Relatórios</h2>
    <p>Análise completa do desempenho do hotel. Exporte em PDF com um clique.</p>
</div>

{{-- Período de referência --}}
<div class="month-badge">
    <i data-lucide="calendar" style="width:13px;height:13px;"></i>
    Mês atual: <strong>{{ ucfirst($monthName) }}</strong>
    <span style="opacity:.6;">·</span>
    Dados de {{ \Carbon\Carbon::parse($from)->format('d/m') }} a {{ now()->format('d/m/Y') }}
</div>

{{-- KPIs Rápidos do Mês --}}
<div class="kpi-strip">
    <div class="kpi-box v1">
        <div class="lbl">💰 Receita do Mês</div>
        <div class="val">R$ {{ number_format($monthRevenue, 0, ',', '.') }}</div>
        <div class="sub">pagamentos confirmados</div>
        <div class="ico">💰</div>
    </div>
    <div class="kpi-box v2">
        <div class="lbl">🛏 Reservas no Mês</div>
        <div class="val">{{ $monthReservations }}</div>
        <div class="sub">check-ins previstos</div>
        <div class="ico">🛏</div>
    </div>
    <div class="kpi-box v3">
        <div class="lbl">✅ Check-ins Realizados</div>
        <div class="val">{{ $monthCheckins }}</div>
        <div class="sub">hóspedes recebidos</div>
        <div class="ico">✅</div>
    </div>
    <div class="kpi-box v4">
        <div class="lbl">📈 Ocupação Atual</div>
        <div class="val">{{ $avgOccupancy }}%</div>
        <div class="sub">de {{ $totalRooms }} UH{{ $totalRooms !== 1 ? 's' : '' }} ativas</div>
        <div class="ico">📈</div>
    </div>
</div>

{{-- Relatórios Principais --}}
<div class="sec-title">
    <i data-lucide="file-text" style="width:14px;height:14px;"></i>
    Relatórios Analíticos
</div>

<div class="rp-grid">

    {{-- Receitas --}}
    <div class="rp-card" style="--card-color:#6366f1;">
        <div class="rp-card-icon" style="background:#ede9fe;">📈</div>
        <div>
            <div class="rp-card-title">Relatório de Receitas</div>
            <div class="rp-card-desc">Análise de faturamento por período, forma de pagamento e evolução diária. Ideal para fechamento financeiro.</div>
        </div>
        <div class="rp-card-actions">
            <a href="{{ route('admin.reports.revenue', ['from'=>$from,'to'=>$today]) }}" class="btn-view">
                <i data-lucide="bar-chart-2" style="width:12px;height:12px;"></i> Visualizar
            </a>
            <a href="{{ route('admin.reports.pdf.revenue', ['from'=>$from,'to'=>$today]) }}" class="btn-pdf" style="background:#6366f1;" target="_blank">
                <i data-lucide="file-down" style="width:12px;height:12px;"></i> PDF Mês
            </a>
            <a href="{{ route('admin.reports.pdf.managerial', ['from'=>$from,'to'=>$today]) }}" class="btn-pdf" style="background:#8b5cf6;" target="_blank">
                <i data-lucide="briefcase" style="width:12px;height:12px;"></i> Gerencial
            </a>
        </div>
    </div>

    {{-- Ocupação --}}
    <div class="rp-card" style="--card-color:#0ea5e9;">
        <div class="rp-card-icon" style="background:#e0f2fe;">🛏</div>
        <div>
            <div class="rp-card-title">Relatório de Ocupação</div>
            <div class="rp-card-desc">Heatmap de ocupação diária, taxa media por período e distribuição de check-ins e check-outs.</div>
        </div>
        <div class="rp-card-actions">
            <a href="{{ route('admin.reports.occupancy', ['from'=>$from,'to'=>$monthEnd]) }}" class="btn-view">
                <i data-lucide="calendar-check" style="width:12px;height:12px;"></i> Visualizar
            </a>
            <a href="{{ route('admin.reports.pdf.occupancy', ['from'=>$from,'to'=>$monthEnd]) }}" class="btn-pdf" style="background:#0ea5e9;" target="_blank">
                <i data-lucide="file-down" style="width:12px;height:12px;"></i> PDF Mês
            </a>
        </div>
    </div>

    {{-- Hóspedes --}}
    <div class="rp-card" style="--card-color:#22c55e;">
        <div class="rp-card-icon" style="background:#dcfce7;">👥</div>
        <div>
            <div class="rp-card-title">Relatório de Hóspedes</div>
            <div class="rp-card-desc">Lista completa de hóspedes com check-in no período: quarto, UH e datas. Útil para auditoria e ANVISA.</div>
        </div>
        <div class="rp-card-actions">
            <a href="{{ route('admin.reports.pdf.guests', ['from'=>$from,'to'=>$monthEnd]) }}" class="btn-pdf" style="background:#22c55e;" target="_blank">
                <i data-lucide="file-down" style="width:12px;height:12px;"></i> PDF Mês
            </a>
            <a href="{{ route('admin.reports.pdf.guests', ['from'=>$from,'to'=>$today]) }}" class="btn-pdf" style="background:#16a34a;" target="_blank">
                <i data-lucide="users" style="width:12px;height:12px;"></i> Até Hoje
            </a>
        </div>
    </div>

    {{-- Gerencial --}}
    <div class="rp-card" style="--card-color:#f59e0b;">
        <div class="rp-card-icon" style="background:#fef3c7;">📋</div>
        <div>
            <div class="rp-card-title">Relatório Gerencial</div>
            <div class="rp-card-desc">Resumo executivo completo: receita, RevPAR, ocupação, reservas e cancelamentos. Para diretoria e investidores.</div>
        </div>
        <div class="rp-card-actions">
            <a href="{{ route('admin.reports.pdf.managerial', ['from'=>$from,'to'=>$today]) }}" class="btn-pdf" style="background:#f59e0b;" target="_blank">
                <i data-lucide="file-down" style="width:12px;height:12px;"></i> PDF Mês
            </a>
            <a href="{{ route('admin.reports.pdf.managerial', ['from'=>now()->startOfYear()->toDateString(),'to'=>$today]) }}" class="btn-pdf" style="background:#d97706;" target="_blank">
                <i data-lucide="trending-up" style="width:12px;height:12px;"></i> YTD {{ now()->year }}
            </a>
        </div>
    </div>

    {{-- Transações --}}
    <div class="rp-card" style="--card-color:#ef4444;">
        <div class="rp-card-icon" style="background:#fee2e2;">🧾</div>
        <div>
            <div class="rp-card-title">Extrato de Transações</div>
            <div class="rp-card-desc">Lançamentos financeiros detalhados: entradas, saídas e saldo líquido do período. Vinculados a reservas.</div>
        </div>
        <div class="rp-card-actions">
            <a href="{{ route('admin.financial.transactions', ['from'=>$from,'to'=>$today]) }}" class="btn-view">
                <i data-lucide="list" style="width:12px;height:12px;"></i> Visualizar
            </a>
            <a href="{{ route('admin.reports.pdf.transactions', ['from'=>$from,'to'=>$today]) }}" class="btn-pdf" style="background:#ef4444;" target="_blank">
                <i data-lucide="file-down" style="width:12px;height:12px;"></i> PDF Mês
            </a>
        </div>
    </div>

    {{-- CRM --}}
    <div class="rp-card" style="--card-color:#ec4899;">
        <div class="rp-card-icon" style="background:#fce7f3;">⭐</div>
        <div>
            <div class="rp-card-title">CRM & Inteligência</div>
            <div class="rp-card-desc">Ranking de hóspedes VIP, aniversariantes do mês e análise de frequência. Motor de fidelização.</div>
        </div>
        <div class="rp-card-actions">
            <a href="{{ route('admin.crm.index') }}" class="btn-view" style="background:#fdf2f8;border-color:#f9a8d4;color:#be185d;">
                <i data-lucide="star" style="width:12px;height:12px;"></i> Acessar CRM
            </a>
        </div>
    </div>

</div>

{{-- Acesso Rápido --}}
<div class="sec-title">
    <i data-lucide="zap" style="width:14px;height:14px;"></i>
    Acesso Rápido — Operacional
</div>

<div class="quick-grid" style="margin-bottom:28px;">
    <a href="{{ route('admin.financial.cashbox') }}" class="quick-link">
        <div class="q-icon" style="background:#f0fdf4;color:#16a34a;">💸</div>
        <div>
            <div style="font-size:.83rem;font-weight:700;color:#111827;">Caixa de Turno</div>
            <div style="font-size:.72rem;color:#6b7280;margin-top:1px;">Abertura, fechamento e resumo do caixa</div>
        </div>
        <i data-lucide="chevron-right" style="width:14px;height:14px;margin-left:auto;color:#9ca3af;"></i>
    </a>
    <a href="{{ route('admin.reservations.index') }}" class="quick-link">
        <div class="q-icon" style="background:#ede9fe;color:#7c3aed;">📅</div>
        <div>
            <div style="font-size:.83rem;font-weight:700;color:#111827;">Painel de Reservas</div>
            <div style="font-size:.72rem;color:#6b7280;margin-top:1px;">Listagem completa com filtros avençados</div>
        </div>
        <i data-lucide="chevron-right" style="width:14px;height:14px;margin-left:auto;color:#9ca3af;"></i>
    </a>
    <a href="{{ route('admin.housekeeping.index') }}" class="quick-link">
        <div class="q-icon" style="background:#e0f2fe;color:#0369a1;">🧹</div>
        <div>
            <div style="font-size:.83rem;font-weight:700;color:#111827;">Governança / Arrumação</div>
            <div style="font-size:.72rem;color:#6b7280;margin-top:1px;">Status de limpeza por andar e quarto</div>
        </div>
        <i data-lucide="chevron-right" style="width:14px;height:14px;margin-left:auto;color:#9ca3af;"></i>
    </a>
    <a href="{{ route('admin.tariffs.index') }}" class="quick-link">
        <div class="q-icon" style="background:#fef3c7;color:#b45309;">💺</div>
        <div>
            <div style="font-size:.83rem;font-weight:700;color:#111827;">Motor Tarifário</div>
            <div style="font-size:.72rem;color:#6b7280;margin-top:1px;">Regras de preço, sazonalidade e simulador</div>
        </div>
        <i data-lucide="chevron-right" style="width:14px;height:14px;margin-left:auto;color:#9ca3af;"></i>
    </a>
</div>

{{-- Dica de uso --}}
<div style="background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:14px 18px;display:flex;gap:10px;align-items:flex-start;">
    <span style="font-size:1.1rem;">💡</span>
    <div>
        <div style="font-size:.8rem;font-weight:700;color:#92400e;margin-bottom:3px;">Dica Profissional</div>
        <div style="font-size:.76rem;color:#b45309;line-height:1.5;">
            Ao abrir qualquer relatório analítico, utilize o <strong>filtro de datas</strong> para personalizar o período desejado e clique em <strong>Exportar PDF</strong> — os PDFs são gerados com os dados daquele filtro específico. Ideal para fechamentos mensais, relatórios de auditoria ou apresentações para investidores.
        </div>
    </div>
</div>

@endsection