<?php include "../../root.class.php";
$html = new html();
$html->add_styles_page();
// $html->check_user_type("ADMIN");
$db = new db_safeguard();
session_start();

?>

<button onclick="window.location.href = '../jobcards/jobcard_actions.php?record_id=<?php echo $_GET['record_id']; ?>'"
    class="back_btn"> BACK </button>

<?php

//get the current date and time
$current_date_time = date("Y-m-d H:i", strtotime("+2 hours"));

$drilling_lable = new label();
$drilling_lable->class("heading_h1");
$drilling_lable->for("drilling");
$drilling_lable->value("DRILLING");
$drilling_lable->addAttribute("style", "margin-top: 1vw;font-weight: bold;");

$make_note = new button();
$make_note->class("make_notes_btn");
$make_note->value("MAKE NOTE");
$make_note->onclick("open_notesPopup()");
$make_note->id("make_note");
?>

<div class="form_down">
    <?php

    $current_bit_res = $db->query("notes", "SELECT * FROM notes WHERE jobcard_id = {$_GET['record_id']} AND reason = 'DRILLING BIT'");
    $current_bit = $current_bit_res->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);

    if ($current_bit['reason'] == "DRILLING BIT") {

        $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();

        //GET THE LAST REIMING BIT FROM THE JOBCARD TIMELINE
        $last_bit_res = $db->query("notes", "SELECT * FROM notes WHERE jobcard_id = {$_GET['record_id']} AND reason LIKE 'DRILLING BIT%' ORDER BY record_id DESC LIMIT 1");

        // echo "SELECT * FROM notes WHERE jobcard_id = {$_GET['record_id']} AND reason LIKE 'DRILLING BIT%' ORDER BY record_id DESC LIMIT 1;";
        $last_bit = $last_bit_res->fetch_assoc();

        if ($data['type'] == "DRILLING") {

            $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;");

            $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();

            $make_note = new button();
            $make_note->class("make_notes_btn");
            $make_note->value("MAKE NOTE");
            $make_note->onclick("open_notesPopup()");
            $make_note->id("make_note");

            // $next = new button();
            // $next->value("BACK");
            // $next->onclick("next()");
            // $next->style("background-color: #00008045; color: white;");

            // 
    
            $drilling_lable->add();
            $make_note->add();

            ?>

            <div class="action_content">
                <?php
                $start->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();

            // $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");

            $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,serial_number=" . $last_bit['note'] . ",user_id={$_SESSION['user_id']}");
            $drilling_start_ajax->on_success("DRILLING STARTED");

        } elseif ($data['type'] == "DRILLING_START") {

            $make_note = new button();
            $make_note->class("make_notes_btn");
            $make_note->value("MAKE NOTE");
            $make_note->onclick("open_notesPopup()");
            $make_note->id("make_note");

            $pause = new button();
            $pause->value("PAUSE");
            $pause->onclick("drilling_pause()");

            $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("48 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;");


            // ADD SECTION
            $drilling_lable->add();
            $make_note->add();

            ?>

            <div class="action_content">
                <?php
                $pause->add();
                $stop->add();
                ?>
            </div>

            <?php
            $meters_1->add();
            $meters_2->add();
            $meters_3->add();
            $meters_4->add();
            ?>

            <div class="timeline">
                <?php

                $drilling_meters->add();
                ?>
            </div>

            <?php

            // $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");

            $last_bit_res = $db->query("notes", "SELECT * FROM notes WHERE jobcard_id = {$_GET['record_id']} AND reason LIKE 'DRILLING BIT%' ORDER BY record_id DESC LIMIT 1");

            // echo "SELECT * FROM notes WHERE jobcard_id = {$_GET['record_id']} AND reason LIKE 'DRILLING BIT%' ORDER BY record_id DESC LIMIT 1;";
            $last_bit = $last_bit_res->fetch_assoc();

            $drilling_pause_ajax = new js_ajax();
            $drilling_pause_ajax->function_name("drilling_pause");
            $drilling_pause_ajax->insert("jobcard_timeline");
            $drilling_pause_ajax->selected_div(".timeline input");
            $drilling_pause_ajax->add_column_and_value("jobcard_id={$_GET['record_id']},date_time=" . $current_date_time . ",type=DRILLING_PAUSE,serial_number=" . $last_bit['note'] . ",user_id={$_SESSION['user_id']}");
            $drilling_pause_ajax->on_success("DRILLING PAUSED");

            $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,serial_number=" . $last_bit['note'] . ",user_id={$_SESSION['user_id']}");
            $drilling_stop_ajax->on_success("DRILLING STOPPED");

        } elseif ($data['type'] == "DRILLING_PAUSE") {

            $resume = new button();
            $resume->value("RESUME");
            $resume->onclick("drilling_resume()");

            $stop = new button();
            $stop->value("STOP");
            $stop->onclick("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("48 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("100 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();

            $change_bit_btn = new button();
            $change_bit_btn->value("CHANGE BIT");
            $change_bit_btn->onclick("open_bit()");
            $change_bit_btn->id("driling_bit");

            $make_note = new button();
            $make_note->class("make_notes_btn");
            $make_note->value("MAKE NOTE");
            $make_note->onclick("open_notesPopup()");
            $make_note->id("make_note");

            // ADD SECTION
    
            $drilling_lable->add();
            $make_note->add();
            ?>

            <div class="action_content">
                <?php
                $change_bit_btn->add();
                $resume->add();
                $stop->add();
                ?>
            </div>

            <?php
            $meters_1->add();
            $meters_2->add();
            $meters_3->add();
            $meters_4->add();
            ?>

            <div class="timeline">
                <?php
                $drilling_meters->add();
                ?>
            </div>

            <?php

            // $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");

            //GET THE LAST REIMING BIT FROM THE JOBCARD TIMELINE
            $last_bit_res = $db->query("notes", "SELECT * FROM notes WHERE jobcard_id = {$_GET['record_id']} AND reason LIKE 'DRILLING BIT%' ORDER BY record_id DESC LIMIT 1");

            // echo "SELECT * FROM notes WHERE jobcard_id = {$_GET['record_id']} AND reason LIKE 'DRILLING BIT%' ORDER BY record_id DESC LIMIT 1;";
            $last_bit = $last_bit_res->fetch_assoc();

            $drilling_resume_ajax = new js_ajax();
            $drilling_resume_ajax->function_name("drilling_resume");
            $drilling_resume_ajax->insert("jobcard_timeline");
            $drilling_resume_ajax->selected_div(".timeline input");
            $drilling_resume_ajax->add_column_and_value("jobcard_id={$_GET['record_id']},date_time=" . $current_date_time . ",type=DRILLING_RESUME,serial_number=" . $last_bit['note'] . ",user_id={$_SESSION['user_id']}");
            $drilling_resume_ajax->on_success("DRILLING RESUMED");

            $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,serial_number=" . $last_bit['note'] . ",user_id={$_SESSION['user_id']}");
            $drilling_stop_ajax->on_success("DRILLING STOPPED");

        } elseif ($data['type'] == "DRILLING_RESUME") {

            $make_note = new button();
            $make_note->class("make_notes_btn");
            $make_note->value("MAKE NOTE");
            $make_note->onclick("open_notesPopup()");
            $make_note->id("make_note");

            $pause = new button();
            $pause->value("PAUSE");
            $pause->onclick("drilling_pause()");

            $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("48 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;");


            // ADD SECTION
    
            $drilling_lable->add();
            $make_note->add();

            ?>

            <div class="action_content">
                <?php
                $pause->add();
                $stop->add();
                ?>
            </div>

            <?php
            $meters_1->add();
            $meters_2->add();
            $meters_3->add();
            $meters_4->add();
            ?>

            <div class="timeline">
                <?php

                $drilling_meters->add();
                ?>
            </div>

            <?php

            // $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");

            //GET THE LAST REIMING BIT FROM THE JOBCARD TIMELINE
            $last_bit_res = $db->query("notes", "SELECT * FROM notes WHERE jobcard_id = {$_GET['record_id']} AND reason LIKE 'DRILLING BIT%' ORDER BY record_id DESC LIMIT 1");

            // echo "SELECT * FROM notes WHERE jobcard_id = {$_GET['record_id']} AND reason LIKE 'DRILLING BIT%' ORDER BY record_id DESC LIMIT 1;";
            $last_bit = $last_bit_res->fetch_assoc();

            $drilling_pause_ajax = new js_ajax();
            $drilling_pause_ajax->function_name("drilling_pause");
            $drilling_pause_ajax->insert("jobcard_timeline");
            $drilling_pause_ajax->selected_div(".timeline input");
            $drilling_pause_ajax->add_column_and_value("jobcard_id={$_GET['record_id']},date_time=" . $current_date_time . ",type=DRILLING_PAUSE,serial_number=" . $last_bit['note'] . ",user_id={$_SESSION['user_id']}");
            $drilling_pause_ajax->on_success("DRILLING PAUSED");

            $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,serial_number=" . $last_bit['note'] . ",user_id={$_SESSION['user_id']}");
            $drilling_stop_ajax->on_success("DRILLING STOPPED");

        } elseif ($data['type'] == "DRILLING_STOP") {

            $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("48 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("100 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();

            $change_bit_btn = new button();
            $change_bit_btn->value("CHANGE BIT");
            $change_bit_btn->onclick("open_bit()");
            $change_bit_btn->id("change_bit");

            $make_note = new button();
            $make_note->class("make_notes_btn");
            $make_note->value("MAKE NOTE");
            $make_note->onclick("open_notesPopup()");
            $make_note->id("make_note");
            $make_note->add();

            // $next = new button();
            // $next->value("DONE");
            // $next->onclick("next()");

            // ADD SECTION
    
            $drilling_lable->add();

            ?>

            <div class="action_content">
                <?php
                $change_bit_btn->add();
                $start->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();

            //GET THE LAST REIMING BIT FROM THE JOBCARD TIMELINE
            $last_bit_res = $db->query("notes", "SELECT * FROM notes WHERE jobcard_id = {$_GET['record_id']} AND reason LIKE 'DRILLING BIT%' ORDER BY record_id DESC LIMIT 1");

            // echo "SELECT * FROM notes WHERE jobcard_id = {$_GET['record_id']} AND reason LIKE 'DRILLING BIT%' ORDER BY record_id DESC LIMIT 1;";
            $last_bit = $last_bit_res->fetch_assoc();

            $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,serial_number=" . $last_bit['note'] . ",user_id={$_SESSION['user_id']}");
            $drilling_start_ajax->on_success("DRILLING STARTED");

            ?>

            <?php
        } else {
            $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;");

            $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();

            $make_note = new button();
            $make_note->class("make_notes_btn");
            $make_note->value("MAKE NOTE");
            $make_note->onclick("open_notesPopup()");
            $make_note->id("make_note");
            $make_note->add();

            // $next = new button();
            // $next->value("BACK");
            // $next->disabled();
            // $next->style("background-color: #00008045; color: white;");

            // 
    
            $drilling_lable->add();
            $make_note->add();
            ?>

            <div class="action_content">
                <?php
                $start->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();

            //GET THE LAST REIMING BIT FROM THE JOBCARD TIMELINE
            $last_bit_res = $db->query("notes", "SELECT * FROM notes WHERE jobcard_id = {$_GET['record_id']} AND reason LIKE 'DRILLING BIT%' ORDER BY record_id DESC LIMIT 1");

            // echo "SELECT * FROM notes WHERE jobcard_id = {$_GET['record_id']} AND reason LIKE 'DRILLING BIT%' ORDER BY record_id DESC LIMIT 1;";
            $last_bit = $last_bit_res->fetch_assoc();


            // $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");

            $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,serial_number=" . $last_bit['note'] . ",user_id={$_SESSION['user_id']}");
            $drilling_start_ajax->on_success("DRILLING STARTED");
        }
    } else {
        ?>
        <script>
            window.location.href = "../jobcards/drilling_bit.php?record_id=<?php echo $_GET['record_id']; ?>&jc_no=<?php echo $_GET['jc_no']; ?>";
        </script>
        <?php
    }
    ?>
</div>

<style>
    .notes_popup {
        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 {
        padding: 10px;
        border: 3px solid black;
        text-align: left;
        background-color: white;

        @media all and (min-width: 651px) and (max-width: 1050px) {
            font-size: 1.5em;
        }
    }

    td {
        padding: 10px;
        border: 3px solid black;
        text-align: left;
        background-color: white;

        @media all and (min-width: 651px) and (max-width: 1050px) {
            font-size: 1.5em;
        }
    }

    @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 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();
        ?>

        <input type="text" class="inputs" value="<?php echo $data['type'] ?>" readonly hidden/>
        <input type="text" class="inputs" name="jobcard_no" id="jobcard_no" value="<?php echo $_GET['record_id']; ?>" hidden/>

        <label for="notes" class="notes_heading" style="color: white;margin:1px;">NOTES</label>

        <div style="display: flex; flex-direction: column;">
            <label for="reasons" class="big_labels" style="color: white;">REASONS</label>
            <select id="reason" name="reason" class="big_inputs">
                <option value="">--SELECT--</option>
                <option value="ARRIVED AT LOCATION">ARRIVED AT LOCATION</option>
                <option value="WAITING FOR CLIENT">WAITING FOR CLIENT</option>
                <option value="TRAVELING TO SITE">TRAVELING TO SITE</option>
                <option value="ARRIVED ON SITE">ARRIVED ON SITE</option>
                <option value="TALKING TO CLIENT">TALKING TO CLIENT</option>
                <option value="ARRIVED ON SITE">ARRIVED ON SITE</option>
                <option value="TALKING TO CLIENT">TALKING TO CLIENT</option>
                <option value="FETCHING MONEY">FETCHING MONEY</option>
                <option value="BRAKING">BRAKING</option>
                <option value="CHANGING RIEMER">CHANGING RIEMER</option>
                <option value="STOP">STOP</option>
                <option value="PENDING">PENDING</option>
                <option value="START">START</option>
                <option value="INSTALLING">INSTALLING</option>
                <option value="RECEIVED">RECEIVED</option>
                <option value="BACK TO WORKSHOP">BACK TO WORKSHOP</option>
                <option value="OTHER">OTHER</option>
            </select>

            <label for="notes" class="big_labels" style="color: white">NOTES</label>
        </div>

        <div id="normal_section" style="display: flex; flex-direction: column; align-items: center;">
            <textarea name="note" id="note" class="inputs" style="width: 70vw; font-size: 3em;" rows="5"></textarea>
            <label for="reasons" class="big_labels" style="color: white;">UPLOAD TYPE</label>
            <select id="image_type" name="image_type" onchange="file_camera_type()" class="big_inputs">
                <option></option>
                <option value="file">ATTACH FILE</option>
                <option value="camera">CAMERA</option>
            </select>

                <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>

            <div style="background-color: white; padding: 2vw; display: flex; flex-direction: column; align-items: center;">
                <div id="attach_file_div" style="display:none; flex-direction: column; align-items: center;">
                    <label for="proof" class="big_labels">ATTACH FILE</label>
                    <input type="file" name="attach_note" id="attach_note" style="width: 90%;" class="big_inputs" onchange="upload_file()">
                </div>

                <div id="camera_div" style="display:none; flex-direction: column; align-items: center;">
                    <video style="display: none;" id="camera_notes" autoplay playsinline></video>
                    <br>

                    <button id="open_camera_notes" class="submit_btn"
                        onclick="open_notes_Camera()">Open
                        Camera</button>

                    <div id="load_camera_notes"
                        style="display: none; width: 100%; justify-content: center;">
                        <button class="submit_btn" onclick="capture_notes_Photo()">Capture
                            Photo</button>
                        <button class="submit_btn" onclick="stop_notes_Camera()">Stop
                            Camera</button>
                    </div>

                    <div id="captured_image_notes" style="display:none">
                        <h3>Captured Image:</h3>
                        <canvas id="snapshot_notes"></canvas>
                    </div>

                    <script>
                        let stream_notes;

                        async function open_notes_Camera() {
                            const video = document.getElementById("camera_notes");
                            const load_camera = document.getElementById("load_camera_notes");
                            const open_camera = document.getElementById("open_camera_notes");

                            try {

                                stream_notes = await navigator.mediaDevices.getUserMedia({
                                    video: { facingMode: "environment" },
                                    audio: false
                                });

                                const video = document.getElementById("camera_notes");
                                video.srcObject = stream_notes;
                                video.style.display = "block";

                                load_camera.style.display = "flex";
                                open_camera.style.display = "none";


                            } catch (error) {
                                alert("Error accessing camera: " + error.message);
                            }
                        }

                        function stop_notes_Camera() {
                            const open_camera = document.getElementById("open_camera_notes");
                            const load_camera = document.getElementById("load_camera_notes");
                            const video = document.getElementById("camera_notes");

                            video.style.display = "none";
                            load_camera.style.display = "none";
                            open_camera.style.display = "block";
                            if (stream_notes) {
                                stream_notes.getTracks().forEach(track => track.stop());
                                stream_notes = null;
                                document.getElementById("camera_notes").srcObject = null;
                            }
                        }

                        function capture_notes_Photo() {
                            const video = document.getElementById("camera_notes");
                            const canvas = document.getElementById("snapshot_notes");
                            const context = canvas.getContext("2d");
                            const captured_image = document.getElementById("captured_image_notes");
                            const load_camera = document.getElementById("load_camera_notes");
                            const jobcard_no = "<?php echo $_GET['record_id']; ?>";

                            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");
                            // console.log("Captured image data:", imageData);

                            stop_notes_Camera();
                            save_notes_CapturedImage(imageData, jobcard_no);
                        }

                        function save_notes_CapturedImage(imageData, jobcard_no) {
                            const video = document.getElementById("camera_notes");
                            const folder_path = "/notes/";
                            const section_name = "notes";

                            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) {
                                    const response = xhr.responseText.trim();
                                    // FIX: previously used || which made the check always true
                                    if (response !== '0' && response !== '') {
                                        console.log('fileName: ' + response);
                                        alert('Photo saved successfully!');

                                        document.getElementById('image').style.display = 'block';
                                        document.getElementById('image').value = response;
                                    } else {
                                        alert('Error saving photo!');
                                    }
                                }
                            };
                            xhr.send(formData);
                        }
                    </script>
                </div>
            </div>

            <input type="text" id="image" name="image" style="display: none;"/>

            <button type="button" class="submit_btn" onclick="add_notes()">ADD</button>

        </div>


        <div id="note_save_response" style="color:white; margin-top:10px; font-weight:bold;"></div>
            <div
            style="display:flex; flex-direction: column; align-items: center; background-color: white; padding: 2vw 2vw 2vw 4vw; width: 100%; margin-top:20px; overflow-x: auto; box-sizing: border-box;" id="notes_table">
            </div>
        </div>
    </div>
    <script>

        function file_camera_type(){
            var image_type = document.getElementById("image_type").value;

            if (image_type == "file") {
                document.getElementById("attach_file_div").style.display = "flex";
                document.getElementById("camera_div").style.display = "none";
            } else if (image_type == "camera") {
                document.getElementById("attach_file_div").style.display = "none";
                document.getElementById("camera_div").style.display = "flex";
            } else {
                document.getElementById("attach_file_div").style.display = "none";
                document.getElementById("camera_div").style.display = "none";
            }
        }

        function upload_file() {
            var attach_note = document.getElementById("attach_note");
            var file = attach_note.files[0];
            var jobcard_no = "<?php echo $_GET['record_id']; ?>";

            if (file) {
                var formData = new FormData();
                formData.append('file', file);
                formData.append('jobcard_no', jobcard_no);
                formData.append('ajax_type', "note_section");
                formData.append('section_name', "notes");
                formData.append('file_save_path', "../jobcards/notes/");

                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                            console.log(xhr.responseText);

                        if (xhr.status === 200 && xhr.responseText.includes("OK")) {
                            var filename = xhr.responseText.replace('OK | ', '').trim();
                        
                            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('attach_file_div').appendChild(uploadedFileInput);
                            }
                            uploadedFileInput.value = filename;
                            document.getElementById('image').value = filename;
                            alert("File uploaded successfully!");
                        } else {
                            alert('Error uploading file! Try again.');
                        }
                    }
                };
                xhr.open("POST", "../jobcards/upload_slip.php", true);
                xhr.send(formData);
            }
        }

        function loadNotes() {
            var jobcard_id = document.getElementById("jobcard_no").value;

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById("notes_table").innerHTML = xhr.responseText;
                }
            };
            xhr.open("POST", "../jobcards/notes_table.ajax.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send("jobcard_id=" + encodeURIComponent(jobcard_id));
        }

        loadNotes();

        function add_notes() {
            var jobcard_no  = document.getElementById("jobcard_no").value;
            var reason      = document.getElementById("reason").value;
            var note        = document.getElementById("note").value;
            var image       = document.getElementById("image").value;

            if (reason === "") {
                alert("Please select a reason.");
                return false;
            }

            if (note.trim() === "") {
                alert("Please enter a note.");
                return false;
            }

            var form = new FormData();
            form.append("jobcard_no", jobcard_no);
            form.append("reason", reason);
            form.append("note", note);
            form.append("image", image);

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    if (xhr.responseText.trim() === "success") {
                        // Clear inputs
                        document.getElementById("reason").value = "";
                        document.getElementById("note").value   = "";
                        document.getElementById("image").value  = "";
                        document.getElementById("attach_note").value  = "";
                        document.getElementById("camera_div").style.display = "none";
                        document.getElementById("attach_file_div").style.display = "none";
                        document.getElementById("image").style.display = "none";

                        stop_notes_Camera();
                        loadNotes(); // 👈 refresh the notes table
                    } else {
                        console.log(xhr.responseText);
                        alert("Error saving note, please try again.");
                    }
                }
            };
            xhr.open("POST", "../jobcards/save_notes.ajax.php", true);
            xhr.send(form);
        }
    </script>
</div>

<div id="floating-block" style="position: none;">
    <?php
    $last_meters = $db->query("jobcard_timeline", "SELECT * FROM jobcard_timeline WHERE jobcard_id={$_GET['record_id']} AND type LIKE 'DRILLING%' ORDER BY record_id DESC");

    // echo "SELECT * FROM jobcard_timeline WHERE jobcard_id={$_GET['record_id']} AND type LIKE 'RIEM%' ORDER BY record_id DESC";
    
    $total_meters = 0;
    while ($meters_data = $last_meters->fetch_assoc()) {
        $total_meters += $meters_data['meters'];
    }

    echo "<h3>CURRENT TOTAL METERS DRILLED: </h3>";

    echo "<h3>" . $total_meters . " METERS</h3>";

    ?>
</div>

<script>

    function open_notesPopup() {
        document.getElementById("notes_popup1").style.display = "block";
    }

    function close_notesPopup() {
        document.getElementById("notes_popup1").style.display = "none";
    }

    function check_stop() {
        var drilling_meters = document.getElementById("meters");

        if (drilling_meters.value === "" || drilling_meters.value === null) {
            alert("Please enter drilling meters");
            return false
        }

        return true;
    }

    function open_bit() {
        window.location.href = "../jobcards/drilling_bit.php?record_id=<?php echo $_GET['record_id']; ?>&jobcard_id=<?php echo $_GET['jc_no']; ?>";
    }

    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;

    }

    function next() {
        window.location.href = "../jobcards/jobcard_actions.php?record_id=<?= $_GET['record_id'] ?>&jc_no=<?= $_GET['jc_no'] ?>";
    }

</script>