<?php

include "../../classes/autoload.php";

$html = new html("JOB CARDS");
$app_feature = new app_features();
var_dump($_GET);
$db = new db();
$job_Card_res = $db->query("job_card_attachments", "SELECT * FROM job_card_attachments WHERE record_id = '{$_GET['record_id']}'");
$job_Card = $job_Card_res->fetch_assoc();
?>
<?php if (isset($_GET['backable'])) {
    ?>
    <form id="job_card_form" method="POST" action="update_job_card.php?attachment_notes&backable"
        enctype="multipart/form-data">
        <div class="column width_100 background_1 border_radius">
            <?php

            echo "<br><button class='width_10' onclick='event.preventDefault();window.parent.history.back()'>BACK</button>";
} else { ?>
            <form id="job_card_form" method="POST" action="update_job_card.php?attachment_notes"
                enctype="multipart/form-data">
                <div class="column width_100 background_1 border_radius">
<?php } ?>
                <h1>JOB CARD ATTACHMENTS NOTES</h1>
                <div class="row width_90 border_2 padding">
                    <div class="column width_50 ">
                        <label>Description</label>
                        <input type="text" class="width_80" id='job_card_attachment_id' hidden readonly required
                            name='job_card_attachment_id' value="<?php echo $_GET['record_id']; ?>" />
                        <input type="text" class="width_80" id='' readonly required name=''
                            value="<?php echo $job_Card['description']; ?>" />
                        <!-- <input type="text" class="width_80" id='record_id' readonly hidden required name='record_id'
                    value="<?php echo $job_Card['record_id']; ?>" /> -->
                    </div>
                </div>
                <br>
                <div class="column width_80 background_1 border_radius">
                    <div class="width_100" id="attachment_details">
                        <?php

                        $job_card_attachments_note_res = $db->query("attachment_notes", "SELECT * FROM `attachment_notes` WHERE job_card_attachment_id = {$_GET['record_id']} ORDER BY record_id DESC");
                        while ($job_card_attachments_notes = $job_card_attachments_note_res->fetch_assoc()) {
                            echo "<div class='row width_100 margin_bottom border_2' id='attachment_{$job_card_attachments_notes['record_id']}'>";
                            echo "<textarea readonly class='width_100'>" . $job_card_attachments_notes['date_time'] . " -> " . $function->get_username($job_card_attachments_notes['user_id']) . ": " . $job_card_attachments_notes['note'] . "</textarea>";
                            echo "</div>";
                        }
                        ?>

                    </div>
                    <br>
                    <button onclick="add_note(this)" class="width_90">ADD NOTE</button>
                </div>
                <br><br>
                <button class="width_90" id="save_btn" onclick="save()">SAVE</button>
                <script>
                    document.getElementById('save_btn').hidden = true;
                    function save() {

                        var overlay = document.createElement('div');
                        overlay.className = 'overlay';
                        overlay.innerHTML = `
                            <div class="lds-roller">
                                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                            </div>
                            <style>
                                .lds-roller {
                                    display: inline-block;
                                    position: relative;
                                    width: 80px;
                                    height: 80px;
                                }
                                .lds-roller div {
                                    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
                                    transform-origin: 40px 40px;
                                }
                                .lds-roller div:after {
                                    content: " ";
                                    display: block;
                                    position: absolute;
                                    width: 7px;
                                    height: 7px;
                                    border-radius: 50%;
                                    background: #fff;
                                    margin: -4px 0 0 -4px;
                                }
                                .lds-roller div:nth-child(1) {
                                    animation-delay: -0.036s;
                                }
                                .lds-roller div:nth-child(1):after {
                                    top: 63px;
                                    left: 63px;
                                }
                                .lds-roller div:nth-child(2) {
                                    animation-delay: -0.072s;
                                }
                                .lds-roller div:nth-child(2):after {
                                    top: 68px;
                                    left: 56px;
                                }
                                .lds-roller div:nth-child(3) {
                                    animation-delay: -0.108s;
                                }
                                .lds-roller div:nth-child(3):after {
                                    top: 71px;
                                    left: 48px;
                                }
                                .lds-roller div:nth-child(4) {
                                    animation-delay: -0.144s;
                                }
                                .lds-roller div:nth-child(4):after {
                                    top: 72px;
                                    left: 40px;
                                }
                                .lds-roller div:nth-child(5) {
                                    animation-delay: -0.18s;
                                }
                                .lds-roller div:nth-child(5):after {
                                    top: 71px;
                                    left: 32px;
                                }
                                .lds-roller div:nth-child(6) {
                                    animation-delay: -0.216s;
                                }
                                .lds-roller div:nth-child(6):after {
                                    top: 68px;
                                    left: 24px;
                                }
                                .lds-roller div:nth-child(7) {
                                    animation-delay: -0.252s;
                                }
                                .lds-roller div:nth-child(7):after {
                                    top: 63px;
                                    left: 17px;
                                }
                                .lds-roller div:nth-child(8) {
                                    animation-delay: -0.288s;
                                }
                                .lds-roller div:nth-child(8):after {
                                    top: 56px;
                                    left: 12px;
                                }
                                @keyframes lds-roller {
                                    0% {
                                        transform: rotate(0deg);
                                    }
                                    100% {
                                        transform: rotate(360deg);
                                    }
                                }
                            </style>
                        `;
                        document.body.appendChild(overlay);
                        overlay.style.display = 'flex';
                        overlay.style.alignItems = 'center';
                        overlay.style.justifyContent = 'center';


                    }
                    function add_note(button) {
                        button.hidden = true;
                        document.getElementById('save_btn').hidden = false;
                        event.preventDefault();
                        index = 99999;
                        var attachment_details = document.getElementById('attachment_details');
                        var new_attachment_details = document.createElement('div');
                        new_attachment_details.className = 'row width_100';
                        new_attachment_details.innerHTML = `
                    <textarea class="width_100" name="notes"></textarea>
                    <input type="text" hidden name="job_card_attachment_id" value="<?php echo $_GET['record_id']; ?>">
                    `;
                        attachment_details.appendChild(new_attachment_details);
                        index++;
                    }
                </script>
                <br>

            </div>

        </form>