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

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

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

{% block content %}

    <div class="row">
        <div class="col-12">
            <div class="card" id="scan_elements_card">
                <div class="card-header">
                    <h4 class="card-title">{{ translations.editing_stocktaking_by_scanner }}</h4>
                    <p class="text-subtitle text-muted">{{ translations.editing_stocktaking_by_scanner_subtitle }}</p>
                </div>
                <div class="card-content">
                    <div class="card-body px-3 py-4-5">
                        <div class="row mt-4 mb-4">
                            <div class="col-4">
                                <div class="row">
                                    <input type="hidden" id="id_stocktaking_id" value="{{ stocktaking.id }}">

                                    <div class="col-12">
                                        <b>{{ translations.date }}:</b> {{ stocktaking.createdAt|date("Y-m-d H:i") }}
                                    </div>
                                    <div class="col-12">
                                        <b>{{ translations.employee }}:</b> {{ stocktaking.employee.displayName }}
                                    </div>
                                    <div class="col-12">
                                        <b>{{ translations.estimated_value }}:</b> {{ stocktaking.estimatedValueNet|number_format(2, '.', ' ') }} ( {{ stocktaking.estimatedValueGross|number_format(2, '.', ' ') }})
                                    </div>
                                </div>
                            </div>
                            <div class="col-2 d-flex text-center">
                                <button id="start-insert-id" type="button" class="btn btn-lg btn-primary me-1 mb-1"
                                        onclick="startInsertProduct()">{{ translations.start_insert }}</button>
                            </div>
                            <div class="col-2 d-flex text-center">
                                <button id="stop-insert-id" type="button" class="btn btn-lg btn-danger me-1 mb-1"
                                        onclick="stopInsertProduct()"
                                        style="visibility: hidden">{{ translations.stop_insert }}</button>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-4"></div>
                            <div class="col-4 mt-4">
                                <div class="form-group">
                                    <form id="add-prod-form">
                                        <label for="product-num">{{ translations.label_code_product }}</label>
                                        <input type="text" id="product-num" class="form-control"
                                               name="barcode" autocomplete="off"
                                               placeholder="{{ translations.label_code_product }}" disabled required>
                                        <button id="add-prod" type="submit" class="btn btn-info btn-lg mt-4" disabled>
                                            {{ translations.insert }}
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <table id="scanned-products-table" class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th style="width: 25%">{{ translations.label_code_product }}</th>
                                        <th style="width: 25%">{{ translations.name }}</th>
                                        <th style="width: 15%">{{ translations.package_size }}</th>
                                        <th style="width: 15%">{{ translations.pack_quantity }}</th>
                                        <th style="width: 15%">{{ translations.total_quantity }}</th>
                                        <th style="width: 5%"></th>
                                    </tr>
                                    </thead>
                                    <tbody id="id_scanned_tbody">
                                    {% for carton_code in stocktaking.getItems %}
                                        <tr>
                                            <td>{{ carton_code.rawCode }}</td>
                                            <td>{{ carton_code.materialName }}</td>
                                            <td>{{ carton_code.packageSizeInBaseUnit }}</td>
                                            <td>{{ carton_code.packQuantity }}</td>
                                            <td>-</td>
                                            <td>
                                                <button class="btn btn-danger btn-sm" type="button" onclick="{
                                            this.parentNode.parentNode.remove();
                                            }">X
                                                </button>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4 text-center">
                                <div class="spinner-border" style="width: 3rem; height: 3rem; visibility: hidden"
                                     role="status" id="id_loading_codes">
                                    <span class="visually-hidden">{{ translations.loading }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-4">
                                <button class="btn btn-success" type="button" id="id_verify_codes_btn"
                                        onclick="verifyCodes()">{{ translations.verify_codes }}</button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <div class="card" id="display_elements_card" style="display: none">
                <div class="card-header">
                    <h4 class="card-title">{{ translations.aggregated_elements }}</h4>
                </div>
                <div class="card-content">
                    <div class="card-body px-3 py-4-5">
                        <div class="row">
                            <div class="col-12">
                                <button class="btn btn-secondary float-end" type="button"
                                        onclick="location.reload()">{{ translations.reset_stocktaking }}</button>
                            </div>
                            <div class="col-12">
                                <table id="aggregated-products-table" class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th style="width: 25%">{{ translations.label_code_product }}</th>
                                        <th style="width: 25%">{{ translations.name }}</th>
                                        <th style="width: 15%">{{ translations.package_size }}</th>
                                        <th style="width: 15%">{{ translations.pack_quantity }}</th>
                                        <th style="width: 15%">{{ translations.total_quantity }}</th>
                                    </tr>
                                    </thead>
                                    <tbody id="id_aggregated_tbody"></tbody>
                                </table>
                            </div>
                            <div class="col-12 mt-5">
                                <button class="btn btn-link" type="button"
                                        onclick="toggleTable()">{{ translations.show_hide_details }}</button>
                                <div id="hidden-table" style="display: none;">
                                    <table class="table text-sm">
                                        <thead>
                                        <tr>
                                            <th style="width: 15%">{{ translations.label_code_product }}</th>
                                            <th style="width: 15%">{{ translations.id_package }}</th>
                                            <th style="width: 15%">{{ translations.id_material }}</th>
                                            <th style="width: 15%">{{ translations.name }}</th>
                                            <th style="width: 15%">{{ translations.package_size }}</th>
                                            <th style="width: 10%">{{ translations.pack_quantity }}</th>
                                            <th style="width: 15%">{{ translations.total_quantity }}</th>
                                        </tr>
                                        </thead>
                                        <tbody id="id_full_data_tbody"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4"></div>
                            <div class="col-4 text-center">
                                <div class="spinner-border" style="width: 3rem; height: 3rem; visibility: hidden"
                                     role="status" id="id_loading_codes">
                                    <span class="visually-hidden">{{ translations.loading }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox"
                                           id="override_inventory" name="override_inventory" value="1" checked>
                                    <label class="form-check-label"
                                           for="override_inventory">{{ translations.override_inventory }}</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <button class="btn btn-warning" type="button" id="id_edit_stocktaking_btn"
                                        onclick="editStocktaking()">{{ translations.accept_stocktaking }}</button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block scripts %}
    <script>
        const tableBody = document.querySelector('#scanned-products-table tbody');

        // pobieramy elementy
        const startBtn = document.getElementById('start-insert-id');
        const stopBtn = document.getElementById('stop-insert-id');
        const inputBarcode = document.getElementById('product-num');
        const formAdd = document.getElementById('add-prod-form');

        function startInsertProduct() {
            inputBarcode.disabled = false;
            document.getElementById('add-prod').disabled = false;
            startBtn.style.visibility = 'hidden';
            stopBtn.style.visibility = 'visible';
            inputBarcode.focus();
        }

        function stopInsertProduct() {
            inputBarcode.disabled = true;
            document.getElementById('add-prod').disabled = true;
            startBtn.style.visibility = 'visible';
            stopBtn.style.visibility = 'hidden';
            inputBarcode.value = '';
        }

        window.startInsertProduct = startInsertProduct;
        window.stopInsertProduct = stopInsertProduct;

        formAdd.addEventListener('submit', function (e) {
            e.preventDefault();
            const code = inputBarcode.value.trim();
            if (code === '') return;

            const tr = document.createElement('tr');
            const tdCode = document.createElement('td');
            tdCode.textContent = code;

            const tdName = document.createElement('td');
            tdName.textContent = '-';
            const tdPackSize = document.createElement('td');
            tdPackSize.textContent = '-';
            const tdPackQuantity = document.createElement('td');
            tdPackQuantity.textContent = '1';
            const tdTotalQuantity = document.createElement('td');
            tdTotalQuantity.textContent = '-';
            const tdRemove = document.createElement('td');
            const removeBtn = document.createElement('button');
            removeBtn.textContent = 'X';
            removeBtn.className = 'btn btn-danger btn-sm';
            removeBtn.onclick = function () {
                tableBody.removeChild(tr);
            };
            tdRemove.appendChild(removeBtn);

            tr.appendChild(tdCode);
            tr.appendChild(tdName);
            tr.appendChild(tdPackSize);
            tr.appendChild(tdPackQuantity);
            tr.appendChild(tdTotalQuantity);
            tr.appendChild(tdRemove);

            tableBody.appendChild(tr);

            inputBarcode.value = '';
            inputBarcode.focus();
        });

        inputBarcode.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                formAdd.dispatchEvent(new Event('submit'));
            }
        });

        stopInsertProduct();

        function verifyCodes() {
            document.getElementById('id_scanned_tbody').style.display = 'none';
            document.getElementById('id_loading_codes').style.visibility = 'visible';

            const codes = [];
            const rows = tableBody.querySelectorAll('tr');
            rows.forEach(row => {
                const codeCell = row.querySelector('td');
                if (codeCell) {
                    codes.push(codeCell.textContent.trim());
                }
            });

            if (codes.length === 0) {
                alert('{{ translations.no_codes_to_verify }}');
                return;
            }

            api("/ajax/materials/stocktaking/verify-codes", {
                method: "POST",
                data: codes
            })
                .then(result => {
                    if (!result.data || !result.data.length) {
                        showSnack(false, "{{ translations.error_verifying_codes }}");
                        return;
                    }

                    fillInventoryData(result.data);
                })
                .catch(err => {
                    console.error(err);
                    showSnack(false);
                })
        }

        function fillInventoryData(data) {
            const tbody = document.getElementById('id_aggregated_tbody');
            tbody.innerHTML = '';
            const aggregatedData = {};
            data.forEach(item => {
                const key = item.group_key;
                if (!aggregatedData[key]) {
                    aggregatedData[key] = {
                        code: item.code,
                        id_material: item.id_material,
                        name: item.name,
                        package_size_in_base_unit: item.package_size_in_base_unit,
                        id_unit: item.id_unit,
                        quantity: 0,
                        total_quantity: 0
                    };
                }
                aggregatedData[key].quantity += item.quantity;
                aggregatedData[key].total_quantity += item.total_quantity;
            });
            Object.values(aggregatedData).forEach(item => {
                const tr = document.createElement('tr');
                const tdCode = document.createElement('td');
                tdCode.textContent = "-";
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.value = item.id_material;
                tdCode.appendChild(hiddenInput);

                const tdName = document.createElement('td');
                tdName.textContent = item.name;

                const tdPackSize = document.createElement('td');
                tdPackSize.textContent = item.package_size_in_base_unit;

                const tdPackQuantity = document.createElement('td');
                tdPackQuantity.textContent = item.quantity;
                const hiddenUnitInput = document.createElement('input');
                hiddenUnitInput.type = 'hidden';
                hiddenUnitInput.value = item.id_unit;
                tdPackQuantity.appendChild(hiddenUnitInput);

                const tdTotalQuantity = document.createElement('td');
                tdTotalQuantity.textContent = item.total_quantity;

                tr.appendChild(tdCode);
                tr.appendChild(tdName);
                tr.appendChild(tdPackSize);
                tr.appendChild(tdPackQuantity);
                tr.appendChild(tdTotalQuantity);

                tbody.appendChild(tr);
            });
            document.getElementById('id_scanned_tbody').style.display = 'table-row-group';
            document.getElementById('id_loading_codes').style.visibility = 'hidden';
            document.getElementById('id_verify_codes_btn').style.visibility = 'hidden';
            showSnack(true, "{{ translations.codes_verified }}");

            const fullDataTbody = document.getElementById('id_full_data_tbody');
            fullDataTbody.innerHTML = '';
            data.forEach(item => {
                const tr = document.createElement('tr');

                const tdCode = document.createElement('td');
                tdCode.textContent = item.code;

                const tdPackage = document.createElement('td');
                tdPackage.textContent = item.id_package;

                const tdIdMaterial = document.createElement('td');
                tdIdMaterial.textContent = item.id_material;

                const tdName = document.createElement('td');
                tdName.textContent = item.name;

                const tdPackSize = document.createElement('td');
                tdPackSize.textContent = item.package_size_in_base_unit;

                const tdPackQuantity = document.createElement('td');
                tdPackQuantity.textContent = item.quantity;
                const hiddenUnitInput = document.createElement('input');
                hiddenUnitInput.type = 'hidden';
                hiddenUnitInput.value = item.id_unit;
                tdPackQuantity.appendChild(hiddenUnitInput);

                const tdTotalQuantity = document.createElement('td');
                tdTotalQuantity.textContent = item.total_quantity;

                tr.appendChild(tdCode);
                tr.appendChild(tdPackage);
                tr.appendChild(tdIdMaterial);
                tr.appendChild(tdName);
                tr.appendChild(tdPackSize);
                tr.appendChild(tdPackQuantity);
                tr.appendChild(tdTotalQuantity);

                fullDataTbody.appendChild(tr);
            });

            document.getElementById('scan_elements_card').style.display = 'none';
            document.getElementById('display_elements_card').style.display = 'block';
        }

        function editStocktaking() {
            const tbody = document.getElementById('id_full_data_tbody');
            const idStocktaking = document.getElementById('id_stocktaking_id').value;
            const rows = tbody.querySelectorAll('tr');
            const stocktakingData = [];

            document.getElementById("id_edit_stocktaking_btn").disabled = true;

            rows.forEach(row => {
                const codeCell = row.querySelector('td:nth-child(1)');
                const idPackageCell = row.querySelector('td:nth-child(2)');
                const idMaterialCell = row.querySelector('td:nth-child(3)');
                const nameCell = row.querySelector('td:nth-child(4)');
                const packSizeCell = row.querySelector('td:nth-child(5)');
                const packQuantityCell = row.querySelector('td:nth-child(6)');
                const totalQuantityInBaseUnitCell = row.querySelector('td:nth-child(7)');
                const hiddenUnitInput = row.querySelector('td:nth-child(6) input[type="hidden"]');

                if (
                    codeCell &&
                    idPackageCell &&
                    idMaterialCell &&
                    nameCell &&
                    packSizeCell &&
                    packQuantityCell &&
                    totalQuantityInBaseUnitCell &&
                    hiddenUnitInput
                ) {
                    stocktakingData.push({
                        code: codeCell.textContent.trim(),
                        id_package: idPackageCell.textContent.trim(),
                        id_material: idMaterialCell.textContent.trim(),
                        name: nameCell.textContent.trim(),
                        package_size_in_base_unit: parseFloat(packSizeCell.textContent.trim()),
                        id_unit: hiddenUnitInput.value,
                        quantity: parseFloat(packQuantityCell.textContent.trim()),
                        total_quantity_in_base_unit: parseFloat(totalQuantityInBaseUnitCell.textContent.trim())
                    });
                }
            });

            if (stocktakingData.length === 0) {
                showSnack(false, "{{ translations.no_codes_to_verify }}");
                return;
            }

            const overrideInventory = document.getElementById('override_inventory').checked ? 1 : 0;

            if (overrideInventory === 1) {
                if (confirm('{{ translations.confirm_override_inventory }}') === false) {
                    document.getElementById("id_edit_stocktaking_btn").disabled = false;
                    return;
                }
            }


            api(`/ajax/stocktakings/${idStocktaking}/scanner`, {
                method: "PATCH",
                data: {
                    override_inventory: overrideInventory,
                    items: stocktakingData
                }
            })
                .then(result => {
                    if (!result.ok) {
                        showSnack(false, "{{ translations.error_accepting_stocktaking }}");
                        document.getElementById("id_edit_stocktaking_btn").disabled = false;
                        return;
                    }
                    try {

                        downloadPdf(
                            `/ajax/materials/stocktaking/${idStocktaking}/document`,
                            {},
                            "stocktaking.pdf"
                        );

                        showSnack(true);
                        setTimeout(() => {
                            window.location.href = `/panel/stocktakings/history`;
                        }, 1000);

                    } catch (err) {
                        console.error(err);
                        showSnack(false, err.message || 'Something went wrong.');
                        document.getElementById("id_edit_stocktaking_btn").disabled = false;

                    }

                })
                .catch(err => {
                    console.error(err);
                    showSnack(false, "{{ translations.error_accepting_stocktaking }}");
                    document.getElementById("id_edit_stocktaking_btn").disabled = false;

                });
        }

        function toggleTable() {
            const el = document.getElementById('hidden-table');
            el.style.display = (el.style.display === 'none') ? 'block' : 'none';
        }
    </script>
{% endblock %}