@extends('layouts.app')

@section('title', 'Browse Teams')

@section('content')
<div class="container-fluid px-4 py-4" data-reveal>

    {{-- Page Hero --}}
    <div class="page-hero mb-4" style="background: radial-gradient(ellipse 50% 60% at 5% 50%, rgba(124,92,252,0.06) 0%, transparent 70%), radial-gradient(ellipse 40% 50% at 95% 50%, rgba(0,212,255,0.04) 0%, transparent 70%), var(--grid-pattern); background-size: auto, auto, 32px 32px;">
        <div class="page-hero-content d-flex align-items-start justify-content-between flex-wrap gap-3">
            <div class="page-hero-inner" style="padding:4px 8px;">
                <h1 class="page-heading-pixel mb-1">
                    <span style="color:var(--arena-violet); text-shadow: 0 0 12px rgba(124,92,252,0.5);">//</span> Esports Teams
                </h1>
                <p class="page-subheading">Find competitive teams, active gaming organizations, and rosters.</p>
            </div>
            <div class="d-flex gap-2 align-items-center">
                <span class="badge-arena badge-violet" style="font-family:var(--font-hud); letter-spacing:0.08em; align-self:flex-start;">
                    {{ count($teams) }} Organizations
                </span>
            </div>
        </div>
    </div>

    {{-- Filter Toolbar --}}
    <div class="filter-hud p-3 mb-4 sticky-top" style="top: 72px; z-index: var(--z-raised);">
        <div class="filter-hud-inner">
            <form method="GET" action="{{ route('preview.teams') }}" class="row g-2 align-items-center">
                <div class="col-md-3">
                    <div class="position-relative">
                        <input type="text" name="search" class="form-control input-arena" placeholder="Search team or org..." value="{{ request('search') }}" style="padding-inline-start: var(--sp-8);">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="position-absolute" style="left:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--arena-text-muted);"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
                    </div>
                </div>
                <div class="col-md-3">
                    <select name="game" class="form-select input-arena" onchange="this.form.submit()">
                        <option value="">All Games</option>
                        @foreach($games as $game)
                            <option value="{{ $game['id'] }}" {{ request('game') == $game['id'] ? 'selected' : '' }}>{{ $game['name'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <select name="region" class="form-select input-arena" onchange="this.form.submit()">
                        <option value="">All Regions</option>
                        @foreach(['MENA', 'EU', 'NA', 'APAC', 'LATAM'] as $r)
                            <option value="{{ $r }}" {{ request('region') == $r ? 'selected' : '' }}>{{ $r }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <select name="looking_for_players" class="form-select input-arena" onchange="this.form.submit()">
                        <option value="">All Statuses</option>
                        <option value="1" {{ request('looking_for_players') == '1' ? 'selected' : '' }}>Recruiting Players</option>
                    </select>
                </div>
                <div class="col-md-1 text-md-end">
                    <a href="{{ route('preview.teams') }}" class="btn-arena btn-ghost btn-sm w-100 py-2">Clear</a>
                </div>
            </form>
        </div>
    </div>

    {{-- Active filter pills --}}
    @if(request('game') || request('region') || request('looking_for_players') || request('search'))
    <div class="d-flex flex-wrap gap-2 mb-4">
        @if(request('search'))
            <span class="badge-arena badge-muted d-flex align-items-center gap-2">
                Search: "{{ request('search') }}"
                <a href="{{ request()->fullUrlWithQuery(['search' => null]) }}" style="color: inherit; text-decoration: none;"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></a>
            </span>
        @endif
        @if(request('game'))
            <span class="badge-arena badge-accent d-flex align-items-center gap-2">
                Game: {{ $games[array_search(request('game'), array_column($games, 'id'))]['name'] ?? request('game') }}
                <a href="{{ request()->fullUrlWithQuery(['game' => null]) }}" style="color: inherit; text-decoration: none;"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></a>
            </span>
        @endif
        @if(request('region'))
            <span class="badge-arena badge-warm d-flex align-items-center gap-2">
                Region: {{ request('region') }}
                <a href="{{ request()->fullUrlWithQuery(['region' => null]) }}" style="color: inherit; text-decoration: none;"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></a>
            </span>
        @endif
        @if(request('looking_for_players'))
            <span class="badge-arena badge-green d-flex align-items-center gap-2">
                Recruiting
                <a href="{{ request()->fullUrlWithQuery(['looking_for_players' => null]) }}" style="color: inherit; text-decoration: none;"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></a>
            </span>
        @endif
    </div>
    @endif

    {{-- Teams Grid — Organization Panels --}}
    <div class="row g-4">
        @forelse($teams as $team)
        <div class="col-md-6 col-lg-4">
            <div class="card-arena card-violet card-tilt h-100 d-flex flex-column position-relative"
                 style="padding:0; overflow:hidden;">

                {{-- Top accent bar --}}
                <div style="height:3px; background:linear-gradient(90deg, rgba(124,92,252,0.8), rgba(0,212,255,0.5), rgba(124,92,252,0.3)); flex-shrink:0;"></div>

                <div class="p-4 d-flex flex-column flex-grow-1">
                    {{-- Badges top right --}}
                    <div class="position-absolute" style="top: 18px; right: 18px; display: flex; gap: 6px; align-items: center;">
                        @if($team['looking_for_players'])
                            <span class="badge-arena badge-green" style="font-size: 0.58rem; letter-spacing:0.08em;">Recruiting</span>
                        @endif
                        <span class="badge-arena badge-muted" style="font-size: 0.6rem; letter-spacing:0.06em;">{{ $team['region'] }}</span>
                    </div>

                    {{-- Logo & Org Details --}}
                    <div class="d-flex align-items-center gap-3 mb-4">
                        <div style="position:relative; flex-shrink:0;">
                            <img src="{{ asset($team['logo']) }}" alt="{{ $team['name'] }}"
                                 style="width: 60px; height: 60px; border-radius: 10px; object-fit: contain; background: rgba(15,17,23,0.9); padding: 8px; border: 1px solid rgba(124,92,252,0.25); box-shadow: 0 0 16px rgba(124,92,252,0.15);"
                                 onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2260%22><rect width=%2260%22 height=%2260%22 rx=%2210%22 fill=%22%221D2030%22/></svg>'">
                        </div>
                        <div>
                            <div class="d-flex align-items-center gap-2">
                                <span style="font-family:var(--font-hud); font-weight:800; font-size:1.05rem; color:var(--arena-text-primary); letter-spacing:0.01em;">{{ $team['name'] }}</span>
                                @if($team['verified'])
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="#00D4FF" style="filter:drop-shadow(0 0 4px rgba(0,212,255,0.7)); flex-shrink:0;" title="Verified Org"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" fill="none" stroke="#00D4FF" stroke-width="2"/></svg>
                                @endif
                            </div>
                            <div style="font-family:var(--font-hud); font-size:0.7rem; color:var(--arena-text-muted); letter-spacing:0.04em; margin-top:2px;">
                                {{ $team['flag'] }} {{ $team['organization'] ?? 'Independent' }}
                            </div>
                        </div>
                    </div>

                    {{-- Bio --}}
                    <p style="font-size:0.8rem; color:var(--arena-text-muted); line-height:1.6; margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:38px;">
                        {{ $team['bio'] }}
                    </p>

                    {{-- Active Titles --}}
                    <div class="mb-4">
                        <div class="text-hud mb-2">Active Titles</div>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach($team['games'] as $gId)
                                <span class="badge-arena badge-muted" style="font-size: 0.65rem; border: 1px solid rgba(124,92,252,0.15);">
                                    {{ ['valorstrike'=>'ValoStrike','nexus-ops'=>'Nexus Ops','frontline-clash'=>'Frontline Clash','strikezone'=>'StrikeZone'][$gId] ?? $gId }}
                                </span>
                            @endforeach
                        </div>
                    </div>

                    {{-- Stats Block --}}
                    <div class="row g-0 text-center p-3 mb-4 mt-auto"
                         style="background:rgba(0,0,0,0.3); border-radius:6px; border:1px solid rgba(124,92,252,0.1);">
                        <div class="col-4">
                            <div style="font-family:var(--font-hud); font-weight:800; color:var(--arena-violet); font-size:1.05rem; text-shadow:0 0 8px rgba(124,92,252,0.4);">{{ $team['stats']['win_rate'] }}%</div>
                            <div class="player-stat-label" style="color:var(--arena-text-muted);">Win Rate</div>
                        </div>
                        <div class="col-4" style="border-inline: 1px solid rgba(124,92,252,0.1);">
                            <div style="font-family:var(--font-hud); font-weight:800; color:var(--arena-text-primary); font-size:1.05rem;">{{ $team['stats']['wins'] }}</div>
                            <div class="player-stat-label" style="color:var(--arena-text-muted);">Wins</div>
                        </div>
                        <div class="col-4">
                            <div style="font-family:var(--font-hud); font-weight:800; color:var(--arena-accent); font-size:1.05rem; text-shadow:0 0 6px rgba(0,212,255,0.3);">{{ number_format($team['stats']['points']) }}</div>
                            <div class="player-stat-label" style="color:var(--arena-text-muted);">Points</div>
                        </div>
                    </div>

                    {{-- Action --}}
                    <a href="/preview/teams/{{ $team['slug'] }}" class="btn-arena btn-secondary w-100 btn-sm text-center">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                        View Roster
                    </a>
                </div>
            </div>
        </div>
        @empty
        <div class="col-12">
            <div class="card-arena p-5 text-center empty-state">
                <div style="width:64px; height:64px; margin:0 auto 16px; background:rgba(124,92,252,0.06); border:1px solid rgba(124,92,252,0.15); border-radius:50%; display:flex; align-items:center; justify-content:center;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="rgba(124,92,252,0.4)" stroke-width="1.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><line x1="16" y1="10" x2="8" y2="10"/><line x1="12" y1="6" x2="12" y2="14"/></svg>
                </div>
                <div class="empty-title" style="font-size:1rem; margin-bottom:8px;">No Teams Found</div>
                <p class="page-subheading" style="margin-bottom:16px;">Adjust your filter choices or search term to try again.</p>
                <a href="{{ route('preview.teams') }}" class="btn-arena btn-primary btn-sm">Reset Filters</a>
            </div>
        </div>
        @endforelse
    </div>
</div>
@endsection
