custom_ui/frontend/src/components/clientSubPages/ClientInformationForm.vue

<template>
	<div class="form-section">
		<div class="section-header">
			<h3>Client Information</h3>
			<label class="toggle-container" v-if="!isEditMode">
				<v-switch v-model="isNewClient" color="success" />
				<span class="toggle-label">New Client</span>
			</label>
		</div>
		<div class="form-grid">
			<div class="form-field">
				<label for="customer-name"> Customer Name <span class="required">*</span> </label>
				<div class="input-with-button">
					<InputText
						id="customer-name"
						v-model="localFormData.customerName"
						:disabled="isSubmitting || isEditMode"
						placeholder="Enter customer name"
						class="w-full"
					/>
					<Button
						v-if="!isNewClient && !isEditMode"
						@click="searchCustomers"
						:disabled="isSubmitting || !localFormData.customerName.trim()"
						size="small"
						icon="pi pi-search"
						class="search-btn"
					></Button>
				</div>
			</div>
			<div class="form-field">
				<label for="customer-type"> Customer Type <span class="required">*</span> </label>
				<Select
					id="customer-type"
					v-model="localFormData.customerType"
					:options="customerTypeOptions"
					:disabled="isSubmitting || (!isNewClient && !isEditMode)"
					placeholder="Select customer type"
					class="w-full"
				/>
			</div>
		</div>
	</div>

	<!-- Customer Search Results Modal -->
	<Dialog
		v-model:visible="showCustomerSearchModal"
		header="Select Customer"
		:modal="true"
		class="search-dialog"
	>
		<div class="search-results">
			<div v-if="customerSearchResults.length === 0" class="no-results">
				<i class="pi pi-info-circle"></i>
				<p>No customers found matching your search.</p>
			</div>
			<div v-else class="results-list">
				<div
					v-for="(customerName, index) in customerSearchResults"
					:key="index"
					class="result-item"
					@click="selectCustomer(customerName)"
				>
					<strong>{{ customerName }}</strong>
					<i class="pi pi-chevron-right"></i>
				</div>
			</div>
		</div>
		<template #footer>
			<Button label="Cancel" severity="secondary" @click="showCustomerSearchModal = false" />
		</template>
	</Dialog>
</template>

<script setup>
import { ref, watch, computed } from "vue";
import InputText from "primevue/inputtext";
import Select from "primevue/select";
import Dialog from "primevue/dialog";
import Api from "../../api";
import { useNotificationStore } from "../../stores/notifications-primevue";

const props = defineProps({
	formData: {
		type: Object,
		required: true,
	},
	isSubmitting: {
		type: Boolean,
		default: false,
	},
	isEditMode: {
		type: Boolean,
		default: false,
	},
});

const emit = defineEmits(["update:formData", "newClientToggle", "customerSelected"]);

const notificationStore = useNotificationStore();

const localFormData = computed({
	get: () => props.formData,
	set: (value) => emit("update:formData", value),
});

const isNewClient = ref(true);
const showCustomerSearchModal = ref(false);
const customerSearchResults = ref([]);
const customerTypeOptions = ["Individual", "Partnership", "Company"];

// Watch for toggle changes
watch(isNewClient, (newValue) => {
	emit("newClientToggle", newValue);
});

const searchCustomers = async () => {
	const searchTerm = localFormData.value.customerName.trim();
	if (!searchTerm) return;

	try {
		// Get all customers and filter by search term
		const allCustomers = await Api.getClientNames(searchTerm);
		const matchingNames = allCustomers.filter((name) =>
			name.toLowerCase().includes(searchTerm.toLowerCase()),
		);

		if (matchingNames.length === 0) {
			notificationStore.addWarning("No customers found matching your search criteria.");
		} else {
			// Store just the names for display
			customerSearchResults.value = matchingNames;
			showCustomerSearchModal.value = true;
		}
	} catch (error) {
		console.error("Error searching customers:", error);
		notificationStore.addError("Failed to search customers. Please try again.");
	}
};

const selectCustomer = async (customerName) => {
	try {
		// Fetch full customer data
		const clientData = await Api.getClient(customerName);

		localFormData.value.customerName = clientData.customerName;
		localFormData.value.customerType = clientData.customerType;
		showCustomerSearchModal.value = false;

		// Pass the full client data including contacts
		emit("customerSelected", clientData);
	} catch (error) {
		console.error(`Error fetching client ${customerName}:`, error);
		notificationStore.addError("Failed to load customer details. Please try again.");
	}
};

defineExpose({
	isNewClient,
});
</script>

<style scoped>
.form-section {
	background: var(--surface-card);
	border-radius: 8px;
	padding: 1.5rem;
	border: 1px solid var(--surface-border);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.section-header h3 {
	margin: 0;
	color: var(--text-color);
	font-size: 1.25rem;
	font-weight: 600;
}

.toggle-container {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.85rem;
}

.toggle-label {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--text-color-secondary);
	cursor: pointer;
	user-select: none;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.form-field label {
	font-weight: 500;
	color: var(--text-color-secondary);
	font-size: 0.9rem;
}

.required {
	color: var(--red-500);
}

.input-with-button {
	display: flex;
	gap: 0.5rem;
}

.w-full {
	width: 100% !important;
}

.search-dialog {
	max-width: 500px;
}

.search-results {
	min-height: 200px;
}

.no-results {
	text-align: center;
	padding: 40px 20px;
	color: var(--text-color-secondary);
}

.no-results i {
	font-size: 2em;
	color: var(--orange-500);
	margin-bottom: 10px;
	display: block;
}

.results-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.result-item {
	padding: 1rem;
	border: 1px solid var(--surface-border);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.result-item:hover {
	background-color: var(--surface-hover);
	border-color: var(--primary-color);
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.customer-info {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.customer-type {
	font-size: 0.85rem;
	color: var(--text-color-secondary);
}

.iconoir-btn {
	background: none;
	border: none;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background 0.2s;
}

.iconoir-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.iconoir-btn:hover:not(:disabled) {
	background: var(--surface-hover);
}

.search-btn {
	background: var(--primary-color);
	border: 1px solid var(--primary-color);
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background 0.2s;
	color: white;
}

.search-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.search-btn:hover:not(:disabled) {
	background: var(--surface-hover);
}

@media (max-width: 768px) {
	.form-grid {
		grid-template-columns: 1fr;
	}

	.section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}
</style>