@extends('layouts.app')

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

@section('content')
<!-- Employee Performance Modal -->
<div id="employeeModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-lg bg-white">
        <div class="flex justify-between items-center border-b pb-3">
            <h3 class="text-lg font-semibold text-gray-900">Employee Performance Details</h3>
            <button type="button" onclick="closeEmployeeModal()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div id="employeeModalContent" class="mt-4">
            <!-- Content will be loaded here -->
        </div>
    </div>
</div>

<div class="space-y-6">
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <h5 class="text-lg font-semibold text-gray-900">Employee Performance Report</h5>
                <div class="flex flex-col sm:flex-row gap-2">
                    <select class="block w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-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="block w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500" id="employeeSelector" onchange="changeEmployee()">
                            <option value="">All Employees</option>
                            @foreach($employees as $employee)
                                <option value="{{ $employee->id }}" {{ $employeeId == $employee->id ? 'selected' : '' }}>
                                    {{ $employee->full_name }}
                                </option>
                            @endforeach
                        </select>
                </div>
            </div>
        </div>
        <div class="px-6 py-4">
                    @if($employeeId)
                        <!-- Individual Employee Performance -->
                        <div class="mb-6">
                            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
                                    <div class="flex items-center gap-3">
                                        <img src="{{ $performance['employee']->avatar }}" class="h-10 w-10 rounded-full object-cover" width="40" height="40">
                                        <div class="min-w-0">
                                            <div class="text-base font-semibold text-gray-900 truncate">{{ $performance['employee']->full_name }}</div>
                                            <div class="mt-1">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800">Score: {{ $performance['performance_score'] }}/100</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="px-6 py-4">
                                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                                        <div class="bg-green-600 text-white rounded-lg shadow-sm hover:shadow-md transition-all hover:scale-105 duration-200">
                                            <div class="px-6 py-4 text-center">
                                                <div class="flex items-center justify-center mb-2">
                                                    <i class="fas fa-user-check text-2xl opacity-80"></i>
                                                </div>
                                                <h4 class="text-2xl font-bold mb-1">{{ $performance['attendance_summary']['attendance_rate'] }}%</h4>
                                                <p class="text-sm text-green-100">Attendance Rate</p>
                                            </div>
                                        </div>
                                        <div class="bg-blue-600 text-white rounded-lg shadow-sm hover:shadow-md transition-all hover:scale-105 duration-200">
                                            <div class="px-6 py-4 text-center">
                                                <div class="flex items-center justify-center mb-2">
                                                    <i class="fas fa-route text-2xl opacity-80"></i>
                                                </div>
                                                <h4 class="text-2xl font-bold mb-1">{{ $performance['transit_summary']['completion_rate'] }}%</h4>
                                                <p class="text-sm text-blue-100">Transit Completion</p>
                                            </div>
                                        </div>
                                        <div class="bg-yellow-600 text-white rounded-lg shadow-sm hover:shadow-md transition-all hover:scale-105 duration-200">
                                            <div class="px-6 py-4 text-center">
                                                <div class="flex items-center justify-center mb-2">
                                                    <i class="fas fa-shield-alt text-2xl opacity-80"></i>
                                                </div>
                                                <h4 class="text-2xl font-bold mb-1">{{ $performance['violation_summary']['resolution_rate'] }}%</h4>
                                                <p class="text-sm text-yellow-100">Violation Resolution</p>
                                            </div>
                                        </div>
                                        <div class="bg-purple-600 text-white rounded-lg shadow-sm hover:shadow-md transition-all hover:scale-105 duration-200">
                                            <div class="px-6 py-4 text-center">
                                                <div class="flex items-center justify-center mb-2">
                                                    <i class="fas fa-trophy text-2xl opacity-80"></i>
                                                </div>
                                                <h4 class="text-2xl font-bold mb-1">{{ $performance['performance_score'] }}/100</h4>
                                                <p class="text-sm text-purple-100">Overall Score</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Performance Breakdown -->
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
                                    <h6 class="text-base font-semibold text-gray-900">Performance Breakdown</h6>
                                </div>
                                <div class="px-6 py-4">
                                    <div class="h-64">
                                        <canvas id="performanceBreakdownChart" width="400" height="200"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
                                    <h6 class="text-base font-semibold text-gray-900">Monthly Trend</h6>
                                </div>
                                <div class="px-6 py-4">
                                    <div class="h-64">
                                        <canvas id="monthlyTrendChart" width="400" height="200"></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-sm border border-gray-200">
                                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
                                    <h6 class="text-base font-semibold text-gray-900">Attendance Details</h6>
                                </div>
                                <div class="px-6 py-4">
                                    <div class="overflow-x-auto">
                                        <table class="min-w-full text-sm">
                                            <tbody class="divide-y divide-gray-200">
                                                <tr><td class="py-2 text-gray-600">Total Days</td><td class="py-2 text-gray-900">{{ $performance['attendance_summary']['total_days'] }}</td></tr>
                                                <tr><td class="py-2 text-gray-600">Present Days</td><td class="py-2 text-gray-900">{{ $performance['attendance_summary']['present_days'] }}</td></tr>
                                                <tr><td class="py-2 text-gray-600">Absent Days</td><td class="py-2 text-gray-900">{{ $performance['attendance_summary']['absent_days'] }}</td></tr>
                                                <tr><td class="py-2 text-gray-600">Late Days</td><td class="py-2 text-gray-900">{{ $performance['attendance_summary']['late_days'] }}</td></tr>
                                                <tr><td class="py-2 text-gray-600">Punctuality Rate</td><td class="py-2 text-gray-900">{{ $performance['attendance_summary']['punctuality_rate'] }}%</td></tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
                                    <h6 class="text-base font-semibold text-gray-900">Transit Details</h6>
                                </div>
                                <div class="px-6 py-4">
                                    <div class="overflow-x-auto">
                                        <table class="min-w-full text-sm">
                                            <tbody class="divide-y divide-gray-200">
                                                <tr><td class="py-2 text-gray-600">Total Transits</td><td class="py-2 text-gray-900">{{ $performance['transit_summary']['total_transits'] }}</td></tr>
                                                <tr><td class="py-2 text-gray-600">Completed</td><td class="py-2 text-gray-900">{{ $performance['transit_summary']['completed_transits'] }}</td></tr>
                                                <tr><td class="py-2 text-gray-600">In Progress</td><td class="py-2 text-gray-900">{{ $performance['transit_summary']['in_progress_transits'] }}</td></tr>
                                                <tr><td class="py-2 text-gray-600">Delayed</td><td class="py-2 text-gray-900">{{ $performance['transit_summary']['delayed_transits'] }}</td></tr>
                                                <tr><td class="py-2 text-gray-600">Avg Distance</td><td class="py-2 text-gray-900">{{ $performance['transit_summary']['average_distance'] }} km</td></tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
                                    <h6 class="text-base font-semibold text-gray-900">Violation Details</h6>
                                </div>
                                <div class="px-6 py-4">
                                    <div class="overflow-x-auto">
                                        <table class="min-w-full text-sm">
                                            <tbody class="divide-y divide-gray-200">
                                                <tr><td class="py-2 text-gray-600">Total Violations</td><td class="py-2 text-gray-900">{{ $performance['violation_summary']['total_violations'] }}</td></tr>
                                                <tr><td class="py-2 text-gray-600">Resolved</td><td class="py-2 text-gray-900">{{ $performance['violation_summary']['resolved_violations'] }}</td></tr>
                                                <tr><td class="py-2 text-gray-600">Unresolved</td><td class="py-2 text-gray-900">{{ $performance['violation_summary']['unresolved_violations'] }}</td></tr>
                                                <tr><td class="py-2 text-gray-600">Resolution Rate</td><td class="py-2 text-gray-900">{{ $performance['violation_summary']['resolution_rate'] }}%</td></tr>
                                                <tr><td class="py-2 text-gray-600">Most Common Type</td><td class="py-2 text-gray-900">{{ $performance['violation_summary']['most_common_type'] }}</td></tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <!-- All Employees Performance -->
                        <div class="mb-6">
                            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
                                    <h6 class="text-base font-semibold text-gray-900">Performance Rankings</h6>
                                </div>
                                <div class="px-6 py-4">
                                    <div class="overflow-x-auto">
                                        <table class="min-w-full divide-y divide-gray-200">
                                                <thead>
                                                    <tr>
                                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Rank</th>
                                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Employee</th>
                                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Department</th>
                                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Attendance Rate</th>
                                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Transit Completion</th>
                                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Violations</th>
                                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Overall Score</th>
                                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Performance Level</th>
                                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="divide-y divide-gray-200">
                                                    @forelse($performance as $index => $empPerformance)
                                                        <tr>
                                                            <td>
                                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $index < 3 ? 'bg-green-100 text-green-800' : ($index < 6 ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800') }}">
                                                                    #{{ $index + 1 }}
                                                                </span>
                                                            </td>
                                                            <td>
                                                                <div class="flex items-center gap-2">
                                                                    <img src="{{ $empPerformance['employee']->avatar }}" class="h-8 w-8 rounded-full object-cover" width="32" height="32">
                                                                    <div class="min-w-0">
                                                                        <div class="font-medium text-gray-900 truncate">{{ $empPerformance['employee']->full_name }}</div>
                                                                        <div class="text-xs text-gray-500">{{ $empPerformance['employee']->profile->employee_id ?? '' }}</div>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td>{{ $empPerformance['employee']->departments->pluck('name')->join(', ') ?: 'N/A' }}</td>
                                                            <td>
                                                                <div class="flex items-center gap-2">
                                                                    <div class="flex-1 bg-gray-200 rounded-full h-2">
                                                                        <div class="bg-green-500 h-2 rounded-full" style="width: {{ $empPerformance['attendance_summary']['attendance_rate'] }}%"></div>
                                                                    </div>
                                                                    <span class="text-xs text-gray-600">{{ $empPerformance['attendance_summary']['attendance_rate'] }}%</span>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="flex items-center gap-2">
                                                                    <div class="flex-1 bg-gray-200 rounded-full h-2">
                                                                        <div class="bg-blue-500 h-2 rounded-full" style="width: {{ $empPerformance['transit_summary']['completion_rate'] }}%"></div>
                                                                    </div>
                                                                    <span class="text-xs text-gray-600">{{ $empPerformance['transit_summary']['completion_rate'] }}%</span>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $empPerformance['violation_summary']['total_violations'] > 5 ? 'bg-red-100 text-red-800' : ($empPerformance['violation_summary']['total_violations'] > 2 ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800') }}">
                                                                    {{ $empPerformance['violation_summary']['total_violations'] }}
                                                                </span>
                                                            </td>
                                                            <td>
                                                                <div class="flex items-center gap-2">
                                                                    <div class="flex-1 bg-gray-200 rounded-full h-2">
                                                                        <div class="{{ $empPerformance['performance_score'] >= 80 ? 'bg-green-500' : ($empPerformance['performance_score'] >= 60 ? 'bg-yellow-500' : 'bg-red-500') }} h-2 rounded-full" style="width: {{ $empPerformance['performance_score'] }}%"></div>
                                                                    </div>
                                                                    <span class="text-xs text-gray-600">{{ $empPerformance['performance_score'] }}/100</span>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                @php
                                                                    $level = $empPerformance['performance_score'] >= 80 ? 'Excellent' : ($empPerformance['performance_score'] >= 60 ? 'Good' : 'Needs Improvement');
                                                                    $levelColor = $empPerformance['performance_score'] >= 80 ? 'success' : ($empPerformance['performance_score'] >= 60 ? 'warning' : 'danger');
                                                                @endphp
                                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $levelColor === 'success' ? 'bg-green-100 text-green-800' : ($levelColor === 'warning' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">{{ $level }}</span>
                                                            </td>
                                                            <td>
                                                                <div class="inline-flex rounded-md shadow-sm" role="group">
                                                                    <button class="inline-flex items-center px-3 py-1.5 border border-primary-300 text-primary-700 bg-white hover:bg-primary-50 rounded-md text-xs" onclick="viewEmployee({{ $empPerformance['employee']->id }})">
                                                                        <i class="fas fa-eye"></i>
                                                                    </button>
                                                                    <button class="inline-flex items-center px-3 py-1.5 border border-blue-300 text-blue-700 bg-white hover:bg-blue-50 rounded-md text-xs" onclick="exportEmployee({{ $empPerformance['employee']->id }})">
                                                                        <i class="fas fa-download"></i>
                                                                    </button>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="9" class="text-center text-muted">No performance data available</td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Performance Distribution -->
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                            <div class="w-full">
                                <div class="bg-white rounded-lg shadow-md border border-gray-200">
                                    <div class="px-6 py-4 border-b border-gray-200">
                                        <h6 class="text-lg font-semibold text-gray-900 m-0">Performance Distribution</h6>
                                    </div>
                                    <div class="p-6">
                                        <canvas id="performanceDistributionChart" width="400" height="200"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="w-full">
                                <div class="bg-white rounded-lg shadow-md border border-gray-200">
                                    <div class="px-6 py-4 border-b border-gray-200">
                                        <h6 class="text-lg font-semibold text-gray-900 m-0">Department Performance</h6>
                                    </div>
                                    <div class="p-6">
                                        <canvas id="departmentPerformanceChart" width="400" height="200"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Top Performers -->
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                            <div class="w-full">
                                <div class="bg-white rounded-lg shadow-md border border-gray-200">
                                    <div class="px-6 py-4 border-b border-gray-200">
                                        <h6 class="text-lg font-semibold text-gray-900 m-0">Top Performers</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-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Employee</th>
                                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Score</th>
                                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Attendance</th>
                                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transit</th>
                                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Violations</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="bg-white divide-y divide-gray-200">
                                                    @forelse(array_slice($performance, 0, 5) as $topPerformer)
                                                        <tr>
                                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $topPerformer['employee']->full_name }}</td>
                                                            <td class="px-6 py-4 whitespace-nowrap">
                                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">{{ $topPerformer['performance_score'] }}/100</span>
                                                            </td>
                                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $topPerformer['attendance_summary']['attendance_rate'] }}%</td>
                                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $topPerformer['transit_summary']['completion_rate'] }}%</td>
                                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $topPerformer['violation_summary']['total_violations'] }}</td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">No data available</td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="w-full">
                                <div class="bg-white rounded-lg shadow-md border border-gray-200">
                                    <div class="px-6 py-4 border-b border-gray-200">
                                        <h6 class="text-lg font-semibold text-gray-900 m-0">Needs 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-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Employee</th>
                                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Score</th>
                                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Issues</th>
                                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="bg-white divide-y divide-gray-200">
                                                    @forelse(array_slice(array_reverse($performance), 0, 5) as $lowPerformer)
                                                        <tr>
                                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $lowPerformer['employee']->full_name }}</td>
                                                            <td class="px-6 py-4 whitespace-nowrap">
                                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">{{ $lowPerformer['performance_score'] }}/100</span>
                                                            </td>
                                                            <td class="px-6 py-4 whitespace-nowrap">
                                                                @if($lowPerformer['attendance_summary']['attendance_rate'] < 80)
                                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Attendance</span>
                                                                @endif
                                                                @if($lowPerformer['transit_summary']['completion_rate'] < 80)
                                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Transit</span>
                                                                @endif
                                                                @if($lowPerformer['violation_summary']['total_violations'] > 5)
                                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Violations</span>
                                                                @endif
                                                            </td>
                                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                                                <button class="text-blue-600 hover:text-blue-900" onclick="viewEmployee({{ $lowPerformer['employee']->id }})">
                                                                    <i class="fas fa-eye"></i>
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="4" class="px-6 py-4 text-center text-sm text-gray-500">No employees need attention</td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
</div>
@endsection


<!-- Define critical functions first -->
<script>
function viewEmployee(employeeId) {
    // Show loading state
    document.getElementById('employeeModalContent').innerHTML = `
        <div class="text-center py-8">
            <i class="fas fa-spinner fa-spin text-3xl text-gray-400"></i>
            <p class="mt-2 text-gray-600">Loading employee details...</p>
        </div>
    `;
    document.getElementById('employeeModal').classList.remove('hidden');
    
    // Fetch employee performance data via AJAX
    fetch(`/reports/employee-performance/view?employee_id=${employeeId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayEmployeeInModal(data.employee);
            } else {
                document.getElementById('employeeModalContent').innerHTML = `
                    <div class="text-center py-8">
                        <i class="fas fa-exclamation-triangle text-3xl text-red-400"></i>
                        <p class="mt-2 text-red-600">Failed to load employee details</p>
                    </div>
                `;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById('employeeModalContent').innerHTML = `
                <div class="text-center py-8">
                    <i class="fas fa-exclamation-triangle text-3xl text-red-400"></i>
                    <p class="mt-2 text-red-600">Error loading employee details</p>
                </div>
            `;
        });
}

function exportEmployee(employeeId) {
    window.location.href = `/reports/employee-performance/export?employee_id=${employeeId}`;
}

function closeEmployeeModal() {
    document.getElementById('employeeModal').classList.add('hidden');
}

function changePeriod() {
    const period = document.getElementById('periodSelector').value;
    const employeeId = document.getElementById('employeeSelector').value;
    window.location.href = `{{ route('reports.employee-performance') }}?period=${period}&employee_id=${employeeId}`;
}

function changeEmployee() {
    const period = document.getElementById('periodSelector').value;
    const employeeId = document.getElementById('employeeSelector').value;
    window.location.href = `{{ route('reports.employee-performance') }}?period=${period}&employee_id=${employeeId}`;
}

function displayEmployeeInModal(employee) {
    const content = `
        <div class="space-y-4">
            <div class="flex items-center gap-4">
                <img src="${employee.avatar}" class="h-16 w-16 rounded-full object-cover" width="64" height="64">
                <div>
                    <h4 class="text-lg font-semibold text-gray-900">${employee.full_name}</h4>
                    <p class="text-sm text-gray-600">${employee.profile?.employee_id || 'N/A'}</p>
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${employee.performance_score >= 80 ? 'bg-green-100 text-green-800' : (employee.performance_score >= 60 ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800')}">
                        Score: ${employee.performance_score}/100
                    </span>
                </div>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div class="bg-green-50 p-4 rounded-lg">
                    <div class="flex items-center gap-2 mb-2">
                        <i class="fas fa-user-check text-green-600"></i>
                        <h5 class="font-medium text-gray-900">Attendance</h5>
                    </div>
                    <p class="text-2xl font-bold text-green-600">${employee.attendance_rate}%</p>
                    <p class="text-sm text-gray-600">${employee.present_days}/${employee.total_days} days</p>
                </div>
                
                <div class="bg-blue-50 p-4 rounded-lg">
                    <div class="flex items-center gap-2 mb-2">
                        <i class="fas fa-route text-blue-600"></i>
                        <h5 class="font-medium text-gray-900">Transit</h5>
                    </div>
                    <p class="text-2xl font-bold text-blue-600">${employee.completion_rate}%</p>
                    <p class="text-sm text-gray-600">${employee.completed_transits}/${employee.total_transits} trips</p>
                </div>
                
                <div class="bg-yellow-50 p-4 rounded-lg">
                    <div class="flex items-center gap-2 mb-2">
                        <i class="fas fa-shield-alt text-yellow-600"></i>
                        <h5 class="font-medium text-gray-900">Violations</h5>
                    </div>
                    <p class="text-2xl font-bold text-yellow-600">${employee.total_violations}</p>
                    <p class="text-sm text-gray-600">${employee.resolved_violations} resolved</p>
                </div>
            </div>
            
            <div class="border-t pt-4">
                <h5 class="font-medium text-gray-900 mb-2">Department</h5>
                <p class="text-gray-600">${employee.departments?.map(d => d.name).join(', ') || 'N/A'}</p>
            </div>
        </div>
    `;
    
    document.getElementById('employeeModalContent').innerHTML = content;
}

// Close modal when clicking outside
document.addEventListener('click', function(event) {
    const modal = document.getElementById('employeeModal');
    if (event.target === modal) {
        closeEmployeeModal();
    }
});
</script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let performanceBreakdownChart, monthlyTrendChart, performanceDistributionChart, departmentPerformanceChart;

document.addEventListener('DOMContentLoaded', function() {
    @if($employeeId)
        createPerformanceBreakdownChart();
        createMonthlyTrendChart();
    @else
        createPerformanceDistributionChart();
        createDepartmentPerformanceChart();
    @endif
});

@if($employeeId)
function createPerformanceBreakdownChart() {
    const ctx = document.getElementById('performanceBreakdownChart').getContext('2d');
    
    performanceBreakdownChart = new Chart(ctx, {
        type: 'radar',
        data: {
            labels: ['Attendance', 'Transit', 'Compliance'],
            datasets: [{
                label: 'Performance Score',
                data: [
                    {{ $performance['attendance_summary']['attendance_rate'] }},
                    {{ $performance['transit_summary']['completion_rate'] }},
                    {{ $performance['violation_summary']['resolution_rate'] }}
                ],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                r: {
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });
}

function createMonthlyTrendChart() {
    const ctx = document.getElementById('monthlyTrendChart').getContext('2d');
    
    // Mock data for monthly trend
    monthlyTrendChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
            datasets: [{
                label: 'Performance Score',
                data: [75, 78, 82, 85, 88, {{ $performance['performance_score'] }}],
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    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 Employees',
                data: [2, 5, 8, 12, 15],
                backgroundColor: 'rgba(255, 99, 132, 0.8)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

function createDepartmentPerformanceChart() {
    const ctx = document.getElementById('departmentPerformanceChart').getContext('2d');
    
    departmentPerformanceChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Security', 'Operations', 'Admin', 'Maintenance'],
            datasets: [{
                label: 'Average Performance Score',
                data: [85, 78, 82, 75],
                backgroundColor: 'rgba(54, 162, 235, 0.8)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });
}
@endif
</script>