@php
    use App\Support\Format;
    $record = $getRecord();

    $totalReceivable = $record->total_receivable;
    $totalPaid = $record->total_paid;
    $remaining = $record->remaining_balance;

    $percentage = $totalReceivable > 0
        ? round(($totalPaid / $totalReceivable) * 100, 1)
        : 0;

    // Determine color based on status
    $barColor = match(true) {
        $percentage >= 100 => 'bg-green-500',
        $percentage >= 75 => 'bg-green-400',
        $percentage >= 50 => 'bg-blue-500',
        $percentage >= 25 => 'bg-yellow-500',
        default => 'bg-red-500',
    };

    // Check for overdue status
    $hasOverdue = $record->installments()->where('status', 'overdue')->exists();
    if ($hasOverdue && $percentage < 100) {
        $barColor = 'bg-red-500';
    }
@endphp

<div class="space-y-2">
    {{-- Progress Bar --}}
    <div class="relative">
        <div class="h-4 w-full rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
            <div class="{{ $barColor }} h-full rounded-full transition-all duration-500 ease-out"
                 style="width: {{ min($percentage, 100) }}%">
            </div>
        </div>

        {{-- Percentage Label --}}
        <div class="absolute inset-0 flex items-center justify-center">
            <span class="text-xs font-bold {{ $percentage > 50 ? 'text-white' : 'text-gray-700 dark:text-gray-300' }}">
                {{ $percentage }}% pagado
            </span>
        </div>
    </div>

    {{-- Summary Text --}}
    <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400">
        <span>
            Pagado: <span class="font-medium text-green-600 dark:text-green-400">{{ Format::money($totalPaid) }}</span>
        </span>
        <span>
            Pendiente: <span class="font-medium text-red-600 dark:text-red-400">{{ Format::money($remaining) }}</span>
        </span>
        <span>
            Total: <span class="font-medium text-gray-700 dark:text-gray-300">{{ Format::money($totalReceivable) }}</span>
        </span>
    </div>

    {{-- Warning if overdue --}}
    @if($hasOverdue)
        <div class="flex items-center gap-1.5 rounded-md bg-red-50 dark:bg-red-900/20 px-2.5 py-1.5 text-xs text-red-700 dark:text-red-300">
            <svg style="width:0.875rem;height:0.875rem;flex-shrink:0;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"/>
            </svg>
            <span>Este crédito tiene cuotas vencidas</span>
        </div>
    @elseif($percentage >= 100)
        <div class="flex items-center gap-1.5 rounded-md bg-green-50 dark:bg-green-900/20 px-2.5 py-1.5 text-xs text-green-700 dark:text-green-300">
            <svg style="width:0.875rem;height:0.875rem;flex-shrink:0;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd"/>
            </svg>
            <span>Crédito completamente pagado</span>
        </div>
    @endif
</div>