<?php include "../../root.class.php";
$html = new html();
$html->add_styles_page();
$db = new db_safeguard();

$date_label = new label();
$date_label->for("date_label");
$date_label->value("DATE");

$date = new input();
$date->type("datetime-local");
$date->name("date");
$date->id("date");
$date->style("width: 100%;margin: 1vw auto;");

$name_surname_label = new label();
$name_surname_label->for("name_surname_label");
$name_surname_label->value("NAME & SURNAME");

$name_surname = new input();
$name_surname->type("text");
$name_surname->name("name_surname");
$name_surname->id("name_surname");
// $name_surname->placeholder("NAME AND SURNAME");
$name_surname->style("width: 100%;margin: 1vw auto;");

$designation_label = new label();
$designation_label->for("designation_label");
$designation_label->value("DESIGNATION OF EMPLOYEE");

$designation = new input();
$designation->type("text");
$designation->name("designation");
$designation->id("designation");
// $designation->placeholder("DESIGNATION OF EMPLOYEE");
$designation->style("width: 100%;margin: 1vw auto;");

$test_name = new input();
$test_name->type("text");
$test_name->name("test_name");
$test_name->id("test_name");
$test_name->placeholder("TEST NAME");
$test_name->style("width: 100%;margin: 1vw auto;");

$test_description = new input();
$test_description->type("text");
$test_description->name("test_description");
$test_description->id("test_description");
$test_description->placeholder("TEST DESCRIPTION");
$test_description->style("width: 100%;margin: 1vw auto;");

$passmark = new select();
$passmark->name("passmark");
$passmark->id("passmark");
$passmark->style("width: 50%;margin: 1vw auto;");
$passmark->add_option("", "");
$passmark->add_option("50 %", "50 %");
$passmark->add_option("60 %", "60 %");
$passmark->add_option("70 %", "70 %");
$passmark->add_option("80 %", "80 %");
$passmark->add_option("90 %", "90 %");
$passmark->add_option("100 %", "100 %");

$question_no = new input();
$question_no->type("hidden");
$question_no->name("question_total");
$question_no->id("question_total");
$question_no->value(2);

$add_question_btn = new button();
$add_question_btn->class("sticky_button");
$add_question_btn->name("add_question_btn");
$add_question_btn->value("ADD QUESTION");
$add_question_btn->onclick("addQuestion()");

$add_question = new input();
$add_question->type("text");
$add_question->name("add_question");
$add_question->class("sticky_button");
$add_question->placeholder("ADD QUESTION");
$add_question->onclick("addQuestion()");
$add_question->value("ADD QUESTION");

$submit_btn = new button();
$submit_btn->class("sticky_2");
$submit_btn->name("submit_btn");
$submit_btn->value("SUBMIT");

?>

<form action="save_tests.php" method="post">
    <div class="form_down">
        <h1>CREATE TEST</h1>
        <style>
            table,
            th,
            td {
                border: 2px solid black;
                border-collapse: collapse;
                /* padding: 5px; */
            }

            .sticky_button {
                position: fixed;
                top: 14.4%;
                right: 8%;
                z-index: 10;
                background-color: #004aad;
                border: none;
                color: white;
                padding: 32px 64px;
                text-decoration: none;
                cursor: pointer;
                border-radius: 15px;
                font-size: 16px;
                transition: background-color 0.2s ease;
                width: 22%;
            }

            .sticky_2 {
                position: fixed;
                top: 14.4%;
                left: 8%;
                z-index: 10;
                background-color: #004aad;
                border: none;
                color: white;
                padding: 32px 64px;
                text-decoration: none;
                cursor: pointer;
                border-radius: 15px;
                font-size: 16px;
                transition: background-color 0.2s ease;

            }

            .sticky_div {
                position: fixed;
                top: 12.4%;
                left: 2%;
                z-index: 10;
                width: 84%;
                background-color: white;
                /* background-color: #c26d3cff; */
                border: 2px solid black;
                color: black;
                padding: 32px 64px;
                text-decoration: none;
                border-radius: 15px;
                font-size: 16px;
                transition: background-color 0.2s ease;
                display: flex;
                align-items: center;
                border: 3px solid black;
                height: 4vw;
            }

            .change_btn {
                font-size: 1em;
                margin: 0.5vw;
                cursor: pointer;
                border: 3px solid green;
                background-color: green;
                color: white;
                border-radius: 15px;
                padding: 1.2vw;
                /* height: 6vw; */
                width: 70%;
                /* margin-bottom: 4vw; */
                text-align: center;
                max-width: 250px;
            }

            .change_btn:hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                transform: scale(1.05);
                background: #008000b5;
                border: 3px solid #008000b5;
                color: white;
            }

            .change_btn1 {
                font-size: 1em;
                margin: 0.5vw;
                cursor: pointer;
                border: 3px solid red;
                background-color: red;
                color: white;
                border-radius: 15px;
                padding: 1.2vw;
                /* height: 6vw; */
                width: 70%;
                /* margin-bottom: 4vw; */
                text-align: center;
                max-width: 250px;
            }

            .change_btn1:hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                transform: scale(1.05);
                background: #ff00006b;
                border: 3px solid #ff00006b;
                color: white;
            }

            .cross {
                font-size: 1em;
                margin: 0.2vw;
                cursor: pointer;
                border: 3px solid red;
                background-color: red;
                color: white;
                border-radius: 15px;
                padding: 1.2vw;
                /* height: 6vw; */
                width: 60%;
                /* margin-bottom: 4vw; */
                text-align: center;
                max-width: 250px;
            }
        </style>

        <br><br><br><br><br><br><br>

        <?php
        $question_no->add();
        ?>
        <table style="width: 90%">
            <tr>
                <td>TEST NAME</td>
                <td>
                    <?php
                    $test_name->add();
                    ?>
                </td>
            </tr>
            <tr>
                <td>TEST DESCRIPTION</td>
                <td>
                    <?php
                    $test_description->add();
                    ?>
                </td>
            </tr>
            <tr>
                <td>PASSMARK</td>
                <td>
                    <?php
                    $passmark->add();
                    ?>
                </td>
            </tr>
        </table>
        <br>

        <div class="sticky_div">
            <div style="width: 25%;float: left;">
                <?php
                $add_question->add();
                ?>
            </div>
            <div style="width: 50%; font-size: 2vw;">TEST SECTION</div>
            <div style="width: 25%;float: right;">
                <?php
                $submit_btn->add();
                ?>
            </div>
        </div>
        <div id="add_content"></div>

        <br>
    </div>

</form>

<script>
    var question_number = document.getElementById('question_total').value;

    function addQuestion() {
        var form = document.getElementsByTagName('form')[0];
        var question_number = document.getElementById('question_total').value;

        var newDiv = document.createElement("div");
        newDiv.className = "form_down";
        newDiv.id = "form_down_" + question_number;
        newDiv.style.width = '95%';
        newDiv.style.marginBottom = '5vw';

        var questionInput = document.createElement('input');
        questionInput.type = 'number';
        questionInput.id = 'row_count_' + question_number;
        questionInput.name = 'row_count_' + question_number;
        questionInput.className = 'inputs';
        questionInput.value = '2';
        newDiv.appendChild(questionInput);

        var questionNameInput = document.createElement('textarea');
        questionNameInput.type = 'text';
        questionNameInput.name = 'question_' + question_number + '_name';
        questionNameInput.className = 'inputs';
        questionNameInput.style.width = '80%';
        questionNameInput.placeholder = 'ENTER QUESTION';
        newDiv.appendChild(questionNameInput);

        var table = document.createElement('table');
        table.id = 'table_' + question_number;
        table.style.width = '100%';
        table.style.textAlign = 'center';
        table.style.backgroundColor = 'white';

        var row1 = document.createElement('tr');
        var cell1 = document.createElement('td');
        cell1.style.width = '9%';
        var cell2 = document.createElement('td');
        cell2.textContent = 'ANSWERS';
        cell2.style.width = '75%';
        var cell3 = document.createElement('td');
        cell3.textContent = 'OPTIONS';
        cell3.style.width = '13%';

        row1.appendChild(cell1);
        row1.appendChild(cell2);
        row1.appendChild(cell3);

        var row2 = document.createElement('tr');
        var cell3 = document.createElement('td');
        cell3.style.width = '9%';
        var cell4 = document.createElement('td');
        cell4.style.width = '75%';
        var cell5 = document.createElement('td');
        cell4.style.width = '13%';

        table.appendChild(row1);
        table.appendChild(row2);

        function createButton(text, onClick, width = "25%") {
            const button = document.createElement('div');
            button.textContent = text;
            button.id = 'button_' + question_number;
            button.className = 'submit_btn';
            button.style.width = width;
            button.style.marginLeft = "auto";
            button.style.marginRight = "auto";
            button.onclick = onClick;
            return button;
        }

        var addAnswerButton = document.createElement('div');
        addAnswerButton.textContent = 'ADD ANSWER';
        addAnswerButton.className = 'submit_btn';
        addAnswerButton.style.width = "25%";
        addAnswerButton.style.marginLeft = "auto";
        addAnswerButton.style.marginRight = "auto";
        addAnswerButton.onclick = function () {
            add_row(question_number);
        };

        var addQuestionButton = document.createElement('div');
        addQuestionButton.textContent = 'DELETE QUESTION';
        addQuestionButton.className = 'submit_btn';
        addQuestionButton.style.width = "25%";
        addQuestionButton.style.marginLeft = "auto";
        addQuestionButton.style.marginRight = "auto";

        addQuestionButton.onclick = function () {
            delete_section(question_number);
        };

        newDiv.appendChild(table);
        newDiv.appendChild(createButton('ADD ANSWER', function () {
            add_row(question_number);
        }));
        newDiv.appendChild(document.createElement('hr'));
        newDiv.appendChild(createButton('DELETE QUESTION', function () {
            delete_section(question_number);
        }));

        form.appendChild(newDiv);

        document.getElementById('question_total').value = document.getElementById('question_total').value * 1 + 1 * 1;
    }

    function add_row(table_id) {
        var table = document.getElementById("table_" + table_id);
        if (!table) {
            console.error(`Table with id table_${table_id} does not exist.`);
            return;
        }
        var row_count_element = document.getElementById('row_count_' + table_id);
        var row_count = parseInt(row_count_element.value);
        var row = table.insertRow(-1); // Insert a new row at the end of the table
        row_count++;

        // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);

        // Add some text to the new cells:
        cell1.innerHTML = "<div onclick='multi_remove_(" + row_count + "," + table_id + ")' class='cross' id='" + table_id + "_hide_" + row_count + "' >X</div>";
        cell2.innerHTML = " <textarea type='text' id='" + table_id + "_answer_" + row_count + "' name='" + table_id + "_answer_" + row_count + "' class='inputs' style='width:90%;margin-left: 2vw;'></textarea>";
        cell3.innerHTML = "<div onclick='change_(" + row_count + "," + table_id + ")' class='change_btn1' id='" + table_id + "_option_" + row_count + "' >WRONG</div> <input type='text' id='" + table_id + "_answer_option_" + row_count + "' name='" + table_id + "_answer_option_" + row_count + "' value='0' class='button' hidden>";

        row_count_element.value = row_count;
    }

    function remove_(ind, table_id) {
        document.getElementById(table_id + "_hide_" + ind).hidden = true;
        document.getElementById(table_id + "_option_" + ind).hidden = true;
        document.getElementById(table_id + "_answer_" + ind).hidden = true;
        document.getElementById(table_id + "_answer_" + ind).value = "";
        document.getElementById('row_count_' + table_id).value = (document.getElementById('row_count_' + table_id).value * 1) - 1 * 1;
    }

    function delete_section(question_number) {
        var form = document.getElementsByTagName('form')[0];
        var element = document.getElementById('form_down_' + question_number);
        form.removeChild(element);
    }

    function change_(row_count, table_id) {
        //change the background-color of the button onclick
        var element = document.getElementById(table_id + "_option_" + row_count);
        var element2 = document.getElementById(table_id + '_answer_option_' + row_count);

        var element = event.target;
        if (element.innerHTML == "CORRECT") {
            element.className = "change_btn1";
            element.innerHTML = "WRONG";
            element2.setAttribute("value", "0");
        } else {
            element.className = "change_btn";
            element.innerHTML = "CORRECT";
            element2.setAttribute("value", "1");

        }
    }

</script>