ekart/src/app/features/product/add-product/add-product.html

<section class="wrapper">
  @if (successMessage()) {
  <div
    class="fixed top-5 right-5 z-50 flex items-center p-4 mb-4 text-green-800 rounded-lg bg-green-50 border border-green-200 shadow-lg animate-bounce-in"
    role="alert"
  >
    <svg
      aria-hidden="true"
      class="flex-shrink-0 w-4 h-4"
      fill="currentColor"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"
      />
    </svg>
    <div class="ms-3 text-sm font-medium">{{ successMessage() }}</div>
    <button
      (click)="successMessage.set(null)"
      class="ms-auto -mx-1.5 -my-1.5 bg-green-50 text-green-500 rounded-lg p-1.5 hover:bg-green-200 inline-flex items-center justify-center h-8 w-8"
      type="button"
    >
      <span class="sr-only">Close</span>
      ✕
    </button>
  </div>
  }

  <h1 class="h1">Add Product</h1>
  <section class="card">
    <form
      (ngSubmit)="submitProductForm()"
      [formGroup]="productAddFrom"
      class="flex flex-col sm:flex-row gap-4"
    >
      <fieldset class="flex flex-col space-y-4 min-w-0 flex-1">
        <fieldset class="fieldset">
          <legend class="fieldset-legend">Title</legend>
          <input
            class="input"
            formControlName="title"
            id="title"
            placeholder="Enter product title"
            type="text"
          />
          <app-error [control]="productAddFrom.get('title')" fieldName="title" />
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-legend">Description</legend>
          <textarea
            class="input"
            formControlName="description"
            id="description"
            rows="5"
          ></textarea>
          <app-error [control]="productAddFrom.get('description')" fieldName="description" />
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-legend">Select category</legend>
          <select class="input" formControlName="product_category_id" id="category">
            <option disabled selected value="">Select Category</option>
            @for (category of categories(); track category?.id) {
            <option [value]="category?.id">{{ category.name }}</option>
            }
          </select>
          <app-error [control]="productAddFrom.get('product_category_id')" fieldName="category" />
        </fieldset>
      </fieldset>
      <fieldset class="flex flex-col space-y-4 min-w-0 flex-1">
        <div class="flex gap-4">
          <fieldset class="fieldset flex-1">
            <legend class="fieldset-legend">List Price</legend>
            <input
              class="input"
              formControlName="list_price"
              id="list-price"
              placeholder="$0"
              type="number"
            />
            <label class="label" for="list-price">Price to be shown as MRP</label>
            <app-error [control]="productAddFrom.get('list_price')" fieldName="List Price" />
          </fieldset>

          <fieldset class="fieldset flex-1">
            <legend class="fieldset-legend">Actual Price</legend>
            <input
              class="input"
              formControlName="actual_price"
              id="actual-price"
              placeholder="$0"
              type="number"
            />
            <label class="label" for="actual-price">Price to be calculated when billing</label>
            <app-error [control]="productAddFrom.get('actual_price')" fieldName="Actual Price" />
          </fieldset>
        </div>

        <fieldset class="fieldset">
          <legend class="fieldset-legend">Image</legend>
          <div class="grid grid-cols-1 sm:grid-cols-3 sm:h-36 gap-4">
            <app-image-input
              (imageSelected)="openPreview($event)"
              [bgImageUrl]="selectedImages()['image_1']?.url"
              id="image_1"
            />

            <app-image-input
              (imageSelected)="openPreview($event)"
              [bgImageUrl]="selectedImages()['image_2']?.url"
              id="image_2"
            />
            <app-image-input
              (imageSelected)="openPreview($event)"
              [bgImageUrl]="selectedImages()['image_3']?.url"
              id="image_3"
            />
            <dialog
              #imageDialog
              class="relative min-w-11/12 min-h-11/12 m-auto p-4 rounded-xl bg-gray-50 overflow-x-hidden backdrop:bg-black/50 backdrop:backdrop-blur-xs"
            >
              <div class="flex flex-col gap-4 overflow-hidden">
                <div class="flex self-end gap-4 fixed top-10 right-10">
                  <button
                    (click)="closeDialog()"
                    class="btn btn-ghost bg-gray-50 py-1 px-4 shadow-xl"
                    type="button"
                  >
                    ✕ Close
                  </button>

                  <button
                    (click)="confirmImage()"
                    class="btn btn-black py-1 px-4 shadow-xl"
                    type="button"
                  >
                    ✓ Select
                  </button>
                </div>
                <div class="overflow-y-scroll rounded-lg">
                  <img
                    [src]="activeImage()?.url"
                    alt="Product Preview"
                    class="w-full h-auto object-contain"
                  />
                </div>
              </div>
            </dialog>
          </div>
        </fieldset>
        <button class="btn btn-black py-2" type="submit">Add Product</button>
      </fieldset>
    </form>
  </section>
</section>