<div>
    <!-- Skills Management Modal -->
    @if($showModal)
        <div class="fixed inset-0 z-50 overflow-y-auto" x-data="{ show: @entangle('showModal') }" x-show="show" x-cloak>
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 transition-opacity bg-zinc-500 bg-opacity-75" x-show="show" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"></div>

                <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>

                <div class="inline-block align-bottom bg-white dark:bg-zinc-800 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full sm:p-6" x-show="show" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                    <!-- Header -->
                    <div class="flex items-center justify-between mb-6">
                        <flux:heading size="lg">
                            Manage Skills - {{ $technician?->full_name }}
                        </flux:heading>
                        <flux:button variant="ghost" size="sm" icon="x-mark" wire:click="closeModal"></flux:button>
                    </div>

                    <!-- Body -->
                    <div class="space-y-6">
                        @if($technician)
                            <!-- Current Skills -->
                            <div>
                                <div class="flex items-center justify-between mb-4">
                                    <flux:heading size="lg">Current Skills</flux:heading>
                                    <flux:button variant="primary" size="sm" icon="plus" wire:click="addSkill">
                                        Add Skill
                                    </flux:button>
                                </div>

                                @if($technician->skills->count() > 0)
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        @foreach($technician->skills as $skill)
                                            <div class="border rounded-lg p-4 space-y-3">
                                                <div class="flex items-start justify-between">
                                                    <div class="flex-1">
                                                        <div class="flex items-center space-x-2">
                                                            <h4 class="font-semibold">{{ ucfirst(str_replace('_', ' ', $skill->skill_name)) }}</h4>
                                                            @if($skill->is_primary_skill)
                                                                <flux:badge size="sm" color="blue">Primary</flux:badge>
                                                            @endif
                                                        </div>
                                                        <div class="text-sm text-zinc-500">{{ ucfirst($skill->category) }}</div>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <flux:button size="sm" variant="ghost" icon="pencil" wire:click="editSkill({{ $skill->id }})">
                                                        </flux:button>
                                                        <flux:button size="sm" variant="ghost" icon="trash" wire:click="deleteSkill({{ $skill->id }})" wire:confirm="Delete this skill?">
                                                        </flux:button>
                                                    </div>
                                                </div>

                                                <div class="flex items-center space-x-2">
                                                    <span class="text-sm text-zinc-600">Proficiency:</span>
                                                    <div class="flex space-x-1">
                                                        @for($i = 1; $i <= 5; $i++)
                                                            <div class="w-3 h-3 rounded-full {{ $i <= $skill->proficiency_level ? 'bg-blue-500' : 'bg-zinc-300' }}"></div>
                                                        @endfor
                                                    </div>
                                                    <span class="text-sm font-medium">{{ $skill->proficiency_level }}/5</span>
                                                </div>

                                                @if($skill->certification_body)
                                                    <div class="mt-2">
                                                        <div class="text-sm">
                                                            <strong>Certification:</strong> {{ $skill->certification_body }}
                                                        </div>
                                                        @if($skill->certification_expires)
                                                            <div class="text-xs {{ $skill->certification_expires->isPast() ? 'text-red-600' : ($skill->certification_expires->isBefore(now()->addMonths(3)) ? 'text-yellow-600' : 'text-green-600') }}">
                                                                Expires: {{ $skill->certification_expires->format('M d, Y') }}
                                                                @if($skill->certification_expires->isPast())
                                                                    (Expired)
                                                                @elseif($skill->certification_expires->isBefore(now()->addMonths(3)))
                                                                    (Expires Soon)
                                                                @endif
                                                            </div>
                                                        @endif
                                                    </div>
                                                @endif

                                                @if($skill->notes)
                                                    <div class="text-sm text-zinc-600">
                                                        <strong>Notes:</strong> {{ $skill->notes }}
                                                    </div>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <div class="text-center py-8 border-2 border-dashed border-zinc-300 rounded-lg">
                                        <flux:icon.academic-cap class="w-12 h-12 text-zinc-400 mx-auto mb-4" />
                                        <div class="text-zinc-600 mb-2">No skills recorded</div>
                                        <div class="text-zinc-500 mb-4">Start by adding the first skill for this technician.</div>
                                        <flux:button variant="primary" size="sm" icon="plus" wire:click="addSkill">
                                            Add First Skill
                                        </flux:button>
                                    </div>
                                @endif
                            </div>

                            <!-- Add/Edit Skill Form -->
                            @if($editing !== false || $skill_name)
                                <div class="border-t pt-6">
                                    <flux:heading size="lg" class="mb-4">
                                        {{ $editing ? 'Edit Skill' : 'Add New Skill' }}
                                    </flux:heading>

                                    <form wire:submit="saveSkill" class="space-y-4">
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <div>
                                                <flux:field>
                                                    <flux:label>Skill Name</flux:label>
                                                    <flux:input wire:model="skill_name" placeholder="e.g., Engine Diagnostics" />
                                                    <flux:error name="skill_name" />
                                                </flux:field>
                                            </div>
                                            <div>
                                                <flux:field>
                                                    <flux:label>Category</flux:label>
                                                    <flux:select wire:model="category">
                                                        <option value="">Select Category</option>
                                                        @foreach($skillCategories as $category)
                                                            <option value="{{ $category }}">{{ ucfirst($category) }}</option>
                                                        @endforeach
                                                    </flux:select>
                                                    <flux:error name="category" />
                                                </flux:field>
                                            </div>
                                            <div>
                                                <flux:field>
                                                    <flux:label>Proficiency Level</flux:label>
                                                    <flux:select wire:model="proficiency_level">
                                                        @foreach(range(1, 5) as $level)
                                                            <option value="{{ $level }}">{{ $level }} - {{ $proficiencyLevels[$level - 1] ?? $level }}</option>
                                                        @endforeach
                                                    </flux:select>
                                                    <flux:error name="proficiency_level" />
                                                </flux:field>
                                            </div>
                                            <div>
                                                <flux:field>
                                                    <flux:label>Certification Body</flux:label>
                                                    <flux:input wire:model="certification_body" placeholder="Optional certification body" />
                                                    <flux:error name="certification_body" />
                                                </flux:field>
                                            </div>
                                        </div>

                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <div>
                                                <flux:field>
                                                    <flux:label>Certification Expiry</flux:label>
                                                    <flux:input type="date" wire:model="certification_expires" />
                                                    <flux:error name="certification_expires" />
                                                </flux:field>
                                            </div>
                                            <div class="flex items-center">
                                                <flux:field>
                                                    <flux:checkbox wire:model="is_primary_skill">
                                                        Primary Skill
                                                    </flux:checkbox>
                                                    <flux:error name="is_primary_skill" />
                                                </flux:field>
                                            </div>
                                        </div>

                                        <div>
                                            <flux:field>
                                                <flux:label>Notes</flux:label>
                                                <flux:textarea wire:model="notes" placeholder="Additional notes about this skill..." rows="3" />
                                                <flux:error name="notes" />
                                            </flux:field>
                                        </div>

                                        <div class="flex space-x-2">
                                            <flux:button type="submit" variant="primary">
                                                {{ $editing ? 'Update Skill' : 'Add Skill' }}
                                            </flux:button>
                                            <flux:button type="button" variant="ghost" wire:click="resetForm">
                                                Cancel
                                            </flux:button>
                                        </div>
                                    </form>
                                </div>

                                <!-- Quick Add Common Skills -->
                                @if(!$editing)
                                    <div class="border-t pt-6">
                                        <flux:heading size="lg" class="mb-4">Quick Add Common Skills</flux:heading>
                                        <div class="space-y-4">
                                            @foreach($commonSkills as $category => $skills)
                                                <div>
                                                    <h4 class="font-medium text-zinc-700 mb-2">{{ ucfirst($category) }}</h4>
                                                    <div class="flex flex-wrap gap-2">
                                                        @foreach($skills as $skill)
                                                            <flux:button size="sm" variant="outline" wire:click="quickAddSkill('{{ $skill }}', '{{ $category }}')">
                                                                + {{ ucfirst(str_replace('_', ' ', $skill)) }}
                                                            </flux:button>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            @endif
                        @endif
                    </div>

                    <!-- Footer -->
                    <div class="mt-6 flex justify-end space-x-3">
                        <flux:button variant="ghost" wire:click="closeModal">Close</flux:button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Success Message -->
    @if (session()->has('message'))
        <div x-data="{ show: true }" 
             x-show="show" 
             x-transition
             x-init="setTimeout(() => show = false, 3000)"
             class="fixed top-4 right-4 z-50 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
            {{ session('message') }}
        </div>
    @endif
</div>
