{% extends "pos/base.html" %}
{% load static %}

{% block title %}Bulk Create Missing Products{% endblock %}

{% block content %}
<div class="container-fluid py-4">

    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="mb-1 font-weight-bold" style="color:#25242b;">
                <i class="fas fa-box-open text-warning mr-2"></i>Bulk Create Missing Products
            </h4>
            <p class="text-muted mb-0">
                Shop: <strong>{{ shop.shop_name }}</strong> — {{ rows|length }} product(s) to review.
                Use arrow keys to move between cells.
            </p>
        </div>
    </div>

    {% if not rows %}
        <div class="alert alert-info">No unmatched products found for this batch — nothing to create.</div>
    {% else %}

    <form method="post" id="bulkCreateForm">
        {% csrf_token %}
        <input type="hidden" name="shop_id" value="{{ shop.id }}">

        <div class="card border-0 shadow-sm mb-4" style="border-radius:14px;">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered mb-0" id="productGrid" style="min-width:1100px;">
                        <thead class="thead-light">
                            <tr>
                                <th style="width:130px;">Product Code</th>
                                <th style="width:280px;">Name (max 200 chars)</th>
                                <th style="width:160px;">Company</th>
                                <th style="width:160px;">Category</th>
                                <th style="width:110px;">Purchase Price</th>
                                <th style="width:110px;">Sale Price</th>
                                <th style="width:90px;">Pcs/Pack</th>
                                <th style="width:90px;">Stock</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in rows %}
                            <tr>
                                <td>
                                    <input type="text" class="form-control form-control-sm grid-cell" name="code[]"
                                           value="{{ row.code }}" data-row="{{ forloop.counter0 }}" data-col="0" readonly>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm grid-cell" name="name[]"
                                           value="{{ row.name }}" maxlength="200" data-row="{{ forloop.counter0 }}" data-col="1">
                                </td>
                                <td>
                                    <select class="form-control form-control-sm grid-cell" name="company[]" data-row="{{ forloop.counter0 }}" data-col="2">
                                        <option value="">—</option>
                                        {% for c in companies %}
                                        <option value="{{ c.t_id }}">{{ c.name }}</option>
                                        {% endfor %}
                                    </select>
                                </td>
                                <td>
                                    <select class="form-control form-control-sm grid-cell" name="category[]" data-row="{{ forloop.counter0 }}" data-col="3">
                                        <option value="">—</option>
                                        {% for cat in categories %}
                                        <option value="{{ cat.t_id }}">{{ cat.cat_name }}</option>
                                        {% endfor %}
                                    </select>
                                </td>
                                <td>
                                    <input type="number" step="0.01" class="form-control form-control-sm grid-cell" name="purchase_price[]"
                                           value="0" data-row="{{ forloop.counter0 }}" data-col="4">
                                </td>
                                <td>
                                    <input type="number" step="0.01" class="form-control form-control-sm grid-cell" name="sale_price[]"
                                           value="0" data-row="{{ forloop.counter0 }}" data-col="5">
                                </td>
                                <td>
                                    <input type="number" step="1" class="form-control form-control-sm grid-cell" name="pieces_per_pack[]"
                                           value="1" data-row="{{ forloop.counter0 }}" data-col="6">
                                </td>
                                <td>
                                    <input type="number" step="0.01" class="form-control form-control-sm grid-cell" name="present_stock[]"
                                           value="0" data-row="{{ forloop.counter0 }}" data-col="7">
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-success btn-lg font-weight-bold px-4">
            <i class="fas fa-check-circle mr-1"></i> Create {{ rows|length }} Product(s)
        </button>
    </form>

    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var grid = document.getElementById('productGrid');
    if (!grid) return;

    var cells = Array.prototype.slice.call(grid.querySelectorAll('.grid-cell'));

    function findCell(row, col) {
        return cells.find(function (c) {
            return parseInt(c.dataset.row, 10) === row && parseInt(c.dataset.col, 10) === col;
        });
    }

    grid.addEventListener('keydown', function (e) {
        var target = e.target;
        if (!target.classList.contains('grid-cell')) return;

        var row = parseInt(target.dataset.row, 10);
        var col = parseInt(target.dataset.col, 10);
        var next = null;

        if (e.key === 'ArrowUp') { next = findCell(row - 1, col); }
        else if (e.key === 'ArrowDown') { next = findCell(row + 1, col); }
        else if (e.key === 'ArrowLeft' && target.tagName !== 'SELECT' && target.selectionStart === 0) { next = findCell(row, col - 1); }
        else if (e.key === 'ArrowRight' && target.tagName !== 'SELECT' && target.selectionEnd === target.value.length) { next = findCell(row, col + 1); }

        if (next) {
            e.preventDefault();
            next.focus();
            if (next.select) next.select();
        }
    });

    var form = document.getElementById('bulkCreateForm');
    if (form) {
        form.addEventListener('submit', function () {
            var btn = form.querySelector('button[type="submit"]');
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Creating…';
        });
    }
});
</script>
{% endblock content %}