<?php
include "classes/html.class.php";
$html = new html("PRE INSPECTION LISTS");

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

    <form action='save_pre_inspection_list.php' method="POST">
        <h2 style="font-size:2vw">ADD NEW PRE INSPECTION:</h2>
        <hr><br>
        <input type='text' placeholder="INSPECTION NAME" name='name' class='form_input' /><br><br>
        <table width='100%' style='text-align:center;' id='myTable'>
            <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>
        <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?' name='q_" + get_index + "' class='form_input'>";
        cell2.innerHTML = "<select class='form_input'  name='a_" + get_index + "'> <option> </option> <option value = 'B' > YES / NO </option> <option value='T'> TEXT </option> </select>";
        cell3.innerHTML = "<select class='form_input' 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;


    }
</script>


</body>

</html>