<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

      
      
      #linkk:hover {
        text-decoration:underline;
      }
      
      
      </style>
</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 onload="CN.change_theme('{{ Counter.Counter_Theme }}');">
    <nav class="navbar navbar-expand-lg navbar-light bg-light" id="navBar">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">{{ Counter.Counter_Title }}</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="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#" onclick="CN.Answering();"  id="AnsButton">Start Answering</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"  onclick="CN.CustomersQueries(-1);">Previous Customer</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"  onclick="CN.CustomersQueries(1);">Next Customer</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"  onclick="CN.All_Customers();">All Customers</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">People in Queue:</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#" id="crowd"></a>
              </li>
            </ul>
            <div class="nav-item">
              <a class="nav-link" href="#" onclick="AjaxCall('','PrincipalRequests');">Principal Requests</a>
            </div>
            <div 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="#" onclick="AjaxCall('','mySettings');">settings</a></li>
                  <li><a class="dropdown-item" href="/form_creator/" >Forms</a></li>
                  <li><a class="dropdown-item" href="#" onclick="AjaxCall('','myQueries');">Queries</a></li>
                  
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#" onclick="CN.logout();">Sign Out</a></li>
                </ul>
            </div>
          </div>
        </div>
      </nav>
   <input type="hidden" id="id" value="0">
  <center> <div id="queries" style="padding:5%">
<div id="alert"></div>
   </div></center>
</body>


<script>

var tokens=[];
function AjaxCall(S,want,data=[]){
    let index = document.getElementById("id").value;
$.ajax({
    url:document.url,
    data:{
    "work":"wow",
    "want":want,
    "Status":S,
    "index":index,
    "data":JSON.stringify(data),
    },
    success: function (data)
    {
        
        if(want=="crowd"){
            document.getElementById("crowd").innerText=data["crowd"];
        }
        else if(want=="All_Customers"){
          let x = document.getElementById("queries");
        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 Statustitle = row.insertCell(2);
        Statustitle.style.border= "1px solid black";
        Statustitle.innerHTML="Answered";
        for(var i in data["all"])
        {
        let row = table.insertRow(1);
        let token = row.insertCell(0);
        let Name = row.insertCell(1);

        let Status= row.insertCell(2);
        token.style.border= "1px solid black";
        Name.style.border= "1px solid black";

        Status.style.border= "1px solid black";
        let link = document.createElement("a");
        link.setAttribute('href',"#");
        console.log(data["all"][i]["token"]);
        link.setAttribute("onclick","AjaxCall('Current','queries','"+data["all"][i]["token"]+"');");
        link.innerText=data["all"][i]["token"];
        Status.innerHTML =data["all"][i]["Status"]; 

        token.append(link);
        Name.innerHTML = data["all"][i]["Name"];
        }
        }
        else if(want=="queries")
        {   if(data["Status"]=="Success")
            {
                document.getElementById("id").value=parseInt(document.getElementById("id").value)+1;
                document.getElementById("queries").innerHTML="";
                let Customer=document.createElement("div");

                let i=0,v=document.getElementById("queries"),j;
                console.log(data);
                let token = Object.keys(data)[0];
                let tok = document.createElement("H3");
                tok.setAttribute("id","token");
                tok.innerText=token;
                Customer.append(tok);
                let Name = document.createElement("h4"),Dept=document.createElement("h4"), CYear = document.createElement("h4"), AYear = document.createElement("h4");  
                Name.innerText = "Name: "+data["Name"];
                Dept.innerText = "Dept: "+data["Dept"];
                CYear.innerText = "Current Year: "+data["CYear"];
                AYear.innerText = "Admission Year: "+data["AYear"];               
                Customer.append(Name);
                Customer.append(Dept);
                Customer.append(CYear);
                Customer.append(AYear);
                let queries=data[token];
                
                for(i in queries){
                    let query=document.createElement("p"),ans=document.createElement("textarea");
                    ans.disabled=data["answered"];
                    ans.setAttribute("type","text");
                    ans.setAttribute("id","ans"+i);
                    ans.setAttribute("class","answers");
                    query.innerText=queries[i][0]+"    data: "+queries[i][1];
                    Customer.append(document.createElement("br"));
                    Customer.append(document.createElement("br"));
                    Customer.append(query);
                    Customer.append(ans);
                                }
                                Customer.append(document.createElement("br"));
                    Customer.append(document.createElement("br"));
                    
                for(i in data["files"]){
                     //{% load static %}
                     let link = document.createElement("a");
                     link.innerText = "file"+i;
                     link.setAttribute("href","{% static 'images' %}"+data["files"][i]);
                     link.setAttribute("target","_blank");
                    Customer.append(link);
                    Customer.append(document.createElement("br"));
                }
                let files = document.createElement("div"), fileAdd = document.createElement("button");
                Customer.append(files);
                fileAdd.innerText = "Add File";
                files.value="0";
                fileAdd.setAttribute('id',"fileAdd");
                files.setAttribute("id","Files");
                files.append(fileAdd);
                fileAdd.disabled = data["answered"];
                fileAdd.setAttribute("onclick","CN.Add_File()");
                let answerButton = document.createElement("button");
                answerButton.setAttribute("id","answerbutton");
                answerButton.disabled=data["answered"];
                answerButton.innerText="Answer";
                answerButton.setAttribute("onclick","CN.AnswerCustomer();");
                Customer.append(document.createElement("br"));
                Customer.append(document.createElement("br"));
                Customer.append(answerButton);
                document.getElementById("queries").append(Customer);

            }
            else if(data["Success"]=="Fail")
            {
                alert("No more customers try again later");
            }
        }
        else if(want=="mySettings"){
            let v=document.getElementById("queries");
            v.innerHTML="";
            let Div = document.createElement("div");
            v.append(Div);
            let H1 = document.createElement("h1");
            H1.innerText="Profile";
            Div.append(H1);
            Div.append(document.createElement("br"));
            Div.append(document.createElement("br"));
            let LabelTitle=document.createElement("label");
            LabelTitle.innerText="Counter Title: ";
            Div.append(LabelTitle);
            let CTitle = document.createElement("input");
            Div.append(CTitle); 
            CTitle.setAttribute("type","text");
            CTitle.setAttribute("id","Counter_Title");
            CTitle.setAttribute("value",data["Counter_Title"]);
            Div.append(document.createElement("br"));
            Div.append(document.createElement("br"));
            let LabelDuty=document.createElement("label");
            LabelDuty.innerText = "Counter Duty: ";
            Div.append(LabelDuty);
            let CDuty = document.createElement("input");
            CDuty.setAttribute("id","Counter_Duty");
            Div.append(CDuty);
            CDuty.setAttribute("type","text");
            CDuty.setAttribute("value",data["Counter_Duty"]);
            Div.append(document.createElement("br"));
            Div.append(document.createElement("br"));
            let LabelTheme =document.createElement("label");
            
            LabelTheme.innerText = "Theme: "
            Div.append(LabelTheme);
            let CTheme = document.createElement("select");
            CTheme.setAttribute("id","Counter_Theme");
            Div.append(CTheme);
            let darkTheme = document.createElement("option");
            CTheme.appendChild(darkTheme);
            darkTheme.setAttribute("value","dark");
            darkTheme.innerText="Dark";
            let lightTheme=document.createElement("option");
            CTheme.appendChild(lightTheme);
            lightTheme.setAttribute("value","light");
            lightTheme.innerText="Light";
            if(data["Counter_Theme"]=='dark')
            {
                CTheme.selectedIndex=0;
            }
            else if(data["Counter_Theme"]=='light'){
                CTheme.selectedIndex=1;
            }
            Div.append(document.createElement("br"));
            Div.append(document.createElement("br"));
            let TimeLabel =document.createElement("label");
            Div.append(TimeLabel);
            TimeLabel.innerText="Counter Reply Time: ";
            let Counter_Reply_Time=document.createElement("input");
            Counter_Reply_Time.setAttribute("id","Counter_Reply_Time");
            Counter_Reply_Time.setAttribute("type","number");
            Counter_Reply_Time.value=parseInt(data["Counter_Reply_Time"]);
            Div.append(Counter_Reply_Time);
            Div.append(document.createElement("br"));
            Div.append(document.createElement("br"));
            let SaveButton = document.createElement("button");
            SaveButton.innerText="Save Data";
            SaveButton.setAttribute("onclick","CN.change_theme();");
            Div.append(SaveButton); 
            console.log(data);
        }
        else if(want=="myQueries"){
          let v=document.getElementById("queries");
            v.innerHTML="";
            let alertDiv = document.createElement("div");
            alertDiv.setAttribute("id","alert");
            v.append(alertDiv);
            let addButton = document.createElement("button");
            addButton.innerText = "Add Query";
            v.append(addButton);
            addButton.setAttribute("onclick","CN.addQuery();");
            let table = document.createElement("table");
            table.width = "60%";
            v.append(table);
            let queries=data["Data"];
            let row = table.insertRow(0);
            let queryTitle = row.insertCell(0);
            queryTitle.style.border= "1px solid black";
            queryTitle.innerHTML="<b>Query</b>";
            let DOC = row.insertCell(1);
            DOC.style.border= "1px solid black";
            DOC.innerHTML = "<b>Date of Creation</b>";
            for(i in queries){
              let row = table.insertRow(1);
              let query = row.insertCell(0);
              query.style.border= "1px solid black";
              let DOC = row.insertCell(1);
              DOC.style.border= "1px solid black";
              let link = document.createElement("a");
              link.style.color = "#b8bab5";
              link.setAttribute("id","linkk");
              link.innerText =  queries[i]["query"];
              link.setAttribute("href","#");
              link.setAttribute("onclick","AjaxCall('"+queries[i]["id"]+"','query')");
              query.append(link);
              DOC.innerHTML = queries[i]["DOC"];
            }
            

        }
        else if(want=="query"){
          let v=document.getElementById("queries");
            v.innerHTML="";
            let alertDiv = document.createElement("div");
            alertDiv.setAttribute("id","alert");
            v.append(alertDiv);
            let titleID = document.createElement("h3");
            titleID.innerText = "Query ID:"+data['id'];
            v.append(titleID);
            let Querylabel = document.createElement("label");
            Querylabel.innerText = "Query";
            Querylabel.setAttribute("for","QueryInput");
            let QueryInput = document.createElement("textarea");
            QueryInput.value=data["query"];
            let SaveButton = document.createElement("button"), DeleteButton  = document.createElement("button");
            SaveButton.innerText="Save";
            QueryInput.setAttribute("id",'QueryInput');
            SaveButton.setAttribute('id',"SaveButton");
            DeleteButton.innerText="Delete";
            DeleteButton.setAttribute("id","DeleteButton");
            SaveButton.setAttribute("onclick","CN.SaveQuery('"+data['id']+"')");
            DeleteButton.setAttribute("onclick","CN.DeleteQuery('"+data['id']+"')");
            v.append(Querylabel);
            v.append(document.createElement("br"));
            v.append(QueryInput);
            v.append(document.createElement("br"));
            v.append(SaveButton);
            v.append(document.createElement("br"));
            v.append(DeleteButton);
            }
        else if(want=="querySave"||want=='queryDelete'){
          
          let div=document.createElement("div");
                            div.setAttribute("class",'alert alert-success');
                            div.setAttribute("role",'alert');
                            div.innerText="Successfully operations Completed.";
                            document.getElementById("alert").append(div);
                            setTimeout(function(){
                                document.getElementById("alert").innerHTML="";
                            },5000);
            
          }
        else if(want=="logout"){
          window.open("/login/","_self");
        }
        else if(want=="PrincipalRequests"){
          let x = document.getElementById("queries");
        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","AjaxCall('"+data["searches"][i]["token"]+"','Request');");
        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(want=="Request"){
          console.log(data);
         let x = document.getElementById("queries");
          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("h3");
          Status.innerText = "Status: "+data["Status"];
          x.append(Status);
        }
        else{
            console.log(want,data);
        }

    },
    error: function (){
console.log("Error Man");
    },
});

    }
    function AjaxPost(S,want,data=[]){
        let form = new FormData();
  let files = document.getElementsByClassName("filess");
  console.log(files);
  for(var i in files){
    try{
      console.log(files[i].files[0]);
      form.append("file"+i,files[i].files[0]);
    }
    catch{
      console.log("Wrong!!");
    }
  } 
  form.append("want",want);
    form.append("Status",S);
    form.append("data",JSON.stringify(data));
    form.append("csrfmiddlewaretoken", "{{ csrf_token }}");
    $.ajax({
    url:document.url,
    type:'post',
    data:form,
    contentType: false,
          processData: false,
          success: function(response){
              if(response["Status"]=="Success"){
                console.log("Success");
              }
          },
          error: function(){
            console.log("Errorr");
          }

  });
    }
class timer{
 constructor(){
     pass;
 }
 timerStart(){
     pass;
 }
 timerReset(){
     pass;
 }
};

    class Dashboard_Controller{
    constructor() {
        this.status_i = false;
        this.button =document.getElementById("AnsButton");
        this.index=0;
        this.files=0;

    }
    addQuery(){
      let v=document.getElementById("queries");
            v.innerHTML="";
            let alertDiv = document.createElement("div");
            alertDiv.setAttribute("id","alert");
            v.append(alertDiv);
            let titleID = document.createElement("h3");
            titleID.innerText = "Query ID: New";
            v.append(titleID);
            let Querylabel = document.createElement("label");
            Querylabel.innerText = "Query";
            Querylabel.setAttribute("for","QueryInput");
            let QueryInput = document.createElement("textarea");
            QueryInput.setAttribute("id",'QueryInput');
            
            let SaveButton = document.createElement("button"), DeleteButton  = document.createElement("button");
            SaveButton.innerText="Save";
            DeleteButton.innerText="Cancel";
            SaveButton.setAttribute("onclick","CN.SaveQuery(-1)");
            DeleteButton.setAttribute("onclick","AjaxCall('','myQueries');");
            QueryInput.setAttribute("id",'QueryInput');
            SaveButton.setAttribute('id',"SaveButton");
            v.append(Querylabel);
            v.append(document.createElement("br"));
            v.append(QueryInput);
            v.append(document.createElement("br"));
            v.append(SaveButton);
            v.append(document.createElement("br"));
            v.append(DeleteButton);
         
    }
    SaveQuery(id){
      let value=document.getElementById("QueryInput").value;
      if(value!=''){
      AjaxCall(id,"querySave",value);
      if(id==-1){

      document.getElementById("QueryInput").value="";
     }// AjaxCall("","myQueries"); //back steps to avoid collision
     else{
     document.getElementById("SaveButton").disabled=true;
      document.getElementById("DeleteButton").disabled=true;
      setTimeout(function(){
        AjaxCall("","myQueries"); 
                            },1500);
     }
    }else{
      let div=document.createElement("div");
                            div.setAttribute("class",'alert alert-danger');
                            div.setAttribute("role",'alert');
                            div.innerText="Empty Query not allowed.";
                            document.getElementById("alert").append(div);
                            setTimeout(function(){
                                document.getElementById("alert").innerHTML="";
                            },5000);
         
    }
    }
    DeleteQuery(id){
      AjaxCall(id,"queryDelete");
      document.getElementById("SaveButton").disabled=true;
      document.getElementById("DeleteButton").disabled=true;
      setTimeout(function(){
        AjaxCall("","myQueries"); 
                            },1500);
      //AjaxCall("","myQueries");  //backsteps to avoid collision
      
    }
    All_Customers(){
      AjaxCall(" ","All_Customers");
    }
    Add_File(){
        console.log(document.getElementById("Files").value);
  if(parseInt(document.getElementById("Files").value)<5){
  let x = document.getElementById("Files");
  let file= document.createElement("input");
  file.setAttribute("type","file");
  file.setAttribute("class","filess");
  file.setAttribute("id","file"+document.getElementById("Files").value);
  document.getElementById("Files").value=parseInt(document.getElementById("Files").value)+1;
  x.append(file);
  }
  else{
    alert("You can only upload 5 files maximum");
  }
}
    gettingStatus(){
        AjaxCall("","crowd");
    }
     Answering()
    {
        if(this.status_i==false)
        {
            this.button.innerText="Stop Answering queries";
            this.status_i=true;
            AjaxCall("on","ans");
            console.log("1");
        }
        else{
            this.button.innerText="Start Answering queries";
            this.status_i=false;
            AjaxCall("off","ans"); 
            console.log("2");

        }
    }
    CustomersQueries(x){
        if(x==1){
        AjaxCall("next","queries");
        this.files=0;
        }
        else{
            AjaxCall("prev","queries");
            this.files=0;
        }
    }
    AnswerCustomer(){
        let answers=document.getElementsByClassName("answers");
       let X=[];
        for(var i in answers){
            if(answers[i].value!=undefined)
            {
            X.push(answers[i].value);
            answers[i].disabled=true;
            }
        }
        document.getElementById("answerbutton").disabled=true;
        document.getElementById("fileAdd").disabled=true;
        AjaxPost(document.getElementById("token").innerText,"answers",X);
       
    }
    change_theme(theme="")
    {
      let x=document.getElementById("navBar");
      let y;
      if(theme==""){
        y=document.getElementById("Counter_Theme").selectedIndex;
      }
      else{
        if(theme=="dark"){
          y=0;
        }
        else{
          y=1;
        }
      }
      if(y==0)
      {
        x.setAttribute("class","navbar navbar-expand-lg navbar-dark bg-dark");
        document.body.style.backgroundColor = "#010b13";
        document.body.style.color="#b8bab5";
        
      theme = "dark";
      }
      else{
          x.setAttribute("class","navbar navbar-expand-lg navbar-light bg-light");
          document.body.style.backgroundColor = "white";
          theme="light";
      }
    
      let Counter_Title = document.getElementById("Counter_Title").value;
      let Counter_Duty = document.getElementById("Counter_Duty").value;
      let Counter_Reply_Time = document.getElementById("Counter_Reply_Time").value;
      AjaxCall("","settingsChange",[Counter_Title,Counter_Duty,theme,Counter_Reply_Time]);
      
    }
   logout(){
    AjaxCall("off","ans"); 
    AjaxCall('','logout');
   }
};
CN = new Dashboard_Controller();
setInterval(CN.gettingStatus,1000);
    </script>
    <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>