@php use App\Support\Money; @endphp

<x-filament-panels::page>
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
        @forelse ($this->getAssociates() as $row)
            @php $positive = $row['balance'] >= 0; @endphp
            <x-filament::section>
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <h3 class="text-base font-semibold text-gray-950 dark:text-white">{{ $row['contact']->name }}</h3>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Compte courant d'associé</p>
                    </div>
                    <x-filament::badge :color="$positive ? 'success' : 'danger'">
                        {{ $positive ? 'Dû à l\'associé' : 'Dû par l\'associé' }}
                    </x-filament::badge>
                </div>

                <div class="mt-3 text-3xl font-bold tabular-nums {{ $positive ? 'text-primary-600 dark:text-primary-400' : 'text-danger-600 dark:text-danger-400' }}">
                    {{ Money::format($row['balance']) }}
                </div>

                @if ($row['sparkline'] !== '')
                    <svg viewBox="0 0 100 30" preserveAspectRatio="none" class="mt-3 h-10 w-full">
                        <polyline points="{{ $row['sparkline'] }}" fill="none"
                                  stroke="{{ $positive ? '#2563EB' : '#dc2626' }}" stroke-width="1.5"
                                  vector-effect="non-scaling-stroke" />
                    </svg>
                @endif

                {{-- CCA salaires-primes (CDC §4.3) : dû − versé, compteur séparé du financement. --}}
                <div class="mt-4 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 dark:border-white/10 dark:bg-white/5">
                    <div class="flex items-center justify-between">
                        <span class="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">CCA salaires-primes</span>
                        <span class="text-lg font-bold tabular-nums text-gray-950 dark:text-white">{{ Money::format($row['salary_balance']) }}</span>
                    </div>
                    <p class="text-xs text-gray-400">Salaires et primes dus non versés — entre dans la position de financement.</p>
                </div>

                @can('cca.create')
                    <div class="mt-4 flex flex-wrap gap-2">
                        <x-filament::button size="sm" color="success" icon="heroicon-o-arrow-down-on-square"
                                            wire:click="mountAction('contribution', { contact: {{ $row['contact']->id }} })">
                            Apport
                        </x-filament::button>
                        <x-filament::button size="sm" color="warning" icon="heroicon-o-arrow-up-on-square"
                                            wire:click="mountAction('withdrawal', { contact: {{ $row['contact']->id }} })">
                            Récupération
                        </x-filament::button>
                        <x-filament::button size="sm" color="info" icon="heroicon-o-document-plus"
                                            wire:click="mountAction('salary_accrual', { contact: {{ $row['contact']->id }} })">
                            Constater dû
                        </x-filament::button>
                        <x-filament::button size="sm" color="gray" icon="heroicon-o-banknotes"
                                            wire:click="mountAction('salary_payment', { contact: {{ $row['contact']->id }} })">
                            Verser
                        </x-filament::button>
                    </div>
                @endcan

                <div class="mt-4">
                    <h4 class="mb-2 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">Historique récent</h4>
                    <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
                        <div class="overflow-x-auto">
                            <table class="w-full text-xs">
                            <tbody>
                                @forelse ($row['movements']->reverse()->take(6) as $movement)
                                    <tr class="border-b border-gray-100 last:border-0 dark:border-white/5">
                                        <td class="px-3 py-2 text-gray-500 dark:text-gray-400">{{ $movement['transaction']->date?->format('d/m/Y') }}</td>
                                        <td class="px-3 py-2 text-gray-700 dark:text-gray-200">{{ $movement['transaction']->flow_type->label() }}</td>
                                        <td class="px-3 py-2 text-right tabular-nums {{ $movement['signed'] >= 0 ? 'text-success-600 dark:text-success-400' : 'text-danger-600 dark:text-danger-400' }}">
                                            {{ Money::format($movement['signed']) }}
                                        </td>
                                        <td class="px-3 py-2 text-right font-medium tabular-nums text-gray-950 dark:text-white">{{ Money::format($movement['running']) }}</td>
                                    </tr>
                                @empty
                                    <tr><td class="px-3 py-4 text-center text-gray-400">Aucun mouvement.</td></tr>
                                @endforelse
                            </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </x-filament::section>
        @empty
            <x-filament::section>
                <p class="text-sm text-gray-400">Aucun associé. Lancez les seeders de référence.</p>
            </x-filament::section>
        @endforelse
    </div>
</x-filament-panels::page>