<!DOCTYPE html>
    <html lang="en">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
      
    <meta charset="utf-8">
    <title>Welcome to Official Counters</title>
    </head profile="http://www.w3.org/2005/10/profile">
    <link rel="icon" 
          type="image/png" 
          href="http://example.com/myicon.png">
    <body id="body" style="background-color: #98D0EF;" >
      <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #507FB7;" 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="/principal_request/" target="_blank">Principal's Request</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Notice Board</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Forms
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#">Admission form</a></li>
                  <li><a class="dropdown-item" href="#">Scholarship form</a></li>
          <li><a class="dropdown-item" href="#">NSS form</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Not included then click here...</a></li>
                </ul>
              </li>
              
            </ul>
          
          </div>
        </div>
      </nav>
         
         
            <div style="text-align:center"><h3 style="text-align: right;">Time Left:<span id="time" style="text-align:right"></span></h3></div>
         
          <div>
              <h3 style="text-align:right;">Number of People in Queue.  <div id="queue">{{ crowd }}</div></h3>
              <h2 id="title">How Can I Help You?</h2>
              <!-- check boxes  loop here form of queries-->
              <form>
                <div class="mb-3">
                  <label for="Name" class="form-label">Student Name:</label>
                  <input type="text" class="form-control" id="Name" >
                </div>
                <div class="mb-3">
                  <label for="Dept" class="form-label">Dept:</label>
                  <input type="text" class="form-control" id="Dept" >
                </div>
                <!--current year, admission year, extra.-->
                <div class="mb-3">
                  <label for="CYear" class="form-label">Current Year:</label>
                  <input type="text" class="form-control" id="CYear" >
                </div>
                <div class="mb-3">
                  <label for="AYear" class="form-label">Admission Year:</label>
                  <input type="text" class="form-control" id="AYear" >
                </div>
              
             <ul class="list-group">
               {% for query in queries %}
              <li class="list-group-item"><div class="row">
                <div class="col-lg-6">
                  <div class="input-group">
                    <span class="input-group-addon">
                      
                     <label class="list-group-item"><input type="checkbox" aria-label="..." class="queries" value="{{ query.id }}"> {{ query.query }}  with data: <input type="text" id="data{{ query.id }}"></label>
                    </span>
                  
                  </div><!-- /input-group -->
                  
                </div></li>
                {% endfor %}
                <!--#########
                check boxes loop end here 
            ############-->
                <li class="list-group-item"> <div><p> if query not present in above list type your query down here</p>
                 <input type="text" height = "30vw" width="80%" placeholder="type your unique query here..."   id="bigQuery">
                </li>
                <li class="list-group-item">
                </div>
                 <input type="hidden" id="counteruname" value="{{ counter.Counter.username }}">
                </li>
                </ul>
                
                </form>
                <div id="files">
                  <button onclick="obg.Add_File();" id="add">Add File</button>
                </div>
                <button onclick="obg.Submit_All();" id="sub">Submit</button>
<div id="Queries">

</div>
              <!-- form of queries ends here 
                 <li class="list-group-item"><button type="button" class="list-group-item">Cras justo odio<span class="badge">9</span></button></li>
                <li class="list-group-item"><button type="button" class="list-group-item">Cras justo odio<span class="badge">9</span></button></li>-->
                
              
              <h2>You can submit following forms here.</h2>
          <ul class="list-group">
            <form>
              {% for form in forms %}
            <li class="list-group-item"><a class="list-group-item" href="{% url 'forms' %}?id={{ form.id }}">{{ form.Name }}</a></li>
              {% endfor %}
          <!--  <li class="list-group-item"><button type="button" class="list-group-item">Cras justo odio<span class="badge">9</span></button></li>
            <li class="list-group-item"><button type="button" class="list-group-item">Cras justo odio<span class="badge">9</span></button></li>-->
            </ul>
          </form>
            <br><bR>
        </div>
            <nav class="navbar fixed-bottom navbar-light" style="background-color: #507FB7;"><table><tr><td><h4>Token No:</h4</td><td><h4 id="token">{{ token }}</h4></td></tr></table></nav>

    <br>
    <br>
        <script>

var decision="timer";
Getting_V=function(token,decision,queries=[])
{
  var temp;

var response=$.ajax({
            type:'GET',
            url: "{% url 'get_test' %}",
            data: {
                'token': token,
                "decision":decision,
                "counter": document.getElementById("counteruname").value,
                "queries": JSON.stringify(queries),
                "bigQuery":document.getElementById("bigQuery").value,

            },
            error: function(xhr, status, error) {
                                                    alert("disconnected! \n copy token number:"+$("#token").html()+" to get again in Queue");
                                                    console.log("Confirmedddd");
                                                },
            success: function (dd){
              console.log(dd,decision);
              if(decision=="check")
              {
                if(dd["tokenStatus"]==true)
                {
                  console.log("WOrkksa");
                  document.getElementById("token").innerText=token;
                }
                else{
                  alert("Token not present");
                  // $("#token").html(LastT);
                   console.log("qwertyCheck");
            
                }
                
              }
              else if(decision=="Answers")
              {
                if(dd["answered"]){
                  
              
                let x=document.createElement("div");
                //document.getElementById("title").innerText="Answers";
                let anss=dd["Answers"];
                  
                  let h=document.createElement("h3");
                  h.innerText="Answers";
                  x.append(h);
                for(var ans in anss)
                {
                  let p=document.createElement("p");
                  p.innerText=anss[ans];
                  x.append(p);
                }
                let answerFiles = dd["answerFiles"];
                if (answerFiles.length>0){
                        let FilesTitle = document.createElement("h4");
                        FilesTitle.innerText="Files Shared";
                        x.append(FilesTitle);
                        
                        for(var i in answerFiles){
                                let link = document.createElement("a");
                                  link.innerText = "file"+i;
                                  //{% load static %}
                                  link.setAttribute("href","{% static 'images' %}"+dd["answerFiles"][i]);
                                  link.setAttribute("target","_blank");
                                  x.append(link);
                                x.append(document.createElement("br"));
                              }
              }
              var opened = window.open("","_self");
opened.document.write(x.innerHTML);
                  //x.setAttribute("id","End");
                
              }
              }
              else if(decision=="Submit")
              {
                let p=0;
                let tp=document.getElementsByClassName("queries");
                  for(p=0;p<tp.length;p++)
                  {
                   tp[p].disabled = true;
                  }
                  
              }
              else if('X'==dd["value"][0])
              {
                $("#token").html(dd["value"].slice(1));  
              }
              else if(decision=="timer")
              {
                var data = dd;
                console.log(data);
                $("#time").html(data["num"]);
               

              }
             
                                  },
                                
        });

}
 
class test
{
constructor(){
  this.files=0;
  this.looop=setInterval(this.touchh, 1000);
}
Ajax_Post(token,decision,queries=[]){
  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("Name",document.getElementById("Name").value);
    form.append("Dept",document.getElementById("Dept").value);
    form.append("CYear",document.getElementById("CYear").value);
    form.append("AYear",document.getElementById("AYear").value);
    form.append('token', token);
    form.append("decision",decision);
    form.append("counter", document.getElementById("counteruname").value);
    form.append("queries", JSON.stringify(queries));
    form.append("bigQuery",document.getElementById("bigQuery").value);
    form.append("csrfmiddlewaretoken", "{{ csrf_token }}");
  $.ajax({
    url:"/get_test/",
    type:'post',
    data:form,
    contentType: false,
          processData: false,
          success: function(response){
              if(response["Status"]=="Success"){
                console.log("Success");
                let p=0;
                let tp=document.getElementsByClassName("queries");
                  for(p=0;p<tp.length;p++)
                  {
                   tp[p].disabled = true;
                  }
                  document.getElementById("add").disabled=true;
                  document.getElementById("sub").disabled=true;
              }
          },
          error: function(){
            console.log("Errorr");
          }

  });
}
 touchh(){
  var token = $("#token").html();

  if($("#time").html()=="0")
        {
          decision="Answers";
          try{
      let x=document.getElementById("Queries");
      x.innerHTML="";
      }
      catch(error){
        clearInterval(this.looop);
      }
          Getting_V(token,decision);
         
          //make chat boxes available for responses for each query next stop
        }
  else{
        
        Getting_V(token,"timer");

      }
     

}
Submit_All()
{
  
  var token = $("#token").html();
 
          decision="Submit";
          let queries=document.getElementsByClassName("queries"),i;
          let ques=[];
          console.log(queries);
          for(i=0;i<queries.length;i++)
          {

            if(queries[i].checked)
            {
              ques.push([queries[i].value,document.getElementById("data"+queries[i].value).value]);
            }
          }
          console.log(ques);
          let x=document.getElementById("Queries");
          let load = document.createElement("div");
          x.append(load);
          load.setAttribute("class","d-flex justify-content-center");
          let inload=document.createElement("div");
          load.append(inload);
          inload.setAttribute("class","spinner-border");
          inload.setAttribute("role","status");
          let inSpan = document.createElement("span");
          inload.append(inSpan);
          inSpan.setAttribute("class","sr-only");
          inSpan.innerText="Loading...";
          this.Ajax_Post(token,decision,ques);
          //Getting_V(token,decision,ques);
          //make chat boxes available for responses for each query next stop
        
}
Add_File(){
  if(this.files<5){
  let x = document.getElementById("files");
  let file= document.createElement("input");
  file.setAttribute("type","file");
  file.setAttribute("class","filess");
  file.setAttribute("id","file"+this.files);
  this.files+=1;
  x.append(file);
  }
  else{
    alert("You can only upload 5 files maximum");
  }
}
check_token(){
        let token0 = prompt("Enter token number:","");
        if(token0!=null)
        { let token1 = $("#token").html();
          let LastT = $("#token").html();
          decision="check";
          Getting_V(token0,decision,token1);
        //  decision="timer";
        }
       
}

get_token()
{
                    Getting_V("X");                  
                   setInterval(this.touchh, 1000);        
}


};

obg = new test();
        </script>
    <input type="hidden" name="token" value="{{ token }}" id="token">
    </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>
