@extends('layouts.app')

@section('title', 'Executive Dashboard')
@section('no-page-header')

@section('content')
<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">
                <h3 class="text-lg font-semibold text-gray-900">Executive Dashboard</h3>
                <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" {{ 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="inline-flex items-center justify-center px-3 py-2 border border-primary-300 text-primary-700 bg-white hover:bg-primary-50 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" onclick="refreshDashboard()">
                        <i class="fas fa-sync"></i>
                    </button>
                </div>
            </div>
        </div>
                <div class="px-6 py-4">
                    <!-- KPI Overview -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 mb-6">
                        <div class="bg-primary-600 text-white rounded-lg shadow-sm border border-primary-700">
                            <div class="px-6 py-4 text-center">
                                <div class="text-2xl font-bold">{{ \App\Models\User::byTenant()->active()->count() }}</div>
                                <p class="text-primary-100">Total Staff</p>
                                <div class="text-primary-200 text-sm mt-1">
                                    <i class="fas fa-arrow-up"></i> +{{ rand(2, 8) }}%
                                </div>
                            </div>
                        </div>
                        <div class="bg-green-600 text-white rounded-lg shadow-sm border border-green-700">
                            <div class="px-6 py-4 text-center">
                                <div class="text-2xl font-bold">{{ \App\Models\Client::byTenant()->active()->count() }}</div>
                                <p class="text-green-100">Active Clients</p>
                                <div class="text-green-200 text-sm mt-1">
                                    <i class="fas fa-arrow-up"></i> +{{ rand(1, 5) }}%
                                </div>
                            </div>
                        </div>
                        <div class="bg-blue-600 text-white rounded-lg shadow-sm border border-blue-700">
                            <div class="px-6 py-4 text-center">
                                <div class="text-2xl font-bold">{{ \App\Models\Attendance::byTenant()->whereDate('date', now()->format('Y-m-d'))->count() }}</div>
                                <p class="text-blue-100">Today's Attendance</p>
                                <div class="text-blue-200 text-sm mt-1">
                                    <i class="fas fa-arrow-up"></i> +{{ rand(3, 12) }}%
                                </div>
                            </div>
                        </div>
                        <div class="bg-yellow-600 text-white rounded-lg shadow-sm border border-yellow-700">
                            <div class="px-6 py-4 text-center">
                                <div class="text-2xl font-bold">{{ \App\Models\Transit::byTenant()->whereDate('start_time', now()->format('Y-m-d'))->count() }}</div>
                                <p class="text-yellow-100">Active Transits</p>
                                <div class="text-yellow-200 text-sm mt-1">
                                    <i class="fas fa-arrow-down"></i> -{{ rand(1, 4) }}%
                                </div>
                            </div>
                        </div>
                        <div class="bg-red-600 text-white rounded-lg shadow-sm border border-red-700">
                            <div class="px-6 py-4 text-center">
                                <div class="text-2xl font-bold">{{ \App\Models\GeofenceViolation::byTenant()->where('is_resolved', false)->count() }}</div>
                                <p class="text-red-100">Open Violations</p>
                                <div class="text-red-200 text-sm mt-1">
                                    <i class="fas fa-arrow-down"></i> -{{ rand(5, 15) }}%
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-600 text-white rounded-lg shadow-sm border border-gray-700">
                            <div class="px-6 py-4 text-center">
                                <div class="text-2xl font-bold">{{ round(\App\Models\Attendance::byTenant()->whereDate('date', now()->format('Y-m-d'))->count() / \App\Models\User::byTenant()->active()->count() * 100, 1) }}%</div>
                                <p class="text-gray-100">Attendance Rate</p>
                                <div class="text-gray-200 text-sm mt-1">
                                    <i class="fas fa-arrow-up"></i> +{{ rand(1, 3) }}%
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Charts Row 1 -->
                    <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">
                                <h3 class="text-base font-semibold text-gray-900">Attendance Trends</h3>
                            </div>
                            <div class="px-6 py-4">
                                <div class="h-64">
                                    <canvas id="attendanceTrendsChart"></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">
                                <h3 class="text-base font-semibold text-gray-900">Transit Performance</h3>
                            </div>
                            <div class="px-6 py-4">
                                <div class="h-64">
                                    <canvas id="transitPerformanceChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Charts Row 2 -->
                    <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">
                                <h3 class="text-base font-semibold text-gray-900">Security Violations</h3>
                            </div>
                            <div class="px-6 py-4">
                                <div class="h-64">
                                    <canvas id="securityViolationsChart"></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">
                                <h3 class="text-base font-semibold text-gray-900">Department Performance</h3>
                            </div>
                            <div class="px-6 py-4">
                                <div class="h-64">
                                    <canvas id="departmentPerformanceChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Real-time Activity Feed -->
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                        <div class="lg:col-span-2">
                            <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 justify-between">
                                        <h3 class="text-base font-semibold text-gray-900">Recent Activity</h3>
                                        <button class="inline-flex items-center justify-center px-3 py-1.5 border border-primary-300 text-primary-700 bg-white hover:bg-primary-50 rounded-md text-xs focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" onclick="refreshActivity()">
                                            <i class="fas fa-sync"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="px-6 py-4">
                                    <div class="activity-feed" 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-sm border border-gray-200">
                                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
                                    <h3 class="text-base font-semibold text-gray-900">Quick Actions</h3>
                                </div>
                                <div class="px-6 py-4">
                                    <div class="space-y-2">
                                        <button class="w-full inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" onclick="generateReport('attendance')">
                                            <i class="fas fa-calendar-check mr-2"></i>
                                            Generate Attendance Report
                                        </button>
                                        <button class="w-full inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" onclick="generateReport('transit')">
                                            <i class="fas fa-route mr-2"></i>
                                            Generate Transit Report
                                        </button>
                                        <button class="w-full inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500" onclick="generateReport('geofence')">
                                            <i class="fas fa-shield-alt mr-2"></i>
                                            Generate Security Report
                                        </button>
                                        <button class="w-full inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" onclick="window.location.href='{{ route('reports.analytics') }}'">
                                            <i class="fas fa-chart-line mr-2"></i>
                                            View Analytics
                                        </button>
                                        <button class="w-full inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" onclick="exportDashboard()">
                                            <i class="fas fa-download mr-2"></i>
                                            Export Dashboard
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Performance 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">
                                <h3 class="text-base font-semibold text-gray-900">Top Performers</h3>
                            </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">Employee</th>
                                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Score</th>
                                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Trend</th>
                                            </tr>
                                        </thead>
                                        <tbody id="topPerformers" class="divide-y divide-gray-200">
                                            <!-- Top performers will be loaded here -->
                                        </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">
                                <h3 class="text-base font-semibold text-gray-900">Critical Alerts</h3>
                            </div>
                            <div class="px-6 py-4">
                                <div id="criticalAlerts">
                                    <!-- Critical alerts will be loaded here -->
                                </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">
                                <h3 class="text-base font-semibold text-gray-900">System Health</h3>
                            </div>
                            <div class="px-6 py-4">
                                <div class="grid grid-cols-2 gap-4 text-center mb-4">
                                    <div>
                                        <div class="text-2xl font-bold text-green-600">98.5%</div>
                                        <div class="text-xs text-gray-500">System Uptime</div>
                                    </div>
                                    <div>
                                        <div class="text-2xl font-bold text-blue-600">1.2s</div>
                                        <div class="text-xs text-gray-500">Avg Response</div>
                                    </div>
                                </div>
                                <div class="border-t pt-4">
                                    <div class="grid grid-cols-2 gap-4 text-center">
                                        <div>
                                            <div class="text-2xl font-bold text-yellow-600">2</div>
                                            <div class="text-xs text-gray-500">Open Issues</div>
                                        </div>
                                        <div>
                                            <div class="text-2xl font-bold text-green-600">15</div>
                                            <div class="text-xs text-gray-500">Resolved Today</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Client Overview -->
                    <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">
                            <h3 class="text-base font-semibold text-gray-900">Client Overview</h3>
                        </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">Client</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Status</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Assigned Staff</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Service Efficiency</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Security Compliance</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Active Transits</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">Performance Score</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 id="clientOverview" class="divide-y divide-gray-200">
                                        <!-- Client data will be loaded here -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<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(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }, {
                label: 'Absent',
                data: [5, 8, 7, 2, 4, 7, 8],
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        boxWidth: 12,
                        padding: 10,
                        font: {
                            size: 12
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        display: true,
                        drawBorder: false
                    },
                    ticks: {
                        font: {
                            size: 11
                        }
                    }
                },
                x: {
                    grid: {
                        display: false
                    },
                    ticks: {
                        font: {
                            size: 11
                        }
                    }
                }
            }
        }
    });
}

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(75, 192, 192, 0.8)',
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(255, 206, 86, 0.8)',
                    'rgba(255, 99, 132, 0.8)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        display: true,
                        drawBorder: false
                    },
                    ticks: {
                        font: {
                            size: 11
                        }
                    }
                },
                x: {
                    grid: {
                        display: false
                    },
                    ticks: {
                        font: {
                            size: 11
                        }
                    }
                }
            }
        }
    });
}

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(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1,
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        display: true,
                        drawBorder: false
                    },
                    ticks: {
                        font: {
                            size: 11
                        }
                    }
                },
                x: {
                    grid: {
                        display: false
                    },
                    ticks: {
                        font: {
                            size: 11
                        }
                    }
                }
            }
        }
    });
}

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(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1,
                pointBackgroundColor: 'rgba(54, 162, 235, 1)',
                pointBorderColor: '#fff',
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: 'rgba(54, 162, 235, 1)'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                r: {
                    beginAtZero: true,
                    max: 100,
                    ticks: {
                        stepSize: 20,
                        font: {
                            size: 10
                        }
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.1)'
                    },
                    pointLabels: {
                        font: {
                            size: 11
                        }
                    }
                }
            }
        }
    });
}

function loadDashboardData() {
    // Load activity feed
    fetch('/api/dashboard/activity')
        .then(response => response.json())
        .then(data => {
            updateActivityFeed(data.activities);
        })
        .catch(error => console.error('Error loading activity:', error));
    
    // Load top performers
    fetch('/api/dashboard/top-performers')
        .then(response => response.json())
        .then(data => {
            updateTopPerformers(data.performers);
        })
        .catch(error => console.error('Error loading performers:', error));
    
    // Load critical alerts
    fetch('/api/dashboard/alerts')
        .then(response => response.json())
        .then(data => {
            updateCriticalAlerts(data.alerts);
        })
        .catch(error => console.error('Error loading alerts:', error));
    
    // Load client overview
    fetch('/api/dashboard/clients')
        .then(response => response.json())
        .then(data => {
            updateClientOverview(data.clients);
        })
        .catch(error => console.error('Error loading clients:', error));
}

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() {
    fetch('/api/dashboard/activity')
        .then(response => response.json())
        .then(data => {
            updateActivityFeed(data.activities);
        })
        .catch(error => console.error('Error refreshing activity:', error));
}

function generateReport(type) {
    const startDate = prompt('Enter start date (YYYY-MM-DD):', new Date().toISOString().split('T')[0]);
    const endDate = prompt('Enter end date (YYYY-MM-DD):', new Date().toISOString().split('T')[0]);
    
    if (startDate && endDate) {
        const url = type === 'attendance' 
            ? '{{ route('reports.attendance') }}'
            : type === 'transit'
            ? '{{ route('reports.transit') }}'
            : '{{ route('reports.geofence') }}';
            
        window.location.href = `${url}?start_date=${startDate}&end_date=${endDate}`;
    }
}

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 or PDF
    alert('Dashboard export functionality will be implemented');
}
</script>
@endsection