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

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

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

{% block content %}

    <div class="card">
        <div class="card-header">
            <h4 class="card-title">{{ translations.insert_shared_price_list }}</h4>
        </div>
        <div class="card-content">
            <div class="card-body px-3 py-4-5">

                <div class="row mb-3 align-items-end">
                    <div class="col-5">
                        <label class="form-label" for="materialSupplier">
                            {{ translations.supplier }}
                        </label>
                        <select class="form-select" name="materialSupplier" id="materialSupplier">
                            <option value="">{{ translations.select_material_supplier }}</option>
                            {% for supplier in material_suppliers %}
                                <option value="{{ supplier.getId() }}">{{ supplier.getName() }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-5">
                        <label class="form-label" for="csvFile">
                            {{ translations.load_csv_file }}
                        </label>
                        <input type="file" id="csvFile" accept=".csv" class="form-control">
                    </div>
                    <div class="col-2">
                        <button class="btn btn-primary" id="loadBtn" onclick="loadPriceList()">
                            {{ translations.load_price_list }}
                        </button>
                    </div>
                </div>

                <div class="mt-5" id="data-containter" style="display:none;">
                    <div class="row mt-5">
                        <div class="col-8">
                            <table class="table" id="metaTable">
                                <thead>
                                <th style="width: 33%"></th>
                                <th style="width: 66%"></th>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>{{ translations.price_list_generated_for }}</td>
                                    <td><span id="client">-</span></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.generated_at }}</td>
                                    <td><span id="generated_at">-</span></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.currency }}</td>
                                    <td><span id="currency">-</span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-12">
                            <div id="summaryContainer" style="display:none;"
                                 class="alert alert-warning mb-0 text-black text-center"></div>
                        </div>
                    </div>

                    <div class="row mt-5">
                        <div class="col-12">
                            <table class="table table-hover table-bordered text-sm" id="priceTable">
                                <thead>
                                <th style="width: 15%">{{ translations.sku }}</th>
                                <th style="width: 30%">{{ translations.supplier_product_name }}</th>
                                <th style="width: 30%">{{ translations.system_product_name }}</th>
                                <th style="width: 15%">{{ translations.gross_price }}</th>
                                <th style="width: 15%">{{ translations.pack_quantity_in_base_unit }}</th>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>

                    <div class="row mt-4">
                            {% for shop in shops %}
                                <div class="col-4 mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input shop-checkbox"
                                               type="checkbox"
                                               id="shop_{{ shop.id }}"
                                               name="shops[]"
                                               value="{{ shop.id }}"
                                               checked>
                                        <label class="form-check-label" for="shop_{{ shop.id }}">
                                            <div class="d-flex flex-column">
                                                <span class="fw-bold">{{ shop.representativeName }}</span>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            {% endfor %}
                    </div>

                    <div class="mt-3">
                        <button id="confirmBtn" class="btn btn-primary" style="display:none;">
                            {{ translations.confirm_price_list }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    //quick add modal
{#    <div class="modal fade" id="quickAddModal" tabindex="-1" aria-labelledby="quickAddModalLabel" aria-hidden="true">#}
{#        <div class="modal-dialog">#}
{#            <div class="modal-content">#}
{#                <div class="modal-header">#}
{#                    <h5 class="modal-title" id="quickAddModalLabel">{{ translations.add_product }}</h5>#}
{#                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>#}
{#                </div>#}
{#                <div class="modal-body">#}
{#                    <form id="quickAddForm">#}
{#                        <div class="row">#}
{#                            <div class="col-12 mb-3">#}
{#                                <label for="category" class="form-label">{{ translations.category }}</label>#}
{#                                <select class="form-select" id="category" required>#}
{#                                    {% for category in material_categories %}#}
{#                                        <option value="{{ category.getId() }}">{{ category.getName() }}</option>#}
{#                                    {% endfor %}#}
{#                                </select>#}
{#                            </div>#}
{#                            <div class="col-12 mb-3">#}
{#                                <label for="productName" class="form-label">{{ translations.product_name }}</label>#}
{#                                <input type="text" class="form-control" id="productName" required>#}
{#                            </div>#}
{#                            <div class="col-8 mb-3">#}
{#                                <label for="packQuantity" class="form-label">{{ translations.pack_quantity_in_base_unit }}</label>#}
{#                                <input type="number" class="form-control" id="packQuantity" required>#}
{#                            </div>#}
{#                            <div class="col-4 mb-3">#}
{#                                <label for="idUnit" class="form-label">{{ translations.unit }}</label>#}
{#                                <select class="form-select" id="idUnit" required>#}
{#                                        <option value="1">Kg</option>#}
{#                                        <option value="2">L</option>#}
{#                                        <option value="3">g</option>#}
{#                                        <option value="4">ml</option>#}
{#                                        <option value="5" selected>pcs</option>#}
{#                                </select>#}
{#                            </div>#}

{#                            <div class="col-12 mb-3">#}
{#                                <label class="form-label" for="source_type">#}
{#                                    {{ translations.source_type }}#}
{#                                </label>#}
{#                                <select class="form-select" name="source_type" id="source_type">#}
{#                                    <option value="CENTRAL">{{ translations.central_supplier }}</option>#}
{#                                    <option value="OPEN">{{ translations.any_supplier }}</option>#}
{#                                </select>#}
{#                            </div>#}
{#                        </div>#}
{#                    </form>#}
{#                </div>#}
{#                <div class="modal-footer">#}
{#                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ translations.close }}</button>#}
{#                    <button type="button" class="btn btn-primary" id="saveQuickAddBtn">{{ translations.save }}</button>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}


{% endblock %}

{% block scripts %}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
    <script>
        const fileInput = document.getElementById('csvFile');
        const confirmBtn = document.getElementById('confirmBtn');
        const tableHeaders = document.getElementById('tableHeaders');
        const priceTable = document.getElementById('priceTable');
        const metaTable = document.getElementById('metaTable');
        const materialSupplier = document.getElementById('materialSupplier');
        let parsedData = [];
        let metaData = {};
        let skuFromPriceList = [];
        let priceListSharedElems = [];
        let priceListElems = [];
        let supplierProducts = [];

        async function loadPriceList() {
            if (!materialSupplier.value) {
                Swal.fire({icon: "warning", title: `{{ translations.please_select_material_supplier }}`});
                return;
            }

            if (fileInput.files.length === 0) {
                Swal.fire({icon: "warning", title: `{{ translations.please_select_csv_file }}`});
                return;
            }

            parsedData = [];
            metaData = [];
            skuFromPriceList = [];
            priceListSharedElems = [];

            const file = fileInput.files[0];
            if (!file) return;

            // Najpierw pobierz produkty dostawcy
            await getSupplierSku();

            const reader = new FileReader();
            reader.onload = async (event) => {
                const text = event.target.result;
                parseCustomCSV(text);
            };
            reader.readAsText(file, 'UTF-8');

            document.getElementById('data-containter').style.display = 'block';
        }

        async function getSupplierSku() {
            const idSupplier = materialSupplier.value;
            const res = await api(`/ajax/material-suppliers/${idSupplier}/materials?include=packs`);
            supplierProducts = res.data;
        }

        function parseCustomCSV(text) {
            // Rozdziel linie
            const lines = text.split(/\r?\n/).filter(l => l.trim() !== '');
            let isMeta = true;
            let headerIndex = -1;
            let rows = [];

            for (let i = 0; i < lines.length; i++) {
                const line = lines[i];

                // znajdź nagłówki danych produktów
                if (line.startsWith("sku;")) {
                    isMeta = false;
                    headerIndex = i;
                    break;
                }
            }

            // METADANE
            const metaPart = lines.slice(0, headerIndex).join("\n");
            const metaParsed = Papa.parse(metaPart, {
                header: true,
                delimiter: ";",
                skipEmptyLines: true
            }).data;

            metaParsed.forEach(row => {
                if (row.meta_key && row.meta_value) {
                    metaData[row.meta_key] = row.meta_value;
                }
            });

            renderMeta(metaData);

            // DANE PRODUKTÓW
            const productPart = lines.slice(headerIndex).join("\n");
            const result = Papa.parse(productPart, {
                header: true,
                delimiter: ";",
                skipEmptyLines: true
            });

            parsedData = result.data;
            renderTable(parsedData);

            confirmBtn.style.display = 'inline-block';
        }

        async function renderMeta(meta) {

            if (meta.client_uid) {
                await getShopByUid(meta.client_uid);
            } else {
                document.getElementById('client').innerText = '-';
            }

            if (meta.generated_at) {
                document.getElementById('generated_at').innerText = meta.generated_at;
            } else {
                document.getElementById('generated_at').innerText = '-';
            }

            if (meta.currency) {
                document.getElementById('currency').innerText = meta.currency;
            } else {
                document.getElementById('currency').innerText = '-';
            }
        }

        function renderTable(data) {
            const tbody = priceTable.getElementsByTagName('tbody')[0];
            const summaryContainer = document.getElementById('summaryContainer');
            tbody.innerHTML = "";
            summaryContainer.style.display = 'none';

            if (data.length === 0) {
                const row = tbody.insertRow(0);
                const cell = row.insertCell(0);
                cell.colSpan = 6;
                cell.style.textAlign = "center";
                cell.innerText = "{{ translations.no_data_in_file }}";
                return;
            }

            let foundCount = 0;
            let missingCount = 0;

            for (let i = 0; i < data.length; i++) {
                const row = tbody.insertRow(i);

                const sku = data[i].sku || '';
                const supplierName = data[i].product_name || '';
                const grossPrice = data[i].gross_price || '';
                const netPrice = data[i].net_price || '';
                const packQty = data[i].pack_quantity_in_base_unit || '';
                const currency = data[i].currency || '';

                // znajdź produkt po supplier_sku
                const found = supplierProducts.find(p => p.supplier_sku === sku);
                const systemName = found ? found.name : '';

                // dodaj komórki
                row.insertCell(0).innerText = sku;
                row.insertCell(1).innerText = supplierName;
                row.insertCell(2).innerText = systemName;
                row.insertCell(3).innerText = grossPrice;
                row.insertCell(4).innerText = packQty;

                skuFromPriceList.push(sku);
                priceListElems.push({
                    "supplier_sku": sku,
                    "product_name": supplierName,
                    "gross_price": grossPrice,
                    "net_price": netPrice,
                    "pack_quantity_in_base_unit": packQty,
                    "currency": metaData.currency || currency
                });

                if (!found) {
                    row.classList.add("bg-light-danger");
                    row.title = "{{ translations.sku_not_found_in_system }}";
                    missingCount++;

                    // row.insertCell(5).innerHTML = `<button class="btn btn-success btn-sm"
                    //     onclick="showQuickAddModal('${sku}', decodeURIComponent('${encodeURIComponent(supplierName)}'), ${packQty})"
                    //     >+</button>`;

                } else {
                    priceListSharedElems.push({
                        "id" : found.id,
                        "id_pack" : found.id_pack,
                        "sku": sku,
                        "pack_price_gross": grossPrice,
                        "pack_price_net" : netPrice,
                        "pack_quantity_in_base_unit": packQty });

                    // row.insertCell(5).innerText = "";
                    foundCount++;
                }
            }

            // wyświetl podsumowanie
            summaryContainer.style.display = 'block';
            summaryContainer.innerHTML = `
            <span class="text-danger fw-bold">${missingCount}</span>
            {{ translations.products_not_found_in_system }}
        `;

            // jeśli brakujące produkty istnieją – zmień kolor alertu na warning
            if (missingCount > 0) {
                summaryContainer.classList.add('alert-warning');
            } else {
                summaryContainer.style.display = 'none';
            }

            confirmBtn.style.display = 'inline-block';
        }

        confirmBtn.addEventListener('click', () => {
            const selectedShops = Array.from(document.querySelectorAll('.shop-checkbox:checked')).map(cb => cb.value);

            if (selectedShops.length === 0) {
                Swal.fire({icon: "warning", title: `{{ translations.please_select_at_least_one_shop }}`});
                return;
            }

            Swal.fire({
                title: `{{ translations.confirm_price_list_confirmation }} {{ translations.products_not_found_will_be_skipped }}`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: `{{ translations.yes_confirm }}`,
                cancelButtonText: `{{ translations.cancel }}`
            }).then(async (result) => {
                if (result.isConfirmed) {
                    try {
                        const idSupplier = materialSupplier.value;

                        confirmBtn.disabled = true;
                        confirmBtn.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> {{ translations.processing }}...`;


                        const res = await api(`/ajax/material-suppliers/${idSupplier}/price-list/shared`, {
                            method: "POST",
                            data: {
                                products: priceListSharedElems,
                                price_list_products: priceListElems,
                                generated_at: metaData.generated_at || null,
                                shops: selectedShops
                            }
                        });

                        if (res.success) {
                            Swal.fire({icon: "success", title: `{{ translations.price_list_confirmed_successfully }}`})
                                .then(() => {
                                    window.location.reload();
                                });

                            confirmBtn.disabled = false;
                            confirmBtn.innerHTML = `{{ translations.confirm_price_list }}`;

                        } else {
                            Swal.fire({icon: "error", title: res.message || `{{ translations.error_confirming_price_list }}`});
                            confirmBtn.disabled = false;
                            confirmBtn.innerHTML = `{{ translations.confirm_price_list }}`;
                        }
                    } catch (error) {
                        Swal.fire({icon: "error", title: `{{ translations.error_confirming_price_list }}`});
                        confirmBtn.disabled = false;
                        confirmBtn.innerHTML = `{{ translations.confirm_price_list }}`;
                    }
                }
            });
        });

        function showQuickAddModal(sku, supplierName, packQty) {
            const quickAddModal = new bootstrap.Modal(document.getElementById('quickAddModal'));
            document.getElementById('productName').value = supplierName || '';
            document.getElementById('packQuantity').value = packQty || '';
            quickAddModal.show();

            document.getElementById('saveQuickAddBtn').onclick = async function () {
                const category = document.getElementById('category').value;
                const productName = document.getElementById('productName').value;
                const packQuantity = document.getElementById('packQuantity').value;
                const idUnit = document.getElementById('idUnit').value;
                const sourceType = document.getElementById('source_type').value;

                if (!category || !productName || !packQuantity) {
                    Swal.fire({icon: "warning", title: `{{ translations.please_fill_all_fields }}`});
                    return;
                }

                try {
                    const res = await api(`/ajax/materials`, {
                        method: "POST",
                        data : {
                            name: productName,
                            id_category: category,
                            id_unit: idUnit,
                            source_type: sourceType,
                            allergens : []
                        }
                    });

                    if (res.success) {
                        Swal.fire({icon: "success", title: `{{ translations.product_added_successfully }}`});
                        quickAddModal.hide();
                        await getSupplierSku();
                        renderTable(parsedData);
                    } else {
                        Swal.fire({icon: "error", title: res.message || `{{ translations.error_adding_product }}`});
                    }
                } catch (error) {
                    Swal.fire({icon: "error", title: `{{ translations.error_adding_product }}`});
                }
            };
        }

        async function getShopByUid(uid) {
            const idSupplier = materialSupplier.value;

            await api(`/ajax/material-suppliers/${idSupplier}/shops/by-uid/${uid}`)
                .then(function (res) {

                    if (res.data == null || res.data.length == 0) {
                        document.getElementById('client').innerText = uid + ' ({{ translations.shop_not_found }})';
                        return;
                    }

                    document.getElementById('client').innerText = res.data.representative_name;
                })
                .catch(error => {

                });

        }
    </script>

{% endblock %}