@extends('admin.layout')

@section('title', 'Notifications')

@section('header', 'Notifications')

@section('content')
<div class="max-w-7xl mx-auto">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Notifications</h2>
                <p class="text-gray-600 dark:text-gray-400 mt-1">View and manage all pending tickets and updates</p>
            </div>
            <div class="flex items-center space-x-4">
                <div class="text-sm text-gray-600 dark:text-gray-400">
                    <span class="font-semibold text-purple-600 dark:text-purple-400">{{ method_exists($notifications, 'total') ? $notifications->total() : $notifications->count() }}</span> 
                    pending notification{{ (method_exists($notifications, 'total') ? $notifications->total() : $notifications->count()) != 1 ? 's' : '' }}
                </div>
                <a href="{{ route('admin.tickets.index') }}" class="px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-blue-700 transition-all duration-200 font-medium shadow-sm hover:shadow-md">
                    <i class="fas fa-ticket-alt mr-2"></i>View All Tickets
                </a>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-6">
        <div class="flex flex-wrap items-center gap-4">
            <div class="flex items-center space-x-2">
                <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Status:</label>
                <select class="px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                    <option value="all">All Status</option>
                    <option value="open">Open</option>
                    <option value="assigned">Assigned</option>
                </select>
            </div>
            <div class="flex items-center space-x-2">
                <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Priority:</label>
                <select class="px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                    <option value="all">All Priorities</option>
                    <option value="high">High</option>
                    <option value="medium">Medium</option>
                    <option value="low">Low</option>
                </select>
            </div>
            <div class="flex items-center space-x-2">
                <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Time:</label>
                <select class="px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                    <option value="all">All Time</option>
                    <option value="today">Today</option>
                    <option value="week">This Week</option>
                    <option value="month">This Month</option>
                </select>
            </div>
            <button class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors duration-200 text-sm font-medium">
                <i class="fas fa-filter mr-2"></i>Apply Filters
            </button>
        </div>
    </div>

    <!-- Notifications List -->
    @if($notifications->count() > 0)
        <div class="space-y-4">
            @foreach($notifications as $notification)
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 overflow-hidden border-l-4 {{ $notification->status == 'open' ? 'border-yellow-500' : 'border-blue-500' }}">
                    <div class="p-6">
                        <div class="flex items-start justify-between">
                            <div class="flex items-start space-x-4 flex-1">
                                <!-- Status Icon -->
                                <div class="flex-shrink-0">
                                    @if($notification->status == 'open')
                                        <div class="w-12 h-12 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center shadow-lg">
                                            <i class="fas fa-exclamation-circle text-white text-lg"></i>
                                        </div>
                                    @else
                                        <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-cyan-500 rounded-full flex items-center justify-center shadow-lg">
                                            <i class="fas fa-user-clock text-white text-lg"></i>
                                        </div>
                                    @endif
                                </div>
                                
                                <!-- Notification Content -->
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center justify-between mb-2">
                                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                                            Ticket #{{ $notification->ticket_id }}
                                        </h3>
                                        <div class="flex items-center space-x-2">
                                            @if($notification->priority == 'high')
                                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-red-400 to-red-600 text-white">
                                                    <i class="fas fa-flag mr-1"></i>High Priority
                                                </span>
                                            @elseif($notification->priority == 'medium')
                                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-yellow-400 to-orange-400 text-white">
                                                    <i class="fas fa-flag mr-1"></i>Medium Priority
                                                </span>
                                            @else
                                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-green-400 to-emerald-400 text-white">
                                                    <i class="fas fa-flag mr-1"></i>Low Priority
                                                </span>
                                            @endif
                                            
                                            @if($notification->status == 'open')
                                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-yellow-400 to-orange-400 text-white">
                                                    <i class="fas fa-clock mr-1"></i>Open
                                                </span>
                                            @else
                                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-blue-400 to-cyan-400 text-white">
                                                    <i class="fas fa-user-check mr-1"></i>Assigned
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                    
                                    <p class="text-gray-700 dark:text-gray-300 mb-3">
                                        {{ $notification->issue_description }}
                                    </p>
                                    
                                    <div class="flex items-center space-x-6 text-sm text-gray-600 dark:text-gray-400">
                                        <div class="flex items-center">
                                            <i class="fas fa-building mr-2 text-purple-500"></i>
                                            <span>{{ $notification->apartment->name ?? 'Unknown Apartment' }}</span>
                                        </div>
                                        
                                        @if($notification->technician)
                                            <div class="flex items-center">
                                                <i class="fas fa-user mr-2 text-blue-500"></i>
                                                <span>{{ $notification->technician->name }}</span>
                                            </div>
                                        @endif
                                        
                                        <div class="flex items-center">
                                            <i class="fas fa-calendar mr-2 text-green-500"></i>
                                            <span>{{ $notification->created_at->format('M d, Y - h:i A') }}</span>
                                        </div>
                                        
                                        <div class="flex items-center">
                                            <i class="fas fa-hourglass-half mr-2 text-orange-500"></i>
                                            <span>{{ $notification->created_at->diffForHumans() }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Action Buttons -->
                        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <a href="{{ route('admin.tickets.show', $notification) }}" 
                                   class="px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-600 text-white rounded-lg hover:from-purple-600 hover:to-indigo-700 transition-all duration-200 text-sm font-medium shadow-sm hover:shadow-md">
                                    <i class="fas fa-eye mr-2"></i>View Details
                                </a>
                                
                                @if($notification->status == 'open')
                                    <a href="{{ route('admin.tickets.edit', $notification) }}" 
                                       class="px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-blue-700 transition-all duration-200 text-sm font-medium shadow-sm hover:shadow-md">
                                        <i class="fas fa-edit mr-2"></i>Assign Technician
                                    </a>
                                @endif
                            </div>
                            
                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                Ticket ID: {{ $notification->id }}
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        
        <!-- Pagination -->
        <div class="mt-8">
            @if(method_exists($notifications, 'links'))
                {{ $notifications->links() }}
            @endif
        </div>
    @else
        <!-- Empty State -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-12 text-center">
            <div class="w-20 h-20 bg-gradient-to-r from-green-400 to-emerald-400 rounded-full flex items-center justify-center mx-auto mb-6">
                <i class="fas fa-check-circle text-white text-3xl"></i>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">No Notifications</h3>
            <p class="text-gray-600 dark:text-gray-400 mb-6">All caught up! There are no pending notifications at the moment.</p>
            <a href="{{ route('admin.tickets.index') }}" 
               class="px-6 py-3 bg-gradient-to-r from-purple-500 to-indigo-600 text-white rounded-lg hover:from-purple-600 hover:to-indigo-700 transition-all duration-200 font-medium shadow-sm hover:shadow-md">
                <i class="fas fa-ticket-alt mr-2"></i>View All Tickets
            </a>
        </div>
    @endif
</div>
@endsection