{% extends "layouts/base.twig" %}
{% block title %}{{ translations.b2b_clients_title ?? 'Clients B2B' }}{% endblock %}

{% block head %}
<style>
    /* ── Design tokens ─────────────────────────────────────── */
    :root {
        --cl-green:  #1C3B2E;
        --cl-sf:     #ffffff;
        --cl-sf2:    #F0EDE9;
        --cl-sf3:    #E5E1DC;
        --cl-t1:     #0E0E0E;
        --cl-t2:     #5A5A5A;
        --cl-t3:     #9A9A9A;
        --cl-bd:     rgba(0,0,0,0.07);

        --cl-sa:  #16a34a; --cl-sa-bg: #f0fdf4; --cl-sa-bd: #bbf7d0;
        --cl-sb:  #2563eb; --cl-sb-bg: #eff6ff; --cl-sb-bd: #bfdbfe;
        --cl-sc:  #b45309; --cl-sc-bg: #fffbeb; --cl-sc-bd: #fde68a;
        --cl-sd:  #dc2626; --cl-sd-bg: #fef2f2; --cl-sd-bd: #fecaca;
        --cl-sn:  #6b7280; --cl-sn-bg: #f9fafb; --cl-sn-bd: #e5e7eb;

        --cl-cr-safe:    #16a34a;
        --cl-cr-medium:  #b45309;
        --cl-cr-warning: #d97706;
        --cl-cr-danger:  #dc2626;
    }

    /* ── Layout ────────────────────────────────────────────── */
    .cl-page-wrap { display: flex; flex-direction: column; gap: 16px; }

    /* ── Filtr bar ─────────────────────────────────────────── */
    .cl-filter-bar {
        display: flex; flex-direction: column; gap: 0;
        background: var(--cl-sf); border-radius: 12px;
        border: 0.5px solid var(--cl-bd);
        overflow: hidden;
    }
    /* Wiersz wyszukiwania */
    .cl-filter-search-row {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--cl-sf3);
    }
    .cl-filter-search-row .cl-search-icon-standalone {
        color: var(--cl-t3); font-size: .9rem; flex-shrink: 0;
    }
    .cl-filter-search-row input {
        flex: 1; min-width: 0;
        padding: 6px 10px;
        border: 1px solid var(--cl-bd); border-radius: 8px;
        font-size: 0.83rem; background: var(--cl-sf2); color: var(--cl-t1);
        outline: none; transition: border-color .15s;
        max-width: 360px;
    }
    .cl-filter-search-row input:focus { border-color: #6ea8fe; background: #fff; }
    .cl-filter-search-label {
        font-size: 0.65rem; font-weight: 700; letter-spacing: .08em;
        text-transform: uppercase; color: var(--cl-t3); flex-shrink: 0;
    }
    /* Wiersz pills */
    .cl-filter-pills-row {
        display: flex; align-items: center; gap: 0;
        flex-wrap: wrap;
    }
    .cl-filter-group {
        display: flex; flex-direction: column; gap: 5px;
        padding: 10px 16px;
        border-right: 1px solid var(--cl-sf3);
    }
    .cl-filter-group:last-child { border-right: none; }
    .cl-filter-label {
        font-size: 0.63rem; font-weight: 700; letter-spacing: .08em;
        text-transform: uppercase; color: var(--cl-t3);
    }
    .cl-pills { display: flex; gap: 5px; flex-wrap: wrap; }
    .cl-pill {
        padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;
        border: 1px solid var(--cl-bd); background: var(--cl-sf2); color: var(--cl-t2);
        cursor: pointer; transition: all .13s; white-space: nowrap; user-select: none;
    }
    .cl-pill:hover { background: var(--cl-sf3); }
    .cl-pill.active {
        background: var(--cl-green); color: #fff; border-color: var(--cl-green);
    }
    /* Score pills actif colors */
    .cl-pill[data-score="A"].active { background: var(--cl-sa); border-color: var(--cl-sa); }
    .cl-pill[data-score="B"].active { background: var(--cl-sb); border-color: var(--cl-sb); }
    .cl-pill[data-score="C"].active { background: var(--cl-sc); border-color: var(--cl-sc); }
    .cl-pill[data-score="D"].active { background: var(--cl-sd); border-color: var(--cl-sd); }

    /* ── Barre de recherche (legacy — kept for other uses) ──── */
    .cl-search-wrap { position: relative; flex: 0 0 220px; }
    .cl-search-wrap input {
        width: 100%; padding: 6px 10px 6px 32px;
        border: 1px solid var(--cl-bd); border-radius: 8px;
        font-size: 0.83rem; background: var(--cl-sf2); color: var(--cl-t1);
        outline: none; transition: border-color .15s;
    }
    .cl-search-wrap input:focus { border-color: #6ea8fe; background: #fff; }
    .cl-search-wrap .cl-search-icon {
        position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
        color: var(--cl-t3); font-size: .85rem; pointer-events: none;
    }

    /* ── Tableau ───────────────────────────────────────────── */
    .cl-card {
        background: var(--cl-sf); border-radius: 14px;
        border: 0.5px solid var(--cl-bd); overflow: hidden;
    }
    .cl-table { width: 100%; border-collapse: collapse; }
    .cl-table thead th {
        font-size: 0.67rem; font-weight: 700; letter-spacing: .06em;
        text-transform: uppercase; color: var(--cl-t3);
        padding: 10px 12px; border-bottom: 1.5px solid var(--cl-sf3);
        background: var(--cl-sf); white-space: nowrap;
        position: sticky; top: 0; z-index: 1;
    }
    .cl-table tbody tr {
        cursor: pointer; transition: background .1s;
        border-bottom: 0.5px solid var(--cl-sf3);
    }
    .cl-table tbody tr:hover { background: var(--cl-sf2); }
    .cl-table tbody tr.cl-row-expanded { background: #f0f7ff; }
    .cl-table tbody tr:last-child { border-bottom: none; }
    .cl-table td {
        padding: 11px 12px; font-size: 0.84rem; color: var(--cl-t1);
        vertical-align: middle;
    }
    .cl-table td.cl-td-company {
        max-width: 220px; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap;
        font-weight: 600;
    }
    .cl-table td.cl-td-muted { color: var(--cl-t3); font-size: 0.78rem; }

    /* ── Compteur ──────────────────────────────────────────── */
    .cl-count-bar {
        display: flex; align-items: center; justify-content: space-between;
        padding: 8px 14px;
        font-size: 0.75rem; color: var(--cl-t3);
    }

    /* ── Score badge ───────────────────────────────────────── */
    .cl-score {
        display: inline-flex; align-items: center; justify-content: center;
        width: 26px; height: 26px; border-radius: 6px;
        font-size: 0.78rem; font-weight: 800; border: 1px solid transparent;
        flex-shrink: 0;
    }
    .cl-score-A { background: var(--cl-sa-bg); color: var(--cl-sa); border-color: var(--cl-sa-bd); }
    .cl-score-B { background: var(--cl-sb-bg); color: var(--cl-sb); border-color: var(--cl-sb-bd); }
    .cl-score-C { background: var(--cl-sc-bg); color: var(--cl-sc); border-color: var(--cl-sc-bd); }
    .cl-score-D { background: var(--cl-sd-bg); color: var(--cl-sd); border-color: var(--cl-sd-bd); }
    .cl-score-  { background: var(--cl-sn-bg); color: var(--cl-sn); border-color: var(--cl-sn-bd); }

    /* ── Chip inline ───────────────────────────────────────── */
    .cl-chip {
        display: inline-block; font-size: 0.69rem; font-weight: 600;
        padding: 2px 8px; border-radius: 4px;
        border: 1px solid var(--cl-bd); background: var(--cl-sf2);
        color: var(--cl-t2); white-space: nowrap;
    }
    .cl-chip-credit   { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
    .cl-chip-warn     { background: #fffbeb; color: #b45309; border-color: #fde68a; }
    .cl-chip-danger   { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
    .cl-chip-none     { color: var(--cl-t3); background: none; border-color: transparent; font-style: italic; }
    .cl-chip-inactif  { background: var(--cl-sn-bg); color: var(--cl-sn); border-color: var(--cl-sn-bd); }

    /* ── Barre crédit ──────────────────────────────────────── */
    .cl-credit-bar-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 90px; }
    .cl-credit-bar-track {
        height: 4px; border-radius: 2px; background: var(--cl-sf3); overflow: hidden;
    }
    .cl-credit-bar-fill { height: 100%; border-radius: 2px; transition: width .3s; }
    .cl-credit-label { font-size: 0.69rem; color: var(--cl-t2); white-space: nowrap; }
    .cl-credit-no    { font-size: 0.75rem; color: var(--cl-t3); font-style: italic; }

    /* ── Skeleton ──────────────────────────────────────────── */
    .cl-sk {
        background: linear-gradient(90deg,var(--cl-sf2) 25%,var(--cl-sf3) 50%,var(--cl-sf2) 75%);
        background-size: 200% 100%; animation: cl-shimmer 1.4s infinite; border-radius: 4px;
        display: inline-block;
    }
    @keyframes cl-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

    /* ── Message vide ──────────────────────────────────────── */
    .cl-empty {
        text-align: center; padding: 48px 16px;
        color: var(--cl-t3); font-size: 0.88rem;
    }
    .cl-empty-icon { font-size: 2rem; margin-bottom: 8px; opacity: .4; }

    /* ── Sortable headers ──────────────────────────────────── */
    .cl-table thead th.cl-sortable {
        cursor: pointer; user-select: none;
    }
    .cl-table thead th.cl-sortable:hover { color: var(--cl-t2); }
    .cl-sort-icon { margin-left: 4px; font-size: .6rem; opacity: .4; }
    .cl-table thead th.cl-sort-asc .cl-sort-icon,
    .cl-table thead th.cl-sort-desc .cl-sort-icon { opacity: 1; color: var(--cl-green); }

    /* ── Pagination ────────────────────────────────────────── */
    .cl-pagination {
        display: flex; align-items: center; justify-content: space-between;
        padding: 10px 14px; border-top: 1px solid var(--cl-sf3);
        flex-wrap: wrap; gap: 8px;
    }
    .cl-page-btns { display: flex; gap: 4px; align-items: center; }
    .cl-page-btn {
        min-width: 30px; height: 30px; padding: 0 8px;
        border: 1px solid var(--cl-bd); border-radius: 6px;
        background: var(--cl-sf2); color: var(--cl-t2);
        font-size: .78rem; font-weight: 600; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
        transition: all .12s;
    }
    .cl-page-btn:hover:not(:disabled) { background: var(--cl-sf3); }
    .cl-page-btn.active { background: var(--cl-green); color: #fff; border-color: var(--cl-green); }
    .cl-page-btn:disabled { opacity: .38; cursor: default; }
    .cl-page-size-wrap { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--cl-t3); }
    .cl-page-size-wrap select {
        padding: 3px 6px; border: 1px solid var(--cl-bd); border-radius: 6px;
        font-size: .75rem; background: var(--cl-sf2); color: var(--cl-t1); outline: none;
    }

    /* ── Expand indicator ──────────────────────────────────── */
    .cl-expand-icon {
        color: var(--cl-t3); font-size: .7rem; transition: transform .2s;
    }
    tr.cl-row-expanded .cl-expand-icon { transform: rotate(90deg); }

    /* ── Spinner ───────────────────────────────────────────── */
    #cl-spinner { width: 16px; height: 16px; }

    /* ── Responsive ────────────────────────────────────────── */
    @media (max-width: 768px) {
        .cl-table thead th.cl-hide-sm,
        .cl-table td.cl-hide-sm { display: none; }
    }

    /* ── Expand panel ──────────────────────────────────────── */
    .cl-expand-panel td {
        padding: 0 !important;
        background: var(--cl-sf2);
        border-bottom: 2px solid var(--cl-sf3);
    }
    .cl-expand-inner {
        padding: 16px 20px;
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 20px;
    }
    @media (max-width: 900px) {
        .cl-expand-inner { grid-template-columns: 1fr; }
    }

    /* ── Profil KPI ────────────────────────────────────────── */
    .cl-kpi-block { display: flex; flex-direction: column; gap: 12px; }
    .cl-kpi-title {
        font-size: 0.67rem; font-weight: 700; letter-spacing: .07em;
        text-transform: uppercase; color: var(--cl-t3); margin-bottom: 2px;
    }
    .cl-kpi-grid { display: flex; flex-direction: column; gap: 6px; }
    .cl-kpi-row {
        display: flex; align-items: center; justify-content: space-between;
        font-size: 0.8rem;
    }
    .cl-kpi-lbl { color: var(--cl-t3); }
    .cl-kpi-val { font-weight: 600; color: var(--cl-t1); }

    /* ── Alerte crédit ─────────────────────────────────────── */
    .cl-alert-banner {
        display: flex; align-items: center; gap: 8px;
        padding: 8px 12px; border-radius: 8px; font-size: 0.78rem; font-weight: 600;
        margin-bottom: 8px;
    }
    .cl-alert-danger  { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
    .cl-alert-warning { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
    .cl-alert-safe    { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

    /* ── Historique commandes ──────────────────────────────── */
    .cl-orders-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    .cl-orders-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
    .cl-orders-table thead th {
        font-size: 0.63rem; font-weight: 700; letter-spacing: .06em;
        text-transform: uppercase; color: var(--cl-t3);
        padding: 4px 8px; border-bottom: 1px solid var(--cl-sf3);
        background: transparent; text-align: left;
    }
    .cl-orders-table tbody tr { border-bottom: 0.5px solid var(--cl-sf3); }
    .cl-orders-table tbody tr:last-child { border-bottom: none; }
    .cl-orders-table td { padding: 5px 8px; color: var(--cl-t1); vertical-align: middle; }
    .cl-orders-none { color: var(--cl-t3); font-size: 0.78rem; font-style: italic; }
    .cl-orders-load-err { color: #dc2626; font-size: 0.76rem; }

    /* ── Notes profil ──────────────────────────────────────── */
    .cl-notes-preview {
        font-size: 0.77rem; color: var(--cl-t2); font-style: italic;
        border-left: 3px solid var(--cl-sf3); padding-left: 8px; margin-top: 4px;
        max-height: 48px; overflow: hidden;
    }

    /* ── Formularz edycji profilu ──────────────────────────── */
    .cl-profile-form { display: flex; flex-direction: column; gap: 10px; }
    .cl-form-row { display: flex; flex-direction: column; gap: 3px; }
    .cl-form-label {
        font-size: 0.63rem; font-weight: 700; letter-spacing: .06em;
        text-transform: uppercase; color: var(--cl-t3);
    }
    .cl-form-select, .cl-form-input {
        width: 100%; padding: 5px 8px;
        border: 1px solid var(--cl-bd); border-radius: 6px;
        font-size: 0.8rem; background: #fff; color: var(--cl-t1);
        outline: none; transition: border-color .15s;
    }
    .cl-form-select:focus, .cl-form-input:focus { border-color: #6ea8fe; }
    .cl-form-toggle {
        display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--cl-t2);
        cursor: pointer; user-select: none;
    }
    .cl-form-toggle input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--cl-green); }
    .cl-form-actions { display: flex; gap: 6px; margin-top: 4px; }
    .cl-btn-save {
        padding: 5px 14px; border-radius: 7px; font-size: 0.78rem; font-weight: 700;
        background: var(--cl-green); color: #fff; border: none; cursor: pointer;
        transition: opacity .15s; display: flex; align-items: center; gap: 5px;
    }
    .cl-btn-save:hover { opacity: .88; }
    .cl-btn-save:disabled { opacity: .5; cursor: default; }
    .cl-btn-cancel {
        padding: 5px 12px; border-radius: 7px; font-size: 0.78rem; font-weight: 600;
        background: var(--cl-sf3); color: var(--cl-t2); border: none; cursor: pointer;
        transition: background .15s;
    }
    .cl-btn-cancel:hover { background: #d4cfc9; }
    .cl-btn-edit {
        padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 600;
        background: transparent; color: var(--cl-t3); border: 1px solid var(--cl-bd);
        cursor: pointer; transition: all .12s; display: inline-flex; align-items: center; gap: 4px;
    }
    .cl-btn-edit:hover { background: var(--cl-sf3); color: var(--cl-t2); }

    /* ── Przyciski akcji w rozwiniętym wierszu ─────────────────── */
    .cl-action-btn {
        padding: 4px 11px; border-radius: 7px; font-size: 0.73rem; font-weight: 600;
        cursor: pointer; transition: all .13s;
        display: inline-flex; align-items: center; gap: 5px; border: 1px solid;
        white-space: nowrap;
    }
    .cl-action-btn-basic {
        background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe;
    }
    .cl-action-btn-basic:hover { background: #dbeafe; border-color: #93c5fd; }
    .cl-action-btn-profile {
        background: #f0fdf4; color: #15803d; border-color: #bbf7d0;
    }
    .cl-action-btn-profile:hover { background: #dcfce7; border-color: #86efac; }
    .cl-kpi-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
    .cl-form-feedback {
        font-size: 0.75rem; padding: 5px 8px; border-radius: 6px; margin-top: 2px;
    }
    .cl-form-feedback.ok  { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
    .cl-form-feedback.err { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
    .cl-credit-fields { display: flex; flex-direction: column; gap: 8px; padding: 8px; background: #fff; border-radius: 6px; border: 1px solid var(--cl-bd); }
    .cl-kpi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }

    /* ── Tooltip kredytowy ─────────────────────────────────── */
    .cl-credit-info-icon {
        color: var(--cl-t3); font-size: .75rem; cursor: pointer;
        margin-left: 4px; vertical-align: middle;
    }
    #cl-credit-tooltip {
        position: fixed; display: none;
        width: 260px; background: #1e293b; color: #f1f5f9;
        font-size: 0.72rem; line-height: 1.55; border-radius: 8px;
        padding: 10px 12px; z-index: 9999;
        box-shadow: 0 8px 24px rgba(0,0,0,.22);
        pointer-events: none;
    }
    #cl-credit-tooltip::after {
        content: ''; position: absolute; top: 100%;
        left: var(--arrow-right, 120px);
        border: 5px solid transparent; border-top-color: #1e293b;
    }
    #cl-credit-tooltip strong { color: #7dd3fc; }
    #cl-credit-tooltip ul { margin: 6px 0 0; padding-left: 14px; }
    #cl-credit-tooltip li { margin-bottom: 3px; }

    /* ── Info box w expand panelu ──────────────────────────── */
    .cl-credit-explainer {
        font-size: 0.72rem; color: var(--cl-t3); margin-top: 8px;
        padding: 7px 10px; background: #fff; border-radius: 6px;
        border: 1px solid var(--cl-bd); line-height: 1.5;
    }
    .cl-credit-explainer strong { color: var(--cl-t2); }

    /* ── Side slider — dane podstawowe klienta ────────────────── */
    #cl-info-overlay {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,.25); z-index: 1000;
        animation: cl-fadein .15s ease;
    }
    #cl-info-slider {
        position: fixed; top: 0; right: -480px; bottom: 0;
        width: 440px; max-width: 96vw;
        background: #fff; z-index: 1001;
        box-shadow: -6px 0 32px rgba(0,0,0,.14);
        display: flex; flex-direction: column;
        transition: right .25s cubic-bezier(.4,0,.2,1);
        border-radius: 16px 0 0 16px;
        overflow: hidden;
    }
    #cl-info-slider.open { right: 0; }

    /* ── Wiersze danych w sliderze info ────────────────────────── */
    .cl-info-row {
        display: flex; flex-direction: column; gap: 2px;
        padding: 10px 0;
        border-bottom: 1px solid var(--cl-sf3);
    }
    .cl-info-row:last-child { border-bottom: none; }
    .cl-info-label {
        font-size: .65rem; font-weight: 700; letter-spacing: .07em;
        text-transform: uppercase; color: var(--cl-t3);
    }
    .cl-info-value {
        font-size: .85rem; color: var(--cl-t1); word-break: break-word;
    }
    .cl-info-value.empty { color: var(--cl-t3); font-style: italic; }
    .cl-info-badge {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 2px 8px; border-radius: 20px; font-size: .75rem; font-weight: 600;
    }
    .cl-info-badge.active   { background: #dcfce7; color: #166534; }
    .cl-info-badge.inactive { background: #f1f5f9; color: #64748b; }

    /* ── Side slider — dane podstawowe klienta ────────────────── */
    #cl-info-overlay {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,.25); z-index: 1000;
        animation: cl-fadein .15s ease;
    }
    #cl-info-slider {
        position: fixed; top: 0; right: -480px; bottom: 0;
        width: 440px; max-width: 96vw;
        background: #fff; z-index: 1001;
        box-shadow: -6px 0 32px rgba(0,0,0,.14);
        display: flex; flex-direction: column;
        transition: right .25s cubic-bezier(.4,0,.2,1);
        border-radius: 16px 0 0 16px;
        overflow: hidden;
    }
    #cl-info-slider.open { right: 0; }

    /* ── Baner niekompletnych danych ───────────────────────────── */
    #cl-incomplete-banner {
        display: none;
        background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
        padding: 10px 16px; margin-bottom: 12px;
        display: none; align-items: center; gap: 10px;
        font-size: .82rem; color: #92400e;
    }
    #cl-incomplete-banner.visible { display: flex; }
    #cl-incomplete-banner i { font-size: 1.1rem; color: #d97706; flex-shrink: 0; }
    #cl-incomplete-banner .cl-banner-text { flex: 1; }
    #cl-incomplete-banner strong { color: #78350f; }
    .cl-banner-filter-btn {
        white-space: nowrap; font-size: .75rem; font-weight: 600;
        padding: 4px 10px; border-radius: 6px;
        border: 1px solid #f59e0b; background: #fef3c7; color: #92400e;
        cursor: pointer; transition: background .12s;
    }
    .cl-banner-filter-btn:hover { background: #fde68a; }
    .cl-banner-filter-btn.active { background: #f59e0b; color: #fff; border-color: #d97706; }

    /* ── Ikona ostrzeżenia w tabeli ────────────────────────────── */
    .cl-warn-icon {
        color: #d97706; font-size: .8rem; cursor: pointer;
        margin-left: 5px; vertical-align: middle;
        opacity: .85;
    }
    .cl-warn-icon:hover { opacity: 1; }

    /* ── Wiersze danych w sliderze info ────────────────────────── */
    .cl-info-row {
        display: flex; flex-direction: column; gap: 2px;
        padding: 10px 0;
        border-bottom: 1px solid var(--cl-sf3);
    }
    .cl-info-row:last-child { border-bottom: none; }
    .cl-info-label {
        font-size: .65rem; font-weight: 700; letter-spacing: .07em;
        text-transform: uppercase; color: var(--cl-t3);
    }
    .cl-info-value {
        font-size: .85rem; color: var(--cl-t1); word-break: break-word;
    }
    .cl-info-value.empty { color: var(--cl-t3); font-style: italic; }
    .cl-info-badge {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 2px 8px; border-radius: 20px; font-size: .75rem; font-weight: 600;
    }
    .cl-info-badge.active   { background: #dcfce7; color: #166534; }
    .cl-info-badge.inactive { background: #f1f5f9; color: #64748b; }

    /* ── Formularz edycji w sliderze info ──────────────────────── */
    .cl-info-edit-section {
        background: #f8fafc; border-radius: 10px; padding: 14px;
        border: 1px solid var(--cl-sf3);
        display: flex; flex-direction: column; gap: 10px;
    }
    .cl-info-edit-section-title {
        font-size: .65rem; font-weight: 700; letter-spacing: .07em;
        text-transform: uppercase; color: var(--cl-t3); margin-bottom: 2px;
    }
    .cl-info-field { display: flex; flex-direction: column; gap: 3px; }
    .cl-info-field label {
        font-size: .72rem; font-weight: 600; color: var(--cl-t2);
    }
    .cl-info-field input {
        padding: 6px 10px; border: 1px solid var(--cl-bd); border-radius: 7px;
        font-size: .83rem; background: #fff; color: var(--cl-t1); outline: none;
        transition: border-color .15s;
    }
    .cl-info-field input:focus { border-color: #6ea8fe; }
    .cl-info-field input[readonly] {
        background: #f1f5f9; color: var(--cl-t2); cursor: not-allowed;
        border-color: transparent;
    }
    .cl-info-field .cl-field-hint {
        font-size: .68rem; color: var(--cl-t3);
    }
    .cl-vies-row {
        display: flex; gap: 6px; align-items: flex-end;
    }
    .cl-vies-row input { flex: 1; }
    .cl-btn-vies {
        padding: 6px 12px; font-size: .75rem; font-weight: 600;
        border: 1px solid #6ea8fe; border-radius: 7px;
        background: #eff6ff; color: #1d4ed8; cursor: pointer;
        transition: background .12s; white-space: nowrap; flex-shrink: 0;
    }
    .cl-btn-vies:hover { background: #dbeafe; }
    .cl-btn-vies:disabled { opacity: .5; cursor: default; }
    .cl-vies-status {
        font-size: .72rem; color: var(--cl-t3); min-height: 16px;
    }
    .cl-vies-status.ok  { color: #16a34a; }
    .cl-vies-status.err { color: #dc2626; }
    .cl-info-incomplete-alert {
        background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
        padding: 8px 12px; font-size: .78rem; color: #92400e;
        display: flex; gap: 8px; align-items: flex-start;
    }

    /* ── Side slider — atrybuty klienta ───────────────────────── */
    #cl-attr-overlay {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,.25); z-index: 1000;
        animation: cl-fadein .15s ease;
    }
    #cl-attr-slider {
        position: fixed; top: 0; right: -480px; bottom: 0;
        width: 440px; max-width: 96vw;
        background: #fff; z-index: 1001;
        box-shadow: -6px 0 32px rgba(0,0,0,.14);
        display: flex; flex-direction: column;
        transition: right .25s cubic-bezier(.4,0,.2,1);
        border-radius: 16px 0 0 16px;
        overflow: hidden;
    }
    #cl-attr-slider.open { right: 0; }
    .cl-slider-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 18px 20px 14px;
        border-bottom: 1px solid var(--cl-sf3);
        flex-shrink: 0;
    }
    .cl-slider-title { font-size: .95rem; font-weight: 700; color: var(--cl-t1); }
    .cl-slider-subtitle { font-size: .75rem; color: var(--cl-t3); margin-top: 2px; }
    .cl-slider-close {
        width: 32px; height: 32px; border-radius: 8px;
        border: 1px solid var(--cl-bd); background: var(--cl-sf2);
        cursor: pointer; display: flex; align-items: center; justify-content: center;
        color: var(--cl-t3); font-size: 1rem; transition: background .12s;
        flex-shrink: 0;
    }
    .cl-slider-close:hover { background: var(--cl-sf3); color: var(--cl-t1); }
    .cl-slider-body {
        flex: 1; overflow-y: auto; padding: 20px;
        display: flex; flex-direction: column; gap: 20px;
    }
    .cl-slider-footer {
        padding: 14px 20px; border-top: 1px solid var(--cl-sf3);
        display: flex; gap: 8px; flex-shrink: 0;
    }

    /* ── Sekcja atrybutu w sliderze ───────────────────────────── */
    .cl-attr-section { display: flex; flex-direction: column; gap: 8px; }
    .cl-attr-section-title {
        font-size: .65rem; font-weight: 700; letter-spacing: .07em;
        text-transform: uppercase; color: var(--cl-t3);
    }
    .cl-attr-select {
        width: 100%; padding: 7px 10px;
        border: 1px solid var(--cl-bd); border-radius: 8px;
        font-size: .83rem; background: var(--cl-sf2); color: var(--cl-t1);
        outline: none; transition: border-color .15s;
    }
    .cl-attr-select:focus { border-color: #6ea8fe; background: #fff; }

    /* ── Multi-select tagi ─────────────────────────────────────── */
    .cl-multi-wrap {
        border: 1px solid var(--cl-bd); border-radius: 8px;
        background: var(--cl-sf2); padding: 6px 8px;
        display: flex; flex-wrap: wrap; gap: 5px; cursor: text;
        min-height: 40px; transition: border-color .15s;
    }
    .cl-multi-wrap:focus-within { border-color: #6ea8fe; background: #fff; }
    .cl-multi-tag {
        display: inline-flex; align-items: center; gap: 4px;
        background: var(--cl-green); color: #fff;
        padding: 2px 8px; border-radius: 20px; font-size: .72rem; font-weight: 600;
    }
    .cl-multi-tag-remove {
        cursor: pointer; opacity: .7; font-size: .8rem; line-height: 1;
    }
    .cl-multi-tag-remove:hover { opacity: 1; }
    .cl-multi-options {
        border: 1px solid var(--cl-bd); border-radius: 8px;
        background: #fff; max-height: 180px; overflow-y: auto;
        box-shadow: 0 4px 16px rgba(0,0,0,.1);
    }
    .cl-multi-option {
        padding: 7px 12px; font-size: .82rem; cursor: pointer;
        display: flex; align-items: center; gap: 8px;
        border-bottom: 0.5px solid var(--cl-sf3); color: var(--cl-t1);
        transition: background .1s;
    }
    .cl-multi-option:last-child { border-bottom: none; }
    .cl-multi-option:hover { background: var(--cl-sf2); }
    .cl-multi-option.selected { color: var(--cl-green); font-weight: 600; }
    .cl-multi-option input[type=checkbox] { accent-color: var(--cl-green); }
    .cl-multi-none { font-size: .78rem; color: var(--cl-t3); font-style: italic; padding: 10px 12px; }
    @keyframes cl-fadein { from { opacity: 0 } to { opacity: 1 } }
</style>
{% endblock %}

{% block page_heading %}
<div class="page-heading d-flex align-items-center gap-3">
    <div>
        <h3>{{ translations.b2b_clients_title ?? 'Clients B2B' }}</h3>
        <p class="text-subtitle text-muted mb-0">
            {{ translations.b2b_clients_subtitle ?? 'Gestion et évaluation des clients B2B — données propres à votre magasin' }}
        </p>
    </div>
    <div class="ms-auto d-flex align-items-center gap-2">
        <div class="spinner-border spinner-border-sm text-secondary d-none" id="cl-spinner" role="status"></div>
        <span class="text-muted small" id="cl-total-count"></span>
        <button class="btn btn-sm btn-primary d-flex align-items-center gap-1"
                data-bs-toggle="modal" data-bs-target="#modalAddB2BClient">
            <i class="bi bi-plus-lg"></i>
            {{ translations.b2b_add_client ?? 'Dodaj klienta' }}
        </button>
    </div>
</div>
{% endblock %}

{% block modals %}
{# ── Modal: Dodaj klienta B2B przez numer VAT ───────────────────────── #}
<div class="modal fade" id="modalAddB2BClient" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-building-add me-2"></i>
                    {{ translations.b2b_add_client_title ?? 'Dodaj klienta B2B' }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                {# Krok 1: Wpisz VAT #}
                <div id="addB2B-step-vat">
                    <label class="form-label fw-semibold mb-1">
                        {{ translations.b2b_vat_label ?? 'Numer VAT' }}
                    </label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="addB2B-vat-input"
                               placeholder="{{ translations.b2b_vat_placeholder ?? 'np. PL1234567890' }}"
                               maxlength="20" autocomplete="off">
                        <button class="btn btn-outline-secondary" type="button" id="addB2B-check-btn">
                            <span id="addB2B-check-spinner" class="spinner-border spinner-border-sm d-none me-1"></span>
                            <i class="bi bi-search" id="addB2B-check-icon"></i>
                            {{ translations.b2b_check_vat ?? 'Sprawdź' }}
                        </button>
                    </div>
                    <div id="addB2B-vat-error" class="text-danger small mt-1 d-none"></div>
                </div>
                {# Krok 2: Wyniki VIES #}
                <div id="addB2B-step-result" class="d-none mt-3">
                    <div id="addB2B-already-added-alert" class="alert alert-warning d-none py-2">
                        <i class="bi bi-exclamation-triangle me-1"></i>
                        {{ translations.b2b_already_exists ?? 'Ten klient już istnieje w systemie.' }}
                    </div>
                    <div class="border rounded p-3 bg-light" id="addB2B-company-card">
                        <div class="fw-semibold" id="addB2B-company-name"></div>
                        <div class="text-muted small" id="addB2B-company-address"></div>
                        <div class="text-muted small" id="addB2B-company-vat"></div>
                    </div>
                    <div id="addB2B-result-error" class="text-danger small mt-2 d-none"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
                    {{ translations.cancel ?? 'Anuluj' }}
                </button>
                <button type="button" class="btn btn-primary btn-sm d-none" id="addB2B-create-btn">
                    <span id="addB2B-create-spinner" class="spinner-border spinner-border-sm d-none me-1"></span>
                    <i class="bi bi-person-plus-fill me-1"></i>
                    {{ translations.b2b_create_client ?? 'Utwórz klienta' }}
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="cl-page-wrap">

    {# ── Filtr bar ─────────────────────────────────────────── #}
    <div class="cl-filter-bar">

        {# Wiersz 1: Wyszukiwanie + Reset #}
        <div class="cl-filter-search-row">
            <i class="bi bi-search cl-filter-search-icon-standalone" style="color:var(--cl-t3);font-size:.9rem;flex-shrink:0"></i>
            <span class="cl-filter-search-label">{{ translations.search ?? 'Recherche' }}</span>
            <input type="text" id="cl-search"
                placeholder="{{ translations.search_placeholder ?? 'Nom, NIP, tél…' }}"
                autocomplete="off">
            <button class="btn btn-sm btn-light ms-auto" id="cl-reset" style="font-size:.78rem;flex-shrink:0">
                <i class="bi bi-x-circle me-1"></i>{{ translations.reset ?? 'Réinitialiser' }}
            </button>
        </div>

        {# Wiersz 2: Filtry pill #}
        <div class="cl-filter-pills-row">

            {# Score #}
            <div class="cl-filter-group">
                <div class="cl-filter-label">{{ translations.score_label ?? 'Scoring' }}</div>
                <div class="cl-pills" id="pills-score">
                    <span class="cl-pill active" data-score="">{{ translations.all ?? 'Tous' }}</span>
                    <span class="cl-pill" data-score="A">A</span>
                    <span class="cl-pill" data-score="B">B</span>
                    <span class="cl-pill" data-score="C">C</span>
                    <span class="cl-pill" data-score="D">D</span>
                </div>
            </div>

            {# CA 12M #}
            <div class="cl-filter-group">
                <div class="cl-filter-label">{{ translations.ca_12m_label ?? 'CA 12M' }}</div>
                <div class="cl-pills" id="pills-ca">
                    <span class="cl-pill active" data-ca="">{{ translations.all ?? 'Tous' }}</span>
                    <span class="cl-pill" data-ca="lt1k">&lt; 1k</span>
                    <span class="cl-pill" data-ca="1-2.5k">1 – 2,5k</span>
                    <span class="cl-pill" data-ca="2.5-5k">2,5 – 5k</span>
                    <span class="cl-pill" data-ca="5-7.5k">5 – 7,5k</span>
                    <span class="cl-pill" data-ca="7.5-10k">7,5 – 10k</span>
                    <span class="cl-pill" data-ca="gt10k">&gt; 10k</span>
                </div>
            </div>

            {# Fréquence #}
            <div class="cl-filter-group">
                <div class="cl-filter-label">{{ translations.freq_label ?? 'Fréquence (12M)' }}</div>
                <div class="cl-pills" id="pills-freq">
                    <span class="cl-pill active" data-freq="">{{ translations.all ?? 'Tous' }}</span>
                    <span class="cl-pill" data-freq="1-5">1 – 5</span>
                    <span class="cl-pill" data-freq="6-10">6 – 10</span>
                    <span class="cl-pill" data-freq="11-19">11 – 19</span>
                    <span class="cl-pill" data-freq="20+">20+</span>
                </div>
            </div>

        </div>
    </div>

    {# ── Baner niekompletnych danych ──────────────────────────── #}
    <div id="cl-incomplete-banner">
        <i class="bi bi-exclamation-triangle-fill"></i>
        <div class="cl-banner-text">
            <strong id="cl-incomplete-count"></strong>
            {{ translations.incomplete_banner_text ?? ' klientów wymaga uzupełnienia danych.' }}
        </div>
        <button class="cl-banner-filter-btn" id="cl-incomplete-filter-btn" onclick="toggleIncompleteFilter()">
            <i class="bi bi-funnel me-1"></i>{{ translations.incomplete_show ?? 'Pokaż' }}
        </button>
    </div>

    {# ── Tableau ─────────────────────────────────────────────── #}
    <div class="cl-card">
        <div class="cl-count-bar">
            <span id="cl-count-label" class="text-muted small"></span>
            <span style="font-size:.7rem;color:var(--cl-t3)">
                {{ translations.shop_data_only ?? 'Données propres à votre magasin uniquement' }}
            </span>
        </div>
        <div style="overflow-x:auto">
            <table class="cl-table" id="cl-table">
                <thead>
                    <tr>
                        <th style="width:28px"></th>
                        <th class="cl-sortable" data-sort="company_name">{{ translations.company ?? 'Société' }} <i class="bi bi-chevron-expand cl-sort-icon"></i></th>
                        <th class="cl-sortable cl-hide-sm" data-sort="tax_number">{{ translations.vat ?? 'NIP / TVA' }} <i class="bi bi-chevron-expand cl-sort-icon"></i></th>
                        <th class="cl-hide-sm">{{ translations.phone ?? 'Tél.' }}</th>
                        <th class="cl-sortable" data-sort="score">{{ translations.score_label ?? 'Score' }} <i class="bi bi-chevron-expand cl-sort-icon"></i></th>
                        <th class="cl-sortable" data-sort="client_type">{{ translations.client_type ?? 'Type' }} <i class="bi bi-chevron-expand cl-sort-icon"></i></th>
                        <th class="cl-sortable" data-sort="service_mode">{{ translations.service_mode ?? 'Mode' }} <i class="bi bi-chevron-expand cl-sort-icon"></i></th>
                        <th class="cl-sortable" data-sort="orders_12m">{{ translations.freq_label ?? 'Fréq.' }} <i class="bi bi-chevron-expand cl-sort-icon"></i></th>
                        <th class="cl-sortable" data-sort="ca_12m">{{ translations.ca_12m_label ?? 'CA 12M' }} <i class="bi bi-chevron-expand cl-sort-icon"></i></th>
                        <th>
                            {{ translations.credit ?? 'Crédit' }}
                            <i class="bi bi-info-circle cl-credit-info-icon" id="cl-credit-info-icon"></i>
                        </th>
                        <th style="width:28px"></th>
                        <th style="width:28px"></th>
                    </tr>
                </thead>
                <tbody id="cl-tbody">
                    {# Skeleton — 8 lignes #}
                    {% for i in 1..8 %}
                    <tr>
                        <td><span class="cl-sk" style="width:20px;height:20px;border-radius:50%"></span></td>
                        <td class="cl-td-company"><span class="cl-sk" style="width:{{ 55 + (i * 13) % 40 }}%;height:13px"></span></td>
                        <td class="cl-hide-sm"><span class="cl-sk" style="width:80px;height:12px"></span></td>
                        <td class="cl-hide-sm"><span class="cl-sk" style="width:70px;height:12px"></span></td>
                        <td><span class="cl-sk" style="width:26px;height:26px;border-radius:6px"></span></td>
                        <td><span class="cl-sk" style="width:60px;height:12px"></span></td>
                        <td><span class="cl-sk" style="width:65px;height:12px"></span></td>
                        <td><span class="cl-sk" style="width:30px;height:12px"></span></td>
                        <td><span class="cl-sk" style="width:55px;height:12px"></span></td>
                        <td><span class="cl-sk" style="width:80px;height:12px"></span></td>
                        <td></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="cl-pagination" id="cl-pagination"></div>
    </div>

</div>

{# ── Side slider — dane podstawowe klienta B2B ─────────────────────── #}
<div id="cl-info-overlay" onclick="closeInfoSlider()"></div>
<div id="cl-info-slider" role="dialog" aria-modal="true" aria-label="Dane klienta">
    <div class="cl-slider-head">
        <div>
            <div class="cl-slider-title" id="cl-info-slider-name">{{ translations.info_slider_title ?? 'Dane podstawowe' }}</div>
            <div class="cl-slider-subtitle" id="cl-info-slider-subtitle">{{ translations.info_slider_subtitle ?? 'Dane identyfikacyjne i kontaktowe klienta' }}</div>
        </div>
        <button class="cl-slider-close" onclick="closeInfoSlider()" title="{{ translations.cancel ?? 'Zamknij' }}">
            <i class="bi bi-x-lg"></i>
        </button>
    </div>
    <div class="cl-slider-body" id="cl-info-slider-body"></div>
    <div class="cl-slider-footer" id="cl-info-slider-footer">
        <button class="cl-btn-save d-none" id="cl-info-save-btn">
            <i class="bi bi-check-lg"></i> {{ translations.save ?? 'Zapisz' }}
        </button>
        <button class="cl-btn-cancel d-none" id="cl-info-edit-cancel-btn">{{ translations.cancel ?? 'Anuluj' }}</button>
        <button class="cl-btn-edit" id="cl-info-edit-btn" onclick="openInfoEdit(allClients.find(c=>c.id===infoSliderId))">
            <i class="bi bi-pencil"></i> {{ translations.edit ?? 'Edytuj' }}
        </button>
        <button class="cl-btn-cancel" id="cl-info-close-btn" onclick="closeInfoSlider()">{{ translations.cancel ?? 'Zamknij' }}</button>
        <span id="cl-info-feedback" style="font-size:.75rem;align-self:center;color:var(--cl-t3)"></span>
    </div>
</div>

{# ── Side slider — atrybuty opisowe klienta B2B ───────────────────── #}
<div id="cl-attr-overlay" onclick="closeAttrSlider()"></div>
<div id="cl-attr-slider" role="dialog" aria-modal="true" aria-label="{{ translations.commercial_profile_slider_title ?? 'Profil handlowy' }}">
    <div class="cl-slider-head">
        <div>
            <div class="cl-slider-title" id="cl-slider-client-name">{{ translations.commercial_profile_slider_title ?? 'Profil handlowy' }}</div>
            <div class="cl-slider-subtitle">{{ translations.commercial_profile_slider_subtitle ?? 'Typ klienta, preferencje i dane handlowe — widoczne tylko w tym sklepie' }}</div>
        </div>
        <button class="cl-slider-close" onclick="closeAttrSlider()" title="{{ translations.cancel ?? 'Annuler' }}">
            <i class="bi bi-x-lg"></i>
        </button>
    </div>
    <div class="cl-slider-body" id="cl-slider-body">
        <div id="cl-slider-skeleton" style="display:flex;flex-direction:column;gap:10px">
            <span class="cl-sk" style="width:100%;height:13px;display:block"></span>
            <span class="cl-sk" style="width:70%;height:13px;display:block"></span>
            <span class="cl-sk" style="width:100%;height:36px;display:block;margin-top:8px"></span>
            <span class="cl-sk" style="width:100%;height:13px;display:block;margin-top:12px"></span>
            <span class="cl-sk" style="width:80%;height:13px;display:block"></span>
            <span class="cl-sk" style="width:100%;height:80px;display:block;margin-top:8px"></span>
        </div>
    </div>
    <div class="cl-slider-footer">
        <button class="cl-btn-save" id="cl-slider-save-btn" onclick="saveAttrSlider()">
            <i class="bi bi-check-lg"></i> {{ translations.save ?? 'Enregistrer' }}
        </button>
        <button class="cl-btn-cancel" onclick="closeAttrSlider()">{{ translations.cancel ?? 'Annuler' }}</button>
        <span id="cl-slider-feedback" style="font-size:.75rem;align-self:center;color:var(--cl-t3)"></span>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
/* ── Config ────────────────────────────────────────────────── */
const CL = {
    root:     '{{ root }}',
    currency: '{{ currency_symbol }}',
    shopId:   {{ user.idShop|json_encode }},
};

/* ── Traductions ───────────────────────────────────────────── */
const T = {
    no_credit:    '{{ translations.no_credit ?? "Pas de crédit" }}',
    inactif:      '{{ translations.inactif ?? "Inactif" }}',
    inactif_help_title:        '{{ translations.inactif_help_title ?? "Pourquoi « Inactif » ?" }}',
    inactif_reason_no_recent:  '{{ translations.inactif_reason_no_recent ?? "Aucune commande depuis plus de %threshold% jours (dernière il y a %days% j)." }}',
    inactif_reason_too_few:    '{{ translations.inactif_reason_too_few ?? "Moins de %min% commandes sur 12 mois (actuellement : %orders%)." }}',
    inactif_reason_unknown:    '{{ translations.inactif_reason_unknown ?? "Pas assez de données pour évaluer la fréquence." }}',
    freq_active_tooltip:       '{{ translations.freq_active_tooltip ?? "%orders% commandes sur 12 mois — environ une tous les %median% jours. Dernière il y a %days% j." }}',
    score_none:   '—',
    type_standard:   '{{ translations.type_standard ?? "Standard" }}',
    type_vip:        '{{ translations.type_vip ?? "VIP" }}',
    type_wholesale:  '{{ translations.type_wholesale ?? "Gros" }}',
    type_restaurant: '{{ translations.type_restaurant ?? "Restaurant" }}',
    type_hotel:      '{{ translations.type_hotel ?? "Hôtel" }}',
    type_other:      '{{ translations.type_other ?? "Autre" }}',
    mode_pickup:     '{{ translations.mode_pickup ?? "Magasin" }}',
    mode_delivery:   '{{ translations.mode_delivery ?? "Livraison" }}',
    mode_both:       '{{ translations.mode_both ?? "Les deux" }}',
    no_results:      '{{ translations.no_results ?? "Aucun client ne correspond aux filtres." }}',
    showing:         '{{ translations.showing ?? "Affichage de" }}',
    of:              '{{ translations.of ?? "sur" }}',
    clients:         '{{ translations.clients_label ?? "clients" }}',
    // KPI panel
    kpi_profile_title:  '{{ translations.kpi_profile_title ?? "Profil client" }}',
    kpi_score:          '{{ translations.kpi_score ?? "Score" }}',
    kpi_client_type:    '{{ translations.kpi_client_type ?? "Type de client" }}',
    kpi_service_mode:   '{{ translations.kpi_service_mode ?? "Mode de service" }}',
    kpi_orders_12m:     '{{ translations.kpi_orders_12m ?? "Commandes 12M" }}',
    kpi_purchase_cycle: '{{ translations.kpi_purchase_cycle ?? "Cycle d\'achat" }}',
    kpi_ca_12m:         '{{ translations.kpi_ca_12m ?? "CA 12M" }}',
    kpi_credit_limit:   '{{ translations.kpi_credit_limit ?? "Limite de crédit" }}',
    kpi_credit_used:    '{{ translations.kpi_credit_used ?? "Utilisé" }}',
    days_abbr:          '{{ translations.days_abbr ?? "j" }}',
    edit:               '{{ translations.edit ?? "Modifier" }}',
    action_basic_data:           '{{ translations.action_basic_data ?? "Dane podstawowe" }}',
    action_basic_data_hint:      '{{ translations.action_basic_data_hint ?? "Edytuj dane identyfikacyjne i kontaktowe klienta" }}',
    action_commercial_profile:   '{{ translations.action_commercial_profile ?? "Profil handlowy" }}',
    action_commercial_profile_hint: '{{ translations.action_commercial_profile_hint ?? "Edytuj typ klienta, tryb obsługi, scoring i atrybuty handlowe" }}',

    // ── Slider danych podstawowych — etykiety pól ──
    info_field_company_name:   '{{ translations.info_field_company_name ?? "Nazwa firmy" }}',
    info_field_vat:            '{{ translations.info_field_vat ?? "NIP" }}',
    info_field_address:        '{{ translations.info_field_address ?? "Adres" }}',
    info_field_email:          '{{ translations.info_field_email ?? "E-mail" }}',
    info_field_phone:          '{{ translations.info_field_phone ?? "Telefon" }}',
    info_field_discount:       '{{ translations.info_field_discount ?? "Rabat indywidualny" }}',
    info_field_payment_terms:  '{{ translations.info_field_payment_terms ?? "Warunki płatności" }}',
    info_field_can_deferral:   '{{ translations.info_field_can_deferral ?? "Odroczenie płatności" }}',
    info_field_created_at:     '{{ translations.info_field_created_at ?? "Data rejestracji" }}',
    info_unit_days:            '{{ translations.info_unit_days ?? "dni" }}',
    info_yes:                  '{{ translations.info_yes ?? "Tak" }}',
    info_no:                   '{{ translations.info_no ?? "Nie" }}',

    // ── Slider edycji — sekcje, pola, podpowiedzi ──
    info_edit_vies_section:    '{{ translations.info_edit_vies_section ?? "Dane z VIES (tylko do odczytu)" }}',
    info_edit_contact_section: '{{ translations.info_edit_contact_section ?? "Dane kontaktowe (edytowalne)" }}',
    info_edit_vat_label:       '{{ translations.info_edit_vat_label ?? "NIP / VAT" }}',
    info_edit_vies_fetch:      '{{ translations.info_edit_vies_fetch ?? "Pobierz z VIES" }}',
    info_edit_vies_hint:       '{{ translations.info_edit_vies_hint ?? "Uzupełniane automatycznie z VIES" }}',
    info_edit_street:          '{{ translations.info_edit_street ?? "Ulica i numer" }}',
    info_edit_zip:             '{{ translations.info_edit_zip ?? "Kod pocztowy" }}',
    info_edit_city:            '{{ translations.info_edit_city ?? "Miasto" }}',
    info_edit_email_placeholder: '{{ translations.info_edit_email_placeholder ?? "adres@email.com" }}',
    info_edit_phone_placeholder: '{{ translations.info_edit_phone_placeholder ?? "+48 000 000 000" }}',

    // ── Komunikaty VIES ──
    vies_status_no_vat:        '{{ translations.vies_status_no_vat ?? "Podaj numer VAT." }}',
    vies_status_loading:       '{{ translations.vies_status_loading ?? "Pobieranie danych z VIES…" }}',
    vies_status_not_found:     '{{ translations.vies_status_not_found ?? "Nie znaleziono w VIES. Sprawdź numer VAT." }}',
    vies_status_ok:            '{{ translations.vies_status_ok ?? "Dane pobrane pomyślnie." }}',
    vies_status_error:         '{{ translations.vies_status_error ?? "Błąd połączenia z VIES." }}',
    saved_short:               '{{ translations.saved_short ?? "Zapisano." }}',

    // ── Modal dodawania klienta ──
    b2b_vat_invalid_format:    '{{ translations.b2b_vat_invalid_format ?? "Niepoprawny format (np. PL1234567890)." }}',
    b2b_vat_not_found_vies:    '{{ translations.b2b_vat_not_found_vies ?? "Nie znaleziono firmy w rejestrze VIES dla podanego numeru." }}',
    b2b_vat_check_error:       '{{ translations.b2b_vat_check_error ?? "Błąd weryfikacji VAT." }}',
    b2b_already_exists_blocked:'{{ translations.b2b_already_exists_blocked ?? "Ten klient już istnieje w systemie i nie może zostać dodany ponownie." }}',
    b2b_add_client_error:      '{{ translations.b2b_add_client_error ?? "Nie udało się dodać klienta." }}',
    // Alerty kredytowe
    credit_alert_danger:  '{{ translations.credit_alert_danger ?? "Limite de crédit dépassée ou épuisée !" }}',
    credit_alert_warning: '{{ translations.credit_alert_warning ?? "Attention : utilisation élevée de la limite." }}',
    credit_alert_medium:  '{{ translations.credit_alert_medium ?? "Limite de crédit à moitié utilisée." }}',
    // Credit explainer
    credit_explainer_title: '{{ translations.credit_explainer_title ?? "Comment fonctionne le solde de crédit ?" }}',
    credit_explainer_body:  '{{ translations.credit_explainer_body ?? "Le solde représente la valeur totale des commandes sans facture émise. Une commande est considérée payée uniquement après émission d\'une facture." }}',
    credit_tooltip_point1: '{{ translations.credit_tooltip_point1 ?? "Affiche la valeur totale des commandes pour lesquelles le client n\'a pas encore pay\u00e9 \u2014 c\'est-\u00e0-dire celles sans facture \u00e9mise." }}',
    credit_tooltip_point2: '{{ translations.credit_tooltip_point2 ?? "Une commande est consid\u00e9r\u00e9e comme pay\u00e9e uniquement apr\u00e8s l\'\u00e9mission d\'une facture." }}',
    credit_tooltip_risk:   '{{ translations.credit_tooltip_risk ?? "Plus le taux d\'utilisation de la limite est \u00e9lev\u00e9, plus le risque de cr\u00e9dit est important." }}',
    // Expand panel
    orders_history_title: '{{ translations.orders_history_title ?? "Historique des commandes (12M)" }}',
    // Orders
    orders_none:             '{{ translations.orders_none ?? "Aucune commande au cours des 12 derniers mois." }}',
    orders_load_error:       '{{ translations.orders_load_error ?? "Erreur de chargement de l\'historique." }}',
    orders_more:             '{{ translations.orders_more ?? "+ {n} commandes supplémentaires" }}',
    order_status_new:        '{{ translations.order_status_new ?? "Nowe" }}',
    order_status_completed:  '{{ translations.order_status_completed ?? "Zrealizowane" }}',
    order_status_picked_up:  '{{ translations.order_status_picked_up ?? "Odebrane" }}',
    order_status_unpicked:   '{{ translations.order_status_unpicked ?? "Nieodebrane" }}',
    col_order_id:            '{{ translations.col_order_id ?? "N° commande" }}',
    col_date:                '{{ translations.col_date ?? "Date" }}',
    col_amount:              '{{ translations.col_amount ?? "Montant" }}',
    col_status:              '{{ translations.col_status ?? "Statut" }}',
    // Pagination
    pagination_show:     '{{ translations.pagination_show ?? "Afficher" }}',
    pagination_per_page: '{{ translations.pagination_per_page ?? "clients / page" }}',
    pagination_page_of:  '{{ translations.pagination_page_of ?? "Page {p} sur {total}" }}',
    // Slider
    slider_score_section:        '{{ translations.slider_score_section ?? "Score" }}',
    slider_client_type_section:  '{{ translations.slider_client_type_section ?? "Type de client" }}',
    slider_service_mode_section: '{{ translations.slider_service_mode_section ?? "Mode de service" }}',
    slider_credit_section:       '{{ translations.slider_credit_section ?? "Limite de crédit" }}',
    slider_b2b_type_section:     '{{ translations.slider_b2b_type_section ?? "Type B2B" }}',
    slider_sector_section:       '{{ translations.slider_sector_section ?? "Secteur commercial" }}',
    slider_interests_section:    '{{ translations.slider_interests_section ?? "Intérêts produits" }}',
    slider_departments_section:  '{{ translations.slider_departments_section ?? "Départements du client" }}',
    // Opcje słownikowe slidera
    type_none:      '{{ translations.type_none ?? "— aucun —" }}',
    no_assignment:  '{{ translations.no_assignment ?? "Aucune attribution" }}',
    credit_active:  '{{ translations.credit_active ?? "Limite de crédit active" }}',
    credit_limit_label:       '{{ translations.credit_limit_label ?? "Limite (PLN)" }}',
    credit_limit_placeholder: '{{ translations.credit_limit_placeholder ?? "ex. 5000" }}',
    mode_none:          '{{ translations.type_none ?? "— aucun —" }}',
    // Komunikaty
    client_prefix:        '{{ translations.client_prefix ?? "Client #" }}',
    load_data_error:      '{{ translations.load_data_error ?? "Erreur de chargement des données." }}',
    invalid_credit_limit: '{{ translations.invalid_credit_limit ?? "Veuillez saisir une limite de crédit valide." }}',
    saved_success:        '{{ translations.saved_success ?? "Les données du client ont été enregistrées." }}',
    save_error:           '{{ translations.save_error ?? "Erreur lors de l\'enregistrement." }}',
    connection_error:     '{{ translations.connection_error ?? "Erreur de connexion au serveur." }}',
    saving:               '{{ translations.saving ?? "Enregistrement…" }}',
    save:                 '{{ translations.save ?? "Enregistrer" }}',
    no_options:           '{{ translations.no_options ?? "Aucune option disponible — configurez le dictionnaire dans le panel admin." }}',
    prepare_offer:        '{{ translations.prepare_offer ?? "Przygotuj ofertę" }}',
};

const TYPE_L = {
    standard: T.type_standard, vip: T.type_vip, wholesale: T.type_wholesale,
    restaurant: T.type_restaurant, hotel: T.type_hotel, other: T.type_other,
};
const MODE_L = {
    pickup: T.mode_pickup, delivery: T.mode_delivery, both: T.mode_both,
};

/* ── État ──────────────────────────────────────────────────── */
let allClients = [];
let filters = { score: '', ca: '', freq: '', search: '', incomplete: false };
let sortState = { key: '', dir: 'asc' };   // klucz sortowania i kierunek
let pageState = { page: 1, size: 25 };     // bieżąca strona i rozmiar

/* ── Formatage ─────────────────────────────────────────────── */
function fmtAmt(v) {
    if (v == null) return '—';
    return Number(v).toLocaleString('pl-PL', { minimumFractionDigits: 0, maximumFractionDigits: 0 })
        + ' ' + CL.currency;
}
function fmtAmtShort(v) {
    if (v == null || v === 0) return '0';
    if (v >= 1000) return (v / 1000).toLocaleString('pl-PL', { maximumFractionDigits: 1 }) + 'k';
    return Math.round(v).toLocaleString('pl-PL');
}
function escHtml(s) {
    return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

/* ── Build: badge score ────────────────────────────────────── */
function scoreHtml(s) {
    const label = s || '—';
    return `<span class="cl-score cl-score-${s ?? ''}">${label}</span>`;
}

/* ── Build: crédit ─────────────────────────────────────────── */
function creditHtml(credit) {
    if (!credit || !credit.enabled) {
        return `<span class="cl-credit-no">${T.no_credit}</span>`;
    }
    const pct   = credit.percent_used ?? 0;
    const clrMap = { safe: '#16a34a', medium: '#b45309', warning: '#d97706', danger: '#dc2626', none: '#e5e7eb' };
    const clr   = clrMap[credit.alert ?? 'none'] ?? '#e5e7eb';
    const chipCls = pct >= 100 ? 'cl-chip-danger' : pct >= 80 ? 'cl-chip-warn' : 'cl-chip-credit';
    const barW   = Math.min(100, pct);

    return `<div class="cl-credit-bar-wrap">
        <div class="cl-credit-label">
            <span class="cl-chip ${chipCls}">${Math.round(pct)}%</span>
            <span style="margin-left:4px;font-size:.68rem;color:var(--cl-t3)">${fmtAmtShort(credit.used)} / ${fmtAmtShort(credit.limit)}</span>
        </div>
        <div class="cl-credit-bar-track">
            <div class="cl-credit-bar-fill" style="width:${barW}%;background:${clr}"></div>
        </div>
    </div>`;
}

/* ── Build: fréquence ──────────────────────────────────────── */
function freqHtml(c) {
    const rec    = c.recurrence || {};
    const orders = c.orders_12m ?? 0;
    const days   = rec.days_since_last;
    const thr    = rec.inactif_threshold_days ?? 180;
    const minOrd = rec.min_orders_for_score   ?? 3;
    const median = rec.median_days;

    const isInactif = !c.recurrence || rec.status === 'inactif' || orders < minOrd;

    if (isInactif) {
        // Wyjaśnij użytkownikowi, dlaczego klient jest oznaczony jako "Inactif"
        let reason;
        if (days != null && days > thr) {
            reason = T.inactif_reason_no_recent
                .replace('%threshold%', thr)
                .replace('%days%', days);
        } else if (orders < minOrd) {
            reason = T.inactif_reason_too_few
                .replace('%min%', minOrd)
                .replace('%orders%', orders);
        } else {
            reason = T.inactif_reason_unknown;
        }
        const tip = `${T.inactif_help_title}\n${reason}`;
        return `<span class="cl-chip cl-chip-inactif" title="${escHtml(tip)}" style="cursor:help">`
             + `${T.inactif} <i class="bi bi-info-circle" style="font-size:.7rem;margin-left:2px;opacity:.75"></i>`
             + `</span>`;
    }

    // Tryb aktywny — pokaż liczbę zamówień + medianę, w tooltipie pełny opis
    const tipActive = T.freq_active_tooltip
        .replace('%orders%', orders)
        .replace('%median%', median ?? '—')
        .replace('%days%',   days   ?? '—');

    return `<span title="${escHtml(tipActive)}" style="cursor:help">`
         + `<span style="font-size:.83rem;font-weight:600">${orders}</span>`
         + (median
             ? `<span style="font-size:.67rem;color:var(--cl-t3);margin-left:3px">/ ~${median}j</span>`
             : '')
         + `</span>`;
}

/* ── Build: une ligne ──────────────────────────────────────── */
function buildRow(c) {
    const profile  = c.profile ?? {};
    const score    = profile.score ?? null;
    const typeL    = TYPE_L[profile.client_type] ?? '—';
    const modeL    = MODE_L[profile.service_mode] ?? '—';
    const ca12mFmt = c.ca_12m ? fmtAmtShort(c.ca_12m) : '—';
    const missing  = getMissingFields(c);
    const warnIcon = missing.length > 0
        ? `<i class="bi bi-exclamation-triangle-fill cl-warn-icon"
               title="{{ translations.missing_fields_prefix ?? "Brakuje:" }} ${missing.join(', ')}"
               onclick="event.stopPropagation();openInfoSlider(${c.id},true)"></i>`
        : '';

    return `<tr data-id="${c.id}" onclick="rowClick(this,${c.id})">
        <td><i class="bi bi-building" style="color:var(--cl-t3);font-size:.85rem"></i></td>
        <td class="cl-td-company" title="${escHtml(c.company_name ?? c.absolute_name)}">${escHtml(c.company_name ?? c.absolute_name ?? '—')}${warnIcon}</td>
        <td class="cl-td-muted cl-hide-sm">${escHtml(c.tax_number ?? '—')}</td>
        <td class="cl-td-muted cl-hide-sm">${escHtml(c.phone ?? '—')}</td>
        <td>${scoreHtml(score)}</td>
        <td><span class="cl-chip">${escHtml(typeL)}</span></td>
        <td><span class="cl-chip">${escHtml(modeL)}</span></td>
        <td>${freqHtml(c)}</td>
        <td style="font-weight:600;font-size:.83rem">${fmtAmtShort(c.ca_12m)} ${ca12mFmt !== '—' ? '<span style="font-size:.67rem;color:var(--cl-t3)">' + CL.currency + '</span>' : ''}</td>
        <td>${creditHtml(c.credit)}</td>
        <td><a href="${CL.root}/Offer/manage/new/${c.id}" class="btn btn-info btn-sm" onclick="event.stopPropagation()">${escHtml(T.prepare_offer)}</a></td>
        <td><i class="bi bi-chevron-right cl-expand-icon"></i></td>
    </tr>`;
}

/* ── Filtrages client-side ─────────────────────────────────── */
function matchScore(c) {
    if (!filters.score) return true;
    return (c.profile?.score ?? null) === filters.score;
}

function matchCa(c) {
    if (!filters.ca) return true;
    const v = c.ca_12m ?? 0;
    switch (filters.ca) {
        case 'lt1k':    return v < 1000;
        case '1-2.5k':  return v >= 1000  && v < 2500;
        case '2.5-5k':  return v >= 2500  && v < 5000;
        case '5-7.5k':  return v >= 5000  && v < 7500;
        case '7.5-10k': return v >= 7500  && v < 10000;
        case 'gt10k':   return v >= 10000;
        default: return true;
    }
}

function matchFreq(c) {
    if (!filters.freq) return true;
    const n = c.orders_12m ?? 0;
    switch (filters.freq) {
        case '1-5':   return n >= 1  && n <= 5;
        case '6-10':  return n >= 6  && n <= 10;
        case '11-19': return n >= 11 && n <= 19;
        case '20+':   return n >= 20;
        default: return true;
    }
}

function matchSearch(c) {
    if (!filters.search) return true;
    const q = filters.search.toLowerCase();
    return [c.company_name, c.absolute_name, c.tax_number, c.phone, c.email]
        .some(f => f && String(f).toLowerCase().includes(q));
}

/* ── Niekompletność danych ──────────────────────────────────── */
function getMissingFields(c) {
    const missing = [];
    if (!(c.company_name || c.absolute_name)) missing.push('{{ translations.missing_field_name ?? "nazwa firmy" }}');
    if (!(c.street && c.city))                missing.push('{{ translations.missing_field_address ?? "adres" }}');
    if (!c.tax_number)                        missing.push('{{ translations.missing_field_vat ?? "NIP / VAT" }}');
    if (!(c.email || c.phone))                missing.push('{{ translations.missing_field_contact ?? "e-mail lub telefon" }}');
    return missing;
}

function isIncomplete(c) {
    return getMissingFields(c).length > 0;
}

function matchIncomplete(c) {
    if (!filters.incomplete) return true;
    return isIncomplete(c);
}

function getFiltered() {
    return allClients.filter(c => matchScore(c) && matchCa(c) && matchFreq(c) && matchSearch(c) && matchIncomplete(c));
}

/* ── Sort ──────────────────────────────────────────────────── */
const SCORE_ORDER = { A: 0, B: 1, C: 2, D: 3, null: 4, undefined: 4 };

function getSortVal(c, key) {
    switch (key) {
        case 'company_name':  return (c.company_name ?? c.absolute_name ?? '').toLowerCase();
        case 'tax_number':    return (c.tax_number ?? '').toLowerCase();
        case 'score':         return SCORE_ORDER[c.profile?.score] ?? 4;
        case 'client_type':   return (c.profile?.client_type ?? '').toLowerCase();
        case 'service_mode':  return (c.profile?.service_mode ?? '').toLowerCase();
        case 'orders_12m':    return c.orders_12m ?? 0;
        case 'ca_12m':        return c.ca_12m ?? 0;
        default:              return '';
    }
}

function applySortAndPage(filtered) {
    // Sortowanie
    if (sortState.key) {
        const dir = sortState.dir === 'asc' ? 1 : -1;
        filtered = [...filtered].sort((a, b) => {
            const va = getSortVal(a, sortState.key);
            const vb = getSortVal(b, sortState.key);
            if (va < vb) return -dir;
            if (va > vb) return dir;
            return 0;
        });
    }
    // Paginacja
    const start = (pageState.page - 1) * pageState.size;
    return { sorted: filtered, page: filtered.slice(start, start + pageState.size) };
}

/* ── Render pagination bar ─────────────────────────────────── */
function renderPagination(total) {
    const bar = document.getElementById('cl-pagination');
    if (!bar) return;
    const totalPages = Math.max(1, Math.ceil(total / pageState.size));
    const p = pageState.page;

    // Przyciski stron
    let btns = '';
    if (totalPages <= 7) {
        for (let i = 1; i <= totalPages; i++)
            btns += `<button class="cl-page-btn${i === p ? ' active' : ''}" onclick="goPage(${i})">${i}</button>`;
    } else {
        const pages = new Set([1, 2, p - 1, p, p + 1, totalPages - 1, totalPages].filter(x => x >= 1 && x <= totalPages));
        let prev = 0;
        for (const pg of [...pages].sort((a,b)=>a-b)) {
            if (prev && pg - prev > 1) btns += `<span style="padding:0 4px;color:var(--cl-t3)">…</span>`;
            btns += `<button class="cl-page-btn${pg === p ? ' active' : ''}" onclick="goPage(${pg})">${pg}</button>`;
            prev = pg;
        }
    }

    bar.innerHTML = `
        <div class="cl-page-size-wrap">
            ${T.pagination_show}
            <select onchange="changePageSize(this.value)">
                ${[25, 50, 100].map(s => `<option value="${s}"${pageState.size === s ? ' selected' : ''}>${s}</option>`).join('')}
            </select>
            ${T.pagination_per_page}
        </div>
        <div class="cl-page-btns">
            <button class="cl-page-btn" onclick="goPage(${p-1})" ${p <= 1 ? 'disabled' : ''}><i class="bi bi-chevron-left"></i></button>
            ${btns}
            <button class="cl-page-btn" onclick="goPage(${p+1})" ${p >= totalPages ? 'disabled' : ''}><i class="bi bi-chevron-right"></i></button>
        </div>
        <div style="font-size:.72rem;color:var(--cl-t3)">${T.pagination_page_of.replace('{p}', p).replace('{total}', totalPages)}</div>
    `;
}

function goPage(n) {
    const filtered = getFiltered();
    const totalPages = Math.max(1, Math.ceil(filtered.length / pageState.size));
    pageState.page = Math.max(1, Math.min(n, totalPages));
    renderTable();
}

function changePageSize(val) {
    pageState.size = parseInt(val, 10);
    pageState.page = 1;
    renderTable();
}

/* ── Update sort header icons ──────────────────────────────── */
function updateSortIcons() {
    document.querySelectorAll('.cl-table thead th.cl-sortable').forEach(th => {
        th.classList.remove('cl-sort-asc', 'cl-sort-desc');
        const icon = th.querySelector('.cl-sort-icon');
        if (!icon) return;
        if (th.dataset.sort === sortState.key) {
            th.classList.add(sortState.dir === 'asc' ? 'cl-sort-asc' : 'cl-sort-desc');
            icon.className = `bi ${sortState.dir === 'asc' ? 'bi-chevron-up' : 'bi-chevron-down'} cl-sort-icon`;
        } else {
            icon.className = 'bi bi-chevron-expand cl-sort-icon';
        }
    });
}

/* ── Render (tylko wiersze + pagination) ───────────────────── */
function renderTable() {
    expandedRows.forEach((_, id) => collapseRow(id));

    const tbody = document.getElementById('cl-tbody');
    const lbl   = document.getElementById('cl-count-label');
    const total = document.getElementById('cl-total-count');
    const filtered = getFiltered();

    if (!filtered.length) {
        tbody.innerHTML = `<tr><td colspan="12"><div class="cl-empty">
            <div class="cl-empty-icon">🔍</div>
            ${escHtml(T.no_results)}
        </div></td></tr>`;
        lbl.textContent = '0 ' + T.clients;
        document.getElementById('cl-pagination').innerHTML = '';
        return;
    }

    const { sorted, page } = applySortAndPage(filtered);
    tbody.innerHTML = page.map(buildRow).join('');

    const start = (pageState.page - 1) * pageState.size + 1;
    const end   = Math.min(pageState.page * pageState.size, filtered.length);
    lbl.textContent = `${T.showing} ${start}–${end} ${T.of} ${filtered.length} ${T.clients}`;
    total.textContent = allClients.length + ' ' + T.clients;

    renderPagination(filtered.length);
    updateSortIcons();
}

/* ── render() — alias dla kompatybilności ──────────────────── */
function render() {
    pageState.page = 1;
    renderTable();
}

/* ── Chargement API ────────────────────────────────────────── */
async function loadClients() {
    const spinner = document.getElementById('cl-spinner');
    spinner.classList.remove('d-none');

    try {
        const resp = await api(`/ajax/b2b/clients`);
        if (!resp.ok) throw new Error('HTTP ' + resp.status);
        allClients = resp.data ?? [];
        updateIncompleteBanner();
        render();
    } catch (e) {
        console.error('Erreur chargement B2B:', e);
        document.getElementById('cl-tbody').innerHTML = `<tr><td colspan="12">
            <div class="cl-empty">
                <div class="cl-empty-icon">⚠️</div>
                {{ translations.load_error ?? "Erreur de chargement des données." }}
            </div>
        </td></tr>`;
    } finally {
        spinner.classList.add('d-none');
    }
}

/* ── Gestion pills ─────────────────────────────────────────── */
function initPills(groupId, filterKey) {
    document.getElementById(groupId).querySelectorAll('.cl-pill').forEach(pill => {
        pill.addEventListener('click', () => {
            document.getElementById(groupId).querySelectorAll('.cl-pill').forEach(p => p.classList.remove('active'));
            pill.classList.add('active');
            filters[filterKey] = pill.dataset[filterKey === 'ca' ? 'ca' : filterKey] ?? '';
            render();
        });
    });
}

/* ── Expand row ────────────────────────────────────────────── */
const expandedRows = new Map(); // clientId → { tr, panelTr, loaded }

function rowClick(tr, clientId) {
    // Jeśli jest już otwarty — zamknij
    if (expandedRows.has(clientId)) {
        collapseRow(clientId);
        return;
    }

    // Zamknij poprzednio otwarty
    expandedRows.forEach((_, id) => collapseRow(id));

    tr.classList.add('cl-row-expanded');

    const colspan = tr.cells.length;
    const panelTr = document.createElement('tr');
    panelTr.className = 'cl-expand-panel';
    panelTr.innerHTML = `<td colspan="${colspan}">
        <div class="cl-expand-inner">
            <div class="cl-kpi-block" id="cl-kpi-${clientId}">
                <div class="cl-kpi-title">${T.kpi_profile_title}</div>
                <div style="display:flex;gap:8px;flex-direction:column">
                    <span class="cl-sk" style="width:100%;height:12px"></span>
                    <span class="cl-sk" style="width:80%;height:12px"></span>
                    <span class="cl-sk" style="width:90%;height:12px"></span>
                </div>
            </div>
            <div class="cl-orders-block" id="cl-orders-${clientId}">
                <div class="cl-kpi-title">${T.orders_history_title}</div>
                <span class="cl-sk" style="width:100%;height:80px;border-radius:6px"></span>
            </div>
        </div>
    </td>`;

    tr.insertAdjacentElement('afterend', panelTr);
    expandedRows.set(clientId, { tr, panelTr, loaded: false });

    loadExpandData(clientId);
}

function collapseRow(clientId) {
    const row = expandedRows.get(clientId);
    if (!row) return;
    row.tr.classList.remove('cl-row-expanded');
    row.panelTr.remove();
    expandedRows.delete(clientId);
}

async function loadExpandData(clientId) {
    const client = allClients.find(c => c.id === clientId);
    if (!client) return;

    // Renderuj KPI profilu od razu (dane mamy lokalnie)
    renderKpi(clientId, client);

    // Załaduj historię zamówień
    try {
        const resp = await api(`/ajax/b2b/clients/${clientId}/orders`);
        const json = resp.ok ? await resp.data : null;
        const ordersArr = json?.recent ?? null;

        renderOrders(clientId, ordersArr, !resp.ok);
    } catch (e) {
        renderOrders(clientId, null, true);
    }
}

/* ── KPI panel — widok ─────────────────────────────────────── */
function renderKpi(clientId, c) {
    const el = document.getElementById(`cl-kpi-${clientId}`);
    if (!el || !expandedRows.has(clientId)) return;

    const profile = c.profile ?? {};
    const credit  = c.credit ?? {};
    const rec     = c.recurrence ?? {};

    // Alert kredytowy
    let alertHtml = '';
    if (credit.enabled && credit.alert && credit.alert !== 'safe') {
        const alertMap = {
            danger:  { cls: 'cl-alert-danger',  icon: 'bi-exclamation-triangle-fill', msg: T.credit_alert_danger },
            warning: { cls: 'cl-alert-warning', icon: 'bi-exclamation-circle',        msg: T.credit_alert_warning },
            medium:  { cls: 'cl-alert-warning', icon: 'bi-info-circle',               msg: T.credit_alert_medium },
        };
        const a = alertMap[credit.alert];
        if (a) alertHtml = `<div class="cl-alert-banner ${a.cls}"><i class="bi ${a.icon}"></i>${a.msg}</div>`;
    }

    const rows = [
        [T.kpi_score,          scoreHtml(profile.score ?? null)],
        [T.kpi_client_type,    escHtml(TYPE_L[profile.client_type] ?? '—')],
        [T.kpi_service_mode,   escHtml(MODE_L[profile.service_mode] ?? '—')],
        [T.kpi_orders_12m,     `<strong>${c.orders_12m ?? 0}</strong>`],
        [T.kpi_purchase_cycle, rec.median_days ? `~${rec.median_days} ${T.days_abbr}` : '—'],
        [T.kpi_ca_12m,         c.ca_12m ? fmtAmt(c.ca_12m) : '—'],
    ];
    if (credit.enabled) {
        rows.push([T.kpi_credit_limit, fmtAmt(credit.limit)]);
        rows.push([T.kpi_credit_used,  fmtAmt(credit.used) + ` (${Math.round(credit.percent_used ?? 0)}%)`]);
    }

    const kpiRowsHtml = rows.map(([l, v]) =>
        `<div class="cl-kpi-row"><span class="cl-kpi-lbl">${l}</span><span class="cl-kpi-val">${v}</span></div>`
    ).join('');

    const notesHtml = profile.notes
        ? `<div class="cl-notes-preview">${escHtml(profile.notes)}</div>`
        : '';

    const creditExplainerHtml = credit.enabled ? `
        <div class="cl-credit-explainer">
            <strong>${T.credit_explainer_title}</strong><br>
            ${T.credit_explainer_body}
        </div>` : '';

    el.innerHTML = `
        <div class="cl-kpi-header">
            <span class="cl-kpi-title">${T.kpi_profile_title}</span>
            <div class="cl-kpi-actions">
                <button class="cl-action-btn cl-action-btn-basic"
                        onclick="openInfoSlider(${clientId})"
                        title="${T.action_basic_data_hint}">
                    <i class="bi bi-person-vcard"></i>
                    ${T.action_basic_data}
                </button>
                <button class="cl-action-btn cl-action-btn-profile"
                        onclick="openAttrSlider(${clientId})"
                        title="${T.action_commercial_profile_hint}">
                    <i class="bi bi-briefcase"></i>
                    ${T.action_commercial_profile}
                </button>
            </div>
        </div>
        ${alertHtml}
        <div class="cl-kpi-grid">${kpiRowsHtml}</div>
        ${notesHtml}
        ${creditExplainerHtml}
    `;
}

/* ── Przeliczanie credit info (lustro logiki PHP buildCreditInfo) ── */
function buildCreditInfo(enabled, limit, used) {
    if (!enabled || !limit || limit <= 0) {
        return { enabled: false, limit: null, used: null, available: null, percent_used: null, alert: 'none' };
    }
    const percentUsed = Math.round((used / limit) * 1000) / 10; // 1 miejsce po przecinku
    const available   = Math.max(0, limit - used);
    let alert = 'safe';
    if (percentUsed >= 100)     alert = 'danger';
    else if (percentUsed >= 80) alert = 'warning';
    else if (percentUsed >= 50) alert = 'medium';
    return {
        enabled:      true,
        limit:        Math.round(limit * 100) / 100,
        used:         Math.round(used  * 100) / 100,
        available:    Math.round(available * 100) / 100,
        percent_used: percentUsed,
        alert,
    };
}

/* ── Toast powiadomień ─────────────────────────────────────── */
function showToast(msg, type = 'success') {
    let wrap = document.getElementById('cl-toast-wrap');
    if (!wrap) {
        wrap = document.createElement('div');
        wrap.id = 'cl-toast-wrap';
        wrap.style.cssText = 'position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;';
        document.body.appendChild(wrap);
    }
    const t = document.createElement('div');
    const clr = type === 'success' ? '#16a34a' : '#dc2626';
    const bg  = type === 'success' ? '#f0fdf4' : '#fef2f2';
    const bd  = type === 'success' ? '#bbf7d0' : '#fecaca';
    const ico = type === 'success' ? 'bi-check-circle-fill' : 'bi-x-circle-fill';
    t.style.cssText = `padding:10px 16px;border-radius:10px;background:${bg};border:1px solid ${bd};color:${clr};font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:0 4px 16px rgba(0,0,0,.1);animation:cl-fadein .2s ease;`;
    t.innerHTML = `<i class="bi ${ico}"></i>${escHtml(msg)}`;
    wrap.appendChild(t);
    setTimeout(() => { t.style.opacity = '0'; t.style.transition = 'opacity .3s'; setTimeout(() => t.remove(), 300); }, 3000);
}

/* ── Tabela historii zamówień ─────────────────────────────── */
function renderOrders(clientId, orders, isError) {
    const el = document.getElementById(`cl-orders-${clientId}`);
    if (!el || !expandedRows.has(clientId)) return;

    if (isError) {
        el.innerHTML = `<div class="cl-kpi-title">${T.orders_history_title}</div>
            <div class="cl-orders-load-err"><i class="bi bi-wifi-off me-1"></i>${T.orders_load_error}</div>`;
        return;
    }

    if (!orders || orders.length === 0) {
        el.innerHTML = `<div class="cl-kpi-title">${T.orders_history_title}</div>
            <div class="cl-orders-none">${T.orders_none}</div>`;
        return;
    }

    const rowsHtml = orders.slice(0, 10).map(o => {
        // Mapowanie id_order_status: 1=new, 2=completed, 3=picked_up, 4=unpicked
        const statusMap = {
            1: `<span class="cl-chip" style="background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe">${T.order_status_new}</span>`,
            2: `<span class="cl-chip" style="background:#f0fdf4;color:#16a34a;border-color:#bbf7d0">${T.order_status_completed}</span>`,
            3: `<span class="cl-chip" style="background:#ecfdf5;color:#047857;border-color:#a7f3d0">${T.order_status_picked_up}</span>`,
            4: `<span class="cl-chip" style="background:#fef2f2;color:#dc2626;border-color:#fecaca">${T.order_status_unpicked}</span>`,
        };
        const statusId   = parseInt(o.id_order_status, 10);
        const statusHtml = statusMap[statusId] ?? `<span class="cl-chip">—</span>`;
        const date = o.date ? new Date(o.date).toLocaleDateString('pl-PL') : '—';
        return `<tr>
            <td>#${o.id ?? '—'}</td>
            <td>${date}</td>
            <td style="font-weight:600">${fmtAmt(o.amount)}</td>
            <td>${statusHtml}</td>
        </tr>`;
    }).join('');

    const moreHtml = orders.length > 10
        ? `<div style="font-size:.72rem;color:var(--cl-t3);margin-top:4px">${T.orders_more.replace('{n}', orders.length - 10)}</div>`
        : '';

    el.innerHTML = `
        <div class="cl-kpi-title">${T.orders_history_title}</div>
        <div style="overflow-x:auto">
            <table class="cl-orders-table">
                <thead><tr>
                    <th>${T.col_order_id}</th><th>${T.col_date}</th><th>${T.col_amount}</th><th>${T.col_status}</th>
                </tr></thead>
                <tbody>${rowsHtml}</tbody>
            </table>
        </div>
        ${moreHtml}
    `;
}

/* ── Reset ─────────────────────────────────────────────────── */
function resetFilters() {
    filters = { score: '', ca: '', freq: '', search: '', incomplete: false };
    sortState = { key: '', dir: 'asc' };
    pageState.page = 1;
    document.getElementById('cl-search').value = '';
    ['pills-score','pills-ca','pills-freq'].forEach(gid => {
        const pills = document.getElementById(gid).querySelectorAll('.cl-pill');
        pills.forEach((p, i) => p.classList.toggle('active', i === 0));
    });
    render();
}

/* ── Init ──────────────────────────────────────────────────── */
initPills('pills-score', 'score');
initPills('pills-ca', 'ca');
initPills('pills-freq', 'freq');

document.getElementById('cl-search').addEventListener('input', e => {
    filters.search = e.target.value.trim();
    render();
});
document.getElementById('cl-reset').addEventListener('click', resetFilters);

// Sortowanie po nagłówkach
document.querySelectorAll('.cl-table thead th.cl-sortable').forEach(th => {
    th.addEventListener('click', () => {
        const key = th.dataset.sort;
        if (sortState.key === key) {
            sortState.dir = sortState.dir === 'asc' ? 'desc' : 'asc';
        } else {
            sortState.key = key;
            sortState.dir = 'asc';
        }
        pageState.page = 1;
        renderTable();
    });
});

document.addEventListener('DOMContentLoaded', () => {
    loadClients();

    // Singleton tooltip kredytowy
    const tooltipEl = document.createElement('div');
    tooltipEl.id = 'cl-credit-tooltip';
    tooltipEl.innerHTML = `
        <strong>${T.credit_explainer_title}</strong>
        <ul>
            <li>${T.credit_tooltip_point1}</li>
            <li>${T.credit_tooltip_point2}</li>
        </ul>
        ${T.credit_tooltip_risk}
    `;
    document.body.appendChild(tooltipEl);

    document.addEventListener('mouseover', e => {
        const icon = e.target.closest('#cl-credit-info-icon');
        if (!icon) return;
        const r = icon.getBoundingClientRect();
        // Pokaż poza ekranem, żeby zmierzyć wysokość
        tooltipEl.style.top  = '-9999px';
        tooltipEl.style.display = 'block';
        const th = tooltipEl.offsetHeight;
        // Pozycja fixed — współrzędne viewportowe (bez scrollY)
        let left = r.left + r.width / 2 - 130;
        if (left + 260 > window.innerWidth - 8) left = window.innerWidth - 268;
        if (left < 8) left = 8;
        tooltipEl.style.left = left + 'px';
        tooltipEl.style.top  = (r.top - th - 8) + 'px';
        // Dynamiczna pozycja strzałki
        const arrowLeft = Math.round(r.left + r.width / 2 - left - 5);
        tooltipEl.style.setProperty('--arrow-right', arrowLeft + 'px');
    });

    document.addEventListener('mouseout', e => {
        if (e.target.closest('#cl-credit-info-icon')) {
            tooltipEl.style.display = 'none';
        }
    });

    // Chowaj tooltip przy scrollowaniu
    window.addEventListener('scroll', () => {
        tooltipEl.style.display = 'none';
    }, { passive: true });
});

/* ═══════════════════════════════════════════════════════════════
   SIDE SLIDER — Atrybuty opisowe klienta B2B
   ═══════════════════════════════════════════════════════════════ */

let sliderClientId   = null;
let sliderDicts      = null;   // cache słowników (ładowany raz)
let sliderState      = {};     // bieżące przypisania

/* ── Otwieranie slidera ─────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════
   BANER NIEKOMPLETNYCH DANYCH
   ══════════════════════════════════════════════════════════════════ */

function updateIncompleteBanner() {
    const count = allClients.filter(isIncomplete).length;
    const banner = document.getElementById('cl-incomplete-banner');
    if (count > 0) {
        document.getElementById('cl-incomplete-count').textContent = count;
        banner.classList.add('visible');
    } else {
        banner.classList.remove('visible');
        filters.incomplete = false;
        document.getElementById('cl-incomplete-filter-btn').classList.remove('active');
        document.getElementById('cl-incomplete-filter-btn').innerHTML =
            '<i class="bi bi-funnel me-1"></i>Pokaż';
    }
}

function toggleIncompleteFilter() {
    filters.incomplete = !filters.incomplete;
    const btn = document.getElementById('cl-incomplete-filter-btn');
    if (filters.incomplete) {
        btn.classList.add('active');
        btn.innerHTML = '<i class="bi bi-funnel-fill me-1"></i>Wyczyść filtr';
    } else {
        btn.classList.remove('active');
        btn.innerHTML = '<i class="bi bi-funnel me-1"></i>Pokaż';
    }
    pageState.page = 1;
    renderTable();
}

/* ══════════════════════════════════════════════════════════════════
   SLIDER — DANE PODSTAWOWE KLIENTA
   ══════════════════════════════════════════════════════════════════ */

let infoSliderId   = null;
let infoSliderMode = 'view';   // 'view' | 'edit'
let infoEditState  = {};       // roboczy stan formularza edycji
let infoViesData   = {};       // dane pobrane z VIES (readonly w formularzu)

// Pola zarządzane przez VIES — nie edytowalne ręcznie
const VIES_FIELDS = ['company_name', 'tax_number', 'street', 'street_number', 'city', 'zip'];

function openInfoSlider(clientId, autoEdit = false) {
    infoSliderId   = clientId;
    infoSliderMode = 'view';
    infoViesData   = {};
    const client   = allClients.find(c => c.id === clientId);

    document.getElementById('cl-info-slider-name').textContent =
        client?.company_name || client?.absolute_name || T.client_prefix + clientId;

    document.getElementById('cl-info-overlay').style.display = 'block';
    document.getElementById('cl-info-slider').classList.add('open');

    _setInfoFooter('view');

    if (!client) {
        document.getElementById('cl-info-slider-body').innerHTML =
            `<div style="color:#dc2626;font-size:.83rem"><i class="bi bi-wifi-off me-1"></i>${T.load_data_error}</div>`;
        return;
    }

    if (autoEdit || isIncomplete(client)) {
        openInfoEdit(client);
    } else {
        renderInfoView(client);
    }
}

/* ── Tryb podglądu ─────────────────────────────────────────── */
function renderInfoView(client) {
    infoSliderMode = 'view';
    _setInfoFooter('view');

    const empty = v => (!v && v !== 0)
        ? `<span class="cl-info-value empty">—</span>`
        : `<span class="cl-info-value">${escHtml(String(v))}</span>`;

    const address = [
        [client.street, client.street_number].filter(Boolean).join(' '),
        [client.zip, client.city].filter(Boolean).join(' '),
    ].filter(Boolean).join(', ');

    const missingFields  = getMissingFields(client);
    const incompleteAlert = missingFields.length > 0
        ? `<div class="cl-info-incomplete-alert">
               <i class="bi bi-exclamation-triangle-fill" style="color:#d97706;flex-shrink:0;margin-top:2px"></i>
               <div>
                   <div style="font-weight:600;margin-bottom:4px">{{ translations.incomplete_alert_title ?? "Niekompletne dane klienta" }}</div>
                   <div style="display:flex;flex-wrap:wrap;gap:4px">
                       ${missingFields.map(f => `<span style="background:#fef3c7;border:1px solid #fde68a;border-radius:5px;padding:1px 7px;font-size:.72rem;font-weight:600;color:#92400e">${f}</span>`).join('')}
                   </div>
                   <div style="margin-top:5px;font-size:.75rem;color:#a16207">{{ translations.incomplete_alert_hint ?? "Uzupełnij brakujące dane klikając Edytuj." }}</div>
               </div>
           </div>`
        : '';

    const rows = [
        { label: T.info_field_company_name,   value: empty(client.company_name) },
        { label: T.info_field_vat,            value: empty(client.tax_number) },
        { label: T.info_field_address,        value: empty(address || null) },
        { label: T.info_field_email,          value: empty(client.email) },
        { label: T.info_field_phone,          value: empty(client.phone) },
        { label: T.info_field_discount,       value: empty(client.personal_discount_percent > 0 ? client.personal_discount_percent + '%' : null) },
        { label: T.info_field_payment_terms,  value: empty(client.payment_terms > 0 ? client.payment_terms + ' ' + T.info_unit_days : null) },
        { label: T.info_field_can_deferral,   value: client.can_deferral
            ? `<span class="cl-info-badge active"><i class="bi bi-check-circle-fill"></i> ${T.info_yes}</span>`
            : `<span class="cl-info-badge inactive"><i class="bi bi-dash-circle"></i> ${T.info_no}</span>` },
        { label: T.info_field_created_at,     value: empty(client.create_timestamp
            ? new Date(client.create_timestamp).toLocaleDateString('pl-PL', { day:'2-digit', month:'2-digit', year:'numeric' })
            : null) },
    ];

    document.getElementById('cl-info-slider-body').innerHTML = `
        ${incompleteAlert}
        ${rows.map(r => `<div class="cl-info-row"><span class="cl-info-label">${r.label}</span>${r.value}</div>`).join('')}
    `;
}

/* ── Tryb edycji ───────────────────────────────────────────── */
function openInfoEdit(client) {
    infoSliderMode = 'edit';
    infoEditState  = {
        email:  client.email        ?? '',
        phone:  client.phone        ?? '',
        can_deferral: client.can_deferral ? 1 : 0,
        // VIES — wypełniane po kliknięciu "Pobierz z VIES"
        company_name:  client.company_name  ?? '',
        tax_number:    client.tax_number    ?? '',
        street:        client.street        ?? '',
        street_number: client.street_number ?? '',
        city:          client.city          ?? '',
        zip:           client.zip           ?? '',
    };
    infoViesData = {};  // czyścimy poprzednie dane VIES

    _setInfoFooter('edit');
    _renderInfoEditForm(client);
}

function _renderInfoEditForm(client) {
    const val = k => escHtml(infoEditState[k] ?? '');
    const isViesLoaded = Object.keys(infoViesData).length > 0;

    const viesSection = `
        <div class="cl-info-edit-section">
            <div class="cl-info-edit-section-title"><i class="bi bi-globe2 me-1"></i>${T.info_edit_vies_section}</div>
            <div class="cl-info-field">
                <label>${T.info_edit_vat_label}</label>
                <div class="cl-vies-row">
                    <input type="text" id="cl-edit-tax" value="${val('tax_number')}"
                        placeholder="${T.b2b_vat_placeholder}" maxlength="20"
                        ${isViesLoaded ? 'readonly' : ''}
                        oninput="infoEditState.tax_number=this.value">
                    <button class="cl-btn-vies" id="cl-btn-vies" onclick="loadViesIntoEdit()">
                        <span id="cl-vies-spinner" class="spinner-border spinner-border-sm d-none me-1"></span>
                        <i class="bi bi-cloud-download" id="cl-vies-icon"></i> ${T.info_edit_vies_fetch}
                    </button>
                </div>
                <span class="cl-vies-status" id="cl-vies-status"></span>
            </div>
            <div class="cl-info-field">
                <label>${T.info_field_company_name}</label>
                <input type="text" id="cl-edit-company" value="${val('company_name')}"
                    readonly placeholder="—">
                <span class="cl-field-hint">${T.info_edit_vies_hint}</span>
            </div>
            <div class="cl-info-field">
                <label>${T.info_edit_street}</label>
                <input type="text" id="cl-edit-street" value="${[infoEditState.street, infoEditState.street_number].filter(Boolean).join(' ')}"
                    readonly placeholder="—">
            </div>
            <div style="display:grid;grid-template-columns:1fr 2fr;gap:8px">
                <div class="cl-info-field">
                    <label>${T.info_edit_zip}</label>
                    <input type="text" id="cl-edit-zip" value="${val('zip')}" readonly placeholder="—">
                </div>
                <div class="cl-info-field">
                    <label>${T.info_edit_city}</label>
                    <input type="text" id="cl-edit-city" value="${val('city')}" readonly placeholder="—">
                </div>
            </div>
        </div>`;

    const manualSection = `
        <div class="cl-info-edit-section">
            <div class="cl-info-edit-section-title"><i class="bi bi-pencil me-1"></i>${T.info_edit_contact_section}</div>
            <div class="cl-info-field">
                <label>${T.info_field_email}</label>
                <input type="email" id="cl-edit-email" value="${val('email')}"
                    placeholder="${T.info_edit_email_placeholder}"
                    oninput="infoEditState.email=this.value">
            </div>
            <div class="cl-info-field">
                <label>${T.info_field_phone}</label>
                <input type="tel" id="cl-edit-phone" value="${val('phone')}"
                    placeholder="${T.info_edit_phone_placeholder}"
                    oninput="infoEditState.phone=this.value">
            </div>
            <div class="cl-info-field">
                <label>${T.info_field_can_deferral}</label>
                <label style="display:inline-flex;align-items:center;gap:8px;margin-top:4px;cursor:pointer;user-select:none">
                    <span style="position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0">
                        <input type="checkbox" id="cl-edit-can-deferral"
                            style="position:absolute;opacity:0;width:0;height:0;pointer-events:none"
                            ${infoEditState.can_deferral ? 'checked' : ''}
                            onchange="infoEditState.can_deferral=this.checked?1:0;this.closest('label').querySelector('.cl-sw-track').style.background=this.checked?'#16a34a':'#cbd5e1';this.closest('label').querySelector('.cl-sw-thumb').style.left=this.checked?'20px':'2px'">
                        <span class="cl-sw-track" style="position:absolute;inset:0;border-radius:11px;background:${infoEditState.can_deferral ? '#16a34a' : '#cbd5e1'};transition:background .18s"></span>
                        <span class="cl-sw-thumb" style="position:absolute;top:2px;left:${infoEditState.can_deferral ? '20px' : '2px'};width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .18s"></span>
                    </span>
                    <span style="font-size:.83rem;color:var(--cl-t1)">${infoEditState.can_deferral ? T.info_yes : T.info_no}</span>
                </label>
            </div>
        </div>`;

    document.getElementById('cl-info-slider-body').innerHTML = viesSection + manualSection;
}

async function loadViesIntoEdit() {
    const vatInput = document.getElementById('cl-edit-tax');
    const vatNumber = vatInput?.value?.trim();
    if (!vatNumber) {
        _setViesStatus(T.vies_status_no_vat, 'err');
        return;
    }

    const spinner = document.getElementById('cl-vies-spinner');
    const icon    = document.getElementById('cl-vies-icon');
    const btn     = document.getElementById('cl-btn-vies');
    spinner.classList.remove('d-none');
    icon.classList.add('d-none');
    btn.disabled = true;
    _setViesStatus(T.vies_status_loading, '');

    try {
        const resp = await api('/ajax/b2b/clients/vies-fetch', {
            method: 'POST',
            data: { vat_number: vatNumber },
        });

        if (!resp.success || !resp.data) {
            _setViesStatus(T.vies_status_not_found, 'err');
            return;
        }

        const d = resp.data;
        infoViesData = d;

        // Uzupełnij stan i inputy
        infoEditState.tax_number    = d.tax_number    ?? vatNumber;
        infoEditState.company_name  = d.company_name  ?? '';
        infoEditState.street        = d.street        ?? '';
        infoEditState.street_number = d.street_number ?? '';
        infoEditState.city          = d.city          ?? '';
        infoEditState.zip           = d.zip           ?? '';

        // Aktualizuj pola (readonly)
        _setInput('cl-edit-tax',     infoEditState.tax_number);
        _setInput('cl-edit-company', infoEditState.company_name);
        _setInput('cl-edit-street',  [infoEditState.street, infoEditState.street_number].filter(Boolean).join(' '));
        _setInput('cl-edit-zip',     infoEditState.zip);
        _setInput('cl-edit-city',    infoEditState.city);

        // Ustaw readonly na polu VAT po pobraniu
        vatInput.setAttribute('readonly', true);

        _setViesStatus(T.vies_status_ok, 'ok');
    } catch (e) {
        _setViesStatus(T.vies_status_error, 'err');
    } finally {
        spinner.classList.add('d-none');
        icon.classList.remove('d-none');
        btn.disabled = false;
    }
}

function _setInput(id, value) {
    const el = document.getElementById(id);
    if (el) el.value = value ?? '';
}

function _setViesStatus(msg, cls) {
    const el = document.getElementById('cl-vies-status');
    if (!el) return;
    el.textContent = msg;
    el.className = 'cl-vies-status' + (cls ? ' ' + cls : '');
}

function _setInfoFooter(mode) {
    const saveBtn   = document.getElementById('cl-info-save-btn');
    const cancelBtn = document.getElementById('cl-info-edit-cancel-btn');
    const editBtn   = document.getElementById('cl-info-edit-btn');
    const closeBtn  = document.getElementById('cl-info-close-btn');
    const feedback  = document.getElementById('cl-info-feedback');
    if (feedback) feedback.textContent = '';

    if (mode === 'edit') {
        saveBtn.classList.remove('d-none');
        cancelBtn.classList.remove('d-none');
        editBtn.classList.add('d-none');
        closeBtn.classList.add('d-none');
    } else {
        saveBtn.classList.add('d-none');
        cancelBtn.classList.add('d-none');
        editBtn.classList.remove('d-none');
        closeBtn.classList.remove('d-none');
    }
}

/* ── Zapis ─────────────────────────────────────────────────── */
document.getElementById('cl-info-save-btn').addEventListener('click', async () => {
    const saveBtn = document.getElementById('cl-info-save-btn');
    const feedback = document.getElementById('cl-info-feedback');
    saveBtn.disabled = true;
    feedback.textContent = '';

    // Zbierz payload — pola ręczne + dane VIES (jeśli pobrane)
    const payload = {
        email: infoEditState.email,
        phone: infoEditState.phone,
        can_deferral: infoEditState.can_deferral,
    };
    if (Object.keys(infoViesData).length > 0) {
        VIES_FIELDS.forEach(k => {
            if (infoEditState[k] !== undefined) payload[k] = infoEditState[k];
        });
    }

    try {
        const resp = await api(`/ajax/b2b/clients/${infoSliderId}`, {
            method: 'PATCH',
            data:   payload,
        });

        if (!resp.success) {
            feedback.textContent = resp.message ?? T.save_error;
            feedback.style.color = '#dc2626';
            return;
        }

        // Aktualizuj lokalny cache
        const idx = allClients.findIndex(c => c.id === infoSliderId);
        if (idx !== -1) {
            allClients[idx] = { ...allClients[idx], ...payload };
        }

        feedback.textContent = T.saved_short;
        feedback.style.color = '#16a34a';
        setTimeout(() => {
            const client = allClients.find(c => c.id === infoSliderId);
            if (client) {
                renderInfoView(client);
                document.getElementById('cl-info-slider-name').textContent =
                    client.company_name || client.absolute_name || T.client_prefix + infoSliderId;
            }
            updateIncompleteBanner();
            renderTable();
        }, 800);
    } catch (e) {
        feedback.textContent = T.connection_error;
        feedback.style.color = '#dc2626';
    } finally {
        saveBtn.disabled = false;
    }
});

document.getElementById('cl-info-edit-cancel-btn').addEventListener('click', () => {
    const client = allClients.find(c => c.id === infoSliderId);
    if (client) renderInfoView(client);
});

function closeInfoSlider() {
    document.getElementById('cl-info-overlay').style.display = 'none';
    document.getElementById('cl-info-slider').classList.remove('open');
    infoSliderId = null;
}

document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && infoSliderId) closeInfoSlider();
});

/* ══════════════════════════════════════════════════════════════════
   SLIDER — ATRYBUTY OPISOWE KLIENTA
   ══════════════════════════════════════════════════════════════════ */

async function openAttrSlider(clientId) {
    sliderClientId = clientId;
    const client   = allClients.find(c => c.id === clientId);

    // Tytuł
    document.getElementById('cl-slider-client-name').textContent =
        client?.company_name || client?.absolute_name || T.client_prefix + clientId;

    // Pokaż overlay + slider
    document.getElementById('cl-attr-overlay').style.display = 'block';
    document.getElementById('cl-attr-slider').classList.add('open');

    // Pokaż skeleton
    const body = document.getElementById('cl-slider-body');
    body.innerHTML = `<div style="display:flex;flex-direction:column;gap:10px">
        <span class="cl-sk" style="width:100%;height:13px;display:block"></span>
        <span class="cl-sk" style="width:70%;height:13px;display:block"></span>
        <span class="cl-sk" style="width:100%;height:36px;display:block;margin-top:8px"></span>
        <span class="cl-sk" style="width:100%;height:13px;display:block;margin-top:12px"></span>
        <span class="cl-sk" style="width:100%;height:80px;display:block;margin-top:8px"></span>
    </div>`;
    document.getElementById('cl-slider-feedback').textContent = '';

    // Załaduj słowniki (cache) i przypisania równolegle
    try {
        const [dicts, attrs] = await Promise.all([
            sliderDicts
                ? Promise.resolve(sliderDicts)
                : api(`/ajax/b2b/dictionaries`).then(r => r.data ?? r),
            api(`/ajax/b2b/clients/${clientId}/attributes`).then(r => r.data ?? r),
        ]);

        if (!sliderDicts) sliderDicts = dicts;

        const profile = client?.profile ?? {};
        const credit  = client?.credit  ?? {};
        sliderState = {
            // Profil klienta
            score:          profile.score        ?? null,
            client_type:    profile.client_type  ?? null,
            service_mode:   profile.service_mode ?? null,
            credit_enabled: credit.enabled       ?? false,
            credit_limit:   credit.limit         ?? null,
            // Atrybuty opisowe
            id_b2b_client_type:   attrs.id_b2b_client_type   ?? null,
            id_b2b_client_sector: attrs.id_b2b_client_sector ?? null,
            interest_ids:         attrs.interest_ids          ?? [],
            department_ids:       attrs.department_ids        ?? [],
        };

        renderSliderBody(dicts);
    } catch (e) {
        body.innerHTML = `<div style="color:#dc2626;font-size:.83rem"><i class="bi bi-wifi-off me-1"></i>${T.load_data_error}</div>`;
    }
}

/* ── Zamykanie slidera ─────────────────────────────────────── */
function closeAttrSlider() {
    document.getElementById('cl-attr-overlay').style.display = 'none';
    document.getElementById('cl-attr-slider').classList.remove('open');
    sliderClientId = null;
}

/* ESC zamyka slider */
document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && sliderClientId) closeAttrSlider();
});

/* ── Renderowanie treści slidera ───────────────────────────── */
function renderSliderBody(dicts) {
    const body = document.getElementById('cl-slider-body');

    // ── Sekcja: Score ──
    const scoreOptsHtml = ['', 'A', 'B', 'C', 'D'].map(s =>
        `<option value="${s}" ${(sliderState.score ?? '') === s ? 'selected' : ''}>${s || T.type_none}</option>`
    ).join('');

    // ── Sekcja: Typ klienta (enum) ──
    const enumTypeOpts = [
        ['', T.type_none], ['standard', T.type_standard], ['vip', T.type_vip],
        ['wholesale', T.type_wholesale], ['restaurant', T.type_restaurant],
        ['hotel', T.type_hotel], ['other', T.type_other],
    ].map(([v, l]) =>
        `<option value="${v}" ${(sliderState.client_type ?? '') === v ? 'selected' : ''}>${l}</option>`
    ).join('');

    // ── Sekcja: Tryb obsługi ──
    const modeOpts = [
        ['', T.type_none], ['pickup', T.mode_pickup],
        ['delivery', T.mode_delivery], ['both', T.mode_both],
    ].map(([v, l]) =>
        `<option value="${v}" ${(sliderState.service_mode ?? '') === v ? 'selected' : ''}>${l}</option>`
    ).join('');

    // ── Sekcja: Limit kredytowy ──
    const creditEnabled = sliderState.credit_enabled ?? false;
    const creditLimit   = sliderState.credit_limit ?? '';
    const creditLimitRowStyle = creditEnabled ? '' : 'display:none';

    // ── Sekcja: Typ B2B (słownik) + Sektor ──
    const typeOptsHtml   = buildSelectOptions(dicts.types   ?? [], sliderState.id_b2b_client_type,   T.no_assignment);
    const sectorOptsHtml = buildSelectOptions(dicts.sectors ?? [], sliderState.id_b2b_client_sector, T.no_assignment);

    body.innerHTML = `
        <div class="cl-attr-section">
            <div class="cl-attr-section-title">${T.slider_score_section}</div>
            <select class="cl-attr-select" id="sl-score" onchange="sliderState.score = this.value || null">
                ${scoreOptsHtml}
            </select>
        </div>

        <div class="cl-attr-section">
            <div class="cl-attr-section-title">${T.slider_client_type_section}</div>
            <select class="cl-attr-select" id="sl-client-type" onchange="sliderState.client_type = this.value || null">
                ${enumTypeOpts}
            </select>
        </div>

        <div class="cl-attr-section">
            <div class="cl-attr-section-title">${T.slider_service_mode_section}</div>
            <select class="cl-attr-select" id="sl-service-mode" onchange="sliderState.service_mode = this.value || null">
                ${modeOpts}
            </select>
        </div>

        <div class="cl-attr-section">
            <div class="cl-attr-section-title">${T.slider_credit_section}</div>
            <div class="cl-credit-fields" style="padding:10px 12px;border-radius:8px">
                <label class="cl-form-toggle" style="font-size:.82rem">
                    <input type="checkbox" id="sl-credit-chk" ${creditEnabled ? 'checked' : ''}
                        onchange="toggleSliderCreditLimit()" style="width:15px;height:15px;cursor:pointer;accent-color:var(--cl-green)">
                    ${T.credit_active}
                </label>
                <div id="sl-credit-limit-row" style="${creditLimitRowStyle};margin-top:6px">
                    <label style="font-size:.63rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cl-t3)">${T.credit_limit_label}</label>
                    <input class="cl-attr-select" type="number" id="sl-credit-limit" min="0" step="0.01"
                        placeholder="${T.credit_limit_placeholder}" value="${escHtml(String(creditLimit))}"
                        oninput="sliderState.credit_limit = this.value ? parseFloat(this.value) : null"
                        style="margin-top:4px">
                </div>
            </div>
        </div>

        <div style="height:1px;background:var(--cl-sf3);margin:4px 0"></div>

        <div class="cl-attr-section">
            <div class="cl-attr-section-title">${T.slider_b2b_type_section}</div>
            <select class="cl-attr-select" id="sl-type" onchange="sliderState.id_b2b_client_type = this.value ? parseInt(this.value) : null">
                ${typeOptsHtml}
            </select>
        </div>

        <div class="cl-attr-section">
            <div class="cl-attr-section-title">${T.slider_sector_section}</div>
            <select class="cl-attr-select" id="sl-sector" onchange="sliderState.id_b2b_client_sector = this.value ? parseInt(this.value) : null">
                ${sectorOptsHtml}
            </select>
        </div>

        <div class="cl-attr-section">
            <div class="cl-attr-section-title">${T.slider_interests_section}</div>
            ${buildMultiSelect('sl-interests', dicts.interests ?? [], sliderState.interest_ids, 'interest_ids')}
        </div>

        <div class="cl-attr-section">
            <div class="cl-attr-section-title">${T.slider_departments_section}</div>
            ${buildMultiSelect('sl-departments', dicts.departments ?? [], sliderState.department_ids, 'department_ids')}
        </div>
    `;
}

/* ── Helper: select options ─────────────────────────────────── */
function buildSelectOptions(items, selectedId, placeholder) {
    const none = `<option value="">${escHtml(placeholder)}</option>`;
    const opts = items.map(item =>
        `<option value="${item.id}" ${parseInt(selectedId) === parseInt(item.id) ? 'selected' : ''}>
            ${escHtml(item.name)}
        </option>`
    ).join('');
    return none + opts;
}

/* ── Helper: multi-select z checkboxami ─────────────────────── */
function buildMultiSelect(id, items, selectedIds, stateKey) {
    if (!items.length) {
        return `<div class="cl-multi-none">${T.no_options}</div>`;
    }
    const opts = items.map(item => {
        const checked = selectedIds.includes(parseInt(item.id));
        return `<label class="cl-multi-option ${checked ? 'selected' : ''}" data-id="${item.id}" data-key="${stateKey}">
            <input type="checkbox" ${checked ? 'checked' : ''} onchange="toggleMultiItem(this, '${stateKey}', ${item.id})">
            ${escHtml(item.name)}
        </label>`;
    }).join('');
    return `<div class="cl-multi-options">${opts}</div>`;
}

/* ── Toggle multi-select item ───────────────────────────────── */
function toggleMultiItem(checkbox, stateKey, itemId) {
    const label = checkbox.closest('label');
    if (checkbox.checked) {
        if (!sliderState[stateKey].includes(itemId)) {
            sliderState[stateKey].push(itemId);
        }
        label?.classList.add('selected');
    } else {
        sliderState[stateKey] = sliderState[stateKey].filter(id => id !== itemId);
        label?.classList.remove('selected');
    }
}

/* ── Toggle limitu kredytowego w sliderze ───────────────────── */
function toggleSliderCreditLimit() {
    const chk = document.getElementById('sl-credit-chk');
    const row = document.getElementById('sl-credit-limit-row');
    if (!chk || !row) return;
    sliderState.credit_enabled = chk.checked;
    row.style.display = chk.checked ? '' : 'none';
}

/* ── Zapis atrybutów ────────────────────────────────────────── */
async function saveAttrSlider() {
    if (!sliderClientId) return;

    const btn      = document.getElementById('cl-slider-save-btn');
    const feedback = document.getElementById('cl-slider-feedback');
    btn.disabled   = true;
    btn.innerHTML  = `<span class="spinner-border spinner-border-sm"></span> ${T.saving}`;
    feedback.textContent = '';

    // Walidacja limitu kredytowego
    if (sliderState.credit_enabled && (!sliderState.credit_limit || sliderState.credit_limit < 0)) {
        feedback.textContent = T.invalid_credit_limit;
        feedback.style.color = '#dc2626';
        btn.disabled  = false;
        btn.innerHTML = `<i class="bi bi-check-lg"></i> ${T.save}`;
        return;
    }

    const profilePayload = {
        score:          sliderState.score        || null,
        client_type:    sliderState.client_type  || null,
        service_mode:   sliderState.service_mode || null,
        credit_enabled: sliderState.credit_enabled,
        credit_limit:   sliderState.credit_enabled ? sliderState.credit_limit : null,
    };
    const attrsPayload = {
        id_b2b_client_type:   sliderState.id_b2b_client_type,
        id_b2b_client_sector: sliderState.id_b2b_client_sector,
        interest_ids:         sliderState.interest_ids,
        department_ids:       sliderState.department_ids,
    };

    try {
        const [profileResp, attrsResp] = await Promise.all([
            api(`/ajax/b2b/clients/${sliderClientId}/profile`, {
                method:  'POST',
                data:    profilePayload,
            }),
            api(`/ajax/b2b/clients/${sliderClientId}/attributes`, {
                method:  'POST',
                data:    attrsPayload,
            }),
        ]);
        const [profileJson, attrsJson] = await Promise.all([profileResp.json(), attrsResp.json()]);

        if (profileJson.success && attrsJson.success) {
            // Aktualizacja lokalnego cache
            const idx = allClients.findIndex(c => c.id === sliderClientId);
            if (idx !== -1) {
                allClients[idx].profile = {
                    ...allClients[idx].profile,
                    score:        profilePayload.score,
                    client_type:  profilePayload.client_type,
                    service_mode: profilePayload.service_mode,
                };
                const currentUsed = allClients[idx].credit?.used ?? 0;
                allClients[idx].credit = buildCreditInfo(
                    profilePayload.credit_enabled,
                    profilePayload.credit_limit,
                    currentUsed
                );
                // Odśwież wiersz tabeli
                const row = document.querySelector(`tr[data-id="${sliderClientId}"]`);
                if (row) {
                    const tmp = document.createElement('tbody');
                    tmp.innerHTML = buildRow(allClients[idx]);
                    row.replaceWith(tmp.firstChild);
                }
                // Odśwież panel KPI jeśli otwarty
                if (expandedRows.has(sliderClientId)) {
                    renderKpi(sliderClientId, allClients[idx]);
                }
            }
            showToast(T.saved_success, 'success');
            closeAttrSlider();
        } else {
            const msg = profileJson.message ?? attrsJson.message ?? T.save_error;
            feedback.textContent = msg;
            feedback.style.color = '#dc2626';
            btn.disabled  = false;
            btn.innerHTML = `<i class="bi bi-check-lg"></i> ${T.save}`;
        }
    } catch (e) {
        feedback.textContent = T.connection_error;
        feedback.style.color = '#dc2626';
        btn.disabled  = false;
        btn.innerHTML = `<i class="bi bi-check-lg"></i> ${T.save}`;
    }
}

// ── Modal: Dodaj klienta B2B przez VAT ───────────────────────────────────
(function () {
    const modalEl   = document.getElementById('modalAddB2BClient');
    if (!modalEl) return;
    const vatInput      = document.getElementById('addB2B-vat-input');
    const checkBtn      = document.getElementById('addB2B-check-btn');
    const checkSpinner  = document.getElementById('addB2B-check-spinner');
    const checkIcon     = document.getElementById('addB2B-check-icon');
    const vatError      = document.getElementById('addB2B-vat-error');
    const stepResult    = document.getElementById('addB2B-step-result');
    const alreadyAlert  = document.getElementById('addB2B-already-added-alert');
    const companyName   = document.getElementById('addB2B-company-name');
    const companyAddr   = document.getElementById('addB2B-company-address');
    const companyVat    = document.getElementById('addB2B-company-vat');
    const resultError   = document.getElementById('addB2B-result-error');
    const createBtn     = document.getElementById('addB2B-create-btn');
    const createSpinner = document.getElementById('addB2B-create-spinner');
    let pendingVatNumber = null;
    function resetModal() {
        vatInput.value        = '';
        vatError.classList.add('d-none');
        vatError.textContent  = '';
        stepResult.classList.add('d-none');
        alreadyAlert.classList.add('d-none');
        resultError.classList.add('d-none');
        createBtn.classList.add('d-none');
        pendingVatNumber = null;
    }
    modalEl.addEventListener('hidden.bs.modal', resetModal);
    modalEl.addEventListener('show.bs.modal', resetModal);
    // Enter w polu VAT → sprawdź
    vatInput.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); checkBtn.click(); }
    });
    checkBtn.addEventListener('click', async function () {
        const vat = vatInput.value.trim().toUpperCase();
        vatError.classList.add('d-none');
        stepResult.classList.add('d-none');
        createBtn.classList.add('d-none');
        if (!vat) {
            vatError.textContent = T.vies_status_no_vat;
            vatError.classList.remove('d-none');
            return;
        }
        if (!/^[A-Z]{2}[0-9A-Z]{6,12}$/.test(vat)) {
            vatError.textContent = T.b2b_vat_invalid_format;
            vatError.classList.remove('d-none');
            return;
        }
        checkSpinner.classList.remove('d-none');
        checkIcon.classList.add('d-none');
        checkBtn.disabled = true;
        try {
            const resp = await api('/ajax/b2b/clients/vat-lookup', {
                method:  'POST',
                data:    { vat_number: vat },
            });
            if (!resp.success) {
                const msg = resp.message === 'VAT_NOT_FOUND'
                    ? T.b2b_vat_not_found_vies
                    : (resp.message ?? T.b2b_vat_check_error);
                vatError.textContent = msg;
                vatError.classList.remove('d-none');
                return;
            }
            const d = resp.data ?? {};
            pendingVatNumber = vat;
            companyName.textContent = d.company_name || '—';
            companyAddr.textContent = [d.street, d.street_number, d.zip, d.city].filter(Boolean).join(' ');
            companyVat.textContent  = 'NIP: ' + (d.tax_number || vat);
            if (d.already_added) {
                alreadyAlert.classList.remove('d-none');
            } else {
                alreadyAlert.classList.add('d-none');
            }
            stepResult.classList.remove('d-none');
            createBtn.classList.remove('d-none');
        } catch (e) {
            vatError.textContent = 'Błąd połączenia z serwerem.';
            vatError.classList.remove('d-none');
        } finally {
            checkSpinner.classList.add('d-none');
            checkIcon.classList.remove('d-none');
            checkBtn.disabled = false;
        }
    });
    createBtn.addEventListener('click', async function () {
        if (!pendingVatNumber) return;
        createSpinner.classList.remove('d-none');
        createBtn.disabled = true;
        resultError.classList.add('d-none');
        try {
            const resp = await api('/ajax/b2b/clients', {
                method:  'POST',
                data:    { vat_number: pendingVatNumber },
            });
            if (!resp.success) {
                const msg = resp.message === 'CLIENT_ALREADY_EXISTS'
                    ? T.b2b_already_exists_blocked
                    : (resp.message ?? T.b2b_add_client_error);
                resultError.textContent = msg;
                resultError.classList.remove('d-none');
                return;
            }
            // Sukces
            const bsModal = bootstrap.Modal.getInstance(modalEl);
            if (bsModal) bsModal.hide();
            showToast('Klient B2B został dodany.', 'success');
            // Odśwież listę
            if (typeof loadClients === 'function') { loadClients(); }
        } catch (e) {
            resultError.textContent = 'Błąd połączenia z serwerem.';
            resultError.classList.remove('d-none');
        } finally {
            createSpinner.classList.add('d-none');
            createBtn.disabled = false;
        }
    });
})();
</script>
{% endblock %}