<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>Pariksha | Quiz dashboard</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">
    <style>
        * {
            font-family: 'Source Sans Pro', sans-serif;
        }
        body {
            margin: 0px;
            background: #F1F3F4;
        }
        @media all and (min-width: 800px) {
            #main_form {
                display: grid;
                grid-template-columns: 300px 1fr;
            }
            #question_palette {
                width: 300px;
                height: 100vh;
                grid-column-start: 1;
                grid-row-start: 1;
                display: grid;
                grid-template-rows: 60px 1fr 140px;
                background-color: white;
            }
            #questions_area {
                height: 100vh;
                overflow-y:scroll;
                grid-column-start: 2;
                grid-row-start: 1;
            }
            #nav_btn {
                display: none;
            }
        }
        
        @media all and (max-width: 800px) {
            #main_form {
                display: grid;
                grid-template-rows: 1fr 140px;
            }
            #question_palette {
                width: 100%;
                overflow: hidden;
                height: 140px;
                display: grid;
                grid-column-start: 1;
                grid-row-start: 2;
                position: fixed;
                bottom: 0px;
                grid-template-rows: 0px 0px 140px;
                background-color: white;
            }
            #questions_area {
                height: 100%;
                overflow-y:scroll;
                grid-column-start: 1;
                grid-row-start: 1;
            }
            #nav_btn {
                display: block;
            }
        }
        table, th, td {
            border: 1px solid black;
        }
        .dashboard {
            display: grid;
            margin-top: 20px;
            grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
        }
        .quiz_info {
            text-align: center;
        }
        .quiz_info > h1 {
            font-size: 2em;
            margin-top: 40px;
            margin-bottom: 0px;
        }
        .quiz_info > h3 {
            margin-top: 0px;
            margin-bottom: 10px;
        }
        ul {
            list-style-type: none;
            padding-left: 0px;
        }
        .list_quiz_info {
            text-decoration: none;
            margin-top: 10px;
            display: block;
            height: 70px;
            width: 100%;
            color: black;
            background-color: white;
            transition: background-color 0.2s ease, color 0.2s ease;
        }
        .list_quiz_info:hover {
            color: white;
            background-color: #4CAF50;
            
        }
        .list_quiz_info > h1 {
            margin-top: 0px;
            margin-bottom: 0px;
            margin-left: 30px;
        }
        .list_quiz_info > h3 {
            margin-top: 0px;
            margin-bottom: 10px;
            margin-left: 30px;
        }
        .quizScheduleInfo {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .vsep {
            display: block;
            margin: 20px;
            font-size: 2em;
        }
        .quizStatus {
            padding: 10px;
            text-align: center;
            font-weight: bold;
            font-size: 1.2em;
        }
        .quizStatus > img{
            height: 20px;
            margin-right: 10px;
            position: relative;
            top: 4px;
        }
        .dashboard_card {
            border: solid 1px #b3b3b3;
            margin: 20px;
            background-color: white;
            box-shadow: #999999 3px 5px 6px;
            text-align: center;
            transition: box-shadow 0.3s ease;
        }
        .dashboard_card:hover {
            box-shadow: #999999 5px 10px 15px;
        }
        .crib_table {
            border: none;
            width: 100%;
            max-height: 500px;
            overflow-y: scroll;
        }
        .header {
            background-color: white;
            cursor: pointer;
        }
        .crib_table tr:hover {
            background-color: #e6e6e6;
        }
        .crib_table th {
            border-left: solid 1px #e6e6e6;
            border-right: none;
            border-top: none;
            border-bottom: none;
            padding: 15px;
            background-color: #3F51B5;
            color: white;
        }
        .crib_table td {
            border-left: solid 1px #e6e6e6;
            border-right: none;
            border-top: none;
            border-bottom: solid 1px #e6e6e6;
            padding: 15px;
        }
        #question_palette > h2 {
            text-align: center;
        }
        .question_view {
            text-align: left;
            margin: 20px;
        }
        .collapsed {
            display: none;
            background-color: #e6e6e6 ;
        }
    </style>
</head>
<body>
    <div id="main_form">
        <aside id="question_palette">
            <h2>Quiz list:</h2>
            <ul>
            {%for q in all_quizes %}
                <li><a href="/instructor/?quiz_id={{quiz.quizId}}" class="list_quiz_info">
                    <h1>{{q.quizInfo}}</h1>
                    <h3>{{q.quizCode}}</h3>
                    </a>
                </li>
            {%endfor%}
            </ul>
        </aside>
        <div id="questions_area">
            <section class="quiz_info">
                <h1>{{quiz.quizInfo}}</h1>
                <h3> Quiz Code: {{quiz.quizCode}}</h3>
                <div class="quizScheduleInfo">
                    {% if quizDone %}
                        <div class="quizStatus done"><img src="{% static 'img/done-24px.svg' %}"><label>Completed</label></div>
                    {% else %}
                        <div class="quizStatus"><img src="{% static 'img/schedule-24px.svg' %}"><label>Scheduled</label></div>
                    {% endif %}
                    <div class="vsep">
                        {
                    </div>
                    <div>
                        <span>{{quiz.date}}, {{quiz.startTime}}</span><br/>
                        <span>Duration: {{quiz.length}} minutes</span>
                    </div>
                </div>
                <form><input type="hidden" id="quizId" name="quizId" value="123"></form>
            </section>
            <div class="dashboard">
                <section class="dashboard_card">{{graph|safe}}</section>
                <section class="dashboard_card">{{graph2|safe}}</section>
                <section class="dashboard_card">
                    <table class="crib_table" cellspacing="0">
                        <thead><th>Question</th><th>StudentId</th><th>Cribs</th></thead>
                        <tbody>
                        {%for crib in cribs%}
                            <tr class="header">
                                <td width="10%">{{crib.questionId}}</td>
                                <td>{{crib.cribs}}</td>
                                <td>{{crib.studentId}}</td>
                            </tr>
                            <tr id="question_of_crib_{{forloop.counter0}}" class="collapsed">
                                <td colspan="3">
                                    <div class="question_view">
                                    {{crib.questionId.question}}
                                    <ul>
                                        <li>A. {{crib.questionId.option1}}</li>
                                        <li>B. {{crib.questionId.option2}}</li>
                                        <li>C. {{crib.questionId.option3}}</li>
                                        <li>D. {{crib.questionId.option4}}</li>
                                    </ul>
                                    </div>
                                </td>
                            </tr>
                        {%endfor%}
                        </tbody>
                    </table>
                </section>
            </div>
        </div>
    </div>
    <script>
        $('tr.header').click(function(){
            $(this).nextUntil('tr.header').css('display', function(i,v){
                return this.style.display === 'table-row' ? 'none' : 'table-row';
            });
        });
    </script>
</body>
</html>