<?php
    include("config.php");
    session_start();
    $selected_status = "pending";
    if(isset($_POST['client_id'])){  
        $selected_status = mysqli_real_escape_string($db,$_POST['client_id']);
    }
    if($selected_status == "pending"){

        $selected1 = "selected";
        $selected2 = "";
        $selected3 = "";
    }
    else if($selected_status == "returned"){
        $selected1 = "";
        $selected2 = "selected";
        $selected3 = "";
    }else{
        $selected1 = "";
        $selected2 = "";
        $selected3 = "selected";
    }
    
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MEMBERS</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <style>
        .wrapper{
            width: 100%;
            margin:;
        }
        table tr td:last-child{
            width: 120px;
        }
    </style>
    <style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  float: left;
  margin-top: -32px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
  margin-top: -20px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
</style>
    <script>
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();   
        });
    </script>
</head>
<body>
<center><h2></h2></center><br>
    <div class="wrapper">
        <div class="container-fluid">
            <div class="row">
                    <form id="my-form" action='task_main-page.php?' method="post">
                        <select onchange="sort_file_status()" name="client_id" ID="mySelect" class="field input" style="width: 200px; float: left; border-color: white; border-radius: 5px; background-color: white; border: 2px solid #e8e8e8; height: 40px; font-size: 15px; margin-top: -20px; margin-left: 15px; padding:5px;" required>
                        <option value="pending" <?php echo $selected1 ?> >Pending</option>
                        <option value="returned" <?php echo $selected2 ?> >Returned</option>
                        <option value="approved" <?php echo $selected3 ?> >Approved</option>
                        </select>
                    </form>
                    <br><br>
                <div class="col-md-12">
                    <div class="mt-2 clearfix">
                        <input class="responsive" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="Search Filter" style="min-width:300px; width:300px; height:40px; border-radius: 5px;">
                    </div><br>

                    <?php
                    // Include config file
                    require_once "config.php";
                    
                    // Attempt select query execution
                    $sql = "SELECT * FROM tasks WHERE File_Status='$selected_status'";
                    if($result = $db->query($sql)){
                        if($result->num_rows > 0){
                            echo '<table class="table table-striped" id="myTable" style="font-size: 15px;">';
                                echo '<thead>';
                                    echo "<tr>";
                                        echo "<th></th>";
                                        echo "<th>Username</th>";
                                        echo "<th>File</th>";
                                        echo "<th>Status</th>";
                                        echo "<th>Date_Submitted</th>";
                                        echo "<th>Action</th>";
                                    echo "</tr>";
                                echo "</thead>";
                                echo "<tbody>";
                                while($row = $result->fetch_array()){
                                    echo "<tr>";
                                        echo "<td> <img src='profile_pic/" . $row['Profile_Picture'] . "'" .  " border=3 height=50 width=50 style='border-radius: 25px;'></img></td>";
                                        echo "<td>" . $row['Username'] . "</td>";
                                        echo "<td>" . $row['File_Link'] . "</td>";
                                        echo "<td>" . $row['File_Status'] . "</td>";
                                        echo "<td>" . $row['Date_Submitted'] . "</td>";
                                        echo "<td>";
                                        echo '<input type="hidden" name="ID" value="'. $row['ID'] .'">'; 

                                            echo '  <a href="task_preview-page.php?ID='. $row['ID'] .'" value="Preview" style= "font-weight: bold; background-color: #36892f; border: none; color:white; padding-left: 10px; padding-right: 10px; padding-top: 7px; padding-bottom: 7px; border-radius:20px;">Preview</a>';
                                        echo "</td>";
                                    echo "</tr>";
                                }
                                echo "</tbody>";                            
                            echo "</table>";
                            // Free result set
                            $result->free();
                        } else{
                            echo '<div class="alert alert-danger"><em>No ' . $selected_status . ' records were found.</em></div>';
                        }
                    } else{
                        echo "Oops! Something went wrong. Please try again later.";
                    }
                    
                    // Close connection
                    $db->close();
                    ?>
                </div>
            </div>        
        </div>
    </div>
    <!-- Script used to search data in table-->
    <script>
    function myFunction() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        for (i = 1; i < tr.length; i++) {
            td = tr[i];
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }       
         }
    }
    </script>

    <!-- Used to sort table using selection box -->
    <script>
    function sort_file_status(){
        document.getElementById("my-form").submit();
    }
</script>
</body>
</html>