@extends('layouts.app')

@section('title', 'Executive Dashboard')
@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">Executive Dashboard</h1>
                <p class="mt-1 text-sm text-gray-500">Comprehensive overview of security operations and 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" {{ request('period', '30days') === '7days' ? 'selected' : '' }}>Last 7 Days</option>
                    <option value="30days" {{ request('period', '30days') === '30days' ? 'selected' : '' }}>Last 30 Days</option>
                    <option value="90days" {{ request('period', '30days') === '90days' ? 'selected' : '' }}>Last 90 Days</option>
                    <option value="1year" {{ request('period', '30days') === '1year' ? 'selected' : '' }}>Last Year</option>
                </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>
    <!-- KPI Overview -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3">
                    <i class="fas fa-users text-blue-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <div class="text-2xl font-bold text-gray-900">{{ \App\Models\User::byTenant()->active()->count() }}</div>
                    <p class="text-sm text-gray-500">Total Staff</p>
                    <div class="text-green-600 text-sm mt-1 flex items-center gap-1">
                        <i class="fas fa-arrow-up"></i>
                        <span>+{{ rand(2, 8) }}%</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-green-100 rounded-lg p-3">
                    <i class="fas fa-building text-green-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <div class="text-2xl font-bold text-gray-900">{{ \App\Models\Client::byTenant()->active()->count() }}</div>
                    <p class="text-sm text-gray-500">Active Clients</p>
                    <div class="text-green-600 text-sm mt-1 flex items-center gap-1">
                        <i class="fas fa-arrow-up"></i>
                        <span>+{{ rand(1, 5) }}%</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-cyan-100 rounded-lg p-3">
                    <i class="fas fa-calendar-check text-cyan-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <div class="text-2xl font-bold text-gray-900">{{ \App\Models\Attendance::byTenant()->whereDate('in_date', now()->format('Y-m-d'))->count() }}</div>
                    <p class="text-sm text-gray-500">Today's Attendance</p>
                    <div class="text-green-600 text-sm mt-1 flex items-center gap-1">
                        <i class="fas fa-arrow-up"></i>
                        <span>+{{ rand(3, 12) }}%</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-amber-100 rounded-lg p-3">
                    <i class="fas fa-route text-amber-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <div class="text-2xl font-bold text-gray-900">{{ \App\Models\Transit::byTenant()->whereDate('start_time', now()->format('Y-m-d'))->count() }}</div>
                    <p class="text-sm text-gray-500">Active Transits</p>
                    <div class="text-red-600 text-sm mt-1 flex items-center gap-1">
                        <i class="fas fa-arrow-down"></i>
                        <span>-{{ rand(1, 4) }}%</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-red-100 rounded-lg p-3">
                    <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <div class="text-2xl font-bold text-gray-900">{{ \App\Models\GeofenceViolation::byTenant()->where('is_resolved', false)->count() }}</div>
                    <p class="text-sm text-gray-500">Open Violations</p>
                    <div class="text-red-600 text-sm mt-1 flex items-center gap-1">
                        <i class="fas fa-arrow-down"></i>
                        <span>-{{ rand(5, 15) }}%</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-slate-100 rounded-lg p-3">
                    <i class="fas fa-percentage text-slate-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <div class="text-2xl font-bold text-gray-900">{{ round(\App\Models\Attendance::byTenant()->whereDate('in_date', now()->format('Y-m-d'))->count() / \App\Models\User::byTenant()->active()->count() * 100, 1) }}%</div>
                    <p class="text-sm text-gray-500">Attendance Rate</p>
                    <div class="text-green-600 text-sm mt-1 flex items-center gap-1">
                        <i class="fas fa-arrow-up"></i>
                        <span>+{{ rand(1, 3) }}%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row 1 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white rounded-lg shadow border border-gray-100">
            <div class="p-6 border-b border-gray-100">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-xl font-bold text-gray-900">Attendance Trends</h3>
                        <p class="text-sm text-gray-500 mt-1">Weekly attendance patterns</p>
                    </div>
                    <div class="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm font-medium">
                        Live
                    </div>
                </div>
            </div>
            <div class="p-6">
                <div class="h-80">
                    <canvas id="attendanceTrendsChart"></canvas>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow border border-gray-100">
            <div class="p-6 border-b border-gray-100">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-xl font-bold text-gray-900">Transit Performance</h3>
                        <p class="text-sm text-gray-500 mt-1">Real-time transit metrics</p>
                    </div>
                    <div class="bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm font-medium">
                        Active
                    </div>
                </div>
            </div>
            <div class="p-6">
                <div class="h-80">
                    <canvas id="transitPerformanceChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row 2 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white rounded-lg shadow border border-gray-100">
            <div class="p-6 border-b border-gray-100">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-xl font-bold text-gray-900">Security Violations</h3>
                        <p class="text-sm text-gray-500 mt-1">24-hour violation timeline</p>
                    </div>
                    <div class="bg-red-50 text-red-700 px-3 py-1 rounded-full text-sm font-medium">
                        Critical
                    </div>
                </div>
            </div>
            <div class="p-6">
                <div class="h-80">
                    <canvas id="securityViolationsChart"></canvas>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow border border-gray-100">
            <div class="p-6 border-b border-gray-100">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-xl font-bold text-gray-900">Department Performance</h3>
                        <p class="text-sm text-gray-500 mt-1">Multi-department efficiency metrics</p>
                    </div>
                    <div class="bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm font-medium">
                        Analytics
                    </div>
                </div>
            </div>
            <div class="p-6">
                <div class="h-80">
                    <canvas id="departmentPerformanceChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Real-time Activity Feed -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow border border-gray-100">
                <div class="p-6 border-b border-gray-100">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-xl font-bold text-gray-900">Recent Activity</h3>
                            <p class="text-sm text-gray-500 mt-1">Live system updates and events</p>
                        </div>
                        <button class="bg-blue-50 hover:bg-blue-100 text-blue-700 p-2 rounded-lg transition-colors" onclick="refreshActivity()">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                </div>
                <div class="p-6">
                    <div class="activity-feed max-h-96 overflow-y-auto custom-scrollbar" id="activityFeed">
                        <!-- Activity items will be loaded here -->
                    </div>
                </div>
            </div>
        </div>
        <div class="lg:col-span-1">
            <div class="bg-white rounded-lg shadow border border-gray-100">
                <div class="p-6 border-b border-gray-100">
                    <div>
                        <h3 class="text-xl font-bold text-gray-900">Quick Actions</h3>
                        <p class="text-sm text-gray-500 mt-1">Generate reports instantly</p>
                    </div>
                </div>
                <div class="p-6">
                    <div class="space-y-3">
                        <button class="w-full bg-primary-600 hover:bg-primary-700 text-white px-4 py-3 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2 font-medium" onclick="generateReport('attendance')">
                            <i class="fas fa-calendar-check"></i>
                            Attendance Report
                        </button>
                        <button class="w-full bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-3 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2 font-medium" onclick="generateReport('transit')">
                            <i class="fas fa-route"></i>
                            Transit Report
                        </button>
                        <button class="w-full bg-amber-600 hover:bg-amber-700 text-white px-4 py-3 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2 font-medium" onclick="generateReport('geofence')">
                            <i class="fas fa-shield-alt"></i>
                            Security Report
                        </button>
                        <button class="w-full bg-green-600 hover:bg-green-700 text-white px-4 py-3 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2 font-medium" onclick="window.location.href='{{ route('reports.analytics') }}'">
                            <i class="fas fa-chart-line"></i>
                            View Analytics
                        </button>
                        <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-3 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2 font-medium" onclick="exportDashboard()">
                            <i class="fas fa-download"></i>
                            Export Dashboard
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Performance Metrics -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow border border-gray-100">
            <div class="p-6 border-b border-gray-100">
                <div>
                    <h3 class="text-xl font-bold text-gray-900">Top Performers</h3>
                    <p class="text-sm text-gray-500 mt-1">Employee excellence rankings</p>
                </div>
            </div>
            <div class="p-6">
                <div class="overflow-x-auto">
                    <table class="min-w-full">
                        <thead>
                            <tr class="bg-gray-50">
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Employee</th>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Score</th>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Trend</th>
                            </tr>
                        </thead>
                        <tbody id="topPerformers" class="divide-y divide-gray-100">
                            <!-- Top performers will be loaded here -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow border border-gray-100">
            <div class="p-6 border-b border-gray-100">
                <div>
                    <h3 class="text-xl font-bold text-gray-900">Critical Alerts</h3>
                    <p class="text-sm text-gray-500 mt-1">System notifications</p>
                </div>
            </div>
            <div class="p-6">
                <div id="criticalAlerts">
                    <!-- Critical alerts will be loaded here -->
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow border border-gray-100">
            <div class="p-6 border-b border-gray-100">
                <div>
                    <h3 class="text-xl font-bold text-gray-900">System Health</h3>
                    <p class="text-sm text-gray-500 mt-1">Real-time performance metrics</p>
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4 text-center mb-6">
                    <div class="bg-green-50 rounded-lg p-4">
                        <div class="text-3xl font-bold text-green-600">98.5%</div>
                        <div class="text-xs text-gray-600 font-medium mt-1">System Uptime</div>
                    </div>
                    <div class="bg-blue-50 rounded-lg p-4">
                        <div class="text-3xl font-bold text-blue-600">1.2s</div>
                        <div class="text-xs text-gray-600 font-medium mt-1">Avg Response</div>
                    </div>
                </div>
                <div class="border-t pt-6">
                    <div class="grid grid-cols-2 gap-4 text-center">
                        <div class="bg-yellow-50 rounded-lg p-4">
                            <div class="text-3xl font-bold text-yellow-600">2</div>
                            <div class="text-xs text-gray-600 font-medium mt-1">Open Issues</div>
                        </div>
                        <div class="bg-green-50 rounded-lg p-4">
                            <div class="text-3xl font-bold text-green-600">15</div>
                            <div class="text-xs text-gray-600 font-medium mt-1">Resolved Today</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Client Overview -->
    <div class="bg-white rounded-lg shadow border border-gray-100">
        <div class="p-6 border-b border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-xl font-bold text-gray-900">Client Overview</h3>
                    <p class="text-sm text-gray-500 mt-1">Performance metrics across all clients</p>
                </div>
                <div class="bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm font-medium">
                    {{ rand(5, 15) }} Active
                </div>
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full">
                <thead class="bg-gray-50 border-b border-gray-100">
                    <tr>
                        <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">Assigned Staff</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">Active 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">Performance 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 id="clientOverview" class="divide-y divide-gray-100">
                    <!-- Client data will be loaded here -->
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<style>
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
</style>
<script>
let attendanceTrendsChart, transitPerformanceChart, securityViolationsChart, departmentPerformanceChart;

document.addEventListener('DOMContentLoaded', function() {
    initializeCharts();
    loadDashboardData();
    setInterval(loadDashboardData, 30000); // Refresh every 30 seconds
});

function initializeCharts() {
    createAttendanceTrendsChart();
    createTransitPerformanceChart();
    createSecurityViolationsChart();
    createDepartmentPerformanceChart();
}

function createAttendanceTrendsChart() {
    const ctx = document.getElementById('attendanceTrendsChart').getContext('2d');
    
    attendanceTrendsChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            datasets: [{
                label: 'Present',
                data: [45, 52, 48, 58, 56, 48, 42],
                backgroundColor: 'rgba(34, 197, 94, 0.1)',
                borderColor: 'rgba(34, 197, 94, 1)',
                borderWidth: 3,
                tension: 0.4,
                fill: true,
                pointRadius: 6,
                pointHoverRadius: 8,
                pointBackgroundColor: 'rgba(34, 197, 94, 1)',
                pointBorderColor: '#fff',
                pointBorderWidth: 2
            }, {
                label: 'Absent',
                data: [5, 8, 7, 2, 4, 7, 8],
                backgroundColor: 'rgba(239, 68, 68, 0.1)',
                borderColor: 'rgba(239, 68, 68, 1)',
                borderWidth: 3,
                tension: 0.4,
                fill: true,
                pointRadius: 6,
                pointHoverRadius: 8,
                pointBackgroundColor: 'rgba(239, 68, 68, 1)',
                pointBorderColor: '#fff',
                pointBorderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        boxWidth: 12,
                        padding: 15,
                        font: {
                            size: 13,
                            weight: '500'
                        },
                        usePointStyle: true
                    }
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleFont: {
                        size: 14,
                        weight: 'bold'
                    },
                    bodyFont: {
                        size: 13
                    },
                    cornerRadius: 8,
                    boxPadding: 4
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)',
                        drawBorder: false
                    },
                    ticks: {
                        font: {
                            size: 12,
                            weight: '500'
                        },
                        color: '#6b7280'
                    }
                },
                x: {
                    grid: {
                        display: false
                    },
                    ticks: {
                        font: {
                            size: 12,
                            weight: '500'
                        },
                        color: '#6b7280'
                    }
                }
            },
            interaction: {
                intersect: false,
                mode: 'index'
            }
        }
    });
}

function createTransitPerformanceChart() {
    const ctx = document.getElementById('transitPerformanceChart').getContext('2d');
    
    transitPerformanceChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Completed', 'In Progress', 'Delayed', 'Cancelled'],
            datasets: [{
                label: 'Transits',
                data: [120, 15, 8, 3],
                backgroundColor: [
                    'rgba(34, 197, 94, 0.8)',
                    'rgba(59, 130, 246, 0.8)',
                    'rgba(251, 191, 36, 0.8)',
                    'rgba(239, 68, 68, 0.8)'
                ],
                borderColor: [
                    'rgba(34, 197, 94, 1)',
                    'rgba(59, 130, 246, 1)',
                    'rgba(251, 191, 36, 1)',
                    'rgba(239, 68, 68, 1)'
                ],
                borderWidth: 2,
                borderRadius: 8,
                barThickness: 40
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleFont: {
                        size: 14,
                        weight: 'bold'
                    },
                    bodyFont: {
                        size: 13
                    },
                    cornerRadius: 8
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)',
                        drawBorder: false
                    },
                    ticks: {
                        font: {
                            size: 12,
                            weight: '500'
                        },
                        color: '#6b7280'
                    }
                },
                x: {
                    grid: {
                        display: false
                    },
                    ticks: {
                        font: {
                            size: 12,
                            weight: '500'
                        },
                        color: '#6b7280'
                    }
                }
            }
        }
    });
}

function createSecurityViolationsChart() {
    const ctx = document.getElementById('securityViolationsChart').getContext('2d');
    
    securityViolationsChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
            datasets: [{
                label: 'Violations',
                data: [2, 1, 3, 8, 12, 6, 3],
                backgroundColor: 'rgba(239, 68, 68, 0.1)',
                borderColor: 'rgba(239, 68, 68, 1)',
                borderWidth: 3,
                fill: true,
                tension: 0.4,
                pointRadius: 6,
                pointHoverRadius: 8,
                pointBackgroundColor: 'rgba(239, 68, 68, 1)',
                pointBorderColor: '#fff',
                pointBorderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleFont: {
                        size: 14,
                        weight: 'bold'
                    },
                    bodyFont: {
                        size: 13
                    },
                    cornerRadius: 8
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)',
                        drawBorder: false
                    },
                    ticks: {
                        font: {
                            size: 12,
                            weight: '500'
                        },
                        color: '#6b7280'
                    }
                },
                x: {
                    grid: {
                        display: false
                    },
                    ticks: {
                        font: {
                            size: 12,
                            weight: '500'
                        },
                        color: '#6b7280'
                    }
                }
            },
            interaction: {
                intersect: false,
                mode: 'index'
            }
        }
    });
}

function createDepartmentPerformanceChart() {
    const ctx = document.getElementById('departmentPerformanceChart').getContext('2d');
    
    departmentPerformanceChart = new Chart(ctx, {
        type: 'radar',
        data: {
            labels: ['Security', 'Operations', 'Admin', 'Maintenance'],
            datasets: [{
                label: 'Performance',
                data: [85, 78, 92, 75],
                backgroundColor: 'rgba(147, 51, 234, 0.2)',
                borderColor: 'rgba(147, 51, 234, 1)',
                borderWidth: 3,
                pointBackgroundColor: 'rgba(147, 51, 234, 1)',
                pointBorderColor: '#fff',
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: 'rgba(147, 51, 234, 1)',
                pointRadius: 6,
                pointHoverRadius: 8
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleFont: {
                        size: 14,
                        weight: 'bold'
                    },
                    bodyFont: {
                        size: 13
                    },
                    cornerRadius: 8
                }
            },
            scales: {
                r: {
                    beginAtZero: true,
                    max: 100,
                    ticks: {
                        stepSize: 20,
                        font: {
                            size: 11,
                            weight: '500'
                        },
                        color: '#6b7280',
                        backdropColor: 'transparent'
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.1)'
                    },
                    pointLabels: {
                        font: {
                            size: 13,
                            weight: '600'
                        },
                        color: '#374151'
                    }
                }
            }
        }
    });
}

function loadDashboardData() {
    // Show loading state
    showLoadingState();
    
    // Load activity feed
    fetch('/reports/dashboard/activity')
        .then(response => {
            if (!response.ok) throw new Error('Network response was not ok');
            return response.json();
        })
        .then(data => {
            updateActivityFeed(data.activities);
        })
        .catch(error => {
            console.error('Error loading activity:', error);
            showErrorMessage('Failed to load activity feed');
        });
    
    // Load top performers
    fetch('/reports/dashboard/top-performers')
        .then(response => {
            if (!response.ok) throw new Error('Network response was not ok');
            return response.json();
        })
        .then(data => {
            updateTopPerformers(data.performers);
        })
        .catch(error => {
            console.error('Error loading performers:', error);
            showErrorMessage('Failed to load top performers');
        });
    
    // Load critical alerts
    fetch('/reports/dashboard/alerts')
        .then(response => {
            if (!response.ok) throw new Error('Network response was not ok');
            return response.json();
        })
        .then(data => {
            updateCriticalAlerts(data.alerts);
        })
        .catch(error => {
            console.error('Error loading alerts:', error);
            showErrorMessage('Failed to load critical alerts');
        });
    
    // Load client overview
    fetch('/reports/dashboard/clients')
        .then(response => {
            if (!response.ok) throw new Error('Network response was not ok');
            return response.json();
        })
        .then(data => {
            updateClientOverview(data.clients);
        })
        .catch(error => {
            console.error('Error loading clients:', error);
            showErrorMessage('Failed to load client overview');
        })
        .finally(() => {
            hideLoadingState();
        });
}

function updateActivityFeed(activities) {
    const feedContainer = document.getElementById('activityFeed');
    feedContainer.innerHTML = '';
    
    activities.forEach(activity => {
        const activityItem = document.createElement('div');
        activityItem.className = 'activity-item mb-3 p-3 bg-gray-50 rounded-lg border border-gray-200';
        activityItem.innerHTML = `
            <div class="flex items-start space-x-3">
                <div class="flex-shrink-0 mt-1">
                    <i class="fas fa-${activity.icon} text-${activity.color}-500"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="font-medium text-gray-900">${activity.title}</div>
                    <div class="text-sm text-gray-600 mt-1">${activity.description}</div>
                </div>
                <div class="flex-shrink-0">
                    <div class="text-xs text-gray-500">${activity.time}</div>
                </div>
            </div>
        `;
        feedContainer.appendChild(activityItem);
    });
}

function updateTopPerformers(performers) {
    const performersContainer = document.getElementById('topPerformers');
    performersContainer.innerHTML = '';
    
    performers.forEach(performer => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td class="px-4 py-3 text-sm font-medium text-gray-900">${performer.name}</td>
            <td class="px-4 py-3">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">${performer.score}/100</span>
            </td>
            <td class="px-4 py-3">
                <i class="fas fa-arrow-${performer.trend} ${performer.trend === 'up' ? 'text-green-600' : 'text-red-600'}"></i>
            </td>
        `;
        performersContainer.appendChild(row);
    });
}

function updateCriticalAlerts(alerts) {
    const alertsContainer = document.getElementById('criticalAlerts');
    alertsContainer.innerHTML = '';
    
    alerts.forEach(alert => {
        const alertItem = document.createElement('div');
        const severityClass = alert.severity === 'success'
            ? 'bg-green-50 border-green-200 text-green-800'
            : alert.severity === 'warning'
            ? 'bg-yellow-50 border-yellow-200 text-yellow-800'
            : alert.severity === 'danger'
            ? 'bg-red-50 border-red-200 text-red-800'
            : 'bg-blue-50 border-blue-200 text-blue-800';
        alertItem.className = `p-4 rounded-md border mb-2 ${severityClass}`;
        alertItem.innerHTML = `
            <div class="font-medium">${alert.title}</div>
            <div class="text-sm mt-1 opacity-90">${alert.message}</div>
        `;
        alertsContainer.appendChild(alertItem);
    });
}

function updateClientOverview(clients) {
    const clientsContainer = document.getElementById('clientOverview');
    clientsContainer.innerHTML = '';
    
    clients.forEach(client => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td class="px-4 py-3">
                <div class="flex items-center">
                    <i class="fas fa-building mr-3 text-primary-500"></i>
                    <div>
                        <div class="font-medium text-gray-900">${client.name}</div>
                        <div class="text-sm text-gray-500">${client.location}</div>
                    </div>
                </div>
            </td>
            <td class="px-4 py-3">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${client.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}">${client.status}</span>
            </td>
            <td class="px-4 py-3 text-sm text-gray-900">${client.assigned_staff}</td>
            <td class="px-4 py-3">
                <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: ${client.service_efficiency}%"></div>
                    </div>
                    <span class="text-sm text-gray-600">${client.service_efficiency}%</span>
                </div>
            </td>
            <td class="px-4 py-3">
                <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: ${client.security_compliance}%"></div>
                    </div>
                    <span class="text-sm text-gray-600">${client.security_compliance}%</span>
                </div>
            </td>
            <td class="px-4 py-3 text-sm text-gray-900">${client.active_transits}</td>
            <td class="px-4 py-3">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${client.violations > 10 ? 'bg-red-100 text-red-800' : (client.violations > 5 ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800')}">${client.violations}</span>
            </td>
            <td class="px-4 py-3">
                <div class="flex items-center gap-2">
                    <div class="flex-1 bg-gray-200 rounded-full h-2">
                        <div class="${client.performance_score >= 80 ? 'bg-green-500' : (client.performance_score >= 60 ? 'bg-yellow-500' : 'bg-red-500')} h-2 rounded-full" style="width: ${client.performance_score}%"></div>
                    </div>
                    <span class="text-sm text-gray-600">${client.performance_score}/100</span>
                </div>
            </td>
            <td class="px-4 py-3">
                <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-l-md text-xs" onclick="viewClient(${client.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-r-md text-xs" onclick="exportClient(${client.id})">
                        <i class="fas fa-download"></i>
                    </button>
                </div>
            </td>
        `;
        clientsContainer.appendChild(row);
    });
}

function changePeriod() {
    const period = document.getElementById('periodSelector').value;
    window.location.href = `{{ route('reports.index') }}?period=${period}`;
}

function refreshDashboard() {
    loadDashboardData();
}

function refreshActivity() {
    const refreshButton = document.querySelector('button[onclick="refreshActivity()"]');
    const originalIcon = refreshButton.innerHTML;
    
    // Show loading state
    refreshButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
    refreshButton.disabled = true;
    
    fetch('/reports/dashboard/activity')
        .then(response => {
            if (!response.ok) throw new Error('Network response was not ok');
            return response.json();
        })
        .then(data => {
            updateActivityFeed(data.activities);
            showSuccessMessage('Activity feed refreshed successfully');
        })
        .catch(error => {
            console.error('Error refreshing activity:', error);
            showErrorMessage('Failed to refresh activity feed');
        })
        .finally(() => {
            // Restore button state
            refreshButton.innerHTML = originalIcon;
            refreshButton.disabled = false;
        });
}

function showLoadingState() {
    // Add loading overlay or spinner to dashboard sections
    const sections = document.querySelectorAll('#activityFeed, #topPerformers, #criticalAlerts, #clientOverview');
    sections.forEach(section => {
        section.style.opacity = '0.5';
        section.style.position = 'relative';
    });
}

function hideLoadingState() {
    // Remove loading overlay
    const sections = document.querySelectorAll('#activityFeed, #topPerformers, #criticalAlerts, #clientOverview');
    sections.forEach(section => {
        section.style.opacity = '1';
    });
}

function showErrorMessage(message) {
    // Create and show error notification
    const notification = document.createElement('div');
    notification.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
    notification.innerHTML = `
        <div class="flex items-center">
            <i class="fas fa-exclamation-circle mr-2"></i>
            <span>${message}</span>
        </div>
    `;
    document.body.appendChild(notification);
    
    // Auto remove after 5 seconds
    setTimeout(() => {
        document.body.removeChild(notification);
    }, 5000);
}

function showSuccessMessage(message) {
    // Create and show success notification
    const notification = document.createElement('div');
    notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
    notification.innerHTML = `
        <div class="flex items-center">
            <i class="fas fa-check-circle mr-2"></i>
            <span>${message}</span>
        </div>
    `;
    document.body.appendChild(notification);
    
    // Auto remove after 3 seconds
    setTimeout(() => {
        document.body.removeChild(notification);
    }, 3000);
}

function generateReport(type) {
    const today = new Date().toISOString().split('T')[0];
    const startDate = prompt('Enter start date (YYYY-MM-DD):', today);
    
    if (!startDate) {
        return; // User cancelled
    }
    
    // Validate date format
    const startDateObj = new Date(startDate);
    if (isNaN(startDateObj.getTime())) {
        showErrorMessage('Invalid start date format. Please use YYYY-MM-DD format.');
        return;
    }
    
    const endDate = prompt('Enter end date (YYYY-MM-DD):', today);
    
    if (!endDate) {
        return; // User cancelled
    }
    
    // Validate date format
    const endDateObj = new Date(endDate);
    if (isNaN(endDateObj.getTime())) {
        showErrorMessage('Invalid end date format. Please use YYYY-MM-DD format.');
        return;
    }
    
    // Validate date range
    if (startDateObj > endDateObj) {
        showErrorMessage('Start date cannot be after end date.');
        return;
    }
    
    // Show loading state
    showLoadingState();
    
    // Generate URL based on report type
    let url;
    switch(type) {
        case 'attendance':
            url = `/reports/attendance?start_date=${startDate}&end_date=${endDate}`;
            break;
        case 'transit':
            url = `/reports/transit?start_date=${startDate}&end_date=${endDate}`;
            break;
        case 'geofence':
            url = `/reports/geofence?start_date=${startDate}&end_date=${endDate}`;
            break;
        default:
            showErrorMessage('Invalid report type');
            hideLoadingState();
            return;
    }
    
    // Navigate to report page
    window.location.href = url;
}

function viewClient(clientId) {
    window.location.href = `/reports/client-performance?client_id=${clientId}`;
}

function exportClient(clientId) {
    window.location.href = `/reports/client-performance/export?client_id=${clientId}`;
}

function exportDashboard() {
    // Export dashboard data to CSV
    const dashboardData = {
        timestamp: new Date().toISOString(),
        period: document.getElementById('periodSelector').value,
        totalStaff: document.querySelector('.bg-primary-600 .text-2xl').textContent,
        activeClients: document.querySelector('.bg-green-600 .text-2xl').textContent,
        todaysAttendance: document.querySelector('.bg-blue-600 .text-2xl').textContent,
        activeTransits: document.querySelector('.bg-yellow-600 .text-2xl').textContent,
        openViolations: document.querySelector('.bg-red-600 .text-2xl').textContent,
        attendanceRate: document.querySelector('.bg-gray-600 .text-2xl').textContent
    };
    
    // Convert to CSV
    const csvContent = "data:text/csv;charset=utf-8," 
        + "Metric,Value\n"
        + "Export Date," + new Date().toLocaleString() + "\n"
        + "Period," + dashboardData.period + "\n"
        + "Total Staff," + dashboardData.totalStaff + "\n"
        + "Active Clients," + dashboardData.activeClients + "\n"
        + "Today's Attendance," + dashboardData.todaysAttendance + "\n"
        + "Active Transits," + dashboardData.activeTransits + "\n"
        + "Open Violations," + dashboardData.openViolations + "\n"
        + "Attendance Rate," + dashboardData.attendanceRate + "\n";
    
    // Create download link
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "dashboard_export_" + new Date().toISOString().split('T')[0] + ".csv");
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
</script>
@endsection