@extends('layouts.dash')
@section('title', 'Support Tickets')
@section('content')
<div class="page-head">
  <div><h1>Support Tickets</h1><p>We usually reply within a few hours.</p></div>
  <button class="btn btn-primary btn-sm" onclick="openModal('newTicket')"><i class="fa-solid fa-plus"></i>New Ticket</button>
</div>
<div class="card">
  @if($tickets->isEmpty())
    <div class="empty"><i class="fa-solid fa-headset"></i><b>No tickets yet</b>Need help? Open your first ticket.</div>
  @else
  <div class="table-wrap"><table class="tbl">
    <tr><th>#</th><th>Subject</th><th>API</th><th>Priority</th><th>Status</th><th>Updated</th><th></th></tr>
    @foreach($tickets as $t)
    <tr>
      <td><b>{{ $t->id }}</b></td>
      <td><b>{{ $t->subject }}</b></td>
      <td class="text-sm">{{ $t->service->name ?? 'General' }}</td>
      <td>{!! badge($t->priority) !!}</td>
      <td>{!! badge($t->status) !!}</td>
      <td class="text-sm text-gray">{{ $t->updated_at->diffForHumans() }}</td>
      <td><a class="btn btn-ghost btn-xs" href="{{ route('user.tickets.show', $t) }}"><i class="fa-solid fa-eye"></i> Open</a></td>
    </tr>
    @endforeach
  </table></div>
  {{ $tickets->links() }}
  @endif
</div>

<div class="modal-bg" id="newTicket">
  <div class="modal">
    <h3><i class="fa-solid fa-plus text-primary"></i> New Support Ticket</h3>
    <p class="sub">Describe your issue clearly.</p>
    <form method="POST" action="{{ route('user.tickets.store') }}">
      @csrf
      <div class="form-group"><label>Subject <span class="req">*</span></label><input type="text" name="subject" class="form-control" required maxlength="200"></div>
      <div class="form-row">
        <div class="form-group"><label>Related API</label><select name="service_id" class="form-control"><option value="">General</option>@foreach($services as $s)<option value="{{ $s->id }}">{{ $s->name }}</option>@endforeach</select></div>
        <div class="form-group"><label>Priority</label><select name="priority" class="form-control"><option value="low">Low</option><option value="medium" selected>Medium</option><option value="high">High</option></select></div>
      </div>
      <div class="form-group"><label>Message <span class="req">*</span></label><textarea name="message" class="form-control" required></textarea></div>
      <div class="flex gap">
        <button type="button" class="btn btn-outline" style="flex:1" onclick="closeModal('newTicket')">Cancel</button>
        <button class="btn btn-primary" style="flex:1" type="submit"><i class="fa-solid fa-paper-plane"></i>Create</button>
      </div>
    </form>
  </div>
</div>
@endsection