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

{% block title %}{{ translations.client_invoice }}{% endblock %}

{% block head %}
    <link href="{{ root }}/assets/css/datatables/jquery.dataTables.min.css" rel="stylesheet"/>
    <style>
        /* ── Summary cards ── */
        .invoice-stat-card {
            border: none;
            border-radius: 12px;
            padding: 1.25rem 1.5rem;
            background: #fff;
            box-shadow: 0 1px 4px rgba(0,0,0,.07);
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .invoice-stat-card .stat-icon {
            width: 46px; height: 46px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem; flex-shrink: 0;
        }
        .invoice-stat-card .stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
        .invoice-stat-card .stat-label { font-size: .75rem; color: #6b7280; margin-top: 2px; }

        /* ── Filters bar ── */
        .filters-bar {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 1px 4px rgba(0,0,0,.07);
            padding: 1rem 1.25rem;
        }

        /* ── Table tweaks ── */
        #b2b_invoices_table { font-size: .875rem; }
        #b2b_invoices_table thead th,
        #transactions_table thead th {
            background: #f8fafc;
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: #6b7280;
            border-bottom: 2px solid #e5e7eb;
            white-space: nowrap;
        }
        #b2b_invoices_table tbody tr:hover { background: #f8fafc; }
        #transactions_table tbody tr:hover  { background: #f8fafc; }
        .transaction-remark-text:empty::before { content: '—'; color: #d1d5db; }

        /* ── Status badges inline (pod nazwą klienta) ── */
        .inv-badge {
            display: inline-flex; align-items: center; gap: 3px;
            font-size: .68rem; font-weight: 600; border-radius: 20px;
            padding: 2px 8px; white-space: nowrap;
        }
        .inv-badge-paid      { background: #dcfce7; color: #166534; }
        .inv-badge-unpaid    { background: #fee2e2; color: #991b1b; }
        .inv-badge-peppol-ok { background: #dbeafe; color: #1e40af; }
        .inv-badge-peppol-no { background: #f3f4f6; color: #9ca3af; }
        .inv-badge-email     { background: #fef9c3; color: #854d0e; }

        /* backward compat — zostaw dla innych miejsc jeśli używane */
        .badge-paid   { background:#dcfce7; color:#166534; font-weight:600; border-radius:20px; padding:3px 10px; font-size:.75rem; }
        .badge-unpaid { background:#fee2e2; color:#991b1b; font-weight:600; border-radius:20px; padding:3px 10px; font-size:.75rem; }
        .badge-peppol-ok   { color:#16a34a; }
        .badge-peppol-fail { color:#dc2626; }

        /* ── Action buttons ── */
        .btn-action { border-radius: 6px; font-size: .75rem; padding: 3px 10px; }
        .btn-group .btn-action { border-radius: 0; }
        .btn-group .btn-action:first-child { border-radius: 6px 0 0 6px; }
        .btn-group .btn-action:last-child  { border-radius: 0 6px 6px 0; }

        /* ── DataTables override ── */
        div.dataTables_wrapper div.dataTables_filter { display: none; } /* własne pole wyszukiwania */
        div.dataTables_wrapper div.dataTables_length select { border-radius: 8px; border: 1px solid #d1d5db; }
        td.dataTables_empty { text-align: center; color: #9ca3af; }

        /* ── Modal improvements ── */
        .modal-header { border-bottom: 1px solid #f3f4f6; }
        .modal-footer { border-top: 1px solid #f3f4f6; }

        /* ── Deferral icon ── */
        .deferral-icon { color: #6366f1; font-size: .85rem; }

        /* ── Show paid toggle ── */
        .show-paid-wrap {
            display: flex; align-items: center; gap: .5rem;
            background: #f8fafc; border-radius: 8px;
            padding: 8px 14px; font-size: .85rem; color: #374151;
            border: 1px solid #e5e7eb;
            cursor: pointer;
        }
        .show-paid-wrap label { cursor: pointer; margin: 0; }

        /* ── Stat card — klikalny kafelek ── */
        .invoice-stat-card {
            cursor: pointer;
            transition: box-shadow .15s, transform .1s;
            user-select: none;
        }
        .invoice-stat-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,.12);
            transform: translateY(-1px);
        }
        .invoice-stat-card.stat-active {
            box-shadow: 0 4px 14px rgba(0,0,0,.15);
        }
        #stats-row .col-6:nth-child(1) .invoice-stat-card.stat-active { outline: 2px solid #3b82f6; outline-offset: 2px; }
        #stats-row .col-6:nth-child(2) .invoice-stat-card.stat-active { outline: 2px solid #ef4444; outline-offset: 2px; }
        #stats-row .col-6:nth-child(3) .invoice-stat-card.stat-active { outline: 2px solid #22c55e; outline-offset: 2px; }
        #stats-row .col-6:nth-child(4) .invoice-stat-card.stat-active { outline: 2px solid #f59e0b; outline-offset: 2px; }
        #stats-row .col-6:nth-child(5) .invoice-stat-card.stat-active { outline: 2px solid #6b7280; outline-offset: 2px; }
    </style>
{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.client_invoice }}</h3>
        <p class="text-subtitle text-muted">{{ translations.client_invoice_subtitle }}</p>
    </div>
{% endblock %}

{% block content %}

    {# ── Summary stats ── #}
    <div class="row g-3 mb-4" id="stats-row">
        <div class="col-6 col-md">
            <div class="invoice-stat-card" id="stat-card-all" onclick="filterByStatCard('all')" title="{{ translations.invoices|default('Pokaż wszystkie faktury') }}">
                <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                    <i class="icon dripicons-document"></i>
                </div>
                <div>
                    <div class="stat-value" id="stat-total">—</div>
                    <div class="stat-label">{{ translations.invoices|default('Faktury') }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md">
            <div class="invoice-stat-card" id="stat-card-unpaid" onclick="filterByStatCard('unpaid')" title="{{ translations.unpaid|default('Pokaż tylko nieopłacone') }}">
                <div class="stat-icon bg-danger bg-opacity-10 text-danger">
                    <i class="icon dripicons-clock"></i>
                </div>
                <div>
                    <div class="stat-value" id="stat-unpaid">—</div>
                    <div class="stat-label">{{ translations.unpaid|default('Nieopłacone') }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md">
            <div class="invoice-stat-card" id="stat-card-paid" onclick="filterByStatCard('paid')" title="{{ translations.paid|default('Pokaż tylko opłacone') }}">
                <div class="stat-icon bg-success bg-opacity-10 text-success">
                    <i class="icon dripicons-checkmark"></i>
                </div>
                <div>
                    <div class="stat-value" id="stat-paid">—</div>
                    <div class="stat-label">{{ translations.paid|default('Opłacone') }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md">
            <div class="invoice-stat-card" id="stat-card-peppol" onclick="filterByStatCard('peppol')" title="{{ translations.sent_peppol|default('Pokaż tylko wysłane Peppol') }}">
                <div class="stat-icon bg-warning bg-opacity-10 text-warning">
                    <i class="icon dripicons-broadcast"></i>
                </div>
                <div>
                    <div class="stat-value" id="stat-peppol">—</div>
                    <div class="stat-label">{{ translations.sent_peppol|default('Wysłane Peppol') }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md">
            <div class="invoice-stat-card" id="stat-card-no-peppol" onclick="filterByStatCard('no-peppol')" title="{{ translations.not_sent_peppol|default('Pokaż tylko niewysłane Peppol') }}">
                <div class="stat-icon bg-secondary bg-opacity-10 text-secondary">
                    <i class="icon dripicons-wrong"></i>
                </div>
                <div>
                    <div class="stat-value" id="stat-no-peppol">—</div>
                    <div class="stat-label">{{ translations.not_sent_peppol|default('Niewysłane Peppol') }}</div>
                </div>
            </div>
        </div>
    </div>

    {# ── Main card ── #}
    <div class="card">
        <div class="card-header border-0 pb-2 bg-white d-flex align-items-center justify-content-between">
            <h5 class="card-title mb-0">
                <i class="icon dripicons-briefcase me-2 text-primary"></i>
                {{ translations.b2b_invoices|default('Faktury B2B') }}
            </h5>
            <a href="{{ root }}/Document/deferral/pending" class="btn btn-outline-primary btn-sm d-flex align-items-center gap-1">
                <i class="icon dripicons-document-new"></i>
                {{ translations.deferral_payments|default('Odroczone do wystawienia') }}
            </a>
        </div>

        {# ── Filter bar ── #}
        <div class="card-body pt-0 pb-3 border-bottom">

            {# Przełącznik trybu #}
            <div class="d-flex gap-2 mb-3">

                <button class="btn btn-sm btn-primary filter-mode-btn active" id="mode-client"
                        onclick="switchFilterMode('client')">
                    <i class="icon dripicons-user me-1"></i>{{ translations.client }}
                </button>
                <button class="btn btn-sm btn-outline-secondary filter-mode-btn" id="mode-date"
                        onclick="switchFilterMode('date')">
                    <i class="icon dripicons-calendar me-1"></i>{{ translations.date|default('Po dacie') }}
                </button>
                <button class="btn btn-sm btn-outline-secondary filter-mode-btn" id="mode-all"
                        onclick="switchFilterMode('all')">
                    <i class="icon dripicons-calendar me-1"></i>{{ translations.last_year_invoices|default('Ostatni rok') }}
                    <span id="badge_last_year_range" style="font-size:.65rem"></span>
                </button>
            </div>

            {# ── Tryb: po kliencie ── #}
            <div id="filter-by-client">
                <div class="row g-3 align-items-end">
                    <div class="col-12 col-md-5">
                        <label class="form-label fw-semibold mb-1" for="b2b_client">
                            <i class="icon dripicons-user me-1 text-muted" style="font-size:.85rem"></i>
                            {{ translations.client }}
                        </label>
                        <select class="form-select choices" id="b2b_client"
                                onchange="loadInvoicesByClient(this.value)">
                            <option value="-1">{{ translations.select }}</option>
                            {% for client in unique_b2b_clients %}
                                <option value="{{ client.getId() }}">{{ client.getCompanyName() }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-6 col-md-2">
                        <label class="form-label fw-semibold mb-1" for="b2b_invoice_dates">
                            <i class="icon dripicons-calendar me-1 text-muted" style="font-size:.85rem"></i>
                            {{ translations.date }}
                        </label>
                        <select class="form-select" id="b2b_invoice_dates"
                                onchange="filterTable(this, 'b2b_invoices', 4, true)">
                            <option value="-1">{{ translations.all|default('Wszystkie') }}</option>
                        </select>
                    </div>
                    <div class="col-6 col-md-3">
                        <label class="form-label fw-semibold mb-1" for="invoice-search">
                            <i class="icon dripicons-search me-1 text-muted" style="font-size:.85rem"></i>
                            {{ translations.search_for_name|default('Szukaj') }}
                        </label>
                        <input type="search" class="form-control" id="invoice-search"
                               placeholder="{{ translations.search_for_name|default('Szukaj...') }}">
                    </div>
                    <div class="col-12 col-md-2">
                        <div class="show-paid-wrap h-100" style="min-height:38px;">
                            <input type="checkbox" class="form-check-input m-0" id="showPaid_b2b"
                                   onchange="onShowPaidChange()">
                            <label class="form-check-label" for="showPaid_b2b">{{ translations.show_paid }}</label>
                        </div>
                    </div>
                </div>
            </div>

            {# ── Tryb: po dacie ── #}
            <div id="filter-by-date" class="d-none">
                <div class="row g-3 align-items-end">
                    <div class="col-12 col-md-4">
                        <label class="form-label fw-semibold mb-1" for="date-filter-exact">
                            <i class="icon dripicons-calendar me-1 text-muted" style="font-size:.85rem"></i>
                            {{ translations.specific_date|default('Konkretna data') }}
                        </label>
                        <select class="form-select" id="date-filter-exact"
                                onchange="onDateFilterChange('date', this.value)">
                            <option value="-1">{{ translations.select }}</option>
                            {% for date in invoice_dates|reverse %}
                                <option value="{{ date }}">{{ date }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-12 col-md-2">
                        <label class="form-label fw-semibold mb-1" for="date-filter-month">
                            <i class="icon dripicons-calendar me-1 text-muted" style="font-size:.85rem"></i>
                            {{ translations.month_year|default('Miesiąc / Rok') }}
                        </label>
                        <select class="form-select" id="date-filter-month"
                                onchange="onDateFilterChange('month', this.value)">
                            <option value="-1">{{ translations.select }}</option>
                            {% for ym in invoice_year_months|reverse %}
                                <option value="{{ ym }}">{{ ym }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-12 col-md-3">
                        <label class="form-label fw-semibold mb-1" for="invoice-search-date">
                            <i class="icon dripicons-search me-1 text-muted" style="font-size:.85rem"></i>
                            {{ translations.search_for_name|default('Szukaj') }}
                        </label>
                        <input type="search" class="form-control" id="invoice-search-date"
                               placeholder="{{ translations.search_for_name|default('Szukaj...') }}">
                    </div>
                    <div class="col-12 col-md-3 d-flex align-items-end">
                        <div class="show-paid-wrap w-100" style="min-height:38px;">
                            <input type="checkbox" class="form-check-input m-0" id="showPaid_date"
                                   onchange="onShowPaidChange()">
                            <label class="form-check-label" for="showPaid_date">{{ translations.show_paid }}</label>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="card-body px-3 pt-3 pb-0">
            <div class="table-responsive">
                <table class="table table-hover" id="b2b_invoices_table">
                    <thead>
                        <tr>
                            <th style="width:2%">
                                <input type="checkbox" class="form-check" id="selectAll_b2b"
                                       onclick="toggleSelectAll(this, 'b2b_invoices')">
                            </th>
                            <th style="width:3%"></th>
                            <th style="width:14%">{{ translations.number }}</th>
                            <th class="col-client" style="width:30%">{{ translations.client }}</th>
                            <th style="width:11%">{{ translations.established_date }}</th>
                            <th style="width:10%">{{ translations.amount }}</th>
                            <th style="width:30%">{{ translations.actions|default('Akcje') }}</th>
                        </tr>
                    </thead>
                    <tbody id="b2b_invoices"></tbody>
                </table>
            </div>
        </div>

        <div class="card-footer bg-white border-0 pt-0 pb-3 d-flex gap-2 align-items-center">
            <button class="btn btn-outline-secondary btn-sm"
                    onclick="GetGroupedInvoices('b2b_invoices', this)">
                <i class="icon dripicons-download me-1"></i>
                {{ translations.get_grouped_invoices }}
            </button>
            <button class="btn btn-outline-danger btn-sm ms-1"
                    onclick="openReminderModal(null, null)"
                    id="btn-open-reminder-panel">
                <i class="icon dripicons-bell me-1"></i>
                {{ translations.payment_reminders|default('Przypomnienia o płatności') }}
            </button>
        </div>
    </div>

    {# ── Modals ── #}
    {% include "document/invoice/modals/payment_modal.twig" %}
    {% include "document/invoice/modals/issued_documents_modal.twig" %}
    {% include "document/invoice/modals/edit_invoice_client_data_modal.twig" %}

    {# ── Modal: przypomnienia o płatności ── #}
    <div class="modal fade" id="payment_reminders_modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header border-bottom-0 pb-2">
                    <div>
                        <h5 class="modal-title mb-0">
                            <i class="icon dripicons-bell me-2 text-danger"></i>
                            {{ translations.payment_reminders|default('Przypomnienia o płatności') }}
                        </h5>
                        <small class="text-muted" id="reminder_modal_subtitle">
                            {{ translations.reminder_modal_subtitle|default('Wybierz klienta i faktury, a następnie wyślij przypomnienie.') }}
                        </small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body pt-0">

                    {# Selektor klienta #}
                    <div class="row g-2 align-items-end mb-3">
                        <div class="col-12 col-md-7">
                            <label class="form-label fw-semibold mb-1" for="reminder_client_select">
                                <i class="icon dripicons-user me-1 text-muted" style="font-size:.85rem"></i>
                                {{ translations.client }}
                                <span class="badge bg-danger ms-1" id="reminder_unpaid_clients_badge" style="display:none;font-size:.7rem"></span>
                            </label>
                            <select class="form-select" id="reminder_client_select"
                                    onchange="loadReminderUnpaidInvoices(this.value)">
                                <option value="-1">{{ translations.select }}</option>
                            </select>
                            <div id="reminder_clients_loading" class="text-muted small mt-1 d-none">
                                <span class="spinner-border spinner-border-sm me-1"></span>
                                {{ translations.loading }}
                            </div>
                        </div>
                        <div class="col-12 col-md-5 d-flex align-items-end gap-2">
                            <button class="btn btn-outline-secondary btn-sm w-100"
                                    onclick="toggleReminderSelectAll()">
                                <i class="icon dripicons-checklist me-1"></i>
                                {{ translations.select_all|default('Zaznacz wszystkie') }}
                            </button>
                        </div>
                    </div>

                    {# Loading #}
                    <div id="reminder_loading" class="text-center py-3 d-none">
                        <div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
                        <span class="ms-2 text-muted small">{{ translations.loading }}</span>
                    </div>

                    {# Tabela faktur nieopłaconych #}
                    <div id="reminder_invoices_wrap" class="d-none">
                        <div class="table-responsive" style="max-height:320px;overflow-y:auto;">
                            <table class="table table-hover mb-0" id="reminder_invoices_table">
                                <thead>
                                    <tr>
                                        <th style="width:4%">
                                            <input type="checkbox" class="form-check" id="reminder_selectAll"
                                                   onclick="toggleReminderSelectAll()">
                                        </th>
                                        <th style="width:5%"></th>
                                        <th>{{ translations.number }}</th>
                                        <th>{{ translations.established_date }}</th>
                                        <th>{{ translations.payment_date }}</th>
                                        <th>{{ translations.amount }}</th>
                                    </tr>
                                </thead>
                                <tbody id="reminder_invoices_tbody"></tbody>
                            </table>
                        </div>
                        <div id="reminder_no_unpaid" class="text-center text-muted py-3 d-none">
                            <i class="icon dripicons-checkmark text-success me-1"></i>
                            {{ translations.no_unpaid_invoices|default('Brak nieopłaconych faktur dla tego klienta.') }}
                        </div>
                    </div>

                </div>
                <div class="modal-footer border-top-0 pt-0 d-flex gap-2 flex-wrap">
                    <div class="me-auto text-muted small" id="reminder_selected_info">
                        {{ translations.select_invoices|default('Zaznacz faktury, aby wysłać przypomnienie.') }}
                    </div>
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        {{ translations.close }}
                    </button>
                    <button type="button" class="btn btn-outline-warning" id="btn_soft_reminder"
                            onclick="SendSoftReminder()">
                        <i class="icon dripicons-mail me-1"></i>
                        {{ translations.send_soft_reminder|default('Wyślij upomnienie') }}
                    </button>
                    <button type="button" class="btn btn-danger" id="btn_hard_reminder"
                            onclick="SendHardReminder()">
                        <i class="icon dripicons-warning me-1"></i>
                        {{ translations.send_hard_reminder|default('Wyślij wezwanie do zapłaty') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    {# ── Modal: transakcje (paragony) faktury ── #}
    <div class="modal fade" id="invoice_transactions_modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title mb-0">
                            <i class="icon dripicons-ticket me-2 text-secondary"></i>
                            {{ translations.receipts|default('Paragony') }}
                        </h5>
                        <small class="text-muted" id="transactions_modal_subtitle"></small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0" id="transactions_table">
                            <thead>
                                <tr>
                                    <th style="width:15%">{{ translations.ticket_key|default('Nr paragonu') }}</th>
                                    <th style="width:18%">{{ translations.transaction_date|default('Data') }}</th>
                                    <th style="width:12%">{{ translations.total_amount_without_discount|default('Kwota') }}</th>
                                    <th>{{ translations.remark|default('Uwaga') }}</th>
                                    <th style="width:5%"></th>
                                </tr>
                            </thead>
                            <tbody id="transactions_tbody"></tbody>
                        </table>
                    </div>
                    <div class="text-center py-3" id="transactions_loading" style="display:none">
                        <div class="spinner-border spinner-border-sm text-secondary"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        {{ translations.close|default('Zamknij') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    {# ── Modal: edycja uwagi do paragonu ── #}
    <div class="modal fade" id="transaction_remark_modal" 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="icon dripicons-document-edit me-2 text-warning"></i>
                        {{ translations.remark|default('Uwaga do paragonu') }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="remark_transaction_id">
                    <label class="form-label fw-semibold" for="transaction_remark">
                        {{ translations.remark|default('Uwaga') }}
                        <small class="text-muted fw-normal" id="remark_ticket_key_display"></small>
                    </label>
                    <textarea class="form-control" id="transaction_remark" rows="4"
                              placeholder="{{ translations.remark|default('Wpisz uwagę...') }}"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        {{ translations.close|default('Zamknij') }}
                    </button>
                    <button type="button" class="btn btn-success" onclick="saveTransactionRemark()">
                        <i class="icon dripicons-checkmark me-1"></i>
                        {{ translations.save|default('Zapisz') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block scripts %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{{ root }}/assets/js/datatables/jquery.dataTables.min.js"></script>

    <script>
        const payment_modal               = new bootstrap.Modal(document.getElementById('payment_modal'));
        const issued_documents_modal      = new bootstrap.Modal(document.getElementById('issued_documents_modal'));
        const edit_invoice_client_data_modal = new bootstrap.Modal(document.getElementById('edit_invoice_client_data_modal'));

        $(document).ready(function () {
            const dtOptions = {
                paging: true,
                pageLength: 25,
                searching: true,
                info: true,
                ordering: true,
                columnDefs: [
                    { targets: 3, visible: false }  // kolumna "Klient" — ukryta domyślnie (tryb "po kliencie")
                ],
                language: {
                    search: "{{ translations.search_for_name }}:",
                    lengthMenu: "{{ translations.showing }} _MENU_",
                    info: "{{ translations.showing }} _START_–_END_ {{ translations.of }} _TOTAL_ {{ translations.entries }}",
                    infoEmpty: "{{ translations.no_data_found }}",
                    zeroRecords: "{{ translations.no_data_found }}"
                }
            };
            window.dataTableB2B = $('#b2b_invoices_table').DataTable(dtOptions);

            // Wyszukiwarka — tryb "po kliencie"
            let searchTimer;
            document.getElementById('invoice-search').addEventListener('input', function () {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(() => window.dataTableB2B.search(this.value).draw(), 300);
            });

            // Wyszukiwarka — tryb "po dacie"
            let searchTimerDate;
            document.getElementById('invoice-search-date').addEventListener('input', function () {
                clearTimeout(searchTimerDate);
                searchTimerDate = setTimeout(() => window.dataTableB2B.search(this.value).draw(), 300);
            });

            // Domyślnie aktywny tryb "po kliencie"
            switchFilterMode('client');
        });

        /* ─────────────────────────────────────────
           Tryb filtrów: all | klient | data
        ───────────────────────────────────────── */
        window._filterMode = 'client'; // 'all' | 'client' | 'date'

        function switchFilterMode(mode) {
            window._filterMode = mode;

            // Przełącz przyciski
            ['all', 'client', 'date'].forEach(m => {
                const btn = document.getElementById(`mode-${m}`);
                if (!btn) return;
                btn.classList.toggle('btn-primary', mode === m);
                btn.classList.toggle('btn-outline-secondary', mode !== m);
            });

            // Pokaż/ukryj panele filtrów
            const filterClient = document.getElementById('filter-by-client');
            const filterDate   = document.getElementById('filter-by-date');
            if (filterClient) filterClient.classList.toggle('d-none', mode !== 'client');
            if (filterDate)   filterDate.classList.toggle('d-none', mode !== 'date');

            // Kolumna "Klient" (index 3): widoczna w trybie "po dacie" i "wszystkie"
            window.dataTableB2B.column(3).visible(mode === 'date' || mode === 'all');

            // Wyczyść tabelę i statystyki przy zmianie trybu
            window._allInvoices = [];
            window.dataTableB2B.clear().draw();
            clearStats();
            clearStatCardFilter();

            // Reset selects
            document.getElementById('date-filter-exact').value = '-1';
            document.getElementById('date-filter-month').value = '-1';
            document.getElementById('b2b_client').value = '-1';

            // W trybie "all" — automatycznie pobierz wszystkie faktury
            if (mode === 'all') {
                loadAllInvoices();
            }
        }

        /* ─────────────────────────────────────────
           Load ALL invoices for this shop (ostatni rok)
        ───────────────────────────────────────── */
        function loadAllInvoices() {
            const today     = new Date();
            const dateTo    = today.toISOString().split('T')[0];
            const dateFrom  = new Date(new Date().setFullYear(today.getFullYear() - 1))
                                  .toISOString().split('T')[0];

            // Pokaż zakres dat w badżu przycisku
            const badge = document.getElementById('badge_last_year_range');
            if (badge) badge.textContent = `${dateFrom} – ${dateTo}`;

            api(`/ajax/invoices?date_from=${dateFrom}&date_to=${dateTo}`)
                .then(function (res) {
                    window._allInvoices = res.data ?? [];
                    renderTable(window._allInvoices);
                    updateStats(window._allInvoices);
                })
                .catch(function(err) {
                    console.error('Błąd ładowania faktur:', err);
                });
        }

        /* ─────────────────────────────────────────
           Pomocnik: "pokaż opłacone" z aktywnego trybu
        ───────────────────────────────────────── */
        function isShowPaid() {
            if (window._filterMode === 'date') {
                return document.getElementById('showPaid_date').checked;
            }
            return document.getElementById('showPaid_b2b').checked;
        }

        /* ─────────────────────────────────────────
           Load invoices for selected B2B client
        ───────────────────────────────────────── */

        // Surowe dane z API — przechowywane między wywołaniami filtrów
        window._allInvoices = [];

        function loadInvoicesByClient(client_id) {
            if (client_id === '-1') {
                window._allInvoices = [];
                window.dataTableB2B.clear().draw();
                clearStats();
                clearStatCardFilter();
                return;
            }

            api(`/ajax/clients/${client_id}/invoices`)
                .then(function (res) {
                    window._allInvoices = res.data;
                    renderTable(window._allInvoices);
                    updateStats(window._allInvoices);
                })
                .catch();
        }

        /* ─────────────────────────────────────────
           Load invoices by exact date or year-month
        ───────────────────────────────────────── */
        function onDateFilterChange(type, value) {
            if (value === '-1') {
                window._allInvoices = [];
                window.dataTableB2B.clear().draw();
                clearStats();
                clearStatCardFilter();
                return;
            }

            // Resetuj drugi select
            if (type === 'date') {
                document.getElementById('date-filter-month').value = '-1';
            } else {
                document.getElementById('date-filter-exact').value = '-1';
            }

            const endpoint = type === 'date'
                ? `/ajax/invoices/by-date?date=${value}`
                : `/ajax/invoices/by-date?month=${value}`;

            // Spinner w tabeli
            window.dataTableB2B.clear().draw();

            api(endpoint)
                .then(function (res) {
                    window._allInvoices = res.data ?? [];
                    renderTable(window._allInvoices);
                    updateStats(window._allInvoices);
                })
                .catch();
        }

        function renderTable(allInvoices) {
            const showPaid   = isShowPaid();
            const dateSelect = document.getElementById('b2b_invoice_dates');

            // Najpierw filtr "pokaż opłacone"
            let list = allInvoices.filter(inv => showPaid || inv.was_paid === 0);

            // Następnie filtr kafelka (nadpisuje filtr showPaid dla 'paid'/'unpaid'/'peppol')
            const cardFilter = window._statCardFilter;
            if (cardFilter === 'unpaid') {
                list = allInvoices.filter(inv => inv.was_paid === 0);
            } else if (cardFilter === 'paid') {
                list = allInvoices.filter(inv => inv.was_paid === 1);
            } else if (cardFilter === 'peppol') {
                list = allInvoices.filter(inv => inv.was_sent_peppol === 1);
            } else if (cardFilter === 'no-peppol') {
                list = allInvoices.filter(inv => inv.is_b2b_client && inv.was_sent_peppol !== 1);
            } else if (cardFilter === 'all') {
                list = allInvoices.slice();
            }

            /* Przepełnij date filter tylko przy pierwszym renderze (gdy opcje = 1 = "Wszystkie") */
            if (dateSelect.options.length === 1) {
                const uniqueDates = new Set(list.map(inv => inv.invoiced_date.split(' ')[0]));
                Array.from(uniqueDates).sort((a, b) => new Date(b) - new Date(a)).forEach(d => {
                    const opt = document.createElement('option');
                    opt.value = d; opt.text = d;
                    dateSelect.appendChild(opt);
                });
            }

            const data = list.map(inv => {
                const dateOnly = inv.invoiced_date.split(' ')[0];

                /* col 1 — ikona odroczenia */
                const deferralIcon = inv.deferral_invoice === 1
                    ? `<i class="icon dripicons-time-reverse deferral-icon" title="{{ translations.deferral_invoice|default('Faktura odroczeniowa') }}"></i>`
                    : '';

                /* badże statusów — wspólne dla obu trybów */
                const badgePaid = inv.was_paid === 1
                    ? `<span class="inv-badge inv-badge-paid">{{ translations.paid }}</span>`
                    : `<span class="inv-badge inv-badge-unpaid">{{ translations.unpaid|default('Nieopłacona') }}</span>`;

                const badgePeppol = inv.is_b2b_client
                    ? (inv.was_sent_peppol === 1
                        ? `<span class="inv-badge inv-badge-peppol-ok">Peppol</span>`
                        : `<span class="inv-badge inv-badge-peppol-no">Peppol</span>`)
                    : '';

                const badgeEmail = inv.date_last_emailed
                    ? `<span class="inv-badge inv-badge-email" title="{{ translations.date_of_email_sending_short }}: ${inv.date_last_emailed}"><i class="icon dripicons-mail" style="font-size:.7rem"></i> ${inv.date_last_emailed}</span>`
                    : '';

                const badgesRow = `<div class="d-flex flex-wrap gap-1 mt-1">${badgePaid}${badgePeppol}${badgeEmail}</div>`;

                /*
                 * Tryb "po kliencie": klient znany z filtra — badże pokazujemy pod numerem faktury (col 2)
                 * Tryb "po dacie":    col 2 = sam numer, col 3 = nazwa klienta + badże
                 */
                const numberCell = window._filterMode === 'client'
                    ? `<div style="font-size:.85rem;font-weight:600">${inv.invoice_number}</div>${badgesRow}`
                    : `<span style="font-size:.85rem">${inv.invoice_number}</span>`;

                /* col 3 — widoczna tylko w trybie "po dacie" */
                const clientCell = `<div class="fw-semibold" style="font-size:.85rem">${inv.consignee_name ?? '—'}</div>${badgesRow}`;

                /* col 6 — akcje */
                const payBtn = inv.was_paid === 1
                    ? `<button class="btn btn-outline-secondary btn-action btn-sm" disabled title="{{ translations.paid }}"><i class="icon dripicons-checkmark"></i></button>`
                    : `<button class="btn btn-outline-success btn-action btn-sm payment-button" data-id_invoice="${inv.id}" title="{{ translations.payment }}"><i class="icon dripicons-wallet"></i></button>`;

                const reminderBtn = inv.was_paid === 0
                    ? `<button class="btn btn-outline-danger btn-action btn-sm" onclick="openReminderModal(${inv.id_client ?? 'null'}, ${inv.id})" title="{{ translations.send_reminder|default('Wyślij przypomnienie o płatności') }}"><i class="icon dripicons-bell"></i></button>`
                    : '';

                const actionsCell = `<div class="btn-group" role="group">
                    ${payBtn}
                    ${reminderBtn}
                    <button class="btn btn-warning btn-action btn-sm" onclick="sendInvoiceByEmail(${inv.id}, this)" title="{{ translations.email }}"><i class="icon dripicons-mail"></i></button>
                    <button class="btn btn-secondary btn-action btn-sm invoice-receipts-button" data-id_invoice="${inv.id}" title="{{ translations.receipts|default('Paragony') }}"><i class="icon dripicons-ticket"></i></button>
                    <button class="btn btn-primary btn-action btn-sm issued-documents-button" data-id_invoice="${inv.id}" title="{{ translations.documents|default('Dokumenty') }}"><i class="icon dripicons-document"></i></button>
                    <a href="{{ root }}/invoices/${inv.id}/credit-note" class="btn btn-info btn-action btn-sm" title="{{ translations.credit_note|default('Korekta') }}"><i class="icon dripicons-document-edit"></i></a>
                </div>`;

                return [
                    `<input type="checkbox" class="form-check rowCheckbox" value="${inv.id}" onclick="uncheckSelectAll(this, 'selectAll_b2b')">`,
                    deferralIcon,
                    numberCell,
                    clientCell,
                    `<span style="font-size:.85rem">${dateOnly}</span>`,
                    `<strong>${inv.invoice_value_after_corrections} €</strong>`,
                    actionsCell,
                ];
            });

            window.dataTableB2B.clear();
            if (data.length) window.dataTableB2B.rows.add(data);
            window.dataTableB2B.draw();
        }

        /* ─────────────────────────────────────────
           Summary stats — zawsze z pełnej listy
        ───────────────────────────────────────── */
        function updateStats(allInvoices) {
            const total    = allInvoices.length;
            const unpaid   = allInvoices.filter(i => i.was_paid === 0).length;
            const paid     = allInvoices.filter(i => i.was_paid === 1).length;
            const peppol   = allInvoices.filter(i => i.was_sent_peppol === 1).length;
            const noPeppol = allInvoices.filter(i => i.is_b2b_client && i.was_sent_peppol !== 1).length;

            document.getElementById('stat-total').textContent    = total;
            document.getElementById('stat-unpaid').textContent   = unpaid;
            document.getElementById('stat-paid').textContent     = paid;
            document.getElementById('stat-peppol').textContent   = peppol;
            document.getElementById('stat-no-peppol').textContent = noPeppol;
        }

        function clearStats() {
            ['stat-total','stat-unpaid','stat-paid','stat-peppol','stat-no-peppol'].forEach(id => {
                document.getElementById(id).textContent = '—';
            });
        }

        /* ─────────────────────────────────────────
           Stat-card filter
        ───────────────────────────────────────── */
        window._statCardFilter = null; // null | 'all' | 'unpaid' | 'paid' | 'peppol' | 'no-peppol'

        function filterByStatCard(type) {
            if (window._allInvoices.length === 0) return;

            // Toggle: kliknięcie aktywnego kafelka resetuje filtr
            if (window._statCardFilter === type) {
                window._statCardFilter = null;
            } else {
                window._statCardFilter = type;
            }

            // Zaktualizuj wygląd kafelków
            ['all','unpaid','paid','peppol','no-peppol'].forEach(t => {
                const card = document.getElementById(`stat-card-${t}`);
                if (card) card.classList.toggle('stat-active', window._statCardFilter === t);
            });

            renderTable(window._allInvoices);
        }

        function clearStatCardFilter() {
            window._statCardFilter = null;
            ['all','unpaid','paid','peppol','no-peppol'].forEach(t => {
                const card = document.getElementById(`stat-card-${t}`);
                if (card) card.classList.remove('stat-active');
            });
        }

        /* ─────────────────────────────────────────
           Show paid toggle — re-render z cache, bez fetch
        ───────────────────────────────────────── */
        function onShowPaidChange() {
            if (window._allInvoices.length === 0) return;
            // W trybie klient: wyczyść date select żeby renderTable go ponownie wypełnił
            if (window._filterMode === 'client') {
                const dateSelect = document.getElementById('b2b_invoice_dates');
                for (let i = dateSelect.options.length - 1; i > 0; i--) dateSelect.remove(i);
            }
            renderTable(window._allInvoices);
            updateStats(window._allInvoices);
        }

        /* ─────────────────────────────────────────
           Select all / uncheck
        ───────────────────────────────────────── */
        function toggleSelectAll(chck) {
            const checked = chck.checked;
            window.dataTableB2B.cells(null, 0).every(function () {
                $(this.node()).find('input[type="checkbox"]').prop('checked', checked);
            });
        }

        function uncheckSelectAll(chck, mainId) {
            if (!chck.checked) {
                const sel = document.getElementById(mainId);
                if (sel) sel.checked = false;
            }
        }

        /* ─────────────────────────────────────────
           Payment modal
        ───────────────────────────────────────── */
        $(document).on('click', '.payment-button', function () {
            RunPaidDeferralModal($(this).data('id_invoice'));
        });

        function RunPaidDeferralModal(id_invoice) {
            document.getElementById('id_invoice').value = id_invoice;
            payment_modal.show();
        }

        function ChangeInvoiceStatus() {
            const paymentDateEl = document.getElementById('payment_date');
            const idInvoiceEl   = document.getElementById('id_invoice');

            if (!paymentDateEl.value) { alert('{{ translations.select_date }}'); return; }

            const date = new Date(paymentDateEl.value);
            if (!(date instanceof Date) || isNaN(date)) { alert('{{ translations.invalid_date }}'); return; }

            const id_invoice = parseInt(idInvoiceEl.value, 10);

            api(`/ajax/invoices/${id_invoice}`, {
                method: 'PATCH',
                data: { id: id_invoice, date_of_payment: paymentDateEl.value }
            })
            .then(function (res) {
                showSnack(res.ok);
                document.body.focus();
                payment_modal.hide();

                if (res.ok) {
                    /* 1. Zaktualizuj lokalny cache */
                    const inv = window._allInvoices.find(i => i.id === id_invoice);
                    if (inv) inv.was_paid = 1;

                    /* 2. Przelicz statystyki */
                    updateStats(window._allInvoices);

                    /* 3. Jeśli aktywny filtr kafelka wpływa na widoczność — przerenderuj całą tabelę */
                    if (window._statCardFilter === 'unpaid' || window._statCardFilter === 'paid') {
                        renderTable(window._allInvoices);
                        return;
                    }

                    /* 4. Brak re-renderu — zaktualizuj wiersz w miejscu */
                    const payBtn = document.querySelector(`.payment-button[data-id_invoice="${id_invoice}"]`);
                    if (payBtn) {
                        payBtn.outerHTML = `<button class="btn btn-outline-secondary btn-action btn-sm" disabled title="{{ translations.paid }}"><i class="icon dripicons-checkmark"></i></button>`;
                    }

                    const checkboxes = document.querySelectorAll(`input[type="checkbox"][value="${id_invoice}"]`);
                    for (const cb of checkboxes) {
                        const row = cb.closest('tr');
                        if (!row) continue;
                        row.classList.remove('bg-light-danger');
                        const unpaidBadge = row.querySelector('.inv-badge-unpaid');
                        if (unpaidBadge) {
                            unpaidBadge.className = 'inv-badge inv-badge-paid';
                            unpaidBadge.textContent = '{{ translations.paid }}';
                        }
                    }
                }
            })
            .catch();
        }

        payment_modal._element.addEventListener('hidden.bs.modal', () => document.activeElement.blur());

        /* ─────────────────────────────────────────
           Issued documents modal
        ───────────────────────────────────────── */
        $(document).on('click', '.issued-documents-button', function () {
            RunIssuedDocumentsModal($(this).data('id_invoice'));
        });

        function RunIssuedDocumentsModal(idInvoice) {
            api(`/ajax/invoices/${idInvoice}/issued-documents`)
                .then(function (res) {
                    const tbody   = document.getElementById('id_issued_documents_tbody');
                    tbody.innerHTML = '';
                    const invoice = res.data;

                    addIssuedDocumentRow(tbody, {
                        type:    '{{ translations.invoice }}',
                        number:  invoice.invoice_number,
                        date:    invoice.invoiced_date,
                        total:   invoice.total_gross,
                        pdfUrl:  `/ajax/invoices/${invoice.id}/pdf`,
                        pdfName: `invoice_${invoice.invoice_number}`,
                        peppol:  invoice.was_sent_peppol,
                        peppolFn: `SendInvoiceByPeppol(${invoice.id}, this)`,
                        editFn:  `openEditInvoiceClientDataModal(${invoice.id}, 'invoice')`
                    });

                    for (const c of invoice.corrections) {
                        addIssuedDocumentRow(tbody, {
                            type:    '{{ translations.correction }}',
                            number:  c.correction_number,
                            date:    c.invoiced_date,
                            total:   c.total_gross,
                            pdfUrl:  `/ajax/corrections/${c.id}/pdf`,
                            pdfName: `correction_${c.correction_number}`,
                            peppol:  c.was_sent_peppol,
                            peppolFn: `SendCorrectionByPeppol(${c.id}, this)`,
                            editFn:  `openEditInvoiceClientDataModal(${c.id}, 'correction')`
                        });
                    }

                    issued_documents_modal.show();
                })
                .catch();
        }

        function addIssuedDocumentRow(tbody, d) {
            const row = tbody.insertRow(tbody.rows.length);
            row.insertCell(0).innerText  = d.type;
            row.insertCell(1).innerText  = d.number;
            row.insertCell(2).innerText  = d.date;
            row.insertCell(3).innerText  = d.total;
            row.insertCell(4).innerHTML  = `<button class="btn btn-info btn-sm" onclick="downloadPdf('${d.pdfUrl}', {}, '${d.pdfName}')">{{ translations.pdf }}</button>`;
            row.insertCell(5).innerHTML  = d.peppol === 1
                ? `<span class="badge bg-success">{{ translations.sent }}</span>`
                : `<button class="btn btn-outline-dark btn-sm" onclick="${d.peppolFn}">{{ translations.send_by_peppol }}</button>`;
            row.insertCell(6).innerHTML  = `<button class="btn btn-warning btn-sm" onclick="${d.editFn}">{{ translations.edit_client_data }}</button>`;
        }

        /* ─────────────────────────────────────────
           Email
        ───────────────────────────────────────── */
        function sendInvoiceByEmail(id_invoice, btn) {
            btn.disabled = true;
            btn.innerHTML = `<span class="spinner-border spinner-border-sm"></span>`;

            getJSON('Document', 'sendInvoiceByEmail', { id_invoice }, 'POST', { 'Content-Type': 'application/json' })
                .then(function (res) {
                    showSnack(res);
                    btn.disabled = false;
                    btn.innerHTML = `<i class="icon dripicons-mail"></i>`;
                    if (res) {
                        /* Zaktualizuj badge emaila w kolumnie klienta */
                        const inv = window._allInvoices.find(i => i.id === id_invoice);
                        const today = new Date().toISOString().split('T')[0];
                        if (inv) inv.date_last_emailed = today;
                        const row = btn.closest('tr');
                        if (row) {
                            const emailBadge = row.querySelector('.inv-badge-email');
                            if (emailBadge) {
                                emailBadge.innerHTML = `<i class="icon dripicons-mail" style="font-size:.7rem"></i> ${today}`;
                            } else {
                                /* Dodaj badge jeśli go jeszcze nie było */
                                const badgesWrap = row.querySelector('.d-flex.flex-wrap');
                                if (badgesWrap) {
                                    const span = document.createElement('span');
                                    span.className = 'inv-badge inv-badge-email';
                                    span.title = '{{ translations.date_of_email_sending_short }}';
                                    span.innerHTML = `<i class="icon dripicons-mail" style="font-size:.7rem"></i> ${today}`;
                                    badgesWrap.appendChild(span);
                                }
                            }
                        }
                    }
                })
                .catch();
        }

        /* ─────────────────────────────────────────
           Peppol
        ───────────────────────────────────────── */
        function SendInvoiceByPeppol(id, btn) {
            btn.disabled = true;
            btn.innerHTML = `<span class="spinner-border spinner-border-sm"></span>`;

            api(`/ajax/invoices/${id}/send-by-peppol`, { method: 'POST', data: { id_invoice: id } })
                .then(function (res) {
                    showSnack(res.success);
                    if (res.success) {
                        /* Zaktualizuj przycisk w modalu */
                        btn.parentNode.innerHTML = `<span class="badge bg-success">{{ translations.sent }}</span>`;

                        /* 1. Zaktualizuj cache */
                        const inv = window._allInvoices.find(i => i.id === id);
                        if (inv) inv.was_sent_peppol = 1;

                        /* 2. Zaktualizuj statystyki */
                        updateStats(window._allInvoices);

                        /* 3. Re-render jeśli filtr kafelka dotyczy peppol */
                        if (window._statCardFilter === 'peppol' || window._statCardFilter === 'no-peppol') {
                            renderTable(window._allInvoices);
                            return;
                        }

                        /* 4. Aktualizuj badge peppol w wierszu tabeli bez re-renderu */
                        const row = document.querySelector(`input[type="checkbox"][value="${id}"]`)?.closest('tr');
                        if (row) {
                            const noBadge = row.querySelector('.inv-badge-peppol-no');
                            if (noBadge) {
                                noBadge.className = 'inv-badge inv-badge-peppol-ok';
                                noBadge.textContent = 'Peppol';
                            }
                        }
                    } else {
                        btn.disabled = false;
                        btn.innerHTML = '{{ translations.send_by_peppol }}';
                    }
                })
                .catch();
        }

        function SendCorrectionByPeppol(id, btn) {
            btn.disabled = true;
            btn.innerHTML = `<span class="spinner-border spinner-border-sm"></span>`;

            api(`/ajax/corrections/${id}/send-by-peppol`, { method: 'POST', data: { id_invoice: id } })
                .then(function (res) {
                    showSnack(res.success);
                    if (res.success) {
                        btn.parentNode.innerHTML = `<span class="badge bg-success">{{ translations.sent }}</span>`;
                    } else {
                        btn.disabled = false;
                        btn.innerHTML = '{{ translations.send_by_peppol }}';
                    }
                })
                .catch();
        }

        /* ─────────────────────────────────────────
           Edit client data modal
        ───────────────────────────────────────── */
        function openEditInvoiceClientDataModal(documentId, documentType) {
            document.getElementById('edit_invoice_id').value    = documentId;
            document.getElementById('edit_document_type').value = documentType;

            const endpoint = documentType === 'invoice'
                ? `/ajax/invoices/${documentId}`
                : `/ajax/corrections/${documentId}`;

            api(endpoint)
                .then(function (res) {
                    if (!res?.data) { showSnack(false, '{{ translations.not_found }}'); return; }
                    const data = res.data;
                    document.getElementById('edit_invoice_number_display').textContent =
                        documentType === 'invoice' ? (data.invoice_number ?? '') : (data.correction_number ?? '');
                    document.getElementById('edit_consignee_name').value        = data.consignee_name ?? '';
                    document.getElementById('edit_consignee_address_1').value   = data.consignee_address_1 ?? '';
                    document.getElementById('edit_consignee_address_2').value   = data.consignee_address_2 ?? '';
                    document.getElementById('edit_consignee_tax_number').value  = data.consignee_tax_number ?? '';
                    edit_invoice_client_data_modal.show();
                })
                .catch(err => {
                    console.error(err);
                    showSnack(false, '{{ translations.error_loading_data }}');
                });
        }

        function searchViesByTaxNumber() {
            const taxInput  = document.getElementById('edit_consignee_tax_number');
            const btn       = document.getElementById('vies_search_btn');
            const icon      = document.getElementById('vies_search_icon');
            const spinner   = document.getElementById('vies_spinner');
            const statusMsg = document.getElementById('vies_status_msg');
            const taxNumber = taxInput.value.trim();

            if (!taxNumber) {
                statusMsg.textContent = '{{ translations.enter_tax_number|default("Podaj numer NIP") }}';
                statusMsg.className   = 'text-warning small d-block';
                return;
            }

            btn.disabled        = true;
            icon.classList.add('d-none');
            spinner.classList.remove('d-none');
            statusMsg.textContent = '';

            getJSON('Client', 'getClientByVatId/' + taxNumber, {}, 'GET', { 'Content-Type': 'application/json' })
                .then(function (res) {
                    if (res) {
                        document.getElementById('edit_consignee_name').value      = res.company_name    ?? '';
                        document.getElementById('edit_consignee_address_1').value = res.street && res.street_number
                            ? `${res.street} ${res.street_number}`.trim()
                            : (res.street ?? '');
                        document.getElementById('edit_consignee_address_2').value = res.city && res.zip
                            ? `${res.zip} ${res.city}`.trim()
                            : (res.city ?? '');
                        statusMsg.textContent = '{{ translations.data_loaded|default("Dane pobrane z VIES") }}';
                        statusMsg.className   = 'text-success small d-block';
                    } else {
                        statusMsg.textContent = '{{ translations.data_not_found|default("Nie znaleziono danych w VIES") }}';
                        statusMsg.className   = 'text-danger small d-block';
                    }
                })
                .catch(function () {
                    statusMsg.textContent = '{{ translations.error|default("Błąd połączenia z VIES") }}';
                    statusMsg.className   = 'text-danger small d-block';
                })
                .finally(function () {
                    btn.disabled = false;
                    icon.classList.remove('d-none');
                    spinner.classList.add('d-none');
                });
        }

        function saveInvoiceClientData() {
            const documentId   = document.getElementById('edit_invoice_id').value;
            const documentType = document.getElementById('edit_document_type').value;

            const endpoint = documentType === 'invoice'
                ? `/ajax/invoices/${documentId}`
                : `/ajax/corrections/${documentId}`;

            api(endpoint, {
                method: 'PATCH',
                data: {
                    consignee_name:       document.getElementById('edit_consignee_name').value,
                    consignee_address_1:  document.getElementById('edit_consignee_address_1').value,
                    consignee_address_2:  document.getElementById('edit_consignee_address_2').value,
                    consignee_tax_number: document.getElementById('edit_consignee_tax_number').value,
                }
            })
            .then(function (res) {
                showSnack(res.ok || res.success);
                if (res.ok || res.success) edit_invoice_client_data_modal.hide();
            })
            .catch(err => {
                console.error(err);
                showSnack(false, '{{ translations.error_saving_data }}');
            });
        }

        /* ─────────────────────────────────────────
           Date column filter (DataTables search)
        ───────────────────────────────────────── */
        function filterTable(select, tbody_id, colIndex, exact) {
            const val = select.value === '-1' ? '' : select.value;
            if (exact) {
                window.dataTableB2B.column(colIndex).search(val ? `^${val}$` : '', true, false).draw();
            } else {
                window.dataTableB2B.column(colIndex).search(val).draw();
            }
        }

        /* ─────────────────────────────────────────
           Grouped PDF download
        ───────────────────────────────────────── */
        function getCheckedIdInvoices() {
            const data = window.dataTableB2B
                .rows((idx, data, node) => $(node).find('input[type="checkbox"]').prop('checked'))
                .data().toArray();

            return data.map(row => {
                const el = document.createElement('div');
                el.innerHTML = row[0];
                return el.querySelector('input')?.value ?? null;
            }).filter(Boolean);
        }

        function GetGroupedInvoices(tbody_id, btn) {
            const ids = getCheckedIdInvoices();
            btn.disabled = true;
            btn.innerHTML = `<span class="spinner-border spinner-border-sm me-1"></span>{{ translations.loading }}`;

            getPDF('Document', 'getGroupedInvoices', ids, 'POST', { 'Content-Type': 'application/json' })
                .then(blob => {
                    const url  = window.URL.createObjectURL(blob);
                    const link = document.createElement('a');
                    link.href  = url;
                    link.setAttribute('download', 'invoices.zip');
                    document.body.appendChild(link);
                    link.click();
                    link.parentNode.removeChild(link);
                })
                .catch(err => console.error(err))
                .finally(() => {
                    btn.disabled = false;
                    btn.innerHTML = `<i class="icon dripicons-download me-1"></i>{{ translations.get_grouped_invoices }}`;
                });
        }
        /* ─────────────────────────────────────────
           Transactions (receipts) modal
        ───────────────────────────────────────── */
        const invoice_transactions_modal = new bootstrap.Modal(document.getElementById('invoice_transactions_modal'));
        const transaction_remark_modal   = new bootstrap.Modal(document.getElementById('transaction_remark_modal'));

        $(document).on('click', '.invoice-receipts-button', function () {
            const idInvoice = $(this).data('id_invoice');
            openTransactionsModal(idInvoice);
        });

        function openTransactionsModal(idInvoice) {
            const tbody    = document.getElementById('transactions_tbody');
            const loading  = document.getElementById('transactions_loading');
            const subtitle = document.getElementById('transactions_modal_subtitle');

            tbody.innerHTML = '';
            subtitle.textContent = '';
            loading.style.display = 'block';
            invoice_transactions_modal.show();

            api(`/ajax/invoices/${idInvoice}/transactions`)
                .then(function (res) {
                    loading.style.display = 'none';
                    const list = res.data ?? res ?? [];

                    if (!list.length) {
                        tbody.innerHTML = `<tr><td colspan="5" class="text-center text-muted py-3">{{ translations.no_data_found|default('Brak danych') }}</td></tr>`;
                        return;
                    }

                    subtitle.textContent = `— ${list.length} {{ translations.entries|default('pozycji') }}`;

                    list.forEach(tx => {
                        const remark = tx.remark ?? '';
                        const row = document.createElement('tr');
                        row.dataset.transactionId = tx.id;
                        row.innerHTML = `
                            <td><span class="font-monospace" style="font-size:.82rem">${tx.ticket_key}</span></td>
                            <td style="font-size:.82rem">${tx.insert_timestamp ?? '—'}</td>
                            <td><strong>${parseFloat(tx.total_gross_amount_after_discount ?? 0).toFixed(2)} €</strong></td>
                            <td>
                                <span class="transaction-remark-text text-muted small"
                                      data-transaction-id="${tx.id}">${escapeHtml(remark)}</span>
                            </td>
                            <td class="text-end">
                                <button class="btn btn-link btn-sm p-0 text-secondary remark-edit-btn"
                                        data-transaction-id="${tx.id}"
                                        data-ticket-key="${tx.ticket_key}"
                                        title="{{ translations.remark|default('Edytuj uwagę') }}">
                                    <i class="icon dripicons-document-edit"></i>
                                </button>
                            </td>`;
                        tbody.appendChild(row);
                    });
                })
                .catch(err => {
                    loading.style.display = 'none';
                    tbody.innerHTML = `<tr><td colspan="5" class="text-center text-danger py-3">{{ translations.error|default('Błąd ładowania danych') }}</td></tr>`;
                    console.error(err);
                });
        }

        /* Kliknięcie przycisku edycji uwagi — odczyt aktualnej wartości z wiersza (bez fetch) */
        document.addEventListener('click', function (e) {
            const btn = e.target.closest('.remark-edit-btn');
            if (!btn) return;

            const id        = btn.dataset.transactionId;
            const ticketKey = btn.dataset.ticketKey ?? '';
            const span      = document.querySelector(`.transaction-remark-text[data-transaction-id="${id}"]`);
            const current   = span ? span.textContent : '';

            document.getElementById('remark_transaction_id').value       = id;
            document.getElementById('remark_ticket_key_display').textContent = ticketKey ? ` — ${ticketKey}` : '';
            document.getElementById('transaction_remark').value           = current;
            transaction_remark_modal.show();
        });

        async function saveTransactionRemark() {
            const id     = document.getElementById('remark_transaction_id').value;
            const remark = document.getElementById('transaction_remark').value;

            const result = await api(`/ajax/transactions/${id}`, {
                method: 'PATCH',
                data: { id, remark }
            });

            if (!result.ok) {
                showSnack(false, result.description ?? '{{ translations.error|default("Błąd zapisu") }}');
                return;
            }

            /* Aktualizuj span w tabeli bez przeładowania */
            const span = document.querySelector(`.transaction-remark-text[data-transaction-id="${id}"]`);
            if (span) span.textContent = remark;

            transaction_remark_modal.hide();
            showSnack(true);
        }

        function escapeHtml(str) {
            if (!str) return '';
            return String(str)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        /* ─────────────────────────────────────────
           Payment Reminders modal
        ───────────────────────────────────────── */
        const payment_reminders_modal = new bootstrap.Modal(document.getElementById('payment_reminders_modal'));

        /**
         * Otwiera modal przypomnień.
         * @param {number|null} idClient  – id klienta (preselect); null = brak preselect
         * @param {number|null} idInvoice – id faktury do pre-zaznaczenia (opcjonalne)
         */
        function openReminderModal(idClient, idInvoice) {
            /* Resetuj stan modalu */
            const sel = document.getElementById('reminder_client_select');
            sel.innerHTML = '<option value="-1">{{ translations.select }}</option>';
            document.getElementById('reminder_invoices_tbody').innerHTML = '';
            document.getElementById('reminder_invoices_wrap').classList.add('d-none');
            document.getElementById('reminder_no_unpaid').classList.add('d-none');
            document.getElementById('reminder_loading').classList.add('d-none');
            document.getElementById('reminder_selectAll').checked = false;
            updateReminderSelectedInfo();

            payment_reminders_modal.show();

            /* Załaduj klientów z nieopłaconymi fakturami */
            loadReminderClients(idClient, idInvoice);
        }

        function loadReminderClients(preselectClientId, preselectInvoiceId) {
            const sel     = document.getElementById('reminder_client_select');
            const loading = document.getElementById('reminder_clients_loading');
            const badge   = document.getElementById('reminder_unpaid_clients_badge');

            loading.classList.remove('d-none');
            badge.style.display = 'none';

            api('/ajax/clients/unpaid')
                .then(function (res) {
                    loading.classList.add('d-none');
                    const clients = res.data ?? [];

                    /* Wyczyść select */
                    sel.innerHTML = '<option value="-1">{{ translations.select }}</option>';

                    if (!clients.length) {
                        const opt = document.createElement('option');
                        opt.value    = '-1';
                        opt.disabled = true;
                        opt.textContent = '{{ translations.no_unpaid_invoices|default("Brak klientów z nieopłaconymi fakturami") }}';
                        sel.appendChild(opt);
                        return;
                    }

                    /* Sortuj malejąco po liczbie nieopłaconych */
                    const sorted = [...clients].sort((a, b) => b.unpaid_count - a.unpaid_count);

                    /* Grupuj: "Dużo nieopłaconych" (>1) i "Jedna nieopłacona" */
                    const many = sorted.filter(c => c.unpaid_count > 1);
                    const one  = sorted.filter(c => c.unpaid_count === 1);

                    function addOptgroup(label, list) {
                        if (!list.length) return;
                        const group = document.createElement('optgroup');
                        group.label = label;
                        list.forEach(function (c) {
                            const opt = document.createElement('option');
                            opt.value = c.id;
                            opt.textContent = `${c.company_name}  (${c.unpaid_count})`;
                            group.appendChild(opt);
                        });
                        sel.appendChild(group);
                    }

                    addOptgroup('{{ translations.multiple_unpaid|default("Wiele nieopłaconych") }}', many);
                    addOptgroup('{{ translations.one_unpaid|default("Jedna nieopłacona") }}', one);

                    /* Badge z łączną liczbą klientów */
                    const totalUnpaid = clients.reduce((sum, c) => sum + c.unpaid_count, 0);
                    badge.textContent = totalUnpaid;
                    badge.style.display = '';

                    /* Preselect jeśli podano id */
                    if (preselectClientId) {
                        sel.value = String(preselectClientId);
                        loadReminderUnpaidInvoices(preselectClientId, preselectInvoiceId);
                    }
                })
                .catch(function () {
                    loading.classList.add('d-none');
                    sel.innerHTML = `<option value="-1" disabled>{{ translations.error|default('Błąd ładowania danych') }}</option>`;
                });
        }

        function loadReminderUnpaidInvoices(clientId, preselectInvoiceId) {
            if (!clientId || clientId === '-1') {
                document.getElementById('reminder_invoices_wrap').classList.add('d-none');
                document.getElementById('reminder_no_unpaid').classList.add('d-none');
                return;
            }

            const loading = document.getElementById('reminder_loading');
            const wrap    = document.getElementById('reminder_invoices_wrap');
            const tbody   = document.getElementById('reminder_invoices_tbody');
            const noUnpaid = document.getElementById('reminder_no_unpaid');

            loading.classList.remove('d-none');
            wrap.classList.add('d-none');
            noUnpaid.classList.add('d-none');
            tbody.innerHTML = '';
            document.getElementById('reminder_selectAll').checked = false;
            updateReminderSelectedInfo();

            api(`/ajax/clients/${clientId}/invoices`)
                .then(function (res) {
                    loading.classList.add('d-none');

                    const unpaidList = (res.data ?? []).filter(inv => inv.was_paid === 0);

                    if (!unpaidList.length) {
                        wrap.classList.remove('d-none');
                        noUnpaid.classList.remove('d-none');
                        return;
                    }

                    wrap.classList.remove('d-none');
                    noUnpaid.classList.add('d-none');

                    unpaidList.forEach(function (inv) {
                        const deferralIcon = inv.deferral_invoice === 1
                            ? `<i class="icon dripicons-time-reverse text-muted" title="{{ translations.deferral_invoice|default('Faktura odroczeniowa') }}"></i>`
                            : '';
                        const isPreselected = preselectInvoiceId && inv.id === preselectInvoiceId;
                        const checked = isPreselected ? 'checked' : '';

                        const dueDateCell = inv.due_date
                            ? `<span class="${isOverdue(inv.due_date) ? 'text-danger fw-semibold' : ''}">${inv.due_date}</span>`
                            : '<span class="text-muted">—</span>';

                        const row = document.createElement('tr');
                        row.id = `reminder_row_${inv.id}`;
                        if (isPreselected) row.classList.add('table-warning');

                        row.innerHTML = `
                            <td><input type="checkbox" class="form-check reminder-checkbox" value="${inv.id}"
                                       onchange="updateReminderSelectedInfo()" ${checked}></td>
                            <td>${deferralIcon}</td>
                            <td><span class="fw-semibold" style="font-size:.85rem">${inv.invoice_number}</span></td>
                            <td style="font-size:.82rem">${inv.invoiced_date ? inv.invoiced_date.split(' ')[0] : '—'}</td>
                            <td style="font-size:.82rem">${dueDateCell}</td>
                            <td><strong>${inv.invoice_value_after_corrections ?? inv.invoice_value} €</strong></td>`;
                        tbody.appendChild(row);
                    });

                    updateReminderSelectedInfo();
                })
                .catch(function () {
                    loading.classList.add('d-none');
                    wrap.classList.remove('d-none');
                    tbody.innerHTML = `<tr><td colspan="6" class="text-center text-danger py-3">{{ translations.error|default('Błąd ładowania danych') }}</td></tr>`;
                });
        }

        function isOverdue(dueDateStr) {
            if (!dueDateStr) return false;
            return new Date(dueDateStr) < new Date();
        }

        function toggleReminderSelectAll() {
            const masterCb = document.getElementById('reminder_selectAll');
            const checkboxes = document.querySelectorAll('.reminder-checkbox');
            const anyUnchecked = Array.from(checkboxes).some(cb => !cb.checked);
            masterCb.checked = anyUnchecked;
            checkboxes.forEach(cb => cb.checked = anyUnchecked);
            updateReminderSelectedInfo();
        }

        function getCheckedReminderIds() {
            return Array.from(document.querySelectorAll('.reminder-checkbox:checked'))
                .map(cb => parseInt(cb.value, 10))
                .filter(v => !isNaN(v));
        }

        function updateReminderSelectedInfo() {
            const ids = getCheckedReminderIds();
            const info = document.getElementById('reminder_selected_info');
            if (!info) return;
            if (ids.length === 0) {
                info.textContent = '{{ translations.select_invoices|default("Zaznacz faktury, aby wysłać przypomnienie.") }}';
            } else {
                info.textContent = `{{ translations.selected|default("Zaznaczono") }}: ${ids.length}`;
            }

            /* Synchronizuj master checkbox */
            const all = document.querySelectorAll('.reminder-checkbox');
            const masterCb = document.getElementById('reminder_selectAll');
            if (masterCb) {
                masterCb.checked = all.length > 0 && ids.length === all.length;
                masterCb.indeterminate = ids.length > 0 && ids.length < all.length;
            }
        }

        function SendSoftReminder() {
            const ids = getCheckedReminderIds();
            const idClient = document.getElementById('reminder_client_select').value;
            const btn = document.getElementById('btn_soft_reminder');

            if (!ids.length) {
                showSnack(false, '{{ translations.select_invoices|default("Zaznacz faktury") }}');
                return;
            }
            if (!idClient || idClient === '-1') {
                showSnack(false, '{{ translations.select_client|default("Wybierz klienta") }}');
                return;
            }

            const origHtml = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = `<span class="spinner-border spinner-border-sm me-1"></span>{{ translations.sending|default("Wysyłanie...") }}`;

            api(`/ajax/client/${idClient}/invoices/reminders/soft`, {
                method: 'POST',
                data: { id_client: idClient, invoice_ids: ids }
            })
            .then(function (res) {
                showSnack(res.success ?? res.ok ?? false);
                if (res.success || res.ok) {
                    payment_reminders_modal.hide();
                }
            })
            .catch(function () {
                showSnack(false);
            })
            .finally(function () {
                btn.disabled = false;
                btn.innerHTML = origHtml;
            });
        }

        function SendHardReminder() {
            const ids = getCheckedReminderIds();
            const idClient = document.getElementById('reminder_client_select').value;
            const btn = document.getElementById('btn_hard_reminder');

            if (!ids.length) {
                showSnack(false, '{{ translations.select_invoices|default("Zaznacz faktury") }}');
                return;
            }
            if (!idClient || idClient === '-1') {
                showSnack(false, '{{ translations.select_client|default("Wybierz klienta") }}');
                return;
            }

            const origHtml = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = `<span class="spinner-border spinner-border-sm me-1"></span>{{ translations.sending|default("Wysyłanie...") }}`;

            api(`/ajax/client/${idClient}/invoices/reminders/hard`, {
                method: 'POST',
                data: { id_client: idClient, invoice_ids: ids }
            })
            .then(function (res) {
                showSnack(res.success ?? res.ok ?? false);
                if (res.success || res.ok) {
                    payment_reminders_modal.hide();
                }
            })
            .catch(function () {
                showSnack(false);
            })
            .finally(function () {
                btn.disabled = false;
                btn.innerHTML = origHtml;
            });
        }

    </script>
{% endblock %}