@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Tickets</h1>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Manage and track support tickets</p>
        </div>
        <a href="{{ route('tickets.create') }}" class="btn btn-primary">
            <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Create Ticket
        </a>
    </div>

    <!-- Filter Tabs -->
    <div class="mb-6">
        <div class="border-b border-gray-200 dark:border-gray-700">
            <nav class="-mb-px flex space-x-8">
                <a href="{{ route('tickets.index', ['filter' => 'all']) }}"
                   class="py-4 px-1 border-b-2 font-medium text-sm {{ $filter === 'all' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400' }}">
                    All Tickets
                </a>
                <a href="{{ route('tickets.index', ['filter' => 'mine']) }}"
                   class="py-4 px-1 border-b-2 font-medium text-sm {{ $filter === 'mine' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400' }}">
                    Assigned to Me
                </a>
                @if(auth()->user()->department_id)
                <a href="{{ route('tickets.index', ['filter' => 'department']) }}"
                   class="py-4 px-1 border-b-2 font-medium text-sm {{ $filter === 'department' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400' }}">
                    My Department
                </a>
                @endif
            </nav>
        </div>
    </div>

    <!-- Filters Row -->
    <div class="mb-6 flex flex-wrap gap-3">
        <select id="statusFilter" onchange="applyFilters()" class="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm">
            <option value="">All Statuses</option>
            <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
            <option value="picked_up" {{ request('status') === 'picked_up' ? 'selected' : '' }}>Picked Up</option>
            <option value="in_progress" {{ request('status') === 'in_progress' ? 'selected' : '' }}>In Progress</option>
            <option value="transferred" {{ request('status') === 'transferred' ? 'selected' : '' }}>Transferred</option>
            <option value="resolved" {{ request('status') === 'resolved' ? 'selected' : '' }}>Resolved</option>
            <option value="reopened" {{ request('status') === 'reopened' ? 'selected' : '' }}>Reopened</option>
        </select>
        <select id="priorityFilter" onchange="applyFilters()" class="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm">
            <option value="">All Priorities</option>
            <option value="urgent" {{ request('priority') === 'urgent' ? 'selected' : '' }}>Urgent</option>
            <option value="high" {{ request('priority') === 'high' ? 'selected' : '' }}>High</option>
            <option value="medium" {{ request('priority') === 'medium' ? 'selected' : '' }}>Medium</option>
            <option value="low" {{ request('priority') === 'low' ? 'selected' : '' }}>Low</option>
        </select>
        @if(request('status') || request('priority'))
        <a href="{{ route('tickets.index', ['filter' => $filter]) }}" class="px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
            Clear Filters
        </a>
        @endif
    </div>

    <!-- Tickets Table -->
    <div class="card overflow-hidden p-0">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Ticket</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Customer</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Priority</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Assigned To</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Created</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse($tickets as $ticket)
                    @php
                        $priorityColors = [
                            'low' => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200',
                            'medium' => 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
                            'high' => 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
                            'urgent' => 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
                        ];
                        $statusColors = [
                            'pending' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
                            'picked_up' => 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200',
                            'in_progress' => 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
                            'transferred' => 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
                            'resolved' => 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
                            'reopened' => 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
                        ];
                    @endphp
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                        <td class="px-6 py-4">
                            <a href="{{ route('tickets.show', $ticket) }}" class="text-blue-600 dark:text-blue-400 font-medium hover:underline">
                                {{ $ticket->ticket_number }}
                            </a>
                            <div class="flex flex-wrap gap-1 mt-1">
                                @foreach($ticket->issueTypes->take(2) as $issue)
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
                                    {{ $issue->value }}
                                </span>
                                @endforeach
                                @if($ticket->issueTypes->count() > 2)
                                <span class="text-xs text-gray-500">+{{ $ticket->issueTypes->count() - 2 }}</span>
                                @endif
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $ticket->customer_name }}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">{{ $ticket->customer_email }}</div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="px-2.5 py-0.5 rounded-full text-xs font-medium {{ $priorityColors[$ticket->priority] ?? 'bg-gray-100' }}">
                                {{ ucfirst($ticket->priority) }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            @if($ticket->assignedUser)
                                <div class="text-sm text-gray-900 dark:text-white">{{ $ticket->assignedUser->name }}</div>
                                <div class="text-xs text-gray-500">{{ $ticket->assignedDepartment->name ?? '' }}</div>
                            @elseif($ticket->pickedUpByUser)
                                <div class="text-sm text-gray-900 dark:text-white">{{ $ticket->pickedUpByUser->name }}</div>
                                <div class="text-xs text-gray-500">Picked up</div>
                            @elseif($ticket->assignedDepartment)
                                <div class="text-sm text-gray-900 dark:text-white">{{ $ticket->assignedDepartment->name }}</div>
                                <div class="text-xs text-gray-500">Awaiting pickup</div>
                            @else
                                <span class="text-sm text-gray-400">Unassigned</span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <span class="px-2.5 py-0.5 rounded-full text-xs font-medium {{ $statusColors[$ticket->status] ?? 'bg-gray-100' }}">
                                {{ $ticket->status_label }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                            {{ $ticket->created_at->format('M d, Y') }}
                            <div class="text-xs">{{ $ticket->created_at->format('h:i A') }}</div>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <div class="flex justify-end gap-2">
                                <a href="{{ route('tickets.show', $ticket) }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 text-sm">
                                    View
                                </a>
                                @if($ticket->canBePickedUpBy(auth()->user()))
                                <button onclick="pickupTicket({{ $ticket->id }})" class="text-green-600 dark:text-green-400 hover:text-green-900 text-sm">
                                    Pick Up
                                </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-12 text-center">
                            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
                            </svg>
                            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No tickets found</h3>
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Get started by creating a new ticket.</p>
                            <div class="mt-6">
                                <a href="{{ route('tickets.create') }}" class="btn btn-primary">
                                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                                    </svg>
                                    Create Ticket
                                </a>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($tickets->hasPages())
        <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
            {{ $tickets->links() }}
        </div>
        @endif
    </div>
</div>

<script>
function applyFilters() {
    const status = document.getElementById('statusFilter').value;
    const priority = document.getElementById('priorityFilter').value;
    const url = new URL(window.location.href);

    if (status) url.searchParams.set('status', status);
    else url.searchParams.delete('status');

    if (priority) url.searchParams.set('priority', priority);
    else url.searchParams.delete('priority');

    window.location.href = url.toString();
}

function pickupTicket(ticketId) {
    fetch(`/tickets/${ticketId}/pickup`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert(data.error || 'Failed to pick up ticket');
        }
    });
}
</script>
@endsection