<?php
include $_SERVER['DOCUMENT_ROOT'] . "/WebBuilder/WebApp.class.php";
$WebApp->pageHeading('ASSESMENT INFO');
?>

<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='save_assesment.php' method='POST'>
    <div class='form_container' style='width:99%'>
        <input type='text' name='assesments_name' required class='input' style='width:100%;' placeholder="ASSESMENTS NAME" /><br>
        <input type='text' name='assesment_info' required class='input' style='width:100%;' placeholder="Assesment 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('ASSESMENT QUESTIONS'); ?>
    <br>
    <div id='added_content'></div>
    <div onclick="add_section()" class='sticky_button'>ADD SECTION</div>
    <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>