@extends('layouts.app')
@section('title','Ticket #' . $ticket->id)
@push('styles')
<style>
.chat-wrap{display:flex;flex-direction:column;gap:.75rem;max-height:500px;overflow-y:auto;padding:1rem;background:rgba(0,0,0,.2);border-radius:12px;margin-bottom:1rem;}
.msg{max-width:75%;padding:.75rem 1rem;border-radius:14px;font-size:.875rem;line-height:1.6;}
.msg.user{background:rgba(76,175,80,.15);border:1px solid rgba(76,175,80,.2);align-self:flex-end;border-bottom-right-radius:4px;}
.msg.admin{background:rgba(255,255,255,.06);border:1px solid var(--border);align-self:flex-start;border-bottom-left-radius:4px;}
.msg-meta{font-size:.72rem;color:var(--muted);margin-top:.35rem;}
</style>
@endpush
@section('content')
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;">
  <a href="{{ route('support') }}" class="btn btn-outline btn-sm"><i class="fas fa-arrow-left"></i> Back</a>
  <h1 style="font-size:1.3rem;font-weight:900;margin:0;flex:1;">{{ $ticket->subject }}</h1>
  <span class="badge badge-{{ in_array($ticket->status,['resolved','closed']) ? 'confirmed' : 'pending' }}">{{ ucfirst(str_replace('_',' ',$ticket->status)) }}</span>
</div>
<div style="font-size:.8rem;color:var(--muted);margin-bottom:1.5rem;">
  Category: <strong style="color:var(--text);">{{ ucfirst($ticket->category) }}</strong> &nbsp;•&nbsp; Opened {{ $ticket->created_at->format('d M Y H:i') }}
</div>

<div class="card">
  <div class="chat-wrap" id="chatWrap">
    @foreach($ticket->messages as $msg)
    <div class="msg {{ $msg->is_admin ? 'admin' : 'user' }}">
      {{ $msg->message }}
      <div class="msg-meta">{{ $msg->is_admin ? '🛡️ Nabola Support' : '👤 You' }} &nbsp;•&nbsp; {{ $msg->created_at->format('d M H:i') }}</div>
    </div>
    @endforeach
  </div>

  @if(!in_array($ticket->status, ['resolved','closed']))
  <form method="POST" action="{{ route('support.reply', $ticket) }}" style="display:flex;gap:.75rem;align-items:flex-end;">
    @csrf
    <textarea name="message" class="form-control" rows="2" placeholder="Type your reply..." required style="flex:1;resize:none;"></textarea>
    <button type="submit" class="btn btn-green"><i class="fas fa-paper-plane"></i></button>
  </form>
  @else
  <div style="text-align:center;padding:1rem;color:var(--muted);font-size:.875rem;background:rgba(255,255,255,.02);border-radius:10px;">
    This ticket is {{ $ticket->status }}. <a href="{{ route('support.create') }}" style="color:var(--gl);">Open a new ticket</a> if you need further help.
  </div>
  @endif
</div>
@push('scripts')
<script>
const cw = document.getElementById('chatWrap');
if(cw) cw.scrollTop = cw.scrollHeight;
</script>
@endpush
@endsection