@extends('layouts.admin')
@section('title', 'Member QR Code')
@section('page-title', 'Member QR Code')
@section('page-subtitle', 'Attendance check-in QR code')

@section('content')
<div class="max-w-md mx-auto">
    <div class="card-royal p-8 text-center">
        <div class="mb-6">
            <h2 class="font-cinzel font-bold text-2xl text-[var(--text-primary)]">{{ $member->full_name }}</h2>
            <p class="text-[var(--text-secondary)]">{{ $member->member_id }}</p>
        </div>
        
        <div class="bg-white p-6 rounded-xl inline-block mb-6 shadow-lg">
            <img src="{{ route('admin.members.qrcode.image', $member->id) }}" 
                 alt="QR Code" 
                 class="w-48 h-48">
        </div>
        
        <p class="text-sm text-[var(--text-secondary)] mb-4">
            Scan this code at the check-in station
        </p>
        
        <div class="flex justify-center gap-4">
            <a href="{{ route('admin.members.show', $member->id) }}" class="px-6 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                Back to Profile
            </a>
            <button onclick="window.print()" class="btn-royal px-6 py-2 rounded-lg text-white">
                <i class="fas fa-print mr-2"></i> Print
            </button>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const img = document.querySelector('img[alt="QR Code"]');
    if (img && !img.complete) {
        img.onerror = function() {
            console.log('QR code image failed to load');
        };
    }
});
</script>
@endpush