<?php
include $_SERVER['DOCUMENT_ROOT'] . "/WebBuilder/WebApp.class.php";
$WebApp->pageHeading('TEST');
$db = new DBMain();

$test_id = 1;

$tests_res = $db->exec_query('tests', ['*'], '', '', '', '', "record_id = $test_id");
$tests = $tests_res->fetch_assoc();

?>

<style>
    .sticky_button {
        position: fixed;
        top: 2.5%;
        right: 5%;
        z-index: 10;
        background-color: #aa9104;
        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_2 {
        position: fixed;
        top: 2.5%;
        left: 5%;
        z-index: 10;
        background-color: #aa9104;
        border: none;
        color: white;
        padding: 32px 64px;
        text-decoration: none;
        cursor: pointer;
        border-radius: 15px;
        font-size: 16px;
        transition: background-color 0.2s ease;

    }
</style>

<form action="results.php" method="post">
    <div class='form_container' style='width:95%'>
        <input type='text' name='test_name' required class='input' style='width:100%;' placeholder="TEST NAME"
            value='<?php echo $tests['test_name']; ?>' /><br>
        <input type='text' name='test_description' required class='input' style='width:100%;'
            placeholder="TEST DESCRIPTION" value='<?php echo $tests['test_description']; ?>' /><br>
        <div style='display:flex;'>
            <input type='text' name='nqf_level' required class='input' style='width:48%;' placeholder="NQF LEVEL"
                value='<?php echo $tests['nqf_level']; ?>' />
            <input type='text' name='credits' required class='input' style='width:48%;' placeholder="Credits"
                value='<?php echo $tests['credits']; ?>' /><br>
            <select name='passmark' required class='input' style='width:48%;'>
                <option value='1'>100%</option>
                <option value='0.95'>95%</option>
                <option value='0.9'>90%</option>
                <option value='0.85'>85%</option>
                <option value='0.8'>80%</option>
                <option value='0.75'>75%</option>
            </select><br>
            <script>
                document.getElementById('passmark').value = '<?php echo $tests['passmark']; ?>';
            </script>
        </div>
    </div>

    <?php
    // get all sections of the test
    $sections_res = $db->exec_query('test_sections', ['*'], '', '', '', '', "test_id = $test_id", "ORDER BY record_id ASC");

    ?>
    <input type='text' id='sections_total' hidden name='sections_total' class='input'
        value='<?php echo $sections_res->num_rows + 1; ?>' />
    <input type='text' id='test_id' name='test_id' class='input' value='<?php echo $test_id; ?>' hidden />
    <input type='submit' id='save' name='save' value='SAVE' class='sticky_2' />
    </div>
    <br>
    <?php $WebApp->pageHeading('TEST QUESTIONS'); ?>
    <br>

    <?php
    $index = 0;

    while ($section = $sections_res->fetch_assoc()) {
        $question_res = $db->exec_query('test_questions', ['*'], '', '', '', '', "test_section_id = {$section['record_id']}", "ORDER BY record_id ASC");

        $answer_res = $db->exec_query('test_answers', ['*'], '', '', '', '', "test_question_id = {$section['record_id']}", "ORDER BY record_id ASC");
        ?>
        <div class="form_container" id="form_container_<?php echo $index; ?>" style="width: 95%; margin-bottom: 5vw;">
            <input type="number" id="row_count_<?php echo $index; ?>" hidden name="row_count_<?php echo $index; ?>"
                value='<?php echo $question_res->num_rows; ?>'>
            <input type="text" name="section_<?php echo $index; ?>_name" required="" class="input"
                placeholder="SECTION NAME" value='<?php echo $section['section_name']; ?>' style="width: 60%;">
            <input type="text" name="section_<?php echo $index; ?>_id" class="input"
                value='<?php echo $section['record_id']; ?>' style="width: 60%;" hidden>
            <table id="table_<?php echo $index; ?>" style="width: 100%; text-align: center;">
                <tr>
                    <td style="width: 90%;">QUESTION</td>
                </tr>
                <?php
                $q_index = 0;
                while ($question = $question_res->fetch_assoc()) { ?>
                    <tr>
                        <td style="width: 5%;" hidden>
                            <div onclick='remove_(<?php echo $q_index; ?>,<?php echo $index; ?>)' class='button'
                                id='<?php echo $index; ?>_hide_<?php echo $q_index; ?>' style='background-color:red;'>X</div>
                        </td>
                        <td style="width: 90%;">
                            <textarea name="<?php echo $index; ?>_question_<?php echo $q_index; ?>"
                                id="<?php echo $index; ?>_question_<?php echo $q_index; ?>" class="input"
                                style="width: 90%; margin-left: 2vw;"><?php echo $question['question']; ?></textarea>
                        </td>
                    </tr>
                    <?php
                    $q_index++;
                } ?>
                <tr>
                    <td style="width: 90%;">ANSWER</td>
                </tr>
                <?php $a_index = 0;
                while ($answer = $answer_res->fetch_assoc()) { ?>
                    <tr>
                        <td style="width: 5%;" hidden>
                            <div onclick='remove_(<?php echo $a_index; ?>,<?php echo $index; ?>)' class='button'
                                id='<?php echo $index; ?>_hide_<?php echo $a_index; ?>' style='background-color:red;'>X</div>
                        </td>
                        <td style="width: 90%;">
                            <textarea name="<?php echo $index; ?>_answer_<?php echo $a_index; ?>"
                                id="<?php echo $index; ?>_answer_<?php echo $a_index; ?>" class="input"
                                style="width: 90%; margin-left: 2vw;"><?php echo $answer['answer']; ?></textarea>
                        </td>
                        <td style="width: 5%;">
                            <div hidden onclick='change_(<?php echo $a_index; ?>,<?php echo $index; ?>)' class='button'
                                id='<?php echo $index; ?>_change_<?php echo $a_index; ?>'
                                style="background-color:red; width: 40%; margin-right: 2vw;">X</div>
                            <input type="checkbox" id='<?php echo $index; ?>_change_<?php echo $a_index; ?>'
                                name='<?php echo $index; ?>_change_<?php echo $a_index; ?>'
                                onclick='change_(<?php echo $a_index; ?>,<?php echo $index; ?>)'
                                style="width: 4vw;height: 4vw;">
                            <input type="text" id = '<?php echo $index; ?>_change_value_<?php echo $a_index; ?>' name='<?php echo $index; ?>_change_value_<?php echo $a_index; ?>' value="0" class="button" hidden>
                        </td>
                        <td style="width: 5%;">
                            <div class='button' id='<?php echo $index; ?>_hide_<?php echo $a_index; ?>' hidden>X</div>
                        </td>
                    </tr>
                    <?php
                    $a_index++;
                } ?>
            </table>
            <hr>
        </div>

        <?php $index++;
    } ?>

    <script>
        function change_(row_count, table_id) {
            var element = document.getElementById(table_id + "_change_" + row_count);
            var element2 = document.getElementById(table_id + '_change_value_' + row_count);
            // console.log(table_id + '_change_value_' + row_count);
            if (element) {
                if (element.style.backgroundColor === 'red') {
                    element.style.backgroundColor = 'green';
                    element.innerHTML = 'X';
                    element2.setAttribute("value", "1");
                } else {
                    element.style.backgroundColor = 'red';
                    element.innerHTML = 'X';
                    element2.setAttribute("value", "0");
                }
            } else {
                console.error(`Element with id ${element} does not exist.`);
            }
        }
    </script>