<?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

    $record_res = $db->query("jobcards", "SELECT * FROM jobcards WHERE jc_no = {$_GET['record_id']}");
    // echo "SELECT * FROM jobcards WHERE jc_no = {$_GET['record_id']}";
    $record = $record_res->fetch_assoc();

    $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();
    // echo "SELECT * FROM jobcard_timeline WHERE jobcard_id = {$record['record_id']} ORDER BY record_id DESC LIMIT 1";
    
    $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);

    $data_type = new input();
    $data_type->class("inputs");
    $data_type->type("hidden");
    $data_type->readonly();
    $data_type->value($data['type']);
    $data_type->add();

    if ($data['type'] == "RIEMING") {

        $riem_lable = new label();
        $riem_lable->for("riem");
        $riem_lable->value("RIEMING");
        $riem_lable->addAttribute("style", "margin-top: 1vw;font-weight: bold;font-size: 3vw;");

        $start = new button();
        $start->value("START");
        $start->onclick("riem_start()");

        $make_note = new button();
        $make_note->value("MAKE NOTE");
        $make_note->onclick("open_notesPopup()");
        $make_note->id("make_note");

        $meters = new input();
        $meters->type("number");
        $meters->id("meters_5");
        $meters->placeholder("6 METERS");
        $meters->readonly();
        $meters->class("work_inputs");
        $meters->onclick("clicked(this, this)");
        $meters->value(6);
        $meters->style("background-color: #ff98006b; color: white;");
        $meters->disabled();

        $meters_1 = new input();
        $meters_1->type("number");
        $meters_1->id("meters_1");
        $meters_1->placeholder("18 METERS");
        $meters_1->readonly();
        $meters_1->onclick("clicked(this, this)");
        $meters_1->class("work_inputs");
        $meters_1->value(18);
        $meters_1->style("background-color: #ff98006b; color: white;");
        $meters_1->disabled();

        $meters_2 = new input();
        $meters_2->type("number");
        $meters_2->id("meters_2");
        $meters_2->placeholder("30 METERS");
        $meters_2->readonly();
        $meters_2->onclick("clicked(this, this)");
        $meters_2->class("work_inputs");
        $meters_2->value(30);
        $meters_2->style("background-color: #ff98006b; color: white;");
        $meters_2->disabled();

        $meters_3 = new input();
        $meters_3->type("number");
        $meters_3->id("meters_3");
        $meters_3->placeholder("48 METERS");
        $meters_3->readonly();
        $meters_3->onclick("clicked(this, this)");
        $meters_3->class("work_inputs");
        $meters_3->value(48);
        $meters_3->style("background-color: #ff98006b; color: white;");
        $meters_3->disabled();

        $meters_4 = new input();
        $meters_4->type("number");
        $meters_4->id("meters_4");
        $meters_4->placeholder("60 METERS");
        $meters_4->readonly();
        $meters_4->onclick("clicked(this, this)");
        $meters_4->class("work_inputs");
        $meters_4->value(60);
        $meters_4->style("background-color: #ff98006b; color: white;");
        $meters_4->disabled();

        $rieming_meters = new input();
        $rieming_meters->type("number");
        $rieming_meters->name("meters");
        $rieming_meters->id("meters");
        $rieming_meters->placeholder("RIEMING METERS");
        $rieming_meters->style("text-align: center;background-color: #ff98006b; color: white; border: 3px solid #FF5722;");
        $rieming_meters->disabled();

        $next = new button();
        $next->value("BACK");
        $next->style("background-color: #00008045; color: white;");
        $next->onclick("next()");

        // 
    
        $riem_lable->add();
        ?>

        <div style="display: flex; flex-direction: row;width: 100%;justify-content: center;">
            <?php
            $start->add();
            $make_note->add();

            ?>
        </div>

        <?php
        $meters->add();
        $meters_1->add();
        $meters_2->add();
        $meters_3->add();
        $meters_4->add();
        ?>
        <div class="timeline">
            <?php
            $rieming_meters->add();
            ?>
        </div>

        <?php
        $next->add();

        $notes = new js_ajax();
        $notes->function_name("add_notes");
        $notes->insert("notes");
        $notes->selected_div(".notes_content input , .notes_content select ");
        $notes->submit_btn_id("notes_btn");
        $notes->on_success("NOTE SAVED");

        $riem_start_ajax = new js_ajax();
        $riem_start_ajax->function_name("riem_start");
        $riem_start_ajax->insert("jobcard_timeline");
        $riem_start_ajax->selected_div("timeline");
        $riem_start_ajax->add_column_and_value("jobcard_id={$_GET['record_id']},date_time=" . $current_date_time . ",type=RIEMING_START,user_id={$_SESSION['user_id']}");
        $riem_start_ajax->on_success("RIEMING STARTED");

    } elseif ($data['type'] == "RIEMING_START") {

        $riem_lable = new label();
        $riem_lable->for("riem");
        $riem_lable->value("RIEMING");
        $riem_lable->addAttribute("style", "margin-top: 1vw;font-weight: bold;font-size: 3vw;");

        $pause = new button();
        $pause->value("PAUSE");
        $pause->onclick("riem_pause()");

        $stop = new button();
        $stop->value("STOP");
        $stop->onclick("if (check_stop()){ riem_stop() ;}");

        $make_note = new button();
        $make_note->value("MAKE NOTE");
        $make_note->onclick("open_notesPopup()");
        $make_note->id("make_note");

        $meters = new input();
        $meters->type("number");
        $meters->id("meters_5");
        $meters->placeholder("6 METERS");
        $meters->readonly();
        $meters->class("work_inputs");
        $meters->onclick("clicked(this, this)");
        $meters->value(6);

        $meters_1 = new input();
        $meters_1->type("number");
        $meters_1->id("meters_1");
        $meters_1->placeholder("18 METERS");
        $meters_1->readonly();
        $meters_1->onclick("clicked(this, this)");
        $meters_1->class("work_inputs");
        $meters_1->value(18);

        $meters_2 = new input();
        $meters_2->type("number");
        $meters_2->id("meters_2");
        $meters_2->placeholder("30 METERS");
        $meters_2->readonly();
        $meters_2->onclick("clicked(this, this)");
        $meters_2->class("work_inputs");
        $meters_2->value(30);

        $meters_3 = new input();
        $meters_3->type("number");
        $meters_3->id("meters_3");
        $meters_3->placeholder("48 METERS");
        $meters_3->readonly();
        $meters_3->onclick("clicked(this, this)");
        $meters_3->class("work_inputs");
        $meters_3->value(48);

        $meters_4 = new input();
        $meters_4->type("number");
        $meters_4->id("meters_4");
        $meters_4->placeholder("60 METERS");
        $meters_4->readonly();
        $meters_4->onclick("clicked(this, this)");
        $meters_4->class("work_inputs");
        $meters_4->value(60);

        $rieming_meters = new input();
        $rieming_meters->type("number");
        $rieming_meters->name("meters");
        $rieming_meters->id("meters");
        $rieming_meters->placeholder("RIEMING METERS");
        $rieming_meters->style("text-align: center;border: 3px solid #FF5722");


        $riem_lable->add();

        $make_note->add();

        ?>

        <div style="display: flex; flex-direction: row;width: 100%;justify-content: center;">
            <?php
            $pause->add();
            $stop->add();
            ?>
        </div>

        <?php
        $meters->add();
        $meters_1->add();
        $meters_2->add();
        $meters_3->add();
        $meters_4->add();
        ?>
        <div class="timeline">
            <?php
            $rieming_meters->add();
            ?>
        </div>

        <?php
 

        $notes = new js_ajax();
        $notes->function_name("add_notes");
        $notes->insert("notes");
        $notes->selected_div(".notes_content input , .notes_content select ");
        $notes->submit_btn_id("notes_btn");
        $notes->on_success("NOTE SAVED");

        $riem_pause_ajax = new js_ajax();
        $riem_pause_ajax->function_name("riem_pause");
        $riem_pause_ajax->insert("jobcard_timeline");
        $riem_pause_ajax->selected_div(".timeline input");
        $riem_pause_ajax->add_column_and_value("jobcard_id={$_GET['record_id']},date_time=" . $current_date_time . ",type=RIEMING_PAUSED,user_id={$_SESSION['user_id']}");
        $riem_pause_ajax->on_success("RIEMING PAUSED");

        $riem_stop_ajax = new js_ajax();
        $riem_stop_ajax->function_name("riem_stop");
        $riem_stop_ajax->insert("jobcard_timeline");
        $riem_stop_ajax->selected_div(".timeline input");
        $riem_stop_ajax->add_column_and_value("jobcard_id={$_GET['record_id']},date_time=" . $current_date_time . ",type=RIEMING_STOP,user_id={$_SESSION['user_id']}");
        $riem_stop_ajax->on_success("RIEMING STOPPED");

    } elseif ($data['type'] == "RIEMING_PAUSED") {
        $riem_lable = new label();
        $riem_lable->for("riem");
        $riem_lable->value("RIEMING");
        $riem_lable->addAttribute("style", "margin-top: 1vw;font-weight: bold;font-size: 3vw;");

        $resume = new button();
        $resume->value("RESUME");
        $resume->onclick("riem_resume()");

        $stop = new button();
        $stop->value("STOP");
        $stop->onclick("if (check_stop()){ riem_stop() ;}");

        $make_note = new button();
        $make_note->value("MAKE NOTE");
        $make_note->onclick("open_notesPopup()");
        $make_note->id("make_note");

        $meters = new input();
        $meters->type("number");
        $meters->id("meters_5");
        $meters->placeholder("6 METERS");
        $meters->readonly();
        $meters->class("work_inputs");
        $meters->onclick("clicked(this, this)");
        $meters->value(6);
        $meters->style("background-color: #ff98006b; color: white;");
        $meters->disabled();

        $meters_1 = new input();
        $meters_1->type("number");
        $meters_1->id("meters_1");
        $meters_1->placeholder("18 METERS");
        $meters_1->readonly();
        $meters_1->onclick("clicked(this, this)");
        $meters_1->class("work_inputs");
        $meters_1->value(18);
        $meters_1->style("background-color: #ff98006b; color: white;");
        $meters_1->disabled();

        $meters_2 = new input();
        $meters_2->type("number");
        $meters_2->id("meters_2");
        $meters_2->placeholder("30 METERS");
        $meters_2->readonly();
        $meters_2->onclick("clicked(this, this)");
        $meters_2->class("work_inputs");
        $meters_2->value(30);
        $meters_2->style("background-color: #ff98006b; color: white;");
        $meters_2->disabled();

        $meters_3 = new input();
        $meters_3->type("number");
        $meters_3->id("meters_3");
        $meters_3->placeholder("48 METERS");
        $meters_3->readonly();
        $meters_3->onclick("clicked(this, this)");
        $meters_3->class("work_inputs");
        $meters_3->value(48);
        $meters_3->style("background-color: #ff98006b; color: white;");
        $meters_3->disabled();

        $meters_4 = new input();
        $meters_4->type("number");
        $meters_4->id("meters_4");
        $meters_4->placeholder("60 METERS");
        $meters_4->readonly();
        $meters_4->onclick("clicked(this, this)");
        $meters_4->class("work_inputs");
        $meters_4->value(60);
        $meters_4->style("background-color: #ff98006b; color: white;");
        $meters_4->disabled();

        $rieming_meters = new input();
        $rieming_meters->type("number");
        $rieming_meters->name("meters");
        $rieming_meters->id("meters");
        $rieming_meters->placeholder("RIEMING METERS");
        $rieming_meters->style("text-align: center;background-color: #ff98006b; color: white; border: 3px solid #FF5722;");
        $rieming_meters->disabled();

        $riem_lable->add();
        $make_note->add();

        ?>

        <div style="display: flex; flex-direction: row;width: 100%;justify-content: center;">
            <?php

            $resume->add();
            $stop->add();

            ?>
        </div>

        <?php
        $meters->add();
        $meters_1->add();
        $meters_2->add();
        $meters_3->add();
        $meters_4->add();
        ?>
        <div class="timeline">
            <?php
            $rieming_meters->add();
            ?>
        </div>

        <?php


        $notes = new js_ajax();
        $notes->function_name("add_notes");
        $notes->insert("notes");
        $notes->selected_div(".notes_content input , .notes_content select ");
        $notes->submit_btn_id("notes_btn");
        $notes->on_success("NOTE SAVED");

        $riem_resume_ajax = new js_ajax();
        $riem_resume_ajax->function_name("riem_resume");
        $riem_resume_ajax->insert("jobcard_timeline");
        $riem_resume_ajax->selected_div(".timeline input");
        $riem_resume_ajax->add_column_and_value("jobcard_id={$_GET['record_id']},date_time=" . $current_date_time . ",type=RIEMING_RESUMED,user_id={$_SESSION['user_id']}");
        $riem_resume_ajax->on_success("RIEMING RESUMED");

        $riem_stop_ajax = new js_ajax();
        $riem_stop_ajax->function_name("riem_stop");
        $riem_stop_ajax->insert("jobcard_timeline");
        $riem_stop_ajax->selected_div(".timeline input");
        $riem_stop_ajax->add_column_and_value("jobcard_id={$_GET['record_id']},date_time=" . $current_date_time . ",type=RIEMING_STOP,user_id={$_SESSION['user_id']}");
        $riem_stop_ajax->on_success("RIEMING STOPPED");

    } elseif ($data['type'] == "RIEMING_RESUMED") {

        $riem_lable = new label();
        $riem_lable->for("riem");
        $riem_lable->value("RIEMING");
        $riem_lable->addAttribute("style", "margin-top: 1vw;font-weight: bold;font-size: 3vw;");

        $pause = new button();
        $pause->value("PAUSE");
        $pause->onclick("riem_pause()");

        $stop = new button();
        $stop->value("STOP");
        $stop->onclick("if (check_stop()){ riem_stop() ;}");

        $make_note = new button();
        $make_note->value("MAKE NOTE");
        $make_note->onclick("open_notesPopup()");
        $make_note->id("make_note");

        $meters = new input();
        $meters->type("number");
        $meters->id("meters_5");
        $meters->placeholder("6 METERS");
        $meters->readonly();
        $meters->class("work_inputs");
        $meters->onclick("clicked(this, this)");
        $meters->value(6);

        $meters_1 = new input();
        $meters_1->type("number");
        $meters_1->id("meters_1");
        $meters_1->placeholder("18 METERS");
        $meters_1->readonly();
        $meters_1->onclick("clicked(this, this)");
        $meters_1->class("work_inputs");
        $meters_1->value(18);

        $meters_2 = new input();
        $meters_2->type("number");
        $meters_2->id("meters_2");
        $meters_2->placeholder("30 METERS");
        $meters_2->readonly();
        $meters_2->onclick("clicked(this, this)");
        $meters_2->class("work_inputs");
        $meters_2->value(30);

        $meters_3 = new input();
        $meters_3->type("number");
        $meters_3->id("meters_3");
        $meters_3->placeholder("48 METERS");
        $meters_3->readonly();
        $meters_3->onclick("clicked(this, this)");
        $meters_3->class("work_inputs");
        $meters_3->value(48);

        $meters_4 = new input();
        $meters_4->type("number");
        $meters_4->id("meters_4");
        $meters_4->placeholder("60 METERS");
        $meters_4->readonly();
        $meters_4->onclick("clicked(this, this)");
        $meters_4->class("work_inputs");
        $meters_4->value(60);

        $rieming_meters = new input();
        $rieming_meters->type("number");
        $rieming_meters->name("meters");
        $rieming_meters->id("meters");
        $rieming_meters->placeholder("RIEMING METERS");
        $rieming_meters->style("text-align: center;border: 3px solid #FF5722");


        $riem_lable->add();
        $make_note->add();

        ?>

        <div style="display: flex; flex-direction: row;width: 100%;justify-content: center;">
            <?php
            $pause->add();
            $stop->add();

            ?>
        </div>

        <?php
        $meters->add();
        $meters_1->add();
        $meters_2->add();
        $meters_3->add();
        $meters_4->add();
        ?>
        <div class="timeline">
            <?php
            $rieming_meters->add();
            ?>
        </div>

        <?php

        $notes = new js_ajax();
        $notes->function_name("add_notes");
        $notes->insert("notes");
        $notes->selected_div(".notes_content input , .notes_content select ");
        $notes->submit_btn_id("notes_btn");
        $notes->on_success("NOTE SAVED");

        $riem_pause_ajax = new js_ajax();
        $riem_pause_ajax->function_name("riem_pause");
        $riem_pause_ajax->insert("jobcard_timeline");
        $riem_pause_ajax->selected_div(".timeline input");
        $riem_pause_ajax->add_column_and_value("jobcard_id={$_GET['record_id']},date_time=" . $current_date_time . ",type=RIEMING_PAUSED,user_id={$_SESSION['user_id']}");
        $riem_pause_ajax->on_success("RIEMING PAUSED");

        $riem_stop_ajax = new js_ajax();
        $riem_stop_ajax->function_name("riem_stop");
        $riem_stop_ajax->insert("jobcard_timeline");
        $riem_stop_ajax->selected_div(".timeline input");
        $riem_stop_ajax->add_column_and_value("jobcard_id={$_GET['record_id']},date_time=" . $current_date_time . ",type=RIEMING_STOP,user_id={$_SESSION['user_id']}");
        $riem_stop_ajax->on_success("RIEMING STOPPED");


    } elseif ($data['type'] == "RIEMING_STOP") {

        $riem_lable = new label();
        $riem_lable->for("riem");
        $riem_lable->value("RIEMING");
        $riem_lable->addAttribute("style", "margin-top: 1vw;font-weight: bold;font-size: 3vw;");

        $start = new button();
        $start->value("START");
        $start->onclick("riem_start()");

        $make_note = new button();
        $make_note->value("MAKE NOTE");
        $make_note->onclick("open_notesPopup()");
        $make_note->id("make_note");

        $meters = new input();
        $meters->type("number");
        $meters->id("meters_5");
        $meters->placeholder("6 METERS");
        $meters->readonly();
        $meters->class("work_inputs");
        $meters->onclick("clicked(this, this)");
        $meters->value(6);
        $meters->style("background-color: #ff98006b; color: white;");
        $meters->disabled();

        $meters_1 = new input();
        $meters_1->type("number");
        $meters_1->id("meters_1");
        $meters_1->placeholder("18 METERS");
        $meters_1->readonly();
        $meters_1->onclick("clicked(this, this)");
        $meters_1->class("work_inputs");
        $meters_1->value(18);
        $meters_1->style("background-color: #ff98006b; color: white;");
        $meters_1->disabled();

        $meters_2 = new input();
        $meters_2->type("number");
        $meters_2->id("meters_2");
        $meters_2->placeholder("30 METERS");
        $meters_2->readonly();
        $meters_2->onclick("clicked(this, this)");
        $meters_2->class("work_inputs");
        $meters_2->value(30);
        $meters_2->style("background-color: #ff98006b; color: white;");
        $meters_2->disabled();

        $meters_3 = new input();
        $meters_3->type("number");
        $meters_3->id("meters_3");
        $meters_3->placeholder("48 METERS");
        $meters_3->readonly();
        $meters_3->onclick("clicked(this, this)");
        $meters_3->class("work_inputs");
        $meters_3->value(48);
        $meters_3->style("background-color: #ff98006b; color: white;");
        $meters_3->disabled();

        $meters_4 = new input();
        $meters_4->type("number");
        $meters_4->id("meters_4");
        $meters_4->placeholder("60 METERS");
        $meters_4->readonly();
        $meters_4->onclick("clicked(this, this)");
        $meters_4->class("work_inputs");
        $meters_4->value(60);
        $meters_4->style("background-color: #ff98006b; color: white;");
        $meters_4->disabled();

        $last_meters = $db->query("jobcard_timeline", "SELECT * FROM jobcard_timeline WHERE jobcard_id={$_GET['record_id']} AND type='RIEMING_STOP' ORDER BY record_id DESC LIMIT 1");
        $last_rieming_meters = $last_meters->fetch_assoc()['meters'];

        $rieming_meters = new input();
        $rieming_meters->type("number");
        $rieming_meters->name("meters");
        $rieming_meters->id("meters");
        $rieming_meters->placeholder("RIEMING METERS");
        $rieming_meters->readonly();
        $rieming_meters->value($last_rieming_meters);
        $rieming_meters->style("text-align: center; background-color: #ff98006b;border: 3px solid #FF5722");
        $rieming_meters->class("work_inputs");
        $rieming_meters->disabled();

        $next = new button();
        $next->value("DONE");
        $next->onclick("next()");

        $riem_lable->add();
        ?>

        <div style="display: flex; flex-direction: row;width: 100%;justify-content: center;">
            <?php
            $start->add();
            $make_note->add();

            ?>
        </div>

        <?php
        $meters->add();
        $meters_1->add();
        $meters_2->add();
        $meters_3->add();
        $meters_4->add();
        ?>
        <div class="timeline">
            <?php
            $rieming_meters->add();
            ?>
        </div>

        <?php
        $next->add();

        $notes = new js_ajax();
        $notes->function_name("add_notes");
        $notes->insert("notes");
        $notes->selected_div(".notes_content input , .notes_content select ");
        $notes->submit_btn_id("notes_btn");
        $notes->on_success("NOTE SAVED");

        $riem_start_ajax = new js_ajax();
        $riem_start_ajax->function_name("riem_start");
        $riem_start_ajax->insert("jobcard_timeline");
        $riem_start_ajax->selected_div("timeline");
        $riem_start_ajax->add_column_and_value("jobcard_id={$_GET['record_id']},date_time=" . $current_date_time . ",type=RIEMING_START,user_id={$_SESSION['user_id']}");
        $riem_start_ajax->on_success("RIEMING STARTED");


    } else {
        $riem_lable = new label();
        $riem_lable->for("riem");
        $riem_lable->value("RIEMING");
        $riem_lable->addAttribute("style", "margin-top: 1vw;font-weight: bold;font-size: 3vw;");

        $stop = new button();
        $stop->value("STOP");
        $stop->onclick("riem_stop()");

        $make_note = new button();
        $make_note->value("MAKE NOTE");
        $make_note->onclick("open_notesPopup()");
        $make_note->id("make_note");

        $meters = new input();
        $meters->type("number");
        $meters->id("meters_5");
        $meters->placeholder("6 METERS");
        $meters->readonly();
        $meters->class("work_inputs");
        $meters->onclick("clicked(this, this)");
        $meters->value(6);

        $meters_1 = new input();
        $meters_1->type("number");
        $meters_1->id("meters_1");
        $meters_1->placeholder("18 METERS");
        $meters_1->readonly();
        $meters_1->onclick("clicked(this, this)");
        $meters_1->class("work_inputs");
        $meters_1->value(18);

        $meters_2 = new input();
        $meters_2->type("number");
        $meters_2->id("meters_2");
        $meters_2->placeholder("30 METERS");
        $meters_2->readonly();
        $meters_2->onclick("clicked(this, this)");
        $meters_2->class("work_inputs");
        $meters_2->value(30);

        $meters_3 = new input();
        $meters_3->type("number");
        $meters_3->id("meters_3");
        $meters_3->placeholder("48 METERS");
        $meters_3->readonly();
        $meters_3->onclick("clicked(this, this)");
        $meters_3->class("work_inputs");
        $meters_3->value(48);

        $meters_4 = new input();
        $meters_4->type("number");
        $meters_4->id("meters_4");
        $meters_4->placeholder("60 METERS");
        $meters_4->readonly();
        $meters_4->onclick("clicked(this, this)");
        $meters_4->class("work_inputs");
        $meters_4->value(60);

        $rieming_meters = new input();
        $rieming_meters->type("number");
        $rieming_meters->name("meters");
        $rieming_meters->id("meters");
        $rieming_meters->placeholder("RIEMING METERS");
        $rieming_meters->style("text-align: center;border: 3px solid #FF5722");


        $riem_lable->add();
        ?>

        <div style="display: flex; flex-direction: row;width: 100%;justify-content: center;">
            <?php
            $stop->add();
            $make_note->add();
            ?>
        </div>

        <?php
        $meters->add();
        $meters_1->add();
        $meters_2->add();
        $meters_3->add();
        $meters_4->add();
        ?>
        <div class="timeline">
            <?php
            $rieming_meters->add();
            ?>
        </div>

        <?php
 

        $notes = new js_ajax();
        $notes->function_name("add_notes");
        $notes->insert("notes");
        $notes->selected_div(".notes_content input , .notes_content select ");
        $notes->submit_btn_id("notes_btn");
        $notes->on_success("NOTE SAVED");

        $riem_stop_ajax = new js_ajax();
        $riem_stop_ajax->function_name("riem_stop");
        $riem_stop_ajax->insert("jobcard_timeline");
        $riem_stop_ajax->selected_div(".timeline input");
        $riem_stop_ajax->add_column_and_value("jobcard_id={$_GET['record_id']},date_time=" . $current_date_time . ",type=RIEMING_STOP,user_id={$_SESSION['user_id']}");
        $riem_stop_ajax->on_success("RIEMING STOPPED");
    }

    ?>

</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>
<script>
    function next() {
        window.location.href = "jobcard_actions.php?record_id=<?php echo urlencode($_GET['record_id']); ?>&jobcard_id=<?php echo urlencode($_GET['jc_no']); ?>&user_id=<?php echo urlencode($_SESSION['user_id']); ?>";
    }
</script>
<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>

</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 check_stop() {
        var rieming_meters = document.getElementById("meters").value;

        if (rieming_meters === "" || rieming_meters === null) {
            alert("Please enter the rieming meters");
            return false;
        }

        return true;
    }

    function clicked(selectedMeter, input) {
        meter_1 = document.getElementById("meters_5");
        meter_2 = document.getElementById("meters_1");
        meter_3 = document.getElementById("meters_2");
        meter_4 = document.getElementById("meters_3");
        meter_5 = document.getElementById("meters_4");

        const meters = [meter_1, meter_2, meter_3, meter_4, meter_5];
        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>