<?php
    // Include config file
    include "config.php";
    session_start();
    $selected_status = "Pending";
    if(isset($_POST['client_id'])){  
        $selected_status = $_POST['client_id'];
    }
    if($selected_status == "Pending"){

        $selected1 = "selected";
        $selected2 = "";
    }
    else if($selected_status == "Completed"){
        $selected1 = "";
        $selected2 = "selected";

    }

    ?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Request</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>
    <br><br>
    <div class="wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="mt-2 clearfix">
                    <!-- <center><h3 style="padding: 5px; margin-bottom: 35px; margin-top: -20px; font-family: Calibri;"></h3></center> -->
                    <form id="my-form" action='file_request_main-page.php?' method="post">
                        <select onchange="sort_file_status()" name="client_id" ID="mySelect" class="field input" style="width: 200px; float: right; 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="Completed" <?php echo $selected2 ?> >Completed</option>
                        </select>
                    </form>
                    <br><br><br>
                    <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; margin-top: -90px;">
                        <!--<a href="create.php" class="btn btn-success pull-right"><i class="fa fa-plus"></i> Add New Employee</a>-->
                    </div>
                    <?php                 
                    // Attempt select query execution
                    $sql = "SELECT * FROM file_request WHERE 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>ID#</th>";
                                        echo "<th>Last_Name</th>";
                                        echo "<th>First_Name</th>";
                                        echo "<th>Middle_Initial</th>";
                                        echo "<th>File Request</th>";
                                        echo "<th>Status</th>";
                                        echo "<th>Action</th>";
                                    echo "</tr>";
                                echo "</thead>";
                                echo "<tbody>";
                                while($row = $result->fetch_array()){
                                    echo "<tr>";
                                        echo "<td>" . $row['ID'] . "</td>";
                                        echo "<td>" . $row['Last_Name'] . "</td>";
                                        echo "<td>" . $row['First_Name'] . "</td>";
                                        echo "<td>" . $row['Middle_Name'] . "</td>";
                                        echo "<td>" . $row['Document_Type'] . "</td>";

                                        if($row['Status'] == "Pending"){
                                            $color = "orange";
                                        }
                                        else{
                                            $color = "gray";
                                        }
                                        echo "<td style='color: ".$color."; font-weight: bold;'>" . $row['Status'] . "</td>";
                                        echo "<td>";
                                            // echo '<a href="accounts_read-page.php?ID='. $row['ID'] .'" class="mr-3" title="View Record" data-toggle="tooltip"><span class="fa fa-eye"></span></a>';
                                            echo '<a href="file_request_update-page.php?ID='. $row['ID'] .'" class="mr-3" title="View Details" data-toggle="tooltip" style= "font-weight: bold; background-color: #36892f; border: none; color:white; padding-left: 15px; padding-right: 15px; padding-top: 7px; padding-bottom: 7px; border-radius:20px;">View</a>';
                                        echo "</td>";
                                    echo "</tr>";
                                }
                                echo "</tbody>";                            
                            echo "</table>";
                            // Free result set
                            $result->free();
                        } else{
                            echo '<div class="alert alert-danger"><em>No 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>