<?php 
  session_start();
  include_once "php/config.php";
  if(!isset($_SESSION['unique_id'])){
    header("location: login.php");
  }
?>
<?php include_once "header.php"; ?>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>

</head>
<body style="background-color: #f7f7f7;">
  <div class="wrapper" style="min-width: 500px; max-width: 800px; width: 800px;">
    <section class="users">
      <header>
        <div class="content">
          <?php 
            $sql = mysqli_query($conn, "SELECT * FROM users WHERE unique_id = {$_SESSION['unique_id']}");
            if(mysqli_num_rows($sql) > 0){
              $row = mysqli_fetch_assoc($sql);
            }
          ?>
          <img src="../profile_pic/<?php echo $row['img']; ?>" alt="">
          <div class="details">
            <span><?php echo $row['fname']. " " . $row['lname'] . " (" . $row['usertype'] . ") "; ?></span>
            <p><?php echo $row['status']; ?></p>
          </div>
        </div>
        <a id="myBtn" class="logout" title="Logout" style="cursor: pointer;"><i class="fa fa-sign-out" style="font-size:20px; cursor: pointer;"></i></a>
          
          <!-- The Modal -->
          <div id="myModal" class="modal">

          <!-- Modal content -->
          <div class="modal-content" style="border-radius: 20px; height: 180px; width: 450px;">
            <span class="close">&times;</span>
            <h3 style="font-weight: regular;">Are you sure you want to logout?</h3>
            <br><br><br>
            <a onclick="document.getElementById('myModal').style.display='none'" class="logout" style="cursor: pointer; width: 100px; float:right; background-color: gray">No</a>
            <a href="php/logout.php?logout_id=<?php echo $row['unique_id']; ?>" id="myBtn" class="logout"  style="cursor: pointer; width: 100px; float:right; margin-right: 5px; background-color: #4c9be1;">Yes</a>
          
          </div>

          </div>
      
      </header>
      <div class="search">
        <span class="text">Select an user to start chat</span>
        <input type="text" placeholder="Enter name to search...">
        <button><i class="fas fa-search"></i></button>
      </div>
      <div class="users-list">
  
      </div>
    </section>
  </div>

  <script src="javascript/users.js"></script>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>
