{% extends "site.html" %}
{% load humanize %}

{% block head %}
    {{ block.super }}
{% endblock %}

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

{% block content %}

<script>
    $(document).ready(function() {
        $("textarea").on("blur", function() {
            let id = $(this).data("id");
            let val = $(this).val();

            $.ajax({
                url: "{% url 'mfq:update-purchase-order' %}",
                method: "POST",
                data: {
                    csrfmiddlewaretoken: '{{csrf_token}}',
                    id: id,
                    notes: val
                }
            });
        });


        $(".bottles-purchased").on("input", function() {
            // strip non digits from text.
            let val = $(this).val().replace(/\D/g, "");
            $(this).val(val);

            // update # of
            let qty = $(this).data("quantity") || 0;
            let pills = (parseInt(val || 0, 10)) * qty;

            $(".pills-purchased[data-id='" + $(this).data("id") + "']").text(pills.toLocaleString());
        });


        $(".bottles-purchased").on("blur", function() {
            let id = $(this).data("id");
            let val = $(this).val();

            $.ajax({
                url: "{% url 'mfq:update-purchase-order' %}",
                method: "POST",
                data: {
                    csrfmiddlewaretoken: '{{csrf_token}}',
                    id: id,
                    stock_bottles: val
                }
            });
        });


        $(".purchase-date").on("change", function() {
            let id = $(this).data("id");
            let val = $(this).val();

            let selected = new Date(val);
            let today = new Date();
            today.setHours(0, 0, 0, 0);

            let year = selected.getFullYear();

            if (selected <= today && val && year > 2000) {
                $.ajax({
                    url: "{% url 'mfq:update-purchase-order' %}",
                    method: "POST",
                    data: {
                        csrfmiddlewaretoken: "{{csrf_token}}",
                        id: id,
                        purchase_date: val
                    }
                });
            }
        });


        $(window).on("beforeunload", function() {
            let active = document.activeElement;
            if ($(active).is("textarea")) {
                let id = $(active).data("id");
                let val = $(active).val();
                $.ajax({
                    url: "{% url 'mfq:update-purchase-order' %}",
                    method: "POST",
                    async: false,
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                        id: id,
                        notes: val
                    }
                });
            } else if ($(active).is(".bottles-purchased")) {
                let id = $(active).data("id");
                let val = $(active).val();

                $.ajax({
                    url: "{% url 'mfq:update-purchase-order' %}",
                    method: "POST",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                        id: id,
                        stock_bottles: val
                    }
                });
            }
        });
    });
</script>

<table id="purchase-order-table" class="table table-bordered table-striped">
    <thead style="position: sticky; top: 0;">
    <tr class="dosis-report-header">
        {% include 'report-table-header.html' %}
    </tr>
    </thead>
    <tbody>
        {% for purchase_order in report_list %}
            <tr>
                <td><a href="{% url 'site:search-main' %}?value={{purchase_order.non_dash_drug_number}}">{{purchase_order.drug_number}}</a></td>
                <td>{{purchase_order.drug_name}}</td>
                <td><input type="date" class="purchase-date" data-id="{{purchase_order.id}}" value="{{purchase_order.purchase_date|date:'Y-m-d'}}" max="{% now 'Y-m-d' %}"/></td>
                <td><input type="number" class="bottles-purchased" data-id="{{purchase_order.id}}" data-quantity="{{purchase_order.stock_bottle_quantity}}" value="{{purchase_order.bottles_purchased}}" style="width:80px;" /></td>
                <td style="text-align: right;" class="pills-purchased" data-id="{{purchase_order.id}}">{{purchase_order.pills_purchased|intcomma}}</td>
                <td>{{purchase_order.user}}</td>
                <td><textarea  data-id="{{purchase_order.id}}" rows="2" style="width:90%; resize: none;">{{purchase_order.notes}}</textarea></td>
                <td>
                  {% for request in purchase_order.requests %}
                    <a href="{% url 'site:search-ord-req-ppk-detail' request %}">{{request}}</a>&nbsp;
                  {% endfor %}
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>

{% include 'pagenav.html' %}
{% endblock %}