bizmatch-project/bizmatch-client/src/app/pages/email-us/email-us.component.html

<div class="container mx-auto p-4">
  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
    <h2 class="text-2xl font-semibold mb-6">Contact Us</h2>
    <form class="space-y-6">
      <!-- Erste Zeile: Name und E-Mail -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Name Eingabe -->
        <div>
          <label for="name" class="block text-gray-700 mb-2 font-medium flex items-center">
            Your Name
            <div *ngIf="validationService.hasMessage('name')" class="ml-2 relative group">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
              </svg>
              <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
                {{ validationService.getMessage('name')?.message }}
              </div>
            </div>
          </label>
          <div class="relative">
            <input
              id="name"
              name="name"
              type="text"
              [(ngModel)]="mailinfo.sender.name"
              placeholder="Enter your name"
              class="w-full px-3 py-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:border-black focus:ring-0"
              [class.border-red-500]="validationService.hasMessage('name')"
            />
            <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </svg>
          </div>
        </div>

        <!-- E-Mail Eingabe -->
        <div>
          <label for="email" class="block text-gray-700 mb-2 font-medium flex items-center">
            Your Email
            <div *ngIf="validationService.hasMessage('email')" class="ml-2 relative group">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
              </svg>
              <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
                {{ validationService.getMessage('email')?.message }}
              </div>
            </div>
          </label>
          <div class="relative">
            <input
              id="email"
              name="email"
              type="email"
              [(ngModel)]="mailinfo.sender.email"
              placeholder="Enter your email"
              class="w-full px-3 py-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:border-black focus:ring-0"
              [class.border-red-500]="validationService.hasMessage('email')"
            />
            <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
          </div>
        </div>
      </div>

      <!-- Zweite Zeile: Telefon und Bundesland -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Telefon Eingabe -->
        <div>
          <label for="phone" class="block text-gray-700 mb-2 font-medium flex items-center">
            Phone Number
            <div *ngIf="validationService.hasMessage('phoneNumber')" class="ml-2 relative group">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
              </svg>
              <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
                {{ validationService.getMessage('phoneNumber')?.message }}
              </div>
            </div>
          </label>
          <div class="relative">
            <input
              id="phone"
              name="phoneNumber"
              type="tel"
              [(ngModel)]="mailinfo.sender.phoneNumber"
              mask="(000) 000-0000"
              placeholder="(123) 456-7890"
              class="w-full px-3 py-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:border-black focus:ring-0"
              [class.border-red-500]="validationService.hasMessage('phoneNumber')"
            />
            <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
              />
            </svg>
          </div>
        </div>

        <!-- Bundesland Select -->
        <div>
          <label for="state" class="block text-gray-700 mb-2 font-medium flex items-center">
            State
            <div *ngIf="validationService.hasMessage('state')" class="ml-2 relative group">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
              </svg>
              <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
                {{ validationService.getMessage('state')?.message }}
              </div>
            </div>
          </label>
          <div class="relative">
            <select
              id="state"
              name="state"
              [(ngModel)]="mailinfo.sender.state"
              class="w-full px-3 py-3 pl-10 border border-gray-300 rounded-lg bg-white focus:outline-none focus:border-black focus:ring-0 appearance-none"
              [class.border-red-500]="validationService.hasMessage('state')"
            >
              <option value="" disabled selected>Select your state</option>
              <option *ngFor="let state of selectOptions?.states" [value]="state.value">{{ state.name }}</option>
            </select>
            <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </div>
        </div>
      </div>

      <!-- Kommentarfeld -->
      <div>
        <label for="comments" class="block text-gray-700 mb-2 font-medium flex items-center">
          Questions/Comments
          <div *ngIf="validationService.hasMessage('comments')" class="ml-2 relative group">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
            <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
              {{ validationService.getMessage('comments')?.message }}
            </div>
          </div>
        </label>
        <textarea
          id="comments"
          name="comments"
          [(ngModel)]="mailinfo.sender.comments"
          placeholder="Type your questions or comments here..."
          rows="4"
          class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-black focus:ring-0"
          [class.border-red-500]="validationService.hasMessage('comments')"
        ></textarea>
      </div>

      <!-- Submit Button -->
      <div>
        <button (click)="mail()" class="w-full sm:w-auto px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200">
          <span class="flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
            </svg>
            Submit
          </span>
        </button>
      </div>
    </form>
  </div>
</div>