<!-- Customer Analytics 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">Customer Analytics</h2>
        <div class="flex items-center space-x-2">
            <span class="text-sm text-zinc-500 dark:text-zinc-400">Customer Insights</span>
        </div>
    </div>

    @if(isset($customerAnalytics) && count($customerAnalytics) > 0)
        <!-- Customer Stats Grid -->
        <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-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">Total Customers</p>
                        <p class="text-2xl font-bold">{{ number_format($customerAnalytics['total_customers'] ?? 0) }}</p>
                    </div>
                    <i class="fas fa-users text-blue-200 text-2xl"></i>
                </div>
            </div>

            <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">New Customers</p>
                        <p class="text-2xl font-bold">{{ number_format($customerAnalytics['new_customers'] ?? 0) }}</p>
                    </div>
                    <i class="fas fa-user-plus text-green-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">Retention Rate</p>
                        <p class="text-2xl font-bold">{{ number_format($customerAnalytics['customer_retention_rate'] ?? 0, 1) }}%</p>
                    </div>
                    <i class="fas fa-heart 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">Avg Order Value</p>
                        <p class="text-2xl font-bold">${{ number_format($customerAnalytics['avg_order_value'] ?? 0, 2) }}</p>
                    </div>
                    <i class="fas fa-dollar-sign text-orange-200 text-2xl"></i>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Customer Acquisition Trend -->
            <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">Customer Insights</h3>
                
                <div class="space-y-4">
                    <div class="flex justify-between items-center p-3 bg-white dark:bg-zinc-800 rounded-lg">
                        <span class="text-gray-700 dark:text-gray-300">New Customer Acquisition</span>
                        <span class="text-lg font-bold text-green-600">+{{ $customerAnalytics['new_customers'] ?? 0 }}</span>
                    </div>
                    
                    <div class="flex justify-between items-center p-3 bg-white dark:bg-zinc-800 rounded-lg">
                        <span class="text-gray-700 dark:text-gray-300">Returning Customers</span>
                        <span class="text-lg font-bold text-blue-600">{{ $customerAnalytics['customer_retention_count'] ?? 0 }}</span>
                    </div>
                    
                    <div class="flex justify-between items-center p-3 bg-white dark:bg-zinc-800 rounded-lg">
                        <span class="text-gray-700 dark:text-gray-300">Customer Retention Rate</span>
                        <span class="text-lg font-bold text-purple-600">{{ number_format($customerAnalytics['customer_retention_rate'] ?? 0, 1) }}%</span>
                    </div>
                    
                    <!-- Retention Rate Progress Bar -->
                    <div class="mt-4">
                        <div class="flex justify-between text-sm text-zinc-600 dark:text-zinc-400 dark:text-gray-400 mb-1">
                            <span>Retention Performance</span>
                            <span>{{ number_format($customerAnalytics['customer_retention_rate'] ?? 0, 1) }}%</span>
                        </div>
                        <div class="w-full bg-gray-200 dark:bg-zinc-600 rounded-full h-2">
                            <div class="bg-purple-600 h-2 rounded-full transition-all duration-300" 
                                 style="width: {{ min($customerAnalytics['customer_retention_rate'] ?? 0, 100) }}%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Top Customers -->
            <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">Top Customers</h3>
                
                @if(isset($customerAnalytics['top_customers']) && count($customerAnalytics['top_customers']) > 0)
                    <div class="space-y-3">
                        @foreach($customerAnalytics['top_customers']->take(8) as $customer)
                            <div class="flex items-center justify-between p-3 bg-white dark:bg-zinc-800 rounded-lg hover:shadow-md transition-shadow">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-bold">
                                        {{ strtoupper(substr($customer->first_name, 0, 1) . substr($customer->last_name, 0, 1)) }}
                                    </div>
                                    <div>
                                        <p class="font-medium text-zinc-900 dark:text-white dark:text-white">{{ $customer->full_name }}</p>
                                        <p class="text-sm text-zinc-500 dark:text-zinc-400 dark:text-gray-400">{{ $customer->service_orders_count }} orders</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="font-bold text-green-600">${{ number_format($customer->total_spent ?? 0, 2) }}</p>
                                    <p class="text-xs text-zinc-500 dark:text-zinc-400 dark:text-gray-400">Total Spent</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-8">
                        <i class="fas fa-users 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 customer data available</p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Customer Segmentation -->
        <div class="mt-6 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">Customer Segmentation</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-gray-600 rounded-lg p-4 text-center">
                    <i class="fas fa-crown text-yellow-500 text-2xl mb-2"></i>
                    <h4 class="font-semibold text-zinc-900 dark:text-white dark:text-white">VIP Customers</h4>
                    <p class="text-2xl font-bold text-yellow-600">{{ isset($customerAnalytics['top_customers']) ? $customerAnalytics['top_customers']->where('service_orders_count', '>=', 5)->count() : 0 }}</p>
                    <p class="text-sm text-zinc-500 dark:text-zinc-400 dark:text-gray-400">5+ orders</p>
                </div>
                
                <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-gray-600 rounded-lg p-4 text-center">
                    <i class="fas fa-star text-blue-500 text-2xl mb-2"></i>
                    <h4 class="font-semibold text-zinc-900 dark:text-white dark:text-white">Regular Customers</h4>
                    <p class="text-2xl font-bold text-blue-600">{{ isset($customerAnalytics['top_customers']) ? $customerAnalytics['top_customers']->whereBetween('service_orders_count', [2, 4])->count() : 0 }}</p>
                    <p class="text-sm text-zinc-500 dark:text-zinc-400 dark:text-gray-400">2-4 orders</p>
                </div>
                
                <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-gray-600 rounded-lg p-4 text-center">
                    <i class="fas fa-user text-green-500 text-2xl mb-2"></i>
                    <h4 class="font-semibold text-zinc-900 dark:text-white dark:text-white">New Customers</h4>
                    <p class="text-2xl font-bold text-green-600">{{ $customerAnalytics['new_customers'] ?? 0 }}</p>
                    <p class="text-sm text-zinc-500 dark:text-zinc-400 dark:text-gray-400">This period</p>
                </div>
            </div>
        </div>
    @else
        <div class="text-center py-12">
            <i class="fas fa-chart-pie 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 customer analytics data available for the selected period</p>
        </div>
    @endif
</div>
