{{-- Month-by-month account: $ledger rows from User::salaryLedger(), $thisMonth from User::salarySummaryFor(now()). --}}
@use('App\Enums\PaymentType')
@use('App\Models\Payment')

@php
$currency = $employee->currency();
// Salary and advance always get a column because they make up the month's pay; the other types appear once something was paid under them.
$columns = collect(PaymentType::cases())->filter(fn (PaymentType $type): bool => $type->countsTowardsSalary() || $ledger->contains(fn (array $row): bool => $row['by_type'][$type->value] > 0));
@endphp

<div class="overflow-hidden rounded-2xl bg-white shadow-raised">
    <div class="flex flex-wrap items-center justify-between gap-4 border-b border-gray-100 px-6 py-4">
        <div>
            <h3 class="text-base font-semibold text-gray-900">{{ __('Monthly salary account') }}</h3>
            <p class="text-sm text-gray-600">{{ __('One line per month: what was paid under each type, the total, and what is still left of the salary. Salary and advances count towards the month.') }}</p>
        </div>

        <x-badge :tone="$thisMonth['status']->tone()" dot class="text-sm">
            {{ __(':month: :status', ['month' => now()->format('F'), 'status' => $thisMonth['status']->label()]) }}
        </x-badge>
    </div>

    @if ($ledger->isEmpty())
        <p class="px-6 py-8 text-center text-sm text-gray-500">{{ __('No salary or payments recorded yet.') }}</p>
    @else
        <div class="overflow-x-auto">
            <table class="w-full border-collapse text-sm">
                <thead>
                    <tr class="border-y border-gray-200 bg-gray-50 text-xs font-semibold uppercase tracking-wider text-gray-500">
                        <th class="px-3 py-3 text-start sm:ps-6">{{ __('Month') }}</th>
                        <th class="px-3 py-3 text-end">{{ __('Salary due') }}</th>

                        @foreach ($columns as $type)
                            <th class="px-3 py-3 text-end">{{ $type->label() }}</th>
                        @endforeach

                        <th class="px-3 py-3 text-end">{{ __('Total paid') }}</th>
                        <th class="px-3 py-3 text-end">{{ __('Remaining') }}</th>
                        <th class="px-3 py-3 text-start sm:pe-6">{{ __('Status') }}</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-100">
                    @foreach ($ledger as $row)
                        <tr class="hover:bg-gray-50 {{ $loop->first ? 'bg-brand-50/40' : '' }}">
                            <td class="whitespace-nowrap px-3 py-3 font-medium text-gray-900 sm:ps-6">
                                {{ $row['month']->format('F Y') }}

                                @if ($loop->first)
                                    <span class="ms-1 text-xs font-normal text-brand-700">{{ __('this month') }}</span>
                                @endif
                            </td>
                            <td class="whitespace-nowrap px-3 py-3 text-end tabular-nums text-gray-700">{{ $row['salary'] > 0 ? Payment::formatMoney($row['salary'], $currency) : '—' }}</td>

                            @foreach ($columns as $type)
                                @php $amount = $row['by_type'][$type->value]; @endphp
                                <td class="whitespace-nowrap px-3 py-3 text-end tabular-nums {{ $amount > 0 ? 'text-gray-900' : 'text-gray-400' }}">{{ $amount > 0 ? Payment::formatMoney($amount, $currency) : '—' }}</td>
                            @endforeach

                            <td class="whitespace-nowrap px-3 py-3 text-end tabular-nums font-semibold text-gray-900">{{ $row['total'] > 0 ? Payment::formatMoney($row['total'], $currency) : '—' }}</td>
                            <td class="whitespace-nowrap px-3 py-3 text-end tabular-nums {{ $row['remaining'] > 0 ? 'font-semibold text-red-600' : 'text-gray-400' }}">{{ $row['remaining'] > 0 ? Payment::formatMoney($row['remaining'], $currency) : '—' }}</td>
                            <td class="whitespace-nowrap px-3 py-3 sm:pe-6">
                                <x-badge :tone="$row['status']->tone()" dot>{{ $row['status']->label() }}</x-badge>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>