158 lines
14 KiB
PHP
158 lines
14 KiB
PHP
<div>
|
|
<!-- Appointment 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-3xl 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">
|
|
<h2 class="text-lg font-semibold text-zinc-900 dark:text-white dark:text-white">
|
|
{{ $editing ? 'Edit Appointment' : 'Schedule New Appointment' }}
|
|
</h2>
|
|
<button wire:click="closeModal" class="text-gray-400 hover:text-zinc-600 dark:text-zinc-400 dark:hover:text-gray-300 transition-colors duration-200">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<form wire:submit="save" class="space-y-6">
|
|
<!-- Customer & Vehicle -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Customer</label>
|
|
<select wire:model.live="customer_id" class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500">
|
|
<option value="">Select Customer</option>
|
|
@foreach($customers as $customer)
|
|
<option value="{{ $customer->id }}">{{ $customer->full_name }}</option>
|
|
@endforeach
|
|
</select>
|
|
@error('customer_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Vehicle</label>
|
|
<select wire:model="vehicle_id" {{ !$customer_id ? 'disabled' : '' }} class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500 disabled:opacity-50">
|
|
<option value="">Select Vehicle</option>
|
|
@foreach($vehicles as $vehicle)
|
|
<option value="{{ $vehicle->id }}">
|
|
{{ $vehicle->year }} {{ $vehicle->make }} {{ $vehicle->model }} ({{ $vehicle->license_plate }})
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
@error('vehicle_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Date & Time -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Date</label>
|
|
<input type="date" wire:model.live="scheduled_date" class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500" />
|
|
@error('scheduled_date') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Time</label>
|
|
<input type="time" wire:model.live="scheduled_time" class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500" />
|
|
@error('scheduled_time') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Duration</label>
|
|
<select wire:model.live="estimated_duration_minutes" class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500">
|
|
@foreach($durationOptions as $minutes => $label)
|
|
<option value="{{ $minutes }}">{{ $label }}</option>
|
|
@endforeach
|
|
</select>
|
|
@error('estimated_duration_minutes') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Type & Technician -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Appointment Type</label>
|
|
<select wire:model="appointment_type" class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500">
|
|
@foreach($appointmentTypes as $value => $label)
|
|
<option value="{{ $value }}">{{ $label }}</option>
|
|
@endforeach
|
|
</select>
|
|
@error('appointment_type') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Assigned Technician</label>
|
|
<select wire:model.live="assigned_technician_id" class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500">
|
|
<option value="">Auto-assign</option>
|
|
@foreach($technicians as $technician)
|
|
<option value="{{ $technician->id }}">{{ $technician->full_name }}</option>
|
|
@endforeach
|
|
</select>
|
|
@error('assigned_technician_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service Details -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Service Requested</label>
|
|
<textarea wire:model="service_requested"
|
|
placeholder="Describe the service or repair needed..."
|
|
rows="3"
|
|
class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500"></textarea>
|
|
@error('service_requested') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<!-- Notes -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Customer Notes</label>
|
|
<textarea wire:model="customer_notes"
|
|
placeholder="Notes from the customer..."
|
|
rows="3"
|
|
class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500"></textarea>
|
|
@error('customer_notes') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Internal Notes</label>
|
|
<textarea wire:model="internal_notes"
|
|
placeholder="Internal notes (not visible to customer)..."
|
|
rows="3"
|
|
class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500"></textarea>
|
|
@error('internal_notes') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Time Slot Validation -->
|
|
@if($scheduled_date && $scheduled_time && $assigned_technician_id)
|
|
<div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<div class="text-sm text-blue-800 dark:text-blue-200">
|
|
<strong>Appointment Time:</strong>
|
|
{{ \Carbon\Carbon::parse($scheduled_date . ' ' . $scheduled_time)->format('M j, Y g:i A') }} -
|
|
{{ \Carbon\Carbon::parse($scheduled_date . ' ' . $scheduled_time)->addMinutes($estimated_duration_minutes)->format('g:i A') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Actions -->
|
|
<div class="flex justify-end space-x-3 pt-6 border-t border-zinc-200 dark:border-zinc-700">
|
|
<button type="button" wire:click="closeModal" class="px-4 py-2 border border-zinc-300 dark:border-zinc-600 dark:border-gray-600 rounded-md border border-zinc-200 dark:border-zinc-700 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors duration-200">
|
|
Cancel
|
|
</button>
|
|
<button type="submit" class="px-4 py-2 border border-transparent rounded-md border border-zinc-200 dark:border-zinc-700 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors duration-200">
|
|
{{ $editing ? 'Update Appointment' : 'Schedule Appointment' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|