{% 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() {
            $('#expected_items_table').DataTable({
                order: [[0, 'asc']],
                pageLength: 25,
            });
        });
    </script>
{% endblock %}

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

            <div style="padding:10px;">
                <a href="{% url "edc_pharmacy:home_url" %}">Edc Pharmacy</a> &rsaquo;
                <a href="{% url "edc_pharmacy:stock_take_home_url" %}">Stock Take</a> &rsaquo;
                Bin {{ storage_bin.bin_identifier }}
            </div>

            <div class="panel panel-default">
                <div class="panel-heading" style="display:flex;align-items:center;justify-content:space-between;">
                    <span>
                        <b>Stock Take</b> &mdash;
                        Bin <code>{{ storage_bin.bin_identifier }}</code>
                        &middot; {{ storage_bin.location.display_name|default:storage_bin.location.name }}
                        &middot; {{ storage_bin.container }}
                    </span>
                    {% if debug %}
                    <a href="{% url "edc_pharmacy:print_bin_labels_url" storage_bin=storage_bin.pk %}"
                       class="btn btn-default btn-xs">
                        <i class="fa fa-print"></i> Print labels
                    </a>
                    {% endif %}
                </div>
                <div class="panel-body">
                    <p class="text-muted small">
                        <strong>{{ expected_count }}</strong> item{{ expected_count|pluralize }} registered in this bin.
                        Scan each item present, then click <em>Submit</em>.
                    </p>

                    <form method="post" id="scan_form"
                          onsubmit="document.getElementById('submit_btn').disabled=true;">
                        {% csrf_token %}

                        {# Scan input #}
                        <div class="form-group">
                            <label>Scan stock code</label>
                            <div class="input-group" style="max-width:300px;">
                                <input type="text" id="scan_input" class="form-control input-sm"
                                       placeholder="Scan or type code" autofocus
                                       autocomplete="off" autocorrect="off"
                                       autocapitalize="characters" spellcheck="false">
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default btn-sm"
                                            onclick="addCode()">Add</button>
                                </span>
                            </div>
                        </div>

                        {# Counter and badge list #}
                        <div style="margin-bottom:4px;">
                            <span id="codes_counter" class="text-muted small">0 codes scanned</span>
                            <span id="expected_badge" class="text-muted small">
                                &nbsp;({{ expected_count }} expected)
                            </span>
                        </div>
                        <div id="codes_display" style="margin-bottom:8px; min-height:28px;">
                            <span class="text-muted small" id="no_codes_msg">No codes scanned yet.</span>
                        </div>
                        <div id="hidden_codes_container"></div>

                        <button type="submit" id="submit_btn" class="btn btn-primary">
                            Submit
                        </button>
                        <a class="btn btn-default" style="margin-left:6px;"
                           href="{% url "edc_pharmacy:stock_take_home_url" %}">Cancel</a>
                    </form>
                </div>
            </div>

            {# Expected items reference list #}
            {% if expected_items %}
            <div class="panel panel-default">
                <div class="panel-heading">Items registered in this bin</div>
                <div class="panel-body">
                    <table id="expected_items_table" class="table table-condensed" style="margin-bottom:0;">
                        <thead>
                            <tr>
                                <th>Code</th>
                                <th>Product</th>
                                <th>Container</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in expected_items %}
                            <tr id="row_{{ item.code }}">
                                <td><code>{{ item.code }}</code></td>
                                <td>{{ item.stock.product.name|default:"—" }}</td>
                                <td>{{ item.stock.container|default:"—" }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endif %}

        </div>
        <div class="col-sm-2"></div>
    </div>

    <script>
        var scannedCodes = [];

        function addCode() {
            var input = document.getElementById('scan_input');
            var code = input.value.trim().toUpperCase();
            if (!code) return;
            if (scannedCodes.indexOf(code) !== -1) {
                input.value = '';
                input.focus();
                return;
            }
            scannedCodes.push(code);
            renderCodes();
            // Highlight the row in the expected list if present
            var row = document.getElementById('row_' + code);
            if (row) row.style.background = '#dff0d8';
            input.value = '';
            input.focus();
        }

        function removeCode(code) {
            scannedCodes = scannedCodes.filter(function(c) { return c !== code; });
            renderCodes();
            var row = document.getElementById('row_' + code);
            if (row) row.style.background = '';
            document.getElementById('scan_input').focus();
        }

        function renderCodes() {
            var display = document.getElementById('codes_display');
            var container = document.getElementById('hidden_codes_container');
            var noMsg = document.getElementById('no_codes_msg');
            var counter = document.getElementById('codes_counter');
            var n = scannedCodes.length;
            counter.textContent = n + ' code' + (n === 1 ? '' : 's') + ' scanned';
            display.innerHTML = '';
            container.innerHTML = '';
            if (n === 0) {
                display.appendChild(noMsg);
                return;
            }
            scannedCodes.forEach(function(code) {
                var badge = document.createElement('span');
                badge.style.cssText = 'display:inline-block;background:#e2e3e5;border-radius:3px;' +
                    'padding:2px 6px;margin:2px;font-size:0.85em;font-family:monospace;';
                badge.innerHTML = code + ' <a href="#" style="color:#721c24;text-decoration:none;" ' +
                    'onclick="removeCode(\'' + code + '\');return false;">&times;</a>';
                display.appendChild(badge);
                var hidden = document.createElement('input');
                hidden.type = 'hidden';
                hidden.name = 'codes';
                hidden.value = code;
                container.appendChild(hidden);
            });
        }

        document.getElementById('scan_input').addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                addCode();
            }
        });
    </script>
{% endblock main %}