service-provider-app/src/app/preparer/basic-details/basic-details.component.html

<div class="basic-details-container">
    <mat-card class="details-card mat-elevation-z4">
        <mat-card-content>
            <div class="loading-shade" *ngIf="isLoading">
                <mat-spinner diameter="50"></mat-spinner>
            </div>

            <form [formGroup]="basicDetailsForm" class="details-form" *ngIf="!isLoading"
                (ngSubmit)="saveBasicDetails()">
                <!-- Client Information -->
                <div class="form-row">
                    <mat-form-field appearance="outline" class="name">
                        <mat-label>Name</mat-label>
                        <input matInput formControlName="name" required>
                        <mat-error *ngIf="f['name'].errors?.['required']">
                            Name is required
                        </mat-error>
                        <mat-error *ngIf="f['name'].errors?.['maxlength']">
                            Maximum 100 characters allowed
                        </mat-error>
                    </mat-form-field>

                    <mat-form-field appearance="outline" class="lookup-code">
                        <mat-label>Lookup Code</mat-label>
                        <input matInput formControlName="lookupCode" required>
                        <mat-error *ngIf="f['lookupCode'].errors?.['required']">
                            Lookup code is required
                        </mat-error>
                        <mat-error *ngIf="f['lookupCode'].errors?.['maxlength']">
                            Maximum 20 characters allowed
                        </mat-error>
                    </mat-form-field>
                </div>

                <!-- Address Information -->
                <div class="form-row">
                    <mat-form-field appearance="outline" class="address1">
                        <mat-label>Address Line 1</mat-label>
                        <input matInput formControlName="address1" required>
                        <mat-error *ngIf="f['address1'].errors?.['required']">
                            Address is required
                        </mat-error>
                        <mat-error *ngIf="f['address1'].errors?.['maxlength']">
                            Maximum 100 characters allowed
                        </mat-error>
                    </mat-form-field>
                </div>

                <div class="form-row">
                    <mat-form-field appearance="outline" class="address2">
                        <mat-label>Address Line 2 (Optional)</mat-label>
                        <input matInput formControlName="address2">
                        <mat-error *ngIf="f['address2'].errors?.['maxlength']">
                            Maximum 100 characters allowed
                        </mat-error>
                    </mat-form-field>
                </div>

                <!-- Location Information -->
                <div class="form-row">
                    <mat-form-field appearance="outline" class="city">
                        <mat-label>City</mat-label>
                        <input matInput formControlName="city" required>
                        <mat-error *ngIf="f['city'].errors?.['required']">
                            City is required
                        </mat-error>
                        <mat-error *ngIf="f['city'].errors?.['maxlength']">
                            Maximum 50 characters allowed
                        </mat-error>
                    </mat-form-field>

                    <mat-form-field appearance="outline" class="country">
                        <mat-label>Country</mat-label>
                        <mat-select formControlName="country" required
                            (selectionChange)="onCountryChange($event.value)">
                            <mat-option *ngFor="let country of countries" [value]="country.value">
                                {{ country.name }}
                            </mat-option>
                        </mat-select>
                        <mat-error *ngIf="f['country'].errors?.['required']">
                            Country is required
                        </mat-error>
                    </mat-form-field>

                    <mat-form-field appearance="outline" class="state">
                        <mat-label>State/Province</mat-label>
                        <mat-select formControlName="state" required>
                            <mat-option *ngFor="let state of states" [value]="state.value">
                                {{ state.name }}
                            </mat-option>
                        </mat-select>
                        <mat-error *ngIf="f['state'].errors?.['required']">
                            State is required
                        </mat-error>
                    </mat-form-field>

                    <mat-form-field appearance="outline" class="zip">
                        <mat-label>ZIP/Postal Code</mat-label>
                        <input matInput formControlName="zip" required>
                        <mat-error *ngIf="f['zip'].errors?.['required']">
                            ZIP/Postal code is required
                        </mat-error>
                        <mat-error
                            *ngIf="f['country']?.value === 'US' && f['zip']?.touched && f['zip']?.errors?.['invalidUSZip']">
                            Please enter a valid 5-digit US ZIP code
                        </mat-error>
                        <mat-error
                            *ngIf="f['country']?.value === 'CA' && f['zip']?.touched && f['zip']?.errors?.['invalidCanadaPostal']">
                            Please enter a valid postal code (e.g., A1B2C3)
                        </mat-error>
                    </mat-form-field>
                </div>

                <div class="form-row">
                    <mat-form-field appearance="outline" class="industry-type">
                        <mat-label>Industry Type</mat-label>
                        <mat-select formControlName="industryType" required>
                            <mat-option *ngFor="let industryType of industryTypes" [value]="industryType.value">
                                {{ industryType.name }}
                            </mat-option>
                        </mat-select>
                        <mat-error *ngIf="f['industryType'].errors?.['required']">
                            Industry Type is required
                        </mat-error>
                    </mat-form-field>

                    <mat-form-field appearance="outline" class="carnet-issuing-region">
                        <mat-label>Carnet Issuing Region</mat-label>
                        <mat-select formControlName="carnetIssuingRegion" required>
                            <mat-option *ngFor="let region of regions" [value]="region.region">
                                {{ region.regionname }}
                            </mat-option>
                        </mat-select>
                        <mat-error *ngIf="f['carnetIssuingRegion'].errors?.['required']">
                            Carnet issuing region is required
                        </mat-error>
                    </mat-form-field>

                    <mat-form-field appearance="outline" class="revenue-location">
                        <mat-label>Revenue Location</mat-label>
                        <mat-select formControlName="revenueLocation" required>
                            <mat-option *ngFor="let state of states" [value]="state.value">
                                {{ state.name }}
                            </mat-option>
                        </mat-select>
                        <mat-error *ngIf="f['revenueLocation'].errors?.['required']">
                            Revenue location is required
                        </mat-error>
                    </mat-form-field>
                </div>

                <!-- Additional Locations -->
                <div class="form-row" *ngIf="!isEditMode">
                    <mat-checkbox formControlName="hasAdditionalLocations"
                        (change)="onHasAdditionalLocationsChange($event)">
                        Do you have more branch offices?
                    </mat-checkbox>
                </div>

                <div class="form-actions">
                    <button mat-raised-button color="primary" type="submit"
                        [disabled]="basicDetailsForm.invalid || changeInProgress">
                        {{ isEditMode ? 'Update' : 'Save' }}
                    </button>
                </div>
            </form>
        </mat-card-content>
    </mat-card>
</div>