<div class="container">

  <app-menu ></app-menu>

  <div *ngIf="false" class="row mb-2 mt-2 text-center">
    <div class="col-md-4"></div>
    <div class="col-md-4">
      <h5>Professor Management Portal</h5>
      <small *ngIf="titleAction$ | async as title">{{ title }}</small>
    </div>
    <div class="col-md-4"></div>
  </div>

  <!-- Navbar -->
  <nav *ngIf="false" class="navbar navbar-expand-md breadcrumb">
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <div class="nav nav-pills">
        <a
          class="nav-item nav-link active ml-1"
          (click)="changeTitle('Professors')"
          data-bs-toggle="tab"
          href="#professors"
        >
          <i class="fa fa-chalkboard-teacher"></i>
          Professors
        </a>
        <a
          class="nav-item nav-link ml-3"
          (click)="changeTitle('Settings')"
          data-bs-toggle="tab"
          href="#settings"
        >
          <i class="fa fa-cogs"></i>
          Settings
        </a>
        <a
          class="nav-item nav-link move-right mr-3"
          (click)="changeTitle('Profile')"
          data-bs-toggle="tab"
          href="#profile"
        >
          Welcome, {{ loggedInUser.firstName }} {{ loggedInUser.lastName }}
          <i class="fa fa-user"></i>
        </a>
      </div>
    </div>
  </nav>

  <!-- Main Content -->
  <div class="tab-content mt-3" id="myTabContent">
    <!-- Professor Table -->
    <div class="tab-pane fade show active" id="professors">
      <div class="mb-3 float-end">
        <div class="btn-group mr-2">
          <form class="form-inline my-2 my-lg-0 justify-content-center">
            <input
              name="searchTerm"
              #searchTerm="ngModel"
              class="form-control mr-sm-2"
              type="search"
              placeholder="Search professors..."
              ngModel
              (ngModelChange)="searchProfessors(searchTerm.value)"
            />
          </form>
          <button
            *ngIf="isManager"
            type="button"
            class="btn btn-info"
            data-bs-toggle="modal"
            data-bs-target="#addProfessorModal"
          >
            <i class="fa fa-plus"></i> New Professor
          </button>
        </div>
        <div class="btn-group">
          <button
            type="button"
            class="btn btn-info"
            (click)="getProfessors(true)"
          >
            <i class="fas fa-sync" [ngClass]="{ 'fa-spin': refreshing }"></i>
          </button>
        </div>
      </div>
      <table class="table table-hover">
        <thead class="table-borderless">
          <tr class="text-center">
            <th>Photo</th>
            <th>Professor ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr class="text-center" *ngFor="let professor of professors">
            <td (click)="onSelectProfessor(professor)">
              <img
                height="40"
                width="40"
                src="{{ professor?.profileImageUrl }}"
                class="rounded-circle img-fluid img-thumbnail"
                alt=""
              />
            </td>
            <td (click)="onSelectProfessor(professor)">
              {{ professor?.professorId }}
            </td>
            <td (click)="onSelectProfessor(professor)">
              {{ professor?.firstName }}
            </td>
            <td (click)="onSelectProfessor(professor)">
              {{ professor?.lastName }}
            </td>
            <td (click)="onSelectProfessor(professor)">
              {{ professor?.email }}
            </td>
            <td (click)="onSelectProfessor(professor)">
              <span
                class="badge"
                [ngClass]="{
                  'bg-success': professor?.status === WorkingStatus.ACTIVE,
                  'bg-warning': professor?.status === WorkingStatus.ON_LEAVE,
                  'bg-danger': professor?.status === WorkingStatus.RETIRED
                }"
              >
                {{ professor?.status }}
              </span>
            </td>
            <td>
              <div class="btn-group">
                <button
                  class="btn btn-outline-info"
                  (click)="onEditProfessor(professor)"
                >
                  <i class="fas fa-edit"></i>
                </button>
                <button
                  *ngIf="isAdmin"
                  class="btn btn-outline-danger"
                  (click)="onDeleteProfessor(professor)"
                >
                  <i class="fas fa-trash"></i>
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <button
      [hidden]="true"
      type="button"
      id="openProfessorInfo"
      data-bs-toggle="modal"
      data-bs-target="#viewProfessorModal"
    ></button>
    <button
      [hidden]="true"
      type="button"
      id="openProfessorEdit"
      data-bs-toggle="modal"
      data-bs-target="#editProfessorModal"
    ></button>

    <!-- Settings -->
    <div class="tab-pane fade" id="settings">
      <p>Settings content goes here...</p>
    </div>

    <!-- Profile -->
    <div class="tab-pane fade" id="profile">
      <!-- Profile content goes here... -->
    </div>
 

  <!-- Modals -->
  <!-- Add Professor Modal -->
  <div
    *ngIf="isManager"
    class="modal fade"
    id="addProfessorModal"
    tabindex="-1"
    aria-labelledby="addProfessorModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Add New Professor</h5>
          <button
            type="button"
            class="close"
            data-bs-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form
            #newProfessorForm="ngForm"
            (ngSubmit)="onAddNewProfessor(newProfessorForm)"
          >
            <!-- Form Fields for Adding New Professor -->
            <div class="form-group">
              <label for="firstName">First Name</label>
              <input
                type="text"
                id="firstName"
                name="firstName"
                class="form-control"
                ngModel
                required
              />
            </div>
            <div class="form-group">
              <label for="lastName">Last Name</label>
              <input
                type="text"
                id="lastName"
                name="lastName"
                class="form-control"
                ngModel
                required
              />
            </div>
            <div class="form-group">
              <label for="email">Email</label>
              <input
                type="email"
                id="email"
                name="email"
                class="form-control"
                ngModel
                required
              />
            </div>
            <div class="form-group">
              <label for="status">Status</label>
              <select
                id="status"
                name="status"
                class="form-control"
                ngModel
                required
              >
                <option [value]="WorkingStatus.ACTIVE">Active</option>
                <option [value]="WorkingStatus.ON_LEAVE">On Leave</option>
                <option [value]="WorkingStatus.RETIRED">Retired</option>
              </select>
            </div>
            <!-- <div class="form-group">
              <label for="profileImageUrl">Profile Image URL</label>
              <input
                type="url"
                id="profileImageUrl"
                name="profileImageUrl"
                class="form-control"
                ngModel
              />
            </div> -->

            <div class="input-group mb-2">
                <div class="input-group-prepend">
                  <span class="input-group-text">Profile Picture </span>
                </div>
                <div class="custom-file">
                  <input type="file" accept="image/*" name="profileImage"
                         (change)="onProfileImageChange($any($event).target.files)"
                         class="custom-file-input">
                  <label class="custom-file-label">
                    <span>{{profileImageFileName ? profileImageFileName : 'Choose File'}}</span>
                  </label>
                </div>
              </div>



            <button
              type="submit"
              class="btn btn-primary"
              [disabled]="newProfessorForm.invalid"
            >
              Save
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Edit Professor Modal -->
  <div
    class="modal fade"
    id="editProfessorModal"
    tabindex="-1"
    aria-labelledby="editProfessorModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Edit Professor</h5>
          <button
            type="button"
            class="close"
            data-bs-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form
            #editProfessorForm="ngForm"
            (ngSubmit)="onUpdateProfessor(editProfessorForm)"
          >
            <!-- Form Fields for Editing Professor -->
            <div class="form-group">
              <label for="editFirstName">First Name</label>
              <input
                type="text"
                id="editFirstName"
                name="firstName"
                class="form-control"
                [(ngModel)]="selectedProfessor.firstName"
                required
              />
            </div>
            <div class="form-group">
              <label for="editLastName">Last Name</label>
              <input
                type="text"
                id="editLastName"
                name="lastName"
                class="form-control"
                [(ngModel)]="selectedProfessor.lastName"
                required
              />
            </div>
            <div class="form-group">
              <label for="editEmail">Email</label>
              <input
                type="email"
                id="editEmail"
                name="email"
                class="form-control"
                [(ngModel)]="selectedProfessor.email"
                required
              />
            </div>
            <div class="form-group">
              <label for="editStatus">Status</label>
              <select
                id="editStatus"
                name="status"
                class="form-control"
                [(ngModel)]="selectedProfessor.status"
                required
              >
                <option [value]="WorkingStatus.ACTIVE">Active</option>
                <option [value]="WorkingStatus.ON_LEAVE">On Leave</option>
                <option [value]="WorkingStatus.RETIRED">Retired</option>
              </select>
            </div>
            <!-- <div class="form-group">
              <label for="editProfileImageUrl">Profile Image URL</label>
              <input
                type="url"
                id="editProfileImageUrl"
                name="profileImageUrl"
                class="form-control"
                [(ngModel)]="selectedProfessor.profileImageUrl"
              />
            </div> -->

            <div class="input-group mb-2">
                <div class="input-group-prepend">
                  <span class="input-group-text">Profile Picture </span>
                </div>
                <div class="custom-file">
                  <input type="file" accept="image/*" name="profileImage"
                         (change)="onProfileImageChange($any($event).target.files)"
                         class="custom-file-input" [disabled]="!isManager">
                  <label class="custom-file-label">
                    <span>{{profileImageFileName ? profileImageFileName : 'Choose File'}}</span>
                  </label>
                </div>
              </div>


            <button
              type="submit"
              class="btn btn-primary"
              [disabled]="editProfessorForm.invalid"
            >
              Save changes
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>


   <!-- profile image change form -->
   <form enctype="multipart/form-data" style="display:none;">
    <input type="file"
           (change)="onProfileImageChange($any($event).target.files); onUpdateProfileImage()"
           name="profile-image-input" id="profile-image-input" placeholder="file" accept="image/*"/>
  </form>

  </div>

  <!-- Modal User Info -->
  <div
    *ngIf="selectedProfessor"
    class="modal fade bd-example-modal-lg"
    id="viewProfessorModal"
    tabindex="-1"
    role="dialog"
    aria-labelledby=""
    aria-hidden="true"
  >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title text-center" id="exampleModalLongTitle">
            {{ selectedProfessor.firstName || "First Name" }}
            {{ selectedProfessor.lastName || "Last Name" }}
          </h5>
          <button
            type="button"
            class="close"
            data-bs-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div>
            <div class="card">
              <div class="card-body">
                <div class="row">
                  <div class="col-12 col-sm-auto">
                    <div class="mx-auto" style="width: 120px">
                      <div
                        class="d-flex justify-content-center align-items-center rounded"
                      >
                        <img
                          class="rounded"
                          height="120"
                          width="120"
                          [src]="
                            selectedProfessor.profileImageUrl ||
                            'default-image-url'
                          "
                          alt="{{ selectedProfessor.firstName || 'Professor' }}"
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    class="col d-flex flex-column flex-sm-row justify-content-between"
                  >
                    <div class="text-center text-sm-left mb-sm-0">
                      <h6 class="pt-sm-2 pb-1 mb-0 text-nowrap">
                        {{ selectedProfessor.firstName || "First Name" }}
                        {{ selectedProfessor.lastName || "Last Name" }}
                      </h6>
                      <p class="mb-1">
                        {{ selectedProfessor.email || "Email not available" }}
                      </p>
                      <div>
                        Status:
                        <span
                          class="badge"
                          [ngClass]="{
                            'bg-success': selectedProfessor.status === 'ACTIVE',
                            'bg-warning':
                              selectedProfessor.status === 'ON_LEAVE',
                            'bg-danger': selectedProfessor.status === 'RETIRED'
                          }"
                        >
                          {{
                            selectedProfessor.status === "ACTIVE"
                              ? "Active"
                              : selectedProfessor.status === "ON_LEAVE"
                              ? "On Leave"
                              : "Retired"
                          }}
                        </span>
                      </div>
                      <div
                        *ngIf="selectedProfessor.joinDate"
                        class="text-muted"
                      >
                        <small
                          >Joined
                          {{
                            selectedProfessor.joinDate | date : "medium"
                          }}</small
                        >
                      </div>
                    </div>
                    <div class="text-center text-sm-right">
                      <div class="text-muted">
                        <small
                          >Department:
                          {{
                            selectedProfessor.department || "Not provided"
                          }}</small
                        ><br />
                        <small
                          >Position:
                          {{
                            selectedProfessor.position || "Not provided"
                          }}</small
                        ><br />
                        <small
                          >Office Location:
                          {{
                            selectedProfessor.officeLocation || "Not provided"
                          }}</small
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <ul class="list-group list-group-flush">
                <li class="list-group-item">
                  <i class="fa fa-id-badge float-end"></i
                  >{{ selectedProfessor.professorId || "ID not available" }}
                </li>
                <li class="list-group-item">
                  <i class="fa fa-envelope float-end"></i
                  >{{ selectedProfessor.email || "Email not available" }}
                </li>
                <li class="list-group-item">
                  <i class="fas fa-shield-alt float-end"></i
                  >{{ selectedProfessor.status || "Status not available" }}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
