<?php
include "classes/html.class.php";
$html = new html("JOB CARD LIST");
$db = new db();
$ainspection_res = $db->exec_query('jobcard_q_a_list', ["*"]);
$list = '<option></option>';
while ($ainspection = $ainspection_res->fetch_assoc()) {
    $list = $list . "<option value='{$ainspection['record_id']}'>{$ainspection['list_name']}</option>";
}

$res = $db->exec_query('jobcard_types', ['*']);
$list1 = "<option></option>";
while ($row = $res->fetch_assoc()) {
    $list1 = $list1 . "<option value='{$row['record_id']}'>{$row['name']}</option>";
}


?>
<div class='form' style='width: 70%;'>
    <!-- <input type='submit' value='ADD' class='form_btn' onclick='add_row()' /> -->

    <form action='save_jobcard_list.php' method="POST">
        <h2 style="font-size:2vw">SELECT JOB CARD LIST</h2><br><br>

        <select class='form_input' id='jobcard_list_id' name='jobcard_list_id' onchange="call_ajax_func()">

            <<? echo $list; ?> </select><br><br>

                <input type='text' name='edit' hidden />
                <hr><br>
                <label style="font-size:1.5vw">
                    JOB CARD TYPE
                </label><br><br>
                <select class='form_input' name='jobcard_type_id' id='jobcard_type_id'>
                    <? echo $list1; ?>
                </select><br><br>
                <input type='text' placeholder="LIST NAME" name='name' id='name' class='form_input' /><br><br>
                <input type='submit' value='edit' placeholder="" name='edit' id='edit' hidden class='form_input' />
                <table width='100%' style='text-align:center;'>
                    <tr>
                        <td style="font-size:1.5vw">
                            QUESTION:
                        </td>
                        <td style="font-size:1.5vw">
                            ANSWER TYPE:
                        </td>
                        <td style="font-size:1.5vw">
                            WARNING TYPE:
                        </td>
                    </tr>

                </table>
                <table width='100%' style='text-align:center;' id='myTable'>
                </table>
                <br>
                <br>
                <div class="center_screen">
                    <button type="button" onclick='add_row()' class='form_btn'>ADD ROW</button>
                    <input type='text' name='index' id='index' value='0' hidden />
                    <input type='submit' value='SAVE' class='form_btn' onclick='ajax_func()' />
                </div>
    </form>
</div>

<script>
    // add_row();

    function add_row() {
        get_index = document.getElementById("index").value;
        var table = document.getElementById("myTable");
        var row = table.insertRow();
        var cell1 = row.insertCell();
        var cell2 = row.insertCell();
        var cell3 = row.insertCell();
        cell1.innerHTML = "<input type='text' placeholder='Question?' id='q_" + get_index + "' name='q_" + get_index + "' class='form_input'>";
        cell2.innerHTML = "<select class='form_input' id='a_" + get_index + "' name='a_" + get_index + "'> <option> </option> <option value = 'B' > YES / NO </option> <option value='T'> TEXT </option> </select>";
        cell3.innerHTML = "<select class='form_input'id='w_" + get_index + "' name='w_" + get_index + "'><option value='0'>No Warning</option><option value='Y'>Warning on YES</option><option value='N'>Warning on NO</option><option value='T'>Warning on TEXT</option></select>";

        document.getElementById('index').value = parseInt(get_index) + 1;


    }


    function call_ajax_func() {
        // alert("Test");
        jobcard_list_id = document.getElementById('jobcard_list_id').value;

        // Create an XMLHttpRequest object
        const xhttp = new XMLHttpRequest();
        // Define a callback function
        xhttp.onload = function() {
            // Here you can use the Data
            if (this.responseText != 1) {
                // alert(this.responseText);
                values = this.responseText.split('|');
                document.getElementById('name').value = values[0];
                document.getElementById('jobcard_type_id').value = values[4];

                questions = values[1].split(',');
                // alert(questions.length);
                answers = values[2].split(',');
                warnings = values[3].split(',');
                index = 0;
                var tableHeaderRowCount = 0;
                var table = document.getElementById('myTable');
                var rowCount = table.rows.length;
                for (var i = tableHeaderRowCount; i < rowCount; i++) {
                    table.deleteRow(tableHeaderRowCount);
                    document.getElementById("index").value = 0;

                }

                while (index < questions.length) {
                    add_row();
                    document.getElementById('q_' + index).value = questions[index];
                    document.getElementById('a_' + index).value = answers[index];
                    document.getElementById('w_' + index).value = warnings[index];
                    index = parseInt(index) + 1;
                }






            } else {
                // window.location.href = "users.php";
                alert("Something Went Wrong");

            }
        }

        xhttp.open("GET", "ajax/get_jobcard_list_content.ajax.php?jobcard_list_id=" + jobcard_list_id);
        xhttp.send();

    }
</script>


</body>

</html>