@php
    $general = $dashboard['general'];
    $badgeClasses = [
        'emerald' => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
        'rose' => 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300',
        'amber' => 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
        'blue' => 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
        'slate' => 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300',
    ];
@endphp

<div class="mx-auto max-w-[1600px] space-y-8 p-8">
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-5">
        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Total por cobrar</p>
            <p class="mt-2 text-2xl font-black text-slate-900 dark:text-white">{{ $general['total_receivable_formatted'] }}</p>
            <p class="mt-2 text-xs text-slate-500">Saldo vivo de la cartera activa.</p>
        </div>
        <div class="rounded-2xl border border-rose-200 bg-white p-5 shadow-sm dark:border-rose-900/40 dark:bg-slate-900">
            <p class="text-xs font-semibold uppercase tracking-wider text-rose-500">Total para regularizar</p>
            <p class="mt-2 text-2xl font-black text-rose-600 dark:text-rose-300">{{ $general['regularization_amount_formatted'] }}</p>
            <p class="mt-2 text-xs text-slate-500">Capital vencido e intereses de atraso.</p>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Cartera al corriente</p>
            <div class="mt-2 flex items-center justify-between gap-3">
                <p class="text-2xl font-black text-slate-900 dark:text-white">{{ $general['portfolio_current_percent_label'] }}</p>
                <span class="rounded-full bg-emerald-100 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300">Activa</span>
            </div>
            <div class="mt-3 h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
                <div class="h-full rounded-full bg-emerald-500" style="width: {{ max(min($general['portfolio_current_percent'], 100), 0) }}%;"></div>
            </div>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Ingresos del mes</p>
            <p class="mt-2 text-2xl font-black text-slate-900 dark:text-white">{{ $general['current_month_revenue_formatted'] }}</p>
            <p class="mt-2 text-xs text-slate-500">Cobranza registrada en el mes actual.</p>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Clientes al corriente</p>
            <p class="mt-2 text-2xl font-black text-slate-900 dark:text-white">{{ $general['current_clients_percent_label'] }}</p>
            <p class="mt-2 text-xs text-slate-500">Sobre ventas activas no canceladas.</p>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-5">
        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Inventario disponible</p>
            <p class="mt-2 text-2xl font-black text-slate-900 dark:text-white">{{ $general['available_value_formatted'] }}</p>
            <p class="mt-2 text-xs text-slate-500">{{ $general['available_count'] }} lotes listos para venta.</p>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Inventario comprometido</p>
            <p class="mt-2 text-2xl font-black text-slate-900 dark:text-white">{{ $general['committed_value_formatted'] }}</p>
            <p class="mt-2 text-xs text-slate-500">{{ $general['committed_count'] }} lotes en apartado o venta.</p>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">% recuperado sobre ventas</p>
            <p class="mt-2 text-2xl font-black text-slate-900 dark:text-white">{{ number_format($general['recovered_on_sales_percent'], 1) }}%</p>
            <p class="mt-2 text-xs text-slate-500">Cobrado vs valor contratado.</p>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">% recuperado sobre inventario</p>
            <p class="mt-2 text-2xl font-black text-slate-900 dark:text-white">{{ number_format($general['recovered_on_inventory_percent'], 1) }}%</p>
            <p class="mt-2 text-xs text-slate-500">Cobrado vs valor lista total.</p>
        </div>
        <div class="rounded-2xl border border-amber-200 bg-white p-5 shadow-sm dark:border-amber-900/40 dark:bg-slate-900">
            <p class="text-xs font-semibold uppercase tracking-wider text-amber-500">Apartados activos</p>
            <p class="mt-2 text-2xl font-black text-slate-900 dark:text-white">{{ $general['hold_count'] }}</p>
            <p class="mt-2 text-xs text-slate-500">Valor lista estimado: {{ $general['hold_value_formatted'] }}.</p>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
        <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <div class="mb-8 flex items-center justify-between">
                <div>
                    <h3 class="text-base font-bold text-slate-900 dark:text-white">Ingresos Mensuales</h3>
                    <p class="text-xs text-slate-500">Últimos 6 meses de pagos registrados.</p>
                </div>
                <span class="rounded-full bg-slate-100 px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-slate-500 dark:bg-slate-800 dark:text-slate-300">Cobranza</span>
            </div>
            <div class="flex h-64 items-end justify-between gap-4 px-2">
                @foreach ($general['monthly_revenue'] as $month)
                    <div class="flex flex-1 flex-col items-center gap-2">
                        <div class="w-full rounded-t-xl {{ $month['is_current'] ? 'bg-primary' : 'bg-primary/20 dark:bg-primary/30' }}"
                            style="height: {{ $month['height_percent'] }}%;"></div>
                        <span class="text-[10px] font-bold {{ $month['is_current'] ? 'text-primary' : 'text-slate-400' }}">{{ $month['label'] }}</span>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <div class="mb-8 flex items-center justify-between">
                <div>
                    <h3 class="text-base font-bold text-slate-900 dark:text-white">Cartera Activa vs Vencida</h3>
                    <p class="text-xs text-slate-500">Distribución del capital pendiente.</p>
                </div>
                <span class="material-symbols-outlined text-slate-400">donut_large</span>
            </div>
            <div class="space-y-5">
                <div class="h-4 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
                    <div class="flex h-full">
                        <div class="h-full bg-emerald-500" style="width: {{ max(min($general['portfolio_current_percent'], 100), 0) }}%;"></div>
                        <div class="h-full bg-rose-500" style="width: {{ max(100 - min($general['portfolio_current_percent'], 100), 0) }}%;"></div>
                    </div>
                </div>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="rounded-xl bg-slate-50 p-4 dark:bg-slate-800/70">
                        <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500">Capital al corriente</p>
                        <p class="mt-1 text-lg font-black text-slate-900 dark:text-white">{{ $general['current_receivable_formatted'] }}</p>
                    </div>
                    <div class="rounded-xl bg-rose-50 p-4 dark:bg-rose-900/10">
                        <p class="text-[10px] font-bold uppercase tracking-wider text-rose-500">Capital vencido</p>
                        <p class="mt-1 text-lg font-black text-rose-600 dark:text-rose-300">{{ $general['overdue_principal_formatted'] }}</p>
                    </div>
                </div>
                <div class="rounded-2xl border border-primary/20 bg-primary/5 p-4 text-sm text-slate-700 dark:text-slate-200">
                    {{ $general['smart_suggestion'] }}
                </div>
            </div>
        </div>
    </div>

    <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
        <div class="flex flex-col gap-3 border-b border-slate-200 p-6 dark:border-slate-800 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <h3 class="text-base font-bold text-slate-900 dark:text-white">Detalle de Cartera por Cliente</h3>
                <p class="text-xs text-slate-500">Ventas activas ordenadas por prioridad de cobranza.</p>
            </div>
            <span class="rounded-full bg-slate-100 px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-slate-500 dark:bg-slate-800 dark:text-slate-300">{{ $general['portfolio_total'] }} registros visibles</span>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full border-collapse text-left text-sm">
                <thead>
                    <tr class="bg-slate-50 text-[10px] font-bold uppercase tracking-wider text-slate-500 dark:bg-slate-800/50">
                        <th class="px-6 py-4">Cliente</th>
                        <th class="px-6 py-4">Lote</th>
                        <th class="px-6 py-4">Tipo</th>
                        <th class="px-6 py-4">Precio Venta</th>
                        <th class="px-6 py-4">Pagado</th>
                        <th class="px-6 py-4">Pendiente</th>
                        <th class="px-6 py-4">Vencido</th>
                        <th class="px-6 py-4">Atraso</th>
                        <th class="px-6 py-4">Estatus</th>
                        <th class="px-6 py-4 text-right">Acción</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                    @forelse ($general['portfolio_rows'] as $row)
                        <tr class="transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/40">
                            <td class="px-6 py-4">
                                <div class="font-semibold text-slate-900 dark:text-white">{{ $row['buyer_name'] }}</div>
                                <div class="text-xs text-slate-500">{{ $row['folio'] }}</div>
                            </td>
                            <td class="px-6 py-4 font-medium text-slate-700 dark:text-slate-200">{{ $row['lot_label'] }}</td>
                            <td class="px-6 py-4">
                                <span class="rounded-md bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-300">{{ $row['payment_type_label'] }}</span>
                            </td>
                            <td class="px-6 py-4 font-medium text-slate-900 dark:text-white">{{ $row['total_price_formatted'] }}</td>
                            <td class="px-6 py-4 text-emerald-600 dark:text-emerald-300">{{ $row['paid_formatted'] }}</td>
                            <td class="px-6 py-4 text-slate-700 dark:text-slate-200">{{ $row['remaining_formatted'] }}</td>
                            <td class="px-6 py-4 {{ $row['status_tone'] === 'rose' ? 'font-bold text-rose-600 dark:text-rose-300' : 'text-slate-500' }}">{{ $row['overdue_formatted'] }}</td>
                            <td class="px-6 py-4 {{ $row['status_tone'] === 'rose' ? 'font-medium text-rose-600 dark:text-rose-300' : 'text-slate-500' }}">{{ $row['days_late_label'] }}</td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider {{ $badgeClasses[$row['status_tone']] ?? $badgeClasses['slate'] }}">
                                    {{ $row['status_label'] }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <a href="{{ route('realEstate.sale.details', ['id' => $row['sale_id']]) }}"
                                    class="inline-flex items-center gap-1 rounded-lg border border-slate-200 px-3 py-1.5 text-xs font-semibold text-slate-600 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800">
                                    Ver venta
                                    <span class="material-symbols-outlined text-sm">arrow_forward</span>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="10" class="px-6 py-10 text-center text-sm text-slate-500">
                                No hay ventas registradas para construir cartera.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>