@extends('layouts.app')

@section('title', 'QR Code Presensi Siswa')

@section('content')
<div class="mx-auto max-w-4xl space-y-6">
    <header class="pkbm-dashboard__heading">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="pkbm-dashboard__breadcrumb">
                    <a href="{{ route('student.dashboard') }}" class="hover:text-blue-700 no-underline">Ruang Belajar</a>
                    <i class="bi bi-chevron-right" aria-hidden="true"></i>
                    QR Code Presensi
                </p>
                <h1 class="pkbm-dashboard__title">Kartu & QR Code Absensi</h1>
                <p class="pkbm-dashboard__subtitle">
                    Gunakan kode ini untuk pemindaian kehadiran presensi belajar
                </p>
            </div>
            <div class="flex items-center gap-2 rounded-xl bg-white/90 px-3.5 py-2 shadow-sm backdrop-blur">
                <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 text-blue-700">
                    <i class="bi bi-person-badge"></i>
                </div>
                <div class="text-xs">
                    <span class="block text-[10px] uppercase font-bold text-slate-400">Siswa</span>
                    <span class="font-bold text-slate-800">{{ $student['nama'] }}</span>
                </div>
            </div>
        </div>
    </header>

    <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-start">
        {{-- Card QR Code --}}
        <div class="md:col-span-6 md:col-start-4">
            @if($qr && $qr->kode_qr)
                <article class="attendance-qr-card sp-card p-6 text-center overflow-hidden relative">
                    <div class="flex items-center justify-between border-b border-slate-100 pb-3">
                        <span class="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-bold text-blue-700">Siswa Aktif</span>
                        <span class="text-xs text-slate-400">{{ $student['nama_kelas'] ?? '-' }}</span>
                    </div>

                    <div class="my-5 flex justify-center">
                        <div class="rounded-2xl border border-slate-200 bg-white p-3 shadow-inner">
                            <canvas data-qr-value="{{ $qr->kode_qr }}" data-qr-name="{{ $student['nama'] }}" aria-label="QR Code {{ $student['nama'] }}" class="mx-auto block"></canvas>
                        </div>
                    </div>

                    <div class="space-y-1">
                        <h2 class="text-base font-bold text-slate-900">{{ $student['nama'] }}</h2>
                        <div class="inline-block rounded-full bg-slate-100 px-3 py-1 font-mono text-xs font-semibold text-slate-600">
                            {{ $qr->kode_qr }}
                        </div>
                    </div>

                    <p class="mt-4 text-xs text-slate-500 leading-relaxed px-2">
                        Tunjukkan QR Code ini ke kamera pemindai absensi instruktur/guru di ruang kelas untuk mencatat kehadiran belajar Anda.
                    </p>

                    <div class="mt-6 pt-4 border-t border-slate-100">
                        <button type="button" class="sp-btn-primary w-full justify-center py-2.5" data-download-qr disabled>
                            <i class="bi bi-download"></i>
                            <span>Simpan / Unduh QR Code</span>
                        </button>
                    </div>
                </article>
            @else
                <div class="sp-card p-8 text-center">
                    <div class="inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-amber-50 text-amber-500 mb-3">
                        <i class="bi bi-exclamation-triangle text-3xl"></i>
                    </div>
                    <h3 class="text-base font-bold text-slate-900">QR Code Belum Tersedia</h3>
                    <p class="mt-2 text-sm text-slate-500 max-w-sm mx-auto">
                        Kode QR absensi untuk akun Anda belum digenerate oleh sistem. Silakan hubungi bagian administrasi atau pengelola PKBM Anda.
                    </p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection