<!-- app.component.html -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a id="logo" href="/" class="navbar-brand">Faktury</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a class="navbarLink"  href="/invoices">Wszystkie faktury</a></li>
        <li><a class="navbarLink" id="aboutLink" href="/createInvoice">Wystaw fakturę</a></li>
        <li><a class="navbarLink" id="logout" href="/login">Wyloguj się</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container" style="margin-top: 70px;">
  <h4>Dodawanie nowej faktury</h4>
  <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value)">


    <div>
      <label>Numer faktury</label>
      <input type="text" [(ngModel)]="invoice.generalNumber" formControlName="generalNumber">
      <small style="color:red;" *ngIf="myForm.controls.generalNumber.invalid && myForm.controls.generalNumber.touched">
        Numer faktury jest wymagany
      </small>
    </div>

    <div>
      <label>Miejsce wystawienia</label>
      <input type="text"  formControlName="place">
      <small style="color:red;" *ngIf="myForm.controls.place.invalid && myForm.controls.place.touched">
        Miejsce wystawienia jest wymagane
      </small>
    </div>
    <!-- name -->
    <div class="form-group">

      <div>
        <label>Sposób płatności</label>
        <select formControlName="paymentMethod">
          <option *ngFor="let c of paymentMethods" [ngValue]="c">{{c}}</option>
        </select>
      </div>


      <label>Data wystawienia</label>
      <input type="date" [(ngModel)]="invoice.issuanceDate" (change)="dateChange()" formControlName="issuanceDate">
      <small style="color:red;" *ngIf="myForm.controls.issuanceDate.invalid && myForm.controls.issuanceDate.touched">
        Data wystawienia jest wymagana
      </small>


      <label>Data sprzedaży</label>
      <input type="date" formControlName="saleDate">

      <label>Termin zapłaty</label>
      <input type="date" formControlName="paymentDate">


    </div>

    <div formArrayName="articles" class="container">

      <table class="table">
        <thead>
        <tr>
          <th>Nazwa</th>
          <th>Ilość</th>
          <th>Cena netto</th>
          <th>Wartość netto</th>
          <th>Stawka VAT</th>
          <th>Kwota VAT</th>
          <th>Wartość brutto</th>
        </tr>
        </thead>
        <tbody *ngFor="let address of myForm.controls.articles.controls; let i=index" style="margin: 0px;"
               [formGroupName]="i">
        <tr>
          <td>
            <div>
              <input type="text" (change)="nameChange(i)"   [(ngModel)]="articles[i].name" formControlName="name">
            </div>
            <small style="color:red;" *ngIf="myForm.controls.articles.controls[i].controls.name.invalid && myForm.controls.articles.controls[i].controls.name.touched">
             Nazwa jest wymagana
            </small>
          </td>

          <td>
            <div>
              <input type="number" (change)="nameChange(i)" [(ngModel)]="articles[i].amountOfArticle"
                     formControlName="amountOfArticle">
              <small style="color:red;" *ngIf="myForm.controls.articles.controls[i].controls.amountOfArticle.errors?.min ">
                Ilość nie może być mniejsza niż 0.
              </small>
            </div>
          </td>

          <td>
            <div>

              <input type="number" (change)="nameChange(i)" [(ngModel)]="articles[i].articlePrice"
                     formControlName="articlePrice">
              <small style="color:red;" *ngIf="myForm.controls.articles.controls[i].controls.articlePrice.errors?.min ">
                Cena nie może być mniejsza niż 0.
              </small>
            </div>
          </td>

          <td>
            <div>

              <input type="number" (change)="nameChange(i)" [(ngModel)]="articles[i].nettoPrice"
                     formControlName="nettoPrice">
            </div>
          </td>

          <td>
            <div>
              <input type="number" (change)="nameChange(i)"  [(ngModel)]="articles[i].VAT" formControlName="VAT">

              <small style="color:red;" *ngIf="myForm.controls.articles.controls[i].controls.VAT.errors?.range ">
                Wartość podatku VAT powinna mieć wartość między 0 a 100
              </small>
            </div>
          </td>

          <td>
            <div>
              <input type="number" (change)="nameChange(i)" [(ngModel)]="articles[i].amountOfVAT"
                     formControlName="amountOfVAT">
            </div>
          </td>


          <td>
            <div>
              <input type="number" (change)="nameChange(i)" [(ngModel)]="articles[i].bruttoPrice"
                     formControlName="bruttoPrice">
            </div>
          </td>

        </tr>
        </tbody>
      </table>


      <div style="margin-top: 0px;">
        <a (click)="addArticle(i)" style="cursor: default; margin: 0px;">
          Dodaj nowe pole
        </a>
      </div>

    </div>


    <label style="margin-top: 10px;">Koszt całkowity</label>
    <input type="text" formControlName="totalCost" [(ngModel)]="invoice.totalCost">


    <div >
      <label>Klient</label>
      <select    formControlName="client">
        <option *ngFor="let com of clients" [ngValue]="com.valueOf()">{{com.name}}</option>
      </select>
    </div>

    <div>
      <label style="margin-top: 10px;">Kwota słownie</label>
      <input type="text" formControlName="totalCostInWords" [(ngModel)]="invoice.totalCostInWords">
    </div>

    <button [disabled]="!myForm.valid">Zapisz fakturę</button>

    <button (click)="download(myForm.value)" style="margin-top: 10px;">Pobierz fakturę</button>
  </form>

</div>