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

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

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('User details') }}
        </h2>
    </x-slot>

    <div class="py-8">
        <div class="flex flex-col gap-6 px-4 sm:px-6 lg:px-8">
            <x-toast :message="session('status')" />

            <div class="flex flex-wrap items-center justify-between gap-4">
                <a href="{{ route('users.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 users') }}
                </a>

                <div class="flex flex-wrap items-center gap-3">
                    @if ($account)
                        <x-secondary-button :href="route('payments.employee', $user)">{{ __('All payments') }}</x-secondary-button>
                    @endif

                    @can(PermissionName::CreatePayments->value)
                        <x-secondary-button :href="route('payments.create', ['employee' => $user->id])">{{ __('Record payment') }}</x-secondary-button>
                    @endcan

                    @if ($canUpdate)
                        <x-primary-button :href="route('users.edit', $user)">{{ __('Edit') }}</x-primary-button>
                    @endif
                </div>
            </div>

            <!-- Who they are -->
            <div class="overflow-hidden rounded-2xl bg-white shadow-raised">
                <div class="flex flex-col gap-6 bg-gradient-to-br from-slate-950 via-slate-900 to-brand-900 p-6 text-white sm:flex-row sm:items-center sm:justify-between sm:p-8">
                    <div class="flex items-center gap-4">
                        <x-avatar :user="$user" size="lg" shape="square" class="ring-4 ring-white/15" />

                        <div class="min-w-0">
                            <div class="truncate text-2xl font-bold">{{ $user->name }}</div>
                            <div class="truncate text-sm font-medium text-brand-300">{{ $user->designation() }}</div>
                            <div class="mt-1 font-mono text-xs tracking-[0.2em] text-slate-300">{{ $user->employee_id ?? '—' }}</div>
                        </div>
                    </div>

                    <div class="flex flex-wrap items-center gap-2 sm:justify-end">
                        <x-status-badge :active="$user->is_active" />

                        @foreach ($user->roles as $role)
                            <span class="inline-flex items-center rounded-full bg-white/10 px-2.5 py-0.5 text-xs font-medium ring-1 ring-white/20">{{ RoleName::labelFor($role->name) }}</span>
                        @endforeach
                    </div>
                </div>

                <dl class="grid grid-cols-1 gap-px bg-gray-100 sm:grid-cols-2 lg:grid-cols-4">
                    <div class="bg-white p-5">
                        <dt class="text-xs font-medium uppercase tracking-wider text-gray-500">{{ __('Email') }}</dt>
                        <dd class="mt-1 break-all font-semibold text-gray-900">{{ $user->email }}</dd>
                    </div>

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

                    <div class="bg-white p-5">
                        <dt class="text-xs font-medium uppercase tracking-wider text-gray-500">{{ __('Location') }}</dt>
                        <dd class="mt-1 font-semibold text-gray-900">
                            {{ $user->location?->name ?? __('No location') }}
                            <span class="block text-xs font-normal text-gray-500">{{ $user->location ? $user->location->place().' · ' : '' }}{{ __('Paid in :currency', ['currency' => $currency->value]) }}</span>
                        </dd>
                    </div>

                    <div class="bg-white p-5">
                        <dt class="text-xs font-medium uppercase tracking-wider text-gray-500">{{ __('Date of birth') }}</dt>
                        <dd class="mt-1 font-semibold text-gray-900">{{ $user->date_of_birth?->format('d F Y') ?? '—' }}</dd>
                    </div>

                    <div class="bg-white p-5 sm:col-span-2">
                        <dt class="text-xs font-medium uppercase tracking-wider text-gray-500">{{ __('Address') }}</dt>
                        <dd class="mt-1 font-semibold text-gray-900">
                            {{ collect([$user->address, $user->city, $user->country])->filter()->implode(', ') ?: '—' }}
                        </dd>
                    </div>

                    <div class="bg-white p-5">
                        <dt class="text-xs font-medium uppercase tracking-wider text-gray-500">{{ __('Emergency contact') }}</dt>
                        <dd class="mt-1 font-semibold text-gray-900">
                            {{ $user->emergency_contact_name ?? '—' }}
                            @if ($user->emergency_contact_phone)
                                <span class="block text-xs font-normal text-gray-500">{{ $user->emergency_contact_phone }}</span>
                            @endif
                        </dd>
                    </div>

                    <div class="bg-white p-5">
                        <dt class="text-xs font-medium uppercase tracking-wider text-gray-500">{{ __('Added') }}</dt>
                        <dd class="mt-1 font-semibold text-gray-900">
                            {{ $user->created_at->format('d M Y') }}
                            <span class="block text-xs font-normal text-gray-500">{{ __('Last updated :date', ['date' => $user->updated_at->format('d M Y')]) }}</span>
                        </dd>
                    </div>
                </dl>
            </div>

            @if ($account)
                <!-- How the money stands -->
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4">
                    <x-stat-card :label="__('Monthly salary')" :value="$user->salary !== null ? Payment::formatMoney($user->salary, $currency) : __('Not set')" :hint="__('Agreed monthly pay')">
                        <x-slot name="icon">
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
                            </svg>
                        </x-slot>
                    </x-stat-card>

                    <x-stat-card :label="__('Paid for :month', ['month' => now()->format('F')])" :value="Payment::formatMoney($account['thisMonth']['paid'], $currency)" :hint="$account['thisMonth']['remaining'] > 0 ? __(':amount still left', ['amount' => Payment::formatMoney($account['thisMonth']['remaining'], $currency)]) : $account['thisMonth']['status']->label()" tone="emerald">
                        <x-slot name="icon">
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </x-slot>
                    </x-stat-card>

                    <x-stat-card :label="__('Pending')" :value="$account['pending_total']" :hint="trans_choice(':count payment waiting|:count payments waiting', $account['pending_count'], ['count' => $account['pending_count']])" tone="amber">
                        <x-slot name="icon">
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </x-slot>
                    </x-stat-card>

                    <x-stat-card :label="__('Total paid')" :value="$account['paid_total']" :hint="trans_choice(':count payment all time|:count payments all time', $account['payments_count'], ['count' => $account['payments_count']])">
                        <x-slot name="icon">
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </x-slot>
                    </x-stat-card>
                </div>

                <div class="grid grid-cols-1 gap-6 xl:grid-cols-4">
                    <div class="xl:col-span-3">
                        @include('payments.partials.ledger', ['employee' => $user, 'ledger' => $account['ledger'], 'thisMonth' => $account['thisMonth']])
                    </div>

                    <div class="flex flex-col gap-6">
                        <!-- What has been paid under each type, all time -->
                        <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 by type') }}</h3>
                                <p class="text-sm text-gray-600">{{ __('Everything paid so far, all time.') }}</p>
                            </div>

                            @if ($account['by_type']->isEmpty())
                                <p class="rounded-xl bg-gray-50 p-4 text-sm text-gray-600 ring-1 ring-gray-100">{{ __('Nothing paid yet.') }}</p>
                            @else
                                <dl class="divide-y divide-gray-100 text-sm">
                                    @foreach (\App\Enums\PaymentType::cases() as $type)
                                        @if ($account['by_type']->has($type->value))
                                            <div class="flex items-center justify-between gap-4 py-2">
                                                <dt><x-badge :tone="$type->tone()">{{ $type->label() }}</x-badge></dt>
                                                <dd class="font-semibold tabular-nums text-gray-900">{{ $account['by_type'][$type->value] }}</dd>
                                            </div>
                                        @endif
                                    @endforeach

                                    <div class="flex items-center justify-between gap-4 py-2">
                                        <dt class="font-semibold text-gray-900">{{ __('Total') }}</dt>
                                        <dd class="font-bold tabular-nums text-gray-900">{{ $account['paid_total'] }}</dd>
                                    </div>
                                </dl>
                            @endif
                        </div>

                        @include('payments.partials.salary-history', ['employee' => $user, 'editUrl' => $canUpdate ? route('users.edit', $user).'#salary' : null])
                    </div>
                </div>

                <!-- The latest payments -->
                <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">{{ __('Latest payments') }}</h3>
                            <p class="text-sm text-gray-600">{{ __('The most recent ones. The full list, with filters, is under All payments.') }}</p>
                        </div>

                        <x-secondary-button :href="route('payments.employee', $user)">{{ __('All payments') }}</x-secondary-button>
                    </div>

                    @if ($account['recent']->isEmpty())
                        <p class="px-6 py-8 text-center text-sm text-gray-500">{{ __('No 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-6 py-3 text-start">{{ __('Type') }}</th>
                                        <th class="px-6 py-3 text-start">{{ __('Amount') }}</th>
                                        <th class="px-6 py-3 text-start">{{ __('Paid via') }}</th>
                                        <th class="px-6 py-3 text-start">{{ __('Date') }}</th>
                                        <th class="px-6 py-3 text-start">{{ __('Status') }}</th>
                                        <th class="px-6 py-3 text-end">{{ __('Actions') }}</th>
                                    </tr>
                                </thead>

                                <tbody class="divide-y divide-gray-100">
                                    @foreach ($account['recent'] as $payment)
                                        <tr class="hover:bg-gray-50">
                                            <td class="px-6 py-3"><x-badge :tone="$payment->type->tone()">{{ $payment->type->label() }}</x-badge></td>
                                            <td class="px-6 py-3">@include('payments.partials.table-amount')</td>
                                            <td class="px-6 py-3">@include('payments.partials.table-method')</td>
                                            <td class="px-6 py-3">@include('payments.partials.table-date')</td>
                                            <td class="px-6 py-3"><x-badge :tone="$payment->status->tone()" dot>{{ $payment->status->label() }}</x-badge></td>
                                            <td class="px-6 py-3 text-end">
                                                <x-table-action :href="route('payments.show', $payment)">{{ __('View') }}</x-table-action>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            @endif
        </div>
    </div>
</x-app-layout>