<!-- Performance Metrics Section -->
<div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-6 mt-6">
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-zinc-900 dark:text-white dark:text-white">Performance Metrics</h2>
        <div class="flex items-center space-x-2">
            <span class="text-sm text-zinc-500 dark:text-zinc-400">Operational Performance</span>
        </div>
    </div>

    @if(isset($performanceMetrics) && count($performanceMetrics) > 0)
        <!-- Key Performance Indicators -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
            <div class="bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg p-4">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-green-100 text-sm">Completion Rate</p>
                        <p class="text-2xl font-bold">{{ number_format($performanceMetrics['completion_rate'] ?? 0, 1) }}%</p>
                        <p class="text-green-100 text-xs">{{ $performanceMetrics['completed_orders'] ?? 0 }}/{{ $performanceMetrics['total_orders'] ?? 0 }} orders</p>
                    </div>
                    <i class="fas fa-check-circle text-green-200 text-2xl"></i>
                </div>
            </div>

            <div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg p-4">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-blue-100 text-sm">Avg Completion Time</p>
                        <p class="text-2xl font-bold">{{ number_format($performanceMetrics['avg_completion_time'] ?? 0, 1) }}h</p>
                        <p class="text-blue-100 text-xs">Per order</p>
                    </div>
                    <i class="fas fa-clock text-blue-200 text-2xl"></i>
                </div>
            </div>

            <div class="bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-lg p-4">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-purple-100 text-sm">Customer Satisfaction</p>
                        <p class="text-2xl font-bold">{{ number_format($performanceMetrics['customer_satisfaction'] ?? 0, 1) }}<span class="text-lg">/5</span></p>
                        <p class="text-purple-100 text-xs">Average rating</p>
                    </div>
                    <i class="fas fa-star text-purple-200 text-2xl"></i>
                </div>
            </div>

            <div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded-lg p-4">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-orange-100 text-sm">Total Orders</p>
                        <p class="text-2xl font-bold">{{ number_format($performanceMetrics['total_orders'] ?? 0) }}</p>
                        <p class="text-orange-100 text-xs">This period</p>
                    </div>
                    <i class="fas fa-list-alt text-orange-200 text-2xl"></i>
                </div>
            </div>
        </div>

        <!-- Technician Performance -->
        @if(isset($performanceMetrics['technician_performance']) && count($performanceMetrics['technician_performance']) > 0)
            <div class="mb-8">
                <h3 class="text-lg font-semibold text-zinc-900 dark:text-white dark:text-white mb-4">Technician Performance</h3>
                                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    @foreach(array_slice($performanceMetrics['technician_performance'], 0, 6, true) as $technicianName => $metrics)
                        <div class="bg-zinc-50 dark:bg-zinc-700 rounded-lg p-4">
                            <div class="flex items-center space-x-3 mb-4">
                                <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-bold">
                                    {{ strtoupper(substr($technicianName, 0, 1) . (strpos($technicianName, ' ') ? substr($technicianName, strpos($technicianName, ' ') + 1, 1) : '')) }}
                                </div>
                                <div>
                                    <h4 class="font-medium text-zinc-900 dark:text-white dark:text-white">{{ $technicianName }}</h4>
                                    <p class="text-sm text-zinc-500 dark:text-zinc-400 dark:text-gray-400">Technician</p>
                                </div>
                            </div>
                                
                                <div class="space-y-3">
                                    @foreach($metrics as $metricType => $value)
                                        <div class="flex justify-between items-center">
                                            <span class="text-sm text-zinc-600 dark:text-zinc-400 dark:text-gray-400">
                                                @if($metricType === 'efficiency')
                                                    Efficiency
                                                @elseif($metricType === 'quality')
                                                    Quality Score
                                                @elseif($metricType === 'jobs_completed')
                                                    Jobs Completed
                                                @elseif($metricType === 'customer_rating')
                                                    Customer Rating
                                                @else
                                                    {{ ucwords(str_replace('_', ' ', $metricType)) }}
                                                @endif
                                            </span>
                                            <span class="text-sm font-medium text-zinc-900 dark:text-white dark:text-white">
                                                @if($metricType === 'customer_rating')
                                                    {{ number_format($value, 1) }}/5
                                                @elseif(in_array($metricType, ['efficiency', 'quality']))
                                                    {{ number_format($value, 1) }}%
                                                @else
                                                    {{ number_format($value, 0) }}
                                                @endif
                                            </span>
                                        </div>
                                        
                                        @if($metricType === 'efficiency')
                                            <div class="w-full bg-gray-200 dark:bg-zinc-600 rounded-full h-2">
                                                <div class="bg-green-600 h-2 rounded-full transition-all duration-300" 
                                                     style="width: {{ min($value, 100) }}%"></div>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                    @endforeach
                </div>
            </div>
        @endif

        <!-- Performance Trends -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Efficiency Metrics -->
            <div class="bg-zinc-50 dark:bg-zinc-700 rounded-lg p-6">
                <h3 class="text-lg font-semibold text-zinc-900 dark:text-white dark:text-white mb-4">Efficiency Metrics</h3>
                
                <div class="space-y-4">
                    <div class="flex justify-between items-center p-3 bg-white dark:bg-zinc-800 rounded-lg">
                        <div>
                            <span class="text-gray-700 dark:text-gray-300">Order Completion Rate</span>
                            <p class="text-xs text-zinc-500 dark:text-zinc-400 dark:text-gray-400">Completed vs Total Orders</p>
                        </div>
                        <div class="text-right">
                            <span class="text-lg font-bold text-green-600">{{ number_format($performanceMetrics['completion_rate'] ?? 0, 1) }}%</span>
                            <div class="w-20 bg-gray-200 dark:bg-zinc-600 rounded-full h-2 mt-1">
                                <div class="bg-green-600 h-2 rounded-full" style="width: {{ $performanceMetrics['completion_rate'] ?? 0 }}%"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex justify-between items-center p-3 bg-white dark:bg-zinc-800 rounded-lg">
                        <div>
                            <span class="text-gray-700 dark:text-gray-300">Average Completion Time</span>
                            <p class="text-xs text-zinc-500 dark:text-zinc-400 dark:text-gray-400">Time per order</p>
                        </div>
                        <span class="text-lg font-bold text-blue-600">{{ number_format($performanceMetrics['avg_completion_time'] ?? 0, 1) }} hours</span>
                    </div>
                    
                    <div class="flex justify-between items-center p-3 bg-white dark:bg-zinc-800 rounded-lg">
                        <div>
                            <span class="text-gray-700 dark:text-gray-300">Customer Satisfaction</span>
                            <p class="text-xs text-zinc-500 dark:text-zinc-400 dark:text-gray-400">Average rating</p>
                        </div>
                        <div class="text-right">
                            <span class="text-lg font-bold text-yellow-600">{{ number_format($performanceMetrics['customer_satisfaction'] ?? 0, 1) }}/5</span>
                            <div class="flex space-x-1 mt-1">
                                @for($i = 1; $i <= 5; $i++)
                                    <i class="fas fa-star text-xs {{ $i <= ($performanceMetrics['customer_satisfaction'] ?? 0) ? 'text-yellow-400' : 'text-gray-300' }}"></i>
                                @endfor
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quality Metrics -->
            <div class="bg-zinc-50 dark:bg-zinc-700 rounded-lg p-6">
                <h3 class="text-lg font-semibold text-zinc-900 dark:text-white dark:text-white mb-4">Quality Metrics</h3>
                
                @if(isset($performanceMetrics['technician_performance']) && count($performanceMetrics['technician_performance']) > 0)
                    @php
                        $techData = collect($performanceMetrics['technician_performance']);
                        $avgEfficiency = $techData->avg('efficiency') ?? 0;
                        $avgQuality = $techData->avg('quality') ?? 0;
                        $avgRating = $techData->avg('customer_rating') ?? 0;
                        $reworkRate = max(0, 100 - $avgQuality); // Calculate rework as inverse of quality
                    @endphp
                    
                    <div class="space-y-4">
                        <div class="text-center p-4 bg-white dark:bg-zinc-800 rounded-lg">
                            <div class="text-2xl font-bold text-red-600 mb-1">{{ number_format($reworkRate, 1) }}%</div>
                            <div class="text-sm text-zinc-600 dark:text-zinc-400 dark:text-gray-400">Average Rework Rate</div>
                            <div class="w-full bg-gray-200 dark:bg-zinc-600 rounded-full h-2 mt-2">
                                <div class="bg-red-600 h-2 rounded-full" style="width: {{ min($reworkRate, 100) }}%"></div>
                            </div>
                        </div>
                        
                        <div class="text-center p-4 bg-white dark:bg-zinc-800 rounded-lg">
                            <div class="text-2xl font-bold text-yellow-600 mb-1">{{ number_format($avgRating, 1) }}/5</div>
                            <div class="text-sm text-zinc-600 dark:text-zinc-400 dark:text-gray-400">Average Customer Rating</div>
                            <div class="flex justify-center space-x-1 mt-2">
                                @for($i = 1; $i <= 5; $i++)
                                    <i class="fas fa-star {{ $i <= $avgRating ? 'text-yellow-400' : 'text-gray-300' }}"></i>
                                @endfor
                            </div>
                        </div>
                        
                        <div class="text-center p-4 bg-white dark:bg-zinc-800 rounded-lg">
                            <div class="text-2xl font-bold text-green-600 mb-1">{{ number_format($avgEfficiency, 1) }}%</div>
                            <div class="text-sm text-zinc-600 dark:text-zinc-400 dark:text-gray-400">Average Efficiency Rate</div>
                            <div class="w-full bg-gray-200 dark:bg-zinc-600 rounded-full h-2 mt-2">
                                <div class="bg-green-600 h-2 rounded-full" style="width: {{ min($avgEfficiency, 100) }}%"></div>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="text-center py-8">
                        <i class="fas fa-chart-bar text-4xl text-gray-300 dark:text-zinc-600 dark:text-zinc-400 mb-2"></i>
                        <p class="text-zinc-500 dark:text-zinc-400 dark:text-gray-400">No quality metrics available</p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Performance Insights -->
        <div class="mt-8 bg-gradient-to-r from-green-50 to-blue-50 dark:from-gray-700 dark:to-gray-600 rounded-lg p-6">
            <h3 class="text-lg font-semibold text-zinc-900 dark:text-white dark:text-white mb-4">Performance Insights</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="font-medium text-zinc-900 dark:text-white dark:text-white mb-2">Strengths</h4>
                    <ul class="space-y-2 text-sm text-zinc-600 dark:text-zinc-400 dark:text-gray-400">
                        @if(($performanceMetrics['completion_rate'] ?? 0) >= 85)
                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>High order completion rate</li>
                        @endif
                        @if(($performanceMetrics['customer_satisfaction'] ?? 0) >= 4.0)
                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>Excellent customer satisfaction</li>
                        @endif
                        @if(($performanceMetrics['avg_completion_time'] ?? 999) <= 24)
                            <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i>Fast order completion times</li>
                        @endif
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-medium text-zinc-900 dark:text-white dark:text-white mb-2">Areas for Improvement</h4>
                    <ul class="space-y-2 text-sm text-zinc-600 dark:text-zinc-400 dark:text-gray-400">
                        @if(($performanceMetrics['completion_rate'] ?? 0) < 70)
                            <li class="flex items-center"><i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>Improve order completion rate</li>
                        @endif
                        @if(($performanceMetrics['customer_satisfaction'] ?? 0) < 3.5)
                            <li class="flex items-center"><i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>Focus on customer satisfaction</li>
                        @endif
                        @if(($performanceMetrics['avg_completion_time'] ?? 0) > 48)
                            <li class="flex items-center"><i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>Reduce order completion times</li>
                        @endif
                    </ul>
                </div>
            </div>
        </div>
    @else
        <div class="text-center py-12">
            <i class="fas fa-tachometer-alt text-6xl text-gray-300 dark:text-zinc-600 dark:text-zinc-400 mb-4"></i>
            <p class="text-zinc-500 dark:text-zinc-400 dark:text-gray-400 text-lg">No performance metrics data available for the selected period</p>
        </div>
    @endif
</div>
