@props([
    'totaleImporto' => 0,
    'totalePagato' => 0,
    'totaleRimanente' => 0,
    'numeroFatture' => 0,
    'fatturePagate' => 0,
    'compensoContratto' => 0,
    'isDipendente' => false,
    'costoMensile' => null,
    'retribuzioneAnnua' => null,
])

<div class="bg-white py-4 px-3 sm:px-4 rounded-lg shadow mb-4 w-full">
    <h3 class="text-lg font-semibold text-gray-900 mb-3">Riepilogo Pagamenti</h3>
    
    @php
        $documentiLabel = $isDipendente ? 'mensilità' : 'documenti';
        $documentiLabelCapitalized = $isDipendente ? 'Mensilità' : 'Documenti';
    @endphp

    @php
        $firstRowMdCols = $isDipendente ? 'md:grid-cols-3' : 'md:grid-cols-4';
        $firstRowLgCols = $isDipendente ? 'lg:grid-cols-5' : 'lg:grid-cols-4';
        $firstRowXlCols = $isDipendente ? 'xl:grid-cols-5' : 'xl:grid-cols-4';
    @endphp

    <div class="grid grid-cols-1 sm:grid-cols-2 {{ $firstRowMdCols }} {{ $firstRowLgCols }} {{ $firstRowXlCols }} gap-2 sm:gap-3">
        <div class="bg-gray-50 p-2 sm:p-3 rounded-lg">
            <div class="text-xs font-medium text-gray-700">{{ $isDipendente ? 'Retribuzione annua' : 'Compenso Contratto' }}</div>
            <div class="text-xl font-bold text-gray-900">
                {{ number_format($isDipendente ? ($retribuzioneAnnua ?? $compensoContratto) : $compensoContratto, 2, ',', '.') }} €
            </div>
            <div class="text-xs text-gray-600 mt-1">{{ $isDipendente ? 'Valore annuo contrattuale' : 'Importo stabilito' }}</div>
        </div>

        @if ($isDipendente)
            <div class="bg-indigo-50 p-2 sm:p-3 rounded-lg">
                <div class="text-xs font-medium text-indigo-700">Costo mensile stimato</div>
                <div class="text-xl font-bold text-indigo-900">
                    {{ $costoMensile ? number_format($costoMensile, 2, ',', '.') . ' €' : '—' }}
                </div>
                <div class="text-xs text-indigo-600 mt-1">Calcolato su 12 mensilità</div>
            </div>
        @endif
        
        <div class="bg-blue-50 p-2 sm:p-3 rounded-lg">
            <div class="text-xs font-medium text-blue-700">Totale {{ $documentiLabelCapitalized }}</div>
            <div class="text-xl font-bold text-blue-900">{{ number_format($totaleImporto, 2, ',', '.') }} €</div>
            <div class="text-xs text-blue-600 mt-1">{{ $numeroFatture }} {{ $documentiLabel }}</div>
        </div>
        
        <div class="bg-green-50 p-2 sm:p-3 rounded-lg">
            <div class="text-xs font-medium text-green-700">Importo Pagato</div>
            <div class="text-xl font-bold text-green-900">{{ number_format($totalePagato, 2, ',', '.') }} €</div>
            <div class="text-xs text-green-600 mt-1">{{ $fatturePagate }} {{ $documentiLabel }} pagati</div>
        </div>
        
        <div class="bg-red-50 p-2 sm:p-3 rounded-lg">
            <div class="text-xs font-medium text-red-700">Da Pagare</div>
            <div class="text-xl font-bold text-red-900">{{ number_format($totaleRimanente, 2, ',', '.') }} €</div>
            <div class="text-xs text-red-600 mt-1">{{ $numeroFatture - $fatturePagate }} {{ $documentiLabel }} da pagare</div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-2 sm:gap-3 mt-2 sm:mt-3">
        <div class="bg-purple-50 p-2 sm:p-3 rounded-lg">
            <div class="text-xs font-medium text-purple-700">Completamento</div>
            <div class="text-xl font-bold text-purple-900">
                {{ $numeroFatture > 0 ? number_format(($fatturePagate / $numeroFatture) * 100, 0) : 0 }}%
            </div>
            <div class="relative w-full h-1.5 bg-purple-200 rounded mt-1.5">
                <div class="absolute top-0 left-0 h-1.5 bg-purple-600 rounded" style="width: {{ $numeroFatture > 0 ? ($fatturePagate / $numeroFatture) * 100 : 0 }}%"></div>
            </div>
        </div>

        <div class="bg-yellow-50 p-2 sm:p-3 rounded-lg">
            <div class="text-xs font-medium text-yellow-700">Pagamento</div>
            <div class="text-xl font-bold text-yellow-900">
                {{ $totaleImporto > 0 ? number_format(($totalePagato / $totaleImporto) * 100, 0) : 0 }}%
            </div>
            <div class="relative w-full h-1.5 bg-yellow-200 rounded mt-1.5">
                <div class="absolute top-0 left-0 h-1.5 bg-yellow-600 rounded" style="width: {{ $totaleImporto > 0 ? ($totalePagato / $totaleImporto) * 100 : 0 }}%"></div>
            </div>
        </div>
    </div>
</div>