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

{% block title %}{{ translations.max_price_management|default('Zarządzanie maksymalnymi cenami') }}{% endblock %}

{% block head %}
    <style>
        /* ── sticky header ── */
        thead.stickyHeader th { position: sticky; top: 0; z-index: 10; }

        /* ── category rows ── */
        .category-header-row td {
            background: linear-gradient(90deg,#f0f4ff 0%,#f8f9ff 100%);
            font-weight: 700; font-size: .8rem; letter-spacing: .06em;
            text-transform: uppercase; color: #4a5568;
            border-top: 2px solid #d0d7f0;
            cursor: pointer; user-select: none; padding: 9px 14px;
        }
        .category-header-row:hover td { background: #e8edff; }
        .category-toggle-icon { transition: transform .2s; font-size: .75rem; }
        .category-toggle-icon.collapsed { transform: rotate(-90deg); }

        /* ── product rows ── */
        .product-row td { vertical-align: middle; padding: 9px 12px; font-size: .875rem; }
        .product-row.highlight-zero { background: #fff5f5 !important; }
        .product-row.highlight-zero td:first-child { border-left: 3px solid #fc8181; }

        /* ── grouped header ── */
        .table-pricing thead tr.header-groups th {
            background: #f1f5f9; color: #475569;
            font-size: .7rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: .07em; border-bottom: 0; padding: 6px 12px;
            white-space: nowrap;
        }
        .table-pricing thead tr.header-groups th.group-cost  { border-left: 3px solid #e2e8f0; }
        .table-pricing thead tr.header-groups th.group-margin { border-left: 3px solid #c7d2fe; background: #eef2ff; color: #3730a3; }
        .table-pricing thead tr.header-groups th.group-max   { border-left: 3px solid #bbf7d0; background: #f0fdf4; color: #166534; }
        .table-pricing thead tr.header-cols th {
            background: #f8fafc; color: #64748b;
            font-size: .72rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: .05em; border-bottom: 2px solid #e2e8f0;
            padding: 7px 12px; white-space: nowrap;
        }
        .table-pricing thead tr.header-cols th.col-cost  { border-left: 3px solid #e2e8f0; }
        .table-pricing thead tr.header-cols th.col-margin { border-left: 3px solid #c7d2fe; }
        .table-pricing thead tr.header-cols th.col-max   { border-left: 3px solid #bbf7d0; }
        .table-pricing td.col-cost  { border-left: 3px solid #e2e8f0; }
        .table-pricing td.col-margin { border-left: 3px solid #c7d2fe; background: #fafbff; }
        .table-pricing td.col-max   { border-left: 3px solid #bbf7d0; background: #fafffe; }

        /* ── margin badges ── */
        .marge-badge {
            display: inline-flex; align-items: center; justify-content: center;
            padding: 2px 9px; border-radius: 20px;
            font-size: .73rem; font-weight: 700; min-width: 52px;
        }
        .marge-good  { background: #d1fae5; color: #065f46; }
        .marge-ok    { background: #fef3c7; color: #92400e; }
        .marge-bad   { background: #fee2e2; color: #991b1b; }
        .marge-zero  { background: #f3f4f6; color: #9ca3af; }
        .marge-target{ background: #e0e7ff; color: #3730a3; }

        /* ── margin delta ── */
        .delta-positive { color: #059669; font-size: .7rem; font-weight: 600; }
        .delta-negative { color: #dc2626; font-size: .7rem; font-weight: 600; }

        /* ── price input ── */
        .price-input-group { max-width: 210px; }
        .price-input-group input { font-size: .875rem; text-align: right; }

        /* ── hint ── */
        .price-hint { font-size: .7rem; color: #94a3b8; margin-top: 3px; }
        .price-hint .hint-target { color: #4f46e5; font-weight: 600; }

        /* ── summary bar ── */
        .summary-bar {
            background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
            border-radius: 10px; color: #fff; padding: 14px 22px;
        }
        .summary-bar .stat-label { font-size: .7rem; opacity: .82; text-transform: uppercase; letter-spacing: .05em; }
        .summary-bar .stat-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
    </style>
{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.max_price_management|default('Zarządzanie maksymalnymi cenami produktów') }}</h3>
        <p class="text-subtitle text-muted">{{ translations.max_price_subtitle|default('Ustaw maksymalną cenę sprzedaży dla każdego produktu w systemie') }}</p>
    </div>
{% endblock %}

{% block content %}

{# ─── Pasek statystyk ─── #}
<div class="row mb-4">
    <div class="col-12">
        <div class="summary-bar d-flex flex-wrap gap-4 align-items-center">
            <div>
                <div class="stat-label">{{ translations.products|default('Produkty') }}</div>
                <div class="stat-value" id="stat-total">—</div>
            </div>
            <div class="border-start border-white border-opacity-25 ps-4">
                <div class="stat-label">{{ translations.without_max_price|default('Bez ceny maks.') }}</div>
                <div class="stat-value text-warning" id="stat-zero">—</div>
            </div>
            <div class="border-start border-white border-opacity-25 ps-4">
                <div class="stat-label">{{ translations.avg_margin_on_max_price|default('Śred. marża (cena maks.)') }}</div>
                <div class="stat-value" id="stat-avg-marge">—</div>
            </div>
        </div>
    </div>
</div>

{# ─── Karta główna ─── #}
<div class="card">
    <div class="card-header bg-white border-0 pb-0">
        <div class="row align-items-center g-2">
            <div class="col-md-6">
                <h4 class="card-title mb-0">{{ translations.product_list|default('Lista produktów') }}</h4>
                <small class="text-muted">{{ translations.pricing_subtitle_hint|default('Ustaw maksymalną cenę sprzedaży dla każdego produktu') }}</small>
            </div>
            <div class="col-md-3">
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class="icon dripicons-search"></i></span>
                    <input id="pricing-search" type="search" class="form-control" placeholder="{{ translations.search|default('Szukaj produktu...') }}">
                    <span class="input-group-text" id="clear-search" style="cursor:pointer" title="{{ translations.clear|default('Wyczyść') }}">
                        <i class="icon dripicons-cross"></i>
                    </span>
                </div>
            </div>
            <div class="col-md-3">
                <select id="marge-filter" class="form-select form-select-sm">
                    <option value="all">{{ translations.all_products|default('Wszystkie') }}</option>
                    <option value="zero">{{ translations.without_max_price|default('Bez ceny maks.') }}</option>
                    <option value="below_target">{{ translations.below_target_margin|default('Marża poniżej celu') }}</option>
                    <option value="low">{{ translations.low_margin|default('Niska marża (< 20%)') }}</option>
                    <option value="ok">{{ translations.ok_margin|default('Dobra marża (≥ 20%)') }}</option>
                </select>
            </div>
        </div>
    </div>

    <div class="card-content">
        <div class="card-body p-0">

            <div id="zero-price-alert" class="alert alert-warning mx-3 mt-3 d-none">
                <i class="icon dripicons-warning me-2"></i>
                <span id="zero-price-msg"></span>
            </div>

            {% if categories is defined and categories|length > 0 %}
            <div class="table-responsive">
                <table class="table table-hover table-pricing mb-0">
                    <thead class="stickyHeader">
                        {# ── Wiersz 1: grupy kolumn ── #}
                        <tr class="header-groups">
                            <th style="width:30%" rowspan="2" class="align-bottom">{{ translations.product|default('Produkt') }}</th>
                            <th style="width:12%" colspan="2" class="text-center group-cost">{{ translations.cost_section|default('Koszt') }}</th>
                            <th style="width:10%" rowspan="2" class="text-center group-margin align-bottom">{{ translations.expected_margin_section|default('Oczek. marża') }}</th>
                            <th style="width:28%" colspan="2" class="text-center group-max">{{ translations.max_price_section|default('Maksymalna cena') }}</th>
                        </tr>
                        {# ── Wiersz 2: nazwy kolumn ── #}
                        <tr class="header-cols">
                            <th class="text-end col-cost"   style="width:10%">{{ translations.production_cost|default('Koszt prod.') }}</th>
                            <th class="text-center col-cost" style="width:8%">{{ translations.vat|default('VAT') }}</th>
                            <th class="text-end   col-max"  style="width:14%">{{ translations.max_sale_price|default('Maks. cena') }}</th>
                            <th class="text-center col-max"  style="width:10%">{{ translations.margin_on_max|default('Marża') }}</th>
                        </tr>
                    </thead>
                    <tbody id="pricing-tbody">

                    {% for category in categories %}
                        <tr class="category-header-row" data-cat-id="{{ category.id }}" onclick="toggleCategory('{{ category.id }}')">
                            <td colspan="6">
                                <span class="category-toggle-icon me-2" id="toggle-icon-{{ category.id }}">▼</span>
                                {{ category.name }}
                                <span class="badge bg-secondary ms-2 fw-normal">{{ category.products|length }}</span>
                                <span class="badge bg-danger ms-1 fw-normal d-none" id="cat-warn-{{ category.id }}">
                                    <i class="icon dripicons-warning"></i>
                                </span>
                            </td>
                        </tr>

                        {% for product in category.products %}
                        {%- set raw        = product.getRecipeCostGross()|default(0) -%}
                        {%- set maxP       = product.getMaxPortionPrice()|default(0) -%}
                        {%- set expMargin  = product.getExpectedMargin()|default(0) -%}
                        {%- set margeOnMax = product.calcMargeOnMaxPrice() -%}
                        {%- set targetPrice = product.getTargetPriceForExpectedMargin() -%}

                        <tr class="product-row cat-{{ category.id }}"
                            data-product-id="{{ product.getId() }}"
                            data-category-id="{{ category.id }}"
                            data-name="{{ product.getName()|lower }}"
                            data-max-price="{{ maxP }}"
                            data-raw="{{ raw }}"
                            data-exp-margin="{{ expMargin }}">

                            {# ── Nazwa ── #}
                            <td>
                                <span class="fw-medium">{{ product.getName() }}</span>
                                {% if product.getIsVegetarian() %}
                                    <span class="ms-1" title="{{ translations.vegetarian|default('Wegetariański') }}">🌿</span>
                                {% endif %}
                            </td>

                            {# ── Koszt produkcji ── #}
                            <td class="text-end col-cost">
                                {% if raw > 0 %}
                                    <span class="fw-medium">{{ raw|number_format(2, ',', ' ') }}</span>
                                {% else %}
                                    <span class="text-muted">—</span>
                                {% endif %}
                            </td>

                            {# ── VAT ── #}
                            <td class="text-center col-cost">
                                <span class="badge bg-light text-secondary border">{{ product.getTaxValPerc() }}%</span>
                            </td>

                            {# ── Oczekiwana marża ── #}
                            <td class="text-center col-margin">
                                {% if expMargin > 0 %}
                                    <span class="marge-badge marge-target"
                                          data-bs-toggle="tooltip"
                                          title="{{ translations.expected_margin_tooltip|default('Oczekiwana marża dla tego produktu') }}">
                                        {{ expMargin|number_format(0, ',', ' ') }}%
                                    </span>
                                {% else %}
                                    <span class="text-muted">—</span>
                                {% endif %}
                            </td>

                            {# ── Maks. cena sprzedaży (edytowalna) ── #}
                            <td class="col-max">
                                <div class="input-group input-group-sm price-input-group">
                                    <input type="number"
                                           class="form-control max-price-input"
                                           name="max_portion_price"
                                           value="{{ maxP }}"
                                           min="0" step="0.01"
                                           disabled>
                                    <button type="button" class="btn btn-outline-secondary btn-edit" onclick="enableEdit(this)" title="{{ translations.edit|default('Edytuj') }}">
                                        <i class="icon dripicons-pencil"></i>
                                    </button>
                                    <button type="button" class="btn btn-success btn-save d-none" onclick="saveChanges({{ product.getId() }}, this)" title="{{ translations.save|default('Zapisz') }}">
                                        <i class="icon dripicons-checkmark"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-danger btn-cancel d-none" onclick="cancelEdit(this)" title="{{ translations.cancel|default('Anuluj') }}">
                                        <i class="icon dripicons-cross"></i>
                                    </button>
                                </div>
                                {# Podpowiedź: cena wyliczona z oczekiwanej marży #}
                                {% if targetPrice is not null %}
                                <div class="price-hint ps-1">
                                    <span class="hint-target">
                                        <i class="icon dripicons-arrow-thin-right"></i>
                                        {{ translations.for_expected_margin|default('Dla') }} {{ expMargin|number_format(0) }}%: {{ targetPrice|number_format(2, ',', ' ') }}
                                    </span>
                                </div>
                                {% endif %}
                            </td>

                            {# ── Marża od ceny maks. ── #}
                            <td class="text-center col-max cell-marge">
                                {% if margeOnMax is not null %}
                                    {%- set margeRounded = margeOnMax|round(0) -%}
                                    {%- set cls = margeRounded >= 50 ? 'marge-good' : (margeRounded >= 20 ? 'marge-ok' : 'marge-bad') -%}
                                    <span class="marge-badge {{ cls }}">{{ margeRounded }}%</span>
                                    {# delta względem oczekiwanej #}
                                    {% if expMargin > 0 %}
                                        {%- set delta = margeRounded - expMargin|round(0) -%}
                                        <div class="{{ delta >= 0 ? 'delta-positive' : 'delta-negative' }}">
                                            {{ delta >= 0 ? '+' : '' }}{{ delta }}pp
                                        </div>
                                    {% endif %}
                                {% else %}
                                    <span class="marge-badge marge-zero">—</span>
                                {% endif %}
                            </td>

                        </tr>
                        {% endfor %}
                    {% endfor %}

                    </tbody>
                </table>
            </div>

            <div id="empty-filter-state" class="text-center py-5 d-none">
                <i class="icon dripicons-search" style="font-size:2rem;color:#cbd5e1"></i>
                <p class="text-muted mt-2">{{ translations.no_results|default('Brak wyników dla podanych filtrów') }}</p>
                <button class="btn btn-light btn-sm mt-1" onclick="resetFilters()">{{ translations.reset_filters|default('Resetuj filtry') }}</button>
            </div>

            {% else %}
            <div class="text-center py-5">
                <i class="icon dripicons-box" style="font-size:3rem;color:#cbd5e1"></i>
                <h5 class="mt-3 text-muted">{{ translations.no_products|default('Brak produktów') }}</h5>
            </div>
            {% endif %}

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

{# ── Legenda ── #}
<div class="row mt-3">
    <div class="col-12">
        <div class="d-flex flex-wrap gap-3 align-items-center small text-muted px-1">
            <span class="fw-semibold">{{ translations.legend|default('Legenda:') }}</span>
            <span><span class="marge-badge marge-good me-1">≥50%</span>{{ translations.legend_good|default('Wysoka marża') }}</span>
            <span><span class="marge-badge marge-ok   me-1">20-49%</span>{{ translations.legend_ok|default('Dobra marża') }}</span>
            <span><span class="marge-badge marge-bad  me-1">&lt;20%</span>{{ translations.legend_bad|default('Niska marża') }}</span>
            <span><span class="marge-badge marge-target me-1">—%</span>{{ translations.legend_target|default('Oczekiwana marża') }}</span>
            <span class="delta-positive">+Xpp</span> / <span class="delta-negative">−Xpp</span>
            <span>{{ translations.legend_delta|default('odchylenie od oczekiwanej marży') }}</span>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
document.addEventListener("DOMContentLoaded", function () {
    updateStats();
    document.getElementById('pricing-search').addEventListener('input', applyFilters);
    document.getElementById('marge-filter').addEventListener('change', applyFilters);
    document.getElementById('clear-search').addEventListener('click', function () {
        document.getElementById('pricing-search').value = '';
        applyFilters();
    });
    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el));
});

function toggleCategory(catId) {
    const rows = document.querySelectorAll(`.cat-${catId}`);
    const icon = document.getElementById(`toggle-icon-${catId}`);
    const isVisible = rows.length > 0 && !rows[0].classList.contains('d-none');
    rows.forEach(r => r.classList.toggle('d-none', isVisible));
    if (icon) icon.classList.toggle('collapsed', isVisible);
}

function enableEdit(btn) {
    const group = btn.closest('.input-group');
    const input = group.querySelector('input');
    input._originalValue = input.value;
    input.disabled = false;
    input.focus();
    if (input.select) input.select();
    group.querySelector('.btn-edit').classList.add('d-none');
    group.querySelector('.btn-save').classList.remove('d-none');
    group.querySelector('.btn-cancel').classList.remove('d-none');
}

function cancelEdit(btn) {
    const group = btn.closest('.input-group');
    const input = group.querySelector('input');
    input.value = input._originalValue ?? input.value;
    input.disabled = true;
    group.querySelector('.btn-edit').classList.remove('d-none');
    group.querySelector('.btn-save').classList.add('d-none');
    group.querySelector('.btn-cancel').classList.add('d-none');
}

function disableEdit(btn) {
    const group = btn.closest('.input-group');
    const input = group.querySelector('input');
    input.disabled = true;
    group.querySelector('.btn-edit').classList.remove('d-none');
    group.querySelector('.btn-save').classList.add('d-none');
    group.querySelector('.btn-cancel').classList.add('d-none');
}

function saveChanges(id_product, btn) {
    const group = btn.closest('.input-group');
    const input = group.querySelector('input');
    const newVal = parseFloat(input.value);

    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';

    api(`/ajax/products/${id_product}/max-price`, {
        method: "PATCH",
        data: { max_portion_price: newVal }
    })
    .then(function (res) {
        showSnack(res.success, `{{ translations.save_was_successful|default('Zapis powiódł się') }}`);
        btn.disabled = false;
        btn.innerHTML = '<i class="icon dripicons-checkmark"></i>';
        if (res.success) {
            disableEdit(btn);
            updateRowAfterSave(btn, newVal);
            updateStats();
        }
    })
    .catch(function () {
        showSnack(false, `{{ translations.something_went_wrong|default('Coś poszło nie tak') }}`);
        btn.disabled = false;
        btn.innerHTML = '<i class="icon dripicons-checkmark"></i>';
    });
}

function updateRowAfterSave(btn, newMaxPrice) {
    const row = btn.closest('tr');
    if (!row) return;
    row.dataset.maxPrice = newMaxPrice;

    const raw       = parseFloat(row.dataset.raw) || 0;
    const expMargin = parseFloat(row.dataset.expMargin) || 0;
    const margeCell = row.querySelector('.cell-marge');
    if (!margeCell) return;

    let badgeClass = 'marge-zero';
    let label = '—';
    let deltaHtml = '';

    if (newMaxPrice > 0) {
        const marge = Math.round((newMaxPrice - raw) / newMaxPrice * 100);
        label = marge + '%';
        badgeClass = marge >= 50 ? 'marge-good' : (marge >= 20 ? 'marge-ok' : 'marge-bad');
        if (expMargin > 0) {
            const delta = marge - Math.round(expMargin);
            const deltaClass = delta >= 0 ? 'delta-positive' : 'delta-negative';
            deltaHtml = `<div class="${deltaClass}">${delta >= 0 ? '+' : ''}${delta}pp</div>`;
        }
    }

    margeCell.innerHTML = `<span class="marge-badge ${badgeClass}">${label}</span>${deltaHtml}`;
    row.classList.toggle('highlight-zero', newMaxPrice === 0);
}

function updateStats() {
    let total = 0, zeroCount = 0, margeSum = 0, margeCount = 0;

    document.querySelectorAll('.product-row').forEach(row => {
        total++;
        const maxP = parseFloat(row.dataset.maxPrice) || 0;
        const raw  = parseFloat(row.dataset.raw) || 0;

        if (maxP === 0) {
            zeroCount++;
            row.classList.add('highlight-zero');
        } else {
            row.classList.remove('highlight-zero');
            margeSum += (maxP - raw) / maxP * 100;
            margeCount++;
        }
    });

    document.getElementById('stat-total').textContent = total;
    document.getElementById('stat-zero').textContent  = zeroCount;
    document.getElementById('stat-avg-marge').textContent = margeCount > 0
        ? Math.round(margeSum / margeCount) + '%' : '—';

    const alertBox = document.getElementById('zero-price-alert');
    const alertMsg = document.getElementById('zero-price-msg');
    if (zeroCount > 0) {
        alertMsg.textContent = `{{ translations.number_of_products_without_fixed_maximum_price|default('Produkty bez ustalonej ceny maks.') }}: ${zeroCount}`;
        alertBox.classList.remove('d-none');
    } else {
        alertBox.classList.add('d-none');
    }
    updateCategoryWarnings();
}

function updateCategoryWarnings() {
    document.querySelectorAll('[data-cat-id]').forEach(headerRow => {
        const catId = headerRow.dataset.catId;
        const zeroInCat = Array.from(document.querySelectorAll(`.cat-${catId}`))
            .filter(r => (parseFloat(r.dataset.maxPrice) || 0) === 0).length;
        const warn = document.getElementById(`cat-warn-${catId}`);
        if (warn) warn.classList.toggle('d-none', zeroInCat === 0);
    });
}

function applyFilters() {
    const search       = document.getElementById('pricing-search').value.toLowerCase().trim();
    const margeFilter  = document.getElementById('marge-filter').value;
    let visibleCount   = 0;
    const catVisible   = {};

    document.querySelectorAll('.product-row').forEach(row => {
        const name      = row.dataset.name || '';
        const maxP      = parseFloat(row.dataset.maxPrice) || 0;
        const raw       = parseFloat(row.dataset.raw) || 0;
        const expMargin = parseFloat(row.dataset.expMargin) || 0;
        const catId     = row.dataset.categoryId;
        let show = true;

        if (search && !name.includes(search)) show = false;

        if (show && margeFilter !== 'all') {
            if (margeFilter === 'zero' && maxP !== 0) show = false;
            if (margeFilter === 'below_target') {
                if (maxP === 0 || expMargin === 0) show = false;
                else {
                    const m = (maxP - raw) / maxP * 100;
                    if (m >= expMargin) show = false;
                }
            }
            if (margeFilter === 'low') {
                if (maxP === 0) show = false;
                else if ((maxP - raw) / maxP * 100 >= 20) show = false;
            }
            if (margeFilter === 'ok') {
                if (maxP === 0) show = false;
                else if ((maxP - raw) / maxP * 100 < 20) show = false;
            }
        }

        row.classList.toggle('d-none', !show);
        if (show) { visibleCount++; catVisible[catId] = true; }
    });

    document.querySelectorAll('.category-header-row').forEach(hr => {
        hr.classList.toggle('d-none', !catVisible[hr.dataset.catId]);
    });
    document.getElementById('empty-filter-state').classList.toggle('d-none', visibleCount > 0);
}

function resetFilters() {
    document.getElementById('pricing-search').value = '';
    document.getElementById('marge-filter').value   = 'all';
    applyFilters();
}
</script>
{% endblock %}