<div mat-dialog-title>
  <h1>{{ data ? "Editar Navio" : "Adicionar Navio" }}</h1>
</div>

<form [formGroup]="empForm" (ngSubmit)="onFormSubmit()">
  <div mat-dialog-content class="content" tabindex="0">
    <div class="row">
      <mat-form-field class="field full-width" appearance="outline">
        <mat-label>IMO</mat-label>
        <input matInput type="number" (keydown)="preventNegative($event)" min="0" formControlName="imo" />
        <mat-error *ngIf="empForm.get('imo')?.invalid">{{
          getErrorMessage("imo")
          }}</mat-error>
      </mat-form-field>
      <mat-form-field class="field full-width" appearance="outline">
        <mat-label>MMSI</mat-label>
        <input matInput type="text" formControlName="mmsi" (keydown)="preventNegative($event)" />
        <mat-error *ngIf="empForm.get('mmsi')?.invalid">{{
          getErrorMessage("mmsi")
          }}</mat-error>
      </mat-form-field>
    </div>

    <div class="row">
      <mat-form-field class="field large" appearance="outline">
        <mat-label>Nome</mat-label>
        <input matInput type="text" formControlName="nome" />
        <mat-error *ngIf="empForm.get('nome')?.invalid">{{
          getErrorMessage("nome")
          }}</mat-error>
      </mat-form-field>
      <mat-form-field class="field medium" appearance="outline">
        <mat-label>LOA (m)</mat-label>
        <input matInput type="text" [currencyMask]="{ prefix: ' ', thousands: '.', decimal: ',' }"
          formControlName="loa" />
        <mat-error *ngIf="empForm.get('loa')?.invalid">{{
          getErrorMessage("loa")
          }}</mat-error>
      </mat-form-field>
      <mat-form-field class="field small" appearance="outline">
        <mat-label>Boca (m)</mat-label>
        <input matInput type="text" [currencyMask]="{ prefix: ' ', thousands: '.', decimal: ',' }"
          formControlName="boca" />
        <mat-error *ngIf="empForm.get('boca')?.invalid">{{
          getErrorMessage("boca")
          }}</mat-error>
      </mat-form-field>
    </div>

    <div class="row">
      <mat-form-field class="field large" appearance="outline">
        <mat-label>DWT</mat-label>
        <input matInput type="text" [currencyMask]="{ prefix: 'tons ', thousands: '.', decimal: ',' }"
          formControlName="dwt" />
        <mat-error *ngIf="empForm.get('dwt')?.invalid">{{
          getErrorMessage("dwt")
          }}</mat-error>
      </mat-form-field>
      <mat-form-field class="field medium" appearance="outline">
        <mat-label>Pontal (m)</mat-label>
        <input matInput type="text" [currencyMask]="{ prefix: ' ', thousands: '.', decimal: ',' }"
          formControlName="pontal" />
        <mat-error *ngIf="empForm.get('pontal')?.invalid">{{
          getErrorMessage("pontal")
          }}</mat-error>
      </mat-form-field>
      <mat-form-field class="field small" appearance="outline">
        <mat-label>Ponte Mfold (m)</mat-label>
        <input matInput type="text" [currencyMask]="{ prefix: ' ', thousands: '.', decimal: ',' }"
          formControlName="ponte_mfold" />
        <mat-error *ngIf="empForm.get('ponte_mfold')?.invalid">{{
          getErrorMessage("ponte_mfold")
          }}</mat-error>
      </mat-form-field>
    </div>

    <div class="row">
      <mat-form-field class="field large" appearance="outline">
        <mat-label>Mfold Quilha (m)</mat-label>
        <input matInput type="text" [currencyMask]="{ prefix: ' ', thousands: '.', decimal: ',' }"
          formControlName="mfold_quilha" />
        <mat-error *ngIf="empForm.get('mfold_quilha')?.invalid">{{
          getErrorMessage("mfold_quilha")
          }}</mat-error>
      </mat-form-field>

      <mat-form-field class="field medium" appearance="outline">
        <mat-label>Categoria</mat-label>
        <mat-select formControlName="categoria">
          <mat-option [value]="1">Granel Sólido</mat-option>
          <mat-option [value]="2">Granel Líquido</mat-option>
          <mat-option [value]="3">Carga Geral</mat-option>
        </mat-select>
        <mat-error *ngIf="empForm.get('categoria')?.invalid">
          {{ getErrorMessage("categoria") }}
        </mat-error>
      </mat-form-field>
      <mat-form-field class="field small" appearance="outline">
        <mat-label>Flag</mat-label>
        <mat-select formControlName="flag">
          <mat-select-trigger>
            <img
              *ngIf="selectedCountry"
              [src]="selectedCountry.flagUrl"
              width="20"
              height="15"
              alt="{{ selectedCountry.name }} flag"
              style="margin-right: 8px"
            />
            {{ selectedCountry?.name }}
          </mat-select-trigger>
          <mat-option
            *ngFor="let country of countries"
            [value]="country.id"
            (onSelectionChange)="onCountrySelected(country)"
          >
            <img
              [src]="country.flagUrl"
              width="20"
              height="15"
              alt="{{ country.name }} flag"
              style="margin-right: 8px"
            />
            {{ country.name }}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="empForm.get('flag')?.invalid">
          {{ getErrorMessage("flag") }}
        </mat-error>
      </mat-form-field>
    </div>
    <div class="row">
      <mat-form-field class="field full-width" appearance="outline">
        <mat-label>Observação</mat-label>
        <input matInput type="text" formControlName="obs" />
        <mat-error *ngIf="empForm.get('obs')?.invalid">{{
          getErrorMessage("obs")
          }}</mat-error>
      </mat-form-field>
    </div>
    <div class="row file-upload-container">
      <mat-label style="color:cadetblue">Adicione o documente Q88 da embarcação</mat-label>
      <input type="file" class="file-input" (change)="onFileSelected($event)" #fileUpload style="display: none" />

      <div class="file-upload-content">
        <div class="file-info">
          <span>{{ fileName || "No file uploaded yet." }}</span>
        </div>

        <div class="upload-button-wrapper">
          <button mat-mini-fab color="primary" class="upload-btn" (click)="fileUpload.click()" type="button">
            <mat-icon>attach_file</mat-icon>
          </button>

        </div>
      </div>

      <div class="uploaded-image-container" *ngIf="imageUrl">
        <img [src]="imageUrl" alt="Uploaded Image" class="uploaded-image" />
        <button mat-mini-fab color="warn" class="remove-image-btn" (click)="removeImage()">
          <mat-icon>close</mat-icon>
        </button>
      </div>
    </div>
  </div>
  <div mat-dialog-actions class="action">
    <button mat-raised-button type="button" color="warn" [mat-dialog-close]="false">
      Cancelar
    </button>
    <button mat-raised-button color="primary" type="submit">Salvar</button>
  </div>
</form>