<section>
  <div [formGroup]="itemForm">
    <div class="grid md:grid-cols-5 gap-4">
      @if (itemForm.get('id')?.value !== -1) {
      <p-floatlabel variant="in" class="min-w-0">
        <p-select [options]="days" optionValue="id" optionLabel="label" inputId="day_id" id="day_id"
          scrollHeight="320px" appendTo="body" formControlName="day_id" [checkmark]="true" [filter]="true" fluid>
          <ng-template let-day #item>
            <div class="whitespace-normal">{{ day.label }}</div>
          </ng-template>
        </p-select>
        <label for="day_id">Day</label>
      </p-floatlabel>
      } @else {
      <p-multiselect [options]="days" optionValue="id" optionLabel="label" formControlName="day_id" placeholder="Days"
        [filter]="false" [showToggleAll]="false" display="chip" styleClass="flex items-center" scrollHeight="320px"
        appendTo="body" selectedItemsLabel="{0} days selected" [filter]="true" fluid>
        <ng-template let-day #item>
          <div class="whitespace-normal">{{ day.label }}</div>
        </ng-template>
      </p-multiselect>
      }

      <p-floatlabel variant="in" class="w-full">
        <p-inputmask id="time" formControlName="time" mask="99?:99" fluid styleClass="w-full" />
        <label for="time">Time (HH, HH:MM)</label>
      </p-floatlabel>

      <div class="md:col-span-3">
        <p-floatlabel variant="in">
          <input id="text" formControlName="text" pInputText fluid />
          <label for="text">Text</label>
        </p-floatlabel>
      </div>
    </div>

    <div class="mt-4 grid md:grid-cols-7 grid-cols-2 gap-4">
      <p-floatlabel variant="in" class="col-span-2">
        <p-select [options]="places" appendTo="body" optionValue="id" optionLabel="name" inputId="place" id="place"
          [filter]="true" filterBy="name" formControlName="place" [showClear]="true" class="capitalize" fluid>

          <ng-template let-place #item>
            <div class="flex items-center whitespace-normal gap-2" [class.text-gray-500]="place.placeUsage">
              <img [src]="place.image || place.category.image" class="rounded-full size-6" />
              <div>{{ place.name }}</div>
            </div>
          </ng-template>
        </p-select>
        <label for="place">Place</label>
      </p-floatlabel>

      <p-floatlabel variant="in">
        <input id="lat" formControlName="lat" pInputText fluid />
        <label for="lat">Latitude</label>
      </p-floatlabel>

      <p-floatlabel variant="in">
        <input id="lng" formControlName="lng" pInputText fluid />
        <label for="lng">Longitude</label>
      </p-floatlabel>

      <p-floatlabel variant="in">
        <p-inputnumber id="price" formControlName="price" mode="decimal" [minFractionDigits]="0" [maxFractionDigits]="2"
          fluid />
        <label for="price">Price</label>
      </p-floatlabel>

      <p-floatlabel variant="in" class="md:col-span-2">
        <p-select [options]="statuses" optionValue="label" optionLabel="label" inputId="status" id="status"
          class="capitalize" formControlName="status" [checkmark]="true" [showClear]="true" fluid>
          <ng-template #selectedItem let-selectedOption>
            @if (selectedOption) {
            <div class="flex items-center gap-2">
              <div class="size-4 rounded-md" [style]="'background:'+selectedOption.color"></div>
              <div>{{ selectedOption.label }}</div>
            </div>
            }
          </ng-template>
          <ng-template let-option #item>
            <div class="whitespace-normal">{{ option.label }}</div>
          </ng-template>
        </p-select>
        <label for="status">Status</label>
      </p-floatlabel>
    </div>

    <div class="mt-4 grid col-span-full md:grid-cols-7">
      <p-floatlabel variant="in" class="col-span-full md:col-span-5">
        <textarea pTextarea id="comment" formControlName="comment" rows="3" autoResize fluid></textarea>
        <label for="comment">Comment</label>
      </p-floatlabel>

      <div class="mt-4 md:mt-0 grid place-items-center">
        @if (itemForm.get("image")?.value) {
        <div class="w-2/3 relative group cursor-pointer" (click)="clearImage()">
          <img [src]="itemForm.get('image')?.value"
            class="w-full max-h-20 object-cover rounded-md shadow-lg transition-transform duration-300" />
          <div
            class="absolute inset-0 bg-black/50 rounded-md flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <i class="pi pi-trash text-white text-3xl"></i>
          </div>
        </div>
        } @else {
        <p-button text label="Select image" icon="pi pi-image" (click)="imageInput.click()" />
        }
        <input type="file" accept="image/*" #imageInput class="hidden" (change)="onImageSelected($event)" />
      </div>

      <div class="mt-4 md:mt-0 grid place-items-center">
        <div class="flex justify-center items-center">
          @if (itemForm.get('gpx')?.value) {
          <p-button text icon="pi pi-times" label="GPX" severity="danger" (click)="clearGPX()" />
          } @else {
          <p-button text icon="pi pi-paperclip" label="GPX" (click)="gpxInput.click()" />
          }
          <input type="file" accept=".gpx" #gpxInput class="hidden" (change)="onGPXSelected($event)" />
        </div>
      </div>
    </div>
  </div>

  <div class="mt-4 text-right">
    <p-button (click)="closeDialog()" [disabled]="!itemForm.dirty || !itemForm.valid">{{ itemForm.get("id")?.value
      !== -1 ? "Update" : "Create" }}</p-button>
  </div>
</section>