{% 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 %}
    {{ block.super }}
    <script>
        $(document).ready(function () {
            {% if transfer_items %}
            $('#scanned-tbl').DataTable({
                order: [[5, 'desc']],
                pageLength: 25,
            });
            {% endif %}
        });
    </script>
{% endblock %}

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

            <div style="padding:10px;">
                <a href="{% url "edc_pharmacy:home_url" %}">Edc Pharmacy</a> &rsaquo;
                <a href="{% url "edc_pharmacy:stock_transfer_home_url" %}">Transfer stock to site</a> &rsaquo;
                {{ stock_transfer.transfer_identifier }}
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <strong>Scan items to transfer</strong>
                    &mdash;
                    {{ stock_transfer.from_location.display_name }}
                    &nbsp;&rsaquo;&rsaquo;&nbsp;
                    {{ stock_transfer.to_location.display_name }}
                    <a href="{% url "edc_pharmacy:stock_transfer_edit_url" stock_transfer=stock_transfer.pk %}"
                       class="btn btn-default btn-xs pull-right"
                       title="Edit transfer header">
                        <i class="fa fa-pencil"></i> Edit header
                    </a>
                </div>
                <div class="panel-body">

                    {# ── Progress ─────────────────────────────────── #}
                    <p class="text-muted small" style="margin-bottom:10px;">
                        Transfer <strong>{{ stock_transfer.transfer_identifier }}</strong>:
                        <strong>{{ transferred_count }}</strong> of
                        <strong>{{ stock_transfer.item_count }}</strong> scanned
                        {% if remaining_count > 0 %}
                            &mdash; <strong>{{ remaining_count }}</strong> remaining
                        {% else %}
                            &mdash; <span class="label label-success">Complete</span>
                        {% endif %}
                    </p>

                    {# ── Scan input (disabled when complete) ──────── #}
                    <div class="input-group" style="max-width:360px; margin-bottom:10px;">
                        <input type="text" id="scan-input"
                               class="form-control"
                               placeholder="Scan stock code"
                               autocomplete="off" autofocus
                               pattern="[A-Z0-9]+"
                               {% if remaining_count == 0 %}disabled{% endif %}
                               onkeydown="if(event.key==='Enter'){event.preventDefault();addCode();}">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" onclick="addCode()"
                                    {% if remaining_count == 0 %}disabled{% endif %}>Add</button>
                        </span>
                    </div>

                    {# ── Pending codes list ────────────────────────── #}
                    <div id="code-list-container" style="margin-bottom:12px; display:none;">
                        <p class="text-muted small">
                            <span id="code-counter" class="badge">0</span>
                            code(s) pending — will be transferred on submit
                        </p>
                        <ul id="code-list" class="list-unstyled" style="column-count:3; margin-bottom:6px;"></ul>
                    </div>

                    {# ── Submit form ───────────────────────────────── #}
                    <form id="transfer-form" method="post" action="">
                        {% csrf_token %}
                        <div id="hidden-codes"></div>
                        <button type="submit" id="submit-btn" class="btn btn-primary" disabled>
                            Transfer <span id="submit-counter">0</span> item(s)
                        </button>
                        <a href="{% url "edc_pharmacy:stock_transfer_home_url" %}"
                           class="btn btn-default" style="margin-left:8px;">
                            Done
                        </a>
                    </form>

                </div>
            </div>

            {# ── Scanned items panel ───────────────────────────────── #}
            {% if transfer_items %}
            <div class="panel panel-default" style="margin-top:16px;">
                <div class="panel-heading">
                    <strong>Scanned items</strong>
                    <span class="badge" style="margin-left:6px;">{{ transferred_count }}</span>
                </div>
                <div class="panel-body" style="padding:0;">
                    <table id="scanned-tbl" class="table table-condensed table-hover" style="margin:0;">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Code</th>
                                <th>Subject</th>
                                <th>To</th>
                                <th>Transfer status</th>
                                <th>Dispensed</th>
                                <th>Scanned by</th>
                                <th>Scanned</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in transfer_items %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td style="font-family:monospace;">{{ item.code }}</td>
                                <td>{{ item.subject_identifier|default:"—" }}</td>
                                <td>{{ item.stock_transfer.to_location.display_name }}</td>
                                <td>{% if item.stock.location !=  item.stock_transfer.to_location%}in-transit{% else %}Received{% endif %}</td>
                                <td>{% if item.stock.dispensed %}Dispensed{% else %}Not-disp{% endif %}</td>
                                <td>{{ item.user_created }}</td>
                                <td style="white-space:nowrap;">{{ item.transfer_item_datetime|date:"d-M-Y H:i" }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endif %}

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

    <script>
    (function () {
        var codes = [];

        window.addCode = function () {
            var inp = document.getElementById('scan-input');
            var raw = inp.value.trim().toUpperCase();
            inp.value = '';
            inp.focus();
            if (!raw) return;
            if (codes.indexOf(raw) !== -1) {
                alert('Code ' + raw + ' already in list.');
                return;
            }
            codes.push(raw);
            render();
        };

        window.removeCode = function (code) {
            codes = codes.filter(function (c) { return c !== code; });
            render();
        };

        function render() {
            var list = document.getElementById('code-list');
            var hidden = document.getElementById('hidden-codes');
            var counter = document.getElementById('code-counter');
            var submitCounter = document.getElementById('submit-counter');
            var submitBtn = document.getElementById('submit-btn');
            var container = document.getElementById('code-list-container');

            list.innerHTML = '';
            hidden.innerHTML = '';

            codes.forEach(function (c) {
                var li = document.createElement('li');
                li.innerHTML = '<span style="background:#e8e8e8;color:#333;padding:1px 5px;border-radius:3px;font-family:monospace;">' + c + '</span> '
                    + '<a href="#" onclick="removeCode(\'' + c + '\'); return false;"'
                    + ' style="color:#c00; font-size:0.85em;">&times;</a>';
                list.appendChild(li);

                var inp = document.createElement('input');
                inp.type = 'hidden';
                inp.name = 'codes';
                inp.value = c;
                hidden.appendChild(inp);
            });

            var n = codes.length;
            counter.textContent = n;
            submitCounter.textContent = n;
            submitBtn.disabled = (n === 0);
            container.style.display = (n > 0) ? 'block' : 'none';
        }
    })();
    </script>
{% endblock main %}