{% extends edc_base_template %}
{% load static %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
{% endblock %}

{% block document_ready %}
    <script>
        $(document).ready(function () {
            {% if stocks %}
            $('#lot-stock-tbl').DataTable({
                order: [[6, 'desc']],
                pageLength: 50,
            });
            {% endif %}
        });
    </script>
{% endblock %}

{% block main %}
    {{ block.super }}
    <div class="container">
        <div class="col-sm-12">

            <div style="padding:10px;">
                <a href="{% url "edc_pharmacy:home_url" %}">Edc Pharmacy</a> &rsaquo;
                <a href="{% url "edc_pharmacy_admin:edc_pharmacy_lot_changelist" %}">Lots</a> &rsaquo;
                {{ lot.lot_no }}
            </div>

            {# ── Lot summary ── #}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <b>Stock from batch <code>{{ lot.lot_no }}</code></b>
                    &mdash; {{ lot.product.name|default:"—" }}
                    &nbsp;
                    <span class="label label-default">{{ lot.assignment|default:"—" }}</span>
                    &nbsp;
                    {% if unconfirmed_count == 0 and confirmed_count > 0 %}
                        <span class="label label-success">All confirmed</span>
                    {% elif confirmed_count > 0 %}
                        <span class="label label-warning">{{ confirmed_count }} confirmed, {{ unconfirmed_count }} unconfirmed</span>
                    {% else %}
                        <span class="label label-warning">{{ unconfirmed_count }} unconfirmed</span>
                    {% endif %}
                </div>
                <div class="panel-body">
                    <table class="table table-condensed" style="margin-bottom:0;">
                        <tr>
                            <th>Manufactured by</th>
                            <td>{{ lot.manufactured_by|default:"—" }}</td>
                            <th style="width:160px;">Manufactured date</th>
                            <td>{{ lot.manufactured_date|date:"d-M-Y"|default:"—" }}</td>
                        </tr>
                        <tr>
                            <th>Reference</th>
                            <td>{{ lot.reference|default:"—" }}</td>
                            <th>Comment</th>
                            <td>{{ lot.comment|default:"—" }}</td>
                        </tr>
                        <tr>
                            <th>Country of origin</th>
                            <td>{{ lot.country_of_origin|default:"—" }}</td>
                            <th>Storage conditions</th>
                            <td>{{ lot.storage_conditions|default:"—" }}</td>
                        </tr>
                        <tr>
                            <th>Processed until date</th>
                            <td>{{ lot.processed_until_date }}</td>
                            <th>Expiration date</th>
                            <td>{{ lot.expiration_date }}</td>
                        </tr>
                    </table>
                    <a href="{% url "edc_pharmacy_admin:edc_pharmacy_lot_change" lot.pk %}"
                       class="btn btn-default btn-sm" style="margin-top:6px;">
                        Edit batch (admin)
                    </a>
                </div>
            </div>

            {# ── Stock items derived from this batch ── #}
            <div class="panel panel-info">
                <div class="panel-heading">
                    <b>Stock items</b>
                    &nbsp;
                    <span class="badge">{{ stocks|length }}</span>
                </div>
                <div class="panel-body" style="padding:0;">
                    {% if stocks %}
                    <div class="table-responsive">
                    <table id="lot-stock-tbl" class="table table-condensed table-hover" style="margin:0;">
                        <thead>
                            <tr>
                                <th>Code</th>
                                <th>From stock</th>
                                <th>Container</th>
                                <th style="text-align:right;">Units / cont.</th>
                                <th>Order #</th>
                                <th>Receive #</th>
                                <th>Created</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for s in stocks %}
                            {% with ri=s.receive_item %}
                            <tr>
                                <td style="font-family:monospace;">{{ s.code|default:"—" }}</td>
                                <td>
                                    {% if s.from_stock %}
                                        <code style="font-size:0.9em;">
                                            {{ s.from_stock.code }}
                                        </code>
                                    {% else %}
                                        <span class="text-muted">—</span>
                                    {% endif %}
                                </td>
                                <td>{{ s.container|default:"—" }}</td>
                                <td style="text-align:right;">{{ s.container_unit_qty }}</td>
                                <td>
                                    {% if ri and ri.order_item.order %}
                                        <a href="{% url "edc_pharmacy:receive_order_url" order=ri.order_item.order.pk %}">
                                            <code>{{ ri.order_item.order.order_identifier }}</code>
                                        </a>
                                    {% else %}
                                        —
                                    {% endif %}
                                </td>
                                <td>
                                    {% if ri and ri.receive %}
                                        <code>{{ ri.receive.receive_identifier }}</code>
                                    {% else %}
                                        —
                                    {% endif %}
                                </td>
                                <td data-order="{{ s.stock_datetime|date:"Y-m-d H:i" }}"
                                    style="white-space:nowrap;">
                                    {{ s.stock_datetime|date:"d-M-Y H:i" }}
                                </td>
                                <td>
                                    {% if s.dispensed %}
                                        <span class="label label-info">Dispensed</span>
                                    {% elif s.in_transit %}
                                        <span class="label label-info">In transit</span>
                                    {% elif s.stored_at_location %}
                                        <span class="label label-success">At site</span>
                                    {% elif s.confirmed %}
                                        <span class="label label-success">Confirmed</span>
                                    {% else %}
                                        <span class="label label-warning">Unconfirmed</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endwith %}
                            {% endfor %}
                        </tbody>
                    </table>
                    </div>
                    {% else %}
                    <div class="panel-body">
                        <p class="text-muted">No stock items have been produced from this batch yet.</p>
                    </div>
                    {% endif %}
                </div>
            </div>

        </div>
    </div>
{% endblock main %}