@extends('layouts.app')

@section('title','Suporte - GIGAX ARENA')
@section('page_title','Suporte')

@section('content')
@php
    $ticketsUrl = \Illuminate\Support\Facades\Route::has('usuarios.tickets')
        ? route('usuarios.tickets')
        : url('/usuarios/tickets');

    $tickets = collect($tickets ?? []);
    $normalizeStatus = function ($status) {
        $s = strtolower(trim((string)$status));
        if (in_array($s,['aberto','open','pending','pendente'],true)) return 'open';
        if (in_array($s,['andamento','em andamento','analysis','analise','análise'],true)) return 'progress';
        if (in_array($s,['aguardando','aguardando você','waiting','waiting_user'],true)) return 'waiting';
        if (in_array($s,['resolvido','resolved','fechado','closed'],true)) return 'closed';
        return 'open';
    };

    $openCount = $tickets->filter(fn($t) => $normalizeStatus(data_get($t,'status')) === 'open')->count();
    $progressCount = $tickets->filter(fn($t) => $normalizeStatus(data_get($t,'status')) === 'progress')->count();
    $waitingCount = $tickets->filter(fn($t) => $normalizeStatus(data_get($t,'status')) === 'waiting')->count();
    $closedCount = $tickets->filter(fn($t) => $normalizeStatus(data_get($t,'status')) === 'closed')->count();
    $ticketCount = $tickets->count();

    $categories = [
        ['conta','◉','Conta','Acesso, perfil e recuperação'],
        ['compras','▣','Compras','Pedidos e pagamentos'],
        ['conexao','⌁','Conexão','Ping, login e conectividade'],
        ['denuncias','⚠','Denúncias','Reportar jogador ou infração'],
        ['bug','⚙','Bug','Erros da plataforma'],
        ['eventos','★','Eventos','Eventos e torneios'],
    ];
@endphp

<div class="gx-support" id="gxSupport">
    <section class="gx-support-head">
        <div>
            <span class="gx-kicker">GIGAX ARENA</span>
            <h1>Central de Suporte</h1>
            <p>Abra chamados, acompanhe tickets reais e encontre ajuda sem dados de demonstração.</p>
        </div>
        <div class="gx-support-actions">
            <button type="button" class="gx-btn" data-scroll="#gxHelpCenter">Central de ajuda</button>
            <a class="gx-btn gx-primary" href="{{ $ticketsUrl }}">+ Novo chamado</a>
        </div>
    </section>

    <section class="gx-kpis">
        <button class="gx-kpi active" type="button" data-ticket-filter="open"><span class="green">▣</span><div><small>ABERTOS</small><strong>{{ $openCount }}</strong><em>Ver chamados</em></div></button>
        <button class="gx-kpi" type="button" data-ticket-filter="progress"><span class="yellow">◷</span><div><small>EM ANDAMENTO</small><strong>{{ $progressCount }}</strong><em>Ver chamados</em></div></button>
        <button class="gx-kpi" type="button" data-ticket-filter="waiting"><span class="purple">•••</span><div><small>AGUARDANDO VOCÊ</small><strong>{{ $waitingCount }}</strong><em>Responder</em></div></button>
        <button class="gx-kpi" type="button" data-ticket-filter="closed"><span class="blue">✓</span><div><small>RESOLVIDOS</small><strong>{{ $closedCount }}</strong><em>Ver histórico</em></div></button>
    </section>

    <div class="gx-support-layout">
        <main class="gx-support-main">
            <section class="gx-panel gx-ticket-panel">
                <div class="gx-tabs">
                    <button type="button" class="gx-tab active" data-tab="mine">Meus chamados</button>
                    <button type="button" class="gx-tab" data-tab="history">Histórico</button>
                    <button type="button" class="gx-tab" data-tab="closed">Chamados fechados</button>
                </div>

                <div class="gx-ticket-tools">
                    <label class="gx-search"><span>⌕</span><input id="gxTicketSearch" type="search" placeholder="Buscar chamados..."></label>
                    <select id="gxCategoryFilter"><option value="">Todas as categorias</option>@foreach($categories as $c)<option value="{{ $c[0] }}">{{ $c[2] }}</option>@endforeach</select>
                    <select id="gxStatusFilter"><option value="">Todos os status</option><option value="open">Aberto</option><option value="progress">Em andamento</option><option value="waiting">Aguardando você</option><option value="closed">Resolvido/Fechado</option></select>
                    <select id="gxPriorityFilter"><option value="">Todas prioridades</option><option value="alta">Alta</option><option value="media">Média</option><option value="baixa">Baixa</option></select>
                </div>

                <div class="gx-ticket-list" id="gxTicketList">
                    @forelse($tickets as $ticket)
                        @php
                            $id = data_get($ticket,'id','—');
                            $subject = data_get($ticket,'subject',data_get($ticket,'title','Chamado'));
                            $category = strtolower((string)data_get($ticket,'category',''));
                            $priority = strtolower((string)data_get($ticket,'priority','normal'));
                            $statusKey = $normalizeStatus(data_get($ticket,'status'));
                            $statusText = strtoupper((string)data_get($ticket,'status','—'));
                            $searchText = strtolower($id.' '.$subject.' '.$category.' '.$priority.' '.$statusText);
                            $showUrl = \Illuminate\Support\Facades\Route::has('usuarios.tickets.show') ? route('usuarios.tickets.show',$id) : $ticketsUrl;
                        @endphp
                        <a class="gx-ticket" href="{{ $showUrl }}" data-ticket data-status="{{ $statusKey }}" data-category="{{ $category }}" data-priority="{{ $priority }}" data-search="{{ $searchText }}">
                            <div class="gx-ticket-id">#{{ $id }}</div>
                            <div class="gx-ticket-subject"><strong>{{ $subject }}</strong><small>Chamado real</small></div>
                            <div class="gx-ticket-meta"><small>CATEGORIA</small><span>{{ $category ? ucfirst($category) : '—' }}</span></div>
                            <div class="gx-ticket-meta"><small>STATUS</small><span class="gx-status {{ $statusKey }}">{{ $statusText }}</span></div>
                            <div class="gx-ticket-meta"><small>PRIORIDADE</small><span>{{ strtoupper($priority) }}</span></div>
                            <b>→</b>
                        </a>
                    @empty
                        <div class="gx-empty" id="gxTicketsEmpty"><div class="gx-empty-icon">▣</div><strong>Nenhum chamado criado</strong><span>Você ainda não possui tickets de suporte.</span><a class="gx-btn gx-primary" href="{{ $ticketsUrl }}">+ Abrir primeiro chamado</a></div>
                    @endforelse
                </div>
                <div class="gx-empty gx-hidden" id="gxFilterEmpty"><div class="gx-empty-icon">⌕</div><strong>Nenhum chamado encontrado</strong><span>Altere a busca ou os filtros.</span></div>
            </section>

            <div class="gx-bottom-grid" id="gxHelpCenter">
                <section class="gx-panel">
                    <div class="gx-panel-title"><div><span class="gx-kicker">ATALHOS</span><h2>Categorias de suporte</h2></div></div>
                    <div class="gx-categories">
                        @foreach($categories as $c)
                            <button type="button" class="gx-category" data-category-link="{{ $c[0] }}"><span>{{ $c[1] }}</span><div><strong>{{ $c[2] }}</strong><small>{{ $c[3] }}</small></div><b>→</b></button>
                        @endforeach
                    </div>
                </section>

                <section class="gx-panel">
                    <div class="gx-panel-title"><div><span class="gx-kicker">AJUDA RÁPIDA</span><h2>Perguntas frequentes</h2></div></div>
                    <div class="gx-faqs">
                        <button type="button" class="gx-faq" data-faq><span>Como abrir um chamado?</span><b>+</b><p>Use “Novo chamado”. Você será direcionado para a central real de tickets.</p></button>
                        <button type="button" class="gx-faq" data-faq><span>Problemas de conexão</span><b>+</b><p>Abra um chamado e informe quando o problema acontece e as mensagens de erro disponíveis.</p></button>
                        <button type="button" class="gx-faq" data-faq><span>Como faço uma denúncia?</span><b>+</b><p>Use a categoria Denúncias e informe jogador, partida e evidências.</p></button>
                        <button type="button" class="gx-faq" data-faq><span>Problemas com compras</span><b>+</b><p>Abra um ticket na categoria Compras e descreva o pedido ou pagamento.</p></button>
                    </div>
                </section>
            </div>
        </main>

        <aside class="gx-support-side">
            <section class="gx-panel"><div class="gx-side-title">Seus dados de suporte</div><div class="gx-side-list"><div><span>Chamados totais</span><strong>{{ $ticketCount }}</strong></div><div><span>Chamados abertos</span><strong>{{ $openCount }}</strong></div><div><span>Resolvidos</span><strong>{{ $closedCount }}</strong></div><div><span>Tempo médio de resposta</span><strong>—</strong></div><div><span>Taxa de resolução</span><strong>{{ $ticketCount ? round(($closedCount/max(1,$ticketCount))*100).'%' : '—' }}</strong></div></div><a class="gx-side-button" href="{{ $ticketsUrl }}">Abrir central de tickets →</a></section>
            <section class="gx-panel"><div class="gx-side-title">Status dos serviços</div><div class="gx-status-note"><span>◉</span><div><strong>Sem dados simulados</strong><small>O status será exibido somente quando houver monitoramento real conectado.</small></div></div></section>
            <section class="gx-panel"><div class="gx-side-title">Canais de atendimento</div><div class="gx-channel-list"><a href="{{ $ticketsUrl }}"><span>▣</span><div><strong>Central de tickets</strong><small>Abrir e acompanhar chamados</small></div><b>→</b></a><button type="button" data-scroll="#gxHelpCenter"><span>?</span><div><strong>Central de ajuda</strong><small>Perguntas e categorias</small></div><b>→</b></button></div></section>
        </aside>
    </div>
</div>
@endsection

@push('styles')
<style>
.gx-support,.gx-support *{box-sizing:border-box}.gx-support{display:grid;gap:12px;width:100%}.gx-support-head,.gx-panel,.gx-kpi{border:1px solid #183149;background:linear-gradient(180deg,#0c1b28,#09151f)}.gx-support-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;border-radius:11px}.gx-kicker{display:block;color:#00ef79;font-size:10px;font-weight:900;letter-spacing:.13em}.gx-support-head h1{margin:4px 0 3px;font-size:23px}.gx-support-head p{margin:0;color:#7d94a6;font-size:11px}.gx-support-actions{display:flex;gap:7px}.gx-btn{height:35px;padding:0 12px;border:1px solid #25455b;border-radius:7px;background:#112130;color:#dce8ef;font-size:10px;font-weight:900;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.gx-btn:hover{border-color:#00ef79;color:#00ef79}.gx-btn.gx-primary{border-color:#00df73;background:#00df73;color:#04150c}.gx-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.gx-kpi{display:grid;grid-template-columns:40px 1fr;gap:9px;align-items:center;padding:11px;border-radius:9px;color:#eaf3f8;text-align:left;cursor:pointer}.gx-kpi:hover,.gx-kpi.active{border-color:#1e694d}.gx-kpi>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#122536}.gx-kpi .green{color:#00ef79}.gx-kpi .yellow{color:#ffc52e}.gx-kpi .purple{color:#b76cff}.gx-kpi .blue{color:#54b8ff}.gx-kpi small{display:block;color:#72899b;font-size:8px}.gx-kpi strong{display:block;margin-top:2px;font-size:17px}.gx-kpi em{display:block;color:#668094;font-style:normal;font-size:7px}.gx-support-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px}.gx-support-main,.gx-support-side{display:grid;gap:10px;align-content:start}.gx-panel{padding:11px;border-radius:9px}.gx-tabs{display:flex;gap:4px;border-bottom:1px solid #173044}.gx-tab{height:31px;padding:0 10px;border:0;border-bottom:2px solid transparent;background:transparent;color:#8096a8;font-size:9px;font-weight:900;cursor:pointer}.gx-tab.active{color:#00ef79;border-bottom-color:#00ef79}.gx-ticket-tools{display:grid;grid-template-columns:minmax(220px,1fr) 160px 160px 150px;gap:6px;margin-top:9px}.gx-search{height:34px;display:grid;grid-template-columns:34px 1fr;align-items:center;border:1px solid #1b394e;border-radius:7px;background:#07141d}.gx-search span{display:grid;place-items:center;color:#00ef79}.gx-search input,.gx-ticket-tools select{height:32px;border:0;outline:0;background:transparent;color:#dce7ee;font-size:9px}.gx-ticket-tools select{border:1px solid #1b394e;border-radius:7px;background:#07141d;padding:0 8px}.gx-ticket-list{display:grid;gap:5px;margin-top:8px}.gx-ticket{display:grid;grid-template-columns:70px minmax(200px,1fr) 120px 145px 120px 20px;gap:8px;align-items:center;min-height:52px;padding:8px;border:1px solid #162e40;border-radius:8px;background:#0b1823;color:inherit;text-decoration:none}.gx-ticket:hover{border-color:#1d664c}.gx-ticket-id{font-size:9px;font-weight:900}.gx-ticket-subject strong{display:block;font-size:9px}.gx-ticket-subject small,.gx-ticket-meta small{display:block;color:#637c8f;font-size:7px}.gx-ticket-meta span{display:block;margin-top:2px;font-size:8px}.gx-status{display:inline-flex!important;width:max-content;padding:3px 5px;border-radius:4px;font-weight:900}.gx-status.open{color:#72e8a1;background:#123829}.gx-status.progress{color:#ffd267;background:#342b13}.gx-status.waiting{color:#c48aff;background:#2c1740}.gx-status.closed{color:#69bfff;background:#102e48}.gx-empty{min-height:175px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #203b4e;border-radius:8px;color:#71899c;text-align:center}.gx-empty-icon{width:40px;height:40px;border:1px solid #24455b;border-radius:9px;display:grid;place-items:center;color:#00ef79;margin-bottom:8px}.gx-empty strong{color:#dfe9ef;font-size:11px}.gx-empty span{font-size:8px;margin:4px 0 10px}.gx-hidden{display:none!important}.gx-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gx-panel-title h2{margin:2px 0 8px;font-size:13px}.gx-categories{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.gx-category{min-height:72px;display:grid;grid-template-columns:30px 1fr 15px;gap:7px;align-items:center;padding:8px;border:1px solid #193347;border-radius:7px;background:#0a1721;color:#e7eff4;text-align:left;cursor:pointer}.gx-category:hover{border-color:#00ef79}.gx-category>span{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;background:#102738;color:#00ef79}.gx-category strong{display:block;font-size:8px}.gx-category small{display:block;color:#6e879a;font-size:6px}.gx-faqs{display:grid;gap:5px}.gx-faq{position:relative;width:100%;min-height:37px;padding:9px 30px 9px 9px;border:1px solid #193347;border-radius:7px;background:#0a1721;color:#e5eef3;text-align:left;cursor:pointer}.gx-faq p{display:none;margin:7px 0 0;color:#71899c;font-size:7px}.gx-faq.open p{display:block}.gx-faq>b{position:absolute;right:10px;top:9px;color:#00ef79}.gx-faq.open>b{transform:rotate(45deg)}.gx-side-title{font-size:10px;font-weight:900;text-transform:uppercase}.gx-side-list>div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #142a39}.gx-side-list span,.gx-side-list strong{font-size:8px}.gx-side-button{display:block;margin-top:8px;padding:8px;border:1px solid #1d3e52;border-radius:7px;color:#00ef79;text-decoration:none;text-align:center;font-size:8px}.gx-status-note{display:flex;gap:8px;padding:8px;border:1px dashed #224255;border-radius:7px}.gx-status-note small{display:block;color:#6e879a;font-size:7px}.gx-channel-list>*{width:100%;display:grid;grid-template-columns:28px 1fr 15px;gap:7px;align-items:center;padding:8px 0;border:0;border-bottom:1px solid #142a39;background:transparent;color:#e5eef3;text-align:left;text-decoration:none;cursor:pointer}.gx-channel-list strong{display:block;font-size:8px}.gx-channel-list small{display:block;color:#71899c;font-size:7px}.gx-channel-list>*>span{width:26px;height:26px;border-radius:7px;background:#102738;display:grid;place-items:center;color:#00ef79}@media(max-width:1150px){.gx-support-layout{grid-template-columns:1fr}.gx-support-side{grid-template-columns:repeat(3,1fr)}.gx-ticket-tools{grid-template-columns:1fr 1fr}}@media(max-width:760px){.gx-support-head{flex-direction:column;align-items:flex-start}.gx-kpis{grid-template-columns:repeat(2,1fr)}.gx-support-side{grid-template-columns:1fr}.gx-bottom-grid{grid-template-columns:1fr}.gx-categories{grid-template-columns:repeat(2,1fr)}.gx-ticket-tools{grid-template-columns:1fr}.gx-ticket{grid-template-columns:55px 1fr}.gx-ticket-meta{display:none}}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded',function(){
 const root=document.getElementById('gxSupport'); if(!root)return;
 const tickets=[...root.querySelectorAll('[data-ticket]')];
 const search=document.getElementById('gxTicketSearch'),cat=document.getElementById('gxCategoryFilter'),status=document.getElementById('gxStatusFilter'),priority=document.getElementById('gxPriorityFilter'),empty=document.getElementById('gxFilterEmpty');
 const tabs=[...root.querySelectorAll('[data-tab]')]; let tab='mine';
 function apply(){const q=(search?.value||'').toLowerCase(),c=cat?.value||'',s=status?.value||'',p=priority?.value||'';let n=0;tickets.forEach(t=>{const ts=t.dataset.status||'';const okTab=tab==='mine'||((tab==='history'||tab==='closed')&&ts==='closed');const show=okTab&&(!q||(t.dataset.search||'').includes(q))&&(!c||(t.dataset.category||'').includes(c))&&(!s||ts===s)&&(!p||(t.dataset.priority||'').includes(p));t.style.display=show?'':'none';if(show)n++;});empty?.classList.toggle('gx-hidden',n>0||tickets.length===0)}
 [search,cat,status,priority].forEach(el=>el?.addEventListener(el.tagName==='INPUT'?'input':'change',apply));
 tabs.forEach(b=>b.addEventListener('click',()=>{tab=b.dataset.tab;tabs.forEach(x=>x.classList.toggle('active',x===b));apply()}));
 root.querySelectorAll('[data-ticket-filter]').forEach(b=>b.addEventListener('click',()=>{root.querySelectorAll('[data-ticket-filter]').forEach(x=>x.classList.toggle('active',x===b));if(status)status.value=b.dataset.ticketFilter;document.querySelector('.gx-ticket-panel')?.scrollIntoView({behavior:'smooth'});apply()}));
 root.querySelectorAll('[data-category-link]').forEach(b=>b.addEventListener('click',()=>{if(cat)cat.value=b.dataset.categoryLink;document.querySelector('.gx-ticket-panel')?.scrollIntoView({behavior:'smooth'});apply();if(!tickets.length){const base=@json($ticketsUrl);location.href=base+(base.includes('?')?'&':'?')+'category='+encodeURIComponent(b.dataset.categoryLink)}}));
 root.querySelectorAll('[data-faq]').forEach(b=>b.addEventListener('click',()=>b.classList.toggle('open')));
 root.querySelectorAll('[data-scroll]').forEach(b=>b.addEventListener('click',()=>document.querySelector(b.dataset.scroll)?.scrollIntoView({behavior:'smooth'})));
});
</script>
@endpush