<!-- Sliding Panel for Enhanced Game Information -->
<div id="sliding-panel" class="fixed right-0 top-1/2 transform -translate-y-1/2 z-40 transition-transform duration-300 translate-x-full">
    <div class="cyber-card border border-cyber-primary/30 w-80 max-h-96 overflow-hidden">
        
        <!-- Panel Header -->
        <div class="flex items-center justify-between p-3 border-b border-cyber-primary/20">
            <h3 class="font-cyber cyber-text-primary">SYSTEM PANEL</h3>
            <div class="flex items-center space-x-2">
                <button id="panel-refresh" class="cyber-btn cyber-btn-secondary text-xs">
                    🔄 UPDATE
                </button>
                <button id="panel-toggle" class="cyber-btn cyber-btn-primary text-xs">
                    📊 PANEL
                </button>
                <button id="panel-close" class="cyber-btn cyber-btn-danger text-xs">
                    ✕
                </button>
            </div>
        </div>
        
        <!-- Panel Tabs -->
        <div class="flex border-b border-cyber-primary/20">
            <button class="panel-tab active flex-1 p-2 text-xs cyber-text-primary border-r border-cyber-primary/20" 
                    data-tab="status">STATUS</button>
            <button class="panel-tab flex-1 p-2 text-xs cyber-text-secondary border-r border-cyber-primary/20" 
                    data-tab="charges">CHARGES</button>
            <button class="panel-tab flex-1 p-2 text-xs cyber-text-secondary" 
                    data-tab="fireseeds">FIRESEEDS</button>
        </div>
        
        <!-- Panel Content -->
        <div class="p-3 max-h-64 overflow-y-auto">
            
            <!-- Status Tab -->
            <div id="tab-status" class="tab-content">
                <div class="space-y-3">
                    
                    <!-- Player Charges -->
                    <div>
                        <h4 class="cyber-text-primary text-sm font-bold mb-2">ENERGY LEVELS</h4>
                        <div class="space-y-2">
                            <!--{if isset($charge1)}-->
                            <div>
                                <div class="flex justify-between text-xs">
                                    <span class="cyber-text-secondary">Charge 1</span>
                                    <span class="cyber-text-primary">$charge1</span>
                                </div>
                                <div class="cyber-progress h-2">
                                    <div class="cyber-progress-bar bg-blue-500" style="width: <!--{eval echo min(100, $charge1);}-->%"></div>
                                </div>
                            </div>
                            <!--{/if}-->
                            
                            <!--{if isset($charge2)}-->
                            <div>
                                <div class="flex justify-between text-xs">
                                    <span class="cyber-text-secondary">Charge 2</span>
                                    <span class="cyber-text-primary">$charge2</span>
                                </div>
                                <div class="cyber-progress h-2">
                                    <div class="cyber-progress-bar bg-green-500" style="width: <!--{eval echo min(100, $charge2);}-->%"></div>
                                </div>
                            </div>
                            <!--{/if}-->
                            
                            <!--{if isset($charge3)}-->
                            <div>
                                <div class="flex justify-between text-xs">
                                    <span class="cyber-text-secondary">Charge 3</span>
                                    <span class="cyber-text-primary">$charge3</span>
                                </div>
                                <div class="cyber-progress h-2">
                                    <div class="cyber-progress-bar bg-yellow-500" style="width: <!--{eval echo min(100, $charge3);}-->%"></div>
                                </div>
                            </div>
                            <!--{/if}-->
                            
                            <!--{if isset($charge4)}-->
                            <div>
                                <div class="flex justify-between text-xs">
                                    <span class="cyber-text-secondary">Charge 4</span>
                                    <span class="cyber-text-primary">$charge4</span>
                                </div>
                                <div class="cyber-progress h-2">
                                    <div class="cyber-progress-bar bg-red-500" style="width: <!--{eval echo min(100, $charge4);}-->%"></div>
                                </div>
                            </div>
                            <!--{/if}-->
                        </div>
                    </div>
                    
                    <!-- Game Statistics -->
                    <div>
                        <h4 class="cyber-text-primary text-sm font-bold mb-2">GAME STATS</h4>
                        <div class="grid grid-cols-2 gap-2 text-xs">
                            <div class="cyber-card p-2">
                                <div class="cyber-text-secondary">Alive</div>
                                <div class="cyber-text-primary">$alivenum</div>
                            </div>
                            <div class="cyber-card p-2">
                                <div class="cyber-text-secondary">Game #</div>
                                <div class="cyber-text-primary">$gamenum</div>
                            </div>
                            <div class="cyber-card p-2">
                                <div class="cyber-text-secondary">State</div>
                                <div class="cyber-text-primary">
                                    <!--{if $gamestate == 0}-->PREP
                                    <!--{elseif $gamestate == 10}-->ACTIVE
                                    <!--{elseif $gamestate == 40}-->COMBO
                                    <!--{elseif $gamestate == 50}-->DUEL
                                    <!--{else}-->UNK
                                    <!--{/if}-->
                                </div>
                            </div>
                            <div class="cyber-card p-2">
                                <div class="cyber-text-secondary">Weather</div>
                                <div class="cyber-text-primary">$wthinfo[$weather]</div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            
            <!-- Charges Tab -->
            <div id="tab-charges" class="tab-content hidden">
                <div class="space-y-3">
                    <h4 class="cyber-text-primary text-sm font-bold">DETAILED CHARGE INFO</h4>
                    
                    <!--{if isset($clbpara['charge1'])}-->
                    <div class="cyber-card p-2">
                        <div class="cyber-text-primary font-bold">Charge 1 Details</div>
                        <div class="text-xs cyber-text-secondary mt-1">
                            Current: $clbpara['charge1']<br>
                            Type: Energy Reserve<br>
                            Status: <!--{if $clbpara['charge1'] >= 100}--><span class="cyber-text-success">Full</span><!--{else}--><span class="cyber-text-warning">Charging</span><!--{/if}-->
                        </div>
                    </div>
                    <!--{/if}-->
                    
                    <!--{if isset($clbpara['charge2'])}-->
                    <div class="cyber-card p-2">
                        <div class="cyber-text-primary font-bold">Charge 2 Details</div>
                        <div class="text-xs cyber-text-secondary mt-1">
                            Current: $clbpara['charge2']<br>
                            Type: Combat Buffer<br>
                            Status: <!--{if $clbpara['charge2'] >= 100}--><span class="cyber-text-success">Full</span><!--{else}--><span class="cyber-text-warning">Charging</span><!--{/if}-->
                        </div>
                    </div>
                    <!--{/if}-->
                    
                    <!--{if isset($clbpara['charge3'])}-->
                    <div class="cyber-card p-2">
                        <div class="cyber-text-primary font-bold">Charge 3 Details</div>
                        <div class="text-xs cyber-text-secondary mt-1">
                            Current: $clbpara['charge3']<br>
                            Type: Special Ability<br>
                            Status: <!--{if $clbpara['charge3'] >= 100}--><span class="cyber-text-success">Full</span><!--{else}--><span class="cyber-text-warning">Charging</span><!--{/if}-->
                        </div>
                    </div>
                    <!--{/if}-->
                    
                    <!--{if isset($clbpara['charge4'])}-->
                    <div class="cyber-card p-2">
                        <div class="cyber-text-primary font-bold">Charge 4 Details</div>
                        <div class="text-xs cyber-text-secondary mt-1">
                            Current: $clbpara['charge4']<br>
                            Type: Ultimate Power<br>
                            Status: <!--{if $clbpara['charge4'] >= 100}--><span class="cyber-text-success">Full</span><!--{else}--><span class="cyber-text-warning">Charging</span><!--{/if}-->
                        </div>
                    </div>
                    <!--{/if}-->
                </div>
            </div>
            
            <!-- Fireseeds Tab -->
            <div id="tab-fireseeds" class="tab-content hidden">
                <!--{if $club == 22}-->
                <div class="space-y-3">
                    <h4 class="cyber-text-primary text-sm font-bold">FIRESEED STATUS</h4>
                    
                    <!--{if !empty($clbpara['fireseed'])}-->
                    <!--{loop $clbpara['fireseed'] $fsid $fsdata}-->
                    <div class="cyber-card p-2">
                        <div class="flex justify-between items-center">
                            <div class="cyber-text-primary font-bold">Fireseed #$fsid</div>
                            <div class="text-xs cyber-text-secondary">
                                <!--{if $fsdata['state'] == 0}-->Follow
                                <!--{elseif $fsdata['state'] == 1}-->Explore
                                <!--{elseif $fsdata['state'] == 2}-->Hunt
                                <!--{elseif $fsdata['state'] == 3}-->Hide
                                <!--{else}-->Unknown
                                <!--{/if}-->
                            </div>
                        </div>
                        <div class="text-xs cyber-text-secondary mt-1">
                            Location: $plsinfo[$fsdata['pls']]<br>
                            HP: $fsdata['hp']/$fsdata['mhp']<br>
                            Status: <!--{if $fsdata['hp'] > 0}--><span class="cyber-text-success">Active</span><!--{else}--><span class="cyber-text-danger">Inactive</span><!--{/if}-->
                        </div>
                    </div>
                    <!--{/loop}-->
                    <!--{else}-->
                    <div class="cyber-card p-2">
                        <div class="cyber-text-secondary text-xs">No fireseeds deployed</div>
                    </div>
                    <!--{/if}-->
                </div>
                <!--{else}-->
                <div class="cyber-card p-2">
                    <div class="cyber-text-secondary text-xs">Fireseed system not available</div>
                </div>
                <!--{/if}-->
            </div>
            
        </div>
        
    </div>
    
    <!-- Panel Toggle Button (Always Visible) -->
    <button id="panel-show" class="cyber-btn cyber-btn-primary absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-full rounded-r-none">
        📊
    </button>
</div>

<script>
// Sliding Panel Functionality
document.addEventListener('DOMContentLoaded', function() {
    const panel = document.getElementById('sliding-panel');
    const showBtn = document.getElementById('panel-show');
    const toggleBtn = document.getElementById('panel-toggle');
    const closeBtn = document.getElementById('panel-close');
    const refreshBtn = document.getElementById('panel-refresh');
    const tabs = document.querySelectorAll('.panel-tab');
    const tabContents = document.querySelectorAll('.tab-content');
    
    let isOpen = false;
    
    // Panel toggle functionality
    function togglePanel() {
        isOpen = !isOpen;
        if (isOpen) {
            panel.classList.remove('translate-x-full');
            showBtn.style.display = 'none';
        } else {
            panel.classList.add('translate-x-full');
            showBtn.style.display = 'block';
        }
    }
    
    // Event listeners
    showBtn.addEventListener('click', togglePanel);
    toggleBtn.addEventListener('click', togglePanel);
    closeBtn.addEventListener('click', togglePanel);
    
    // Tab switching
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');
            
            // Update tab appearance
            tabs.forEach(t => {
                t.classList.remove('active', 'cyber-text-primary');
                t.classList.add('cyber-text-secondary');
            });
            this.classList.add('active', 'cyber-text-primary');
            this.classList.remove('cyber-text-secondary');
            
            // Show target content
            tabContents.forEach(content => {
                content.classList.add('hidden');
            });
            document.getElementById(`tab-${targetTab}`).classList.remove('hidden');
        });
    });
    
    // Refresh panel data
    refreshBtn.addEventListener('click', function() {
        this.classList.add('cyber-pulse');
        
        // Simulate data refresh
        setTimeout(() => {
            this.classList.remove('cyber-pulse');
            updatePanelData();
            showNotification('Panel data updated', 'success');
        }, 1000);
    });
    
    // Auto-refresh every 30 seconds
    setInterval(updatePanelData, 30000);
    
    // Keyboard shortcut (P key)
    document.addEventListener('keydown', function(e) {
        if (e.key.toLowerCase() === 'p' && !e.ctrlKey && !e.altKey) {
            if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
                e.preventDefault();
                togglePanel();
            }
        }
    });
});

function updatePanelData() {
    // Update charge progress bars
    const progressBars = document.querySelectorAll('.cyber-progress-bar');
    progressBars.forEach(bar => {
        const currentWidth = parseInt(bar.style.width);
        // Add slight animation to show update
        bar.style.transition = 'width 0.5s ease';
        bar.style.width = '0%';
        setTimeout(() => {
            bar.style.width = currentWidth + '%';
        }, 100);
    });
    
    // Update timestamps or other dynamic content
    const now = new Date().toLocaleTimeString('zh-CN', { hour12: false });
    console.log(`Panel updated at ${now}`);
}

function showNotification(message, type = 'info') {
    if (window.nouveauTheme) {
        window.nouveauTheme.showNotification(message, type);
    }
}

// Panel data API (for future AJAX updates)
window.updatePanelCharges = function(charges) {
    Object.keys(charges).forEach(chargeKey => {
        const progressBar = document.querySelector(`[data-charge="${chargeKey}"] .cyber-progress-bar`);
        if (progressBar) {
            progressBar.style.width = Math.min(100, charges[chargeKey]) + '%';
        }
    });
};

window.updateFireseedData = function(fireseeds) {
    const container = document.getElementById('tab-fireseeds');
    if (container && fireseeds) {
        // Update fireseed display
        console.log('Updating fireseed data:', fireseeds);
    }
};
</script>

<style>
/* Sliding Panel Styles */
#sliding-panel {
    max-width: 90vw;
}

.panel-tab.active {
    background: rgba(0, 255, 255, 0.1);
    border-bottom: 2px solid var(--cyber-primary);
}

.panel-tab:hover {
    background: rgba(0, 255, 255, 0.05);
}

.tab-content {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Panel toggle button */
#panel-show {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 0.5rem 0.25rem;
    border-radius: 0.5rem 0 0 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #sliding-panel {
        width: 90vw;
        max-width: none;
    }
    
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* Scrollbar styling for panel */
#sliding-panel .overflow-y-auto::-webkit-scrollbar {
    width: 4px;
}

#sliding-panel .overflow-y-auto::-webkit-scrollbar-track {
    background: var(--cyber-bg-secondary);
}

#sliding-panel .overflow-y-auto::-webkit-scrollbar-thumb {
    background: var(--cyber-primary);
    border-radius: 2px;
}

/* Panel animations */
#sliding-panel {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Charge progress bar animations */
.cyber-progress-bar {
    transition: width 0.3s ease;
}

/* Panel content spacing */
.tab-content > div:not(:last-child) {
    margin-bottom: 1rem;
}
</style>
