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

@php
$tickets=collect($tickets??[]);
$open=$tickets->whereIn('status',['aberto','em_andamento','aguardando_usuario'])->count();
$resolved=$tickets->where('status','resolvido')->count();
$waiting=$tickets->where('status','aguardando_usuario')->count();
@endphp

@push('styles')
<style>
.gx-tk{display:grid;gap:12px;max-width:1540px}.gx-tk-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.gx-tk-head p{margin:4px 0 0;color:var(--mut);font-size:12px}.gx-tk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.gx-tk-card,.gx-tk-panel{background:linear-gradient(180deg,rgba(17,31,45,.96),rgba(7,15,24,.98));border:1px solid var(--line);border-radius:10px}.gx-tk-card{padding:14px}.gx-tk-card small{font-size:10px;color:var(--mut);font-weight:900}.gx-tk-card strong{display:block;font-size:25px;margin-top:5px}.gx-tk-panel{overflow:hidden}.gx-tk-toolbar{padding:12px;display:flex;gap:8px;border-bottom:1px solid var(--line)}.gx-tk-toolbar input{flex:1;background:#07131e;border:1px solid var(--line);color:#fff;border-radius:8px;padding:10px}.gx-tk-table{width:100%;border-collapse:collapse}.gx-tk-table th,.gx-tk-table td{padding:12px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left;font-size:12px}.gx-tk-table th{font-size:10px;color:var(--mut);text-transform:uppercase}.gx-status{padding:4px 7px;border-radius:999px;font-size:9px;font-weight:900;background:rgba(36,245,111,.1);color:var(--green)}.gx-empty{padding:50px;text-align:center;color:var(--mut)}.gx-modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.72);z-index:99999}.gx-modal.open{display:grid}.gx-dialog{width:min(640px,calc(100% - 24px));background:#08131f;border:1px solid var(--line);border-radius:12px;overflow:hidden}.gx-dialog-h{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.gx-form{padding:16px}.gx-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gx-field{margin-bottom:11px}.gx-field label{display:block;font-size:10px;color:var(--mut);font-weight:900;margin-bottom:5px}.gx-field input,.gx-field select,.gx-field textarea{width:100%;background:#07131e;border:1px solid var(--line);color:#fff;padding:10px;border-radius:8px}.gx-field textarea{min-height:130px}.gx-actions{display:flex;justify-content:flex-end;gap:8px}@media(max-width:800px){.gx-tk-stats{grid-template-columns:repeat(2,1fr)}.gx-row2{grid-template-columns:1fr}.gx-tk-panel{overflow:auto}}
</style>
@endpush

@section('content')
<div class="gx-tk">
    <div class="gx-tk-head">
        <div><strong>Central de Chamados</strong><p>Abra, acompanhe e responda seus atendimentos.</p></div>
        <button class="btn" type="button" id="gxNewTicket">+ Novo chamado</button>
    </div>

    <div class="gx-tk-stats">
        <div class="gx-tk-card"><small>TOTAL</small><strong>{{ $tickets->count() }}</strong></div>
        <div class="gx-tk-card"><small>ATIVOS</small><strong>{{ $open }}</strong></div>
        <div class="gx-tk-card"><small>AGUARDANDO VOCÊ</small><strong>{{ $waiting }}</strong></div>
        <div class="gx-tk-card"><small>RESOLVIDOS</small><strong>{{ $resolved }}</strong></div>
    </div>

    <div class="gx-tk-panel">
        <div class="gx-tk-toolbar"><input id="gxTkSearch" placeholder="Buscar por assunto ou protocolo..."></div>
        @if($tickets->isEmpty())
            <div class="gx-empty">Nenhum chamado criado. Use <b>+ Novo chamado</b> quando precisar.</div>
        @else
        <table class="gx-tk-table" id="gxTkTable">
            <thead><tr><th>Protocolo</th><th>Assunto</th><th>Categoria</th><th>Status</th><th>Prioridade</th><th>Atualizado</th><th></th></tr></thead>
            <tbody>
            @foreach($tickets as $t)
            <tr data-search="{{ strtolower($t->subject.' GX-'.$t->id) }}">
                <td><b>#GX-{{ str_pad((string)$t->id,5,'0',STR_PAD_LEFT) }}</b></td>
                <td>{{ $t->subject }}</td>
                <td>{{ $t->category }}</td>
                <td><span class="gx-status">{{ strtoupper(str_replace('_',' ',$t->status)) }}</span></td>
                <td>{{ strtoupper($t->priority) }}</td>
                <td>{{ \Carbon\Carbon::parse($t->updated_at)->format('d/m H:i') }}</td>
                <td><a class="btn dark" href="{{ route('usuarios.tickets.show',$t->id) }}">Abrir</a></td>
            </tr>
            @endforeach
            </tbody>
        </table>
        @endif
    </div>
</div>

<div class="gx-modal {{ $errors->any() ? 'open':'' }}" id="gxTicketModal">
    <div class="gx-dialog">
        <div class="gx-dialog-h"><strong>Novo chamado</strong><button class="btn dark" type="button" data-close-ticket>×</button></div>
        <form class="gx-form" method="POST" action="{{ route('usuarios.tickets.store') }}">
            @csrf
            @if($errors->any())<div class="krux-alert error">{{ $errors->first() }}</div>@endif
            <div class="gx-field"><label>ASSUNTO *</label><input name="subject" value="{{ old('subject') }}" required maxlength="180"></div>
            <div class="gx-row2">
                <div class="gx-field"><label>CATEGORIA</label><select name="category">@foreach(['Geral','Conta','Partida','Conexão','Anti-Cheat','Denúncia','Compra','Bug','Torneio'] as $c)<option>{{ $c }}</option>@endforeach</select></div>
                <div class="gx-field"><label>PRIORIDADE</label><select name="priority"><option value="baixa">Baixa</option><option value="normal" selected>Normal</option><option value="alta">Alta</option></select></div>
            </div>
            <div class="gx-field"><label>DESCRIÇÃO *</label><textarea name="message" required maxlength="5000">{{ old('message') }}</textarea></div>
            <div class="gx-actions"><button class="btn dark" type="button" data-close-ticket>Cancelar</button><button class="btn" type="submit">Abrir chamado</button></div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded',()=>{
 const modal=document.getElementById('gxTicketModal');
 document.getElementById('gxNewTicket')?.addEventListener('click',()=>modal.classList.add('open'));
 document.querySelectorAll('[data-close-ticket]').forEach(b=>b.addEventListener('click',()=>modal.classList.remove('open')));
 const s=document.getElementById('gxTkSearch');
 s?.addEventListener('input',()=>document.querySelectorAll('#gxTkTable tbody tr').forEach(r=>r.style.display=(r.dataset.search||'').includes(s.value.toLowerCase())?'':'none'));
});
</script>
@endsection