<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">&#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-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>
