{% 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">
    <link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.4/css/rowGroup.dataTables.min.css">
{% endblock %}

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

{% block document_ready %}
    <script>
        $(document).ready(function() {
            $('#discrepancy_table').DataTable({
                pageLength: 50,
                stateSave: true,
                // Always group by bin (col 0) first; user sorts apply within a bin.
                orderFixed: { pre: [[0, 'asc']] },
                order: [[1, 'asc']],
                columnDefs: [
                    { targets: 0, visible: false },                       // Bin (grouping only)
                    { targets: 5, orderable: false, searchable: false }   // Resolve (controls)
                ],
                rowGroup: {
                    dataSrc: 0,
                    startRender: function(rows, group) {
                        var node = rows.nodes()[0];
                        var $left = $('<a class="btn btn-default btn-xs"/>')
                            .attr('href', $(node).data('bin-url'))
                            .append($('<strong/>').text('Bin ' + $(node).data('bin-label')));

                        var $right = $('<span style="display:flex;align-items:center;gap:8px;"/>');
                        var takeDate = $(node).data('take-date');
                        if (takeDate) {
                            // No theme class (e.g. text-muted may force a tall
                            // line-height); style fully inline so the date can't
                            // inflate the band.
                            $right.append($('<span/>').css({
                                color: '#777', fontSize: '13px',
                                lineHeight: '1', whiteSpace: 'nowrap'
                            }).text(takeDate));
                        }
                        $right.append($('<a class="btn btn-default btn-xs"/>')
                            .attr('href', $(node).data('redo-url')).text('Redo stock take'));
                        $right.append($('<a class="btn btn-default btn-xs"/>')
                            .attr('href', $(node).data('results-url')).text('Full results'));

                        // Return bare content; RowGroup wraps it in its own cell.
                        // width:100% so space-between fills the cell.
                        return $('<div style="display:flex;align-items:center;'
                            + 'justify-content:space-between;width:100%;"/>')
                            .append($left).append($right);
                    }
                }
            });
        });
    </script>
{% endblock %}

{% block main %}
    {{ block.super }}
    {% url "edc_pharmacy:stock_take_discrepancy_report_url" as report_next %}
    <div class="container">
        <div class="col-sm-12">

            <div style="padding:10px;display:flex;align-items:center;justify-content:space-between;">
                <span>
                    <a href="{% url "edc_pharmacy:home_url" %}">Edc Pharmacy</a> &rsaquo;
                    <a href="{% url "edc_pharmacy:stock_take_home_url" %}{% if selected_site_id %}?site={{ selected_site_id }}{% endif %}">Stock Take</a> &rsaquo;
                    Discrepancy Report
                </span>
                <span style="display:flex;align-items:center;gap:8px;">
                    {% if site_choices %}
                    <form method="get" style="margin:0;">
                        <label class="text-muted small" style="margin:0 4px 0 0;">Site</label>
                        <select name="site" class="form-control input-sm" style="width:auto;display:inline-block;"
                                onchange="this.form.submit()">
                            <option value="">All sites</option>
                            {% for site in site_choices %}
                            <option value="{{ site.id }}"{% if site.id == selected_site_id %} selected{% endif %}>{{ site.display_name }}</option>
                            {% endfor %}
                        </select>
                    </form>
                    {% endif %}
                    {% if items %}
                    <a href="{% url "edc_pharmacy:print_stock_take_discrepancy_report_url" %}{% if selected_site_id %}?site={{ selected_site_id }}{% endif %}"
                       class="btn btn-default btn-sm">
                        <i class="fa fa-print"></i> Print PDF
                    </a>
                    {% endif %}
                </span>
            </div>

            {% if not items %}
            <div class="alert alert-success">
                <strong>All clear.</strong> No discrepancies found in the most recent stock take for any bin.
            </div>
            {% else %}
            <table id="discrepancy_table" class="table table-condensed" style="width:100%;">
                <thead>
                    <tr>
                        <th>Bin</th>
                        <th>Code</th>
                        <th>Subject</th>
                        <th>Product</th>
                        <th>Issue</th>
                        <th>Resolve</th>
                        <th>TXN</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in items %}
                    <tr data-bin-label="{{ item.stock_take.storage_bin.bin_identifier }}"
                        data-take-date="{{ item.stock_take.stock_take_datetime|date:'d M Y' }}"
                        data-bin-url="{% url 'edc_pharmacy_admin:edc_pharmacy_storagebinitem_changelist' %}?q={{ item.stock_take.storage_bin.id }}"
                        data-redo-url="{% url 'edc_pharmacy:stock_take_scan_url' storage_bin=item.stock_take.storage_bin.pk %}"
                        data-results-url="{% url 'edc_pharmacy:stock_take_results_url' stock_take=item.stock_take.pk %}">
                        <td>{{ item.stock_take.storage_bin.bin_identifier }}</td>
                        <td>
                            <a href="{% url "edc_pharmacy:ledger_url" %}?q={{ item.code }}">
                                <code>{{ item.code }}</code>
                            </a>
                            {% if not item.stock %}
                                <span class="text-muted small">(not in system)</span>
                            {% endif %}
                            {% include "edc_pharmacy/stock/_conflict_hint.html" with item=item %}
                            {% include "edc_pharmacy/stock/_cannot_add_hint.html" with item=item %}
                        </td>
                        <td>{{ item.subject_identifier|default:"—" }}</td>
                        <td>{{ item.stock.product.name|default:"—" }}</td>
                        <td>
                            {% if item.status == "missing" %}
                                <span class="label label-danger">Missing</span>
                            {% else %}
                                <span class="label label-danger">Unexpected</span>
                            {% endif %}
                        </td>
                        <td>{% include "edc_pharmacy/stock/_resolve_actions.html" with item=item next_url=report_next %}</td>
                        <td><code>{{ item.txn_abbr }}</code></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% endif %}

            <p style="margin-top:10px;">
                <a href="{% url "edc_pharmacy:stock_take_home_url" %}{% if selected_site_id %}?site={{ selected_site_id }}{% endif %}" class="btn btn-default btn-sm">All bins</a>
            </p>

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