{% 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() {
            $('#stock_request_home_table').DataTable({
                order: [[0, 'desc']],
                pageLength: 25,
                columnDefs: [
                    { orderable: false, targets: -1 },
                ],
            });
        });
    </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;
                Stock requests
            </div>

            <div style="margin-bottom:10px;">
                <a href="{% url "edc_pharmacy:stock_request_add_url" %}"
                   class="btn btn-primary btn-sm">
                    <i class="fa fa-plus"></i> New stock request
                </a>
            </div>

            {% if rows %}
            <div class="table-responsive">
            <table id="stock_request_home_table" class="table table-condensed table-hover">
                <thead>
                    <tr>
                        <th>Request #</th>
                        <th>Date</th>
                        <th>Location</th>
                        <th>Formulation</th>
                        <th>Container</th>
                        <th style="text-align:right;">Containers/subject</th>
                        <th style="text-align:right;">Items</th>
                        <th style="text-align:right;">Allocated</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in rows %}
                    {% with sr=row.sr %}
                    <tr>
                        <td><code>{{ sr.request_identifier }}</code></td>
                        <td data-order="{{ sr.request_datetime|date:"Y-m-d" }}">
                            {{ sr.request_datetime|date:"d-M-Y" }}
                        </td>
                        <td>{{ sr.location }}</td>
                        <td>{{ sr.formulation }}</td>
                        <td>{{ sr.container }}</td>
                        <td style="text-align:right;">{{ sr.containers_per_subject }}</td>
                        <td style="text-align:right;">{{ row.total|default:"0" }}</td>
                        <td style="text-align:right;">
                            {% if row.total > 0 and row.allocated == row.total %}
                                <span class="label label-success">{{ row.allocated }}</span>
                            {% elif row.allocated > 0 %}
                                <span class="label label-warning">{{ row.allocated }}</span>
                            {% else %}
                                <span class="label label-danger">{{ row.allocated }}</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if sr.cancel %}
                                <span class="label label-danger">Cancelled</span>
                            {% elif row.total == 0 %}
                                <span class="label label-default">New</span>
                            {% elif row.allocated == row.total %}
                                <span class="label label-success">Allocated</span>
                            {% else %}
                                <span class="label label-info">Open</span>
                            {% endif %}
                        </td>
                        <td style="white-space:nowrap;">
                            <a href="{% url "edc_pharmacy:stock_request_url" stock_request=sr.pk %}"
                               class="btn btn-primary btn-xs">Manage</a>
                        </td>
                    </tr>
                    {% endwith %}
                    {% endfor %}
                </tbody>
            </table>
            </div>
            {% else %}
                <p class="text-muted">No stock requests yet. Click <b>New stock request</b> to start.</p>
            {% endif %}

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