// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//
//  IMPORTS
//
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

// Core Angular Imports
//----------------------------------------------------------

import { Component, OnInit, ViewChild, HostListener } from "@angular/core";

// Custom Imports
//-----------------------------

import { ModalDirective } from "ngx-bootstrap/modal";
import { environment } from "../../../../environments/environment";
import { ApicallService } from "../../../_services/apiCall/apicall.service";
import { HttpClient } from "@angular/common/http";
import { Router } from "@angular/router";
import { Subscription } from "rxjs";


// 3rd Party Libraray Imports
//-----------------------------

import { fromEvent, Observable, Subject } from "rxjs";

import { FormGroupDirective, NgForm } from "@angular/forms";

import { DatePipe } from "@angular/common";
import { WebsocketService } from "../../../_services/websocketSVC/websocket.service";
import { PopupService } from "src/app/_services/popup/services/popup.service";


// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//
//  COMPONENT DECLARATION
//
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

@Component({
  selector: 'app-bays',
  templateUrl: './bays.component.html',
  styleUrls: ['./bays.component.scss']
})
export class BaysComponent implements OnInit {
// Forms
//-------------------------
@ViewChild("ASTF", { static: true }) ASTF: FormGroupDirective;// Add Rooms,Bays form
@ViewChild("USTF", { static: true }) USTF: FormGroupDirective;// Edit Rooms,Bays form

  @ViewChild("roomAddModal", { static: true })
  public roomAddModal: ModalDirective;// Add Rooms,Bays Modal
  @ViewChild("roomEditModal", { static: true })
  public roomEditModal: ModalDirective;// Edit Rooms,Bays Modal

  @ViewChild("addEquipBays", { static: true })
  public addEquipBays: ModalDirective;// Add Equipment into bays

  @ViewChild("deleteBaysRoom", { static: true })
  public deleteBaysRoom: ModalDirective;// Add Equipment into bays
  
//++++++++++++++++++++++++++
// 
// GLOBAL VARIABLES 
//
//++++++++++++++++++++++++++

// IDs
//-------------------------
XBID: number;// BID
FCID: number;// Gym ID
userID: number;// User XID
sldBRIDForShowBays:number// BRID
slotDuration: number;// Duration is scheduling class
// Flags & Switches 
//----------------------------------------------
models: any = {};
searchTerm = ''; // Variable to hold the search term
isActiveDelete :boolean= false;// active delete icon
isActiveAdd :boolean= true;// active add icon
isActiveEdit:boolean= false;// active edit icon
isActiveEditSetting:boolean= false;// active edit icon
showmenu:boolean= false;
isAllSelected :boolean=false;
isRoomActive:boolean=false;
isBayActive:boolean=false;
isBaySelected:boolean=false;
isCategoryCompleted:boolean=false;
isEquipmentCompleted:boolean=false;
isShowEquipmentTemplate:boolean=false;
isSelectAllChecked:boolean=false;
isShowScroll :boolean = false;// scroll icon shows
isShowPagination :boolean = false;// pagination icon 
cardheight: number; // check card height
isActiveDeleteAssets:boolean=false;
isShowPaginationProfile :boolean = false;// scroll icon shows
isShowScrollProfile :boolean = false;// scroll icon shows
isOpenAddSpace:boolean = false;// scroll icon shows
isModalDeleteSpace:boolean = false;// scroll icon shows
isShowAddEquipment:boolean = false;// scroll icon shows
isModalDeleteEquipment:boolean=false;
// Generals
//----------------------------------------------
insType="Room"// type is room or bay
selectedItems: any[] = []; // Store selected items
categoryListForAddBays=[] // stores cat info for add bays
filteredMachines: any[] = [];    // Holds the filtered list of machines
roomname=""// room name
tagname=""// tag name
activeschedule=""
isSldCategoryName=""
FirstName: any;// first name
staffPage: number = 1;// satff page
schedulePage: number = 1;// modal page
schedulePage1: number = 1;// modal page
staffPerPage: number = 4;// staff page 
schedulePerPage: number = 4;// staff page 
sldAsseted:any; // stores the selected values rooms
statType="All"// type pf status
sldBRNumber:number// selecetd Room number
sldGymBRID:number// selecetd gymm brId
capacity:number;// capcity of bays
Name:any;// name of room / bays
sldGroupAssetID=[]
sldType:any=""// type is Bay or Room
activeTab: any = 'All'; // Default active tab
//Arrays
//-----------------------------------------------
selectedTypes: string[] = [];
filteredMachine: any[] = [] // stores the detais of machine
getAllRoomsList=[] // get all rooms and bays list
allClassScheduledList=[]// get all class scheduled
allRoomBaysForAdd=[]// all staff Add list
showallitems=[]// scroll length show all items
sldRoomsBaysList=[]// selecetd room bays list
sldGymBridList=[]// selecetd gym br id
allBaysList=[]// all list of bays
DisplayedStaff=[]
activeBay=[]
activeItem=[]
sldCheckBoxAssetsList=[]// selection checkbox list added
userDetails: any = {};// user details 
apiServer: string = environment.apiUrl; // Server API URL
subscriptions: Array<Subscription> = []; // subscription list 
getAllAssets=[]// stored all assets Equipment
sldAssetId=[]// seleects Assests ID from ceneter card bays
slotDurationList = [];//duration list view
filteredStaff :any[]= []; // Initially, all staff are displayed
filteredBaysRooms=[] // store the data of bays and rooms
filteredBays=[] // store the data of bays and rooms
filteredRooms=[] // store the data of rooms
sldModalID:number;
pageRange: number = 2;
totalPages:number=1 // Assuming there are 20 pages; adjust as needed.
currentPage: number = 1;
itemsPerPage:number=7;
sldEquipmentList=[]// store info 
sldCategoryList:any=[]
selectedMachines= []; // Stores selected machines
categoryListForDropDown = [
  {
    id: 1,
    value: "All",
  },
  {
    id: 2,
    value: "Room",
  },
  {
    id: 3,
    value: "Bay",
  },
];
 // Constructor
//------------------------------------------------------------------------ 


constructor(

  // A. Declarations 
 //--------------------------
 
   private notificationService:PopupService,
     private apiCall: ApicallService,
     private http: HttpClient,
 
     private datePipe: DatePipe,
     private router: Router,
    // private socketSVC: WebsocketService ,// private BP: BreakpointObserver,
    
   ) 

{ 
 
 
}

// Angular LifeCycle 
//----------------------------------------------------
ngOnInit() {
  this.userDetails = JSON.parse(localStorage.getItem("userDetails"));

  this.XBID = this.userDetails.BID;
  this.userID = this.userDetails.XID;
  this.FCID = this.userDetails.FCID;
  this.chooseStateType("All")
  this.getAllRooms("All")



  // Add Bays Status By Using Socket
//-------------------------------------------------------------

// this.socketSVC.addBaysStatus("addbays-" +this.XBID).subscribe((res: any) => {
//   console.log(res);
//   if (res.Status == "Success") {
//     if(this.statType=="All"){
//       this.getAllRooms("All")
//     }
//  else if(this.statType=="Bay"){
//   this.getAllRooms("Bay")
//  }
//  else{
//   this.getAllRooms("Room")
//  }
//     this.allRoomBaysForAdd=[]

   
//   }
// });

  // Update Bays Bays Status By Using Socket
//-------------------------------------------------------------

// this.socketSVC.updateBaysStatus("UpdateBays-" +this.XBID).subscribe((res: any) => {
//   console.log(res);
//   if (res.Status == "Success") {

//  // Edit Rooms/ Bays and socket will execute and give the response
//  // Edit response to getAllRoomsList array
//  console.log(this.getAllRoomsList);
//    for (const user of this.getAllRoomsList) {
//     if (res.BRInfo.GymBRID == user.GymBRID) {
//         console.log("Eneter into the conditions");
//         this.isActiveEdit=false;
//         this.isActiveDelete=false
//         this.isActiveEditSetting=false
//         this.isActiveAdd=true
//         this.allRoomBaysForAdd=[]

       
//         user.Name=res.BRInfo.Name
//         user.Tag=res.BRInfo.Tag
//         user.BRType=res.BRInfo.BRType
//         user.BRNumber=res.BRInfo.BRNumber
//         user.GymBRID=res.BRInfo.GymBRID
//         user.SpaceTypeID=res.BRInfo.SpaceTypeID
      
//        // this.getAllRoomsList.unshift(test)
   
//         this.selectBaysRoom(res.BRInfo);
       
//     }
//    }
//   }
// });

// deletestaff Socket
//-------------------------------------------------------------

// this.socketSVC.getdeletespace("deletespace-" +this.XBID).subscribe((res: any) => {
//   console.log("hi");
//   console.log(res);
//   if (res.Status === "Success") {
      
//    this.refreshCard();
   
//   }
// });


// Unassign Socket
//-------------------------------------------------------------

// this.socketSVC.getUnAssignBays("UnAssignBays-" +this.XBID).subscribe((res: any) => {
//   console.log("UnAssignBays");
//   console.log(res);
//   if (res.Status === "Success") {
      
//    this.refreshCard();
//    this.getAllAssetsForBays()
//    this.getSlotDuration()
//   }
// });


}

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//
//  METHODS
//
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

// ------------------ Mouse Events and Browser Events End Here------------
//-------------------------------------------------------------------------
//-------------------------------------------------------------------------
//-------------------------------------------------------------------------




  /**
   * @method method
   * @name getSlotDuration
   * @description Get Slot Durations
   */

  getSlotDuration() {
    this.slotDurationList = [];

   // -----------------------------------------------------------
   // API Call getslotduration

    const url = this.apiServer + "resource/getslotduration";
    this.apiCall.makeGetApiCall(url).then((res: any) => {
      console.log(res);
      if (res.length > 0) {
        this.slotDurationList = res;
      }
    });
  }

/**
   * @method function
   * @name getAllRooms
   * @description GET API 
*/

getAllRooms(val){
  this.getAllRoomsList=[]
  this.showallitems=[]
  this.staffPage=1
// -----------------------------------------------------------------------------
// API Call getfcstaffwithadminandcoadmin

const url =this.apiServer +"resource/getspaceinfo/" + this.XBID + "/" + val;

this.apiCall.makeGetApiCall(url).then((res: any) => {
  console.log(res);

// -----------------------------------------------------------------------------
// response length is greater than 0
// Call selectStaff method
  if (res.length > 0) {
    this.getAllRoomsList=res;
    this.filteredStaff = res;
    this.selectBaysRoom(res[0])
    this.showallitems=res;
    
  }
});

}




 /**
   * @method function
   * @name filterStaff
   * @description   Method to filter staff list based on search term
*/ 
filterStaff() {
  const query = this.searchTerm.toLowerCase();
  this.filteredStaff = this.getAllRoomsList.filter(staff =>
    staff.Name.toLowerCase().includes(query) ||
    staff.Tag.toLowerCase().includes(query)
  );

  // Preserve the checked state of each item
  this.filteredStaff.forEach(staff => {
    // Ensure AssetID is unique for each staff member
    const selected = this.sldRoomsBaysList.some(
      value => value.GymBRID === staff.GymBRID
    );
    staff.checked = selected;
  });
}


/**
   * @method function
   * @name selectBaysRoom
   * @HttpMethod GET
   * @description Get Selected BAys and Rooms Details
*/

selectBaysRoom(values) {
  console.log(values)
  this.loadData();
this.sldType=values.SpaceTypeID; 
this.sldBRNumber=values.BRNumber;
this.sldBRIDForShowBays=values.GymBRID
this.sldGymBRID=values.GymBRID;
this.allClassScheduledList=[]
this.sldAssetId=[]

this.sldAsseted=[]
this.sldAsseted=values
this.isActiveDeleteAssets=false
const date = this.datePipe.transform(new Date(), "yyyy-MM-dd");
// -----------------------------------------------------------------------------
// API Call getfcstaffwithadminandcoadmin
//this.sldRoomsBaysList[0].SpaceTypeID==2
if(values.SpaceTypeID!=2){
  this.isActiveEditSetting=false
  this.allBaysList=[]
  this.filteredBaysRooms=[]
  const url =this.apiServer +"resource/getbayssessionprofile/" + this.XBID + "/"+ values.GymBRID + "/" + date;
  this.schedulePage=1
  this.schedulePage1=1
  this.apiCall.makeGetApiCall(url).then((res: any) => {
    console.log(res);
  
  // -----------------------------------------------------------------------------
  // response length is greater than 0
  // Call selectStaff method
    if (res.length > 0) {
      
  this.allClassScheduledList=res;
  this.loadData()
    }
  });
}
else{
  this.isActiveEditSetting=false
  this.allClassScheduledList=[]
   this.getAllAssetsForBays()
}

 
}
/**
   * @method function
   * @name onCheckRoomsBays
   * @description CheckBox selecetion is single selection
*/

// onCheckRoomsBays(values,event){
//   console.log(values)
//   const checked = event.target.checked;

   
//    // Handle adding/removing the message from selected items
//    const deleteForFolderMessage = {
//      sldAssetId: values.sldAssetId,
//      Source: values.Source,
//    };

//   if(checked){
//     this.sldRoomsBaysList.push(values)
//     this.sldGymBridList.push(values.AssetID)
//     this.sldGymBRID=values.AssetID;
 
    
//   }

//   else{
//     const k = this.sldRoomsBaysList.findIndex(
//       (std) => std.AssetID == values.AssetID
//     );
//     this.sldRoomsBaysList.splice(k, 1);

//     const j = this.sldGymBridList.findIndex(
//       (stds) => stds.AssetID == values.AssetID
//     );
//     this.sldGymBridList.splice(j, 1);

//   }
//   console.log( this.sldRoomsBaysList)
//   //------------------------------------------------------------
//   // check the length and enables icons and disable icons
//   //------------------------------------------------------------

//   if(this.sldRoomsBaysList.length >1){
//      this.isActiveAdd=false;
//     this.isActiveDelete=true;
//     this.isActiveEdit=false
//    // this.isActiveEditSetting=false
//   }
//   else if(this.sldRoomsBaysList.length==1 && this.sldRoomsBaysList[0].SpaceTypeID==2){
//     this.isActiveAdd=false;
//     this.isActiveDelete=true;
//     this.isActiveEdit=true
//   //  this.isActiveEditSetting=true
//   }
//   else if(this.sldRoomsBaysList.length==1 && this.sldRoomsBaysList[0].SpaceTypeID!=2){
//     this.isActiveAdd=false;
//     this.isActiveDelete=true;
//     this.isActiveEdit=true
//    // this.isActiveEditSetting=false
//   }
//   else{
//     this.isActiveAdd=true;
//     this.isActiveDelete=false;
//     this.isActiveEdit=false
//   //  this.isActiveEditSetting=false
  
//   }
// }
// onCheckRoomsBays(values, event) {
//   console.log(values);
//   const checked = event.target.checked;

//   if (checked) {
//     this.sldRoomsBaysList.push(values);
//     this.sldGymBridList.push(values.GymBRID);
//     this.sldGymBRID = values.GymBRID;
//   } else {
//     this.sldRoomsBaysList = this.sldRoomsBaysList.filter(
//       (item) => item.GymBRID !== values.GymBRID
//     );
//     this.sldGymBridList = this.sldGymBridList.filter(
//       (id) => id !== values.GymBRID
//     );
//   }

//   console.log(this.sldRoomsBaysList);

//   //Ensure icons update correctly when unchecking
//   this.isActiveAdd = this.sldRoomsBaysList.length === 0;
//   this.isActiveDelete = this.sldRoomsBaysList.length > 0;
//   this.isActiveEdit = this.sldRoomsBaysList.length === 1;
// }

onCheckRoomsBays(values, event) {
  console.log(values);
  const checked = event.target.checked;

  //  If it's a Room, uncheck it immediately and return
  if (values.type === "Room") {
    event.target.checked = false;
    return;
  }

  if (checked) {
    this.sldRoomsBaysList.push(values);
    this.sldGymBridList.push(values.GymBRID);
    console.log(this.sldRoomsBaysList);
    console.log(this.sldGymBridList);
    
    
  } else {
    this.sldRoomsBaysList = this.sldRoomsBaysList.filter(
      (value) => value.GymBRID !== values.GymBRID
    );
    this.sldGymBridList = this.sldGymBridList.filter(
      (id) => id !== values.GymBRID
    );
  }

  console.log("Selected List:", this.sldRoomsBaysList);

  //  Check if at least one Bay is selected
  this.isBaySelected = this.sldRoomsBaysList.length > 0;

  //  Update icon states
  this.isActiveDelete = this.isBaySelected;
  this.isActiveEdit = this.isBaySelected && this.sldRoomsBaysList.length === 1;

  console.log("Delete Active:", this.isActiveDelete);
  console.log("Edit Active:", this.isActiveEdit);
}






/**
   * @method function
   * @name oncheckEquiptForDeleteAssets
   * @description Selecetion CheckBox Assets
   * Checekbox
*/


 
// oncheckEquiptForDeleteAssets(value, event) {
//   console.log(value);
//   const checked = event.target.checked;
  
//   // Update the checked property of the individual message
//   value.checked = checked;
//   console.log(value.checked);
//   const seledtedData = this.DisplayedStaff.filter((value) => value.sldAssetId == 2);
  
//   if (checked) {
//     // Add AssetID if checked
//     (!this.sldAssetId.includes(value.AssetID)) 
//       this.sldAssetId.push(value.AssetID);
//     this.sldAssetId.push(value)
//     this.sldRoomsBaysList = seledtedData.map((value) => ({
//       BID: value.BID,
//       AssetID: value.AssetID,
//       EquipCatTypeID:value .EquipCatTypeID,
//       CategoryName: value.CategoryName,
//       ModelName:value.ModelName,
//       AssetTag:value.AssetTag,
//       AssetSerialNo:value.AssetSerialNo

//     })); 
    
//   }
//   // Check if all checkboxes are selected
//   const allSelected = this.DisplayedStaff
//   .filter((valu) => valu.AssetID == 2)
//   .every((valu) => valu.checked || valu.AssetID === valu.AssetID);
// this.isSelectAllChecked = allSelected;
// this.sldAssetId.push(value.MessageTempltID)
// // Update button states
// if (this.sldRoomsBaysList.length === 1) {
//   this.isActiveEditSetting = true;
//   this.isActiveDeleteAssets = true;
// } else {
//   this.isActiveEditSetting = false;
//   this.isActiveDeleteAssets = true;
// }
//  {
//     // Remove from selected list
//    // this.Content = "";
//    // this.subject = "";
//     const index1 = this.sldAssetId.findIndex((obj) => obj === value.AssetID);
//     this.sldAssetId.splice(index1, 1);

//     this.sldAssetId=[]

//     const index = this.sldRoomsBaysList.findIndex((obj) => obj.AssetID === value.AssetID);
//     if (index !== -1) {
//       this.sldRoomsBaysList.splice(index, 1);
//     }
    
//     // Uncheck Select All if any checkbox is deselected
//     this.isSelectAllChecked = false;

//     // Update button states
//     if (this.sldRoomsBaysList.length === 1) {
//       this.isActiveEditSetting = true;
//       this.isActiveDeleteAssets = true;
//     } else if (this.sldRoomsBaysList.length === 0) {
//       this.isActiveEditSetting = false;
//       this.isActiveDeleteAssets = false;
//     } else {
//       this.isActiveEditSetting = false;
//       this.isActiveDeleteAssets = true;
//     }
//   }
//    console.log(this.sldRoomsBaysList);
  

//   console.log( this.sldAssetId);
// }
oncheckEquiptForDeleteAssets(value, event) {
  console.log(value);
  const checked = event.target.checked;
  

  // Update the checked property of the individual value
  value.checked = checked;
  console.log(value.checked);

  if (checked) {
    // Add AssetID if checked
    if (!this.sldAssetId.includes(value.AssetID)) {
      this.sldAssetId.push(value.AssetID);
    }

    // Add the selected asset to `sldRoomsBaysList` if not already included
    if (!this.sldGroupAssetID.some(item => item.AssetID === value.AssetID)) {
      this.sldGroupAssetID.push({
        BID: value.BID,
        AssetID: value.AssetID,
        EquipCatTypeID: value.EquipCatTypeID,
        CategoryName: value.CategoryName,
        ModelName: value.ModelName,
        AssetTag: value.AssetTag,
        AssetSerialNo: value.AssetSerialNo,
      });
    }
  } else {
    // Remove from selected lists when unchecked
    this.sldAssetId = this.sldAssetId.filter(id => id !== value.AssetID);
    this.sldGroupAssetID = this.sldGroupAssetID.filter(value => value.AssetID !== value.AssetID);
  }

  // Check if all checkboxes are selected
  this.isSelectAllChecked = this.DisplayedStaff.every(value => value.checked);

  // Update button states
  this.updateIcons();

  console.log("Selected Rooms Bays List:", this.sldGroupAssetID);
  console.log("Selected Asset IDs:", this.sldAssetId);
}


/**
 * @method updateIcons
 * @description Enable/Disable icons based on selected items
 */
updateIcons() {
  // Enable delete icon if at least one checkbox is selected
  this.isActiveDeleteAssets = this.sldAssetId.length > 0;
}


/**
   * ~ onAllCheckMessage
     Select Message For Delete
   * # Method
   * @param(selected value, event)
*/
onAllCheckMessage(event) {
  
  const checked = event.target.checked;

  // Update all checkboxes
  this.DisplayedStaff.forEach((value) => {
    value.checked = checked;
  });

  if (checked) {
    // Add all selected assets to sldRoomsBaysList
    this.sldGroupAssetID = this.DisplayedStaff.map((value) => ({
      BID: value.BID,
      AssetID: value.AssetID,
      EquipCatTypeID: value.EquipCatTypeID,
      CategoryName: value.CategoryName,
      ModelName: value.ModelName,
      AssetTag: value.AssetTag,
      AssetSerialNo: value.AssetSerialNo
    }));

    // Add all AssetIDs to sldAssetId
    this.sldAssetId = this.DisplayedStaff.map((value) => value.AssetID);
  } else {
    // Clear selected lists when unchecked
    this.sldGroupAssetID = [];
    this.sldAssetId = [];
  }

  // Update the state of the "Select All" checkbox
  this.isSelectAllChecked = checked;

  // Ensure UI updates
  this.DisplayedStaff = [...this.DisplayedStaff];

  console.log("isSelectAllChecked:", this.isSelectAllChecked);
  console.log("sldAssetId:", this.sldAssetId);
  console.log("sldRoomsBaysList:", this.sldGroupAssetID);

  
  // Update UI states
  this.updateIcons();
}


/**
 * @method refreshCard
 * @description Reset checkboxes and selected data
 */
refreshCard() {
  setTimeout(() => {
    // Clear selected assets
    this.sldRoomsBaysList = [];
    this.sldAssetId = [];

    // Uncheck all checkboxes
    this.DisplayedStaff.forEach(value => {
      value.checked = false;
    });

    // Ensure "Select All" checkbox is unchecked
    this.isSelectAllChecked = false;

    // Reset UI states
    this.isActiveEditSetting = false;
    this.isActiveDeleteAssets = false;
    this.isActiveAdd = true;

    // Ensure UI updates correctly
    this.DisplayedStaff = [...this.DisplayedStaff]; 

    // Update UI icons
    this.updateIcons();

    console.log("After refresh:", this.DisplayedStaff);
  });
}




/**
   * @method function
   * @name saveBaysRoom
   * @description POST API 
   * based on the type no 1 or 2 like room / bays
   * sending payload capacity and duration null
*/
saveBaysRoom(){
let typeNo;
let baysroomdetails={}
  if(this.insType=="Room"){
    typeNo=1
    baysroomdetails={
      BID:this.XBID,
      Name:this.roomname,
      Tag:this.tagname,
      SpaceTypeID:typeNo,
      SpaceCapacity:null,
      SlotDurationTypeID:null,
    }
  }
  else{
    typeNo=2
    baysroomdetails={
      BID:this.XBID,
      Name:this.roomname,
      Tag:this.tagname,
      SpaceTypeID:typeNo,
      SpaceCapacity:this.capacity,
      SlotDurationTypeID:this.slotDuration,
    }
  }

// call API savespace
// POST API----------------------------------------

  //http://stage.minute.fit/api/resource/savebays
  const url = this.apiServer + "resource/savespace";
  this.allRoomBaysForAdd.push(baysroomdetails)
  //API Call
  //-----------------------------------------------------------
  
     this.apiCall.makePostApiCall(url, baysroomdetails).then((res: any) => {
      console.log(res)
  
      if (res.status === "Success" ) {
        this.closeAddModal() 
        this.getAllRooms("All")
       this.notificationService.showNotification("Success","Successfully Added");
        // this._notification.remove()
        // this._notification.create("success", "Successfully Added", {
        //   Position: "top-right",
        //   Style: "flip bar",
        //   Duration: 3000,
        // });

      }
      else {
        this.allRoomBaysForAdd.push(baysroomdetails)
        this.notificationService.showNotification("Error","Something Went Wrong");
        // this._notification.remove()
        // this._notification.create("danger", "Something Went Wrong", {
        //   Position: "top-right",
        //   Style: "flip bar",
        //   Duration: 3000,
        // });
      }
    });

}
/**
   * @method function
   * @name updateBaysRoom
   * @description POST API updatebrinfo
   * based on the type no 1 or 2 like room / bays
   * sending payload capacity and duration null
*/
updateBaysRoom(){
  let typeNo;
  let baysroomdetails={}
  if(this.insType=="Room"){
    typeNo=1
    baysroomdetails={
      BID:this.XBID,
      GymBRID:this.sldRoomsBaysList[0].GymBRID,
      Name:this.roomname,
      Tag:this.tagname,
      SpaceTypeID:typeNo,
      SpaceCapacity:null,
      BRNumber :this.sldRoomsBaysList[0].BRNumber,
      SlotDurationTypeID:null,
    }
  }
  else{
    typeNo=2
    baysroomdetails={
      BID:this.XBID,
      GymBRID:this.sldRoomsBaysList[0].GymBRID,
      Name:this.roomname,
      Tag:this.tagname,
      SpaceTypeID:typeNo,
      BRNumber :this.sldRoomsBaysList[0].BRNumber,
      SpaceCapacity:this.capacity,
      SlotDurationTypeID:this.slotDuration,
    }
  }

  //http://stage.minute.fit/api/resource/savebays
  const url = this.apiServer + "resource/updatebrinfo";
  this.allRoomBaysForAdd.push(baysroomdetails)

  //API Call
  //-----------------------------------------------------------
  
     this.apiCall.makePostApiCall(url, baysroomdetails).then((res: any) => {
      console.log(res)
  
      if (res.status === "Success" ) {

        this.sldGymBridList=[]
        this.allRoomBaysForAdd=[]
        this.closeAddModal() 
      // this.chooseStateType(this.statType)
       this.getAllRooms("All")
       this.notificationService.showNotification("Success","Successfully Updated");
        // this._notification.remove()
        // this._notification.create("success", "Successfully Updated", {
        //   Position: "top-right",
        //   Style: "flip bar",
        //   Duration: 3000,
        // });
        this.sldGymBRID=null
        this.sldRoomsBaysList=[]
        this.isActiveAdd=true;
        this.isActiveDelete=false;
        this.isActiveEdit=false
        this.isActiveEditSetting=false
      }
      else {
        this.notificationService.showNotification("Error","Something Went Wrong");
        //this.allRoomBaysForAdd.push(baysroomdetails)
        // this._notification.remove()
        // this._notification.create("danger", "Something Went Wrong", {
        //   Position: "top-right",
        //   Style: "flip bar",
        //   Duration: 3000,
        // });
      }
    });

}
/**
   * @method function
   * @name chooseStateType
   * @description chooseStateType type selection from Tab
*/

chooseStateType(val: string) {
  this.activeTab = val;
  console.log("Active Tab:", val);

  let SpaceTypeID;

  // Clear previous selections so they don't persist across tabs
  this.sldRoomsBaysList = [];
  this.sldGymBridList = [];
  this.isActiveDelete = false;
  this.isActiveEdit = false;

  // Reset all checkboxes in the full list (important to prevent checked state persistence)
  this.getAllRoomsList.forEach(staff => staff.checked = false);

  if (val === 'All') {
    // Show all rooms/bays without keeping previous selections
    this.filteredStaff = this.getAllRoomsList.map(staff => ({ ...staff, checked: false })); // Ensure fresh data

    console.log(this.filteredStaff);

    // Always select the first item in "All"
    if (this.filteredStaff.length > 0) {
      const firstItem = this.filteredStaff[0];
      this.activeItem = firstItem.GymBRID;  // Highlight the first item
      this.selectBaysRoom(firstItem); // Update the selected Bay/Room
    }

    this.loadData();
    return;
  }

  if (val === 'Room') {
    SpaceTypeID = 1;
  } else if (val === 'Bay') {
    SpaceTypeID = 2;
  } else {
    this.filteredStaff = this.getAllRoomsList.map(staff => ({ ...staff, checked: false }));
    console.log(this.filteredStaff);
    return;
  }

  // Filter the staff list based on selected type
  this.filteredStaff = this.getAllRoomsList
    .filter(staff => staff.SpaceTypeID === SpaceTypeID)
    .map(staff => ({ ...staff, checked: false })); // Ensure fresh unselected data

  // Automatically select the first Room when switching to "Room" tab
  if (val === 'Room' && this.filteredStaff.length > 0) {
    const firstRoom = this.filteredStaff[0];
    this.activeItem = firstRoom.GymBRID;  // Highlight the first Room
    this.selectBaysRoom(firstRoom);  // Update selection
  }

  // Automatically select the first Bay when switching to "Bay" tab
  if (val === 'Bay' && this.filteredStaff.length > 0) {
    const firstBay = this.filteredStaff[0];
    this.activeBay = firstBay.GymBRID;  // Highlight the first Bay
    this.selectBaysRoom(firstBay);  // Update selection
  }

  console.log("Filtered Staff:", this.filteredStaff);
}





removeFilter(_filter) {
  // Reset the filter to "All" and show all items
 this.statType = 'All';
 this.filteredStaff = this.getAllRoomsList;
 //this.filteredStaff = this.filteredStaff.filter(type => type !== filter);
// this.selectedTypes = this.selectedTypes.filter(t => t !== filter);


}


/**
   * @method function
   * @name showAddModal
   * @description Add Room submit button form submit
*/

showAddModal(){
 this.insType="Bay";
 this.sldRoomsBaysList = []
 this.getSlotDuration()
this.isOpenAddSpace=true
this.isBayActive=true
this.isRoomActive=true
}

closeAddModal(){
  this.isOpenAddSpace=false

}

// Method to reset the form
resetForm(form: NgForm) {
  form.resetForm(); // Reset form to its initial state
  // Reset additional flags or variables if needed
  this.insType="Bay"; // Resetting default values

  this.closeAddModal()
}

/**
   * @method function
   * @name triggerAddContractorSubmit
   * @DEsc Trigger submit while adding contractor
*/

triggerAddContractorSubmit(form) {
  if(form.valid) {
    console.log('Form submitted:', this.models);
    if(this.isActiveEdit==false){
     this.saveBaysRoom()
    }
    if(this.isActiveEdit==true){
     this.updateBaysRoom()
    }
   
   
     // Reset the form after submission
     this.resetForm(form);
  } else {
    console.log('Form is invalid');
  }

}
/**
   * @method function
   * @name activeEditModal
   * @description Add Room submit button form submit
*/

activeEditModal() {
  // Reset fields to default or empty values before setting new values
  this.tagname = '';
  this.roomname = '';
  this.insType = '';
  this.capacity = null;
  this.slotDuration = null;
  
  // Proceed with logic to add a new room or bay
  if (this.sldRoomsBaysList.length > 0) {
    this.tagname = this.sldRoomsBaysList[0].Tag;
    this.roomname = this.sldRoomsBaysList[0].Name;

    if (this.sldRoomsBaysList[0].SpaceTypeID == 1) {
      this.insType = "Room";
      this.isRoomActive = true;  // Track Room is active
      this.isBayActive = false;  // Deactivate Bay
    } else {
      this.insType = "Bay";
      this.capacity = this.sldRoomsBaysList[0].SpaceCapacity;
      this.slotDuration = this.sldRoomsBaysList[0].BayDurationType;
      this.isRoomActive = false;  // Deactivate Room
      this.isBayActive = true;    // Activate Bay
    }
  }
  
  this.getSlotDuration();
  this.isOpenAddSpace = true;
  // this.roomEditModal.show();
}



 

 //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  //
  //  SUB- METHODS
  //
  //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


/**
   * @method function
   * @name selectType
   * @description Add Room submit button form submit
*/
selectType(type: string): void {
  if (type === 'Bay') {
    this.insType = 'Bay';
    this.isOpenAddSpace = true;
  } else if (type === 'Room') {
    this.insType = 'Room';
    this.isOpenAddSpace = true;
  }
}


addEquipment(newEquipment) {
  this.filteredStaff.push(newEquipment);  // Add new equipment
}



backtoEquipmentView(){
  this.isShowAddEquipment=false;
  this.sldEquipmentList=[]
  this.isActiveEditSetting=false
  this.isActiveDeleteAssets=false
  this.isCategoryCompleted=true
  this.isEquipmentCompleted=false
  this.isActiveDelete=false
  this.isActiveEdit=false
}
/**
   * @method function
   * @name openActiveDeleteModal(){
   * @description Delete rooms and bays open pop up
*/

openActiveDeleteModal(){
this.isModalDeleteSpace=true
}

/**
   * @method function
   * @name closeDeleteRoomsandBays(){
   * @description Delete rooms and bays modal closed pop up
*/
closeDeleteRoomsandBays(){
  this.isModalDeleteSpace=false
}

/**
   * @method function
   * @name deleteBaysAndRooms()
   * POST API deletespace
*/   

deleteBaysAndRooms(){

  let baysroomdetails={
    GymBRID:this.sldGymBridList.toString(),
  }
  const url = this.apiServer + "resource/deletespace/" + this.XBID;
  //this.allRoomBaysForAdd.push(baysroomdetails)
  //API Call
  //-----------------------------------------------------------
  
     this.apiCall.makePostApiCall(url, baysroomdetails).then((res: any) => {
      console.log(res)
      if (res.status === "Success" ) {
        
        this.notificationService.showNotification("Success","Successfully Deleted");
        this.refreshCard();
        this.closeDeleteRoomsandBays()
        this.sldRoomsBaysList=[]
        this.sldGymBridList=[]
        this.isActiveAdd=true;
        this.isActiveDelete=false;
        this.isActiveEdit=false
        this.isActiveEditSetting=false
        this.allRoomBaysForAdd=[]
      }
      else {
      //  this.allRoomBaysForAdd.push(baysroomdetails)
        this.notificationService.showNotification("Error","Something Went Wrong");
    }
  })
}

/**
   * @method function
   * @name openModalforAddEquip(){
   * @description Add Equipment show Modal for adding into bays
*/
openModalforAddEquip(){
  this.isCategoryCompleted=true;
this.isShowAddEquipment=true;
this.getallequipmentcategoriesforbay()
}
/**
   * @method function
   * @name getAllEquipmentAndAssets(){
   * @description GEt All Equipment and assets number in Add Bays Form
   * GET API
*/
getallequipmentcategoriesforbay(){
  this.isCategoryCompleted=true;
  this.getAllAssets=[]
  const url =this.apiServer +"resource/getallequipmentcategoriesforbay/" + this.XBID + "/" + this.sldGymBRID;

  this.apiCall.makeGetApiCall(url).then((res: any) => {
  console.log(res);
  if(res.length!=0){

    this.getAllAssets=res;


  }

});

}

// Function to go back to the Add Equipment page
// goBack() {
//   this.isAddEquipmentPage = true; // Go back to the Add Equipment page
// }

// Function to handle Add Equipment action
// addEquipment() {
//   console.log("Equipment Added");
// }

goToCategory() {
  this.isCategoryCompleted=false;
  this.isEquipmentCompleted=true
 this.getAllCategoryList()
 console.log("Selected Items:", this.selectedItems)
}

getAllCategoryList(){
  const url = this.apiServer + "resource/getallcategorywiseassetinfoforbay/"  + this.XBID + "/" + this.sldGymBRID;;
  
  const equipCatTypeIDs = this.selectedItems.map(item => item.EquipCatTypeID);
  //API Call
  //-----------------------------------------------------------
  
     this.apiCall.makePostApiCall(url,equipCatTypeIDs).then((res: any) => {
      console.log(res)
      if (res.length!=0) {
      this.categoryListForAddBays=res;
      this.activateCategory(res[0])
      //this.activateCategory(res)
      }
    });
}


activateCategory(value){
console.log(value)
this.isSldCategoryName=value.CategoryName

  // Filter machines based on the selected CategoryName
  this.filteredMachines = this.categoryListForAddBays
  .filter(item => item.CategoryName === value.CategoryName)
  .map(item => item.AssetInfo)
  .reduce((acc, assetArray) => acc.concat(assetArray), []); 
  

console.log(this.filteredMachines)
}



  // Check if the machine is selected
  isSelectedAssets(machine): boolean {
    return this.selectedMachines.some(m => m.AssetID === machine.AssetID);
    
  }

  // Toggle machine selection
  toggleSelectionAssets(machine, value, event) {
    console.log(value);
    console.log(machine);
  
    // Check if variant already exists
    let variantIndex = this.selectedMachines.findIndex(m => m.variantName === machine.VariantName);
  
    if (event.target.checked) {
      const assetObj = {
        assetID: value.AssetID,
        assetSerialNo: value.AssetSerailNo,
        equipCategoryName: value.EquipCategoryName,
      };
  
      if (variantIndex === -1) {
        // If variant does not exist, add it with the selected asset
        this.selectedMachines.push({
          variantName: machine.VariantName,
          assets: [assetObj],
        });
      } else {
        // If variant exists, add only the asset (avoid duplicates)
        let existingVariant = this.selectedMachines[variantIndex];
        let assetExists = existingVariant.assets.some(a => a.assetID === value.AssetID);
        
        if (!assetExists) {
          existingVariant.assets.push(assetObj);
        }
      }
    } else {
      // Remove the asset from the variant's asset list
      if (variantIndex !== -1) {
        let existingVariant = this.selectedMachines[variantIndex];
        existingVariant.assets = existingVariant.assets.filter(a => a.assetID !== value.AssetID);
  
        // If no assets left under variant, remove the variant
        if (existingVariant.assets.length === 0) {
          this.selectedMachines.splice(variantIndex, 1);
        }
      }
    }
  
    console.log('Selected Machines:', this.selectedMachines);
  }

 

  goToprevious(){

  this.isCategoryCompleted=true
  this.isEquipmentCompleted=false
  // this.selectedItems=[]
  
  }

 
  



/**
   * @method function
   * @name selectCheckBoxReservation
   * @description Add and remove Equipment and assets into selecetd Bays
   * Seleect Checbox
*/
selectCheckBoxReservation(value,asset,event){
  console.log(value)
  console.log(asset)
  const checked = event.target.checked;
  const values={
    
    BID:this.XBID,
    AssetID:asset.AssetID,
    GymBRID:this.sldGymBRID,
 
}
 // this.sldCheckBoxAssetsList=[]
  
  if(checked){
    this.sldCheckBoxAssetsList.push(values)
    value.selectedCount = this.countSelectedAssets(value.assettList);
  }
  else{
    const k = this.sldCheckBoxAssetsList.findIndex(
      (std) => std.AssetID === asset.AssetID
    );
    this.sldCheckBoxAssetsList.splice(k, 1);
  }
  console.log(this.sldCheckBoxAssetsList)
}


/**
   * @method function
   * @name UpdateAddEquipToBays(){
   * @description Add and remove Equipment and assets into selecetd Bays
   * POST API
*/

UpdateAddEquipToBays(){


  const url = this.apiServer + "resource/assignassetstobays";
 
 for(const i of this.selectedMachines)
  {
    for(const j of i.assets){
      let updateAdd = {
        BID:this.XBID,
        GymBRID:this.sldGymBRID,
       AssetID:j.assetID,
       }
       this.sldCheckBoxAssetsList.push(updateAdd)
    }
  }

console.log( this.sldCheckBoxAssetsList)
//return;
  //API Call
  //-----------------------------------------------------------
  
     this.apiCall.makePostApiCall(url, this.sldCheckBoxAssetsList).then((res: any) => {
      console.log(res)
      if (res.status === "Success" ) {
        this.isActiveEditSetting=false;
        this.isActiveDeleteAssets=false;
        this.sldGymBridList=[]
        this.selectedMachines=[]
        this.selectedItems=[]
        this.sldRoomsBaysList=[]
        this.sldCheckBoxAssetsList=[]
        this.backtoEquipmentView()
        if(this.statType=="All"){
          this.getAllRooms("All")
        }
     else if(this.statType=="Bay"){
      this.getAllRooms("Bay")
     }
     else{
      this.getAllRooms("Room")
     }
     this.notificationService.showNotification("Success","Equipment successfully added");
     
      }
      else{
        this.notificationService.showNotification("Error","Something Went Wrong");
       
      }
      
    })
}


/**
   * @method function
   * @name getAllAssetsForBays
   * @description Display assets into selecetd Bays
   * GET API getallassetsassignedtobay
*/

getAllAssetsForBays(){
  this.schedulePage=1
  this.schedulePage1=1
  // this.allBaysList=[]
 
  const url =this.apiServer +"resource/getallassetsassignedtobay/" + this.XBID + "/" +this.sldBRIDForShowBays;

  this.apiCall.makeGetApiCall(url).then((res: any) => {
  console.log(res);
  if(res.length!=0){
  this.allBaysList=res;
  this.loadData()
  // this.filteredBaysRooms=res;
  }

});
}





//pagination//

getDisplayIndex(index: number): number {
  return (this.currentPage - 1) * this.itemsPerPage + index + 1;
}
updateDisplayedBaysRooms() {
  this.filteredBaysRooms = [];
  this.itemsPerPage = 7;
  
  const totalItems = this.sldType == 2 ? this.allBaysList.length : this.allClassScheduledList.length;
  const totalPages = Math.ceil(totalItems / this.itemsPerPage);

  // Ensure currentPage is within valid range
  this.currentPage = Math.max(1, Math.min(this.currentPage, totalPages));

  const startIndex = (this.currentPage - 1) * this.itemsPerPage;
  let endIndex = startIndex + this.itemsPerPage;

  // Ensure endIndex does not exceed total items
  endIndex = Math.min(endIndex, totalItems);

  if (this.sldType == 2) {
    this.filteredBaysRooms = this.allBaysList.slice(startIndex, endIndex);
  } else {
    this.filteredBaysRooms = this.allClassScheduledList.slice(startIndex, endIndex);
  }

  console.log("Displaying items from", startIndex, "to", endIndex);
  console.log(this.filteredBaysRooms);
}

  

onPageChangeList(page: number) {
  //if (page === '...') return; // Ignore '...' clicks
  this.currentPage = page;
  this.updateDisplayedBaysRooms();
}


// Pagination navigation

goToPreviousPageList() {
  if (this.currentPage > 1) {
    this.currentPage--;
    this.updateDisplayedBaysRooms();
  }
}

goToNextPageList() {
  if (this.currentPage < this.totalPages) {
    this.currentPage++;
    this.updateDisplayedBaysRooms();
  }
}



getDisplayedPagesList(): (number | string)[] {
  const pages: (number | string)[] = [];
  const total = this.totalPages;
  const current = this.currentPage;
  const range = this.pageRange;

  const startPage = Math.max(2, current - range);
  const endPage = Math.min(total - 1, current + range);

  pages.push(1); // First page
  if (startPage > 2) pages.push('...'); // Ellipsis for skipped pages

  for (let i = startPage; i <= endPage; i++) {
    pages.push(i);
  }

  if (endPage < total - 1) pages.push('...'); // Ellipsis for skipped pages
  if (total > 1) pages.push(total); // Last page

  return pages;
}

/**
   * @method function
   * @name loadData
   * @description Pagination Bays and rooms in card
*/

loadData() {
  // this.isLoading = true; // Start loading
  // setTimeout(() => {
  this.itemsPerPage =7
  if(this.sldType==2){
    this.totalPages = Math.ceil(this.allBaysList.length / this.itemsPerPage);
  }
  else{
    this.totalPages = Math.ceil(this.allClassScheduledList.length / this.itemsPerPage);
  }
  this.updateDisplayedBaysRooms();
  console.log(this.totalPages);
  console.log(this.allBaysList);
  console.log(this.allClassScheduledList);


  // this.isLoading = false; // End loading
// }, 100); // Simulate a delay
}

/**
   * @method function
   * @name deleteAssetsFromBays
   * @description POST API unassignassetsfrombays
   * Delete Assets from Bays
*/
deleteAssetsFromBays(){

  let AssetID={
    AssetID:this.sldAssetId.toString()
  }
  const url = this.apiServer + "resource/unassignassetsfrombays/"+ this.XBID;
 
  //API Call
  //-----------------------------------------------------------
  
     this.apiCall.makePostApiCall(url, AssetID).then((res: any) => {
      console.log(res)
      if (res.status === "Success" ) {
        this.getAllAssetsForBays()
        this.closeDeleteEquipment()
        this.refreshCard()
        this.sldAssetId=[]
        this.isActiveDeleteAssets=true
        this.notificationService.showNotification("Success","Equipment successfully deleted");
        
      }
      else{
        this.sldAssetId=[]
        this.notificationService.showNotification("Error","Something Went Wrong");
        
      }
    });
}
openDeleteEquipment(){
  this.isModalDeleteEquipment=true
}
closeDeleteEquipment(){
  this.isModalDeleteEquipment=false
}

selectQuickAddProduct(value){
  console.log(value)
  this.sldModalID=value.ModelID
  //sldEquipmentList
//sldCategoryList
}







// Check if an item is selected
isSelected(item: any): boolean {
  return this.selectedItems.some((selected) => selected.EquipGrpID === item.EquipGrpID);
}
// Disable items that are already in the bay
isDisabled(item: any): boolean {
  return this.selectedItems.some((selected) => selected.AssetID === item.AssetID);
}

// Toggle selection on checkbox change
toggleSelection(item: any, event?: Event): void {
  if (event) {
    event.stopPropagation(); // Prevent parent div from triggering
  }

  const isChecked = this.isSelected(item);

  if (isChecked) {
    this.selectedItems = this.selectedItems.filter((selected) => selected.EquipGrpID !== item.EquipGrpID);
  } else {
    this.selectedItems.push(item);
  }

  console.log("Selected Items:", this.selectedItems);
}

  // Method to calculate the number of selected assets for a category
  countSelectedAssets(assettList: any[]): number {
    console.log(assettList)
    return assettList.filter(asset => asset.selected).length;
  }






// Function to toggle asset list visibility
toggleAssetsList(index: number) {
  this.sldEquipmentList[index].isExpanded = !this.sldEquipmentList[index].isExpanded;

}





//---------------------------------------------------------------------------------------------------
// END-------------------------------------------------------------------------------------------
}