@extends('layouts.account')

@section('title', __('Negotiation'))
@section('heading', $negotiation->listing?->title ?? __('Negotiation'))
@section('subheading', $negotiation->isSeller($user)
    ? __('With :name', ['name' => $negotiation->buyer?->name])
    : __('With :name', ['name' => $negotiation->seller?->name]))

@section('account')
    @if (session('error'))
        <x-alert type="error" class="mb-6">{{ session('error') }}</x-alert>
    @endif

    @php($yourTurn = $negotiation->awaitingReplyFrom($user))
    @php($yours = $pending?->isFrom($user))

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="space-y-6 lg:col-span-2">
            {{--
                The history, oldest first. Nothing here is ever edited — each
                round answers the one before it, which is what makes "they came
                down twice" a fact rather than a recollection.
            --}}
            <section class="rounded-xl border border-border bg-surface p-6" aria-labelledby="history">
                <h2 id="history" class="font-display text-title font-bold text-text">{{ __('History') }}</h2>

                <ol class="mt-5 space-y-4">
                    @foreach ($negotiation->history as $offer)
                        @php($mine = $offer->isFrom($user))

                        <li @class(['flex', 'justify-end' => $mine])>
                            <div @class([
                                'max-w-md rounded-2xl px-4 py-3',
                                'bg-primary/15' => $mine,
                                'border border-border bg-surface' => ! $mine,
                            ])>
                                <p class="flex flex-wrap items-center gap-2">
                                    <span class="font-display text-base font-bold text-text">
                                        {{ $offer->formattedAmount() }}
                                    </span>

                                    <x-badge :variant="$offer->status->badgeVariant()">
                                        {{ $offer->status->label() }}
                                    </x-badge>
                                </p>

                                <p class="mt-1 text-xs text-text-muted">
                                    {{ $mine ? __('You') : $offer->user?->name }}
                                    · {{ $offer->created_at->format('j M Y, H:i') }}
                                </p>

                                @if ($offer->message)
                                    <p class="mt-2 text-sm text-text-secondary">“{{ $offer->message }}”</p>
                                @endif

                                @if ($offer->conditions)
                                    <p class="mt-2 text-xs text-text-secondary">
                                        <span class="meta-label">{{ __('Conditions') }}</span>
                                        {{ $offer->conditions }}
                                    </p>
                                @endif
                            </div>
                        </li>
                    @endforeach
                </ol>
            </section>

            @if ($negotiation->status->isOpen() && $pending)
                <section class="rounded-xl border border-border bg-surface p-6" aria-labelledby="respond">
                    <h2 id="respond" class="font-display text-title font-bold text-text">
                        {{ $yourTurn ? __('Your answer') : __('Waiting for a reply') }}
                    </h2>

                    @if ($yourTurn)
                        <form action="{{ route('account.offers.respond', $negotiation) }}" method="POST"
                              class="mt-5 space-y-4" x-data="{ action: '' }">
                            @csrf

                            <div class="flex flex-wrap gap-2">
                                @foreach ([
                                    'accept' => __('Accept'),
                                    'counter' => __('Counter'),
                                    'reject' => __('Reject'),
                                ] as $value => $label)
                                    <label class="inline-flex cursor-pointer items-center gap-2 rounded-lg border px-3.5 py-2 text-sm transition"
                                           :class="action === '{{ $value }}' ? 'border-primary bg-primary/10' : 'border-border hover:border-text-muted'">
                                        <input type="radio" name="action" value="{{ $value }}" x-model="action"
                                               class="accent-primary" required>
                                        {{ $label }}
                                    </label>
                                @endforeach
                            </div>

                            <div x-show="action === 'counter'" x-cloak>
                                <label for="amount" class="form-label">{{ __('Your counter-offer') }}</label>
                                <input id="amount" type="number" name="amount" step="1" min="1" class="form-input"
                                       placeholder="{{ number_format(($negotiation->latest_amount ?? 0) / 100) }}">
                                @error('amount')<p class="form-error">{{ $message }}</p>@enderror
                            </div>

                            <div x-show="action !== ''" x-cloak class="space-y-4">
                                <div x-show="action === 'counter'">
                                    <label for="conditions" class="form-label">{{ __('Conditions') }}</label>
                                    <textarea id="conditions" name="conditions" rows="2" class="form-input"
                                              placeholder="{{ __('Subject to survey, chain-free, completion date…') }}"></textarea>
                                </div>

                                <div>
                                    <label for="message" class="form-label">{{ __('Message') }}</label>
                                    <textarea id="message" name="message" rows="3" class="form-input"></textarea>
                                </div>

                                <button type="submit" class="btn btn-primary">{{ __('Send') }}</button>
                            </div>
                        </form>
                    @else
                        <p class="mt-3 text-sm text-text-secondary">
                            {{ __('Your offer of :amount is with them.', ['amount' => $pending->formattedAmount()]) }}
                            @if ($pending->expires_at)
                                {{ __('It stands until :date.', ['date' => $pending->expires_at->format('j M Y')]) }}
                            @endif
                        </p>

                        @if ($yours)
                            <form action="{{ route('account.offers.respond', $negotiation) }}" method="POST" class="mt-4"
                                  x-data="confirmAction('{{ __('Withdraw this offer?') }}')" @submit="confirm($event)">
                                @csrf
                                <input type="hidden" name="action" value="withdraw">
                                <button type="submit" class="btn-outline btn-sm">{{ __('Withdraw') }}</button>
                            </form>
                        @endif
                    @endif
                </section>
            @endif
        </div>

        <div class="space-y-6">
            @if ($negotiation->listing)
                <div class="rounded-xl border border-border bg-surface p-5">
                    <x-image :src="$negotiation->listing->cover_image" :alt="$negotiation->listing->title"
                             ratio="4/3" rounded="rounded-lg" />

                    <p class="mt-4 font-display text-base font-semibold text-text">
                        {{ $negotiation->listing->title }}
                    </p>

                    <dl class="mt-4 space-y-2 border-t border-border pt-4 text-sm">
                        <div class="flex justify-between gap-4">
                            <dt class="text-text-secondary">{{ __('Asking') }}</dt>
                            <dd class="font-medium text-text">{{ $negotiation->listing->formattedPrice() }}</dd>
                        </div>

                        <div class="flex justify-between gap-4">
                            <dt class="text-text-secondary">{{ __('Latest offer') }}</dt>
                            <dd class="font-medium text-text">{{ $negotiation->formattedLatest() }}</dd>
                        </div>

                        @if (($gap = $negotiation->gapToAsking()) !== null)
                            <div class="flex justify-between gap-4">
                                <dt class="text-text-secondary">{{ __('Difference') }}</dt>
                                <dd @class([
                                    'font-medium',
                                    'text-error' => $gap < 0,
                                    'text-success' => $gap >= 0,
                                ])>{{ $gap > 0 ? '+' : '' }}{{ $gap }}%</dd>
                            </div>
                        @endif
                    </dl>
                </div>
            @endif
        </div>
    </div>
@endsection