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

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

$current_date_time = date("Y-m-d H:i", strtotime("+2 hours"));

$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']);

$date_time = new input();
$date_time->type("hidden");
$date_time->name("date_time");
$date_time->id("date_time");
$date_time->value($current_date_time);

$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 $jobcard_data['jobcard_no']; ?>" readonly>
    </div>

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

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

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

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

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

    <div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
        <label for="" class="create_details_label" style="width: 100%;">BOREHOLE METERS</label>
        <input type="text" name="borehole_meters" id="borehole_meters" class="create_details_input"
            value=" <?php echo $jobcard_data['borehole_meters'] ?>" 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($jobcard_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($jobcard_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%;">INSTALLED BY</label>
        <input type="text" name="installed_by" id="installed_by" class="create_details_input"
            value="<?php echo $jobcard_data['installed_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 $jobcard_data['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;">

    <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['jc_no'] . "-" . $_SESSION['user_id'] . "-signature.png";
    $employee_url = $target_url . "employee-jc_" . $_GET['jc_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>
            <?php
    }

    // CLIENT SIGNATURE
    $client_file = $target_dir . "client-jc_" . $_GET['jc_no'] . "-" . $users['record_id'] . "-signature.png";
    $client_url = $target_url . "client-jc_" . $_GET['jc_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>
                <?php
    }
    ?>

        </div>


        <!-- CLIENT SIGNATURE -->

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

        $pump_file = $dir . $jobcard_data['pump_slip'];
        $pump_url = $url . $jobcard_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>
                <?php
        }
        ?>

        </div>
        <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->insert("jobcards");
        $done_ajax->selected_div("complete_div");
        $done_ajax->add_column_and_value("status=1");
        $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>