@extends('layouts.app')

@section('title', 'Cetak Kartu QR')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><span>Standar Pengelolaan</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen Absensi<i class="bi bi-chevron-right" aria-hidden="true"></i>Cetak Kartu QR</p>
            <h1 class="pkbm-dashboard__title">Manajemen QR Code</h1>
            <p class="pkbm-dashboard__subtitle">Kelola dan cetak kartu QR untuk siswa dan guru pada PKBM Anda.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <button type="button" class="sp-btn-secondary shrink-0" onclick="window.print()"><i class="bi bi-printer" aria-hidden="true"></i>Cetak kartu</button>
            <form method="POST" action="{{ route('pkbm.absensi.qr.generate') }}">
                @csrf
                <button type="submit" class="sp-btn-primary shrink-0" @disabled($missingCount === 0)>
                    <i class="bi bi-magic" aria-hidden="true"></i>{{ $missingCount ? "Generate {$missingCount} QR" : 'Semua QR tersedia' }}
                </button>
            </form>
        </div>
    </header>

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span></div>
    @endif
    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i><span>{{ $errors->first() }}</span></div>
    @endif

    @if ($missingCount > 0)
        <p role="status" class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">{{ $missingCount }} siswa/guru belum memiliki QR Code. Tekan Generate untuk membuat kode yang belum tersedia.</p>
    @endif
    @if (! $period)
        <p role="status" class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">Periode akademik aktif belum diatur. Daftar QR siswa dan filter kelas hanya tersedia setelah periode aktif ditetapkan.</p>
    @endif

    <section class="sp-card">
        <form method="GET" action="{{ route('pkbm.absensi.qr.index') }}" class="grid gap-3 p-4 sm:grid-cols-[minmax(12rem,1fr)_minmax(12rem,1fr)_auto] sm:items-end">
            <div>
                <label for="qr-kind" class="sp-form-label">Kategori</label>
                <select id="qr-kind" name="jenis" class="sp-form-control px-3 py-2 text-sm" onchange="this.form.requestSubmit()">
                    <option value="">Semua kategori</option>
                    <option value="siswa" @selected(($filters['jenis'] ?? '') === 'siswa')>Siswa</option>
                    <option value="guru" @selected(($filters['jenis'] ?? '') === 'guru')>Guru</option>
                </select>
            </div>
            <div>
                <label for="qr-class" class="sp-form-label">Kelas siswa</label>
                <select id="qr-class" name="kelas" class="sp-form-control px-3 py-2 text-sm disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400"
                        @disabled(($filters['jenis'] ?? '') === 'guru' || ! $period)
                        onchange="this.form.requestSubmit()">
                    <option value="">Semua kelas</option>
                    @foreach ($classes as $class)
                        <option value="{{ $class->id }}" @selected(($filters['jenis'] ?? '') !== 'guru' && (string) ($filters['kelas'] ?? '') === (string) $class->id)>{{ $class->nama_kelas }}</option>
                    @endforeach
                </select>
            </div>
        </form>
    </section>

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header"><h2 class="sp-section-title">Daftar kartu QR</h2><p class="mt-1 text-xs text-slate-500">{{ number_format($qrCodes->count(), 0, ',', '.') }} kartu</p></div>
        <div class="p-4">
            @if ($qrCodes->isEmpty())
                <p class="py-10 text-center text-sm text-slate-500">Belum ada QR Code yang sesuai filter. Generate QR terlebih dahulu jika diperlukan.</p>
            @else
                <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                    @foreach ($qrCodes as $qrCode)
                        <article class="attendance-qr-card rounded-xl border border-slate-200 bg-white p-4 text-center" data-card-name="{{ $qrCode->nama }}">
                            <span @class([
                                'inline-flex rounded-full px-3 py-1 text-xs font-bold uppercase',
                                'bg-sky-50 text-sky-700' => $qrCode->jenis === 'siswa',
                                'bg-violet-50 text-violet-700' => $qrCode->jenis === 'guru',
                            ])>{{ $qrCode->jenis }}</span>
                            <div class="mx-auto my-3 grid size-44 place-items-center rounded-lg bg-slate-50 p-2">
                                <canvas data-qr-value="{{ $qrCode->kode_qr }}" data-qr-name="{{ $qrCode->nama }}" aria-label="QR Code {{ $qrCode->nama }}"></canvas>
                            </div>
                            <h3 class="attendance-qr-card__name">{{ $qrCode->nama }}</h3>
                            <p class="mt-1 break-all font-mono text-xs text-slate-500">{{ $qrCode->kode_qr }}</p>
                            <button type="button" class="attendance-qr-card__download sp-btn-secondary mt-3 w-full justify-center text-xs" data-download-qr disabled>
                                <i class="bi bi-download" aria-hidden="true"></i>Simpan PNG
                            </button>
                        </article>
                    @endforeach
                </div>
            @endif
        </div>
    </section>
</div>

<style>
    .attendance-qr-card__name {
        display: -webkit-box;
        min-height: 2.8em;
        overflow: hidden;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-family: inherit;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.4;
        color: #1e293b;
    }

    @media print {
        @page { size: A4 portrait; margin: 10mm; }
        .app-sidebar, .app-header, .app-footer, .attendance-qr-card__download, .sp-card-header, .sp-card form, .pkbm-dashboard__heading button, .pkbm-dashboard__heading form { display: none !important; }
        .app-main { margin-left: 0 !important; }
        .app-content { min-height: 0 !important; padding: 0 !important; }
        .attendance-qr-card { break-inside: avoid; box-shadow: none !important; }
    }
</style>
@endsection