<div>
    <!-- Header & Breadcrumb -->
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <nav class="flex text-xs text-slate-400 mb-1" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-2">
                    <li class="inline-flex items-center">
                        <a href="{{ route('dashboard') }}" class="text-slate-400 hover:text-white">Home</a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="w-4 h-4 text-slate-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                            <a href="{{ route('personnel.index') }}" class="ml-1 text-slate-400 hover:text-white">Data Personil</a>
                        </div>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="w-4 h-4 text-slate-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                            <span class="ml-1 text-slate-300 font-medium">Cetak ID Card Siswa</span>
                        </div>
                    </li>
                </ol>
            </nav>
            <h1 class="text-2xl font-bold text-white tracking-tight">🖨️ Cetak Kartu Absensi / ID Card Siswa</h1>
            <p class="text-xs text-slate-400 mt-1">Kartu fisik siswa standar CR-80 dilengkapi QR Code terenkripsi untuk presensi cadangan.</p>
        </div>

        <div class="flex items-center gap-3">
            <a href="{{ route('personnel.id-cards.print', ['class' => $selectedClass]) }}" target="_blank" 
                class="px-4 py-2.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-semibold text-xs shadow-lg shadow-sky-600/20 transition-all flex items-center gap-2">
                <svg class="w-4 h-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"></path></svg>
                <span>Cetak Seluruh Kartu (PDF/Print)</span>
            </a>
        </div>
    </div>

    <!-- Filter Card -->
    <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 mb-6 shadow-sm flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div class="flex items-center gap-4 w-full sm:w-auto">
            <div>
                <label class="block text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Filter Kelas</label>
                <select wire:model.live="selectedClass" class="px-3.5 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs font-medium focus:border-sky-500 focus:outline-none">
                    <option value="">-- Semua Kelas --</option>
                    @foreach($classes as $c)
                        <option value="{{ $c }}">{{ $c }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Pencarian</label>
                <input wire:model.live="search" type="text" placeholder="Nama / NIS..." class="px-3.5 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs">
            </div>
        </div>

        <span class="text-xs font-mono text-slate-400">Total {{ count($students) }} Kartu Siswa</span>
    </div>

    <!-- Cards Grid Preview -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($students as $st)
            <div class="bg-gradient-to-br from-slate-900 via-slate-900 to-sky-950 border border-slate-800 rounded-2xl p-5 shadow-lg relative overflow-hidden flex flex-col justify-between h-[230px]">
                <!-- Header Card -->
                <div class="flex items-center gap-3 border-b border-slate-800 pb-3">
                    <div class="w-8 h-8 rounded-lg bg-sky-500/10 border border-sky-500/20 p-1 flex-shrink-0">
                        @if($logoUrl)
                            <img src="{{ $logoUrl }}" class="w-full h-full object-contain">
                        @else
                            <svg class="w-full h-full text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                        @endif
                    </div>
                    <div class="leading-tight">
                        <h4 class="text-[11px] font-bold text-white uppercase">{{ $school['school_name'] ?? 'SMKN 1 Gunung Agung' }}</h4>
                        <span class="text-[9px] text-sky-400 font-semibold uppercase tracking-wider">KARTU PRESENSI SISWA</span>
                    </div>
                </div>

                <!-- Body Card -->
                <div class="flex items-center gap-4 my-2">
                    <div class="w-16 h-16 rounded-xl bg-slate-800 border border-slate-700 overflow-hidden flex items-center justify-center flex-shrink-0">
                        @if($st->photo_path)
                            <img src="{{ Storage::url($st->photo_path) }}" class="w-full h-full object-cover">
                        @else
                            <span class="text-lg font-bold text-sky-400">{{ strtoupper(substr($st->name, 0, 2)) }}</span>
                        @endif
                    </div>

                    <div class="flex-1 min-w-0 text-xs">
                        <h3 class="font-bold text-white truncate">{{ $st->name }}</h3>
                        <p class="text-[11px] text-slate-400 font-mono">NIS: <span class="text-slate-200">{{ $st->nip_nis ?? '-' }}</span></p>
                        <p class="text-[11px] text-slate-400">Kelas: <span class="text-amber-400 font-semibold">{{ $st->class_name ?? '-' }}</span></p>
                    </div>

                    <!-- SVG QR Code inline -->
                    <div class="w-16 h-16 bg-white p-1 rounded-lg border border-slate-700 flex items-center justify-center flex-shrink-0">
                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ urlencode($st->parent_token ?? $st->nip_nis) }}" alt="QR" class="w-full h-full">
                    </div>
                </div>

                <!-- Footer Card -->
                <div class="border-t border-slate-800 pt-2 flex items-center justify-between text-[9px] text-slate-400 font-mono">
                    <span>STATUS: AKTIF</span>
                    <span>TULANG BAWANG BARAT</span>
                </div>
            </div>
        @empty
            <div class="col-span-3 text-center py-12 text-slate-500 text-xs">
                Tidak ada data siswa ditemukan.
            </div>
        @endforelse
    </div>
</div>
