{{--
    One appointment, seen from whichever end the reader is at.

    The actions offered come from the status's own transition map rather than
    from a condition written here, so the screen cannot drift from the rules the
    service actually enforces.
--}}
@php
    $isSeller = $appointment->isSeller($user);
    $other = $isSeller ? $appointment->buyer : $appointment->seller;
    $transitions = $appointment->status->allowedTransitions();
@endphp

<article class="rounded-xl border border-border bg-surface p-5">
    <div class="flex flex-wrap items-start justify-between gap-4">
        <div class="min-w-0">
            <div class="flex flex-wrap items-center gap-2">
                <x-badge :variant="$appointment->status->badgeVariant()">
                    {{ $appointment->status->label() }}
                </x-badge>

                <x-badge variant="muted">{{ $appointment->type->label() }}</x-badge>
            </div>

            <p class="mt-2 font-display text-base font-semibold text-text">
                {{ $appointment->whenLabel() }}
            </p>

            @if ($appointment->previous_scheduled_at)
                <p class="mt-0.5 text-xs text-text-muted">
                    {{ __('Moved from :when', ['when' => $appointment->previous_scheduled_at->format('D j M, H:i')]) }}
                </p>
            @endif

            @if ($appointment->listing)
                <p class="mt-1.5 truncate text-sm text-text-secondary">{{ $appointment->listing->title }}</p>
            @endif

            <p class="mt-1 text-xs text-text-muted">
                {{ $isSeller ? __('Requested by :name', ['name' => $appointment->name]) : __('With :name', ['name' => $other?->name ?? __('the seller')]) }}

                @if ($isSeller && $appointment->contactLabel())
                    <span aria-hidden="true">·</span> {{ $appointment->contactLabel() }}
                @endif
            </p>

            @if ($appointment->location)
                <p class="mt-1 text-xs text-text-muted">{{ $appointment->location }}</p>
            @endif

            @if ($appointment->note)
                <p class="mt-3 text-sm text-text-secondary">“{{ $appointment->note }}”</p>
            @endif

            @if ($appointment->response_note)
                <p class="mt-2 rounded-lg bg-surface-muted px-3 py-2 text-sm text-text-secondary">
                    {{ $appointment->response_note }}
                </p>
            @endif
        </div>
    </div>

    @if ($transitions && ! $appointment->isPast())
        <form action="{{ route('account.appointments.update', $appointment) }}" method="POST"
              class="mt-5 space-y-4 border-t border-border pt-4"
              x-data="{ status: '' }">
            @csrf @method('PUT')

            <div class="flex flex-wrap gap-2">
                @foreach ($transitions as $target)
                    <label @class([
                        'inline-flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 text-sm transition',
                    ])
                           :class="status === '{{ $target->value }}' ? 'border-primary bg-primary/10' : 'border-border hover:border-text-muted'">
                        <input type="radio" name="status" value="{{ $target->value }}" x-model="status"
                               class="accent-primary">
                        {{ $target->label() }}
                    </label>
                @endforeach
            </div>

            {{-- Proposing a time needs a time; nothing else does. --}}
            <div x-show="status === 'rescheduled'" x-cloak>
                <label for="scheduled_at-{{ $appointment->id }}" class="form-label">{{ __('New time') }}</label>
                <input id="scheduled_at-{{ $appointment->id }}" type="datetime-local" name="scheduled_at"
                       class="form-input" min="{{ now()->format('Y-m-d\TH:i') }}">
            </div>

            <div x-show="status !== ''" x-cloak class="space-y-3">
                <div>
                    <label for="note-{{ $appointment->id }}" class="form-label">{{ __('Message') }}</label>
                    <textarea id="note-{{ $appointment->id }}" name="note" rows="2" class="form-input"
                              placeholder="{{ __('Optional — the other person sees this.') }}"></textarea>
                </div>

                <button type="submit" class="btn-primary btn-sm">{{ __('Send') }}</button>
            </div>
        </form>
    @endif
</article>