<div class="tab-pane fade" id="bilancio-tab-ricavi" role="tabpanel">
  <div class="row g-3">
    <div class="col-6">
      <div class="card border">
        <div class="card-header pb-2">
          <h6 class="mb-0">Tabella Ricavi</h6>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-sm table-striped align-middle mb-0">
              <thead>
                <tr>
                  <th>Categoria contabile</th>
                  <th class="text-end">N.</th>
                  <th class="text-end">Totale ricavi</th>
                </tr>
              </thead>
              <tbody>
                @forelse($ricaviRows as $row)
                  <tr>
                    <td>
                      @if(!empty($row['colore']))
                        <span class="badge me-1" style="background-color: {{ $row['colore'] }};">&nbsp;</span>
                      @endif
                      {{ $row['voce'] ?? 'N/D' }}
                    </td>
                    <td class="text-end">{{ (int)($row['movimenti'] ?? 0) }}</td>
                    <td class="text-end text-success">€ {{ number_format((float)($row['totale'] ?? 0), 2, ',', '.') }}</td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="3" class="text-center text-muted py-3">Nessun ricavo rilevato nell'anno selezionato.</td>
                  </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div class="col-12 col-xl-6">
      <div class="card border h-100">
        <div class="card-header pb-2">
          <h6 class="mb-0">Trend ricavi mensili</h6>
        </div>
        <div class="card-body">
          <div id="bilancio-ricavi-chart" style="min-height: 230px;"></div>
          <p class="text-muted small mt-2 mb-0">
            Mostra l'andamento dei ricavi mese per mese: una curva in crescita indica un miglioramento delle entrate.
          </p>
        </div>
      </div>
    </div>

    <div class="col-12 col-xl-6">
      <div class="card border h-100">
        <div class="card-header pb-2">
          <h6 class="mb-0">Top categorie ricavi</h6>
        </div>
        <div class="card-body">
          <div id="bilancio-ricavi-categorie-chart" style="min-height: 260px;"></div>
          <p class="text-muted small mt-2 mb-0">
            Confronta le categorie che generano ricavi: le barre piu lunghe sono le voci con maggior impatto.
          </p>
        </div>
      </div>
    </div>

    <div class="col-12 col-xl-6">
      <div class="card border h-100">
        <div class="card-header pb-2">
          <h6 class="mb-0">Composizione ricavi (%)</h6>
        </div>
        <div class="card-body">
          <div id="bilancio-ricavi-percent-chart" style="min-height: 320px;"></div>
          <p class="text-muted small mt-2 mb-0">
            Distribuzione percentuale dei ricavi: ogni fetta indica quanto contribuisce una categoria al totale.
          </p>
        </div>
      </div>
    </div>

    <div class="col-12 col-xl-6">
      <div class="card border h-100">
        <div class="card-header pb-2">
          <h6 class="mb-0">Pareto ricavi (80/20)</h6>
        </div>
        <div class="card-body">
          <div id="bilancio-ricavi-pareto-chart" style="min-height: 320px;"></div>
          <p class="text-muted small mt-2 mb-0">
            Pareto 80/20: individua rapidamente quali categorie coprono la maggior parte dei ricavi.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
