<!-- Login Modal -->
<div id="loginModal" class="modal">
<!-- Modal content -->
<form action="">
    <div class="modal-content">
        <div class="modal-header">
            <span id="lclose" class="close">&times;</span>
            <h2>Login</h2>
        </div>
        <div class="modal-body">
            Username: <input type="text" name="username"></br>
            Password: <input type="password" name="password"></br>
        </div>
        <div class="modal-footer">
            <h3></h3><button type="button" name="login">Login</button>
        </div>
    </div>
</form>
</div>

<!-- Add Task Modal -->
<div id="addModal" class="modal">
<!-- Modal content -->
<form action="">
    <div class="modal-content">
        <div class="modal-header">
            <span id="aclose" class="close">&times;</span>
            <h2>Add Task</h2>
        </div>
        <div class="modal-body">
            Your Name: <input type="text" name="tname"></br>
            Task Type: <input type="text" name="ttype"></br>
            Task Description: <input type="text" name="tdesc"></br>
            Task Deadline: <input type="date" name="tdead"></br>
        </div>
        <div class="modal-footer">
            <h3></h3><button type="button" name="addtask">Add</button>
        </div>
    </div>
</form>
</div>

<!-- Edit Task Modal -->
<div id="editModal" class="modal">
<!-- Modal content -->
<form action="">
    <div class="modal-content">
        <div class="modal-header">
            <span id="eclose" class="close">&times;</span>
            <h2>Edit Task</h2>
        </div>
        <div class="modal-body">
            Task Type: <input type="text" name="ttype"></br>
            Task Description: <input type="text" name="tdesc"></br>
            Task Priority: <input type="text" name="tprio"></br>
            Task Deadline: <input type="date" name="tdead"></br>
        </div>
        <div class="modal-footer">
            <h3></h3><button type="button" name="addtask">Edit</button>
        </div>
    </div>
</form>
</div>

<script language="javascript">
// Get the modal
var lmodal = document.getElementById('loginModal');
var amodal = document.getElementById('addModal');
var emodal = document.getElementById('editModal');

// Get the button that opens the modal
var lbtn = document.getElementById("login_modal");
var abtn = document.getElementById("add_modal");
var ebtn = document.getElementsByClassName("edit_Modal");


// Get the <span> element that closes the modal
var lspan = document.getElementById("lclose");
var aspan = document.getElementById("aclose");
var espan = document.getElementById("eclose");

// When the user clicks the button, open the modal
lbtn.onclick = function() {
    lmodal.style.display = "block";
}
abtn.onclick = function() {
    amodal.style.display = "block";
}
ebtn.onclick = function() {
    emodal.style.display = "block";
}

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

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

$result = dbcurrentquery($db);
            $str = '<table id="tasklist" cellspacing="0" cellpadding="0">
                <tr class="header">
                    <td colspan=7></br>CURRENT TASKS ('.$result->num_rows.')<p></p></td>
                </tr>
                <tr class="header">
                    <td class="tEdit">Edit</td>
                    <td class="tID">Task ID</td>
                    <td class="tName">Task Type</td>
                    <td class="tDesc">Task Description</td>
                    <td class="tPrio">Priority</td>
                    <td class="tDead">Deadline</td>
                    <td class="tComp">Completed?</td>
                </tr>';
            if($result->num_rows > 0){
                while($row = $result->fetch_assoc()){
                    $str .= '<tr style="background-color:'.tablecolour($row['Priority']).'">
                        <td class="tEdit"><button class="edit_modal">E</button></td>
                        <td class="tID">'.$row['id'].'</td>
                        <td class="tName">'.$row['Type'].'</td>
                        <td class="tDesc">'.$row['Description'].'</td>
                        <td class="tPrio">'.prioritytext($row['Priority']).'</td>
                        <td class="tDead">'.dateformat($row['Due_Date']).'</td>
                        <td class="tComp"><form action=""><input type="checkbox" name="id'.$row['id'].'" value="id'.$row['id'].'"></input></form></td>
                    </tr>';
                }
            }
            else{
                $str .= '<tr><td colspan=7>NO TASKS AVAILABLE</td></tr>';
            }
            $str .= '</table>';
return $str;