@extends('frontend.userarea.layouts.main')
@section('content')

<div style="height:10px; background-color:#FFF" class="grabgtabbottom"></div>

<div class="tab-content">
    <div id="sport_wrap" class="tab-pane fade in active">
        <div id="games_window_sport" class="text-center" style="min-height:700px; margin-top:30px; padding: 10px;">
            
            @forelse ($games as $item)
                <div class="game-item" style="height:240px; width:200px; display:inline-block; text-align:center; vertical-align:top; margin: 10px;">
                    <a href="/play?gameType={{ $item->game_type }}&providerCode={{ $item->provider_code }}&gameCode={{ $item->game_code }}" style="text-decoration: none; color: inherit;">
                        <img src="{{ $item->game_image }}" 
                             style="width: 100%; max-width: 180px; border-radius: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" 
                             onerror="this.src='{{ asset('assets/images/d6fb4a76.png') }}';" 
                             alt="{{ $item->game_name }}">
                        
                        <div style="margin-top: 10px; font-weight: bold; font-size: 14px;">
                            {{ Str::ucfirst(Str::lower($item->game_name)) }}
                        </div>
                    </a>
                </div>
            @empty
                {{-- Tampilan jika game sport kosong --}}
                <div style="padding: 100px 20px; text-align: center; width: 100%;">
            <div style="font-size: 50px; margin-bottom: 10px;">🔍</div>
            <p style="color: #666; font-size: 16px; font-weight: bold;">Maaf, saat ini belum ada pasaran Sport yang tersedia.</p>
        </div>
            @endforelse

            <div style="clear: both;"></div>
        </div>
    </div>
</div>

@endsection