@extends('garage.layouts.app')

@section('title', 'Edit Inspection')

@push('scripts')
<script>
function loadVehicles(customerId) {
    if (!customerId) {
        document.getElementById('vehicleSelect').innerHTML = '<option value="">Select Vehicle</option>';
        return;
    }
    
    fetch(`/garage/api/vehicles?customer_id=${customerId}`)
        .then(response => response.json())
        .then(data => {
            const select = document.getElementById('vehicleSelect');
            select.innerHTML = '<option value="">Select Vehicle</option>';
            
            data.forEach(vehicle => {
                const option = document.createElement('option');
                option.value = vehicle.id;
                let text = vehicle.registration_number;
                if (vehicle.make && vehicle.model) {
                    text += ` - ${vehicle.make} ${vehicle.model}`;
                }
                option.textContent = text;
                @if($inspection->vehicle_id)
                if (vehicle.id == {{ $inspection->vehicle_id }}) {
                    option.selected = true;
                }
                @endif
                select.appendChild(option);
            });
        })
        .catch(error => {
            console.error('Error loading vehicles:', error);
        });
}

document.addEventListener('DOMContentLoaded', function() {
    const customerSelect = document.getElementById('customerSelect');
    if (customerSelect) {
        customerSelect.addEventListener('change', function() {
            loadVehicles(this.value);
        });
        
        // Load vehicles if customer is already selected
        if (customerSelect.value) {
            loadVehicles(customerSelect.value);
        }
    }
});
</script>
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="card-title mb-0">
                    <i class="bi bi-clipboard-check me-2"></i>Edit Inspection
                </h5>
                <a href="{{ route('garage.inspections.index') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i>Back to List
                </a>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('garage.inspections.update', $inspection->id) }}">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="mb-3 text-muted">Basic Information</h6>
                            
                            <div class="mb-3">
                                <label class="form-label">Inspection Number</label>
                                <input type="text" class="form-control" value="{{ $inspection->inspection_number }}" disabled>
                                <small class="text-muted">Inspection number is auto-generated and cannot be changed</small>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Inspection Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('inspection_date') is-invalid @enderror" name="inspection_date" value="{{ old('inspection_date', $inspection->inspection_date) }}" required>
                                @error('inspection_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Inspection Type <span class="text-danger">*</span></label>
                                <select class="form-select @error('inspection_type') is-invalid @enderror" name="inspection_type" required>
                                    <option value="pre_service" {{ old('inspection_type', $inspection->inspection_type) === 'pre_service' ? 'selected' : '' }}>Pre-Service</option>
                                    <option value="post_service" {{ old('inspection_type', $inspection->inspection_type) === 'post_service' ? 'selected' : '' }}>Post-Service</option>
                                    <option value="safety" {{ old('inspection_type', $inspection->inspection_type) === 'safety' ? 'selected' : '' }}>Safety</option>
                                    <option value="emission" {{ old('inspection_type', $inspection->inspection_type) === 'emission' ? 'selected' : '' }}>Emission</option>
                                    <option value="insurance" {{ old('inspection_type', $inspection->inspection_type) === 'insurance' ? 'selected' : '' }}>Insurance</option>
                                    <option value="custom" {{ old('inspection_type', $inspection->inspection_type) === 'custom' ? 'selected' : '' }}>Custom</option>
                                </select>
                                @error('inspection_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Customer</label>
                                <select class="form-select @error('customer_ledger_id') is-invalid @enderror" name="customer_ledger_id" id="customerSelect">
                                    <option value="">Select Customer</option>
                                    @foreach($customers as $customer)
                                    <option value="{{ $customer->id }}" {{ old('customer_ledger_id', $inspection->customer_ledger_id) == $customer->id ? 'selected' : '' }}>{{ $customer->name }}</option>
                                    @endforeach
                                </select>
                                @error('customer_ledger_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Vehicle</label>
                                <select class="form-select @error('vehicle_id') is-invalid @enderror" name="vehicle_id" id="vehicleSelect">
                                    <option value="">Select Vehicle</option>
                                    @foreach($vehicles as $vehicle)
                                    <option value="{{ $vehicle->id }}" {{ old('vehicle_id', $inspection->vehicle_id) == $vehicle->id ? 'selected' : '' }}>
                                        {{ $vehicle->registration_number }}
                                        @if($vehicle->make && $vehicle->model)
                                        - {{ $vehicle->make }} {{ $vehicle->model }}
                                        @endif
                                    </option>
                                    @endforeach
                                </select>
                                @error('vehicle_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Status</label>
                                <select class="form-select @error('status') is-invalid @enderror" name="status">
                                    <option value="pending" {{ old('status', $inspection->status) === 'pending' ? 'selected' : '' }}>Pending</option>
                                    <option value="in_progress" {{ old('status', $inspection->status) === 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                    <option value="completed" {{ old('status', $inspection->status) === 'completed' ? 'selected' : '' }}>Completed</option>
                                    <option value="cancelled" {{ old('status', $inspection->status) === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                </select>
                                @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Total Cost</label>
                                <div class="input-group">
                                    <span class="input-group-text">PKR</span>
                                    <input type="number" step="0.01" class="form-control @error('total_cost') is-invalid @enderror" name="total_cost" value="{{ old('total_cost', $inspection->total_cost) }}" min="0">
                                    @error('total_cost')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <h6 class="mb-3 text-muted">Inspection Details</h6>

                            <div class="mb-3">
                                <label class="form-label">Findings</label>
                                <textarea class="form-control @error('findings') is-invalid @enderror" name="findings" rows="6" placeholder="Enter inspection findings...">{{ old('findings', $inspection->findings) }}</textarea>
                                @error('findings')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Recommendations</label>
                                <textarea class="form-control @error('recommendations') is-invalid @enderror" name="recommendations" rows="6" placeholder="Enter recommendations...">{{ old('recommendations', $inspection->recommendations) }}</textarea>
                                @error('recommendations')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <a href="{{ route('garage.inspections.index') }}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-1"></i>Update Inspection
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection