@php
    use App\Enums\NotificationStatus;
    use App\Models\JobPhoto;

    $left = JobPhoto::MAX_PER_JOB - $job->photos->count();

    // Data for the full-size viewer.
    $photoData = $job->photos->map(fn (JobPhoto $p) => [
        'full' => $p->url(),
        'caption' => $p->caption,
        'info' => collect([
            $p->stage->label(),
            $p->uploadedBy?->name,
            $p->created_at->timezone(config('app.timezone'))->format('d M Y, g:i A'),
        ])->filter()->join(' · '),
        'updateUrl' => route('jobs.photos.update', [$job, $p]),
        'deleteUrl' => auth()->user()->can('delete', $p) ? route('jobs.photos.destroy', [$job, $p]) : null,
    ])->values();
@endphp

<x-app-layout :title="'Job '.$job->job_no">
    <x-slot name="header">
        <a href="{{ route('jobs.index') }}" class="text-sm text-gray-500 hover:text-gray-700">&larr; Job cards</a>
        <div class="flex flex-wrap items-center gap-3">
            <h1 class="text-xl font-semibold text-gray-900 tabular-nums">Job {{ $job->job_no }}</h1>
            <x-status-badge :status="$job->status" size="lg" />
            <x-warranty-badge :job="$job" size="lg" />
            @if ($job->priority === \App\Enums\JobPriority::Urgent)
                <span class="rounded-full bg-red-600 px-3 py-1 text-sm font-bold uppercase text-white">Urgent</span>
            @endif
        </div>
        <p class="text-sm text-gray-500">
            Received {{ $job->created_at->format('d M Y, g:i A') }} by {{ $job->receivedBy?->name }}
            · Technician: <span class="font-medium text-gray-700">{{ $job->assignedTo?->name ?? 'Not assigned' }}</span>
        </p>

        {{-- Admin only: edit / delete the job card --}}
        @canany(['update', 'delete'], $job)
            <div x-data="{ confirmDelete: @js($errors->has('delete_reason')) }" class="mt-3">
                <div class="flex flex-wrap gap-2">
                    @can('update', $job)
                        <a href="{{ route('jobs.edit', $job) }}"
                           class="inline-flex min-h-10 items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 text-sm font-semibold text-gray-800 hover:bg-gray-50">
                            <x-icon name="wrench" class="h-4 w-4" /> Edit job
                        </a>
                    @endcan
                    @can('delete', $job)
                        <button type="button" @click="confirmDelete = ! confirmDelete"
                                class="inline-flex min-h-10 items-center gap-2 rounded-lg border border-red-300 bg-white px-4 text-sm font-semibold text-red-700 hover:bg-red-50">
                            <x-icon name="trash" class="h-4 w-4" /> Delete job
                        </button>
                    @endcan
                </div>

                @can('delete', $job)
                    <form x-show="confirmDelete" x-cloak method="POST" action="{{ route('jobs.destroy', $job) }}"
                          class="mt-3 space-y-3 rounded-lg border border-red-300 bg-red-50 p-4">
                        @csrf
                        @method('DELETE')
                        <p class="text-sm text-red-900">
                            <strong>Delete job {{ $job->job_no }}?</strong> It will be hidden from all lists and the customer's tracking link will stop working.
                            Parts reserved for it go back to stock. Payments and parts already used stay in the records.
                            For a normal job that will not be repaired, change the status to <em>Cancelled</em> instead.
                        </p>
                        <div>
                            <x-input-label for="delete_reason" value="Why are you deleting it?" />
                            <input id="delete_reason" name="delete_reason" type="text" required maxlength="500" value="{{ old('delete_reason') }}"
                                   placeholder="e.g. Duplicate job card, entered twice"
                                   class="mt-1 block w-full min-h-11 rounded-lg border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500">
                            <x-input-error :messages="$errors->get('delete_reason')" class="mt-2" />
                        </div>
                        <div class="flex flex-wrap gap-2">
                            <button type="submit" class="min-h-11 rounded-lg bg-red-600 px-5 text-sm font-semibold text-white hover:bg-red-500">Yes, delete this job</button>
                            <button type="button" @click="confirmDelete = false" class="min-h-11 rounded-lg border border-gray-300 bg-white px-5 text-sm font-semibold text-gray-700">Keep it</button>
                        </div>
                    </form>
                @endcan
            </div>
        @endcanany
    </x-slot>

    @php
        $action = 'flex min-h-14 flex-col items-center justify-center gap-1 rounded-xl text-sm font-semibold shadow-sm sm:flex-row sm:gap-2 sm:text-base';
        $soon = $action.' bg-gray-200 text-gray-500 cursor-not-allowed shadow-none';
    @endphp

    {{-- Tabs: Details / Parts / Messages (front desk). #parts and #messages keep the tab on reload; any other link (#photos) opens Details. --}}
    <div class="max-w-3xl mx-auto px-4 py-6 sm:px-6 lg:px-8 space-y-5"
         x-data="{ desk: @js(auth()->user()->can('use-front-desk')), tab: 'details', partsError: @js($errors->hasAny(['quantity', 'part_id', 'units', 'reason', 'repair_job_id', 'description', 'expected_on'])),
                   pick() { const h = location.hash; this.tab = (h === '#parts' || (this.partsError && h === '')) ? 'parts' : (this.desk && h === '#messages' ? 'messages' : 'details') } }"
         x-init="pick()" @hashchange.window="pick()">
        <x-flash />
        <x-parts-arrived :requests="$job->partRequests()->arrivedUnseen()->with('repairJob')->get()" />

        {{-- ========== Ready: hand it over ========== --}}
        @can('deliver', $job)
            @php $handoverBalance = \App\Support\Handover::balanceCents($job); @endphp
            <div class="flex flex-col gap-3 rounded-xl border border-green-300 bg-green-50 p-4 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <p class="font-semibold text-green-900">Ready for pickup</p>
                    <p class="text-sm text-green-800">
                        @if ($handoverBalance > 0)
                            Balance to pay: <strong>{{ \App\Support\Money::format(\App\Support\Money::fromCents($handoverBalance)) }}</strong>
                        @else
                            Nothing left to pay.
                        @endif
                    </p>
                </div>
                <a href="{{ route('jobs.deliver', $job) }}" class="flex min-h-12 items-center justify-center gap-2 rounded-xl bg-green-600 px-6 text-base font-semibold text-white shadow-sm hover:bg-green-500">
                    <x-icon name="check" class="h-5 w-5" /> Deliver device
                </a>
            </div>
        @endcan

        {{-- ========== Big action buttons ========== --}}
        <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
            @include('jobs.partials.change-status', ['class' => $action])
            @include('jobs.partials.job-card-buttons', ['class' => $action])
            <a href="{{ route('jobs.sticker', $job) }}" target="_blank" class="{{ $action }} bg-white text-gray-800 hover:bg-gray-50">
                <x-icon name="qr" class="h-5 w-5" /> Print sticker
            </a>
            @can('addPhotos', $job)
                <a href="#photos" class="{{ $action }} bg-white text-gray-800 hover:bg-gray-50">
                    <x-icon name="camera" class="h-5 w-5" /> Photos
                </a>
            @endcan
            @can('use-front-desk')
                <button type="button" x-data @click="$dispatch('open-modal', 'whatsapp-update')" class="{{ $action }} bg-green-600 text-white hover:bg-green-500">
                    Send WhatsApp update
                </button>
                <a href="tel:+{{ $job->customer->phone }}" class="{{ $action }} bg-white text-gray-800 hover:bg-gray-50">
                    Call customer
                </a>
            @endcan
        </div>

        @php
            $tabClass = 'flex flex-1 min-h-11 items-center justify-center gap-2 rounded-md px-3 text-sm font-semibold';
            $partsCount = $job->jobParts()->where('status', \App\Enums\JobPartStatus::Used)->count() + count(\App\Actions\JobParts::reservedFor($job));
        @endphp
        <nav class="flex gap-1 rounded-lg bg-gray-200 p-1" aria-label="Job sections">
            <a href="#details" class="{{ $tabClass }}"
               :class="tab === 'details' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'">Details</a>
            <a href="#parts" class="{{ $tabClass }}"
               :class="tab === 'parts' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'">
                Parts
                @if ($partsCount)
                    <span class="rounded-full bg-white/70 px-2 text-xs text-gray-700 ring-1 ring-gray-300">{{ $partsCount }}</span>
                @endif
            </a>
            @can('use-front-desk')
                @php $failed = $job->notificationLogs->where('status', NotificationStatus::Failed)->count(); @endphp
                <a href="#messages" class="{{ $tabClass }}"
                   :class="tab === 'messages' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'">
                    Messages
                    <span class="rounded-full bg-white/70 px-2 text-xs text-gray-700 ring-1 ring-gray-300">{{ $job->notificationLogs->count() }}</span>
                    @if ($failed)
                        <span class="rounded-full bg-red-600 px-2 text-xs text-white">{{ $failed }} failed</span>
                    @endif
                </a>
            @endcan
        </nav>

        @can('use-front-desk')
            <div id="messages" class="scroll-mt-20" x-show="tab === 'messages'" x-cloak>
                @include('jobs.partials.messages')
            </div>
        @endcan

        <div id="parts" class="scroll-mt-20" x-show="tab === 'parts'" x-cloak>
            @include('jobs.partials.parts')
        </div>

        <div id="details" class="scroll-mt-20 space-y-5" x-show="tab === 'details'">
        @include('jobs.partials.assign-technician')

        @include('jobs.partials.diagnosis')

        @include('jobs.partials.quotations')

        @include('jobs.partials.notes')

        @include('jobs.partials.warranty')

        @include('jobs.partials.summary')

        {{-- ========== Handover (after delivery) ========== --}}
        @if ($job->status === \App\Enums\JobStatus::Delivered && $job->collected_by_name)
            <section class="rounded-xl bg-white p-4 shadow-sm sm:p-6 space-y-3">
                <h2 class="text-lg font-semibold text-gray-900">Handover</h2>
                <dl class="grid gap-2 text-sm sm:grid-cols-2">
                    <div><dt class="text-gray-500">Delivered</dt><dd class="font-medium text-gray-900">{{ $job->delivered_at?->format('d M Y, g:i A') }} by {{ $job->deliveredBy?->name }}</dd></div>
                    <div><dt class="text-gray-500">Collected by</dt><dd class="font-medium text-gray-900">{{ $job->collected_by_name }}@if ($job->collected_by_phone) · {{ \App\Support\Phone::display($job->collected_by_phone) }}@endif</dd></div>
                    @php
                        $given = collect($job->handoverItems())->only($job->accessories_returned ?? []);
                        $notGiven = collect($job->handoverItems())->except($job->accessories_returned ?? []);
                    @endphp
                    @if ($given->isNotEmpty() || $notGiven->isNotEmpty())
                        <div><dt class="text-gray-500">Given back</dt><dd class="font-medium text-gray-900">{{ $given->join(', ') ?: 'Nothing' }}</dd></div>
                        @if ($notGiven->isNotEmpty())
                            <div><dt class="text-gray-500">Not given back</dt><dd class="font-medium text-red-700">{{ $notGiven->join(', ') }}</dd></div>
                        @endif
                    @endif
                    @if ($job->handover_notes)
                        <div class="sm:col-span-2"><dt class="text-gray-500">Notes</dt><dd class="text-gray-900">{{ $job->handover_notes }}</dd></div>
                    @endif
                    @can('view-billing')
                        @if ((float) $job->balance_at_delivery > 0)
                            <div class="sm:col-span-2"><dt class="text-gray-500">Left with a balance</dt>
                                <dd class="font-medium text-red-700">{{ \App\Support\Money::format($job->balance_at_delivery) }} · allowed by {{ $job->balanceOverrideBy?->name }}: {{ $job->balance_override_reason }}</dd></div>
                        @endif
                    @endcan
                </dl>
                @if ($job->signature_path && auth()->user()->can('use-front-desk'))
                    <div>
                        <p class="text-sm text-gray-500">Signature</p>
                        <img src="{{ route('jobs.signature', $job) }}" alt="Customer signature" class="mt-1 h-24 w-auto rounded-lg border border-gray-200 bg-white p-1">
                    </div>
                @endif
            </section>
        @endif

        {{-- ========== QR code: opens the customer tracking page ========== --}}
        <section class="flex flex-col items-center gap-4 rounded-xl bg-white p-4 shadow-sm sm:flex-row sm:items-start sm:p-6">
            <img src="{{ route('jobs.qr', $job) }}" alt="QR code for job {{ $job->job_no }}" width="160" height="160"
                 class="h-40 w-40 shrink-0 rounded-lg border border-gray-200 bg-white p-2 [image-rendering:pixelated]">
            <div class="min-w-0 flex-1 space-y-3 text-center sm:text-left">
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">QR code</h2>
                    <p class="text-sm text-gray-600">The customer scans this to see the repair status.</p>
                    <p class="mt-1 break-all text-xs text-gray-400">{{ $job->trackingUrl() }}</p>
                </div>
                <div class="grid grid-cols-2 gap-2 sm:max-w-sm">
                    <a href="{{ route('jobs.sticker', ['job' => $job, 'layout' => 'label']) }}" target="_blank"
                       class="flex min-h-12 items-center justify-center rounded-lg bg-indigo-600 px-3 text-sm font-semibold text-white hover:bg-indigo-500">
                        Label sticker
                    </a>
                    <a href="{{ route('jobs.sticker', ['job' => $job, 'layout' => 'a4', 'copies' => 4]) }}" target="_blank"
                       class="flex min-h-12 items-center justify-center rounded-lg border border-gray-300 bg-white px-3 text-sm font-semibold text-gray-800 hover:bg-gray-50">
                        A4 stickers
                    </a>
                </div>
            </div>
        </section>

        {{-- ========== Status timeline ========== --}}
        <section class="rounded-xl bg-white p-4 shadow-sm sm:p-6">
            <h2 class="text-lg font-semibold text-gray-900">Timeline</h2>
            <ol class="mt-4 space-y-0">
                @foreach ($job->statusHistories->sortByDesc('id') as $history)
                    <li class="relative flex gap-3 pb-5 last:pb-0">
                        @unless ($loop->last)
                            <span class="absolute left-[9px] top-5 h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                        @endunless
                        <span @class([
                            'relative mt-1 h-5 w-5 shrink-0 rounded-full border-4 border-white ring-2',
                            'bg-indigo-600 ring-indigo-200' => $loop->first,
                            'bg-gray-300 ring-gray-100' => ! $loop->first,
                        ])></span>
                        <div class="min-w-0">
                            <x-status-badge :status="$history->to_status" />
                            <p class="mt-1 text-sm text-gray-500">
                                {{ $history->created_at->format('d M Y, g:i A') }}
                                · {{ $history->changedBy?->name ?? 'System' }}
                                @unless ($history->is_public)
                                    · <span class="text-gray-400">staff only</span>
                                @endunless
                            </p>
                            @if ($history->note)
                                <p class="mt-1 text-gray-800">{{ $history->note }}</p>
                            @endif
                        </div>
                    </li>
                @endforeach
            </ol>
        </section>

        {{-- ========== Invoice (never shown to technicians) ========== --}}
        @can('view-billing')
            @php
                $invoices = $job->invoices()->with('payments')->get();
            @endphp
            <section id="invoice" class="scroll-mt-20 rounded-xl bg-white p-4 shadow-sm sm:p-6 space-y-3">
                <div class="flex flex-wrap items-center justify-between gap-2">
                    <h2 class="text-lg font-semibold text-gray-900">Invoice</h2>
                    @can('create', [\App\Models\Invoice::class, $job])
                        <a href="{{ route('invoices.create', $job) }}"
                           class="inline-flex min-h-11 items-center gap-2 rounded-lg bg-brand-600 px-4 text-sm font-semibold text-white hover:bg-brand-500">
                            <x-icon name="plus" class="h-4 w-4" /> Create invoice
                        </a>
                    @endcan
                </div>

                @if ($invoices->isEmpty())
                    <p class="text-gray-500">No invoice yet. "Create invoice" fills in the approved quotation and the parts used.</p>
                @else
                    <ul class="divide-y divide-gray-100">
                        @foreach ($invoices->sortByDesc('id') as $inv)
                            <li class="flex flex-wrap items-center justify-between gap-2 py-3">
                                <a href="{{ route('invoices.show', $inv) }}" class="font-medium text-brand-700 underline">{{ $inv->displayNo() }}</a>
                                <span class="text-sm text-gray-600">
                                    {{ $inv->status->label() }}@if ($inv->isIssued()) · {{ $inv->payment_status->label() }} @endif
                                    · Total <strong class="tabular-nums text-gray-900">Rs. {{ number_format($inv->total, 2) }}</strong>
                                    @if ($inv->isIssued() && (float) $inv->balance() > 0)
                                        · Balance <strong class="tabular-nums text-red-700">Rs. {{ number_format($inv->balance(), 2) }}</strong>
                                    @endif
                                </span>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </section>
        @endcan

        {{-- ========== Payments (never shown to technicians) ========== --}}
        @can('view-billing')
            <section class="rounded-xl bg-white p-4 shadow-sm sm:p-6">
                <div class="flex items-center justify-between">
                    <h2 class="text-lg font-semibold text-gray-900">Payments</h2>
                    @php
                        $paid = $job->payments->sum(fn ($p) => $p->type === \App\Enums\PaymentType::Refund ? -$p->amount : $p->amount);
                    @endphp
                    <span class="text-sm text-gray-500">Paid so far: <strong class="text-gray-900">Rs. {{ number_format($paid, 2) }}</strong></span>
                </div>

                @if ($job->payments->isEmpty())
                    <p class="mt-3 text-gray-500">No payments yet.</p>
                @else
                    <ul class="mt-3 divide-y divide-gray-100">
                        @foreach ($job->payments->sortBy('id') as $payment)
                            <li class="flex flex-wrap items-center justify-between gap-2 py-3">
                                <div>
                                    <p class="font-medium text-gray-900">{{ $payment->type->label() }} · {{ $payment->method->label() }}</p>
                                    <p class="text-sm text-gray-500">
                                        Receipt {{ $payment->receipt_no }} · {{ $payment->paid_at->format('d M Y, g:i A') }}
                                        · {{ $payment->receivedBy?->name }}
                                    </p>
                                </div>
                                <p @class(['text-lg font-semibold tabular-nums', 'text-red-700' => $payment->type === \App\Enums\PaymentType::Refund])>
                                    {{ $payment->type === \App\Enums\PaymentType::Refund ? '−' : '' }}Rs. {{ number_format($payment->amount, 2) }}
                                </p>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </section>
        @endcan

        {{-- ========== Photos ========== --}}
        <section id="photos" class="scroll-mt-20 rounded-xl bg-white p-4 shadow-sm sm:p-6 space-y-4"
                 x-data="photoGallery(@js($photoData))"
                 @keydown.window.escape="close()" @keydown.window.arrow-right="move(1)" @keydown.window.arrow-left="move(-1)">
            <div class="flex items-center justify-between">
                <h2 class="text-lg font-semibold text-gray-900">Device photos</h2>
                <span class="text-sm text-gray-500">{{ $job->photos->count() }} of {{ JobPhoto::MAX_PER_JOB }}</span>
            </div>

            @if ($job->photos->isEmpty())
                <p class="text-gray-500">No photos yet.</p>
            @else
                <ul class="grid grid-cols-3 gap-2 sm:grid-cols-4">
                    @foreach ($job->photos as $i => $photo)
                        <li>
                            {{-- Works without JavaScript too: opens the full photo. --}}
                            <a href="{{ $photo->url() }}" target="_blank" @click.prevent="open({{ $i }})"
                               class="group relative block aspect-square overflow-hidden rounded-lg bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <img src="{{ $photo->thumbUrl() }}" alt="{{ $photo->caption ?: 'Device photo '.($i + 1) }}" loading="lazy"
                                     class="h-full w-full object-cover transition group-hover:opacity-90">
                                <span class="absolute left-1 top-1 rounded bg-black/60 px-1.5 py-0.5 text-[11px] font-medium text-white">{{ $photo->stage->label() }}</span>
                            </a>
                            @if ($photo->caption)
                                <p class="mt-1 truncate text-xs text-gray-600" title="{{ $photo->caption }}">{{ $photo->caption }}</p>
                            @endif
                        </li>
                    @endforeach
                </ul>
            @endif

            {{-- Add more photos --}}
            @can('addPhotos', $job)
                @if ($left > 0)
                    <form method="POST" action="{{ route('jobs.photos.store', $job) }}" enctype="multipart/form-data"
                          x-data="{ count: 0, saving: false }" @photos-changed="count = $event.detail" @submit="saving = true"
                          class="space-y-3 border-t border-gray-100 pt-4">
                        @csrf
                        <h3 class="font-medium text-gray-900">Add photos</h3>
                        <x-photo-picker :max="$left" />
                        <x-input-error :messages="collect($errors->get('photos'))->merge(collect($errors->get('photos.*'))->flatten())->unique()->all()" />
                        <button type="submit" x-show="count > 0" x-cloak x-bind:disabled="saving"
                                class="w-full min-h-12 rounded-xl bg-indigo-600 font-semibold text-white hover:bg-indigo-500 disabled:opacity-70">
                            <span x-show="!saving" x-text="count === 1 ? 'Upload 1 photo' : 'Upload ' + count + ' photos'"></span>
                            <span x-show="saving" x-cloak>Uploading…</span>
                        </button>
                    </form>
                @else
                    <p class="border-t border-gray-100 pt-4 text-sm text-gray-500">This job has the most photos allowed ({{ JobPhoto::MAX_PER_JOB }}). Delete one to add another.</p>
                @endif
            @endcan

            {{-- Full-size viewer --}}
            <template x-teleport="body">
                <div x-show="index !== null" x-cloak x-transition.opacity
                     class="fixed inset-0 z-50 flex flex-col bg-black/95 text-white" role="dialog" aria-modal="true" aria-label="Photo">
                    <div class="flex items-center justify-between gap-2 p-3">
                        <span class="text-sm text-gray-300" x-text="(index + 1) + ' of ' + photos.length"></span>
                        <div class="flex items-center gap-2">
                            <a :href="photo?.full" target="_blank" class="rounded-lg px-3 py-2 text-sm text-gray-200 hover:bg-white/10">Open in new tab</a>
                            <button type="button" @click="close()" class="flex h-11 w-11 items-center justify-center rounded-full hover:bg-white/10">
                                <x-icon name="close" class="h-7 w-7" />
                                <span class="sr-only">Close</span>
                            </button>
                        </div>
                    </div>

                    <div class="relative flex min-h-0 flex-1 items-center justify-center px-2"
                         @touchstart.passive="touchX = $event.touches[0].clientX"
                         @touchend="swipe($event.changedTouches[0].clientX)">
                        <img :src="photo?.full" :alt="photo?.caption || 'Device photo'" class="max-h-full max-w-full object-contain">
                        <template x-if="photos.length > 1">
                            <div>
                                <button type="button" @click="move(-1)" class="absolute left-2 top-1/2 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-black/50 hover:bg-black/70">
                                    <x-icon name="chevron" class="h-6 w-6 rotate-180" /><span class="sr-only">Previous</span>
                                </button>
                                <button type="button" @click="move(1)" class="absolute right-2 top-1/2 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-black/50 hover:bg-black/70">
                                    <x-icon name="chevron" class="h-6 w-6" /><span class="sr-only">Next</span>
                                </button>
                            </div>
                        </template>
                    </div>

                    <div class="space-y-3 bg-black/60 p-3 sm:p-4">
                        <p class="text-xs text-gray-400" x-text="photo?.info"></p>
                        <form method="POST" :action="photo?.updateUrl" class="flex gap-2">
                            @csrf
                            @method('PATCH')
                            <label class="sr-only" for="photo_caption">Caption</label>
                            <input id="photo_caption" name="caption" type="text" maxlength="255" autocomplete="off" x-model="caption"
                                   placeholder="Add a caption, e.g. Crack on back glass"
                                   class="min-h-11 flex-1 rounded-lg border-gray-600 bg-gray-900 text-base text-white placeholder-gray-500 focus:border-indigo-400 focus:ring-indigo-400">
                            <button type="submit" class="min-h-11 rounded-lg bg-indigo-600 px-4 text-sm font-semibold hover:bg-indigo-500">Save</button>
                        </form>
                        @if ($photoData->contains(fn ($p) => $p['deleteUrl']))
                            <template x-if="photo?.deleteUrl">
                                <form method="POST" :action="photo.deleteUrl" @submit="if (!confirm('Delete this photo? This cannot be undone.')) $event.preventDefault()">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="flex min-h-11 items-center gap-2 rounded-lg px-3 text-sm font-semibold text-red-300 hover:bg-red-500/20">
                                        <x-icon name="trash" class="h-5 w-5" /> Delete photo
                                    </button>
                                </form>
                            </template>
                        @endif
                    </div>
                </div>
            </template>
        </section>
        </div>{{-- /details --}}
    </div>

    @can('use-front-desk')
        @include('jobs.partials.whatsapp-update')
    @endcan

    <script>
        function photoGallery(photos) {
            return {
                photos,
                index: null,
                caption: '',
                touchX: null,
                get photo() { return this.index === null ? null : this.photos[this.index]; },
                open(i) {
                    this.index = i;
                    this.caption = this.photos[i].caption || '';
                    document.body.classList.add('overflow-hidden');
                },
                close() {
                    this.index = null;
                    document.body.classList.remove('overflow-hidden');
                },
                move(step) {
                    if (this.index === null || this.photos.length < 2) return;
                    if (document.activeElement?.id === 'photo_caption') return; // arrow keys while typing
                    this.open((this.index + step + this.photos.length) % this.photos.length);
                },
                swipe(endX) {
                    if (this.touchX === null) return;
                    const dx = endX - this.touchX;
                    this.touchX = null;
                    if (Math.abs(dx) > 50) this.move(dx < 0 ? 1 : -1);
                },
            };
        }
    </script>
</x-app-layout>