@extends('layouts.app')

@section('title', 'QR Code — ' . $anak->nama)
@section('page-title', 'QR Code Detail')
@section('breadcrumb', 'Beranda / QR Code / ' . $anak->nama)

@push('styles')
<style>
/* Fix SVG QR Code agar tidak float */
.qr-wrap svg,
.qr-wrap img { display:block; margin:0 auto; float:none !important; }

@media print {
    #sidebar, #header, .no-print { display: none !important; }
    #main { margin: 0 !important; padding: 20px !important; }
}
</style>
@endpush

@section('content')

<div style="max-width:400px; margin:0 auto;">
    <div class="card" style="text-align:center; overflow:hidden;">

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

        {{-- QR --}}
        <div class="qr-wrap" style="padding:28px; background:#fafcfb; display:flex; justify-content:center; align-items:center;">
            {!! QrCode::size(220)->errorCorrection('H')->generate(
                url('/api/scan') . '?token=' . $anak->qr_token
            ) !!}
        </div>

        {{-- Info --}}
        <div style="padding:20px 24px 24px;">
            <div style="font-size:17px; font-weight:700; margin-bottom:6px;">{{ $anak->nama }}</div>
            <div style="font-size:13px; color:#7aaa94; margin-bottom:4px;">{{ $anak->mushola }}</div>
            @if($anak->sekolah)
                <div style="font-size:13px; color:#7aaa94; margin-bottom:12px;">{{ $anak->sekolah }}</div>
            @endif

            <div style="background:#f0f4f2; border-radius:8px; padding:10px 14px; margin-bottom:16px;">
                <div style="font-size:10px; color:#9db8ac; text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px;">Token QR</div>
                <div style="font-size:12px; font-family:monospace; color:#3d6657; word-break:break-all;">{{ $anak->qr_token }}</div>
            </div>

            <div style="display:flex; gap:10px;" class="no-print">
                <button onclick="window.print()" class="btn btn-primary" style="flex:1; justify-content:center;">
                    <i class="fa-solid fa-print"></i> Cetak
                </button>
                <a href="{{ route('qrcode.index') }}" class="btn btn-outline" style="flex:1; justify-content:center;">
                    Kembali
                </a>
            </div>
        </div>
    </div>
</div>

@endsection