import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';

@Component({
  selector: 'comp2-component',
  templateUrl: './comp2.component.html',
  styleUrls: ['./comp2.component.css']
})
export class SecondComponent implements OnInit {
  hotelForm: FormGroup | undefined;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.hotelForm = this.formBuilder.group({
      hotel: this.formBuilder.group({
        name: ['', Validators.required],
        location: ['', Validators.required],
        hotelOwner: ['', Validators.required],
        telNumber: ['', Validators.required]
      }),
      contracts: this.formBuilder.array([]),
      rooms: this.formBuilder.array([])
    });
  }

  get contracts(): FormArray | null {
    return this.hotelForm?.get('contracts') as FormArray;
  }
  
  get rooms(): FormArray | null {
    return this.hotelForm?.get('rooms') as FormArray;
  }
  

  addContract(): void {
    this.contracts.push(this.formBuilder.group({
      startDate: ['', Validators.required],
      endDate: ['', Validators.required],
      markup: ['', Validators.required]
    }));
  }

  addRoom(): void {
    this.rooms.push(this.formBuilder.group({
      typeName: ['', Validators.required],
      price: ['', Validators.required],
      maxNoOfPeople: ['', Validators.required],
      noOfRooms: ['', Validators.required]
    }));
  }

  removeRoom(index: number): void {
    this.rooms.removeAt(index);
  }

  onSubmit(): void {
    if (this.hotelForm && this.hotelForm.valid) {
      console.log(this.hotelForm.value);
      // You can perform further actions here, such as submitting the form data to a server.
    }
  }
  
}




<form formGroup="hotelForm" (ngSubmit)="onSubmit()">
    <!-- Hotel Information-->
    <div formGroupName="hotel">
      <div class="form-group">
        <label for="name">Hotel Name</label>
        <input type="text" class="form-control" id="name" formControlName="name" placeholder="Enter hotel name">
      </div>
      <div class="form-group">
        <label for="location">Location</label>
        <input type="text" class="form-control" id="location" formControlName="location" placeholder="Enter location">
      </div>
      <div class="form-group">
        <label for="hotelOwner">Hotel Owner</label>
        <input type="text" class="form-control" id="hotelOwner" formControlName="hotelOwner" placeholder="Enter hotel owner">
      </div>
      <div class="form-group">
        <label for="telNumber">Telephone Number</label>
        <input type="text" class="form-control" id="telNumber" formControlName="telNumber" placeholder="Enter telephone number">
      </div>
    </div>
  
    <!-- Contracts -->
    <div formArrayName="contracts">
        <div *ngFor="let contract of contracts.controls; let i = index" formGroupName="{{i}}">
            <h4>Contract {{ i + 1 }}</h4>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="startDate">Start Date</label>
            <input type="text" class="form-control" id="startDate" formControlName="startDate" placeholder="Select start date">
          </div>
          <div class="form-group col-md-6">
            <label for="endDate">End Date</label>
            <input type="text" class="form-control" id="endDate" formControlName="endDate" placeholder="Select end date">
          </div>
        </div>
        <div class="form-group">
          <label for="markup">Markup</label>
          <input type="text" class="form-control" id="markup" formControlName="markup" placeholder="Enter markup">
        </div>
      </div>
      <button type="button" class="btn btn-secondary" (click)="addContract()">Add Contract</button>
    </div>
  
    <!-- Rooms -->
    <div formArrayName="rooms">
      <div *ngFor="let room of rooms.controls; let i = index" [formGroupName]="i">
        <h4>Room {{ i + 1 }}</h4>
        <div class="form-group">
          <label for="typeName">Room Type</label>
          <input type="text" class="form-control" id="typeName" formControlName="typeName" placeholder="Enter room type">
        </div>
        <div class="form-group">
          <label for="price">Price</label>
          <input type="text" class="form-control" id="price" formControlName="price" placeholder="Enter price">
        </div>
        <div class="form-group">
          <label for="maxNoOfPeople">Maximum Number of People</label>
          <input type="text" class="form-control" id="maxNoOfPeople" formControlName="maxNoOfPeople" placeholder="Enter maximum number of people">
        </div>
        <div class="form-group">
          <label for="noOfRooms">Number of Rooms</label>
          <input type="text" class="form-control" id="noOfRooms" formControlName="noOfRooms" placeholder="Enter number of rooms">
        </div>
        <button type="button" class="btn btn-danger" (click)="removeRoom(i)">Remove Room</button>
      </div>
      <button type="button" class="btn btn-success" (click)="addRoom()">Add Room</button>
    </div>



  
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>