bizmatch-project/bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html

<!-- <div class="surface-ground h-full">
  <div class="px-6 py-5">
    <div class="surface-card p-4 shadow-2 border-round">
      <div class="flex justify-content-between align-items-center align-content-center mb-2">
        <div class="font-medium text-3xl text-900 mb-3">{{ listing?.title }}</div>
        @if(historyService.canGoBack){
        <p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="historyService.goBack()"></p-button>
        }
      </div>
      @if(listing){
      <div class="grid">
        <div class="col-12 md:col-6">
          <ul class="list-none p-0 m-0 border-top-1 border-300">
            <li class="flex align-items-center py-3 px-2 flex-wrap">
              <div class="text-500 w-full md:w-3 font-medium flex">Description</div>
              <div class="text-900 w-full md:w-9 line-height-3" [innerHTML]="description"></div>
            </li>
            <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
              <div class="text-500 w-full md:w-3 font-medium">Property Category</div>
              <div class="text-900 w-full md:w-9">{{ selectOptions.getCommercialProperty(listing.type) }}</div>
            </li>
            <li class="flex align-items-center py-3 px-2 flex-wrap">
              <div class="text-500 w-full md:w-3 font-medium">Located in</div>
              <div class="text-900 w-full md:w-9">{{ selectOptions.getState(listing.state) }}</div>
            </li>
            <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
              <div class="text-500 w-full md:w-3 font-medium">City</div>
              <div class="text-900 w-full md:w-9">{{ listing.city }}</div>
            </li>
            <li class="flex align-items-center py-3 px-2 flex-wrap">
              <div class="text-500 w-full md:w-3 font-medium">Zip Code</div>
              <div class="text-900 w-full md:w-9">{{ listing.zipCode }}</div>
            </li>
            <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
              <div class="text-500 w-full md:w-3 font-medium">County</div>
              <div class="text-900 w-full md:w-9">{{ listing.county }}</div>
            </li>
            <li class="flex align-items-center py-3 px-2 flex-wrap">
              <div class="text-500 w-full md:w-3 font-medium">Asking Price:</div>
              <div class="text-900 w-full md:w-9">{{ listing.price | currency }}</div>
            </li>
          </ul>

          @if(listing && listingUser && (listingUser?.email===user?.email || isAdmin())){
          <button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" [routerLink]="['/editCommercialPropertyListing', listing.id]"></button>
          }
        </div>

        <div class="col-12 md:col-6">
          <p-galleria [value]="listing.imageOrder" [showIndicators]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
            <ng-template pTemplate="item" let-item>
              <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ item }}" style="width: 100%" />
            </ng-template>
          </p-galleria>
          @if (mailinfo){
          <div class="surface-card p-4 border-round p-fluid">
            <div class="font-medium text-xl text-primary text-900 mb-3">Contact the Author of this Listing</div>
            <div class="font-italic text-sm text-900 mb-5">Please include your contact info below</div>
            <div class="grid formgrid p-fluid">
              <div class="field mb-4 col-12 md:col-6">
                <label for="name" class="font-medium text-900">Your Name</label>
                <input [ngClass]="{ 'ng-invalid': containsError('name'), 'ng-dirty': containsError('name') }" id="name" type="text" pInputText [(ngModel)]="mailinfo.sender.name" />
              </div>
              <div class="field mb-4 col-12 md:col-6">
                <label for="email" class="font-medium text-900">Your Email</label>
                <input id="email" type="text" pInputText [(ngModel)]="mailinfo.sender.email" />
              </div>
              <div class="field mb-4 col-12 md:col-6">
                <label for="phoneNumber" class="font-medium text-900">Phone Number</label>
                <p-inputMask mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="mailinfo.sender.phoneNumber"></p-inputMask>
              </div>
              <div class="field mb-4 col-12 md:col-6">
                <label for="state" class="font-medium text-900">Country/State</label>
                <input id="state" type="text" pInputText [(ngModel)]="mailinfo.sender.state" />
              </div>
              <div class="surface-border border-top-1 opacity-50 mb-4 col-12"></div>
              <div class="field mb-4 col-12">
                <label for="notes" class="font-medium text-900">Questions/Comments</label>
                <textarea id="notes" pInputTextarea [autoResize]="true" [rows]="5" [(ngModel)]="mailinfo.sender.comments"></textarea>
              </div>
              @if(listingUser){
              <div class="surface-border mb-4 col-12 flex align-items-center">
                Listing by &nbsp;<a routerLink="/details-user/{{ listingUser.id }}" class="mr-2 font-semibold">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
                @if(listingUser.hasCompanyLogo){
                <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imagePath }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" />
                }
              </div>
              }
            </div>
            <button pButton pRipple label="Submit" icon="pi pi-file" class="w-auto" (click)="mail()"></button>
          </div>
          }
        </div>
      </div>
      }
    </div>
  </div>
</div> -->

<div class="container mx-auto p-4">
  <div class="bg-white shadow-md rounded-lg overflow-hidden">
    <div class="p-6 relative">
      <h1 class="text-3xl font-bold mb-4">{{ listing?.title }}</h1>
      <button class="absolute top-4 right-4 text-gray-500 hover:text-gray-700" (click)="historyService.goBack()">
        <fa-icon [icon]="faTimes" size="2x"></fa-icon>
      </button>
      <div class="lg:hidden">
        @if (listing && listing.imageOrder && listing.imageOrder.length > 0) {
        <div id="gallery" class="relative w-full" data-carousel="slide">
          <div class="relative h-56 overflow-hidden rounded-lg md:h-96">
            @for (image of listing.imageOrder; track $index) {
            <div class="hidden duration-700 ease-in-out" data-carousel-item>
              <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}" class="absolute block max-w-full h-auto -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" />
            </div>
            }
          </div>
          <div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2">
            <button type="button" class="w-3 h-3 rounded-full bg-white dark:bg-gray-800" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
            @for (i of getImageIndices(); track i) {
            <button
              type="button"
              class="w-3 h-3 rounded-full bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800"
              aria-current="false"
              attr.aria-label="Slide {{ i }}"
              attr.data-carousel-slide-to="{{ i }}"
            ></button>
            }
          </div>
        </div>
        }
      </div>
      <div class="flex flex-col lg:flex-row">
        <div class="w-full lg:w-1/2 pr-0 lg:pr-4">
          <p class="mb-4" [innerHTML]="description"></p>

          <div class="space-y-2">
            <div *ngFor="let detail of propertyDetails; let i = index" class="flex flex-col sm:flex-row" [ngClass]="{ 'bg-gray-100': i % 2 === 0 }">
              <div class="w-full sm:w-1/3 font-semibold p-2">{{ detail.label }}</div>
              <div class="w-full sm:w-2/3 p-2">{{ detail.value }}</div>
            </div>
          </div>
          @if(listing && listingUser && (listingUser?.email===user?.email || isAdmin())){
          <button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" [routerLink]="['/editCommercialPropertyListing', listing.id]">Edit</button>
          }
        </div>

        <div class="w-full lg:w-1/2 mt-6 lg:mt-0">
          <div class="hidden lg:block">
            @if (listing && listing.imageOrder && listing.imageOrder.length > 0) {
            <div id="gallery" class="relative w-full" data-carousel="slide">
              <div class="relative h-56 overflow-hidden rounded-lg md:h-96">
                @for (image of listing.imageOrder; track $index) {
                <div class="hidden duration-700 ease-in-out" data-carousel-item>
                  <img
                    src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}"
                    class="absolute block max-w-full h-auto -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
                  />
                </div>
                }
              </div>
              <div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2">
                <button type="button" class="w-3 h-3 rounded-full bg-white dark:bg-gray-800" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
                @for (i of getImageIndices(); track i) {
                <button
                  type="button"
                  class="w-3 h-3 rounded-full bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800"
                  aria-current="false"
                  attr.aria-label="Slide {{ i }}"
                  attr.data-carousel-slide-to="{{ i }}"
                ></button>
                }
              </div>
            </div>
            }
          </div>
          <div class="mt-6">
            <h2 class="text-xl font-semibold mb-4">Contact the Author of this Listing</h2>
            <p class="text-sm text-gray-600 mb-4">Please include your contact info below</p>
            <form>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                  <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
                  <input type="text" id="name" name="name" [(ngModel)]="mailinfo.sender.name" class="w-full px-3 py-2 border border-gray-300 rounded-md" />
                </div>
                <div>
                  <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Your Email</label>
                  <input type="email" id="email" name="email" [(ngModel)]="mailinfo.sender.email" class="w-full px-3 py-2 border border-gray-300 rounded-md" />
                </div>
                <div>
                  <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
                  <input type="tel" id="phone" name="phone" [(ngModel)]="mailinfo.sender.phoneNumber" class="w-full px-3 py-2 border border-gray-300 rounded-md" />
                </div>
                <div>
                  <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Country/State</label>
                  <input type="text" id="location" name="location" [(ngModel)]="mailinfo.sender.state" class="w-full px-3 py-2 border border-gray-300 rounded-md" />
                </div>
              </div>
              <div class="mb-4">
                <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Questions/Comments</label>
                <textarea id="message" name="message" [(ngModel)]="mailinfo.sender.comments" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md"></textarea>
              </div>
              <div class="flex items-center justify-between">
                <div class="text-sm">
                  Listing by <span class="font-semibold">Mia Hernandez</span>
                  <img src="https://placehold.co/30x30" alt="Realtor logo" class="inline-block ml-1 w-6 h-6" />
                </div>
                <button (click)="mail()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Submit</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>