<?php
// app/Views/admin/cashier_select.php
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select Cashier Context - RESTPO</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * { font-family: 'Outfit', sans-serif; }
        body { background: #060913; color: #e2e8f0; min-height: 100vh; overflow-x: hidden; }
        .glass { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); backdrop-filter: blur(16px); }
        .glass-hover:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(139, 92, 246, 0.35); transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(139, 92, 246, 0.2); }
    </style>
</head>
<body class="flex flex-col items-center justify-center p-4 min-h-screen relative">
    <div class="absolute -top-40 -left-40 w-96 h-96 rounded-full bg-purple-500/5 blur-3xl pointer-events-none"></div>
    <div class="absolute -bottom-40 -right-40 w-96 h-96 rounded-full bg-indigo-500/5 blur-3xl pointer-events-none"></div>

    <div class="w-full max-w-3xl space-y-8 text-center relative z-10 py-8">
        <!-- Logo Header -->
        <div class="space-y-3">
            <div class="inline-flex w-16 h-16 rounded-2xl bg-gradient-to-tr from-purple-600 to-indigo-600 items-center justify-center shadow-lg shadow-purple-500/20 mb-2">
                <i class="fas fa-store text-white text-2xl"></i>
            </div>
            <h1 class="text-3xl font-extrabold text-white tracking-tight">Select Cashier Branch</h1>
            <p class="text-sm text-slate-400 max-w-md mx-auto">Please choose which cashier context you would like to open to manage floors, tables, sessions, and live order processing.</p>
        </div>

        <!-- Option (Skip/All) if visiting from QR manager or Kitchen Display -->
        <?php if ($target_page === 'qr' || $target_page === 'kitchen'): ?>
        <div class="max-w-md mx-auto">
            <a href="?cashier_id=all" class="glass glass-hover block rounded-2xl p-5 text-center transition duration-300 relative group border border-emerald-500/10 hover:border-emerald-500/40">
                <div class="flex items-center justify-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-400 flex items-center justify-center font-bold">
                        <i class="fas fa-globe"></i>
                    </div>
                    <div class="text-left">
                        <h3 class="text-base font-bold text-white group-hover:text-emerald-400 transition-colors">
                            <?php echo $target_page === 'qr' ? 'Show All Cashiers / All Tables' : 'Show All Cashiers / All Queues'; ?>
                        </h3>
                        <p class="text-xs text-slate-400">
                            <?php echo $target_page === 'qr' 
                                ? 'View and print QR codes across all floors and cashier branches.' 
                                : 'View all order queues across all floors and cashier branches.'; ?>
                        </p>
                    </div>
                </div>
            </a>
        </div>
        
        <div class="flex items-center justify-center gap-3 my-4 max-w-xs mx-auto">
            <div class="flex-1 h-px bg-white/5"></div>
            <span class="text-xs text-slate-500 font-bold uppercase tracking-widest">Or Select Cashier</span>
            <div class="flex-1 h-px bg-white/5"></div>
        </div>
        <?php endif; ?>

        <!-- Cashier Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
            <?php foreach ($cashiers as $c): ?>
            <a href="?cashier_id=<?php echo $c['id']; ?>" class="glass glass-hover rounded-2xl p-5 text-center transition duration-300 relative group flex flex-col items-center justify-center gap-4">
                <!-- Avatar with status -->
                <div class="relative">
                    <div class="w-14 h-14 rounded-full bg-purple-600/10 text-purple-400 border border-purple-500/20 flex items-center justify-center text-lg font-bold group-hover:scale-105 transition-transform">
                        <?php echo strtoupper(substr($c['name'], 0, 2)); ?>
                    </div>
                    <!-- Status dot: green if they have open session, gray if not -->
                    <span class="absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-[#060913] flex items-center justify-center"
                          style="background-color: <?php echo $c['has_active_session'] ? '#10b981' : '#475569'; ?>">
                    </span>
                </div>

                <div class="space-y-1">
                    <h3 class="text-sm font-bold text-white group-hover:text-purple-400 transition-colors"><?php echo htmlspecialchars($c['name']); ?></h3>
                    <p class="text-[10px] text-slate-500"><?php echo htmlspecialchars($c['email']); ?></p>
                </div>

                <div class="w-full pt-3 mt-1 border-t border-white/5 text-[10px] font-bold uppercase tracking-wider flex items-center justify-center gap-1.5"
                     style="color: <?php echo $c['has_active_session'] ? '#34d399' : '#94a3b8'; ?>">
                    <i class="fas <?php echo $c['has_active_session'] ? 'fa-circle-check' : 'fa-circle'; ?> text-[8px]"></i>
                    <span><?php echo $c['has_active_session'] ? 'Session Open' : 'Offline / Closed'; ?></span>
                </div>
            </a>
            <?php endforeach; ?>
        </div>

        <?php if (empty($cashiers)): ?>
        <div class="glass rounded-2xl p-10 text-center space-y-3 max-w-md mx-auto">
            <i class="fas fa-user-slash text-4xl text-slate-600"></i>
            <h3 class="text-base font-bold text-white">No Active Cashiers</h3>
            <p class="text-xs text-slate-400">Please go to <a href="/restpo/admin/staff" class="text-purple-400 hover:underline">Staff Management</a> to create at least one Cashier account first.</p>
        </div>
        <?php endif; ?>

        <!-- Footer / Cancel -->
        <div class="pt-4">
            <a href="/restpo/admin/dashboard" class="px-6 py-2.5 rounded-xl text-xs font-bold text-slate-400 hover:text-white border border-white/5 hover:border-white/10 hover:bg-white/5 transition">
                <i class="fas fa-arrow-left mr-1"></i> Back to Dashboard
            </a>
        </div>
    </div>
</body>
</html>
