<?php 
  session_start();
  include("config.php");
  $disabled = "";
  $hide = "";
  $approved_alert = "";

    $my_email = $_SESSION['login_user'];
    $sql_admin = mysqli_query($db, "SELECT * FROM members WHERE Email='$my_email'");
    while($admin_row = mysqli_fetch_array($sql_admin)) {
      $admin_pro_pic = $admin_row["Profile_Picture"];
      $admin_fname = $admin_row["First_Name"];
      $admin_m_i = $admin_row["Middle_Initial"];
      $admin_lname = $admin_row["Last_Name"];
      $admin_name = "".$admin_fname." ".$admin_m_i." ".$admin_lname."";
    }
 
    $ID = $_GET["ID"];
    $sql_tasks = mysqli_query($db, "SELECT * FROM tasks WHERE ID='$ID'");
    while($DB_ROW = mysqli_fetch_array($sql_tasks)) {
      $ID = $DB_ROW["ID"];
      $profile_pic = $DB_ROW["Profile_Picture"];
      $username = $DB_ROW['Username'];
      $code = $DB_ROW['Code'];
      $file_link = $DB_ROW["File_Link"];

      if($DB_ROW['File_Status'] == "approved"){
          $disabled = "pointer-events:none";
          $hide = "hidden";
          $approved_alert = '<div style="background-color: #73da76; height: 30px; color: #155724; border-radius: 5px; border: solid 0.5px; border-color: #c3e6cb; padding: 5px; font-weight: bold;"><span style="margin-top: 5px; float: left;">APPROVED!</span></div>';
      }else if($DB_ROW['File_Status'] == "returned"){
        $disabled = "pointer-events:none";
        $hide = "hidden";
        $approved_alert = '<div style="background-color: #daab73; height: 30px; color: #573315; border-radius: 5px; border: solid 0.5px; border-color: #e6d8c3; padding: 5px; font-weight: bold;"><span style="margin-top: 5px; float: left;">RETURNED!</span></div>';
      }else{
        $disabled = "";
        $approved_alert = '<div style="background-color: #da7373; height: 30px; color: #571515; border-radius: 5px; border: solid 0.5px; border-color: #e6c3c3; padding: 5px; font-weight: bold;"><span style="margin-top: 5px; float: left;">PENDING!</span></div>';
      }
    }

?>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10000000; /* 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 */
}

.modal2 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10000000; /* 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 */
}

.modal3 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10000000; /* 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%;
}
.modal-content2 {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.modal-content3 {
  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;
}
.close2 {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close3 {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.close2:hover,
.close2:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.close3:hover,
.close3:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>

      <h2 style="font-family: Arial; margin-left: 50px; margin-top: 5px; color: #101010;">Preview</h2>
      <button onclick="var ifr=document.getElementsByName('preview_ifrm')[0]; ifr.src=ifr.src;" style="float: right; margin-top: -40px; cursor: pointer; background-color: #313131; border-radius: 5px;" title="Click to refresh"><img src="images/reload.jpg" width="23px" height= "23px" style="border: none; background-color: #313131; border-radius: 5px; padding: 1px;"></button>
      <a href="task_main-page-faculty-admin.php"><button style="float: left; margin-top: -50px; cursor: pointer; background-color: #313131; border-radius: 5px;" title="Click to go back"><img src="images/back_btn.png" width="18px" height= "15px" style="border: none; background-color: #313131; border-radius: 5px; padding: 3px;"></button></a>
      
      <?php
        // Count the private comments
        require_once "config.php";
        $file_code = $code;
        $sql = "SELECT * FROM private_comment WHERE Code='$file_code'";
        if ($result=mysqli_query($db,$sql)) {
            $rowcount=mysqli_num_rows($result);
            echo '<div style="font-family: Arial; font-weight: bold; color: #3a3a3a; float: right; margin-top: -30px; margin-right: 275px; width: 20px; height: 20px;">' . $rowcount . '</div>';
        }
      ?>
      <a id="com"><img src="images/private_comment.png" width="38px" height= "38px" style="border: none; border-radius: 5px; float: right; margin-top: -42px; margin-right: 243px; cursor: pointer; border-radius: 5px;" title="Private comments"></a>
      <!-- <p style="font-family: Arial; font-weight: bold; color: white; border: none; float: right; margin-top: -41px; margin-right: 210px;">3</p> -->
      <a id="apprv" style= "background-color: green; border-color: #4bb543; color:white; padding:7px; border-radius:5px; cursor: pointer; float: right; margin-top: -40px; margin-right: 155px; font-family: Arial; <?php echo $disabled; ?>" <?php echo $hide; ?>>Approve</a>
      <a id="retrn" style= "background-color: #990000; border-color: #990000; color:white; padding:7px; border-radius:5px; cursor: pointer; float: right; margin-top: -40px; margin-right: 90px; font-family: Arial; <?php echo $disabled; ?>" <?php echo $hide; ?>>Return</a>
      <a href="submitted_files/<?php echo $file_link ?>" download><button style="float: right; margin-top: -40px; margin-right: 45px; cursor: pointer; background-color: #313131; border-radius: 5px;" title="Click to download"><img src="images/download_icon.png" width="18px" height= "18px" style="border: none; background-color: #313131; border-radius: 5px; padding: 3px;"></button></a>
      <?php echo $approved_alert; ?>
      <div id="iframeContainer"></div>

           <!-- The Modal -->
        <div id="myModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content" style="border-radius: 20px; height: 150px; width: 300px;">
        <span class="close">&times;</span>
        <h4 style="font-family: Arial; color: #3a3a3a">Are you sure you want to approve this document?</h4>
        <br><br><br>
        <form method="post" action="task_approve-faculty-admin.php">
        <input type="hidden" name="ID"  value="<?php echo $ID; ?>">
        <input type="hidden" name="status"  value="approved">
        <a onclick="document.getElementById('myModal').style.display='none'" style="cursor: pointer; width: 100px; float:right; width: 70px; padding: 10px; color:white; margin-top:-20px; margin-left: 5px; text-align: center; background-color: gray; border-radius: 5px; width: 100px; font-family: Arial;">No</a>
        <a onclick="document.getElementById('myModal').style.display='none'" ><input type="submit" value="Yes" style="cursor: pointer; width: 100px; float:right; width: 70px; padding: 7.2px; color:white; margin-top:-20px; text-align: center; background-color: #4c9be1; border-radius: 5px; width: 120px; font-family: Arial; border-color: #4c9be1; font-size: 17px"></a>
      </form>

        </div>
        </div>

        <!-- The Modal 2 -->
        <div id="myModal2" class="modal2">

        <!-- Modal content 2 -->
        <div class="modal-content2" style="border-radius: 20px; height: 315px; width: 300px;">
        <span class="close2">&times;</span>
        <h3 style="font-family: Arial; color: #3a3a3a;">Return</h3>
        <h4 style="font-family: Arial; color: #3a3a3a;">Send private comments</h4>
        <form method="post" action="task_return-faculty-admin.php">
        <input type="hidden" name="ID"  value="<?php echo $ID ?>">
        <input type="hidden" name="profile_pic"  value="<?php echo $admin_pro_pic; ?>">
        <input type="hidden" name="username"  value="<?php echo $admin_name; ?>">
        <input type="hidden" name="code"  value="<?php echo $code; ?>">
        <input type="hidden" name="status"  value="returned">
        <textarea type="text-area" name="comments" style="width:298px; height: 169px; resize: none; font-family: Arial; font-size: 14; color: #3a3a3a; padding:7px; border-radius: 5px;"></textarea>
        <a onclick="document.getElementById('myModal2').style.display='none'" style="cursor: pointer; width: 100px; float:right; width: 70px; padding: 10px; color:white; margin-top: 10px; margin-left: 5px; text-align: center; background-color: gray; border-radius: 5px; width: 100px; font-family: Arial;">Cancel</a>
        <a onclick="document.getElementById('myModal2').style.display='none'" ><input type="submit" value="Return" style="cursor: pointer; width: 100px; float:right; width: 70px; padding: 7.2px; color:white; margin-top:10px; text-align: center; background-color: #4c9be1; border-radius: 5px; width: 120px; font-family: Arial; border-color: #4c9be1; font-size: 17px"></a>
      </form>

        </div>
        </div>

        <!-- The Modal 3 -->
        <div id="myModal3" class="modal3">

        <!-- Modal content 3 -->
        <div class="modal-content3" style="border-radius: 20px; height: 370px; width: 300px;">
        <span class="close3">&times;</span>

        <?php
        // Count the private comments
        require_once "config.php";
        $sql = "SELECT * FROM private_comment WHERE Code='$code'";
        if ($result=mysqli_query($db,$sql)) {
            $rowcount=mysqli_num_rows($result);
            echo '<h4 style="font-family: Arial; color: #3a3a3a;">' . $rowcount . ' private comments</h4>';
        }
        echo '<div style="overflow-y: auto; height: 190px;">';
        $sql2 = "SELECT * FROM private_comment WHERE Code='$file_code' ORDER BY ID ASC";
        if($result2 = $db->query($sql2)){
          if($result2->num_rows > 0){
            while($row = $result2->fetch_array()){
              echo "<img src='profile_pic/" . $row['Profile_Picture'] . "'" .  " style='height: 40px; width: 40px; border-radius: 50%; float:left; padding-top: -10px;'></img>";
              echo '<p style="font-weight:bold; font-family: Arial; font-size:15px; color: #3a3a3a; margin-top: 10px; margin-left: 10px; float: left;">'.$row["Username"]. "</p>
              <p style='float: left; margin-top: -10px; margin-left: 50px; font-family: Arial; font-size:12px; color: #373737;'>" .$row['Date']. " " .$row['Time']. '</p>';
              echo '<br><br><br><p style="font-family: Arial; font-size:15px; color: #3a3a3a; margin-left: 50px; margin-top: -5px; float: left; padding-bottom: 5px;">'.$row["Private_Comments"].'</p><br><br><hr>';
            }
          }
          else{
            echo '<div style="margin-top: 70px; margin-left: 100px; font-size: 18px;">No comments</div>';
          }
        }
        echo '</div>';
        // Close connection
        $db->close();
        ?>
        <br>
        <form method="post" action="task_send_comments-faculty-admin.php">
        <input type="hidden" name="ID"  value="<?php echo $ID; ?>">
        <input type="hidden" name="code"  value="<?php echo $code; ?>">
        <input type="hidden" name="profile_pic"  value="<?php echo $admin_pro_pic; ?>">
        <input type="hidden" name="username"  value="<?php echo $admin_name; ?>">
        <textarea type="text-area" name="comments" style="width:298px; height: 60px; resize: none; font-family: Arial; font-size: 14; color: #3a3a3a; padding:7px; border-radius: 5px;"></textarea>
        <a onclick="document.getElementById('myModal3').style.display='none'" ><input type="submit" value="Send" style="cursor: pointer; float:right; min-width: 40px; padding: 7.2px; color:white; margin-top:5px; text-align: center; background-color: #4c9be1; border-radius: 5px; font-family: Arial; border-color: #4c9be1; font-size: 17px"></a>
      </form>

        </div>
        </div>


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

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

    // 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>

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

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

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

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

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

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

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

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

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

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

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

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

    <script>
        var URL = "https://docs.google.com/viewer?url=http://minsu-pme-office.store/submitted_files/<?php echo $file_link ?>&embedded=true";
        var count = 0;
            var iframe = ` <iframe name="preview_ifrm" id = "myIframe" src = "${URL}" style = "width:100%; height:100%;"  frameborder = "0"></iframe>`;
                
          $(`#iframeContainer`).html(iframe);
                $('#myIframe').on('load', function(){ 
                count++;
                if(count>0){
                    clearInterval(ref)
                }
            });

            var ref = setInterval(()=>{
            $(`#iframeContainer`).html(iframe);
            $('#myIframe').on('load', function() {
                count++;
                if (count > 0) {
                    clearInterval(ref)
                }
            });
        }, 4000)
    </script>