<!DOCTYPE html>
<html>
<head>
  {% load static %}
  <title>Pariksha | Create Quiz</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
  <link href="{% static 'css/quiz_attempt_page.css' %}" rel="stylesheet">
  <link href="{% static 'css/quiz_create_page.css' %}" rel="stylesheet">
  <script src="{% static 'js/quiz_create_page.js' %}"></script>
  <style>
          
         .flow {
            border: solid 2px #3F51B5;
            background-color: white;
            border-radius: 1em;
            margin-bottom: 200px;
            box-shadow: #999999 3px 5px 6px;

         }  
         .step {
            margin: 40px;
         }
         .aut_btn {
            padding: 15px;
            font-size: 1em;
            font-weight: bold;
            width: 200px;
            background-color: white;
            border: solid 2px #3F51B5;
            cursor: pointer;
            border-radius: 6px;
            color: #3F51B5;
            transition: background-color 0.2s ease, color 0.2s ease;
         }
         .aut_btn > a {
            display: block;
         }
         .custom-file-upload {
            display: block;
            text-align: center;
            padding: 15px;
            font-size: 1em;
            font-weight: bold;
            width: 166px;
            cursor: pointer;
            background-color: white;
            border: solid 2px #3F51B5;
            border-radius: 6px;
            color: #3F51B5;
            transition: background-color 0.2s ease, color 0.2s ease;
         }
         .aut_btn:hover, .custom-file-upload:hover {
            background-color: #3F51B5;
            border: solid 2px #3F51B5;
            color: white
         }
         input[type="file"] {
            display: none;
         }
         #automatic_form {
             display: none;
         }
      </style>
</head>
<body onload="add_que()">
    <section>
        <form action="/add_quiz/" class="quiz_create_form" id="manual_form" enctype = "multipart/form-data"  method = "POST">{% csrf_token %}
            <div id="quiz_controls">
                <p><a onclick="show_auto()">Click here to automatically add all questions by uploading csv</a></p>
                <div style="padding: 20px">
                    <h3>Quiz Name:</h3>
                    <input type="text" id="quiz_name" name="quiz_name"><br/>
                </div>
                <div class="quiz_timing_controls">
                    <div>
                        <label for="date"><h3>Quiz Date</h3></label>
                        <input type="date" id="date" name="date">
                    </div>
                    <div>
                        <label for="startTime"><h3>Start Time</h3></label>
                        <input type="time" id="startTime" name="startTime">
                    </div>
                    <div>
                        <label for="length"><h3>length (in minutes)</h3></label>
                        <input type="number" id="length" name="length">
                    </div>
                </div>
            </div>
            <div id="qbunch">
            </div>
            <button type="button" class="man_btn" id="add_question" onclick="add_que()">+ Add Question</button>
            <button type="button" class="man_btn" id="create_submit" onclick="submit_form()">Submit</button>
        </form>


        <form name = "form" enctype = "multipart/form-data" 
         action =  "{% url "uploaded" %}" method = "POST" id="automatic_form" class="quiz_create_form">{% csrf_token %}
         
       
         <div id="quiz_controls">

            <p><a onclick="show_manual()">Click here to manually add all questions</a></p>
            <div style="padding: 20px">
                <h3>Quiz Name:</h3>
                <input type="text" id="quiz_name" name="quiz_name"><br/>
            </div>
            <div class="quiz_timing_controls">
                <div>
                    <label for="date"><h3>Quiz Date</h3></label>
                    <input type="date" id="date" name="date">
                </div>
                <div>
                    <label for="startTime"><h3>Start Time</h3></label>
                    <input type="time" id="startTime" name="startTime">
                </div>
                <div>
                    <label for="length"><h3>length (in minutes)</h3></label>
                    <input type="number" id="length" name="length">
                </div>
            </div>
        </div>


         <div class="flow">
               <section class="step">
                  <h1>Step 1: Download Quiz Template</h1>
                  <a href="{% static 'assets/upload_template.csv' %}" download="upload_template.csv"><button class="aut_btn" type="button">Download CSV</button></a>
               </section>
               <hr/>
               <section class="step">
                  <h1>Step 2: Open downloaded csv file and add questions in each row</h1>
                  <p>Format is as follows: (also specified inside the csv file)</p>
                  <p>Question | OptionA | OptionB | OptionC | OptionD | CorrectOption | QuestionType | Marks | NegativeMarks | Explanation</p>
               </section>
               <hr/>
               <section class="step">
                  <h1>Step 3: Upload the modified document</h1>
                  <label class="custom-file-upload"><input type="file" placeholder="file" name="file" id= />Upload</label>
               </section>
               <hr/>
               <section class="step">
                  <h1>Step 4: After uploading the document click on Submit to create the quiz.</h1>
                  <button class="aut_btn" type = "submit">
                     <strong>Submit</strong>
                  </button>
               </section>
         </div>
         </form>
    </section>

    <script>
        function show_manual() {
            var man = document.getElementById("manual_form");
            var aut = document.getElementById("automatic_form");
            aut.style.display = "none";
            man.style.display = "block";
        }
        function show_auto() {
            var man = document.getElementById("manual_form");
            var aut = document.getElementById("automatic_form");
            aut.style.display = "block";
            man.style.display = "none";
        }
    </script>
</body>
</html>