<?php
use App\Modules\Settings\Services\BrandingService;

$clubNameAr = BrandingService::clubNameAr();
$clubNameEn = BrandingService::clubNameEn();
$logoUrl = BrandingService::logo();

$photoPath = $card['player_photo'] ?? $card['photo_path'] ?? '';
$cardStatus = $card['status'];
$validUntil = $card['valid_until'] ?? null;
?>
<?php $__template->layout('Layout.print'); ?>
<?php $__template->section('title'); ?>كارت النشاط الرياضي — <?= e($card['card_number']) ?><?php $__template->endSection(); ?>
<?php $__template->section('content'); ?>
<style>
    @media print { body { margin: 0; } .no-print { display: none !important; } }
    .sa-card-container { width: 340px; margin: 20px auto; font-family: 'Cairo', Arial, sans-serif; }
    .sa-card-front {
        width: 340px; height: 215px; background: linear-gradient(135deg, #1E3A5F 0%, #2563EB 100%);
        border-radius: 12px; color: #fff; position: relative; overflow: hidden; margin-bottom: 15px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2); display: flex; direction: rtl;
    }
    .sa-card-front .photo-side {
        width: 110px; height: 215px; flex-shrink: 0; position: relative; overflow: hidden;
        border-radius: 12px 0 0 12px;
    }
    .sa-card-front .photo-side img { width: 100%; height: 100%; object-fit: cover; }
    .sa-card-front .photo-side .no-photo {
        width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); font-size: 11px;
    }
    .sa-card-front .info-side { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; }
    .sa-card-front .club-header { display: flex; align-items: center; gap: 8px; }
    .sa-card-front .club-header img { max-height: 22px; }
    .sa-card-front .club-header .club-name { font-size: 11px; font-weight: 600; opacity: 0.9; }
    .sa-card-front .badge { position: absolute; top: 10px; left: 10px; background: #F59E0B; color: #1A1A2E; font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
    .sa-card-front .player-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
    .sa-card-front .player-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
    .sa-card-front .player-name-en { font-size: 10px; opacity: 0.7; margin-bottom: 6px; }
    .sa-card-front .card-num { font-size: 16px; font-weight: 700; letter-spacing: 1.5px; direction: ltr; text-align: right; }
    .sa-card-front .activity-name { font-size: 11px; opacity: 0.8; margin-top: 4px; }
    .sa-card-front .validity { font-size: 10px; opacity: 0.7; }
    .sa-card-front .qr-area {
        position: absolute; bottom: 8px; left: 8px; width: 50px; height: 50px;
        background: #fff; border-radius: 5px; padding: 3px;
    }
    .sa-card-front .qr-area svg { width: 44px; height: 44px; }
    .sa-card-back {
        width: 340px; height: 215px; background: #fff; border-radius: 12px;
        border: 2px solid #2563EB; padding: 16px; position: relative;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .sa-card-back .back-header { text-align: center; border-bottom: 2px solid #2563EB; padding-bottom: 8px; margin-bottom: 10px; }
    .sa-card-back .back-header .title { font-size: 12px; font-weight: 700; color: #2563EB; }
    .sa-card-back .rules { font-size: 9px; color: #6B7280; line-height: 1.6; }
    .sa-card-back .rules li { margin-bottom: 3px; }
    .sa-card-back .emergency { position: absolute; bottom: 10px; left: 16px; right: 16px; text-align: center; font-size: 9px; color: #9CA3AF; border-top: 1px solid #E5E7EB; padding-top: 6px; }
</style>

<div class="no-print" style="text-align:center;padding:10px;">
    <button onclick="window.print()" style="padding:8px 20px;background:#2563EB;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;">طباعة</button>
    <a href="/sa/cards" style="margin-right:10px;color:#6B7280;font-size:14px;">رجوع</a>
</div>

<div class="sa-card-container">
    <!-- Front -->
    <div class="sa-card-front">
        <div class="badge">نشاط رياضي</div>
        <div class="photo-side">
            <?php if ($photoPath): ?>
            <img src="/<?= e($photoPath) ?>" alt="صورة">
            <?php else: ?>
            <div class="no-photo">لا صورة</div>
            <?php endif; ?>
        </div>
        <div class="info-side">
            <div class="club-header">
                <?php if ($logoUrl): ?><img src="<?= e($logoUrl) ?>" alt="Logo"><?php endif; ?>
                <span class="club-name"><?= e($clubNameAr) ?></span>
            </div>
            <div class="player-info">
                <div class="player-name"><?= e($card['full_name_ar']) ?></div>
                <?php if (!empty($card['full_name_en'])): ?>
                <div class="player-name-en"><?= e($card['full_name_en']) ?></div>
                <?php endif; ?>
                <div class="card-num"><?= e($card['card_number']) ?></div>
                <?php if ($group): ?>
                <div class="activity-name"><?= e($group['discipline_name'] ?? '') ?> — <?= e($group['name_ar'] ?? '') ?></div>
                <?php endif; ?>
            </div>
            <div class="validity">
                صالح من: <?= e(substr($card['valid_from'], 0, 10)) ?>
                <?php if ($validUntil): ?> — حتى: <?= e($validUntil) ?><?php endif; ?>
            </div>
        </div>
        <div class="qr-area"><?= $qrSvg ?></div>
    </div>

    <!-- Back -->
    <div class="sa-card-back">
        <div class="back-header">
            <div class="title"><?= e($clubNameAr) ?> — قسم الأنشطة الرياضية</div>
        </div>
        <ul class="rules">
            <li>هذا الكارت شخصي ولا يجوز استخدامه من الغير.</li>
            <li>يجب إبراز الكارت عند الدخول لمنطقة النشاط.</li>
            <li>في حالة فقدان الكارت يتم الإبلاغ فوراً واستخراج بدل فاقد.</li>
            <li>الإدارة غير مسؤولة عن المتعلقات الشخصية.</li>
            <li>يلتزم اللاعب بالزي الرياضي المناسب.</li>
        </ul>
        <div class="emergency"><?= e($clubNameEn) ?> — Sports Activity Card</div>
    </div>
</div>
<?php $__template->endSection(); ?>
