{% load humanize %}

<style>
    .subheader {
        position: sticky;
        top: calc(var(--thead-height, 40px));
        background: white;
        z-index: 2;
    }
</style>

<script>
    $(document).ready(function() {
        $(document).on('click', '.show_button', function () {
            $('.black-bordered').css({
                'border-top': '',
                'border-right': '',
                'border-bottom': '',
                'border-left': ''
            })
            $('.black-bordered').removeClass('black-bordered');

            $('.hide_button:visible').click();
            let $groupHeader = $(this).closest('tr');
            $groupHeader.find('td').addClass('black-bordered').css('border-top', '3px solid black');
            $groupHeader.find('td:first').addClass('black-bordered').css('border-left', '3px solid black');
            $groupHeader.find('td:last').addClass('black-bordered').css('border-right', '3px solid black');

            let $nextRows = $groupHeader.nextAll();

            // show <tr> until next group header is reached
            for (let i = 0; i < $nextRows.length; i++) {
                let $row = $($nextRows[i]);
                if ($row.hasClass('group-header')){
                    break;
                }

                $row.find('td:first').addClass('black-bordered').css('border-left', '3px solid black');
                $row.find('td:last').addClass('black-bordered').css('border-right', '3px solid black');
                $row.find('td').addClass('black-bordered').css('border-bottom', '3px solid black');
                $row.prev().find('td').addClass('black-bordered').css('border-bottom', '');
                $row.show();
            }

            $(this).hide();
            $groupHeader.find('.hide_button').show();
        });

        $(document).on('click', '.hide_button', function () {
            $('.black-bordered').css({
                'border-top': '',
                'border-right': '',
                'border-bottom': '',
                'border-left': ''
            })
            $('.black-bordered').removeClass('black-bordered');

            let $groupHeader = $(this).closest('tr');
            let $nextRows = $groupHeader.nextAll();

            for (let i = 0; i < $nextRows.length; i++) {
                let $row = $($nextRows[i]);
                if ($row.hasClass('group-header')) break;
                $row.hide();
            }

            $(this).hide();
            $groupHeader.find('.show_button').show();
        });

        $('#btn-purchase-selected').on('click', function () {
            let result = {};

            $('.purchase_order_checkbox:checked').each(function () {
                let instanceId = $(this).val();
                let stockBottles = $(this).data('stock-bottles');
                let note = $(this).closest('tr').find('textarea').val();
                let $groupHeader = $(this).closest('tr');
                let $nextRows = $groupHeader.nextAll();
                let reqIds = [];

                for (let i = 0; i < $nextRows.length; i++) {
                    let $row = $($nextRows[i]);
                    if ($row.hasClass('group-header')) break;

                    let reqId = $row.find('.req-id-cell').data('req_id');
                    if (reqId !== undefined) {
                        reqIds.push(reqId);
                    }
                }

                result[instanceId] = {
                    req_ids: reqIds,
                    notes: note,
                    bottles_purchased: stockBottles
                };
            });
            $.ajax({
                url: "{% url 'mfq:submit-purchase-orders' %}",
                method: 'POST',
                data: {
                    csrfmiddlewaretoken: '{{csrf_token}}',
                    data: JSON.stringify(result)
                },
                success: function(response) {
                    location.reload();
                },
                error: function(xhr, status, error) {
                    console.log(error)
                }
            });
        });

        $('.purchase_order_checkbox').on('change', function() {
            let anyChecked = $('.purchase_order_checkbox:checked').length > 0;
            if (anyChecked) {
                $('#btn-purchase-selected').css('visibility', 'visible');
            } else {
                $('#btn-purchase-selected').css('visibility', 'hidden');
            }
        })

        $("#check-all").click(function () {
            $(".purchase_order_checkbox").prop('checked', $(this).prop('checked'));
            if ($(this).prop('checked')) {
                $('#btn-purchase-selected').css('visibility', 'visible');
            } else {
                $('#btn-purchase-selected').css('visibility', 'hidden');
            }
        });
    });
</script>

<ul class="pager" style="margin-top: 2px; margin-bottom: 2px;">
    <button id="btn-purchase-selected" name="btn-purchase-selected" class="btn" style="margin-right: 2rem; float: left; visibility: hidden;">Mark Selected item(s) as Purchased.</button>
</ul>

<table id="purchase_order_table" class="table table-bordered">
    <thead style="position: sticky; top: 0;">
        <tr id="purchase_order_header" class="dosis-report-header">
            <th>{% if user_can_manage %}<input type="checkbox" name="check-all" id="check-all">{% endif %}</th>
            {% include 'report-table-header.html' %}
        </tr>
    </thead>
    <tbody>
    {% for instance, group_info in grouped_orders.items %}
        <tr class="group-header" style="background-color: {% if forloop.counter|divisibleby:2 %}white{% else %}rgb(249, 249, 249){% endif %};;">
            <td>
                {% if user_can_manage %}
                <input class="purchase_order_checkbox" type="checkbox" value="{{instance}}" data-stock-bottles="{{ group_info.total_bottles }}"/>
                {% endif %}
                <button class="btn btn-small btn-link show_button" type="button" style="display: inline-block;"><i class="icon-plus"></i></button>
                <button class="btn btn-small btn-link hide_button" type="button"  style="display: none;"><i class="icon-minus"></i></button>
            </td>
            <td colspan="1"><a href="{% url 'site:search-main' %}?value={{group_info.orders.0.non_dash_drug_number}}" target="_blank">{{ group_info.orders.0.drug_number }}</a></td>
            <td colspan="2">{{ group_info.orders.0.drug_name }}</td>
            <td colspan="1" style="text-align: right;">{{ group_info.total_pills|intcomma }}</td>
            <td colspan="1" style="text-align: right;">{{ group_info.pills_per_bottle }}</td>
            <td colspan="1" style="text-align: right;">{{ group_info.total_bottles }}</td>
            <td colspan="1">{% if user_can_manage %}<textarea rows="2" style="width:90%; resize: none;">{% endif %}</textarea></td>
        </tr>
        {% for order in group_info.orders %}
            <tr style="display: none; background-color: {% if forloop.parentloop.counter|divisibleby:2 %}rgb(249, 249, 249){% else %}white{% endif %};">
                <td class="req-id-cell" data-req_id="{{order.req_id}}" style="padding-bottom: 2px;">Request # <a href="{% url 'site:search-ord-req-ppk-detail' order.req_id %}" target="_blank">{{order.req_id}}</a></td>
                <td style="padding-bottom: 2px;">Recieved: {{order.receive_dts|date:"m/d/Y h:i:s A"}}</td>
                <td style="padding-bottom: 2px;">{{order.num_cards}} Cards</td>
                <td style="padding-bottom: 2px;">{{order.dosis_per_pkg}} Pills Per Card</td>
                <td style="padding-bottom: 2px;">{{order.number_of_pills}} Total Pills Needed</td>
                <td style="padding-bottom: 2px;"></td>
                <td style="padding-bottom: 2px;"></td>
                <td style="padding-bottom: 2px;"></td>
            </tr>
        {% endfor %}
    {% endfor %}
    </tbody>
</table>