<?php 
include 'common/header.php';
if(!isset($_SESSION['user_id'])) { header("Location: login.php"); exit; }
?>

<div class="container mx-auto px-4 py-6 mb-20 max-w-2xl">
    <div class="flex justify-between items-center mb-8">
        <h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
            <i class="fa-solid fa-ticket text-sky-500"></i> My Vouchers
        </h2>
        <a href="https://shop.garena.my/app" target="_blank" class="bg-gray-800 text-white px-4 py-2 rounded-lg text-xs font-bold shadow-sm hover:bg-black transition-all flex items-center gap-2">
            <i class="fa-solid fa-external-link text-[10px]"></i> Redeem Site
        </a>
    </div>

    <div class="space-y-4">
        <?php 
        $uid = $_SESSION['user_id'];
        $sql = "SELECT rc.code, p.name as pname, g.name as gname, g.image, o.id as order_id, o.amount, o.transaction_id, o.created_at 
                FROM redeem_codes rc 
                JOIN orders o ON rc.order_id = o.id 
                JOIN products p ON o.product_id = p.id
                JOIN games g ON o.game_id = g.id
                WHERE o.user_id = $uid AND o.status='completed'
                ORDER BY o.id DESC";
        
        $res = $conn->query($sql);
        if($res && $res->num_rows > 0):
        while($row = $res->fetch_assoc()): ?>
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden group">
                <div class="p-4 flex gap-4 items-center">
                    <img src="<?php echo $row['image']; ?>" class="w-12 h-12 rounded-lg object-cover border border-gray-50">
                    <div class="flex-1 min-w-0">
                        <h3 class="font-bold text-gray-800 text-sm truncate"><?php echo $row['gname']; ?></h3>
                        <p class="text-[11px] text-gray-500 font-medium"><?php echo $row['pname']; ?></p>
                        <p class="text-[10px] text-gray-400 mt-1 uppercase tracking-tight">Order #<?php echo $row['order_id']; ?> • <?php echo date('d M Y', strtotime($row['created_at'])); ?></p>
                    </div>
                    <div class="text-right">
                         <span class="font-bold text-sky-600 text-sm">৳<?php echo $row['amount']; ?></span>
                    </div>
                </div>

                <div class="px-4 pb-4">
                    <div class="bg-gray-50 border border-gray-100 p-3 rounded-lg flex justify-between items-center gap-3">
                        <div class="flex-1 overflow-hidden">
                            <p class="text-[9px] text-gray-400 uppercase font-bold mb-1 tracking-widest">Redeem Code</p>
                            <code class="text-gray-800 font-mono font-bold text-sm select-all break-all"><?php echo $row['code']; ?></code>
                        </div>
                        <button type="button" onclick="copyToClipboard('<?php echo $row['code']; ?>')" class="bg-white border border-gray-200 text-gray-500 w-9 h-9 rounded-lg shadow-sm hover:text-sky-500 hover:border-sky-200 transition-all flex items-center justify-center active:scale-90">
                            <i class="fa-regular fa-copy"></i>
                        </button>
                    </div>
                </div>
            </div>
        <?php endwhile; else: ?>
            <div class="text-center py-20 bg-white rounded-xl border border-dashed border-gray-200">
                <i class="fa-solid fa-ticket-simple text-gray-200 text-5xl mb-4"></i>
                <p class="text-gray-400 text-sm">You haven't purchased any vouchers yet.</p>
                <a href="index.php" class="text-sky-500 text-sm font-bold mt-3 inline-block hover:underline">Start Shopping</a>
            </div>
        <?php endif; ?>
    </div>
    
    <div class="text-center py-12">
        <p class="text-[10px] text-gray-300 font-bold uppercase tracking-widest">
            &copy; <?php echo date("Y"); ?> <?php echo getSetting($conn, 'site_name'); ?>
        </p>
    </div>
</div>

<script>
    function copyToClipboard(text) {
        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(text).then(() => {
                showNotif('success', 'Copied!', 'Voucher code copied.');
            }).catch(err => {
                fallbackCopy(text);
            });
        } else {
            fallbackCopy(text);
        }
    }

    function fallbackCopy(text) {
        const textArea = document.createElement("textarea");
        textArea.value = text;
        textArea.style.position = "fixed"; 
        textArea.style.left = "-9999px";
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try {
            document.execCommand('copy');
            showNotif('success', 'Copied!', 'Voucher code copied.');
        } catch (err) {
            showNotif('error', 'Error', 'Failed to copy.');
        }
        document.body.removeChild(textArea);
    }
</script>

<?php include 'common/bottom.php'; ?>