<x-app-layout>
<x-module-hero title="Support Tickets" description="Manage and track support requests" icon="fa-ticket">
    <x-slot name="tabs">
        @can('view tickets')
        <a href="{{ route('tickets.index') }}"
           class="module-hero-tab {{ request()->routeIs('tickets.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
            <i class="fas fa-list text-sm"></i> All Tickets
        </a>
        @endcan
        @can('create tickets')
        <a href="{{ route('tickets.create') }}"
           class="module-hero-tab {{ request()->routeIs('tickets.create') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
            <i class="fas fa-plus text-sm"></i> New Ticket
        </a>
        @endcan
    </x-slot>
    @can('create tickets')
    <x-slot name="actions">
        <a href="{{ route('tickets.create') }}"
           class="inline-flex items-center gap-2 px-4 py-2 bg-[#1e293b] text-white text-sm font-semibold rounded-lg hover:bg-[#334155] transition">
            <i class="fas fa-plus"></i> Create Ticket
        </a>
    </x-slot>
    @endcan
</x-module-hero>

<div class="w-full">
    {{-- Search/Filter bar --}}
    <div class="p-4 bg-white border-b">
        <form method="GET" class="flex flex-wrap gap-3 items-end">
            <div class="flex-1 min-w-[200px]">
                <label class="block text-xs font-medium text-gray-600 mb-1">Search</label>
                <input type="text" name="search" value="{{ request('search') }}"
                    placeholder="Search by title, ID, or description..."
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">Status</label>
                <select name="status" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                    <option value="">All Statuses</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                    <option value="resolved" {{ request('status') == 'resolved' ? 'selected' : '' }}>Resolved</option>
                    <option value="closed" {{ request('status') == 'closed' ? 'selected' : '' }}>Closed</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">Priority</label>
                <select name="priority" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                    <option value="">All Priorities</option>
                    <option value="low" {{ request('priority') == 'low' ? 'selected' : '' }}>Low</option>
                    <option value="medium" {{ request('priority') == 'medium' ? 'selected' : '' }}>Medium</option>
                    <option value="high" {{ request('priority') == 'high' ? 'selected' : '' }}>High</option>
                    <option value="urgent" {{ request('priority') == 'urgent' ? 'selected' : '' }}>Urgent</option>
                </select>
            </div>
            <div class="flex gap-2">
                <button type="submit" class="px-4 py-2 bg-[#1e293b] text-white text-sm rounded-lg hover:bg-[#334155] transition">
                    <i class="fas fa-search mr-1"></i> Filter
                </button>
                @if(request()->hasAny(['search', 'status', 'priority']))
                    <a href="{{ route('tickets.index') }}" class="px-4 py-2 border border-gray-300 text-gray-600 text-sm rounded-lg hover:bg-gray-50 transition">
                        <i class="fas fa-times mr-1"></i> Clear
                    </a>
                @endif
            </div>
        </form>
    </div>

    @if(session('success'))
        <div class="mx-4 mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif

    {{-- Table --}}
    <div class="overflow-x-auto">
        <table class="w-full table-zebra">
            <thead>
                <tr>
                    <th class="px-4 py-3 text-left bg-blue-700 text-white text-xs font-semibold uppercase tracking-wider">Ticket ID</th>
                    <th class="px-4 py-3 text-left bg-purple-700 text-white text-xs font-semibold uppercase tracking-wider">Subject</th>
                    <th class="px-4 py-3 text-left bg-green-700 text-white text-xs font-semibold uppercase tracking-wider">Status</th>
                    <th class="px-4 py-3 text-left bg-orange-700 text-white text-xs font-semibold uppercase tracking-wider">Priority</th>
                    <th class="px-4 py-3 text-left bg-teal-700 text-white text-xs font-semibold uppercase tracking-wider">Created By</th>
                    <th class="px-4 py-3 text-left bg-red-700 text-white text-xs font-semibold uppercase tracking-wider">Last Activity</th>
                    <th class="px-4 py-3 text-center bg-indigo-700 text-white text-xs font-semibold uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($tickets as $ticket)
                    <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                        <td class="px-4 py-3 text-sm font-mono text-gray-700">{{ $ticket->unique_identifier }}</td>
                        <td class="px-4 py-3">
                            <div class="text-sm font-medium text-gray-800">{{ Str::limit($ticket->title, 50) }}</div>
                            @if($ticket->category)
                                <div class="text-xs text-gray-500 mt-0.5">{{ $ticket->category }}</div>
                            @endif
                        </td>
                        <td class="px-4 py-3">{!! $ticket->status_badge !!}</td>
                        <td class="px-4 py-3">{!! $ticket->priority_badge !!}</td>
                        <td class="px-4 py-3 text-sm text-gray-600">{{ $ticket->user->name ?? 'Unknown' }}</td>
                        <td class="px-4 py-3 text-sm text-gray-500">{{ $ticket->last_activity_at?->diffForHumans() ?? $ticket->created_at->diffForHumans() }}</td>
                        <td class="px-4 py-3 text-center">
                            <div class="flex items-center justify-center gap-2">
                                <a href="{{ route('tickets.show', $ticket) }}"
                                   class="btn-action-view inline-flex items-center px-2 py-1 text-xs rounded text-white">
                                    <i class="fas fa-eye"></i>
                                </a>
                                @can('edit tickets')
                                    <a href="{{ route('tickets.edit', $ticket) }}"
                                       class="btn-action-edit inline-flex items-center px-2 py-1 text-xs rounded text-white">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                @endcan
                                @can('delete tickets')
                                    @if(auth()->user()->hasAnyRole(['Super Manager', 'Manager']))
                                        <form action="{{ route('tickets.destroy', $ticket) }}" method="POST" class="inline">
                                            @csrf @method('DELETE')
                                            <button type="submit"
                                                class="btn-action-delete inline-flex items-center px-2 py-1 text-xs rounded text-white"
                                                onclick="return confirm('Delete this ticket?')">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    @endif
                                @endcan
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                        <td colspan="7" class="px-4 py-12 text-center text-gray-500">
                            <i class="fas fa-inbox text-4xl mb-4 opacity-50 block"></i>
                            <p>No tickets found.</p>
                            @can('create tickets')
                                <a href="{{ route('tickets.create') }}" class="mt-3 inline-block px-4 py-2 bg-[#1e293b] text-white text-sm rounded-lg hover:bg-[#334155] transition">
                                    <i class="fas fa-plus mr-1"></i> Create Your First Ticket
                                </a>
                            @endcan
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    @if($tickets->hasPages())
        <div class="px-4 py-3 border-t">{{ $tickets->links() }}</div>
    @endif
</div>
</x-app-layout>
