<div class="container mx-auto p-4">
  <div class="bg-white rounded-lg shadow-lg overflow-hidden relative">
    <button
      (click)="historyService.goBack()"
      class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"
    >
      <i class="fas fa-times"></i>
    </button>
    @if(listing){
    <div class="p-6 flex flex-col lg:flex-row">
      <!-- Left column -->
      <div class="w-full lg:w-1/2 pr-0 lg:pr-6">
        <h1 class="text-2xl font-bold mb-4">{{ listing.title }}</h1>
        <p class="mb-4" [innerHTML]="description"></p>

        <div class="space-y-2">
          <div class="flex flex-col sm:flex-row" [ngClass]="{ 'bg-gray-100': i % 2 === 0 }" *ngFor="let item of listingDetails; let i = index">
            <div class="w-full sm:w-1/3 font-semibold p-2">{{ item.label }}</div>
            @if(item.label==='Category'){
            <span class="bg-blue-100 text-blue-800 font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300 my-1">{{ item.value }}</span>
            } @else {
            <div class="w-full sm:w-2/3 p-2">{{ item.value }}</div>
            }
          </div>
        </div>
        @if(listing && listingUser && (listingUser?.email===user?.email || isAdmin())){
        <button
          [routerLink]="['/editBusinessListing', listing.id]"
          class="w-full sm:w-auto px-4 py-2 mt-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
        >
          Edit
        </button>
        }
      </div>

      <!-- Right column -->
      <div class="w-full lg:w-1/2 mt-6 lg:mt-0">
        <h3 class="text-lg font-semibold mb-4">Contact the Author of this Listing</h3>
        <p class="text-sm mb-4">Please include your contact info below</p>
        <form class="space-y-4">
          <!-- <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
            <div class="w-full sm:w-1/2">
              <label for="name" class="block text-sm font-medium text-gray-700">Your Name</label>
              <input type="text" id="name" name="name" [(ngModel)]="mailinfo.sender.name" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
            </div>
            <div class="w-full sm:w-1/2">
              <label for="email" class="block text-sm font-medium text-gray-700">Your Email</label>
              <input
                type="email"
                id="email"
                name="email"
                [(ngModel)]="mailinfo.sender.email"
                class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
              />
            </div>
          </div> -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <app-validated-input label="Your Name" name="name" [(ngModel)]="mailinfo.sender.name"></app-validated-input>
            <app-validated-input label="Your Email" name="email" [(ngModel)]="mailinfo.sender.email" kind="email"></app-validated-input>
          </div>
          <!-- <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
            <div class="w-full sm:w-1/2">
              <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
              <input
                type="tel"
                id="phone"
                name="phone"
                [(ngModel)]="mailinfo.sender.phoneNumber"
                placeholder="(123) 456-7890"
                class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
              />
            </div>
            <div class="w-full sm:w-1/2">
              <label for="country" class="block text-sm font-medium text-gray-700">Country/State</label>
              <input
                type="text"
                id="country"
                name="country"
                [(ngModel)]="mailinfo.sender.state"
                class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
              />
            </div>
          </div> -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <app-validated-input label="Phone Number" name="phoneNumber" [(ngModel)]="mailinfo.sender.phoneNumber" kind="tel"></app-validated-input>
            <app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input>
          </div>
          <!-- <div>
            <label for="comments" class="block text-sm font-medium text-gray-700">Questions/Comments</label>
            <textarea
              id="comments"
              name="comments"
              rows="4"
              [(ngModel)]="mailinfo.sender.comments"
              class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
            ></textarea>
          </div> -->
          <div>
            <app-validated-textarea label="Questions/Comments" name="comments" [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
          </div>
          @if(listingUser){
          <div class="flex items-center space-x-2">
            <p>Listing by</p>
            <!-- <p class="text-sm font-semibold">Noah Nguyen</p> -->
            <a routerLink="/details-user/{{ listingUser.id }}" class="text-blue-600 dark:text-blue-500 hover:underline">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
            <!-- <img src="https://placehold.co/20x20" alt="Broker logo" class="w-5 h-5" /> -->
            @if(listingUser.hasCompanyLogo){
            <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" />
            }
          </div>
          }
          <button (click)="mail()" class="w-full sm:w-auto px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Submit</button>
        </form>
      </div>
    </div>
    }
  </div>
</div>

<!-- <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">
        <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 flex flex-column" [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">Category</div>
              <div class="text-900 w-full md:w-9">
                <p-chip [label]="selectOptions.getBusiness(listing.type)"></p-chip>
              </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">{{ listing.city }}, {{ 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">Asking Price</div>
              <div class="text-900 w-full md:w-9">{{ listing.price | currency }}</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">Sales revenue</div>
              <div class="text-900 w-full md:w-9">{{ listing.salesRevenue | currency }}</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">Cash flow</div>
              <div class="text-900 w-full md:w-9">{{ listing.cashFlow | currency }}</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">Type of Real Estate</div>
              <div class="text-900 w-full md:w-9">
                @if (listing.realEstateIncluded){
                <p-chip label="Real Estate Included"></p-chip>
                } @if (listing.leasedLocation){
                <p-chip label="Leased Location"></p-chip>
                } @if (listing.franchiseResale){
                <p-chip label="Franchise Re-Sale"></p-chip>
                }
              </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">Employees</div>
              <div class="text-900 w-full md:w-9">{{ listing.employees }}</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">Established since</div>
              <div class="text-900 w-full md:w-9">{{ listing.established }}</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">Support & Training</div>
              <div class="text-900 w-full md:w-9">{{ listing.supportAndTraining }}</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">Reason for Sale</div>
              <div class="text-900 w-full md:w-9">{{ listing.reasonForSale }}</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">Broker licensing</div>
              <div class="text-900 w-full md:w-9">{{ listing.brokerLicencing }}</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]="['/editBusinessListing', listing.id]"></button>
          }
        </div>
        <div class="col-12 md:col-6">
          <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 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.imageName }}.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> -->
