@extends('layouts.app-sidebar')

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-db-text-primary mb-2">Commands & Games Control</h1>
        <p class="text-db-text-muted">Enable or disable bot commands for your channel. Disabled commands will show a message when users try to use them.</p>
    </div>

    <div class="space-y-8">
        <!-- XP Gambling Games -->
        <div class="bg-db-card rounded-2xl border border-db-border p-6">
            <div class="flex items-center gap-3 mb-5">
                <span class="w-2 h-2 rounded-full bg-yellow-500"></span>
                <h2 class="text-lg font-semibold text-db-text-primary">XP Gambling Games</h2>
                <span class="text-xs text-db-text-dim bg-db-surface px-2 py-1 rounded">Risk XP to win more</span>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <!-- Gamble -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">🎲</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!gamble</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">[amount/all]</code>
                            </div>
                            <p class="text-xs text-db-text-muted">45% win chance, random 1x-3x multiplier. High risk, high reward!</p>
                        </div>
                    </div>
                    <button type="button" onclick="toggleFeature('game_gamble', this)"
                            class="toggle-switch relative inline-flex h-6 w-11 items-center rounded-full flex-shrink-0 ml-4"
                            aria-checked="{{ $tenant->game_gamble ? 'true' : 'false' }}"
                            style="background-color: {{ $tenant->game_gamble ? '#10b981' : '#3f3f46' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform {{ $tenant->game_gamble ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>

                <!-- Coinflip -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">🪙</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!coinflip</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">[amount/all]</code>
                            </div>
                            <p class="text-xs text-db-text-muted">50/50 heads or tails. Simple coin flip game.</p>
                        </div>
                    </div>
                    <button type="button" onclick="toggleFeature('game_coinflip', this)"
                            class="toggle-switch relative inline-flex h-6 w-11 items-center rounded-full flex-shrink-0 ml-4"
                            aria-checked="{{ $tenant->game_coinflip ? 'true' : 'false' }}"
                            style="background-color: {{ $tenant->game_coinflip ? '#10b981' : '#3f3f46' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform {{ $tenant->game_coinflip ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>

                <!-- Slots -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">🎰</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!slots</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">[amount/all]</code>
                            </div>
                            <p class="text-xs text-db-text-muted">Slot machine game. Match symbols to win big!</p>
                        </div>
                    </div>
                    <button type="button" onclick="toggleFeature('game_slots', this)"
                            class="toggle-switch relative inline-flex h-6 w-11 items-center rounded-full flex-shrink-0 ml-4"
                            aria-checked="{{ $tenant->game_slots ? 'true' : 'false' }}"
                            style="background-color: {{ $tenant->game_slots ? '#10b981' : '#3f3f46' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform {{ $tenant->game_slots ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>

                <!-- Roulette -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">🔴</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!roulette</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">[amt] [red/black/green]</code>
                            </div>
                            <p class="text-xs text-db-text-muted">Casino roulette. Red/Black = 2x, Green = 10x payout!</p>
                        </div>
                    </div>
                    <button type="button" onclick="toggleFeature('game_roulette', this)"
                            class="toggle-switch relative inline-flex h-6 w-11 items-center rounded-full flex-shrink-0 ml-4"
                            aria-checked="{{ $tenant->game_roulette ? 'true' : 'false' }}"
                            style="background-color: {{ $tenant->game_roulette ? '#10b981' : '#3f3f46' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform {{ $tenant->game_roulette ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Multiplayer Games -->
        <div class="bg-db-card rounded-2xl border border-db-border p-6">
            <div class="flex items-center gap-3 mb-5">
                <span class="w-2 h-2 rounded-full bg-purple-500"></span>
                <h2 class="text-lg font-semibold text-db-text-primary">Multiplayer Games</h2>
                <span class="text-xs text-db-text-dim bg-db-surface px-2 py-1 rounded">Play with other users</span>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <!-- Duel -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">⚔️</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!duel</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">@username</code>
                            </div>
                            <p class="text-xs text-db-text-muted">Challenge another user to XP battle. Winner +50 XP, Loser +25 XP.</p>
                        </div>
                    </div>
                    <button type="button" onclick="toggleFeature('game_duel', this)"
                            class="toggle-switch relative inline-flex h-6 w-11 items-center rounded-full flex-shrink-0 ml-4"
                            aria-checked="{{ $tenant->game_duel ? 'true' : 'false' }}"
                            style="background-color: {{ $tenant->game_duel ? '#10b981' : '#3f3f46' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform {{ $tenant->game_duel ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>

                <!-- Jackpot -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">💰</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!jackpot</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">[amount]</code>
                            </div>
                            <p class="text-xs text-db-text-muted">Pool game. Multiple players join, random winner takes all after 60 seconds.</p>
                        </div>
                    </div>
                    <button type="button" onclick="toggleFeature('game_jackpot', this)"
                            class="toggle-switch relative inline-flex h-6 w-11 items-center rounded-full flex-shrink-0 ml-4"
                            aria-checked="{{ $tenant->game_jackpot ? 'true' : 'false' }}"
                            style="background-color: {{ $tenant->game_jackpot ? '#10b981' : '#3f3f46' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform {{ $tenant->game_jackpot ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>

                <!-- Rob -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">🔫</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!rob</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">@username</code>
                            </div>
                            <p class="text-xs text-db-text-muted">30% success chance. Steal 10-30% XP or pay fine if caught. 5min cooldown.</p>
                        </div>
                    </div>
                    <button type="button" onclick="toggleFeature('game_rob', this)"
                            class="toggle-switch relative inline-flex h-6 w-11 items-center rounded-full flex-shrink-0 ml-4"
                            aria-checked="{{ $tenant->game_rob ? 'true' : 'false' }}"
                            style="background-color: {{ $tenant->game_rob ? '#10b981' : '#3f3f46' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform {{ $tenant->game_rob ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>

                <!-- Gift -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">🎁</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!gift</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">@user [amount]</code>
                            </div>
                            <p class="text-xs text-db-text-muted">Gift XP to another user. Spread the love!</p>
                        </div>
                    </div>
                    <span class="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded ml-4">Always On</span>
                </div>
            </div>
        </div>

        <!-- Free Games -->
        <div class="bg-db-card rounded-2xl border border-db-border p-6">
            <div class="flex items-center gap-3 mb-5">
                <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                <h2 class="text-lg font-semibold text-db-text-primary">Free Games</h2>
                <span class="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded">No XP required</span>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <!-- Fish -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">🎣</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!fish</span>
                                <span class="text-xs text-emerald-400 bg-emerald-500/10 px-1.5 py-0.5 rounded">FREE</span>
                            </div>
                            <p class="text-xs text-db-text-muted">Go fishing! 500-15000 XP catches. Common to Legendary. 2 min cooldown.</p>
                        </div>
                    </div>
                    <button type="button" onclick="toggleFeature('game_fish', this)"
                            class="toggle-switch relative inline-flex h-6 w-11 items-center rounded-full flex-shrink-0 ml-4"
                            aria-checked="{{ $tenant->game_fish ? 'true' : 'false' }}"
                            style="background-color: {{ $tenant->game_fish ? '#10b981' : '#3f3f46' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform {{ $tenant->game_fish ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>

                <!-- Daily -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">📅</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!daily</span>
                                <span class="text-xs text-emerald-400 bg-emerald-500/10 px-1.5 py-0.5 rounded">FREE</span>
                            </div>
                            <p class="text-xs text-db-text-muted">Claim 50-150 XP daily reward. Once every 24 hours.</p>
                        </div>
                    </div>
                    <span class="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded ml-4">Always On</span>
                </div>
            </div>
        </div>

        <!-- Fun & Social Commands -->
        <div class="bg-db-card rounded-2xl border border-db-border p-6">
            <div class="flex items-center gap-3 mb-5">
                <span class="w-2 h-2 rounded-full bg-pink-500"></span>
                <h2 class="text-lg font-semibold text-db-text-primary">Fun & Social Commands</h2>
                <span class="text-xs text-db-text-dim bg-db-surface px-2 py-1 rounded">Entertainment</span>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <!-- Roast -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">🔥</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!roast</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">[@user]</code>
                            </div>
                            <p class="text-xs text-db-text-muted">AI-powered fun roasts for chat entertainment.</p>
                        </div>
                    </div>
                    <span class="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded ml-4">Always On</span>
                </div>

                <!-- 8ball -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">🎱</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!8ball</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">[question]</code>
                            </div>
                            <p class="text-xs text-db-text-muted">Ask the magic 8-ball any yes/no question.</p>
                        </div>
                    </div>
                    <span class="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded ml-4">Always On</span>
                </div>

                <!-- Hug -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">🤗</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!hug</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">@user</code>
                            </div>
                            <p class="text-xs text-db-text-muted">Send a virtual hug to someone!</p>
                        </div>
                    </div>
                    <span class="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded ml-4">Always On</span>
                </div>

                <!-- Slap -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">👋</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!slap</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">@user</code>
                            </div>
                            <p class="text-xs text-db-text-muted">Slap someone with a random object!</p>
                        </div>
                    </div>
                    <span class="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded ml-4">Always On</span>
                </div>

                <!-- Love -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">💕</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!love</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">@user</code>
                            </div>
                            <p class="text-xs text-db-text-muted">Check love compatibility percentage!</p>
                        </div>
                    </div>
                    <span class="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded ml-4">Always On</span>
                </div>

                <!-- RPS -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">✊</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!rps</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">[rock/paper/scissors]</code>
                            </div>
                            <p class="text-xs text-db-text-muted">Play rock paper scissors with the bot.</p>
                        </div>
                    </div>
                    <span class="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded ml-4">Always On</span>
                </div>
            </div>
        </div>

        <!-- Islamic & Poetry Commands -->
        <div class="bg-db-card rounded-2xl border border-db-border p-6">
            <div class="flex items-center gap-3 mb-5">
                <span class="w-2 h-2 rounded-full bg-cyan-500"></span>
                <h2 class="text-lg font-semibold text-db-text-primary">Islamic & Poetry</h2>
                <span class="text-xs text-db-text-dim bg-db-surface px-2 py-1 rounded">Quotes & Inspiration</span>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <!-- Islamic -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">🕌</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!m</span>
                                <span class="text-xs text-db-text-dim">or !muslim, !hadees</span>
                            </div>
                            <p class="text-xs text-db-text-muted">Random Hadith, Quran verses, and quotes from Sahaba & Imams.</p>
                        </div>
                    </div>
                    <span class="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded ml-4">Always On</span>
                </div>

                <!-- Poetry -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">📝</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!p</span>
                                <span class="text-xs text-db-text-dim">or !poetry, !shayari</span>
                            </div>
                            <p class="text-xs text-db-text-muted">Random Urdu poetry/shayari from famous poets.</p>
                        </div>
                    </div>
                    <span class="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded ml-4">Always On</span>
                </div>

                <!-- Quote -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">💬</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!quote</span>
                            </div>
                            <p class="text-xs text-db-text-muted">Random inspirational quote from famous personalities.</p>
                        </div>
                    </div>
                    <span class="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded ml-4">Always On</span>
                </div>

                <!-- Joke -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">😂</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!joke</span>
                            </div>
                            <p class="text-xs text-db-text-muted">Random jokes in Urdu/Hindi/English.</p>
                        </div>
                    </div>
                    <span class="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded ml-4">Always On</span>
                </div>
            </div>
        </div>

        <!-- XP & Stats Commands -->
        <div class="bg-db-card rounded-2xl border border-db-border p-6">
            <div class="flex items-center gap-3 mb-5">
                <span class="w-2 h-2 rounded-full bg-blue-500"></span>
                <h2 class="text-lg font-semibold text-db-text-primary">XP & Stats</h2>
                <span class="text-xs text-db-text-dim bg-db-surface px-2 py-1 rounded">Check progress</span>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <!-- XP -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">⭐</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!xp</span>
                                <span class="text-xs text-db-text-dim">or !points, !level</span>
                            </div>
                            <p class="text-xs text-db-text-muted">Check your current XP, level and rank.</p>
                        </div>
                    </div>
                    <span class="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded ml-4">Always On</span>
                </div>

                <!-- Leaderboard -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">🏆</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!lb</span>
                                <span class="text-xs text-db-text-dim">or !leaderboard, !top</span>
                            </div>
                            <p class="text-xs text-db-text-muted">View top 5 XP leaderboard for the channel.</p>
                        </div>
                    </div>
                    <span class="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded ml-4">Always On</span>
                </div>

                <!-- Help -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">❓</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!help</span>
                                <span class="text-xs text-db-text-dim">or !commands</span>
                            </div>
                            <p class="text-xs text-db-text-muted">Show list of all available commands.</p>
                        </div>
                    </div>
                    <span class="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded ml-4">Always On</span>
                </div>
            </div>
        </div>

        <!-- Streamer/Admin Commands -->
        <div class="bg-db-card rounded-2xl border border-db-border p-6">
            <div class="flex items-center gap-3 mb-5">
                <span class="w-2 h-2 rounded-full bg-red-500"></span>
                <h2 class="text-lg font-semibold text-db-text-primary">Streamer Commands</h2>
                <span class="text-xs text-red-400 bg-red-500/10 px-2 py-1 rounded">Owner Only</span>
            </div>

            <div class="p-3 bg-amber-500/10 border border-amber-500/20 rounded-lg mb-5">
                <p class="text-xs text-amber-300">
                    <strong>⚠️ These commands can only be used by the channel owner.</strong> Mods and viewers cannot use these commands.
                </p>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <!-- Add XP -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">➕</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!addxp</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">@user [amount]</code>
                            </div>
                            <p class="text-xs text-db-text-muted">Give XP to a user. Max 1,000,000 XP per command.</p>
                        </div>
                    </div>
                    <span class="text-xs text-red-400 bg-red-500/10 px-2 py-1 rounded ml-4">Owner</span>
                </div>

                <!-- Give XP (alias) -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">🎁</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!givexp</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">@user [amount]</code>
                            </div>
                            <p class="text-xs text-db-text-muted">Alias for !addxp - Give XP to a user.</p>
                        </div>
                    </div>
                    <span class="text-xs text-red-400 bg-red-500/10 px-2 py-1 rounded ml-4">Owner</span>
                </div>

                <!-- Remove XP -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">➖</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!removexp</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">@user [amount]</code>
                            </div>
                            <p class="text-xs text-db-text-muted">Remove XP from a user. Cannot go below 0.</p>
                        </div>
                    </div>
                    <span class="text-xs text-red-400 bg-red-500/10 px-2 py-1 rounded ml-4">Owner</span>
                </div>

                <!-- Take XP (alias) -->
                <div class="flex items-start justify-between p-4 bg-db-surface/50 rounded-xl hover:bg-db-surface transition-colors">
                    <div class="flex items-start gap-3 flex-1">
                        <span class="text-2xl mt-0.5">🚫</span>
                        <div>
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-semibold text-db-text-primary">!takexp</span>
                                <code class="text-xs text-db-text-dim bg-db-card px-1.5 py-0.5 rounded">@user [amount]</code>
                            </div>
                            <p class="text-xs text-db-text-muted">Alias for !removexp - Take XP from a user.</p>
                        </div>
                    </div>
                    <span class="text-xs text-red-400 bg-red-500/10 px-2 py-1 rounded ml-4">Owner</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function toggleFeature(feature, button) {
    const currentState = button.getAttribute('aria-checked') === 'true';
    const newState = !currentState;
    const span = button.querySelector('span');

    // Optimistic update
    button.setAttribute('aria-checked', newState);
    button.style.backgroundColor = newState ? '#10b981' : '#3f3f46';
    span.classList.toggle('translate-x-6', newState);
    span.classList.toggle('translate-x-1', !newState);

    fetch(`/dashboard/tenant/{{ $tenant->id }}/toggle-feature`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ feature: feature, enabled: newState })
    })
    .then(r => r.json())
    .then(d => {
        if (!d.success) {
            button.setAttribute('aria-checked', currentState);
            button.style.backgroundColor = currentState ? '#10b981' : '#3f3f46';
            span.classList.toggle('translate-x-6', currentState);
            span.classList.toggle('translate-x-1', !currentState);
        }
    })
    .catch(() => {
        button.setAttribute('aria-checked', currentState);
        button.style.backgroundColor = currentState ? '#10b981' : '#3f3f46';
        span.classList.toggle('translate-x-6', currentState);
        span.classList.toggle('translate-x-1', !currentState);
    });
}
</script>
@endsection