<?php include "../../../root.class.php";
$html = new html();
$html->add_styles_page();
$db = new db_safeguard();

$user_res = $db->query("users", "SELECT * FROM users WHERE record_id = '{$_SESSION['user_id']}'");

$user = $db->fetch_assoc();

$make_notes_btn = new button();
$make_notes_btn->value("MAKE NOTES");
$make_notes_btn->onclick("open_notesPopup()");
$make_notes_btn->add();

?>

<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 {
        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;
        }
    }
</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();

        $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();
            $notes_sub_label->add();
            ?>
        </div>

        <div id="normal_section" style="display: flex; flex-direction: column;align-items: center;">
            <textarea name="note" id="note" class="inputs" style="width: 70vw" rows="5"></textarea>


            <?php
            // $notes->add();
            

            new camera('image', $_GET['record_id'], "../jobcards/notes/", "notes_images");
            ?>
            <input type="text" style="display: none;" id="image" name="image">

            <?php
            $add_notes->add();

            $notes_ajax = new js_ajax();
            $notes_ajax->function_name("add_notes");
            $notes_ajax->insert("notes");
            $notes_ajax->selected_div(".notes_content input , .notes_content select , .notes_content textarea");
            $notes_ajax->submit_btn_id("notes_btn");
            $notes_ajax->on_success("NOTE SAVED");
            ?>


            <?php

            $notes_res = $db->query("notes", "SELECT * FROM notes WHERE jobcard_id = {$_GET['record_id']} AND reason NOT LIKE '%BIT%'");

            if ($notes_res->num_rows > 0) {
                while ($row = $notes_res->fetch_assoc()) {
                    $table_data = $table_data . "<tr>
                <td>" . $row['reason'] . "</td>
                <td>" . $row['note'] . "</td>
                <td>" . $row['image'] . "</td>
                <td>" . $row['date_time'] . "</td>
                </tr>";
                }
                $notes = $notes_res->fetch_assoc();

            } else {
                $table_data = $table_data . "<tr>
            <td colspan='4'>NO NOTES RECORDED</td>
            </tr><br>";

            }
            ?>

            <div style="background-color: white;padding-left: 2vw;padding-top: 2vw; width: 100%;">
                <table>
                    <tr>
                        <th>REASON</th>
                        <th>NOTE</th>
                        <th>IMAGE</th>
                        <th>DATE TIME</th>
                    </tr>
                    <?php echo $table_data; ?>
                </table>
                <br>
            </div>
        </div>
    </div>
    <br><br>
</div>

<script>

    function open_notesPopup() {
        event.preventDefault ? event.preventDefault() : (event.returnValue = false, event.stopPropagation());
        document.getElementById("notes_popup").style.display = "block";

    }

    function close_notesPopup() {
        document.getElementById("notes_popup").style.display = "none";
    }
</script>

<div class="">
    <h2 class="create_h2">JOCARD HISTORY</h2>

    <div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
        <label for="">ATTENDED BY</label>
        <input type="text" name="attended_by" id="attended_by" class="create_input">
    </div>

    <div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
        <label for="">CRACK</label>
        <input type="text" name="crack" id="crack" class="create_input">
    </div>

    <div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
        <label for="">BOREHOLE METERS</label>
        <input type="text" name="borehole_meters" id="borehole_meters" class="create_input">
    </div>

    <div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
        <label for="">PROBLEM DESCRIPTION</label>
        <input type="text" name="problem_description" id="problem_description" class="create_input">
    </div>

    <div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
        <label for="">SOLUTION</label>
        <input type="text" name="problem_solution" id="problem_solution" class="create_input">
    </div>

    <div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
        <label for="">INSTALLED BY</label>
        <input type="text" name="installed_by" id="installed_by" class="create_details_input"
            value="<?php echo $user['username'] ?>">
    </div>
</div>