{{-- Job notes: internal (staff only) or for the customer (tracking page). Needs $job. --}}
@php
    use App\Enums\NoteType;

    $notes = $job->notes()->with('user')->get();
    $type = old('type', NoteType::Internal->value);
@endphp

<section id="notes" class="scroll-mt-20 rounded-xl bg-white p-4 shadow-sm sm:p-6 space-y-4">
    <div class="flex items-center justify-between">
        <h2 class="text-lg font-semibold text-gray-900">Notes</h2>
        <span class="text-sm text-gray-500">{{ $notes->count() }}</span>
    </div>

    @can('addNote', $job)
        <form method="POST" action="{{ route('jobs.notes.store', $job) }}" class="space-y-3" x-data="{ type: @js($type) }">
            @csrf
            <fieldset>
                <legend class="sr-only">Who can see this note?</legend>
                <div class="grid grid-cols-2 gap-2">
                    @foreach (NoteType::cases() as $option)
                        <label class="flex min-h-12 cursor-pointer items-center justify-center rounded-lg border border-gray-300 px-2 text-center text-sm font-semibold text-gray-700 has-[:checked]:border-indigo-600 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-800">
                            <input type="radio" name="type" value="{{ $option->value }}" class="sr-only" x-model="type" @checked($type === $option->value)>
                            {{ $option->label() }}
                        </label>
                    @endforeach
                </div>
            </fieldset>
            <p x-show="type === 'customer'" x-cloak class="rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-900">
                The customer will see this note on the tracking page. Write in simple, polite words.
            </p>
            <label for="note_body" class="sr-only">Note</label>
            <textarea id="note_body" name="body" rows="2" maxlength="1000"
                      class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                      :placeholder="type === 'customer' ? 'e.g. We are waiting for the new screen. It should arrive on Friday.' : 'e.g. Customer said the phone fell in water last week'">{{ old('body') }}</textarea>
            <x-input-error :messages="$errors->get('body')" />
            <div class="flex justify-end">
                <button type="submit" class="min-h-12 w-full rounded-lg bg-indigo-600 px-6 font-semibold text-white hover:bg-indigo-500 sm:w-auto">Add note</button>
            </div>
        </form>
    @endcan

    @if ($notes->isEmpty())
        <p class="text-gray-500">No notes yet.</p>
    @else
        <ul class="space-y-3">
            @foreach ($notes as $note)
                <li @class([
                    'rounded-lg border p-3',
                    'border-amber-200 bg-amber-50' => $note->type === NoteType::Customer,
                    'border-gray-200 bg-gray-50' => $note->type === NoteType::Internal,
                ]) data-note="{{ $note->type->value }}">
                    <div class="flex flex-wrap items-center gap-2 text-xs text-gray-500">
                        @if ($note->type === NoteType::Customer)
                            <span class="rounded-full bg-amber-200 px-2 py-0.5 font-semibold text-amber-900">Customer can see</span>
                        @else
                            <span class="rounded-full bg-gray-200 px-2 py-0.5 font-semibold text-gray-700">Internal</span>
                        @endif
                        <span>{{ $note->user?->name }} · {{ $note->created_at->format('d M Y, g:i A') }}</span>
                    </div>
                    <p class="mt-1 whitespace-pre-line text-gray-900">{{ $note->body }}</p>
                </li>
            @endforeach
        </ul>
    @endif
</section>