<x-layouts.app title="Technician Management">
    <div class="space-y-6">
        <!-- Navigation -->
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100">Technician Management</h1>
                <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">Comprehensive technician workforce management</p>
            </div>
            <div class="flex space-x-2">
                <a href="{{ route('technician.skills') }}" 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">
                    Skills Management
                </a>
                <a href="{{ route('technician.reports') }}" 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">
                    Performance Reports
                </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>

        <!-- Main Technician Management -->
        <livewire:technician-management.index />
        
        <!-- Form Component (Modal) -->
        <livewire:technician-management.technician-form />
        
        <!-- Skills Management Component (Modal) -->
        <livewire:technician-management.skills-management />
        
        <!-- Performance Tracking Component (Modal) -->
        <livewire:technician-management.performance-tracking />
        
        <!-- Workload Management Component (Modal) -->
        <livewire:technician-management.workload-management />
    </div>

    @push('scripts')
    <script>
    // Listen for events to open modals
    document.addEventListener('livewire:init', () => {
        Livewire.on('technician-saved', () => {
            // Refresh the main index component
            Livewire.dispatch('$refresh');
        });
    });
    </script>
    @endpush
</x-layouts.app>
