{# views/product/price/manage.twig #}
{% extends 'layouts/base.twig' %}
{% block title %}{{ translations.pricing }}{% endblock %}
{% block head %}
<style>
    /* === Layout === */
    .price-filter-bar {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 14px 18px;
        margin-bottom: 16px;
    }
    .price-filter-bar .form-label { font-size: .8rem; color: #6c757d; margin-bottom: 2px; }
    /* === Tabela === */
    .table-pricing th { white-space: nowrap; font-size: .8rem; font-weight: 600; color: #495057; }
    .table-pricing td { vertical-align: middle; font-size: .85rem; }
    /* === Kategoria nagłówek === */
    .cat-header-row { cursor: pointer; background-color: #e8f0fe !important; }
    .cat-header-row td { font-weight: 600; font-size: .8rem; color: #3c4fe0; }
    .cat-header-row:hover { background-color: #d2e3fc !important; }
    .cat-toggle-icon { transition: transform .2s; }
    .cat-toggle-icon.open { transform: rotate(90deg); }
    /* === Wiersz produktu === */
    .hideRow { display: none; }
    .highlight-zero { background-color: #fef3f2 !important; }
    /* === Ostrzeżenie kategoria === */
    .category-warning { color: #eab308; font-weight: bold; margin-left: 6px; line-height: 1; }
    /* === Cena konkurencji — płaski układ === */
    .comp-cell { white-space: nowrap; vertical-align: middle !important; }

    /* Ikona statusu (kółko z symbolem) */
    .comp-icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 22px; height: 22px; border-radius: 50%;
        font-size: .7rem; font-weight: 700; flex-shrink: 0;
        vertical-align: middle;
    }
    .comp-icon-cheaper  { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
    .comp-icon-pricier  { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
    .comp-icon-in-range { background: #fef9c3; color: #a16207; border: 1px solid #fde047; }
    .comp-icon-no-data  { background: #f1f5f9; color: #94a3b8; border: 1px solid #e2e8f0; }

    /* Kolor tła wiersza zależny od pozycji cenowej */
    tr.row-cheaper  { background-color: #f0fdf4 !important; }
    tr.row-pricier  { background-color: #fff5f5 !important; }
    tr.row-in-range { background-color: #fefce8 !important; }

    /* Dane po prawej stronie ikony */
    .comp-data { display: inline-flex; flex-direction: column; gap: 1px; vertical-align: middle; margin-left: 6px; }
    .comp-range-line { font-size: .78rem; font-weight: 600; color: #374151; }
    .comp-obs-block  { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
    .comp-obs-row    { display: flex; align-items: center; gap: 4px; font-size: .72rem; }
    .comp-obs-name   { color: #6b7280; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .comp-obs-price  { font-weight: 700; }
    .comp-obs-min    { color: #15803d; }
    .comp-obs-max    { color: #b91c1c; }
    .comp-obs-only   { color: #374151; }
    .comp-gap-pill   { font-size: .65rem; font-weight: 600; padding: 0 4px; border-radius: 6px; white-space: nowrap; }
    .comp-gap-up     { background: #fee2e2; color: #991b1b; }
    .comp-gap-down   { background: #dcfce7; color: #166534; }
    .comp-gap-zero   { background: #f1f5f9; color: #6b7280; }
    .comp-count-note { font-size: .65rem; color: #9ca3af; margin-top: 1px; }

    /* Legenda */
    .comp-legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; padding: 2px 8px; border-radius: 10px; }
    .comp-legend-cheaper  { background: #dcfce7; color: #15803d; }
    .comp-legend-in-range { background: #fef9c3; color: #a16207; }
    .comp-legend-pricier  { background: #fee2e2; color: #b91c1c; }
    .comp-legend-no-data  { background: #f1f5f9; color: #94a3b8; }

    /* Badge w nagłówku kategorii */
    .cat-comp-badge { font-size: .68rem; font-weight: 600; padding: 1px 7px; border-radius: 10px; vertical-align: middle; }
    .cat-comp-badge-has     { background: #dbeafe; color: #1d4ed8; }
    .cat-comp-badge-none    { background: #f1f5f9; color: #94a3b8; }
    .cat-marge-positive     { background: #dcfce7; color: #15803d; }
    .cat-marge-negative     { background: #fee2e2; color: #b91c1c; }
    .cat-marge-zero         { background: #f1f5f9; color: #6b7280; }
    /* === Marża === */
    .marge-positive { color: #059669; font-weight: 700; }
    .marge-zero     { color: #d97706; font-weight: 700; }
    .marge-negative { color: #dc2626; font-weight: 700; }

    /* Marża realna vs oczekiwana */
    .marge-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; }
    .marge-real  { font-weight: 700; font-size: .85rem; }
    .marge-expected-line { display: flex; align-items: center; gap: 3px; font-size: .7rem; color: #9ca3af; }
    .marge-expected-val  { font-weight: 600; }
    /* Kolor wskaźnika delta (realna vs oczekiwana) */
    .marge-delta-ok   { color: #15803d; }   /* realna >= oczekiwanej */
    .marge-delta-warn { color: #d97706; }   /* realna < oczekiwanej, ale blisko (< 5pp) */
    .marge-delta-bad  { color: #dc2626; }   /* realna znacznie < oczekiwanej (>= 5pp) */
    .marge-delta-icon { font-size: .65rem; }
    /* === Input group slim === */
    .input-group-price { max-width: 200px; }
    .input-group-stock { max-width: 160px; }

    /* === Sticky header tabeli === */
    .table-responsive-sticky {
        overflow-x: auto;
        overflow-y: auto;
        max-height: calc(100vh - 220px);
    }
    .table-pricing thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: #f0f3ff;
        border-bottom: 2px solid #cdd4e0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
    }

    /* === Okresy dostępności - badges === */
    .availability-periods-bar {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 10px 14px;
    }
    .period-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 8px;
        border: 2px solid #e5e7eb;
        background: #ffffff;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.75rem;
    }
    .period-badge:hover {
        border-color: #3b82f6;
        background: #eff6ff;
        transform: translateY(-1px);
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
    }
    .period-badge.active {
        border-color: #3b82f6;
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
    }
    .period-badge-current {
        border-color: #10b981 !important;
    }
    .period-badge-current.active {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
    }
    .period-badge-all {
        border-color: #6b7280;
        background: #f3f4f6;
    }
    .period-badge-all.active {
        border-color: #6b7280;
        background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    }
    .period-badge-none {
        border-color: #9ca3af;
    }
    .period-badge-inactive {
        opacity: 0.6;
        border-style: dashed;
    }
    .period-badge-icon {
        font-size: 1.1rem;
        line-height: 1;
    }
    .period-badge-content {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
    .period-badge-name {
        font-weight: 600;
        color: #1f2937;
        font-size: 0.75rem;
        line-height: 1.2;
    }
    .period-badge-dates {
        font-size: 0.65rem;
        color: #6b7280;
        font-weight: 500;
        line-height: 1.2;
    }
    .period-current-indicator {
        font-size: 0.6rem;
        font-weight: 700;
        color: #10b981;
        background: #ffffff;
        padding: 1px 4px;
        border-radius: 3px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .period-recurring-icon {
        font-weight: 700;
        color: #8b5cf6;
        margin-left: 2px;
        font-size: 0.7rem;
    }
</style>
{% endblock %}
{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.product }}</h3>
    </div>
    {% if errors is not empty %}
        <div class="row">
            <div class="col-12 col-md-6 offset-md-3">
                <div class="alert alert-danger text-center" role="alert">{{ errors|join('<br>')|raw }}</div>
            </div>
        </div>
    {% endif %}
{% endblock %}
{% block content %}
{# ── Pasek filtrów daty ── #}
<div class="price-filter-bar d-flex align-items-end gap-3 flex-wrap">
    <div>
        <label class="form-label">{{ translations.date|default('Data') }}</label>
        <input type="date" id="filterDate" class="form-control form-control-sm" value="{{ dateTo }}">
{#        <small class="text-muted">{{ translations.date_range_info|default('Zakres: 30 dni wstecz') }}</small>#}
    </div>
    <div>
        <button class="btn btn-sm btn-primary" onclick="applyDateFilter()">
            <i class="bi bi-funnel me-1"></i>{{ translations.filter|default('Filtruj') }}
        </button>
    </div>
    <div class="ms-auto">
        <button class="btn btn-sm btn-outline-secondary" type="button" onclick="runPriceListCategorySelectorModal()">
            <i class="bi bi-file-earmark-pdf me-1"></i>{{ translations.generate_price_list_document|default('Generuj cennik') }}
        </button>
    </div>
</div>
{# ── Legenda wskaźnika cenowego ── #}
<div class="d-flex align-items-center gap-2 mb-3 flex-wrap">
    <span class="text-muted me-1" style="font-size:.75rem">{{ translations.competitor_price_legend|default('Twoja cena vs konkurencja:') }}</span>

    <span class="comp-legend-item comp-legend-cheaper"><span class="comp-icon comp-icon-cheaper">−</span> {{ translations.cheaper|default('Tańsza') }}</span>
    <span class="comp-legend-item comp-legend-in-range"><span class="comp-icon comp-icon-in-range">≈</span> {{ translations.in_range|default('W zakresie') }}</span>
    <span class="comp-legend-item comp-legend-pricier"><span class="comp-icon comp-icon-pricier">+</span> {{ translations.pricier|default('Droższa') }}</span>
    <span class="comp-legend-item comp-legend-no-data"><span class="comp-icon comp-icon-no-data">?</span> {{ translations.no_data|default('Brak danych') }}</span>
</div>

{# ── Filtr okresów dostępności ── #}
<div class="availability-periods-bar mb-3">
    <div class="d-flex align-items-center gap-2 mb-2">
        <span class="text-muted" style="font-size:.8rem; font-weight:600;">
            <i class="bi bi-calendar-range me-1"></i>{{ translations.availability_periods|default('Okresy dostępności') }}:
        </span>
    </div>
    <div class="d-flex gap-2 flex-wrap">
        {# Badge "Wszystkie" #}
        <button class="period-badge period-badge-all active"
                data-period-id="all"
                onclick="filterByPeriod('all')">
            <span class="period-badge-icon">📦</span>
            <div class="period-badge-content">
                <div class="period-badge-name">{{ translations.all_products|default('Wszystkie produkty') }}</div>
            </div>
        </button>

        {# Badge "Bez okresu" #}
{#        <button class="period-badge period-badge-none"#}
{#                data-period-id="none"#}
{#                onclick="filterByPeriod('none')">#}
{#            <span class="period-badge-icon">📅</span>#}
{#            <div class="period-badge-content">#}
{#                <div class="period-badge-name">{{ translations.no_period|default('Bez okresu') }}</div>#}
{#                <div class="period-badge-dates">{{ translations.permanent|default('Stały asortyment') }}</div>#}
{#            </div>#}
{#        </button>#}

        {# Badges dla każdego okresu #}
        {% for period in active_periods %}
            {% set startDate = period.getStartDate() %}
            {% set endDate = period.getEndDate() %}
            {% set periodId = period.getId() %}
            {% set isActive = period.isActive() %}
            {% set isRecurring = period.isRecurring() %}
            {% set fullName = period.getName() %}

            {# Wyciągnij emoji z początku nazwy (jeśli jest) #}
            {% set emoji = '' %}
            {% set displayName = fullName %}
            {% if fullName matches '/^([\\x{1F300}-\\x{1F9FF}\\x{2600}-\\x{26FF}\\x{2700}-\\x{27BF}])\\s*(.+)$/u' %}
                {% set parts = fullName|split(' ', 2) %}
                {% set emoji = parts[0] %}
                {% set displayName = parts[1]|default(fullName) %}
            {% endif %}

            {# Sprawdź czy ten okres jest aktualny #}
            {% set today = 'now'|date('Y-m-d') %}
            {% set isCurrent = false %}

            {% if isRecurring %}
                {# Dla recurring: porównuj tylko dzień i miesiąc (ignoruj rok) #}
                {% set todayMD = 'now'|date('m-d') %}
                {% set startMD = startDate|date('m-d') %}
                {% set endMD = endDate|date('m-d') %}

                {# Obsługa przypadku gdy okres przechodzi przez koniec roku (np. 12-15 do 01-15) #}
                {% if startMD <= endMD %}
                    {% set isCurrent = (todayMD >= startMD and todayMD <= endMD) %}
                {% else %}
                    {% set isCurrent = (todayMD >= startMD or todayMD <= endMD) %}
                {% endif %}
            {% else %}
                {# Dla non-recurring: standardowe porównanie z pełną datą #}
                {% set isCurrent = (today >= startDate and today <= endDate) %}
            {% endif %}

            <button class="period-badge {{ isCurrent ? 'period-badge-current active' : '' }}"
                    data-period-id="{{ periodId }}"
                    data-start-date="{{ startDate }}"
                    data-end-date="{{ endDate }}"
                    data-is-current="{{ isCurrent ? '1' : '0' }}"
                    data-is-recurring="{{ isRecurring ? '1' : '0' }}"
                    onclick="filterByPeriod({{ periodId }})">
                <span class="period-badge-icon">{{ emoji|default('🗓️')|raw }}</span>
                <div class="period-badge-content">
                    <div class="period-badge-name">{{ displayName|default(fullName) }}</div>
                    <div class="period-badge-dates">
                        {% if isRecurring %}
                            {# Dla recurring: wyświetl tylko dzień i miesiąc #}
                            {{ startDate|date('d.m') }} - {{ endDate|date('d.m') }}
                        {% else %}
                            {# Dla non-recurring: wyświetl pełną datę z rokiem #}
                            {{ startDate|date('d.m.Y') }} - {{ endDate|date('d.m.Y') }}
                        {% endif %}
                        {% if isRecurring %}
                            <span class="period-recurring-icon" title="{{ translations.recurring_period|default('Okres powtarzalny') }}">↻</span>
                        {% endif %}
                    </div>
                </div>
                {% if isCurrent %}
                    <span class="period-current-indicator">{{ translations.current|default('Aktualny') }}</span>
                {% endif %}
            </button>
        {% endfor %}
    </div>
    <div class="mt-2">
        <small class="text-muted" style="font-size: 0.7rem;">
            <i class="bi bi-info-circle me-1"></i>{{ translations.price_applies_to_all_periods|default('Uwaga: Jeśli produkt znajduje się w wielu okresach dostępności, ustalona cena dotyczy wszystkich z nich') }}
        </small>
    </div>
</div>

{# ── Tabela produktów ── #}
    <span class="comp-legend-item comp-legend-cheaper">&#8595; {{ translations.cheaper_than_competitors|default('Niższa niż min') }}</span>
    <span class="comp-legend-item comp-legend-in-range">&#8596; {{ translations.within_competitor_range|default('W przedziale') }}</span>
    <span class="comp-legend-item comp-legend-pricier">&#8593; {{ translations.pricier_than_competitors|default('Wyższa niż max') }}</span>
    <span class="comp-legend-item comp-legend-no-data">&mdash; {{ translations.no_competitor_data|default('Brak danych') }}</span>
</div>
{# ── Karta tabeli ── #}
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive-sticky">
            <table class="table table-hover table-pricing table-sticky mb-0">
                <thead>
                <tr>
                    <th style="width:22%">{{ translations.product }}</th>
                    <th class="text-center" style="width:9%">{{ translations.gross_cost|default('Koszt prod.') }}</th>
                    <th class="text-center" style="width:6%">{{ translations.tax_value_perc_short|default('VAT') }}</th>
                    <th class="text-center" style="width:16%">{{ translations.current_sale_price_gross|default('Cena sprzedaży') }}</th>
                    <th class="text-center" style="width:9%">{{ translations.max_sale_price_gross|default('Maks. cena') }}</th>
                    <th class="text-center" style="width:8%">
                        {{ translations.marge_gross|default('Marża') }}
                        <div style="font-size:.65rem; font-weight:400; color:#9ca3af; white-space:nowrap">
                            {{ translations.real|default('realna') }} / {{ translations.expected|default('oczekiwana') }}
                        </div>
                    </th>
                    <th class="text-center" style="width:19%">{{ translations.competitor_price|default('Cena konkurencji') }}</th>
                    <th style="width:11%">{{ translations.in_stock|default('Stan') }}</th>
                </tr>
                </thead>
                <tbody>
                {% if products is not empty %}
                    {% set last_id_category = null %}
                    {% for product in products %}
                        {# ── Nagłówek kategorii ── #}
                        {% if last_id_category != product.idCategory %}
                            {# Statystyki z PHP (O(1) lookup) #}
                            {% set catStats = categoryCompetitorStats[product.idCategory] ?? {'total': 0, 'with_data': 0, 'avg_marge': null, 'below_expected': 0} %}
                            <tr class="cat-header-row category_row_header_{{ product.idCategory }}"
                                data-cat-id="{{ product.idCategory }}"
                                onclick="showHideRow('cat{{ product.idCategory }}')">
                                <td colspan="6" class="cat-name-cell">
                                    <div class="d-flex align-items-center gap-2">
                                        <i class="bi bi-chevron-right cat-toggle-icon flex-shrink-0"></i>
                                        <span class="fw-semibold cat-name-text">{{ product.categoryName }}</span>
                                        {# .category-warning wstawiany przez JS trafi tutaj (po nazwie) #}
                                    </div>
                                </td>
                                <td colspan="2">
                                    {# Prawa strona: średnia marża + badge z danymi konkurencji #}
                                    <div class="d-flex align-items-center justify-content-end gap-2">
                                        {# Produkty poniżej oczekiwanej marży #}
                                        {% if catStats.below_expected > 0 %}
                                            <span class="cat-comp-badge cat-marge-negative"
                                                  title="{{ catStats.below_expected }} produktów poniżej oczekiwanej marży">
                                                <i class="bi bi-exclamation-triangle me-1"></i>{{ catStats.below_expected }}
                                            </span>
                                        {% endif %}
                                        {# Średnia marża kategorii #}
                                        {% if catStats.avg_marge is not null %}
                                            <span class="cat-comp-badge {% if catStats.avg_marge > 0 %}cat-marge-positive{% elseif catStats.avg_marge < 0 %}cat-marge-negative{% else %}cat-marge-zero{% endif %}">
                                                ø {{ catStats.avg_marge }}%
                                            </span>
                                        {% endif %}
                                        {# Badge z danymi konkurencji #}
                                        {% if catStats.with_data > 0 %}
                                            <span class="cat-comp-badge cat-comp-badge-has"
                                                  title="{{ catStats.with_data }}/{{ catStats.total }} produktów z danymi konkurencji">
                                                <i class="bi bi-graph-up me-1"></i>{{ catStats.with_data }}/{{ catStats.total }}
                                            </span>
                                        {% else %}
                                            <span class="cat-comp-badge cat-comp-badge-none">
                                                <i class="bi bi-dash me-1"></i>{{ translations.no_competitor_data|default('Brak danych') }}
                                            </span>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        {% endif %}
                        {# ── Wiersz produktu ── #}
                        {% set cp = competitorPriceIndex[product.id] ?? null %}
                        {% set myPriceVal = product.portionPrice|default(0) * 1 %}

                        {# Wyznacz klasę statusu i wiersza #}
                        {% if cp is null %}
                            {% set rowClass    = '' %}
                            {% set iconClass   = 'comp-icon-no-data' %}
                            {% set iconSymbol  = '&mdash;' %}
                        {% elseif myPriceVal <= cp.min %}
                            {% set rowClass    = 'row-cheaper' %}
                            {% set iconClass   = 'comp-icon-cheaper' %}
                            {% set iconSymbol  = '&#8595;' %}
                        {% elseif myPriceVal > cp.max %}
                            {% set rowClass    = 'row-pricier' %}
                            {% set iconClass   = 'comp-icon-pricier' %}
                            {% set iconSymbol  = '&#8593;' %}
                        {% else %}
                            {% set rowClass    = 'row-in-range' %}
                            {% set iconClass   = 'comp-icon-in-range' %}
                            {% set iconSymbol  = '&#8596;' %}
                        {% endif %}

                        <tr class="cat{{ product.idCategory }} hideRow {{ rowClass }}"
                            data-product-id="{{ product.id }}"
                            data-period-ids="{% for period in product.availabilityPeriods %}{{ period.id }}{% if not loop.last %},{% endif %}{% endfor %}">
                            {# Nazwa #}
                            <td>{{ product.name }}</td>
                            {# Koszt produkcji #}
                            <td class="text-center{% if product.recipeCostGross > product.maxPortionPrice %} text-danger{% endif %}">
                                {{ product.recipeCostGross }}
                            </td>
                            {# VAT #}
                            <td class="text-center">{{ product.taxValPerc }}%</td>
                            {# Cena sprzedaży – edytowalna #}
                            <td>
                                <div class="input-group input-group-sm input-group-price mx-auto"
                                     data-product-id="{{ product.id }}"
                                     data-max-price="{{ product.maxPortionPrice }}">
                                    <input type="number" class="form-control text-end" name="portion_price"
                                           value="{{ product.portionPrice }}" step="0.01" min="0" disabled
                                           aria-label="{{ translations.current_sale_price|default('Cena sprzedaży') }}">
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="enableEdit(this)">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <button type="button" class="btn btn-success btn-sm d-none" onclick="saveEdit(this)">
                                        <i class="bi bi-check-lg"></i>
                                    </button>
                                </div>
                            </td>
                            {# Cena maksymalna #}
                            <td class="text-center">{{ product.maxPortionPrice }}</td>
                            {# Marża realna + oczekiwana #}
                            <td class="text-center">
                                {% set marge         = product.calcMarge %}
                                {% set expMarge      = product.expectedMargin %}
                                {% set margeReal     = marge * 1 %}
                                {% set margeExp      = expMarge is not null ? expMarge * 1 : null %}

                                <div class="marge-cell">
                                    {# Marża realna #}
                                    <span class="marge-real {% if margeReal > 0 %}marge-positive{% elseif margeReal == 0 %}marge-zero{% else %}marge-negative{% endif %}">
                                        {{ margeReal }}%
                                    </span>

                                    {# Linia oczekiwanej marży + delta — tylko jeśli ustawiona #}
                                    {% if margeExp is not null %}
                                        {% set delta = margeReal - margeExp %}
                                        {% if delta >= 0 %}
                                            {% set deltaClass = 'marge-delta-ok' %}
                                            {% set deltaIcon  = '&#8593;' %}
                                        {% elseif delta >= -5 %}
                                            {% set deltaClass = 'marge-delta-warn' %}
                                            {% set deltaIcon  = '&#8594;' %}
                                        {% else %}
                                            {% set deltaClass = 'marge-delta-bad' %}
                                            {% set deltaIcon  = '&#8595;' %}
                                        {% endif %}

                                        <span class="marge-expected-line {{ deltaClass }}"
                                              title="{{ translations.expected_margin|default('Oczekiwana') }}: {{ margeExp }}%">
                                            <span class="marge-delta-icon">{{ deltaIcon|raw }}</span>
                                            <span class="marge-expected-val">{{ margeExp }}%</span>
                                        </span>
                                    {% endif %}
                                </div>
                            </td>
                            {# Cena konkurencji — ikona + dane #}
                            <td class="comp-cell">
                                {# Ikona statusu po lewej #}
                                <span class="comp-icon {{ iconClass }}">{{ iconSymbol|raw }}</span>

                                {% if cp is not null %}
                                    {# Dane po prawej: zakres + max 2 obserwacje #}
                                    <span class="comp-data">
                                        {# Linia z zakresem #}
                                        <span class="comp-range-line">
                                            {% if cp.min == cp.max %}
                                                {{ cp.min|number_format(2, '.', ',') }}
                                            {% else %}
                                                {{ cp.min|number_format(2, '.', ',') }}&nbsp;&ndash;&nbsp;{{ cp.max|number_format(2, '.', ',') }}
                                            {% endif %}
                                        </span>
                                        {# Max 2 obserwacje: min i max (jeśli różne) #}
                                        <span class="comp-obs-block">
                                            {# Obserwacja z najniższą ceną #}
                                            {% set minEntry = cp.min_entry %}
                                            {% set minGap   = myPriceVal - (minEntry.price|default(0) * 1) %}
                                            <span class="comp-obs-row">
                                                <span class="comp-obs-name" title="{{ minEntry.name }}">{{ minEntry.name }}</span>
                                                <span class="comp-obs-price comp-obs-min">{{ (minEntry.price|default(0) * 1)|number_format(2, '.', ',') }}</span>
                                                {% if minGap > 0 %}
                                                    <span class="comp-gap-pill comp-gap-up">+{{ minGap|number_format(2, '.', ',') }}</span>
                                                {% elseif minGap < 0 %}
                                                    <span class="comp-gap-pill comp-gap-down">{{ minGap|number_format(2, '.', ',') }}</span>
                                                {% else %}
                                                    <span class="comp-gap-pill comp-gap-zero">=</span>
                                                {% endif %}
                                            </span>
                                            {# Obserwacja z najwyższą ceną — tylko jeśli różna od min #}
                                            {% if cp.min != cp.max %}
                                                {% set maxEntry = cp.max_entry %}
                                                {% set maxGap   = myPriceVal - (maxEntry.price|default(0) * 1) %}
                                                <span class="comp-obs-row">
                                                    <span class="comp-obs-name" title="{{ maxEntry.name }}">{{ maxEntry.name }}</span>
                                                    <span class="comp-obs-price comp-obs-max">{{ (maxEntry.price|default(0) * 1)|number_format(2, '.', ',') }}</span>
                                                    {% if maxGap > 0 %}
                                                        <span class="comp-gap-pill comp-gap-up">+{{ maxGap|number_format(2, '.', ',') }}</span>
                                                    {% elseif maxGap < 0 %}
                                                        <span class="comp-gap-pill comp-gap-down">{{ maxGap|number_format(2, '.', ',') }}</span>
                                                    {% else %}
                                                        <span class="comp-gap-pill comp-gap-zero">=</span>
                                                    {% endif %}
                                                </span>
                                            {% endif %}
                                        </span>
                                        {# Liczba wszystkich obserwacji jeśli > 2 #}
                                        {% if cp.count > 2 %}
                                            <span class="comp-count-note">{{ cp.count }} {{ translations.observations|default('obs.') }}</span>
                                        {% endif %}
                                    </span>
                                {% endif %}
                            </td>
                            {# Stan magazynowy – edytowalny #}
                            <td>
                                <div class="input-group input-group-sm input-group-stock"
                                     data-product-id="{{ product.id }}">
                                    <input type="number" class="form-control text-end" name="in_stock"
                                           value="{{ product.inStock }}" min="0" step="1" disabled
                                           aria-label="{{ translations.in_stock|default('Stan') }}">
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="enableEdit(this)">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <button type="button" class="btn btn-success btn-sm d-none" onclick="saveEdit(this)">
                                        <i class="bi bi-check-lg"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {% set last_id_category = product.idCategory %}
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="8" class="text-center text-muted py-5">
                            <i class="bi bi-inbox fs-3 d-block mb-2"></i>
                            {{ translations.no_data|default('Brak danych') }}
                        </td>
                    </tr>
                {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{# ── Modal generatora cennika ── #}
<div class="modal fade" id="priceListCategorySelectorModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ translations.select_category|default('Wybierz kategorię') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="priceListCategoryForm">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">{{ translations.price_list_type|default('Typ cennika') }}</label>
                        <select class="form-select form-select-sm" id="price_list_type">
                            <option value="b2b">{{ translations.b2b_price_list|default('B2B') }}</option>
                            <option value="shop">{{ translations.shop_price_list|default('Sklep') }}</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">{{ translations.language|default('Język') }}</label>
                        <select class="form-select form-select-sm" id="price_list_lang">
                            <option value="fr">{{ translations.french }}</option>
                            <option value="nl">{{ translations.dutch }}</option>
                            <option value="it">{{ translations.italian }}</option>
                            <option value="pl">{{ translations.polish }}</option>
                            <option value="en">{{ translations.english }}</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <label class="form-label fw-semibold mb-0">{{ translations.date|default('Data') }}</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="price_list_date_toggle" checked>
                                <label class="form-check-label small text-muted" for="price_list_date_toggle">
                                    {{ translations.specific_date|default('Konkretna data') }}
                                </label>
                            </div>
                        </div>
                        <input type="date" id="price_list_date" class="form-control form-control-sm" value="{{ dateTo }}">
                        <small class="text-muted" id="price_list_date_help">
                            {{ translations.price_list_date_help|default('Wyłącz przełącznik dla listy cenowej ogólnej') }}
                        </small>
                    </div>
                    <div class="mb-1">
                        <label class="form-label fw-semibold">{{ translations.category }}</label>
                        <div class="alert alert-info py-2 px-3 mb-2" role="alert">
                            <small>
                                <i class="bi bi-info-circle me-1"></i>
                                <span id="category_list_info">
                                    {{ translations.price_list_category_info|default('Lista zawiera wszystkie kategorie z przypisanymi produktami. Przy generowaniu według daty lista zostanie automatycznie przefiltrowana.') }}
                                </span>
                            </small>
                        </div>
                        <hr class="mt-1 mb-2">
                        {% if categories is not empty %}
                            <div class="category-checkbox-list">
                                {% for category in categories %}
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox"
                                               name="category_ids[]"
                                               id="category_{{ category.id }}"
                                               value="{{ category.id }}" checked>
                                        <label class="form-check-label" for="category_{{ category.id }}">{{ category.name }}</label>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <p class="text-muted small">{{ translations.no_data|default('Brak danych') }}</p>
                        {% endif %}
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ translations.close }}</button>
                <button type="button" class="btn btn-primary btn-sm" id="generatePriceListBtn">
                    <i class="bi bi-download me-1"></i>{{ translations.generate }}
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    highlightZeroMaxPrices();
});
/* ── Filtrowanie według okresu dostępności ── */
let currentPeriodFilter = 'all';

function filterByPeriod(periodId) {
    currentPeriodFilter = periodId;
    console.log('Filtrowanie według okresu:', periodId);

    // Aktualizuj aktywny badge
    document.querySelectorAll('.period-badge').forEach(badge => {
        badge.classList.remove('active');
    });
    const activeBadge = document.querySelector(`.period-badge[data-period-id="${periodId}"]`);
    if (activeBadge) {
        activeBadge.classList.add('active');
    }

    // Filtruj produkty
    const allProductRows = document.querySelectorAll('tbody tr:not(.cat-header-row)');
    const categoriesToHide = new Set();
    const categoriesToShow = new Set();

    allProductRows.forEach(row => {
        const periodIds = row.dataset.periodIds || '';
        const categoryMatch = row.className.match(/\bcat(\d+)\b/);
        const categoryId = categoryMatch ? categoryMatch[1] : null;

        let shouldShow = false;

        if (periodId === 'all') {
            // Pokaż wszystkie produkty
            shouldShow = true;
        } else if (periodId === 'none') {
            // Pokaż tylko produkty BEZ okresów dostępności
            shouldShow = periodIds === '';
        } else {
            // Pokaż produkty z konkretnym okresem
            const periods = periodIds.split(',').filter(p => p.trim() !== '');
            shouldShow = periods.includes(String(periodId));
        }

        if (shouldShow) {
            row.classList.remove('hideRow');
            if (categoryId) categoriesToShow.add(categoryId);
        } else {
            row.classList.add('hideRow');
            if (categoryId) categoriesToHide.add(categoryId);
        }
    });

    // Pokaż/ukryj nagłówki kategorii
    // Kategoria jest widoczna jeśli ma przynajmniej jeden widoczny produkt
    document.querySelectorAll('.cat-header-row').forEach(headerRow => {
        const catId = headerRow.dataset.catId;
        if (!catId) return;

        // Sprawdź czy kategoria ma jakieś widoczne produkty
        const visibleProducts = document.querySelectorAll(`.cat${catId}:not(.hideRow):not(.cat-header-row)`);

        if (visibleProducts.length > 0) {
            headerRow.classList.remove('hideRow');
        } else {
            headerRow.classList.add('hideRow');
        }
    });

    // Przelicz ostrzeżenia o zerowych cenach tylko dla widocznych produktów
    highlightZeroMaxPrices();
}

// Ustaw domyślny filtr przy ładowaniu strony (aktualny okres lub "wszystkie")
document.addEventListener('DOMContentLoaded', function() {
    // Znajdź aktualny okres (z data-is-current="1")
    const currentPeriodBadge = document.querySelector('.period-badge[data-is-current="1"]');

    if (currentPeriodBadge) {
        const periodId = currentPeriodBadge.dataset.periodId;
        console.log('Znaleziono aktualny okres:', periodId);
        filterByPeriod(periodId);
    } else {
        // Jeśli nie ma aktualnego okresu, pokaż wszystkie
        console.log('Brak aktualnego okresu - pokazuję wszystkie produkty');
        filterByPeriod('all');
    }
});

/* ── Filtr dat ── */
function applyDateFilter() {
    const date = document.getElementById('filterDate').value;
    const url  = new URL(window.location.href);
    url.searchParams.set('date', date);
    window.location.href = url.toString();
}
/* ── Pokaż/ukryj wiersze kategorii ── */
function showHideRow(catClass) {
    const rows   = document.querySelectorAll('tr.' + catClass + ':not(.cat-header-row)');
    const header = document.querySelector('.category_row_header_' + catClass.replace('cat', ''));
    const icon   = header ? header.querySelector('.cat-toggle-icon') : null;
    const isHidden = rows.length > 0 && rows[0].classList.contains('hideRow');
    rows.forEach(r => r.classList.toggle('hideRow', !isHidden));
    if (icon) icon.classList.toggle('open', isHidden);
}
/* ── Ostrzeżenia o zerowych cenach ── */
function highlightZeroMaxPrices() {
    const rows = document.querySelectorAll('tbody tr:not(.cat-header-row)');
    let count = 0;
    const categoriesWithZero = new Set();
    rows.forEach(row => {
        const input = row.querySelector('input[name="portion_price"]');
        const match = row.className.match(/\bcat(\d+)\b/);
        const categoryId = match ? match[1] : null;
        if (input && parseFloat(input.value) === 0) {
            row.classList.add('highlight-zero');
            if (categoryId) categoriesWithZero.add(categoryId);
            count++;
        } else {
            row.classList.remove('highlight-zero');
        }
    });
    document.querySelectorAll('.category-warning').forEach(el => el.remove());
    categoriesWithZero.forEach(id => {
        const headerRow = document.querySelector('.category_row_header_' + id);
        if (headerRow) {
            const nameText = headerRow.querySelector('.cat-name-text');
            if (nameText && !nameText.parentElement.querySelector('.category-warning')) {
                const icon = document.createElement('span');
                icon.className = 'category-warning';
                icon.innerHTML = '&#9888;';
                nameText.insertAdjacentElement('afterend', icon);
            }
        }
    });
    const existingAlert = document.querySelector('.alert-price-warning');
    if (count > 0) {
        if (!existingAlert) {
            showZeroPriceWarning(count);
        } else {
            const countEl = existingAlert.querySelector('.count-text');
            if (countEl) countEl.textContent = count;
        }
    } else if (existingAlert) {
        existingAlert.remove();
    }
}
function showZeroPriceWarning(count) {
    const container = document.querySelector('.card-body');
    if (!container) return;
    const alertEl = document.createElement('div');
    alertEl.className = 'alert alert-warning text-center alert-price-warning mb-0 rounded-0 border-0 border-bottom';
    alertEl.innerHTML = '&#9888; {{ translations.number_of_products_without_fixed_price|default("Produkty bez ustalonej ceny") }}: <strong class="count-text">' + count + '</strong>';
    container.insertBefore(alertEl, container.firstChild);
}
/* ── Modal generatora cennika ── */
function runPriceListCategorySelectorModal() {
    const modal = new bootstrap.Modal(document.getElementById('priceListCategorySelectorModal'));
    modal.show();

    // Obsługa switcha daty
    const dateToggle = document.getElementById('price_list_date_toggle');
    const dateInput = document.getElementById('price_list_date');
    const dateHelp = document.getElementById('price_list_date_help');
    const categoryInfo = document.getElementById('category_list_info');

    function updateDateField() {
        if (dateToggle.checked) {
            dateInput.disabled = false;
            dateInput.classList.remove('text-muted');
            dateHelp.textContent = '{{ translations.price_list_date_help|default("Wyłącz przełącznik dla listy cenowej ogólnej") }}';
            if (categoryInfo) {
                categoryInfo.textContent = '{{ translations.price_list_category_info_with_date|default("Lista kategorii zostanie automatycznie przefiltrowana do produktów dostępnych w wybranej dacie.") }}';
            }
        } else {
            dateInput.disabled = true;
            dateInput.classList.add('text-muted');
            dateHelp.textContent = '{{ translations.price_list_general_help|default("Lista cenowa ogólna (bez konkretnej daty)") }}';
            if (categoryInfo) {
                categoryInfo.textContent = '{{ translations.price_list_category_info_general|default("Lista zawiera wszystkie kategorie z przypisanymi produktami.") }}';
            }
        }
    }

    dateToggle.addEventListener('change', updateDateField);
    updateDateField(); // Inicjalizacja

    document.getElementById('generatePriceListBtn').onclick = function () {
        const form     = document.getElementById('priceListCategoryForm');
        const selected = Array.from(form.querySelectorAll('input[name="category_ids[]"]:checked')).map(el => el.value);
        const lang     = document.getElementById('price_list_lang').value;
        const type     = document.getElementById('price_list_type').value;
        const date     = dateToggle.checked ? dateInput.value : '';
        if (selected.length === 0) {
            alert('{{ translations.please_select_category|default("Wybierz przynajmniej jedną kategorię") }}');
            return;
        }
        try {
            downloadPdf('/ajax/products/price-list/document', { category_ids: selected, type, lang_code: lang, date }, 'price_list.pdf', 'POST');
            modal.hide();
        } catch (e) {
            console.error(e);
            alert('Error: ' + e.message);
        }
    };
}
/* ── Edycja inline ── */
function enableEdit(btn) {
    const group   = btn.closest('.input-group');
    const input   = group.querySelector('input');
    const saveBtn = group.querySelector('.btn-success');
    input.disabled = false;
    input.focus();
    if (input.select) input.select();
    btn.classList.add('d-none');
    if (saveBtn) saveBtn.classList.remove('d-none');
}
function disableEdit(btn) {
    const group   = btn.closest('.input-group');
    const input   = group.querySelector('input');
    const editBtn = group.querySelector('.btn-outline-secondary');
    const saveBtn = group.querySelector('.btn-success');
    input.blur();
    try { if (typeof input.setSelectionRange === 'function') input.setSelectionRange(0, 0); } catch (e) {}
    input.disabled = true;
    if (editBtn) editBtn.classList.remove('d-none');
    if (saveBtn) saveBtn.classList.add('d-none');
}
function saveEdit(btn) {
    const group     = btn.closest('.input-group');
    const input     = group.querySelector('input');
    const idProduct = group.dataset.productId;
    let p;
    if (input.name === 'portion_price') {
        const maxPrice = parseFloat(group.dataset.maxPrice || 0);
        if (maxPrice > 0 && parseFloat(input.value) > maxPrice) {
            input.value = maxPrice;
        }
        p = updatePrice(idProduct, input);
    } else if (input.name === 'in_stock') {
        p = updateInventory(idProduct, input);
    }
    Promise.resolve(p).finally(function () {
        disableEdit(btn);
        const row = btn.closest('tr');
        if (row) calcMarge(row);
        highlightZeroMaxPrices();
    });
}
function updatePrice(idProduct, control) {
    return api('/ajax/products/' + idProduct + '/price', {
        method: 'PATCH',
        data: { id_product: idProduct, portion_price: control.value }
    })
    .then(res => { showSnack(res.ok, res.ok ? null : res.description); return res; })
    .catch(err => err);
}
function updateInventory(idProduct, control) {
    return api('/ajax/products/' + idProduct + '/inventory', {
        method: 'PATCH',
        data: { in_stock: control.value }
    })
    .then(res => { showSnack(res.ok, res.ok ? null : res.description); return res; })
    .catch(err => err);
}
/* ── Przelicz marżę w wierszu (po inline-edit) ── */
function calcMarge(row) {
    const cells = row.cells;
    if (!cells || cells.length < 7) return;
    const priceInput   = cells[3].querySelector('input[name="portion_price"]');
    const portionPrice = Number(priceInput ? priceInput.value : 0) || 0;
    const cost         = Number(cells[1].innerText) || 0;
    const margeCell    = cells[5];
    let marge = 0;
    if (portionPrice > 0) {
        marge = ((portionPrice - cost) / portionPrice * 100).toFixed(0);
    }
    const cls = marge > 0 ? 'marge-positive' : (marge < 0 ? 'marge-negative' : 'marge-zero');
    margeCell.innerHTML = '<b class="' + cls + '">' + marge + '%</b>';
}
</script>
{% endblock %}