<x-layouts.app title="Technician Reports">
    <div class="space-y-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100">Performance Reports</h1>
                <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">View technician performance metrics and analytics</p>
            </div>
            <div class="flex space-x-2">
                <a href="{{ route('technician.management') }}" class="inline-flex items-center justify-center px-3 py-2 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 text-sm font-medium rounded transition-colors">
                    Main Management
                </a>
                <a href="{{ route('technicians.index') }}" class="inline-flex items-center justify-center px-3 py-2 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 text-sm font-medium rounded transition-colors">
                    Back to Overview
                </a>
            </div>
        </div>

        <!-- Reports Overview Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl p-6">
                <div class="text-center">
                    <div class="text-3xl font-bold text-blue-600">{{ \App\Models\TechnicianPerformance::count() }}</div>
                    <div class="text-sm text-zinc-500">Performance Records</div>
                </div>
            </div>
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl p-6">
                <div class="text-center">
                    <div class="text-3xl font-bold text-green-600">{{ \App\Models\TechnicianWorkload::count() }}</div>
                    <div class="text-sm text-zinc-500">Workload Records</div>
                </div>
            </div>
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl p-6">
                <div class="text-center">
                    <div class="text-3xl font-bold text-orange-600">{{ number_format(\App\Models\TechnicianPerformance::where('metric_type', 'customer_rating')->avg('metric_value'), 1) ?: 0 }}</div>
                    <div class="text-sm text-zinc-500">Avg Rating</div>
                </div>
            </div>
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl p-6">
                <div class="text-center">
                    <div class="text-3xl font-bold text-purple-600">{{ number_format(\App\Models\TechnicianWorkload::avg('utilization_rate'), 1) ?: 0 }}%</div>
                    <div class="text-sm text-zinc-500">Avg Utilization</div>
                </div>
            </div>
        </div>

        <!-- Performance Reports Components -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Performance Tracking Component -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl p-6">
                <h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Performance Tracking</h3>
                <livewire:technician-management.performance-tracking />
            </div>

            <!-- Workload Management Component -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl p-6">
                <h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Workload Management</h3>
                <livewire:technician-management.workload-management />
            </div>
        </div>
    </div>
</x-layouts.app>
