@extends('admin.layouts.app')

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

@section('content')
    <div class="space-y-6">
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold text-white">Support Tickets</h1>
                <p class="text-slate-400 text-sm">Manage and respond to user support requests.</p>
            </div>
        </div>

        <!-- Status Tabs -->
        <div class="flex gap-2 p-1 bg-slate-900/50 border border-slate-800 rounded-xl w-fit">
            <a href="{{ route('admin.tickets.index', ['status' => 'open']) }}"
                class="px-4 py-2 rounded-lg text-sm font-medium transition-all {{ $status === 'open' ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20' : 'text-slate-400 hover:text-white' }}">
                Open Tickets
                <span class="ml-2 px-1.5 py-0.5 rounded-md bg-white/10 text-xs">{{ $counts['open'] }}</span>
            </a>
            <a href="{{ route('admin.tickets.index', ['status' => 'closed']) }}"
                class="px-4 py-2 rounded-lg text-sm font-medium transition-all {{ $status === 'closed' ? 'bg-slate-700 text-white' : 'text-slate-400 hover:text-white' }}">
                Closed Tickets
                <span class="ml-2 px-1.5 py-0.5 rounded-md bg-white/10 text-xs">{{ $counts['closed'] }}</span>
            </a>
        </div>

        <div class="glass-card rounded-2xl border border-white/5 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-white/5 border-b border-white/5">
                            <th class="px-6 py-4 text-xs uppercase font-bold text-slate-400 tracking-wider">Ticket Details
                            </th>
                            <th class="px-6 py-4 text-xs uppercase font-bold text-slate-400 tracking-wider">Status</th>
                            <th class="px-6 py-4 text-xs uppercase font-bold text-slate-400 tracking-wider">Last Updated
                            </th>
                            <th class="px-6 py-4 text-xs uppercase font-bold text-slate-400 tracking-wider text-right">
                                Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/5">
                        @forelse($tickets as $ticket)
                            <tr class="hover:bg-white/[0.02] transition-colors group">
                                <td class="px-6 py-4">
                                    <div class="flex flex-col">
                                        <span class="text-sm font-bold text-white group-hover:text-blue-400 transition-colors">
                                            {{ $ticket->subject }}
                                        </span>
                                        <span class="text-xs text-slate-500 mt-1">
                                            #{{ $ticket->ticket_number }} • Order #{{ $ticket->order->order_number ?? 'N/A' }}
                                        </span>
                                        <div class="flex items-center gap-2 mt-2">
                                            <div
                                                class="w-5 h-5 rounded-full bg-slate-800 flex items-center justify-center text-[10px] text-slate-400 border border-slate-700">
                                                {{ strtoupper(substr($ticket->user->name, 0, 1)) }}
                                            </div>
                                            <span class="text-xs text-slate-400">{{ $ticket->user->name }}</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    @if($ticket->status === 'open')
                                        <span
                                            class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-500 text-xs font-medium border border-emerald-500/20">
                                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                                            Open
                                        </span>
                                    @else
                                        <span
                                            class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-slate-500/10 text-slate-400 text-xs font-medium border border-slate-500/20">
                                            <span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
                                            Closed
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 text-sm text-slate-400">
                                    {{ $ticket->updated_at->diffForHumans() }}
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <a href="{{ route('admin.tickets.show', $ticket) }}"
                                        class="inline-flex items-center justify-center w-9 h-9 rounded-xl bg-blue-500/10 text-blue-400 hover:bg-blue-500 hover:text-white transition-all shadow-lg shadow-blue-500/0 hover:shadow-blue-500/20">
                                        <i data-lucide="eye" class="w-4 h-4"></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-6 py-12 text-center text-slate-500">
                                    <i data-lucide="ticket" class="w-12 h-12 mx-auto mb-4 opacity-20"></i>
                                    <p>No tickets found in this category.</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($tickets->hasPages())
                <div class="px-6 py-4 border-t border-white/5 bg-white/[0.02]">
                    {{ $tickets->appends(['status' => $status])->links() }}
                </div>
            @endif
        </div>
    </div>
@endsection