4programmers

      <form [formGroup]="frmAgreement" style="margin-top: 25px">
        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="25px">
          <div fxFlex="100%">
            <mat-form-field style="width:100%">
              <mat-label>Numer umowy</mat-label>
              <input matInput formControlName="number" autocomplete="off">
              <mat-error *ngIf="frmAgreement.controls['number'].errors?.required">Pole <strong>Numer umowy</strong>
                jest
                wymagane</mat-error>
            </mat-form-field>
          </div>
          <div fxFlex="100%">
            <mat-form-field style="width:100%">
              <input matInput [matDatepicker]="startDate" formControlName="startDate" placeholder="Data zawarcia umowy"
                required>
              <mat-datepicker-toggle matSuffix [for]="startDate">
                <i matDatepickerToggleIcon class="fa fa-calendar"></i>
              </mat-datepicker-toggle>
              <mat-datepicker #startDate></mat-datepicker>
              <mat-error *ngIf="frmAgreement.controls['startDate'].errors?.required">Pole
                <strong>Data zawarcia umowy</strong> jest
                wymagane</mat-error>
            </mat-form-field>
          </div>
          <div fxFlex="100%" fxLayoutGap="35px">
            <mat-form-field style="width:45%">
              <input matInput [matDatepicker]="endDate" formControlName="endDate" placeholder="Data zakończenia umowy"
                required>
              <mat-datepicker-toggle matSuffix [for]="endDate">
                <i matDatepickerToggleIcon class="fa fa-calendar"></i>
              </mat-datepicker-toggle>
              <mat-datepicker #endDate></mat-datepicker>
              <mat-error *ngIf="frmAgreement.controls['endDate'].errors?.required">Pole
                <strong>Data zakończenia umowy</strong> jest
                wymagane</mat-error>
            </mat-form-field>
            <mat-checkbox style="width:45%" (change)="onCheckedChange($event)" color="primary" [disabled]="id">Na czas
              nieokreślony
            </mat-checkbox>
          </div>
        </div>
        <div style="font-size:13px" fxLayout="row" fxLayout.xs="column">
          <div fxFlex="90%">
            <button style="width:90%" mat-raised-button color="primary" [disabled]="id" (click)="selectCustomer()"> <i
                class="fa fa-beer" style="font-size: 24px;margin-right:15px"></i>WYBIERZ ODBIORCĘ</button>
            <input type="hidden" formControlName="customerId" />
            <mat-error *ngIf="frmAgreement.controls['customerId'].errors?.required"> <strong>Odbiorca</strong> jest
              wymagany</mat-error>
            <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between" style="width: 90%">
              <div>
                <span class="text-muted">KOD:</span>
                <p *ngIf="selectedCustomer">
                  {{selectedCustomer.code}}
                </p>
              </div>
              <div>
                <span class="text-muted">NIP:</span>
                <p *ngIf="selectedCustomer">
                  {{selectedCustomer.vatNumber}}
                </p>
              </div>
            </div>
            <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between" style="width: 90%">
              <div>
                <span class="text-muted">NAZWA FIRMY:</span>
                <p *ngIf="selectedCustomer">
                  {{selectedCustomer.name}}
                </p>
              </div>
            </div>
            <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between" style="width: 90%">
              <div>
                <span class="text-muted">ULICA:</span>
                <p *ngIf="selectedCustomer">
                  {{selectedCustomer.street }}
                  <span style="margin-left: 5px" *ngIf="selectedCustomer.flatNumber">
                    {{selectedCustomer.buildingNumber}}/{{selectedCustomer.flatNumber}}</span>
                  <span style="margin-left: 5px" *ngIf="!selectedCustomer.flatNumber">
                    {{selectedCustomer.buildingNumber}}</span>
                </p>
              </div>
              <div>
                <span class="text-muted">MIASTO:</span>
                <p *ngIf="selectedCustomer">
                  {{selectedCustomer.city }}
                </p>
              </div>
              <div>
                <span class="text-muted">KOD POCZTOWY:</span>
                <p *ngIf="selectedCustomer">
                  {{selectedCustomer.zipCode }}
                </p>
              </div>
            </div>
            <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between" style="width: 90%">
              <div>
                <span class="text-muted">EMAIL:</span>
                <p *ngIf="selectedCustomer">
                  {{selectedCustomer.email}}
                </p>
              </div>
              <div>
                <span class="text-muted">TELEFON:</span>
                <p *ngIf="selectedCustomer">
                  {{selectedCustomer.phone}}
                </p>
              </div>
            </div>
            <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between" style="width: 90%;">
              <mat-form-field style="width:90%;margin-top:25px">
                <mat-label>Stawka odbiorcy</mat-label>
                <input matInput formControlName="customerRate" required type="number" min="0">
                <span matSuffix>%</span>
                <mat-error *ngIf="frmAgreement.controls['customerRate'].errors?.required">Pole
                  <strong>Stawka</strong> jest
                  wymagane</mat-error>
              </mat-form-field>
            </div>
          </div>
          <div fxFlex="100%" fxLayoutGap="25px">
            <button style="width:90%" [disabled]="!selectedCustomer || id" mat-raised-button color="primary"
              (click)="selectManager()"> <i class="fa fa-briefcase"
                style="font-size: 24px;margin-right:15px"></i>WYBIERZ MENADŻERA</button>
            <input type="hidden" formControlName="managerId" />
            <mat-error *ngIf="frmAgreement.controls['managerId'].errors?.required"> <strong>Menadżer</strong> jest
              wymagany</mat-error>
            <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between" style="width: 90%">
              <div>
                <span class="text-muted">KOD:</span>
                <p *ngIf="selectedManager">
                  {{selectedManager.code}}
                </p>
              </div>
              <div>
                <span class="text-muted">NIP:</span>
                <p *ngIf="selectedManager">
                  {{selectedManager.vatNumber}}
                </p>
              </div>
            </div>
            <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between" style="width: 90%">
              <div>
                <span class="text-muted">NAZWA FIRMY:</span>
                <p *ngIf="selectedManager">
                  {{selectedManager.name}}
                </p>
              </div>
            </div>
            <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between" style="width: 90%">
              <div>
                <span class="text-muted">ULICA:</span>
                <p *ngIf="selectedManager">
                  {{selectedManager.street }}
                  <span style="margin-left: 5px" *ngIf="selectedManager.flatNumber">
                    {{selectedManager.buildingNumber}}/{{selectedManager.flatNumber}}</span>
                  <span style="margin-left: 5px" *ngIf="!selectedManager.flatNumber">
                    {{selectedManager.buildingNumber}}</span>
                </p>
              </div>
              <div>
                <span class="text-muted">MIASTO:</span>
                <p *ngIf="selectedManager">
                  {{selectedManager.city }}
                </p>
              </div>
              <div>
                <span class="text-muted">KOD POCZTOWY:</span>
                <p *ngIf="selectedManager">
                  {{selectedManager.zipCode }}
                </p>
              </div>
            </div>
            <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between" style="width: 90%">
              <div>
                <span class="text-muted">EMAIL:</span>
                <p *ngIf="selectedManager">
                  {{selectedManager.email}}
                </p>
              </div>
              <div>
                <span class="text-muted">TELEFON:</span>
                <p *ngIf="selectedManager">
                  {{selectedManager.phone}}
                </p>
              </div>
            </div>
            <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between" style="width: 90%;">
              <mat-form-field style="width:90%;margin-top:25px">
                <mat-label>Stawka menadżera</mat-label>
                <input matInput formControlName="managerRate" required type="number" min="0">
                <span matSuffix>%</span>
                <mat-error *ngIf="frmAgreement.controls['managerRate'].errors?.required">Pole
                  <strong>Stawka</strong> jest
                  wymagane</mat-error>
              </mat-form-field>
            </div>
          </div>
          <div fxFlex="100%" fxLayoutGap="25px">
            <button style="width:90%" [disabled]="!selectedManager || id" mat-raised-button color="primary"
              (click)="selectDevice()"> <i class="fa fa-gamepad" style="font-size: 24px;margin-right:15px"></i>WYBIERZ
              MASZYNĘ</button>
            <input type="hidden" formControlName="deviceId" />
            <mat-error *ngIf="frmAgreement.controls['deviceId'].errors?.required"> <strong>Maszyna </strong> jest
              wymagana</mat-error>
            <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between" style="width: 90%">
              <div>
                <span class="text-muted">NUMER SERYJNY:</span>
                <p *ngIf="selectedDevice">
                  {{selectedDevice.serialNumber}}
                </p>
              </div>
              <div>
                <span class="text-muted">NUMER SERYJNY GSM:</span>
                <p *ngIf="selectedDevice">
                  {{selectedDevice.gsmSerialNumber}}
                </p>
              </div>
            </div>
            <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between" style="width: 90%">
              <div>
                <span class="text-muted">PRODUCENT:</span>
                <p *ngIf="selectedDevice">
                  {{selectedDevice.producer }}
                </p>
              </div>
              <div>
                <span class="text-muted">TYP OBUDOWY:</span>
                <p *ngIf="selectedDevice">
                  {{selectedDevice.caseType }}
                </p>
              </div>
              <div>
                <span class="text-muted">LICZBA PLOMB:</span>
                <p *ngIf="selectedDevice">
                  {{selectedDevice.sealsCount }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </form>