@php($validUntil = now()->addYear()->endOfYear()->format('M Y'))
<div class="id-card relative h-[260px] w-[410px] shrink-0 overflow-hidden rounded-xl bg-white shadow-md ring-2 ring-primary-600/70 print:shadow-none">
    <div class="flex items-center justify-between bg-gradient-to-r from-primary-700 to-primary-500 px-3 py-1.5">
        <div class="flex items-center gap-2">
            @if($student->school?->logo_path)
                <img src="{{ asset('storage/'.$student->school->logo_path) }}" alt="" class="h-6 w-6 rounded object-cover">
            @else
                <div class="flex h-6 w-6 items-center justify-center rounded bg-white/20 text-[10px] font-bold text-white">{{ substr($student->school?->name ?? 'S', 0, 1) }}</div>
            @endif
            <span class="text-[11px] font-bold uppercase tracking-wide text-white">{{ $student->school?->name }}</span>
        </div>
        <span class="text-[9px] font-medium uppercase tracking-widest text-white/80">Student ID</span>
    </div>
    <div class="flex gap-3 px-3 pt-2.5">
        <div class="shrink-0">
            @if($student->photo_url)
                <img src="{{ $student->photo_url }}" alt="" class="h-24 w-20 rounded-md object-cover ring-1 ring-gray-300">
            @else
                <div class="flex h-24 w-20 items-center justify-center rounded-md bg-gray-100 text-gray-400 ring-1 ring-gray-300">
                    <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
                </div>
            @endif
        </div>
        <div class="min-w-0 flex-1">
            <p class="truncate text-sm font-bold text-gray-900">{{ $student->first_name }} {{ $student->last_name }}</p>
            <p class="text-[10px] text-gray-500">{{ $student->admission_no }}</p>
            <dl class="mt-1 space-y-0.5 text-[10px] leading-tight">
                <div class="flex"><dt class="w-14 font-semibold text-gray-500">Class:</dt><dd class="text-gray-800">{{ $student->class?->name ?? '—' }}</dd></div>
                <div class="flex"><dt class="w-14 font-semibold text-gray-500">DOB:</dt><dd class="text-gray-800">{{ $student->date_of_birth?->format('d M Y') ?? '—' }}</dd></div>
                <div class="flex"><dt class="w-14 font-semibold text-gray-500">Blood:</dt><dd class="text-gray-800">{{ $student->blood_group ?: '—' }}</dd></div>
                <div class="flex"><dt class="w-14 font-semibold text-gray-500">Phone:</dt><dd class="truncate text-gray-800">{{ $student->phone ?: ($student->parent?->phone ?: '—') }}</dd></div>
            </dl>
        </div>
    </div>
    <div class="absolute inset-x-0 bottom-0 border-t border-dashed border-gray-300 px-3 pb-1.5 pt-1">
        <div class="flex items-end justify-between">
            <div>
                <p class="text-[8px] uppercase tracking-wide text-gray-400">Valid Through</p>
                <p class="text-[10px] font-semibold text-gray-700">{{ $validUntil }}</p>
            </div>
            <p class="text-[8px] italic text-gray-400">If found, please return to the school</p>
            <div class="text-center">
                <p class="border-t border-gray-500 px-3 pt-0.5 text-[8px] uppercase tracking-wide text-gray-500">Principal</p>
            </div>
        </div>
    </div>
</div>