<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Staff Attendance QR Card - <?php echo htmlspecialchars($cashier['name']); ?></title>
    
    <!-- Fonts & Icons -->
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,400&family=Outfit:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Styling -->
    <style>
        :root {
            --primary: #059669; /* Emerald */
            --primary-dark: #047857;
            --accent: #d4af37; /* Polished Gold */
            --accent-light: #f3e5ab;
            --slate-800: #1e293b;
            --slate-900: #0f172a;
            --gray-100: #f3f4f6;
            --gray-500: #6b7280;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #06080e;
            background-image: radial-gradient(circle at 50% 50%, #0d1222 0%, #04050a 100%);
            color: #e2e8f0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 60px;
        }

        /* Control Bar styling (Screen only) */
        .control-bar {
            width: 100%;
            max-width: 850px;
            background: rgba(13, 17, 30, 0.75);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(212, 175, 55, 0.15);
            border-radius: 20px;
            padding: 18px 28px;
            margin: 25px 0 35px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
            z-index: 10;
        }

        .theme-selector {
            display: flex;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 30px;
            padding: 4px;
            gap: 4px;
        }

        .theme-btn {
            background: transparent;
            color: #94a3b8;
            border: none;
            padding: 8px 18px;
            border-radius: 25px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.25s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .theme-btn.active {
            color: #111827;
            background: linear-gradient(135deg, #f3e5ab, #d4af37);
            box-shadow: 0 4px 10px rgba(212, 175, 55, 0.25);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 11px 20px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.25s ease;
            border: 1px solid transparent;
        }

        .btn-back {
            background: rgba(255, 255, 255, 0.04);
            color: #a1a1aa;
            border-color: rgba(255, 255, 255, 0.08);
        }
        .btn-back:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
            border-color: rgba(255, 255, 255, 0.15);
        }

        .btn-primary {
            background: linear-gradient(135deg, #059669, #047857);
            color: #fff;
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);
        }
        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35);
        }

        .btn-accent {
            background: linear-gradient(135deg, #f6e08a, #d4af37);
            color: #111625;
            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
        }
        .btn-accent:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.45);
        }

        .btn-outline {
            background: transparent;
            color: #e2e8f0;
            border-color: rgba(212, 175, 55, 0.25);
        }
        .btn-outline:hover {
            background: rgba(212, 175, 55, 0.05);
            border-color: rgba(212, 175, 55, 0.45);
        }

        .btn-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        /* Card Container with realistic shadow */
        .card-container {
            perspective: 1000px;
            margin-bottom: 20px;
        }

        .qr-card {
            width: 390px;
            height: 660px;
            border-radius: 28px;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75);
            padding: 35px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* ── THEME STYLINGS ── */

        /* 1. Obsidian Gold Theme (Default) */
        .theme-obsidian {
            background: radial-gradient(circle at center, #1b233a 0%, #07090e 100%);
            color: #f3e5ab;
            border: 8px solid #0d111d;
            outline: 1px solid rgba(212, 175, 55, 0.2);
        }

        .theme-obsidian::before {
            content: '';
            position: absolute;
            top: 8px;
            bottom: 8px;
            left: 8px;
            right: 8px;
            border: 1.5px solid var(--accent);
            border-radius: 20px;
            pointer-events: none;
            z-index: 1;
        }

        /* Inner dual border */
        .theme-obsidian::after {
            content: '';
            position: absolute;
            top: 14px;
            bottom: 14px;
            left: 14px;
            right: 14px;
            border: 0.5px dashed rgba(212, 175, 55, 0.35);
            border-radius: 15px;
            pointer-events: none;
            z-index: 1;
        }

        .theme-obsidian .card-decor-top {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: linear-gradient(90deg, #aa7c11 0%, #f3e5ab 50%, #aa7c11 100%);
            z-index: 2;
        }

        .theme-obsidian .restaurant-name {
            font-family: 'Cormorant Garamond', serif;
            font-size: 20px;
            font-weight: 700;
            color: #d4af37 !important;
            text-transform: uppercase;
            letter-spacing: 2.5px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

        .theme-obsidian .card-title-pill {
            background: rgba(212, 175, 55, 0.08);
            border: 1px solid rgba(212, 175, 55, 0.3);
            border-radius: 30px;
            padding: 3px 14px;
        }

        .theme-obsidian .card-title-text {
            color: #f3e5ab !important;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .theme-obsidian .qr-wrapper-outer {
            background: #ffffff;
            border-radius: 22px;
            padding: 16px;
            border: 4px solid #d4af37;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        }

        .theme-obsidian .cashier-label {
            font-family: 'Outfit', sans-serif;
            font-size: 20px;
            font-weight: 800;
            color: #ffffff !important;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            text-shadow: 0 2px 5px rgba(0,0,0,0.4);
        }

        .theme-obsidian .cashier-sub {
            font-size: 11px;
            color: #94a3b8 !important;
            font-weight: 500;
        }

        .theme-obsidian .instructions-container {
            background: rgba(255, 255, 255, 0.02);
            border: 1px dashed rgba(212, 175, 55, 0.25);
            border-radius: 18px;
            padding: 16px 20px;
        }

        .theme-obsidian .step-num {
            background: linear-gradient(135deg, #f3e5ab, #d4af37);
            color: #0a0e1a;
            font-weight: 800;
        }

        .theme-obsidian .step-text {
            color: #ffffff !important;
        }

        .theme-obsidian .step-desc {
            color: #94a3b8 !important;
        }

        .theme-obsidian .card-footer {
            border-top: 1px dashed rgba(212, 175, 55, 0.25);
        }

        .theme-obsidian .footer-logo {
            font-family: 'Cormorant Garamond', serif;
            font-size: 16px;
            font-weight: 700;
            color: #d4af37 !important;
            letter-spacing: 2px;
        }

        .theme-obsidian .footer-tagline {
            color: #64748b !important;
        }


        /* 2. Ivory Emerald Theme */
        .theme-ivory {
            background: #fdfbf7;
            color: #1e293b;
            border: 8px solid #ffffff;
            outline: 1px solid rgba(0, 0, 0, 0.05);
        }

        .theme-ivory::before {
            content: '';
            position: absolute;
            top: 8px;
            bottom: 8px;
            left: 8px;
            right: 8px;
            border: 2.5px solid var(--accent);
            border-radius: 20px;
            pointer-events: none;
            z-index: 1;
        }

        .theme-ivory::after {
            content: '';
            position: absolute;
            top: 14px;
            bottom: 14px;
            left: 14px;
            right: 14px;
            border: 0.5px dashed rgba(5, 150, 105, 0.3);
            border-radius: 15px;
            pointer-events: none;
            z-index: 1;
        }

        .theme-ivory .card-decor-top {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 50%, var(--accent) 100%);
            z-index: 2;
        }

        .theme-ivory .restaurant-name {
            font-family: 'Cormorant Garamond', serif;
            font-size: 20px;
            font-weight: 700;
            color: var(--primary-dark);
            text-transform: uppercase;
            letter-spacing: 2.5px;
        }

        .theme-ivory .card-title-pill {
            background: rgba(5, 150, 105, 0.06);
            border: 1px solid rgba(5, 150, 105, 0.2);
            border-radius: 30px;
            padding: 3px 14px;
        }

        .theme-ivory .card-title-text {
            color: var(--primary-dark);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .theme-ivory .qr-wrapper-outer {
            background: #ffffff;
            border-radius: 22px;
            padding: 16px;
            border: 4px solid var(--accent);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        }

        .theme-ivory .cashier-label {
            font-family: 'Outfit', sans-serif;
            font-size: 20px;
            font-weight: 800;
            color: var(--slate-800);
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        .theme-ivory .cashier-sub {
            font-size: 11px;
            color: var(--gray-500);
            font-weight: 500;
        }

        .theme-ivory .instructions-container {
            background: #fbfbfc;
            border: 1px dashed rgba(5, 150, 105, 0.2);
            border-radius: 18px;
            padding: 16px 20px;
        }

        .theme-ivory .step-num {
            background: var(--primary);
            color: #ffffff;
            font-weight: 700;
        }

        .theme-ivory .step-text {
            color: var(--slate-800);
        }

        .theme-ivory .step-desc {
            color: var(--gray-500);
        }

        .theme-ivory .card-footer {
            border-top: 1px dashed rgba(212, 175, 55, 0.35);
        }

        .theme-ivory .footer-logo {
            font-family: 'Cormorant Garamond', serif;
            font-size: 16px;
            font-weight: 700;
            color: var(--primary-dark);
            letter-spacing: 2px;
        }

        .theme-ivory .footer-tagline {
            color: var(--gray-500);
        }


        /* ── COMMON CARD LAYOUTS ── */

        .card-content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            justify-content: space-between;
            text-align: center;
        }

        .card-header {
            margin-top: 5px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .logo-placeholder {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: rgba(212, 175, 55, 0.08);
            border: 2px solid var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            font-family: 'Outfit', sans-serif;
            font-weight: 800;
            font-size: 24px;
            margin-bottom: 10px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        .logo-img {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            border: 2px solid var(--accent);
            object-fit: cover;
            margin-bottom: 10px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        /* QR area */
        .qr-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 10px 0;
            width: 100%;
        }

        #qrcodeImgContainer {
            width: 155px;
            height: 155px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Instruction steps */
        .instructions-container {
            width: 100%;
            text-align: left;
        }

        .instruction-step {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
        }
        .instruction-step:last-child {
            margin-bottom: 0;
        }

        .step-num {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            flex-shrink: 0;
        }

        .step-text {
            font-size: 11px;
            font-weight: 700;
        }

        .step-desc {
            font-size: 9px;
            font-weight: 400;
            display: block;
            margin-top: 1px;
        }

        /* Footer */
        .card-footer {
            width: 100%;
            padding-top: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .footer-tagline {
            font-size: 8px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-top: 2px;
        }

        /* Hidden QR target (used for qrcodejs generation) */
        #qr-source-target {
            display: none;
        }

        /* Print optimization styles */
        @media print {
            body {
                padding: 0;
                margin: 0;
                display: block;
            }
            body.print-theme-obsidian {
                background: #07090e !important;
                color: #f3e5ab !important;
            }
            body.print-theme-ivory {
                background: #ffffff !important;
                color: #1e293b !important;
            }
            .control-bar {
                display: none !important;
            }
            .card-container {
                margin: 0;
                box-shadow: none;
                width: 100%;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .qr-card {
                box-shadow: none !important;
                border: none !important;
                outline: none !important;
                transform: none !important;
            }
        }
    </style>
</head>
<body class="print-theme-obsidian">

    <!-- Control Bar (Screen Only) -->
    <div class="control-bar no-print">
        <a href="<?php echo $_SESSION['role'] === 'hr_manager' ? '/hr' : '/admin/hr'; ?>" class="btn btn-back">
            <i class="fas fa-arrow-left"></i> Back
        </a>
        
        <!-- Luxury Theme Switcher -->
        <div class="theme-selector">
            <button onclick="switchTheme('obsidian')" id="btn-theme-obsidian" class="theme-btn active">
                <i class="fas fa-moon mr-1"></i> Obsidian Gold
            </button>
            <button onclick="switchTheme('ivory')" id="btn-theme-ivory" class="theme-btn">
                <i class="fas fa-sun mr-1"></i> Classic Ivory
            </button>
        </div>

        <div class="btn-group">
            <button onclick="window.print()" class="btn btn-outline">
                <i class="fas fa-print"></i> Print Card
            </button>
            <button onclick="downloadQROnly()" class="btn btn-outline">
                <i class="fas fa-qrcode"></i> Download QR Only
            </button>
            <button onclick="downloadCardPNG()" class="btn btn-accent">
                <i class="fas fa-download"></i> Download Stand PNG
            </button>
        </div>
    </div>

    <!-- Printable Stand Card Container -->
    <div class="card-container">
        <div class="qr-card theme-obsidian" id="printCardElement">
            <div class="card-decor-top"></div>
            
            <div class="card-content">
                
                <!-- Header -->
                <div class="card-header">
                    <?php if(!empty($cashier['logo'])): ?>
                        <img src="/<?php echo htmlspecialchars($cashier['logo']); ?>" class="logo-img" id="cardLogoImg" alt="Logo" />
                    <?php else: ?>
                        <div class="logo-placeholder" id="cardLogoFallback">
                            <?php echo strtoupper(substr($cashier['rest_name'] ?? 'R', 0, 1)); ?>
                        </div>
                    <?php endif; ?>
                    
                    <h1 class="restaurant-name"><?php echo htmlspecialchars($cashier['rest_name'] ?? 'Restaurant'); ?></h1>
                    
                    <div class="card-title-pill">
                        <span class="card-title-text">Staff Attendance Stand</span>
                    </div>
                </div>

                <!-- QR Center Section -->
                <div class="qr-section">
                    <div class="qr-wrapper-outer">
                        <div id="qrcodeImgContainer">
                            <!-- JS will inject QR image here -->
                        </div>
                    </div>
                    
                    <div class="cashier-label"><?php echo htmlspecialchars($cashier['name']); ?></div>
                    <div class="cashier-sub">Cashier Wise Geo-clock Terminal</div>
                </div>

                <!-- Step-by-Step Instructions -->
                <div class="instructions-container">
                    <div class="instruction-step">
                        <div class="step-num">1</div>
                        <div class="step-text">
                            Scan QR Code
                            <span class="step-desc">Scan with smartphone camera to access terminal</span>
                        </div>
                    </div>
                    <div class="instruction-step">
                        <div class="step-num">2</div>
                        <div class="step-text">
                            Enter Unique PIN
                            <span class="step-desc">Input your 6-digit staff clock-in security code</span>
                        </div>
                    </div>
                    <div class="instruction-step">
                        <div class="step-num">3</div>
                        <div class="step-text">
                            Confirm Location
                            <span class="step-desc">Verify your GPS location is within the cashier geofence</span>
                        </div>
                    </div>
                </div>

                <!-- Footer branding -->
                <div class="card-footer">
                    <div class="footer-logo">Restipo</div>
                    <div class="footer-tagline">Automated Geofenced HR attendance terminal</div>
                </div>

            </div>
        </div>
    </div>

    <!-- Hidden div for qrcodejs rendering -->
    <div id="qr-source-target" data-url="<?php echo htmlspecialchars($clockUrl, ENT_QUOTES); ?>"></div>

    <!-- Load QRCode.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    
    <!-- JavaScript logic -->
    <script>
        const clockUrl = "<?php echo $clockUrl; ?>";
        const cashierName = "<?php echo htmlspecialchars($cashier['name'], ENT_QUOTES); ?>";
        const restName = "<?php echo htmlspecialchars($cashier['rest_name'], ENT_QUOTES); ?>";
        const logoUrl = <?php echo !empty($cashier['logo']) ? json_encode('/' . $cashier['logo']) : 'null'; ?>;
        
        let qrImgSrc = '';
        let currentTheme = 'obsidian'; // default theme

        function switchTheme(theme) {
            currentTheme = theme;
            const cardEl = document.getElementById('printCardElement');
            const btnObsidian = document.getElementById('btn-theme-obsidian');
            const btnIvory = document.getElementById('btn-theme-ivory');
            
            if (theme === 'obsidian') {
                cardEl.className = 'qr-card theme-obsidian';
                btnObsidian.classList.add('active');
                btnIvory.classList.remove('active');
                document.body.className = 'print-theme-obsidian';
            } else {
                cardEl.className = 'qr-card theme-ivory';
                btnIvory.classList.add('active');
                btnObsidian.classList.remove('active');
                document.body.className = 'print-theme-ivory';
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Generate QR Code
            const sourceTarget = document.getElementById('qr-source-target');
            const url = sourceTarget.getAttribute('data-url');
            
            new QRCode(sourceTarget, {
                text: url,
                width: 200,
                height: 200,
                colorDark: '#080c14',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            });

            // Extract the generated canvas/image and put it in the main container
            setTimeout(() => {
                const canvas = sourceTarget.querySelector('canvas');
                const img = sourceTarget.querySelector('img');
                const container = document.getElementById('qrcodeImgContainer');
                container.innerHTML = '';
                
                if (canvas) {
                    qrImgSrc = canvas.toDataURL('image/png');
                } else if (img) {
                    qrImgSrc = img.src;
                }

                if (qrImgSrc) {
                    const cloneImg = document.createElement('img');
                    cloneImg.src = qrImgSrc;
                    cloneImg.style.width = '100%';
                    cloneImg.style.height = '100%';
                    cloneImg.style.display = 'block';
                    container.appendChild(cloneImg);
                }
            }, 300);
        });

        // 1. Download only the QR code PNG
        function downloadQROnly() {
            if (!qrImgSrc) {
                alert('QR code not fully generated yet.');
                return;
            }
            const link = document.createElement('a');
            link.download = `${cashierName.replace(/\s+/g, '_')}_QR_Code.png`;
            link.href = qrImgSrc;
            link.click();
        }

        // Helper to draw rounded rectangles on HTML5 Canvas
        function drawRoundedRect(ctx, x, y, width, height, radius, fill, stroke) {
            ctx.beginPath();
            ctx.moveTo(x + radius, y);
            ctx.lineTo(x + width - radius, y);
            ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
            ctx.lineTo(x + width, y + height - radius);
            ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
            ctx.lineTo(x + radius, y + height);
            ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
            ctx.lineTo(x, y + radius);
            ctx.quadraticCurveTo(x, y, x + radius, y);
            ctx.closePath();
            if (fill) ctx.fill();
            if (stroke) ctx.stroke();
        }

        // 2. Download full table QR stand card as a PNG using HTML5 Canvas
        function downloadCardPNG() {
            if (!qrImgSrc) {
                alert('QR Code not loaded yet.');
                return;
            }

            // Create high-res canvas (800x1300)
            const canvas = document.createElement('canvas');
            canvas.width = 800;
            canvas.height = 1300;
            const ctx = canvas.getContext('2d');

            // Set colors based on active theme
            const isObsidian = (currentTheme === 'obsidian');
            
            // 1. Card base background
            if (isObsidian) {
                const radialBG = ctx.createRadialGradient(400, 650, 50, 400, 650, 800);
                radialBG.addColorStop(0, '#1b233a');
                radialBG.addColorStop(1, '#07090e');
                ctx.fillStyle = radialBG;
            } else {
                ctx.fillStyle = '#fdfbf7';
            }
            ctx.fillRect(0, 0, 800, 1300);

            // Draw elegant gold/emerald header strip
            const gradHeader = ctx.createLinearGradient(0, 0, 800, 0);
            if (isObsidian) {
                gradHeader.addColorStop(0, '#aa7c11');
                gradHeader.addColorStop(0.5, '#f3e5ab');
                gradHeader.addColorStop(1, '#aa7c11');
            } else {
                gradHeader.addColorStop(0, '#d4af37');
                gradHeader.addColorStop(0.5, '#059669');
                gradHeader.addColorStop(1, '#d4af37');
            }
            ctx.fillStyle = gradHeader;
            ctx.fillRect(0, 0, 800, 20);

            // 2. Gold Border Frame (offset by 20px)
            ctx.strokeStyle = '#d4af37';
            ctx.lineWidth = 4;
            drawRoundedRect(ctx, 20, 44, 760, 1236, 32, false, true);

            // Inner dashed decorative border
            ctx.strokeStyle = isObsidian ? 'rgba(212, 175, 55, 0.35)' : 'rgba(5, 150, 105, 0.3)';
            ctx.lineWidth = 1.5;
            ctx.setLineDash([12, 12]);
            drawRoundedRect(ctx, 32, 56, 736, 1212, 24, false, true);
            ctx.setLineDash([]); // reset

            // Logo & Branding Section
            const logoImg = new Image();
            
            function drawCanvasTextsAndDetails() {
                // Draw logo (centered at X=400, Y=140)
                if (logoUrl) {
                    try {
                        ctx.save();
                        ctx.beginPath();
                        ctx.arc(400, 155, 60, 0, Math.PI * 2);
                        ctx.clip();
                        ctx.drawImage(logoImg, 340, 95, 120, 120);
                        ctx.restore();

                        // Border around logo
                        ctx.strokeStyle = '#d4af37';
                        ctx.lineWidth = 5;
                        ctx.beginPath();
                        ctx.arc(400, 155, 60, 0, Math.PI * 2);
                        ctx.stroke();
                    } catch (e) {
                        drawFallbackLogoAvatar();
                    }
                } else {
                    drawFallbackLogoAvatar();
                }

                function drawFallbackLogoAvatar() {
                    ctx.fillStyle = isObsidian ? 'rgba(212, 175, 55, 0.08)' : 'rgba(5, 150, 105, 0.08)';
                    ctx.strokeStyle = '#d4af37';
                    ctx.lineWidth = 5;
                    ctx.beginPath();
                    ctx.arc(400, 155, 60, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.stroke();

                    ctx.fillStyle = isObsidian ? '#d4af37' : '#059669';
                    ctx.font = 'bold 54px "Outfit", sans-serif';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText(restName.charAt(0).toUpperCase(), 400, 155);
                    ctx.textBaseline = 'alphabetic'; // reset
                }

                // Restaurant Name
                ctx.fillStyle = isObsidian ? '#d4af37' : '#047857';
                ctx.font = 'bold 32px "Cormorant Garamond", serif';
                ctx.textAlign = 'center';
                ctx.fillText(restName.toUpperCase(), 400, 260);

                // Stand Title Pill
                ctx.fillStyle = isObsidian ? 'rgba(212, 175, 55, 0.08)' : 'rgba(5, 150, 105, 0.06)';
                ctx.strokeStyle = isObsidian ? 'rgba(212, 175, 55, 0.3)' : 'rgba(5, 150, 105, 0.2)';
                ctx.lineWidth = 2;
                drawRoundedRect(ctx, 240, 285, 320, 48, 24, true, true);

                ctx.fillStyle = isObsidian ? '#f3e5ab' : '#047857';
                ctx.font = 'bold 18px "Outfit", sans-serif';
                ctx.fillText('STAFF ATTENDANCE STAND', 400, 316);

                // QR Frame Box (centered)
                ctx.fillStyle = '#ffffff';
                ctx.strokeStyle = '#d4af37';
                ctx.lineWidth = 6;
                drawRoundedRect(ctx, 230, 380, 340, 340, 40, true, true);

                // Draw QR Code inside Frame
                const qrImg = new Image();
                qrImg.onload = function() {
                    ctx.drawImage(qrImg, 260, 410, 280, 280);
                    continueDrawing();
                };
                qrImg.src = qrImgSrc;
            }

            function continueDrawing() {
                // Cashier Name
                ctx.fillStyle = isObsidian ? '#ffffff' : '#1e293b';
                ctx.font = 'bold 36px "Outfit", sans-serif';
                ctx.textAlign = 'center';
                ctx.fillText(cashierName.toUpperCase(), 400, 775);

                ctx.fillStyle = isObsidian ? '#94a3b8' : '#6b7280';
                ctx.font = '500 22px "Inter", sans-serif';
                ctx.fillText('Cashier Wise Geo-clock Terminal', 400, 815);

                // Instructions panel
                ctx.fillStyle = isObsidian ? 'rgba(255, 255, 255, 0.02)' : '#fbfbfc';
                ctx.strokeStyle = isObsidian ? 'rgba(212, 175, 55, 0.25)' : 'rgba(5, 150, 105, 0.2)';
                ctx.lineWidth = 3;
                drawRoundedRect(ctx, 80, 860, 640, 300, 24, true, true);

                // Draw Steps
                const steps = [
                    { num: '1', title: 'Scan QR Code', desc: 'Scan with smartphone camera to access terminal' },
                    { num: '2', title: 'Enter Unique PIN', desc: 'Input your 6-digit staff clock-in security code' },
                    { num: '3', title: 'Confirm Location', desc: 'Verify your GPS location is within the cashier geofence' }
                ];

                steps.forEach((step, idx) => {
                    const yOffset = 910 + (idx * 80);
                    
                    // Circle num
                    ctx.fillStyle = isObsidian ? '#d4af37' : '#059669';
                    ctx.beginPath();
                    ctx.arc(130, yOffset - 10, 24, 0, Math.PI * 2);
                    ctx.fill();

                    // Circle num text
                    ctx.fillStyle = isObsidian ? '#0a0e1a' : '#ffffff';
                    ctx.font = 'bold 22px "Inter", sans-serif';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText(step.num, 130, yOffset - 10);
                    ctx.textBaseline = 'alphabetic'; // reset

                    // Step Title
                    ctx.fillStyle = isObsidian ? '#ffffff' : '#1e293b';
                    ctx.font = 'bold 22px "Inter", sans-serif';
                    ctx.textAlign = 'left';
                    ctx.fillText(step.title, 180, yOffset - 16);

                    // Step Desc
                    ctx.fillStyle = isObsidian ? '#94a3b8' : '#6b7280';
                    ctx.font = '400 16px "Inter", sans-serif';
                    ctx.fillText(step.desc, 180, yOffset + 10);
                });

                // Footer Section
                ctx.strokeStyle = isObsidian ? 'rgba(212, 175, 55, 0.25)' : 'rgba(212, 175, 55, 0.35)';
                ctx.lineWidth = 2;
                ctx.setLineDash([10, 10]);
                ctx.beginPath();
                ctx.moveTo(100, 1195);
                ctx.lineTo(700, 1195);
                ctx.stroke();
                ctx.setLineDash([]); // reset

                ctx.fillStyle = isObsidian ? '#d4af37' : '#047857';
                ctx.font = 'bold 26px "Cormorant Garamond", serif';
                ctx.textAlign = 'center';
                ctx.fillText('Restipo', 400, 1238);

                ctx.fillStyle = isObsidian ? '#64748b' : '#6b7280';
                ctx.font = 'bold 16px "Inter", sans-serif';
                ctx.fillText('AUTOMATED GEOFENCED HR ATTENDANCE TERMINAL', 400, 1268);

                // Download full image
                const link = document.createElement('a');
                link.download = `${cashierName.replace(/\s+/g, '_')}_Attendance_Stand_${currentTheme}.png`;
                link.href = canvas.toDataURL('image/png', 1.0);
                link.click();
            }

            if (logoUrl) {
                logoImg.onload = drawCanvasTextsAndDetails;
                logoImg.onerror = drawCanvasTextsAndDetails;
                logoImg.src = logoUrl;
            } else {
                drawCanvasTextsAndDetails();
            }
        }
    </script>

</body>
</html>
