Car-Repairs-Shop/resources/views/livewire/diagnosis/show.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">Diagnosis Details</h1>
                <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
                    Diagnostic analysis for Job Card #{{ $diagnosis->jobCard->job_card_number }}
                </p>
            </div>
            <div class="flex items-center space-x-3">
                <a href="{{ route('diagnosis.edit', $diagnosis) }}" class="inline-flex items-center px-4 py-2 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg transition-colors">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                    Edit Diagnosis
                </a>
                <a href="{{ route('job-cards.show', $diagnosis->jobCard) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors shadow-sm">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    Back to Job Card
                </a>
            </div>
        </div>
    </div>

    <!-- Vehicle & Job Information -->
    <div class="bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm mb-8">
        <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">{{ $diagnosis->jobCard->customer->name }}</p>
                    <p class="text-xs text-zinc-500 dark:text-zinc-400">{{ $diagnosis->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">{{ $diagnosis->jobCard->vehicle->year }} {{ $diagnosis->jobCard->vehicle->make }} {{ $diagnosis->jobCard->vehicle->model }}</p>
                    <p class="text-xs text-zinc-500 dark:text-zinc-400">{{ $diagnosis->jobCard->vehicle->license_plate }}</p>
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Service Coordinator</label>
                    <p class="text-sm text-zinc-900 dark:text-zinc-100">{{ $diagnosis->serviceCoordinator->name }}</p>
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Diagnosis Date</label>
                    <p class="text-sm text-zinc-900 dark:text-zinc-100">{{ $diagnosis->diagnosis_date?->format('M j, Y g:i A') ?? 'Not set' }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Status and Priority -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm p-6">
            <div class="text-center">
                <div class="mx-auto h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mb-4">
                    <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>
                <h3 class="text-lg font-medium text-zinc-900 dark:text-zinc-100">Status</h3>
                <p class="text-sm text-zinc-500 dark:text-zinc-400 capitalize">{{ str_replace('_', ' ', $diagnosis->diagnosis_status) }}</p>
            </div>
        </div>
        
        <div class="bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm p-6">
            <div class="text-center">
                <div class="mx-auto h-12 w-12 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mb-4">
                    <svg class="h-6 w-6 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                    </svg>
                </div>
                <h3 class="text-lg font-medium text-zinc-900 dark:text-zinc-100">Priority</h3>
                <p class="text-sm text-zinc-500 dark:text-zinc-400 capitalize">{{ $diagnosis->priority_level }}</p>
            </div>
        </div>
        
        <div class="bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm p-6">
            <div class="text-center">
                <div class="mx-auto h-12 w-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mb-4">
                    <svg class="h-6 w-6 text-green-600 dark:text-green-400" 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>
                </div>
                <h3 class="text-lg font-medium text-zinc-900 dark:text-zinc-100">Estimated Time</h3>
                <p class="text-sm text-zinc-500 dark:text-zinc-400">{{ $diagnosis->estimated_repair_time }} hours</p>
            </div>
        </div>
    </div>

    <!-- Diagnostic Analysis -->
    <div class="bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm mb-8">
        <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>
        </div>
        <div class="p-6 space-y-6">
            @if($diagnosis->customer_reported_issues)
                <div>
                    <h3 class="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Customer Reported Issues</h3>
                    <p class="text-sm text-zinc-900 dark:text-zinc-100 bg-zinc-50 dark:bg-zinc-900 p-3 rounded-lg">{{ $diagnosis->customer_reported_issues }}</p>
                </div>
            @endif
            
            <div>
                <h3 class="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Diagnostic Findings</h3>
                <p class="text-sm text-zinc-900 dark:text-zinc-100 bg-zinc-50 dark:bg-zinc-900 p-3 rounded-lg">{{ $diagnosis->diagnostic_findings }}</p>
            </div>
            
            <div>
                <h3 class="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Root Cause Analysis</h3>
                <p class="text-sm text-zinc-900 dark:text-zinc-100 bg-zinc-50 dark:bg-zinc-900 p-3 rounded-lg">{{ $diagnosis->root_cause_analysis }}</p>
            </div>
            
            <div>
                <h3 class="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Recommended Repairs</h3>
                <p class="text-sm text-zinc-900 dark:text-zinc-100 bg-zinc-50 dark:bg-zinc-900 p-3 rounded-lg">{{ $diagnosis->recommended_repairs }}</p>
            </div>

            @if($diagnosis->additional_issues_found)
                <div>
                    <h3 class="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Additional Issues Found</h3>
                    <p class="text-sm text-zinc-900 dark:text-zinc-100 bg-amber-50 dark:bg-amber-900/20 p-3 rounded-lg border border-amber-200 dark:border-amber-800">{{ $diagnosis->additional_issues_found }}</p>
                </div>
            @endif

            @if($diagnosis->safety_concerns)
                <div>
                    <h3 class="text-sm font-medium text-red-700 dark:text-red-300 mb-2">Safety Concerns</h3>
                    <p class="text-sm text-red-900 dark:text-red-100 bg-red-50 dark:bg-red-900/20 p-3 rounded-lg border border-red-200 dark:border-red-800">{{ $diagnosis->safety_concerns }}</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Parts and Labor -->
    @if($diagnosis->parts_required || $diagnosis->labor_operations)
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            @if($diagnosis->parts_required)
                <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">Parts Required</h2>
                    </div>
                    <div class="p-6">
                        <div class="space-y-3">
                            @foreach($diagnosis->parts_required as $part)
                                <div class="p-3 bg-zinc-50 dark:bg-zinc-900 rounded-lg">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <p class="text-sm font-medium text-zinc-900 dark:text-zinc-100">{{ $part['name'] ?? 'Part Name' }}</p>
                                            @if(isset($part['part_number']))
                                                <p class="text-xs text-zinc-500 dark:text-zinc-400">Part #: {{ $part['part_number'] }}</p>
                                            @endif
                                        </div>
                                        @if(isset($part['quantity']))
                                            <span class="text-sm text-zinc-500 dark:text-zinc-400">Qty: {{ $part['quantity'] }}</span>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif

            @if($diagnosis->labor_operations)
                <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">Labor Operations</h2>
                    </div>
                    <div class="p-6">
                        <div class="space-y-3">
                            @foreach($diagnosis->labor_operations as $operation)
                                <div class="p-3 bg-zinc-50 dark:bg-zinc-900 rounded-lg">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <p class="text-sm font-medium text-zinc-900 dark:text-zinc-100">{{ $operation['operation'] ?? 'Operation' }}</p>
                                            @if(isset($operation['description']))
                                                <p class="text-xs text-zinc-500 dark:text-zinc-400">{{ $operation['description'] }}</p>
                                            @endif
                                        </div>
                                        @if(isset($operation['time']))
                                            <span class="text-sm text-zinc-500 dark:text-zinc-400">{{ $operation['time'] }}h</span>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </div>
    @endif

    @if($diagnosis->notes)
        <!-- Notes -->
        <div class="bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm mb-8">
            <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">Additional Notes</h2>
            </div>
            <div class="p-6">
                <p class="text-sm text-zinc-900 dark:text-zinc-100">{{ $diagnosis->notes }}</p>
            </div>
        </div>
    @endif
</div>