<?php
function renderOnboarding(){
?>
<div id="onboardingOverlay" style="
    position:fixed;
    top:0;left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    z-index:99999;
    display:none;
">

    <div id="onboardingBox" style="
        position:absolute;
        bottom:80px;
        right:30px;
        width:320px;
        background:#fff;
        border-radius:12px;
        padding:20px;
        box-shadow:0 10px 30px rgba(0,0,0,0.2);
        font-size:14px;
    ">

        <h3 style="margin-top:0;">👋 Welcome to Operations Hub</h3>

        <p id="onboardingText">
            This system helps you manage tickets, staff, and performance.
        </p>

        <div style="display:flex;justify-content:space-between;margin-top:15px;">
            <button onclick="nextStep()" class="btn btn-primary">Next</button>
            <button onclick="skipTour()" class="btn btn-light">Skip</button>
        </div>

    </div>

</div>

<script>
document.addEventListener("DOMContentLoaded", function(){

    const seen = localStorage.getItem('onboardingDone');

    if(!seen){
        document.getElementById('onboardingOverlay').style.display = 'block';
    }

});

let step = 0;

const steps = [
    "This system helps you manage tickets and operations.",
    "Use the Ticket Queue to view and filter all tickets.",
    "Create tickets for faults, billing, or token issues.",
    "Use comments and watchers to collaborate.",
    "Monitor SLA and avoid overdue tickets."
];

function nextStep(){
    step++;

    if(step >= steps.length){
        finishTour();
        return;
    }

    document.getElementById('onboardingText').innerText = steps[step];
}

function skipTour(){
    finishTour();
}

function finishTour(){
    document.getElementById('onboardingOverlay').style.display = 'none';
    localStorage.setItem('onboardingDone', '1');
}
</script>
<?php
}