{% extends "site.html" %}


{% block head %}
    {{ block.super }}
    <script>
        $(function () {
            $(document).tooltip();

            $(document).keypress(function (event) {
                var key = event.which;
                if (key == 13)  // the enter key code
                {
                   return false;
                }
            });

            {% if not error_form %}
                $("#btn-save-error-report").removeAttr("disabled");
                $("#fill-error-entry").hide();
            {% else %}
            if ($('input[type=radio]:checked').size() > 0) {
                $("#btn-save-error-report").removeAttr("disabled");
            }

            $("input[name='quantity']").click(function (event) {
                $("#btn-save-error-report").removeAttr("disabled");
            });
            {% endif %}

            $("#search-workorder-input").focus();

            {% if submit_multiple %}
            $("#search-workorder-input").keypress(function (event) {
                let key = event.which;
                if (key === 13)  // the enter key code
                {
                   $("#workorder-queue-add").click();
                    return false;
                }
                $("#search-workorder-input").focus();
            });

            $('#workorder-queue-add').click(function (event) {
                let wo_id = $("#search-workorder-input").val();
                $.ajax({
                    type: "POST",
                    url: "{% url 'site:check-undetected-workorder' %}",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                        wo_id: $("#search-workorder-input").val(),
                    },
                    success: function(data, status, jqXHR) {
                        let status_message = $("#status_message");
                        if (data['status_msg'] === 'success') {
                            let is_present = false;
                            let status = wo_id + ' was added to list.';
                            status_message.text(status);
                            status_message.removeClass('nothing_box');
                            status_message.removeClass('error_box');
                            status_message.addClass('success_box');

                            $('#queued-workorders-tbody > tr').each(function() {
                                let cellValue = $(this).find('td').eq(0).text();
                                if (cellValue === wo_id) {
                                    is_present = true;
                                    return false;
                                }
                            })

                            if (!is_present){
                                let newRow = $("<tr>");
                                newRow.append('<td>' + wo_id + '</td>')
                                if (data['workorder_type_tag'].indexOf('ORDER_RX') > 1) {
                                    newRow.append('<td>Rx</td>');
                                } else if ((data['workorder_type_tag'].indexOf('ORDER_PREPACK') > 1)) {
                                    newRow.append('<td>Prepack</td>');
                                } else {
                                    newRow.append('<td>' + data['workorder_type_tag'] + '</td>');
                                }

                                if (data['rx_number'] !== null) {
                                    newRow.append('<td>' + data['rx_number'] + '-' + data['fill_instance'] + '</td>');
                                } else {
                                    newRow.append('<td></td>');
                                }
                                newRow.append('<td>' + data['serial_number'] + '</td>');
                                newRow.append('<td>' + data['drug_number'] + '</td>');
                                newRow.append('<td>' + data['drug_name'] + '</td>');

                                if (data['disp_date'] !== null) {
                                    let datetime = new Date(data['disp_date']);
                                    let formattedDateTime = ('0' + (datetime.getMonth() + 1)).slice(-2) + '/' + ('0' + datetime.getDate()).slice(-2) + '/' + datetime.getFullYear() + ' ' + ((datetime.getHours() + 24) % 12 || 12) + ':' + ('0' + datetime.getMinutes()).slice(-2) + ':' + ('0' + datetime.getSeconds()).slice(-2) + ' ' + (datetime.getHours() >= 12 ? 'PM' : 'AM');
                                    newRow.append('<td>' + formattedDateTime + '</td>');
                                } else {
                                    newRow.append('<td></td>');
                                }

                                newRow.append('<td>' + data['wo_state'] + '</td>');
                                newRow.append('<td><button class="btn btn-small btn-link" onclick="$(this).parent().parent().remove()"><i class="icon-ban-circle"></i></button></td>');

                                $('#queued-workorders-tbody').append(newRow);
                            } else {
                                status_message.text(wo_id + ' has already been added');
                                status_message.removeClass('nothing_box');
                                status_message.removeClass('success_box');
                                status_message.addClass('error_box');
                            }
                            $("#search-workorder-input").val('');
                        } else {
                            status_message.text(data['status_msg']);
                            status_message.removeClass('nothing_box');
                            status_message.removeClass('success_box');
                            status_message.addClass('error_box');
                        }
                    }
                })
            })
            {% endif %}

            $("#btn-submit-wo-id").click(function (event) {
                let wo_id_list = [];
                if ($('#queued-workorders').length > 0) {
                    $('#queued-workorders-tbody > tr').each(function() {
                        let cellValue = $(this).find('td').eq(0).text();
                        wo_id_list.push(cellValue)
                    })
                }

                let error_form = {};
                let form = document.getElementById('submitFillErrorForm');
                let data = new FormData(form);
                for (let [key, value] of data) {
                    error_form[key] = value;
                }

                $.ajax({
                    type: "POST",
                    url: "{% url 'site:submit-undetected-workorder' %}",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                        wo_id: $("#search-workorder-input").val(),
                        refill_card: $('#refill_rx').prop('checked'),
                        error_form: JSON.stringify(error_form),
                        wo_id_list:  JSON.stringify(wo_id_list)
                    },
                    success: function(data, status, jqXHR) {
                        let status_message = $("#status_message");
                        if (data === 'success'){
                            let wo_id_box = $('#search-workorder-input');
                            let wo_id = wo_id_box.val();

                            wo_id_box.val('');
                            $('#id_other_issue').val('');
                            $('#other-text-area').css('display', 'none');
                            $('.radio-label > input').prop('checked', false);
                            $('.checkbox-label').siblings().prop('checked', false);

                            let status = '';
                            if ($('#queued-workorders').length > 0 && $('#queued-workorders-tbody > tr').length > 1) {
                                status = $('#queued-workorders-tbody > tr').length + ' workorders successfully submitted.'
                            } else {
                                if ($('#queued-workorders-tbody > tr').length == 1) {
                                    status = $($($('#queued-workorders-tbody > tr')[0]).children()[0]).text() + ' was successfully submitted.'
                                } else {
                                    status = wo_id + ' was successfully submitted.'
                                }
                            }
                            $('#queued-workorders-tbody > tr').remove();
                            status_message.text(status);
                            status_message.removeClass('nothing_box');
                            status_message.removeClass('error_box');
                            status_message.addClass('success_box');
                        } else {
                            status_message.text(data);
                            status_message.removeClass('nothing_box');
                            status_message.removeClass('success_box');
                            status_message.addClass('error_box');
                        }
                    }
                });
            });

            $('#search-workorder-input').on('input', function() {
                let numericValue = $(this).val().replace(/[^0-9]/g, '');
                $(this).val(numericValue);
            });

            $("#other_issues").change(function () {
                $("#other-text-area").val('');
                if ($(this).is(":checked")){
                    $("#other-text-area").css('display', 'flex');
                } else {
                    $("#other-text-area").css('display', 'none');
                }
            });
        });
    </script>

    <style>
        input[type="checkbox"] {
            display: none;
        }

        label.checkbox-label {
            display: inline-block;
            padding: 5px 10px;
            border: 1px solid #ccc;
            cursor: pointer;
            color: #333;
            border-radius: 1vh;
        }

        input[type="checkbox"]:checked + label.checkbox-label {
            background-color: #44ba85;
            color: white;
        }

        .radio-label {
            display: flex;
            cursor: pointer;
            font-weight: 500;
            position: relative;
            overflow: hidden;
            margin-bottom: 0.375em;

        }

        .radio-label input {
            position: absolute;
            left: -9999px;
        }

        .radio-label input:checked+span {
            background-color: #44ba85;
            color: white;
            border-color: green;
        }

        .radio-label span {
            background-color: lightgrey;
            padding: 0.375em 0.75em 0.375em 0.375em;
            border-radius: 99em;
            transition: 0.25s ease;
            width: 6em;
            font-size: 1vw;
            display: flex;
            justify-content: center;
            border: 1px solid dimgray;
        }

        .radio-label span:hover {
            background-color: grey
        }

        .radio-label span:before {
            background-color: #fff;
            width: 1.5em;
            height: 1.5em;
            border-radius: 50%;
            margin-right: 0.375em;
            transition: 0.25s ease;
            box-shadow: inset 0 0 0 0.125em lightgrey;
        }

        .error_box {
            display: flex;
            visibility: visible;
            padding: 2vh 4vh;
            margin-bottom: 1vh;
            font-size: 3vh;
            background-color: lightcoral;
            border-radius: 1vh;
        }

        .success_box {
            display: flex;
            visibility: visible;
            padding: 2vh 4vh;
            margin-bottom: 1vh;
            font-size: 3vh;
            background-color: lightgreen;
            border-radius: 1vh;
        }

        .nothing_box {
            display: flex;
            visibility: hidden;
            padding: 2vh 4vh;
            margin-bottom: 1vh;
            font-size: 3vh;
            background-color: #f5f5f5;
            border-radius: 1vh;
        }

        #queued-workorders {
            display: flex;
            width: 80%;
            justify-content: center;
        }

        #queued-workorders > table {
            width: 100%;
            margin-bottom: 4vh;
        }

        #queued-workorders > table > thead > tr > th {
            border: 1px solid black;
            font-size: 2.5vh;
            font-weight: normal;
            padding-top: .5vh;
            padding-bottom: .5vh;
        }

        #queued-workorders-tbody > tr > td {
            text-align: center;
            border: 1px solid grey;
            padding-bottom: .5vh;
            padding-top: .5vh;
        }
    </style>
{% endblock %}

{% block pagehead %}
    {% include 'pagehead.html' %}
{% endblock %}

{% block content %}
    <div class="well">
        <form id="submitFillErrorForm" name="submitFillErrorForm" method="POST">
            <div style="display: flex; justify-content: center; flex-direction: column; align-items: center;" id="fill-error-entry">
                <div id="status_message" class="nothing_box">&nbsp;</div>

                <div style="display: flex; width: 30em; justify-content: flex-start; padding-bottom: 2vh; align-items: baseline;">
                    <label for="search-workorder-input" style="font-size: 1vw; padding-right: 1.5vh; margin-left: -2vh; white-space: nowrap;"><b>Scan/Enter Work Order Id:</b></label>
                    <input type="text" id="search-workorder-input" name="search-workorder-input" style="width: 8em;" value="{% if wo_id %}{{ wo_id }}{% endif %}">
                    {% if submit_multiple %}
                    <button id="workorder-queue-add" type="button" class="btn drug-assoc-btn" style="margin-left: 2vh;" >Add</button>
                    {% endif %}
                </div>

                {% if not simple_mode %}
                    <div style="display: flex; width: 50em; justify-content: space-between; padding-bottom: 2vh; align-items: baseline;">
                        <b style="font-size: 1.75vh;">Quantity Issues:</b>
                        {% for radio in error_form.quantity %}
                            <label class="radio-label">
                                {{ radio.tag }}
                                <span>{{ radio.choice_label }}</span>
                            </label>
                        {% endfor %}
                    </div>

                    <div style="display: flex; width: 50em; justify-content: space-between; align-items: baseline; padding-bottom: 2vh;">
                        <b style="font-size: 1.75vh;">Problem Details:</b>
                        {{ error_form.has_jumpers }}<label for="{{ error_form.has_jumpers.id_for_label  }}" class="checkbox-label">{{ error_form.has_jumpers.label  }}</label>
                        {{ error_form.is_broken }}<label for="{{ error_form.is_broken.id_for_label  }}" class="checkbox-label">{{ error_form.is_broken.label  }}</label>
                        {{ error_form.false_empty }}<label for="{{ error_form.false_empty.id_for_label  }}" class="checkbox-label">{{ error_form.false_empty.label  }}</label>
                        {{ error_form.has_desiccant }}<label for="{{ error_form.has_desiccant.id_for_label  }}" class="checkbox-label">{{ error_form.has_desiccant.label  }}</label>
                        <input type="checkbox" name="other_issues" id="other_issues"><label for="other_issues" class="checkbox-label">Other</label>
                    </div>

                    <div id="other-text-area" style="display: none; padding-bottom: 2vh;">
                        {{ error_form.other_issue }}
                    </div>
                {% endif %}

                {% if submit_multiple %}
                <div id="queued-workorders">
                    <table>
                        <thead>
                            <tr>
                                <th>Workorder ID</th>
                                <th>Type</th>
                                <th>Rx Number</th>
                                <th>Canister</th>
                                <th>Drug Number</th>
                                <th>Drug Name</th>
                                <th>Dispense Date</th>
                                <th>Status</th>
                                <th><i class="icon-th-list"></i></th>
                            </tr>
                        </thead>
                        <tbody id="queued-workorders-tbody"></tbody>
                    </table>
                </div>
                {% endif %}

                <div style="display: flex; padding-bottom: 2vh; width: 25em; justify-content: space-around; align-items: baseline;">
                    {% if allow_refill and not submit_multiple %}
                    <input type="checkbox" name="refill_rx" id="refill_rx"><label for="refill_rx" class="checkbox-label">Refill This Card when Submitted?</label>
                    {% endif %}
                    <button type="button" class="btn drug-assoc-btn" id="btn-submit-wo-id" name="btn-submit-wo-id">Submit</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}