<?php
/**
 * Template 2: Best Western Executive (Two-Tone Charcoal & Overlapping Portrait)
 */
$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.4in] bg-white pt-3 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 Charcoal Split -->
    <div class="flex-1 bg-[#4C4952] text-white pt-10 pb-2 px-2 flex flex-col items-center justify-between relative z-0">
        
        <!-- Name & Designation -->
        <div class="px-1 space-y-0.5 mt-1">
            <h3 class="text-[14px] font-extrabold text-white leading-tight tracking-tight">
                <?= htmlspecialchars(ucwords(strtolower($safe_name))); ?>
            </h3>
            <p class="text-[8px] font-semibold text-slate-300 uppercase tracking-widest">
                <?= htmlspecialchars($safe_designation); ?>
            </p>
        </div>

        <!-- White EMP Pill -->
        <div class="bg-white/95 text-[#333137] px-4 py-1 rounded-md shadow-xs border border-white">
            <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-slate-300 font-semibold px-2 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 (Positioned dynamically across the split line) -->
    <div class="absolute top-[0.8in] left-1/2 -translate-x-1/2 z-10">
        <div class="w-24 h-24 rounded-full bg-white border-[3px] border-[#8B1936] flex items-center justify-center text-xl font-black text-[#8B1936] shadow-md 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>