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

$design = BrandingService::carnetDesign();
$clubNameAr = BrandingService::clubNameAr();
$clubNameEn = BrandingService::clubNameEn();
$logoUrl = BrandingService::logo();
$stripColor = $design['back_strip_color'];
$bgColor    = $design['front_bg_color'];
$textColor  = $design['front_text_color'];

$depPhotoPath = $dependent['photo_path'] ?? '';
$parentPhotoPath = $member['photo_path'] ?? '';
$membershipNumber = $member['membership_number'] ?? '—';
$depName = $dependent['full_name_ar'] ?? '—';
$depNameEn = $dependent['full_name_en'] ?? '';
$branchName = $member['branch_name'] ?? '';
?>
<?php $__template->layout('Layout.print'); ?>
<?php $__template->section('title'); ?>كارنيه تابع — <?= e($depName) ?><?php $__template->endSection(); ?>
<?php $__template->section('content'); ?>
<style>
    @media print { body { margin: 0; } .print-header { display: none; } }
    .carnet-container { width: 340px; margin: 20px auto; font-family: 'Cairo', Arial, sans-serif; }
    .carnet-front {
        width: 340px; height: 215px; background: <?= e($bgColor) ?>; border-radius: 12px;
        color: <?= e($textColor) ?>; position: relative; overflow: hidden; margin-bottom: 15px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; direction: rtl;
    }
    .carnet-front .photo-side {
        width: 120px; height: 215px; flex-shrink: 0; position: relative; overflow: hidden;
        border-radius: 12px 0 0 12px;
    }
    .carnet-front .photo-side img { width: 100%; height: 100%; object-fit: cover; }
    .carnet-front .info-side {
        flex: 1; padding: 12px 15px; display: flex; flex-direction: column; justify-content: space-between;
    }
    .carnet-front .club-header { text-align: center; }
    .carnet-front .club-header img { max-height: 22px; }
    .carnet-front .club-name { font-size: 11px; font-weight: 700; margin-top: 3px; }
    .carnet-front .dep-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
    .carnet-front .dep-name-en { font-size: 10px; opacity: 0.8; margin-bottom: 5px; }
    .carnet-front .dep-type { font-size: 11px; opacity: 0.9; margin-bottom: 6px; }
    .carnet-front .parent-ref {
        display: flex; align-items: center; gap: 8px; padding: 6px 8px;
        background: rgba(255,255,255,0.15); border-radius: 6px; margin-top: auto;
    }
    .carnet-front .parent-ref .parent-photo {
        width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.5); flex-shrink: 0;
    }
    .carnet-front .parent-ref .parent-photo img { width: 100%; height: 100%; object-fit: cover; }
    .carnet-front .parent-ref .parent-info { font-size: 10px; line-height: 1.4; }
    .carnet-front .parent-ref .parent-number { font-weight: 700; font-size: 12px; direction: ltr; }
    .carnet-front .carnet-num { font-size: 9px; opacity: 0.6; text-align: left; margin-top: 4px; }
    .carnet-front .qr-area {
        position: absolute; bottom: 8px; left: 8px; width: 50px; height: 50px;
        background: #fff; border-radius: 5px; padding: 3px;
    }
    .carnet-front .qr-area svg { width: 44px; height: 44px; }
    .carnet-back {
        width: 340px; height: 215px; background: #fff; border-radius: 12px;
        border: 2px solid <?= e($stripColor) ?>; padding: 18px 20px; position: relative;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .carnet-back .back-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 2px solid <?= e($stripColor) ?>; padding-bottom: 8px; }
    .carnet-back .back-header img { max-height: 22px; }
    .carnet-back .back-header .logo-text { font-size: 11px; font-weight: 700; color: <?= e($stripColor) ?>; }
    .carnet-back .branch-strip { position: absolute; left: 0; top: 0; bottom: 0; width: 28px; background: <?= e($stripColor) ?>; border-radius: 12px 0 0 12px; writing-mode: vertical-rl; text-orientation: mixed; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 600; }
    .carnet-back .dep-info { margin-right: 32px; font-size: 12px; color: #1A1A2E; }
    .carnet-back .dep-info div { margin-bottom: 4px; }
    .carnet-back .dep-info strong { color: <?= e($stripColor) ?>; }
</style>

<div class="carnet-container">
    <!-- Front -->
    <div class="carnet-front">
        <div class="photo-side">
            <?php if ($depPhotoPath): ?>
                <img src="/<?= e($depPhotoPath) ?>" alt="صورة التابع">
            <?php else: ?>
                <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.6);font-size:11px;">لا توجد صورة</div>
            <?php endif; ?>
        </div>
        <div class="info-side">
            <div class="club-header">
                <?php if ($logoUrl): ?>
                    <img src="<?= e($logoUrl) ?>" alt="Logo">
                <?php endif; ?>
                <div class="club-name"><?= e($clubNameAr) ?></div>
            </div>
            <div>
                <div class="dep-name"><?= e($depName) ?></div>
                <?php if ($depNameEn): ?>
                    <div class="dep-name-en"><?= e($depNameEn) ?></div>
                <?php endif; ?>
                <div class="dep-type"><?= e($typeLabel) ?></div>
            </div>
            <div class="parent-ref">
                <div class="parent-photo">
                    <?php if ($parentPhotoPath): ?>
                        <img src="/<?= e($parentPhotoPath) ?>" alt="العضو">
                    <?php endif; ?>
                </div>
                <div class="parent-info">
                    تابع لعضوية رقم<br>
                    <span class="parent-number"><?= e($membershipNumber) ?></span>
                </div>
            </div>
            <div class="carnet-num"><?= e($carnet['carnet_number']) ?></div>
        </div>
        <div class="qr-area"><?= $qrSvg ?></div>
    </div>

    <!-- Back -->
    <div class="carnet-back">
        <?php if ($branchName): ?>
            <div class="branch-strip"><?= e($branchName) ?></div>
        <?php endif; ?>
        <div class="back-header">
            <?php if ($logoUrl): ?>
                <img src="<?= e($logoUrl) ?>" alt="Logo">
            <?php else: ?>
                <div class="logo-text"><?= e($clubNameEn) ?><br><?= e($clubNameAr) ?></div>
            <?php endif; ?>
        </div>
        <div class="dep-info">
            <div><strong>اسم التابع:</strong> <?= e($depName) ?></div>
            <div><strong>نوع القرابة:</strong> <?= e($typeLabel) ?></div>
            <div><strong>اسم العضو:</strong> <?= e($member['full_name_ar'] ?? '—') ?></div>
            <div><strong>رقم العضوية:</strong> <?= e($membershipNumber) ?></div>
            <div><strong>الفرع:</strong> <?= e($branchName) ?></div>
            <div><strong>تاريخ الإصدار:</strong> <?= e(isset($carnet['issued_at']) ? substr($carnet['issued_at'], 0, 10) : date('Y-m-d')) ?></div>
        </div>
    </div>
</div>
<?php $__template->endSection(); ?>
