@extends('layouts.admin')
@section('title', 'Support Tickets')

@section('content')

<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem">
  <div>
    <h1 style="font-size:1.875rem;font-weight:700;color:var(--foreground);letter-spacing:-.025em;line-height:1.2;margin:0 0 .25rem">Support Tickets</h1>
    <p style="font-size:.875rem;color:var(--muted-foreground);margin:0">Manage customer support requests</p>
  </div>
</div>

{{-- Stats --}}
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:.875rem;margin-bottom:1.5rem">
  @foreach([
    ['label'=>'Open',        'val'=>$stats['open'],        'c'=>'#3b82f6'],
    ['label'=>'In Progress', 'val'=>$stats['in_progress'], 'c'=>'#f59e0b'],
    ['label'=>'Resolved',    'val'=>$stats['resolved'],    'c'=>'#22c55e'],
    ['label'=>'Closed',      'val'=>$stats['closed'],      'c'=>'#737373'],
  ] as $s)
  <div class="stat-card">
    <div class="stat-val" style="color:{{ $s['c'] }}">{{ $s['val'] }}</div>
    <div class="stat-lbl">{{ $s['label'] }}</div>
  </div>
  @endforeach
</div>

{{-- Filters --}}
<div class="card" style="padding:.875rem 1.25rem;margin-bottom:1rem">
  <form method="GET" style="display:flex;flex-wrap:wrap;gap:.625rem;align-items:center">
    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search ticket # or subject..."
      class="input" style="width:220px">
    @foreach(['status'=>['open'=>'Open','in_progress'=>'In Progress','resolved'=>'Resolved','closed'=>'Closed'],
              'priority'=>['urgent'=>'Urgent','high'=>'High','medium'=>'Medium','low'=>'Low'],
              'category'=>['general'=>'General','billing'=>'Billing','technical'=>'Technical','license'=>'License']] as $name=>$opts)
    <select name="{{ $name }}" class="select" style="width:140px">
      <option value="">All {{ ucfirst($name) }}</option>
      @foreach($opts as $v=>$l)
      <option value="{{ $v }}" @selected(request($name)===$v)>{{ $l }}</option>
      @endforeach
    </select>
    @endforeach
    <button type="submit" class="btn btn-primary btn-sm">Filter</button>
    @if(request()->anyFilled(['search','status','priority','category']))
    <a href="{{ route('admin.support.index') }}" class="btn btn-secondary btn-sm">Clear</a>
    @endif
  </form>
</div>

<div class="card">
  <table style="width:100%;border-collapse:collapse">
    <thead>
      <tr style="border-bottom:1px solid var(--border)">
        <th class="th">Ticket</th>
        <th class="th">Subject</th>
        <th class="th">Customer</th>
        <th class="th">Status</th>
        <th class="th">Priority</th>
        <th class="th">Category</th>
        <th class="th">Replies</th>
        <th class="th">Last Update</th>
        <th class="th"></th>
      </tr>
    </thead>
    <tbody>
      @forelse($tickets as $ticket)
      <tr class="trow">
        <td class="td"><code style="font-family:monospace;font-size:.75rem;color:var(--muted-foreground)">{{ $ticket->ticket_number }}</code></td>
        <td class="td" style="max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--foreground)">{{ $ticket->subject }}</td>
        <td class="td">
          <div style="font-size:.8125rem;font-weight:500;color:var(--foreground)">{{ $ticket->user->name??'-' }}</div>
          <div style="font-size:.72rem;color:var(--muted-foreground)">{{ $ticket->user->email??'-' }}</div>
        </td>
        <td class="td">
          @php $sc=['open'=>'b-blue','in_progress'=>'b-yellow','resolved'=>'b-green','closed'=>'b-gray']; @endphp
          <span class="badge {{ $sc[$ticket->status]??'b-gray' }}">{{ ucwords(str_replace('_',' ',$ticket->status)) }}</span>
        </td>
        <td class="td">
          @php $pc=['urgent'=>'b-red','high'=>'b-orange','medium'=>'b-yellow','low'=>'b-gray']; @endphp
          <span class="badge {{ $pc[$ticket->priority]??'b-gray' }}">{{ ucfirst($ticket->priority) }}</span>
        </td>
        <td class="td" style="font-size:.78rem">{{ ucfirst($ticket->category) }}</td>
        <td class="td" style="font-size:.78rem;text-align:center">{{ $ticket->replies_count ?? 0 }}</td>
        <td class="td" style="font-size:.75rem;white-space:nowrap;color:var(--muted-foreground)">{{ $ticket->last_reply_at?->diffForHumans()??$ticket->created_at->diffForHumans() }}</td>
        <td class="td"><a href="{{ route('admin.support.show',$ticket) }}" class="btn btn-secondary btn-xs">View <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink:0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a></td>
      </tr>
      @empty
      <tr><td colspan="9" style="padding:3rem;text-align:center;color:var(--muted-foreground);font-size:.875rem">No tickets found.</td></tr>
      @endforelse
    </tbody>
  </table>
  <div style="padding:.875rem 1.25rem;border-top:1px solid var(--border)">{{ $tickets->links() }}</div>
</div>

@endsection