{{-- Elegant Multi-Reward Display Component --}}
@php
    $compact = $compact ?? false;
    $inline = $inline ?? false; // New parameter for horizontal layout
    $hasRewards = false;
@endphp

<div class="rewards-container {{ $compact ? 'rewards-compact' : 'rewards-full' }} {{ $inline ? 'rewards-inline' : '' }}"
    x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">

    <div
        class="rewards-list {{ $inline ? 'flex flex-wrap gap-2' : ($compact ? 'flex flex-col space-y-2' : 'flex flex-wrap gap-3') }}">

        {{-- Package Name - Elegant Blue Box --}}
        @if ($reward && !empty($reward->Package_Name) && $reward->Package_Name !== 'NULL' && $reward->Package_Name !== 'NoName')
            @php $hasRewards = true; @endphp
            <div class="reward-box reward-package {{ $compact ? 'reward-compact' : '' }}"
                :class="{ 'reward-hover': hover && !{{ $compact ? 'true' : 'false' }} }">
                <div class="reward-content">
                    <div class="reward-label">{{ __('rewards.item') }}</div>
                    <div class="reward-name {{ $compact ? 'text-xs' : 'text-sm' }} break-words whitespace-normal">
                        {{ $reward->Package_Name }}
                    </div>
                </div>
            </div>
        @endif

        {{-- Skill Name - Elegant Green Box --}}
        @if ($reward && !empty($reward->Skill_Name) && $reward->Skill_Name !== 'NULL' && $reward->Skill_Name !== 'NoName')
            @php $hasRewards = true; @endphp
            <div class="reward-box reward-skill {{ $compact ? 'reward-compact' : '' }}"
                :class="{ 'reward-hover': hover && !{{ $compact ? 'true' : 'false' }} }">
                <div class="reward-content">
                    <div class="reward-label">{{ __('rewards.skill') }}</div>
                    <div class="reward-name {{ $compact ? 'text-xs' : 'text-sm' }} break-words whitespace-normal">
                        {{ $reward->Skill_Name }}
                    </div>
                </div>
            </div>
        @endif

        {{-- Reward Name with Count - Dynamic Color Box --}}
        @if ($reward && !empty($reward->RewardName) && $reward->RewardName !== 'NULL' && $reward->RewardName !== 'None')
            @php
                $hasRewards = true;
                $displayText = $reward->RewardName;

                // إضافة العدد إذا كان موجوداً
                if (!empty($reward->RewardCount) && $reward->RewardCount > 0) {
                    $displayText = '(' . number_format($reward->RewardCount) . ') ' . $displayText;
                }

                // تحديد نوع الجائزة واللون
                $rewardType = 'item';
                $rewardLabel = __('rewards.item');

                if (stripos($reward->RewardName, 'Gold') !== false || stripos($reward->RewardName, 'gold') !== false) {
                    $rewardType = 'gold';
                    $rewardLabel = __('rewards.gold');
                } elseif (
                    stripos($reward->RewardName, 'Silk') !== false ||
                    stripos($reward->RewardName, 'silk') !== false
                ) {
                    $rewardType = 'silk';
                    $rewardLabel = __('rewards.silk');
                } elseif (
                    stripos($reward->RewardName, '4T') !== false ||
                    stripos($reward->RewardName, 'Donate') !== false ||
                    stripos($reward->RewardName, 'Coin') !== false
                ) {
                    $rewardType = 'donate';
                    $rewardLabel = __('rewards.points');
                }
            @endphp
            <div class="reward-box reward-{{ $rewardType }} {{ $compact ? 'reward-compact' : '' }}"
                :class="{ 'reward-hover': hover && !{{ $compact ? 'true' : 'false' }} }">
                <div class="reward-content">
                    <div class="reward-label">{{ __('rewards.item') }}</div>
                    <div class="reward-name {{ $compact ? 'text-xs' : 'text-sm' }} break-words whitespace-normal">
                        {{ $displayText }}
                    </div>
                </div>
            </div>
        @endif


        {{-- إذا لم توجد أي جوائز --}}
        @if (!$hasRewards)
            @if ($compact)
                <div class="no-reward-simple">
                    <i class="fas fa-ban"></i>
                    <span class="break-words">{{ __('rewards.no_reward') }}</span>
                </div>
            @else
                <div class="no-reward-modern no-reward-full">
                    <div class="no-reward-icon">
                        <i class="fas fa-gift-card"></i>
                    </div>
                    <div class="no-reward-text">
                        <span class="no-reward-title break-words">{{ __('rewards.no_reward') }}</span>
                        <span class="no-reward-subtitle break-words">{{ __('rewards.not_available') }}</span>
                    </div>
                </div>
            @endif
        @endif
    </div>



</div>