{% extends "layouts/base.twig" %}

{% block title %}{{ translations.materials }}{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.stocktaking }}</h3>
        <p class="text-subtitle text-muted">{{ translations.stocktaking_subtitle }}</p>
    </div>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex flex-wrap align-items-center gap-2 justify-content-between">
                    <div>
                        <h4 class="card-title mb-0">{{ translations.manual_stocktaking }}</h4>
                        <p class="text-subtitle text-muted mb-0">{{ translations.manual_stocktaking_subtitle }}</p>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-secondary fs-6" id="id_badge_modified">
                            <i class="bi bi-pencil-square"></i> <span id="id_modified_count">0</span> {{ translations.entries }}
                        </span>
                    </div>
                </div>

                <div class="card-body">

                    {# ── Pasek narzędzi ── #}
                    <div class="row g-2 mb-3 align-items-end">

                        {# Wybór kategorii #}
                        <div class="col-12 col-md-4">
                            <label class="form-label fw-semibold" for="id_select_category">
                                <i class="bi bi-tag"></i> {{ translations.category }}
                            </label>
                            <select class="form-select" id="id_select_category" onchange="onCategoryChange(this.value)">
                                <option value="-1">{{ translations.choose_category }}</option>
                                <option value="__ALL__">{{ translations.all_materials }}</option>
                                {% for category in categories %}
                                    <option value="{{ category.id }}">{{ category.name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        {# Wyszukiwarka #}
                        <div class="col-12 col-md-4">
                            <label class="form-label fw-semibold" for="id_search_input">
                                <i class="bi bi-search"></i> {{ translations.summary_search }}
                            </label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-search"></i></span>
                                <input type="search" class="form-control" id="id_search_input"
                                       placeholder="{{ translations.search_placeholder }}"
                                       oninput="onSearchInput(this.value)" autocomplete="off">
                                <button class="btn btn-outline-secondary" type="button" onclick="clearSearch()"
                                        title="{{ translations.clear }}">
                                    <i class="bi bi-x-lg"></i>
                                </button>
                            </div>
                        </div>

                        {# Nawigacja między kategoriami #}
                        <div class="col-12 col-md-4 d-flex gap-2 justify-content-md-end">
                            <button class="btn btn-outline-secondary" onclick="prevCategory()"
                                    title="{{ translations.prev_category }}">
                                <i class="bi bi-chevron-left"></i> {{ translations.prev_category }}
                            </button>
                            <button class="btn btn-outline-secondary" onclick="nextCategory()"
                                    title="{{ translations.next_category }}">
                                {{ translations.next_category }} <i class="bi bi-chevron-right"></i>
                            </button>
                        </div>
                    </div>

                    {# Pasek postępu #}
                    <div id="id_progress_wrap" class="mb-3" style="display:none;">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <small class="text-muted fw-semibold" id="id_progress_label"></small>
                            <small class="text-muted" id="id_progress_pct">0%</small>
                        </div>
                        <div class="progress" style="height:8px;">
                            <div class="progress-bar bg-success" id="id_progress_bar" style="width:0%" role="progressbar"></div>
                        </div>
                    </div>

                    {# Legenda #}
                    <div class="d-flex flex-wrap gap-3 mb-3 align-items-center">
                        <span class="d-flex align-items-center gap-1">
                            <span style="display:inline-block;width:14px;height:14px;background:#198754;border-radius:3px;flex-shrink:0;"></span>
                            <small class="text-muted">{{ translations.in_warehouse_source }}</small>
                        </span>
                        <span class="d-flex align-items-center gap-1">
                            <span style="display:inline-block;width:14px;height:14px;background:#ffc107;border-radius:3px;flex-shrink:0;"></span>
                            <small class="text-muted">{{ translations.manually_added }}</small>
                        </span>
                        <span class="d-flex align-items-center gap-1">
                            <span style="display:inline-block;width:14px;height:14px;background:rgba(13,202,240,.35);border-radius:3px;flex-shrink:0;border:1px solid #0dcaf0;"></span>
                            <small class="text-muted">{{ translations.modified_label }}</small>
                        </span>
                    </div>

                    {# Tabela #}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0" id="id_product_from_stock_table">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:44%;cursor:pointer;" onclick="sortBy('name')" class="user-select-none">
                                        {{ translations.name }}
                                        <span id="sort_icon_name" class="text-muted ms-1">⇅</span>
                                    </th>
                                    <th style="width:10%;" class="text-center text-nowrap">{{ translations.status }}</th>
                                    <th style="width:12%;" class="text-center text-nowrap">
                                        <span title="{{ translations.column_in_system }}">{{ translations.column_in_system }}</span>
                                    </th>
                                    <th style="width:34%;cursor:pointer;" onclick="sortBy('remaining_qty')" class="text-center text-nowrap user-select-none">
                                        {{ translations.remaining_qty }} <small class="text-muted d-block">(ml / g / szt)</small>
                                        <span id="sort_icon_remaining_qty" class="text-muted ms-1">⇅</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="id_table_products_body" class="text-sm">
                                <tr id="id_empty_row">
                                    <td colspan="4" class="text-center text-muted py-4">
                                        <i class="bi bi-arrow-up-circle" style="font-size:2rem;display:block;margin-bottom:.5rem;"></i>
                                        {{ translations.select_category_prompt }}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    {# Brak wyników wyszukiwania #}
                    <div id="id_no_results" class="text-center text-muted py-3" style="display:none;">
                        <i class="bi bi-search" style="font-size:1.5rem;display:block;margin-bottom:.5rem;"></i>
                        {{ translations.no_search_results }}
                    </div>

                    {# Przyciski akcji #}
                    <div class="row mt-4 g-2 align-items-center">
                        <div class="col-12 col-md-auto">
                            <button class="btn btn-primary w-100" onclick="openSummary()">
                                <i class="bi bi-list-check"></i> {{ translations.stocktaking_summary_and_accept }}
                            </button>
                        </div>
                        <div class="col-12 col-md-auto">
                            <button class="btn btn-outline-warning w-100" onclick="resetCurrentCategory()">
                                <i class="bi bi-eraser"></i> {{ translations.reset_category }}
                            </button>
                        </div>
                        <div class="col-12 col-md-auto ms-md-auto">
                            <small class="text-muted" id="id_rows_info"></small>
                        </div>
                    </div>

                </div>{# /card-body #}
            </div>
        </div>
    </div>

    {# ── Modal: Podsumowanie inwentaryzacji ── #}
    <div class="modal fade" id="summaryModal" tabindex="-1" aria-labelledby="summaryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="summaryModalLabel">
                        <i class="bi bi-list-check me-2"></i>{{ translations.stocktaking_summary }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-0">

                    {# Alert o zerach #}
                    <div class="alert alert-warning rounded-0 mb-0 d-flex gap-2 align-items-start border-0 border-bottom">
                        <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
                        <div>
                            <strong>{{ translations.warning }}:</strong> {{ translations.warning_zero_qty }}
                            <span id="id_summary_zero_info" class="ms-1"></span>
                        </div>
                    </div>

                    {# Pasek filtrowania #}
                    <div class="p-3 border-bottom bg-light d-flex flex-wrap gap-2 align-items-center">
                        <div class="input-group" style="max-width:320px;">
                            <span class="input-group-text"><i class="bi bi-search"></i></span>
                            <input type="search" class="form-control" id="id_summary_search"
                                   placeholder="{{ translations.search_summary_placeholder }}"
                                   oninput="filterSummary(this.value)">
                        </div>
                        <div class="d-flex gap-2 ms-auto align-items-center flex-wrap">
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" id="id_summary_only_filled"
                                       onchange="filterSummary(document.getElementById('id_summary_search').value)">
                                <label class="form-check-label" for="id_summary_only_filled">
                                    <small>{{ translations.filter_only_filled }}</small>
                                </label>
                            </div>
                            <span class="badge bg-secondary" id="id_summary_count">0 {{ translations.total_items }}</span>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle mb-0">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th style="width:5%;" class="text-center">#</th>
                                    <th style="width:38%;">{{ translations.name }}</th>
                                    <th style="width:22%;">{{ translations.category }}</th>
                                    <th style="width:10%;" class="text-center">{{ translations.status }}</th>
                                    <th style="width:12%;" class="text-center" title="{{ translations.column_in_system }}">{{ translations.column_in_system }}</th>
                                    <th style="width:13%;" class="text-center">{{ translations.quantity }}</th>
                                </tr>
                            </thead>
                            <tbody id="id_summary_tbody"></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <small class="text-muted" id="id_summary_stats"></small>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ translations.close }}</button>
                        <button type="button" class="btn btn-success" id="id_saveAndGenPDF" onclick="saveAndGenPDF()">
                            <i class="bi bi-check2-circle"></i> {{ translations.accept_stocktaking }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <style>
        /* ── Qty controls ── */
        .qty-group { display:flex; align-items:center; gap:2px; justify-content:center; }
        .qty-group .btn-qty {
            min-width:38px; min-height:38px; font-size:1.15rem; line-height:1;
            padding:4px 10px; border-radius:6px; border:1px solid #dee2e6;
            background:#f8f9fa; cursor:pointer; transition:background .12s; user-select:none;
        }
        .qty-group .btn-qty:hover  { background:#e2e6ea; }
        .qty-group .btn-qty:active { background:#ced4da; }
        .qty-group .inp-qty {
            width:72px; min-height:38px; text-align:center; font-size:.85rem;
            border:1px solid #dee2e6; border-radius:6px; padding:4px;
        }
        .qty-group .unit-badge { font-size:.7rem; color:#6c757d; min-width:28px; text-align:left; padding:0 2px; }

        /* ── Pack picker ── */
        .pack-btns { display:flex; flex-wrap:wrap; gap:3px; justify-content:center; margin-top:4px; }
        .pack-btns .btn-pack {
            font-size:.72rem; padding:3px 7px; border-radius:4px;
            border:1px solid #0d6efd; background:#e7f1ff; color:#0d6efd;
            cursor:pointer; white-space:nowrap; transition:background .1s; user-select:none;
        }
        .pack-btns .btn-pack:hover  { background:#0d6efd; color:#fff; }
        .pack-btns .btn-pack:active { background:#0a58ca; color:#fff; }

        /* ── Row states ── */
        tr.row-inventory { border-left:4px solid #198754; }
        tr.row-manual    { border-left:4px solid #ffc107; }
        tr.row-modified  { background:rgba(13,202,240,.12) !important; }

        /* ── Search highlight ── */
        mark.hl { background:#fff3cd; border-radius:2px; padding:0 1px; font-style:normal; }

        /* ── Sortable headers ── */
        thead th[onclick]:hover { background:#e9ecef; }

        /* ── Mobile ── */
        @media (max-width:576px) {
            .qty-group .inp-qty  { width:58px; font-size:.78rem; }
            .qty-group .btn-qty  { min-width:34px; padding:4px 7px; }
            .pack-btns .btn-pack { font-size:.65rem; padding:2px 5px; }
        }
    </style>

    {# Przekazanie tłumaczeń do JS #}
    <script>
        const T = {
            selectCategoryPrompt:             {{ translations.select_category_prompt|json_encode|raw }},
            noMaterialsInCategory:            {{ translations.no_materials_in_category|json_encode|raw }},
            noSearchResults:                  {{ translations.no_search_results|json_encode|raw }},
            remainingMaterialsOutsideWarehouse: {{ translations.remaining_materials_outside_warehouse|json_encode|raw }},
            resetCategorySelectFirst:         {{ translations.reset_category_select_first|json_encode|raw }},
            resetCategoryConfirm:             {{ translations.reset_category_confirm|json_encode|raw }},
            savedSuccess:                     {{ translations.saved_success|json_encode|raw }},
            connectionErrorServer:            {{ translations.connection_error_server|json_encode|raw }},
            acceptStocktaking:                {{ translations.accept_stocktaking|json_encode|raw }},
            allPositionsFilled:               {{ translations.all_positions_filled|json_encode|raw }},
            zerosCount:                       {{ translations.zeros_count|json_encode|raw }},
            filledOf:                         {{ translations.summary_filled_of|json_encode|raw }},
            ofLabel:                          {{ translations.summary_of_label|json_encode|raw }},
            fromWarehouse:                    {{ translations.positions_from_warehouse|json_encode|raw }},
            totalItems:                       {{ translations.total_items|json_encode|raw }},
            filledLabel:                      {{ translations.entries|json_encode|raw }},
            uzupelniono:                      {{ translations.entries|json_encode|raw }},
            pozycji:                          {{ translations.total_items|json_encode|raw }},
        };

        /* ──────────────────────────────────────────────────
           1. DANE Z BACKENDU
        ────────────────────────────────────────────────── */
        const materialsInInventory = [
            {% for category in materials_in_inventory %}
            {
                id_category: {{ category.id_category }},
                category_name: {{ category.category_name|json_encode|raw }},
                materials: [
                    {% for m in category.materials %}
                    {
                        id_material: {{ m.getIdMaterial() }},
                        name: {{ m.getMaterialName()|json_encode|raw }},
                        id_category: {{ m.getIdCategory() }},
                        category_name: {{ m.getCategoryName()|json_encode|raw }},
                        remaining_qty: 0,
                        current_qty: {{ m.getCurrentQuantity() is not null ? m.getCurrentQuantity() : 'null' }},
                        unit: {{ m.getUnitName() is not null ? m.getUnitName()|json_encode|raw : '""' }},
                        _source: 'inventory'
                    }{% if not loop.last %},{% endif %}
                    {% endfor %}
                ]
            }{% if not loop.last %},{% endif %}
            {% endfor %}
        ];

        const allMaterials = [
            {% for m in materials %}
            {
                id_material: {{ m.getId() }},
                name: {{ m.getName()|json_encode|raw }},
                id_category: {{ m.getIdCategory() }},
                category_name: {{ m.getCategoryName()|json_encode|raw }},
                unit: {{ m.getUnitName()|json_encode|raw }},
                remaining_qty: 0,
                _source: 'manual'
            }{% if not loop.last %},{% endif %}
            {% endfor %}
        ];

        /* ── 1b. OPAKOWANIA ── */
        const packOptionsRaw = [
            {% for p in pack_options %}
            { material_id: {{ p.getMaterialId() }}, package_size: {{ p.getPackageSize() }} }{% if not loop.last %},{% endif %}
            {% endfor %}
        ];
        /** @type {Map<number, number[]>} */
        const packIndex = new Map();
        packOptionsRaw.forEach(p => {
            if (!packIndex.has(p.material_id)) packIndex.set(p.material_id, []);
            packIndex.get(p.material_id).push(p.package_size);
        });
        packIndex.forEach(sizes => sizes.sort((a, b) => a - b));

        /* ──────────────────────────────────────────────────
           2. STAN APLIKACJI
        ────────────────────────────────────────────────── */
        const invIndex           = new Map();  // id_category -> catData
        const origValues         = new Map();  // id_material -> { remaining_qty }
        const inventoryMaterialIds = new Set();
        let modifiedSet    = new Set();
        let currentSort    = { field: null, dir: 1 };
        let currentSearch  = '';
        let currentCategoryId = -1;

        materialsInInventory.forEach(c => {
            invIndex.set(c.id_category, c);
            c.materials.forEach(m => {
                inventoryMaterialIds.add(m.id_material);
                origValues.set(m.id_material, { remaining_qty: m.remaining_qty });
            });
        });

        function buildAllRows() {
            const invRows   = [];
            materialsInInventory.forEach(c => c.materials.forEach(m => invRows.push(m)));
            const extraRows = allMaterials.filter(m => !inventoryMaterialIds.has(m.id_material));
            invRows.sort((a, b)   => a.name.localeCompare(b.name, 'pl', { sensitivity: 'base' }));
            extraRows.sort((a, b) => a.name.localeCompare(b.name, 'pl', { sensitivity: 'base' }));
            return [...invRows, ...extraRows];
        }

        const categoryOptions = () =>
            [...document.querySelectorAll('#id_select_category option')]
                .map(o => o.value).filter(v => v !== '-1');

        /* ──────────────────────────────────────────────────
           3. ZMIANA KATEGORII
        ────────────────────────────────────────────────── */
        function onCategoryChange(val) {
            currentCategoryId = val === '__ALL__' ? '__ALL__' : parseInt(val);
            document.getElementById('id_select_category').value = val;
            currentSearch = '';
            document.getElementById('id_search_input').value = '';
            currentSort = { field: null, dir: 1 };
            resetSortIcons();
            render();
        }

        function prevCategory() {
            const cats = categoryOptions();
            if (!cats.length) return;
            const idx = cats.indexOf(String(currentCategoryId));
            onCategoryChange(cats[idx <= 0 ? cats.length - 1 : idx - 1]);
        }

        function nextCategory() {
            const cats = categoryOptions();
            if (!cats.length) return;
            const idx = cats.indexOf(String(currentCategoryId));
            onCategoryChange(cats[(idx + 1) % cats.length]);
        }

        /* ──────────────────────────────────────────────────
           4. WYSZUKIWARKA
        ────────────────────────────────────────────────── */
        function onSearchInput(val) { currentSearch = val.trim().toLowerCase(); render(); }
        function clearSearch() {
            currentSearch = '';
            document.getElementById('id_search_input').value = '';
            render();
        }

        /* ──────────────────────────────────────────────────
           5. SORTOWANIE
        ────────────────────────────────────────────────── */
        function sortBy(field) {
            currentSort.dir = currentSort.field === field ? currentSort.dir * -1 : 1;
            currentSort.field = field;
            resetSortIcons();
            const icon = document.getElementById('sort_icon_' + field);
            if (icon) icon.textContent = currentSort.dir === 1 ? ' ↑' : ' ↓';
            render();
        }

        function resetSortIcons() {
            ['name', 'remaining_qty'].forEach(f => {
                const el = document.getElementById('sort_icon_' + f);
                if (el) el.textContent = ' ⇅';
            });
        }

        /* ──────────────────────────────────────────────────
           6. GŁÓWNY RENDER
        ────────────────────────────────────────────────── */
        function render() {
            const tbody     = document.getElementById('id_table_products_body');
            const noResults = document.getElementById('id_no_results');

            if (currentCategoryId === -1) {
                tbody.innerHTML = `<tr><td colspan="4" class="text-center text-muted py-4">
                    <i class="bi bi-arrow-up-circle" style="font-size:2rem;display:block;margin-bottom:.5rem;"></i>
                    ${T.selectCategoryPrompt}</td></tr>`;
                noResults.style.display = 'none';
                document.getElementById('id_progress_wrap').style.display = 'none';
                document.getElementById('id_rows_info').textContent = '';
                return;
            }

            let allCatMats, rows;
            if (currentCategoryId === '__ALL__') {
                allCatMats = buildAllRows();
                rows = [...allCatMats];
            } else {
                const catData = invIndex.get(currentCategoryId);
                allCatMats = catData ? catData.materials : [];
                rows = [...allCatMats];
            }

            const q = currentSearch;
            if (q) rows = rows.filter(m => m.name.toLowerCase().includes(q));

            if (currentSort.field) {
                const f = currentSort.field, d = currentSort.dir;
                rows.sort((a, b) => {
                    const va = f === 'name' ? a[f].toLowerCase() : (a[f] ?? 0);
                    const vb = f === 'name' ? b[f].toLowerCase() : (b[f] ?? 0);
                    return va < vb ? -d : va > vb ? d : 0;
                });
            }

            tbody.innerHTML = '';
            noResults.style.display = 'none';

            if (rows.length === 0) {
                if (q) {
                    noResults.style.display = 'block';
                } else {
                    tbody.innerHTML = `<tr><td colspan="4" class="text-center text-muted py-4">
                        <i class="bi bi-inbox" style="font-size:2rem;display:block;margin-bottom:.5rem;"></i>
                        ${T.noMaterialsInCategory}</td></tr>`;
                }
            } else {
                const frag = document.createDocumentFragment();
                if (currentCategoryId === '__ALL__' && !currentSort.field) {
                    let sepAdded = false;
                    rows.forEach(m => {
                        if (!sepAdded && m._source !== 'inventory') {
                            sepAdded = true;
                            const sep = document.createElement('tr');
                            sep.innerHTML = `<td colspan="4" class="py-1 px-2 bg-light border-top border-bottom">
                                <small class="text-muted fw-semibold">
                                    <i class="bi bi-plus-circle me-1"></i>${T.remainingMaterialsOutsideWarehouse}
                                </small></td>`;
                            frag.appendChild(sep);
                        }
                        frag.appendChild(createRow(m, q));
                    });
                } else {
                    rows.forEach(m => frag.appendChild(createRow(m, q)));
                }
                tbody.appendChild(frag);
            }

            const invMats = currentCategoryId === '__ALL__'
                ? (() => { const r = []; materialsInInventory.forEach(c => c.materials.forEach(m => r.push(m))); return r; })()
                : (invIndex.get(currentCategoryId) ? invIndex.get(currentCategoryId).materials : []);
            updateProgress(invMats);

            const totalLabel = currentCategoryId === '__ALL__'
                ? `${T.totalItems}: ${allCatMats.length} (${T.fromWarehouse} ${inventoryMaterialIds.size})`
                : `${T.totalItems}: ${allCatMats.length}`;
            document.getElementById('id_rows_info').textContent =
                q ? `${T.noSearchResults}: ${rows.length} / ${allCatMats.length}` : totalLabel;
        }

        /* ──────────────────────────────────────────────────
           7. TWORZENIE WIERSZA
        ────────────────────────────────────────────────── */
        function createRow(m, highlight) {
            const tr = document.createElement('tr');
            tr.dataset.id       = m.id_material;
            tr.dataset.category = m.id_category;
            tr.classList.add(m._source === 'inventory' ? 'row-inventory' : 'row-manual');
            if (modifiedSet.has(m.id_material)) tr.classList.add('row-modified');

            const rawName     = escapeHtml(m.name);
            const displayName = highlight
                ? rawName.replace(new RegExp(escapeRegex(highlight), 'gi'), s => `<mark class="hl">${s}</mark>`)
                : rawName;

            const statusBadge = m._source === 'inventory'
                ? `<span class="badge bg-success-subtle text-success border border-success-subtle" title="W magazynie">mag.</span>`
                : `<span class="badge bg-warning-subtle text-warning border border-warning-subtle" title="Dodany ręcznie">ręcz.</span>`;

            const sysQty = (m._source === 'inventory' && m.current_qty !== null && m.current_qty !== undefined)
                ? `<span class="text-muted" title="Ilość zarejestrowana w systemie">${m.current_qty}${m.unit ? ' ' + escapeHtml(m.unit) : ''}</span>`
                : `<span class="text-muted">—</span>`;

            const packs = packIndex.get(m.id_material) || [];
            const packBtnsHtml = packs.length
                ? `<div class="pack-btns">${packs.map(sz =>
                    `<button type="button" class="btn-pack"
                        onclick="incByPack(${m.id_material},${sz})"
                        title="Dodaj ${sz} ${escapeHtml(m.unit || 'szt')}">+${sz}</button>`
                  ).join('')}</div>`
                : '';

            tr.innerHTML = `
                <td>${displayName}</td>
                <td class="text-center">${statusBadge}</td>
                <td class="text-center">${sysQty}</td>
                <td class="text-center">
                    <div class="qty-group">
                        <button type="button" class="btn-qty" onclick="inc(${m.id_material},-1)">−</button>
                        <input type="number" min="0" inputmode="decimal" class="inp-qty"
                               data-field="remaining_qty" value="${m.remaining_qty ?? 0}"
                               onchange="syncModel(${m.id_material},this.value)">
                        <span class="unit-badge">${escapeHtml(m.unit || '')}</span>
                        <button type="button" class="btn-qty" onclick="inc(${m.id_material},1)">+</button>
                    </div>
                    ${packBtnsHtml}
                </td>`;
            return tr;
        }

        /* ──────────────────────────────────────────────────
           8. SYNCHRONIZACJA MODELU
        ────────────────────────────────────────────────── */
        function _findItem(idMaterial) {
            for (const cat of materialsInInventory) {
                const item = cat.materials.find(m => m.id_material === idMaterial);
                if (item) return item;
            }
            return allMaterials.find(m => m.id_material === idMaterial) || null;
        }

        function syncModel(idMaterial, value) {
            let val = parseFloat(value);
            if (isNaN(val) || val < 0) val = 0;

            const item = _findItem(idMaterial);
            if (!item) return;

            item.remaining_qty = val;

            const orig    = origValues.get(idMaterial);
            const changed = !orig || val !== orig.remaining_qty;
            changed ? modifiedSet.add(idMaterial) : modifiedSet.delete(idMaterial);

            updateModifiedBadge();
            updateProgressFromCurrentCategory();
            const tr = document.querySelector(`tr[data-id='${idMaterial}']`);
            if (tr) tr.classList.toggle('row-modified', modifiedSet.has(idMaterial));
        }

        function inc(idMaterial, delta) {
            const item = _findItem(idMaterial);
            if (!item) return;
            const cur = parseFloat(item.remaining_qty ?? 0) || 0;
            const next = Math.max(0, Math.round((cur + delta) * 1000) / 1000);
            item.remaining_qty = next;
            const inp = document.querySelector(`tr[data-id='${idMaterial}'] input[data-field='remaining_qty']`);
            if (inp) inp.value = next;
            syncModel(idMaterial, next);
        }

        function incByPack(idMaterial, packSize) {
            const item = _findItem(idMaterial);
            if (!item) return;
            const cur  = parseFloat(item.remaining_qty ?? 0) || 0;
            const next = Math.round((cur + packSize) * 1000) / 1000;
            item.remaining_qty = next;
            const inp = document.querySelector(`tr[data-id='${idMaterial}'] input[data-field='remaining_qty']`);
            if (inp) inp.value = next;
            syncModel(idMaterial, next);
        }

        /* ──────────────────────────────────────────────────
           9. PASEK POSTĘPU
        ────────────────────────────────────────────────── */
        function updateProgress(allMats) {
            const wrap = document.getElementById('id_progress_wrap');
            if (!allMats.length) { wrap.style.display = 'none'; return; }
            wrap.style.display = 'block';
            const filled = allMats.filter(m => m.remaining_qty > 0).length;
            const pct    = Math.round(filled / allMats.length * 100);
            document.getElementById('id_progress_label').textContent =
                `${T.filledOf} ${filled} / ${allMats.length} ${T.pozycji}`;
            document.getElementById('id_progress_pct').textContent = pct + '%';
            const bar = document.getElementById('id_progress_bar');
            bar.style.width = pct + '%';
            bar.className   = 'progress-bar ' + (pct < 33 ? 'bg-danger' : pct < 66 ? 'bg-warning' : 'bg-success');
        }

        function updateProgressFromCurrentCategory() {
            if (currentCategoryId === -1) return;
            if (currentCategoryId === '__ALL__') {
                const r = [];
                materialsInInventory.forEach(c => c.materials.forEach(m => r.push(m)));
                updateProgress(r);
            } else {
                const catData = invIndex.get(currentCategoryId);
                if (catData) updateProgress(catData.materials);
            }
        }

        /* ──────────────────────────────────────────────────
           10. LICZNIK ZMIAN
        ────────────────────────────────────────────────── */
        function updateModifiedBadge() {
            document.getElementById('id_modified_count').textContent = modifiedSet.size;
            document.getElementById('id_badge_modified').className =
                'badge fs-6 ' + (modifiedSet.size > 0 ? 'bg-warning text-dark' : 'bg-secondary');
        }

        /* ──────────────────────────────────────────────────
           11. AKCJE MASOWE
        ────────────────────────────────────────────────── */
        function resetCurrentCategory() {
            if (currentCategoryId === -1 || currentCategoryId === '__ALL__') {
                alert(T.resetCategorySelectFirst);
                return;
            }
            if (!confirm(T.resetCategoryConfirm)) return;
            const catData = invIndex.get(currentCategoryId);
            if (!catData) return;
            catData.materials.forEach(m => {
                m.remaining_qty = 0;
                const orig = origValues.get(m.id_material);
                (orig && orig.remaining_qty === 0)
                    ? modifiedSet.delete(m.id_material)
                    : modifiedSet.add(m.id_material);
            });
            updateModifiedBadge();
            render();
        }

        /* ──────────────────────────────────────────────────
           11b. PODSUMOWANIE INWENTARYZACJI
        ────────────────────────────────────────────────── */
        function buildSummaryRows() {
            const invRows   = [];
            materialsInInventory.forEach(c => c.materials.forEach(m => invRows.push(Object.assign({}, m))));
            const extraRows = allMaterials.filter(m =>
                !inventoryMaterialIds.has(m.id_material) && m.remaining_qty > 0
            );
            const all = [...invRows, ...extraRows];
            all.sort((a, b) => a.name.localeCompare(b.name, 'pl', { sensitivity: 'base' }));
            return all;
        }

        function openSummary() {
            document.getElementById('id_summary_search').value = '';
            document.getElementById('id_summary_only_filled').checked = true;
            renderSummary('', true);
            new bootstrap.Modal(document.getElementById('summaryModal')).show();
        }

        function renderSummary(q, onlyFilled) {
            const tbody = document.getElementById('id_summary_tbody');
            let rows = buildSummaryRows();

            // Aktualizuj info o zerach w alercie
            const zeroCount = rows.filter(m => m.remaining_qty === 0 || m.remaining_qty === null).length;
            const zeroInfo  = document.getElementById('id_summary_zero_info');
            if (zeroInfo) {
                zeroInfo.innerHTML = zeroCount > 0
                    ? `<span class="badge bg-warning text-dark">${zeroCount} ${T.zerosCount}</span>`
                    : `<span class="badge bg-success">${T.allPositionsFilled}</span>`;
            }

            if (onlyFilled) rows = rows.filter(m => m.remaining_qty > 0);
            if (q) rows = rows.filter(m => m.name.toLowerCase().includes(q.toLowerCase().trim()));

            tbody.innerHTML = '';
            const frag = document.createDocumentFragment();
            rows.forEach((m, idx) => {
                const tr = document.createElement('tr');
                tr.style.borderLeft = m._source === 'inventory' ? '3px solid #198754' : '3px solid #ffc107';
                if (m.remaining_qty > 0) tr.classList.add('table-info');

                const statusBadge = m._source === 'inventory'
                    ? `<span class="badge bg-success-subtle text-success border border-success-subtle">mag.</span>`
                    : `<span class="badge bg-warning-subtle text-warning border border-warning-subtle">ręcz.</span>`;

                const rawName     = escapeHtml(m.name);
                const displayName = q
                    ? rawName.replace(new RegExp(escapeRegex(q.trim()), 'gi'), s => `<mark class="hl">${s}</mark>`)
                    : rawName;

                const unit   = m.unit ? ` <small class="text-muted">${escapeHtml(m.unit)}</small>` : '';
                const rqVal  = m.remaining_qty > 0
                    ? `<strong>${m.remaining_qty}</strong>${unit}`
                    : `<span class="text-muted">—</span>`;
                const sysVal = (m._source === 'inventory' && m.current_qty !== null && m.current_qty !== undefined)
                    ? `<span class="text-muted">${m.current_qty}${m.unit ? ' ' + escapeHtml(m.unit) : ''}</span>`
                    : `<span class="text-muted">—</span>`;

                tr.innerHTML = `
                    <td class="text-center text-muted">${idx + 1}</td>
                    <td>${displayName}</td>
                    <td><small class="text-muted">${escapeHtml(m.category_name || '')}</small></td>
                    <td class="text-center">${statusBadge}</td>
                    <td class="text-center">${sysVal}</td>
                    <td class="text-center">${rqVal}</td>`;
                frag.appendChild(tr);
            });
            tbody.appendChild(frag);

            const allRows     = buildSummaryRows();
            const filledCount = allRows.filter(m => m.remaining_qty > 0).length;
            const invTotal    = allRows.filter(m => m._source === 'inventory').length;
            document.getElementById('id_summary_count').textContent = `${rows.length} ${T.totalItems}`;
            document.getElementById('id_summary_stats').textContent =
                `${T.filledOf} ${filledCount} ${T.ofLabel} ${allRows.length} | ${T.fromWarehouse} ${invTotal}`;
        }

        function filterSummary(q) {
            renderSummary(q, document.getElementById('id_summary_only_filled').checked);
        }

        /* ──────────────────────────────────────────────────
           12. ZAPIS (AJAX)
        ────────────────────────────────────────────────── */
        function saveAndGenPDF() {
            const btn = document.getElementById('id_saveAndGenPDF');
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Zapisywanie\u2026';

            const payload = [];
            materialsInInventory.forEach(c => {
                c.materials.forEach(m => {
                    payload.push({
                        id_material:                   m.id_material,
                        counted_quantity_in_base_unit: m.remaining_qty,
                        currency:                      'EUR'
                    });
                });
            });
            allMaterials.forEach(m => {
                if (!inventoryMaterialIds.has(m.id_material) && m.remaining_qty > 0) {
                    payload.push({
                        id_material:                   m.id_material,
                        counted_quantity_in_base_unit: m.remaining_qty,
                        currency:                      'EUR'
                    });
                }
            });

            api('/ajax/materials/stocktaking/accept-stocktaking/manual', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                data: payload
            })
                .then(data => {
                    if (data.success || data.code === 200) {
                        bootstrap.Modal.getInstance(document.getElementById('summaryModal'))?.hide();
                        btn.innerHTML = `<i class="bi bi-check2-circle"></i> ${T.savedSuccess}`;
                        modifiedSet.clear();
                        updateModifiedBadge();

                        try {
                            downloadPdf(
                                `/ajax/materials/stocktaking/${data.inserted_id}/document`,
                                {  },
                                `stocktaking.pdf`
                            );


                            showSnack(true);
                            setTimeout(() => {
                                location.reload();
                            }, 1000);

                        } catch (err) {
                            showSnack(false, err.message || 'Something went wrong.');
                        }

                    } else {
                        btn.disabled = false;
                        btn.innerHTML = `<i class="bi bi-check2-circle"></i> ${T.acceptStocktaking}`;
                        alert('{{ translations.error }}: ' + (data.message || '{{ translations.unknown_error }}'));
                    }
                })
                .catch(() => {
                    btn.disabled = false;
                    btn.innerHTML = `<i class="bi bi-check2-circle"></i> ${T.acceptStocktaking}`;
                    alert(T.connectionErrorServer);
                });
        }

        /* ──────────────────────────────────────────────────
           13. HELPERS
        ────────────────────────────────────────────────── */
        function escapeHtml(str) {
            return String(str).replace(/[&<>"']/g,
                s => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[s]));
        }

        function escapeRegex(str) {
            return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        }
    </script>
{% endblock %}