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


@Component({
  selector: 'app-contact',
   standalone: true, 
    host: { 'app-contact': 'app-single-contact10' },
  imports: [RouterLink, CommonModule, ReactiveFormsModule, NgSelectModule],
  template: `
    <div class="contact9 sp3" id="contact" style="background-color: #1E1E1E;">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 m-auto text-center">
            <div class="hadding9">
              <h1>Get in Touch with Us Today</h1>
            </div>
          </div>
        </div>

        <div class="space60"></div>
        <div
          class="contact-form-all"
          data-aos="zoom-out"
          data-aos-duration="800"
        >
          <div class="row align-items-center">
            <div class="col-lg-7">
              <div class="hadding9">
                <h3>Send Us A Message</h3>
                <div class="space16"></div>
                <p>
                  Our response time is within 30 minutes during business hours
                </p>
              </div>

              <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" class="needs-validation" novalidate>
                <div class="row">
                  <div class="col-lg-6">
                    <div class="contact5-form-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="contact5-form-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="contact5-form-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-6">
                    <div class="contact5-form-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-12">
                    <div class="contact5-form-input">
                      <select class="form-select wide contact5-select"  formControlName="serviceType"
                          [class.is-invalid]="isInvalid('serviceType')"
                          [class.is-valid]="isValid('serviceType')">
                        <option value="">Service Type</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="contact5-form-input">
                      <textarea
                        cols="30"
                        rows="3"
                        placeholder="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="space24"></div>
                    <button type="submit" class="theme-btn12">
                      Send Message
                      <span><i class="fa-solid fa-arrow-right"></i></span>
                    </button>
                  </div>
                </div>
              </form>
            </div>

            <div class="col-lg-5">
              <div class="contact5-boxs contact7-boxs">
                <div class="contact5-icon-box">
                  <div class="contact5-icon">
                    <img src="assets/img/icons/contact5-iocn1.svg" alt="" />
                  </div>
                  <div class="contact5-box-hadding">
                    <h3>Contact us</h3>
                    <div class="space16"></div>
                    <a [routerLink]="[]"
                      >8708 Technology Forest Pl Suite 125 -G, The Woodlands, TX
                      77381</a
                    >
                  </div>
                </div>

                <div class="contact5-icon-box">
                  <div class="contact5-icon">
                    <img src="assets/img/icons/contact5-iocn2.svg" alt="" />
                  </div>
                  <div class="contact5-box-hadding">
                    <h3>Call or text</h3>
                    <div class="space16"></div>
                    <a [routerLink]="[]">123-456-7890</a>
                  </div>
                </div>

                <div class="contact5-icon-box">
                  <div class="contact5-icon">
                    <img src="assets/img/icons/contact5-iocn1.svg" alt="" />
                  </div>
                  <div class="contact5-box-hadding">
                    <h3>Email us today</h3>
                    <div class="space16"></div>
                    <a [routerLink]="[]">info&#64;taxvice.com</a>
                  </div>
                </div>
              </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]],
      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();
    }
  }
}


