@extends('layouts.app')
@section('title','Times - GIGAX ARENA')
@section('page_title','Times')

@section('content')
@php
$my=collect($myTeams??[])->first();
$teams=collect($allTeams??$teams??[])->unique(fn($t)=>data_get($t,'id'))->values();
$uid=(int)($userId??session('user_id')??0);
$initial=fn($s)=>mb_strtoupper(mb_substr(trim((string)$s)?:'?',0,1));
$teamLogoUrl=function($team){
    $logo=trim((string)data_get($team,'logo_url',''));
    if($logo==='') return null;
    if(preg_match('~^(?:https?:)?//~i',$logo) || str_starts_with($logo,'data:')) return $logo;
    return asset(ltrim($logo,'/'));
};
try {
    $clanLimit=(int)\Illuminate\Support\Facades\DB::table('settings')->where('key','clan_member_limit')->value('value');
    $clanLimit=max(2,min(50,$clanLimit>0?$clanLimit:5));
} catch (\Throwable $e) { $clanLimit=5; }
@endphp

<div class="gxcl-page">
<section class="gxcl-topbar">
  <div><span class="gxcl-kicker">GIGAX ARENA</span><h1>TIMES</h1><p>Conectando jogadores, construindo histórias.</p></div>
  <button class="gxcl-btn primary gxcl-create" onclick="gxclOpenCreate()">＋ CRIAR TIME</button>
</section>

<nav class="gxcl-tabs">
  <button class="active" data-view="all">TODOS OS TIMES</button>
  <button data-view="recruiting">PROCURAR JOGADORES</button>
  <button data-view="mine">MEUS TIMES</button>
  <button data-view="invites">CONVITES</button>
</nav>

<section class="gxcl-tools">
  <label class="gxcl-search"><span>⌕</span><input id="gxclSearch" placeholder="Buscar time, tag ou jogador..."></label>
  <label class="gxcl-select"><small>Região</small><select id="gxclRegion"><option value="">Todas</option><option>Brasil</option></select></label>
  <label class="gxcl-select"><small>Nível</small><select id="gxclLevel"><option value="">Todos</option><option>OPEN</option><option>ADVANCED</option><option>PRO</option></select></label>
  <label class="gxcl-select"><small>Modo principal</small><select id="gxclMode"><option value="">Todos</option><option>5v5</option><option>MIX</option><option>AWP</option><option>C1S</option></select></label>
  <button class="gxcl-clear" type="button" onclick="document.getElementById('gxclSearch').value='';document.getElementById('gxclSearch').dispatchEvent(new Event('input'))">⚲ &nbsp; Limpar</button>
</section>

<div class="gxcl-layout">
<main class="gxcl-main">
  <div class="gxcl-resultbar"><b id="gxclCount">{{$teams->count()}} TIMES ENCONTRADOS</b><span>Ordenar por <strong>Mais recentes⌄</strong></span></div>
  <div id="gxclList" class="gxcl-grid">
@forelse($teams as $idx=>$team)
@php
$id=(int)data_get($team,'id'); $members=collect(data_get($team,'members',[])); $count=(int)data_get($team,'member_count',$members->count()); $full=$count>=$clanLimit;
$name=data_get($team,'name','Time'); $tag=data_get($team,'tag'); $captain=data_get($team,'captain_name','Capitão'); $isCap=(int)data_get($team,'captain_id')===$uid;
$isMember=$members->contains(fn($m)=>(int)data_get($m,'user_id')===$uid);
$wins=(int)data_get($team,'wins',0); $losses=(int)data_get($team,'losses',0); $matches=(int)data_get($team,'matches',data_get($team,'total_matches',$wins+$losses)); $points=(int)data_get($team,'rank_points',0);
$level=$points>=1500?'PRO':($points>=1000?'ADVANCED':'OPEN');
$search=mb_strtolower($name.' '.($tag??'').' '.$captain.' '.$members->pluck('nickname')->implode(' '));
@endphp
<article class="gxcl-card" data-search="{{$search}}" data-state="{{$full?'full':'recruiting'}}" data-mine="{{$isMember?'1':'0'}}">
  <div class="gxcl-cardhead">
    <span class="gxcl-rank">#{{$idx+1}}</span>
    @php $cardLogo=$teamLogoUrl($team); @endphp
    <div class="gxcl-logo">
      @if($cardLogo)
        <img src="{{$cardLogo}}" alt="Logo {{$name}}" onerror="this.style.display='none';this.nextElementSibling.style.display='grid';">
        <span class="gxcl-logo-fallback" style="display:none">{{$initial($name)}}</span>
      @else
        <span class="gxcl-logo-fallback">{{$initial($name)}}</span>
      @endif
    </div>
    <div class="gxcl-teamname"><strong>{{$name}}</strong><b>{{$tag?:'GIGAX'}}</b><span>🇧🇷 Brasil</span></div>
    <span class="gxcl-level {{$level==='PRO'?'pro':($level==='ADVANCED'?'adv':'open')}}">Nível<br><b>{{$level}}</b></span>
  </div>
  <p class="gxcl-desc">{{data_get($team,'description') ?: ($full?'Equipe completa e pronta para competir.':'Time recrutando jogadores para completar o elenco.')}}</p>
  <div class="gxcl-tags"><span>5v5</span><span>MIX</span><span>COMPETITIVO</span>@if(!$full)<b>RECRUTANDO</b>@endif</div>
  <div class="gxcl-rostertitle"><b>JOGADORES ({{$count}}/{{$clanLimit}})</b><span>{{$clanLimit-$count>0?'+'.($clanLimit-$count).' vagas':'COMPLETO'}}</span></div>
  <div class="gxcl-roster">
    @foreach($members->take($clanLimit) as $m)
    @php $role=strtolower((string)data_get($m,'role','member')); $n=data_get($m,'nickname','Jogador'); @endphp
    <a href="{{route('players.show',data_get($m,'user_id'))}}" class="gxcl-person">
      <i>@if(data_get($m,'avatar_url'))<img src="{{data_get($m,'avatar_url')}}">@else{{$initial($n)}}@endif</i>
      <span><strong>{{$n}} @if($role==='captain')<em>(Capitão)</em>@endif</strong><small>{{data_get($m,'online',false)?'Online':'Jogador'}}</small></span>
    </a>
    @endforeach
    @for($s=$members->count();$s<$clanLimit;$s++)
      <div class="gxcl-person vacancy"><i>＋</i><span><strong>Vaga aberta</strong><small>Recrutando</small></span></div>
    @endfor
  </div>
  <div class="gxcl-cardfoot">
    <a class="gxcl-profile" href="{{route('teams.show',$id)}}">▣ &nbsp; Ver Perfil &nbsp; →</a>
    <span class="gxcl-score">{{$points}} pts</span>
    @if(!$my&&!$full&&!$isMember)<button class="gxcl-join" data-id="{{$id}}">SOLICITAR</button>
    @elseif($isCap)<button class="gxcl-join approvals" onclick="gxclRequests({{$id}},@js($name))">APROVAÇÕES</button>
    @endif
  </div>
</article>
@empty
<div class="gxcl-empty">Nenhum time ativo. <button class="gxcl-btn primary" onclick="gxclOpenCreate()">CRIAR PRIMEIRO TIME</button></div>
@endforelse
  </div>
</main>

<aside class="gxcl-side">
  <section class="gxcl-sidebox gxcl-ranking">
    <header><b>🏆 &nbsp; TOP TIMES</b><a href="{{route('ranking')}}">Ver ranking completo →</a></header>
    <div class="gxcl-ranktabs"><b>Open</b><span>Advanced</span><span>Pro</span></div>
    @foreach($teams->sortByDesc(fn($t)=>(int)data_get($t,'rank_points',0))->take(10)->values() as $ri=>$rt)
    <a href="{{route('teams.show',data_get($rt,'id'))}}"><i>{{$ri+1}}</i><strong>{{$initial(data_get($rt,'name','T'))}}</strong><span>{{data_get($rt,'name','Time')}}</span><b>{{number_format((int)data_get($rt,'rank_points',0),0,',','.')}}</b></a>
    @endforeach
  </section>
  <section class="gxcl-sidebox gxcl-statbox"><h3>ESTATÍSTICAS</h3><div><article><b>{{$teams->count()}}</b><small>Times cadastrados</small></article><article><b>{{$teams->filter(fn($t)=>(int)data_get($t,'member_count',collect(data_get($t,'members',[]))->count())<$clanLimit)->count()}}</b><small>Buscando jogadores</small></article><article><b>{{$teams->sum(fn($t)=>collect(data_get($t,'members',[]))->count())}}</b><small>Jogadores em times</small></article></div></section>
  <section class="gxcl-sidebox gxcl-find"><div>👥</div><h3>ENCONTRE SEU TIME</h3><p>Procure por times, veja vagas e faça parte da comunidade GIGAX!</p><button onclick="document.querySelector('[data-view=recruiting]').click()">VER VAGAS DISPONÍVEIS →</button></section>
</aside>
</div>
</div>

<div id="gxclCreate" class="gxcl-modal" hidden><div class="gxcl-back" data-close="create"></div><div class="gxcl-dialog">
<header><div><span class="gxcl-kicker">CREATE SQUAD</span><h3>Fundar novo clã</h3><p>Você será o capitão automaticamente.</p></div><button data-close="create">×</button></header>
<form method="POST" action="{{route('teams.create')}}">@csrf
<div class="gxcl-preview"><div id="gxclPreview">G</div><span><b>IDENTIDADE DO CLÃ</b><small>Compacto, competitivo e pronto para 5×5.</small></span></div>
<label><span>NOME</span><input id="gxclName" name="name" maxlength="50" required placeholder="Ex.: GIGAX Elite"></label>
<label><span>TAG</span><input name="tag" maxlength="10" placeholder="Ex.: GX"></label>
<label class="wide"><span>DESCRIÇÃO</span><textarea name="description" maxlength="500" rows="3" placeholder="Objetivo ou identidade do squad..."></textarea></label>
<div class="gxcl-rule">⚡ <span><b>ENTRADA CONTROLADA</b><small>Ninguém entra direto: o capitão precisa aceitar cada solicitação.</small></span></div>
<footer><button type="button" class="gxcl-btn" data-close="create">CANCELAR</button><button class="gxcl-btn primary">CRIAR CLÃ</button></footer>
</form></div></div>

<div id="gxclRequests" class="gxcl-modal" hidden><div class="gxcl-back" data-close="requests"></div><div class="gxcl-dialog requests">
<header><div><span class="gxcl-kicker">RECRUITMENT CONTROL</span><h3 id="gxclReqTitle">Solicitações</h3><p>Aprovação obrigatória do capitão.</p></div><button data-close="requests">×</button></header>
<div id="gxclReqList" class="gxcl-reqlist"><div class="gxcl-loading">CARREGANDO...</div></div></div></div>
<div id="gxclToast" class="gxcl-toast"></div>
@endsection


@push('styles')
<style>
.gxcl-page,.gxcl-page *{box-sizing:border-box}.gxcl-page{--g:#16ed82;--bg:#06131d;--panel:#081b28;--line:rgba(82,165,202,.22);--mut:#87a0b4;color:#f3f8fb;display:grid;gap:10px;width:100%;font-family:inherit}.gxcl-kicker{display:block;color:var(--g);font-size:11px;font-weight:1000;letter-spacing:.16em}.gxcl-topbar{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 2px}.gxcl-topbar h1{margin:2px 0 0;font-size:28px;line-height:1}.gxcl-topbar p{margin:6px 0 0;color:#91a9ba;font-size:12px}.gxcl-btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 15px;border:1px solid var(--line);border-radius:8px;background:#0b2231;color:#eef7fb;font-size:11px;font-weight:900;cursor:pointer;text-decoration:none}.gxcl-btn.primary,.gxcl-create{border-color:#12e97b;background:rgba(10,93,59,.18);color:var(--g)}
.gxcl-tabs{display:flex;gap:7px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,#081c29,#06141e)}.gxcl-tabs button{height:39px;padding:0 20px;border:1px solid rgba(77,137,170,.13);border-radius:8px;background:#0a2232;color:#f2f7fa;font-size:11px;font-weight:1000;cursor:pointer}.gxcl-tabs button.active{background:linear-gradient(135deg,#17ee84,#12d773);border-color:#2aff99;color:#04120b;box-shadow:0 0 18px rgba(22,237,130,.14)}
.gxcl-tools{display:grid;grid-template-columns:minmax(280px,1.5fr) .62fr .62fr .85fr auto;gap:8px;padding:8px;border:1px solid var(--line);border-radius:10px;background:#071924}.gxcl-search,.gxcl-select{min-height:51px;border:1px solid rgba(82,165,202,.18);border-radius:8px;background:#061722}.gxcl-search{display:flex;align-items:center;gap:8px;padding:0 13px}.gxcl-search span{font-size:20px;color:#7da2b7}.gxcl-search input{width:100%;border:0;outline:0;background:transparent;color:#eef7fb;font-size:12px}.gxcl-select{display:grid;align-content:center;padding:5px 10px}.gxcl-select small{color:#7fa1b5;font-size:9px}.gxcl-select select{border:0;outline:0;background:#061722;color:#fff;font-size:11px;font-weight:800}.gxcl-clear{border:0;background:transparent;color:#a9bdc9;font-size:11px;font-weight:800;cursor:pointer}
.gxcl-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:10px;align-items:start}.gxcl-main{min-width:0}.gxcl-resultbar{height:38px;display:flex;align-items:center;justify-content:space-between;color:#91a9ba;font-size:10px}.gxcl-resultbar>b{font-size:11px}.gxcl-resultbar strong{margin-left:6px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;color:#dbe8ef}.gxcl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.gxcl-card{position:relative;min-height:310px;padding:11px;border:1px solid rgba(58,151,187,.34);border-radius:10px;background:radial-gradient(circle at 0 0,rgba(16,238,129,.05),transparent 35%),linear-gradient(145deg,#091c29,#06141e);overflow:hidden;transition:.18s}.gxcl-card:hover{transform:translateY(-2px);border-color:rgba(22,237,130,.55);box-shadow:0 12px 32px rgba(0,0,0,.25)}.gxcl-cardhead{display:grid;grid-template-columns:auto 68px 1fr auto;gap:9px;align-items:center}.gxcl-rank{align-self:start;color:#ffd76a;font-size:12px;font-weight:1000}.gxcl-logo{width:68px;height:68px;display:grid;place-items:center;border:1px solid rgba(61,147,189,.28);border-radius:10px;background:linear-gradient(145deg,#173b62,#0d2340);font-size:27px;font-weight:1000;color:#fff}.gxcl-teamname strong,.gxcl-teamname b,.gxcl-teamname span{display:block}.gxcl-teamname strong{font-size:14px}.gxcl-teamname b{width:max-content;margin:4px 0;padding:2px 7px;border-radius:4px;background:#0b2c43;color:#dcebf3;font-size:9px}.gxcl-teamname span{font-size:10px;color:#a3b6c3}.gxcl-level{align-self:start;padding:6px 7px;border:1px solid #16d979;border-radius:7px;color:#9db4c3;text-align:center;font-size:8px}.gxcl-level b{font-size:10px}.gxcl-level.pro{border-color:#2389ff;color:#5ca9ff}.gxcl-level.adv{border-color:#e3b323;color:#ffd34e}.gxcl-level.open{border-color:#22dd75;color:#43ef91}.gxcl-desc{height:27px;margin:7px 0 6px;color:#8fa8b9;font-size:9px;line-height:1.4;overflow:hidden}.gxcl-tags{display:flex;gap:5px;align-items:center}.gxcl-tags span,.gxcl-tags b{padding:4px 9px;border-radius:999px;background:#0a2a3c;color:#e1edf3;font-size:8px}.gxcl-tags b{margin-left:auto;background:#14df79;color:#032012}.gxcl-rostertitle{display:flex;justify-content:space-between;margin:10px 0 5px;padding-top:7px;border-top:1px solid rgba(72,147,182,.14);font-size:9px}.gxcl-rostertitle span{color:#7e9aab}.gxcl-roster{display:grid;grid-template-columns:1fr 1fr;gap:4px}.gxcl-person{min-width:0;height:39px;display:flex;align-items:center;gap:7px;padding:4px 6px;border:1px solid rgba(68,141,176,.13);border-radius:6px;background:#071a27;color:#fff;text-decoration:none}.gxcl-person i{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(111,180,209,.3);border-radius:50%;background:#132d3e;font-style:normal;font-size:9px}.gxcl-person img{width:100%;height:100%;object-fit:cover}.gxcl-person span{min-width:0}.gxcl-person strong,.gxcl-person small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gxcl-person strong{font-size:9px}.gxcl-person strong em{color:var(--g);font-style:normal}.gxcl-person small{margin-top:2px;color:#25e884;font-size:8px}.gxcl-person.vacancy{opacity:.58}.gxcl-person.vacancy small{color:#7894a5}.gxcl-cardfoot{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:7px;border-top:1px solid rgba(72,147,182,.13)}.gxcl-profile{flex:1;color:#e6f2f7;text-decoration:none;font-size:10px;font-weight:900}.gxcl-profile:hover{color:var(--g)}.gxcl-score{color:#7897aa;font-size:9px}.gxcl-join{height:27px;padding:0 8px;border:1px solid #17df7c;border-radius:6px;background:#0b3025;color:#4ff09d;font-size:8px;font-weight:1000;cursor:pointer}.gxcl-join.approvals{border-color:#d8aa34;color:#ffd66e;background:#30270b}
.gxcl-side{display:grid;gap:10px}.gxcl-sidebox{border:1px solid rgba(61,151,188,.3);border-radius:10px;background:linear-gradient(180deg,#081b28,#06141e);overflow:hidden}.gxcl-ranking header{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid rgba(74,145,177,.14)}.gxcl-ranking header b{font-size:13px}.gxcl-ranking header a{color:var(--g);font-size:9px;text-decoration:none}.gxcl-ranktabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px}.gxcl-ranktabs>*{padding:7px;text-align:center;border-radius:6px;background:#092336;color:#b1c4cf;font-size:9px}.gxcl-ranktabs b{background:var(--g);color:#03150c}.gxcl-ranking>a{height:31px;display:grid;grid-template-columns:23px 25px 1fr auto;gap:6px;align-items:center;padding:0 10px;color:#fff;text-decoration:none;border-top:1px solid rgba(72,145,176,.09)}.gxcl-ranking>a i{width:20px;height:20px;display:grid;place-items:center;border-radius:6px;background:#163448;color:#e6f2f7;font-style:normal;font-size:9px}.gxcl-ranking>a:nth-of-type(1) i{background:#9b6816;color:#ffe58a}.gxcl-ranking>a>strong{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#142b3c;color:var(--g);font-size:9px}.gxcl-ranking>a span{font-size:10px;font-weight:800}.gxcl-ranking>a b{font-size:10px}.gxcl-statbox{padding:11px}.gxcl-statbox h3{margin:0 0 10px;font-size:11px}.gxcl-statbox>div{display:grid;grid-template-columns:repeat(3,1fr)}.gxcl-statbox article{padding:8px;border-left:1px solid rgba(76,146,176,.13)}.gxcl-statbox article:first-child{border-left:0}.gxcl-statbox b,.gxcl-statbox small{display:block}.gxcl-statbox b{font-size:19px}.gxcl-statbox small{margin-top:4px;color:#829dad;font-size:8px}.gxcl-find{padding:15px;text-align:center}.gxcl-find>div{font-size:32px}.gxcl-find h3{margin:5px;font-size:13px}.gxcl-find p{margin:7px auto 12px;max-width:260px;color:#91a8b7;font-size:10px;line-height:1.5}.gxcl-find button{width:100%;height:39px;border:0;border-radius:7px;background:linear-gradient(135deg,#16ee83,#12d873);color:#03150c;font-size:10px;font-weight:1000;cursor:pointer}.gxcl-empty{grid-column:1/-1;padding:50px;text-align:center;color:#8ca4b4}
.gxcl-modal[hidden]{display:none}.gxcl-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:15px}.gxcl-back{position:absolute;inset:0;background:rgba(0,5,9,.82);backdrop-filter:blur(8px)}.gxcl-dialog{position:relative;width:min(540px,96vw);max-height:90vh;overflow:auto;border:1px solid rgba(34,239,123,.25);border-radius:13px;background:linear-gradient(180deg,#0b1b28,#06111a);box-shadow:0 30px 90px rgba(0,0,0,.65)}.gxcl-dialog header{display:flex;justify-content:space-between;padding:13px 14px;border-bottom:1px solid var(--line)}.gxcl-dialog h3{margin:3px 0;font-size:16px}.gxcl-dialog p{margin:0;color:#71899b;font-size:10px}.gxcl-dialog header button{width:30px;height:30px;border:1px solid var(--line);border-radius:7px;background:#0d202d;color:#fff}.gxcl-dialog form{display:grid;grid-template-columns:1fr 140px;gap:8px;padding:13px}.gxcl-dialog label{display:grid;gap:4px}.gxcl-dialog label span{font-size:9px;color:#91a8b7}.gxcl-dialog input,.gxcl-dialog textarea{width:100%;border:1px solid var(--line);border-radius:7px;background:#06121c;color:#fff;padding:9px;outline:0}.gxcl-dialog .wide,.gxcl-preview,.gxcl-rule,.gxcl-dialog footer{grid-column:1/-1}.gxcl-preview,.gxcl-rule{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid rgba(34,239,123,.12);border-radius:8px;background:rgba(34,239,123,.03)}.gxcl-preview>div{width:40px;height:40px;display:grid;place-items:center;border-radius:9px;background:#205bc2;font-weight:1000}.gxcl-preview b,.gxcl-preview small,.gxcl-rule b,.gxcl-rule small{display:block}.gxcl-preview small,.gxcl-rule small{margin-top:2px;color:#829aab;font-size:9px}.gxcl-rule b{color:#ffd268;font-size:10px}.gxcl-dialog footer{display:flex;justify-content:flex-end;gap:6px}.gxcl-dialog.requests{width:min(640px,96vw)}.gxcl-reqlist{display:grid;gap:6px;padding:12px}.gxcl-req{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:9px}.gxcl-reqavatar{width:38px;height:38px;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:#173247}.gxcl-reqavatar img{width:100%;height:100%;object-fit:cover}.gxcl-req small{color:#829aaa;font-size:9px}.gxcl-reqactions{display:flex;gap:5px}.gxcl-loading{padding:30px;text-align:center;color:#829aaa}.gxcl-toast{position:fixed;right:18px;bottom:18px;z-index:11000;padding:10px 12px;border:1px solid rgba(34,239,123,.25);border-radius:9px;background:#0a1b27;color:#dff8e9;font-size:10px;opacity:0;transform:translateY(8px);transition:.18s;pointer-events:none}.gxcl-toast.show{opacity:1;transform:none}.gxcl-toast.bad{border-color:#ff4a6555;color:#ffb0bc}
@media(max-width:1500px){.gxcl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gxcl-layout{grid-template-columns:minmax(0,1fr) 300px}}@media(max-width:1100px){.gxcl-layout{grid-template-columns:1fr}.gxcl-side{grid-template-columns:1fr 1fr}.gxcl-ranking{grid-row:span 2}.gxcl-tools{grid-template-columns:1fr 1fr}.gxcl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.gxcl-grid,.gxcl-side,.gxcl-tools{grid-template-columns:1fr}.gxcl-tabs{overflow:auto}.gxcl-tabs button{white-space:nowrap}.gxcl-cardhead{grid-template-columns:auto 58px 1fr}.gxcl-level{grid-column:3}.gxcl-roster{grid-template-columns:1fr}}

/* V3 - LOGO REAL: mesma regra da team-show.blade.php */
.gxcl-logo{overflow:hidden!important;padding:0!important}
.gxcl-logo>img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:inherit!important}
.gxcl-logo-fallback{width:100%;height:100%;place-items:center;font:1000 24px/1 inherit;color:#fff}
</style>
@endpush

@push('scripts')
<script>
(()=>{const csrf=document.querySelector('meta[name=csrf-token]')?.content||'{{csrf_token()}}',toast=document.getElementById('gxclToast');let teamId=0;
const msg=(t,b=false)=>{toast.textContent=t;toast.className='gxcl-toast show'+(b?' bad':'');clearTimeout(msg.x);msg.x=setTimeout(()=>toast.className='gxcl-toast',3200)};
const api=async(url,opt={})=>{const h={Accept:'application/json','X-Requested-With':'XMLHttpRequest',...(opt.headers||{})};if(!['GET','HEAD'].includes((opt.method||'GET').toUpperCase())){h['X-CSRF-TOKEN']=csrf;h['Content-Type']='application/json'}const r=await fetch(url,{credentials:'same-origin',...opt,headers:h});const j=await r.json().catch(()=>({}));if(!r.ok||j.success===false)throw new Error(j.message||`Erro ${r.status}`);return j};
window.gxclOpenCreate=()=>{document.getElementById('gxclCreate').hidden=false;document.body.style.overflow='hidden'};
document.querySelectorAll('[data-close=create]').forEach(x=>x.onclick=()=>{document.getElementById('gxclCreate').hidden=true;document.body.style.overflow=''});
document.querySelectorAll('[data-close=requests]').forEach(x=>x.onclick=()=>{document.getElementById('gxclRequests').hidden=true;document.body.style.overflow=''});
document.getElementById('gxclName')?.addEventListener('input',e=>document.getElementById('gxclPreview').textContent=(e.target.value.trim()[0]||'G').toUpperCase());

let filter='all';const search=document.getElementById('gxclSearch'),rows=[...document.querySelectorAll('.gxcl-card')],count=document.getElementById('gxclCount');function apply(){const q=(search?.value||'').toLowerCase();let n=0;rows.forEach(r=>{const stateOk=filter==='all'||(filter==='recruiting'&&r.dataset.state==='recruiting')||(filter==='mine'&&r.dataset.mine==='1')||filter==='invites';const ok=(!q||(r.dataset.search||'').toLowerCase().includes(q))&&stateOk;r.style.display=ok?'':'none';if(ok)n++});count.textContent=`${n} TIME${n===1?'':'S'} ENCONTRADO${n===1?'':'S'}`}search?.addEventListener('input',apply);document.querySelectorAll('.gxcl-tabs [data-view]').forEach(b=>b.onclick=()=>{document.querySelectorAll('.gxcl-tabs [data-view]').forEach(x=>x.classList.remove('active'));b.classList.add('active');filter=b.dataset.view;apply()});
document.querySelectorAll('.gxcl-join:not(.approvals)[data-id]').forEach(b=>b.onclick=async()=>{const old=b.textContent;b.disabled=true;b.textContent='ENVIANDO...';try{const j=await api(`/teams/${b.dataset.id}/request-join`,{method:'POST',body:'{}'});b.textContent='AGUARDANDO APROVAÇÃO';b.classList.remove('primary');b.classList.add('warn');msg(j.message)}catch(e){b.disabled=false;b.textContent=old;msg(e.message,true)}});
window.gxclRequests=async(id,name)=>{teamId=id;const modal=document.getElementById('gxclRequests'),list=document.getElementById('gxclReqList');modal.hidden=false;document.body.style.overflow='hidden';document.getElementById('gxclReqTitle').textContent=`Solicitações · ${name}`;list.innerHTML='<div class="gxcl-loading">CARREGANDO...</div>';try{const j=await api(`/teams/${id}/requests`),rs=j.requests||[];if(!rs.length){list.innerHTML='<div class="gxcl-loading">Nenhuma solicitação pendente.</div>';return}list.innerHTML=rs.map(r=>`<div class="gxcl-req" data-r="${r.id}"><div class="gxcl-reqavatar">${r.avatar_url?`<img src="${r.avatar_url}">`:(r.nickname||'?')[0]}</div><div><strong>${r.nickname}</strong><small>Nível ${r.skill_level||1} · ${Number(r.total_points||0).toLocaleString('pt-BR')} pts · K/D ${Number(r.kd_ratio||0).toFixed(2)}</small></div><div class="gxcl-reqactions"><button class="gxcl-btn" data-a="reject">RECUSAR</button><button class="gxcl-btn primary" data-a="approve">ACEITAR</button></div></div>`).join('');list.querySelectorAll('[data-a]').forEach(b=>b.onclick=async()=>{const item=b.closest('[data-r]');item.style.opacity=.5;item.style.pointerEvents='none';try{const j=await api(`/teams/${teamId}/requests/handle`,{method:'POST',body:JSON.stringify({request_id:Number(item.dataset.r),action:b.dataset.a})});msg(j.message);item.remove();if(b.dataset.a==='approve')setTimeout(()=>location.reload(),700)}catch(e){item.style.opacity=1;item.style.pointerEvents='';msg(e.message,true)}})}catch(e){list.innerHTML=`<div class="gxcl-loading">${e.message}</div>`}};
document.addEventListener('keydown',e=>{if(e.key==='Escape'){document.querySelectorAll('.gxcl-modal').forEach(m=>m.hidden=true);document.body.style.overflow=''}});
})();
</script>
@endpush