<?php
$forum['last_writer'] = '<span class="last-writer" data-user-id="'.$forum['last_writer_id'].'">'.$forum['last_writer'].'<div class="member-tooltip"></div></span>';
?>

<!-- CSS للـ Tooltip -->
<style>
.last-writer {
    position: relative;
    cursor: pointer;
}

.member-tooltip {
    display: none;
    position: absolute;
    top: 120%;
    right: 0;
    min-width: 220px;
    background: #1e1e1e;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    font-size: 13px;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

.member-tooltip.loading {
    display: block;
}
</style>

<!-- JavaScript Tooltip -->
<script>
document.addEventListener('DOMContentLoaded', function () {

    const cache = {};

    document.querySelectorAll('.last-writer').forEach(el => {

        let loaded = false;

        el.addEventListener('mouseenter', function () {

            const userId = this.dataset.userId;
            const tooltip = this.querySelector('.member-tooltip');

            if (!userId || userId === '0') return;

            tooltip.style.display = 'block';

            if (cache[userId]) {
                tooltip.innerHTML = cache[userId];
                return;
            }

            if (loaded) return;
            loaded = true;

            tooltip.innerHTML = 'جاري التحميل...';

            fetch(`index.php?page=usercp&member_tooltip=1&uid=${userId}`)
                .then(res => res.text())
                .then(html => {
                    cache[userId] = html;
                    tooltip.innerHTML = html;
                })
                .catch(() => {
                    tooltip.innerHTML = 'تعذر جلب البيانات';
                });

        });

        el.addEventListener('mouseleave', function () {
            const tooltip = this.querySelector('.member-tooltip');
            tooltip.style.display = 'none';
        });

    });

});
</script>