@extends('layouts.user')

@section('page-title', __('Support Tickets'))

@section('content')
<div class="mb-6 flex items-center justify-between">
    <h2 class="text-xl font-bold">{{ __('Your Tickets') }}</h2>
    <a href="{{ route('user.tickets.create') }}" class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">{{ __('Open Ticket') }}</a>
</div>

<div class="bg-white rounded-xl border border-gray-200 overflow-x-auto">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 border-b border-gray-200">
            <tr>
                <th class="text-left px-4 py-3 font-medium text-gray-600">{{ __('Ticket') }}</th>
                <th class="text-left px-4 py-3 font-medium text-gray-600">{{ __('Subject') }}</th>
                <th class="text-center px-4 py-3 font-medium text-gray-600">{{ __('Priority') }}</th>
                <th class="text-center px-4 py-3 font-medium text-gray-600">{{ __('Status') }}</th>
                <th class="text-left px-4 py-3 font-medium text-gray-600">{{ __('Last reply') }}</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @forelse($tickets as $ticket)
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 font-mono text-xs"><a href="{{ route('user.tickets.show', $ticket) }}" class="text-indigo-600 hover:underline">{{ $ticket->code }}</a></td>
                    <td class="px-4 py-3"><a href="{{ route('user.tickets.show', $ticket) }}" class="hover:text-indigo-600">{{ $ticket->subject }}</a></td>
                    <td class="px-4 py-3 text-center">
                        <span class="px-2 py-1 text-xs font-medium rounded-full
                            {{ $ticket->priority === 'urgent' ? 'bg-red-100 text-red-700' : '' }}
                            {{ $ticket->priority === 'high' ? 'bg-orange-100 text-orange-700' : '' }}
                            {{ $ticket->priority === 'medium' ? 'bg-blue-100 text-blue-700' : '' }}
                            {{ $ticket->priority === 'low' ? 'bg-gray-100 text-gray-700' : '' }}">
                            {{ ucfirst($ticket->priority) }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-center">
                        <span class="px-2 py-1 text-xs font-medium rounded-full
                            {{ $ticket->status === 'open' ? 'bg-yellow-100 text-yellow-700' : '' }}
                            {{ $ticket->status === 'answered' ? 'bg-blue-100 text-blue-700' : '' }}
                            {{ $ticket->status === 'waiting' ? 'bg-gray-100 text-gray-700' : '' }}
                            {{ $ticket->status === 'closed' ? 'bg-green-100 text-green-700' : '' }}">
                            {{ ucfirst($ticket->status) }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-gray-500">{{ $ticket->last_reply_at?->diffForHumans() ?? '—' }}</td>
                </tr>
            @empty
                <tr><td colspan="5" class="px-4 py-12 text-center text-gray-500">{{ __('No tickets yet') }}</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
<div class="mt-4">{{ $tickets->links() }}</div>
@endsection