@extends('layouts.app')
@section('title','Support')
@section('content')
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem;">
  <div class="page-header" style="margin:0;"><h1>Support</h1><p>Get help from the Nabola team.</p></div>
  <a href="{{ route('support.create') }}" class="btn btn-green"><i class="fas fa-plus"></i> New Ticket</a>
</div>
@forelse($tickets as $t)
<div style="background:var(--card);border:1px solid {{ $t->unreadCount() > 0 ? 'rgba(76,175,80,.3)' : 'var(--border)' }};border-radius:14px;padding:1.25rem;margin-bottom:.75rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;transition:.2s;" onclick="window.location='{{ route('support.show', $t) }}'" style="cursor:pointer;">
  <div style="flex:1;min-width:0;cursor:pointer;" onclick="window.location='{{ route('support.show', $t) }}'">
    <div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.25rem;">
      <span style="font-weight:700;font-size:.9rem;">{{ $t->subject }}</span>
      @if($t->unreadCount() > 0)<span style="background:var(--green);color:#fff;font-size:.65rem;font-weight:800;padding:.15rem .45rem;border-radius:50px;">{{ $t->unreadCount() }} new</span>@endif
    </div>
    <div style="font-size:.8rem;color:var(--muted);">{{ ucfirst($t->category) }} &nbsp;&nbsp; {{ $t->created_at->diffForHumans() }}</div>
    @if($t->latestMessage)<div style="font-size:.8rem;color:rgba(255,255,255,.5);margin-top:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px;">{{ Str::limit($t->latestMessage->message, 80) }}</div>@endif
  </div>
  <div style="display:flex;align-items:center;gap:.75rem;flex-shrink:0;">
    <span class="badge badge-{{ in_array($t->status,['resolved','closed']) ? 'confirmed' : ($t->status==='in_progress' ? 'pending' : 'pending') }}">{{ ucfirst(str_replace('_',' ',$t->status)) }}</span>
    <i class="fas fa-chevron-right" style="color:var(--muted);font-size:.8rem;"></i>
  </div>
</div>
@empty
<div style="text-align:center;padding:4rem;background:var(--card);border:1px solid var(--border);border-radius:16px;">
  <i class="fas fa-headset" style="font-size:3rem;opacity:.3;display:block;margin-bottom:1rem;"></i>
  <div style="font-weight:700;margin-bottom:.5rem;">No support tickets yet</div>
  <div style="color:var(--muted);font-size:.875rem;margin-bottom:1.5rem;">Need help? Create a ticket and our team will respond within 24 hours.</div>
  <a href="{{ route('support.create') }}" class="btn btn-green"><i class="fas fa-plus"></i> Create Ticket</a>
</div>
@endforelse
@endsection