@extends('layouts.user')

@section('title', 'Support Tickets')

@section('content')
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">Support Tickets</h1>
    <a href="/user/tickets/create" class="bg-blue-600 text-white px-4 py-2 rounded">New Ticket</a>
</div>

<div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="table-responsive">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left">Subject</th>
                <th class="px-6 py-3 text-left">Status</th>
                <th class="px-6 py-3 text-left">Last Message</th>
                <th class="px-6 py-3 text-left">Created</th>
                <th class="px-6 py-3"></th>
            </tr>
        </thead>
        <tbody>
            @foreach($tickets as $ticket)
            <tr class="border-t">
                <td class="px-6 py-4">{{ $ticket->subject }}</td>
                <td class="px-6 py-4">
                    <span class="px-2 py-1 text-xs rounded 
                        @if($ticket->status == 'open') bg-green-100 text-green-800
                        @else bg-gray-100 text-gray-800 @endif">
                        {{ $ticket->status }}
                    </span>
                </td>
                <td class="px-6 py-4">{{ $ticket->messages->last()->created_at ?? '-' }}</td>
                <td class="px-6 py-4">{{ $ticket->created_at }}</td>
                <td class="px-6 py-4">
                    <a href="/user/tickets/{{ $ticket->id }}" class="text-blue-600">View</a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    </div>
    <div class="p-4">
        {{ $tickets->links() }}
    </div>
</div>
@endsection