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

//get the current date and time
$current_date_time = date("Y-m-d H:i", strtotime("+2 hours"));

//get the seeion user id
$user_id = $_SESSION['user_id'];

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

$action_date = new input();
$action_date->class("inputs");
$action_date->type("datetime-local");
$action_date->name("action_date");
$action_date->id("action_date");
$action_date->value_from_db("jobcards", "action_date", "record_id = {$_GET['record_id']}");

$action_date_label = new label();
$action_date_label->for("action_date");
$action_date_label->value("ACTION DATE");

$contact_name = new input();
$contact_name->class("inputs");
$contact_name->type("text");
$contact_name->placeholder("CONTACT NAME");
$contact_name->name("contact_name");
$contact_name->id("contact_name");
$contact_name->value_from_db("jobcards", "contact_name", "record_id = {$_GET['record_id']}");

$address = new input();
$address->class("inputs");
$address->type("text");
$address->placeholder("ADDRESS");
$address->name("address");
// $address->required();
$address->id("address");
$address->value_from_db("jobcards", "address", "record_id = {$_GET['record_id']}");

$phone = new input();
$phone->class("inputs");
$phone->type("text");
$phone->placeholder("PHONE NUMBER");
$phone->name("contact_number");
$phone->id("contact_number");
$phone->value_from_db("jobcards", "contact_number", "record_id = {$_GET['record_id']}");

$other_number = new input();
$other_number->class("inputs");
$other_number->type("text");
$other_number->placeholder("OTHER NUMBER");
$other_number->name("other_number");
$other_number->id("other_number");
$other_number->value_from_db("jobcards", "other_number", "record_id = {$_GET['record_id']}");

$contact_number_label = new label();
$contact_number_label->for("contact_number");
$contact_number_label->value("CONTACT NUMBER");

$other_number_label = new label();
$other_number_label->for("other_number");
$other_number_label->value("OTHER NUMBER");

$alternate_number_label = new label();
$alternate_number_label->for("alternate_number");
$alternate_number_label->value("ALTERNATE NUMBER");

$alternate_number = new input();
$alternate_number->class("inputs");
$alternate_number->type("text");
$alternate_number->placeholder("ALTERNATE NUMBER");
$alternate_number->name("alternate_number");
$alternate_number->id("alternate_number");
$alternate_number->value_from_db("jobcards", "alternate_number", "record_id = {$_GET['record_id']}");

$client_name = new input();
$client_name->class("inputs");
$client_name->name("client_name");
$client_name->id("client_name");
$client_name->value_from_db("jobcards", "client_name", "record_id = {$_GET['record_id']}");

$contact_name_label = new label();
$contact_name_label->for("contact_name_label");
$contact_name_label->value("CONTACT NAME");

$date_time_closed = new input();
$date_time_closed->class("inputs");
$date_time_closed->style("display: none;");
$date_time_closed->name("date_time_closed");
$date_time_closed->value(0);
$date_time_closed->id("date_time_closed");

$jobcard_number_label = new label();
$jobcard_number_label->for("jc_no");
$jobcard_number_label->value("JOBCARD NUMBER");

$jobcard_number = new input();
$jobcard_number->class("inputs");
$jobcard_number->type("text");
$jobcard_number->readonly();
$jobcard_number->name("jc_no");
$jobcard_number->id("jc_no");
$jobcard_number->value_from_db("jobcards", "jc_no", "record_id = {$_GET['record_id']}");

$user_assigned = new select();
$user_assigned->class("inputs");
$user_assigned->name("user_assigned");
// $user_assigned->required();
$user_assigned->id("user_assigned");
$user_assigned->fill_from_db("users", "record_id", "username");

$user_assigned_label = new label();
$user_assigned_label->for("user_assigned");
$user_assigned_label->value("USER ASSIGNED");

$team_assigned = new select();
$team_assigned->class("inputs");
$team_assigned->name("team_assigned_id");
// $team_assigned->required();
$team_assigned->id("team_assigned_id");
$team_assigned->fill_from_db("teams", "record_id", "name");

$team_assigned_label = new label();
$team_assigned_label->for("team_assigned");
$team_assigned_label->value("TEAM ASSIGNED");

$client_name_label = new label();
$client_name_label->for("client_name");
$client_name_label->value("CLIENT NAME");

$payment = new select();
$payment->class("inputs");
$payment->name("payment_made");
$payment->id("payment_made");
$payment->add_option("YES", "YES");
$payment->add_option("NO", "NO");
$payment->onchange("payment_available()");

$payment_type_label = new label();
$payment_type_label->for("payment_type_label");
$payment_type_label->value("PAYMENT TYPE");

$submit_btn = new button();
$submit_btn->value("UPDATE");
$submit_btn->onclick("update_jobcard()");

?>

<div class="form_down">
    <h1>EDIT JOBCARD</h1>

    <script>
        function add_number() {
            //create a input with a placeholder called other
            var other = document.createElement("input");
            other.type = "text";
            other.placeholder = "OTHER";
            other.name = "other";
            other.id = "other";
            // other.required = true;
            document.getElementById("other_div").appendChild(other);
        }
    </script>
    <?php
    $record_id->add();
    $jobcard_number_label->add();
    $jobcard_number->add();
    $action_date_label->add();
    $action_date->add();
    $client_name_label->add();
    $client_name->add();
    $contact_name_label->add();
    $contact_name->add();

    ?>
    <div style="display: flex; width: 45%; justify-content: space-between;">
        <?php
        $contact_number_label->add();
        $other_number_label->add();
        $alternate_number_label->add();
        ?>
    </div>
    <div>
        <?php
        $phone->add();
        $other_number->add();
        $alternate_number->add();
        ?>
    </div>

    <?php

    $address->add();

    ?>

    <div style="padding: 2vw; background-color: navy; width: 95%;">
        <h2 style="color:white;">PAYMENTS</h2>
        <div style="width: 100%; display: flex;flex-direction: row;">
            <div
                style='display:flex; flex-direction: column; width: 50%; align-items: center; background-color: whitesmoke; padding: 1vw;'>
                <?php
                $payment_type_label->add();
                $payment->add();

                $jobcard_id_data_res = $db->query("jobcards", "SELECT * FROM jobcards WHERE record_id = {$_GET['record_id']}");
                $jobcard_id = $jobcard_id_data_res->fetch_assoc();

                ?>

                <div id="payments_section"
                    style="display:none; flex-direction: column; align-items: center; width: 60%; margin: 2vw;">

                    <label for="payment_type_label">PAYMENT TYPE</label>
                    <select name="payment_type" id="payment_type" onchange="payment_option()" class="inputs">
                        <option value=""></option>
                        <option value="CASH">CASH</option>
                        <option value="EFT">EFT</option>
                    </select>

                    <div id="eft_payment" style="display:none; flex-direction: column; align-items: center;">
                        <label for="eft_type">TYPE</label>
                        <select name="eft_type" id="eft_type" onchange="eft_option()" class="inputs">
                            <option value=""></option>
                            <option value="FILE">ATTACH FILE</option>
                            <option value="CAMERA">OPEN CAMERA</option>
                        </select>
                        <div id="file_div" style="display:none; flex-direction: column; align-items: center;">
                            <input type="file" name="payment_proof" id="payment_proof" class="inputs"
                                onchange="upload_file_ajax()">
                        </div>
                        <div id="camera_div" style="display:none; flex-direction: column; align-items: center;">
                            <style>
                                video,
                                canvas {
                                    width: 400px;
                                    height: 300px;
                                    border: 3px solid #ccc;
                                    border-radius: 2vw;
                                    margin-top: 10px;
                                }

                                @media all and (max-width: 600px) {

                                    video,
                                    canvas {
                                        width: 600px;
                                        height: 450px;
                                        margin-top: -5vw;
                                    }
                                }
                            </style>

                            <video style="display: none;" id="camera_slip" autoplay playsinline></video>
                            <br>

                            <input type="button" id="open_camera_slip" class="submit_btn" onclick="openSlipCamera()"
                                value="Open Camera">

                            <div id="load_camera_slip" style="display: none; width: 100%; justify-content: center;">
                                <input type="button" class="submit_btn" onclick="captureSlipPhoto()"
                                    value="Capture Photo">
                                <input type="button" class="submit_btn" onclick="stopSlipCamera()" value="Stop Camera">
                            </div>

                            <div id="captured_image_slip" style="display:none">
                                <h3>Captured Image:</h3>
                                <canvas id="snapshot_slip"></canvas>
                            </div>

                            <script>
                                let stream_slip;

                                async function openSlipCamera() {
                                    const video = document.getElementById("camera_slip");
                                    const load_camera = document.getElementById("load_camera_slip");
                                    const open_camera = document.getElementById("open_camera_slip");

                                    try {

                                        stream_slip = await navigator.mediaDevices.getUserMedia({
                                            video: { facingMode: "environment" },
                                            audio: false
                                        });

                                        const video = document.getElementById("camera_slip");
                                        video.srcObject = stream_slip;
                                        video.style.display = "block";

                                        load_camera.style.display = "flex";
                                        open_camera.style.display = "none";


                                    } catch (error) {
                                        alert("Error accessing camera: " + error.message);
                                    }
                                }

                                function captureSlipPhoto() {
                                    const video = document.getElementById("camera_slip");
                                    const canvas = document.getElementById("snapshot_slip");
                                    const context = canvas.getContext("2d");
                                    const captured_image = document.getElementById("captured_image_slip");
                                    const load_camera = document.getElementById("load_camera_slip");
                                    const jobcard_no = "<?php echo $jobcard_no ?>";

                                    load_camera.style.display = "none";
                                    canvas.width = video.videoWidth;
                                    canvas.height = video.videoHeight;
                                    context.drawImage(video, 0, 0, canvas.width, canvas.height);

                                    captured_image.style.display = "none";

                                    const imageData = canvas.toDataURL("image/png");

                                    stopSlipCamera();
                                    saveCapturedSlipImage(imageData, jobcard_no);
                                }

                                function stopSlipCamera() {
                                    const open_camera = document.getElementById("open_camera_slip");
                                    const load_camera = document.getElementById("load_camera_slip");
                                    const video = document.getElementById("camera_slip");

                                    video.style.display = "none";
                                    load_camera.style.display = "none";
                                    open_camera.style.display = "block";
                                    if (stream_slip) {
                                        stream_slip.getTracks().forEach(track => track.stop());
                                        stream_slip = null;
                                        document.getElementById("camera_slip").srcObject = null;
                                    }
                                }

                                function saveCapturedSlipImage(imageData, jobcard_no) {
                                    const video = document.getElementById("camera_slip");
                                    const folder_path = "../jobcards/slips/";
                                    const section_name = "slip";

                                    video.style.display = "none";

                                    var formData = new FormData();

                                    formData.append('image', imageData);
                                    formData.append('jobcard_no', jobcard_no);
                                    formData.append('folder_path', folder_path);
                                    formData.append('section_name', section_name);

                                    const xhr = new XMLHttpRequest();
                                    xhr.open('POST', '../jobcards/save_camera.php', true);
                                    xhr.onreadystatechange = function () {
                                        if (xhr.readyState == 4 && xhr.status == 200) {
                                            if (xhr.responseText != '0') {
                                                console.log('fileName: ' + xhr.responseText);
                                                alert('Photo saved successfully!');
                                                if ('slip' != '') {
                                                    document.getElementById('slip_file').style.display = 'block';
                                                    document.getElementById('slip_file').value = xhr.responseText;
                                                }
                                            } else {
                                                alert('Error saving photo!');
                                            }
                                        }
                                    };
                                    xhr.send(formData);
                                }
                            </script>

                            <input type='text' style="display: none;" class="inputs" id='slip_file' name='slip_file'>
                        </div>
                    </div>

                    <div id="cash_payment" style="display:none; flex-direction: column; align-items: center;">
                        <label for="payment_amount_label">Amount</label>
                        <input type="text" class="inputs" placeholder="AMOUNT" name="payment_amount"
                            id="payment_amount">
                        <div class="error-message" id="error" style="display: none;"></div>
                    </div>

                    <input type="button" value="SAVE PAYMENT" class="submit_btn" onclick="save_file_ajax()">
                </div>

                <script>

                    function save_file_ajax() {
                        var payment_type = document.getElementById("payment_type").value;
                        var amount = document.getElementById("payment_amount").value;
                        var jobcard_no = "<?php echo $jobcard_id['jc_no'] ?>";
                        var user_id = "<?php echo $_SESSION['user_id'] ?>";
                        var eft_type = document.getElementById("eft_type").value;

                        var formData = new FormData();

                        if (payment_type === "") {
                            alert("Please select a payment type.");
                            return false;
                        }

                        if (amount.trim() === "" || isNaN(amount) || amount <= 0) {
                            alert("Please enter a valid positive amount.");
                            return false;
                        }

                        // Handle EFT specific validation and file attachment
                        if (payment_type === "EFT") {
                            // FIXED: Changed "CAMARA" to "CAMERA"
                            if (eft_type === "CAMERA") {
                                var slip_input = document.getElementById("slip_file").value;

                                // FIXED: Check for empty string, not space
                                if (slip_input === "" || slip_input.trim() === "") {
                                    alert("Please capture Slip Image");
                                    return false;
                                }

                                formData.append('file', slip_input);
                            } else if (eft_type === "FILE") {
                                // CHANGED: Get the stored filename instead of the file object
                                var uploaded_filename = document.getElementById("uploaded_file_name");

                                if (!uploaded_filename || uploaded_filename.value === "") {
                                    alert("Please upload a file first.");
                                    return false;
                                }

                                formData.append('file', uploaded_filename.value);
                            } else {
                                alert("Please select how you want to provide payment proof.");
                                return false;
                            }
                        }

                        // AJAX Request (simulated for demo)
                        console.log('Sending payment data:', {
                            payment_type: payment_type,
                            amount: amount,
                            jobcard_no: jobcard_no,
                            user_id: user_id,
                            eft_type: eft_type,
                        });

                        // Simulate successful save
                        setTimeout(() => {
                            // alert("Payment saved successfully!");

                            // FIXED: Clear inputs properly
                            document.getElementById("payment_made").value = "";
                            document.getElementById("payment_type").value = "";
                            document.getElementById("payment_amount").value = "";
                            document.getElementById("eft_type").value = "";
                            document.getElementById("slip_file").value = "";
                            document.getElementById("payment_proof").value = "";

                            // Reset file input
                            var fileInput = document.getElementById("payment_proof");
                            if (fileInput) fileInput.value = "";

                            // Hide sections
                            document.getElementById("cash_payment").style.display = "none";
                            document.getElementById("eft_payment").style.display = "none";
                            document.getElementById("file_div").style.display = "none";
                            document.getElementById("camera_div").style.display = "none";
                            document.getElementById("payments_section").style.display = "none";

                        }, 500);

                        formData.append('payment_type', payment_type);
                        formData.append('jobcard_no', jobcard_no);
                        formData.append('record_id', jobcard_no)
                        formData.append('amount', amount);
                        formData.append('user_id', user_id);
                        formData.append('create', "create");

                        var xhr = new XMLHttpRequest();
                        xhr.onreadystatechange = function () {

                            if (xhr.readyState === 4) {
                                if (xhr.status === 200 && xhr.responseText.includes("OK")) {
                                    console.log(`PAYMENYT SUCCESS: ${xhr.responseText}`);
                                    alert("Payment Saved successfully!");

                                    // Clear all inputs
                                    document.getElementById("payment_type").value = "";
                                    document.getElementById("payment_amount").value = "";
                                    document.getElementById("eft_type").value = "";
                                    document.getElementById("slip_file").value = "";

                                    var fileInput = document.getElementById("payment_proof");
                                    if (fileInput) fileInput.value = "";

                                    //update payment history
                                    loadPaymentHistory();

                                    // Hide sections
                                    payment_option();


                                } else {
                                    console.log(`Error saving PAYMENT: ${xhr.responseText}`);
                                    // alert('Error completing payment! ,try again.');
                                    return false;
                                }
                            }
                        };
                        xhr.open("POST", "../jobcards/jobcard_payments.ajax.php", true);
                        xhr.send(formData);
                    }

                    function payment_option() {
                        var select = document.getElementById("payment_type");
                        var cash_payment = document.getElementById("cash_payment");
                        var eft_payment = document.getElementById("eft_payment");

                        if (select.value === "EFT") {
                            cash_payment.style.display = "flex";
                            eft_payment.style.display = "flex";
                        } else if (select.value === "CASH") {
                            cash_payment.style.display = "flex";
                            eft_payment.style.display = "none";
                        } else {
                            cash_payment.style.display = "none";
                            eft_payment.style.display = "none";
                        }
                    }

                    function eft_option() {
                        var select = document.getElementById("eft_type");
                        var file_div = document.getElementById("file_div");
                        var camera_div = document.getElementById("camera_div");

                        if (select.value === "FILE") {
                            file_div.style.display = "flex";
                            camera_div.style.display = "none";
                        } else if (select.value === "CAMERA") {
                            file_div.style.display = "none";
                            camera_div.style.display = "flex";
                        } else {
                            file_div.style.display = "none";
                            camera_div.style.display = "none";
                        }
                    }

                    function payment_available() {
                        var payment_made = document.getElementById("payment_made");
                        if (payment_made.value == "YES") {
                            document.getElementById("payments_section").style.display = "flex";
                        } else if (payment_made.value == "NO") {
                            document.getElementById("payments_section").style.display = "none";
                        } else {
                            document.getElementById("payments_section").style.display = "none";
                        }
                    }

                    function upload_file_ajax() {
                        var payment_proof = document.getElementById("payment_proof");
                        var file = payment_proof.files[0];
                        var jobcard_no = "<?php echo $jobcard_no ?>";

                        if (file) {
                            var formData = new FormData();
                            formData.append('file', file);
                            formData.append('jobcard_no', jobcard_no);
                            formData.append('ajax_type', "lead_payment_slip");
                            formData.append('section_name', "slip");
                            formData.append('file_save_path', "../jobcards/slips/");

                            var xhr = new XMLHttpRequest();
                            xhr.onreadystatechange = function () {
                                if (xhr.readyState === 4) {
                                    if (xhr.status === 200 && xhr.responseText.includes("OK")) {
                                        console.log(`File uploaded successfully: ${xhr.responseText}`);

                                        var response = xhr.responseText;
                                        var filename = response.replace('OK | ', '').trim(); // Adjust based on your response format

                                        // Store filename in hidden input (create this if it doesn't exist)
                                        var uploadedFileInput = document.getElementById('uploaded_file_name');
                                        if (!uploadedFileInput) {
                                            uploadedFileInput = document.createElement('input');
                                            uploadedFileInput.type = 'hidden';
                                            uploadedFileInput.id = 'uploaded_file_name';
                                            uploadedFileInput.name = 'uploaded_file_name';
                                            document.getElementById('file_div').appendChild(uploadedFileInput);
                                        }
                                        uploadedFileInput.value = filename;

                                        alert("File uploaded successfully!");
                                    } else {
                                        console.log(`Error uploading file: ${xhr.responseText}`);
                                        alert('Error uploading file! ,try again.');
                                    }
                                }
                            };
                            xhr.open("POST", "../jobcards/upload.php", true);
                            xhr.send(formData);
                        }
                    }

                    function loadPaymentHistory() {
                        var jobcard_no = "<?php echo $jobcard_id['jc_no']; ?>";

                        var xhr = new XMLHttpRequest();
                        xhr.onreadystatechange = function () {
                            if (xhr.readyState === 4 && xhr.status === 200) {
                                document.getElementById("payment_history_table").innerHTML = xhr.responseText;
                            }
                        };

                        xhr.open("POST", "../jobcards/payment_history.ajax.php", true);
                        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                        xhr.send("jobcard_no=" + encodeURIComponent(jobcard_no));
                    }

                    // Load history on page load
                    document.addEventListener("DOMContentLoaded", loadPaymentHistory);

                    loadPaymentHistory();

                </script>
            </div>
            <div id="payment_history_table"
                style="display: flex; flex-direction: column;width: 50%;justify-content: center; padding: 1vw; background-color: whitesmoke;">
            </div>
        </div>
    </div>

    <?php
    $team_assigned_label->add();

    $jobcard_team_res = $db->query("jobcards", "SELECT * FROM jobcards WHERE record_id = {$_GET['record_id']}");
    $jobcard_team = $jobcard_team_res->fetch_assoc();

    ?>
    <div id="teams" style="flex-direction: column;">
        <select name="team_assigned_id" id="team_assigned_id" class="inputs">
            <option value=""></option>
            <option value="1" <?= ($jobcard_team['team_assigned_id'] == "1") ? 'selected' : '' ?>>B2</option>
            <option value="2" <?= ($jobcard_team['team_assigned_id'] == "2") ? 'selected' : '' ?>>B5</option>
            <option value="3" <?= ($jobcard_team['team_assigned_id'] == "3") ? 'selected' : '' ?>>EWG</option>
            <option value="4" <?= ($jobcard_team['team_assigned_id'] == "4") ? 'selected' : '' ?>>B14</option>
            <option value="5" <?= ($jobcard_team['team_assigned_id'] == "5") ? 'selected' : '' ?>>OFFICE</option>
        </select>
    </div>
    <?php
    $user_assigned_label->add();
    $user_assigned->add();
    ?>


    <?php
    $submit_btn->add();
    ?>

    <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;
        }
    </style>

    <div
        style="display: flex; flex-direction: column; align-items: center; background-color: white; margin: 4vw; border-radius: 2vw; width: 80%;">
        <?php
        $jobcard_data_res = $db->query("jobcards", "SELECT * FROM jobcards WHERE record_id = {$_GET['record_id']}");
        $jobcard_data = $jobcard_data_res->fetch_assoc();


        $res_data = $db->query("jobcard_timeline", "SELECT * FROM jobcard_timeline WHERE jobcard_id = {$jobcard_data['record_id']}  ORDER BY record_id ASC");

        if ($res_data->num_rows > 0) {

            $jobcard_res = $db->query("jobcards", "SELECT * FROM jobcards WHERE record_id = {$jobcard_data['record_id']}");
            $jobcard = $jobcard_res->fetch_assoc();

            // echo $jobcard['record_id'];
        
            ?>

            <h1>JOBCARD SUMMARY</h1>

            <table
                style='border-radius: 2vw;padding-top: 2vw;padding-bottom: 2vw;width:60%; text-align:center; border: 2px solid black;background-color: #ffffffc4;'>
                <tr>
                    <th>TYPE</th>
                    <th>METERS</th>
                    <th>DATE</th>
                </tr>
                <?php
                $riem_meters = 0;
                $drilling_meters = 0;
                $casing_meters = 0;
                $blasting_meters = 0;

                while ($jc_timeline = $res_data->fetch_assoc()) {

                    if ($jc_timeline['type'] == "RIEM_STOP" || $jc_timeline['type'] == "RIEMING_STOP") {
                        $riem_meters += $jc_timeline['meters'];
                    }

                    if ($jc_timeline['type'] == "DRILLING_STOP") {
                        $drilling_meters += $jc_timeline['meters'];
                    }

                    if ($jc_timeline['type'] == "CASING_STOP") {
                        $casing_meters += $jc_timeline['meters'];
                    }

                    if ($jc_timeline['type'] == "BLASTING_START" || $jc_timeline['type'] == "BLASTING_STOP") {
                        $blasting_meters += $jc_timeline['meters'];
                    }

                    ?>
                    <tr>
                        <td> <?php echo $jc_timeline['type'] ?> </td>
                        <td> <?php echo $jc_timeline['meters'] ?> </td>
                        <td> <?php echo $jc_timeline['date_time'] ?> </td>
                    </tr>
                    <?php
                }
                ?>
            </table><br><br>

            <table style="width:80%;">
                <tr>
                    <td> </td>
                    <td> TOTAL </td>
                </tr>
                <tr>
                    <td> TOTAL RIEM METERS </td>
                    <td> <?php echo $riem_meters ?> </td>
                </tr>
                <tr>
                    <td> TOTAL DRILLING METERS </td>
                    <td> <?php echo $drilling_meters ?> </td>
                </tr>
                <tr>
                    <td> TOTAL CASING METERS </td>
                    <td> <?php echo $casing_meters ?> </td>
                </tr>
                <tr>
                    <td> TOTAL BLASTING METERS</td>
                    <td> <?php echo $blasting_meters ?></td>
                </tr>
            </table>

            <br><br>

        </div>

        <div
            style="display: flex; flex-direction: column; align-items: center; background-color: white; margin: 4vw; border-radius: 2vw; padding: 2vw;width: 80%;">
            <table
                style='border-radius: 2vw;padding-top: 2vw;padding-bottom: 2vw;width:60%; text-align:center; border: 2px solid black;background-color: #ffffffc4;'>
                <tr>
                    <th></th>
                    <th>VALUE</th>
                </tr>
                <tr>
                    <td>Interested in Pump: </td>
                    <td><?php echo $jobcard['interested_in_pump']; ?></td>
                </tr>
                <tr>
                    <td>Water Flow: </td>
                    <td> <?php echo $jobcard['water_flow']; ?> </td>
                </tr>
                <tr>
                    <td>Compressor Hours: </td>
                    <td> <?php echo $jobcard['compressor_hours'] ?> </td>
                </tr>
                <tr>
                    <td>Diesel Start: </td>
                    <td> <?php echo $jobcard['diesel_start'] ?> </td>
                </tr>
                <tr>
                    <td>Diesel Stop: </td>
                    <td> <?php echo $jobcard['diesel_stop'] ?> </td>
                </tr>

                </tr>
            </table>
        </div>

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

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

            // EMPLOYEE SIGNATURE
            $employee_files = glob("signatures/employee-jc{$jobcard['jc_no']}-*-signature.png");

            if (!empty($employee_files)) {
                $employee_sig = $employee_files[0]; // first match
                ?>
                <div class='jobcard_work_signature' style='margin-bottom:1vw;'>
                    <h2>EMPLOYEE SIGNATURE</h2>
                    <input type='image' src='<?php echo $employee_sig; ?>' alt='employee signature' class="signature_image">
                </div>
                <?php
            }

            // CLIENT SIGNATURE
            $client_files = glob("signatures/client-jc{$jobcard['jc_no']}-*-signature.png");

            if (!empty($client_files)) {
                $client_sig = $client_files[0]; // first match
                ?>
                <div class='jobcard_work_signature' style='margin-bottom:1vw;'>
                    <h2>CLIENT SIGNATURE</h2>
                    <input type="image" src="<?php echo $client_sig; ?>" alt="client signature" class="signature_image">
                </div>
                <?php
            }

            ?>

            <br>
        </div>

        <?php

        } else {
            ?>
        <h1>Job Card Summary</h1>
        <table
            style='border-radius: 2vw;padding-top: 2vw;padding-bottom: 2vw;width:50%; text-align:center; border: 2px solid black;background-color: #ffffffc4;'>
            <tr>
                <th>NAME</th>
                <th>VALUE</th>
            </tr>
            <tr>
                <td></td>
                <td> DATA NOT FOUND </td>
                <td></td>
            </tr>

        </table>

        <br>
        <?php
        }
        ?>
</div>

<?php

$ajax = new js_ajax();
$ajax->function_name("update_jobcard");
$ajax->submit_btn_id("submit");
$ajax->update("jobcards");
$ajax->on_success("JOBCARD UPDATED SUCCESSFULLY");
$ajax->redirect("../jobcards/home.php");

?>