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

$design = BrandingService::carnetDesign();
$clubNameAr = BrandingService::clubNameAr();
$clubNameEn = BrandingService::clubNameEn();
$clubSubtitle = BrandingService::subtitle();
$logoUrl = BrandingService::logo();

$bgColor    = $design['front_bg_color'];
$textColor  = $design['front_text_color'];
$showSub    = $design['front_show_subtitle'];
$showEn     = $design['front_show_english_name'];
$showType   = $design['front_show_member_type'];
$showQr     = $design['front_show_qr'];
$qrPos      = $design['front_qr_position'];
$logoPos    = $design['front_logo_position'];
$showStrip  = $design['back_show_branch_strip'];
$stripColor = $design['back_strip_color'];
$showInstr  = $design['back_show_instructions'];
$instrText  = $design['back_instructions_text'];
$backFields = $design['back_fields'] ?? [];

// Logo position CSS
$logoAlign = 'text-align:center;';
if ($logoPos === 'top-right') $logoAlign = 'text-align:right;';
elseif ($logoPos === 'top-left') $logoAlign = 'text-align:left;';

// Back field data map
$fieldLabels = [
    'full_name_ar' => 'الاسم',
    'full_name_en' => 'Name',
    'membership_number' => 'رقم العضوية',
    'branch_name' => 'الفرع',
    'issued_at' => 'تاريخ الإصدار',
    'national_id' => 'الرقم القومي',
    'phone' => 'الهاتف',
];
$fieldValues = [
    'full_name_ar' => $carnet['full_name_ar'] ?? '—',
    'full_name_en' => $carnet['full_name_en'] ?? '—',
    'membership_number' => $carnet['membership_number'] ?? '—',
    'branch_name' => $carnet['branch_name'] ?? '—',
    'issued_at' => isset($carnet['issued_at']) ? substr($carnet['issued_at'], 0, 10) : '—',
    'national_id' => $carnet['national_id'] ?? '—',
    'phone' => $carnet['phone'] ?? '—',
];

$photoPath = $carnet['photo_path'] ?? '';
?>
<?php $__template->layout('Layout.print'); ?>
<?php $__template->section('title'); ?>كارنيه العضوية — <?= e($carnet['membership_number'] ?? $carnet['carnet_number']) ?><?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 .photo-side .no-photo {
        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;
    }
    .carnet-front .info-side {
        flex: 1; padding: 15px 18px; display: flex; flex-direction: column; justify-content: space-between;
    }
    .carnet-front .club-header { <?= $logoAlign ?> }
    .carnet-front .club-header .front-logo img { max-height: 26px; }
    .carnet-front .club-name { font-size: 13px; font-weight: 700; margin-top: 4px; }
    .carnet-front .club-subtitle { font-size: 10px; opacity: 0.8; }
    .carnet-front .member-details { flex: 1; display: flex; flex-direction: column; justify-content: center; }
    .carnet-front .member-name { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
    .carnet-front .member-name-en { font-size: 10px; opacity: 0.8; margin-bottom: 6px; }
    .carnet-front .member-number { font-size: 18px; font-weight: 700; letter-spacing: 2px; direction: ltr; text-align: right; }
    .carnet-front .member-type { font-size: 10px; margin-top: 3px; opacity: 0.8; }
    .carnet-front .carnet-num { font-size: 9px; opacity: 0.6; text-align: left; }
    .carnet-front .qr-area {
        position: absolute; bottom: 10px; left: 10px; width: 55px; height: 55px;
        background: #fff; border-radius: 5px; padding: 4px;
    }
    .carnet-front .qr-area svg { width: 47px; height: 47px; }
    .carnet-back {
        width: 340px; height: 215px; background: #fff; border-radius: 12px;
        border: 2px solid <?= e($stripColor) ?>; padding: 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: 15px; border-bottom: 2px solid <?= e($stripColor) ?>; padding-bottom: 10px; }
    .carnet-back .back-header .logo-text { font-size: 12px; font-weight: 700; color: <?= e($stripColor) ?>; }
    .carnet-back .back-header .back-logo img { max-height: 25px; }
    .carnet-back .branch-strip { position: absolute; left: 0; top: 0; bottom: 0; width: 30px; 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: 11px; font-weight: 600; }
    .carnet-back .instructions { font-size: 10px; color: #6B7280; text-align: center; position: absolute; bottom: 10px; left: 40px; right: 10px; }
    .carnet-back .member-info { margin-right: 35px; font-size: 12px; color: #1A1A2E; }
    .carnet-back .member-info div { margin-bottom: 4px; }
    .carnet-back .member-info strong { color: <?= e($stripColor) ?>; }
</style>

<div class="carnet-container">
    <!-- Front -->
    <div class="carnet-front">
        <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): ?>
                    <div class="front-logo"><img src="<?= e($logoUrl) ?>" alt="Logo"></div>
                <?php endif; ?>
                <div class="club-name"><?= e($clubNameAr) ?></div>
                <?php if ($showSub): ?>
                    <div class="club-subtitle"><?= e($clubSubtitle) ?></div>
                <?php endif; ?>
            </div>
            <div class="member-details">
                <div class="member-name"><?= e($carnet['full_name_ar']) ?></div>
                <?php if ($showEn && !empty($carnet['full_name_en'])): ?>
                    <div class="member-name-en"><?= e($carnet['full_name_en']) ?></div>
                <?php endif; ?>
                <div class="member-number"><?= e($carnet['membership_number'] ?? '—') ?></div>
                <?php if ($showType): ?>
                    <div class="member-type"><?= $carnet['carnet_type'] === 'seasonal' ? 'عضوية موسمية' : 'عضو عامل' ?></div>
                <?php endif; ?>
            </div>
            <div class="carnet-num"><?= e($carnet['carnet_number']) ?></div>
        </div>
        <?php if ($showQr): ?>
            <div class="qr-area"><?= $qrSvg ?></div>
        <?php endif; ?>
    </div>

    <!-- Back -->
    <div class="carnet-back">
        <?php if ($showStrip): ?>
            <div class="branch-strip"><?= e($carnet['branch_name'] ?? '') ?></div>
        <?php endif; ?>
        <div class="back-header">
            <?php if ($logoUrl): ?>
                <div class="back-logo"><img src="<?= e($logoUrl) ?>" alt="Logo"></div>
            <?php else: ?>
                <div class="logo-text"><?= e($clubNameEn) ?><br><?= e($clubNameAr) ?></div>
            <?php endif; ?>
        </div>
        <div class="member-info">
            <?php foreach ($backFields as $field): ?>
                <?php if (isset($fieldLabels[$field])): ?>
                    <div><strong><?= e($fieldLabels[$field]) ?>:</strong> <?= e($fieldValues[$field] ?? '—') ?></div>
                <?php endif; ?>
            <?php endforeach; ?>
        </div>
        <?php if ($showInstr): ?>
            <div class="instructions"><?= e($instrText) ?></div>
        <?php endif; ?>
    </div>
</div>
<?php $__template->endSection(); ?>
