<?php
function renderHelper($context = 'default'){

    $help = [

        'dashboard' => [
            'title' => 'Operations Dashboard Guide',
            'items' => [
                'Monitor total, open and overdue tickets',
                'Check staff performance score',
                'Review active PIP cases',
                'Use quick actions to navigate'
            ]
        ],

        'tickets' => [
            'title' => 'Ticket Queue Guide',
            'items' => [
                'Use filters to find tickets quickly',
                'Red rows indicate overdue tickets',
                'PIP tickets are highlighted in orange',
                'Click ticket number to open details'
            ]
        ],

        'create' => [
            'title' => 'Create Ticket Guide',
            'items' => [
                'Select correct category (Fault, Billing, Token)',
                'Assign ticket to responsible staff',
                'Set SLA due date for tracking',
                'Provide clear subject and description'
            ]
        ],

        'view' => [
            'title' => 'Ticket View Guide',
            'items' => [
                'Monitor SLA timer at the top',
                'Add comments to update progress',
                'Use watchers to notify other team members',
                'Check timeline for full history'
            ]
        ],

        'update' => [
            'title' => 'Update Ticket Guide',
            'items' => [
                'Update status as work progresses',
                'Reassign if needed',
                'Adjust SLA if required',
                'Add comments with visibility (Internal/Public)'
            ]
        ],

        'default' => [
            'title' => 'System Guide',
            'items' => [
                'Use this system to manage operations',
                'Always update ticket status',
                'Monitor overdue tasks',
                'Communicate using comments'
            ]
        ]
    ];

    $data = $help[$context] ?? $help['default'];
?>
<div id="helperBox" class="helper-box collapsed">

    <div class="helper-header" onclick="toggleHelper()">
        <span><i class="fas fa-lightbulb"></i> <?= $data['title'] ?></span>
        <span id="helperToggle">+</span>
    </div>

    <div class="helper-body">
        <ul>
            <?php foreach ($data['items'] as $item): ?>
                <li><?= $item ?></li>
            <?php endforeach; ?>
        </ul>
    </div>

</div>

<style>
.helper-box {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    font-size: 13px;
    z-index: 9999;
    overflow: hidden;
    transition: all 0.3s ease;
}

.helper-header {
    background: #f2531e;
    color: #fff;
    padding: 12px;
    font-weight: 600;
    cursor: pointer;
    display:flex;
    justify-content:space-between;
}

.helper-body {
    padding: 12px;
}

.helper-body ul {
    padding-left: 18px;
    margin:0;
}

.helper-body li {
    margin-bottom: 8px;
    color:#333;
}

.helper-box.collapsed .helper-body {
    display: none;
}
</style>

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

    const box = document.getElementById('helperBox');
    const toggle = document.getElementById('helperToggle');

    // LOAD STATE
    const state = localStorage.getItem('helperState');

    if(state === 'open'){
        box.classList.remove('collapsed');
        toggle.innerText = '−';
    } else {
        box.classList.add('collapsed');
        toggle.innerText = '+';
    }

    window.toggleHelper = function(){
        box.classList.toggle('collapsed');

        if(box.classList.contains('collapsed')){
            toggle.innerText = '+';
            localStorage.setItem('helperState', 'closed');
        } else {
            toggle.innerText = '−';
            localStorage.setItem('helperState', 'open');
        }
    };

});
</script>
<?php
}
