<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">PDEA's COEM Pricipal Cabin</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Students' Corner</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#" onclick="obj.RequestStart();">Students' Requests</a>
              </li>
              
              
            </ul>
            <span class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Profile
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
               
                <li><a class="dropdown-item" href="#">Settings</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Log out</a></li>
              </ul>
            </span>
          </div>
        </div>
      </nav>
     <center> <div id="body"></div></center>
      <script>
class View{
  constructor(){
    this.mode = "";
  }
  RequestStart(){
    if(this.mode!="requests"){
    let x=document.getElementById("body");
    let next = document.createElement("button");
    let prev = document.createElement("button");
    let date = document.createElement("input");
    date.setAttribute("id","date");
    date.setAttribute("type","date");
    next.setAttribute('onclick',"obj.RequestChange('next')");
    next.innerText="Next";
    prev.setAttribute('onclick',"obj.RequestChange('prev')");
    prev.innerText="Prev";
    let body = document.createElement("div");
    body.setAttribute("id",'inbody');
   
    x.append(prev);
    x.append(date);
    x.append(next);
    x.append(document.createElement("br"));
    let Searchbar = document.createElement("input");
    Searchbar.setAttribute("type","text");
    Searchbar.setAttribute("id","Searchbar");
    Searchbar.size ="35";
    Searchbar.placeholder = "Enter token number or Student Name";
    x.append(Searchbar);
    let Searchbutton = document.createElement("button");
    Searchbutton.innerText = "Search";
    Searchbutton.setAttribute("onclick","obj.Search();");
    let GetAllButton = document.createElement("button");
    GetAllButton.innerText="All Requests";
    GetAllButton.setAttribute("onclick","obj.AjaxCall('GetAll',' ')");
    x.append(Searchbar);
    x.append(Searchbutton);
    x.append(document.createElement("br"));
    x.append(GetAllButton);
    x.append(body);
    this.mode="requests";
  }
  }
RequestChange(move){
let x = document.getElementById("inbody");
if (move=="prev"){
x.innerText="Previous";
this.AjaxCall("prev",document.getElementById("date").value);
}
else if(move="next"){
x.innerText="Next";
this.AjaxCall("next",document.getElementById("date").value);
}
}
Search(){
  let search = document.getElementById("Searchbar").value;
  if(search!="")
  {
    this.AjaxCall("Search"," ",search);
  }
else{
  alert("Enter Some String");
}
}
Done(){
  this.AjaxCall("Done",document.getElementById("status").options[document.getElementById("status").selectedIndex].text,document.getElementById("hiddenToken").value)
}
AjaxCall(move,date,token=""){
  if(date!="")
  {
$.ajax({
  url:document.url,
  type:"get",
  data:{
    "move":move,
    "date":date,
    "token":token,
  },
  success:function(data){
 if(data["StatuS"]=="Success"){
   if(move=="Done"){
console.log("Updated");
   }
   else if(move=="Search"||move == "GetAll"){
console.log(data["searches"]);
let x = document.getElementById("inbody");
x.innerHTML="";
let table = document.createElement("table");
table.width = "60%";
table.style.border= "1px solid black";
table.style.borderCollapse =  "collapse";
x.append(table);
let row = table.insertRow(0);
let tokentitle = row.insertCell(0);
tokentitle.style.border= "1px solid black";
tokentitle.innerHTML = "Token";
let nametitle = row.insertCell(1);
nametitle.style.border= "1px solid black";
nametitle.innerHTML="Name";
let Sujecttitle = row.insertCell(2);
Sujecttitle.style.border= "1px solid black";
Sujecttitle.innerHTML="Subject";
let Statustitle = row.insertCell(3);
Statustitle.style.border= "1px solid black";
Statustitle.innerHTML="Status";
for(var i in data["searches"])
{
let row = table.insertRow(1);
let token = row.insertCell(0);
let Name = row.insertCell(1);
let Subject = row.insertCell(2);
let Status= row.insertCell(3);
token.style.border= "1px solid black";
Name.style.border= "1px solid black";
Subject.style.border= "1px solid black";
Status.style.border= "1px solid black";
let link = document.createElement("a");
link.setAttribute('href',"#");
link.setAttribute("onclick","obj.AjaxCall('display',' ','"+data["searches"][i]["token"]+"');");
link.innerText=data["searches"][i]["token"];
Status.innerHTML =data["searches"][i]["Status"]; 
Subject.innerHTML = data["searches"][i]["Subject"]; 
token.append(link);
Name.innerHTML = data["searches"][i]["Name"];
}
   }
   else if (move=="next"||move=="prev"||move=="display")
   {
   console.log("Data got it!");
   let x = document.getElementById("inbody");
   x.innerHTML="";
   let token = document.createElement("h2");
   token.innerText = "Token: "+data["token"];
   let hiddentoken = document.createElement("input");
   hiddentoken.setAttribute("type","hidden");
   hiddentoken.setAttribute("id","hiddenToken");
   hiddentoken.setAttribute("value",data["token"]);
   x.append(hiddentoken);
   x.append(token);
   let Name = document.createElement("h2");
   Name.innerText = "Name: " + data["Student_Name"];
   x.append(Name);
   let Dept = document.createElement("h3");
   Dept.innerText = "Dept: "+data["Dept"]
   x.append(Dept);
   let CYear = document.createElement("h4");
   CYear.innerText = 'Current Year: '+data["Current_Year"];
   x.append(CYear);
   let AYear = document.createElement("h4");
   AYear.innerText = "Admission Year: "+data["Admission_Year"];
   x.append(AYear);
   let Subject = document.createElement("p");
   Subject.innerText = "Subject: "+data["Subject"];
   x.append(Subject);
   let RQ = document.createElement("p");
   RQ.innerText = "Request: "+data["Request"];
   x.append(RQ);
   let files =data["files"];
   for(var i in files){
    let file = document.createElement('a');
    //{% load static %}
    file.setAttribute("href","{% static 'images' %}"+files[i]);
    file.setAttribute("target","_blank");
    file.innerText = "file"+i;
  x.append(file); 
  x.append(document.createElement("br"));
  }
   let Status = document.createElement("select");
   Status.setAttribute("id","status");
   x.append(Status);
   let Pending = document.createElement("option"), Approve = document.createElement("option"), Reject = document.createElement("option");
   Pending.setAttribute("value","pending");
   Pending.text = 'Pending';
   Approve.setAttribute("value","approve");
   Approve.text = 'Approve';
   Reject.setAttribute("value","reject");
   Reject.text = "Reject";
   Status.add(Pending);
   Status.add(Approve);
   Status.add(Reject);
   let options = Status.options;
   console.log(options);
   for(var p =0;p<options.length;p++)
   {
     console.log(options[p].text);
     if(options[p].text==data["Status"])
   {console.log(data["Status"]);
   Status.selectedIndex = p;

   }
  }
   let button = document.createElement("button");
   button.setAttribute("onclick","obj.Done();")
   x.append(document.createElement("br"));
   button.innerText = "Done";
   x.append(button);
  }
 }
 else{
   console.log("Failed");
 }
  },
  error:function(){
console.log("Not working bro!!");
  }
});
}
else{
  alert("Please Select a valid date");
}
}
};
obj = new View();
        </script>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</html>