<!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-light bg-light">
        <div class="container-fluid">
          <span class="navbar-brand mb-0 h1">Principal's Request</span>
        </div>
      </nav>
      <h2>Referal Token:{{ token }}</h2>
      <div id="Body">
      <form id="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>
          <div class="mb-3">
            <label for="Subject" class="form-label">Subject:</label>
            <input type="text" class="form-control" id="Subject" >
          </div>
       
          <div class="mb-3">
            <label for="Request" class="form-label">Request:</label>
            <textarea class="form-control" id="Request" rows="3"></textarea>
          </div>
         
      </form>
      <div id="files">
        <button onclick="P.Add_File();"  class="btn btn-secondary">Add Files</button>
    </div>
      <center><button type="button" class="btn btn-primary" onclick="P.AjaxPost();">Submit</button></center>
    </div> <script>
          class Principal{
constructor(){
    this.files=0;
}
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");
  }
}
AjaxPost(){
    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("Subject",document.getElementById("Subject").value);
    form.append("Request",document.getElementById("Request").value);
    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");
                let x = document.getElementById("Body");
                x.innerHTML="Refer above token to track your Request";
              }
              else{
                console.log("Failedd");
              }
          },
          error: function(){
            console.log("Errorr");
          }

  });
}
          };
P = new Principal();
      </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>