@php $canManage = $canConsult ?? false; @endphp

<section class="rounded-2xl border border-slate-200 bg-white p-5">
    <h3 class="text-sm font-semibold text-slate-900">Dental imaging</h3>
    <p class="mt-0.5 text-xs text-slate-500">Upload PA, bitewing, OPG, or clinical photos linked to teeth.</p>

    @if ($canManage)
        <form method="POST" action="{{ route('care.specialty.dentistry.images', $workspaceVisit) }}" enctype="multipart/form-data" class="mt-4 space-y-3">
            @csrf
            <div class="grid gap-3 sm:grid-cols-2">
                <div>
                    <label class="block text-xs font-medium text-slate-600">File</label>
                    <input type="file" name="attachment" required accept=".pdf,.jpg,.jpeg,.png,.webp" class="mt-1 block w-full text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-600">Modality</label>
                    <select name="modality" required class="mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm">
                        @foreach ($dentalModalities as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-xs font-medium text-slate-600">Caption</label>
                    <input type="text" name="caption" class="mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm">
                </div>
                <div class="sm:col-span-2">
                    <p class="text-xs font-medium text-slate-600">Teeth</p>
                    <div class="mt-2 flex max-h-28 flex-wrap gap-2 overflow-y-auto">
                        @foreach (array_merge($dentalRows['upper'] ?? [], $dentalRows['lower'] ?? []) as $code)
                            <label class="inline-flex items-center gap-1 rounded border border-slate-200 px-1.5 py-0.5 text-xs">
                                <input type="checkbox" name="tooth_codes[]" value="{{ $code }}" class="rounded border-slate-300 text-indigo-600">
                                {{ $code }}
                            </label>
                        @endforeach
                    </div>
                </div>
                <div class="sm:col-span-2">
                    <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                        <input type="checkbox" name="add_fee" value="1" class="rounded border-slate-300 text-indigo-600" checked>
                        Add imaging fee to bill
                    </label>
                </div>
            </div>
            <button type="submit" class="btn-primary">Upload image</button>
        </form>
    @endif

    <div @class(['mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-3' => true, 'mt-4' => ! $canManage])>
        @forelse ($dentalImages as $image)
            @php
                $url = $image->attachment?->file_path
                    ? \Illuminate\Support\Facades\Storage::disk('public')->url($image->attachment->file_path)
                    : null;
            @endphp
            <div class="overflow-hidden rounded-xl border border-slate-100 bg-slate-50">
                @if ($url && str_starts_with((string) $image->attachment?->mime_type, 'image/'))
                    <a href="{{ $url }}" target="_blank">
                        <img src="{{ $url }}" alt="{{ $image->caption ?: $image->modality }}" class="h-32 w-full object-cover">
                    </a>
                @elseif ($url)
                    <a href="{{ $url }}" target="_blank" class="flex h-32 items-center justify-center text-sm font-medium text-indigo-600">Open file</a>
                @endif
                <div class="px-3 py-2 text-xs">
                    <div class="flex items-start justify-between gap-2">
                        <div>
                            <p class="font-semibold text-slate-800">{{ $dentalModalities[$image->modality] ?? $image->modality }}</p>
                            <p class="text-slate-500">
                                {{ $image->captured_at?->format('d M Y H:i') }}
                                @if (! empty($image->tooth_codes))
                                    · {{ implode(', ', $image->tooth_codes) }}
                                @endif
                            </p>
                            @if ($image->caption)
                                <p class="mt-0.5 text-slate-600">{{ $image->caption }}</p>
                            @endif
                        </div>
                        @if ($canManage)
                            <form method="POST" action="{{ route('care.specialty.dentistry.images.void', [$workspaceVisit, $image]) }}" onsubmit="return confirm('Void this image?')">
                                @csrf
                                <button type="submit" class="text-rose-600 hover:underline">Void</button>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        @empty
            <p class="text-sm text-slate-500 sm:col-span-2">No images yet.</p>
        @endforelse
    </div>
</section>