@extends('layouts.account')

@section('title', $lead->name)
@section('heading', $lead->name)
@section('subheading', $lead->listing?->title)

@section('actions')
    <x-button variant="outline" :href="route('account.leads.index')">{{ __('Back to enquiries') }}</x-button>
@endsection

@section('account')
    <div class="grid gap-6 lg:grid-cols-3">
        <div class="space-y-6 lg:col-span-2">
            <section class="rounded-xl border border-border bg-surface p-6" aria-labelledby="enquiry">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <h2 id="enquiry" class="font-display text-title font-bold text-text">{{ __('The enquiry') }}</h2>

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

                <p class="mt-1.5 text-sm text-text-muted">
                    {{ $lead->source->label() }} · {{ $lead->created_at->format('d M Y, H:i') }}
                </p>

                @if ($lead->message)
                    <p class="mt-5 whitespace-pre-line text-sm text-text-secondary">{{ $lead->message }}</p>
                @endif

                {{-- The contact details are the point of the page: a seller
                     opening this on a phone should be able to call back. --}}
                <dl class="mt-6 space-y-3 border-t border-border pt-5 text-sm">
                    @foreach ([
                        ['phone', __('Phone'), $lead->phone, $lead->phone ? 'tel:'.preg_replace('/\s+/', '', $lead->phone) : null],
                        ['mail', __('Email'), $lead->email, $lead->email ? 'mailto:'.$lead->email : null],
                    ] as [$icon, $label, $value, $href])
                        @if (filled($value))
                            <div class="flex items-center gap-3">
                                <x-icon :name="$icon" class="size-4 shrink-0 text-text-muted" />
                                <dt class="sr-only">{{ $label }}</dt>
                                <dd>
                                    <a href="{{ $href }}" class="font-medium text-text-brand underline-offset-4 hover:underline">
                                        {{ $value }}
                                    </a>
                                </dd>
                            </div>
                        @endif
                    @endforeach
                </dl>

                @if ($lead->conversation)
                    <x-button variant="outline" class="mt-5"
                              :href="route('account.messages.show', $lead->conversation)" arrow>
                        {{ __('Reply in the conversation') }}
                    </x-button>
                @else
                    <p class="mt-5 text-xs text-text-muted">
                        {{ __('This enquiry came from someone without an account, so there is no thread — use the phone number or email above.') }}
                    </p>
                @endif
            </section>

            @if ($lead->listing)
                <section class="rounded-xl border border-border bg-surface p-6" aria-labelledby="about">
                    <h2 id="about" class="font-display text-title font-bold text-text">{{ __('About') }}</h2>

                    <a href="{{ $lead->listing->publicUrl() }}" class="mt-4 flex items-center gap-4">
                        <x-image :src="$lead->listing->cover_image" :alt="$lead->listing->title"
                                 ratio="4/3" rounded="rounded-lg" class="w-24 shrink-0" />

                        <span class="min-w-0">
                            <span class="block truncate font-medium text-text">{{ $lead->listing->title }}</span>
                            <span class="mt-0.5 block text-sm text-text-secondary">{{ $lead->listing->formattedPrice() }}</span>
                        </span>
                    </a>
                </section>
            @endif
        </div>

        <div>
            <form action="{{ route('account.leads.update', $lead) }}" method="POST"
                  class="space-y-5 rounded-xl border border-border bg-surface p-6"
                  x-data="submitGuard" @submit="submit()">
                @csrf @method('PUT')

                <h2 class="font-display text-title font-bold text-text">{{ __('Your notes') }}</h2>

                <x-form.select name="status" :label="__('Status')" :options="$statuses"
                               :value="$lead->status->value" :placeholder="false" required />

                <div>
                    <label for="follow_up_on" class="form-label">{{ __('Follow up on') }}</label>
                    <input id="follow_up_on" type="date" name="follow_up_on" class="form-input"
                           value="{{ old('follow_up_on', $lead->follow_up_on?->toDateString()) }}">
                    <p class="form-hint">{{ __('We will flag it when the date arrives.') }}</p>
                </div>

                <x-form.textarea name="notes" :label="__('Private notes')" rows="6" :value="$lead->notes"
                                 :hint="__('Only you see these.')" />

                <button type="submit" class="btn btn-primary w-full" :disabled="submitting">
                    <span x-show="!submitting">{{ __('Save') }}</span>
                    <span x-show="submitting" x-cloak>{{ __('Saving…') }}</span>
                </button>
            </form>
        </div>
    </div>
@endsection