<x-layouts.app title="Technician Skills Management">
    <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">Skills Management</h1>
                <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">Manage technician skills and certifications across your workforce</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>

        <!-- Skills Overview Cards -->
        <div class="grid grid-cols-1 md:grid-cols-3 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\TechnicianSkill::distinct('skill_name')->count() }}</div>
                    <div class="text-sm text-zinc-500">Unique Skills</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\TechnicianSkill::where('is_primary_skill', true)->count() }}</div>
                    <div class="text-sm text-zinc-500">Primary Skills</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">{{ \App\Models\TechnicianSkill::whereNotNull('certification_body')->count() }}</div>
                    <div class="text-sm text-zinc-500">Certifications</div>
                </div>
            </div>
        </div>

        <!-- Skills 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">Technician Skills</h3>
            <livewire:technician-management.skills-management />
        </div>
    </div>
</x-layouts.app>
