@use('App\Enums\PermissionName')
@use('App\Models\Payment')

@php $currency = $payment->user->currency(); @endphp

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Payment #:id', ['id' => $payment->id]) }}
        </h2>
    </x-slot>

    <div class="py-8">
        <div class="flex flex-col gap-6 px-4 sm:px-6 lg:px-8">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <a href="{{ route('payments.index') }}" class="inline-flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
                    </svg>
                    {{ __('Back to payments') }}
                </a>

                <div class="flex items-center gap-3">
                    <x-secondary-button :href="route('payments.employee', $payment->user)">
                        {{ __(':name’s account', ['name' => $payment->user->name]) }}
                    </x-secondary-button>

                    @can(PermissionName::UpdatePayments->value)
                        <x-primary-button :href="route('payments.edit', $payment)">
                            {{ __('Edit') }}
                        </x-primary-button>
                    @endcan
                </div>
            </div>

            <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
                <!-- The receipt -->
                <div class="overflow-hidden rounded-2xl bg-white shadow-raised xl:col-span-2">
                    <div class="flex flex-wrap items-start justify-between gap-4 bg-gradient-to-br from-slate-950 via-slate-900 to-brand-900 p-6 text-white sm:p-8">
                        <div class="min-w-0">
                            <div class="text-[0.65rem] font-semibold uppercase tracking-[0.25em] text-brand-300">{{ $payment->type->label() }}</div>
                            <div class="mt-2 text-4xl font-bold tabular-nums">{{ $payment->formattedAmount() }}</div>
                            <div class="mt-2 flex items-center gap-3">
                                <x-avatar :user="$payment->user" class="ring-2 ring-white/20" />
                                <div class="min-w-0">
                                    <div class="truncate font-semibold">{{ $payment->user->name }}</div>
                                    <div class="truncate text-sm text-slate-300">{{ $payment->user->employee_id ?? $payment->user->email }}</div>
                                </div>
                            </div>
                        </div>

                        <x-badge :tone="$payment->status->tone()" dot class="text-sm">{{ $payment->status->label() }}</x-badge>
                    </div>

                    <dl class="grid grid-cols-1 gap-px bg-gray-100 sm:grid-cols-2">
                        <div class="bg-white p-5">
                            <dt class="text-xs font-medium uppercase tracking-wider text-gray-500">{{ __('Payment date') }}</dt>
                            <dd class="mt-1 font-semibold text-gray-900">{{ $payment->paid_on->format('l, d F Y') }}</dd>
                        </div>

                        <div class="bg-white p-5">
                            <dt class="text-xs font-medium uppercase tracking-wider text-gray-500">{{ __('For month') }}</dt>
                            <dd class="mt-1 font-semibold text-gray-900">{{ $payment->periodLabel() ?? '—' }}</dd>
                        </div>

                        <div class="bg-white p-5">
                            <dt class="text-xs font-medium uppercase tracking-wider text-gray-500">{{ __('Paid via') }}</dt>
                            <dd class="mt-1 font-semibold text-gray-900">{{ $payment->method->label() }}</dd>
                        </div>

                        <div class="bg-white p-5">
                            <dt class="text-xs font-medium uppercase tracking-wider text-gray-500">{{ __('Paid to') }}</dt>
                            <dd class="mt-1 break-words font-semibold text-gray-900">{{ $payment->paid_to ?? '—' }}</dd>
                        </div>

                        <div class="bg-white p-5">
                            <dt class="text-xs font-medium uppercase tracking-wider text-gray-500">{{ __('Reference') }}</dt>
                            <dd class="mt-1 break-all font-mono font-semibold text-gray-900">{{ $payment->reference ?? '—' }}</dd>
                        </div>

                        <div class="bg-white p-5">
                            <dt class="text-xs font-medium uppercase tracking-wider text-gray-500">{{ __('Recorded by') }}</dt>
                            <dd class="mt-1 font-semibold text-gray-900">
                                {{ $payment->recorder?->name ?? __('Unknown') }}
                                <span class="block text-xs font-normal text-gray-500">{{ $payment->created_at->format('d M Y, H:i') }}@if ($payment->updated_at->ne($payment->created_at)) · {{ __('edited :date', ['date' => $payment->updated_at->format('d M Y, H:i')]) }}@endif</span>
                            </dd>
                        </div>

                        <div class="bg-white p-5 sm:col-span-2">
                            <dt class="text-xs font-medium uppercase tracking-wider text-gray-500">{{ __('Notes') }}</dt>
                            <dd class="mt-1 whitespace-pre-line text-gray-900">{{ $payment->notes ?? '—' }}</dd>
                        </div>
                    </dl>
                </div>

                <!-- How the month stands -->
                <aside class="flex flex-col gap-6 self-start">
                    @if ($paidWith->isNotEmpty())
                        @php $batchTotal = (float) $payment->amount + (float) $paidWith->sum('amount'); @endphp

                        <div class="flex flex-col gap-4 rounded-2xl bg-white p-6 shadow-raised">
                            <div>
                                <h3 class="text-base font-semibold text-gray-900">{{ __('Paid together') }}</h3>
                                <p class="text-sm text-gray-600">{{ __('These were recorded in one go with this payment.') }}</p>
                            </div>

                            <dl class="divide-y divide-gray-100 text-sm">
                                <div class="flex items-center justify-between gap-4 py-2">
                                    <dt class="text-gray-900">{{ $payment->type->label() }} <span class="text-xs text-gray-500">({{ __('this one') }})</span></dt>
                                    <dd class="font-semibold tabular-nums text-gray-900">{{ $payment->formattedAmount() }}</dd>
                                </div>

                                @foreach ($paidWith as $other)
                                    <div class="flex items-center justify-between gap-4 py-2">
                                        <dt>
                                            <a href="{{ route('payments.show', $other) }}" class="font-medium text-brand-700 hover:text-brand-900 hover:underline">{{ $other->type->label() }}</a>
                                            <x-badge :tone="$other->status->tone()" dot class="ms-1">{{ $other->status->label() }}</x-badge>
                                        </dt>
                                        <dd class="font-semibold tabular-nums text-gray-900">{{ $other->formattedAmount() }}</dd>
                                    </div>
                                @endforeach

                                <div class="flex items-center justify-between gap-4 py-2">
                                    <dt class="font-semibold text-gray-900">{{ __('Total') }}</dt>
                                    <dd class="text-base font-bold tabular-nums text-gray-900">{{ Payment::formatMoney($batchTotal, $payment->currency) }}</dd>
                                </div>
                            </dl>
                        </div>
                    @endif

                    @if ($monthSummary)
                        <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">{{ ($payment->period_month ?? $payment->paid_on)->format('F Y') }}</h3>
                                    <p class="text-sm text-gray-600">{{ __('Salary account for this month') }}</p>
                                </div>

                                <x-badge :tone="$monthSummary['status']->tone()" dot>{{ $monthSummary['status']->label() }}</x-badge>
                            </div>

                            <dl class="divide-y divide-gray-100 text-sm">
                                <div class="flex items-center justify-between gap-4 py-2">
                                    <dt class="text-gray-500">{{ __('Salary') }}</dt>
                                    <dd class="font-semibold tabular-nums text-gray-900">{{ $monthSummary['salary'] > 0 ? Payment::formatMoney($monthSummary['salary'], $currency) : __('Not set') }}</dd>
                                </div>

                                <div class="flex items-center justify-between gap-4 py-2">
                                    <dt class="text-gray-500">{{ __('Paid') }}</dt>
                                    <dd class="font-semibold tabular-nums text-gray-900">{{ Payment::formatMoney($monthSummary['paid'], $currency) }}</dd>
                                </div>

                                <div class="flex items-center justify-between gap-4 py-2">
                                    <dt class="text-gray-500">{{ __('Remaining') }}</dt>
                                    <dd class="font-semibold tabular-nums {{ $monthSummary['remaining'] > 0 ? 'text-red-600' : 'text-emerald-600' }}">{{ Payment::formatMoney($monthSummary['remaining'], $currency) }}</dd>
                                </div>
                            </dl>

                            @if ($payment->status->isOpen())
                                <p class="text-xs text-gray-500">{{ __('This payment is still pending, so it is not counted in the figures above yet.') }}</p>
                            @endif
                        </div>
                    @endif

                    @can(PermissionName::UpdatePayments->value)
                        <div class="rounded-2xl bg-white p-6 shadow-raised">
                            <h3 class="text-base font-semibold text-gray-900">{{ __('Actions') }}</h3>

                            <div class="mt-4">
                                @include('payments.partials.table-actions', ['showView' => false])
                            </div>
                        </div>
                    @endcan
                </aside>
            </div>
        </div>
    </div>
</x-app-layout>