<?php

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

$html = new html("JOB CARDS");
$app_feature = new app_features();

$db = new db();
$job_Card_res = $db->query("job_cards", "SELECT * FROM job_cards WHERE record_id = '{$_GET['record_id']}'");
$job_Card = $job_Card_res->fetch_assoc();
?>
<script>
    function get_subcategories(input, i) {
        event.preventDefault();
        var category_id = input.value;
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                console.log(this.responseText);
                document.getElementById('file_subcategory_' + i).innerHTML = this.responseText;
            }
        };
        xhttp.open("POST", "file_subcategories.ajax.php", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send("file_category_id=" + category_id);

    }
</script>
<form id="job_card_form" method="POST" action="update_job_card.php?attachments" enctype="multipart/form-data">
    <div class="column width_100 background_1 border_radius">
        <h1>JOB CARD ATTACHMENTS</h1>
        <div class="row width_90 border_2 padding">
            <div class="column width_50 ">
                <label>Job Card No</label>
                <input type="text" class="width_80" id='job_card_no' readonly required name='job_card_no'
                    value="<?php echo $job_Card['job_card_no']; ?>" />
                <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
                $file_categories_res = $db->query("file_categories", "SELECT * FROM `file_categories` ORDER BY record_id ASC");
                while ($file_categories = $file_categories_res->fetch_assoc()) {
                    $job_card_attachments_res = $db->query("job_card_attachments", "SELECT * FROM `job_card_attachments` WHERE job_card_id = {$_GET['record_id']} AND file_category_id = {$file_categories['record_id']} ORDER BY record_id ASC");
                    if ($job_card_attachments_res->num_rows > 0) {
                        echo "   <div class='row width_100 margin_bottom' > 
                                    <div class='column width_100'>
                                       <h2>{$file_categories['name']}</h2>
                                    </div>
                              </div>";
                        $job_card_attachments_res = $db->query("job_card_attachments", "SELECT * FROM `job_card_attachments` WHERE job_card_id = {$_GET['record_id']} AND file_category_id = {$file_categories['record_id']} ORDER BY record_id ASC");
                        while ($job_card_attachments = $job_card_attachments_res->fetch_assoc()) {
                            // get comments for attchments total 
                
                            $comments_res = $db->query("attachment_notes", "SELECT * FROM `attachment_notes` WHERE job_card_attachment_id = {$job_card_attachments['record_id']} ORDER BY record_id ASC");
                            $comments_amount = $comments_res->num_rows;
                            echo "
                                <div class='row width_100 margin_bottom' id='attachment_{$job_card_attachments['record_id']}'>
                                    <div class='column width_100'>
                                        <input type='text' class='width_80'  value='{$job_card_attachments['description']}'>
                                    </div>
                                    <div class='column width_100'>
                                        <select class='width_80' id='file_category_{$job_card_attachments['record_id']}' onchange=\"get_subcategories(this,{$job_card_attachments['record_id']})\" />
                                            " . $function->get_file_categories() . "
                                        </select>
                                        <script>
                                            document.getElementById('file_category_{$job_card_attachments['record_id']}').value = '{$job_card_attachments['file_category_id']}';
                                            get_subcategories(document.getElementById('file_category[]'),{$job_card_attachments['record_id']});
                                        </script>
                                    </div>
                                    <div class='column width_100'>
                                    <select class='width_80' id='file_subcategory_{$job_card_attachments['record_id']}'  />
                                        " . $function->get_file_subcategories($job_card_attachments['file_sub_category_id']) . "
                                    </select>
                                    <script>
                                            document.getElementById('file_subcategory_{$job_card_attachments['record_id']}').value = '{$job_card_attachments['file_sub_category_id']}';
                                    </script>   
                                    </div>
                                      <div class='column width_100'>
                                       <button class='width_100' onclick=\"event.preventDefault();window.location.href = 'attachments/{$job_card_attachments['file_name']}';\">OPEN FILE</button>
                                    </div>
                                
                                    <div class='column width_100'>
                                       <button onclick='event.preventDefault();delete_attachment_details({$job_card_attachments['record_id']},\"{$job_card_attachments['file_name']}\")'>DELETE</button>
                                    </div>
                                    <div class='row width_20'>
                                         $comments_amount&nbsp<i class='fa-solid fa-comment' style='font-size:2em;' onclick=\"refirect('job_card_attachment_notes.php?record_id={$job_card_attachments['record_id']}&backable=1')\"></i>
                                    </div>
                                </div>";
                        }
                    }
                }
                ?>
            </div>
            <br>
            <button onclick="add_attachments_details()" class="width_90">ADD</button>
        </div>
        <br><br>
        <button class="width_90" onclick="save()">SAVE</button>
        <script>
            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_attachments_details() {
                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 = `
                  
                    <div class="column width_100">
                        <label>DESCRIPTION</label>
                        <input type="text" class="width_80" id='attachment_description[]' name='attachment_description[]' />
                    </div>
                        <div class="column width_100">
                        <label>CATEGORY</label>
                        <select class="width_80" onchange="get_subcategories(this,`+ index + `)" name='file_category[]' />
                        <?php
                        echo $function->get_file_categories();
                        ?>
                        </select>
                    </div>
                    </div>
                        <div class="column width_100">
                        <label>SUBCATEGORY</label>
                        <select  class="width_80" id='file_subcategory_`+ index + `' name='file_subcategory[]' />
                        </select>

                    </div>
                    </div>
                        <div class="column width_100">
                        <label>FILE</label>
                        <input type="file" class="width_80" id='attachment_file[]' name='attachment_file[]' />
                    </div>
                    `;
                attachment_details.appendChild(new_attachment_details);
                index++;
            }

            function delete_attachment_details(record_id, attachment) {
                event.preventDefault();
                document.getElementById('attachment_details').removeChild(document.getElementById('attachment_' + record_id));
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        // console.log(this.responseText);
                    }
                };
                xhttp.open("POST", "delete_attachment.php", true);
                xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhttp.send("record_id=" + record_id + "&attachment_file=" + attachment);

            }

            function open_file(record_id) {
                window.location.href = 'job_card.pdf.php?record_id=' + record_id;
            }

            function refirect(url) {
                window.location.href = url;
            }
        </script>
        <!-- 
        <div class="iframe_background" id="iframe_bg" style="display: none;"></div>
        <iframe class="popup_iframe" id='iframe_popup' src="job_card_attachments.php" style="display: none;"></iframe>
        <i class="fa fa-times-circle iframe_close" id='iframe_close' style="display: none;"
            onclick="close_iframe()"></i>
        <script>
            function open_iframe(url) {
                document.querySelector(".popup_iframe").style.display = "block";
                document.querySelector(".iframe_close").style.display = "block";
                document.querySelector(".iframe_background").style.display = "block";
                document.querySelector(".popup_iframe").src = url;
            }
            function close_iframe() {
                document.querySelector(".popup_iframe").style.display = "none";
                document.querySelector(".iframe_close").style.display = "none";
                document.querySelector(".iframe_background").style.display = "none";
            }
        </script> -->

        <br>

    </div>

</form>