@extends('layouts.app')

@section('title', 'QR Code Anak Yatim')
@section('page-title', 'QR Code Anak Yatim')
@section('breadcrumb', 'Beranda / QR Code')

@push('styles')
<style>
.qr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.qr-card { text-align:center; padding:0; overflow:hidden; }

/* Fix SVG QR Code agar tidak float */
.qr-wrap svg,
.qr-wrap img { display:block; margin:0 auto; float:none !important; }

@media print {
    .no-print { display:none !important; }
    .qr-grid  { grid-template-columns: repeat(3, 1fr) !important; }
    .qr-card  { break-inside:avoid; page-break-inside:avoid; }
}
</style>
@endpush

@section('content')

{{-- Toolbar --}}
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;" class="no-print">
    <div style="font-size:14px; color:#6b8f7e;">
        Total <strong>{{ $anakYatim->count() }}</strong> QR Code siap dicetak
    </div>
    <div style="display:flex; gap:10px;">
        <a href="{{ route('qrcode.pdf') }}" class="btn btn-accent">
            <i class="fa-solid fa-file-pdf"></i> Export PDF
        </a>
        <a href="{{ route('qrcode.print') }}" class="btn btn-outline">
            <i class="fa-solid fa-print"></i> Cetak Semua
        </a>
    </div>
</div>

{{-- Grid QR --}}
<div class="qr-grid">
    @foreach($anakYatim as $anak)
    <div class="card qr-card">

        {{-- Header --}}
        <div style="background:var(--primary); padding:10px; color:#fff;">
            <div style="font-size:10px; opacity:.8; letter-spacing:.06em; text-transform:uppercase;">Santunan Anak Yatim</div>
            <div style="font-size:13px; font-weight:700; margin-top:2px;">{{ $anak->kode }}</div>
        </div>

        {{-- QR Code --}}
        <div class="qr-wrap" style="padding:18px 18px 10px; display:flex; justify-content:center; align-items:center;">
            @php
                $qrUrl = url('/api/scan') . '?token=' . $anak->qr_token;
            @endphp
            {!! QrCode::size(150)->errorCorrection('H')->generate($qrUrl) !!}
        </div>

        {{-- Info --}}
        <div style="padding:0 14px 14px;">
            <div style="font-size:13px; font-weight:700; margin-bottom:4px; line-height:1.3;">{{ $anak->nama }}</div>
            <div style="font-size:11px; color:#7aaa94;">{{ $anak->mushola }}</div>
            <div style="margin-top:10px;" class="no-print">
                <a href="{{ route('qrcode.show', $anak) }}" class="btn btn-outline btn-sm" style="font-size:11px;">
                    <i class="fa-solid fa-expand"></i> Lihat Detail
                </a>
            </div>
        </div>

    </div>
    @endforeach
</div>

@endsection