{% extends 'layouts/base.twig' %}
{% block title %}{{ translations.material_complaint }}{% endblock %}
{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.material_complaint }}</h3>
    </div>
    {% if errors is not empty %}
        <div class="row">
            <div class="col-12 col-md-4 offset-md-4">
                <div class="alert alert-danger text-center" role="alert">{{ errors|join('<br>')|raw }}</div>
            </div>
        </div>
    {% endif %}
{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-12">

            {# Filtry jako badge #}
            <div class="card mb-3">
                <div class="card-body py-3">
                    <div class="d-flex flex-wrap align-items-center gap-1 mb-2">
                        <span class="text-muted small fw-semibold me-2" style="min-width:4.5rem;">{{ translations.status }}:</span>
                        <span class="badge rounded-pill filter-badge status-badge bg-secondary text-white active" data-value="all">{{ translations.all }}</span>
                        <span class="badge rounded-pill filter-badge status-badge bg-secondary" data-value="NEW">{{ translations.status_new }}</span>
                        <span class="badge rounded-pill filter-badge status-badge bg-info text-dark" data-value="IN_REVIEW">{{ translations.status_in_review }}</span>
                        <span class="badge rounded-pill filter-badge status-badge bg-success" data-value="ACCEPTED">{{ translations.status_accepted }}</span>
                        <span class="badge rounded-pill filter-badge status-badge bg-danger" data-value="REJECTED">{{ translations.status_rejected }}</span>
                    </div>
                    <div class="d-flex flex-wrap align-items-center gap-1">
                        <span class="text-muted small fw-semibold me-2" style="min-width:4.5rem;">{{ translations.supplier }}:</span>
                        <span class="badge rounded-pill filter-badge supplier-badge bg-secondary text-white active" data-value="all">{{ translations.all }}</span>
                        {% set seenSuppliers = [] %}
                        {% for complaint in complaints %}
                            {% if complaint.getSupplierName() not in seenSuppliers %}
                                {% set seenSuppliers = seenSuppliers|merge([complaint.getSupplierName()]) %}
                                <span class="badge rounded-pill filter-badge supplier-badge bg-light text-dark border"
                                      data-value="{{ complaint.getSupplierName() }}">{{ complaint.getSupplierName() }}</span>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>

            {# Tabela reklamacji #}
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">{{ translations.overview }}</h4>
                    <span class="badge bg-secondary" id="complaintsCount"></span>
                </div>
                <div class="card-content">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0 table-sm" id="complaintsTable" style="font-size:.82rem;">
                                <thead class="table-light">
                                <tr>
                                    <th class="ps-3" style="width:12%;">
                                        {{ translations.complaint_key }}
                                        <div class="fw-normal text-muted" style="font-size:.75rem;">{{ translations.date_of_report }}</div>
                                    </th>
                                    <th style="width:20%;">
                                        {{ translations.supplier }}
                                        <div class="fw-normal text-muted" style="font-size:.75rem;">{{ translations.product_name }}</div>
                                    </th>
                                    <th style="width:18%;">
                                        {{ translations.order_key }}
                                        <div class="fw-normal text-muted" style="font-size:.75rem;">{{ translations.complaint_reason }}</div>
                                    </th>
                                    <th class="text-center" style="width:8%;">{{ translations.complained_quantity }}</th>
                                    <th class="text-center" style="width:14%;">
                                        {{ translations.status }}
                                        <div class="fw-normal text-muted" style="font-size:.75rem;">{{ translations.last_update }}</div>
                                    </th>
                                    <th class="text-end pe-3" style="width:10%;">{{ translations.actions }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for complaint in complaints %}
                                    <tr class="complaint-row"
                                        data-status="{{ complaint.getStatus() }}"
                                        data-supplier="{{ complaint.getSupplierName() }}">

                                        <td class="ps-3 align-middle">
                                            {% if complaint.getComplaintKey() %}
                                                <code class="text-primary fw-semibold" style="font-size:.78rem;">{{ complaint.getComplaintKey() }}</code>
                                            {% else %}
                                                <span class="text-muted">—</span>
                                            {% endif %}
                                            <div class="text-muted" style="font-size:.75rem;">{{ complaint.getCreatedAt()|slice(0,16)|replace({'T': ' '}) }}</div>
                                        </td>

                                        <td class="align-middle">
                                            <span class="fw-semibold d-block">{{ complaint.getSupplierName() }}</span>
                                            <span class="text-muted d-block text-truncate" style="max-width:15rem; font-size:.78rem;" title="{{ complaint.getMaterialName() }}">{{ complaint.getMaterialName() }}</span>
                                            {% if complaint.getSupplierSku() %}
                                                <span class="text-muted" style="font-size:.72rem;">SKU: {{ complaint.getSupplierSku() }}</span>
                                            {% endif %}
                                        </td>

                                        <td class="align-middle">
                                            <span class="font-monospace d-block">{{ complaint.getOrderKey() }}</span>
                                            <span class="text-muted" style="font-size:.78rem;">{{ complaint.getReasonName() }}</span>
                                        </td>

                                        <td class="text-center align-middle">
                                            {% if complaint.getQty() is not null %}
                                                {% set unitLower = complaint.getUnitName()|lower %}
                                                <span class="fw-semibold">
                                                    {% if unitLower in ['pcs', 'g', 'ml'] %}{{ complaint.getQty()|round(0, 'common') }}{% else %}{{ complaint.getQty() }}{% endif %}
                                                </span>
                                                {% if complaint.getUnitName() %}
                                                    <div class="text-muted" style="font-size:.75rem;">{{ complaint.getUnitName() }}</div>
                                                {% endif %}
                                            {% else %}
                                                <span class="text-muted">—</span>
                                            {% endif %}
                                        </td>

                                        <td class="text-center align-middle">
                                            {% set status = complaint.getStatus() %}
                                            {% if status == 'NEW' %}
                                                <span class="badge bg-secondary">{{ translations.status_new }}</span>
                                            {% elseif status == 'IN_REVIEW' %}
                                                <span class="badge bg-info text-dark">{{ translations.status_in_review }}</span>
                                            {% elseif status == 'ACCEPTED' %}
                                                <span class="badge bg-success">{{ translations.status_accepted }}</span>
                                            {% elseif status == 'REJECTED' %}
                                                <span class="badge bg-danger">{{ translations.status_rejected }}</span>
                                            {% else %}
                                                <span class="badge bg-light text-dark">{{ status }}</span>
                                            {% endif %}
                                            <div style="font-size:.72rem;">
                                                {% if complaint.getUpdatedAt() and complaint.getUpdatedAt() != complaint.getCreatedAt() %}
                                                    <span class="text-muted">{{ complaint.getUpdatedAt()|slice(0,16)|replace({'T': ' '}) }}</span>
                                                {% else %}
                                                    <span class="text-muted">—</span>
                                                {% endif %}
                                            </div>
                                        </td>

                                        <td class="text-end pe-3 align-middle">
                                            {% set attachCount = complaint.getAttachments()|length %}
                                            {% if attachCount > 0 %}
                                                <span class="badge bg-light text-dark border me-1">
                                                    <i class="bi bi-paperclip"></i> {{ attachCount }}
                                                </span>
                                            {% endif %}
                                            <button class="btn btn-sm btn-outline-primary"
                                                    onclick="openComplaintDetails({{ complaint.getId() }})">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td colspan="6" class="text-center py-4 text-muted">{{ translations.no_complaints_found }}</td>
                                    </tr>
                                {% endfor %}
                                {% if complaints is not empty %}
                                    <tr id="noResultsRow" style="display:none">
                                        <td colspan="6" class="text-center py-4 text-muted">{{ translations.no_complaints_found }}</td>
                                    </tr>
                                {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="{{ root }}/material-orders/realised" class="btn btn-secondary btn-sm">
                        <i class="bi bi-arrow-left me-1"></i>{{ translations.back }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    {# Modal szczegółów reklamacji #}
    <div class="modal fade" id="complaintDetailsModal" tabindex="-1" aria-labelledby="complaintDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="complaintDetailsModalLabel">
                        <i class="bi bi-clipboard2-x me-2"></i>{{ translations.complaint_details }}
                        <code class="ms-2 text-primary fw-semibold" id="modalComplaintKey" style="font-size:.85rem;"></code>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-muted small mb-1">{{ translations.supplier }}</label>
                                <div class="fw-semibold" id="modalSupplierName"></div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted small mb-1">{{ translations.product_name }}</label>
                                <div id="modalMaterialName"></div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted small mb-1">{{ translations.order_key }}</label>
                                <div class="font-monospace" id="modalOrderKey"></div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted small mb-1">{{ translations.requested_action }}</label>
                                <div id="modalRequestedAction"></div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-muted small mb-1">{{ translations.complaint_reason }}</label>
                                <div id="modalReasonName"></div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted small mb-1">{{ translations.complained_quantity }}</label>
                                <div id="modalQty"></div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted small mb-1">{{ translations.status }}</label>
                                <div id="modalStatus"></div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label text-muted small mb-1">{{ translations.description }}</label>
                                <div class="border rounded p-2 bg-light" id="modalDescription" style="min-height: 3rem; white-space: pre-wrap;"></div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label text-muted small mb-1">
                                    <i class="bi bi-chat-left-dots me-1"></i>{{ translations.production_response }}
                                </label>
                                <div class="border rounded p-2 bg-light" id="modalProductionResponse" style="min-height: 3rem; white-space: pre-wrap;"></div>
                            </div>
                        </div>

                        {# Blok podsumowania rozpatrzenia — widoczny tylko gdy ACCEPTED lub REJECTED #}
                        <div class="col-12" id="modalResolutionBlock" style="display:none;">
                            <div class="card border-0 rounded-3" id="modalResolutionCard">
                                <div class="card-body py-3 px-3">
                                    <h6 class="mb-3 d-flex align-items-center gap-2">
                                        <i class="bi bi-check2-all"></i>
                                        {{ translations.resolution_summary }}
                                    </h6>
                                    <div class="row g-2">
                                        <div class="col-12 col-sm-6">
                                            <div class="text-muted small">{{ translations.accepted_qty }}</div>
                                            <div class="fw-semibold" id="modalAcceptedQty">—</div>
                                        </div>
                                        <div class="col-12 col-sm-6">
                                            <div class="text-muted small">{{ translations.compensation_method }}</div>
                                            <div id="modalCompensationMethod">—</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <label class="form-label text-muted small mb-2">
                                <i class="bi bi-paperclip me-1"></i>{{ translations.attachments_count }}
                            </label>
                            <div id="modalAttachmentsList"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="text-muted small me-auto" id="modalDates"></div>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ translations.back }}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block scripts %}
    <script>
        const complaintsData = {
            {% for complaint in complaints %}
            "{{ complaint.getId() }}": {
                complaint_key: {{ complaint.getComplaintKey() ? ('`' ~ complaint.getComplaintKey() ~ '`') : 'null' }},
                supplier_name: `{{ complaint.getSupplierName()|escape('js') }}`,
                material_name: `{{ complaint.getMaterialName()|escape('js') }}`,
                order_key: `{{ complaint.getOrderKey()|escape('js') }}`,
                reason_name: `{{ complaint.getReasonName()|escape('js') }}`,
                qty: {{ complaint.getQty() is not null ? complaint.getQty() : 'null' }},
                unit_name: {{ complaint.getUnitName() ? ('`' ~ complaint.getUnitName()|escape('js') ~ '`') : 'null' }},
                status: `{{ complaint.getStatus() }}`,
                description: {{ complaint.getDescription() ? ('`' ~ complaint.getDescription()|escape('js') ~ '`') : 'null' }},
                production_response: {{ complaint.getProductionResponse() ? ('`' ~ complaint.getProductionResponse()|escape('js') ~ '`') : 'null' }},
                requested_action: {{ complaint.getRequestedAction() ? ('`' ~ complaint.getRequestedAction()|escape('js') ~ '`') : 'null' }},
                accepted_qty: {{ complaint.getAcceptedQty() is not null ? complaint.getAcceptedQty() : 'null' }},
                compensation_method: {{ complaint.getCompensationMethod() ? ('`' ~ complaint.getCompensationMethod()|escape('js') ~ '`') : 'null' }},
                created_at: `{{ complaint.getCreatedAt()|slice(0,16)|replace({'T': ' '}) }}`,
                updated_at: {{ complaint.getUpdatedAt() ? ('`' ~ complaint.getUpdatedAt()|slice(0,16)|replace({'T': ' '}) ~ '`') : 'null' }},
                attachments: [
                    {% for file in complaint.getAttachments() %}
                    {
                        id: `{{ file.getId() }}`,
                        name: `{{ file.getOriginalName()|escape('js') }}`,
                        mime: `{{ file.getMimeType()|escape('js') }}`,
                        size: {{ file.getSizeBytes() ?? 0 }}
                    }{% if not loop.last %},{% endif %}
                    {% endfor %}
                ]
            }{% if not loop.last %},{% endif %}
            {% endfor %}
        };

        const t = {
            no_response_yet: `{{ translations.no_response_yet }}`,
            no_description: `{{ translations.no_description }}`,
            not_specified: `{{ translations.not_specified }}`,
            status_new: `{{ translations.status_new }}`,
            status_ready: `{{ translations.status_ready }}`,
            status_in_review: `{{ translations.status_in_review }}`,
            status_accepted: `{{ translations.status_accepted }}`,
            status_rejected: `{{ translations.status_rejected }}`,
            date_of_report: `{{ translations.date_of_report }}`,
            last_update: `{{ translations.last_update }}`,
            attachment: `{{ translations.attachment }}`,
            requested_action_refund: `{{ translations.requested_action_refund }}`,
            requested_action_replacement: `{{ translations.requested_action_replacement }}`,
            requested_action_credit: `{{ translations.requested_action_credit }}`,
            compensation_method_replacement: `{{ translations.compensation_method_replacement }}`,
            compensation_method_credit_note: `{{ translations.compensation_method_credit_note }}`,
            compensation_method_refund: `{{ translations.compensation_method_refund }}`
        };

        let activeStatus = `all`;
        let activeSupplier = `all`;

        function getStatusBadge(status) {
            const map = {
                NEW:       `<span class="badge bg-secondary">${t.status_new}</span>`,
                IN_REVIEW: `<span class="badge bg-info text-dark">${t.status_in_review}</span>`,
                ACCEPTED:  `<span class="badge bg-success">${t.status_accepted}</span>`,
                REJECTED:  `<span class="badge bg-danger">${t.status_rejected}</span>`,
            };
            return map[status] ?? `<span class="badge bg-light text-dark">${status || `—`}</span>`;
        }

        function getMimeIcon(mime) {
            if (!mime) return `bi-paperclip`;
            if (mime.startsWith(`image/`)) return `bi-file-image`;
            if (mime === `application/pdf`) return `bi-file-earmark-pdf text-danger`;
            if (mime.includes(`spreadsheet`) || mime.includes(`excel`)) return `bi-file-earmark-excel text-success`;
            if (mime.includes(`word`) || mime.includes(`document`)) return `bi-file-earmark-word text-primary`;
            return `bi-file-earmark`;
        }

        function formatQty(qty, unit) {
            if (qty === null || qty === undefined) return `—`;
            const wholeUnits = [`pcs`, `g`, `ml`];
            const normalized = (unit ?? ``).toLowerCase().trim();
            return wholeUnits.includes(normalized) ? Math.round(qty) : qty;
        }

        function formatBytes(bytes) {
            if (!bytes || bytes === 0) return ``;
            if (bytes < 1024) return `${bytes} B`;
            if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
            return `${(bytes / 1048576).toFixed(1)} MB`;
        }

        /** Tłumaczy kod requested_action na czytelną etykietę */
        function labelRequestedAction(code) {
            const map = {
                REFUND:      t.requested_action_refund,
                REPLACEMENT: t.requested_action_replacement,
                CREDIT:      t.requested_action_credit
            };
            return code ? (map[code.toUpperCase()] ?? code) : t.not_specified;
        }

        /** Tłumaczy kod compensation_method na czytelną etykietę */
        function labelCompensationMethod(code) {
            if (!code) return t.not_specified;
            const map = {
                REPLACEMENT: t.compensation_method_replacement,
                CREDIT_NOTE: t.compensation_method_credit_note,
                REFUND:      t.compensation_method_refund
            };
            return map[code.toUpperCase()] ?? code;
        }

        function applyFilters() {
            const rows = document.querySelectorAll(`#complaintsTable tbody .complaint-row`);
            let visible = 0;
            rows.forEach(function (row) {
                const statusMatch = (activeStatus === `all` || row.dataset.status === activeStatus);
                const supplierMatch = (activeSupplier === `all` || row.dataset.supplier === activeSupplier);
                if (statusMatch && supplierMatch) {
                    row.style.display = ``;
                    visible++;
                } else {
                    row.style.display = `none`;
                }
            });
            const noResults = document.getElementById(`noResultsRow`);
            if (noResults) noResults.style.display = visible === 0 ? `` : `none`;
            const badge = document.getElementById(`complaintsCount`);
            if (badge) badge.textContent = visible;
        }

        document.addEventListener(`DOMContentLoaded`, function () {
            document.querySelectorAll(`.status-badge`).forEach(function (el) {
                el.addEventListener(`click`, function () {
                    document.querySelectorAll(`.status-badge`).forEach(b => b.classList.remove(`active`));
                    el.classList.add(`active`);
                    activeStatus = el.dataset.value;
                    applyFilters();
                });
            });

            document.querySelectorAll(`.supplier-badge`).forEach(function (el) {
                el.addEventListener(`click`, function () {
                    document.querySelectorAll(`.supplier-badge`).forEach(b => b.classList.remove(`active`));
                    el.classList.add(`active`);
                    activeSupplier = el.dataset.value;
                    applyFilters();
                });
            });

            applyFilters();
        });

        function openComplaintDetails(id) {
            const c = complaintsData[String(id)];
            if (!c) return;

            document.getElementById(`modalComplaintKey`).textContent = c.complaint_key ?? ``;
            document.getElementById(`modalSupplierName`).textContent = c.supplier_name ?? `—`;
            document.getElementById(`modalMaterialName`).textContent = c.material_name ?? `—`;
            document.getElementById(`modalOrderKey`).textContent = c.order_key ?? `—`;
            document.getElementById(`modalReasonName`).textContent = c.reason_name ?? `—`;
            document.getElementById(`modalQty`).textContent = c.qty !== null ? `${formatQty(c.qty, c.unit_name)}${c.unit_name ? ` ${c.unit_name}` : ``}` : `—`;
            document.getElementById(`modalStatus`).innerHTML = getStatusBadge(c.status);

            // Żądana rekompensata (strona sklepu)
            document.getElementById(`modalRequestedAction`).innerHTML =
                c.requested_action
                    ? `<span class="badge bg-secondary">${labelRequestedAction(c.requested_action)}</span>`
                    : `<span class="text-muted fst-italic">${t.not_specified}</span>`;

            const descEl = document.getElementById(`modalDescription`);
            if (c.description) {
                descEl.textContent = c.description;
            } else {
                descEl.innerHTML = `<span class="text-muted fst-italic">${t.no_description}</span>`;
            }

            const respEl = document.getElementById(`modalProductionResponse`);
            if (c.production_response) {
                respEl.textContent = c.production_response;
            } else {
                respEl.innerHTML = `<span class="text-muted fst-italic">${t.no_response_yet}</span>`;
            }

            // Blok podsumowania rozpatrzenia (ACCEPTED / REJECTED)
            const resolutionBlock = document.getElementById(`modalResolutionBlock`);
            const resolutionCard  = document.getElementById(`modalResolutionCard`);
            if (c.status === `ACCEPTED` || c.status === `REJECTED`) {
                resolutionBlock.style.display = ``;
                const isAccepted = c.status === `ACCEPTED`;
                resolutionCard.className = `card border-0 rounded-3 ${isAccepted ? `bg-success bg-opacity-10 border-success` : `bg-danger bg-opacity-10 border-danger`}`;

                const acceptedQtyEl = document.getElementById(`modalAcceptedQty`);
                if (c.accepted_qty !== null && c.accepted_qty !== undefined) {
                    acceptedQtyEl.textContent = `${formatQty(c.accepted_qty, c.unit_name)}${c.unit_name ? ` ${c.unit_name}` : ``}`;
                    acceptedQtyEl.className = `fw-semibold ${isAccepted ? `text-success` : `text-muted text-decoration-line-through`}`;
                } else {
                    acceptedQtyEl.textContent = `—`;
                    acceptedQtyEl.className = `text-muted`;
                }

                document.getElementById(`modalCompensationMethod`).textContent = labelCompensationMethod(c.compensation_method);
            } else {
                resolutionBlock.style.display = `none`;
            }

            let datesHtml = `${t.date_of_report}: <strong>${c.created_at ?? `—`}</strong>`;
            if (c.updated_at && c.updated_at !== c.created_at) {
                datesHtml += `\u00A0\u00A0|\u00A0\u00A0${t.last_update}: <strong>${c.updated_at}</strong>`;
            }
            document.getElementById(`modalDates`).innerHTML = datesHtml;

            const attachEl = document.getElementById(`modalAttachmentsList`);
            if (c.attachments && c.attachments.length > 0) {
                let html = `<div class="list-group list-group-flush border rounded">`;
                c.attachments.forEach(function (file) {
                    const icon = getMimeIcon(file.mime);
                    const size = formatBytes(file.size);
                    html += `<div class="list-group-item px-3 py-2 d-flex align-items-center gap-2">
                        <i class="bi ${icon} fs-5 flex-shrink-0"></i>
                        <span class="flex-grow-1 text-truncate" title="${file.name}">${file.name}</span>
                        ${size ? `<small class="text-muted text-nowrap">${size}</small>` : ``}
                        <button class="btn btn-sm btn-outline-primary ms-2 flex-shrink-0" onclick="showAttachment('${file.id}')">
                            <i class="bi bi-download me-1"></i>${t.attachment}
                        </button>
                    </div>`;
                });
                html += `</div>`;
                attachEl.innerHTML = html;
            } else {
                attachEl.innerHTML = `<span class="text-muted fst-italic small">—</span>`;
            }

            const modal = new bootstrap.Modal(document.getElementById(`complaintDetailsModal`));
            modal.show();
        }

        function showAttachment(id) {
            api(`/ajax/material-complaints/attachment/${id}/presigned-url`, { method: `GET` })
                .then(result => {
                    if (result.ok && result.data?.url) {
                        const link = document.createElement(`a`);
                        link.href = result.data.url;
                        link.setAttribute(`target`, `_blank`);
                        link.setAttribute(`download`, ``);
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        showSnack(true, result.description);
                    } else {
                        showSnack(false, result.description || `Błąd pobierania pliku`);
                    }
                })
                .catch(err => {
                    console.error(err);
                    showSnack(false);
                });
        }
    </script>
    <style>
        .filter-badge {
            cursor: pointer;
            opacity: .45;
            transition: opacity .15s ease, box-shadow .15s ease, transform .1s ease;
            user-select: none;
        }
        .filter-badge:hover {
            opacity: .75;
            transform: translateY(-1px);
        }
        .filter-badge.active {
            opacity: 1;
            box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, .4);
            transform: none;
        }
        /* dostawca "wszyscy" — jasne tło wymaga ciemnego pierścienia */
        .supplier-badge.bg-light.active {
            box-shadow: 0 0 0 2px #fff, 0 0 0 4px #6c757d;
        }
    </style>
{% endblock %}