@use('App\Enums\PaymentMethod')
@use('App\Enums\PaymentStatus')
@use('App\Enums\PaymentType')

@php
$payment ??= null;
$selectedEmployeeId ??= null;
$selectedMonth ??= null;
$selectedUserId = (int) old('user_id', $payment?->user_id ?? $selectedEmployeeId ?? 0);
$selectedType = old('type', $payment?->type->value ?? PaymentType::Salary->value);
// Recording lets several types be paid together; editing changes one payment.
$recording = $payment === null;
$oldAmounts = collect(PaymentType::cases())->mapWithKeys(fn (PaymentType $type): array => [$type->value => (string) old("amounts.{$type->value}", '')]);
$selectedMethod = old('method', $payment?->method->value ?? PaymentMethod::BankTransfer->value);
$selectedStatus = old('status', $payment?->status->value ?? PaymentStatus::Paid->value);
$paidOn = old('paid_on', $payment?->paid_on?->format('Y-m-d') ?? now()->format('Y-m-d'));
$periodMonth = old('period_month', $payment?->period_month?->format('Y-m') ?? $selectedMonth ?? now()->format('Y-m'));
// A month that came back from a failed submit is stored as a full date; show it as a month again.
$periodMonth = preg_match('/^\d{4}-\d{2}-\d{2}$/', (string) $periodMonth) ? substr($periodMonth, 0, 7) : $periodMonth;
@endphp

<x-toast :message="$errors->any() ? __('Please fix the fields marked in red.') : null" icon="error" />

<div
    x-data="{
        userId: @js((string) ($selectedUserId ?: '')),
        employees: @js($employees->mapWithKeys(fn ($employee): array => [(string) $employee->id => $employee->name])),
        employeeCurrencies: @js($employees->mapWithKeys(fn ($employee): array => [(string) $employee->id => $employee->currency()->value])),
        defaultCurrency: @js(\App\Enums\Currency::default()->value),
        get currency() {
            return this.employeeCurrencies[this.userId] ?? this.defaultCurrency;
        },
        type: @js($selectedType),
        typeLabels: @js(collect(PaymentType::cases())->mapWithKeys(fn (PaymentType $type): array => [$type->value => $type->label()])),
        recording: @js($recording),
        amount: @js(old('amount', $payment?->amount ?? '')),
        amounts: @js($oldAmounts),
        number(value) {
            const number = Number(String(value ?? '').replace(/[^0-9.]/g, ''));

            return Number.isNaN(number) ? 0 : number;
        },
        get total() {
            return this.recording
                ? Object.values(this.amounts).reduce((sum, value) => sum + this.number(value), 0)
                : this.number(this.amount);
        },
        get lines() {
            return Object.entries(this.amounts)
                .filter(([, value]) => this.number(value) > 0)
                .map(([type, value]) => ({ type, label: this.typeLabels[type], amount: this.formatMoney(this.number(value)) }));
        },
        method: @js($selectedMethod),
        methodLabels: @js(collect(PaymentMethod::cases())->mapWithKeys(fn (PaymentMethod $method): array => [$method->value => $method->label()])),
        methodHints: @js(collect(PaymentMethod::cases())->mapWithKeys(fn (PaymentMethod $method): array => [$method->value => $method->destinationHint()])),
        paidTo: @js(old('paid_to', $payment?->paid_to ?? '')),
        paidOn: @js($paidOn),
        periodMonth: @js($periodMonth),
        status: @js($selectedStatus),
        statusLabels: @js(collect(PaymentStatus::cases())->mapWithKeys(fn (PaymentStatus $status): array => [$status->value => $status->label()])),
        summaryUrl: @js(route('payments.salary-summary')),
        summary: null,
        summaryFor: '',
        async loadSummary() {
            if (! this.userId || ! this.periodMonth || (! this.recording && ! this.salaryTypes.includes(this.type))) {
                this.summary = null;

                return;
            }

            const key = `${this.userId}:${this.periodMonth}`;

            if (this.summaryFor === key) {
                return;
            }

            this.summaryFor = key;

            try {
                const response = await fetch(`${this.summaryUrl}?user_id=${this.userId}&month=${this.periodMonth}`, { headers: { Accept: 'application/json' } });

                this.summary = response.ok ? await response.json() : null;
            } catch {
                this.summary = null;
            }
        },
        salaryTypes: @js(array_column(PaymentType::salaryTypes(), 'value')),
        useRemaining() {
            if (! this.summary || this.summary.remaining <= 0) {
                return;
            }

            if (this.recording) {
                this.amounts.salary = this.summary.remaining;
            } else {
                this.amount = this.summary.remaining;
            }
        },
        formatMoney(number) {
            try {
                return new Intl.NumberFormat('en', { style: 'currency', currency: this.currency }).format(number);
            } catch {
                return number.toLocaleString('en', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            }
        },
        formattedAmount() {
            return this.total > 0 ? this.formatMoney(this.total) : '—';
        },
        formattedDate() {
            if (! this.paidOn) {
                return '—';
            }

            const date = new Date(`${this.paidOn}T00:00:00`);

            return Number.isNaN(date.getTime()) ? this.paidOn : date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
        },
        formattedPeriod() {
            if (! this.periodMonth) {
                return null;
            }

            const date = new Date(`${this.periodMonth}-01T00:00:00`);

            return Number.isNaN(date.getTime()) ? this.periodMonth : date.toLocaleDateString('en-GB', { month: 'long', year: 'numeric' });
        },
    }"
    x-init="loadSummary(); $watch('userId', () => loadSummary()); $watch('periodMonth', () => loadSummary()); $watch('type', () => loadSummary())"
    class="grid grid-cols-1 gap-8 xl:grid-cols-3"
>
    <div class="flex flex-col gap-6 xl:col-span-2">
        <x-form-panel step="1" :title="__('Who and what for')" :description="__('Pick the employee and what this payment is for.')">
            <div>
                <x-input-label for="user_id" :value="__('Employee')" />
                <x-select-input id="user_id" name="user_id" x-model="userId" class="mt-1 block w-full" autofocus>
                    <option value="">{{ __('Choose an employee…') }}</option>

                    @foreach ($employees as $employee)
                        <option value="{{ $employee->id }}" @selected($selectedUserId === $employee->id)>
                            {{ $employee->name }}{{ $employee->employee_id ? " ({$employee->employee_id})" : '' }}{{ $employee->location ? ' · '.$employee->location->name : '' }} · {{ $employee->currency()->value }}{{ $employee->is_active ? '' : ' — '.__('inactive') }}
                        </option>
                    @endforeach
                </x-select-input>
                <x-input-error class="mt-2" :messages="$errors->get('user_id')" />
            </div>

            @if ($recording)
                <fieldset>
                    <legend class="block font-medium text-sm text-gray-700">{{ __('What is being paid') }}</legend>
                    <p class="mt-1 text-sm text-gray-600">{{ __('Fill in every amount that applies, like the salary plus a bonus. Leave the rest empty. Each one is kept as its own payment, recorded together.') }}</p>

                    <div class="mt-3 divide-y divide-gray-100 overflow-hidden rounded-xl border border-gray-200">
                        @foreach (PaymentType::cases() as $type)
                            <div class="grid grid-cols-1 gap-3 p-4 transition duration-150 sm:grid-cols-[1fr_14rem] sm:items-center" :class="number(amounts.{{ $type->value }}) > 0 ? 'bg-brand-50/60' : 'bg-white'">
                                <div class="min-w-0">
                                    <label for="amounts_{{ $type->value }}">
                                        <span class="block text-sm font-semibold text-gray-900">{{ $type->label() }}</span>
                                        <span class="block text-sm text-gray-600">{{ $type->description() }}</span>
                                    </label>

                                    @if ($type === PaymentType::Salary)
                                        {{-- What the employee's salary actually is for the chosen month, so the amount can be checked against it. --}}
                                        <template x-if="summary && summary.has_salary">
                                            <span class="mt-2 inline-flex flex-wrap items-center gap-x-1.5 gap-y-1 rounded-lg bg-white px-2.5 py-1.5 text-xs text-gray-700 ring-1 ring-gray-200">
                                                <span x-text="summary.month"></span> {{ __('salary') }}
                                                <strong class="tabular-nums text-gray-900" x-text="summary.formatted.salary"></strong>
                                                <span class="text-gray-400">·</span>
                                                {{ __('paid') }} <strong class="tabular-nums text-gray-900" x-text="summary.formatted.paid"></strong>
                                                <span class="text-gray-400">·</span>
                                                {{ __('remaining') }} <strong class="tabular-nums" :class="summary.remaining > 0 ? 'text-red-600' : 'text-emerald-600'" x-text="summary.formatted.remaining"></strong>
                                            </span>
                                        </template>

                                        <template x-if="summary && ! summary.has_salary">
                                            <span class="mt-2 inline-flex rounded-lg bg-amber-50 px-2.5 py-1.5 text-xs text-amber-800 ring-1 ring-amber-200">
                                                {{ __('No salary is set for this employee for') }}&nbsp;<span x-text="summary.month"></span>.
                                            </span>
                                        </template>

                                        <template x-if="! summary">
                                            <span class="mt-2 block text-xs text-gray-500">{{ __('Choose an employee to see their monthly salary here.') }}</span>
                                        </template>
                                    @endif
                                </div>

                                <div>
                                    <div class="relative">
                                        <span class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3 text-sm font-medium text-gray-500" x-text="currency"></span>
                                        <x-text-input id="amounts_{{ $type->value }}" name="amounts[{{ $type->value }}]" type="text" inputmode="decimal" x-model="amounts.{{ $type->value }}" class="block w-full ps-14 tabular-nums" :value="$oldAmounts[$type->value]" :invalid="$errors->has('amounts.'.$type->value)" autocomplete="off" placeholder="0" />
                                    </div>

                                    @if ($type === PaymentType::Salary)
                                        <template x-if="summary && summary.has_salary && summary.remaining > 0 && number(amounts.salary) !== summary.remaining">
                                            <button type="button" @click="useRemaining()" class="mt-1.5 text-xs font-medium text-brand-700 hover:text-brand-900 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 rounded">
                                                {{ __('Fill in the remaining') }} <span class="tabular-nums" x-text="summary.formatted.remaining"></span>
                                            </button>
                                        </template>
                                    @endif

                                    <x-input-error class="mt-2" :messages="$errors->get('amounts.'.$type->value)" />
                                </div>
                            </div>
                        @endforeach

                        <div class="flex items-center justify-between gap-4 bg-gray-50 px-4 py-3">
                            <span class="text-sm font-semibold text-gray-900">{{ __('Total') }}</span>
                            <span class="text-lg font-bold tabular-nums text-gray-900" x-text="formattedAmount()"></span>
                        </div>
                    </div>

                    <x-input-error class="mt-2" :messages="$errors->get('amounts')" />
                </fieldset>
            @else
                <fieldset>
                    <legend class="block font-medium text-sm text-gray-700">{{ __('Type') }}</legend>

                    <div class="mt-2 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach (PaymentType::cases() as $type)
                            <x-choice-card name="type" :value="$type->value" :checked="$selectedType === $type->value" :label="$type->label()" :description="$type->description()" x-model="type" />
                        @endforeach
                    </div>

                    <x-input-error class="mt-2" :messages="$errors->get('type')" />
                </fieldset>
            @endif
        </x-form-panel>

        <x-form-panel step="2" :title="$recording ? __('Dates') : __('Amount and dates')" :description="$recording ? __('When it was paid and which month it covers.') : __('How much was paid, when, and which month it covers.')">
            <div class="grid grid-cols-1 gap-6 {{ $recording ? 'sm:grid-cols-2' : 'sm:grid-cols-3' }}">
                @unless ($recording)
                    <div>
                        <x-input-label for="amount" :value="__('Amount')" />

                        <div class="relative mt-1">
                            <span class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3 text-sm font-medium text-gray-500" x-text="currency"></span>
                            <x-text-input id="amount" name="amount" type="text" inputmode="decimal" x-model="amount" class="block w-full ps-14 tabular-nums" :value="old('amount', $payment?->amount)" autocomplete="off" placeholder="50000" />
                        </div>

                        <x-input-error class="mt-2" :messages="$errors->get('amount')" />
                    </div>
                @endunless

                <div>
                    <x-input-label for="paid_on" :value="__('Payment date')" />
                    <x-text-input id="paid_on" name="paid_on" type="date" x-model="paidOn" class="mt-1 block w-full" :value="$paidOn" />
                    <p class="mt-1 text-sm text-gray-600">{{ __('When the money went out, or is planned to.') }}</p>
                    <x-input-error class="mt-2" :messages="$errors->get('paid_on')" />
                </div>

                <div>
                    <x-input-label for="period_month" :value="__('For month')" />
                    <x-text-input id="period_month" name="period_month" type="month" x-model="periodMonth" class="mt-1 block w-full" :value="$periodMonth" />
                    <p class="mt-1 text-sm text-gray-600">{{ __('Optional. The salary month this covers.') }}</p>
                    <x-input-error class="mt-2" :messages="$errors->get('period_month')" />
                </div>
            </div>

            {{-- What the month looks like for this employee, so the amount can be checked against the salary. --}}
            <template x-if="summary">
                <div class="flex flex-col gap-3 rounded-xl border p-4 text-sm sm:flex-row sm:items-center sm:justify-between" :class="summary.has_salary ? 'border-brand-100 bg-brand-50' : 'border-amber-200 bg-amber-50'">
                    <div class="min-w-0">
                        <template x-if="summary.has_salary">
                            <div>
                                <div class="font-semibold text-gray-900">
                                    <span x-text="summary.month"></span>: {{ __('salary') }} <span class="tabular-nums" x-text="summary.formatted.salary"></span>
                                </div>
                                <div class="text-gray-600">
                                    {{ __('Already paid') }} <span class="font-medium tabular-nums text-gray-900" x-text="summary.formatted.paid"></span>
                                    · {{ __('remaining') }} <span class="font-medium tabular-nums" :class="summary.remaining > 0 ? 'text-red-600' : 'text-emerald-600'" x-text="summary.formatted.remaining"></span>
                                    <span class="text-gray-500">(<span x-text="summary.status"></span>)</span>
                                </div>
                            </div>
                        </template>

                        <template x-if="! summary.has_salary">
                            <div class="text-gray-700">
                                {{ __('No salary is set for this employee for') }} <span x-text="summary.month"></span>. {{ __('Set it when editing the employee, then the remaining amount shows here.') }}
                            </div>
                        </template>
                    </div>

                    <template x-if="summary.has_salary && summary.remaining > 0">
                        <x-secondary-button type="button" @click="useRemaining()" class="shrink-0">
                            {{ $recording ? __('Put remaining in salary') : __('Use remaining amount') }}
                        </x-secondary-button>
                    </template>
                </div>
            </template>
        </x-form-panel>

        <x-form-panel step="3" :title="__('Where the money went')" :description="__('How it was paid and the account or wallet it was sent to.')">
            <fieldset>
                <legend class="block font-medium text-sm text-gray-700">{{ __('Paid via') }}</legend>

                <div class="mt-2 grid grid-cols-2 gap-3 sm:grid-cols-3">
                    @foreach (PaymentMethod::cases() as $method)
                        <x-choice-card name="method" :value="$method->value" :checked="$selectedMethod === $method->value" :label="$method->label()" x-model="method" />
                    @endforeach
                </div>

                <x-input-error class="mt-2" :messages="$errors->get('method')" />
            </fieldset>

            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div>
                    <x-input-label for="paid_to" :value="__('Paid to')" />
                    <x-text-input id="paid_to" name="paid_to" type="text" x-model="paidTo" class="mt-1 block w-full" :value="old('paid_to', $payment?->paid_to)" autocomplete="off" ::placeholder="methodHints[method] ?? ''" />
                    <p class="mt-1 text-sm text-gray-600" x-text="methodHints[method] ?? ''"></p>
                    <x-input-error class="mt-2" :messages="$errors->get('paid_to')" />
                </div>

                <div>
                    <x-input-label for="reference" :value="__('Reference')" />
                    <x-text-input id="reference" name="reference" type="text" class="mt-1 block w-full font-mono" :value="old('reference', $payment?->reference)" autocomplete="off" placeholder="{{ __('e.g. TXN-20261006-0042') }}" />
                    <p class="mt-1 text-sm text-gray-600">{{ __('Optional. The transaction or cheque number.') }}</p>
                    <x-input-error class="mt-2" :messages="$errors->get('reference')" />
                </div>
            </div>
        </x-form-panel>

        <x-form-panel step="4" :title="__('Status and notes')" :description="__('Has the money gone out yet? Add anything worth remembering.')">
            <fieldset>
                <legend class="sr-only">{{ __('Status') }}</legend>

                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
                    @foreach (PaymentStatus::cases() as $status)
                        <x-choice-card name="status" :value="$status->value" :checked="$selectedStatus === $status->value" :label="$status->label()" :description="$status->description()" x-model="status" />
                    @endforeach
                </div>

                <x-input-error class="mt-2" :messages="$errors->get('status')" />
            </fieldset>

            <div>
                <x-input-label for="notes" :value="__('Notes')" />
                <x-textarea-input id="notes" name="notes" class="mt-1 block w-full" placeholder="{{ __('e.g. Includes 2 days overtime') }}">{{ old('notes', $payment?->notes) }}</x-textarea-input>
                <x-input-error class="mt-2" :messages="$errors->get('notes')" />
            </div>
        </x-form-panel>

        <div class="flex items-center justify-end gap-3 rounded-2xl bg-white px-6 py-4 shadow-raised sm:px-8">
            <x-secondary-button :href="route('payments.index')">{{ __('Cancel') }}</x-secondary-button>

            <x-primary-button>
                @unless ($payment)
                    <x-icon-plus />
                @endunless

                {{ $submitLabel }}
            </x-primary-button>
        </div>
    </div>

    <aside class="flex flex-col gap-6 self-start xl:sticky xl:top-8">
        {{-- A receipt that fills in as the form is typed. --}}
        <div class="overflow-hidden rounded-2xl bg-white shadow-raised">
            <div class="bg-gradient-to-br from-slate-950 via-slate-900 to-brand-900 p-6 text-white">
                <div class="text-[0.65rem] font-semibold uppercase tracking-[0.25em] text-brand-300">{{ __('Payment summary') }}</div>
                <div class="mt-2 truncate text-3xl font-bold tabular-nums" x-text="formattedAmount()"></div>
                <div class="mt-1 truncate text-sm text-slate-300" x-text="employees[userId] ?? '{{ __('No employee chosen yet') }}'"></div>
            </div>

            <dl class="divide-y divide-gray-100 px-6 text-sm">
                @if ($recording)
                    <template x-if="lines.length === 0">
                        <div class="flex items-center justify-between gap-4 py-3">
                            <dt class="text-gray-500">{{ __('Type') }}</dt>
                            <dd class="font-semibold text-gray-900">—</dd>
                        </div>
                    </template>

                    <template x-for="line in lines" :key="line.type">
                        <div class="flex items-center justify-between gap-4 py-3">
                            <dt class="text-gray-500" x-text="line.label"></dt>
                            <dd class="font-semibold tabular-nums text-gray-900" x-text="line.amount"></dd>
                        </div>
                    </template>
                @else
                    <div class="flex items-center justify-between gap-4 py-3">
                        <dt class="text-gray-500">{{ __('Type') }}</dt>
                        <dd class="font-semibold text-gray-900" x-text="typeLabels[type] ?? '—'"></dd>
                    </div>
                @endif

                <div class="flex items-center justify-between gap-4 py-3">
                    <dt class="text-gray-500">{{ __('Paid via') }}</dt>
                    <dd class="truncate text-end font-semibold text-gray-900">
                        <span x-text="methodLabels[method] ?? '—'"></span>
                        <span x-show="paidTo" class="block truncate text-xs font-normal text-gray-500" x-text="paidTo"></span>
                    </dd>
                </div>

                <div class="flex items-center justify-between gap-4 py-3">
                    <dt class="text-gray-500">{{ __('Date') }}</dt>
                    <dd class="font-semibold text-gray-900" x-text="formattedDate()"></dd>
                </div>

                <div class="flex items-center justify-between gap-4 py-3" x-show="formattedPeriod()">
                    <dt class="text-gray-500">{{ __('For month') }}</dt>
                    <dd class="font-semibold text-gray-900" x-text="formattedPeriod()"></dd>
                </div>

                <div class="flex items-center justify-between gap-4 py-3">
                    <dt class="text-gray-500">{{ __('Status') }}</dt>
                    <dd class="font-semibold text-gray-900" x-text="statusLabels[status] ?? '—'"></dd>
                </div>
            </dl>
        </div>

        <div class="flex flex-col gap-3 rounded-2xl bg-white p-6 text-sm shadow-raised">
            <h3 class="text-base font-semibold text-gray-900">{{ __('Good to know') }}</h3>

            <ul class="flex flex-col gap-3 text-gray-700">
                <li class="flex items-start gap-2">
                    <svg class="mt-0.5 h-4 w-4 shrink-0 text-brand-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                    </svg>
                    {{ $recording ? __('Paying a salary and a bonus at the same time? Fill in both amounts and they are recorded together.') : __('Mark a payment Pending when it is planned, and Paid once the money has actually reached the employee.') }}
                </li>

                <li class="flex items-start gap-2">
                    <svg class="mt-0.5 h-4 w-4 shrink-0 text-brand-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                    </svg>
                    {{ __('"Paid to" and the reference make it easy to match the record with your bank statement later.') }}
                </li>

                <li class="flex items-start gap-2">
                    <svg class="mt-0.5 h-4 w-4 shrink-0 text-brand-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                    </svg>
                    {{ __('The employee can see their own payments under My payments, but cannot change them.') }}
                </li>
            </ul>
        </div>
    </aside>
</div>