@php
	$avatarThumb = old('avatar')
		? asset('img/200x200/no-profile.jpg')
		: (data_get($data, 'avatar.thumb') ?: asset('img/200x200/no-profile.jpg'));
	$tenantFromData = null;
	$userRoles = data_get($data, 'user_roles', []);
	if (!empty($userRoles) && isset($userRoles[0]['tenant_id'])) {
		$tenantFromData = $userRoles[0]['tenant_id'];
	}
	$inspectorProfile = data_get($data, 'inspectorProfile', []);
	$inspectorAssociations = data_get($data, 'inspectorAssociations', []);
@endphp

<div class="main_contentarea mt-2">
	<div class="container">
		@if ($errors->any())
			<div class="alert alert-danger mb-4">
				<h5 class="alert-heading"><i class="fas fa-exclamation-circle me-2"></i>Please fix the following errors:</h5>
				<ul class="mb-0">
					@foreach ($errors->all() as $error)
						<li>{{ $error }}</li>
					@endforeach
				</ul>
			</div>
		@endif
		<div class="customer_infobox">
			<div class="customer_statusarea align-items-start w-100">
				<div class="customer_image me-4">
					<img src="{{ $avatarThumb }}" class="customer_imageup" />
					<div class="customer_imageuploadfile">
						<img src="{{ asset('images/camera.svg') }}" />
						<input type="file" class="customuploadfile" name="avatar" accept="image/*">
						@error('avatar')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
					</div>
					<div class="text-danger small mt-1 d-none" id="avatar-error"></div>
				</div>

				<div class="customer_info flex-grow-1">
					@if (!session('tenant_id'))
						<div class="row mb-4">
							<div class="col-lg-4 col-md-4">
								<div class="mb-3">
									<label for="tenant_id" class="form-label">Tenant <span class="text-danger">*</span></label>
									<select class="form-select js-select2 @error('tenant_id') is-invalid @enderror" name="tenant_id" id="tenant_id" required>
										<option value="">Choose...</option>
										@foreach ($tenant_list as $key => $value)
											<option value="{{ $key }}" {{ (string) old('tenant_id', $tenantFromData) === (string) $key ? 'selected' : '' }}>{{ $value }}</option>
										@endforeach
									</select>
									@error('tenant_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
								</div>
							</div>
						</div>
					@else
						<input type="hidden" name="tenant_id" value="{{ old('tenant_id', session('tenant_id')) }}" />
					@endif

					<!-- Basic Information Section -->
					<div class="row mb-4">
						<div class="col-12">
							<h5 class="section-title mb-3">Basic Information</h5>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="first_name" class="form-label">First Name <span class="text-danger">*</span></label>
								<input type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name" id="first_name" value="{{ old('first_name', data_get($data, 'first_name')) }}" required />
								@error('first_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="last_name" class="form-label">Last Name <span class="text-danger">*</span></label>
								<input type="text" class="form-control @error('last_name') is-invalid @enderror" name="last_name" id="last_name" value="{{ old('last_name', data_get($data, 'last_name')) }}" required />
								@error('last_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="title" class="form-label">Title <span class="text-danger">*</span></label>
								<input type="text" class="form-control @error('title') is-invalid @enderror" name="title" id="title" value="{{ old('title', data_get($inspectorProfile, 'title', data_get($data, 'title'))) }}" required />
								@error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
					</div>

					<!-- Contact Information Section -->
					<div class="row mb-4">
						<div class="col-12">
							<h5 class="section-title mb-3">Contact Information</h5>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="mobile" class="form-label">Mobile <span class="text-danger">*</span></label>
								<input type="text" class="form-control @error('mobile') is-invalid @enderror mobile_number_format" name="mobile" id="mobile" value="{{ old('mobile', data_get($data, 'mobile')) }}" pattern="\(\d{3}\)\s\d{3}-\d{4}" placeholder="(123) 456-7890" required />
								@error('mobile')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="office_number" class="form-label">Office Number <span class="text-danger">*</span></label>
								<input type="text" class="form-control @error('phone') is-invalid @enderror phone_number_format" name="phone" id="office_number" value="{{ old('phone', data_get($data, 'phone')) }}" pattern="\(\d{3}\)\s\d{3}-\d{4}" placeholder="(123) 456-7890" required />
								@error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="personal_email" class="form-label">Personal Email <span class="text-danger">*</span></label>
								<input type="email" class="form-control @error('personal_email') is-invalid @enderror" name="email" id="personal_email" value="{{ old('email', data_get($data, 'email')) }}" required />
								@error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="office_email" class="form-label">Office Email <span class="text-danger">*</span></label>
								<input type="email" class="form-control @error('office_email') is-invalid @enderror" name="office_email" id="office_email" value="{{ old('office_email', data_get($inspectorProfile, 'office_email', data_get($data, 'office_email'))) }}" required />
								@error('office_email')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
					</div>

					<!-- Street Information Section -->
					<div class="row mb-4">
						<div class="col-12">
							<h5 class="section-title mb-3">Street Information</h5>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="address_auto_complete" class="form-label">Home Address</label>
								<input type="text" class="form-control @error('address_line1') is-invalid @enderror" name="address_line1" id="address_auto_complete" value="{{ old('address_line1', data_get($data, 'addresses.address_line1', data_get($data, 'home_address', data_get($data, 'address_line1')))) }}" />
								@error('address_line1')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="city_auto_complete" class="form-label">City</label>
								<input type="text" class="form-control @error('city') is-invalid @enderror" name="city" id="city_auto_complete" value="{{ old('city', data_get($data, 'addresses.city', data_get($data, 'city'))) }}" readonly />
								@error('city')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="state_auto_complete" class="form-label">State</label>
								<input type="text" class="form-control @error('state') is-invalid @enderror" name="state" id="state_auto_complete" value="{{ old('state', data_get($data, 'addresses.state', data_get($data, 'state'))) }}" readonly />
								@error('state')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="zip_auto_complete" class="form-label">Zip (12345)</label>
								<input type="text" class="form-control @error('zip') is-invalid @enderror" name="zip" id="zip_auto_complete" value="{{ old('zip', data_get($data, 'addresses.zip', data_get($data, 'zip'))) }}" readonly />
								@error('zip')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="country_auto_complete" class="form-label">Country</label>
								<input type="text" class="form-control @error('country') is-invalid @enderror" name="country" id="country_auto_complete" value="{{ old('country', data_get($data, 'addresses.country', data_get($data, 'country'))) }}" readonly />
								@error('country')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
						
						{{-- Hidden Lat/Lng fields for address autocomplete --}}
						<input type="hidden" id="lat_hidden" name="latitude" value="{{ old('latitude', data_get($data, 'addresses.latitude', data_get($data, 'latitude'))) }}" />
						<input type="hidden" id="lng_hidden" name="longitude" value="{{ old('longitude', data_get($data, 'addresses.longitude', data_get($data, 'longitude'))) }}" />
						@error('latitude')<div class="text-danger small">{{ $message }}</div>@enderror
						@error('longitude')<div class="text-danger small">{{ $message }}</div>@enderror
					</div>

					<!-- Additional Options Section -->
					<div class="row mb-4">
						<div class="col-12">
							<h5 class="section-title mb-3">Additional Options</h5>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="calendar_color" class="form-label">Calendar Color</label>
								<input type="color" class="form-control form-control-color @error('calendar_color') is-invalid @enderror" name="calendar_color" id="calendar_color" value="{{ old('calendar_color', data_get($inspectorProfile, 'calendar_color', '#007bff')) }}" />
								@error('calendar_color')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
						<div class="col-lg-4 col-md-4 " style="display:none;">
							<div class="mb-3">
								<label for="event_color" class="form-label">Event Color</label>
								<input type="color" class="form-control form-control-color @error('event_color') is-invalid @enderror" name="event_color" id="event_color" value="{{ old('event_color', data_get($inspectorProfile, 'event_color', '#28a745')) }}" />
								@error('event_color')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="employee_time_off_color" class="form-label">Employee Time Off Color</label>
								<input type="color" class="form-control form-control-color @error('employee_time_off_color') is-invalid @enderror" name="employee_time_off_color" id="employee_time_off_color" value="{{ old('employee_time_off_color', data_get($inspectorProfile, 'timeoff_color', '#dc3545')) }}" />
								@error('employee_time_off_color')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="license_number" class="form-label">License Number</label>
								<input type="text" class="form-control @error('license_number') is-invalid @enderror" name="license_number" id="license_number" value="{{ old('license_number', data_get($inspectorProfile, 'license_number')) }}" maxlength="50" />
								@error('license_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label class="form-label">Upload Sign</label>
								<div class="upload-preview-container">
									<input type="file" class="form-control upload-file-input" name="sign_file" id="sign_file" accept=".jpg,.jpeg,.png,.pdf" style="display: none;">
									<button type="button" class="btn btn-primary btn-sm upload-trigger" data-target="sign_file">Upload Sign</button>
									<div class="upload-preview mt-2 {{ data_get($data, 'signFile') ? '' : 'd-none' }}" id="sign_preview">
										@if(data_get($data, 'signFile'))
											@if(in_array(strtolower(data_get($data, 'signFile.file_ext')), ['jpg', 'jpeg', 'png']))
												{{-- Show image preview for image signatures --}}
												<img src="{{ \App\Models\Masters\File::getImage(data_get($data, 'signFile'), '200x200') }}" alt="Sign Preview" class="preview-image" style="max-width: 100px; max-height: 60px; border: 1px solid #ddd; border-radius: 4px;">
											@else
												{{-- Show file info for PDF signatures with click to open --}}
												<div class="file-info p-2 border rounded bg-light d-flex align-items-center">
													<i class="fas fa-file-pdf text-danger me-2"></i>
													<a href="{{ \App\Models\Masters\File::getImage(data_get($data, 'signFile'), 'original') }}" target="_blank" class="text-decoration-none">
														<span class="file-name">{{ data_get($data, 'signFile.file_name_original', 'Sign.pdf') }}</span>
													</a>
												</div>
											@endif
										@else
											{{-- Default empty state --}}
											<div class="file-info p-2 border rounded bg-light">
												<span class="file-name"></span>
											</div>
										@endif
										<button type="button" class="btn btn-sm btn-outline-danger ms-2 remove-upload" data-target="sign_file">Remove</button>
									</div>
									@error('sign_file')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
								</div>
							</div>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="online_resume_link" class="form-label">Online Resume Link</label>
								<input type="url" class="form-control @error('online_resume_link') is-invalid @enderror" name="online_resume_link" id="online_resume_link" value="{{ old('online_resume_link', data_get($inspectorProfile, 'online_resume_url')) }}" placeholder="https://example.com/resume" />
								@error('online_resume_link')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label class="form-label">Upload Certificate</label>
								<div class="upload-preview-container">
									<input type="file" class="form-control upload-file-input" name="certificate_file" id="certificate_file" accept=".pdf,.jpg,.jpeg,.png" style="display: none;">
									<button type="button" class="btn btn-primary btn-sm upload-trigger" data-target="certificate_file">Upload Certificate</button>
									<div class="upload-preview mt-2 {{ data_get($data, 'certificateFile') ? '' : 'd-none' }}" id="certificate_preview">
										@if(data_get($data, 'certificateFile'))
											@if(in_array(strtolower(data_get($data, 'certificateFile.file_ext')), ['jpg', 'jpeg', 'png']))
												{{-- Show image preview for image certificates --}}
												<img src="{{ \App\Models\Masters\File::getImage(data_get($data, 'certificateFile'), '200x200') }}" alt="Certificate Preview" style="max-width: 100px; max-height: 60px; border: 1px solid #ddd; border-radius: 4px;">
											@else
												{{-- Show file info for PDF certificates with click to open --}}
												<div class="file-info p-2 border rounded bg-light d-flex align-items-center">
													<i class="fas fa-file-pdf text-danger me-2"></i>
													<a href="{{ \App\Models\Masters\File::getImage(data_get($data, 'certificateFile'), 'original') }}" target="_blank" class="text-decoration-none">
														<span class="file-name">{{ data_get($data, 'certificateFile.file_name_original', 'Certificate.pdf') }}</span>
													</a>
												</div>
											@endif
										@else
											{{-- Default empty state --}}
											<div class="file-info p-2 border rounded bg-light">
												<span class="file-name"></span>
											</div>
										@endif
										<button type="button" class="btn btn-sm btn-outline-danger ms-2 remove-upload" data-target="certificate_file">Remove</button>
									</div>
									@error('certificate_file')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
								</div>
							</div>
						</div>
						<!-- Removed sponsor selection field -->
						<div class="col-lg-4 col-md-4">
							<div class="form-check mt-4">
								<input class="form-check-input" type="checkbox" value="1" id="is_subcontractor" name="is_subcontractor" {{ old('is_subcontractor', data_get($inspectorProfile, 'is_subcontractor')) ? 'checked' : '' }}>
								<label class="form-check-label" for="is_subcontractor">Is Subcontractor?</label>
							</div>
						</div>
					</div>

						{{-- Associations Information removed --}}

					</div>
				</div>
			</div>
		</div>
	</div>
</div>

@php($placeApiKey = \Config::get('settings.address_auto_populate_key'))
<!-- Include the common address autocomplete script -->
<script src="{{ asset('assets/js/address-autocomplete.js') }}"></script>
<!-- Load Google Maps API with Places library -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key={{ $placeApiKey }}&libraries=places&loading=async&callback=initAddressAutocomplete">
</script>

<style>
.file-info a {
	color: #0d6efd !important;
	font-weight: 500;
}
.file-info a:hover {
	color: #0a58ca !important;
	text-decoration: underline !important;
}
.file-info .file-name {
	cursor: pointer;
	transition: color 0.2s ease;
}
</style>

<script>
document.querySelector('.customuploadfile').addEventListener('change', function(event) {
	const file = event.target.files[0];
	const errorDiv = document.getElementById('avatar-error');
	errorDiv.classList.add('d-none');
	errorDiv.textContent = '';
	if (file) {
		if (!file.type.startsWith('image/')) {
			errorDiv.textContent = 'Please select a valid image file (jpg, png, gif, webp).';
			errorDiv.classList.remove('d-none');
			event.target.value = '';
			document.querySelector('.customer_imageup').setAttribute('src', "{{ asset('img/200x200/no-profile.jpg') }}");
			return;
		}
		const reader = new FileReader();
		reader.onload = e => document.querySelector('.customer_imageup').setAttribute('src', e.target.result);
		reader.readAsDataURL(file);
	}
});

// File upload preview functionality
document.addEventListener('click', function(e) {
	if (e.target.classList.contains('upload-trigger')) {
		const target = e.target.getAttribute('data-target');
		document.getElementById(target).click();
	}
	
	if (e.target.classList.contains('remove-upload')) {
		const target = e.target.getAttribute('data-target');
		const input = document.getElementById(target);
		const previewId = target.replace('_file', '_preview').replace('assoc_logo_', 'assoc_logo_preview_');
		const preview = document.getElementById(previewId);
		
		input.value = '';
		preview.classList.add('d-none');
		
		// Reset preview content based on field type
		if (target.includes('certificate')) {
			// Reset certificate preview content
			const fileInfoDiv = preview.querySelector('.file-info');
			if (fileInfoDiv) {
				fileInfoDiv.innerHTML = '<span class="file-name"></span>';
			}
		} else if (target.includes('sign')) {
			// Reset sign preview content (both image and file info)
			const imgElement = preview.querySelector('.preview-image') || preview.querySelector('img');
			const fileInfoDiv = preview.querySelector('.file-info');
			
			if (imgElement) {
				imgElement.src = '';
				imgElement.style.display = 'block';
			}
			if (fileInfoDiv) {
				fileInfoDiv.innerHTML = '<span class="file-name"></span>';
				fileInfoDiv.style.display = 'none';
			}
		} else if (preview.querySelector('img')) {
			// Reset image preview for other types (logos)
			preview.querySelector('img').src = '';
		}
	}
});

document.addEventListener('change', function(e) {
	if (e.target.classList.contains('upload-file-input')) {
		const file = e.target.files[0];
		const inputId = e.target.id;
		const previewId = inputId.replace('_file', '_preview').replace('assoc_logo_', 'assoc_logo_preview_');
		const preview = document.getElementById(previewId);
		
			preview.classList.remove('d-none');
			const imgEl = preview.querySelector('img');
			const fileInfoDiv = preview.querySelector('.file-info');

			// Sign or certificate files can be image or pdf
			if (inputId.includes('sign') || inputId.includes('certificate')) {
				if (file.type === 'application/pdf') {
					if (imgEl) { imgEl.src = ''; }
					if (fileInfoDiv) {
						fileInfoDiv.innerHTML = `<i class='fas fa-file-pdf text-danger me-2'></i><span class='file-name'>${file.name}</span>`;
						fileInfoDiv.style.display = 'flex';
					}
				} else if (file.type.startsWith('image/')) {
					const reader = new FileReader();
					reader.onload = ev => { if (imgEl) { imgEl.src = ev.target.result; } };
					reader.readAsDataURL(file);
					if (fileInfoDiv) { fileInfoDiv.style.display = 'none'; }
				}
			} else {
				// Generic image preview (logo or other)
				if (file.type.startsWith('image/')) {
					const reader = new FileReader();
					reader.onload = ev => { if (imgEl) { imgEl.src = ev.target.result; } };
					reader.readAsDataURL(file);
				}
			}
		}
});
</script>