<?php
session_start();

if (isset($_GET['jobcard_num'])) {


    include "classes/html.class.php";
    $date = date("Y-m-d H:i", strtotime("+ 2hours"));
    $db = new db();
    $table_data = '<tr></tr>';
    $jobcards_res = $db->exec_query('job_cards', ['*'], '', '', '', '', "record_id = {$_GET['jobcard_num']}");
    $jobcard_info = $jobcards_res->fetch_assoc();
    $get_last_odo_res = $db->exec_query('asset_odo', ['*'], '', '', '', '', "asset_record_id = {$jobcard_info['asset_id']}", "ORDER BY record_id DESC");
    $get_last_odo = $get_last_odo_res->fetch_assoc();

    $asset_info = $db->exec_query('assets', ['*'], '', '', '', '', "record_id = {$jobcard_info['asset_id']}");
    $asset = $asset_info->fetch_assoc();
    $jobcard_type_res = $db->exec_query('jobcard_types', ['*'], '', '', '', '', "name = '{$jobcard_info['job_card_type']}'");
    $jobcard_type = $jobcard_type_res->fetch_assoc();

    $inspection_res = $db->exec_query('jobcard_q_a_list', ['*'], '', '', '', '', "jobcard_type_id = '{$jobcard_type['record_id']}'");
    $pre_inspection_info = $inspection_res->fetch_assoc();
    $index = 0;
    $questions_array_part_1 = explode(',', $pre_inspection_info['questions']);
    $questions_array_part_2 = explode(',', $pre_inspection_info['answers']);
    $questions_array_part_3 = explode(',', $pre_inspection_info['warnings']);
    $array_count = count($questions_array_part_1);
    $questions_array = [];
    while ($index <= $array_count) {
        $questions_array[] = $questions_array_part_1[$index] . '||' . $questions_array_part_2[$index] . '||' . $questions_array_part_3[$index];
        $index++;
    }

    if (strlen($jobcard_info['date_time_opened']) < 1) {
        $db->Update('job_cards', ['date_time_opened'], [$date], "record_id = {$_GET['jobcard_num']}");
        echo "<script>window.location.href = 'jobcard.php?jobcard_num={$_GET['jobcard_num']}';</script>";
    }


    $html = new html('JOB CARD');

?>


    <table style='width:100%; text-align:center;'>
        <br>
        <tr>
            <td style="font-size:1.5vw;">
                JOB CARD
            </td>
            <td style="font-size:1.5vw;">

                FLEET NO
            </td>
            <td style="font-size:1.5vw;">
                JOB CARD TYPE
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                <input type='text' value='<?php echo $jobcard_info['record_id']; ?>' class='form_input' readonly />

            </td>
            <td>
                <input type='text' value='<?php echo $jobcard_info['asset_id']; ?>' hidden id='asset_record_id' class='form_input' readonly />
                <input type='text' value='<?php echo $asset['fleet_no']; ?>' id='fleet_no_top' class='form_input' readonly />


            </td>
            <td>
                <input type='text' value='<?php echo $jobcard_info['job_card_type']; ?>' class='form_input' readonly />


            </td>
            <td>
                <!-- <input type='submit' value='CONTINUE' class='form_btn' /> -->
            </td>
        </tr>
    </table>
    <hr>
    <div style='float:left; width:50%; height:fit-content;text-align:center;'>

        <? if (strlen($jobcard_info['odo']) < 1) { ?>
            <input type='text' placeholder="<?php echo $get_last_odo['odo']; ?>" name='odo' id='odo' onchange="odo_change()" class='form_input' /><br><br>

        <? } else { ?>
            <input type='text' readonly value="<?php echo $jobcard_info['odo']; ?>" name='odo' id='odo' onchange="odo_change()" class='form_input' /><br><br>

        <? } ?>
        <input type='text' id='old_odo' hidden value='<?php echo $get_last_odo['odo']; ?>' />
        <script>
            function odo_change() {
                if (document.getElementById('odo').value > document.getElementById('old_odo').value) {

                    // alert("Test");
                    odo = document.getElementById('odo').value;
                    jobcard_no = <?php echo $_GET['jobcard_num']; ?>;
                    asset_record_id = document.getElementById('asset_record_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) {
                            document.getElementById('odo_check').value = odo;
                        } else {
                            alert("Something Went Wrong");

                        }
                    }

                    xhttp.open("GET", "ajax/update_jobcard.ajax.php?jobcard_no=" + jobcard_no + '&odo=' + odo + "&asset_record_id=" + asset_record_id);
                    xhttp.send();

                } else {
                    document.getElementById('odo').value = '';
                    alert("ODO cant be less than last reported");
                }
            }
        </script>
        <table style='margin-left:1vw; text-align:center;'>
            <tr>
                <td>
                    <label style="font-size:1.5vw;">PARTS USED</label>
                </td>
                <td>
                    <label style="font-size:1.5vw;">OIL USED</label>
                </td>
                <td>
                    <label style="font-size:1.5vw;">CONSUMABLES</label>
                </td>
            </tr>
            <? $parts = explode("|",$jobcard_info['parts']); ?>
            <tr>
                <td>
                    <textarea type='text' id='parts' class="text_input" onchange='parts_change()' style='width:80%; height:10vw; font-size:1.25vw;'><?php echo $parts[0];  ?></textarea><br><br>
                    <script>
                        function parts_change() {


                            // alert("Test");
                            parts = document.getElementById('parts').value;
                            oil = document.getElementById('oil').value;
                            cons = document.getElementById('cons').value;

                            jobcard_no = <?php echo $_GET['jobcard_num']; ?>;


                            // 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("Something Went Wrong");
                                    alert(this.responseText);



                                } else {
                                    // alert("Something Went Wrong");

                                }
                            }

                            xhttp.open("GET", "ajax/update_jobcard.ajax.php?jobcard_no=" + jobcard_no + '&parts=' + parts + '&oil=' + oil + '&cons=' + cons);
                            xhttp.send();


                        }
                    </script>
                </td>
                <td>
                    <textarea type='text' id='oil' class="text_input" onchange='oil_change()' style='width:80%; height:10vw; font-size:1.25vw;'><?php echo $parts[1]; ?></textarea><br><br>
                    <script>
                        function oil_change() {


                            // alert("Test");
                            parts = document.getElementById('parts').value;
                            oil = document.getElementById('oil').value;
                            cons = document.getElementById('cons').value;
                            jobcard_no = <?php echo $_GET['jobcard_num']; ?>;


                            // 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("Something Went Wrong");
                                    alert(this.responseText);



                                } else {
                                    // alert("Something Went Wrong");

                                }
                            }

                            xhttp.open("GET", "ajax/update_jobcard.ajax.php?jobcard_no=" + jobcard_no + '&parts=' + parts + '&oil=' + oil + '&cons=' + cons);
                            xhttp.send();


                        }
                    </script>
                </td>
                <td>
                    <textarea type='text' id='cons' class="text_input" onchange='cons_change()' style='width:80%; height:10vw; font-size:1.25vw;'><?php echo $parts[2]; ?></textarea><br><br>
                    <script>
                        function cons_change() {


                            // alert("Test");
                            parts = document.getElementById('parts').value;
                            oil = document.getElementById('oil').value;
                            cons = document.getElementById('cons').value;
                            jobcard_no = <?php echo $_GET['jobcard_num']; ?>;


                            // 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("Something Went Wrong");
                                    alert(this.responseText);



                                } else {
                                    // alert("Something Went Wrong");

                                }
                            }

                            xhttp.open("GET", "ajax/update_jobcard.ajax.php?jobcard_no=" + jobcard_no + '&parts=' + parts + '&oil=' + oil + '&cons=' + cons);
                            xhttp.send();


                        }
                    </script>
                </td>
            </tr>

        </table>
        <br><br>
        <label style="font-size:1.5vw;">NOTES</label><br>
        <textarea type='text' class="text_input" name='notes' id='notes' onchange="notes_change()" style='width:80%; height:10vw;'><?php echo $jobcard_info['notes']; ?></textarea><br><br>
        <script>
            function notes_change() {


                // alert("Test");
                notes = document.getElementById('notes').value;
                jobcard_no = <?php echo $_GET['jobcard_num']; ?>;


                // 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("Something Went Wrong");
                        alert(this.responseText);

                    } else {

                    }
                }

                xhttp.open("GET", "ajax/update_jobcard.ajax.php?jobcard_no=" + jobcard_no + '&notes=' + notes);
                xhttp.send();


            }
        </script>

    </div>
    <div style='float:right; width:50%; height:fit-content;'>
        <!-- <h2>"Warning Questions"</h2><br> -->
        <form action='jobcard_save.php' method='POST' id='form'>
            <!-- <input type='text' hidden id='odo_check' name='odo' /> -->
            <input type='text' hidden value='<?php echo $jobcard_info['asset_id']; ?>' name='asset_record_id' class='form_input' readonly />

            <input type='text' hidden value='<?php echo $_GET['jobcard_num']; ?>' name='jobcard_no' />
            <?php
            $w_index = 0;
            foreach ($questions_array as $value) {

                $q_a = explode('||', $value);

                echo "<input type='text' value='{$q_a[0]}' name='question_$w_index' hidden/>";

                if ($q_a[1] == 'B') {
            ?>


                    <h2 style="font-size:2vw;"><?php echo $q_a[0]; ?>:</h2>
                    <input id='q_a_<?php echo $w_index; ?>' name='q_a_<?php echo $w_index; ?>' hidden value='NO' />
                    <button class='form_input' onclick='select_<?php echo $w_index; ?>(1)' id='btn_1_<?php echo $w_index; ?>'>NO PROBLEM</button>
                    <button class='form_input' id='btn_2_<?php echo $w_index; ?>' onclick='select_<?php echo $w_index; ?>(2)'>PROBLEM</button>
                    <input type='text' hidden id='w_<?php echo $w_index; ?>' name='w_<?php echo $w_index; ?>' value='<? echo $q_a[2]; ?>' />

                    <script>
                        document.getElementById("btn_1_<?php echo $w_index; ?>").addEventListener("click", function(event) {
                            event.preventDefault();
                        });
                        document.getElementById("btn_2_<?php echo $w_index; ?>").addEventListener("click", function(event) {
                            event.preventDefault();
                        });
                        document.getElementById('btn_1_<?php echo $w_index; ?>').style.backgroundColor = 'grey';
                        document.getElementById('btn_2_<?php echo $w_index; ?>').style.backgroundColor = 'grey';

                        function select_<?php echo $w_index; ?>(value) {
                            if (value == 1) {

                                document.getElementById('q_a_<?php echo $w_index; ?>').value = 'YES';
                                document.getElementById('btn_1_<?php echo $w_index; ?>').classList.add('inspec_btn');
                                document.getElementById('btn_2_<?php echo $w_index; ?>').classList.remove('inspec_btn');
                                document.getElementById('btn_2_<?php echo $w_index; ?>').style.backgroundColor = 'grey';


                            } else {
                                document.getElementById('q_a_<?php echo $w_index; ?>').value = 'NO';
                                document.getElementById('btn_1_<?php echo $w_index; ?>').classList.remove('inspec_btn');
                                document.getElementById('btn_1_<?php echo $w_index; ?>').style.backgroundColor = 'grey';
                                document.getElementById('btn_2_<?php echo $w_index; ?>').classList.add('inspec_btn');


                            }

                        }
                    </script>
                    <br><br>
                <?php
                } else if ($q_a[1] == 'T') {
                ?>
                    <h2 style="font-size:2vw;"><?php echo $q_a[0]; ?>:</h2> <input type='text' required name='q_a_<?php echo $w_index; ?>' class='form_input' />
                    <input type='text' hidden id='w_<?php echo $w_index; ?>' name='w_<?php echo $w_index; ?>' value='<? echo $q_a[2]; ?>' />
                    <br><br>

            <?php
                }
                $w_index++;
            }
            echo "<input type='number' hidden value='$w_index' name='total_questions' />"
            ?>
            <br>
            <hr>
            <br>
            <?php if ($jobcard_info['job_card_status'] == 'AWAITING PARTS') {
            ?>
                <input type='submit' name='COMPLETE' value='COMPLETE' id='complete_complete' class='form_btn' />
                <input type='submit' name='NOT_DONE_YET' value='NOT DONE YET' id='not_done' class='form_btn' />
            <?php } else { ?>
                <input type='submit' name='NOT_DONE_YET' value='NOT DONE YET' id='not_done' class='form_btn' />
                <input type='submit' name='COMPLETE' value='COMPLETE' id='complete_complete' class='form_btn' />
                <input type='submit' name='WAIT' value='AWAITING PARTS' id='waiting_waiting' class='form_btn' />



            <?php } ?>


        </form>

    </div>
    </body>

    </html>
<?php } else {
    echo "<script>alert('Jobcard Not Found');</script>";
    echo "<script>window.location.href='open_jobcards.php'</script>";
}
