@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;">
									<input type="hidden" name="remove_sign" id="remove_sign" value="0">
									<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;">
									<input type="hidden" name="remove_certificate" id="remove_certificate" value="0">
									<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>
						<div class="col-lg-4 col-md-4">
							<div class="mb-3">
								<label for="sponsor" class="form-label">Select Sponsor</label>
								<select class="form-select @error('sponsor') is-invalid @enderror" name="sponsor" id="sponsor">
									<option value="">None</option>
									@foreach ($sponsor_list ?? [] as $key => $value)
										<option value="{{ $key }}" {{ old('sponsor', data_get($inspectorProfile, 'sponsor_user_id')) == $key ? 'selected' : '' }}>{{ $value }}</option>
									@endforeach
								</select>
								@error('sponsor')<div class="invalid-feedback">{{ $message }}</div>@enderror
							</div>
						</div>
						<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>

						<div class="col-12 mt-4">
							<h5 class="d-flex align-items-center gap-2">Associations Information <button type="button" class="btn btn-sm btn-primary" id="add-association">+</button></h5>
							<div id="associations-wrapper" class="mt-3">
								@if(count($inspectorAssociations) > 0)
									@foreach($inspectorAssociations as $index => $association)
										<div class="row g-2 association-row {{ $index > 0 ? 'mt-2' : '' }}">
											{{-- Hidden input to track existing association ID --}}
											<input type="hidden" name="association_id[]" value="{{ $association->id ?? '' }}">
											<div class="col-md-2">
												@if($index == 0)<label class="form-label">Type</label>@endif
												<select class="form-select" name="association_type[]">
													<option value="">None</option>
													@foreach ($association_type_list ?? [] as $key => $value)
														<option value="{{ $key }}" {{ old("association_type.{$index}", $association->association_type) == $key ? 'selected' : '' }}>{{ $value }}</option>
													@endforeach
												</select>
											</div>
											<div class="col-md-3">
												@if($index == 0)<label class="form-label">Association Name</label>@endif
												<input type="text" class="form-control" name="association_name[]" value="{{ old("association_name.{$index}", $association->association_name) }}" />
											</div>
											<div class="col-md-2">
												@if($index == 0)<label class="form-label">Association License No</label>@endif
												<input type="text" class="form-control" name="association_license_no[]" value="{{ old("association_license_no.{$index}", $association->association_license_no) }}" />
											</div>
											<div class="col-md-3">
												@if($index == 0)<label class="form-label">Upload Association Logo</label>@endif
												<div class="upload-preview-container">
													<input type="file" class="form-control upload-file-input" name="association_logo[]" accept="image/*" style="display: none;" id="assoc_logo_{{ $index + 1 }}">
													<button type="button" class="btn btn-primary btn-sm w-100 upload-trigger" data-target="assoc_logo_{{ $index + 1 }}">Upload Logo</button>
													<div class="upload-preview mt-2 {{ $association->logo ? '' : 'd-none' }}" id="assoc_logo_preview_{{ $index + 1 }}">
														@if($association->logo)
															<img src="{{ \App\Models\Masters\File::getImage($association->logo, '200x200') }}" alt="Logo Preview" style="max-width: 60px; max-height: 40px; border: 1px solid #ddd; border-radius: 4px;">
														@else
															<img src="" alt="Logo Preview" style="max-width: 60px; max-height: 40px; border: 1px solid #ddd; border-radius: 4px;">
														@endif
														<button type="button" class="btn btn-sm btn-outline-danger ms-1 remove-upload" data-target="assoc_logo_{{ $index + 1 }}">×</button>
													</div>
												</div>
											</div>
											<div class="col-md-1">
												@if($index == 0)<label class="form-label">Display</label>@endif
												<div class="form-check">
													<input class="form-check-input" type="checkbox" name="association_display[]" value="{{ $index + 1 }}" id="assoc-display-{{ $index + 1 }}" {{ old("association_display.{$index}", $association->display_in_profile) ? 'checked' : '' }}>
													<label class="form-check-label" for="assoc-display-{{ $index + 1 }}">In Profile</label>
												</div>
											</div>
											<div class="col-md-1 text-center {{ $index == 0 ? 'remove-association d-none' : '' }}">
												@if($index == 0)<label class="form-label">&nbsp;</label>@endif
												<div>
													<button type="button" class="btn btn-link text-danger p-0 fs-4 remove-association {{ $index == 0 ? 'd-none' : '' }}">&times;</button>
												</div>
											</div>
										</div>
									@endforeach
								@else
									<div class="row g-2 association-row">
										{{-- Hidden input for new association --}}
										<input type="hidden" name="association_id[]" value="">
										<div class="col-md-2">
											<label class="form-label">Type</label>
											<select class="form-select" name="association_type[]">
												<option value="">None</option>
												@foreach ($association_type_list ?? [] as $key => $value)
													<option value="{{ $key }}">{{ $value }}</option>
												@endforeach
											</select>
										</div>
										<div class="col-md-3">
											<label class="form-label">Association Name</label>
											<input type="text" class="form-control" name="association_name[]" />
										</div>
										<div class="col-md-2">
											<label class="form-label">Association License No</label>
											<input type="text" class="form-control" name="association_license_no[]" />
										</div>
										<div class="col-md-3">
											<label class="form-label">Upload Association Logo</label>
											<div class="upload-preview-container">
												<input type="file" class="form-control upload-file-input" name="association_logo[]" accept="image/*" style="display: none;" id="assoc_logo_1">
												<button type="button" class="btn btn-primary btn-sm w-100 upload-trigger" data-target="assoc_logo_1">Upload Logo</button>
												<div class="upload-preview mt-2 d-none" id="assoc_logo_preview_1">
													<img src="" alt="Logo Preview" style="max-width: 60px; max-height: 40px; border: 1px solid #ddd; border-radius: 4px;">
													<button type="button" class="btn btn-sm btn-outline-danger ms-1 remove-upload" data-target="assoc_logo_1">×</button>
												</div>
											</div>
										</div>
										<div class="col-md-1">
											<label class="form-label">Display</label>
											<div class="form-check">
												<input class="form-check-input" type="checkbox" name="association_display[]" value="1" id="assoc-display-1">
												<label class="form-check-label" for="assoc-display-1">In Profile</label>
											</div>
										</div>
										<div class="col-md-1 text-center remove-association d-none">
											<label class="form-label">&nbsp;</label>
											<div>
												<button type="button" class="btn btn-link text-danger p-0 fs-4">&times;</button>
											</div>
										</div>
									</div>
								@endif
							</div>
						</div>

					</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');
		
		// Set removal flags for backend processing
		if (target.includes('certificate')) {
			document.getElementById('remove_certificate').value = '1';
			// Reset certificate preview content
			const fileInfoDiv = preview.querySelector('.file-info');
			if (fileInfoDiv) {
				fileInfoDiv.innerHTML = '<span class="file-name"></span>';
			}
		} else if (target.includes('sign')) {
			document.getElementById('remove_sign').value = '1';
			// 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);
		
		// Reset removal flags when new file is selected
		if (inputId.includes('certificate')) {
			document.getElementById('remove_certificate').value = '0';
		} else if (inputId.includes('sign')) {
			document.getElementById('remove_sign').value = '0';
		}
		
		if (file) {
			preview.classList.remove('d-none');
			
			if (inputId.includes('sign')) {
				// Handle sign files (can be image or PDF)
				if (file.type.startsWith('image/')) {
					// Show image preview for image signs
					const reader = new FileReader();
					reader.onload = function(e) {
						let imgElement = preview.querySelector('.preview-image') || preview.querySelector('img');
						
						if (!imgElement) {
							// Create new image element if it doesn't exist
							imgElement = document.createElement('img');
							imgElement.className = 'preview-image';
							imgElement.style.cssText = 'max-width: 100px; max-height: 60px; border: 1px solid #ddd; border-radius: 4px;';
							imgElement.alt = 'Sign Preview';
							preview.insertBefore(imgElement, preview.querySelector('.remove-upload'));
						}
						
						imgElement.src = e.target.result;
						imgElement.style.display = 'block';
						
						// Hide file info if it exists
						const fileInfo = preview.querySelector('.file-info');
						if (fileInfo) fileInfo.style.display = 'none';
					};
					reader.readAsDataURL(file);
				} else if (file.type === 'application/pdf') {
					// Show PDF info for PDF signs with preview link
					let fileInfo = preview.querySelector('.file-info');
					if (!fileInfo) {
						fileInfo = document.createElement('div');
						fileInfo.className = 'file-info p-2 border rounded bg-light d-flex align-items-center';
						preview.insertBefore(fileInfo, preview.querySelector('.remove-upload'));
					}
					
					// Create a temporary URL for the uploaded PDF
					const fileUrl = URL.createObjectURL(file);
					fileInfo.innerHTML = `<i class="fas fa-file-pdf text-danger me-2"></i><a href="${fileUrl}" target="_blank" class="text-decoration-none"><span class="file-name">${file.name}</span></a>`;
					fileInfo.style.display = 'flex';
					// Hide image if it exists
					const imgElement = preview.querySelector('.preview-image') || preview.querySelector('img');
					if (imgElement) imgElement.style.display = 'none';
				}
			} else if (inputId.includes('certificate')) {
				// Handle certificate files (can be image or PDF)
				const fileInfo = preview.querySelector('.file-info');
				
				if (file.type.startsWith('image/')) {
					// Show image preview for image certificates
					const reader = new FileReader();
					reader.onload = function(e) {
						const imgHtml = `<img src="${e.target.result}" alt="Certificate Preview" style="max-width: 100px; max-height: 60px; border: 1px solid #ddd; border-radius: 4px;">`;
						fileInfo.innerHTML = imgHtml;
					};
					reader.readAsDataURL(file);
				} else if (file.type === 'application/pdf') {
					// Show PDF info for PDF certificates with preview link
					const fileUrl = URL.createObjectURL(file);
					const pdfHtml = `<i class="fas fa-file-pdf text-danger me-2"></i><a href="${fileUrl}" target="_blank" class="text-decoration-none"><span class="file-name">${file.name}</span></a>`;
					fileInfo.innerHTML = pdfHtml;
				} else {
					// Show generic file icon for other files
					const fileHtml = `<i class="fas fa-file me-2"></i><span class="file-name">${file.name}</span>`;
					fileInfo.innerHTML = fileHtml;
				}
			} else if (inputId.includes('logo')) {
				// Image preview for logo files (association logos)
				if (file.type.startsWith('image/')) {
					const reader = new FileReader();
					reader.onload = function(e) {
						preview.querySelector('img').src = e.target.result;
						preview.classList.remove('d-none');
					};
					reader.readAsDataURL(file);
				}
			}
		}
	}
});


// Basic dynamic association row handling (UI only)
document.getElementById('add-association').addEventListener('click', function(){
	const wrapper = document.getElementById('associations-wrapper');
	const index = wrapper.querySelectorAll('.association-row').length + 1;
	
	// Build association type options
	const associationTypes = @json($association_type_list ?? []);
	let typeOptions = '<option value="">None</option>';
	for (const [key, value] of Object.entries(associationTypes)) {
		typeOptions += `<option value="${key}">${value}</option>`;
	}
	
	const tpl = document.createElement('div');
	tpl.className = 'row g-2 association-row mt-2';
	tpl.innerHTML = `
		<div class="col-md-2">
			<select class="form-select" name="association_type[]">
				${typeOptions}
			</select>
		</div>
		<div class="col-md-3"><input type="text" class="form-control" name="association_name[]" placeholder="Association Name" /></div>
		<div class="col-md-2"><input type="text" class="form-control" name="association_license_no[]" placeholder="License No" /></div>
		<div class="col-md-3">
			<div class="upload-preview-container">
				<input type="file" class="form-control upload-file-input" name="association_logo[]" accept="image/*" style="display: none;" id="assoc_logo_${index}">
				<button type="button" class="btn btn-primary btn-sm w-100 upload-trigger" data-target="assoc_logo_${index}">Upload Logo</button>
				<div class="upload-preview mt-2 d-none" id="assoc_logo_preview_${index}">
					<img src="" alt="Logo Preview" style="max-width: 60px; max-height: 40px; border: 1px solid #ddd; border-radius: 4px;">
					<button type="button" class="btn btn-sm btn-outline-danger ms-1 remove-upload" data-target="assoc_logo_${index}">×</button>
				</div>
			</div>
		</div>
		<div class="col-md-1">
			<div class="form-check">
				<input class="form-check-input" type="checkbox" name="association_display[]" value="${index}" id="assoc-display-${index}">
				<label class="form-check-label" for="assoc-display-${index}">In Profile</label>
			</div>
		</div>
		<div class="col-md-1 text-center">
			<div>
				<button type="button" class="btn btn-link text-danger p-0 fs-4 remove-association">&times;</button>
			</div>
		</div>`;
	wrapper.appendChild(tpl);
});

document.getElementById('associations-wrapper').addEventListener('click', function(e){
	if(e.target.classList.contains('remove-association')){
		e.target.closest('.association-row').remove();
	}
});
</script>