{% extends "support.html" %}


{% block head %}
    {{ block.super }}
    <script>

        $(function () {
            $(document).tooltip();

            $("select[id^='schedule-lookup-schedule-']").change(function () {
                var tag = $(this).attr("id");
                tag = tag.replace("schedule-lookup-schedule-", "");
                $.post("{% url 'support:update-pms-drug-schedule-schedule' %}",
                        {'csrfmiddlewaretoken': '{{csrf_token}}', tag: tag, sched_id: $(this).val()});
            });

             $("input[id^='schedule-lookup-tag-']").keyup(function () {
                this.value = this.value.toUpperCase();
            });

             $("#add-schedule-lookup-tag").keyup(function() {
                this.value = this.value.toUpperCase();
             });

            $("input[id^='schedule-lookup-tag-']").change(function () {
                var tag = $(this).attr("id");
                tag = tag.replace("schedule-lookup-tag-", "");
                $.post("{% url 'support:update-pms-drug-schedule-tag' %}",
                        {'csrfmiddlewaretoken': '{{csrf_token}}', tag: tag, new_tag: $(this).val()},
                        function(data) {
                          window.location.href = "{% url 'support:support-manage-interface' %}";
                        });
            });

        });
    </script>
{% endblock %}

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

{% block content %}
    <p><a href="{% url 'support:support-manage-interface' %}">Back To Manage PMIS Interface</a></p>
    <p>&nbsp;</p>
     <form name="pmsScheduleLookupForm" id="pmsScheduleLookupForm" method="POST">
        {% csrf_token %}
        <table class="table table-bordered table-striped" style="width: 400px;">
        <caption style="font-weight: bold; font-size: 14pt;">Drug Schedule Lookups</caption>
        <thead style="position: sticky; top: 0;">
        <tr class="dosis-report-header">
            <th>Tag</th>
            <th>Drug Schedule</th>
            <th><i class="icon-th-list"></i></th>
        </tr>
        </thead>
        <tbody>
            {% for itm in schedule_lookup_list %}
                <tr>
                    <td style="padding-bottom: 2px;"><input style="width: 15em;" type="text" name="schedule-lookup-tag-{{ itm.tag }}" id="schedule-lookup-tag-{{ itm.tag }}"
                                                            value="{{ itm.tag }}"/></td>
                    <td style="padding-bottom: 2px;"><select style="width: auto;" id="schedule-lookup-schedule-{{ itm.tag }}" name="schedule-lookup-schedule-{{ itm.tag }}">
                {% for sched in drug_schedule_list %}
                    <option value="{{ sched.id }}"
                            {% ifequal sched.id itm.drug_schedule_id %}selected{% endifequal %}>{{ sched.name }}</option>
                {% endfor %}</select></td>
                    <td><button class="btn btn-link" name="del-schedule-lookup-{{ itm.tag }}" id="del-schedule-lookup-{{ itm.tag }}" value="{{ itm.tag }}"><i class="icon-remove"></i></button>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <div style="background-color: yellow; width: 400px; padding: 4px;">
            <input type="text" style="width: 15em;" name="add-schedule-lookup-tag" id="add-schedule-lookup-tag"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <select style="width: auto;" id="add-schedule-lookup-schedule" name="add-schedule-lookup-schedule">
                {% for sched in drug_schedule_list %}
                    <option value="{{ sched.id }}">{{ sched.name }}</option>
                {% endfor %}</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button name="btn-add-schedule-lookup" id="btn-add-schedule-lookup"
                          class="btn">Add Drug Schedule Lookup</button>
        </div>
    </form>
{% endblock %}