<?php
include "../../../root.class.php";
$html = new html();
$html->add_styles_page();
$db = new db_safeguard();
session_start();

$repair_data_res = $db->query("pump_repair", "SELECT * FROM pump_repair WHERE record_id = '{$_GET['record_id']}'");
// echo "SELECT * FROM pump_installation WHERE record_id = '{$_GET['record_id']}'";
$repair_data = $repair_data_res->fetch_assoc();

$jobcard_data_res = $db->query("pump_installation", "SELECT * FROM pump_installation WHERE record_id = '{$repair_data['installation_id']}'");
// echo "SELECT * FROM pump_repair WHERE record_id = '{$repair_data['installation_id']}'";
$jobcard_data = $jobcard_data_res->fetch_assoc();

$user_res = $db->query("users", "SELECT * FROM users WHERE username = '{$jobcard_data['installed_by']}'");
$users = $user_res->fetch_assoc();

$make_notes_btn = new button();
$make_notes_btn->value("MAKE NOTES");
$make_notes_btn->onclick("open_notesPopup()");

$jobcard_id_record_id = new input();
$jobcard_id_record_id->type("hidden");
$jobcard_id_record_id->name("jobcard_id");
$jobcard_id_record_id->id("jobcard_id");
$jobcard_id_record_id->value($_GET['record_id']);

$reasons_label = new label();
$reasons_label->class("big_labels");
$reasons_label->for("reasons");
$reasons_label->value("REASONS");
$reasons_label->addAttribute("style", " color: white;");

$reasons = new select();
$reasons->class("big_inputs");
$reasons->name("reason");
$reasons->id("reason");
$reasons->addAttribute("style", "width: 20%;");
$reasons->add_option("ARRIVED AT LOCATION", "ARRIVED AT LOCATION");
$reasons->add_option("WAITING FOR CLIENT", "WAITING FOR CLIENT");
$reasons->add_option("TRAVELING TO SITE", "TRAVELING TO SITE");
$reasons->add_option("ARRIVED ON SITE", "ARRIVED ON SITE");
$reasons->add_option("TALKING TO CLIENT", "TALKING TO CLIENT");
$reasons->add_option("FETCHING MONEY", "FETCHING MONEY");
$reasons->add_option("BRAKING", "BRAKING");
$reasons->add_option("CHANGING RIEMER", "CHANGING RIEMER");
$reasons->add_option("STOP", "STOP");
$reasons->add_option("PENDING", "PENDING");
$reasons->add_option("START", "START");
$reasons->add_option("INSTALLING", "INSTALLING");
$reasons->add_option("RECEIVED", "RECEIVED");
$reasons->add_option("BACK TO WORKSHOP", "BACK TO WORKSHOP");
$reasons->add_option("OTHER", "OTHER");

$notes_label = new label();
$notes_label->class("notes_heading");
$notes_label->for("notes");
$notes_label->value("NOTES");
$notes_label->addAttribute("style", "color: white; margin:1px;");

$notes_sub_label = new label();
$notes_sub_label->class("big_labels");
$notes_sub_label->for("notes");
$notes_sub_label->value("NOTES");
$notes_sub_label->addAttribute("style", " color: white;");

$notes = new input();
$notes->class("big_inputs");
$notes->type("text");
$notes->placeholder("NOTES");
$notes->name("note");
$notes->id("note");
$notes->addAttribute("style", "width: 50%;");

$add_notes = new button();
$add_notes->value("ADD NOTES");
$add_notes->onclick("add_notes()");
$add_notes->style("width: 100%;");
$add_notes->id("notes_btn");

$image = new file_upload();
$image->file_save_path("../jobcards/notes/");
$image->file_type("png, jpg, jpeg");
$image->name("image");
$image->id("image");
$image->class("inputs");
$image->style("width: 50%;");

$ajax = new js_ajax();
$ajax->function_name("add_notes");
$ajax->insert("notes");
$ajax->selected_div(".notes_content input , .notes_content select ");
$ajax->submit_btn_id("notes_btn");
$ajax->on_success("NOTE SAVED");

?>

<style>
    .summary_popup {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .summary_content {
        background: linear-gradient(90deg, #110151, #3331e7);
        margin: 3% auto;
        padding: 20px;
        border-radius: 10px;
        width: 80%;
        height: 85%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        position: relative;
        overflow-y: scroll;
    }

    .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        font-weight: bolder;
        font-size: 5vw;
        cursor: pointer;
        color: white;
    }

    table {
        width: 95%;
        border-collapse: collapse;
    }

    th,
    td {
        padding: 10px;
        border: 3px solid black;
        text-align: left;
        background-color: white;
        font-size: 4vw;
    }
</style>

<div
    style="display: flex; flex-direction: column; align-items: center; background-color: white; margin: 4vw; border-radius: 2vw; padding: 2vw;">

    <h1 style="font-size: 3em;">JOBCARD SUMMARY</h1>

    <?php
    $make_notes_btn->add();
    ?>
    <br>

    <div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
        <label for="jobcard_id_label" class="create_details_label" style="width: 100%;">JOBCARD ID : </label>
        <input class="create_details_input" id="jobcard_no" name="jobcard_id"
            value="<?php echo $repair_data['jobcard_no']; ?>" readonly>
    </div>
    <div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
        <label for="jobcard_id_label" class="create_details_label" style="width: 100%;">DATE STARTED : </label>
        <input class="create_details_input" id="jobcard_no" name="jobcard_id"
            value="<?php echo $repair_data['date_time_started']; ?>" readonly>
    </div>
    <div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
        <label for="jobcard_id_label" class="create_details_label" style="width: 100%;">DATE FINISHED : </label>
        <input class="create_details_input" id="jobcard_no" name="jobcard_id"
            value="<?php echo $repair_data['date_time_finished']; ?>" readonly>
    </div>

    <div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
        <label for="" class="create_details_label" style="width: 100%;">PROBLEM DESCRIPTION</label>
        <textarea name="problem_description" id="problem_description" rows="5" class="create_details_input"
            style="font-size: 3em;"
            readonly><?php echo htmlspecialchars($repair_data['problem_description']); ?></textarea>
    </div>

    <div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
        <label for="" class="create_details_label" style="width: 100%;">SOLUTION</label>
        <textarea name="problem_solution" id="problem_solution" rows="5" class="create_details_input"
            style="font-size: 3em;"
            readonly><?php echo htmlspecialchars($repair_data['problem_solution']); ?></textarea>
    </div>

    <div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
        <label for="" class="create_details_label" style="width: 100%;">REPAURED BY</label>
        <input type="text" name="repaired_by" id="repaired_by" class="create_details_input"
            value="<?php echo $repair_data['repaired_by'] ?>" readonly>
    </div>

</div>

<div
    style="display: flex; flex-direction: column; align-items: center; background-color: white; margin: 4vw; border-radius: 2vw;">

    <div style="width:100%; margin-top:20px;">
        <h2 style="text-align:center;" class="create_h2">JOBCARD IMAGES</h2>
        <div id="image_history_grid" style="display:flex; flex-direction: column; gap:15px; padding:10px;">
        </div>
    </div>

    <!-- LIGHTBOX -->
    <div id="lightbox" onclick="closeLightbox()" style="display:none; position:fixed; z-index:9999; top:0; left:0; width:100%; height:100%;
           background:rgba(0,0,0,0.9); justify-content:center; align-items:center;">
        <img id="lightbox_img" src="" style="max-width:90%; max-height:90%; border-radius:10px;" />
    </div>

    <script>

        function loadImageHistory() {
            const jobcard_no = "<?php echo $_GET['jobcard_no']; ?>";

            const xhr = new XMLHttpRequest();
            xhr.open("POST", "get_install_images.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onload = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("image_history_grid").innerHTML = xhr.responseText;
                }
            };
            xhr.send("jobcard_no=" + encodeURIComponent(jobcard_no));
        }

        function openLightbox(src) {
            document.getElementById("lightbox_img").src = src;
            document.getElementById("lightbox").style.display = "flex";
        }

        function closeLightbox() {
            document.getElementById("lightbox").style.display = "none";
            document.getElementById("lightbox_img").src = "";
        }

        window.onload = function () {
            loadImageHistory();
        };
    </script>
</div>

<div
    style="display: flex; flex-direction: column; align-items: center; background-color: white; margin: 4vw; border-radius: 2vw;" id="complete_div">

    <input type="text" id="status" name="status" value="1" hidden>
    <input type="text" id="record_id" name="record_id" value="<?php echo $repair_data['record_id'] ?>" hidden>

    <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
    <?php

    $target_dir = __DIR__ . "/signatures/";
    $target_url = "/app/jobcards/pump/signatures/";

    $employee_flie = $target_dir . "employee-jc_" . $_GET['jobcard_no'] . "-" . $_SESSION['user_id'] . "-signature.png";
    $employee_url = $target_url . "employee-jc_" . $_GET['jobcard_no'] . "-" . $_SESSION['user_id'] . "-signature.png";

    // echo $employee_flie;
    // EMPLOYEE SIGNATURE
    if (file_exists($employee_flie)) {
        ?>
        <div style='display: flex; flex-direction: column;align-items: center;'>
            <h2 style="font-size: 2em;">EMPLOYEE SIGNATURE</h2>
            <input type='image' src="<?php echo $employee_url; ?>" alt='employee signature' class="signature_image">
        </div>
        <?php
    } else {
        ?>
        <div style='margin-bottom:1vw; display:flex; flex-direction:column; align-items:center;'>
            <h2 style="font-size: 2em;">EMPLOYEE SIGNATURE</h2>
            <div
                style="width:80vw; height:20vw; border:2px solid black; border-radius:1vw; display:flex; justify-content:center; align-items:center; background-color:#f0f0f0;">
                <span style="color:#888888; font-size:1.5vw;">NO SIGNATURE FOUND</span>
            </div>
        </div>
        <?php
    }

    // CLIENT SIGNATURE
    $client_file = $target_dir . "client-jc_" . $_GET['jobcard_no'] . "-" . $users['record_id'] . "-signature.png";
    $client_url = $target_url . "client-jc_" . $_GET['jobcard_no'] . "-" . $users['record_id'] . "-signature.png";

    // echo $client_file;
    if (file_exists($client_file)) {
        ?>
        <div style='display: flex; flex-direction: column;align-items: center;'>
            <h2 style="font-size: 2em;">CLIENT SIGNATURE</h2>
            <input type="image" src="<?php echo $client_url; ?>" alt="client signature" class="signature_image">
        </div>
        <?php
    } else {
        ?>
        <div style="margin-bottom:1vw; display:flex; flex-direction:column; align-items:center;">
            <h2 style="font-size: 2em;">CLIENT SIGNATURE</h2>
            <div
                style="width:80vw; height:20vw; border:2px solid black; border-radius:1vw; display:flex; justify-content:center; align-items:center; background-color:#f0f0f0;">
                <span style="color:#888888; font-size:1.5vw;">NO SIGNATURE FOUND</span>
            </div>
        </div>
        <?php
    }
    ?>

    <!-- CLIENT SIGNATURE -->

    <?php
    $dir = __DIR__ . "/pump_slip/";
    $url = "/app/jobcards/pump/pump_slip/";

    $pump_file = $dir . $repair_data['pump_slip'];
    $pump_url = $url . $repair_data['pump_slip'];

    // echo $client_file;
    if (file_exists($pump_file)) {
        ?>
        <div style='display: flex; flex-direction: column;align-items: center;'>
            <h2 style="font-size: 2em;">PUMP SLIP</h2>
            <input type="image" src="<?php echo $pump_url; ?>" alt="client signature" class="signature_image">
        </div>
        <?php
    } else {
        ?>
        <div style="margin-bottom:1vw; display:flex; flex-direction:column; align-items:center;">
            <h2 style="font-size: 2em;">PUMP SLIP</h2>
            <div
                style="width:80vw; height:20vw; border:2px solid black; border-radius:1vw; display:flex; justify-content:center; align-items:center; background-color:#f0f0f0;">
                <span style="color:#888888; font-size:1.5vw;">NO SIGNATURE FOUND</span>
            </div>
        </div>
        <?php
    }
    ?>

    <br>
    <?php

    $done_btn = new button();
    $done_btn->value("DONE");
    $done_btn->onclick("complete()");
    $done_btn->add();

    $done_ajax = new js_ajax();
    $done_ajax->function_name("complete");
    $done_ajax->update("pump_repair");
    $done_ajax->selected_div(".complete_div input , .complete_div select , .complete_div textarea");
    $done_ajax->on_success("JOBCARD COMPLETED");
    $done_ajax->redirect('../home.php');
    ?>
</div>


<div class="notes_popup" id="notes_popup">
    <div class="notes_content">
        <span class="close-btn" onclick="close_notesPopup()">&times;</span>

        <?php
        $res_data = $db->query("jobcard_timeline", "SELECT * FROM jobcard_timeline WHERE jobcard_id = {$_GET['record_id']} ORDER BY record_id DESC LIMIT 1");
        $data = $res_data->fetch_assoc();

        $data_type = new input();
        $data_type->class("inputs");
        $data_type->type("hidden");
        $data_type->readonly();
        $data_type->value($data['type']);
        $data_type->add();

        $jobcard_id_record_id->add();
        $date_time->add();
        $notes_label->add();
        ?>

        <div style="display: flex; flex-direction: column;">
            <?php
            $reasons_label->add();
            $reasons->add();
            $notes_sub_label->add();
            ?>
        </div>

        <div id="normal_section" style="display: flex; flex-direction: column;align-items: center;">
            <textarea name="note" id="note" class="inputs" style="width: 70vw" rows="5"></textarea>


            <?php
            // $notes->add();
            

            new camera('image', $_GET['record_id'], "../jobcards/notes/", "notes_images");
            ?>
            <input type="text" style="display: none;" id="image" name="image">

            <?php
            $add_notes->add();

            $notes_ajax = new js_ajax();
            $notes_ajax->function_name("add_notes");
            $notes_ajax->insert("notes");
            $notes_ajax->selected_div(".notes_content input , .notes_content select , .notes_content textarea");
            $notes_ajax->submit_btn_id("notes_btn");
            $notes_ajax->on_success("NOTE SAVED");
            ?>


            <?php

            $notes_res = $db->query("notes", "SELECT * FROM notes WHERE jobcard_id = {$_GET['record_id']} AND reason NOT LIKE '%BIT%'");

            if ($notes_res->num_rows > 0) {
                while ($row = $notes_res->fetch_assoc()) {
                    $table_data = $table_data . "<tr>
                <td>" . $row['reason'] . "</td>
                <td>" . $row['note'] . "</td>
                <td>" . $row['image'] . "</td>
                <td>" . $row['date_time'] . "</td>
                </tr>";
                }
                $notes = $notes_res->fetch_assoc();

            } else {
                $table_data = $table_data . "<tr>
            <td colspan='4'>NO NOTES RECORDED</td>
            </tr><br>";

            }
            ?>

            <div style="background-color: white;padding-left: 2vw;padding-top: 2vw; width: 100%;">
                <table>
                    <tr>
                        <th>REASON</th>
                        <th>NOTE</th>
                        <th>IMAGE</th>
                        <th>DATE TIME</th>
                    </tr>
                    <?php echo $table_data; ?>
                </table>
                <br>
            </div>
        </div>
    </div>
    <br><br>
</div>

<script>
    function open_notesPopup() {
        event.preventDefault ? event.preventDefault() : (event.returnValue = false, event.stopPropagation());
        document.getElementById("notes_popup").style.display = "block";

    }

    function close_notesPopup() {
        document.getElementById("notes_popup").style.display = "none";
    }
</script>