Car-Repairs-Shop/resources/views/livewire/diagnosis/create.blade.php

<div class="max-w-6xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100">Vehicle Diagnosis</h1>
                <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
                    Complete diagnostic analysis for Job Card #{{ $jobCard->job_number }}
                </p>
            </div>
            <div class="flex items-center space-x-3">
                <div class="text-right">
                    <div class="text-sm font-medium text-zinc-900 dark:text-zinc-100">{{ $jobCard->customer->first_name }} {{ $jobCard->customer->last_name }}</div>
                    <div class="text-xs text-zinc-500 dark:text-zinc-400">{{ $jobCard->vehicle->year }} {{ $jobCard->vehicle->make }} {{ $jobCard->vehicle->model }}</div>
                </div>
                <div class="h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
                    <svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Progress Saved Message -->
    @if (session()->has('progress_saved'))
        <div class="mb-6 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
            <div class="flex">
                <svg class="h-5 w-5 text-blue-400" 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"/>
                </svg>
                <div class="ml-3">
                    <p class="text-sm font-medium text-blue-800 dark:text-blue-200">{{ session('progress_saved') }}</p>
                </div>
            </div>
        </div>
    @endif

    <form wire:submit.prevent="save" class="space-y-8">
        <!-- Vehicle & Job Information Card -->
        <div class="bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm">
            <div class="px-6 py-4 border-b border-zinc-200 dark:border-zinc-700">
                <h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Vehicle Information</h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="space-y-1">
                        <label class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Customer</label>
                        <p class="text-sm text-zinc-900 dark:text-zinc-100">{{ $jobCard->customer->first_name }} {{ $jobCard->customer->last_name }}</p>
                        <p class="text-xs text-zinc-500 dark:text-zinc-400">{{ $jobCard->customer->phone }}</p>
                    </div>
                    <div class="space-y-1">
                        <label class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Vehicle</label>
                        <p class="text-sm text-zinc-900 dark:text-zinc-100">{{ $jobCard->vehicle->year }} {{ $jobCard->vehicle->make }} {{ $jobCard->vehicle->model }}</p>
                        <p class="text-xs text-zinc-500 dark:text-zinc-400">{{ $jobCard->vehicle->license_plate }}</p>
                    </div>
                    <div class="space-y-1">
                        <label class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Mileage</label>
                        <p class="text-sm text-zinc-900 dark:text-zinc-100">{{ number_format($jobCard->vehicle->mileage ?? 0) }} miles</p>
                    </div>
                    <div class="space-y-1">
                        <label class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Arrival Date</label>
                        <p class="text-sm text-zinc-900 dark:text-zinc-100">{{ $jobCard->arrival_datetime->format('M j, Y') }}</p>
                        <p class="text-xs text-zinc-500 dark:text-zinc-400">{{ $jobCard->arrival_datetime->format('g:i A') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Customer Reported Issues -->
        <div class="bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm">
            <div class="px-6 py-4 border-b border-zinc-200 dark:border-zinc-700">
                <h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Customer Reported Issues</h2>
            </div>
            <div class="p-6">
                <div class="bg-zinc-50 dark:bg-zinc-900 rounded-lg p-4 border-l-4 border-blue-500">
                    <textarea wire:model="customer_reported_issues" 
                             class="w-full bg-transparent border-none resize-none focus:outline-none text-zinc-900 dark:text-zinc-100"
                             rows="3" 
                             readonly
                             placeholder="No specific issues reported by customer"></textarea>
                </div>
            </div>
        </div>

        <!-- Timesheet Tracking -->
        <div class="bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm">
            <button type="button" wire:click="toggleTimesheetSection" class="w-full px-6 py-4 flex items-center justify-between border-b border-zinc-200 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-700/50 transition-colors">
                <div class="flex items-center space-x-3">
                    <h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Diagnosis Time Tracking</h2>
                    @if($currentTimesheet)
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                            <span class="animate-pulse mr-1">●</span> Active
                        </span>
                    @endif
                </div>
                <svg class="h-5 w-5 text-zinc-500 transform {{ $showTimesheetSection ? 'rotate-180' : '' }} transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            
            @if($showTimesheetSection)
                <div class="p-6">
                    <!-- Current Session Controls -->
                    <div class="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                        <div class="flex items-center justify-between mb-4">
                            <div>
                                <h3 class="text-lg font-medium text-blue-900 dark:text-blue-100">Current Diagnosis Session</h3>
                                <p class="text-sm text-blue-600 dark:text-blue-300">Track time spent on diagnosis activities</p>
                            </div>
                            @if($currentTimesheet)
                                <div class="text-right">
                                    <div class="text-sm font-medium text-blue-900 dark:text-blue-100">Session Active</div>
                                    <div class="text-xs text-blue-600 dark:text-blue-300">Started: {{ \Carbon\Carbon::parse($currentTimesheet['start_time'])->format('g:i A') }}</div>
                                </div>
                            @endif
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-blue-800 dark:text-blue-200 mb-2">Diagnosis Type</label>
                                <select wire:model="selectedDiagnosisType" 
                                       class="w-full rounded-lg border-blue-300 dark:border-blue-600 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                       {{ $currentTimesheet ? 'disabled' : '' }}>
                                    @foreach($diagnosisTypes as $key => $label)
                                        <option value="{{ $key }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                                @error('selectedDiagnosisType') 
                                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p> 
                                @enderror
                            </div>
                            
                            <div class="flex items-end">
                                @if(!$currentTimesheet)
                                    <button type="button" wire:click="startTimesheet" 
                                            class="w-full px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors flex items-center justify-center">
                                        <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-7 4h12l-2 5H9l-2-5z"/>
                                        </svg>
                                        Start Diagnosis
                                    </button>
                                @else
                                    <button type="button" wire:click="endTimesheet" 
                                            class="w-full px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors flex items-center justify-center">
                                        <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/>
                                        </svg>
                                        End Session
                                    </button>
                                @endif
                            </div>
                            
                            <div class="text-center">
                                @if($currentTimesheet)
                                    <div class="text-lg font-bold text-green-600 dark:text-green-400">
                                        <span id="timer">{{ \Carbon\Carbon::parse($currentTimesheet['start_time'])->diffForHumans(null, true) }}</span>
                                    </div>
                                    <div class="text-xs text-zinc-500 dark:text-zinc-400">Elapsed Time</div>
                                @else
                                    <div class="text-lg font-medium text-zinc-400">
                                        Ready to Start
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Timesheet History -->
                    @if(count($timesheets) > 0)
                        <div>
                            <h4 class="text-md font-medium text-zinc-900 dark:text-zinc-100 mb-3">Previous Sessions</h4>
                            <div class="overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-700">
                                <table class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-700">
                                    <thead class="bg-zinc-50 dark:bg-zinc-900">
                                        <tr>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Type</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Start Time</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">End Time</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Duration</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Technician Name</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white dark:bg-zinc-800 divide-y divide-zinc-200 dark:divide-zinc-700">
                                        @foreach($timesheets as $timesheet)
                                            <tr>
                                                <td class="px-4 py-3 text-sm text-zinc-900 dark:text-zinc-100">{{ $timesheet['description'] }}</td>
                                                <td class="px-4 py-3 text-sm text-zinc-500 dark:text-zinc-400">
                                                    {{ \Carbon\Carbon::parse($timesheet['start_time'])->format('M j, g:i A') }}
                                                </td>
                                                <td class="px-4 py-3 text-sm text-zinc-500 dark:text-zinc-400">
                                                    @if($timesheet['end_time'])
                                                        {{ \Carbon\Carbon::parse($timesheet['end_time'])->format('M j, g:i A') }}
                                                    @else
                                                        <span class="text-yellow-600 dark:text-yellow-400">Active</span>
                                                    @endif
                                                </td>
                                                <td class="px-4 py-3 text-sm text-zinc-500 dark:text-zinc-400">
                                                    @if($timesheet['end_time'])
                                                        {{ number_format(\Carbon\Carbon::parse($timesheet['start_time'])->diffInHours(\Carbon\Carbon::parse($timesheet['end_time'])), 2) }} hours
                                                    @else
                                                        <span class="text-yellow-600 dark:text-yellow-400">In Progress</span>
                                                    @endif
                                                </td>
                                                <td class="px-4 py-3 text-sm text-zinc-500 dark:text-zinc-400">
                                                    {{ $timesheet['user']['name'] ?? 'Unknown' }}
                                                </td>
                                                <td class="px-4 py-3 text-sm">
                                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full 
                                                        {{ $timesheet['status'] === 'submitted' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' }}">
                                                        {{ $timesheet['status'] === 'submitted' ? 'Completed' : 'In Progress' }}
                                                    </span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @endif
                </div>
            @endif
        </div>

        <!-- Diagnostic Analysis -->
        <div class="bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm">
            <div class="px-6 py-4 border-b border-zinc-200 dark:border-zinc-700">
                <h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Diagnostic Analysis</h2>
                <p class="text-sm text-zinc-600 dark:text-zinc-400 mt-1">Complete your diagnostic findings and analysis</p>
            </div>
            <div class="p-6 space-y-6">
                <!-- Diagnostic Findings -->
                <div>
                    <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
                        Diagnostic Findings *
                        <span class="text-xs font-normal text-zinc-500">(Minimum 20 characters)</span>
                    </label>
                    <textarea wire:model="diagnostic_findings" 
                             class="w-full rounded-lg border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                             rows="4" 
                             placeholder="Describe what you found during the diagnostic process. Include specific symptoms, test results, and observations..."></textarea>
                    @error('diagnostic_findings') 
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p> 
                    @enderror
                </div>

                <!-- Recommended Repairs -->
                <div>
                    <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
                        Recommended Repairs *
                        <span class="text-xs font-normal text-zinc-500">(Minimum 10 characters)</span>
                    </label>
                    <textarea wire:model="recommended_repairs" 
                             class="w-full rounded-lg border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                             rows="4" 
                             placeholder="List the specific repairs needed to fix the identified issues. Be as detailed as possible..."></textarea>
                    @error('recommended_repairs') 
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p> 
                    @enderror
                </div>

                <!-- Additional Issues Found -->
                <div>
                    <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Additional Issues Found</label>
                    <textarea wire:model="additional_issues_found" 
                             class="w-full rounded-lg border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                             rows="3" 
                             placeholder="Any other issues discovered during diagnosis that weren't originally reported..."></textarea>
                </div>

                <!-- Safety Concerns -->
                <div>
                    <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Safety Concerns</label>
                    <textarea wire:model="safety_concerns" 
                             class="w-full rounded-lg border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                             rows="2" 
                             placeholder="Any safety-related concerns that need immediate attention..."></textarea>
                </div>
            </div>
        </div>
        <!-- Optional Sections -->
        <div class="space-y-6">
            <!-- Parts Required Section -->
            <div class="bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm">
                <button type="button" wire:click="togglePartsSection" class="w-full px-6 py-4 flex items-center justify-between border-b border-zinc-200 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-700/50 transition-colors">
                    <div class="flex items-center space-x-3">
                        <h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Parts Required</h3>
                        @if(count($parts_required) > 0)
                            <span class="px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full">
                                {{ count($parts_required) }} part{{ count($parts_required) !== 1 ? 's' : '' }}
                            </span>
                        @endif
                    </div>
                    <svg class="h-5 w-5 text-zinc-500 transform {{ $showPartsSection ? 'rotate-180' : '' }} transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                
                @if($showPartsSection)
                    <div class="p-6 space-y-6">
                        <!-- Parts Catalog Search -->
                        <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
                            <h4 class="text-sm font-medium text-blue-900 dark:text-blue-100 mb-3">
                                Parts Catalog 
                                <span class="text-xs font-normal text-blue-600 dark:text-blue-300">
                                    ({{ \App\Models\Part::where('status', 'active')->count() }} parts available)
                                </span>
                            </h4>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="md:col-span-2">
                                    <input type="text" 
                                           wire:model.live.debounce.300ms="partSearchTerm"
                                           class="w-full text-sm rounded-lg border-blue-300 dark:border-blue-600 bg-white dark:bg-blue-900/30 focus:border-blue-500 focus:ring-blue-500"
                                           placeholder="Search parts by name, part number, or category...">
                                </div>
                                <div>
                                    <select wire:model.live="partCategoryFilter" 
                                            class="w-full text-sm rounded-lg border-blue-300 dark:border-blue-600 bg-white dark:bg-blue-900/30 focus:border-blue-500 focus:ring-blue-500">
                                        <option value="">All Categories</option>
                                        <option value="engine">Engine</option>
                                        <option value="brakes">Brakes</option>
                                        <option value="hvac">HVAC</option>
                                        <option value="exterior">Exterior</option>
                                        <option value="cooling">Cooling</option>
                                        <option value="transmission">Transmission</option>
                                        <option value="electrical">Electrical</option>
                                        <option value="filters">Filters</option>
                                        <option value="fluids">Fluids</option>
                                        <option value="suspension">Suspension</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                            </div>
                            
                            @if($filteredParts && $filteredParts->count() > 0)
                                <div class="mt-4 max-h-64 overflow-y-auto">
                                    <div class="grid grid-cols-1 gap-2">
                                        @foreach($filteredParts as $part)
                                            <div class="flex items-center justify-between p-3 bg-white dark:bg-blue-900/40 rounded-lg border border-blue-200 dark:border-blue-700">
                                                <div class="flex-1">
                                                    <div class="flex items-center space-x-3">
                                                        <div>
                                                            <p class="font-medium text-sm text-zinc-900 dark:text-zinc-100">{{ $part->name }}</p>
                                                            <p class="text-xs text-zinc-600 dark:text-zinc-400">{{ $part->part_number }} • {{ $part->category }}</p>
                                                        </div>
                                                        <div class="text-right">
                                                            <p class="text-sm font-medium text-zinc-900 dark:text-zinc-100">${{ number_format($part->sell_price, 2) }}</p>
                                                            <p class="text-xs text-zinc-600 dark:text-zinc-400">Stock: {{ $part->quantity_on_hand }}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="button" 
                                                        wire:click="addPartFromCatalog({{ $part->id }})"
                                                        class="ml-3 px-3 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
                                                    Add
                                                </button>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @elseif($partSearchTerm)
                                <div class="mt-4 text-center py-4">
                                    <p class="text-sm text-zinc-600 dark:text-zinc-400">No parts found matching "{{ $partSearchTerm }}"</p>
                                </div>
                            @elseif($partSearchTerm === '' && $partCategoryFilter === '')
                                <div class="mt-4 text-center py-4">
                                    <p class="text-sm text-zinc-600 dark:text-zinc-400">Start typing to search for parts...</p>
                                    <p class="text-xs text-zinc-500 dark:text-zinc-500 mt-1">
                                        {{ \App\Models\Part::where('status', 'active')->count() }} parts available
                                    </p>
                                </div>
                            @endif
                        </div>

                        <!-- Selected Parts -->
                        @if(count($parts_required) > 0)
                            <div>
                                <h4 class="text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-3">Selected Parts</h4>
                                <div class="space-y-3">
                                    @foreach($parts_required as $index => $part)
                                        <div class="flex items-center justify-between p-4 bg-zinc-50 dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-700">
                                            <div class="flex-1 grid grid-cols-1 md:grid-cols-5 gap-4 items-center">
                                                <!-- Part Name and Number -->
                                                <div>
                                                    @if($part['part_id'])
                                                        <!-- Catalog Part (readonly) -->
                                                        <p class="font-medium text-sm text-zinc-900 dark:text-zinc-100">{{ $part['part_name'] }}</p>
                                                        <p class="text-xs text-zinc-600 dark:text-zinc-400">{{ $part['part_number'] }}</p>
                                                        <span class="inline-flex px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded">Catalog</span>
                                                    @else
                                                        <!-- Custom Part (editable) -->
                                                        <div class="space-y-2">
                                                            <input type="text" 
                                                                   wire:model.live="parts_required.{{ $index }}.part_name"
                                                                   placeholder="Part name"
                                                                   class="w-full text-sm rounded border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 font-medium">
                                                            <input type="text" 
                                                                   wire:model.live="parts_required.{{ $index }}.part_number"
                                                                   placeholder="Part number"
                                                                   class="w-full text-xs rounded border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800">
                                                            <span class="inline-flex px-2 py-1 text-xs bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300 rounded">Custom</span>
                                                        </div>
                                                    @endif
                                                </div>
                                                
                                                <!-- Quantity -->
                                                <div>
                                                    <label class="block text-xs font-medium text-zinc-700 dark:text-zinc-300 mb-1">Quantity</label>
                                                    <input type="number" 
                                                           wire:model.live="parts_required.{{ $index }}.quantity" 
                                                           min="1" 
                                                           class="w-full text-sm rounded border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800">
                                                </div>
                                                
                                                <!-- Unit Price -->
                                                <div>
                                                    <label class="block text-xs font-medium text-zinc-700 dark:text-zinc-300 mb-1">Unit Price</label>
                                                    @if($part['part_id'])
                                                        <!-- Catalog part - readonly price -->
                                                        <p class="text-sm font-medium text-zinc-900 dark:text-zinc-100">${{ number_format($part['estimated_cost'], 2) }}</p>
                                                    @else
                                                        <!-- Custom part - editable price -->
                                                        <div class="relative">
                                                            <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-zinc-500 text-sm">$</span>
                                                            <input type="number" 
                                                                   wire:model.live="parts_required.{{ $index }}.estimated_cost"
                                                                   step="0.01" 
                                                                   min="0"
                                                                   placeholder="0.00"
                                                                   class="w-full text-sm rounded border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 pl-6">
                                                        </div>
                                                    @endif
                                                </div>
                                                
                                                <!-- Availability (for custom parts) -->
                                                @if(!$part['part_id'])
                                                    <div>
                                                        <label class="block text-xs font-medium text-zinc-700 dark:text-zinc-300 mb-1">Availability</label>
                                                        <select wire:model.live="parts_required.{{ $index }}.availability"
                                                                class="w-full text-sm rounded border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800">
                                                            <option value="in_stock">In Stock</option>
                                                            <option value="out_of_stock">Out of Stock</option>
                                                            <option value="on_order">On Order</option>
                                                            <option value="special_order">Special Order</option>
                                                        </select>
                                                    </div>
                                                @endif
                                                
                                                <!-- Total -->
                                                <div>
                                                    <p class="text-xs text-zinc-600 dark:text-zinc-400">Total</p>
                                                    <p class="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                                                        ${{ number_format(($part['estimated_cost'] ?? 0) * ($part['quantity'] ?? 1), 2) }}
                                                    </p>
                                                </div>
                                            </div>
                                            <button type="button" 
                                                    wire:click="removePart({{ $index }})" 
                                                    class="ml-4 px-3 py-2 text-sm text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors">
                                                Remove
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                                
                                <!-- Parts Total -->
                                <div class="mt-4 pt-4 border-t border-zinc-200 dark:border-zinc-700">
                                    <div class="flex justify-between items-center">
                                        <span class="font-medium text-zinc-900 dark:text-zinc-100">Parts Total:</span>
                                        <span class="text-lg font-semibold text-blue-600 dark:text-blue-400">
                                            ${{ number_format(collect($parts_required)->sum(fn($part) => ($part['estimated_cost'] ?? 0) * ($part['quantity'] ?? 1)), 2) }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Manual Part Entry -->
                        <div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
                            <button type="button" 
                                    wire:click="addPart" 
                                    class="w-full py-3 px-4 border-2 border-dashed border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-600 dark:text-zinc-400 hover:border-blue-500 hover:text-blue-500 transition-colors text-sm">
                                + Add Custom Part (Not in Catalog)
                            </button>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Labor Operations Section -->
            <div class="bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm">
                <button type="button" wire:click="toggleLaborSection" class="w-full px-6 py-4 flex items-center justify-between border-b border-zinc-200 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-700/50 transition-colors">
                    <div class="flex items-center space-x-3">
                        <h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Labor Operations</h3>
                        @if(count($labor_operations) > 0)
                            <span class="px-2 py-1 text-xs bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-full">
                                {{ count($labor_operations) }} operation{{ count($labor_operations) !== 1 ? 's' : '' }}
                            </span>
                        @endif
                    </div>
                    <svg class="h-5 w-5 text-zinc-500 transform {{ $showLaborSection ? 'rotate-180' : '' }} transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                
                @if($showLaborSection)
                    <div class="p-6 space-y-6">
                        <!-- Service Items Catalog -->
                        <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
                            <h4 class="text-sm font-medium text-green-900 dark:text-green-100 mb-3">Service Operations Catalog</h4>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="md:col-span-2">
                                    <input type="text" 
                                           wire:model.live.debounce.300ms="serviceSearchTerm"
                                           class="w-full text-sm rounded-lg border-green-300 dark:border-green-600 bg-white dark:bg-green-900/30 focus:border-green-500 focus:ring-green-500"
                                           placeholder="Search service operations by name, category, or description...">
                                </div>
                                <div>
                                    <select wire:model.live="serviceCategoryFilter" 
                                            class="w-full text-sm rounded-lg border-green-300 dark:border-green-600 bg-white dark:bg-green-900/30 focus:border-green-500 focus:ring-green-500">
                                        <option value="">All Categories</option>
                                        <option value="Diagnosis">Diagnosis</option>
                                        <option value="Engine">Engine</option>
                                        <option value="Brake">Brake</option>
                                        <option value="Suspension">Suspension</option>
                                        <option value="Electrical">Electrical</option>
                                        <option value="Transmission">Transmission</option>
                                        <option value="Maintenance">Maintenance</option>
                                        <option value="Other">Other</option>
                                    </select>
                                </div>
                            </div>
                            
                            @if($filteredServiceItems && $filteredServiceItems->count() > 0)
                                <div class="mt-4 max-h-64 overflow-y-auto">
                                    <div class="grid grid-cols-1 gap-2">
                                        @foreach($filteredServiceItems as $serviceItem)
                                            <div class="flex items-center justify-between p-3 bg-white dark:bg-green-900/40 rounded-lg border border-green-200 dark:border-green-700">
                                                <div class="flex-1">
                                                    <div class="flex items-center justify-between">
                                                        <div>
                                                            <p class="font-medium text-sm text-zinc-900 dark:text-zinc-100">{{ $serviceItem->name }}</p>
                                                            <p class="text-xs text-zinc-600 dark:text-zinc-400">{{ $serviceItem->category }}</p>
                                                            @if($serviceItem->description)
                                                                <p class="text-xs text-zinc-500 dark:text-zinc-500 mt-1">{{ Str::limit($serviceItem->description, 60) }}</p>
                                                            @endif
                                                        </div>
                                                        <div class="text-right ml-4">
                                                            <p class="text-sm font-medium text-zinc-900 dark:text-zinc-100">{{ $serviceItem->estimated_hours }}h</p>
                                                            <p class="text-xs text-zinc-600 dark:text-zinc-400">${{ number_format($serviceItem->labor_rate, 2) }}/hr</p>
                                                            <p class="text-sm font-semibold text-green-600 dark:text-green-400">
                                                                ${{ number_format($serviceItem->estimated_hours * $serviceItem->labor_rate, 2) }}
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="button" 
                                                        wire:click="addServiceItemFromCatalog({{ $serviceItem->id }})"
                                                        class="ml-3 px-3 py-1 text-xs bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors">
                                                    Add
                                                </button>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @elseif($serviceSearchTerm)
                                <div class="mt-4 text-center py-4">
                                    <p class="text-sm text-zinc-600 dark:text-zinc-400">No service operations found matching "{{ $serviceSearchTerm }}"</p>
                                </div>
                            @endif
                        </div>

                        <!-- Selected Labor Operations -->
                        @if(count($labor_operations) > 0)
                            <div>
                                <h4 class="text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-3">Selected Labor Operations</h4>
                                <div class="space-y-3">
                                    @foreach($labor_operations as $index => $operation)
                                        <div class="flex items-center justify-between p-4 bg-zinc-50 dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-700">
                                            <div class="flex-1 grid grid-cols-1 md:grid-cols-4 gap-4 items-center">
                                                <div>
                                                    <p class="font-medium text-sm text-zinc-900 dark:text-zinc-100">{{ $operation['operation'] }}</p>
                                                    @if(!empty($operation['category']))
                                                        <p class="text-xs text-zinc-600 dark:text-zinc-400">{{ $operation['category'] }}</p>
                                                    @endif
                                                </div>
                                                <div>
                                                    <label class="block text-xs font-medium text-zinc-700 dark:text-zinc-300 mb-1">Est. Hours</label>
                                                    <input type="number" 
                                                           wire:model.live="labor_operations.{{ $index }}.estimated_hours" 
                                                           step="0.25" 
                                                           min="0" 
                                                           class="w-full text-sm rounded border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800">
                                                </div>
                                                <div>
                                                    <label class="block text-xs font-medium text-zinc-700 dark:text-zinc-300 mb-1">Labor Rate</label>
                                                    <p class="text-sm font-medium text-zinc-900 dark:text-zinc-100">${{ number_format($operation['labor_rate'], 2) }}/hr</p>
                                                </div>
                                                <div>
                                                    <p class="text-xs text-zinc-600 dark:text-zinc-400">Total</p>
                                                    <p class="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                                                        ${{ number_format($operation['estimated_hours'] * $operation['labor_rate'], 2) }}
                                                    </p>
                                                </div>
                                            </div>
                                            <button type="button" 
                                                    wire:click="removeLaborOperation({{ $index }})" 
                                                    class="ml-4 px-3 py-2 text-sm text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors">
                                                Remove
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                                
                                <!-- Labor Total -->
                                <div class="mt-4 pt-4 border-t border-zinc-200 dark:border-zinc-700">
                                    <div class="flex justify-between items-center">
                                        <span class="font-medium text-zinc-900 dark:text-zinc-100">Labor Total:</span>
                                        <span class="text-lg font-semibold text-green-600 dark:text-green-400">
                                            ${{ number_format(collect($labor_operations)->sum(fn($op) => $op['estimated_hours'] * $op['labor_rate']), 2) }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Manual Labor Entry -->
                        <div class="pt-4 border-t border-zinc-200 dark:border-zinc-700">
                            <button type="button" 
                                    wire:click="addLaborOperation" 
                                    class="w-full py-3 px-4 border-2 border-dashed border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-600 dark:text-zinc-400 hover:border-green-500 hover:text-green-500 transition-colors text-sm">
                                + Add Custom Operation (Not in Catalog)
                            </button>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Diagnostic Codes Section -->
            <div class="bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm">
                <button type="button" wire:click="toggleDiagnosticCodesSection" class="w-full px-6 py-4 flex items-center justify-between border-b border-zinc-200 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-700/50 transition-colors">
                    <h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Diagnostic Codes</h3>
                    <svg class="h-5 w-5 text-zinc-500 transform {{ $showDiagnosticCodesSection ? 'rotate-180' : '' }} transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                
                @if($showDiagnosticCodesSection)
                    <div class="p-6">
                        <div class="space-y-4">
                            @foreach($diagnostic_codes as $index => $code)
                                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 p-4 bg-zinc-50 dark:bg-zinc-900 rounded-lg">
                                    <div>
                                        <label class="block text-xs font-medium text-zinc-700 dark:text-zinc-300 mb-1">Code</label>
                                        <input type="text" wire:model="diagnostic_codes.{{ $index }}.code" 
                                               class="w-full text-sm rounded border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800"
                                               placeholder="e.g., P0301">
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-zinc-700 dark:text-zinc-300 mb-1">Description</label>
                                        <input type="text" wire:model="diagnostic_codes.{{ $index }}.description" 
                                               class="w-full text-sm rounded border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800"
                                               placeholder="e.g., Cylinder 1 Misfire">
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-zinc-700 dark:text-zinc-300 mb-1">System</label>
                                        <input type="text" wire:model="diagnostic_codes.{{ $index }}.system" 
                                               class="w-full text-sm rounded border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800"
                                               placeholder="e.g., Engine">
                                    </div>
                                    <div class="flex items-end">
                                        <button type="button" wire:click="removeDiagnosticCode({{ $index }})" 
                                                class="px-3 py-2 text-sm text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 rounded">
                                            Remove
                                        </button>
                                    </div>
                                </div>
                            @endforeach
                            
                            <button type="button" wire:click="addDiagnosticCode" 
                                    class="w-full py-2 px-4 border-2 border-dashed border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-600 dark:text-zinc-400 hover:border-blue-500 hover:text-blue-500 transition-colors">
                                + Add Diagnostic Code
                            </button>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Photos Section -->
            <div class="bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm">
                <div class="px-6 py-4 border-b border-zinc-200 dark:border-zinc-700">
                    <h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Diagnostic Photos</h3>
                    <p class="text-sm text-zinc-600 dark:text-zinc-400 mt-1">Upload photos to document your findings (Max 5MB per image)</p>
                </div>
                <div class="p-6">
                    <div class="border-2 border-dashed border-zinc-300 dark:border-zinc-600 rounded-lg p-6 text-center">
                        <input type="file" wire:model="photos" multiple accept="image/*" class="hidden" id="photo-upload">
                        <label for="photo-upload" class="cursor-pointer">
                            <svg class="mx-auto h-12 w-12 text-zinc-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <div class="mt-2">
                                <span class="text-sm font-medium text-blue-600 hover:text-blue-500">Upload photos</span>
                                <span class="text-sm text-zinc-500"> or drag and drop</span>
                            </div>
                            <p class="text-xs text-zinc-500">PNG, JPG, GIF up to 5MB each</p>
                        </label>
                    </div>
                    @error('photos.*') 
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p> 
                    @enderror
                </div>
            </div>

            <!-- Advanced Options -->
            <div class="bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm">
                <button type="button" wire:click="toggleAdvancedOptions" class="w-full px-6 py-4 flex items-center justify-between border-b border-zinc-200 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-700/50 transition-colors">
                    <h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Advanced Options</h3>
                    <svg class="h-5 w-5 text-zinc-500 transform {{ $showAdvancedOptions ? 'rotate-180' : '' }} transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                
                @if($showAdvancedOptions)
                    <div class="p-6 space-y-6">
                        <!-- Environmental Impact -->
                        <div>
                            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Environmental Impact</label>
                            <textarea wire:model="environmental_impact" 
                                     class="w-full rounded-lg border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                     rows="2" 
                                     placeholder="Any environmental considerations for this repair..."></textarea>
                        </div>

                        <!-- Customer Authorization Required -->
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" wire:model="customer_authorization_required" 
                                       class="rounded border-zinc-300 dark:border-zinc-600 text-blue-600 shadow-sm focus:ring-blue-500">
                                <span class="ml-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">Customer authorization required before proceeding</span>
                            </label>
                        </div>

                        <!-- Additional Notes -->
                        <div>
                            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Additional Notes</label>
                            <textarea wire:model="notes" 
                                     class="w-full rounded-lg border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                     rows="3" 
                                     placeholder="Any additional observations, recommendations, or important information..."></textarea>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <!-- Cost Summary -->
        @if(count($parts_required) > 0 || count($labor_operations) > 0 || count($timesheets) > 0)
            <div class="bg-gradient-to-r from-blue-50 to-green-50 dark:from-blue-900/20 dark:to-green-900/20 rounded-xl border border-blue-200 dark:border-blue-700 shadow-sm p-6">
                <h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
                    <span class="flex items-center space-x-2">
                        <svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                        </svg>
                        <span>Cost Summary</span>
                    </span>
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <!-- Diagnostic Time -->
                    @if(count($timesheets) > 0)
                        <div class="bg-white dark:bg-zinc-800 rounded-lg p-4 shadow-sm">
                            <div class="flex items-center space-x-2 mb-2">
                                <svg class="h-4 w-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                <h4 class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Diagnostic Time</h4>
                            </div>
                            <div class="space-y-1">
                                <p class="text-xs text-zinc-600 dark:text-zinc-400">
                                    {{ number_format(collect($timesheets)->sum('billable_hours'), 2) }} hours
                                </p>
                                <p class="text-lg font-semibold text-purple-600 dark:text-purple-400">
                                    ${{ number_format(collect($timesheets)->sum('total_amount'), 2) }}
                                </p>
                            </div>
                        </div>
                    @endif

                    <!-- Parts Cost -->
                    @if(count($parts_required) > 0)
                        <div class="bg-white dark:bg-zinc-800 rounded-lg p-4 shadow-sm">
                            <div class="flex items-center space-x-2 mb-2">
                                <svg class="h-4 w-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
                                </svg>
                                <h4 class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Parts Cost</h4>
                            </div>
                            <div class="space-y-1">
                                <p class="text-xs text-zinc-600 dark:text-zinc-400">
                                    {{ count($parts_required) }} part{{ count($parts_required) !== 1 ? 's' : '' }}
                                </p>
                                <p class="text-lg font-semibold text-blue-600 dark:text-blue-400">
                                    ${{ number_format(collect($parts_required)->sum(fn($part) => $part['estimated_cost'] * $part['quantity']), 2) }}
                                </p>
                            </div>
                        </div>
                    @endif

                    <!-- Labor Cost -->
                    @if(count($labor_operations) > 0)
                        <div class="bg-white dark:bg-zinc-800 rounded-lg p-4 shadow-sm">
                            <div class="flex items-center space-x-2 mb-2">
                                <svg class="h-4 w-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                </svg>
                                <h4 class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Labor Cost</h4>
                            </div>
                            <div class="space-y-1">
                                <p class="text-xs text-zinc-600 dark:text-zinc-400">
                                    {{ number_format(collect($labor_operations)->sum('estimated_hours'), 2) }} hours
                                </p>
                                <p class="text-lg font-semibold text-green-600 dark:text-green-400">
                                    ${{ number_format(collect($labor_operations)->sum(fn($op) => $op['estimated_hours'] * $op['labor_rate']), 2) }}
                                </p>
                            </div>
                        </div>
                    @endif

                    <!-- Total Estimate -->
                    <div class="bg-gradient-to-br from-yellow-50 to-orange-50 dark:from-yellow-900/20 dark:to-orange-900/20 rounded-lg p-4 shadow-sm ring-2 ring-yellow-200 dark:ring-yellow-700">
                        <div class="flex items-center space-x-2 mb-2">
                            <svg class="h-4 w-4 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <h4 class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Total Estimate</h4>
                        </div>
                        <div class="space-y-1">
                            <p class="text-xs text-zinc-600 dark:text-zinc-400">
                                Complete Repair Cost
                            </p>
                            <p class="text-xl font-bold text-yellow-600 dark:text-yellow-400">
                                ${{ number_format($this->calculateTotalEstimatedCost(), 2) }}
                            </p>
                        </div>
                    </div>
                </div>

                @if($createEstimateAutomatically)
                    <div class="mt-4 p-4 bg-green-100 dark:bg-green-900/30 rounded-lg border border-green-200 dark:border-green-700">
                        <div class="flex items-start space-x-3">
                            <svg class="h-5 w-5 text-green-600 dark:text-green-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <div>
                                <p class="text-sm font-medium text-green-800 dark:text-green-200">
                                    Automatic Estimate Creation Enabled
                                </p>
                                <p class="text-xs text-green-700 dark:text-green-300 mt-1">
                                    A detailed estimate will be automatically generated and sent to the customer when you complete this diagnosis.
                                </p>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        @endif

        <!-- Form Actions -->
        <div class="bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm p-6">
            <div class="flex items-center justify-between">
                <div class="text-sm text-zinc-600 dark:text-zinc-400">
                    <p>This diagnosis will update the job card status to "Diagnosis Completed"</p>
                    <p class="mt-1">An estimate can be created based on these findings.</p>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="{{ route('job-cards.show', $jobCard) }}" 
                       class="px-6 py-3 text-sm font-medium text-zinc-700 dark:text-zinc-300 bg-white dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-600 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors">
                        Cancel
                    </a>
                    <button type="button"
                            wire:click="saveProgress"
                            class="px-6 py-3 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/30 border border-blue-300 dark:border-blue-600 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors">
                        Save Progress
                    </button>
                    <button type="submit" 
                            class="px-6 py-3 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-lg transition-colors">
                        Complete Diagnosis
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>