<!--
  Questo file fa parte di MyTown.
  MyTown è software libero: puoi ridistribuirlo e/o modificarlo secondo
  i termini della GNU Affero General Public License come pubblicata dalla
  Free Software Foundation, versione 3.
  Distribuito senza ALCUNA GARANZIA; vedi la GNU AGPL v3 per i dettagli.
  Copyright (C) Kondor Consulting & Services S.r.l.
  SPDX-License-Identifier: AGPL-3.0-or-later
-->

<ion-header>
  <ion-toolbar scroll-y="false" >
    <ion-buttons slot="start">
      <ion-button class="ion-no-padding" fill="clear" color="tertiary" (click)="closeModal()">
        <ion-icon name="close-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    @if (Useraddress.uda_id == 0) {
      <ion-title>{{'onlineshop.cart.newadd' | translate}}</ion-title>
    }
    @if (Useraddress.uda_id != 0) {
      <ion-title>{{'onlineshop.cart.updadd' | translate}}</ion-title>
    }
    <ion-buttons slot="end">
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form #addressForm="ngForm" cForm (ngSubmit)="onSubmit()" ngNativeValidate>
    <div class="form-group row">
      <!--<form (ngSubmit)="onSubmit()" cForm #addressForm="ngForm" ngNativeValidate>
      <div class="form-group">

        <div class="col-12 col-sm-6 col-md-3 flex flex-col grow basis-0 gap-1">
          <label class="kcs-form-label" for="firstname">{{'onlineshop.lbl.clienti.cli_name' | translate }}: <span class="text-danger">*</span></label>
          <input cFormControl required type="text" id="firstname" class="kcs-inputtext kcs-component" placeholder="{{'onlineshop.lbl.clienti.cli_name' | translate }}" name="firstname" [(ngModel)]="Useraddress.firstname" #firstname="ngModel" [ngModelOptions]="{ standalone: true }" />
          <div *ngIf="firstname.errors && (firstname.dirty || firstname.touched)" class="alert alert-danger mb-3">
            <i class="pi pi-exclamation-triangle me-2"></i>
            <span size="small" [hidden]="!firstname.errors['required']">{{'onlineshop.lbl.clienti.cli_name' | translate}} is required!</span>
          </div>
        </div>

        -->
        <ion-item-group mode="ios">
          <ion-item-divider>
            <ion-icon name="man-outline" slot="start"></ion-icon>
            <ion-label>{{'onlineshop.lbl.ordini.usr_username' | translate}}</ion-label>
          </ion-item-divider>
          <ion-grid>
            <ion-row>
              <ion-col>
                <ion-item>
                  <ion-label position="floating">{{'onlineshop.lbl.clienti.cli_surname' | translate }}<span class="text-danger">*</span></ion-label>
                  <ion-input cFormControl required type="text"  [(ngModel)]="Useraddress.lastname" id="lastname" name="lastname" #lastname="ngModel" [ngModelOptions]="{ standalone: true }" [clearInput]="true" ></ion-input>
                  @if (lastname.errors && (lastname.dirty || lastname.touched)) {
                    <div class="alert alert-danger">
                      <div [hidden]="!lastname.errors['required']">{{'onlineshop.lbl.clienti.cli_surname' | translate }} is required</div>
                    </div>
                  }
                </ion-item>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col>
                <ion-item>
                  <ion-label position="floating">{{'onlineshop.lbl.clienti.cli_name' | translate }}<span class="text-danger">*</span></ion-label>
                  <ion-input cFormControl required type="text"  [(ngModel)]="Useraddress.firstname" id="firstname" name="firstname" #firstname="ngModel" [ngModelOptions]="{ standalone: true }" [clearInput]="true" ></ion-input>
                  @if (firstname.errors && (firstname.dirty || firstname.touched)) {
                    <div class="alert alert-danger">
                      <div [hidden]="!firstname.errors['required']">{{'onlineshop.lbl.clienti.cli_name' | translate }} is required</div>
                    </div>
                  }
                </ion-item>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-item-group>
        <ion-item-group mode="ios">
          <ion-item-divider>
            <ion-icon name="location-outline" slot="start"></ion-icon>
            <ion-label>{{'onlineshop.ft.indirizzoSped' | translate}}</ion-label>
          </ion-item-divider>
          <ion-grid>
            <ion-row>
              <ion-col>
                <ion-item>
                  <ion-label position="floating">{{'onlineshop.address.via' | translate}}<span class="text-danger">*</span></ion-label>
                  <ion-input cFormControl required type="text"  [(ngModel)]="Useraddress.address" id="address" name="address" #address="ngModel" [ngModelOptions]="{ standalone: true }" [clearInput]="true" ></ion-input>
                  @if (address.errors && (address.dirty || address.touched)) {
                    <div class="alert alert-danger">
                      <div [hidden]="!address.errors['required']">{{'onlineshop.address.via' | translate}} is required</div>
                    </div>
                  }
                </ion-item>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col>
                <ion-item>
                  <ion-label position="floating">{{'onlineshop.address.n' | translate }}<span class="text-danger">*</span></ion-label>
                  <ion-input cFormControl required type="text"  [(ngModel)]="Useraddress.number" id="number" name="number" #number="ngModel"  maxlength="5" [ngModelOptions]="{ standalone: true }" [clearInput]="true" ></ion-input>
                  @if (number.errors && (number.dirty || number.touched)) {
                    <div class="alert alert-danger">
                      <div [hidden]="!number.errors['required']">{{'onlineshop.address.n' | translate }} is required</div>
                    </div>
                  }
                </ion-item>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col>
                <ion-item [button]="true" [detail]="false" (click)="openModalComuni = true">
                  <ion-label position="stacked">{{'onlineshop.adress.comune' | translate}}<span class="text-danger">*</span></ion-label>
                  <ion-input [(ngModel)]="objcomune.denominazione" readonly [ngModelOptions]="{ standalone: true }"></ion-input>
                </ion-item>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col>
                <ion-item>
                  <ion-label position="floating">{{'CAP'}}</ion-label>
                  <ion-input type="text" [(ngModel)]="objcomune.cap" [clearInput]="true"  readonly maxlength="5" [ngModelOptions]="{ standalone: true }"></ion-input>
                </ion-item>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col>
                <ion-item>
                  <ion-label position="floating">{{'onlineshop.address.belfiore' | translate }}</ion-label>
                  <ion-input type="text" [(ngModel)]="objcomune.codicefiscale" [clearInput]="true"  readonly maxlength="5" [ngModelOptions]="{ standalone: true }"></ion-input>
                </ion-item>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col>
                <ion-item>
                  <ion-label position="floating">{{'onlineshop.address.prov' | translate}}</ion-label>
                  <ion-input type="text" [(ngModel)]="objcomune.codiceprovincia" [clearInput]="true"  readonly maxlength="5" [ngModelOptions]="{ standalone: true }"></ion-input>
                </ion-item>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col>
                <ion-item>
                  <ion-label position="floating">{{'onlineshop.ft.note' | translate}}</ion-label>
                  <ion-input type="text" name="note" [(ngModel)]="Useraddress.note" [clearInput]="true" [ngModelOptions]="{ standalone: true }"></ion-input>
                </ion-item>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col>
                <ion-item>
                  <ion-checkbox labelPlacement="start" [(ngModel)]="Useraddress.isactive" [ngModelOptions]="{ standalone: true }">{{'onlineshop.address.active' | translate}}</ion-checkbox>
                </ion-item>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-item-group>
      </div>
      <ion-button [disabled]="addressForm.invalid" type="submit" color="success" size="full"  style="padding: 2%;">
        {{'onlineshop.filters.save' | translate}}
      </ion-button>


      <!--MODAL-->
      <ion-modal [isOpen]="openModalComuni" (didDismiss)="openModalComuni = false;">
        <ng-template>
          <app-searchable-select class="ion-page" [title]="'comune' | translate" [items]="comuni" [selectedItems]="selectedComune" (selectionChange)="sel_comune($event)" (selectionCancel)="openModalComuni = false">
          </app-searchable-select>
        </ng-template>
      </ion-modal>
    </form>
  </ion-content>
