<x-app-layout>
    <x-slot name="title">Turnamen</x-slot>

    <div class="pes-hero mb-4">
        <div style="position:relative;z-index:1">
            <div class="pes-hero-title"><i class="ti ti-medal" style="font-size:22px"></i> Turnamen</div>
            <div class="pes-hero-sub">Kompetisi resmi untuk pemain terbaik</div>
        </div>
    </div>

    <div class="row g-4">
        @forelse($tournaments as $t)
            @php
                $statusStyle = match($t->status) {
                    'registration' => 'background:#f0fdf4;color:#15803d',
                    'in_progress'  => 'background:#eff6ff;color:#1d4ed8',
                    'completed'    => 'background:#f1f5f9;color:#64748b',
                    default        => 'background:#fef9c3;color:#854d0e',
                };
                $filled = $t->participants_count / max(1,$t->max_players) * 100;
            @endphp
            <div class="col-sm-6 col-lg-4">
                <a href="{{ route('tournament.show', $t->id) }}" style="text-decoration:none;display:block;height:100%">
                    <div class="pes-card h-100" style="transition:all .2s;cursor:pointer;overflow:hidden"
                         onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 28px rgba(15,23,42,.12)'"
                         onmouseout="this.style.transform='';this.style.boxShadow=''">

                        <!-- Thumbnail or gradient bar -->
                        @if($t->thumbnail)
                        <div style="height:160px;overflow:hidden;position:relative">
                            <img src="{{ Storage::url($t->thumbnail) }}" alt="{{ $t->title }}"
                                 style="width:100%;height:100%;object-fit:cover">
                            <!-- Status badge over image -->
                            <span style="position:absolute;top:10px;right:10px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;{{ $statusStyle }}">
                                {{ ucfirst(str_replace('_',' ',$t->status)) }}
                            </span>
                        </div>
                        @else
                        <div style="height:4px;background:linear-gradient(90deg,#1d4ed8,#7c3aed)"></div>
                        @endif

                        <div class="p-4">
                            <div class="d-flex align-items-start justify-content-between mb-2">
                                <div style="font-size:15px;font-weight:700;color:#0f172a;line-height:1.3">{{ $t->title }}</div>
                                @if(!$t->thumbnail)
                                <span style="padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;{{ $statusStyle }};flex-shrink:0;margin-left:8px">
                                    {{ ucfirst(str_replace('_',' ',$t->status)) }}
                                </span>
                                @endif
                            </div>

                            <!-- Prize tiers -->
                            @if($t->prize_1st || $t->prize_2nd || $t->prize_3rd)
                            <div class="d-flex flex-wrap gap-2 mb-3">
                                @if($t->prize_1st)
                                <div style="display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#ca8a04;background:#fefce8;padding:3px 8px;border-radius:8px">
                                    🥇 {{ $t->prize_1st }}
                                </div>
                                @endif
                                @if($t->prize_2nd)
                                <div style="display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:#64748b;background:#f1f5f9;padding:3px 8px;border-radius:8px">
                                    🥈 {{ $t->prize_2nd }}
                                </div>
                                @endif
                                @if($t->prize_3rd)
                                <div style="display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:#92400e;background:#fef3c7;padding:3px 8px;border-radius:8px">
                                    🥉 {{ $t->prize_3rd }}
                                </div>
                                @endif
                            </div>
                            @endif

                            <div style="font-size:12px;color:#64748b;margin-bottom:6px;display:flex;justify-content:space-between">
                                <span>Peserta</span>
                                <span style="font-weight:600;color:#0f172a">{{ $t->participants_count }} / {{ $t->max_players }}</span>
                            </div>
                            <div class="pes-progress mb-3">
                                <div class="pes-progress-bar" style="width:{{ $filled }}%"></div>
                            </div>
                            @if($t->starts_at)
                            <div style="font-size:12px;color:#94a3b8;display:flex;align-items:center;gap:5px">
                                <i class="ti ti-calendar"></i> {{ $t->starts_at->format('d M Y') }}
                            </div>
                            @endif
                        </div>
                    </div>
                </a>
            </div>
        @empty
            <div class="col-12">
                <div class="pes-card p-5 text-center">
                    <div style="font-size:48px;margin-bottom:12px">🏆</div>
                    <div style="font-size:16px;font-weight:700;color:#0f172a;margin-bottom:4px">Belum ada turnamen</div>
                    <div style="font-size:13px;color:#64748b">Cek kembali nanti!</div>
                </div>
            </div>
        @endforelse
    </div>

    @if($tournaments->hasPages())
    <div class="mt-4">{{ $tournaments->links() }}</div>
    @endif
</x-app-layout>
