//html
<div class="gym-manager-container">
    <div class="back-button">
      <button class="btn btn-link" (click)="goBack()">
        <i class="bi bi-arrow-left-circle"></i>Back
      </button>
    </div>
    <div class="content">
      <div class="header">
        <h1>Search Users</h1>
      </div>
  
      <input type="text" class="form-control mb-3" placeholder="Search User Types" [(ngModel)]="searchCriteria" (ngModelChange)="filterUsers()">
  
      <div class="table-responsive">
        <table class="table table-hover table-centered">
          <thead class="thead-light">
            <tr>
              <th>User ID</th>
              <th>Name</th>
              <th>Surname</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let user of filteredUsers">
              <td>{{ user.user_ID }}</td>
              <td>{{ user.name }}</td>
              <td>{{ user.surname }}</td>
              <td>
                <button class="btn btn-link" (click)="openModal(user)">
                  <i class="fa fa-eye"></i> View
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  
    <div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content" style="text-align: center;">
          <div class="modal-header">
            <h5 class="modal-title" id="userModalLabel"><strong>User Details</strong></h5>
          </div>
          <div class="modal-body">
            <p><strong>User ID:</strong> {{ selectedUser?.user_ID }}</p>
            <p><strong>Name:</strong> {{ selectedUser?.name }}</p>
            <p><strong>Surname:</strong> {{ selectedUser?.surname }}</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" (click)="closeModal()">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
//TS
import { CommonModule } from '@angular/common';
import { Observable } from 'rxjs';
import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { Router, RouterLink } from '@angular/router';
import { UserService } from '../Services/userprofile.service';
import { UserViewModel } from '../shared/search-user';
import { Location } from '@angular/common';
declare var $: any;

@Component({
  selector: 'app-member-manager',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, FormsModule, RouterLink],
  templateUrl: './member-manager.component.html',
  styleUrl: './member-manager.component.css'
})
export class MemberManagerComponent implements OnInit {
  searchCriteria: string = '';
  users: UserViewModel[] = [];
  filteredUsers: UserViewModel[] = [];
  selectedUser: UserViewModel | null = null;

  constructor(private router: Router, private userService: UserService, private location: Location) { }

  ngOnInit(): void {
    this.loadUsers();
  }

  loadUsers(): void {
    this.userService.searchUsers('').subscribe(users => {
      this.users = users;
      this.filteredUsers = users;
    });
  }

  filterUsers(): void {
    const term = this.searchCriteria.toLowerCase();
    if (!term) {
      this.filteredUsers = this.users;
    } else {
      this.filteredUsers = this.users.filter(user =>
        user.user_ID.toString().includes(term) ||
        user.name.toLowerCase().includes(term) ||
        user.surname.toLowerCase().includes(term)
      );
    }
  }

  openModal(user: UserViewModel): void {
    this.selectedUser = user;
    $('#userModal').modal('show');
  }

  closeModal(): void {
    $('#userModal').modal('hide');
  }

  goBack(): void {
    this.location.back();
  }
}

//css
.gym-manager-container {
  padding: 20px;
}

.back-button {
  margin-bottom: 20px;
}

.content {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 5px;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.table-centered thead th, 
.table-centered tbody td {
  text-align: center;
}

.table-hover tbody tr:hover {
  background-color: #f1f1f1;
}

.modal-dialog {
  max-width: 400px;
  margin: 1.75rem auto;
}

.modal-content {
  text-align: center;
  padding: 20px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-body p {
  margin-bottom: 10px;
}