<?php
include $_SERVER['DOCUMENT_ROOT'] . "/WebBuilder/WebApp.class.php";
$WebApp->pageHeading('ASSESSMENT INFO');
$db = new DBMain();

$assessment_id = $_GET['assessment_id'];
$assess_res = $db->exec_query('assessments', ['*'], '', '', '', '', "record_id = $assessment_id");

if($assess_res == null){
    $assessment_id = 0;

    //hide the outcome of $assess_res
    $assess_res = null;
}

?>

<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>

<?php

if ($_GET['assessment_id'] > 0) {

    while ($assessment = $assess_res->fetch_assoc()) {
        ?>
        <form action='save_assessment.php' method='POST'>
            <div class='form_container' style='width:99%'>
                <input type='text' name='assessments_name' required class='input' style='width:100%;'
                    placeholder="ASSESSMENTS NAME" value='<?php echo $assessment['assessments_name']; ?>' /><br>
                <input type='text' name='assessment_info' required class='input' style='width:100%;'
                    placeholder="ASSESSMENT INFO" value='<?php echo $assessment['assessment_info']; ?>' /><br>
                <div style='display:flex;'>
                    <input type='text' name='nqf_level' required class='input' style='width:48%;' placeholder="NQL LEVEL"
                        value='<?php echo $assessment['nqF_level']; ?>' />
                    <input type='text' name='credits' required class='input' style='width:48%;' placeholder="CREDITS"
                        value='<?php echo $assessment['Credits']; ?>' /><br>
                    <select name='passmark' id='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 $assessment['passmark']; ?>';
                    </script>
                </div>

                <?php
                // get all sections of the assessment
                $sections_res = $db->exec_query('assessment_sections', ['*'], '', '', '', '', "assessment_id = $assessment_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='assessment_id' name='assessment_id' class='input'
                    value='<?php echo $assessment_id; ?>' />
                <input type='submit' id='save' name='save' value='SAVE' class='sticky_2' />
                <hr>
            </div>
            <br>
            <?php $WebApp->pageHeading('ASSESSMENT QUESTIONS'); ?>
            <br>
            <?php
            $index = 0;
            while ($section = $sections_res->fetch_assoc()) {
                $question_res = $db->exec_query('assessment_questions', ['*'], '', '', '', '', "assessment_section_id = {$section['record_id']}", "ORDER BY record_id ASC") ?>
                <div class="form_container" id="form_container_<?php echo $index; ?>" style="width: 99%; 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" required="" class="input"
                        value='<?php echo $section['record_id']; ?>' style="width: 60%;">
                    <table id="table_<?php echo $index; ?>" style="width: 100%; text-align: center;">
                        <tr>
                            <td style="width: 5%;"></td>
                            <td style="width: 90%;">QUESTION</td>
                        </tr>
                        <?php
                        $q_index = 0;
                        while ($question = $question_res->fetch_assoc()) { ?>
                            <tr>
                                <td style="width: 5%;">
                                    <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++;
                        } ?>
                    </table>
                    <div class="button" style="width: 25%; margin-left: auto; margin-right: auto;"
                        onclick="add_row(<?php echo $index; ?>)">ADD ROW</div>
                    <hr>
                </div>

                <?php $index++;
            }
            ?>
            <div id='added_content'></div>
            <div onclick="add_section()" class='sticky_button'>ADD SECTION</div>
            <?php
    }
    echo "<input type='text' name='assessment_id' value='" . $assessment_id . "' class='input' hidden />";
} else {
    ?>

        <form action='save_assessment.php' method='POST' id="add_form">
            <div class='form_container' style='width:99%'>
                <input type='text' name='assessments_name' required class='input' style='width:100%;'
                    placeholder="Assessment name" /><br>
                <input type='text' name='assessment_info' required class='input' style='width:100%;'
                    placeholder="Assessment info" /><br>
                <div style='display:flex;'>
                    <input type='text' name='nqf_level' required class='input' style='width:48%;' placeholder="Nqf level" />
                    <input type='text' name='credits' required class='input' style='width:48%;' placeholder="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>
                </div>
                <input type='text' id='sections_total' name='sections_total' value='2' class='input' hidden />
                <input type='submit' id='save' name='save' value='SAVE' class='sticky_2' />
                <hr>
            </div>
            <br>
            <?php $WebApp->pageHeading('Assessment QUESTIONS'); ?>
            <br>
            <div id='added_content'></div>
            <div onclick="add_section()" class='sticky_button'>ADD SECTION</div>
        <?php } ?>
        <script>
            function add_section() {
                var form = document.getElementsByTagName('form')[0];
                var section_number = document.getElementById('sections_total').value;

                var newDiv = document.createElement("div");
                newDiv.className = "form_container";
                newDiv.id = "form_container_" + section_number;
                newDiv.style.width = '99%';
                newDiv.style.marginBottom = '5vw';

                var sectionInput = document.createElement('input');
                sectionInput.type = 'number';
                sectionInput.id = 'row_count_' + section_number;
                sectionInput.name = 'row_count_' + section_number;
                sectionInput.value = '2';
                newDiv.appendChild(sectionInput);

                var sectionNameInput = document.createElement('input');
                sectionNameInput.type = 'text';
                sectionNameInput.name = 'section_' + section_number + '_name';
                sectionNameInput.required = true;
                sectionNameInput.className = 'input';
                sectionNameInput.style.width = '60%';
                sectionNameInput.placeholder = 'SECTION NAME';
                newDiv.appendChild(sectionNameInput);

                var table = document.createElement('table');
                table.id = 'table_' + section_number;
                table.style.width = '100%';
                table.style.textAlign = 'center';

                var row1 = document.createElement('tr');
                var cell1 = document.createElement('td');
                cell1.style.width = '5%';
                var cell2 = document.createElement('td');
                cell2.textContent = 'QUESTION';
                cell2.style.width = '90%';

                row1.appendChild(cell1);
                row1.appendChild(cell2);

                var row2 = document.createElement('tr');
                var cell3 = document.createElement('td');
                cell3.style.width = '5%';
                var cell4 = document.createElement('td');
                cell4.style.width = '90%';
                var textarea = document.createElement('textarea');
                textarea.type = 'text';
                textarea.name = section_number + '_question_0';
                textarea.className = 'input';
                textarea.style.width = '90%';
                textarea.style.marginLeft = '2vw';

                row2.appendChild(cell3);
                row2.appendChild(cell4);
                cell4.appendChild(textarea);

                table.appendChild(row1);
                table.appendChild(row2);

                var addRowButton = document.createElement('div');
                addRowButton.textContent = 'ADD ROW';
                addRowButton.className = 'button';
                addRowButton.style.width = "25%";
                addRowButton.style.marginLeft = "auto";
                addRowButton.style.marginRight = "auto";
                addRowButton.onclick = function () {
                    add_row(section_number);
                };

                var addSectionButton = document.createElement('div');
                addSectionButton.textContent = 'DELETE SECTION';
                addSectionButton.className = 'button';
                addSectionButton.style.width = "25%";
                addSectionButton.style.marginLeft = "auto";
                addSectionButton.style.marginRight = "auto";

                addSectionButton.onclick = function () {
                    delete_section(section_number);
                };

                newDiv.appendChild(table);
                newDiv.appendChild(addRowButton);
                newDiv.appendChild(document.createElement('hr'));
                newDiv.appendChild(addSectionButton);

                form.appendChild(newDiv);

                document.getElementById('sections_total').value = document.getElementById('sections_total').value * 1 + 1 * 1;
            }

            function add_row(table_id) {
                var table = document.getElementById("table_" + table_id);
                var row_count = document.getElementById('row_count_' + table_id).value;
                var row = table.insertRow(row_count); // Insert a new row at the first position

                // 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);

                // Add some text to the new cells:
                cell1.innerHTML = "<div onclick='remove_(" + row_count + "," + table_id + ")' class='button' id='" + table_id + "_hide_" + row_count + "' style='background-color:red;'>X</div>";
                cell2.innerHTML = " <textarea type='text' id='" + table_id + "_question_" + row_count + "' name='" + table_id + "_question_" + row_count + "' class='input' style='width:90%;margin-left: 2vw;height:3.2vw;'></textarea>";

                document.getElementById('row_count_' + table_id).value = (row_count * 1) + 1 * 1;
            }

            function remove_(ind, table_id) {
                document.getElementById(table_id + "_hide_" + ind).hidden = true;
                document.getElementById(table_id + "_question_" + ind).hidden = true;
                document.getElementById(table_id + "_question_" + ind).value = "";
                document.getElementById('row_count_' + table_id).value = (document.getElementById('row_count_' + table_id).value * 1) - 1 * 1;
            }

            function delete_section(section_number) {
                var form = document.getElementsByTagName('form')[0];
                var element = document.getElementById('form_container_' + section_number);
                form.removeChild(element);
            }
        </script>