{% extends 'layouts/base.twig' %}
{% block title %}{{ translations.new_order }}{% endblock %}
{% block page_heading %}
<div class="page-heading">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ root }}/Dashboard">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ root }}/material-suppliers/{{ supplier.getId() }}/orders">{{ translations.order }}</a></li>
            <li class="breadcrumb-item active">{{ translations.new_order }}</li>
        </ol>
    </nav>
    <h3>{{ translations.new_order }}
        {% if supplier %}<span class="text-muted fs-5 fw-normal ms-2">— {{ supplier.getName() }}</span>{% endif %}
    </h3>
</div>
{% endblock %}
{% block content %}
<style>
.wz-strip{background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:0 20px;display:flex;align-items:center;overflow-x:auto;gap:0;margin-bottom:20px}
.wz-step{display:flex;align-items:center;gap:7px;padding:12px 0;cursor:pointer;white-space:nowrap;border-bottom:2.5px solid transparent;margin-right:4px;font-size:13px;color:#888;transition:color .2s}
.wz-step:not(:last-child)::after{content:'›';color:#ccc;font-size:13px;margin-left:16px}
.wz-step-num{width:20px;height:20px;border-radius:50%;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;background:#f0f0f0;color:#888;flex-shrink:0;transition:all .2s}
.wz-step.active{border-bottom-color:#435ebe;color:#222;font-weight:500}
.wz-step.active .wz-step-num{background:#435ebe;color:#fff}
.wz-step.done .wz-step-num{background:#198754;color:#fff}
.wz-step.done{color:#198754}
.wz-step.locked{cursor:default;opacity:.42;pointer-events:none}
.wz-step.locked .wz-step-num{background:#e0e0e0;color:#bbb}
.wz-panel{display:none}
.wz-panel.active{display:block}
.wz-table th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;background:#2c3e6b;color:#e8edf8}
.wz-table thead{position:sticky;top:0;z-index:2;box-shadow:0 2px 3px rgba(0,0,0,.15)}
.wz-table-wrap{overflow-x:auto;overflow-y:auto;max-height:520px}
.cat-sep td{background:#f8f8f8;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#888;padding:5px 12px;border-top:1.5px solid #e8e8e8}
.mono{font-family:monospace}
.wz-nav{display:flex;justify-content:space-between;margin-top:14px;gap:8px}
.tier-badge{display:inline-flex;flex-direction:column;align-items:center;padding:10px 14px;border-radius:8px;border:1.5px solid #ddd;background:#fff;min-width:110px;text-align:center;transition:all .2s;cursor:pointer}
.tier-badge.active{border-color:#435ebe;background:#eef2ff}
.tier-badge.free{border-color:#198754;background:#d1fae5}
.tier-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#888;margin-bottom:3px}
.tier-badge.active .tier-label{color:#435ebe}
.tier-badge.free .tier-label{color:#198754}
.tier-price{font-family:monospace;font-size:15px;font-weight:700}
.tier-badge.active .tier-price{color:#435ebe}
.tier-badge.free .tier-price{color:#198754}
.tier-sub{font-size:10px;color:#888;margin-top:2px}
.slider-row{display:flex;align-items:center;gap:12px}
.sum-card{background:#fff;border:1.5px solid #e0e0e0;border-radius:8px;padding:14px 16px}
.sum-card-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#888;display:block;margin-bottom:5px}
.sum-card-value{font-family:monospace;font-size:20px;font-weight:500}
.param-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.param-field label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#888;margin-bottom:4px}
.param-field input,.param-field select{font-size:13px;padding:6px 10px;border:1.5px solid #ddd;border-radius:6px;outline:none;background:#fff}
.param-field input:focus,.param-field select:focus{border-color:#435ebe}
#step1Table{font-size:11px}
#step1Table th{padding:4px 5px;font-size:10px}
#step1Table td{padding:3px 5px}
/* ── Typography system ── */
.wz-name{font-size:13px;font-weight:500;color:#222;line-height:1.35}
.wz-meta{font-size:10px;color:#888;font-family:monospace;margin-top:1px;line-height:1.3}
.wz-num{font-family:monospace;font-size:12px}
.wz-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#888}
#orderBody td,#confBody td{font-size:12px;vertical-align:middle}
#orderBody input.form-control{font-size:12px}
/* ── Step validation error ── */
.wz-step-err{font-size:13px;padding:9px 13px;margin-bottom:10px;border-radius:6px;
  background:#fff3cd;border:1.5px solid #ffc107;color:#856404;display:none;align-items:center;gap:8px}
.wz-step-err.show{display:flex}

/* ── Okresy dostępności — badge'e filtrowania surowców ── */
.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-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>
<div class="wz-strip" id="wzStrip">
    <div class="wz-step active" id="wzTab1" onclick="tabNav(1)"><div class="wz-step-num">1</div>{{ translations.wizard_step_stock_minimum }}</div>
    <div class="wz-step locked" id="wzTab2" onclick="tabNav(2)"><div class="wz-step-num">2</div>{{ translations.wizard_step_logistique }}</div>
    <div class="wz-step locked" id="wzTab3" onclick="tabNav(3)"><div class="wz-step-num">3</div>{{ translations.wizard_step_commande_split }}</div>
    <div class="wz-step locked" id="wzTab4" onclick="tabNav(4)"><div class="wz-step-num">4</div>{{ translations.wizard_step_valider_payer }}</div>
</div>
{# STEP 1 #}
<div class="wz-panel active" id="wzPanel1">
    <div class="card mb-3">
        <div class="card-header"><h5 class="card-title mb-0">{{ translations.demand_parameters }}</h5></div>
        <div class="card-body">
            <div class="param-row">
                <div class="param-field"><label>{{ translations.period_start_date }}</label><input type="date" id="paramDate" value="{{ "now"|date("Y-m-d") }}"></div>
                <div class="param-field"><label>{{ translations.period_days }}</label><input type="number" id="paramDays" value="7" min="1" max="90" style="width:80px"></div>
                <div class="param-field"><label>{{ translations.sales_forecast_pct }}</label><input type="number" id="paramForecast" value="100" min="50" max="300" step="5" style="width:90px"></div>
                <div class="param-field"><button class="btn btn-primary btn-sm" onclick="loadStockItems()"><i class="bi bi-arrow-clockwise"></i> {{ translations.refresh }}</button></div>
            </div>
        </div>
    </div>
    {# ── Pasek filtrowania po okresach dostępności (Step 1) ── #}
    <div id="periodBarStep1Wrap" class="availability-periods-bar mb-3" style="display:none;">
        <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 }}:
            </span>
        </div>
        <div id="periodBarStep1" class="d-flex gap-2 flex-wrap"></div>
    </div>
    <div class="card mb-3">
        <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div>
                <h5 class="card-title mb-0">{{ translations.supplier_products_stock_minimum }}</h5>                <small class="text-muted">{{ translations.stock_min_description }}</small>
            </div>
            <div class="form-check form-switch mb-0">
                <input class="form-check-input" type="checkbox" id="toggleZeroOrder">
                <label class="form-check-label" for="toggleZeroOrder" style="font-size:11px;cursor:pointer">{{ translations.show_zero }}</label>
            </div>
        </div>
        <div class="card-body p-0">
            <div id="step1Loading" class="text-center py-4 text-muted" style="display:none"><div class="spinner-border spinner-border-sm me-2"></div> {{ translations.loading }}...</div>
            <div class="wz-table-wrap">
                <table class="table table-sm wz-table mb-0" id="step1Table">
                    <thead><tr>
                        <th class="text-start" style="min-width:120px">{{ translations.product }}</th>
                        <th>{{ translations.sku }}</th><th>{{ translations.unit }}</th>
                        <th class="text-end">{{ translations.stock }}</th>
                        <th class="text-end">{{ translations.forecast }}</th>
                        <th class="text-end">{{ translations.stock_min }}</th>
                        <th class="text-end">{{ translations.to_order_short }}</th>
                        <th class="text-center">{{ translations.pack_short }}</th>
                        <th class="text-center" style="color:#93c5fd">{{ translations.min_packs }}</th>
                        <th class="text-center" style="color:#6ee7b7;min-width:75px">{{ translations.validated }}</th>
                        <th class="text-end">{{ translations.unit_price }}</th>
                        <th class="text-end" style="color:#a5b4fc;white-space:nowrap;border-left:2px solid #4a5a8a">{{ translations.col_pieces }}</th>
                        <th class="text-end" style="white-space:nowrap">{{ translations.col_price_per_carton }}</th>
                        <th class="text-end" style="color:#6ee7b7;white-space:nowrap">{{ translations.col_value }}</th>
                    </tr></thead>
                    <tfoot id="step1Foot"></tfoot>
                    <tbody id="step1Body"><tr><td colspan="14" class="text-center text-muted py-4">{{ translations.click_refresh_to_load }}</td></tr></tbody>
                </table>
            </div>
        </div>
    </div>
    <div id="step1SumCards" class="row g-2 mb-3" style="display:none"></div>
    <div id="step1Err" class="wz-step-err" role="alert">
        <i class="bi bi-exclamation-triangle-fill flex-shrink-0"></i>
        <span id="step1ErrMsg"></span>
    </div>
    <div class="wz-nav" style="justify-content:flex-end">
        <button class="btn btn-primary" onclick="goStep2()">{{ translations.wizard_step_logistique }} &rarr;</button>
    </div>
</div>
{# STEP 2 #}
<div class="wz-panel" id="wzPanel2">
    <div class="card mb-3">
        <div class="card-header"><h5 class="card-title mb-0">{{ translations.supplier_data }}</h5></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <div class="text-uppercase fw-bold" style="font-size:10px;color:#888;letter-spacing:.06em;margin-bottom:4px">{{ translations.supplier }}</div>
                    <div class="fw-bold fs-5">{{ supplier.getName() }}</div>
                </div>
                <div class="col-md-4">
                    <div class="text-uppercase fw-bold" style="font-size:10px;color:#888;letter-spacing:.06em;margin-bottom:4px">{{ translations.type }}</div>
                    <div>{{ supplier.getType() }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <div class="card-header"><h5 class="card-title mb-0">{{ translations.delivery_mode_title }}</h5></div>
        <div class="card-body">
            <div class="d-flex gap-2 flex-wrap">
                <button class="tier-badge active" id="modeBtn1" onclick="setDelivMode(1)"><span style="font-size:18px">&#x1F69A;</span><div class="tier-label">{{ translations.one_delivery }}</div><div style="font-size:12px;font-weight:600">{{ translations.single_order }}</div></button>
                <button class="tier-badge " style="display: none" id="modeBtn2" onclick="setDelivMode(2)"><span style="font-size:18px">&#x1F69A;&#x1F69A;</span><div class="tier-label">{{ translations.two_deliveries }}</div><div style="font-size:12px;font-weight:600">{{ translations.split_order }}</div></button>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
            <h5 class="card-title mb-0">{{ translations.delivery_date }}</h5>
            <span id="delivTermsBadge" class="d-none" style="font-size:11px;color:#888"></span>
        </div>
        <div class="card-body">
            <div class="row g-3" id="delivDateWrap">
                <div class="col-md-3">
                    <label class="form-label fw-bold" style="font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#435ebe">{{ translations.delivery_1 }}</label>
                    <input type="text" class="form-control flatpickr-input" id="delivDate1"
                           placeholder="{{ translations.select_delivery_date }}" readonly>
                    <div id="delivDate1Hint" class="mt-1" style="font-size:10px;color:#888;min-height:14px"></div>
                </div>
                <div class="col-md-3" id="delivDate2Wrap" style="display:none">
                    <label class="form-label fw-bold" style="font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#198754">{{ translations.delivery_2 }}</label>
                    <input type="text" class="form-control flatpickr-input" id="delivDate2"
                           placeholder="{{ translations.select_delivery_date }}" readonly>
                    <div id="delivDate2Hint" class="mt-1" style="font-size:10px;color:#888;min-height:14px"></div>
                </div>
            </div>
        </div>
    </div>
    {% if orderConfig and orderConfig.tiers is defined and orderConfig.tiers|length > 0 %}
    <div class="card mb-3">
        <div class="card-header"><h5 class="card-title mb-0">{{ translations.delivery_cost_tiers }}</h5></div>
        <div class="card-body">
            <div class="d-flex flex-wrap gap-2">
                {% for tier in orderConfig.tiers %}
                <div class="tier-badge {% if tier.freight_cost == 0 %}free{% endif %}">
                    <div class="tier-label">{{ tier.label ?? ('do ' ~ tier.max_order_value) }}</div>
                    <div class="tier-price">{{ tier.freight_cost == 0 ? translations.free : tier.freight_cost ~ ' ' ~ (orderConfig.currency_code ?? 'PLN') }}</div>
                    <div class="tier-sub">{{ translations.freight_costs }}</div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
    <div id="step2Err" class="wz-step-err" role="alert">
        <i class="bi bi-exclamation-triangle-fill flex-shrink-0"></i>
        <span id="step2ErrMsg"></span>
    </div>
    <div class="wz-nav">
        <button class="btn btn-outline-secondary" onclick="wzNav(1)">&larr; {{ translations.wizard_step_stock_minimum }}</button>
        <button class="btn btn-primary" onclick="goStep3()">{{ translations.wizard_step_commande_split }} &rarr;</button>
    </div>
</div>
{# STEP 3 #}
<div class="wz-panel" id="wzPanel3">
    <div class="card mb-3" id="splitPanel" style="display:none">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="card-title mb-0">{{ translations.delivery_split }}</h5>
            <div class="d-flex gap-2"><span class="badge bg-primary" id="bdg1">50%</span><span class="badge bg-success" id="bdg2">50%</span></div>
        </div>
        <div class="card-body">
            <div class="slider-row">
                <span class="mono fw-bold text-primary" id="pct1" style="min-width:38px">50%</span>
                <input type="range" id="splitSlider" min="0" max="100" value="50" class="form-range" oninput="onSlider(this.value)">
                <span class="mono fw-bold text-success" id="pct2" style="min-width:38px;text-align:right">50%</span>
            </div>
            <div class="d-flex justify-content-between mt-1" style="font-size:11px;color:#888">
                <span>{{ translations.delivery_1 }}</span><span>{{ translations.delivery_2 }}</span>
            </div>
        </div>
    </div>
    {# ── Pasek filtrowania po okresach dostępności (Step 3) ── #}
    <div id="periodBarStep3Wrap" class="availability-periods-bar mb-3" style="display:none;">
        <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 }}:
            </span>
        </div>
        <div id="periodBarStep3" class="d-flex gap-2 flex-wrap"></div>
    </div>
    <div class="card mb-3">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="card-title mb-0">{{ translations.order_details }}</h5>
            <button class="btn btn-outline-secondary btn-sm" onclick="addProductModal()">{{ translations.add_product_btn }}</button>
        </div>
        <div class="wz-table-wrap">
            <table class="table table-sm wz-table mb-0">
                <thead id="orderHead"></thead>
                <tbody id="orderBody"></tbody>
                <tfoot id="orderFoot"></tfoot>
            </table>
        </div>
    </div>
    <div class="row g-3 mb-3" id="sumCards"></div>
    <div class="wz-nav">
        <button class="btn btn-outline-secondary" onclick="wzNav(2)">&larr; {{ translations.wizard_step_logistique }}</button>
        <button class="btn btn-primary" onclick="wzNav(4)">{{ translations.wizard_step_valider_payer }} &rarr;</button>
    </div>
</div>
{# STEP 4 #}
<div class="wz-panel" id="wzPanel4">
    <div class="card mb-3">
        <div class="card-header"><h5 class="card-title mb-0">{{ translations.summary }}</h5></div>
        <div class="card-body"><div class="row g-3" id="sumGrid"></div></div>
    </div>
    <div class="card mb-3">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="card-title mb-0">{{ translations.bon_de_commande }}</h5>
            <button class="btn btn-outline-secondary btn-sm" onclick="wzNav(3)">&#x270F; {{ translations.modify }}</button>
        </div>
        <div class="wz-table-wrap">
            <table class="table table-sm wz-table mb-0">
                <thead><tr>
                    <th class="text-start" style="min-width:160px">{{ translations.product }}</th>
                    <th>{{ translations.sku }}</th><th class="text-center">{{ translations.quantity }}</th><th class="text-center">{{ translations.pack_quantity }}</th>
                    <th class="text-end">{{ translations.pack_price_net }}</th><th class="text-end">{{ translations.total_net }}</th>
                </tr></thead>
                <tbody id="confBody"></tbody>
                <tfoot id="confFoot"></tfoot>
            </table>
        </div>
    </div>
    <div class="card mb-3">
        <div class="card-body text-center py-4">
            <p class="text-muted mb-3">{{ translations.review_and_submit }}</p>
            <button class="btn btn-success btn-lg px-5" id="submitBtn" onclick="submitOrder()">
                <i class="bi bi-check-circle me-2"></i> {{ translations.make_order }}
            </button>
        </div>
    </div>
    <div class="wz-nav"><button class="btn btn-outline-secondary" onclick="wzNav(3)">&larr; {{ translations.wizard_step_commande_split }}</button></div>
</div>
{# Modal #}
<div class="modal fade" id="addProdModal" tabindex="-1">
    <div class="modal-dialog"><div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">{{ translations.add_product }}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
            <div class="mb-3"><label class="form-label fw-bold">{{ translations.product }}</label><select class="form-select choices" id="modalProdSelect"></select></div>
            <div class="row g-2">
                <div class="col-6"><label class="form-label fw-bold">{{ translations.qty_packs }}</label><input type="number" class="form-control" id="modalQty" min="0" value="0" step="1"></div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" data-bs-dismiss="modal">{{ translations.cancel }}</button>
            <button class="btn btn-primary" onclick="saveModal()">{{ translations.add }}</button>
        </div>
    </div></div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
(function(){
'use strict';
var SUPPLIER_ID = {{ supplier.getId() }};
var ORDER_CONFIG = {{ orderConfig ? orderConfig|json_encode(constant('JSON_UNESCAPED_UNICODE'))|raw : 'null' }};
var ITEMS = [];
var VALID = {};
var ORDER = {};
var delivMode = 1;
var splitPct = 50;
var currentStep=1;
var maxStep=1;
var orderSubmitting=false;
/* ── Filtry okresów dostępności ── */
var periodFilterStep1 = 'all';
var periodFilterStep3 = 'all';
/* ── Translations ── */
var TRANS = {
    loading:                         '{{ translations.loading|e("js") }}',
    add_at_least_one_product:        '{{ translations.add_at_least_one_product|e("js") }}',
    select_delivery_date_1:          '{{ translations.select_delivery_date_1|e("js") }}',
    select_delivery_date_2_or_single:'{{ translations.select_delivery_date_2_or_single|e("js") }}',
    delivery_date_2_must_be_later:   '{{ translations.delivery_date_2_must_be_later|e("js") }}',
    nearest_delivery:                '{{ translations.nearest_delivery|e("js") }}',
    delivery_days_label:             '{{ translations.delivery_days_label|e("js") }}',
    lead_time_label:                 '{{ translations.lead_time_label|e("js") }}',
    no_products_for_supplier:        '{{ translations.no_products_for_supplier|e("js") }}',
    no_products_to_order_toggle:     '{{ translations.no_products_to_order_toggle|e("js") }}',
    no_items:                        '{{ translations.no_items|e("js") }}',
    no_products_load_step1:          '{{ translations.no_products_load_step1|e("js") }}',
    data_fetch_error:                '{{ translations.data_fetch_error|e("js") }}',
    connection_error:                '{{ translations.connection_error|e("js") }}',
    order_success:                   '{{ translations.order_success|e("js") }}',
    order_send_error:                '{{ translations.order_send_error|e("js") }}',
    sending:                         '{{ translations.sending|e("js") }}',
    make_order:                      '{{ translations.make_order|e("js") }}',
    product_already_in_order:        '{{ translations.product_already_in_order|e("js") }}',
    date_too_early_error:            '{{ translations.date_too_early_error|e("js") }}',
    delivery_only_on_days:           '{{ translations.delivery_only_on_days|e("js") }}',
    port_short:                      '{{ translations.port_short|e("js") }}',
    pcs_short:                       '{{ translations.pcs_short|e("js") }}',
    refs_short:                      '{{ translations.refs_short|e("js") }}',
    total_order:                     '{{ translations.total_order|e("js") }}',
    total:                           '{{ translations.total|e("js") }}',
    delivery_1:                      '{{ translations.delivery_1|e("js") }}',
    delivery_2:                      '{{ translations.delivery_2|e("js") }}',
    references:                      '{{ translations.references|e("js") }}',
    quantity:                        '{{ translations.quantity|e("js") }}',
    to_pay:                          '{{ translations.to_pay|e("js") }}',
    supplier:                        '{{ translations.supplier|e("js") }}',
    unit:                            '{{ translations.unit|e("js") }}',
    min_packs:                       '{{ translations.min_packs|e("js") }}',
    product:                         '{{ translations.product|e("js") }}',
    unit_price:                      '{{ translations.unit_price|e("js") }}',
    pack_price_net:                  '{{ translations.pack_price_net|e("js") }}',
    free:                            '{{ translations.free|e("js") }}',
    select_product:                  '{{ translations.select_product|e("js") }}',
    order:                           '{{ translations.order|e("js") }}',
    subtotal:                         '{{ translations.subtotal|e("js") }}',
    stock:                           '{{ translations.stock|e("js") }}',
    pack_carton:                     '{{ translations.pack_carton|e("js") }}',
    carton_short:                    '{{ translations.carton_short|e("js") }}',
    cartons_to_order:                '{{ translations.cartons_to_order|e("js") }}',
    total_pieces_label:              '{{ translations.total_pieces_label|e("js") }}',
    order_value:                     '{{ translations.order_value|e("js") }}',
    cartons:                         '{{ translations.cartons|e("js") }}',
    supplier_product_inactive_warning: '{{ translations.supplier_product_inactive_warning|e("js") }}',
};
function wzNav(step){
    currentStep=step;
    if(step>maxStep) maxStep=step;
    [1,2,3,4].forEach(function(i){
        document.getElementById('wzPanel'+i).classList.toggle('active',i===step);
        var t=document.getElementById('wzTab'+i);
        t.classList.remove('active','done','locked');
        if(i<step) t.classList.add('done');
        else if(i===step) t.classList.add('active');
        else if(i>maxStep) t.classList.add('locked');
    });
    if(step===2) initDeliveryDateInputs();
    if(step===3){collectAndBuildPeriodBars();renderOrderTable();}
    if(step===4) renderConfirmation();
    window.scrollTo({top:0,behavior:'smooth'});
}
window.wzNav=wzNav;
function tabNav(step){
    if(step<=maxStep) wzNav(step);
}
window.tabNav=tabNav;
/* ── Step validation ── */
function showStepErr(n,msg){
    var el=document.getElementById('step'+n+'Err'),ms=document.getElementById('step'+n+'ErrMsg');
    if(el&&ms){ms.textContent=msg;el.classList.add('show');el.scrollIntoView({behavior:'smooth',block:'nearest'});}
}
function hideStepErr(n){var el=document.getElementById('step'+n+'Err');if(el)el.classList.remove('show');}
/* ── Delivery terms ── */
function getDeliveryTerms(){return(ORDER_CONFIG&&ORDER_CONFIG.delivery_terms)?ORDER_CONFIG.delivery_terms:null;}
function getAllowedIsoWeekdays(){
    var t=getDeliveryTerms();
    if(!t||!t.delivery_days||!t.delivery_days.length)return null;
    return t.delivery_days.map(function(d){return d.id;});
}
function getLeadTimeHours(){var t=getDeliveryTerms();return t?(t.lead_time_hours||0):0;}
function calcMinDeliveryDateStr(){
    var leadH=getLeadTimeHours();
    var now=new Date();
    if(leadH>0) now=new Date(now.getTime()+leadH*3600000);
    var y=now.getFullYear(),m=String(now.getMonth()+1).padStart(2,'0'),d=String(now.getDate()).padStart(2,'0');
    return y+'-'+m+'-'+d;
}
function jsToIsoWeekday(jsDay){return jsDay===0?7:jsDay;}
function isAllowedDelivDay(dateStr){
    var allowed=getAllowedIsoWeekdays();
    if(!allowed)return true;
    var d=new Date(dateStr+'T12:00:00');
    return allowed.indexOf(jsToIsoWeekday(d.getDay()))!==-1;
}
function meetsLeadTime(dateStr){return dateStr>=calcMinDeliveryDateStr();}
function getNextValidDeliveryDate(){
    var minStr=calcMinDeliveryDateStr();
    var allowed=getAllowedIsoWeekdays();
    var d=new Date(minStr+'T12:00:00');
    if(!allowed)return minStr;
    for(var i=0;i<14;i++){
        if(allowed.indexOf(jsToIsoWeekday(d.getDay()))!==-1){
            var y=d.getFullYear(),m=String(d.getMonth()+1).padStart(2,'0'),day=String(d.getDate()).padStart(2,'0');
            return y+'-'+m+'-'+day;
        }
        d.setDate(d.getDate()+1);
    }
    return minStr;
}
// TODO: localize day names
var DAY_NAMES_PL={1:'Pon',2:'Wt',3:'\u015ar',4:'Czw',5:'Pt',6:'Sob',7:'Nie'};
var DAY_NAMES_FULL_PL={1:'Poniedzia\u0142ek',2:'Wtorek',3:'\u015aroda',4:'Czwartek',5:'Pi\u0105tek',6:'Sobota',7:'Niedziela'};
function formatDatePL(dateStr){var p=dateStr.split('-');return p[2]+'.'+p[1]+'.'+p[0];}
function getDelivDateError(dateStr){
    if(!meetsLeadTime(dateStr)){
        var leadH=getLeadTimeHours(),minStr=calcMinDeliveryDateStr();
        return TRANS.date_too_early_error.replace('{h}',leadH).replace('{date}',formatDatePL(minStr));
    }
    if(!isAllowedDelivDay(dateStr)){
        var allowed=getAllowedIsoWeekdays();
        return TRANS.delivery_only_on_days+' '+allowed.map(function(d){return DAY_NAMES_FULL_PL[d]||d;}).join(', ')+'.';
    }
    return null;
}
var FP={};
function buildFpConfig(inputId){
    var allowedIso=getAllowedIsoWeekdays();
    var allowedJs=allowedIso?allowedIso.map(function(d){return d%7;}):null;
    var leadH=getLeadTimeHours();
    var cfg={
        locale:{firstDayOfWeek:1},
        dateFormat:'Y-m-d',
        disableMobile:true,
        minDate:'today',
        onChange:function(sel,dateStr){
            var inp=document.getElementById(inputId);
            if(inp) inp.classList.remove('is-invalid');
            hideStepErr(2);
        }
    };
    if(allowedJs||leadH>0){
        cfg.enable=[function(date){
            if(allowedJs&&allowedJs.indexOf(date.getDay())===-1) return false;
            if(leadH>0){
                var now=new Date();
                var del=new Date(date);
                del.setHours(0,0,1,0);
                if((del-now)/3600000<leadH) return false;
            }
            return true;
        }];
    }
    return cfg;
}
function initDeliveryDateInputs(){
    var allowed=getAllowedIsoWeekdays();
    var leadH=getLeadTimeHours();
    var nextValid=getNextValidDeliveryDate();
    var badge=document.getElementById('delivTermsBadge');
    if(badge){
        var parts=[];
        if(allowed) parts.push(TRANS.delivery_days_label+' <strong>'+allowed.map(function(d){return DAY_NAMES_PL[d]||d;}).join(', ')+'</strong>');
        if(leadH) parts.push(TRANS.lead_time_label+' <strong>'+leadH+'h</strong>');
        if(parts.length){badge.innerHTML=parts.join(' &nbsp;&nbsp; ');badge.classList.remove('d-none');}
    }
    ['delivDate1','delivDate2'].forEach(function(id){
        var input=document.getElementById(id);
        if(!input)return;
        if(FP[id]) FP[id].destroy();
        FP[id]=flatpickr(input,buildFpConfig(id));
        if(nextValid&&!input.value) FP[id].setDate(nextValid,false);
        var hint=document.getElementById(id+'Hint');
        if(hint&&nextValid) hint.textContent=TRANS.nearest_delivery+' '+formatDatePL(nextValid);
    });
}
function goStep2(){
    var hasOrder=Object.values(ORDER).some(function(o){return o&&o.qty>0;});
    if(!hasOrder){
        showStepErr(1,TRANS.add_at_least_one_product);
        return;
    }
    hideStepErr(1);
    wzNav(2);
}
function goStep3(){
    var d1=document.getElementById('delivDate1').value;
    if(!d1){
        showStepErr(2,TRANS.select_delivery_date_1);
        document.getElementById('delivDate1').classList.add('is-invalid');
        document.getElementById('delivDate1').focus();
        return;
    }
    var err1=getDelivDateError(d1);
    if(err1){showStepErr(2,TRANS.delivery_1+': '+err1);document.getElementById('delivDate1').classList.add('is-invalid');return;}
    if(delivMode===2){
        var d2=document.getElementById('delivDate2').value;
        if(!d2){
            showStepErr(2,TRANS.select_delivery_date_2_or_single);
            document.getElementById('delivDate2').classList.add('is-invalid');
            document.getElementById('delivDate2').focus();
            return;
        }
        var err2=getDelivDateError(d2);
        if(err2){showStepErr(2,TRANS.delivery_2+': '+err2);document.getElementById('delivDate2').classList.add('is-invalid');return;}
        if(d2<=d1){
            showStepErr(2,TRANS.delivery_date_2_must_be_later);
            document.getElementById('delivDate2').classList.add('is-invalid');
            return;
        }
    }
    document.getElementById('delivDate1').classList.remove('is-invalid');
    var d2el=document.getElementById('delivDate2');
    if(d2el)d2el.classList.remove('is-invalid');
    hideStepErr(2);
    wzNav(3);
}
window.goStep2=goStep2;
window.goStep3=goStep3;
function loadStockItems(){
    var date=document.getElementById('paramDate').value;
    var days=document.getElementById('paramDays').value;
    var fc=document.getElementById('paramForecast').value;
    document.getElementById('step1Loading').style.display='block';
    document.getElementById('step1Body').innerHTML='';
    /* Ukryj pasek badge'y na czas ładowania — pokaże się dopiero gdy dane są gotowe */
    var w1=document.getElementById('periodBarStep1Wrap');
    var w3=document.getElementById('periodBarStep3Wrap');
    if(w1) w1.style.display='none';
    if(w3) w3.style.display='none';
    var url=`{{ root }}/ajax/material-suppliers/${SUPPLIER_ID}/orders/new/items`
        +'?beginning_of_period='+encodeURIComponent(date)
        +'&requisition_period_days='+encodeURIComponent(days)
        +'&sales_forecast='+encodeURIComponent(fc);
    fetch(url,{headers:{'X-Requested-With':'XMLHttpRequest'}})
        .then(function(r){return r.json();})
        .then(function(resp){
            console.log(resp);
            document.getElementById('step1Loading').style.display='none';
            if(!resp.ok){showSnack(false,TRANS.data_fetch_error);return;}
            ITEMS=resp.data||[];
            periodFilterStep1='all';
            periodFilterStep3='all';
            collectAndBuildPeriodBars();
            renderStep1Table();
            buildOrderFromItems();
        })
        .catch(function(){
            document.getElementById('step1Loading').style.display='none';
            showSnack(false,TRANS.connection_error);
        });
}
window.loadStockItems=loadStockItems;
function renderStep1Table(){
    var tbody=document.getElementById('step1Body');
    var hideZero=!document.getElementById('toggleZeroOrder').checked;
    if(!ITEMS.length){tbody.innerHTML='<tr><td colspan="14" class="text-center text-muted py-4">'+TRANS.no_products_for_supplier+'</td></tr>';renderStep1Totals();return;}

    /* Filtruj zgodnie z aktywnym okresem i przełącznikiem "pokaż zerowe" */
    var visibleItems=ITEMS.filter(function(item){
        if(hideZero && (item.qty_to_order||0)<=0) return false;
        if(periodFilterStep1!=='all'){
            var ids=(item.availability_period_ids||[]).map(String);
            if(!ids.includes(String(periodFilterStep1))) return false;
        }
        return true;
    });

    var html='';
    var lastCat='';
    visibleItems.forEach(function(item){
        if(item.category_name!==lastCat){
            lastCat=item.category_name;
            html+='<tr class="cat-sep"><td colspan="14">'+escH(item.category_name||'')+'</td></tr>';
        }
        var mid=item.id_material;
        var ps=item.pack?item.pack.pack_size:1;
        var packPrice=item.pack?(parseFloat(item.pack.price_net)||0):0;
        var cp=item.stock_minimum_packs||0;
        var val=(VALID[mid]!==undefined)?VALID[mid]:cp;
        var stock=item.in_stock_quantity||0;
        var sclass=stock<=0?'text-danger fw-bold':(stock<(item.qty_to_order||0)?'text-warning fw-bold':'text-success');
        var periodIds=(item.availability_period_ids||[]).join(',');
        var pieces=val*ps;
        var itemVal=val*packPrice;
        var isInactive=(item.supplier_product_active===false||item.supplier_product_active===0||item.supplier_product_active===null);
        var inactiveIcon=isInactive?(' <i class="bi bi-exclamation-triangle-fill text-warning" title="'+escH(TRANS.supplier_product_inactive_warning)+'" style="font-size:11px;vertical-align:middle"></i>'):'';
        html+='<tr data-period-ids="'+periodIds+'">'
            +'<td class="text-start"><div style="font-size:11px;font-weight:500">'+escH(item.material_name)+inactiveIcon+'</div>'
            +(ps>1?'<div style="font-size:9px;color:#888" class="mono">'+TRANS.pack_carton+' '+ps+' '+escH(item.unit_name||'')+'</div>':'')
            +'</td>'
            +'<td class="mono" style="font-size:10px;color:#888">'+escH(item.supplier_sku||'')+'</td>'
            +'<td class="text-center" style="font-size:10px;color:#888">'+escH(item.unit_name||'')+'</td>'
            +'<td class="text-end mono '+sclass+'">'+fN(stock)+'</td>'
            +'<td class="text-end mono">'+fN(item.forecasted_usage||0)+'</td>'
            +'<td class="text-end mono">'+fN(item.minimum_quantity||0)+'</td>'
            +'<td class="text-end mono fw-bold" style="color:#dc3545">'+fN(item.qty_to_order||0)+'</td>'
            +'<td class="text-center mono" style="color:#888">'+fN(ps)+'</td>'
            +'<td class="text-center mono fw-bold" style="color:#435ebe">'+cp+'</td>'
            +'<td class="text-center">'
            +'<input type="number" class="form-control form-control-sm text-center mono px-1 py-0" style="width:62px;display:inline-block;border-color:#198754;font-size:11px" min="0" value="'+val+'" onchange="setValidated('+mid+',this.value)">'
            +'</td>'
            +'<td class="text-end mono" style="font-size:11px">'+fN(item.base_unit_price_net||0,2)+'</td>'
            +'<td class="text-end mono fw-bold" style="color:#6366f1;border-left:2px solid #e8e8e8" id="s1p_'+mid+'">'+pieces+'</td>'
            +'<td class="text-end mono" style="font-size:11px">'+fN(packPrice,2)+'</td>'
            +'<td class="text-end mono fw-bold" style="color:#198754" id="s1v_'+mid+'">'+fN(itemVal,2)+'</td>'
            +'</tr>';
    });
    if(!html){
        tbody.innerHTML='<tr><td colspan="14" class="text-center text-muted py-4">'+(hideZero?TRANS.no_products_to_order_toggle:TRANS.no_items)+'</td></tr>';
        renderStep1Totals();return;
    }
    tbody.innerHTML=html;
    renderStep1Totals();
}
function setValidated(mid,v){
    VALID[mid]=parseInt(v)||0;
    buildOrderFromItems();
    /* Aktualizuj komórki wiersza bez pełnego re-renderu */
    var item=ITEMS.find(function(x){return x.id_material===mid;});
    if(item){
        var ps=item.pack?item.pack.pack_size:1;
        var packPrice=item.pack?(parseFloat(item.pack.price_net)||0):0;
        var krt=VALID[mid];
        var pEl=document.getElementById('s1p_'+mid);
        var vEl=document.getElementById('s1v_'+mid);
        if(pEl) pEl.textContent=krt*ps;
        if(vEl) vEl.textContent=fN(krt*packPrice,2);
    }
    renderStep1Totals();
}
window.setValidated=setValidated;
function renderStep1Totals(){
    /* Sumuj PO WSZYSTKICH surowcach (nie tylko widocznych) */
    var totalKrt=0,totalPcs=0,totalVal=0,totalRefs=0;
    ITEMS.forEach(function(item){
        var mid=item.id_material;
        var ps=item.pack?item.pack.pack_size:1;
        var packPrice=item.pack?(parseFloat(item.pack.price_net)||0):0;
        var cp=item.stock_minimum_packs||0;
        var krt=(VALID[mid]!==undefined)?VALID[mid]:cp;
        if(krt>0){totalKrt+=krt;totalPcs+=krt*ps;totalVal+=krt*packPrice;totalRefs++;}
    });

    /* tfoot tabeli */
    var foot=document.getElementById('step1Foot');
    if(foot){
        if(totalRefs>0){
            foot.innerHTML='<tr style="border-top:2px solid #dee2e6;background:#f8f9fa">'
                +'<td colspan="9" class="text-end fw-bold" style="font-size:11px;color:#555">'+TRANS.total+':</td>'
                +'<td class="text-center mono fw-bold" style="color:#435ebe">'+totalKrt+' '+TRANS.carton_short+'</td>'
                +'<td></td>'
                +'<td class="text-end mono fw-bold" style="color:#6366f1;border-left:2px solid #e8e8e8">'+totalPcs+'</td>'
                +'<td></td>'
                +'<td class="text-end mono fw-bold" style="color:#198754">'+fN(totalVal,2)+'</td>'
                +'</tr>';
        } else {
            foot.innerHTML='';
        }
    }

    /* Karty podsumowania */
    var sc=document.getElementById('step1SumCards');
    if(!sc) return;
    if(!totalRefs){sc.style.display='none';return;}
    sc.style.display='';
    var si=function(lbl,val,color){
        return '<div class="col">'
            +'<div class="sum-card" style="border-top:3px solid '+(color||'#6b7280')+'">'
            +'<span class="sum-card-label">'+lbl+'</span>'
            +'<div class="sum-card-value" style="font-size:18px;color:'+(color||'#222')+'">'+val+'</div>'
            +'</div></div>';
    };
    sc.innerHTML=si(TRANS.cartons_to_order,''+totalKrt+' '+TRANS.carton_short,'#435ebe')
        +si(TRANS.total_pieces_label,''+totalPcs,'#6366f1')
        +si(TRANS.order_value,fN(totalVal,2)+` {{ CURRENCY_SYMBOL }}`,'#198754');
}
window.renderStep1Totals=renderStep1Totals;
function buildOrderFromItems(){
    ITEMS.forEach(function(item){
        var mid=item.id_material;
        var ps=item.pack?item.pack.pack_size:1;
        var cp=item.stock_minimum_packs||0;
        var packs=(VALID[mid]!==undefined)?VALID[mid]:cp;
        /* ORDER.qty przechowuje liczbę OPAKOWAŃ (kartonów), nie sztuk */
        if(packs>0){
            if(ORDER[mid]===undefined){
                var packPrice=item.pack?(parseFloat(item.pack.price_net)||0):0;
                ORDER[mid]={qty:packs,pack_price_net:packPrice,pack_size:ps,
                    supplier_sku:item.supplier_sku||'',material_name:item.material_name||'',
                    id_category:item.id_category,category_name:item.category_name||'',
                    unit_name:item.unit_name||'',catalog_position_id:item.catalog_position_id||null,
                    id_unit:item.id_unit||null,
                    supplier_product_active:item.supplier_product_active!==false&&item.supplier_product_active!==0&&item.supplier_product_active!==null,
                    availability_period_ids:item.availability_period_ids||[]};
            } else {ORDER[mid].qty=packs;}
        } else {
            /* Gdy ilość = 0, usuń pozycję z ORDER — nie powinna trafiać do Step 3 */
            delete ORDER[mid];
        }
    });
}
function setDelivMode(mode){
    delivMode=mode;
    [1,2].forEach(function(i){document.getElementById('modeBtn'+i).classList.toggle('active',i===mode);});
    document.getElementById('delivDate2Wrap').style.display=mode===2?'':'none';
    document.getElementById('splitPanel').style.display=mode===2?'':'none';
}
window.setDelivMode=setDelivMode;
function renderOrderTable(){
    var isSplit=delivMode===2;
    var head=document.getElementById('orderHead');
    var body=document.getElementById('orderBody');
    if(isSplit){
        head.innerHTML='<tr>'
            +'<th class="text-start" rowspan="2" style="min-width:150px">'+TRANS.product+'</th>'
            +'<th colspan="2" style="text-align:center;background:#1e3a5f;color:#93c5fd">'+TRANS.stock+'</th>'
            +'<th colspan="3" style="text-align:center;background:#1e3a5f;color:#60a5fa">'+TRANS.delivery_1+'</th>'
            +'<th colspan="3" style="text-align:center;background:#14532d;color:#6ee7b7">'+TRANS.delivery_2+'</th>'
            +'<th colspan="2" style="text-align:center;background:#1f2937;color:#d1d5db">'+TRANS.total+'</th>'
            +'<th rowspan="2" style="width:32px"></th>'
            +'</tr><tr>'
            +'<th style="font-size:9px;background:#1e3a5f;color:#93c5fd">'+TRANS.min_packs+'</th>'
            +'<th style="font-size:9px;background:#1e3a5f;color:#93c5fd">'+TRANS.unit+'</th>'
            +'<th style="font-size:9px;text-align:center;background:#1e3a5f;color:#60a5fa">'+TRANS.quantity+' ('+TRANS.carton_short+')'+'</th>'
            +'<th style="font-size:9px;text-align:right;background:#1e3a5f;color:#60a5fa">'+TRANS.pack_price_net+'</th>'
            +'<th style="font-size:9px;text-align:right;background:#1e3a5f;color:#60a5fa">'+TRANS.subtotal_short+'</th>'
            +'<th style="font-size:9px;text-align:center;background:#14532d;color:#6ee7b7">'+TRANS.quantity+' ('+TRANS.carton_short+')'+'</th>'
            +'<th style="font-size:9px;text-align:right;background:#14532d;color:#6ee7b7">'+TRANS.pack_price_net+'</th>'
            +'<th style="font-size:9px;text-align:right;background:#14532d;color:#6ee7b7">'+TRANS.subtotal_short+'</th>'
            +'<th style="font-size:9px;text-align:center;background:#1f2937;color:#d1d5db">'+TRANS.quantity+' ('+TRANS.carton_short+')'+'</th>'
            +'<th style="font-size:9px;text-align:right;background:#1f2937;color:#d1d5db">'+TRANS.total+'</th>'
            +'</tr>';
    } else {
        head.innerHTML='<tr>'
            +'<th class="text-start" rowspan="2" style="min-width:150px">'+TRANS.product+'</th>'
            +'<th colspan="2" style="text-align:center;background:#1e3a5f;color:#93c5fd">'+TRANS.stock+'</th>'
            +'<th colspan="3" style="text-align:center;background:#1f2937;color:#d1d5db">'+TRANS.order+'</th>'
            +'<th rowspan="2" style="width:32px"></th>'
            +'</tr><tr>'
            +'<th style="font-size:9px;background:#1e3a5f;color:#93c5fd">'+TRANS.min_packs+'</th>'
            +'<th style="font-size:9px;background:#1e3a5f;color:#93c5fd">'+TRANS.unit+'</th>'
            +'<th style="font-size:9px;text-align:center;background:#1f2937;color:#d1d5db">'+TRANS.quantity+' ('+TRANS.carton_short+')'+'</th>'
            +'<th style="font-size:9px;text-align:right;background:#1f2937;color:#d1d5db">'+TRANS.pack_price_net+'</th>'
            +'<th style="font-size:9px;text-align:right;background:#1f2937;color:#d1d5db">'+TRANS.total+'</th>'
            +'</tr>';
    }
    var entries=Object.entries(ORDER).filter(function(e){
        if(!e[1]||e[1].qty<0) return false;
        /* Filtr okresu dostępności Step 3 */
        if(periodFilterStep3!=='all'){
            var ids=(e[1].availability_period_ids||[]).map(String);
            if(!ids.includes(String(periodFilterStep3))) return false;
        }
        return true;
    });
    if(!entries.length){
        var cols=isSplit?14:8;
        body.innerHTML='<tr><td colspan="'+cols+'" class="text-center text-muted py-4">'+TRANS.no_products_load_step1+'</td></tr>';
        renderTotals();return;
    }
    var html='';
    var lastCat='';
    entries.forEach(function(pair){
        var mid=parseInt(pair[0]);
        var o=pair[1];
        if(!o) return;

        if(o.category_name!==lastCat){
            lastCat=o.category_name;
            var cols=isSplit?14:8;
            html+='<tr class="cat-sep"><td colspan="'+cols+'">'+escH(o.category_name||'')+'</td></tr>';
        }
        var item=ITEMS.find(function(x){return x.id_material===mid;});
        var cp=item?(item.stock_minimum_packs||0):0;
        var ps=o.pack_size||1;
        var q1=Math.round(o.qty*splitPct/100);
        var q2=o.qty-q1;
        var periodIds=(o.availability_period_ids||[]).join(',');
        var isInactive=(item&&(item.supplier_product_active===false||item.supplier_product_active===0||item.supplier_product_active===null));
        var inactiveIcon=isInactive?(' <i class="bi bi-exclamation-triangle-fill text-warning" title="'+escH(TRANS.supplier_product_inactive_warning)+'" style="font-size:11px;vertical-align:middle"></i>'):'';
        var ctx='<td class="text-center wz-num fw-bold" style="color:#435ebe">'+cp+'</td>'
            +'<td class="text-center wz-lbl">'+escH(o.unit_name)+'</td>';
        var nm='<td class="text-start">'
            +'<div class="wz-name">'+escH(o.material_name)+inactiveIcon+'</div>'
            +(o.supplier_sku?'<div class="wz-meta">SKU '+escH(o.supplier_sku)+'</div>':'')
            +'</td>';
        if(isSplit){
            var ppu=o.pack_price_net/(o.pack_size||1);
            var priceCell='<td class="text-end"><span class="mono" style="font-size:12px">'+fN(o.pack_price_net,2)+'</span><div style="font-size:9px;color:#888">ppc: '+fN(ppu,2)+'</div></td>';
            html+='<tr data-mid="'+mid+'" data-period-ids="'+periodIds+'">'+nm+ctx
                +'<td class="text-center"><input type="number" class="form-control form-control-sm mono text-center px-1 py-0" style="width:65px;display:inline-block" min="0" step="1" value="'+q1+'" onchange="onQC('+mid+',1,this.value)"></td>'
                +priceCell
                +'<td class="text-end mono fw-bold" style="background:#f0f6ff;color:#1d4ed8" id="s1_'+mid+'">'+fN(q1*o.pack_price_net,2)+'</td>'
                +'<td class="text-center"><input type="number" class="form-control form-control-sm mono text-center px-1 py-0" style="width:65px;display:inline-block" min="0" step="1" value="'+q2+'" onchange="onQC('+mid+',2,this.value)"></td>'
                +priceCell
                +'<td class="text-end mono fw-bold" style="background:#f0fdf4;color:#166534" id="s2_'+mid+'">'+fN(q2*o.pack_price_net,2)+'</td>'
                +'<td class="text-center mono fw-bold" style="background:#f3f4f6" id="qt_'+mid+'">'+o.qty+'</td>'
                +'<td class="text-end mono fw-bold" style="background:#f3f4f6" id="pt_'+mid+'">'+fN(o.qty*o.pack_price_net,2)+'</td>'
                +'<td class="text-center"><button class="btn btn-sm btn-outline-danger py-0 px-1" onclick="removeItem('+mid+')">&times;</button></td>'
                +'</tr>';
        } else {
            var ppu=o.pack_price_net/(o.pack_size||1);
            html+='<tr data-mid="'+mid+'" data-period-ids="'+periodIds+'">'+nm+ctx
                +'<td class="text-center"><input type="number" class="form-control form-control-sm mono text-center px-1 py-0" style="width:70px;display:inline-block" min="0" step="1" value="'+o.qty+'" onchange="onQC('+mid+',0,this.value)"></td>'
                +'<td class="text-end"><span class="mono" style="font-size:12px">'+fN(o.pack_price_net,2)+'</span><div style="font-size:9px;color:#888">ppc: '+fN(ppu,2)+'</div></td>'
                +'<td class="text-end mono fw-bold" style="background:#f3f4f6" id="pt_'+mid+'">'+fN(o.qty*o.pack_price_net,2)+'</td>'
                +'<td class="text-center"><button class="btn btn-sm btn-outline-danger py-0 px-1" onclick="removeItem('+mid+')">&times;</button></td>'
                +'</tr>';
        }
    });
    body.innerHTML=html;
    renderTotals();
}
function onQC(mid,liv,val){
    var o=ORDER[mid];if(!o)return;
    var isSplit=delivMode===2;
    var row=document.querySelector('[data-mid="'+mid+'"]');
    var inputs=row?row.querySelectorAll('input[type=number]'):[];
    if(isSplit&&inputs.length>=2){
        var q1=parseInt(inputs[0].value)||0,q2=parseInt(inputs[1].value)||0;
        o.qty=q1+q2;
        var s1=document.getElementById('s1_'+mid),s2=document.getElementById('s2_'+mid);
        var qt=document.getElementById('qt_'+mid),pt=document.getElementById('pt_'+mid);
        if(s1)s1.textContent=fN(q1*o.pack_price_net,2);
        if(s2)s2.textContent=fN(q2*o.pack_price_net,2);
        if(qt)qt.textContent=o.qty;
        if(pt)pt.textContent=fN(o.qty*o.pack_price_net,2);
    } else {
        o.qty=parseInt(val)||0;
        var pt=document.getElementById('pt_'+mid);
        if(pt)pt.textContent=fN(o.qty*o.pack_price_net,2);
    }
    renderTotals();
}
window.onQC=onQC;
function removeItem(mid){delete ORDER[mid];renderOrderTable();}
window.removeItem=removeItem;
function onSlider(val){
    splitPct=parseInt(val);
    document.getElementById('pct1').textContent=splitPct+'%';
    document.getElementById('pct2').textContent=(100-splitPct)+'%';
    document.getElementById('bdg1').textContent=splitPct+'%';
    document.getElementById('bdg2').textContent=(100-splitPct)+'%';
    Object.entries(ORDER).forEach(function(pair){
        var mid=parseInt(pair[0]),o=pair[1];if(!o)return;
        var row=document.querySelector('[data-mid="'+mid+'"]');if(!row)return;
        var inputs=row.querySelectorAll('input[type=number]');if(inputs.length<2)return;
        var q1=Math.round(o.qty*splitPct/100),q2=o.qty-q1;
        inputs[0].value=q1;inputs[1].value=q2;
        var s1=document.getElementById('s1_'+mid),s2=document.getElementById('s2_'+mid);
        if(s1)s1.textContent=fN(q1*o.pack_price_net,2);
        if(s2)s2.textContent=fN(q2*o.pack_price_net,2);
    });
    renderTotals();
}
window.onSlider=onSlider;
function calcTotals(){
    var isSplit=delivMode===2,st1=0,st2=0,qty=0,refs=0;
    Object.entries(ORDER).forEach(function(pair){
        var mid=parseInt(pair[0]),o=pair[1];if(!o||o.qty<=0)return;refs++;
        var row=document.querySelector('[data-mid="'+mid+'"]');
        var inputs=row?row.querySelectorAll('input[type=number]'):[];
        if(isSplit&&inputs.length>=2){
            var q1=parseInt(inputs[0].value)||0,q2=parseInt(inputs[1].value)||0;
            st1+=q1*o.pack_price_net;
            st2+=q2*o.pack_price_net;
            qty+=q1+q2;
        } else {
            var q=parseInt(inputs[0]?inputs[0].value:o.qty)||o.qty;
            st1+=q*o.pack_price_net;qty+=q;
        }
    });
    return{st1:st1,st2:st2,qty:qty,refs:refs};
}
function getFreight(sub){
    if(!ORDER_CONFIG||!ORDER_CONFIG.tiers||!ORDER_CONFIG.tiers.length)return 0;
    for(var i=0;i<ORDER_CONFIG.tiers.length;i++){
        var t=ORDER_CONFIG.tiers[i];
        if(sub<(t.max_order_value||Infinity))return t.freight_cost||0;
    }
    return 0;
}
function renderTotals(){
    var isSplit=delivMode===2,t=calcTotals();
    var f1=getFreight(t.st1),f2=isSplit?getFreight(t.st2):0;
    var tot1=t.st1+f1,tot2=t.st2+f2,totG=tot1+tot2;
    var sc=document.getElementById('sumCards');
    if(sc){
        var fl=function(f){return f===0?'<span class="text-success">'+TRANS.port_short+'</span>':'<span class="text-warning">+'+fN(f,2)+' '+TRANS.port_short+'</span>';};
        if(isSplit){
            sc.innerHTML='<div class="col-md-4"><div class="sum-card" style="border-top:3px solid #435ebe"><span class="sum-card-label">'+TRANS.delivery_1+'</span><div class="sum-card-value" style="color:#435ebe">'+fN(tot1,2)+'</div>'+fl(f1)+'</div></div>'
                +'<div class="col-md-4"><div class="sum-card" style="border-top:3px solid #198754"><span class="sum-card-label">'+TRANS.delivery_2+'</span><div class="sum-card-value" style="color:#198754">'+fN(tot2,2)+'</div>'+fl(f2)+'</div></div>'
                +'<div class="col-md-4"><div class="sum-card" style="border-top:3px solid #111"><span class="sum-card-label">'+TRANS.total+'</span><div class="sum-card-value">'+fN(totG,2)+'</div><small class="text-muted">'+t.qty+' '+TRANS.carton_short+' · '+t.refs+' '+TRANS.refs_short+'</small></div></div>';
        } else {
            sc.innerHTML='<div class="col-md-6"><div class="sum-card" style="border-top:3px solid #111"><span class="sum-card-label">'+TRANS.total_order+'</span><div class="sum-card-value">'+fN(tot1,2)+'</div>'+fl(f1)+'<div><small class="text-muted">'+t.qty+' '+TRANS.carton_short+' · '+t.refs+' '+TRANS.refs_short+'</small></div></div></div>';
        }
    }
    var foot=document.getElementById('orderFoot');if(!foot)return;
    if(isSplit){
        foot.innerHTML='<tr style="border-top:1.5px solid #ddd">'
            +'<td colspan="4" class="text-end fw-bold">'+TRANS.subtotal+':</td>'
            +'<td colspan="2"></td>'
            +'<td class="text-end mono fw-bold" style="background:#f0f6ff;color:#1d4ed8">'+fN(t.st1,2)+'</td>'
            +'<td colspan="2"></td>'
            +'<td class="text-end mono fw-bold" style="background:#f0fdf4;color:#166534">'+fN(t.st2,2)+'</td>'
            +'<td style="background:#f3f4f6"></td>'
            +'<td class="text-end mono fw-bold" style="background:#f3f4f6">'+fN(t.st1+t.st2,2)+'</td>'
            +'<td></td></tr>'
            +'<tr><td colspan="4" class="text-end">'+TRANS.port_short+':</td>'
            +'<td colspan="2"></td>'
            +'<td class="text-end mono" style="background:#f0f6ff;color:'+(f1>0?'#b45309':'#166534')+'">'+( f1>0?fN(f1,2):TRANS.free)+'</td>'
            +'<td colspan="2"></td>'
            +'<td class="text-end mono" style="background:#f0fdf4;color:'+(f2>0?'#b45309':'#166534')+'">'+( f2>0?fN(f2,2):TRANS.free)+'</td>'
            +'<td style="background:#f3f4f6"></td>'
            +'<td class="text-end mono" style="background:#f3f4f6">'+fN(f1+f2,2)+'</td>'
            +'<td></td></tr>'
            +'<tr style="border-top:2px solid #111"><td colspan="4" class="text-end fw-bold fs-6">'+TRANS.total+':</td>'
            +'<td colspan="2"></td>'
            +'<td class="text-end mono fw-bold" style="background:#f0f6ff;color:#1d4ed8;font-size:14px">'+fN(tot1,2)+'</td>'
            +'<td colspan="2"></td>'
            +'<td class="text-end mono fw-bold" style="background:#f0fdf4;color:#166534;font-size:14px">'+fN(tot2,2)+'</td>'
            +'<td style="background:#f3f4f6"></td>'
            +'<td class="text-end mono fw-bold" style="background:#f3f4f6;font-size:15px">'+fN(totG,2)+'</td>'
            +'<td></td></tr>';
    } else {
        foot.innerHTML='<tr style="border-top:1.5px solid #ddd">'
            +'<td colspan="4" class="text-end">'+TRANS.port_short+':</td>'
            +'<td colspan="2"></td>'
            +'<td class="text-end mono" style="color:'+(f1>0?'#b45309':'#166534')+'">'+( f1>0?fN(f1,2):TRANS.free)+'</td>'
            +'<td></td></tr>'
            +'<tr style="border-top:2px solid #111"><td colspan="4" class="text-end fw-bold fs-6">'+TRANS.total+':</td>'
            +'<td colspan="2"></td>'
            +'<td class="text-end mono fw-bold" style="font-size:15px">'+fN(tot1,2)+'</td>'
            +'</tr>';
    }
}
function addProductModal(){
    var sel=document.getElementById('modalProdSelect');
    sel.innerHTML='<option value="">'+TRANS.select_product+'</option>';
    ITEMS.forEach(function(item){
        var mid=item.id_material;
        if(ORDER[mid]!==undefined) return;
        var opt=document.createElement('option');
        opt.value=mid;
        opt.textContent=item.material_name+(item.supplier_sku?' ['+item.supplier_sku+']':'');
        opt.dataset.packPrice=item.pack?(parseFloat(item.pack.price_net)||0):0;
        opt.dataset.packSize=item.pack?item.pack.pack_size:1;
        opt.dataset.sku=item.supplier_sku||'';
        opt.dataset.cat=item.id_category;
        opt.dataset.catName=item.category_name||'';
        opt.dataset.unit=item.unit_name||'';
        opt.dataset.catPos=item.catalog_position_id||'';
        opt.dataset.idUnit=item.id_unit||'';
        opt.dataset.periodIds=(item.availability_period_ids||[]).join(',');
        sel.appendChild(opt);
    });
    document.getElementById('modalQty').value=0;
    sel.onchange=function(){};
    new bootstrap.Modal(document.getElementById('addProdModal')).show();
}
window.addProductModal=addProductModal;
function saveModal(){
    var sel=document.getElementById('modalProdSelect');
    var mid=parseInt(sel.value);
    var opt=sel.options[sel.selectedIndex];
    var qty=parseInt(document.getElementById('modalQty').value)||0;
    var packPrice=parseFloat(opt.dataset.packPrice)||0;
    if(!mid)return;
    if(ORDER[mid]!==undefined){
        alert(TRANS.product_already_in_order);
        return;
    }
    ORDER[mid]={qty:qty,pack_price_net:packPrice,pack_size:parseFloat(opt.dataset.packSize)||1,
        supplier_sku:opt.dataset.sku||'',material_name:opt.textContent.split(' [')[0],
        id_category:parseInt(opt.dataset.cat)||null,category_name:opt.dataset.catName||'',
        unit_name:opt.dataset.unit||'',catalog_position_id:opt.dataset.catPos?parseInt(opt.dataset.catPos):null,
        id_unit:opt.dataset.idUnit?parseInt(opt.dataset.idUnit):null,
        availability_period_ids:opt.dataset.periodIds?opt.dataset.periodIds.split(',').map(Number):[]};
    bootstrap.Modal.getInstance(document.getElementById('addProdModal')).hide();
    renderOrderTable();
}
window.saveModal=saveModal;
function renderConfirmation(){
    var isSplit=delivMode===2,t=calcTotals();
    var f1=getFreight(t.st1),f2=isSplit?getFreight(t.st2):0,totG=t.st1+t.st2+f1+f2;
    var d1=document.getElementById('delivDate1').value||'';
    var d2=isSplit&&document.getElementById('delivDate2')?document.getElementById('delivDate2').value||'':'';
    var sg=document.getElementById('sumGrid');
    var si=function(lbl,val){return '<div class="col-md-2 col-sm-4"><div style="background:#f8f9fa;border-radius:6px;padding:10px 13px"><div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#888;margin-bottom:3px">'+lbl+'</div><div class="mono" style="font-size:15px;font-weight:600">'+val+'</div></div></div>';};
    sg.innerHTML=si(TRANS.supplier,'{{ supplier.getName() }}')+si(TRANS.delivery_1,d1||'\u2014')+(isSplit?si(TRANS.delivery_2,d2||'\u2014'):'')+si(TRANS.references,''+t.refs)+si(TRANS.cartons,''+t.qty+' '+TRANS.carton_short)+si(TRANS.to_pay,'<span style="color:#dc3545">'+fN(totG,2)+'</span>');
    var body=document.getElementById('confBody'),foot=document.getElementById('confFoot');
    body.innerHTML='';var grand=0,lastCat='';
    Object.entries(ORDER).forEach(function(pair){
        var mid=parseInt(pair[0]),o=pair[1];if(!o||o.qty<=0)return;
        if(o.category_name!==lastCat){lastCat=o.category_name;body.innerHTML+='<tr class="cat-sep"><td colspan="6">'+escH(o.category_name||'')+'</td></tr>';}
        var packs=o.qty;  /* ORDER.qty przechowuje kartony */
        var pieces=packs*(o.pack_size||1);
        var total=packs*o.pack_price_net;grand+=total;
        body.innerHTML+='<tr>'
            +'<td class="text-start wz-name">'+escH(o.material_name)+'</td>'
            +'<td class="wz-meta">'+escH(o.supplier_sku||'')+'</td>'
            +'<td class="text-center wz-num fw-bold">'+pieces+'</td>'
            +'<td class="text-center wz-num" style="color:#888">'+packs+'</td>'
            +'<td class="text-end wz-num">'+fN(o.pack_price_net,2)+'</td>'
            +'<td class="text-end wz-num fw-bold">'+fN(total,2)+'</td>'
            +'</tr>';
    });
    var fr=getFreight(grand);
    foot.innerHTML='<tr style="border-top:1.5px solid #ddd"><td colspan="4" class="text-end fw-bold">'+TRANS.subtotal+':</td><td colspan="2" class="text-end mono fw-bold">'+fN(grand,2)+'</td></tr>'
        +'<tr><td colspan="4" class="text-end" style="color:'+(fr>0?'#b45309':'#166534')+'">'+TRANS.port_short+':</td><td colspan="2" class="text-end mono">'+(fr>0?fN(fr,2):TRANS.free)+'</td></tr>'
        +'<tr style="border-top:2px solid #111"><td colspan="4" class="text-end fw-bold fs-6">'+TRANS.total+':</td><td colspan="2" class="text-end mono fw-bold" style="font-size:16px">'+fN(grand+fr,2)+'</td></tr>';
}
function submitOrder(){
    if(orderSubmitting) return;
    var isSplit=delivMode===2;
    var d1=document.getElementById('delivDate1').value;
    var d2=isSplit&&document.getElementById('delivDate2')?document.getElementById('delivDate2').value:null;
    if(!d1){showSnack(false,TRANS.select_delivery_date_1);return;}
    var items=[];
    Object.entries(ORDER).forEach(function(pair){
        var mid=parseInt(pair[0]),o=pair[1];if(!o||o.qty<=0)return;
        var row=document.querySelector('[data-mid="'+mid+'"]');
        var inputs=row?row.querySelectorAll('input[type=number]'):[];
        /* q1, q2 = liczba kartonów z inputów (lub z ORDER.qty dla trybu single) */
        var q1,q2;
        if(isSplit&&inputs.length>=2){q1=parseInt(inputs[0].value)||0;q2=parseInt(inputs[1].value)||0;}
        else{q1=o.qty;q2=0;}
        /* Wysyłamy do PHP ilość sztuk = kartony * pack_size; PHP przeliczy z powrotem na kartony */
        var ps=o.pack_size||1;
        items.push({
            id_material:mid,
            supplier_sku:o.supplier_sku||null,
            material_name:o.material_name||null,
            pack_size_in_base_unit:ps,
            id_unit:o.id_unit||null,
            qty:(q1+q2)*ps,
            qty_delivery_1:q1*ps,
            qty_delivery_2:q2*ps,
            pack_price_net:o.pack_price_net
        });
    });
    if(!items.length){showSnack(false,TRANS.no_items);return;}
    var payload={
        delivery_mode:delivMode,
        delivery_date:d1,
        delivery_date2:d2,
        split_pct:isSplit?splitPct:null,
        items:items,
        order_params:{
            beginning_of_period:document.getElementById('paramDate').value,
            requisition_period_days:parseInt(document.getElementById('paramDays').value)||7,
            sales_forecast:parseInt(document.getElementById('paramForecast').value)||100
        }
    };
    orderSubmitting=true;
    var btn=document.getElementById('submitBtn');
    btn.disabled=true;
    btn.innerHTML='<span class="spinner-border spinner-border-sm me-2"></span> '+TRANS.sending;
    fetch(`{{ root }}/ajax/material-suppliers/${SUPPLIER_ID}/orders/new`,{
        method:'POST',
        headers:{'Content-Type':'application/json','X-Requested-With':'XMLHttpRequest'},
        body:JSON.stringify(payload)
    }).then(function(r){return r.json();})
    .then(function(resp){
        if(resp.ok||resp.code===200||resp.code===201){
            showSnack(true,TRANS.order_success);
            setTimeout(function(){window.location.href=`{{ root }}/material-orders/pending`;},1500);
        } else {
            orderSubmitting=false;
            btn.disabled=false;
            btn.innerHTML='<i class="bi bi-check-circle me-2"></i> '+TRANS.make_order;
            showSnack(false,resp.message||TRANS.order_send_error);
        }
    }).catch(function(){
        orderSubmitting=false;
        btn.disabled=false;
        btn.innerHTML='<i class="bi bi-check-circle me-2"></i> '+TRANS.make_order;
        showSnack(false,TRANS.connection_error);
    });
}
window.submitOrder=submitOrder;
/* ── Okresy dostępności — badge'e filtrowania surowców ── */
function collectAndBuildPeriodBars(){
    /* Zbierz unikalne okresy ze wszystkich items */
    var periodsMap={};
    ITEMS.forEach(function(item){
        (item.availability_periods||[]).forEach(function(p){
            if(!periodsMap[p.id]) periodsMap[p.id]=p;
        });
    });
    var periods=Object.values(periodsMap).sort(function(a,b){return a.name.localeCompare(b.name);});

    ['Step1','Step3'].forEach(function(suffix){
        var wrap=document.getElementById('periodBar'+suffix+'Wrap');
        var bar=document.getElementById('periodBar'+suffix);
        if(!wrap||!bar) return;
        if(!periods.length){wrap.style.display='none';return;}
        wrap.style.display='';
        var filterFn='filterByPeriod'+suffix;
        var html='<button class="period-badge period-badge-all active" data-period-id="all" onclick="'+filterFn+'(\'all\')">'
            +'<span class="period-badge-icon">📦</span>'
            +'<div class="period-badge-content"><div class="period-badge-name">{{ translations.all_products }}</div></div>'
            +'</button>';
        var today=new Date().toISOString().split('T')[0];
        var todayMD=today.slice(5);
        periods.forEach(function(p){
            /* Wyznacz czy aktualny */
            var isCurrent=false;
            if(p.is_recurring){
                var sMD=p.start_date?p.start_date.slice(5):'';
                var eMD=p.end_date?p.end_date.slice(5):'';
                if(sMD&&eMD){isCurrent=(sMD<=eMD)?(todayMD>=sMD&&todayMD<=eMD):(todayMD>=sMD||todayMD<=eMD);}
            } else {
                isCurrent=!!(p.start_date&&p.end_date&&today>=p.start_date&&today<=p.end_date);
            }
            /* Wyciągnij emoji z nazwy */
            var emoji='🗓️', displayName=p.name||'';
            var emMatch=displayName.match(/^(\p{Emoji_Presentation}|\p{Extended_Pictographic})\s*/u);
            if(emMatch){emoji=emMatch[0].trim();displayName=displayName.slice(emMatch[0].length).trim();}
            /* Formatuj daty */
            var dateStr='';
            if(p.start_date&&p.end_date){
                if(p.is_recurring){
                    dateStr=p.start_date.slice(5).replace('-','.')+' – '+p.end_date.slice(5).replace('-','.');
                } else {
                    dateStr=p.start_date+' – '+p.end_date;
                }
            }
            html+='<button class="period-badge'+(isCurrent?' period-badge-current active':'')+'" '
                +'data-period-id="'+p.id+'" '
                +'data-is-current="'+(isCurrent?'1':'0')+'" '
                +'onclick="'+filterFn+'('+p.id+')">'
                +'<span class="period-badge-icon">'+emoji+'</span>'
                +'<div class="period-badge-content">'
                +'<div class="period-badge-name">'+escH(displayName)+'</div>'
                +(dateStr?'<div class="period-badge-dates">'+escH(dateStr)+(p.is_recurring?' <span class="period-recurring-icon">↻</span>':'')+'</div>':'')
                +'</div>'
                +(isCurrent?'<span class="period-current-indicator">{{ translations.current }}</span>':'')
                +'</button>';
        });
        bar.innerHTML=html;
    });
}
function filterByPeriodStep1(periodId){
    periodFilterStep1=periodId;
    document.querySelectorAll('#periodBarStep1 .period-badge').forEach(function(b){b.classList.remove('active');});
    var badge=document.querySelector('#periodBarStep1 .period-badge[data-period-id="'+periodId+'"]');
    if(badge) badge.classList.add('active');
    renderStep1Table();
}
function filterByPeriodStep3(periodId){
    periodFilterStep3=periodId;
    document.querySelectorAll('#periodBarStep3 .period-badge').forEach(function(b){b.classList.remove('active');});
    var badge=document.querySelector('#periodBarStep3 .period-badge[data-period-id="'+periodId+'"]');
    if(badge) badge.classList.add('active');
    renderOrderTable();
}
window.filterByPeriodStep1=filterByPeriodStep1;
window.filterByPeriodStep3=filterByPeriodStep3;
function fN(n,d){return parseFloat(n||0).toFixed(d!==undefined?d:0);}
function escH(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
document.addEventListener('DOMContentLoaded',function(){
    /* loadStockItems() NIE jest wywoływana automatycznie — użytkownik musi kliknąć "Odśwież",
       aby załadować surowce i zobaczyć badge'y okresów dostępności. */
    document.getElementById('toggleZeroOrder').addEventListener('change',renderStep1Table);
    initDeliveryDateInputs();
});
})();
</script>
{% endblock %}