<?php
include 'config/dbconnection.php';
include 'config/session.php';

$userId = $_SESSION['login_id'];
$stmt = $conn->prepare("SELECT * FROM users WHERE id = ?");
$stmt->bind_param('i', $userId);
$stmt->execute();
$row = $stmt->get_result()->fetch_assoc();
?>
<div class="pagetitle">
  <h1>Profile</h1>
  <nav>
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="index.php">Home</a></li>
      <li class="breadcrumb-item">Users</li>
      <li class="breadcrumb-item active">Profile</li>
    </ol>
  </nav>
</div><!-- End Page Title -->

<section class="section profile">
  <div class="row">
    <div class="col-xl-4">

      <div class="card">
        <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">
          <?php
          if ($row['profile_picture']) {
            $profile_picture = $row['profile_picture'];
            $profile_picture_path = 'assets/img/profile/users/' . $profile_picture;

            if (file_exists($profile_picture_path)) {
              echo '<img src="' . $profile_picture_path . '" alt="Profile Picture" class="rounded-circle" style="max-width: 100px;">';
            }
          } else { ?>
            <img src="assets/img/user.png" alt="Profile" class="rounded-circle">
          <?php } ?>
          <h2 class="text-truncate"><?php echo $row['name']; ?></h2>
          <h3>Student</h3>
        </div>
      </div>

    </div>

    <div class="col-xl-8">

      <div class="card">
        <div class="card-body pt-3">
          <!-- Bordered Tabs -->
          <ul class="nav nav-tabs nav-tabs-bordered">

            <li class="nav-item">
              <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#profile-overview">Overview</button>
            </li>

            <li class="nav-item">
              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">Edit Profile</button>
            </li>

            <li class="nav-item">
              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-change-password">Setting</button>
            </li>

          </ul>
          <div class="tab-content pt-2">

            <div class="tab-pane fade show active profile-overview" id="profile-overview">
              <h5 class="card-title">Profile Details</h5>

              <div class="row">
                <div class="col-lg-3 col-md-4 label ">Full Name</div>
                <div class="col-lg-9 col-md-8"><?php echo $row['name']; ?></div>
              </div>

              <div class="row">
                <div class="col-lg-3 col-md-4 label">College</div>
                <div class="col-lg-9 col-md-8">CoICT</div>
              </div>

              <?php if ($row['phone']) { ?>
                <div class="row">
                  <div class="col-lg-3 col-md-4 label">Phone</div>
                  <div class="col-lg-9 col-md-8"><?php echo $row['phone']; ?></div>
                </div>
              <?php }
              if ($row['email']) { ?>
                <div class="row">
                  <div class="col-lg-3 col-md-4 label">Email</div>
                  <div class="col-lg-9 col-md-8"><?php echo $row['email']; ?></div>
                </div>
              <?php } ?>

            </div>

            <div class="tab-pane fade profile-edit pt-3" id="profile-edit">

              <!-- Profile Edit Form -->
              <form id="edit-profile" enctype="multipart/form-data">
                <div class="row mb-3">
                  <label for="profileImage" class="col-md-4 col-lg-3 col-form-label">Profile Image</label>
                  <div class="col-md-8 col-lg-9">
                    <?php
                    if ($row['profile_picture']) {
                      $profile_picture = $row['profile_picture'];
                      $profile_picture_path = 'assets/img/profile/users/' . $profile_picture;

                      if (file_exists($profile_picture_path)) {
                        echo '<img src="' . $profile_picture_path . '" alt="Profile Picture" style="max-width: 100px;">';
                      }
                    } else { ?>
                      <img src="assets/img/user.png" alt="Profile">
                    <?php } ?>
                    <div class="pt-2">
                      <label for="profileImage" class="btn btn-primary btn-sm text-light" title="Upload new profile image">
                        <input type="file" name="profileImage" id="profileImage" class="visually-hidden" accept="image/*">
                        <i class="bi bi-upload"></i>
                      </label>
                      <!-- <a href="#" class="btn btn-danger btn-sm" title="Remove my profile image"><i class="bi bi-trash"></i></a> -->
                    </div>
                  </div>
                </div>

                <div class="row mb-3">
                  <label for="fullName" class="col-md-4 col-lg-3 col-form-label">Full Name<span class="text-danger"> *</span></label>
                  <div class="col-md-8 col-lg-9">
                    <input type="hidden" name="user" value="<?php echo $row['id']; ?>">
                    <input name="fullName" type="text" class="form-control" id="fullName" value="<?php echo $row['name']; ?>">
                  </div>
                </div>

                <div class="row mb-3">
                  <label for="username" class="col-md-4 col-lg-3 col-form-label">Username<span class="text-danger"> *</span></label>
                  <div class="col-md-8 col-lg-9">
                    <input name="username" type="text" class="form-control" id="username" value="<?php echo $row['username']; ?>">
                  </div>
                </div>

                <div class="row mb-3">
                  <label for="Phone" class="col-md-4 col-lg-3 col-form-label">Phone</label>
                  <div class="col-md-8 col-lg-9">
                    <input name="phone" type="text" class="form-control" id="Phone" value="<?php echo $row['phone']; ?>">
                  </div>
                </div>

                <div class="row mb-3">
                  <label for="Email" class="col-md-4 col-lg-3 col-form-label">Email</label>
                  <div class="col-md-8 col-lg-9">
                    <input name="email" type="email" class="form-control" id="Email" value="<?php echo $row['email']; ?>">
                  </div>
                </div>

                <div class="text-center">
                  <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
              </form><!-- End Profile Edit Form -->

            </div>

            <div class="tab-pane fade pt-3" id="profile-change-password">
              <!-- Change Password Form -->
              <form id="change-password-form">

                <div class="row mb-3">
                  <label for="currentPassword" class="col-md-4 col-lg-3 col-form-label">Current Password</label>
                  <div class="col-md-8 col-lg-9">
                    <input name="currentPassword" type="password" class="form-control" id="currentPassword">
                  </div>
                </div>

                <div class="row mb-3">
                  <label for="newPassword" class="col-md-4 col-lg-3 col-form-label">New Password</label>
                  <div class="col-md-8 col-lg-9">
                    <input name="newPassword" type="password" class="form-control" id="newPassword">
                  </div>
                </div>

                <div class="row mb-3">
                  <label for="confirmNewPassword" class="col-md-4 col-lg-3 col-form-label">Repeat New Password</label>
                  <div class="col-md-8 col-lg-9">
                    <input name="confirmNewPassword" type="password" class="form-control" id="confirmNewPassword">
                  </div>
                </div>

                <div class="text-center">
                  <button type="submit" class="btn btn-primary">Change Password</button>
                </div>
              </form><!-- End Change Password Form -->

            </div>

          </div><!-- End Bordered Tabs -->

        </div>
      </div>

    </div>
  </div>
</section>