<div *ngIf="shoppingItem" class="container-fluid">
  <div class="row">
    <div class="col-2">
      <div *ngIf="!shoppingItem.image">
        <img
          class="product-photo px-2 py-2"
          src="assets/amico.png"
          [ngStyle]="{ minWidth: width }"
          draggable="false"
        />
      </div>
      <div *ngIf="shoppingItem.image">
        <img
          class="product-photo"
          src="{{ shoppingItem.image }}"
          alt=""
        />
      </div>
    </div>
    <div class="col-10">
      <span class="fs-2 inline-block"> {{ shoppingItem.description }} </span>
      <span class="fs-4 inline-block"> Quantidade: {{ shoppingItem.quantity }} </span>
    </div>
  </div>

  <div class="mt-5">
    <form class="k-form" [formGroup]="form">
      <fieldset class="k-form-fieldset">
        <legend class="k-form-legend">Preços do item</legend>

        <kendo-formfield>
          <kendo-label [for]="listprice" text="Preço tabela"></kendo-label>
          <kendo-numerictextbox
            formControlName="listPrice"
            [spinners]="false"
            disabled
            #listprice
          ></kendo-numerictextbox>

        </kendo-formfield>
        <kendo-formfield>
          <kendo-label [for]="discount" text="Percentual de Desconto"> </kendo-label>
          <kendo-numerictextbox
            (valueChange)="onChangeDiscount($event)"
            formControlName="discount"
            [spinners]="false"
            #discount
          >

          </kendo-numerictextbox>

        </kendo-formfield>
        <kendo-formfield>
          <kendo-label [for]="saleprice" text="Preço de venda"> </kendo-label>
          <kendo-numerictextbox
            formControlName="salePrice"
            (valueChange)="onChangePrice($event)"
            [spinners]="false"
            #saleprice
          >

          </kendo-numerictextbox>

        </kendo-formfield>

        <kendo-formfield>
          <kendo-label class="k-label">
            <input type="checkbox" formControlName="userAuth" kendoCheckBox />
             <span class="ms-2">Informar outro usuário para autorizar o desconto</span>
          </kendo-label>
        </kendo-formfield>

      </fieldset>
    </form>

    <div *ngIf="getAuthorization()" class="mt-3">
      <form class="k-form" [formGroup]="formAuthorization">
        <fieldset class="k-form-fieldset">
          <legend class="k-form-legend">Autorizar desconto</legend>

          <kendo-formfield>
            <kendo-label [for]="username" text="Email"></kendo-label>
            <kendo-textbox
              formControlName="username"
              [clearButton]="true"
              #username
              required
            ></kendo-textbox>

            <kendo-formhint>Informe seu email</kendo-formhint>
            <kendo-formerror>Error: Email é obrigatório</kendo-formerror>
          </kendo-formfield>
          <kendo-formfield>
            <kendo-label [for]="password" text="Senha"> </kendo-label>
            <kendo-textbox
            (focus)="maskPassword()"
              formControlName="password"
              #password
              required
              [clearButton]="true"
            >
            </kendo-textbox>

            <kendo-formhint>Informe sua senha</kendo-formhint>
            <kendo-formerror>Error: Senha é obritória</kendo-formerror>
          </kendo-formfield>

        </fieldset>
      </form>
    </div>

    <div class="mt-3 k-form-buttons">
      <button class="k-button k-primary" (click)="saveDiscount()" >Gravar</button>
      <button class="k-button" (click)="close()" >Cancelar</button>
    </div>


  </div>

  <div kendoDialogContainer></div>
</div>
