@extends('crm.layouts.app')

@section('title', 'Enquiry · '.$enquiry->name)

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

    <div class="mb-8">
        <a href="{{ route('crm.enquiries.index') }}" class="text-sm font-medium text-gray-500 hover:text-gray-700">&larr; Enquiries</a>
        <h1 class="mt-2 text-2xl font-semibold text-gray-900">{{ $enquiry->name }}</h1>
        <p class="mt-1 text-sm text-gray-600">
            {{ $enquiry->email }}@if($enquiry->phone) &middot; {{ $enquiry->phone }}@endif
            &middot; sent {{ $enquiry->created_at->diffForHumans() }}
        </p>
    </div>

    @if(session('success'))
        <div class="mb-6 rounded-md bg-green-50 p-4 text-sm font-medium text-green-800">{{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-6 rounded-md bg-red-50 p-4">
            <ul class="list-disc space-y-1 pl-5 text-sm text-red-700">
                @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
            </ul>
        </div>
    @endif

    <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
        <!-- The request -->
        <div class="lg:col-span-2 space-y-6">
            <div class="rounded-lg bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
                <h2 class="text-sm font-semibold text-gray-900">The piece</h2>
                <p class="mt-3 whitespace-pre-line text-sm text-gray-700">{{ $enquiry->description }}</p>

                <dl class="mt-6 grid grid-cols-2 gap-x-6 gap-y-4 border-t border-gray-100 pt-4 sm:grid-cols-3">
                    @foreach([
                        'Placement' => $enquiry->placement,
                        'Size' => $enquiry->size,
                        'Style' => $enquiry->style,
                        'Budget' => $enquiry->budgetRange(),
                        'Preferred artist' => $enquiry->artist?->name,
                        'First tattoo' => $enquiry->is_first_tattoo ? 'Yes' : null,
                    ] as $label => $value)
                        <div>
                            <dt class="text-xs text-gray-500">{{ $label }}</dt>
                            <dd class="mt-0.5 text-sm font-medium text-gray-900">{{ $value ?: '—' }}</dd>
                        </div>
                    @endforeach
                </dl>

                @if($enquiry->availability_notes)
                    <div class="mt-4 border-t border-gray-100 pt-4">
                        <dt class="text-xs text-gray-500">When they're free</dt>
                        <dd class="mt-1 whitespace-pre-line text-sm text-gray-900">{{ $enquiry->availability_notes }}</dd>
                    </div>
                @endif
            </div>

            @if(!empty($enquiry->reference_images))
                <div class="rounded-lg bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
                    <h2 class="text-sm font-semibold text-gray-900 mb-4">References</h2>
                    <div class="grid grid-cols-3 gap-3 sm:grid-cols-4">
                        @foreach($enquiry->reference_images as $image)
                            <a href="{{ Storage::url($image) }}" target="_blank" rel="noopener">
                                <img src="{{ Storage::url($image) }}" alt="Reference"
                                     class="h-28 w-full rounded-md object-cover ring-1 ring-gray-200 hover:ring-indigo-400">
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>

        <!-- Act on it -->
        <div class="space-y-6">
            @if($enquiry->status === \App\Models\Enquiry::STATUS_ACCEPTED)
                <div class="rounded-lg bg-green-50 p-6 ring-1 ring-green-600/20">
                    <h2 class="text-sm font-semibold text-green-900">Booked</h2>
                    <p class="mt-2 text-sm text-green-800">
                        {{ $enquiry->accepted_slot_at?->format('l j F, g:i A') }}
                    </p>
                    @if($enquiry->appointment)
                        <a href="{{ route('crm.appointments.show', $enquiry->appointment) }}"
                           class="mt-4 inline-block text-sm font-semibold text-green-900 underline">
                            Open the appointment
                        </a>
                    @endif
                </div>
            @elseif($enquiry->status === \App\Models\Enquiry::STATUS_DECLINED)
                <div class="rounded-lg bg-gray-50 p-6 ring-1 ring-gray-900/10">
                    <h2 class="text-sm font-semibold text-gray-900">Declined</h2>
                    @if($enquiry->decline_reason)
                        <p class="mt-2 text-sm text-gray-700">{{ $enquiry->decline_reason }}</p>
                    @endif
                </div>
            @else
                @if($enquiry->status === \App\Models\Enquiry::STATUS_OFFERED)
                    <div class="rounded-lg bg-purple-50 p-6 ring-1 ring-purple-600/20">
                        <h2 class="text-sm font-semibold text-purple-900">Waiting on the client</h2>
                        <ul class="mt-2 space-y-1 text-sm text-purple-800">
                            @foreach($enquiry->availableSlots() as $slot)
                                <li>{{ $slot->format('D j M, g:i A') }}</li>
                            @endforeach
                        </ul>
                        <p class="mt-4 text-xs font-medium text-purple-900">Their link</p>
                        <a href="{{ route('enquiry.offer', $enquiry->token) }}"
                           target="_blank" rel="noopener"
                           class="mt-1 block break-all rounded bg-white px-2 py-1.5 font-mono text-xs text-purple-700 underline decoration-purple-300 underline-offset-2 hover:bg-purple-100 hover:text-purple-900">
                            {{ route('enquiry.offer', $enquiry->token) }}
                        </a>
                    </div>
                @endif

                <!-- Offer times -->
                <form method="POST" action="{{ route('crm.enquiries.offer', $enquiry) }}"
                      class="rounded-lg bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
                    @csrf
                    <h2 class="text-sm font-semibold text-gray-900">
                        {{ $enquiry->status === \App\Models\Enquiry::STATUS_OFFERED ? 'Offer different times' : 'Offer times' }}
                    </h2>
                    <p class="mt-1 text-xs text-gray-500">
                        Up to four. A short list is easier to answer than an open calendar.
                    </p>

                    <div class="mt-4 space-y-2">
                        @for($i = 0; $i < 4; $i++)
                            <input type="datetime-local" name="slots[]"
                                   value="{{ old('slots.'.$i) }}"
                                   class="block w-full rounded-md border-0 py-1.5 px-3 text-sm text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600">
                        @endfor
                    </div>

                    <label for="user_id" class="mt-4 block text-sm font-medium text-gray-900">Artist</label>
                    <select name="user_id" id="user_id"
                            class="mt-1 block w-full rounded-md border-0 py-1.5 px-3 text-sm text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600">
                        <option value="">Unassigned</option>
                        @foreach($artists as $artist)
                            <option value="{{ $artist->id }}" @selected($enquiry->user_id === $artist->id)>{{ $artist->name }}</option>
                        @endforeach
                    </select>

                    <label for="artist_notes" class="mt-4 block text-sm font-medium text-gray-900">
                        Note to the client <span class="font-normal text-gray-500">(optional)</span>
                    </label>
                    <textarea name="artist_notes" id="artist_notes" rows="3" maxlength="2000"
                              placeholder="Rough quote, how many sessions, anything to bring…"
                              class="mt-1 block w-full rounded-md border-0 py-2 px-3 text-sm text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600">{{ old('artist_notes', $enquiry->artist_notes) }}</textarea>

                    <button type="submit" class="mt-5 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                        Offer these times
                    </button>
                </form>

                <!-- Decline -->
                <form method="POST" action="{{ route('crm.enquiries.decline', $enquiry) }}"
                      onsubmit="return confirm('Decline this enquiry?')"
                      class="rounded-lg bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
                    @csrf
                    <h2 class="text-sm font-semibold text-gray-900">Not for us</h2>
                    <textarea name="decline_reason" rows="2" maxlength="1000"
                              placeholder="Shown to the client. Optional."
                              class="mt-3 block w-full rounded-md border-0 py-2 px-3 text-sm text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600"></textarea>
                    <button type="submit" class="mt-3 w-full rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                        Decline
                    </button>
                </form>
            @endif
        </div>
    </div>
</div>
@endsection