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


@Component({
  selector: 'app-contact',
    host: { 'app-contact': 'app-contact3' },
  imports: [CommonModule, ReactiveFormsModule],
  template: `
   <div class="contect3 sp3" style="background-color: #EFEFF7;">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 contect3-bg1" style="background-image: url(assets/img/bg/contect3-bg.png); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 52px; border-radius: 10px 0px 0px 10px; background-attachment: fixed;">
                     <div class="contect3-touch-hadding">
                        <div class="hadding3-w">
                            <div class="space10"></div>
                            <h1 data-aos="fade-right" data-aos-duration="700" >Get In <span class="after2">Touch</span></h1> 
                            <div class="space16"></div>
                            <p data-aos="fade-right" data-aos-duration="800">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="contact2-contacts">
                            <div class="contact2-single" data-aos="fade-right" data-aos-duration="700">
                                <div class="contact2-icon">
                                    <img src="assets/img/icons/contact3-icon1.svg" alt="">
                                </div>
                                <div class="contact2-icon-hadding">
                                    <a href="tel:281-377-7891">281-377-7891</a>
                                </div>
                            </div>
                            <div class="contact2-single" data-aos="fade-right" data-aos-duration="900">
                                <div class="contact2-icon">
                                    <img src="assets/img/icons/contact3-icon2.svg" alt="">
                                </div>
                                <div class="contact2-icon-hadding">
                                    <a href="mailto:info@ihawmd.com">info&#64;ihawmd.com</a>
                                </div>
                            </div>
                            <div class="contact2-single" data-aos="fade-right" data-aos-duration="1000">
                                <div class="contact2-icon">
                                    <img src="assets/img/icons/contact3-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="700">
                            <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>
                <div class="col-lg-6" style="background-color: #00092C; padding: 50px; border-radius: 0px 10px 10px 0px;">
                    <div class="contact3-form-box-all">
                        <div class="contact-form">
                         <form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
                             <div class="hadding3-w">
                                 <h1>Leave A Message</h1>
                             </div>
                             <div class="contact-inputs">
                                 <div class="contact-input">
                                     <div class="contact-input-signle contact-input-signle3">
                                         <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 contact-input-signle3">
                                         <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-signle3">
                                         <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 contact-input-signle3">
                                         <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>
                                     <div>
                                        <button type="submit" class="buttonBox2 fifth">Send Message</button>
                                    </div>
                                 </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();
    }
  }
}
