<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
    <meta charset="UTF-8">
    <title>{{ __('بطاقة عضوية') }} - {{ $participant->full_name }}</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Cairo', 'Noto Sans Arabic', sans-serif; direction: rtl; padding: 40px; background: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
        .card { width: 340px; background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        .card-header { background: linear-gradient(135deg, #1e40af, #3b82f6); padding: 20px; text-align: center; color: white; }
        .card-header h2 { font-size: 14px; opacity: 0.9; margin-bottom: 4px; }
        .card-header h1 { font-size: 12px; font-weight: normal; }
        .avatar { width: 80px; height: 80px; border-radius: 50%; background: white; margin: -40px auto 0; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: bold; color: #1e40af; border: 4px solid white; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
        .card-body { padding: 50px 20px 20px; text-align: center; }
        .name { font-size: 18px; font-weight: bold; color: #1e293b; margin-bottom: 4px; }
        .id-badge { display: inline-block; background: #f1f5f9; border-radius: 20px; padding: 4px 12px; font-size: 11px; color: #64748b; margin-bottom: 12px; }
        .info-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 12px; }
        .info-row:last-child { border-bottom: none; }
        .info-row label { color: #64748b; }
        .info-row span { font-weight: 600; color: #1e293b; }
        .programs { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
        .programs h4 { font-size: 12px; color: #64748b; margin-bottom: 8px; }
        .program-tag { display: inline-block; background: #eff6ff; color: #1d4ed8; border-radius: 12px; padding: 3px 10px; font-size: 11px; margin: 2px; }
        .card-footer { background: #f8fafc; padding: 12px; text-align: center; font-size: 10px; color: #94a3b8; }
        .no-print { margin-bottom: 20px; text-align: center; }
        @media print { body { background: white; padding: 0; } .no-print { display: none; } .card { box-shadow: none; } }
    </style>
</head>
<body>
    <div>
        <div class="no-print">
            <button onclick="window.print()" style="padding: 8px 20px; background: #2563eb; color: white; border: none; border-radius: 6px; cursor: pointer;">{{ __('طباعة البطاقة') }}</button>
        </div>

        <div class="card">
            <div class="card-header">
                <h2>{{ app()->bound('current_academy') ? app('current_academy')->name_ar : 'الكابتن' }}</h2>
                <h1>{{ __('بطاقة عضوية') }}</h1>
            </div>

            <div class="avatar">
                {{ mb_substr($participant->full_name ?? '?', 0, 1) }}
            </div>

            <div class="card-body">
                <p class="name">{{ $participant->full_name }}</p>
                <span class="id-badge">{{ $participant->uuid ?? "#{$participant->id}" }}</span>

                <div style="text-align: right; margin-top: 12px;">
                    <div class="info-row">
                        <label>{{ __('الحالة') }}</label>
                        <span>{{ __($participant->status) }}</span>
                    </div>
                    @if($participant->person?->date_of_birth)
                    <div class="info-row">
                        <label>{{ __('تاريخ الميلاد') }}</label>
                        <span dir="ltr">{{ $participant->person?->date_of_birth }}</span>
                    </div>
                    @endif
                    @if($participant->person?->gender)
                    <div class="info-row">
                        <label>{{ __('النوع') }}</label>
                        <span>{{ $participant->person?->gender === 'male' ? __('ذكر') : __('أنثى') }}</span>
                    </div>
                    @endif
                </div>

                @if($participant->enrollments->count())
                <div class="programs">
                    <h4>{{ __('البرامج النشطة') }}</h4>
                    @foreach($participant->enrollments as $enrollment)
                    <span class="program-tag">{{ $enrollment->trainingGroup?->program?->name_ar ?? $enrollment->trainingGroup?->name_ar ?? '-' }}</span>
                    @endforeach
                </div>
                @endif
            </div>

            <div class="card-footer">
                {{ __('تاريخ الإصدار') }}: {{ now()->format('Y-m-d') }}
            </div>
        </div>
    </div>
</body>
</html>
