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

@section('content')
<div class="page-hdr">
  <h1 class="page-hdr__title">Support Tickets</h1>
</div>

<div class="card mb-4">
  <div class="card__head">
    <div>
      <div class="card__title">Create New Ticket</div>
      <div class="card__sub">Send your issue to support team</div>
    </div>
  </div>
  <div class="card__body">
    <form method="POST" action="{{ route('dashboard.tickets.store') }}" enctype="multipart/form-data" style="display:grid;gap:12px;">
      @csrf
      <input type="text" name="subject" class="form-control" placeholder="Subject" required>
      <select name="priority" class="form-control">
        <option value="low">Low</option>
        <option value="normal" selected>Normal</option>
        <option value="high">High</option>
      </select>
      <textarea name="message" class="form-control" rows="4" placeholder="Explain your issue..."></textarea>
      <input type="file" name="attachment" class="form-control" accept=".jpg,.jpeg,.png,.gif,.webp,.pdf,.doc,.docx,.txt,.zip">
      <div>
        <button class="btn btn--primary" type="submit">Create Ticket</button>
      </div>
    </form>
  </div>
</div>

<div class="card">
  <div class="card__head">
    <div>
      <div class="card__title">My Tickets</div>
      <div class="card__sub">All your support conversations</div>
    </div>
  </div>
  <div class="card__body">
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Ticket</th>
            <th>Subject</th>
            <th>Status</th>
            <th>Priority</th>
            <th>Messages</th>
            <th>Updated</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          @forelse($tickets as $ticket)
          <tr>
            <td>{{ $ticket->ticket_no }}</td>
            <td>{{ $ticket->subject }}</td>
            <td>{{ strtoupper($ticket->status) }}</td>
            <td>{{ strtoupper($ticket->priority) }}</td>
            <td>{{ $ticket->messages_count }}</td>
            <td>{{ $ticket->updated_at?->format('Y-m-d H:i') }}</td>
            <td><a class="btn btn--sm btn--outline" href="{{ route('dashboard.tickets.show', $ticket) }}">Open</a></td>
          </tr>
          @empty
          <tr><td colspan="7" style="text-align:center;color:var(--muted);">No tickets yet.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
    <div style="margin-top:12px;">{{ $tickets->links() }}</div>
  </div>
</div>
@endsection