MT-work-fronted/src/app/authentication/auth-sign-up/signup-business/signup-business.component.html

<section>
  <app-type-header> </app-type-header>
  <div class="form-container">
    <form [formGroup]="form" (submit)="onSubmit()">
      <p class="bold">Basic Information</p>
      <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="center start">
        <div
          class="form-input"
          fxLayout="column"
          fxLayoutAlign="start stretch"
          fxFlex.lt-md="45"
          fxFlex.gt-sm="31"
        >
          <label for="company_name">
            <img src="assets/images/company.svg" alt="" title="" />
            <span>Company Name <span class="red">*</span></span>
          </label>
          <input
            type="text"
            id="company_name"
            placeholder="Company Name"
            formControlName="companyName"
          />
          <app-error-form
            [name]="'companyName'"
            [control]="form.get('companyName')!"
          ></app-error-form>
        </div>
        <div
          class="form-input"
          fxLayout="column"
          fxLayoutAlign="start stretch"
          fxFlex.lt-md="45"
          fxFlex.gt-sm="31"
        >
          <label for="commercial_no">
            <img src="assets/images/commercial.svg" alt="" title="" />
            <span>Commercial Registration No <span class="red">*</span></span>
          </label>
          <input
            type="text"
            id="commercial_no"
            placeholder="Commercial Registration No"
            formControlName="crNumber"
          />
          <app-error-form
            [name]="'crNumber'"
            [control]="form.get('crNumber')!"
          ></app-error-form>
        </div>
        <div
          class="form-input"
          fxLayout="column"
          fxLayoutAlign="start stretch"
          fxFlex.lt-md="45"
          fxFlex.gt-sm="31"
        >
          <label for="tax_no">
            <img src="assets/images/tax.svg" alt="" title="" />
            <span>tax declaration No <span class="red">*</span></span>
          </label>
          <input
            type="text"
            id="tax_no"
            placeholder="tax declaration No"
            formControlName="taxNumber"
          />
          <app-error-form
            [name]="'taxNumber'"
            [control]="form.get('taxNumber')!"
          ></app-error-form>
        </div>
      </div>
      <div
        class="gap-36 mt-2"
        fxLayout="row wrap"
        fxLayoutAlign="center start"
        formGroupName="userAddress"
      >
        <div
          class="form-input"
          fxLayout="column"
          fxLayoutAlign="start stretch"
          fxFlex.lt-md="45"
          fxFlex.gt-sm="31"
        >
          <label for="country">
            <img src="assets/images/country.svg" alt="" title="" />
            <span>Country <span class="red">*</span></span>
          </label>
          <select
            id="country"
            formControlName="countryId"
            (change)="onChangeCountry($event)"
          >
            <option disabled selected [value]="null">
              Select your country
            </option>
            <option *ngFor="let country of countries" [value]="country.id">
              {{ country.nameEn }}
            </option>
          </select>
          <app-error-form
            [name]="'countryId'"
            [control]="form.get('userAddress.countryId')!"
          ></app-error-form>
        </div>
        <div
          class="form-input"
          fxLayout="column"
          fxLayoutAlign="start stretch"
          fxFlex.lt-md="45"
          fxFlex.gt-sm="31"
        >
          <label for="city">
            <img src="assets/images/city.svg" alt="" title="" />
            <span>City<span class="red">*</span></span>
          </label>
          <select id="country" formControlName="city">
            <option disabled selected [value]="null">Select your city</option>
            <option *ngFor="let city of cities" [value]="city.id">
              {{ city.nameEn }}
            </option>
          </select>
          <app-error-form
            [name]="'city'"
            [control]="form.get('userAddress.city')!"
          ></app-error-form>
        </div>
        <div
          class="form-input"
          fxLayout="column"
          fxLayoutAlign="start stretch"
          fxFlex.lt-md="45"
          fxFlex.gt-sm="31"
        >
          <label for="postal">
            <img src="assets/images/postal.svg" alt="" title="" />
            <span>Postal Code <span class="red">*</span></span>
          </label>
          <input
            type="text"
            id="postal"
            placeholder="Postal code"
            formControlName="postalCode"
          />
          <app-error-form
            [name]="'postalCode'"
            [control]="form.get('userAddress.postalCode')!"
          ></app-error-form>
        </div>
        <div class="mt-2" fxFlex.lt-md="100" fxFlex.gt-sm="100">
          <div
            class="form-input"
            fxLayout="column"
            fxLayoutAlign="start stretch"
          >
            <label for="national_address">
              <img
                src="assets/images/country-direction-location-map-navigation-pin-svgrepo-com.svg"
                alt=""
                title=""
              />
              <span>National Address<span class="red">*</span></span>
            </label>
            <input
              type="text"
              id="national_address"
              placeholder="National address"
              formControlName="addressDesc"
            />
            <app-error-form
              [name]="'addressDesc'"
              [control]="form.get('userAddress.addressDesc')!"
            ></app-error-form>
          </div>
        </div>
      </div>

      <p class="bold mt-3">authorized</p>
      <div formGroupName="companyUser">
        <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="start start">
          <div
            class="form-input"
            fxLayout="column"
            fxLayoutAlign="start stretch"
            fxFlex.lt-md="45"
            fxFlex.gt-sm="31"
          >
            <label for="first_name">
              <img src="assets/images/authorized_name.svg" alt="" title="" />
              <span>First Name <span class="red">*</span></span>
            </label>
            <input
              type="text"
              id="first_name"
              placeholder="First Name"
              formControlName="firstName"
            />
            <app-error-form
              [name]="'firstName'"
              [control]="form.get('companyUser.firstName')!"
            ></app-error-form>
          </div>
          <div
            class="form-input"
            fxLayout="column"
            fxLayoutAlign="start stretch"
            fxFlex.lt-md="45"
            fxFlex.gt-sm="31"
          >
            <label for="last_name">
              <img src="assets/images/authorized_name.svg" alt="" title="" />
              <span>Last Name <span class="red">*</span></span>
            </label>
            <input
              type="text"
              id="last_name"
              placeholder="Last Name"
              formControlName="last_name"
            />
            <app-error-form
              [name]="'last_name'"
              [control]="form.get('companyUser.last_name')!"
            ></app-error-form>
          </div>
          <div
            class="form-input"
            fxLayout="column"
            fxLayoutAlign="start stretch"
            fxFlex.lt-md="45"
            fxFlex.gt-sm="31"
          >
            <label for="authorized_id">
              <img src="assets/images/authorized_name.svg" alt="" title="" />
              <span>Authorized ID <span class="red">*</span></span>
            </label>
            <input
              type="text"
              id="authorized_id"
              placeholder="Authorized id"
              formControlName="idNumber"
            />
            <app-error-form
              [name]="'idNumber'"
              [control]="form.get('companyUser.idNumber')!"
            ></app-error-form>
          </div>
          <div
            class="form-input"
            fxLayout="column"
            fxLayoutAlign="start stretch"
            fxFlex.lt-md="45"
            fxFlex.gt-sm="31"
          >
            <label for="passport_no">
              <img
                src="assets/images/passport-svgrepo-com.svg"
                alt=""
                title=""
              />
              <span>Passport Number <span class="red">*</span></span>
            </label>
            <input
              type="text"
              id="passport_no"
              placeholder="Passport Number"
              formControlName="passportNumber"
            />
            <app-error-form
              [name]="'passportNumber'"
              [control]="form.get('companyUser.passportNumber')!"
            ></app-error-form>
          </div>
          <div
            class="form-input"
            fxLayout="column"
            fxLayoutAlign="start stretch"
            fxFlex.lt-md="45"
            fxFlex.gt-sm="31"
          >
            <label for="mobile_number">
              <img
                src="assets/images/mobile-horizontal-svgrepo-com.svg"
                alt=""
                title=""
              />
              <span>Mobile Number <span class="red">*</span></span>
            </label>
            <input
              type="text"
              id="mobile_number"
              placeholder="Mobile Number"
              formControlName="phoneNumber"
            />
            <app-error-form
              [name]="'phoneNumber'"
              [control]="form.get('companyUser.phoneNumber')!"
            ></app-error-form>
          </div>
          <div
            class="form-input"
            fxLayout="column"
            fxLayoutAlign="start stretch"
            fxFlex.lt-md="45"
            fxFlex.gt-sm="31"
          >
            <label for="email">
              <img
                src="assets/images/email-9-svgrepo-com.svg"
                alt=""
                title=""
              />
              <span>Email <span class="red">*</span></span>
            </label>
            <input
              type="text"
              id="email"
              placeholder="Email"
              formControlName="email"
            />
            <app-error-form
              [name]="'email'"
              [control]="form.get('companyUser.email')!"
            ></app-error-form>
          </div>
        </div>
      </div>

      <p class="bold mt-3">Attachments</p>
      <app-warning
        [message]="
          'Mandatory to Attach your CV, Passport, Education Certification, Experience Certifications, and Professional Certificates'
        "
      ></app-warning>
      <div
        class="formats-acceptance"
        fxLayout="column"
        fxLayoutAlign="center center"
      >
        <p>
          Supported formats: JPEG,PNG,WORD,PDF / size shouldn't be more than 4
          MP
        </p>
      </div>

      <div
        class="files gap-20"
        fxLayout="row wrap"
        fxLayoutAlign="start center"
      >
        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
          <p class="bold">Commercial Registration</p>
          <app-file-upload
            (uploadFile)="onUploadFile($event)"
            name="commercialRegAttach"
          />
        </div>
        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
          <p class="bold">Tax Declaration</p>
          <app-file-upload
            (uploadFile)="onUploadFile($event)"
            name="taxDeclarationAttach"
          />
        </div>
        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
          <p class="bold">Passport</p>
          <app-file-upload
            (uploadFile)="onUploadFile($event)"
            name="passportAttach"
          />
        </div>
        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
          <p class="bold">Experience Certification</p>
          <app-file-upload
            (uploadFile)="onUploadFile($event)"
            name="eduCertificateAttach"
          />
        </div>
        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
          <p class="bold">ID</p>
          <app-file-upload
            (uploadFile)="onUploadFile($event)"
            name="experienceCertificateAttach"
          />
        </div>
      </div>

      <!-- <p class="bold mt-3">Payment</p>
      <div class="payment">
        <app-warning
          [message]="'Mandatory to pay 500$ to complete your registration'"
        ></app-warning>
        <button type="button" class="add-payment bold ptr">
          + Add new card
        </button>
      </div> -->

      <div fxLayout="column" fxLayoutAlign="center center">
        <button type="submit" [disabled]="loading" [class.spinner]="loading">
          Sign Up
        </button>
      </div>
    </form>
  </div>
</section>