{% extends "site.html" %}

{% block head %}
    {{ block.super }}
    <style>
        #management_panels {
            flex: 1;
            padding-left: 10px;
            padding-right: 10px;
            background-color: #f4f4f4;
        }

        .ui-accordion .ui-accordion-content{
            padding: 1em .5em;
        }

        .container-fluid {
            padding-right: 0;
        }

        .form-group {
            margin-bottom: 12px;
            margin-right: 1rem;
        }

        .form-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 4px;
        }

        .form-control {
            width: 100%;
            padding: 8px;
            border: 1px solid #bbb;
            border-radius: 4px;
        }

        #save-message {
            margin-left: 10px;
            background-color: lightgreen;
            margin-right: 6rem;
            padding: .6rem;
            border-radius: 12px;
            border: 2px solid green;
            display: none;
        }

        html, body {
            height: 100%;
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        body > .container-fluid {
            display: flex;
            flex: 1 1 auto;
        }

        .container-fluid > .row-fluid {
            display: flex;
            flex: 1 1 auto;
        }

        #outer_container {
            flex: 1 1 auto;
            display: flex;
            flex-direction: row;
        }

        #add_new_plate {
            float: right;
        }
    </style>

    <script>
        function validate_plate_edits(plate_number, description, plate_id) {
            let has_error = false;
            let old_plate_num = $('#plate_number_' + plate_id).text();
            $("#edit-plate-error-list").empty();

            if (plate_number === '') {
                let errorMsg = "Plate number is required.";
                $("#edit-plate-error-list").append("<li>" + errorMsg + "</li>");
                $("#edit-plate-error-alert").show();
                has_error = true;
            }

            if (description === '') {
                let errorMsg = "Description is required.";
                $("#edit-plate-error-list").append("<li>" + errorMsg + "</li>");
                $("#edit-plate-error-alert").show();
                has_error = true;
            }

            $("[id^='plate_number_']").each(function() {
                let this_plate_num = $(this).text().trim();
                if (this_plate_num === plate_number && this_plate_num !== old_plate_num) {
                    let errorMsg = "Plate number (" + this_plate_num +") already used.";
                    $("#edit-plate-error-list").append("<li>" + errorMsg + "</li>");
                    has_error = true;
                    return false; // exit .each loop early
                }
            });

            if (has_error) {
                $("#edit-plate-error-alert").show();
            } else {
                $("#edit-plate-error-alert").hide();
            }

            return has_error
        }
        function validate_plate_add(plate_number, description,) {
            let has_error = false;
            $("#add-plate-error-list").empty();

            if (plate_number === '') {
                let errorMsg = "Plate number is required.";
                $("#add-plate-error-list").append("<li>" + errorMsg + "</li>");
                $("#add-plate-error-alert").show();
                has_error = true;
            }

            if (description === '') {
                let errorMsg = "Description is required.";
                $("#add-plate-error-list").append("<li>" + errorMsg + "</li>");
                $("#add-plate-error-alert").show();
                has_error = true;
            }

            $("[id^='plate_number_']").each(function() {
                let this_plate_num = $(this).text().trim();
                if (this_plate_num === plate_number) {
                    let errorMsg = "Plate number (" + this_plate_num +") already used.";
                    $("#add-plate-error-list").append("<li>" + errorMsg + "</li>");
                    has_error = true;
                    return false; // exit .each loop early
                }
            });

            if (has_error) {
                $("#edit-plate-error-alert").show();
            } else {
                $("#edit-plate-error-alert").hide();
            }

            return has_error
        }

        $(function () {
            $("#management_panels").accordion({'collapsible': true, 'active': false, 'heightStyle': 'content'});

            // highlight item that was just added if it is in the hash of the page.
            let hash = location.hash;
            if (hash.startsWith('#plate_')) {
                let plateId = hash.replace('#plate_', '');
                let plate_number_td = $('#plate_number_' + plateId);
                let td_list = plate_number_td.add(plate_number_td.siblings());
                td_list.css('background-color', 'lightblue');

                $('#prepack_plate_header').trigger('click');

                // Clear the hash without reloading
                history.replaceState(null, null, ' ');
            }


            $("[id$='-btn-disengage-user']").click(function () {
                $.ajax({
                    type: "POST",
                    url: "{% url 'mfq:force-disengage-user' %}",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                        user_id: $(this).val()
                    },
                    success: function (data) {
                        location.reload();
                    },
                    error: function (xhr, status, error) {
                        console.log(error)
                    }
                });
            });

            $("#edit-plate").dialog({
                autoOpen: false,
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 400,
                open: function (event, ui) {
                    $("#edit-plate-error-alert").hide();
                },
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-float-left',
                        click: function () {
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Save",
                        "class": 'modal-dialog-button-float-right',
                        click: function () {
                            let new_plate_number = $('#edit_plate_number').val()
                            let new_description = $('#edit_description').val()
                            let plate_id = $('#edit_plate_id').val()

                            if (!validate_plate_edits(new_plate_number, new_description, plate_id)) {
                                $.ajax({
                                    url: "{% url 'mfq:change-plate-info' %}",
                                    type: "POST",
                                    data: {
                                        csrfmiddlewaretoken: "{{csrf_token}}",
                                        plate_number: new_plate_number,
                                        description: new_description,
                                        plate_id: plate_id
                                    },
                                    success: function (data, status, jqXHR) {
                                        $('#plate_number_' + plate_id).text(new_plate_number)
                                        $('#description_' + plate_id).text(new_description)
                                        $("#edit-plate").dialog("close");
                                    }
                                })
                            }

                        }
                    }
                ]
            });

            $("#add-plate").dialog({
                autoOpen: false,
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 400,
                open: function (event, ui) {
                    $("#add-plate-error-alert").hide();
                },
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-float-left',
                        click: function () {
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Save",
                        "class": 'modal-dialog-button-float-right',
                        click: function () {
                            let new_plate_number = $('#add_plate_number').val()
                            let new_description = $('#add_description').val()

                            if (!validate_plate_add(new_plate_number, new_description)) {
                                $.ajax({
                                    url: "{% url 'mfq:add-plate-info' %}",
                                    type: "POST",
                                    data: {
                                        csrfmiddlewaretoken: "{{csrf_token}}",
                                        plate_number: new_plate_number,
                                        description: new_description
                                    },
                                    success: function (data, status, jqXHR) {
                                        // store plate information in the hash to highlight on page load.
                                        location.hash = 'plate_' + data.plate_id;
                                        location.reload()
                                    }
                                })
                            }

                        }
                    }
                ]
            });

            $("button[id^='edit_plate_']").click(function (event) {
                let plate_id = $(this).val();
                $('#edit_plate_number').val($('#plate_number_' + plate_id).text())
                $('#edit_description').val($('#description_' + plate_id).text())
                $('#edit_plate_id').val(plate_id)
                $("#edit-plate").dialog("open");
            });

            $("#edit-site-setting-alert").hide();

            $('#save_site_settings').on("click", function() {
                // validate that site settings are good.
                let errors = [];
                let values = {};
                let tagToInput = {};
                let payload = {};

                $("input[id^='site_setting_']").css("border", "");

                $("input[id^='site_setting_']").each(function() {
                    let tag = $(this).data("setting-tag");
                    let id = $(this).attr("id").replace("site_setting_", "");
                    let val = parseInt($(this).val(), 10);
                    tagToInput[tag] = $(this);

                    if (isNaN(val) || val <= 0) {
                        errors.push(tag + " must be greater than 0.");
                        $(this).css("border", "2px solid red");
                    } else {
                        values[tag] = val;
                    }

                    // store values to be posted if no errors exist
                    payload[id] = val;
                });

                // Logical hierarchy checks
                if (values.MANUAL_PPM_CRITICAL_DAYS_ON_HAND >= values.MANUAL_PPM_LOW_LEVEL_DAYS) {
                    errors.push("Low level must be higher than Critical Level.");
                    tagToInput.MANUAL_PPM_CRITICAL_DAYS_ON_HAND.css("border", "2px solid yellow");
                    tagToInput.MANUAL_PPM_LOW_LEVEL_DAYS.css("border", "2px solid red");
                }
                if (values.MANUAL_PPM_LOW_LEVEL_DAYS >= values.MANUAL_PPM_PAR_LEVEL_DAYS) {
                    errors.push("Par Level must be higher than Low Level.");
                    tagToInput.MANUAL_PPM_LOW_LEVEL_DAYS.css("border", "2px solid yellow");
                    tagToInput.MANUAL_PPM_PAR_LEVEL_DAYS.css("border", "2px solid red");
                }
                if (values.MANUAL_PPM_HIGH_COST_LOW_LEVEL_DAYS >= values.MANUAL_PPM_HIGH_COST_PAR_LEVEL_DAYS) {
                    errors.push("High-Cost Par Level must be higher than High-Cost Low Level.");
                    tagToInput.MANUAL_PPM_HIGH_COST_LOW_LEVEL_DAYS.css("border", "2px solid yellow");
                    tagToInput.MANUAL_PPM_HIGH_COST_PAR_LEVEL_DAYS.css("border", "2px solid red");
                }

                $("#edit-site-setting-error").empty();
                if (errors.length > 0) {
                    errors.forEach(function(msg) {
                        $("#edit-site-setting-error").append("<li>" + msg + "</li>");
                    });
                    $("#edit-site-setting-alert").show();
                } else {
                    $("#edit-site-setting-alert").hide();
                    $.ajax({
                        url: "{% url 'mfq:update-site-settings' %}",
                        type: "POST",
                        data: {
                            csrfmiddlewaretoken: "{{csrf_token}}",
                            settings_json: JSON.stringify(payload)
                        },
                        success: function (data, status, jqXHR) {
                            $("#save-message").text("Values Successfully Updated!").fadeIn().delay(3500).fadeOut();
                        }
                    })
                }
            });

            $("button[id$='-btn-unsnooze']").on("click", function() {
                let requestId = $(this).val();
                let $row = $(this).closest("tr");

                $.ajax({
                    url: "{% url 'mfq:unsnooze-request' %}",
                    type: "POST",
                    data: {
                        csrfmiddlewaretoken: "{{csrf_token}}",
                        req_id: requestId
                    },
                    success: function(response) {
                        $row.remove();
                    },
                    error: function(xhr) {
                        // error handling
                    }
                });
            });

            $('#add_new_plate').on('click', function() {
                $("#add-plate").dialog("open");
            })

        })
    </script>
{% endblock %}

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

{% block content %}
<div id="outer_container">

    <!-- Left 2/3: Form -->
    <div style="flex: 2;">
        <form id="supervisor-tools" name="supervisor-tools" method="POST">
            {% csrf_token %}
            <table id="supervisor-tools-table" class="table table-bordered">
                <thead style="position: sticky; top: 0;">
                <tr class="dosis-report-header">
                    {% include 'report-table-header.html' %}
                    <th></th>
                </tr>
                </thead>
                <tbody>
                    {% for user in report_list %}
                        <tr>
                            <td>{{user.user_initials}}</td>
                            <td>{{user.last_login|date:"m/d/Y h:i:s A"}}</td>
                            <td>{{user.active_printer}}</td>
                            {% if user.has_prepacker == 'TRUE' %}
                                {% if user.prepack_plate != '' %}
                                    <td>yes using plate {{user.prepack_plate}}</td>
                                {% else %}
                                    <td>yes, unknown plate</td>
                                {% endif %}
                            {% else %}
                                <td>no prepacker in use</td>
                            {% endif %}
                            {% if user.active_job != '0' %}
                                <td><a href="{% url 'site:search-ord-req-ppk-detail' user.active_job %}">{{user.active_job}}</a></td>
                            {% else %}
                                <td></td>
                            {% endif %}
                            <td>{{user.has_critical}}</td>
                            <td>{{user.expected_cards}}</td>
                            <td>
                                <button class="btn btn-small btn-link" type="button" name="{{user.user_id}}-btn-disengage-user" value="{{user.user_id}}" title="Force Disengage User" id="{{user.user_id}}-btn-disengage-user"><i class="icon-remove"></i></button>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </form>
    {% include 'pagenav.html' %}
    </div>

    <!-- Right 1/3: Side Panel -->
    <div id="management_panels">
        <h3>Orphan Tasks</h3>
        <div>
            {% if orphan_list %}
                <div>
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr class="dosis-report-header">
                                <th>Request ID</th>
                                <th>Drug Name</th>
                                <th>Num. Cards</th>
                                <th>Pills per Package</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for orphan in orphan_list %}
                                <tr>
                                    <td><a href="{% url 'site:search-ord-req-ppk-detail' orphan.req_id %}" target="_blank" style="color: #08c;">{{orphan.req_id}}</a></td>
                                    <td>{{orphan.drug_name}}</td>
                                    <td>{{orphan.num_cards}}</td>
                                    <td>{{orphan.dosis_per_pkg}}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <p style="margin: 8px 0; color: #555; font-style: italic;">No Orphan Tasks in Queue.</p>
            {% endif %}
        </div>


        <h3>Snoozed Jobs</h3>
        <div>
            {% if snoozed_jobs %}
                <div>
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr class="dosis-report-header">
                                <th>Request ID</th>
                                <th>Snoozed Until</th>
                                <th>Snooze Type</th>
                                <th>User</th>
                                <th><i class="icon-th-list"></i></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for snoozed_job in snoozed_jobs %}
                                <tr>
                                    <td><a href="{% url 'site:search-ord-req-ppk-detail' snoozed_job.req__req_id %}" target="_blank" style="color: #08c;">{{snoozed_job.req__req_id}}</a></td>
                                    <td>{{snoozed_job.snoozed_until|date:"m/d/Y h:i:s A"}}</td>
                                    <td>{{snoozed_job.user_job_rejection_type__display_name}}</td>
                                    <td>{{snoozed_job.user__initials}}</td>
                                    <td>
                                        <!-- TODO: show reason button if reason was provided??? -->
                                        <!-- can reason be put on tr beneath this? -->
                                        <button class="btn btn-small btn-link" type="button" name="{{snoozed_job.req__req_id}}-btn-unsnooze" value="{{snoozed_job.req__req_id}}" title="Un-Snooze Job" id="{{snoozed_job.req__req_id}}-btn-unsnooze"><i class="icon-check"></i></button>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <p style="margin: 8px 0; color: #555; font-style: italic;">No jobs snoozed.</p>
            {% endif %}
        </div>


        <h3>Recommended levels</h3>
        <div>
            <div class="alert alert-error" id="edit-site-setting-alert">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="edit-site-setting-error"></ul>
            </div>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr class="dosis-report-header">
                        <th>Description</th>
                        <th>Current Value</th>
                    </tr>
                </thead>
                <tbody>
                    {% for setting in day_levels %}
                        <tr>
                            <td {% if setting.setting_type__tag == 'MANUAL_PPM_CRITICAL_DAYS_ON_HAND' or setting.setting_type__tag == 'MANUAL_PPM_HIGH_COST_LOW_LEVEL_DAYS' %} style="border-bottom: 3px solid black;"{% endif %}>{{setting.setting_type__description}}</td>
                            <td {% if setting.setting_type__tag == 'MANUAL_PPM_CRITICAL_DAYS_ON_HAND' or setting.setting_type__tag == 'MANUAL_PPM_HIGH_COST_LOW_LEVEL_DAYS' %} style="border-bottom: 3px solid black;"{% endif %}>
                                {% if allow_edit_recommended_levels %}
                                    <input type="number" min="0" id="site_setting_{{setting.setting_type__id}}" value="{{setting.value}}" data-setting-tag="{{setting.setting_type__tag}}">
                                {% else %}
                                    {{setting.value}}
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% if allow_edit_recommended_levels %}
            <div style="text-align: right;">
                <span id="save-message"></span>
                <button id="save_site_settings">Update Settings</button>
            </div>
            {% endif %}
        </div>


        <h3 id="prepack_plate_header">Prepack Plates</h3>
        <div>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr class="dosis-report-header">
                        <th>Plate Number</th>
                        <th>Description</th>
                        <th>Drugs Using Plate</th>
                        <th><i class="icon-th-list"></i></th>
                    </tr>
                </thead>
                <tbody>
                {% for plate in plate_list %}
                    <tr>
                        <td id="plate_number_{{plate.id}}">{{plate.plate_number}}</td>
                        <td id="description_{{plate.id}}">{{plate.description}}</td>
                        <td>{{plate.usage_count}}</td>
                        <td>
                            <button class="btn btn-small btn-link" id="edit_plate_{{plate.id}}" type="button" value="{{plate.id}}" title="Edit Plate">
                                <i class="icon-pencil"></i>
                            </button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <button class="btn" id="add_new_plate" type="button">
                Add New Plate
            </button>
        </div>
    </div>
</div>

<div id="edit-plate" title="Edit Order Rule" style="margin-left: 2px;">
    <form id="editPlateForm" name="editPlateForm" method="POST">
        {% csrf_token %}
        <div class="alert alert-error" id="edit-plate-error-alert">
            <ul id="edit-plate-error-list"></ul>
        </div>
        <div class="form-group">
            <label for="edit_plate_number">Plate Number</label>
            <input type="text" id="edit_plate_number" class="form-control">
        </div>
        <div class="form-group">
            <label for="edit_description">Description</label>
            <input type="text" id="edit_description" class="form-control">
        </div>
        <input type="hidden" id="edit_plate_id">
    </form>
</div>

<div id="add-plate" title="Add New Plate" style="margin-left: 2px;">
    <form id="addPlateForm" name="addPlateForm" method="POST">
        {% csrf_token %}
        <div class="alert alert-error" id="add-plate-error-alert">
            <ul id="add-plate-error-list"></ul>
        </div>
        <div class="form-group">
            <label for="add_plate_number">Plate Number</label>
            <input type="text" id="add_plate_number" class="form-control">
        </div>
        <div class="form-group">
            <label for="add_description">Description</label>
            <input type="text" id="add_description" class="form-control">
        </div>
    </form>
</div>

{% endblock %}