<?php 
    include("config.php");
    session_start();
    $my_campus = $_SESSION['campus'];
	// if (isset($_GET["ID"])){
    //     $ID = $_GET["ID"];

    //     $sql = "UPDATE tasks Set `Notif_Status` = 'read' WHERE ID='$ID'"; 		
    //     $result = mysqli_query($db,$sql);
    //     // If result matched atleast one, table row must be 1 row
    //         if($result) {
    //             echo '<script>alert("Notification was removed successfully!");</script>';
    //         }else {
    //             echo '<script>alert("Failed to remove notification!");</script>';
    //     }
    // }

    //Select all notification or unread 
    $notif_status = "WHERE Notif_Status='unread' && Campus='$my_campus'";

    $color_all = "#2d2d2d";
    $bg_color_all = "white";

    $color_unread = "white";
    $bg_color_unread = "#36892f";

    if(isset($_POST['notif_all'])){
        $color_all = "white";
        $bg_color_all = "#36892f";

        $color_unread = "#2d2d2d";
        $bg_color_unread = "white";
        $notif_status = "WHERE File_Status != 'unsubmitted' && Campus='$my_campus'";
    }
    else if(isset($_POST['notif_unread'])){
        $color_all = "#2d2d2d";
        $bg_color_all = "white";
        
        $color_unread = "white";
        $bg_color_unread = "#36892f";
        $notif_status = "WHERE Notif_Status='unread' && File_Status != 'unsubmitted' && Campus='$my_campus'";
    }

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>NOTIFICATIONS</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<style>
.sticky {
  position: fixed;
  top: 0;
  width: 90%;
}

.header {
  padding: 10px 16px;
  background: #ebebeb;
  color: #f1f1f1;
  border-radius: 5px;
}
</style>
<body style="background-color: white;">
    <div class="main-section" style="max-width: 100%;">
    
        <!-- Sticky Header -->
        <div style="height:60px; position: fixed;   padding: 10px 16px;  background: #ebebeb; color: #f1f1f1; border-radius: 5px; width: 90%;">
            <!-- Select all notifications -->
            <form method="post" style="float: left; padding:3px;">
            <input type="hidden" name="notif_all">
            <input type="submit" value="All" style= "font-size: 15px; font-weight: bold; background-color: <?php echo $bg_color_all;?>; border: none; color:<?php echo $color_all;?>; padding:10px; border-radius:20px; cursor: pointer;">
            </form>
            <!-- Select unread notifications -->
            <form method="post" style="float: left; padding:3px;">
            <input type="hidden" name="notif_unread">
            <input type="submit" value="Unread" style= "font-size: 15px; font-weight: bold; background-color: <?php echo $bg_color_unread;?>; border: none; color:<?php echo $color_unread;?>; padding:10px; border-radius:20px; cursor: pointer;">
            </form>
        </div><br><br><br>

    <!-- NEW NOTIFICATION-->
       <?php 
            $check_new_notif = false;
            $check_earlier_notif = false;

           date_default_timezone_set('Asia/Manila');
           $date_now = date("m/d/Y");
        //    $time_convert1 = date("h");
        //    $time_convert2 = strtotime('h', $time_convert1);

          $sql = "SELECT * FROM tasks $notif_status ORDER BY ID DESC";
          if($result = $db->query($sql)){
              if($result->num_rows > 0){
                $x = 1;
                $check_new_notif = true;
                while($row = $result->fetch_array()){
                    $date_submitted = date($row['Date_Submitted']);
                    if($date_now == $date_submitted){
                        if($x == 1){
                            echo '<h3 style="float:left; margin-left: 15px; margin-top: 15px; font-family: Arial; color: #2d2d2d; ">New</h3><br>';
                        }
                        $x++;
                        
                        //  $check_time = $time_convert2 - strtotime('h', intval($row['Time']));
                        //  if ($check_time <= 2){
            ?>
                    <div class="show-todo-section" style="width: 100%; padding: 0px;">
            <a target="_parent" href="../tasks.php?ID=<?php echo $row['ID'];?> " style="width:100%; border: none; background-color: white; cursor: pointer; text-align: left; height: 80px;">
                <div class="todo-item" style="background-color: white; width:100%; ">
                                <input type="hidden" name="ID" value="<?php echo $row['ID']; ?>" />
                                <h2 style="font-size: 15px; padding-left: 7px;"><?php echo $row['Username']; ?> <span style="font-weight: normal;">submitted documents </span> "<?php echo $row['File_Link']; ?>"</h2></a>                     
                    <br>
                    <small style="margin-top: -5px; padding-left:10px;"><?php echo $row['Date_Submitted'] ?> <?php echo $row['Time']; ?></small> 
                </div>
                        </a>
                        </div>
                <?php } 
                }
              }
              else{
                  $check_new_notif = false;
              }
             } ?>
    <!-- END OF NEW NOTIFICATION -->

        <!-- EARLIER NOTIFICATION-->
       <?php
          date_default_timezone_set('Asia/Manila');
          $date_now = date("m/d/Y");
        //   $time_convert1 = date("h");
        //   $time_convert2 = strtotime('h', $time_convert1);

          $sql2 = "SELECT * FROM tasks $notif_status ORDER BY ID DESC";
          if($result2 = $db->query($sql2)){
              if($result2->num_rows > 0){
                  $i = 1;
                  $check_earlier_notif = true;
                while($row2 = $result2->fetch_array()){
                    $date_submitted = date($row2['Date_Submitted']);
                    if($date_now != $date_submitted){
                        if($i == 1){
                            echo '<h3 style="float:left; margin-left: 15px; margin-top: 15px; font-family: Arial; color: #2d2d2d; ">Earlier</h3><br>';
                        }
                        $i++;
                        
                        //  $check_time = $time_convert2 - strtotime('h', intval($row['Time']));
                        //  if ($check_time <= 2){
       ?>

        <div class="show-todo-section" style="width: 100%; padding: 0px;">
            <a target="_parent" href="../tasks.php?ID=<?php echo $row2['ID'];?> " style="width:100%; border: none; background-color: white; cursor: pointer; text-align: left; height: 80px;">
                <div class="todo-item" style="background-color: white; width:100%; ">
                                <input type="hidden" name="ID" value="<?php echo $row2['ID']; ?>" />
                                <h2 style="font-size: 15px; padding-left: 7px;"><?php echo $row2['Username']; ?> <span style="font-weight: normal;">submitted documents </span> "<?php echo $row2['File_Link']; ?>"</h2></a>                     
                    <br>
                    <small style="margin-top: -5px; padding-left:10px;"><?php echo $row2['Date_Submitted'] ?> <?php echo $row2['Time']; ?></small> 
                </div>
                        </a>
                <?php } 
                }
              }
              else{
                  $check_earlier_notif = false;
              }
             } ?>
       </div>
    <!-- END OF EARLIER NOTIFICATION -->
    <?php
    if($check_new_notif == false && $check_earlier_notif == false){
        echo '<h3 style="float:left; margin-left: 65px; margin-top: -450px; font-family: Arial; color: #2d2d2d; ">No notification</h3>';
    }
    ?>

</div>

    <script src="js/jquery-3.2.1.min.js"></script>

    <script>
        $(document).ready(function(){
            $('.remove-to-do').click(function(){
                const id = $(this).attr('id');
                
                $.post("app/remove.php", 
                      {
                          id: id
                      },
                      (data)  => {
                         if(data){
                             $(this).parent().hide(600);
                         }
                      }
                );
            });

            $(".check-box").click(function(e){
                const id = $(this).attr('data-todo-id');
                
                $.post('app/check.php', 
                      {
                          id: id
                      },
                      (data) => {
                          if(data != 'error'){
                              const h2 = $(this).next();
                              if(data === '1'){
                                  h2.removeClass('checked');
                              }else {
                                  h2.addClass('checked');
                              }
                          }
                      }
                );
            });
        });
    </script>

    <script>
    // When the user scrolls the page, execute myFunction
    window.onscroll = function() {myFunction()};

    // Get the header
    var header = document.getElementById("myHeader");

    // Get the offset position of the navbar
    var sticky = header.offsetTop;

    // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
    function myFunction() {
    if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
    } else {
        header.classList.remove("sticky");
    }
    }
    </script>

</body>
</html>