@extends('layouts.app')
@section('title', 'Home')

@section('content')
{{-- Balance Bar --}}
<div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-4 pt-5 pb-6">
    <div class="flex items-center justify-between mb-4">
        <div>
            <p class="text-indigo-200 text-xs font-medium uppercase tracking-wider">Welcome back</p>
            <h2 class="text-white font-bold text-lg">{{ auth()->user()->name }}</h2>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('wallet.index') }}" class="bg-white/20 text-white text-xs font-semibold px-3 py-1.5 rounded-lg hover:bg-white/30 transition">
                + Add Money
            </a>
        </div>
    </div>
    <div class="grid grid-cols-2 gap-3">
        <div class="bg-white/15 rounded-xl p-3 backdrop-blur">
            <p class="text-indigo-200 text-xs mb-1">Deposit Balance</p>
            <p class="text-white font-bold text-xl">৳{{ number_format(auth()->user()->balance, 2) }}</p>
        </div>
        <div class="bg-white/15 rounded-xl p-3 backdrop-blur">
            <p class="text-indigo-200 text-xs mb-1">Winning Balance</p>
            <p class="text-yellow-300 font-bold text-xl">৳{{ number_format(auth()->user()->winning, 2) }}</p>
        </div>
    </div>
</div>

{{-- Notices --}}
@if($notices->count())
<div class="px-4 pt-3 space-y-2">
    @foreach($notices as $notice)
    <div class="flex items-start gap-2 px-3 py-2.5 rounded-xl border text-xs {{ $notice->alert_class }}">
        <svg class="w-4 h-4 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        <div>
            <span class="font-semibold">{{ $notice->title }}:</span> {{ $notice->content }}
        </div>
    </div>
    @endforeach
</div>
@endif

{{-- Sliders --}}
@if($sliders->count())
<div class="px-4 pt-4">
    <div class="swiper slider-swiper rounded-2xl overflow-hidden">
        <div class="swiper-wrapper">
            @foreach($sliders as $slider)
            <div class="swiper-slide">
                @if($slider->link)
                <a href="{{ $slider->link }}" target="_blank">
                @endif
                <img src="{{ $slider->image_url }}" alt="Banner" class="w-full h-40 object-cover">
                @if($slider->link)
                </a>
                @endif
            </div>
            @endforeach
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>
@endif

{{-- Game Tabs + Tournament List --}}
<div class="pt-4">
    {{-- Game Filter Tabs --}}
    <div class="px-4 mb-3 overflow-x-auto scrollbar-hide">
        <div class="flex gap-2 pb-1 min-w-max">
            <a href="{{ route('home') }}"
               class="px-4 py-1.5 rounded-full text-sm font-semibold transition {{ !request('game_id') ? 'bg-indigo-500 text-white' : 'bg-white/10 text-gray-300 hover:bg-white/15' }}">
                All
            </a>
            @foreach($games as $game)
            <a href="{{ route('home', ['game_id' => $game->id]) }}"
               class="flex items-center gap-1.5 px-4 py-1.5 rounded-full text-sm font-semibold transition {{ request('game_id') == $game->id ? 'bg-indigo-500 text-white' : 'bg-white/10 text-gray-300 hover:bg-white/15' }}">
                @if($game->icon)
                <img src="{{ $game->icon_url }}" class="w-4 h-4 rounded" alt="">
                @endif
                {{ $game->name }}
            </a>
            @endforeach
        </div>
    </div>

    {{-- Section Header --}}
    <div class="px-4 flex items-center justify-between mb-3">
        <h3 class="font-bold text-white text-base">Active Tournaments</h3>
        <a href="{{ route('matches.index') }}" class="text-indigo-400 text-sm">View all</a>
    </div>

    {{-- Tournament Cards --}}
    <div class="px-4 space-y-3 pb-4">
        @forelse($tournaments as $tournament)
        @include('user.components.tournament-card', compact('tournament'))
        @empty
        <div class="text-center py-12 text-gray-500">
            <svg class="w-12 h-12 mx-auto mb-3 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <p class="text-sm">No active tournaments right now.</p>
            <p class="text-xs mt-1">Check back soon!</p>
        </div>
        @endforelse
    </div>

    {{ $tournaments->links('user.components.pagination') }}
</div>
@endsection

@push('scripts')
<script>
    new Swiper('.slider-swiper', {
        loop: true,
        autoplay: { delay: 3500, disableOnInteraction: false },
        pagination: { el: '.swiper-pagination', clickable: true },
        effect: 'fade',
    });
</script>
@endpush