<?php include "../../root.class.php";
$html = new html();
$html->add_styles_page();
// $html->check_user_type("ADMIN");
$db = new db_safeguard();
session_start();

//get the current date and time
$current_date_time = date("Y-m-d H:i", strtotime("+2 hours"));
?>

<div class="form_down">
    <?php

    $current_bit_res = $db->query("notes", "SELECT * FROM notes WHERE jobcard_id = {$_GET['record_id']} AND reason = 'CURRENT BIT'");
    $current_bit = $current_bit_res->fetch_assoc();

    if (!$current_bit || $current_bit['reason'] != "CURRENT BIT") {
        ?>
        <script>
            window.location.href = "current_bit.php?record_id=<?php echo $_GET['record_id']; ?>";
        </script>
        <?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();


    $jobcard_id = new input();
    $jobcard_id->type("hidden");
    $jobcard_id->name("jobcard_id");
    $jobcard_id->id("jobcard_id");
    $jobcard_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->for("reasons");
    $reasons_label->value("REASONS");
    $reasons_label->addAttribute("style", "font-size: 1.5vw; color: white;");

    $reasons = new select();
    $reasons->class("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->for("notes");
    $notes_label->value("NOTES");
    $notes_label->addAttribute("style", "font-size: 4vw; color: white; margin:1px;");

    $notes = new input();
    $notes->class("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");

    if ($data['type'] == "DRILLING") {

        $drilling_lable = new label();
        $drilling_lable->for("drilling");
        $drilling_lable->value("DRILLING");
        $drilling_lable->addAttribute("style", "margin-top: 1vw;font-weight: bold;font-size: 3vw;");

        $start = new button();
        $start->value("START");
        $start->onclick("drilling_start()");

        $make_notes_btn = new button();
        $make_notes_btn->value("MAKE NOTES");
        $make_notes_btn->onclick("open_notesPopup()");
        $make_notes_btn->id("make_notes");

        $meters_1 = new input();
        $meters_1->type("number");
        $meters_1->id("meters_1");
        $meters_1->onclick("clicked(this, this)");
        $meters_1->readonly();
        $meters_1->class("work_inputs");
        $meters_1->placeholder("30 METERS");
        $meters_1->value(30);
        $meters_1->disabled();
        $meters_1->style("background-color: #f8843561; color: black;");

        $meters_2 = new input();
        $meters_2->type("number");
        $meters_2->id("meters_2");
        $meters_2->onclick("clicked(this, this)");
        $meters_2->readonly();
        $meters_2->class("work_inputs");
        $meters_2->placeholder("70 METERS");
        $meters_2->value(70);
        $meters_2->disabled();
        $meters_2->style("background-color: #f8843561; color: black;");

        $meters_3 = new input();
        $meters_3->type("number");
        $meters_3->id("meters_3");
        $meters_3->onclick("clicked(this, this)");
        $meters_3->readonly();
        $meters_3->class("work_inputs");
        $meters_3->placeholder("110 METERS");
        $meters_3->value(110);
        $meters_3->disabled();
        $meters_3->style("background-color: #f8843561; color: black;");

        $meters_4 = new input();
        $meters_4->type("number");
        $meters_4->id("meters_4");
        $meters_4->onclick("clicked(this, this)");
        $meters_4->readonly();
        $meters_4->class("work_inputs");
        $meters_4->placeholder("150 METERS");
        $meters_4->value(150);
        $meters_4->disabled();
        $meters_4->style("background-color: #f8843561; color: black;");

        $drilling_meters = new input();
        $drilling_meters->type("number");
        $drilling_meters->name("meters");
        $drilling_meters->id("meters");
        $drilling_meters->class("work_inputs");
        $drilling_meters->placeholder("DRILLING METERS");
        $drilling_meters->style("background-color: #f8843561; text-align: center; color: black;");
        $drilling_meters->disabled();

        $next = new button();
        $next->value("NEXT");
        $next->disabled();
        $next->style("background-color: #00008045; color: white;");

        $drilling_lable->add();
        ?>

        <div style="display: flex; flex-direction: row;width: 100%;justify-content: center;">
            <?php
            $start->add();
            $make_notes_btn->add();
            ?>
        </div>

        <?php
        $meters_1->add();
        $meters_2->add();
        $meters_3->add();
        $meters_4->add();
        ?>
        <div class="timeline">
            <?php
            $drilling_meters->add();
            ?>
        </div>

        <?php
        $next->add();

        $drilling_start_ajax = new js_ajax();
        $drilling_start_ajax->function_name("drilling_start");
        $drilling_start_ajax->insert("jobcard_timeline");
        $drilling_start_ajax->selected_div("timeline");
        $drilling_start_ajax->add_column_and_value("jobcard_id={$_GET['record_id']},date_time=" . $current_date_time . ",type=DRILLING_START,user_id={$_SESSION['user_id']}");
        $drilling_start_ajax->on_success("DRILLING STARTED");

    } elseif ($data['type'] == "DRILLING_START") {

        $drilling_lable = new label();
        $drilling_lable->for("drilling");
        $drilling_lable->value("DRILLING");
        $drilling_lable->addAttribute("style", "margin-top: 1vw;font-weight: bold;font-size: 3vw;");

        $make_notes_btn = new button();
        $make_notes_btn->value("MAKE NOTES");
        $make_notes_btn->onclick("open_notesPopup()");
        $make_notes_btn->id("make_notes");

        $stop = new button();
        $stop->value("STOP");
        $stop->onclick("if (check_stop()){ drilling_stop() ;}");

        $meters_1 = new input();
        $meters_1->type("number");
        $meters_1->id("meters_1");
        $meters_1->onclick("clicked(this, this)");
        $meters_1->readonly();
        $meters_1->class("work_inputs");
        $meters_1->placeholder("30 METERS");
        $meters_1->value(30);

        $meters_2 = new input();
        $meters_2->type("number");
        $meters_2->id("meters_2");
        $meters_2->onclick("clicked(this, this)");
        $meters_2->readonly();
        $meters_2->class("work_inputs");
        $meters_2->placeholder("70 METERS");
        $meters_2->value(70);

        $meters_3 = new input();
        $meters_3->type("number");
        $meters_3->id("meters_3");
        $meters_3->onclick("clicked(this, this)");
        $meters_3->readonly();
        $meters_3->class("work_inputs");
        $meters_3->placeholder("110 METERS");
        $meters_3->value(110);

        $meters_4 = new input();
        $meters_4->type("number");
        $meters_4->id("meters_4");
        $meters_4->onclick("clicked(this, this)");
        $meters_4->readonly();
        $meters_4->class("work_inputs");
        $meters_4->placeholder("150 METERS");
        $meters_4->value(150);

        $drilling_meters = new input();
        $drilling_meters->type("number");
        $drilling_meters->name("meters");
        $drilling_meters->id("meters");
        $drilling_meters->class("work_inputs");
        $drilling_meters->placeholder("DRILLING METERS");
        $drilling_meters->style("text-align: center;");

        $next = new button();
        $next->value("NEXT");
        $next->disabled();
        $next->style("background-color: #00008045; color: white;");

        $drilling_lable->add();
        ?>

        <div style="display: flex; flex-direction: row;width: 100%;justify-content: center;">
            <?php
            $stop->add();
            $make_notes_btn->add();
            ?>
        </div>

        <?php
        $meters_1->add();
        $meters_2->add();
        $meters_3->add();
        $meters_4->add();
        ?>

        <div class="timeline">
            <?php

            $drilling_meters->add();
            ?>
        </div>

        <?php
        $next->add();

        $drilling_stop_ajax = new js_ajax();
        $drilling_stop_ajax->function_name("drilling_stop");
        $drilling_stop_ajax->insert("jobcard_timeline");
        $drilling_stop_ajax->selected_div(".timeline input");
        $drilling_stop_ajax->add_column_and_value("jobcard_id={$_GET['record_id']},date_time=" . $current_date_time . ",type=DRILLING_STOP,user_id={$_SESSION['user_id']}");
        $drilling_stop_ajax->on_success("DRILLING STOPPED");

    } elseif ($data['type'] == "DRILLING_STOP") {

        $drilling_lable = new label();
        $drilling_lable->for("drilling");
        $drilling_lable->value("DRILLING");
        $drilling_lable->addAttribute("style", "margin-top: 1vw;font-weight: bold;font-size: 3vw;");

        $make_notes_btn = new button();
        $make_notes_btn->value("MAKE NOTES");
        $make_notes_btn->onclick("open_notesPopup()");
        $make_notes_btn->id("make_notes");

        $start = new button();
        $start->value("START");
        $start->onclick("drilling_start()");

        $meters_1 = new input();
        $meters_1->type("number");
        $meters_1->id("meters_1");
        $meters_1->onclick("clicked(this, this)");
        $meters_1->readonly();
        $meters_1->class("work_inputs");
        $meters_1->placeholder("30 METERS");
        $meters_1->value(30);
        $meters_1->disabled();
        $meters_1->style("background-color: #f8843561; color: black;");

        $meters_2 = new input();
        $meters_2->type("number");
        $meters_2->id("meters_2");
        $meters_2->onclick("clicked(this, this)");
        $meters_2->readonly();
        $meters_2->class("work_inputs");
        $meters_2->placeholder("70 METERS");
        $meters_2->value(70);
        $meters_2->disabled();
        $meters_2->style("background-color: #f8843561; color: black;");

        $meters_3 = new input();
        $meters_3->type("number");
        $meters_3->id("meters_3");
        $meters_3->onclick("clicked(this, this)");
        $meters_3->readonly();
        $meters_3->class("work_inputs");
        $meters_3->placeholder("110 METERS");
        $meters_3->value(110);
        $meters_3->disabled();
        $meters_3->style("background-color: #f8843561; color: black;");

        $meters_4 = new input();
        $meters_4->type("number");
        $meters_4->id("meters_4");
        $meters_4->onclick("clicked(this, this)");
        $meters_4->readonly();
        $meters_4->class("work_inputs");
        $meters_4->placeholder("150 METERS");
        $meters_4->value(150);
        $meters_4->disabled();
        $meters_4->style("background-color: #f8843561; color: black;");

        // $tot_drilling_meters_res = $db->query("jobcard_timeline", "SELECT SUM(meters) AS total FROM jobcard_timeline WHERE jobcard_id = {$_GET['record_id']} AND type = 'DRILLING_STOP'");
        // $tot_drilling_meters = $tot_drilling_meters_res->fetch_assoc()['total'];
    
        $drilling_meters = new input();
        $drilling_meters->type("number");
        $drilling_meters->name("meters");
        $drilling_meters->id("meters");
        $drilling_meters->class("work_inputs");
        $drilling_meters->placeholder("DRILLING METERS");
        // $drilling_meters->value($tot_drilling_meters);
        $drilling_meters->style("background-color: #f8843561; text-align: center; color: black;");
        $drilling_meters->disabled();

        $make_notes_btn = new button();
        $make_notes_btn->value("MAKE NOTES");
        $make_notes_btn->onclick("open_notesPopup()");

        $change_battle_btn = new button();
        $change_battle_btn->value("CHANGE DRILL BIT");
        $change_battle_btn->onclick("open_battle()");
        $change_battle_btn->id("change_battle");

        $next = new button();
        $next->value("NEXT");
        $next->onclick("next()");

        // ADD SECTION
    
        $drilling_lable->add();
        ?>

        <div style="display: flex; flex-direction: row;width: 100%;justify-content: center;">
            <?php
            $start->add();
            $make_notes_btn->add();
            ?>
        </div>

        <?php
        $meters_1->add();
        $meters_2->add();
        $meters_3->add();
        $meters_4->add();
        ?>

        <div class="timeline">
            <?php
            $drilling_meters->add();
            ?>
        </div>
        <?php
        $change_battle_btn->add();
        $next->add();

        $drilling_start_ajax = new js_ajax();
        $drilling_start_ajax->function_name("drilling_start");
        $drilling_start_ajax->insert("jobcard_timeline");
        $drilling_start_ajax->selected_div("timeline");
        $drilling_start_ajax->add_column_and_value("jobcard_id={$_GET['record_id']},date_time=" . $current_date_time . ",type=DRILLING_START,user_id={$_SESSION['user_id']}");
        $drilling_start_ajax->on_success("DRILLING STARTED");

        $next_ajax = new js_ajax();
        $next_ajax->function_name("next");
        $next_ajax->insert("jobcard_timeline");
        $next_ajax->selected_div("timeline");
        $next_ajax->add_column_and_value("jobcard_id={$_GET['record_id']}," . "date_time=" . $current_date_time . ",user_id={$_SESSION['user_id']}," . "type=BLASTING,");
        $next_ajax->on_success("BLASTING");
        $next_ajax->redirect("../jobcards/processing.php?record_id={$_GET['record_id']}&jc_no={$_GET['record_id']}");

    } else {
        $drilling_lable = new label();
        $drilling_lable->for("drilling");
        $drilling_lable->value("DRILLING");
        $drilling_lable->addAttribute("style", "margin-top: 1vw;font-weight: bold;font-size: 3vw;");

        $start = new button();
        $start->value("START");
        $start->onclick("drilling_start()");

        $make_notes_btn = new button();
        $make_notes_btn->value("MAKE NOTES");
        $make_notes_btn->onclick("open_notesPopup()");
        $make_notes_btn->id("make_notes");

        $meters_1 = new input();
        $meters_1->type("number");
        $meters_1->id("meters_1");
        $meters_1->onclick("clicked(this, this)");
        $meters_1->readonly();
        $meters_1->class("work_inputs");
        $meters_1->placeholder("30 METERS");
        $meters_1->value(30);
        $meters_1->disabled();
        $meters_1->style("background-color: #f8843561; color: black;");

        $meters_2 = new input();
        $meters_2->type("number");
        $meters_2->id("meters_2");
        $meters_2->onclick("clicked(this, this)");
        $meters_2->readonly();
        $meters_2->class("work_inputs");
        $meters_2->placeholder("70 METERS");
        $meters_2->value(70);
        $meters_2->disabled();
        $meters_2->style("background-color: #f8843561; color: black;");

        $meters_3 = new input();
        $meters_3->type("number");
        $meters_3->id("meters_3");
        $meters_3->onclick("clicked(this, this)");
        $meters_3->readonly();
        $meters_3->class("work_inputs");
        $meters_3->placeholder("110 METERS");
        $meters_3->value(110);
        $meters_3->disabled();
        $meters_3->style("background-color: #f8843561; color: black;");

        $meters_4 = new input();
        $meters_4->type("number");
        $meters_4->id("meters_4");
        $meters_4->onclick("clicked(this, this)");
        $meters_4->readonly();
        $meters_4->class("work_inputs");
        $meters_4->placeholder("150 METERS");
        $meters_4->value(150);
        $meters_4->disabled();
        $meters_4->style("background-color: #f8843561; color: black;");

        $drilling_meters = new input();
        $drilling_meters->type("number");
        $drilling_meters->name("meters");
        $drilling_meters->id("meters");
        $drilling_meters->class("work_inputs");
        $drilling_meters->placeholder("DRILLING METERS");
        $drilling_meters->style("background-color: #f8843561; text-align: center; color: black;");
        $drilling_meters->disabled();

        $next = new button();
        $next->value("NEXT");
        $next->disabled();
        $next->style("background-color: #00008045; color: white;");

        $drilling_lable->add();
        ?>

        <div style="display: flex; flex-direction: row;width: 100%;justify-content: center;">
            <?php
            $start->add();
            $make_notes_btn->add();
            ?>
        </div>

        <?php
        $meters_1->add();
        $meters_2->add();
        $meters_3->add();
        $meters_4->add();
        ?>
        <div class="timeline">
            <?php
            $drilling_meters->add();
            ?>
        </div>

        <?php
        $next->add();

        $drilling_start_ajax = new js_ajax();
        $drilling_start_ajax->function_name("drilling_start");
        $drilling_start_ajax->insert("jobcard_timeline");
        $drilling_start_ajax->selected_div("timeline");
        $drilling_start_ajax->add_column_and_value("jobcard_id={$_GET['record_id']},date_time=" . $current_date_time . ",type=DRILLING_START,user_id={$_SESSION['user_id']}");
        $drilling_start_ajax->on_success("DRILLING STARTED");
    }
    ?>

</div>

<style>
    .notes_popup {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .notes_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;
    }

    .notes_images {
        width: 10vw;
        height: 10vw;
    }

    .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;
    }

    @media all and (min-width: 651px) and (max-width: 1050px) {

        .notes_content {
            width: 90%;
            height: 95%;
        }

        .close-btn {
            top: 0px;
            font-size: 15vw;
        }
    }
</style>

<div id="notes_popup" class="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();

        $jobcard_id = new input();
        $jobcard_id->type("hidden");
        $jobcard_id->name("jobcard_id");
        $jobcard_id->id("jobcard_id");
        $jobcard_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->for("reasons");
        $reasons_label->value("REASONS");
        $reasons_label->addAttribute("style", "font-size: 1.5vw; color: white;");

        $reasons = new select();
        $reasons->class("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->for("notes");
        $notes_label->value("NOTES");
        $notes_label->addAttribute("style", "font-size: 4vw; color: white; margin:1px;");

        $notes = new input();
        $notes->class("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");

        $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");

        $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->add();
        $date_time->add();
        $notes_label->add();

        ?>

        <div style="display: flex; flex-direction: column;">
            <?php
            $reasons_label->add();
            $reasons->add();
            ?>
        </div>

        <div id="normal_section" style="display: flex; flex-direction: column;align-items: center;">
            <?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_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']}");

            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></td>
            <td>NO NOTES RECORDED</td><td></td><td></td>
            </tr><br>";

            }
            ?>

            <div style="background-color: white;padding-left: 2vw;padding-top: 2vw;">
                <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() {
        document.getElementById("notes_popup").style.display = "block";
    }

    function close_notesPopup() {
        document.getElementById("notes_popup").style.display = "none";
    }

    function open_battle() {
        window.location.href = "../jobcards/change_bit.php?record_id=<?php echo $_GET['record_id']; ?>&jobcard_id=<?php echo $_GET['jc_no']; ?>";
    }

    function check_stop() {
        var drilling_meters = document.getElementById("meters").value;

        if (drilling_meters === "" || drilling_meters === null) {
            alert("Please enter the drilling meters");
            return false;
        }

        return true;
    }

    function clicked(selectedMeter, input) {
        meter_1 = document.getElementById("meters_1");
        meter_2 = document.getElementById("meters_2");
        meter_3 = document.getElementById("meters_3");
        meter_4 = document.getElementById("meters_4");

        const meters = [meter_1, meter_2, meter_3, meter_4];
        const activeIndex = meters.indexOf(selectedMeter);

        meters.forEach((num, index) => {
            if (!num) return; // skip if null

            if (index <= activeIndex) {
                num.style.color = "white";
                num.style.background = "#16bd16";
                num.style.border = "3px solid green";
            } else {
                num.style.color = "grey";
                num.style.background = "white";
                num.style.border = "3px solid orange";
            }
        });

        document.getElementById('meters').value = input.value;

    }
</script>