@extends('layouts.app')

@section('title', 'Choose a time · '.($studio->name ?? 'Your appointment'))

@section('content')
<div class="mx-auto max-w-2xl px-4 py-12 sm:px-6 lg:px-8">

    <div class="mb-10">
        @if($settings?->logo_url)
            <img src="{{ $settings->logo_url }}" alt="{{ $settings->studio_name }}" class="mb-6 h-14 w-auto">
        @endif
        <h1 class="text-3xl font-semibold tracking-tight text-gray-900">Pick a time</h1>
        <p class="mt-3 text-base text-gray-600">
            {{ $settings->studio_name ?? $studio->name }} has looked at your request and can fit you in at any
            of these. Choose the one that suits and you're booked.
        </p>
    </div>

    @if($enquiry->artist_notes)
        <div class="mb-8 rounded-lg border border-gray-200 bg-gray-50 p-5">
            <p class="text-sm font-semibold text-gray-900">
                A note from {{ $enquiry->artist?->name ?? 'your artist' }}
            </p>
            <p class="mt-2 whitespace-pre-line text-sm text-gray-700">{{ $enquiry->artist_notes }}</p>
        </div>
    @endif

    @if($errors->any())
        <div class="mb-8 rounded-lg bg-red-50 p-4 text-sm text-red-700">
            {{ $errors->first() }}
        </div>
    @endif

    <form method="POST" action="{{ route('enquiry.accept', $enquiry->token) }}" class="space-y-4">
        @csrf

        <fieldset>
            <legend class="sr-only">Available times</legend>
            <div class="space-y-3">
                @foreach($slots as $index => $slot)
                    <label class="flex cursor-pointer items-center gap-4 rounded-lg border border-gray-300 bg-white p-5 hover:border-indigo-400 has-[:checked]:border-indigo-600 has-[:checked]:ring-1 has-[:checked]:ring-indigo-600">
                        <input type="radio" name="slot" value="{{ $slot->toIso8601String() }}" required
                               @checked($index === 0)
                               class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-600">
                        <span class="flex-1">
                            <span class="block text-base font-medium text-gray-900">
                                {{ $slot->format('l j F') }}
                            </span>
                            <span class="block text-sm text-gray-600">
                                {{ $slot->format('g:i A') }}
                                <span class="text-gray-400">&middot; {{ $slot->diffForHumans() }}</span>
                            </span>
                        </span>
                    </label>
                @endforeach
            </div>
        </fieldset>

        @if($enquiry->offer_expires_at)
            <p class="text-sm text-gray-500">
                These times are held until {{ $enquiry->offer_expires_at->format('j F') }}.
            </p>
        @endif

        <div class="flex justify-end pt-4">
            <button type="submit"
                    class="rounded-md bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                Confirm this time
            </button>
        </div>
    </form>

    <div class="mt-10 border-t border-gray-200 pt-6 text-sm text-gray-500">
        <p class="font-medium text-gray-700">What you asked for</p>
        <p class="mt-2 whitespace-pre-line">{{ $enquiry->description }}</p>
        @if($enquiry->placement || $enquiry->size)
            <p class="mt-2">
                {{ collect([$enquiry->placement, $enquiry->size, $enquiry->style])->filter()->implode(' · ') }}
            </p>
        @endif
    </div>
</div>
@endsection