<?php
/**
 * Template 3: Luxury Wine Split Layout
 */
$safe_emp_no      = (string)($card['employee_no'] ?? 'N/A');
$safe_name        = (string)($card['name'] ?? '');
$safe_designation = (string)($card['designation'] ?? 'STAFF MEMBER');
$safe_expiry      = (string)($card['expiry_date'] ?? '');
?>
<div class="cr80-card bg-white rounded-xl shadow-lg border border-slate-300 flex flex-col justify-between overflow-hidden text-center relative">
    
    <!-- Top White Split (Logo Container) -->
    <div class="h-[1.35in] bg-white pt-4 px-3 flex items-start justify-center z-0">
        <?php if (file_exists($company_logo) || filter_var($company_logo, FILTER_VALIDATE_URL)): ?>
            <img src="<?= htmlspecialchars((string)$company_logo); ?>" alt="Company Logo" class="h-12 max-w-[1.8in] object-contain">
        <?php else: ?>
            <h2 class="text-xs font-black tracking-tight text-[#8B1936]">
                <?= htmlspecialchars(ucwords(strtolower((string)$company_name))); ?>
            </h2>
        <?php endif; ?>
    </div>

    <!-- Bottom Deep Wine Split -->
    <div class="flex-1 bg-[#8B1936] text-white pt-11 pb-2 px-3 flex flex-col items-center justify-between relative z-0">
        
        <!-- Name & Designation -->
        <div class="px-1 space-y-0.5 mt-0.5">
            <h3 class="text-[13.5px] font-black text-white leading-tight tracking-tight">
                <?= htmlspecialchars(ucwords(strtolower($safe_name))); ?>
            </h3>
            <p class="text-[8px] font-semibold text-rose-100/90 uppercase tracking-widest mt-0.5">
                <?= htmlspecialchars($safe_designation); ?>
            </p>
        </div>

        <!-- White EMP Pill -->
        <div class="bg-stone-50/95 text-slate-800 px-3.5 py-1 rounded-md shadow-xs border border-white/80 my-1">
            <p class="text-[8.5px] font-mono font-bold tracking-wider">
                EMP: <?= htmlspecialchars($safe_emp_no); ?>
            </p>
        </div>

        <!-- Edge-to-Edge Expiry Footer -->
        <div class="w-full flex justify-between items-center text-[7.5px] text-rose-100 font-semibold px-1 pt-1">
            <span>Valid Until:</span>
            <span class="text-white font-bold">
                <?= !empty($safe_expiry) ? date('M Y', strtotime($safe_expiry)) : 'N/A'; ?>
            </span>
        </div>

    </div>

    <!-- Overlapping Circular Portrait (With White & Wine Ring Borders) -->
    <div class="absolute top-[0.7in] left-1/2 -translate-x-1/2 z-10">
        <div class="w-24 h-24 rounded-full bg-white p-[3px] shadow-md">
            <div class="w-full h-full rounded-full border-[2px] border-[#8B1936] bg-stone-50 flex items-center justify-center text-xl font-black text-[#8B1936] overflow-hidden">
                <?php if ($avatarPhoto): ?>
                    <img src="<?= $avatarPhoto; ?>" alt="<?= htmlspecialchars($safe_name); ?>" class="w-full h-full object-cover">
                <?php else: ?>
                    <?= htmlspecialchars((string)($initials ?? 'EE')); ?>
                <?php endif; ?>
            </div>
        </div>
    </div>

</div>