{% extends "site.html" %}


{% block head %}
    {{ block.super }}
    <script>
        function replacePane(ajax_url, class_name) {
            $.ajax({
                url: ajax_url, async: true
            }).done(function (d) {
                $(class_name).replaceWith(d);

                $(class_name + " a.edit-attrib").each(function () {
                    $(this).click(function () {
                        showModalEditor($(this).attr("href"), false);
                        return false
                    });
                });
            });
        }

        function filterAttribList(ajax_url, class_name, event, filterval) {
            var charCode = event.charCode || event.keyCode;
            if (charCode >= 48 || charCode == 46 || charCode == 8) {    //only process if del, backspace or letter/number
                replacePane(ajax_url + "?filter=" + filterval, class_name);
            }
            return true;
        }

        function showModalEditor(ajax_url, add) {
            $.ajax({
                url: ajax_url, async: false
            }).done(function (d) {
                if (add) {
                    $('#drug-attrib-modal span.add').show();
                    $('#drug-attrib-modal span.edit').hide();
                } else {
                    $('#drug-attrib-modal span.add').hide();
                    $('#drug-attrib-modal span.edit').show();
                }

                $('#drug-attrib-modal').modal('show');
                $('#drug-attrib-modal .modal-body').replaceWith(d)
            });
        }

        $(function () {
            replacePane("{% url 'site:drug-names' %}", '.drug-names');
            replacePane("{% url 'site:drug-strengths' %}", '.drug-strengths');
            replacePane("{% url 'site:drug-units' %}", '.drug-units');
            replacePane("{% url 'site:drug-forms' %}", '.drug-forms');
            replacePane("{% url 'site:drug-mfgs' %}", '.drug-mfgs');
            replacePane("{% url 'site:drug-colors' %}", '.drug-colors');
            replacePane("{% url 'site:drug-shapes' %}", '.drug-shapes');
            replacePane("{% url 'site:drug-schedules' %}", '.drug-schedules');

            $("a.add-attrib").each(function () {
                $(this).click(function () {
                    showModalEditor($(this).attr("href"), true);
                    return false
                });
            });

            $("#drug-name-search").keyup(function (event) {
                return filterAttribList("{% url 'site:drug-names' %}", ".drug-names", event, $(this).val());
            });

            $("#drug-strength-search").keyup(function (event) {
                return filterAttribList("{% url 'site:drug-strengths' %}", ".drug-strengths", event, $(this).val());
            });

            $("#drug-unit-search").keyup(function (event) {
                return filterAttribList("{% url 'site:drug-units' %}", ".drug-units", event, $(this).val());
            });

            $("#drug-form-search").keyup(function (event) {
                return filterAttribList("{% url 'site:drug-forms' %}", ".drug-forms", event, $(this).val());
            });

            $("#drug-manufacturer-search").keyup(function (event) {
                return filterAttribList("{% url 'site:drug-mfgs' %}", ".drug-mfgs", event, $(this).val());
            });

            $("#drug-color-search").keyup(function (event) {
                return filterAttribList("{% url 'site:drug-colors' %}", ".drug-colors", event, $(this).val());
            });

            $("#drug-shape-search").keyup(function (event) {
                return filterAttribList("{% url 'site:drug-shapes' %}", ".drug-shapes", event, $(this).val());
            });

            $("#drug-schedule-search").keyup(function (event) {
                return filterAttribList("{% url 'site:drug-schedules' %}", ".drug-schedules", event, $(this).val());
            });
        });
    </script>
{% endblock %}

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

{% block content %}
    <table>
        <tr>
            <td style="width: 600px; padding: 8px 15px;">
                <div>
                    <h5>Drug Names</h5>
                    <div class="well">
                        <span><input class="search-query drug-attrib-search" id="drug-name-search" name="drug-name-search" type="text">
                            <a href="{% url 'site:drug-names-add' %}" style="float: right" class="add-attrib"><i class="icon-plus-sign"></i> Add</a></span>
                        <div class="scroll">
                            <div class="drug-names progress progress-striped active">
                                <div class="bar" style="width: 100%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
            <td style="width: 600px; padding: 8px 15px;">
                <div>
                    <h5>Manufacturers</h5>
                    <div class="well">
                        <span><input class="search-query drug-attrib-search" id="drug-manufacturer-search" name="drug-manufacturer-search" type="text">
                            <a href="{% url 'site:drug-mfgs-add' %}" style="float: right" class="add-attrib"><i class="icon-plus-sign"></i> Add</a></span>
                        <div class="scroll">
                            <div class="drug-mfgs progress progress-striped active">
                                <div class="bar" style="width: 100%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td style="width: 600px; padding: 8px 15px;">
                <div>
                    <h5>Strengths</h5>
                    <div class="well">
                        <span><input class="search-query drug-attrib-search" id="drug-strength-search" name="drug-strength-search" type="text">
                            <a href="{% url 'site:drug-strengths-add' %}" style="float: right" class="add-attrib"><i class="icon-plus-sign"></i> Add</a></span>
                        <div class="scroll">
                            <div class="drug-strengths progress progress-striped active">
                                <div class="bar" style="width: 100%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
            <td style="width: 600px; padding: 8px 15px;">
                <div>
                    <h5>Units</h5>
                    <div class="well">
                        <span><input class="search-query drug-attrib-search" id="drug-unit-search" name="drug-unit-search" type="text">
                            <a href="{% url 'site:drug-units-add' %}" style="float: right" class="add-attrib"><i class="icon-plus-sign"></i> Add</a></span>
                        <div class="scroll">
                            <div class="drug-units progress progress-striped active">
                                <div class="bar" style="width: 100%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td style="width: 600px; padding: 8px 15px;">
                <div>
                    <h5>Colors</h5>
                    <div class="well">
                        <span><input class="search-query drug-attrib-search" id="drug-color-search" name="drug-color-search" type="text">
                            <a href="{% url 'site:drug-colors-add' %}" style="float: right" class="add-attrib"><i class="icon-plus-sign"></i> Add</a></span>
                        <div class="scroll">
                            <div class="drug-colors progress progress-striped active">
                                <div class="bar" style="width: 100%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
            <td style="width: 600px; padding: 8px 15px;">
                <div>
                    <h5>Shapes</h5>
                    <div class="well">
                        <span><input class="search-query drug-attrib-search" id="drug-shape-search" name="drug-shape-search" type="text">
                            <a href="{% url 'site:drug-shapes-add' %}" style="float: right" class="add-attrib"><i class="icon-plus-sign"></i> Add</a></span>
                        <div class="scroll">
                            <div class="drug-shapes progress progress-striped active">
                                <div class="bar" style="width: 100%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td style="width: 600px; padding: 8px 15px;">
                <div>
                    <h5>Dosage Forms</h5>
                    <div class="well">
                        <span><input class="search-query drug-attrib-search" id="drug-form-search" name="drug-form-search" type="text">
                            <a href="{% url 'site:drug-forms-add' %}" style="float: right" class="add-attrib"><i class="icon-plus-sign"></i> Add</a></span>
                        <div class="scroll">
                            <div class="drug-forms progress progress-striped active">
                                <div class="bar" style="width: 100%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
            <td style="width: 600px; padding: 8px 15px;">
                <div>
                    <h5>Schedules</h5>
                    <div class="well">
                        <span><input class="search-query drug-attrib-search" id="drug-schedule-search" name="drug-schedule-search" type="text">
                            <a href="{% url 'site:drug-schedules-add' %}" style="float: right" class="add-attrib"><i class="icon-plus-sign"></i> Add</a></span>
                        <div class="scroll">
                            <div class="drug-schedules progress progress-striped active">
                                <div class="bar" style="width: 100%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>

    <div id="drug-attrib-modal" class="modal hide fade">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3><span class="edit">Edit</span><span class="add">Add</span> drug attribute</h3>
        </div>
        <div class="modal-body progress progress-striped active">
            <div class="bar" style="width: 100%"></div>
        </div>
    </div>

{% endblock %}