@php
    $lotLabel = $record->lot?->lot_no ?? $record->lot_no;
    $modalName = 'delete-burial-show-'.$record->id;
@endphp

<x-app-layout
    title="{{ $record->nama }}"
    subtitle="Butiran rekod pengebumian"
    :breadcrumbs="[['label' => 'Dashboard', 'url' => route('dashboard')], ['label' => 'Rekod Jenazah', 'url' => route('burial-records.index')], ['label' => $record->nama, 'url' => null]]"
>
    <x-slot name="actions">
        <a href="{{ route('burial-records.print', $record) }}" target="_blank" class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-800 shadow-sm hover:bg-gray-50">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
            Cetak
        </a>
        @can('burial-record.update')
            <a href="{{ route('burial-records.edit', $record) }}" class="inline-flex items-center gap-2 rounded-lg bg-brand-800 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-900">Edit</a>
        @endcan
    </x-slot>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <x-form-section title="Maklumat utama" :description="null">
            <dl class="grid grid-cols-1 gap-4 text-sm sm:grid-cols-2">
                <div>
                    <dt class="text-gray-500">Nama</dt>
                    <dd class="mt-1 font-semibold text-gray-900">{{ $record->nama }}</dd>
                </div>
                <div>
                    <dt class="text-gray-500">Jantina</dt>
                    <dd class="mt-1"><x-status-badge :status="$record->jantina" /></dd>
                </div>
                <div>
                    <dt class="text-gray-500">Tarikh kebumi</dt>
                    <dd class="mt-1 font-medium text-gray-900">{{ optional($record->tarikh_kebumi)->format('d/m/Y') ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-gray-500">Tahun</dt>
                    <dd class="mt-1 font-medium text-gray-900">{{ $record->tahun }}</dd>
                </div>
            </dl>
        </x-form-section>

        <x-form-section title="Lokasi kubur" :description="null">
            <dl class="space-y-4 text-sm">
                <div>
                    <dt class="text-gray-500">Barzakh</dt>
                    <dd class="mt-1">
                        @if ($record->barzakh)
                            <span class="inline-flex rounded-md bg-brand-50 px-2 py-1 text-sm font-medium text-brand-900 ring-1 ring-brand-900/10">{{ $record->barzakh->name }}</span>
                        @else
                            —
                        @endif
                    </dd>
                </div>
                <div>
                    <dt class="text-gray-500">Lot</dt>
                    <dd class="mt-1 font-medium text-gray-900">{{ $lotLabel ?: '—' }}</dd>
                </div>
                @if ($record->lot)
                    <div>
                        <dt class="text-gray-500">Status lot</dt>
                        <dd class="mt-1"><x-status-badge :status="$record->lot->status" /></dd>
                    </div>
                @endif
            </dl>
        </x-form-section>

        <x-form-section title="Catatan" :description="null" class="lg:col-span-2">
            <p class="whitespace-pre-wrap text-sm text-gray-800">{{ $record->catatan ?: 'Tiada catatan' }}</p>
        </x-form-section>

        <x-form-section title="Audit" :description="null" class="lg:col-span-2">
            <dl class="grid grid-cols-1 gap-4 text-sm sm:grid-cols-2">
                <div>
                    <dt class="text-gray-500">Didaftar oleh</dt>
                    <dd class="mt-1 font-medium text-gray-900">{{ $record->createdBy?->name ?? '—' }}</dd>
                    <dd class="text-xs text-gray-500">{{ $record->created_at?->format('d/m/Y H:i') }}</dd>
                </div>
                <div>
                    <dt class="text-gray-500">Dikemaskini oleh</dt>
                    <dd class="mt-1 font-medium text-gray-900">{{ $record->updatedBy?->name ?? '—' }}</dd>
                    <dd class="text-xs text-gray-500">{{ $record->updated_at?->format('d/m/Y H:i') }}</dd>
                </div>
            </dl>
        </x-form-section>
    </div>

    <div class="flex flex-wrap items-center justify-between gap-4 border-t border-gray-200 pt-6">
        <a href="{{ route('burial-records.index') }}" class="inline-flex items-center gap-2 text-sm font-medium text-brand-800 hover:text-brand-950">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            Kembali ke senarai
        </a>
        @can('burial-record.delete')
            <x-confirm-delete-modal :name="$modalName" :action="route('burial-records.destroy', $record)" title="Padam rekod jenazah?" />
            <button type="button" class="inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-semibold text-red-800 hover:bg-red-100" @click="$dispatch('open-modal', '{{ $modalName }}')">
                Padam rekod
            </button>
        @endcan
    </div>
</x-app-layout>