230 lines
16 KiB
PHP
230 lines
16 KiB
PHP
<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">​</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>
|