@extends('theme::layouts.app', ['title' => $title ?? __('tickets.title|Support')])

@section('content')
    <main class="flex-grow w-full max-w-[1440px] mx-auto px-6 lg:px-10 py-10">
        <div class="flex flex-col lg:flex-row gap-10">
            @include('theme::partials.account.nav')
            <section class="flex-grow">
                @if(isset($pageHeader))
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
                    <div>
                        <h1 class="text-2xl font-bold text-text-main dark:text-white">{{ $pageHeader['title'] }}</h1>
                        <p class="text-text-muted dark:text-gray-400 mt-1">{{ $pageHeader['subtitle'] }}</p>
                    </div>
                    <a href="{{ route('helpdesk.tickets.create') }}" class="inline-flex items-center justify-center gap-2 px-6 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-semibold transition-all shadow-sm text-sm">
                        <span class="material-symbols-outlined text-[20px]">add</span>
                        {{ __('tickets.Create New Ticket') }}
                    </a>
                </div>
                @endif
                <div class="bg-white dark:bg-surface-dark rounded-xl border border-gray-100 dark:border-gray-800 shadow-soft overflow-hidden">
                    <form method="GET" action="{{ route('helpdesk.tickets.index') }}" class="p-4 border-b border-gray-100 dark:border-gray-800 flex flex-col md:flex-row gap-4 items-center justify-between bg-gray-50/30 dark:bg-gray-800/20">
                        <div class="relative w-full md:w-96">
                            <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-text-muted text-[20px]">search</span>
                            <input name="search" value="{{ $search ?? '' }}" class="w-full pl-10 pr-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-1 focus:ring-primary focus:border-primary focus:outline-none transition-all"
                                   placeholder="{{ __('tickets.Search by ticket ID or subject...') }}" type="text"/>
                        </div>
                        <div class="flex items-center gap-2 w-full md:w-auto">
                            <select name="status" onchange="this.form.submit()" class="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm font-medium text-text-main dark:text-gray-200 focus:ring-1 focus:ring-primary focus:border-primary outline-none transition-colors">
                                <option value="all" {{ !isset($status) || $status === 'all' ? 'selected' : '' }}>{{ __('tickets.All Statuses') }}</option>
                                <option value="Open" {{ isset($status) && $status === 'Open' ? 'selected' : '' }}>{{ __('tickets.Open') }}</option>
                                <option value="In Progress" {{ isset($status) && $status === 'In Progress' ? 'selected' : '' }}>{{ __('tickets.In Progress') }}</option>
                                <option value="Resolved" {{ isset($status) && $status === 'Resolved' ? 'selected' : '' }}>{{ __('tickets.Resolved') }}</option>
                                <option value="Closed" {{ isset($status) && $status === 'Closed' ? 'selected' : '' }}>{{ __('tickets.Closed') }}</option>
                            </select>
                            @if(isset($search) || isset($status))
                                <a href="{{ route('helpdesk.tickets.index') }}" class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-text-main dark:text-gray-200 rounded-lg text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
                                    {{ __('tickets.Clear') }}
                                </a>
                            @endif
                        </div>
                    </form>
                    <div class="overflow-x-auto">
                        <table class="w-full text-left border-collapse">
                            <thead>
                            <tr class="bg-gray-50/50 dark:bg-gray-800/40">
                                <th class="px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">{{ __('tickets.Ticket ID') }}</th>
                                <th class="px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">{{ __('tickets.Subject') }}</th>
                                <th class="px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">{{ __('tickets.Status') }}</th>
                                <th class="px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider">{{ __('tickets.Last Updated') }}</th>
                                <th class="px-6 py-4 text-xs font-bold text-text-muted uppercase tracking-wider text-right">{{ __('tickets.Action') }}</th>
                            </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                            @if($tickets->isEmpty())
                                <tr>
                                    <td colspan="5" class="px-6 py-12 text-center">
                                        <div class="flex flex-col items-center justify-center">
                                            <span class="material-symbols-outlined text-[48px] text-text-muted mb-2">confirmation_number</span>
                                            <p class="text-text-main dark:text-white font-semibold mb-1">{{ __('tickets.No tickets found') }}</p>
                                            <p class="text-sm text-text-muted">{{ __('tickets.Create a new support ticket to get started.') }}</p>
                                        </div>
                                    </td>
                                </tr>
                            @else
                                @foreach($tickets as $ticket)
                                    @php
                                        $statusClasses = [
                                            'Open' => 'bg-emerald-100 text-emerald-800 dark:bg-emerald-500/10 dark:text-emerald-400',
                                            'In Progress' => 'bg-blue-100 text-blue-800 dark:bg-blue-500/10 dark:text-blue-400',
                                            'Resolved' => 'bg-gray-100 text-gray-800 dark:bg-gray-500/10 dark:text-gray-400',
                                            'Closed' => 'bg-gray-100 text-gray-800 dark:bg-gray-500/10 dark:text-gray-400'
                                        ];
                                        $statusDotClasses = [
                                            'Open' => 'bg-emerald-500',
                                            'In Progress' => 'bg-blue-500',
                                            'Resolved' => 'bg-gray-500',
                                            'Closed' => 'bg-gray-500'
                                        ];
                                    @endphp
                                    <tr class="hover:bg-gray-50/50 dark:hover:bg-gray-800/30 transition-colors cursor-pointer" onclick="window.location='{{ route('helpdesk.tickets.show', $ticket->id) }}'">
                                        <td class="px-6 py-5">
                                            <span class="font-mono text-sm font-medium text-primary bg-primary/5 px-2 py-1 rounded">#{{ $ticket->reference_id }}</span>
                                        </td>
                                        <td class="px-6 py-5">
                                            <div>
                                                <p class="text-sm font-semibold text-text-main dark:text-white">{{ $ticket->subject }}</p>
                                                @if($ticket->category)
                                                    <p class="text-xs text-text-muted mt-0.5">{{ $ticket->category->name }}</p>
                                                @endif
                                            </div>
                                        </td>
                                        <td class="px-6 py-5">
                                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium {{ $statusClasses[$ticket->status] ?? 'bg-gray-100 text-gray-800 dark:bg-gray-500/10 dark:text-gray-400' }}">
                                                <span class="inline-block w-2 h-2 rounded-full {{ $statusDotClasses[$ticket->status] ?? 'bg-gray-500' }}"></span>
                                                {{ $ticket->status }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-5">
                                            <span class="text-sm text-text-muted" title="{{ $ticket->updated_at->format('h:i A, d-m-Y') }}">{{ $ticket->updated_at->diffForHumans() }}</span>
                                        </td>
                                        <td class="px-6 py-5 text-right">
                                            <a href="{{ route('helpdesk.tickets.show', $ticket->id) }}" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors inline-block" onclick="event.stopPropagation()">
                                                <span class="material-symbols-outlined text-text-muted text-[20px]">chevron_right</span>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                            </tbody>
                        </table>
                    </div>
                    @if($tickets->hasPages() || $tickets->count() > 0)
                        <div class="px-6 py-4 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between">
                            <p class="text-xs text-text-muted">
                                {{ __('tickets.Showing') }} 
                                <span class="font-medium text-text-main dark:text-white">{{ $tickets->firstItem() ?? 0 }} - {{ $tickets->lastItem() ?? 0 }}</span> 
                                {{ __('tickets.of') }} 
                                <span class="font-medium text-text-main dark:text-white">{{ $tickets->total() }}</span> 
                                {{ __('tickets.tickets') }}
                            </p>
                            @if($tickets->hasPages())
                                <div class="flex items-center gap-2">
                                    @if($tickets->onFirstPage())
                                        <button class="inline-flex items-center justify-center p-2 border border-gray-200 dark:border-gray-700 rounded-lg text-text-muted hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors disabled:opacity-50" disabled>
                                            <span class="material-symbols-outlined text-[18px]">chevron_left</span>
                                        </button>
                                    @else
                                        <a href="{{ $tickets->previousPageUrl() }}" class="inline-flex items-center justify-center p-2 border border-gray-200 dark:border-gray-700 rounded-lg text-text-muted hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                                            <span class="material-symbols-outlined text-[18px]">chevron_left</span>
                                        </a>
                                    @endif
                                    
                                    @if($tickets->hasMorePages())
                                        <a href="{{ $tickets->nextPageUrl() }}" class="inline-flex items-center justify-center p-2 border border-gray-200 dark:border-gray-700 rounded-lg text-text-muted hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                                            <span class="material-symbols-outlined text-[18px]">chevron_right</span>
                                        </a>
                                    @else
                                        <button class="inline-flex items-center justify-center p-2 border border-gray-200 dark:border-gray-700 rounded-lg text-text-muted hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors disabled:opacity-50" disabled>
                                            <span class="material-symbols-outlined text-[18px]">chevron_right</span>
                                        </button>
                                    @endif
                                </div>
                            @endif
                        </div>
                    @endif
                </div>
            </section>
        </div>
    </main>
@endsection