<?php include "../../root.class.php";
$html = new html();
$html->add_styles_page();
// $html->check_user_type("SUPERVISOR");
$calendar = new calendar();

?>

<form method="post" action="save_work_order.php">
    <div class="form_down">
        <h1>ADD WORK ORDER</h1>
        <hr>
        <?php echo $html->select_html_from_db("projects", "record_id", "name", "", "project_id", "project_id", "select", "", "", "required"); ?>
        <?php echo $html->select_html_from_db("work_order_types", "record_id", "name", "", "work_order_type_id", "work_order_type_id", "select", "", "", "required"); ?>
        <?php echo $html->input_html("NAME", "", "name", "name", "inputs", "", "", "required"); ?>
        <?php echo $html->input_html("", $_SESSION['user_id'], "user_id", "user_id", "inputs", "", "", 'text', "hidden"); ?>
        <?php echo $html->select_html_from_db("users", "record_id", "username", "", "user_id_assigned", "user_id_assigned"); ?>
        <?php echo $html->select_html_from_db("users", "record_id", "username", "", "user_id_review", "user_id_review"); ?>
        <?php echo $html->date_input_html("deadline_date_time", "deadline_date_time", "inputs", "", "", "", ""); ?>
        <?php echo $html->date_input_html("action_date_time", "action_date_time", "inputs", "", "", "", ""); ?>
        <?php echo $html->date_input_html("date_time_created", "date_time_created", "inputs", "", date('Y-m-d H:i', strtotime("+2 Hours")), "", "hidden"); ?>
        <div id="" class="column segment" style=""></div>
        <h1> TO DO </h1>
        <div id="" class="column segment" style=""></div>
        <br>
        <div id="instructions" class="column segment" style="">

            <div class="row">
                <textarea class="inputs" name="instruction_1" style="width: 100%;"></textarea>
            </div>

        </div>
        <br><br>
        <input type="button" onclick="add_row_instruction_details()" class="submit_btn" style="font-size:1em;"
            value="ADD INSTRUCTION">
        <script>
            index_notes = 2;
            function add_row_instruction_details() {
                var div = document.createElement('div');
                div.className = "row";
                div.innerHTML = '<div class="column"><textarea class="inputs" style="width: 100%;" name="instruction_' + index_notes + '" id="instruction_' + index_notes + '"></textarea></div>';
                document.getElementById("instructions").appendChild(div);
                index_notes++;
            }

        </script>
        <br><br>

        <div id="" class="column segment" style=""></div>
        <h1> RESOURCES</h1>
        <div id="resources" class="column " style=""></div>
        <br><br>
        <div id="resourcess" class="column " style="">
            <input type="button" onclick="add_row_resources_details()" class="submit_btn" style="font-size:1em;"
                value="ADD RESOURCE">
        </div>
        <br><br>
        <script>
            function open_file($file_path) {
                var win = window.open($file_path, '_blank');
                win.focus();
            }

            index_file = 1;

            function add_row_resources_details() {
                var div = document.createElement('div');
                div.className = "row";
                div.innerHTML = '<div class="column"><h4>Resource:  ' + index_file + '</h4><input type="text" class="inputs" style="width: 100%;" name="resource_' + index_file + '" id="resource_' + index_file + '"></div>';
                document.getElementById("resources").appendChild(div);
                var div = document.createElement('div');
                div.className = "row";
                div.innerHTML = '<h2>CLICK TO ADD RESOURCE</h2><div class="row"><div class="column"><input type="file" class="inputs" name="file_' + index_file + '" id="file_' + index_file + '" onchange="upload_image(this,' + index_file + ',\'file\')" /><div id="progress_' + index_file + '"></div><div id="image_' + index_file + '"></div></div></div>';
                document.getElementById("resources").appendChild(div);
                index_file++;
            }

            function upload_image(input, index, name) {
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'file_upload.php?post_name=' + name + "_" + index, 'true', true);
                xhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        var percentage = (e.loaded / e.total) * 100;
                        document.getElementById("progress_" + index).innerHTML = percentage + "%";
                    }
                });
                xhr.onload = function () {
                    if (xhr.status == 200) {
                        var img = document.createElement("img");
                        img.src = xhr.responseText;
                        console.log(xhr.responseText);
                        document.getElementById("image_" + index).innerHTML = "<img src='" + xhr.responseText + "' style='width: 100%;' />";
                    }
                };
                xhr.send(new FormData(input.form));
            }

        </script>
        <br>
        <?php echo $html->submit_btn('submit', 'ADD', ''); ?>
    </div>
</form>

<?php
// $html->html_form_ajax("add_work_order", "INSERT", "work_orders", '', false, [], '', ['description']);
?>