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

@push('styles')
<style>
.gx-thread{max-width:1100px;display:grid;gap:12px}.gx-thread-head,.gx-thread-box{background:linear-gradient(180deg,rgba(17,31,45,.96),rgba(7,15,24,.98));border:1px solid var(--line);border-radius:10px}.gx-thread-head{padding:16px}.gx-thread-head h2{margin:6px 0}.gx-meta{display:flex;gap:7px;flex-wrap:wrap}.gx-chip{font-size:10px;padding:5px 8px;border-radius:999px;border:1px solid var(--line);color:#cfe0ed}.gx-thread-box{padding:14px}.gx-msg{padding:12px;border-radius:9px;background:rgba(255,255,255,.035);border:1px solid var(--line);margin-bottom:9px}.gx-msg.admin{border-left:3px solid var(--green)}.gx-msg.player{border-left:3px solid var(--blue)}.gx-msg-top{display:flex;justify-content:space-between;font-size:10px;color:var(--mut);margin-bottom:6px}.gx-reply textarea{width:100%;min-height:110px;background:#07131e;border:1px solid var(--line);color:#fff;border-radius:8px;padding:11px;margin-bottom:8px}
</style>
@endpush

@section('content')
<div class="gx-thread">
    <div><a class="btn dark" href="{{ route('usuarios.tickets') }}">← Meus chamados</a></div>
    <div class="gx-thread-head">
        <small class="page-kicker">#GX-{{ str_pad((string)$ticket->id,5,'0',STR_PAD_LEFT) }}</small>
        <h2>{{ $ticket->subject }}</h2>
        <div class="gx-meta"><span class="gx-chip">{{ $ticket->category }}</span><span class="gx-chip">{{ strtoupper(str_replace('_',' ',$ticket->status)) }}</span><span class="gx-chip">PRIORIDADE {{ strtoupper($ticket->priority) }}</span></div>
    </div>

    <div class="gx-thread-box">
        @forelse($replies as $r)
            <div class="gx-msg {{ $r->sender_role }}">
                <div class="gx-msg-top"><b>{{ $r->sender_role==='admin' ? 'SUPORTE GIGAX' : 'VOCÊ' }}</b><span>{{ \Carbon\Carbon::parse($r->created_at)->format('d/m/Y H:i') }}</span></div>
                <div>{{ $r->message }}</div>
            </div>
        @empty
            <div class="gx-msg player">{{ $ticket->message }}</div>
        @endforelse
    </div>

    @if($ticket->status !== 'resolvido')
    <form class="gx-thread-box gx-reply" method="POST" action="{{ route('usuarios.tickets.reply',$ticket->id) }}">
        @csrf
        <strong>Responder ao suporte</strong>
        <textarea name="message" required maxlength="5000" placeholder="Digite sua resposta..."></textarea>
        <button class="btn" type="submit">Enviar resposta</button>
    </form>
    @endif
</div>
@endsection