@extends('layouts.app')

@section('title', 'Member ID Card')

@section('content')
<div class="container">
    <div class="header">
        <h1>Digital ID Card</h1>
        <p>AsthaLink Member</p>
    </div>

    <div class="card" style="text-align:center;padding:24px">
        <div style="background:linear-gradient(135deg, var(--astha-red), var(--astha-red-dark));color:white;padding:24px;border-radius:var(--radius);margin-bottom:20px">
            <img src="{{ $user->profile_photo ? asset('storage/'.$user->profile_photo) : 'https://ui-avatars.com/api/?name='.urlencode($user->name).'&background=ffffff&color=e10600' }}" class="avatar avatar-lg" alt="" style="border:4px solid white;margin-bottom:12px">
            <h2 style="margin-bottom:4px">{{ $user->name }}</h2>
            <p style="font-size:13px;opacity:0.9">Member ID: {{ $user->member_id }}</p>
            <p style="font-size:14px;margin-top:8px"><i class="fas fa-droplet" style="margin-right:4px"></i>{{ $user->blood_group ?? '-' }} • {{ $user->city ?? '-' }}</p>
            <p style="font-size:12px;margin-top:4px">Joined {{ $user->created_at->format('M Y') }}</p>
        </div>
        <div style="display:flex;justify-content:center;margin:20px 0">
            {!! $qrCode !!}
        </div>
        <p style="font-size:12px;color:var(--text-secondary)">Scan to verify member profile</p>
    </div>
</div>
@endsection