<?php

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

$html = new html("");

$app = new inner_app();
$app->quick_bar("/app/jobcard_admin");
$app->app_start();

$question_res = $db->query("job_card_additional_details", "SELECT * FROM `job_card_additional_details` WHERE `record_id`='" . $_GET['record_id'] . "'");
$question = $question_res->fetch_assoc();
?>

<div class="column width_80 background_1 border_radius">

    <h1>ADDITIONAL DETAILS</h1>
    <div class="row width_80">
        <div class="column width_50">
            <label>QUESTION</label>
            <input type="text" hidden class="width_80" id='record_id' name='record_id'
                value="<?php echo $question['record_id']; ?>" />
            <input type="text" class="width_80" id='name' name='name' value="<?php echo $question['question']; ?>" />
        </div>
    </div>
    <br>
    <div class="width_80 border_2" id="options_details">
        <?php
        $options_res = $db->query("job_card_additional_detail_options", "SELECT * FROM `job_card_additional_detail_options` WHERE `job_card_additional_detail_id`='" . $question['record_id'] . "'");
        while ($options = $options_res->fetch_assoc()) {
            ?>
            <div class="row width_100">
                <div class="column width_100">
                    <label>OPTION</label>
                    <input type="text" class="width_80" name='option[]' value="<?php echo $options['option']; ?>" />
                </div>
                <div class="column width_100">
                    <button onclick="remove(this)" class="width_80">DELETE</button>
                </div>
            </div>
            <?php
        }
        ?>
    </div>
    <br>
    <button class="width_90" onclick="add_options()">ADD OPTIONS</button>
    <br>
    <button class="width_90" onclick="save(event, 'update_job_card_additional_details.php')">SAVE</button>
    <br>

</div>


<script>
    function add_options() {
        event.preventDefault();
        index = 99999;
        var options_details = document.getElementById('options_details');
        var new_options_details = document.createElement('div');
        new_options_details.className = 'row width_100';
        new_options_details.innerHTML = `
                  
                    <div class="column width_100">
                        <label>OPTION</label>
                        <input type="text" class="width_80"  name='option[]' />
                    </div>
                      <div class="column width_100">
                        <button  onclick="remove(this)" class="width_80" >DELETE</button>
                    </div>
                    `;
        options_details.appendChild(new_options_details);
        index++;
    }
    function remove(e) {
        e.parentElement.parentElement.remove();
    }
    function save(event, url) {

        var elements = document.getElementsByTagName('input');
        var payload = {};

        for (var i = 0; i < elements.length; i++) {
            var element = elements[i];
            if (element.type === 'text' || element.type === 'date' || element.type === 'email' || element.type === 'hidden') {
                if (element.name.endsWith("[]")) {
                    let key = element.name.replace("[]", "");
                    if (!payload[key]) payload[key] = [];
                    payload[key].push(element.value);
                } else {
                    payload[element.name] = element.value;
                }
            }
        }

        var selects = document.getElementsByTagName('select');
        for (var i = 0; i < selects.length; i++) {
            payload[selects[i].name] = selects[i].value;
        }

        var form = document.createElement('form');
        form.method = 'POST';
        form.action = url;

        for (var key in payload) {
            if (Array.isArray(payload[key])) {
                payload[key].forEach(function (val) {
                    var input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = key + "[]";
                    input.value = val;
                    form.appendChild(input);
                });
            } else {
                var input = document.createElement('input');
                input.type = 'hidden';
                input.name = key;
                input.value = payload[key];
                form.appendChild(input);
            }
        }

        document.body.appendChild(form);
        form.submit();
    }

</script>