<?php include "../../root.class.php";
$html = new html();
$html->add_styles_page();
$call = new call_functions();
// $html->prevent_enter_script();



$record_id = new input();
$record_id->name("record_id");
$record_id->id("record_id");
$record_id->class("inputs");
$record_id->value($_GET["record_id"]);
$record_id->type("hidden");
$record_id->readonly();

$jc_number = new input();
$jc_number->name("jc_number");
$jc_number->id("jc_number");
$jc_number->class("inputs");
$jc_number->placeholder("");
$jc_number->type("text");
$jc_number->style("width: 100%;font-size: 3em;");
$jc_number->value_from_db("job_cards_tech", "jc_number", "record_id = '" . $_GET["record_id"] . "'");
$jc_number->readonly();

$date_time_created = new input();
$date_time_created->name("date_time_created");
$date_time_created->id("date_time_created");
$date_time_created->style("width: 100%;font-size: 3em;");
$date_time_created->class("hidden");
$date_time_created->type("text");
$date_time_created->required();
$date_time_created->value_from_db("job_cards_tech", "date_time_created", "record_id = '" . $_GET["record_id"] . "'");
$date_time_created->readonly();
$date_time_created->readonly();

$new_jc = new select();
$new_jc->name("new_jc");
$new_jc->id("new_jc");
$new_jc->class("inputs");
$new_jc->style("width: 50%;height: 4vh;font-size: 3em;");
$new_jc->add_option("0", "NO");
$new_jc->add_option("1", "YES");

$action_date_time = new input();
$action_date_time->name("action_date_time");
$action_date_time->id("action_date_time");
$action_date_time->class("hidden");
$action_date_time->style("width: 100%;font-size: 3em;");
$action_date_time->type("datetime-local");
$action_date_time->value_from_db("job_cards_tech", "action_date_time", "record_id = '" . $_GET["record_id"] . "'");
$action_date_time->required();
// $action_date_time->readonly();


$company_name = new input();
$company_name->name("company_name");
$company_name->id("company_name");
$company_name->class("inputs");
$company_name->style("width: 100%");
$company_name->placeholder("COMPANY NAME");
$company_name->style("width: 100%;font-size: 3em;");
$company_name->type("text");
$company_name->value_from_db("job_cards_tech", "company_name", "record_id = '" . $_GET["record_id"] . "'");
$company_name->required();
$company_name->readonly();

$company_address = new input();
$company_address->name("company_address");
$company_address->id("company_address");
$company_address->class("inputs");
$company_address->style("width: 100%;font-size: 3em;");
$company_address->placeholder("COMPANY ADDRESS");
$company_address->type("text");
$company_address->value_from_db("job_cards_tech", "company_address", "record_id = '" . $_GET["record_id"] . "'");
$company_address->required();
$company_address->readonly();

$contact_person = new input();
$contact_person->name("contact_person");
$contact_person->id("contact_person");
$contact_person->style("width: 100%;font-size: 3em;");
$contact_person->class("inputs");
$contact_person->placeholder("CONTACT PERSON NAME");
$contact_person->type("text");
$contact_person->value_from_db("job_cards_tech", "contact_person", "record_id = '" . $_GET["record_id"] . "'");
$contact_person->required();
$contact_person->readonly();

$contact_person_contact = new input();
$contact_person_contact->name("contact_person_contact");
$contact_person_contact->id("contact_person_contact");
$contact_person_contact->class("inputs");
$contact_person_contact->style("width: 100%;font-size: 3em;");
$contact_person_contact->placeholder("CONTACT PERSON NUMBER");
$contact_person_contact->type("text");
$contact_person_contact->value_from_db("job_cards_tech", "contact_number", "record_id = '" . $_GET["record_id"] . "'");
$contact_person_contact->required();
$contact_person_contact->readonly();

$equipment_needed = new select();
$equipment_needed->name("equipment_required");
$equipment_needed->id("equipment_required");
$equipment_needed->style("width: 100%;font-size: 3em;");
$equipment_needed->class("inputs");
$equipment_needed->value_from_db("job_cards_tech", "equipment_required", "record_id = '" . $_GET["record_id"] . "'");
$equipment_needed->add_option("", "EQUIPMENT");
$equipment_needed->add_option("LONG LADDER", "LONG LADDER");

$submit = new input();
$submit->name("submit");
$submit->type("submit");
$submit->id("submit");
$submit->class("submit_btn");
$submit->onclick("submit_form()");
$submit->value("SEND FOR QUOTATION");
?>
<style>
    h1 {
        font-size: 3em;
        text-decoration: underline;

        font-family: Arial, Helvetica, sans-serif;
    }

    h4 {
        font-size: 2.5em;
        text-decoration: underline;
        font-family: Arial, Helvetica, sans-serif;
    }
</style>
<form action="update_tech_jobcard_process.php" id="form_" method="POST" style="width: 100%;">
    <div class="column">
        <h1>JOB CARD</h1>
        <div class="column"
            style="width: 96%;background-color: aliceblue;min-height:4vh; border-radius: 2vw;padding: 1em;">
            <?php
            $record_id->add();
            $date_time_created->add();
            $jc_number->add();
            $action_date_time->add();
            ?>
        </div>
        <h1>CLIENT DETAILS</h1>
        <div class="column">
            <?php
            $company_name->add();
            $company_address->add();
            ?>
        </div>

        <div class="column">
            <?php
            $contact_person->add();
            $contact_person_contact->add();
            ?>
        </div>
        <h1>EQUIPMENT</h1>
        <div class="row"
            style="width: 96%;background-color: aliceblue;min-height:4vh; border-radius: 2vw;padding: 1em;">
            <?php
            $equipment_needed->add();
            ?>
        </div>
        <h1>REPORTED ISSUE</h1>
      <span style="font-size: 3em;">
        <br>
        <br>
            <?php
            $db = new db_safeguard();
            $res = $db->query("job_cards_tech", "SELECT * FROM job_cards_tech WHERE record_id = {$_GET['record_id']}");
            $data = $res->fetch_assoc();
            echo html_entity_decode($data['client_reported_issue']);
            ?>
            <br>
            <br>
</span>
  


        <!-- TECHNICIAN -->
        <h1> TECHNICAL DETAILS</h1>
        <?php $get_start_res = $db->query("job_cards_tech_timeline", "SELECT * FROM job_cards_tech_timeline WHERE job_card_tech_id = {$_GET['record_id']} ORDER BY record_id DESC LIMIT 1");
        $datat_start = $get_start_res->fetch_assoc();
        if ($datat_start['type'] != "START") {
        
            ?>
            <input type="button" class="submit_btn" id="start_tech" onclick="start_tech_func()" value="START">
            <script>
                function start_tech_func() {
                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', 'job_card_tech_timeline_add.php?record_id=<?php echo $_GET["record_id"]; ?>', true);
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            document.getElementById("tech_details").removeAttribute("hidden");
                            document.getElementById("start_tech").setAttribute("hidden", "true");
                        }
                    };
                    xhr.send();
                }
            </script>

            <div id="tech_details" hidden class='column'>
            <?php } ?>
            <div class='column'>
                <?php
                $details_res = $db->query("job_card_tech_details", "SELECT * FROM job_card_tech_details WHERE job_card_tech_id = {$_GET['record_id']}");
                $index = 1;
                if ($details_res->num_rows > 0) {

                    while ($details = $details_res->fetch_assoc()) {
                        ?>
                        <div style="background-color: aliceblue; padding: 10px;border-radius: 2vw;">
                            <div class="column" style="margin-top: 2vw;">
                                <div class="column">
                                    <h4>AREA <?php echo $index; ?></h4>
                                    <textarea
                                        onchange="edit_jc_details('area',this.value,<?php echo $details['record_id']; ?>,this)"
                                        style="width:80%;min-height: 3.5vh;font-size: 3em;" 
                                        class="inputs" ><?php echo $details['area']; ?> </textarea>
                                    <input type="text" hidden style="width:100%;" value="<?php echo $details['record_id']; ?>"
                                        class="inputs" name="detail_record_id_<?php echo $index; ?>" />
                                </div>
                                <div class="column">
                                    <h4>DESCRIPTION <?php echo $index; ?>:</h4>
                                    <textarea
                                        onchange="edit_jc_details('issue',this.value,<?php echo $details['record_id']; ?>,this)"
                                        class="inputs"
                                        style="width:80%;min-height: 3.5vh;font-size: 3em;"><?php echo $details['issue']; ?></textarea>
                                </div>
                                <div class="column">
                                    <h4>PART NUMBER <?php echo $index; ?></h4>
                                    <textarea
                                        onchange="edit_jc_details('part_number',this.value,<?php echo $details['record_id']; ?>,this)"
                                        style="width:80%;min-height: 3.5vh;font-size: 3em;"
                                        class="inputs"><?php echo $details['part_number']; ?></textarea>
                                </div>
                            </div>

                            <div class="row">
                                <div class="column">
                                    <div id="image_<?php echo $index; ?>">
                                    <input type="file" class="inputs" name="file_<?php echo $index; ?>"  id="file_<?php echo $index; ?>"
                                    onchange="upload_image(this,<?php echo $index; ?>,'file','file_name')" hidden />
                                    <input type="text" style="width:100%" hidden name="file_name_<?php echo $index; ?>" id="file_name_<?php echo $index; ?>" <?php echo ($details['image'] != '') ? 'value="'.$details['image'].'"' : ''; ?>/>
                                    <div id="progress_<?php echo $index; ?>"></div>
                                    <div id="image_<?php echo $index; ?>">
                                        <?php if ($details['image'] != "") { 
                                            $images = explode(",", $details['image']);
                                            foreach ($images as $image) {
                                                if ($image != "") {
                                                    ?>
                                                    <img src="<?php echo "images/" . $image; ?>" alt="" style="width:100%;">
                                                    <?php
                                                }
                                            }
                                            ?>
                                        <?php } ?>
                                        </div>
                                        <label class="inputs" style="min-height: 6vh;font-size: 1.5em;margin-top:1vw;width:50%;border-radius: 2vw;background-color: #4CAF50;color: white;padding: 1vw;text-align: center;"  id="label_<?php echo $index; ?>" for="file_<?php echo $index; ?>" hidden>TAKE PHOTO</label>
                                    </div>

                                </div>
                            </div>

                            <div id="details_notes" class="column">
                                <h2>FINDINGS</h2>
                                <?php
                                $detail_notes_res = $db->query("job_card_tech_detail_notes", "SELECT * FROM job_card_tech_detail_notes WHERE job_card_tech_detail_id = {$details['record_id']}");
                                $details_notes_index = 1;
                                while ($detail_notes = $detail_notes_res->fetch_assoc()) {
                                    ?>
                                    <div class="row"><textarea class="inputs"
                                            style="width: 100%; min-height: 3.5vh;font-size: 2em;"><?php echo $detail_notes['date_time'] . " : " . $call->get_username($detail_notes['user_id']) . " -> " . $detail_notes['note']; ?></textarea>
                                    </div>
                                    <?php $details_notes_index++;
                                } ?>
                                <div id="details_notes_<?php echo $index; ?>" class="column">

                                </div>
                                <input type="number" id="detail_notes_index_<?php echo $index; ?>" hidden value="1" />
                                <input type="number" id="detail_record_id_index_<?php echo $index; ?>" hidden
                                    name="detail_record_id_index_<?php echo $index; ?>"
                                    value="<?php echo $details['record_id']; ?>" />
                                <input type="button" onclick="add_row_tech_detail_notes(<?php echo $index; ?>)"
                                    class="submit_btn" style="width:60%;min-height:5.5vh;" value="ADD FINDING">
                            </div>
                        </div>
                        <?php $index++;
                    } ?>
                    <br><br>
                    <div style="background-color: aliceblue; padding: 10px;border-radius: 2vw;">
                        <div class="column" style="margin-top: 5vw;">
                            <div class="column">
                                <h4>AREA <?php echo $index; ?></h4>
                                <textarea class="inputs" style="width:80%;min-height: 4.5vh;font-size: 3em;" name="area_<?php echo $index; ?>"
                                    id="area_<?php echo $index; ?>" class="inputs"></textarea>
                            </div>
                            <div class="column">
                                <h4>DESCRIPTION <?php echo $index; ?>:</h4>
                                <textarea class="inputs" style="width:80%;min-height: 4.5vh;font-size: 3em;"
                                    name="issue_<?php echo $index; ?>" id="issue_<?php echo $index; ?>"></textarea>
                            </div>
                            <div class="column">
                                <h4>FAULTY PARTS <?php echo $index; ?></h4>
                                <textarea style="width:80%;min-height: 4.5vh;font-size: 3em;" name="part_number_<?php echo $index; ?>"
                                    id="part_number_<?php echo $index; ?>" class="inputs"></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column">
                     
                                <input type="file" class="inputs" name="file_<?php echo $index; ?>"  id="file_<?php echo $index; ?>"
                                    onchange="upload_image(this,<?php echo $index; ?>,'file','file_name')" value="TAKE PHOTO" hidden />
                                    <input type="text" name="file_name_<?php echo $index; ?>" hidden id="file_name_<?php echo $index; ?>" />
                                <div id="progress_<?php echo $index; ?>"></div>
                                <div id="image_<?php echo $index; ?>"></div>
                                <label  class="inputs" style="min-height: 6vh;font-size: 1.5em;margin-top:1vw;width:50%;border-radius: 2vw;background-color: #4CAF50;color: white;padding: 1vw;text-align: center;"  id="label_<?php echo $index; ?>" for="file_<?php echo $index; ?>">TAKE PHOTO</label>
                            </div>
                        </div>
                        <div id="details_notes_<?php echo $index; ?>" class="column">
                            <h2>FINDINGS</h2>
                            <div class="row"><textarea class="inputs" style="width: 100%;font-size: 2em;"
                                    name="detial_notes_<?php echo $index; ?>_1"
                                    id="detial_notes_<?php echo $index; ?>_1"></textarea><input hidden type="number"
                                    id="detail_notes_index_<?php echo $index; ?>" value="1" />
                            </div>
                        </div>
                        <input type="button" onclick="add_row_tech_detail_notes(<?php echo $index; ?>)" class="submit_btn" style="width:60%;min-height:5.5vh;"
                            value="ADD FINDING">
                    </div>
                    <?php
                    $has_prev = 1;
                } else {
                    $has_prev = 0;
                    ?>
                    <br><br>
                    <div style="background-color: aliceblue; padding: 10px;border-radius: 2vw;">
                        <div class="column" style="margin-top: 5vw;">
                            <div class="column">
                                <h4>AREA 1</h4>
                                <textarea  style="width:80%;min-height: 4.5vh;font-size: 3em;" name="area_1" id="area_1" class="inputs" ></textarea>
                            </div>
                            <div class="column">
                                <h4>DESCRIPTION 1:</h4>
                                <textarea class="inputs"  style="width:80%;min-height: 4.5vh;font-size: 3em;"  name="issue_1" id="issue_1"></textarea>
                            </div>
                            <div class="column">
                                <h4>FAULTY PARTS 1</h4>
                                <textarea  style="width:80%;min-height: 4.5vh;font-size: 3em;" name="part_number_1" id="part_number_1"
                                    class="inputs" ></textarea>
                            </div>

                        </div>
                        <div class="row">
                            <div class="column">
                                <input type="file" class="inputs" name="file_1"  id="file_1"
                                    onchange="upload_image(this,1,'file','file_name')" value="TAKE PHOTO" hidden />
                                    <input type="text" name="file_name_1" id="file_name_1" hidden />
                                <div id="progress_1"></div>
                                <div id="image_1"></div>
                                <label class="inputs" style="min-height: 6vh;font-size: 1.5em;margin-top:1vw;width:50%;border-radius: 2vw;background-color: #4CAF50;color: white;padding: 1vw;text-align: center;" for="file_1" id="label_1">TAKE PHOTO</label>
                            </div>
                        </div>

                        <div id="details_notes_1" class="column">
                            <h2>FINDINGS</h2>
                            <div class="row"><textarea class="inputs" style="width: 100%;font-size: 2em;"  name="detial_notes_1_1"
                                    id="detial_notes_1_1"></textarea><input hidden type="number" id="detail_notes_index_1"
                                    value="1" />
                            </div>
                        </div>
                        <input type="button" onclick="add_row_tech_detail_notes(1)" class="submit_btn" style='width:60%;min-height:5.5vh;' value="ADD FINDING">
                    </div>
                <?php } ?>
                <br>
                <br>
            </div>
        </div>

        <div id='tech_details' style="width:100%;" class='column'>

        </div>
        <br><br>
        <input type="button" onclick="add_row_tech_details()" class="submit_btn" style="min-height:5.5vh;font-size: 3em;" value="ADD NEW ROW">
        <script>

            <?php if ($has_prev == 1) { ?>
                var index = <?php echo $index; ?>;
            <?php } else { ?>
                var index = 1;
            <?php } ?>

            function edit_jc_details(column, value, record_id, input) {
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'edit_jc_details.ajax.php', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        console.log(xhr.responseText);
                        input.style.backgroundColor = "green";
                    } else {
                        input.style.backgroundColor = "red";
                    }
                };
                xhr.send('record_id=' + record_id + '&value=' + value + '&column=' + column);
            }

            function add_row_tech_details() {
                index++;
                var div = document.createElement('div');
                div.className = "column";
                div.style.backgroundColor = "aliceblue";
                div.style.marginTop = "4vh";
                div.style.width = "96.5%";
                div.style.padding = "10px";
                div.style.height = "auto";
                div.style.borderRadius = "2vw";
                div.innerHTML = '<div class="column"> <h4>AREA ' + index + '</h4> <textarea style="width:80%;min-height: 4.5vh;font-size: 3em;" name="area_' + index + '" id="area_' + index + '" class="inputs" > </textarea> </div> <div class="column"> <h4> DESCRIPTION ' + index + ': </h4> <textarea class="inputs" style="width:80%;min-height: 4.5vh;font-size: 3em;" name="issue_' + index + '" id="issue_' + index + '"> </textarea> </div> <div class="column"> <h4> FAULTY PARTS ' + index + ' </h4> <textarea style="width:80%;min-height: 4.5vh;font-size: 3em;" name="part_number_' + index + '" id="part_number_' + index + '" class="inputs" > </textarea> </div> </div> ';
                document.getElementById("tech_details").appendChild(div);

                var div = document.createElement('div');
                div.className = "row";
                div.style.backgroundColor = "aliceblue";
                div.style.padding = "10px";
                div.style.height = "auto";
                div.style.width = "96.5%";

                div.innerHTML = '<div class="row"><div class="column"><input type="file" class="inputs" hidden name="file_' + index + '" id="file_' + index + '" onchange="upload_image(this,' + index + ',\'file\',\'file_name\')" style="min-height: 6vh;font-size: 1.5em;margin-top:1vw;width:100%;border-radius: 2vw;background-color: #4CAF50;color: white;padding: 1vw;text-align: center;"  /> <input hidden type="text" name="file_name_' + index + '" id="file_name_' + index + '" /><div id="progress_' + index + '"></div><div id="image_' + index + '"></div><label class="inputs" style="min-height: 6vh;font-size: 1.5em;margin-top:1vw;width:50%;border-radius: 2vw;background-color: #4CAF50;color: white;padding: 1vw;text-align: center;" for="file_' + index + '" id="label_' + index + '">TAKE PHOTO</label></div></div>';
                document.getElementById("tech_details").appendChild(div);

                var div = document.createElement('div');
                div.className = "column";
                div.style.backgroundColor = "aliceblue";
                div.style.padding = "10px";
                div.style.width = "96.5%";

                div.style.height = "auto";
                div.innerHTML = '<div id="details_notes_' + index + '" class="column"><h2>FINDINGS</h2><div class="row"><textarea class="inputs" style="width: 100%;font-size: 3em;" name="detial_notes_' + index + '_1" id="detial_notes_' + index + '_1"></textarea><input type="number" hidden id="detail_notes_index_' + index + '" value="1" /></div></div><input type="button" onclick="add_row_tech_detail_notes(' + index + ')" class="submit_btn" style="width:60%;min-height:5.5vh;" value="ADD FINDING">';

                document.getElementById("tech_details").appendChild(div);
            }

            function add_row_tech_detail_notes(notes_index) {
                detials_index = document.getElementById("detail_notes_index_" + notes_index);
                index_details = detials_index.value = parseInt(detials_index.value) + 1;
                var div = document.createElement('div');
                div.className = "row";
                div.innerHTML = '<textarea class="inputs" style="width: 98%;font-size: 3em;min-height: 4.5vh;" name="detial_notes_' + notes_index + '_' + index_details + '" id="detial_notes_' + notes_index + '_' + index_details + '"></textarea>';
                document.getElementById("details_notes_" + notes_index + "").appendChild(div);
            }

            function upload_image(input, index_1, name, input_to_save) {
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'image_upload.php?post_name=' + name + "_" + index_1, 'true', true);
                xhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        var percentage = (e.loaded / e.total) * 100;
                        document.getElementById("progress_" + index_1).innerHTML = percentage + "%";
                    }
                });
                xhr.onload = function () {
                    if (xhr.status == 200) {
                        document.getElementById(input_to_save+"_" + index_1).setAttribute("value", xhr.responseText.replace("images/", "") + "," + document.getElementById(input_to_save+"_" + index_1).value);
                        document.getElementById("image_" + index_1).innerHTML = document.getElementById("image_" + index_1).innerHTML + " <img src='" + xhr.responseText + "' style='width: 100%;' />";                    }
                };
                xhr.send(new FormData(input.form));
            }

        </script>
        <br><br>
        <div class="form_down" style="width:96.5%;text-align: center;">
            <div style="width: 100%;padding: 1em;border:1px solid red;border-radius: 2vw;">
            <label style="font-size: 3em;color:red;">SAVE AND CREATE MANUAL JOB CARD?</label>
            <?php $new_jc->add(); ?>
            </div>
            <br>
            <br>
            <input type="text" name="signature" id="signature1" hidden />
            <h2>CLIENT SIGANTURE</h2>
            <input type="text" required style="width: 80%;min-height: 4vh;font-size: 3em;" class="inputs" name="singed" placeholder='NAME' id="singed" />
            <?php new signature('signature1', 1, 600, 400); ?>



            <input type="submit" class="submit_btn" value="COMPLETE" />
</form>


</div>

<script>
    function submit_form() {
        if (document.getElementById('signature').value == '') {
            alert('Please sign');
            return;
        } else {
            let form = document.forms[0];
            let overlay = document.createElement('div');
            overlay.style.position = 'fixed';
            overlay.style.top = '0';
            overlay.style.left = '0';
            overlay.style.width = '100%';
            overlay.style.height = '100%';
            overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
            overlay.style.zIndex = '9999';
            document.body.appendChild(overlay);
            form.submit();
        }
    }

</script>