@extends('layouts.app')

@section('title', 'Client Performance Report')
@section('no-page-header')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Client Performance Report</h1>
                <p class="mt-1 text-sm text-gray-500">Monitor and analyze client performance metrics</p>
            </div>
            <div class="mt-4 sm:mt-0 flex flex-col sm:flex-row gap-3">
                <select class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="periodSelector" onchange="changePeriod()">
                    <option value="7days" {{ $period === '7days' ? 'selected' : '' }}>Last 7 Days</option>
                    <option value="30days" {{ $period === '30days' ? 'selected' : '' }}>Last 30 Days</option>
                    <option value="90days" {{ $period === '90days' ? 'selected' : '' }}>Last 90 Days</option>
                    <option value="1year" {{ $period === '1year' ? 'selected' : '' }}>Last Year</option>
                </select>
                <select class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" id="clientSelector" onchange="changeClient()">
                    <option value="">All Clients</option>
                    @foreach($clients as $client)
                        <option value="{{ $client->id }}" {{ $clientId == $client->id ? 'selected' : '' }}>
                            {{ $client->name }}
                        </option>
                    @endforeach
                </select>
                <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center gap-2" onclick="refreshDashboard()">
                    <i class="fas fa-sync-alt"></i>
                    Refresh
                </button>
            </div>
        </div>
    </div>
                    @if($clientId)
                        <!-- Individual Client Performance -->
                        <div class="mb-6">
                            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-gray-100">
                                    <div class="flex items-center">
                                        <div class="p-2 bg-blue-100 rounded-lg mr-3">
                                            <i class="fas fa-building text-blue-600 text-xl"></i>
                                        </div>
                                        <div>
                                            <div class="text-sm font-semibold text-gray-900">{{ $performance['client']->name }}</div>
                                            <div class="text-xs text-gray-500">{{ $performance['client']->city ?? 'N/A' }}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-6">
                                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                                        <div class="bg-white rounded-lg border border-gray-100 p-4">
                                            <div class="text-center">
                                                <div class="text-2xl font-bold text-green-600 mb-1">{{ $performance['transit_summary']['completion_rate'] }}%</div>
                                                <p class="text-sm text-gray-500">Service Efficiency</p>
                                            </div>
                                        </div>
                                        <div class="bg-white rounded-lg border border-gray-100 p-4">
                                            <div class="text-center">
                                                <div class="text-2xl font-bold text-blue-600 mb-1">{{ $performance['performance_metrics']['security_compliance'] }}%</div>
                                                <p class="text-sm text-gray-500">Security Compliance</p>
                                            </div>
                                        </div>
                                        <div class="bg-white rounded-lg border border-gray-100 p-4">
                                            <div class="text-center">
                                                <div class="text-2xl font-bold text-yellow-600 mb-1">{{ $performance['assigned_employees'] }}</div>
                                                <p class="text-sm text-gray-500">Assigned Employees</p>
                                            </div>
                                        </div>
                                        <div class="bg-white rounded-lg border border-gray-100 p-4">
                                            <div class="text-center">
                                                <div class="text-2xl font-bold text-red-600 mb-1">{{ $performance['performance_metrics']['total_distance'] }}</div>
                                                <p class="text-sm text-gray-500">Total Distance (km)</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Client Analytics -->
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-gray-100">
                                    <h6 class="text-lg font-bold text-gray-900 m-0 flex items-center">
                                        <div class="p-2 bg-purple-100 rounded-lg mr-3">
                                            <i class="fas fa-chart-pie text-purple-600 text-sm"></i>
                                        </div>
                                        Transit Analytics
                                    </h6>
                                </div>
                                <div class="p-6">
                                    <div class="relative" style="height: 300px;">
                                        <canvas id="transitAnalyticsChart" class="w-full h-full"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-gray-100">
                                    <h6 class="text-lg font-bold text-gray-900 m-0 flex items-center">
                                        <div class="p-2 bg-indigo-100 rounded-lg mr-3">
                                            <i class="fas fa-shield-alt text-indigo-600 text-sm"></i>
                                        </div>
                                        Security Metrics
                                    </h6>
                                </div>
                                <div class="p-6">
                                    <div class="relative" style="height: 300px;">
                                        <canvas id="securityMetricsChart" class="w-full h-full"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Detailed Metrics -->
                        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-gray-100">
                                    <h6 class="text-lg font-bold text-gray-900 m-0 flex items-center">
                                        <div class="p-2 bg-green-100 rounded-lg mr-3">
                                            <i class="fas fa-route text-green-600 text-sm"></i>
                                        </div>
                                        Transit Details
                                    </h6>
                                </div>
                                <div class="p-6">
                                    <div class="space-y-3">
                                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
                                            <span class="text-sm font-semibold text-gray-700">Total Transits</span>
                                            <span class="text-sm font-bold text-gray-900 bg-gray-100 px-3 py-1 rounded-full">{{ $performance['transit_summary']['total_transits'] }}</span>
                                        </div>
                                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
                                            <span class="text-sm font-semibold text-gray-700">Completed</span>
                                            <span class="text-sm font-bold text-green-600 bg-green-50 px-3 py-1 rounded-full">{{ $performance['transit_summary']['completed_transits'] }}</span>
                                        </div>
                                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
                                            <span class="text-sm font-semibold text-gray-700">In Progress</span>
                                            <span class="text-sm font-bold text-blue-600 bg-blue-50 px-3 py-1 rounded-full">{{ $performance['transit_summary']['in_progress_transits'] }}</span>
                                        </div>
                                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
                                            <span class="text-sm font-semibold text-gray-700">Delayed</span>
                                            <span class="text-sm font-bold text-yellow-600 bg-yellow-50 px-3 py-1 rounded-full">{{ $performance['transit_summary']['delayed_transits'] }}</span>
                                        </div>
                                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
                                            <span class="text-sm font-semibold text-gray-700">Completion Rate</span>
                                            <span class="text-sm font-bold text-green-600 bg-green-50 px-3 py-1 rounded-full">{{ $performance['transit_summary']['completion_rate'] }}%</span>
                                        </div>
                                        <div class="flex justify-between items-center py-2">
                                            <span class="text-sm font-semibold text-gray-700">Total Distance</span>
                                            <span class="text-sm font-bold text-gray-900 bg-gray-100 px-3 py-1 rounded-full">{{ $performance['transit_summary']['total_distance'] }} km</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-gray-100">
                                    <h6 class="text-lg font-bold text-gray-900 m-0 flex items-center">
                                        <div class="p-2 bg-red-100 rounded-lg mr-3">
                                            <i class="fas fa-exclamation-triangle text-red-600 text-sm"></i>
                                        </div>
                                        Violation Details
                                    </h6>
                                </div>
                                <div class="p-6">
                                    <div class="space-y-3">
                                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
                                            <span class="text-sm font-semibold text-gray-700">Total Violations</span>
                                            <span class="text-sm font-bold text-gray-900 bg-gray-100 px-3 py-1 rounded-full">{{ $performance['violation_summary']['total_violations'] }}</span>
                                        </div>
                                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
                                            <span class="text-sm font-semibold text-gray-700">Resolved</span>
                                            <span class="text-sm font-bold text-green-600 bg-green-50 px-3 py-1 rounded-full">{{ $performance['violation_summary']['resolved_violations'] }}</span>
                                        </div>
                                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
                                            <span class="text-sm font-semibold text-gray-700">Unresolved</span>
                                            <span class="text-sm font-bold text-red-600 bg-red-50 px-3 py-1 rounded-full">{{ $performance['violation_summary']['unresolved_violations'] }}</span>
                                        </div>
                                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
                                            <span class="text-sm font-semibold text-gray-700">Resolution Rate</span>
                                            <span class="text-sm font-bold text-blue-600 bg-blue-50 px-3 py-1 rounded-full">{{ $performance['violation_summary']['resolution_rate'] }}%</span>
                                        </div>
                                        <div class="flex justify-between items-center py-2">
                                            <span class="text-sm font-semibold text-gray-700">Most Common Type</span>
                                            <span class="text-sm font-bold text-gray-900 bg-gray-100 px-3 py-1 rounded-full">{{ $performance['violation_summary']['most_common_type'] }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-gray-100">
                                    <h6 class="text-lg font-bold text-gray-900 m-0 flex items-center">
                                        <div class="p-2 bg-blue-100 rounded-lg mr-3">
                                            <i class="fas fa-chart-line text-blue-600 text-sm"></i>
                                        </div>
                                        Performance Metrics
                                    </h6>
                                </div>
                                <div class="p-6">
                                    <div class="space-y-3">
                                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
                                            <span class="text-sm font-semibold text-gray-700">Service Efficiency</span>
                                            <span class="text-sm font-bold text-green-600 bg-green-50 px-3 py-1 rounded-full">{{ $performance['performance_metrics']['service_efficiency'] }}%</span>
                                        </div>
                                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
                                            <span class="text-sm font-semibold text-gray-700">Security Compliance</span>
                                            <span class="text-sm font-bold text-blue-600 bg-blue-50 px-3 py-1 rounded-full">{{ $performance['performance_metrics']['security_compliance'] }}%</span>
                                        </div>
                                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
                                            <span class="text-sm font-semibold text-gray-700">Employee Utilization</span>
                                            <span class="text-sm font-bold text-purple-600 bg-purple-50 px-3 py-1 rounded-full">{{ $performance['performance_metrics']['employee_utilization'] }}</span>
                                        </div>
                                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
                                            <span class="text-sm font-semibold text-gray-700">Total Distance</span>
                                            <span class="text-sm font-bold text-gray-900 bg-gray-100 px-3 py-1 rounded-full">{{ $performance['performance_metrics']['total_distance'] }} km</span>
                                        </div>
                                        <div class="flex justify-between items-center py-2">
                                            <span class="text-sm font-semibold text-gray-700">Assigned Employees</span>
                                            <span class="text-sm font-bold text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full">{{ $performance['assigned_employees'] }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Employee Performance for Client -->
                        <div class="mb-6">
                            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-purple-50">
                                    <h6 class="text-lg font-bold text-gray-900 m-0 flex items-center">
                                        <div class="p-2 bg-indigo-600 rounded-lg mr-3">
                                            <i class="fas fa-users text-white text-sm"></i>
                                        </div>
                                        Assigned Employees Performance
                                    </h6>
                                </div>
                                <div class="p-6">
                                    <div class="overflow-x-auto">
                                        <table class="min-w-full divide-y divide-gray-200">
                                            <thead class="bg-gray-50">
                                                <tr>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Employee</th>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Transits</th>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Completion Rate</th>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Violations</th>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Performance Score</th>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Status</th>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody class="bg-white divide-y divide-gray-200">
                                                @forelse($performance['assigned_employees_performance'] ?? [] as $empPerformance)
                                                    <tr class="hover:bg-gray-50 transition-colors duration-150">
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <div class="flex items-center">
                                                                <img src="{{ $empPerformance['employee']->avatar }}" class="h-10 w-10 rounded-full mr-3 border-2 border-gray-200" width="40" height="40">
                                                                <div>
                                                                    <div class="text-sm font-semibold text-gray-900">{{ $empPerformance['employee']->full_name }}</div>
                                                                    <div class="text-xs text-gray-500">{{ $empPerformance['employee']->profile->employee_id ?? '' }}</div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <span class="text-sm font-bold text-gray-900 bg-gray-100 px-3 py-1 rounded-full">{{ $empPerformance['transit_count'] }}</span>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <div class="w-full bg-gray-200 rounded-full h-6">
                                                                <div class="bg-gradient-to-r from-green-500 to-green-600 h-6 rounded-full flex items-center justify-center text-xs text-white font-semibold" style="width: {{ $empPerformance['completion_rate'] }}%">
                                                                    {{ $empPerformance['completion_rate'] }}%
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold {{ $empPerformance['violation_count'] > 5 ? 'bg-red-100 text-red-800' : ($empPerformance['violation_count'] > 2 ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800') }}">
                                                                {{ $empPerformance['violation_count'] }}
                                                            </span>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <div class="w-full bg-gray-200 rounded-full h-6">
                                                                <div class="h-6 rounded-full flex items-center justify-center text-xs text-white font-semibold {{ $empPerformance['performance_score'] >= 80 ? 'bg-gradient-to-r from-green-500 to-green-600' : ($empPerformance['performance_score'] >= 60 ? 'bg-gradient-to-r from-yellow-500 to-yellow-600' : 'bg-gradient-to-r from-red-500 to-red-600') }}" style="width: {{ $empPerformance['performance_score'] }}%">
                                                                    {{ $empPerformance['performance_score'] }}/100
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold {{ $empPerformance['status'] === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                                                {{ ucfirst($empPerformance['status']) }}
                                                            </span>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                                            <div class="flex space-x-2">
                                                                <button class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors duration-200" onclick="viewEmployee({{ $empPerformance['employee']->id }})" title="View Details">
                                                                    <i class="fas fa-eye"></i>
                                                                </button>
                                                                <button class="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors duration-200" onclick="exportEmployee({{ $empPerformance['employee']->id }})" title="Export Data">
                                                                    <i class="fas fa-download"></i>
                                                                </button>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="7" class="px-6 py-8 text-center text-sm text-gray-500">
                                                            <div class="flex flex-col items-center">
                                                                <i class="fas fa-users text-gray-300 text-3xl mb-2"></i>
                                                                <div>No employee performance data available</div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <!-- All Clients Performance -->
                        <div class="mb-6">
                            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-gray-100 bg-gradient-to-r from-blue-50 to-indigo-50">
                                    <h6 class="text-lg font-bold text-gray-900 m-0 flex items-center">
                                        <div class="p-2 bg-blue-600 rounded-lg mr-3">
                                            <i class="fas fa-trophy text-white text-sm"></i>
                                        </div>
                                        Client Performance Rankings
                                    </h6>
                                </div>
                                <div class="p-6">
                                    <div class="overflow-x-auto">
                                        <table class="min-w-full divide-y divide-gray-200">
                                            <thead class="bg-gray-50">
                                                <tr>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Rank</th>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Client</th>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Status</th>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Service Efficiency</th>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Security Compliance</th>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Employees</th>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Transits</th>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Violations</th>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Overall Score</th>
                                                    <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody class="bg-white divide-y divide-gray-200">
                                                @forelse($performance as $index => $clientPerformance)
                                                    <tr class="hover:bg-gray-50 transition-colors duration-150">
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <span class="inline-flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold {{ $index < 3 ? 'bg-gradient-to-r from-yellow-400 to-yellow-500 text-white' : ($index < 6 ? 'bg-gradient-to-r from-gray-400 to-gray-500 text-white' : 'bg-gray-200 text-gray-700') }}">
                                                                {{ $index + 1 }}
                                                            </span>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <div class="flex items-center">
                                                                <div class="p-2 bg-blue-100 rounded-lg mr-3">
                                                                    <i class="fas fa-building text-blue-600 text-sm"></i>
                                                                </div>
                                                                <div>
                                                                    <div class="text-sm font-semibold text-gray-900">{{ $clientPerformance['client']->name }}</div>
                                                                    <div class="text-xs text-gray-500">{{ $clientPerformance['client']->city ?? 'N/A' }}</div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold {{ $clientPerformance['client']->status?->name === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                                                {{ ucfirst($clientPerformance['client']->status?->name ?? 'N/A') }}
                                                            </span>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <div class="w-full bg-gray-200 rounded-full h-6">
                                                                <div class="bg-gradient-to-r from-green-500 to-green-600 h-6 rounded-full flex items-center justify-center text-xs text-white font-semibold" style="width: {{ $clientPerformance['performance_metrics']['service_efficiency'] }}%">
                                                                    {{ $clientPerformance['performance_metrics']['service_efficiency'] }}%
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <div class="w-full bg-gray-200 rounded-full h-6">
                                                                <div class="bg-gradient-to-r from-blue-500 to-blue-600 h-6 rounded-full flex items-center justify-center text-xs text-white font-semibold" style="width: {{ $clientPerformance['performance_metrics']['security_compliance'] }}%">
                                                                    {{ $clientPerformance['performance_metrics']['security_compliance'] }}%
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <span class="text-sm font-bold text-gray-900 bg-gray-100 px-3 py-1 rounded-full">{{ $clientPerformance['assigned_employees'] }}</span>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <span class="text-sm font-bold text-gray-900 bg-gray-100 px-3 py-1 rounded-full">{{ $clientPerformance['transit_summary']['total_transits'] }}</span>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold {{ $clientPerformance['violation_summary']['total_violations'] > 10 ? 'bg-red-100 text-red-800' : ($clientPerformance['violation_summary']['total_violations'] > 5 ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800') }}">
                                                                {{ $clientPerformance['violation_summary']['total_violations'] }}
                                                            </span>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            @php
                                                                $overallScore = ($clientPerformance['performance_metrics']['service_efficiency'] + $clientPerformance['performance_metrics']['security_compliance']) / 2;
                                                            @endphp
                                                            <div class="w-full bg-gray-200 rounded-full h-6">
                                                                <div class="h-6 rounded-full flex items-center justify-center text-xs text-white font-semibold {{ $overallScore >= 80 ? 'bg-gradient-to-r from-green-500 to-green-600' : ($overallScore >= 60 ? 'bg-gradient-to-r from-yellow-500 to-yellow-600' : 'bg-gradient-to-r from-red-500 to-red-600') }}" style="width: {{ $overallScore }}%">
                                                                    {{ round($overallScore, 1) }}/100
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                                            <div class="flex space-x-2">
                                                                <button class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors duration-200" onclick="viewClient({{ $clientPerformance['client']->id }})" title="View Details">
                                                                    <i class="fas fa-eye"></i>
                                                                </button>
                                                                <button class="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors duration-200" onclick="exportClient({{ $clientPerformance['client']->id }})" title="Export Data">
                                                                    <i class="fas fa-download"></i>
                                                                </button>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="10" class="px-6 py-8 text-center text-sm text-gray-500">
                                                            <div class="flex flex-col items-center">
                                                                <i class="fas fa-building text-gray-300 text-3xl mb-2"></i>
                                                                No client performance data available
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Performance Distribution -->
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-gray-200 bg-gradient-to-r from-purple-50 to-pink-50">
                                    <h6 class="text-lg font-bold text-gray-900 m-0 flex items-center">
                                        <div class="p-2 bg-purple-600 rounded-lg mr-3">
                                            <i class="fas fa-chart-bar text-white text-sm"></i>
                                        </div>
                                        Performance Distribution
                                    </h6>
                                </div>
                                <div class="p-6">
                                    <div class="relative" style="height: 300px;">
                                        <canvas id="performanceDistributionChart" class="w-full h-full"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-gray-200 bg-gradient-to-r from-green-50 to-emerald-50">
                                    <h6 class="text-lg font-bold text-gray-900 m-0 flex items-center">
                                        <div class="p-2 bg-green-600 rounded-lg mr-3">
                                            <i class="fas fa-users text-white text-sm"></i>
                                        </div>
                                        Client Status Overview
                                    </h6>
                                </div>
                                <div class="p-6">
                                    <div class="relative" style="height: 300px;">
                                        <canvas id="clientStatusChart" class="w-full h-full"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Top Performing Clients & Clients Needing Attention -->
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-gray-200 bg-gradient-to-r from-green-50 to-emerald-50">
                                    <h6 class="text-lg font-bold text-gray-900 m-0 flex items-center">
                                        <div class="p-2 bg-green-600 rounded-lg mr-3">
                                            <i class="fas fa-trophy text-white text-sm"></i>
                                        </div>
                                        Top Performing Clients
                                    </h6>
                                </div>
                                <div class="p-6">
                                    <div class="overflow-x-auto">
                                        <table class="min-w-full divide-y divide-gray-200">
                                            <thead class="bg-gray-50">
                                                <tr>
                                                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Client</th>
                                                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Service Efficiency</th>
                                                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Security Compliance</th>
                                                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Overall Score</th>
                                                </tr>
                                            </thead>
                                            <tbody class="bg-white divide-y divide-gray-200">
                                                @forelse(array_slice($performance, 0, 5) as $index => $topClient)
                                                    <tr class="hover:bg-gray-50 transition-colors duration-150">
                                                        <td class="px-4 py-3 whitespace-nowrap">
                                                            <div class="flex items-center">
                                                                <div class="w-6 h-6 bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-full flex items-center justify-center text-xs text-white font-bold mr-2">
                                                                    {{ $index + 1 }}
                                                                </div>
                                                                <span class="text-sm font-semibold text-gray-900">{{ $topClient['client']->name }}</span>
                                                            </div>
                                                        </td>
                                                        <td class="px-4 py-3 whitespace-nowrap">
                                                            <span class="text-sm font-bold text-green-600 bg-green-50 px-2 py-1 rounded-full">{{ $topClient['performance_metrics']['service_efficiency'] }}%</span>
                                                        </td>
                                                        <td class="px-4 py-3 whitespace-nowrap">
                                                            <span class="text-sm font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded-full">{{ $topClient['performance_metrics']['security_compliance'] }}%</span>
                                                        </td>
                                                        <td class="px-4 py-3 whitespace-nowrap">
                                                            @php
                                                                $overallScore = ($topClient['performance_metrics']['service_efficiency'] + $topClient['performance_metrics']['security_compliance']) / 2;
                                                            @endphp
                                                            <span class="text-sm font-bold text-green-600 bg-green-50 px-2 py-1 rounded-full">{{ round($overallScore, 1) }}/100</span>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="4" class="px-4 py-8 text-center text-sm text-gray-500">
                                                            <div class="flex flex-col items-center">
                                                                <i class="fas fa-trophy text-gray-300 text-3xl mb-2"></i>
                                                                No data available
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-gray-200 bg-gradient-to-r from-red-50 to-orange-50">
                                    <h6 class="text-lg font-bold text-gray-900 m-0 flex items-center">
                                        <div class="p-2 bg-red-600 rounded-lg mr-3">
                                            <i class="fas fa-exclamation-triangle text-white text-sm"></i>
                                        </div>
                                        Clients Needing Attention
                                    </h6>
                                </div>
                                <div class="p-6">
                                    <div class="overflow-x-auto">
                                        <table class="min-w-full divide-y divide-gray-200">
                                            <thead class="bg-gray-50">
                                                <tr>
                                                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Client</th>
                                                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Issues</th>
                                                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Violations</th>
                                                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody class="bg-white divide-y divide-gray-200">
                                                @forelse(array_filter($performance, function($client) {
                                                    return $client['performance_metrics']['service_efficiency'] < 80 || $client['performance_metrics']['security_compliance'] < 80;
                                                }) as $lowClient)
                                                    <tr class="hover:bg-gray-50 transition-colors duration-150">
                                                        <td class="px-4 py-3 whitespace-nowrap">
                                                            <span class="text-sm font-semibold text-gray-900">{{ $lowClient['client']->name }}</span>
                                                        </td>
                                                        <td class="px-4 py-3 whitespace-nowrap">
                                                            <div class="flex space-x-1">
                                                                @if($lowClient['performance_metrics']['service_efficiency'] < 80)
                                                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">Service</span>
                                                                @endif
                                                                @if($lowClient['performance_metrics']['security_compliance'] < 80)
                                                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-800">Security</span>
                                                                @endif
                                                            </div>
                                                        </td>
                                                        <td class="px-4 py-3 whitespace-nowrap">
                                                            <span class="text-sm font-bold text-gray-900 bg-gray-100 px-2 py-1 rounded-full">{{ $lowClient['violation_summary']['total_violations'] }}</span>
                                                        </td>
                                                        <td class="px-4 py-3 whitespace-nowrap">
                                                            <button class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors duration-200" onclick="viewClient({{ $lowClient['client']->id }})" title="View Details">
                                                                <i class="fas fa-eye"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="4" class="px-4 py-8 text-center text-sm text-gray-500">
                                                            <div class="flex flex-col items-center">
                                                                <i class="fas fa-check-circle text-gray-300 text-3xl mb-2"></i>
                                                                All clients performing well
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let transitAnalyticsChart, securityMetricsChart, performanceDistributionChart, clientStatusChart;

// Add loading state management
function showLoadingState(elementId) {
    const element = document.getElementById(elementId);
    if (element) {
        element.style.opacity = '0.5';
        element.style.pointerEvents = 'none';
    }
}

function hideLoadingState(elementId) {
    const element = document.getElementById(elementId);
    if (element) {
        element.style.opacity = '1';
        element.style.pointerEvents = 'auto';
    }
}

// Add smooth scroll behavior
document.addEventListener('DOMContentLoaded', function() {
    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // Initialize charts with loading states
    @if($clientId)
        showLoadingState('transitAnalyticsChart');
        showLoadingState('securityMetricsChart');
        setTimeout(() => {
            createTransitAnalyticsChart();
            createSecurityMetricsChart();
            hideLoadingState('transitAnalyticsChart');
            hideLoadingState('securityMetricsChart');
        }, 500);
    @else
        showLoadingState('performanceDistributionChart');
        showLoadingState('clientStatusChart');
        setTimeout(() => {
            createPerformanceDistributionChart();
            createClientStatusChart();
            hideLoadingState('performanceDistributionChart');
            hideLoadingState('clientStatusChart');
        }, 500);
    @endif
});

function changePeriod() {
    const period = document.getElementById('periodSelector').value;
    const clientId = document.getElementById('clientSelector').value;
    
    // Add loading state
    document.body.style.cursor = 'wait';
    document.querySelectorAll('button, select').forEach(el => {
        el.style.opacity = '0.6';
        el.style.pointerEvents = 'none';
    });
    
    window.location.href = `{{ route('reports.client-performance') }}?period=${period}&client_id=${clientId}`;
}

function changeClient() {
    const period = document.getElementById('periodSelector').value;
    const clientId = document.getElementById('clientSelector').value;
    
    // Add loading state
    document.body.style.cursor = 'wait';
    document.querySelectorAll('button, select').forEach(el => {
        el.style.opacity = '0.6';
        el.style.pointerEvents = 'none';
    });
    
    window.location.href = `{{ route('reports.client-performance') }}?period=${period}&client_id=${clientId}`;
}

function viewClient(clientId) {
    // Add loading state
    document.body.style.cursor = 'wait';
    
    window.location.href = `{{ route('reports.client-performance') }}?client_id=${clientId}`;
}

function viewEmployee(employeeId) {
    // Add loading state
    document.body.style.cursor = 'wait';
    
    window.location.href = `/reports/employee-performance?employee_id=${employeeId}`;
}

function exportClient(clientId) {
    // Add loading state for export button
    event.target.style.opacity = '0.6';
    event.target.style.pointerEvents = 'none';
    
    window.location.href = `/reports/client-performance/export?client_id=${clientId}`;
}

function exportEmployee(employeeId) {
    // Add loading state for export button
    event.target.style.opacity = '0.6';
    event.target.style.pointerEvents = 'none';
    
    window.location.href = `/reports/employee-performance/export?employee_id=${employeeId}`;
}

@if($clientId)
function createTransitAnalyticsChart() {
    const ctx = document.getElementById('transitAnalyticsChart').getContext('2d');
    
    transitAnalyticsChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Completed', 'In Progress', 'Delayed', 'Cancelled'],
            datasets: [{
                data: [
                    {{ $performance['transit_summary']['completed_transits'] }},
                    {{ $performance['transit_summary']['in_progress_transits'] }},
                    {{ $performance['transit_summary']['delayed_transits'] }},
                    {{ $performance['transit_summary']['cancelled_transits'] }}
                ],
                backgroundColor: [
                    'rgba(75, 192, 192, 0.8)',
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(255, 206, 86, 0.8)',
                    'rgba(255, 99, 132, 0.8)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
}

function createSecurityMetricsChart() {
    const ctx = document.getElementById('securityMetricsChart').getContext('2d');
    
    securityMetricsChart = new Chart(ctx, {
        type: 'radar',
        data: {
            labels: ['Security Compliance', 'Violation Resolution', 'Risk Management', 'Response Time'],
            datasets: [{
                label: 'Security Performance',
                data: [
                    {{ $performance['performance_metrics']['security_compliance'] }},
                    {{ $performance['violation_summary']['resolution_rate'] }},
                    85,
                    90
                ],
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                r: {
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });
}
@else
function createPerformanceDistributionChart() {
    const ctx = document.getElementById('performanceDistributionChart').getContext('2d');
    
    performanceDistributionChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['0-20', '21-40', '41-60', '61-80', '81-100'],
            datasets: [{
                label: 'Number of Clients',
                data: [1, 2, 3, 5, 8],
                backgroundColor: 'rgba(54, 162, 235, 0.8)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

function createClientStatusChart() {
    const ctx = document.getElementById('clientStatusChart').getContext('2d');
    
    clientStatusChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['Active', 'Inactive', 'Suspended'],
            datasets: [{
                data: [15, 3, 1],
                backgroundColor: [
                    'rgba(75, 192, 192, 0.8)',
                    'rgba(255, 206, 86, 0.8)',
                    'rgba(255, 99, 132, 0.8)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
}
@endif
</script>