@extends('layouts.app')

@section('title', 'Reports & Analytics')
@section('no-page-header')

@section('content')
<div class="min-h-screen bg-gray-50 p-6">
    <div class="max-w-7xl mx-auto">
        <div class="bg-white rounded-lg shadow-lg">
            <div class="border-b border-gray-200 px-6 py-4">
                <h5 class="text-xl font-semibold text-gray-900">Advanced Reports & Analytics</h5>
            </div>
            <div class="p-6">
                    <!-- Quick Stats Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                        <div class="bg-blue-600 text-white rounded-lg p-6 shadow-md">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <h5 class="text-lg font-semibold flex items-center">
                                        <i class="fas fa-users mr-2"></i>
                                        {{ \App\Models\User::byTenant()->active()->count() }}
                                    </h5>
                                    <p class="text-blue-100 text-sm mt-1">Total Employees</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-green-600 text-white rounded-lg p-6 shadow-md">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <h5 class="text-lg font-semibold flex items-center">
                                        <i class="fas fa-calendar-check mr-2"></i>
                                        {{ \App\Models\Attendance::byTenant()->whereDate('in_date', now()->format('Y-m-d'))->count() }}
                                    </h5>
                                    <p class="text-green-100 text-sm mt-1">Today's Attendance</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-cyan-600 text-white rounded-lg p-6 shadow-md">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <h5 class="text-lg font-semibold flex items-center">
                                        <i class="fas fa-route mr-2"></i>
                                        {{ \App\Models\Transit::byTenant()->whereDate('start_time', now()->format('Y-m-d'))->count() }}
                                    </h5>
                                    <p class="text-cyan-100 text-sm mt-1">Active Transits</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-amber-600 text-white rounded-lg p-6 shadow-md">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <h5 class="text-lg font-semibold flex items-center">
                                        <i class="fas fa-exclamation-triangle mr-2"></i>
                                        {{ \App\Models\GeofenceViolation::byTenant()->where('is_resolved', false)->count() }}
                                    </h5>
                                    <p class="text-amber-100 text-sm mt-1">Unresolved Violations</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Report Categories -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div class="bg-white rounded-lg shadow-md border border-gray-200">
                            <div class="border-b border-gray-200 px-6 py-4">
                                <h6 class="text-lg font-semibold text-gray-900">
                                    <i class="fas fa-chart-bar mr-2"></i>
                                    Attendance Reports
                                </h6>
                            </div>
                            <div class="p-6">
                                <div class="space-y-2">
                                    <a href="{{ route('reports.attendance') }}" class="block p-4 rounded-lg hover:bg-gray-50 transition-colors duration-200 border border-gray-200 hover:border-gray-300">
                                        <div class="flex items-center">
                                            <i class="fas fa-calendar-day mr-3 text-blue-600"></i>
                                            <div>
                                                <div class="font-medium text-gray-900">Daily Attendance Report</div>
                                                <div class="text-sm text-gray-500">Detailed attendance analysis</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a href="{{ route('reports.attendance.export') }}" class="block p-4 rounded-lg hover:bg-gray-50 transition-colors duration-200 border border-gray-200 hover:border-gray-300">
                                        <div class="flex items-center">
                                            <i class="fas fa-file-export mr-3 text-green-600"></i>
                                            <div>
                                                <div class="font-medium text-gray-900">Export Attendance Data</div>
                                                <div class="text-sm text-gray-500">CSV download</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="bg-white rounded-lg shadow-md border border-gray-200">
                            <div class="border-b border-gray-200 px-6 py-4">
                                <h6 class="text-lg font-semibold text-gray-900">
                                    <i class="fas fa-map-marked-alt mr-2"></i>
                                    Transit Reports
                                </h6>
                            </div>
                            <div class="p-6">
                                <div class="space-y-2">
                                    <div class="p-4 rounded-lg border border-gray-200 bg-gray-50">
                                        <div class="flex items-center">
                                            <i class="fas fa-route mr-3 text-gray-400"></i>
                                            <div>
                                                <div class="font-medium text-gray-500">Transit Tracking Report</div>
                                                <div class="text-sm text-gray-400">Coming soon</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="p-4 rounded-lg border border-gray-200 bg-gray-50">
                                        <div class="flex items-center">
                                            <i class="fas fa-file-export mr-3 text-gray-400"></i>
                                            <div>
                                                <div class="font-medium text-gray-500">Export Transit Data</div>
                                                <div class="text-sm text-gray-400">Coming soon</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
                        <div class="bg-white rounded-lg shadow-md border border-gray-200">
                            <div class="border-b border-gray-200 px-6 py-4">
                                <h6 class="text-lg font-semibold text-gray-900">
                                    <i class="fas fa-shield-alt mr-2"></i>
                                    Geofence Reports
                                </h6>
                            </div>
                            <div class="p-6">
                                <div class="space-y-2">
                                    <a href="{{ route('reports.geofence') }}" class="block p-4 rounded-lg hover:bg-gray-50 transition-colors duration-200 border border-gray-200 hover:border-gray-300">
                                        <div class="flex items-center">
                                            <i class="fas fa-exclamation-circle mr-3 text-red-600"></i>
                                            <div>
                                                <div class="font-medium text-gray-900">Violation Analysis</div>
                                                <div class="text-sm text-gray-500">Security breach reports</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a href="{{ route('reports.geofence.export') }}" class="block p-4 rounded-lg hover:bg-gray-50 transition-colors duration-200 border border-gray-200 hover:border-gray-300">
                                        <div class="flex items-center">
                                            <i class="fas fa-file-export mr-3 text-green-600"></i>
                                            <div>
                                                <div class="font-medium text-gray-900">Export Violations</div>
                                                <div class="text-sm text-gray-500">CSV download</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="bg-white rounded-lg shadow-md border border-gray-200">
                            <div class="border-b border-gray-200 px-6 py-4">
                                <h6 class="text-lg font-semibold text-gray-900">
                                    <i class="fas fa-chart-line mr-2"></i>
                                    Performance Analytics
                                </h6>
                            </div>
                            <div class="p-6">
                                <div class="space-y-2">
                                    <a href="{{ route('reports.analytics') }}" class="block p-4 rounded-lg hover:bg-gray-50 transition-colors duration-200 border border-gray-200 hover:border-gray-300">
                                        <div class="flex items-center">
                                            <i class="fas fa-tachometer-alt mr-3 text-purple-600"></i>
                                            <div>
                                                <div class="font-medium text-gray-900">Analytics Dashboard</div>
                                                <div class="text-sm text-gray-500">Interactive charts & metrics</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a href="{{ route('reports.employee-performance') }}" class="block p-4 rounded-lg hover:bg-gray-50 transition-colors duration-200 border border-gray-200 hover:border-gray-300">
                                        <div class="flex items-center">
                                            <i class="fas fa-user-chart-line mr-3 text-indigo-600"></i>
                                            <div>
                                                <div class="font-medium text-gray-900">Employee Performance</div>
                                                <div class="text-sm text-gray-500">Performance rankings</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a href="{{ route('reports.client-performance') }}" class="block p-4 rounded-lg hover:bg-gray-50 transition-colors duration-200 border border-gray-200 hover:border-gray-300">
                                        <div class="flex items-center">
                                            <i class="fas fa-building-chart-line mr-3 text-orange-600"></i>
                                            <div>
                                                <div class="font-medium text-gray-900">Client Performance</div>
                                                <div class="text-sm text-gray-500">Client metrics</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Actions -->
                    <div class="mt-8">
                        <div class="bg-white rounded-lg shadow-md border border-gray-200">
                            <div class="border-b border-gray-200 px-6 py-4">
                                <h6 class="text-lg font-semibold text-gray-900">
                                    <i class="fas fa-bolt mr-2"></i>
                                    Quick Actions
                                </h6>
                            </div>
                            <div class="p-6">
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                                    <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center" onclick="generateReport('attendance')">
                                        <i class="fas fa-file-alt mr-2"></i>
                                        Generate Attendance Report
                                    </button>
                                    <button class="bg-amber-600 hover:bg-amber-700 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center" onclick="generateReport('geofence')">
                                        <i class="fas fa-shield-alt mr-2"></i>
                                        Generate Violation Report
                                    </button>
                                    <button class="bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center" onclick="window.location.href='{{ route('reports.analytics') }}'">
                                        <i class="fas fa-chart-line mr-2"></i>
                                        View Analytics
                                    </button>
                                    <div class="lg:col-span-1">
                                        {{-- Placeholder for future transit report --}}
                                        <div class="bg-gray-100 text-gray-400 font-medium py-3 px-4 rounded-lg flex items-center justify-center cursor-not-allowed">
                                            <i class="fas fa-route mr-2"></i>
                                            Transit Report
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
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'
            // Transit tracking commented out until controller exists
            // ? '{{ route('reports.transit') }}'
            ? '{{ route('reports.geofence') }}'
            : '{{ route('reports.geofence') }}';
        
        window.location.href = `${url}?start_date=${startDate}&end_date=${endDate}`;
    }
}

// Auto-refresh quick stats every 5 minutes
setInterval(() => {
    // Update quick stats via AJAX if needed
    fetch('{{ route('reports.dashboard-data') }}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Update stat cards if needed
                console.log('Dashboard data updated:', data.data);
            }
        })
        .catch(error => console.error('Error fetching dashboard data:', error));
}, 300000); // 5 minutes
</script>
@endsection