@extends('admin.reports.pdf.layout')
@php
  $reportBadge = 'Relatório de Ocupação';
  $reportTitle = 'Ocupação do Período';
  $maxRate = collect($days)->max('rate') ?: 1;
  $avgOcc  = $avgOccupancy;
@endphp

@section('content')

{{-- KPIs --}}
<div class="kpi-row">
  <div class="kpi-cell">
    <div class="kpi-card">
      <div class="kpi-label">Ocupação Média</div>
      <div class="kpi-value">{{ $avgOccupancy }}%</div>
      <div class="kpi-sub">durante {{ count($days) }} dias</div>
    </div>
  </div>
  <div class="kpi-cell">
    <div class="kpi-card green">
      <div class="kpi-label">Check-ins Realizados</div>
      <div class="kpi-value">{{ $totalCheckins }}</div>
      <div class="kpi-sub">no período</div>
    </div>
  </div>
  <div class="kpi-cell">
    <div class="kpi-card yellow">
      <div class="kpi-label">Check-outs Realizados</div>
      <div class="kpi-value">{{ $totalCheckouts }}</div>
      <div class="kpi-sub">no período</div>
    </div>
  </div>
  <div class="kpi-cell">
    <div class="kpi-card pink">
      <div class="kpi-label">UHs Ativas</div>
      <div class="kpi-value">{{ $totalRooms }}</div>
      <div class="kpi-sub">disponíveis</div>
    </div>
  </div>
</div>

{{-- Gráfico de Ocupação --}}
<div class="pdf-card">
  <div class="pdf-card-header">📅 Ocupação Diária</div>
  <div class="bar-chart">
    @foreach($days as $date => $info)
    <div class="bar-row">
      <div class="bar-label">{{ \Carbon\Carbon::parse($date)->format('d/m') }}</div>
      <div class="bar-bg">
        @php
          $color = $info['rate'] >= 80 ? '#22c55e' : ($info['rate'] >= 50 ? '#6366f1' : ($info['rate'] >= 20 ? '#f59e0b' : '#ef4444'));
        @endphp
        <div class="bar-fill" style="width:{{ $info['rate'] }}%;background:{{ $color }};"></div>
      </div>
      <div class="bar-val">{{ $info['occupied'] }}/{{ $totalRooms }} ({{ $info['rate'] }}%)</div>
    </div>
    @endforeach
  </div>
</div>

{{-- Legenda --}}
<div style="display:table;width:100%;margin-top:8px;font-size:7.5px;color:#64748b;">
  <div style="display:table-cell;">
    <span style="background:#22c55e;color:#fff;padding:2px 6px;border-radius:4px;">≥ 80%</span> Alta ocupação &nbsp;
    <span style="background:#6366f1;color:#fff;padding:2px 6px;border-radius:4px;">50–80%</span> Boa ocupação &nbsp;
    <span style="background:#f59e0b;color:#fff;padding:2px 6px;border-radius:4px;">20–50%</span> Baixa ocupação &nbsp;
    <span style="background:#ef4444;color:#fff;padding:2px 6px;border-radius:4px;">&lt; 20%</span> Crítica
  </div>
</div>

@endsection