<%- include("./partials/teheader.ejs") %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="/stylesheets/newexam.css">

</head>
<%- include("./partials/tenav.ejs") %>

<body>

  <div class="container mt-4">
    <div class="col-md-12 fixed mt-4 text-center">
      <div class="sticky-top">
        <h6><b>Number of Questions: </b><span id="qno"><%=qno%></span></h6>
        <h6><b>Total Marks: </b><span id="marks"><%=marks%></span></h6>
      </div>
    </div>
    <hr>
    <div class="">
      <div class="col-md-12" class="main">
        <form class="" action="/te/exam/<%=questions[0].examid%>/edit?_method=patch" method="post">
          <div id=cf>
            <%for(var i=0;i<=questions.length-1;i++){%>
            <div class="container">
              <div class="row">
                <div class="col m10">
                  <div class="row">
                    <div class="input-field col s12">
                      <input id="q0" type="text" class="validate" name="questions[<%=i%>][q]" value="<%=questions[i]["q"]%>">
                      <label for="q0">Question</label>
                    </div>
                  </div>
                  <div class="row">
                    <div class="input-field col s6">
                      <input id="optionNo0" type="number" class="validate optionno" min="2" value="<%=questions[i].options.length%>">
                      <label for="optionNo0">Number of options</label>
                    </div>
                    <div class="input-field col s6">
                      <input id="marks<%=i%>" type="number" class="validate marks" min="1" name="questions[<%=i%>][marks]" value="<%=questions[i].marks%>">
                      <label for="marks<%=i%>">Marks for this question</label>
                    </div>
                  </div>
                  <label>Options:</label>
                  <div class="row options">
                    <%for(var j=1;j<=questions[i].options.length;j++){%>
                    <div class="input-field col s6">
                      <input id="o<%=j%>" type="text" class="validate" name="options[<%=i%>][<%=j%>]" value="<%=questions[i].options[j-1]%>">
                      <label for="o<%=j%>"><%=j%></label>
                    </div>
                    <%}%>
                    </div>
                  <div class="row">
                    <div class="input-field col s12">
                      <input id="c0" type="number" class="validate" name="questions[<%=i%>][ans]" min="1" value="<%=questions[i]["ans"]%>" >
                    <label for="c0">Correct Option Number</label>
                  </div>
                </div>
              </div>
              <div class="col-md-2 d-flex justify-content-around align-items-center">
                <button class="plus btn" id="plus<%=i%>">+</button>
                <%if(i!=0){%>
                <button class="minus btn" id="minus<%=i%>">-</button>
                <%}%>
                  </div>
                </div>
              </div>

          <%}%>
              </div>
              <div class="row d-flex justify-content-center">
                <a href="/te/exam/staged" class="btn m-1">Back</a>
                <button class="btn">Submit</button>

              </div>
        </form>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="/scripts/examnew.js"></script>
  <%- include("./partials/footer.ejs") %>
