162 lines
8.7 KiB
PHP
162 lines
8.7 KiB
PHP
<div>
|
|
<!-- Technician Form 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-2xl 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">
|
|
{{ $editing ? 'Edit Technician' : 'Add New Technician' }}
|
|
</flux:heading>
|
|
<flux:button variant="ghost" size="sm" icon="x-mark" wire:click="closeModal"></flux:button>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<form wire:submit="save" class="space-y-6">
|
|
<!-- Basic Information -->
|
|
<div>
|
|
<flux:heading size="lg" class="mb-4">Basic Information</flux:heading>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>First Name</flux:label>
|
|
<flux:input wire:model="first_name" placeholder="Enter first name" />
|
|
<flux:error name="first_name" />
|
|
</flux:field>
|
|
</div>
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Last Name</flux:label>
|
|
<flux:input wire:model="last_name" placeholder="Enter last name" />
|
|
<flux:error name="last_name" />
|
|
</flux:field>
|
|
</div>
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Email</flux:label>
|
|
<flux:input type="email" wire:model="email" placeholder="Enter email address" />
|
|
<flux:error name="email" />
|
|
</flux:field>
|
|
</div>
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Phone</flux:label>
|
|
<flux:input wire:model="phone" placeholder="Enter phone number" />
|
|
<flux:error name="phone" />
|
|
</flux:field>
|
|
</div>
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Employee ID</flux:label>
|
|
<flux:input wire:model="employee_id" placeholder="Enter employee ID" />
|
|
<flux:error name="employee_id" />
|
|
</flux:field>
|
|
</div>
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Hourly Rate ($)</flux:label>
|
|
<flux:input type="number" step="0.01" wire:model="hourly_rate" placeholder="0.00" />
|
|
<flux:error name="hourly_rate" />
|
|
</flux:field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Employment Details -->
|
|
<div>
|
|
<flux:heading size="lg" class="mb-4">Employment Details</flux:heading>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Status</flux:label>
|
|
<flux:select wire:model="status">
|
|
@foreach($statusOptions as $value => $label)
|
|
<option value="{{ $value }}">{{ $label }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:error name="status" />
|
|
</flux:field>
|
|
</div>
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Skill Level</flux:label>
|
|
<flux:select wire:model="skill_level">
|
|
@foreach($skillLevelOptions as $value => $label)
|
|
<option value="{{ $value }}">{{ $label }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:error name="skill_level" />
|
|
</flux:field>
|
|
</div>
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Shift Start</flux:label>
|
|
<flux:input type="time" wire:model="shift_start" />
|
|
<flux:error name="shift_start" />
|
|
</flux:field>
|
|
</div>
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Shift End</flux:label>
|
|
<flux:input type="time" wire:model="shift_end" />
|
|
<flux:error name="shift_end" />
|
|
</flux:field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Specializations -->
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Specializations</flux:label>
|
|
<flux:description>Select the technician's areas of expertise</flux:description>
|
|
<div class="grid grid-cols-2 gap-3 mt-2">
|
|
@foreach($specializationOptions as $value => $label)
|
|
<label class="flex items-center space-x-2 cursor-pointer">
|
|
<input type="checkbox"
|
|
wire:model="specializations"
|
|
value="{{ $value }}"
|
|
class="rounded border-zinc-300 text-blue-600 focus:ring-2 focus:ring-blue-500">
|
|
<span class="text-sm">{{ $label }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
<flux:error name="specializations" />
|
|
</flux:field>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Footer -->
|
|
<div class="mt-6 flex justify-end space-x-3">
|
|
<flux:button variant="ghost" wire:click="closeModal">Cancel</flux:button>
|
|
<flux:button type="submit" variant="primary" wire:click="save">
|
|
{{ $editing ? 'Update Technician' : 'Create Technician' }}
|
|
</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">
|
|
<div class="bg-green-50 border-green-200 border rounded-lg p-4">
|
|
<div class="flex items-center space-x-2 text-green-800">
|
|
<flux:icon.check-circle class="w-5 h-5" />
|
|
<span>{{ session('message') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|