import { NgSelectModule } from '@ng-select/ng-select';
import { Component } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators,
  ReactiveFormsModule,
} from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-contact',
  host: { 'app-contact': 'app-contact1' },
  standalone: true,
  imports: [NgSelectModule, CommonModule, ReactiveFormsModule],
  template: `
    <div class="contact2 sp3" style="background-color: #254969;">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="hadding2-w">
              <div class="space10"></div>
              <h1 data-aos="fade-right" data-aos-duration="700">
                Get In <span class="after2">Touch</span>
              </h1>
              <div class="space24"></div>
              <p data-aos="fade-right" data-aos-duration="900">
                We are here to help you feel happy and healthy again through our
                revolutionary healthcare model that's evidence-based,
                supportive, and personalized to you.
              </p>
            </div>
            <div class="space10"></div>

            <div class="contact2-contacts">
              <div
                class="contact2-single"
                data-aos="fade-right"
                data-aos-duration="900"
              >
                <div class="contact2-icon">
                  <img src="assets/img/icons/contact2-icon1.svg" alt="" />
                </div>
                <div class="contact2-icon-hadding">
                  <a href="tel:281-377-7891">281-377-7891</a>
                </div>
              </div>
              <div class="space10"></div>
              <div
                class="contact2-single"
                data-aos="fade-right"
                data-aos-duration="700"
              >
                <div class="contact2-icon">
                  <img src="assets/img/icons/contact2-icon2.svg" alt="" />
                </div>
                <div class="contact2-icon-hadding">
                  <a href="mailto:info@ihawmd.com">info&#64;ihawmd.com</a>
                </div>
              </div>
              <div class="space10"></div>
              <div
                class="contact2-single"
                data-aos="fade-right"
                data-aos-duration="1000"
              >
                <div class="contact2-icon">
                  <img src="assets/img/icons/contact2-icon3.svg" alt="" />
                </div>
                <div class="contact2-icon-hadding">
                  <a href="tel:281-377-7891"
                    >8708 Technology Forest Pl Suite <br />
                    125 -G, The Woodlands, TX 77381</a
                  >
                </div>
              </div>
            </div>
            <div class="space30"></div>
            <div
              class="hadding2-w"
              data-aos="fade-right"
              data-aos-duration="800"
            >
              <p>
                For functional medicine inquiries contact Kim&#64;ihawmd.com
              </p>
              <p>All other inquires please contact Hailey&#64;ihawmd.com</p>
            </div>
          </div>

          <div class="col-lg-6">
            <div
              class="contact2-form-box-all"
              data-aos="zoom-in-up"
              data-aos-duration="800"
            >
              <div class="contact-form">
                <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" class="needs-validation" novalidate>
                  <div class="hadding2">
                    <h1>Leave A Message</h1>
                  </div>
                  <div class="sapce24"></div>
                  <div class="contact-inputs">
                    <div class="contact-input">
                      <div class="contact-input-signle">
                        <input
                          type="text"
                          placeholder="First Name*"
                          formControlName="firstName"
                          [class.is-invalid]="isInvalid('firstName')"
                          [class.is-valid]="isValid('firstName')"
                        />
                             <div
                          class="invalid-feedback">
                          First Name is required.
                        </div>
                        <input
                          type="text"
                          placeholder="Last Name*"
                          formControlName="lastName"
                          [class.is-invalid]="isInvalid('lastName')"
                          [class.is-valid]="isValid('lastName')"
                        />
                        <div class="invalid-feedback" >
                          Last Name is required.
                        </div>
                      </div>
                      <div class="contact-input-signle contact-input-signle1">
                        <input
                          type="email"
                          placeholder="Email Address*"
                          formControlName="email"
                          [class.is-invalid]="isInvalid('email')"
                          [class.is-valid]="isValid('email')"
                        />
                        <div class="invalid-feedback">Please provide a valid email address.</div>
                      </div>
                      <div class="contact-input-signle contact-input-signle1">
                        <select
                          class="form-select wide"
                          formControlName="appointmentType"
                          [class.is-invalid]="isInvalid('appointmentType')"
                          [class.is-valid]="isValid('appointmentType')"
                        >
                          <option value="">Appointment Type*</option>
                          <option value="option1">Option 1</option>
                          <option value="option2">Option 2</option>
                        </select>
                        <div
                          class="invalid-feedback">
                          Please select an appointment type.
                        </div>
                      </div>

                      <div class="contact-input-signle">
                        <textarea
                          cols="30"
                          rows="3"
                          placeholder="Your Message*"
                          formControlName="message"
                          [class.is-invalid]="isInvalid('message')"
                          [class.is-valid]="isValid('message')"
                        ></textarea>
                        <div
                          class="invalid-feedback">
                          Message is required.
                        </div>
                      </div>
                      <div class="space30"></div>
                      <button class="button2" type="submit">
                        Send Message
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class ContactComponent {
  contactForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.contactForm = this.fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      appointmentType: ['', Validators.required],
      message: ['', Validators.required],
    });
  }

  isInvalid(controlName: string): boolean {
    const control = this.contactForm.get(controlName);
    return !!(control && control.invalid && (control.dirty || control.touched));
  }

  isValid(controlName: string): boolean {
    const control = this.contactForm.get(controlName);
    return !!(control && control.valid && (control.dirty || control.touched));
  }

  onSubmit() {
    if (this.contactForm.valid) {
      console.log('Form Submitted:', this.contactForm.value);
      this.contactForm.reset({
      firstName: '',
      lastName: '',
      email: '',
      appointmentType: '', 
      message: ''
    });
    } else {
      this.contactForm.markAllAsTouched();
    }
  }
}
