<div pFocusTrap class="grid md:grid-cols-4 items-center gap-4" [formGroup]="tripForm">
  <p-floatlabel class="md:col-span-3" variant="in">
    <input id="name" formControlName="name" pInputText fluid (keyup.enter)="closeDialog()" />
    <label for="name">Name</label>
  </p-floatlabel>

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

  @if (tripForm.get("id")?.value === -1) {
  <div class="grid md:col-span-4 grid-cols-2 gap-2">
    <p-floatlabel variant="in">
      <p-datepicker id="from" formControlName="from" [iconDisplay]="'input'" [showIcon]="true" appendTo="body" fluid />
      <label for="from">From</label>
    </p-floatlabel>

    <p-floatlabel variant="in">
      <p-datepicker id="to" formControlName="to" [iconDisplay]="'input'" [showIcon]="true" appendTo="body" fluid />
      <label for="to">To</label>
    </p-floatlabel>
  </div>
  }

  <div class="md:col-span-4 grid place-items-center">
    @if (tripForm.get("image_id")?.value) {
    <div class="max-w-80 max-h-80 relative group cursor-pointer" (click)="fileInput.click()">
      <img [src]="tripForm.get('image')?.value"
        class="max-w-80 max-h-80 object-cover rounded-lg shadow-lg transition-transform duration-300" />
      <div
        class="absolute inset-0 bg-black/50 rounded-lg flex flex-col gap-4 items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <span class="text-sm text-gray-300">Click to edit</span><i class="pi pi-upload text-white"></i>
      </div>
    </div>
    <input type="file" accept="image/*" #fileInput class="hidden" (change)="onFileSelected($event)" />
    } @else {
    @if (tripForm.get("image")?.value) {
    <div class="max-w-80 max-h-80 relative group cursor-pointer" (click)="clearImage()">
      <img [src]="tripForm.get('image')?.value"
        class="max-w-80 max-h-80 object-cover rounded-lg shadow-lg transition-transform duration-300" />
      <div
        class="absolute inset-0 bg-black/50 rounded-lg 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 {
    <div class="max-w-80 max-h-80 relative group cursor-pointer" (click)="fileInput.click()">
      <img src="/favicon.png" class="max-w-80 max-h-80 object-cover transition-transform duration-300" />
      <div
        class="absolute inset-0 bg-black/50 rounded-lg flex flex-col gap-4 items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <span class="text-sm text-gray-300">Click to edit</span><i class="pi pi-upload text-white"></i>
      </div>
    </div>
    <input type="file" accept="image/*" #fileInput class="hidden" (change)="onFileSelected($event)" />
    }
    }
  </div>
</div>

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