@if(!empty($groupData['standings']))
    @foreach($groupData['standings'] as $groupName => $rows)
    <div class="pes-card mb-4">

        <!-- Card header -->
        <div class="pes-card-header">
            <div class="pes-card-header-left">
                <div class="pes-card-icon" style="background:#f3e8ff;color:#7c3aed;font-weight:800;font-size:15px">
                    {{ $groupName }}
                </div>
                <span class="pes-card-title">Grup {{ $groupName }}</span>
            </div>
        </div>

        <!-- Standings table -->
        <div style="overflow-x:auto">
            <table class="pes-table" style="min-width:360px">
                <thead>
                    <tr>
                        <th style="width:32px">#</th>
                        <th>Pemain</th>
                        <th style="text-align:center;width:36px">M</th>
                        <th style="text-align:center;width:36px">W</th>
                        <th style="text-align:center;width:36px">D</th>
                        <th style="text-align:center;width:36px">L</th>
                        <th class="d-none d-sm-table-cell" style="text-align:center;width:36px">GF</th>
                        <th class="d-none d-sm-table-cell" style="text-align:center;width:36px">GA</th>
                        <th style="text-align:center;width:44px;white-space:nowrap">Pts</th>
                    </tr>
                </thead>
                <tbody class="live-standing" data-group="{{ $groupName }}">
                    @foreach($rows as $uid => $stat)
                    @php
                        $adv    = $loop->index < ($tournament->groups_per_advance ?? 2);
                        $player = $groupData['players'][$uid] ?? null;
                    @endphp
                    <tr style="{{ $adv ? 'background:#f0fdf4' : '' }}">
                        <td style="text-align:center;font-weight:700;color:#94a3b8">{{ $loop->iteration }}</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <img src="{{ $player?->avatar ?? 'https://ui-avatars.com/api/?name='.urlencode($player?->username??'?').'&background=1d4ed8&color=fff' }}"
                                     style="width:28px;height:28px;border-radius:8px;object-fit:cover" alt="">
                                <span style="font-size:13px;font-weight:{{ $adv?700:500 }}">{{ $player?->username ?? '?' }}</span>
                                @if($adv)
                                <span style="font-size:10px;color:#16a34a;font-weight:700">↑ LOLOS</span>
                                @endif
                            </div>
                        </td>
                        <td style="text-align:center;font-size:13px">{{ $stat['played'] }}</td>
                        <td style="text-align:center;font-size:13px;color:#16a34a;font-weight:600">{{ $stat['w'] }}</td>
                        <td style="text-align:center;font-size:13px;color:#ca8a04;font-weight:600">{{ $stat['d'] ?? 0 }}</td>
                        <td style="text-align:center;font-size:13px;color:#dc2626;font-weight:600">{{ $stat['l'] }}</td>
                        <td class="d-none d-sm-table-cell" style="text-align:center;font-size:13px">{{ $stat['gf'] }}</td>
                        <td class="d-none d-sm-table-cell" style="text-align:center;font-size:13px">{{ $stat['ga'] }}</td>
                        <td style="text-align:center;font-size:14px;font-weight:800;color:#1d4ed8">{{ $stat['pts'] }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Match results -->
        @php $gMatches = $groupData['matches']->where('group_name', $groupName); @endphp
        @if($gMatches->count())
        <div style="border-top:1px solid #f1f5f9">
            <div style="padding:10px 16px 4px;font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em">
                Pertandingan
            </div>
            @foreach($gMatches as $gm)
            @php
                $pubGmLegs = $gm->relationLoaded('seriesLegs') ? $gm->seriesLegs : collect([$gm]);
                $pubGmDone = $pubGmLegs->where('status','completed');
                $pubBo     = isset($tournament) ? $tournament->getBoForPhase('group') : 1;
                $pubBan    = isset($tournament) ? $tournament->getBanCountForPhase('group') : 0;
                $gmDone    = $gm->status === 'completed' || ($gm->winner_id !== null);

                // Build modal data for completed matches
                $gmBanRec  = $gm->relationLoaded('seriesBanRecords') ? $gm->seriesBanRecords : collect();
                $gmLwb     = $pubGmLegs->map(fn($l) => [
                    'leg'      => $l->leg_number,
                    'score1'   => $l->score1 ?? 0,
                    'score2'   => $l->score2 ?? 0,
                    'winner_id'=> $l->winner_id,
                    'is_draw'  => $l->is_draw,
                    'is_gg'    => $l->is_golden_goal,
                    'club1'    => $l->club1 ? ['name'=>$l->club1->name,'logo'=>$l->club1->logo_url,'overall'=>$l->club1->overall] : null,
                    'club2'    => $l->club2 ? ['name'=>$l->club2->name,'logo'=>$l->club2->logo_url,'overall'=>$l->club2->overall] : null,
                    'bans_p1'  => $gmBanRec->where('player_id',$gm->player1_id)
                                    ->filter(fn($b)=> $b->leg_number===$l->leg_number || $b->leg_number===null)
                                    ->map(fn($b)=>['name'=>$b->club?->name??'?','logo'=>$b->club?->logo_url??''])->values()->toArray(),
                    'bans_p2'  => $gmBanRec->where('player_id',$gm->player2_id)
                                    ->filter(fn($b)=> $b->leg_number===$l->leg_number || $b->leg_number===null)
                                    ->map(fn($b)=>['name'=>$b->club?->name??'?','logo'=>$b->club?->logo_url??''])->values()->toArray(),
                ])->values()->toArray();
                $gmBp1 = $gmBanRec->where('player_id',$gm->player1_id)->map(fn($b)=>['name'=>$b->club?->name??'?','logo'=>$b->club?->logo_url??'','leg'=>$b->leg_number])->values()->toArray();
                $gmBp2 = $gmBanRec->where('player_id',$gm->player2_id)->map(fn($b)=>['name'=>$b->club?->name??'?','logo'=>$b->club?->logo_url??'','leg'=>$b->leg_number])->values()->toArray();

                $pgAgg1 = $pubGmDone->sum('score1');
                $pgAgg2 = $pubGmDone->sum('score2');
                $pgW1   = $pubGmDone->filter(fn($l)=>$l->winner_id===$gm->player1_id)->count();
                $pgW2   = $pubGmDone->filter(fn($l)=>$l->winner_id===$gm->player2_id)->count();
            @endphp
            @if($gmDone)
            @php
                $gmModalData = json_encode([
                    'id'       => $gm->id,
                    'round'    => 'Grup '.$groupName,
                    'p1'       => $gm->player1?->username ?? 'TBD',
                    'p2'       => $gm->player2?->username ?? 'TBD',
                    'p1avatar' => $gm->player1?->avatar ?? '',
                    'p2avatar' => $gm->player2?->avatar ?? '',
                    'winner'   => $gm->winner?->username ?? ($gm->is_draw ? 'Seri' : ''),
                    'winner_id'=> $gm->winner_id,
                    'p1_id'    => $gm->player1_id,
                    'p2_id'    => $gm->player2_id,
                    'bans_p1'  => $gmBp1,
                    'bans_p2'  => $gmBp2,
                    'legs'     => $gmLwb,
                ]);
            @endphp
            <script>window._gmd = window._gmd||{};window._gmd[{{ $gm->id }}]={!! $gmModalData !!};</script>
            @endif
            <div class="d-flex align-items-center gap-3 px-3 py-2"
                 style="border-bottom:1px solid #f8fafc;{{ $gmDone ? 'cursor:pointer' : '' }}"
                 @if($gmDone) onclick="var d=window._gmd&&window._gmd[{{ $gm->id }}];if(d&&typeof window.showGroupMatchDetail==='function')window.showGroupMatchDetail(d);" @endif>
                <!-- P1 right-aligned -->
                <div class="d-flex align-items-center gap-2" style="flex:1;min-width:0;justify-content:flex-end">
                    <span style="font-size:12px;font-weight:600;color:#0f172a;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                        {{ $gm->player1?->username ?? 'TBD' }}
                    </span>
                    <img src="{{ $gm->player1?->avatar ?? 'https://ui-avatars.com/api/?name='.urlencode($gm->player1?->username??'?').'&background=1d4ed8&color=fff' }}"
                         style="width:24px;height:24px;border-radius:6px;object-fit:cover;flex-shrink:0" alt="">
                </div>
                <!-- Score -->
                <div id="gmatch-{{ $gm->id }}" style="min-width:100px;text-align:center;flex-shrink:0">
                    @if($gm->status === 'completed')
                        {{-- Badge BO / Ban — selalu tampil sesuai aturan tournament --}}
                        <div style="display:flex;align-items:center;justify-content:center;gap:3px;margin-bottom:3px;flex-wrap:wrap">
                            @if($pubBo > 1)
                            <span style="font-size:9px;font-weight:700;color:#7c3aed;background:#f3e8ff;padding:1px 5px;border-radius:20px;white-space:nowrap">BO{{ $pubBo }}</span>
                            @endif
                            @if($pubBan > 0)
                            <span style="font-size:9px;font-weight:700;color:#dc2626;background:#fff5f5;padding:1px 5px;border-radius:20px;white-space:nowrap">Ban {{ $pubBan }}</span>
                            @endif
                        </div>
                        {{-- Score / Aggregate --}}
                        @if($pubGmLegs->count() > 1)
                        @php $doneLegs = $pubGmLegs->where('status','completed'); @endphp
                        <div style="font-size:14px;font-weight:900;color:#0f172a;font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-0.5px">{{ $pgW1 }} – {{ $pgW2 }}</div>
                        <div style="font-size:9px;color:#64748b;margin-top:1px;font-weight:600">Leg Wins · Agg: {{ $pgAgg1 }}–{{ $pgAgg2 }}</div>
                        @else
                        <div style="font-size:14px;font-weight:800;color:#0f172a">{{ $gm->score1 }} – {{ $gm->score2 }}</div>
                        @if($gm->is_draw)
                        <div style="font-size:10px;font-weight:700;color:#ca8a04">Seri</div>
                        @else
                        <div style="font-size:10px;color:#16a34a;font-weight:700">✓</div>
                        @endif
                        @endif
                    @else
                        {{-- Match belum selesai --}}
                        <div style="display:flex;align-items:center;justify-content:center;gap:3px;margin-bottom:2px;flex-wrap:wrap">
                            @if($pubBo > 1)
                            <span style="font-size:9px;font-weight:700;color:#7c3aed;background:#f3e8ff;padding:1px 5px;border-radius:20px;white-space:nowrap">BO{{ $pubBo }}</span>
                            @endif
                            @if($pubBan > 0)
                            <span style="font-size:9px;font-weight:700;color:#dc2626;background:#fff5f5;padding:1px 5px;border-radius:20px;white-space:nowrap">Ban {{ $pubBan }}</span>
                            @endif
                        </div>
                        @if($pubBo > 1 && $pubGmDone->count() > 0)
                        <div style="font-size:10px;color:#7c3aed;font-weight:700">Leg {{ $pubGmDone->count()+1 }}/{{ $pubBo }}</div>
                        @else
                        <span style="font-size:11px;color:#94a3b8;font-weight:600">vs</span>
                        @endif
                    @endif
                </div>
                <!-- P2 left-aligned -->
                <div class="d-flex align-items-center gap-2" style="flex:1;min-width:0">
                    <img src="{{ $gm->player2?->avatar ?? 'https://ui-avatars.com/api/?name='.urlencode($gm->player2?->username??'?').'&background=7c3aed&color=fff' }}"
                         style="width:24px;height:24px;border-radius:6px;object-fit:cover;flex-shrink:0" alt="">
                    <span style="font-size:12px;font-weight:600;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                        {{ $gm->player2?->username ?? 'TBD' }}
                    </span>
                </div>
                @if($gmDone)
                <span style="font-size:10px;color:#94a3b8;font-style:italic;flex-shrink:0">↗ detail</span>
                @endif
            </div>
            @endforeach
        </div>
        @endif

        <!-- Tiebreaker / Golden Goal matches -->
        @php
            $tbMatches = isset($groupData['tiebreakers'])
                ? $groupData['tiebreakers']->where('group_name', $groupName)
                : collect();
        @endphp
        @if($tbMatches->count())
        <div style="border-top:2px solid #fef08a;background:#fefce8">
            <div style="padding:8px 16px;font-size:11px;font-weight:700;color:#854d0e;display:flex;align-items:center;gap:6px">
                <i class="ti ti-bolt" style="color:#ca8a04"></i>
                GOLDEN GOAL — Tiebreaker Grup {{ $groupName }}
                <span style="font-size:10px;font-weight:500;color:#92400e">· Seri tidak diizinkan</span>
            </div>
            @foreach($tbMatches as $tb)
            @php
                $tbBanRec = $tb->relationLoaded('seriesBanRecords') ? $tb->seriesBanRecords : collect();
                $tbDone   = $tb->status === 'completed';
                $tbLwb    = collect([$tb])->map(fn($l) => [
                    'leg'=>$l->leg_number,'score1'=>$l->score1??0,'score2'=>$l->score2??0,
                    'winner_id'=>$l->winner_id,'is_draw'=>$l->is_draw,'is_gg'=>$l->is_golden_goal,
                    'club1'=>null,'club2'=>null,'bans_p1'=>[],'bans_p2'=>[],
                ])->values()->toArray();
            @endphp
            @php
                $tbModalData = json_encode([
                    'id'       => $tb->id,
                    'round'    => 'GG Tiebreaker Grup '.$groupName,
                    'p1'       => $tb->player1?->username ?? 'TBD',
                    'p2'       => $tb->player2?->username ?? 'TBD',
                    'p1avatar' => $tb->player1?->avatar ?? '',
                    'p2avatar' => $tb->player2?->avatar ?? '',
                    'winner'   => $tb->winner?->username ?? '',
                    'winner_id'=> $tb->winner_id,
                    'p1_id'    => $tb->player1_id,
                    'p2_id'    => $tb->player2_id,
                    'bans_p1'  => [],
                    'bans_p2'  => [],
                    'legs'     => $tbLwb,
                ]);
            @endphp
            @if($tbDone)<script>window._gmd=window._gmd||{};window._gmd[{{ $tb->id }}]={!! $tbModalData !!};</script>@endif
            <div class="d-flex align-items-center gap-3 px-3 py-2"
                 style="border-top:1px solid #fef08a;{{ $tbDone?'cursor:pointer':'' }}"
                 @if($tbDone) onclick="var d=window._gmd&&window._gmd[{{ $tb->id }}];if(d&&typeof window.showGroupMatchDetail==='function')window.showGroupMatchDetail(d);" @endif>
                <div class="d-flex align-items-center gap-2" style="flex:1;min-width:0;justify-content:flex-end">
                    <span style="font-size:12px;font-weight:600;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right">
                        {{ $tb->player1?->username ?? 'TBD' }}
                    </span>
                    <img src="{{ $tb->player1?->avatar ?? 'https://ui-avatars.com/api/?name='.urlencode($tb->player1?->username??'?').'&background=ca8a04&color=fff' }}"
                         style="width:24px;height:24px;border-radius:6px;object-fit:cover;flex-shrink:0" alt="">
                </div>
                <div style="min-width:80px;text-align:center;flex-shrink:0">
                    @if($tb->status === 'completed')
                        <div style="font-size:14px;font-weight:800;color:#0f172a">{{ $tb->score1 }} – {{ $tb->score2 }}</div>
                        <div style="font-size:10px;font-weight:700;color:#16a34a">🏆 {{ $tb->winner?->username ?? '?' }}</div>
                    @else
                        <span style="font-size:11px;font-weight:700;color:#ca8a04;background:#fef9c3;padding:2px 8px;border-radius:20px">⚡ GG</span>
                    @endif
                </div>
                <div class="d-flex align-items-center gap-2" style="flex:1;min-width:0">
                    <img src="{{ $tb->player2?->avatar ?? 'https://ui-avatars.com/api/?name='.urlencode($tb->player2?->username??'?').'&background=7c3aed&color=fff' }}"
                         style="width:24px;height:24px;border-radius:6px;object-fit:cover;flex-shrink:0" alt="">
                    <span style="font-size:12px;font-weight:600;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                        {{ $tb->player2?->username ?? 'TBD' }}
                    </span>
                </div>
            </div>
            @endforeach
        </div>
        @endif

    </div>{{-- end .pes-card --}}
    @endforeach

@else
    <div class="pes-card p-5 text-center">
        <div style="font-size:36px;margin-bottom:10px">⏳</div>
        <div style="font-size:14px;font-weight:700;color:#0f172a;margin-bottom:4px">Fase grup belum dimulai</div>
        <div style="font-size:13px;color:#64748b">Tunggu admin untuk memulai turnamen.</div>
    </div>
@endif

{{-- ── Match Detail Modal (rendered for group stage, deduped with knockout) ── --}}


{{-- ── Group Stage Match Detail Modal & JS ── --}}
@push('scripts')
<script>
(function() {
    /* Inject modal HTML for group stage matches */
    if (!document.getElementById('group-match-modal')) {
        var el = document.createElement('div');
        el.id = 'group-match-modal';
        el.style.cssText = 'display:none;position:fixed;inset:0;z-index:9990;background:rgba(15,23,42,.55);backdrop-filter:blur(3px)';
        el.onclick = function(e){ if(e.target===el) window.closeGroupModal(); };
        el.innerHTML = '<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(92vw,520px);background:#fff;border-radius:20px;box-shadow:0 24px 64px rgba(15,23,42,.2);overflow:hidden;max-height:90vh;display:flex;flex-direction:column">'
        +'<div style="padding:16px 20px;background:linear-gradient(135deg,#0f172a,#1e3a5f);display:flex;align-items:center;justify-content:space-between;flex-shrink:0">'
        +'<div><div id="gm-modal-round" style="font-size:11px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.07em"></div>'
        +'<div style="font-size:15px;font-weight:800;color:#fff;margin-top:2px">Detail Pertandingan</div></div>'
        +'<button onclick="window.closeGroupModal()" style="background:rgba(255,255,255,.1);border:none;border-radius:10px;width:32px;height:32px;cursor:pointer;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .15s" onmouseover="this.style.background=\'rgba(255,255,255,.2)\'" onmouseout="this.style.background=\'rgba(255,255,255,.1)\'">✕</button></div>'
        +'<div style="overflow-y:auto;flex:1">'
        +'<div style="padding:20px;border-bottom:1px solid #f1f5f9"><div style="display:flex;align-items:center;justify-content:center;gap:12px">'
        +'<div style="flex:1;text-align:center"><img id="gm-modal-p1-avatar" src="" style="width:52px;height:52px;border-radius:14px;object-fit:cover;margin-bottom:8px;border:3px solid #e2e8f0"><div id="gm-modal-p1-name" style="font-size:13px;font-weight:700;color:#0f172a"></div><div id="gm-modal-p1-badge" style="margin-top:4px;font-size:11px"></div></div>'
        +'<div style="flex-shrink:0;text-align:center"><div id="gm-modal-score" style="font-size:28px;font-weight:900;color:#0f172a;font-family:\'Plus Jakarta Sans\',sans-serif;letter-spacing:-1px;line-height:1"></div><div id="gm-modal-score-sub" style="font-size:10px;color:#94a3b8;margin-top:4px;font-weight:600"></div></div>'
        +'<div style="flex:1;text-align:center"><img id="gm-modal-p2-avatar" src="" style="width:52px;height:52px;border-radius:14px;object-fit:cover;margin-bottom:8px;border:3px solid #e2e8f0"><div id="gm-modal-p2-name" style="font-size:13px;font-weight:700;color:#0f172a"></div><div id="gm-modal-p2-badge" style="margin-top:4px;font-size:11px"></div></div>'
        +'</div></div>'
        +'<div id="gm-modal-bans" style="padding:16px 20px;border-bottom:1px solid #f1f5f9;display:none;background:#fffbfb">'
        +'<div style="font-size:11px;font-weight:700;color:#dc2626;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;display:flex;align-items:center;gap:4px"><i class="ti ti-ban" style="font-size:14px"></i> Klub yang Di-ban</div>'
        +'<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">'
        +'<div><div id="gm-modal-ban-p1-label" style="font-size:10px;font-weight:700;color:#1d4ed8;margin-bottom:8px;text-transform:uppercase"></div><div id="gm-modal-bans-p1" style="display:flex;flex-direction:column;gap:6px"></div></div>'
        +'<div><div id="gm-modal-ban-p2-label" style="font-size:10px;font-weight:700;color:#7c3aed;margin-bottom:8px;text-transform:uppercase"></div><div id="gm-modal-bans-p2" style="display:flex;flex-direction:column;gap:6px"></div></div>'
        +'</div></div>'
        +'<div id="gm-modal-legs" style="padding:16px 20px;border-bottom:1px solid #f1f5f9;display:none">'
        +'<div style="font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;display:flex;align-items:center;gap:4px"><i class="ti ti-list-details" style="font-size:14px"></i> Rincian Per Leg</div>'
        +'<div id="gm-modal-legs-list" style="display:flex;flex-direction:column;gap:10px"></div></div>'
        +'</div>'
        +'<div id="gm-modal-winner" style="padding:14px 20px;background:#f0fdf4;display:flex;align-items:center;gap:10px;flex-shrink:0"><span style="font-size:24px">🏆</span>'
        +'<div><div style="font-size:11px;font-weight:700;color:#15803d;text-transform:uppercase;letter-spacing:.06em">Pemenang</div>'
        +'<div id="gm-modal-winner-name" style="font-size:15px;font-weight:800;color:#0f172a;margin-top:1px"></div></div></div>'
        +'</div>';
        document.body.appendChild(el);
    }

    window.showGroupMatchDetail = function(data) {
        var p1n = data.p1||'TBD', p2n = data.p2||'TBD';
        var fb1 = 'https://ui-avatars.com/api/?name='+encodeURIComponent(p1n)+'&background=1d4ed8&color=fff&size=80';
        var fb2 = 'https://ui-avatars.com/api/?name='+encodeURIComponent(p2n)+'&background=7c3aed&color=fff&size=80';
        document.getElementById('gm-modal-round').textContent = data.round||'';
        document.getElementById('gm-modal-p1-avatar').src = data.p1avatar||fb1;
        document.getElementById('gm-modal-p2-avatar').src = data.p2avatar||fb2;
        document.getElementById('gm-modal-p1-name').textContent = p1n;
        document.getElementById('gm-modal-p2-name').textContent = p2n;
        document.getElementById('gm-modal-winner-name').textContent = data.winner||'—';
        var p1W = data.winner_id && data.winner_id===data.p1_id;
        var p2W = data.winner_id && data.winner_id===data.p2_id;
        var isDraw = !data.winner_id && (data.legs||[]).some(function(l){return l.is_draw;});
        var badge = function(active){ return active ? '<span style="background:#f0fdf4;color:#15803d;padding:2px 8px;border-radius:20px;font-weight:700;font-size:11px">Menang 🏆</span>' : (isDraw?'<span style="background:#fef9c3;color:#854d0e;padding:2px 8px;border-radius:20px;font-weight:700;font-size:11px">Seri</span>':''); };
        document.getElementById('gm-modal-p1-badge').innerHTML = badge(p1W);
        document.getElementById('gm-modal-p2-badge').innerHTML = badge(p2W);
        document.getElementById('gm-modal-p1-avatar').style.borderColor = p1W?'#16a34a':'#e2e8f0';
        document.getElementById('gm-modal-p2-avatar').style.borderColor = p2W?'#16a34a':'#e2e8f0';
        document.getElementById('gm-modal-winner').style.background = isDraw?'#fefce8':'#f0fdf4';

        var bansP1=data.bans_p1||[], bansP2=data.bans_p2||[];
        var banSec = document.getElementById('gm-modal-bans');
        if (bansP1.length||bansP2.length) {
            banSec.style.display = '';
            document.getElementById('gm-modal-ban-p1-label').textContent = p1n+' Ban:';
            document.getElementById('gm-modal-ban-p2-label').textContent = p2n+' Ban:';
            function banHtml(list) {
                if(!list.length) return '<div style="font-size:11px;color:#94a3b8;font-style:italic">Tidak ada ban</div>';
                return list.map(function(b) {
                    var logo=b.logo?'<img src="'+b.logo+'" style="width:20px;height:20px;object-fit:contain;border-radius:4px;flex-shrink:0;background:#fff" onerror="this.style.display=\'none\'">':'';
                    var legBadge = b.leg ? '<span style="font-size:9px;color:#7c3aed;font-weight:700;margin-left:3px;background:#faf5ff;padding:1px 4px;border-radius:3px">L'+b.leg+'</span>' : '';
                    return '<div style="display:flex;align-items:center;gap:6px;padding:6px 10px;background:#fff5f5;border:1px solid #fecaca;border-radius:8px">'+logo+'<span style="font-size:12px;font-weight:600;color:#dc2626;flex:1">🚫 '+b.name+'</span>'+legBadge+'</div>';
                }).join('');
            }
            document.getElementById('gm-modal-bans-p1').innerHTML = banHtml(bansP1);
            document.getElementById('gm-modal-bans-p2').innerHTML = banHtml(bansP2);
        } else { banSec.style.display = 'none'; }

        var legs = data.legs||[];
        function clubChip(club,side) {
            if(!club) return '<span style="font-size:10px;color:#94a3b8;font-style:italic">—</span>';
            var logo=club.logo?'<img src="'+club.logo+'" style="width:18px;height:18px;object-fit:contain;border-radius:4px;flex-shrink:0;background:#fff" onerror="this.style.display=\'none\'">':'';
            var bg=side==='p1'?'#eff6ff':'#faf5ff',cl=side==='p1'?'#1d4ed8':'#7c3aed',br=side==='p1'?'#bfdbfe':'#ddd6fe';
            var ovr=club.overall?'<span style="font-size:9px;color:#94a3b8;margin-left:2px">('+club.overall+')</span>':'';
            return '<span style="display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:'+bg+';border:1px solid '+br+';border-radius:8px;font-size:11px;font-weight:600;color:'+cl+'">'+logo+'<span>'+club.name+ovr+'</span></span>';
        }
        function legBanRow(legBansP1, legBansP2, p1n, p2n) {
            if (!(legBansP1||[]).length && !(legBansP2||[]).length) return '';
            function miniChip(list, color) {
                return (list||[]).map(function(b){
                    var logo=b.logo?'<img src="'+b.logo+'" style="width:14px;height:14px;object-fit:contain;border-radius:3px;background:#fff" onerror="this.style.display=\'none\'">':'';
                    return '<span style="display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:600;color:'+color+';background:#fff;padding:2px 5px;border-radius:4px;border:1px solid #fee2e2">'+logo+' 🚫 '+b.name+'</span>';
                }).join(' ');
            }
            return '<div style="padding:6px 10px;background:#fff8f8;border-top:1px solid #fee2e2;display:flex;gap:8px;flex-wrap:wrap;font-size:10px">'
                + (legBansP1&&legBansP1.length ? '<div style="display:flex;align-items:center;gap:3px"><span style="font-weight:700;color:#1d4ed8">'+p1n+':</span>'+miniChip(legBansP1,'#dc2626')+'</div>' : '')
                + (legBansP2&&legBansP2.length ? '<div style="display:flex;align-items:center;gap:3px"><span style="font-weight:700;color:#7c3aed">'+p2n+':</span>'+miniChip(legBansP2,'#dc2626')+'</div>' : '')
                + '</div>';
        }
        if (legs.length <= 1) {
            var leg = legs[0]||{};
            document.getElementById('gm-modal-score').textContent = (leg.score1??0)+' – '+(leg.score2??0);
            document.getElementById('gm-modal-score-sub').textContent = leg.is_draw ? 'Seri · 1 poin tiap pemain' : '';
            document.getElementById('gm-modal-legs').style.display = 'none';
            if (leg.club1||leg.club2) {
                document.getElementById('gm-modal-p1-badge').innerHTML += '<div style="margin-top:6px">'+clubChip(leg.club1,'p1')+'</div>';
                document.getElementById('gm-modal-p2-badge').innerHTML += '<div style="margin-top:6px">'+clubChip(leg.club2,'p2')+'</div>';
            }
        } else {
            var tS1=0,tS2=0,tW1=0,tW2=0;
            legs.forEach(function(l){ tS1+=(l.score1||0); tS2+=(l.score2||0); if(l.winner_id===data.p1_id)tW1++; if(l.winner_id===data.p2_id)tW2++; });
            document.getElementById('gm-modal-score').textContent = tW1+' – '+tW2;
            document.getElementById('gm-modal-score-sub').textContent = 'Leg Wins · Agg Gol: '+tS1+'–'+tS2;
            var html = '';
            legs.forEach(function(leg){
                var w1=leg.winner_id===data.p1_id, w2=leg.winner_id===data.p2_id, isGG=leg.is_gg, isDraw=leg.is_draw;
                var label=isGG?'⚡ Golden Goal':'Leg '+leg.leg, bg=isGG?'#fef9c3':'#f8fafc';
                var res=isDraw?'<span style="color:#ca8a04;font-size:10px;font-weight:700;background:#fef9c3;padding:2px 6px;border-radius:4px">Seri</span>':(w1?'<span style="color:#16a34a;font-size:10px;font-weight:700;background:#f0fdf4;padding:2px 6px;border-radius:4px">'+p1n+' ✓</span>':'<span style="color:#16a34a;font-size:10px;font-weight:700;background:#f0fdf4;padding:2px 6px;border-radius:4px">'+p2n+' ✓</span>');
                html += '<div style="background:'+bg+';border:1px solid #e2e8f0;border-radius:10px;overflow:hidden">'
                      + '<div style="display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #f1f5f9"><span style="font-size:11px;font-weight:700;color:#64748b;min-width:48px">'+label+'</span><span style="font-size:16px;font-weight:900;color:#0f172a;flex:1;text-align:center">'+(leg.score1||0)+' – '+(leg.score2||0)+'</span>'+res+'</div>';
                if(leg.club1||leg.club2){ html += '<div style="display:flex;align-items:center;gap:6px;padding:8px 12px;background:#fefefe;border-bottom:1px solid #f1f5f9"><div style="flex:1">'+clubChip(leg.club1,'p1')+'</div><span style="font-size:9px;color:#94a3b8;font-weight:700;text-transform:uppercase">VS</span><div style="flex:1;text-align:right">'+clubChip(leg.club2,'p2')+'</div></div>'; }
                html += legBanRow(leg.bans_p1, leg.bans_p2, p1n, p2n);
                html += '</div>';
            });
            document.getElementById('gm-modal-legs-list').innerHTML = html;
            document.getElementById('gm-modal-legs').style.display = '';
        }
        document.getElementById('group-match-modal').style.display = 'block';
        document.body.style.overflow = 'hidden';
    };

    window.closeGroupModal = function(){
        var el = document.getElementById('group-match-modal');
        if (el) el.style.display = 'none';
        document.body.style.overflow = '';
    };
    document.addEventListener('keydown', function(e){ if(e.key==='Escape') window.closeGroupModal(); });
})();
</script>
@endpush