@extends('layouts.app')

@push('styles')
<style>
/* GIGAX PARTIDAS V1 - MESMA LINGUAGEM VISUAL DO DASHBOARD */
:root{--gx-bg:#031018;--gx-panel:#071822;--gx-line:rgba(97,167,194,.18);--gx-green:#20f27a;--gx-text:#f5fbff;--gx-muted:#8aa6b8}
.gx-matches,.gx-matches *{box-sizing:border-box}
.gx-matches{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px;align-items:start;color:var(--gx-text);font-family:Inter,Arial,sans-serif;font-size:13.75px;line-height:1.25;margin-top:-2px}
.gx-main,.gx-side{display:grid;gap:10px;align-content:start;min-width:0}
.gx-card{background:linear-gradient(180deg,#071923 0%,#05131c 100%);border:1px solid var(--gx-line);border-radius:8px;padding:10px 11px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.015)}
.gx-tabs{display:flex;align-items:center;gap:5px;flex-wrap:wrap;border-bottom:1px solid rgba(97,167,194,.13);padding-bottom:7px;margin-bottom:8px}
.gx-tab{height:28px;border:1px solid transparent;background:transparent;color:#9bb2c0;padding:0 10px;border-radius:5px;font-size:9px;font-weight:900;cursor:pointer;text-transform:uppercase;letter-spacing:.02em}
.gx-tab:hover{color:#dce8ee;background:#0a202a}.gx-tab.active{border-color:rgba(32,242,122,.26);background:rgba(32,242,122,.08);color:var(--gx-green);box-shadow:inset 0 -2px 0 var(--gx-green)}
.gx-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:7px}
.gx-stat{min-height:66px;background:#0a1f2a;border:1px solid rgba(255,255,255,.04);border-radius:5px;padding:9px 10px;display:flex;flex-direction:column;justify-content:center}
.gx-stat small{display:block;color:#9bb2c0;font-size:9px;font-weight:900;text-transform:uppercase}.gx-stat strong{display:block;color:#f5fbff;font-size:21px;line-height:1;margin-top:5px}.gx-stat span{display:block;color:#9ab0bd;font-size:9px;margin-top:5px}.gx-stat:nth-child(2) strong{color:var(--gx-green)}
.gx-filters{display:grid;grid-template-columns:145px 145px 130px minmax(190px,1fr) 82px;gap:6px;margin-top:8px;padding:8px;background:#06151e;border:1px solid rgba(255,255,255,.035);border-radius:6px}
.gx-control{height:30px;background:#091c27;border:1px solid var(--gx-line);border-radius:4px;color:#dce7ed;padding:0 9px;font-size:9px;outline:none}.gx-control:focus{border-color:rgba(32,242,122,.55);box-shadow:0 0 0 2px rgba(32,242,122,.05)}button.gx-control{cursor:pointer;font-weight:900;color:#03140a;background:var(--gx-green);border-color:var(--gx-green)}
.gx-table-wrap{overflow:auto;margin-top:8px;border:1px solid rgba(255,255,255,.035);border-radius:6px;background:#06151e}.gx-table{width:100%;border-collapse:collapse;min-width:820px}.gx-table th{height:29px;font-size:9px;color:#9bb2c0;text-transform:uppercase;text-align:left;padding:0 9px;background:#081a24;border-bottom:1px solid var(--gx-line)}.gx-table td{font-size:9px;padding:9px;border-bottom:1px solid rgba(255,255,255,.035)}.gx-table tbody tr:hover{background:rgba(32,242,122,.025)}
.gx-empty{text-align:center;color:#9bb2c0;padding:34px 15px!important;font-size:9px}.gx-empty b{display:block;color:#dfe9ee;font-size:11px;margin-bottom:4px}
.gx-side-title{font-size:12.7px;font-weight:900;text-transform:uppercase;margin-bottom:7px}.gx-level{display:flex;align-items:center;gap:10px}.gx-level-icon{width:50px;height:50px;border:1px solid rgba(255,191,55,.24);border-radius:7px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,190,46,.11),#07151d);color:#ffd05f;font-size:24.2px}.gx-level strong{display:block;font-size:19.8px;color:#fff;margin-top:2px}.gx-progress{height:4px;background:#172832;border-radius:20px;overflow:hidden;margin-top:9px}.gx-progress i{display:block;width:0;height:100%;background:var(--gx-green)}
.gx-list{display:grid}.gx-list-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04)}.gx-list-row:last-child{border-bottom:0}.gx-list-row b{font-size:9px}.gx-list-row small{font-size:9px;color:#9bb2c0}.gx-muted{color:#9ab0bd}.gx-panel{display:none}.gx-panel.active{display:block}.gx-actions{display:flex;justify-content:center;gap:5px;margin-top:8px}.gx-page-btn{min-width:26px;height:25px;border:1px solid var(--gx-line);background:#091c27;color:#9bb2c0;border-radius:4px;font-size:9px}.gx-page-btn.active{border-color:var(--gx-green);color:#03140a;background:var(--gx-green);font-weight:900}
.gx-side .gx-card{padding:10px}.gx-side .gx-empty{min-height:74px;display:grid;place-items:center;padding:18px 10px!important;background:#06151e;border:1px solid rgba(255,255,255,.03);border-radius:5px}.gx-side .gx-muted{font-size:9px!important}
@media(max-width:1180px){.gx-matches{grid-template-columns:1fr}.gx-side{grid-template-columns:repeat(3,1fr)}.gx-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.gx-side{grid-template-columns:1fr}.gx-stats{grid-template-columns:repeat(2,1fr)}.gx-filters{grid-template-columns:1fr 1fr}.gx-filters .gx-search{grid-column:1/-1}}

/* GIGAX PARTIDAS V3 - TIPOGRAFIA +10% / TEXTOS PEQUENOS LEGIVEIS */
.gx-tab,.gx-control,.gx-table td,.gx-list-row b,.gx-page-btn{font-weight:700}
.gx-stat small,.gx-stat span,.gx-table th,.gx-list-row small,.gx-side .gx-muted{font-size:9px!important;line-height:1.35!important;letter-spacing:.02em!important;color:#a6bac6!important}
.gx-table td{line-height:1.4!important}
.gx-muted{color:#9fb4c0!important}
</style>
<style id="gx-partidas-v4-ranking-legivel">
/* V4 - Ranking: textos pequenos mais legiveis sem aumentar excessivamente o card */
.gx-side .gx-card .gx-muted,
.gx-side .gx-card small,
.gx-side .gx-list-row small{
    font-size:11px!important;
    line-height:1.45!important;
    font-weight:650!important;
    letter-spacing:.015em!important;
    color:#c1d1da!important;
}
.gx-side .gx-list-row b{
    font-size:11px!important;
    line-height:1.35!important;
    font-weight:850!important;
    color:#f1f7fa!important;
}
.gx-side .gx-side-title{
    font-size:14px!important;
    letter-spacing:.02em!important;
}
.gx-side .gx-level strong{font-size:21px!important}
.gx-side .gx-empty{font-size:11px!important;line-height:1.45!important;color:#bfd0d9!important}
</style>

@endpush

@section('title','Partidas - GIGAX ARENA')
@section('page_title','Minhas Partidas')

@section('content')
@php
    $user = auth()->user();
    $level = (int) (data_get($user,'level') ?: data_get($user,'skill_level') ?: 1);
@endphp

<div class="gx-matches" id="gx-matches">
    <main class="gx-main">
        <section class="gx-card">
            <div class="gx-tabs">
                <button class="gx-tab active" type="button" data-tab="geral">Geral</button>
                <button class="gx-tab" type="button" data-tab="historico">Histórico</button>
                <button class="gx-tab" type="button" data-tab="estatisticas">Estatísticas</button>
                <button class="gx-tab" type="button" data-tab="desempenho">Desempenho</button>
                <button class="gx-tab" type="button" data-tab="companheiros">Companheiros</button>
            </div>

            <div class="gx-panel active" data-panel="geral">
                <div class="gx-stats">
                    <div class="gx-stat"><small>Partidas jogadas</small><strong>0</strong><span>Nenhuma realizada</span></div>
                    <div class="gx-stat"><small>Vitórias</small><strong>0</strong><span>0% aproveitamento</span></div>
                    <div class="gx-stat"><small>Kills</small><strong>0</strong><span>Média 0 / partida</span></div>
                    <div class="gx-stat"><small>Mortes</small><strong>0</strong><span>Média 0 / partida</span></div>
                    <div class="gx-stat"><small>K/D Ratio</small><strong>0.00</strong><span>Sem estatística</span></div>
                </div>

                <div class="gx-filters">
                    <select class="gx-control"><option>Todos os Modos</option></select>
                    <select class="gx-control"><option>Todos os Mapas</option></select>
                    <input class="gx-control" type="date">
                    <input class="gx-control gx-search" type="search" placeholder="Buscar partida...">
                    <button class="gx-control" type="button" onclick="window.print()">Exportar</button>
                </div>

                <div class="gx-table-wrap">
                    <table class="gx-table">
                        <thead>
                            <tr>
                                <th>Data</th><th>Modo</th><th>Mapa</th><th>Resultado</th><th>K/D/A</th><th>Pontuação</th><th>Duração</th><th>Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="8" class="gx-empty">
                                    <b>Nenhuma partida realizada</b>
                                    O histórico começará automaticamente quando a primeira partida válida for concluída.
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="gx-actions">
                    <button class="gx-page-btn active" type="button">1</button>
                </div>
            </div>

            <div class="gx-panel" data-panel="historico">
                <div class="gx-empty">
                    <b>Histórico vazio</b>
                    Nenhuma partida foi registrada até o momento.
                </div>
            </div>

            <div class="gx-panel" data-panel="estatisticas">
                <div class="gx-stats">
                    <div class="gx-stat"><small>Partidas</small><strong>0</strong><span>Total</span></div>
                    <div class="gx-stat"><small>Vitórias</small><strong>0</strong><span>Total</span></div>
                    <div class="gx-stat"><small>Derrotas</small><strong>0</strong><span>Total</span></div>
                    <div class="gx-stat"><small>Kills</small><strong>0</strong><span>Total</span></div>
                    <div class="gx-stat"><small>K/D</small><strong>0.00</strong><span>Total</span></div>
                </div>
            </div>

            <div class="gx-panel" data-panel="desempenho">
                <div class="gx-empty"><b>Sem dados de desempenho</b>Jogue partidas para gerar comparativos de desempenho.</div>
            </div>

            <div class="gx-panel" data-panel="companheiros">
                <div class="gx-empty"><b>Sem companheiros registrados</b>Os jogadores aparecerão aqui após partidas concluídas.</div>
            </div>
        </section>
    </main>

    <aside class="gx-side">
        <section class="gx-card">
            <div class="gx-level">
                <div class="gx-level-icon">◆</div>
                <div>
                    <small class="gx-muted">NÍVEL</small>
                    <strong>{{ $level }}</strong>
                    <div class="gx-muted" style="font-size:9px">Sem ranking de partidas</div>
                </div>
            </div>
            <div class="gx-progress"><i></i></div>
            <div class="gx-muted" style="font-size:9px;margin-top:7px">Progresso de partidas ainda não iniciado</div>
        </section>

        <section class="gx-card">
            <div class="gx-side-title">Últimas partidas</div>
            <div class="gx-empty" style="padding:20px 10px!important">
                <b>Nenhuma partida</b>
                Sem registros recentes.
            </div>
        </section>

        <section class="gx-card">
            <div class="gx-side-title">Atividade recente</div>
            <div class="gx-empty" style="padding:20px 10px!important">
                <b>Nenhuma atividade</b>
                As atividades de partida aparecerão aqui.
            </div>
        </section>
    </aside>
</div>

@push('scripts')
<script>
(function(){
    const root = document.getElementById('gx-matches');
    if(!root) return;
    const tabs = [...root.querySelectorAll('[data-tab]')];
    const panels = [...root.querySelectorAll('[data-panel]')];

    function activate(name){
        tabs.forEach(t => t.classList.toggle('active', t.dataset.tab === name));
        panels.forEach(p => p.classList.toggle('active', p.dataset.panel === name));
        history.replaceState(null,'','#'+name);
    }

    tabs.forEach(t => t.addEventListener('click', () => activate(t.dataset.tab)));
    const initial = location.hash.replace('#','');
    if(['geral','historico','estatisticas','desempenho','companheiros'].includes(initial)) activate(initial);
})();
</script>
@endpush
@endsection