{{-- Every change to the employee's salary, newest first. --}}
@use('App\Models\Payment')

@php $currency = $employee->currency(); @endphp

<div class="flex flex-col gap-4 rounded-2xl bg-white p-6 shadow-raised">
    <div class="flex items-start justify-between gap-4">
        <div>
            <h3 class="text-base font-semibold text-gray-900">{{ __('Salary history') }}</h3>
            <p class="text-sm text-gray-600">{{ __('Each time the monthly salary was set or changed.') }}</p>
        </div>

        @isset($editUrl)
            <x-secondary-button :href="$editUrl" class="shrink-0">{{ __('Change salary') }}</x-secondary-button>
        @endisset
    </div>

    @if ($employee->salaryChanges->isEmpty())
        <p class="rounded-xl bg-gray-50 p-4 text-sm text-gray-600 ring-1 ring-gray-100">
            @if ($employee->salary !== null)
                {{ __('Current salary :amount. No changes recorded yet.', ['amount' => Payment::formatMoney($employee->salary, $currency)]) }}
            @else
                {{ __('No salary has been set yet. Set it when editing the employee.') }}
            @endif
        </p>
    @else
        <ol class="relative flex flex-col gap-5 border-s-2 border-gray-100 ps-5">
            @foreach ($employee->salaryChanges as $change)
                <li class="relative">
                    <span class="absolute -start-[1.6rem] top-1 h-3 w-3 rounded-full ring-4 ring-white {{ $loop->first ? 'bg-brand-500' : 'bg-gray-300' }}"></span>

                    <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
                        <div class="font-semibold tabular-nums text-gray-900">
                            {{ Payment::formatMoney($change->amount, $currency) }}

                            @if ($change->previous_amount !== null)
                                <span class="text-xs font-normal text-gray-500">
                                    {{ __('was :amount', ['amount' => Payment::formatMoney($change->previous_amount, $currency)]) }}
                                    @if ((float) $change->amount > (float) $change->previous_amount)
                                        <span class="text-emerald-600">▲</span>
                                    @elseif ((float) $change->amount < (float) $change->previous_amount)
                                        <span class="text-red-600">▼</span>
                                    @endif
                                </span>
                            @endif
                        </div>

                        <div class="text-xs text-gray-500">{{ __('from :month', ['month' => $change->effective_from->format('F Y')]) }}</div>
                    </div>

                    <div class="mt-0.5 text-xs text-gray-500">
                        {{ $change->changer ? __('Set by :name', ['name' => $change->changer->name]) : __('Set by the system') }}
                        · {{ $change->created_at->format('d M Y') }}
                        @if ($change->note)
                            · {{ $change->note }}
                        @endif
                    </div>
                </li>
            @endforeach
        </ol>
    @endif
</div>