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

@Component({
  selector: 'app-contact',
    host: { 'app-contact': 'app-single-contact6' },
  imports: [ CommonModule, ReactiveFormsModule],
  template: `
    <div class="contact6 sp3" id="contact" style="background-color: #ECF5F6;">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="hadding6">
              <h1 data-aos="fade-right" data-aos-duration="800">
                Contact us now for a free consulation for today.
              </h1>
              <div class="space16"></div>
              <p data-aos="fade-right" data-aos-duration="1000">
                Get in touch with our experienced immigration lawyers today for
                personalized support. Get fast results with & best expert team.
              </p>
            </div>

            <div class="space16"></div>
            <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" class="needs-validation" novalidate>
              <div
                class="contact6-form"
                data-aos="fade-right"
                data-aos-duration="800"
              >
                <div class="row">
                  <div class="col-lg-6">
                    <div class="contact6-input">
                     <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>
                    </div>
                  </div>
                  <div class="col-lg-6">
                    <div class="contact6-input">
                     <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>

                  <div class="col-lg-6">
                    <div class="contact6-input">
                       <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>
                  <div class="col-lg-6">
                    <div class="contact6-input">
                       <input type="number" placeholder="Phone Number"  formControlName="phoneNumber"
                          [class.is-invalid]="isInvalid('phoneNumber')"
                          [class.is-valid]="isValid('phoneNumber')"/>
                          <div class="invalid-feedback" >
                          Phone Number is required.
                        </div>
                    </div>
                  </div>

                  <div class="col-lg-12">
                    <div class="contact6-input">
                     
                          <select class="form-select wide selet6"  formControlName="serviceType"
                          [class.is-invalid]="isInvalid('serviceType')"
                          [class.is-valid]="isValid('serviceType')">
                        <option value="">Are you a new client?</option>

                        <option value="option1">option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                      </select>
                      <div
                          class="invalid-feedback">
                          Please select an service type.
                        </div>
                    </div>
                  </div>

                  <div class="col-lg-12">
                    <div class="contact6-input">
                      <textarea
                        cols="30"
                        rows="3"
                        placeholder="How can we help you?"
                        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
                      class=""
                      data-aos="fade-right"
                      data-aos-duration="1000"
                    >
                      <button type="submit"  class="theme-btn7">Submit Now</button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>

          <div class="col-lg-6">
            <div
              class="contact6-img img100 img5"
              data-aos="zoom-out"
              data-aos-duration="800"
            >
              <img src="assets/img/image/contact6-image.png" alt="" />
            </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]],
      phoneNumber : ['', Validators.required],
      serviceType: ['', 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: '',
      phoneNumber : '',
      serviceType: '', 
      message: ''
    });
    } else {
      this.contactForm.markAllAsTouched();
    }
  }
}
