@extends('driver.layout')

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

@section('content')

<div class="max-w-6xl mx-auto">

    {{-- HEADER --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800 dark:text-white">
                My Support Tickets
            </h1>
            <p class="text-sm text-gray-500 dark:text-gray-400">
                Track your support requests and replies
            </p>
        </div>

        <a href="{{ route('driver.support.create') }}"
           class="inline-flex items-center gap-2 px-5 py-2 rounded-xl
                  bg-primary text-white hover:bg-primary/90 transition">
            <i class="bi bi-plus-circle"></i>
            Create Ticket
        </a>
    </div>

    {{-- FLASH MESSAGE --}}
    @if(session('success'))
        <div class="mb-4 rounded-xl bg-green-50 dark:bg-green-900/30
                    p-4 text-green-600">
            {{ session('success') }}
        </div>
    @endif

    {{-- CARD --}}
    <div class="bg-white dark:bg-slate-900
                border border-gray-200 dark:border-slate-700
                rounded-2xl shadow-sm overflow-hidden">

        @if($tickets->isEmpty())
            <div class="p-10 text-center text-gray-500 dark:text-gray-400">
                <i class="bi bi-headset text-4xl mb-3 block"></i>
                <p>No support tickets yet</p>
            </div>
        @else

        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-gray-50 dark:bg-slate-800 text-gray-600 dark:text-gray-300">
                    <tr>
                        <th class="px-6 py-4 text-left">#</th>
                        <th class="px-6 py-4 text-left">Subject</th>
                        <th class="px-6 py-4 text-left">Priority</th>
                        <th class="px-6 py-4 text-left">Status</th>
                        <th class="px-6 py-4 text-left">Last Update</th>
                        <th class="px-6 py-4 text-right">Action</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-200 dark:divide-slate-700">

                    @foreach($tickets as $ticket)
                        <tr class="hover:bg-gray-50 dark:hover:bg-slate-800 transition">

                            {{-- ID --}}
                            <td class="px-6 py-4 font-medium">
                                #{{ $ticket->id }}
                            </td>

                            {{-- SUBJECT --}}
                            <td class="px-6 py-4">
                                <div class="font-semibold text-gray-800 dark:text-white">
                                    {{ $ticket->subject }}
                                </div>
                                <div class="text-xs text-gray-500">
                                    {{ $ticket->created_at->format('d M Y') }}
                                </div>
                            </td>

                            {{-- PRIORITY --}}
                            <td class="px-6 py-4">
                                @if($ticket->priority === 'emergency')
                                    <span class="px-3 py-1 rounded-full text-xs
                                                 bg-red-100 text-red-600">
                                        Emergency
                                    </span>
                                @elseif($ticket->priority === 'high')
                                    <span class="px-3 py-1 rounded-full text-xs
                                                 bg-yellow-100 text-yellow-700">
                                        High
                                    </span>
                                @else
                                    <span class="px-3 py-1 rounded-full text-xs
                                                 bg-gray-100 text-gray-600">
                                        Low
                                    </span>
                                @endif
                            </td>

                            {{-- STATUS --}}
                            <td class="px-6 py-4">
                                <span class="px-3 py-1 rounded-full text-xs
                                    {{ $ticket->status === 'open'
                                        ? 'bg-green-100 text-green-600'
                                        : 'bg-gray-200 text-gray-600' }}">
                                    {{ ucfirst($ticket->status) }}
                                </span>
                            </td>

                            {{-- LAST UPDATE --}}
                            <td class="px-6 py-4 text-gray-500 text-xs">
                                {{ optional($ticket->replies->last())->created_at
                                    ? $ticket->replies->last()->created_at->diffForHumans()
                                    : '—' }}
                            </td>

                            {{-- ACTION --}}
                            <td class="px-6 py-4 text-right">
                                <a href="{{ route('driver.support.history') }}"
                                   class="inline-flex items-center gap-1
                                          px-4 py-2 rounded-xl
                                          border border-gray-300 dark:border-slate-700
                                          text-gray-700 dark:text-gray-300
                                          hover:bg-gray-100 dark:hover:bg-slate-800 transition">
                                    View
                                </a>
                            </td>

                        </tr>
                    @endforeach

                </tbody>
            </table>
        </div>

        @endif

    </div>

</div>

@endsection