@extends('layouts.app')

@section('content')
<div class="brafa-screen lock-statistics-page">
    @php
        $formatIsk = fn($amount) => number_format((float) $amount, 0, ',', '.') . ' ISK';
        // Closed dkPlus customer periods (company moves) as JSON for the settings dialog.
        $periodsJson = fn($pid) => json_encode(
            ($customerPeriodsMap[trim((string) $pid)] ?? collect())
                ->map(fn($p) => ['id' => $p->id, 'customer_id' => (string) $p->dkplus_customer_id, 'customer_name' => (string) ($p->dkplus_customer_name ?? ''), 'from_month' => $p->from_month, 'to_month' => $p->to_month])
                ->values()->all()
        );

        $totalPendingAcrossMonths = collect($billing['month_groups'])->reduce(function ($carry, $mg) use ($invoiceMap, $propertyEmailMap) {
            return $carry + collect($mg['api_groups'])->flatMap(fn($ag) => collect($ag['rows']))->filter(function ($r) use ($invoiceMap, $propertyEmailMap) {
                $hasCustomer = !empty($propertyEmailMap[(string) $r['property_id']]?->dkplus_customer_id);
                $hasInvoice  = !empty($invoiceMap[(string) $r['property_id'] . '|' . $r['month']]?->dkplus_invoice_id);
                return $hasCustomer && !$hasInvoice;
            })->count();
        }, 0);

        // Out of billing: never active, superseded, or deactivated (inactive-from reached).
        $outOfBilling = function ($pid) use ($propertySettingsMap, $currentMonth) {
            $s = $propertySettingsMap[trim((string) $pid)] ?? null;
            return $s && (!empty($s->billing_disabled) || !empty($s->superseded_by) || (!empty($s->inactive_from) && $s->inactive_from <= $currentMonth));
        };
        $billedPropertyIdsAll = collect($billing['rows'] ?? [])->pluck('property_id')->map(fn($id) => trim((string) $id))->unique();

        $unlinkedProperties = collect($billing['rows'] ?? [])->unique('property_id')->filter(function ($row) use ($propertyEmailMap, $outOfBilling) {
            return empty($propertyEmailMap[(string) $row['property_id']]?->dkplus_customer_id) && !$outOfBilling($row['property_id']);
        })->values();
    @endphp

    {{-- Flash messages rendered as toasts (see container at bottom of page) --}}

    {{-- ══════════════════ COMPACT HEADER ════════════════════════════════════ --}}
    <div class="d-flex flex-wrap align-items-center gap-2 mb-3 page-compact-header">
        <div class="me-auto">
            <h5 class="mb-0">Lock billing</h5>
            <span class="text-xs text-muted">
                Invoicing happens on <strong>By property</strong>. By month is a read-only overview.
                <i class="material-icons text-xs align-middle" style="cursor:help"
                   data-bs-toggle="tooltip"
                   title="Standard APIs: 500 ISK per active lock/month. Golf simulators (golf_simulator, golfbókanir) and Entrify: 4,900 ISK flat per property/month. Billing is in arrears — the current month is invoiced once it is over.">info</i>
            </span>
        </div>
        <a href="{{ route('locks-by-month.analytics', request()->query()) }}" class="btn btn-outline-dark btn-sm mb-0">
            <i class="material-icons text-sm me-1 align-middle">bar_chart</i>Analytics &amp; exports
        </a>
    </div>

    @include('superadmin.lock-statistics.partials.filters', ['pageRoute' => 'locks-by-month'])

    {{-- ══════════════════ MAIN TABS ══════════════════════════════════════════ --}}
    <ul class="nav nav-pills nav-fill mb-4 p-1 rounded shadow-sm border bg-white" id="mainPageTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active fw-semibold" id="tab-by-property-btn"
                    data-bs-toggle="pill" data-bs-target="#tab-by-property"
                    type="button" role="tab" aria-selected="true">
                <i class="material-icons text-sm align-middle me-1">apartment</i>
                By property
                @php $totalUnbilledProps = $byProperty->where('unbilled_count', '>', 0)->count(); @endphp
                @if($totalUnbilledProps > 0)
                    <span class="badge bg-gradient-warning text-dark ms-1">{{ $totalUnbilledProps }}</span>
                @endif
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link fw-semibold" id="tab-billing-btn"
                    data-bs-toggle="pill" data-bs-target="#tab-billing"
                    type="button" role="tab" aria-selected="false">
                <i class="material-icons text-sm align-middle me-1">calendar_month</i>
                By month
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link fw-semibold" id="tab-customers-btn"
                    data-bs-toggle="pill" data-bs-target="#tab-customers"
                    type="button" role="tab" aria-selected="false">
                <i class="material-icons text-sm align-middle me-1">contacts</i>
                Customers
                @php
                    // Same set as the Customers toolbar's "missing": linked = no, and the property actually bills.
                    $missingCustomerCount = $properties
                        ->reject(fn($p) => !empty($propertyEmailMap[(string) $p->PropertyID]?->dkplus_customer_id))
                        ->reject(fn($p) => $outOfBilling($p->PropertyID) || !$billedPropertyIdsAll->contains(trim((string) $p->PropertyID)))
                        ->count();
                @endphp
                @if($missingCustomerCount > 0)
                    <span class="badge bg-gradient-warning text-dark ms-1">{{ $missingCustomerCount }}</span>
                @endif
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link fw-semibold" id="tab-reconcile-btn"
                    data-bs-toggle="pill" data-bs-target="#tab-reconcile"
                    type="button" role="tab" aria-selected="false">
                <i class="material-icons text-sm align-middle me-1">call_merge</i>
                Reconcile
                @php $openClusterCount = $reconciliation->where('status', 'open')->count(); @endphp
                @if($openClusterCount > 0)
                    <span class="badge bg-gradient-danger ms-1">{{ $openClusterCount }}</span>
                @endif
            </button>
        </li>
        @if(auth()->id() === 4)
        {{-- Commissions tab is owner-only (Sturla, user_id 4) --}}
        <li class="nav-item" role="presentation">
            <button class="nav-link fw-semibold" id="tab-commissions-btn"
                    data-bs-toggle="pill" data-bs-target="#tab-commissions"
                    type="button" role="tab" aria-selected="false">
                <i class="material-icons text-sm align-middle me-1">account_balance_wallet</i>
                Commissions
            </button>
        </li>
        @endif
    </ul>

    <script>
        // Apply the remembered tab BEFORE first paint, so a reload after an action on
        // e.g. the Reconcile tab does not flash "By property" and jump back.
        (() => {
            try {
                const saved = localStorage.getItem('brafa_active_tab');
                if (!saved || saved === '#tab-by-property' || !/^#[\w-]+$/.test(saved)) return;
                if (!document.querySelector(`#mainPageTabs button[data-bs-target="${saved}"]`)) return;
                document.querySelectorAll('#mainPageTabs button[data-bs-toggle="pill"]').forEach(b => {
                    const on = b.dataset.bsTarget === saved;
                    b.classList.toggle('active', on);
                    b.setAttribute('aria-selected', on ? 'true' : 'false');
                });
                const st = document.createElement('style');
                st.id = 'brafa-initial-tab-style';
                st.textContent = `#mainTabsContent > .tab-pane { display: none !important; } #mainTabsContent > ${saved} { display: block !important; opacity: 1 !important; }`;
                document.head.appendChild(st);
            } catch {}
        })();
    </script>

    <div class="tab-content" id="mainTabsContent">

        {{-- ─────────────────────── BY MONTH TAB (read-only overview) ────────── --}}
        <div class="tab-pane fade" id="tab-billing" role="tabpanel">

            {{-- Unlinked properties callout --}}
            @if($unlinkedProperties->count() > 0)
                <div class="alert border-0 shadow-sm mb-4 d-flex align-items-start gap-3" style="background:#fff3cd;border-left:4px solid #ffc107 !important" role="alert">
                    <i class="material-icons mt-1" style="font-size:22px;flex-shrink:0;color:#856404">link_off</i>
                    <div>
                        <strong style="color:#664d03">{{ $unlinkedProperties->count() }} {{ $unlinkedProperties->count() === 1 ? 'property has' : 'properties have' }} no dkPlus customer linked</strong>
                        <span class="text-sm ms-1" style="color:#856404">— invoices cannot be created until linked.</span>
                        <div class="d-flex flex-wrap gap-1 mt-2">
                            @foreach($unlinkedProperties as $up)
                                <span class="badge bg-gradient-secondary">{{ $up['property_name'] }}</span>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif

            {{-- Monthly Billing card --}}
            <div class="card shadow-sm border">
                <div class="card-header pb-0">
                    @php
                        $monthOptions = collect($billing['month_groups'])->map(fn($mg) => [
                            'value' => 'billing_month_' . str_replace('-', '_', $mg['month']),
                            'label' => $mg['month'],
                        ]);
                    @endphp
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div>
                            <h6 class="mb-0">Billing by month</h6>
                            <p class="text-sm text-muted mb-0">Read-only overview of charges and invoice status per month. Create, sync and email invoices on the <strong>By property</strong> tab.</p>
                        </div>
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            @if($monthOptions->count() > 1)
                                <select id="billing-month-jump" class="form-select form-select-sm" style="width:auto;min-width:150px" title="Jump to month">
                                    <option value="">Jump to month…</option>
                                    @foreach($monthOptions as $opt)
                                        <option value="{{ $opt['value'] }}">{{ $opt['label'] }}</option>
                                    @endforeach
                                </select>
                            @endif
                            @if($totalPendingAcrossMonths > 0)
                                <span class="badge bg-gradient-warning text-dark" title="{{ $totalPendingAcrossMonths }} properties have a customer linked but no invoice yet">
                                    {{ $totalPendingAcrossMonths }} pending
                                </span>
                            @endif
                            {{-- Defaults to ON (invoiced + skipped rows hidden); remembered in localStorage --}}
                            <div class="form-check form-switch d-inline-flex align-items-center mb-0"
                                 data-bs-toggle="tooltip" title="Hide rows that are already invoiced or skipped">
                                <input class="form-check-input" type="checkbox" id="billing-pending-toggle" checked>
                                <label class="form-check-label text-sm ms-2 mb-0" for="billing-pending-toggle">Pending only</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body pt-3">
                    <div class="accordion" id="billingMonthAccordion">
                        @forelse($billing['month_groups'] as $monthGroup)
                            @php
                                $collapseId = 'billing_month_' . str_replace('-', '_', $monthGroup['month']);
                                $headingId  = $collapseId . '_heading';
                                $allMonthRows = collect($monthGroup['api_groups'])->flatMap(fn($ag) => collect($ag['rows']));
                                $totalRows  = $allMonthRows->count();
                                $invoicedRows = $allMonthRows->filter(function ($r) use ($invoiceMap) {
                                    return !empty($invoiceMap[(string) $r['property_id'] . '|' . $r['month']]?->dkplus_invoice_id);
                                })->count();
                                $pendingInvoiceCount = $allMonthRows->filter(function ($r) use ($invoiceMap, $propertyEmailMap) {
                                    $hasCustomer = !empty($propertyEmailMap[(string) $r['property_id']]?->dkplus_customer_id);
                                    $hasInvoice  = !empty($invoiceMap[(string) $r['property_id'] . '|' . $r['month']]?->dkplus_invoice_id);
                                    return $hasCustomer && !$hasInvoice;
                                })->count();
                                $progressClass = ($totalRows > 0 && $invoicedRows === $totalRows)
                                    ? 'bg-gradient-success'
                                    : ($invoicedRows > 0 ? 'bg-gradient-warning' : 'bg-gradient-secondary');
                            @endphp
                            <div class="billing-month-item mb-3">
                                <div class="d-flex justify-content-between align-items-center px-3 py-3 flex-wrap gap-2 billing-month-header" id="{{ $headingId }}">
                                    <div class="d-flex align-items-center gap-2 flex-wrap">
                                        <button class="btn btn-link text-dark text-decoration-none fw-bold p-0 billing-toggle-btn"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#{{ $collapseId }}"
                                                aria-expanded="{{ $loop->first ? 'true' : 'false' }}"
                                                aria-controls="{{ $collapseId }}">
                                            <i class="material-icons text-sm align-middle billing-chevron">expand_more</i>
                                            {{ $monthGroup['month'] }}
                                        </button>
                                        <span class="badge bg-gradient-dark">{{ $formatIsk($monthGroup['month_total']) }}</span>
                                        @if($totalRows > 0)
                                            <span class="badge {{ $progressClass }}">{{ $invoicedRows }}/{{ $totalRows }} invoiced</span>
                                        @endif
                                    </div>
                                    <div class="d-flex gap-2 flex-wrap">
                                        @if($pendingInvoiceCount > 0)
                                            <span class="badge bg-gradient-warning text-dark" title="Properties with a customer linked but no invoice for this month">
                                                {{ $pendingInvoiceCount }} not invoiced
                                            </span>
                                        @endif
                                    </div>
                                </div>

                                <div id="{{ $collapseId }}" class="collapse {{ $loop->first ? 'show' : '' }}" aria-labelledby="{{ $headingId }}" data-bs-parent="#billingMonthAccordion">
                                    <div class="table-responsive">
                                        <table class="table align-items-center mb-0 billing-detail-table">
                                            <thead>
                                                <tr>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-3">Property</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">dkPlus Customer</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Locks</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Pricing</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Subtotal</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                        Invoice
                                                        <i class="material-icons ms-1 invoice-legend-icon"
                                                           style="font-size:13px;vertical-align:middle;cursor:help;opacity:.5"
                                                           data-bs-toggle="tooltip"
                                                           data-bs-html="true"
                                                           data-bs-placement="left"
                                                           title="<div class='text-start' style='min-width:160px'>
                                                               <div class='mb-1'><span class='badge bg-gradient-secondary'>—</span> Not created</div>
                                                               <div class='mb-1'><span class='badge bg-gradient-warning'>SUBMITTED</span> Sent to dkPlus</div>
                                                               <div class='mb-1'><span class='badge bg-gradient-info'>READY</span> Processed in dkPlus</div>
                                                               <div><span class='badge bg-gradient-success'>SENT / FINALIZED</span> Delivered</div>
                                                           </div>">help_outline</i>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($monthGroup['api_groups'] as $apiGroup)
                                                    @foreach($apiGroup['rows'] as $row)
                                                        @php
                                                            $propertyEmail = $propertyEmailMap[(string) $row['property_id']] ?? null;
                                                            $invoiceRecord = $invoiceMap[(string) $row['property_id'] . '|' . $row['month']] ?? null;
                                                            $invoiceStatus = strtolower((string) ($invoiceRecord?->status ?? ''));
                                                            $statusBadge   = match($invoiceStatus) {
                                                                'finalized', 'sent' => 'bg-gradient-success',
                                                                'ready'             => 'bg-gradient-info',
                                                                'submitted'         => 'bg-gradient-warning',
                                                                default             => 'bg-gradient-secondary',
                                                            };
                                                        @endphp
                                                        <tr data-billing-row
                                                            data-invoiced="{{ $invoiceRecord?->dkplus_invoice_id ? '1' : '0' }}"
                                                            data-skipped="{{ !empty($row['is_skipped']) ? '1' : '0' }}">
                                                            {{-- Property + API --}}
                                                            <td class="ps-3" style="min-width:180px">
                                                                <div class="fw-semibold text-dark text-sm">
                                                                    {{ $row['property_name'] }}
                                                                    @if(!empty($row['property_notes']))
                                                                        <i class="material-icons text-xs align-middle text-info ms-1" style="cursor:help"
                                                                           data-bs-toggle="tooltip" title="{{ $row['property_notes'] }}">sticky_note_2</i>
                                                                    @endif
                                                                </div>
                                                                <span class="badge bg-gradient-secondary mt-1">{{ $row['api'] }}</span>
                                                                @if(!empty($row['property_inactive_from']))
                                                                    <span class="badge bg-gradient-dark mt-1" data-bs-toggle="tooltip" title="No billing rows from this month on">Inactive from {{ $row['property_inactive_from'] }}</span>
                                                                @endif
                                                                @if(!empty($row['is_current_month']))
                                                                    <span class="badge bg-gradient-secondary mt-1" data-bs-toggle="tooltip" title="Running month — billed once it is over">current</span>
                                                                @endif
                                                            </td>

                                                            {{-- dkPlus customer (read-only here — edit on the Customers tab) --}}
                                                            <td style="min-width:160px">
                                                                @if($propertyEmail?->dkplus_customer_id)
                                                                    <div class="text-sm fw-semibold">{{ $propertyEmail->dkplus_customer_name ?: '—' }}</div>
                                                                    <div class="text-xs text-muted font-monospace">{{ $propertyEmail->dkplus_customer_id }}</div>
                                                                @else
                                                                    <span class="badge bg-gradient-warning text-dark" style="font-size:.65rem">No customer linked</span>
                                                                @endif
                                                            </td>

                                                            {{-- Locks --}}
                                                            <td>
                                                                <span class="badge bg-gradient-dark">{{ $row['billable_unique_lock_count'] }}</span>
                                                            </td>

                                                            {{-- Pricing --}}
                                                            <td style="min-width:160px">
                                                                <div class="text-sm">{{ $row['pricing_rule_label'] }}</div>
                                                                <div class="d-flex align-items-center gap-1 mt-1 flex-wrap">
                                                                    <span class="badge bg-gradient-info">{{ $row['pricing_badge'] }}</span>
                                                                    <span class="text-xs text-muted">{{ $formatIsk($row['unit_price']) }}/u</span>
                                                                </div>
                                                                <details class="mt-1" data-details-key="formula_{{ $row['property_id'] }}_{{ $row['month'] }}">
                                                                    <summary class="text-xs text-muted" style="cursor:pointer">Formula</summary>
                                                                    <div class="small text-muted mt-1" style="max-width:200px">
                                                                        {{ $row['calculation_formula'] }}<br>
                                                                        <span class="text-xs">Qty: {{ $row['input_quantity'] }} {{ $row['input_quantity_label'] }}</span>
                                                                    </div>
                                                                </details>
                                                            </td>

                                                            {{-- Subtotal --}}
                                                            <td class="fw-semibold">{{ $formatIsk($row['subtotal']) }}</td>

                                                            {{-- Invoice actions --}}
                                                            <td style="min-width:140px">
                                                                <div class="d-flex flex-column gap-1">
                                                                    @if($invoiceRecord?->dkplus_invoice_id)
                                                                        <span class="badge bg-gradient-success text-xs">ID: {{ $invoiceRecord->dkplus_invoice_id }}</span>
                                                                    @endif
                                                                    @if($invoiceStatus)
                                                                        <span class="badge {{ $statusBadge }} text-xs">{{ strtoupper($invoiceStatus) }}</span>
                                                                    @endif
                                                                    @if($invoiceRecord?->synced_at)
                                                                        <div class="text-xs text-muted">
                                                                            <i class="material-icons" style="font-size:11px;vertical-align:middle;opacity:.7">access_time</i>
                                                                            {{ $invoiceRecord->synced_at->diffForHumans() }}
                                                                        </div>
                                                                    @endif
                                                                    @if($invoiceRecord?->dkplus_invoice_id)
                                                                        <a href="{{ route('locks-by-month.dkplus.invoice.pdf', $invoiceRecord->dkplus_invoice_id) }}"
                                                                           target="_blank" rel="noopener" class="text-xs">
                                                                            <i class="material-icons text-xs align-middle">picture_as_pdf</i> PDF
                                                                        </a>
                                                                    @elseif(!empty($row['is_skipped']))
                                                                        <span class="badge bg-gradient-info text-xs">Skipped</span>
                                                                    @else
                                                                        <span class="text-xs text-muted">Not invoiced</span>
                                                                    @endif
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    <tr class="table-secondary" data-summary-row>
                                                        <td class="ps-3 fw-bold text-xs" colspan="4">API subtotal — {{ $apiGroup['api'] }}</td>
                                                        <td class="fw-bold text-xs">{{ $formatIsk($apiGroup['api_total']) }}</td>
                                                        <td></td>
                                                    </tr>
                                                @endforeach
                                                <tr class="table-dark text-white" data-summary-row>
                                                    <td class="ps-3 fw-bold" colspan="4">Month grand total</td>
                                                    <td class="fw-bold">{{ $formatIsk($monthGroup['month_total']) }}</td>
                                                    <td></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    @if(auth()->id() === 4)
                                    {{-- Per-month commission breakdown — owner-only (user_id 4) --}}
                                    <div class="px-3 py-3 border-top" style="background:#f8f9fa;">
                                        <p class="text-xs text-uppercase text-muted fw-semibold mb-2">
                                            <i class="material-icons text-xs align-middle me-1">account_balance_wallet</i>Commission breakdown
                                        </p>
                                        <div class="row g-2">
                                            <div class="col-auto">
                                                <span class="text-xs text-muted">Gross revenue</span><br>
                                                <span class="text-sm fw-semibold">{{ $formatIsk($monthGroup['month_total']) }}</span>
                                            </div>
                                            <div class="col-auto text-muted align-self-end pb-1">−</div>
                                            <div class="col-auto">
                                                <span class="text-xs text-muted">
                                                    Godo <span class="text-warning">(100 ISK/lock)</span>
                                                    @if($monthGroup['godo_lock_count'] > 0)
                                                        <span class="text-muted"> — {{ $monthGroup['godo_lock_count'] }} Godo lock(s)</span>
                                                    @endif
                                                </span><br>
                                                <span class="text-sm fw-semibold text-warning">{{ $formatIsk($monthGroup['godo_commission']) }}</span>
                                            </div>
                                            <div class="col-auto text-muted align-self-end pb-1">−</div>
                                            <div class="col-auto">
                                                <span class="text-xs text-muted">Sturla <span class="text-info">(10%)</span></span><br>
                                                <span class="text-sm fw-semibold text-info">{{ $formatIsk($monthGroup['sturla_bonus']) }}</span>
                                            </div>
                                            <div class="col-auto text-muted align-self-end pb-1">−</div>
                                            <div class="col-auto">
                                                <span class="text-xs text-muted">Brynjar <span class="text-info">(10%)</span></span><br>
                                                <span class="text-sm fw-semibold text-info">{{ $formatIsk($monthGroup['brynjar_bonus']) }}</span>
                                            </div>
                                            <div class="col-auto text-muted align-self-end pb-1">=</div>
                                            <div class="col-auto">
                                                <span class="text-xs text-muted fw-bold text-success">Net to company</span><br>
                                                <span class="text-sm fw-bold text-success">{{ $formatIsk($monthGroup['net_revenue']) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <p class="text-sm text-muted mb-0">No billing data for the selected filters.</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>{{-- /tab-billing --}}

        {{-- ─────────────────────── BY PROPERTY TAB ──────────────────────────── --}}
        <div class="tab-pane fade show active" id="tab-by-property" role="tabpanel"
             data-route-consolidated="{{ route('locks-by-month.dkplus.invoice.consolidated') }}"
             data-route-sync="{{ route('locks-by-month.dkplus.invoice.sync') }}"
             data-route-email="{{ route('locks-by-month.dkplus.invoice.email') }}"
             data-route-pdf="{{ route('locks-by-month.dkplus.invoice.pdf', ['invoiceId' => '__ID__']) }}"
             data-route-card="{{ route('locks-by-month.property-card', ['propertyId' => '__ID__']) }}"
             data-route-invoice="{{ route('locks-by-month.dkplus.invoice') }}"
             data-route-locks="{{ route('locks-by-month.lock-breakdown', ['propertyId' => '__ID__']) }}"
             data-route-lock-exclusion="{{ route('locks-by-month.lock-exclusion') }}"
             data-query="{{ request()->getQueryString() ?? '' }}">
            @php
                $bulkCandidateCount  = $byProperty->where('unbilled_count', '>', 0)->count();
                $bulkCandidateAmount = (int) $byProperty->where('unbilled_count', '>', 0)->sum('unbilled_total');
                $inactiveCount       = $byProperty->where('is_inactive', true)->count();
                $noCustomerToInvoice = $byProperty->filter(fn($p) => $p['unbilled_count'] > 0 && empty($propertyEmailMap[$p['property_id']]?->dkplus_customer_id))->count();
            @endphp

            {{-- Sticky toolbar — row 1: view + toggles + summary + bulk; row 2: search / group / sort --}}
            <div class="card shadow-sm border-0 mb-3 by-property-toolbar lb-toolbar">
                <div class="card-body py-2">
                    <div class="lb-toolbar-row">
                        {{-- View switch: "To invoice" (default) shows only properties with closed,
                             unbilled months and hides settled rows; "All" shows everything. --}}
                        <div class="btn-group btn-group-sm by-property-view-switch" role="group" aria-label="View">
                            <input type="radio" class="btn-check" name="byPropView" id="byPropViewInvoice" value="invoice" autocomplete="off" checked>
                            <label class="btn btn-outline-dark mb-0" for="byPropViewInvoice"
                                   data-bs-toggle="tooltip" title="Properties with at least one closed, unbilled month.">
                                To invoice <span class="badge bg-gradient-warning text-dark ms-1">{{ $bulkCandidateCount }}</span>
                            </label>
                            <input type="radio" class="btn-check" name="byPropView" id="byPropViewAll" value="all" autocomplete="off">
                            <label class="btn btn-outline-dark mb-0" for="byPropViewAll"
                                   data-bs-toggle="tooltip" title="Every property, including inactive and fully settled ones.">
                                All <span class="badge bg-gradient-secondary ms-1">{{ $byProperty->count() }}</span>
                            </label>
                        </div>

                        <div class="lb-switches">
                            <span class="lb-switches-label">Show</span>
                            <div class="form-check form-switch d-inline-flex align-items-center mb-0"
                                 data-bs-toggle="tooltip" title="Show invoiced and skipped months inside every card">
                                <input class="form-check-input" type="checkbox" id="byPropShowSettled">
                                <label class="form-check-label text-sm ms-2 mb-0" for="byPropShowSettled">settled months</label>
                            </div>
                            <div class="form-check form-switch d-inline-flex align-items-center mb-0"
                                 data-bs-toggle="tooltip" title="Show older properties that were superseded by a newer property ID (Reconcile tab)">
                                <input class="form-check-input" type="checkbox" id="byPropShowSuperseded">
                                <label class="form-check-label text-sm ms-2 mb-0" for="byPropShowSuperseded">superseded</label>
                            </div>
                            <div class="form-check form-switch d-inline-flex align-items-center mb-0"
                                 data-bs-toggle="tooltip" title="Show deactivated properties (inactive-from month reached), in both views">
                                <input class="form-check-input" type="checkbox" id="byPropShowInactive">
                                <label class="form-check-label text-sm ms-2 mb-0" for="byPropShowInactive">inactive</label>
                            </div>
                        </div>

                        {{-- Live count + summary --}}
                        <div class="lb-summary ms-auto">
                            <span class="fw-semibold by-property-visible-count">{{ $bulkCandidateCount }}</span> shown
                            @if($bulkCandidateCount > 0)
                                <span class="lb-dot">·</span><span class="text-warning fw-semibold">{{ $formatIsk($bulkCandidateAmount) }} to invoice</span>
                            @endif
                            @if($noCustomerToInvoice > 0)
                                <span class="lb-dot">·</span><span class="text-danger">{{ $noCustomerToInvoice }} without dkPlus customer</span>
                            @endif
                            @if($inactiveCount > 0)
                                <span class="lb-dot">·</span><span>{{ $inactiveCount }} inactive</span>
                            @endif
                            <i class="material-icons text-xs align-middle ms-1" style="cursor:help"
                               data-bs-toggle="tooltip" title="Billing is in arrears: the current month ({{ $currentMonth }}) is left out of unbilled totals and Select all.">info</i>
                        </div>

                        {{-- Bulk close --}}
                        @if($bulkCandidateCount > 0)
                            <form method="POST"
                                  action="{{ route('locks-by-month.dkplus.invoice.consolidated-bulk', request()->query()) }}"
                                  class="d-inline bulk-close-form"
                                  data-confirm="Create one consolidated invoice for every property shown that is ready (dkPlus customer linked + unbilled months)?"
                                  data-confirm-emphasis="warning">
                                @csrf
                                <input type="hidden" name="auto_email" value="0" class="bulk-auto-email-input">
                                <span class="bulk-close-ids"></span>
                                <button type="submit" class="btn btn-outline-warning btn-sm mb-0"
                                        data-bs-toggle="tooltip" title="Only properties that are ready: dkPlus customer linked and at least one closed, unbilled month">
                                    <i class="material-icons text-sm align-middle me-1">stacked_bar_chart</i>
                                    Bulk close ready
                                </button>
                            </form>
                        @endif
                    </div>

                    <div class="lb-toolbar-row mt-2">
                        {{-- Search ("/" focuses, Esc clears) --}}
                        <div class="lb-search">
                            <i class="material-icons">search</i>
                            <input type="search" class="form-control form-control-sm" id="byPropSearch" placeholder="Search property name" autocomplete="off">
                            <kbd data-bs-toggle="tooltip" title="Press / to search, Esc to clear">/</kbd>
                        </div>
                        <label class="lb-field">
                            <span class="lb-field-label">Group by</span>
                            <select id="byPropGroup" class="form-select form-select-sm">
                                <option value="readiness" selected>dkPlus readiness</option>
                                <option value="api">API</option>
                                <option value="none">No grouping</option>
                            </select>
                        </label>
                        <label class="lb-field">
                            <span class="lb-field-label">Sort by</span>
                            <select id="byPropSort" class="form-select form-select-sm">
                                <option value="unbilled_total_desc" selected>Largest unbilled</option>
                                <option value="oldest_unbilled_asc">Oldest unbilled first</option>
                                <option value="unbilled_count_desc">Most unbilled months</option>
                                <option value="property_name_asc">Property name (A→Z)</option>
                                <option value="property_name_desc">Property name (Z→A)</option>
                                <option value="api_asc">API</option>
                                <option value="lifetime_total_desc">Lifetime total</option>
                            </select>
                        </label>
                    </div>
                </div>
            </div>

            {{-- Floating bulk-action bar — visible while ≥1 card is ticked --}}
            <div class="card shadow border-0 mb-3 by-property-bulk-bar d-none" id="byPropBulkBar">
                <div class="card-body py-2 d-flex flex-wrap align-items-center gap-2">
                    <span class="text-sm fw-semibold"><span class="bulk-selected-count">0</span> selected</span>
                    <button type="button" class="btn btn-outline-secondary btn-sm mb-0 bulk-select-visible-btn">Select all shown</button>
                    <button type="button" class="btn btn-outline-secondary btn-sm mb-0 bulk-clear-btn">Clear</button>
                    <span class="ms-auto"></span>
                    <button type="button" class="btn btn-outline-info btn-sm mb-0 bulk-skip-cards-btn"
                            data-bs-toggle="tooltip" title="Mark every closed, unbilled month of the selected properties as non-billable">
                        <i class="material-icons text-sm align-middle me-1">block</i>Skip unbilled months
                    </button>
                    <button type="button" class="btn btn-outline-dark btn-sm mb-0 bulk-deactivate-cards-btn"
                            data-bs-toggle="tooltip" title="Set the same inactive-from month on every selected property">
                        <i class="material-icons text-sm align-middle me-1">power_settings_new</i>Deactivate from…
                    </button>
                    <form method="POST" action="{{ route('locks-by-month.dkplus.invoice.consolidated-bulk', request()->query()) }}" class="d-inline bulk-invoice-selected-form">
                        @csrf
                        <input type="hidden" name="auto_email" value="0">
                        <span class="bulk-invoice-ids"></span>
                        <button type="button" class="btn bg-gradient-primary btn-sm mb-0 bulk-invoice-cards-btn"
                                data-bs-toggle="tooltip" title="One consolidated invoice per selected property (ready ones only)">
                            <i class="material-icons text-sm align-middle me-1">receipt_long</i>Invoice selected
                        </button>
                    </form>
                </div>
            </div>

            {{-- Property cards (grouped client-side into .by-property-group sections) --}}
            <div id="byPropCards">
            @forelse($byProperty as $prop)
                @php
                    $propertyEmail = $propertyEmailMap[$prop['property_id']] ?? null;
                    $hasCustomer   = !empty($propertyEmail?->dkplus_customer_id);
                    // Pending = not invoiced/skipped (incl. the running month) — drives the action bar.
                    $pendingList   = collect($prop['months'])->filter(fn($m) => empty($m['is_invoiced']) && empty($m['is_skipped']))->values();
                    $propNotes     = (string) ($prop['notes'] ?? '');
                    $inactiveFrom  = $prop['inactive_from'] ?? null;
                @endphp
                <div class="card shadow-sm border-0 mb-3 by-property-card{{ $prop['unbilled_count'] > 0 ? ' has-unbilled' : '' }}{{ !empty($prop['is_inactive']) ? ' is-inactive' : '' }}{{ !empty($prop['superseded_by']) ? ' is-superseded' : '' }}"
                     data-property-id="{{ $prop['property_id'] }}"
                     data-property-name="{{ $prop['property_name'] }}"
                     data-api="{{ $prop['api'] }}"
                     data-unbilled-count="{{ $prop['unbilled_count'] }}"
                     data-unbilled-total="{{ $prop['unbilled_total'] }}"
                     data-lifetime-total="{{ $prop['all_time_total'] }}"
                     data-latest-invoice-month="{{ $prop['latest_invoice_month'] ?? '' }}"
                     data-has-customer="{{ $hasCustomer ? '1' : '0' }}"
                     data-inactive="{{ !empty($prop['is_inactive']) ? '1' : '0' }}"
                     data-superseded="{{ !empty($prop['superseded_by']) ? '1' : '0' }}"
                     data-inactive-from="{{ $inactiveFrom ?? '' }}"
                     data-settled-count="{{ $prop['settled_count'] ?? 0 }}"
                     data-pending-count="{{ $prop['pending_count'] ?? 0 }}"
                     data-unbilled-months="{{ implode(',', $prop['unbilled_months'] ?? []) }}"
                     data-oldest-unbilled="{{ $prop['oldest_unbilled_month'] ?? '' }}"
                     data-unbilled-age="{{ $prop['unbilled_age_months'] ?? 0 }}">
                    <div role="button" tabindex="0"
                         class="card-header by-property-toggle py-3 px-3 border-0 border-bottom bg-white w-100"
                         aria-expanded="false">
                        {{-- Bulk selection (floating action bar appears when ≥1 card is ticked) --}}
                        <input type="checkbox" class="form-check-input card-select-cb mt-0" aria-label="Select {{ $prop['property_name'] }}">
                        <i class="material-icons text-sm collapse-chevron text-muted">chevron_right</i>

                        <div class="flex-grow-1 me-auto">
                            <h6 class="mb-0 property-title">
                                <span class="property-name">{{ $prop['property_name'] }}</span>
                                <span class="badge bg-gradient-secondary ms-1 text-xs">{{ strtoupper($prop['api'] ?: 'unknown') }}</span>
                                @if(!$hasCustomer)
                                    <span class="badge bg-gradient-warning text-dark text-xs ms-1" data-bs-toggle="tooltip" title="Link a dkPlus customer on the Customers tab first">
                                        <i class="material-icons text-xs align-middle">link_off</i> No customer
                                    </span>
                                @endif
                                {{-- Inactive badge — text/visibility updated inline by the settings form --}}
                                @if(!empty($prop['superseded_by']))
                                    <span class="badge bg-gradient-secondary text-xs ms-1" data-bs-toggle="tooltip" title="Older duplicate — see the Reconcile tab">
                                        <i class="material-icons text-xs align-middle">call_merge</i>
                                        Superseded by {{ $propertyNameMap[$prop['superseded_by']] ?? $prop['superseded_by'] }}
                                    </span>
                                @endif
                                <span class="badge bg-gradient-dark text-xs ms-1 inactive-badge {{ $inactiveFrom ? '' : 'd-none' }}"
                                      data-bs-toggle="tooltip" title="No billing rows are generated from this month on">
                                    <i class="material-icons text-xs align-middle">power_settings_new</i>
                                    Inactive from <span class="inactive-from-text">{{ $inactiveFrom }}</span>
                                </span>
                                {{-- Oldest closed unbilled month — 1 = normal cycle, 2+ = slipped through --}}
                                @php $age = (int) ($prop['unbilled_age_months'] ?? 0); @endphp
                                <span class="badge text-xs ms-1 age-badge {{ $age >= 3 ? 'bg-gradient-danger' : 'bg-gradient-warning text-dark' }} {{ $age >= 2 ? '' : 'd-none' }}"
                                      data-bs-toggle="tooltip" title="Oldest closed month that has not been invoiced or skipped">
                                    <i class="material-icons text-xs align-middle">history</i>
                                    unbilled since <span class="age-since">{{ $prop['oldest_unbilled_month'] ?? '' }}</span> (<span class="age-months">{{ $age }}</span> mo)
                                </span>
                                {{-- Selection-summary chip — visible when ≥1 month is checked --}}
                                <span class="badge bg-gradient-primary ms-2 text-xs selection-chip d-none">
                                    <span class="selection-chip-count">0</span> selected · <span class="selection-chip-total">0 ISK</span>
                                </span>
                            </h6>
                            <div class="text-xs text-muted mt-1 property-meta-line">
                                ID <span class="font-monospace">{{ $prop['property_id'] }}</span>
                                ·
                                <span class="latest-invoice-info">
                                    @if($prop['latest_invoice_id'])
                                        last invoice <span class="font-monospace">{{ $prop['latest_invoice_id'] }}</span> ({{ $prop['latest_invoice_month'] }})
                                        @if(!empty($prop['latest_invoice_status']))
                                            <span class="badge text-xs invoice-status-badge" data-status="{{ $prop['latest_invoice_status'] }}">{{ strtoupper($prop['latest_invoice_status']) }}</span>
                                        @endif
                                    @else
                                        no invoices yet
                                    @endif
                                </span>
                            </div>
                            {{-- Internal note preview — visible while the card is collapsed --}}
                            <div class="text-xs notes-preview mt-1 {{ $propNotes !== '' ? '' : 'd-none' }}">
                                <i class="material-icons text-xs align-middle text-info">sticky_note_2</i>
                                <span class="notes-preview-text">{{ $propNotes }}</span>
                            </div>

                            {{-- Mini month strip — one chip per month, status-coloured. Visible even when card is collapsed. --}}
                            <div class="month-strip mt-2" aria-label="Monthly status overview">
                                @foreach($prop['months'] as $m)
                                    @php $st = !empty($m['is_invoiced']) ? 'invoiced' : (!empty($m['is_skipped']) ? 'skipped' : 'pending'); @endphp
                                    <span class="month-chip"
                                          data-month="{{ $m['month'] }}"
                                          data-status="{{ $st }}"
                                          data-bs-toggle="tooltip"
                                          title="{{ $m['month'] }} · {{ ucfirst($st) }}"></span>
                                @endforeach
                            </div>
                        </div>
                        <div class="card-actions">
                        {{-- One-click invoice of every closed, unbilled month (the common case) --}}
                        <button type="button"
                                class="btn bg-gradient-primary btn-sm mb-0 invoice-closed-btn {{ $prop['unbilled_count'] > 0 ? '' : 'd-none' }}"
                                {{ $hasCustomer ? '' : 'disabled' }}
                                title="{{ $hasCustomer ? 'Create one consolidated dkPlus invoice for all closed, unbilled months' : 'Link a dkPlus customer first' }}">
                            <i class="material-icons text-sm align-middle me-1">receipt_long</i>
                            Invoice <span class="invoice-closed-count">{{ $prop['unbilled_count'] }}</span> <span class="invoice-closed-label">{{ $prop['unbilled_count'] === 1 ? 'month' : 'months' }}</span>
                        </button>

                        {{-- Notes & status (opens the shared settings dialog) --}}
                        <button type="button"
                                class="btn btn-sm mb-0 px-2 settings-open-btn {{ $propNotes !== '' ? 'has-notes btn-outline-info' : 'btn-outline-secondary' }}"
                                data-property-id="{{ $prop['property_id'] }}"
                                data-property-name="{{ $prop['property_name'] }}"
                                data-notes="{{ $propNotes }}"
                                data-inactive-from="{{ $inactiveFrom ?? '' }}"
                                data-customer-id="{{ $propertyEmail?->dkplus_customer_id ?? '' }}"
                                data-customer-name="{{ $propertyEmail?->dkplus_customer_name ?? '' }}"
                                data-periods="{{ $periodsJson($prop['property_id']) }}"
                                data-billing-disabled="{{ !empty($propertySettingsMap[trim((string) $prop['property_id'])]?->billing_disabled) ? '1' : '0' }}"
                                data-automation-active="{{ !empty($prop['automation_active']) ? '1' : '0' }}"
                                data-bs-toggle="tooltip"
                                title="{{ $propNotes !== '' ? 'Edit internal notes / inactive from / customer history' : 'Notes, inactive from, customer history' }}">
                            <i class="material-icons text-sm align-middle">{{ $propNotes !== '' ? 'sticky_note_2' : 'settings' }}</i>
                        </button>
                        </div>
                        <div class="card-totals text-end">
                            <div class="text-xs text-muted">
                                Unbilled · <span class="unbilled-count">{{ $prop['unbilled_count'] }}</span>
                                <span class="unbilled-month-label">{{ $prop['unbilled_count'] === 1 ? 'month' : 'months' }}</span>
                            </div>
                            <div class="fw-semibold unbilled-total {{ $prop['unbilled_total'] > 0 ? 'text-warning' : 'text-muted' }}">
                                {{ $formatIsk($prop['unbilled_total']) }}
                            </div>
                            <div class="text-xs text-muted mt-1 lifetime-line">
                                Lifetime · {{ $formatIsk($prop['all_time_total']) }}
                                <span class="skipped-line {{ $prop['skipped_count'] > 0 ? '' : 'd-none' }}">·
                                    <span class="text-info"><span class="skipped-count">{{ $prop['skipped_count'] }}</span> skipped</span>
                                </span>
                            </div>
                        </div>
                    </div>{{-- /.by-property-toggle --}}
                    {{-- Body is fetched on first expand (see propertyCard route) --}}
                    <div class="by-property-collapse" hidden data-loaded="0">
                        <div class="card-body py-3 px-3 text-center text-sm text-muted card-body-loading">
                            <span class="spinner-border spinner-border-sm me-2" role="status"></span>Loading months…
                        </div>
                    </div>{{-- /.by-property-collapse --}}
                </div>
            @empty
                <div class="card shadow-sm border-0">
                    <div class="card-body text-center text-sm text-muted py-5">
                        No billing data for the current filters.
                    </div>
                </div>
            @endforelse
            </div>{{-- /#byPropCards --}}

            {{-- Empty state for the client-side view/search — rendered ONCE and toggled by JS. --}}
            <div id="byPropEmptySearch" class="card shadow-sm border-0 mb-3">
                <div class="card-body text-center text-sm text-muted py-4">
                    <i class="material-icons text-secondary mb-1" style="font-size:24px">search_off</i>
                    <div class="empty-search-msg">No properties match your search.</div>
                    <div class="empty-invoice-msg">
                        <i class="material-icons text-success align-middle" style="font-size:18px">check_circle</i>
                        Nothing left to invoice. Switch to <strong>All</strong> to see settled and inactive properties.
                    </div>
                </div>
            </div>
        </div>{{-- /tab-by-property --}}

        {{-- ─────────────────────── CUSTOMERS TAB ────────────────────────────── --}}
        {{-- Quick-fill dashboard for the dkPlus customer linkage on every property.
             Default sort: missing first (so the user lands on what needs work).
             Default filter: "Missing only" ON. --}}
        <div class="tab-pane fade" id="tab-customers" role="tabpanel">
            @php
                // Sort: missing customer first, then by property name.
                $billedPropertyIds = collect($billing['rows'] ?? [])->pluck('property_id')->map(fn($id) => trim((string) $id))->unique();
                $customersList = $properties
                    ->map(function ($p) use ($propertyEmailMap, $propertySettingsMap, $currentMonth, $billedPropertyIds) {
                        $setting = $propertySettingsMap[trim((string) $p->PropertyID)] ?? null;
                        $inactiveFrom = $setting?->inactive_from ?: null;
                        return [
                            // No billable lock in any month → never active; hidden unless "Show inactive".
                            'never_billed'  => !$billedPropertyIds->contains(trim((string) $p->PropertyID)),
                            'property'      => $p,
                            'email'         => $propertyEmailMap[(string) $p->PropertyID] ?? null,
                            'has_customer'  => !empty($propertyEmailMap[(string) $p->PropertyID]?->dkplus_customer_id),
                            'notes'         => (string) ($setting?->notes ?? ''),
                            'inactive_from' => $inactiveFrom,
                            // Superseded (older duplicate) is as non-actionable as inactive here.
                            'billing_disabled' => (bool) ($setting?->billing_disabled ?? false),
                            'is_inactive'   => ($inactiveFrom !== null && $inactiveFrom <= $currentMonth) || !empty($setting?->superseded_by) || !empty($setting?->billing_disabled),
                        ];
                    })
                    ->sortBy(fn($r) => sprintf('%d|%s',
                        $r['has_customer'] ? 1 : 0,
                        mb_strtolower((string) $r['property']->PropertyName)
                    ))
                    ->values();
                $linkedCount  = $customersList->where('has_customer', true)->count();
                // Inactive / never-billed properties without a customer are not actionable — leave them out of "missing".
                $missingCount = $customersList->where('has_customer', false)->where('is_inactive', false)->where('never_billed', false)->count();
                $inactiveCustomerCount = $customersList->filter(fn($r) => $r['is_inactive'] || $r['never_billed'])->count();
                // Linked by id only — the name can be fetched from dkPlus in one click.
                $noNameCount  = $customersList->filter(fn($r) => $r['has_customer'] && trim((string) ($r['email']?->dkplus_customer_name ?? '')) === '')->count();
            @endphp

            {{-- Sticky toolbar --}}
            <div class="card shadow-sm border-0 mb-3 customers-toolbar lb-toolbar">
                <div class="card-body py-2">
                    <div class="lb-toolbar-row">
                        <div class="lb-switches">
                            <span class="lb-switches-label">Show</span>
                            <div class="form-check form-switch d-inline-flex align-items-center mb-0">
                                <input class="form-check-input" type="checkbox" id="customersMissingOnly" checked>
                                <label class="form-check-label text-sm ms-2 mb-0" for="customersMissingOnly">missing only</label>
                            </div>
                            <div class="form-check form-switch d-inline-flex align-items-center mb-0"
                                 data-bs-toggle="tooltip" title="Show deactivated, superseded and never-billed properties ({{ $inactiveCustomerCount }})">
                                <input class="form-check-input" type="checkbox" id="customersShowInactive">
                                <label class="form-check-label text-sm ms-2 mb-0" for="customersShowInactive">inactive <span class="text-xs text-muted">({{ $inactiveCustomerCount }})</span></label>
                            </div>
                        </div>

                        <div class="lb-summary ms-auto">
                            <span class="fw-semibold customers-visible-count">{{ $missingCount }}</span> shown
                            <span class="lb-dot">·</span><span class="text-warning fw-semibold"><span class="customers-missing-count">{{ $missingCount }}</span> missing</span>
                            <span class="lb-dot">·</span><span class="text-success"><span class="customers-linked-count">{{ $linkedCount }}</span> linked</span>
                        </div>

                        @if($noNameCount > 0)
                            <button type="button" class="btn btn-outline-primary btn-sm mb-0" id="customersBackfillNames"
                                    data-url="{{ route('locks-by-month.dkplus.customer.backfill-names') }}"
                                    data-bs-toggle="tooltip" title="Look up the dkPlus customer name for every property that is linked by id only">
                                <i class="material-icons text-sm align-middle me-1">cloud_download</i>
                                Fetch {{ $noNameCount }} missing {{ $noNameCount === 1 ? 'name' : 'names' }}
                            </button>
                        @endif
                    </div>

                    <div class="lb-toolbar-row mt-2">
                        <div class="lb-search">
                            <i class="material-icons">search</i>
                            <input type="search" class="form-control form-control-sm" id="customersSearch" placeholder="Search property name" autocomplete="off">
                            <kbd data-bs-toggle="tooltip" title="Press / to search, Esc to clear">/</kbd>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Customers table --}}
            <div class="card shadow-sm border-0">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table align-middle mb-0 customers-table">
                            <thead>
                                <tr class="text-xs text-uppercase text-muted">
                                    <th class="ps-3" style="min-width:200px">Property</th>
                                    <th>API</th>
                                    <th>Status</th>
                                    <th style="min-width:200px">Internal notes</th>
                                    <th class="pe-3" style="min-width:420px">dkPlus customer</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($customersList as $entry)
                                    @php
                                        $property    = $entry['property'];
                                        $email       = $entry['email'];
                                        $hasCustomer = $entry['has_customer'];
                                    @endphp
                                    <tr class="customer-row"
                                        data-property-id="{{ $property->PropertyID }}"
                                        data-property-name="{{ $property->PropertyName }}"
                                        data-inactive="{{ ($entry['is_inactive'] || $entry['never_billed']) ? '1' : '0' }}"
                                        data-status="{{ $hasCustomer ? 'linked' : 'missing' }}">
                                        <td class="ps-3">
                                            <div class="text-sm fw-semibold">{{ $property->PropertyName }}</div>
                                            <div class="text-xs text-muted font-monospace">{{ $property->PropertyID }}</div>
                                        </td>
                                        <td>
                                            <span class="badge bg-gradient-secondary text-xs">{{ strtoupper($property->API ?: 'unknown') }}</span>
                                        </td>
                                        <td class="status-cell">
                                            @if($hasCustomer)
                                                <span class="badge bg-gradient-success text-xs">Linked</span>
                                            @else
                                                <span class="badge bg-gradient-warning text-dark text-xs">Missing</span>
                                            @endif
                                            @if($entry['billing_disabled'])
                                                <span class="badge bg-gradient-dark text-xs d-block mt-1" style="width:max-content"
                                                      data-bs-toggle="tooltip" title="Out of billing entirely — never active">Inactive</span>
                                            @elseif($entry['inactive_from'])
                                                <span class="badge bg-gradient-dark text-xs d-block mt-1" style="width:max-content"
                                                      data-bs-toggle="tooltip" title="No billing rows from this month on">Inactive from {{ $entry['inactive_from'] }}</span>
                                            @elseif($entry['never_billed'])
                                                <span class="badge bg-gradient-secondary text-xs d-block mt-1" style="width:max-content"
                                                      data-bs-toggle="tooltip" title="No lock has ever been assigned — nothing to invoice">Never active</span>
                                            @endif
                                        </td>
                                        <td style="max-width:300px">
                                            <div class="d-flex align-items-start gap-2">
                                                <button type="button"
                                                        class="btn btn-sm mb-0 px-2 settings-open-btn {{ $entry['notes'] !== '' ? 'has-notes btn-outline-info' : 'btn-outline-secondary' }}"
                                                        data-property-id="{{ $property->PropertyID }}"
                                                        data-property-name="{{ $property->PropertyName }}"
                                                        data-notes="{{ $entry['notes'] }}"
                                                        data-inactive-from="{{ $entry['inactive_from'] ?? '' }}"
                                                        data-customer-id="{{ $email?->dkplus_customer_id ?? '' }}"
                                                        data-customer-name="{{ $email?->dkplus_customer_name ?? '' }}"
                                                        data-periods="{{ $periodsJson($property->PropertyID) }}"
                                                        data-billing-disabled="{{ $entry['billing_disabled'] ? '1' : '0' }}"
                                                        data-automation-active="{{ !empty($automationActiveMap[trim((string) $property->PropertyID)]) ? '1' : '0' }}"
                                                        data-bs-toggle="tooltip" title="Notes, inactive from, customer history">
                                                    <i class="material-icons text-sm align-middle">{{ $entry['notes'] !== '' ? 'sticky_note_2' : 'settings' }}</i>
                                                </button>
                                                <span class="text-xs text-muted customer-notes-cell" style="white-space:pre-line">{{ $entry['notes'] !== '' ? $entry['notes'] : '—' }}</span>
                                            </div>
                                        </td>
                                        <td class="customer-cell pe-3" data-layout="customers" data-property-id="{{ $property->PropertyID }}">
                                            <form method="POST" action="{{ route('locks-by-month.dkplus.customer', request()->query()) }}" class="billing-form" data-ajax="true">
                                                @csrf
                                                <input type="hidden" name="property_id" value="{{ $property->PropertyID }}">
                                                <div class="d-flex gap-1 flex-wrap align-items-center">
                                                    <input type="text" name="dkplus_customer_id" class="form-control form-control-sm" placeholder="Customer ID" style="width:130px" value="{{ $email->dkplus_customer_id ?? '' }}">
                                                    <button type="button" class="btn btn-outline-secondary btn-sm mb-0 fetch-customer-btn"
                                                            data-fetch-url="{{ route('locks-by-month.dkplus.customer.fetch', ['customerId' => '__ID__']) }}"
                                                            data-bs-toggle="tooltip" title="Look up customer name in dkPlus">
                                                        <i class="material-icons text-sm" style="line-height:1">search</i>
                                                    </button>
                                                    <input type="text" name="dkplus_customer_name" class="form-control form-control-sm flex-grow-1" placeholder="Name (auto-fills after Fetch)" value="{{ $email->dkplus_customer_name ?? '' }}" style="min-width:180px">
                                                    <button type="submit" class="btn btn-outline-primary btn-sm mb-0">
                                                        <i class="material-icons text-sm align-middle me-1">link</i>Save
                                                    </button>
                                                </div>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div id="customersEmptySearch" class="text-center text-sm text-muted py-4 d-none">
                        <i class="material-icons text-secondary mb-1" style="font-size:24px">search_off</i>
                        <div>No properties match the current filters.</div>
                    </div>
                </div>
            </div>
        </div>{{-- /tab-customers --}}

        {{-- ─────────────────────── RECONCILE TAB ────────────────────────────── --}}
        {{-- Same place under two PropertyIDs (API move, re-onboarding, Frímann encoding
             accidents). Detection is computed by LockReconciliationService; the verdict
             (superseded_by / reconciled_at) is stored on lock_billing_property_settings. --}}
        <div class="tab-pane fade" id="tab-reconcile" role="tabpanel" data-route="{{ route('locks-by-month.reconcile') }}">
            @php
                $resolvedClusterCount = $reconciliation->count() - $openClusterCount;
                $reasonLabel = fn(string $r, $detail) => match ($r) {
                    'shared_locks'  => ['bg-gradient-danger',  'Shared locks · ' . (int) $detail, 'The same lock id is assigned under both property IDs'],
                    'same_customer' => ['bg-gradient-warning text-dark', 'Same dkPlus customer', 'Customer ' . $detail],
                    'similar_name'  => ['bg-gradient-info',    'Similar name · ' . (int) round($detail * 100) . '%', 'Normalised names match'],
                    default         => ['bg-gradient-secondary', $r, ''],
                };
            @endphp

            <div class="card shadow-sm border-0 mb-3 reconcile-toolbar">
                <div class="card-body py-2 d-flex flex-wrap align-items-center gap-2">
                    <span class="text-sm fw-semibold reconcile-open-count">{{ $openClusterCount }}</span>
                    <span class="text-xs text-muted">open</span>
                    <span class="text-xs text-muted">·</span>
                    <span class="text-xs text-muted"><span class="reconcile-resolved-count">{{ $resolvedClusterCount }}</span> resolved</span>
                    <span class="text-xs text-muted ms-3">
                        Properties that look like the same place twice. Signals: shared lock ids, same dkPlus customer, similar names.
                        <strong>Superseded by</strong> marks the older one and (optionally) stops its billing from the handover month — unbilled months before that stay for you to invoice or skip.
                        <strong>Keep all</strong> quiets a cluster that is legitimately separate.
                    </span>
                    <div class="form-check form-switch d-inline-flex align-items-center mb-0 ms-auto">
                        <input class="form-check-input" type="checkbox" id="reconcileShowResolved">
                        <label class="form-check-label text-sm ms-2 mb-0" for="reconcileShowResolved">Show resolved</label>
                    </div>
                </div>
            </div>

            @forelse($reconciliation as $cluster)
                @php $memberIds = implode(',', array_column($cluster['members'], 'property_id')); @endphp
                <div class="card shadow-sm border-0 mb-3 reconcile-cluster" data-status="{{ $cluster['status'] }}">
                    <div class="card-header py-2 px-3 border-bottom">
                        {{-- Title row: name · status · why it matched · Keep all / Reopen --}}
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <h6 class="mb-0 reconcile-title">{{ $cluster['title'] }}</h6>
                            <span class="badge text-xs cluster-status {{ $cluster['status'] === 'open' ? 'bg-gradient-warning text-dark' : 'bg-gradient-success' }}">{{ ucfirst($cluster['status']) }}</span>
                            @foreach($cluster['reasons'] as $reason => $detail)
                                @php [$cls, $label, $hint] = $reasonLabel($reason, $detail); @endphp
                                <span class="badge text-xs {{ $cls }}" data-bs-toggle="tooltip" title="{{ $hint }}">{{ $label }}</span>
                            @endforeach
                            <div class="ms-auto">
                                <button type="button" class="btn btn-outline-secondary btn-sm mb-0 reconcile-keep-btn {{ $cluster['status'] === 'open' ? '' : 'd-none' }}" data-ids="{{ $memberIds }}"
                                        data-bs-toggle="tooltip" title="These are legitimately separate properties — stop flagging them">
                                    <i class="material-icons text-sm align-middle me-1">done_all</i>Keep all
                                </button>
                                <button type="button" class="btn btn-outline-secondary btn-sm mb-0 reconcile-reopen-btn {{ $cluster['status'] === 'open' ? 'd-none' : '' }}" data-ids="{{ $memberIds }}"
                                        data-bs-toggle="tooltip" title="Clear the verdict on every member and review again">
                                    <i class="material-icons text-sm align-middle me-1">undo</i>Reopen
                                </button>
                            </div>
                        </div>

                        {{-- Double-billing: one line per matched pair --}}
                        @if(count($cluster['overlap_pairs'] ?? []) > 0)
                            <div class="reconcile-overlap mt-2">
                                <div class="text-xxs text-uppercase fw-semibold text-danger mb-1">
                                    <i class="material-icons text-xs align-middle">warning</i> Both billed the same months
                                </div>
                                <ul class="list-unstyled mb-0 text-xs">
                                    @foreach(array_slice($cluster['overlap_pairs'], 0, 6) as $pair)
                                        <li class="d-flex flex-wrap align-items-baseline gap-1">
                                            <span class="fw-semibold">{{ $pair['a_name'] }}</span>
                                            <span class="text-muted">↔</span>
                                            <span class="fw-semibold">{{ $pair['b_name'] }}</span>
                                            <span class="text-muted">· {{ $pair['months'][0] }} – {{ end($pair['months']) }} · {{ count($pair['months']) }} {{ count($pair['months']) === 1 ? 'month' : 'months' }} ·</span>
                                            <span class="fw-semibold text-danger">{{ $formatIsk($pair['total']) }}</span>
                                        </li>
                                    @endforeach
                                    @if(count($cluster['overlap_pairs']) > 6)
                                        <li class="text-muted">+{{ count($cluster['overlap_pairs']) - 6 }} more pairs</li>
                                    @endif
                                </ul>
                            </div>
                        @endif
                    </div>

                    <div class="table-responsive">
                        <table class="table table-sm align-middle mb-0 reconcile-table">
                            <thead>
                                <tr class="text-xs text-uppercase text-muted">
                                    <th class="ps-3" style="min-width:220px">Property</th>
                                    <th style="min-width:150px">Billed months</th>
                                    <th style="min-width:150px">Invoiced / unbilled</th>
                                    <th style="min-width:160px">dkPlus customer</th>
                                    <th style="min-width:130px">Status</th>
                                    <th class="text-end pe-3 reconcile-actions-col">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($cluster['members'] as $m)
                                    <tr class="reconcile-member {{ ($m['superseded_by'] || $m['billing_disabled']) ? 'text-muted' : '' }}"
                                        data-property-id="{{ $m['property_id'] }}"
                                        data-property-name="{{ $m['property_name'] }}"
                                        data-superseded="{{ $m['superseded_by'] ? '1' : '0' }}"
                                        data-superseded-name="{{ $m['superseded_by'] ? ($propertyNameMap[$m['superseded_by']] ?? $m['superseded_by']) : '' }}"
                                        data-kept="{{ $m['reconciled_at'] ? '1' : '0' }}"
                                        data-disabled="{{ $m['billing_disabled'] ? '1' : '0' }}"
                                        data-inactive-from="{{ $m['inactive_from'] ?? '' }}"
                                        data-automation-active="{{ $m['automation_active'] ? '1' : '0' }}"
                                        data-invoiced-months="{{ json_encode($m['invoiced_months'] ?? []) }}">
                                        <td class="ps-3">
                                            <div class="text-sm fw-semibold">{{ $m['property_name'] }}</div>
                                            <div class="text-xs text-muted mt-1">
                                                <span class="badge bg-gradient-secondary text-xs">{{ strtoupper($m['api']) }}</span>
                                                <span class="font-monospace ms-1">ID {{ $m['property_id'] }}</span>
                                                <span class="ms-1">· created {{ $m['created_at'] ?? '—' }}</span>
                                            </div>
                                            @if($m['notes'] !== '')
                                                <div class="text-xs text-info mt-1"><i class="material-icons text-xs align-middle">sticky_note_2</i> {{ \Illuminate\Support\Str::limit($m['notes'], 80) }}</div>
                                            @endif
                                            @if(!empty($m['suggested_successor']))
                                                <div class="text-xs mt-1 reconcile-suggestion">
                                                    <span class="badge bg-gradient-primary text-xs">Suggested</span>
                                                    superseded by <strong>{{ $propertyNameMap[$m['suggested_successor']] ?? $m['suggested_successor'] }}</strong>
                                                    from {{ $m['suggested_from'] ?? '—' }} — {{ $m['suggestion_reason'] }}
                                                </div>
                                            @endif
                                        </td>
                                        <td class="text-xs">
                                            @if($m['billed_months'] > 0)
                                                {{ $m['first_month'] }} – {{ $m['last_month'] }} <span class="text-muted">({{ $m['billed_months'] }})</span>
                                            @else
                                                <span class="text-muted">no billing rows</span>
                                            @endif
                                        </td>
                                        <td class="text-xs">
                                            <span class="text-success">{{ $m['invoiced_count'] }} invoiced</span>
                                            <span class="text-muted">·</span>
                                            <span class="{{ $m['unbilled_count'] > 0 ? 'text-warning fw-semibold' : 'text-muted' }}">{{ $m['unbilled_count'] }} unbilled</span>
                                            @if($m['unbilled_total'] > 0)<div class="text-muted">{{ $formatIsk($m['unbilled_total']) }}</div>@endif
                                        </td>
                                        <td class="text-xs">
                                            @if($m['customer_id'] !== '')
                                                <div>{{ $m['customer_name'] !== '' ? $m['customer_name'] : '—' }}</div>
                                                <div class="text-muted font-monospace">#{{ $m['customer_id'] }}</div>
                                            @else
                                                <span class="badge bg-gradient-warning text-dark text-xs">No customer</span>
                                            @endif
                                        </td>
                                        <td class="text-xs member-status">
                                            <div class="member-verdict">
                                            @if($m['billing_disabled'])
                                                <span class="badge bg-gradient-dark text-xs" data-bs-toggle="tooltip" title="Out of billing entirely — never active">Inactive</span>
                                            @elseif($m['superseded_by'])
                                                <span class="badge bg-gradient-dark text-xs">Superseded by {{ $propertyNameMap[$m['superseded_by']] ?? $m['superseded_by'] }}</span>
                                            @elseif($m['reconciled_at'])
                                                <span class="badge bg-gradient-success text-xs">Kept</span>
                                            @else
                                                <span class="badge bg-gradient-info text-xs">Active</span>
                                            @endif
                                            @if($m['inactive_from'])
                                                <div class="text-muted mt-1">inactive from {{ $m['inactive_from'] }}</div>
                                            @endif
                                            @if($m['automation_active'] && ($m['billing_disabled'] || $m['superseded_by'] || $m['inactive_from']))
                                                <div class="mt-1"><span class="badge bg-gradient-warning text-dark text-xs" data-bs-toggle="tooltip" title="This property's scheduled task (app:automate-…) is still on and keeps syncing bookings / codes. Switch it off on the property page, or use the tick in the Inactive / Mark dialogs.">
                                                    <i class="material-icons text-xs align-middle">bolt</i> automation still active
                                                </span></div>
                                            @endif
                                            </div>
                                            <div class="member-late">
                                            @if(!empty($m['invoices_after_handover']))
                                                {{-- Invoices to the OLD property covering months on/after the handover:
                                                     the successor billed those months too → credit note in dkPlus. --}}
                                                <div class="mt-1 text-danger">
                                                    <i class="material-icons text-xs align-middle">error_outline</i>
                                                    <strong>Invoiced after handover</strong> — credit note needed:
                                                    @foreach($m['invoices_after_handover'] as $inv)
                                                        <div class="ms-3">#{{ $inv['invoice_id'] }} · {{ $inv['months'][0] }}{{ count($inv['months']) > 1 ? ' – ' . end($inv['months']) : '' }} ({{ count($inv['months']) }} mo)</div>
                                                    @endforeach
                                                </div>
                                            @endif
                                            </div>
                                        </td>
                                        <td class="pe-3 reconcile-actions-col">
                                            <div class="reconcile-actions">
                                                {{-- Row 1: Inactive switch (never active) + notes/settings --}}
                                                <div class="d-flex align-items-center justify-content-end gap-2">
                                                    <div class="form-check form-switch d-inline-flex align-items-center mb-0"
                                                         data-bs-toggle="tooltip" title="Inactive: no billing rows for any month, hidden from the billing tabs. Use for properties that were never really active.">
                                                        <input class="form-check-input reconcile-inactive-toggle" type="checkbox"
                                                               id="inactive_{{ $cluster['key'] }}_{{ $m['property_id'] }}"
                                                               data-property-id="{{ $m['property_id'] }}"
                                                               data-property-name="{{ $m['property_name'] }}"
                                                               data-notes="{{ $m['notes'] }}"
                                                               data-inactive-from="{{ $m['inactive_from'] ?? '' }}"
                                                               data-automation-active="{{ $m['automation_active'] ? '1' : '0' }}"
                                                               {{ $m['billing_disabled'] ? 'checked' : '' }}>
                                                        <label class="form-check-label text-xs ms-2 mb-0" for="inactive_{{ $cluster['key'] }}_{{ $m['property_id'] }}">Inactive</label>
                                                    </div>
                                                    <button type="button"
                                                            class="btn btn-sm mb-0 px-2 settings-open-btn {{ $m['notes'] !== '' ? 'has-notes btn-outline-info' : 'btn-outline-secondary' }}"
                                                            data-property-id="{{ $m['property_id'] }}"
                                                            data-property-name="{{ $m['property_name'] }}"
                                                            data-notes="{{ $m['notes'] }}"
                                                            data-inactive-from="{{ $m['inactive_from'] ?? '' }}"
                                                            data-customer-id="{{ $m['customer_id'] }}"
                                                            data-customer-name="{{ $m['customer_name'] }}"
                                                            data-periods="{{ $periodsJson($m['property_id']) }}"
                                                            data-billing-disabled="{{ $m['billing_disabled'] ? '1' : '0' }}"
                                                            data-automation-active="{{ $m['automation_active'] ? '1' : '0' }}"
                                                            data-bs-toggle="tooltip" title="Notes, inactive from, customer history">
                                                        <i class="material-icons text-sm align-middle">{{ $m['notes'] !== '' ? 'sticky_note_2' : 'settings' }}</i>
                                                    </button>
                                                </div>
                                                {{-- Row 2: supersede (older duplicate → successor, handover month) --}}
                                                    <form method="POST" action="{{ route('locks-by-month.reconcile') }}" class="reconcile-supersede-form d-flex align-items-center justify-content-end gap-1 mt-2 {{ ($m['superseded_by'] || $m['billing_disabled']) ? 'd-none' : '' }}">
                                                        @csrf
                                                        <input type="hidden" name="action" value="supersede">
                                                        <input type="hidden" name="property_id" value="{{ $m['property_id'] }}">
                                                        @php $sugg = $m['suggested_successor'] ?? null; @endphp
                                                        <select name="superseded_by" class="form-select form-select-sm reconcile-successor" required>
                                                            <option value="">Superseded by…</option>
                                                            @foreach($cluster['members'] as $other)
                                                                @if($other['property_id'] !== $m['property_id'])
                                                                    <option value="{{ $other['property_id'] }}" data-first-month="{{ $other['first_month'] ?? '' }}" {{ $sugg === $other['property_id'] ? 'selected' : '' }}>
                                                                        {{ $other['property_name'] }} ({{ strtoupper($other['api']) }})
                                                                    </option>
                                                                @endif
                                                            @endforeach
                                                        </select>
                                                        <input type="month" name="inactive_from" class="form-control form-control-sm reconcile-month"
                                                               value="{{ $sugg ? ($m['suggested_from'] ?? '') : '' }}" data-auto="{{ $sugg ? '1' : '0' }}"
                                                               data-bs-toggle="tooltip" title="First month NOT billed to this property — defaults to the successor's first billed month">
                                                        <button type="submit" class="btn {{ $sugg ? 'btn-dark' : 'btn-outline-dark' }} btn-sm mb-0" {{ $sugg ? '' : 'disabled' }}>Mark</button>
                                                    </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @empty
                <div class="card shadow-sm border-0">
                    <div class="card-body text-center text-sm text-muted py-5">
                        <i class="material-icons text-success mb-1" style="font-size:24px">check_circle</i>
                        <div>No duplicate candidates found.</div>
                    </div>
                </div>
            @endforelse
            <div id="reconcileAllResolved" class="card shadow-sm border-0 d-none">
                <div class="card-body text-center text-sm text-muted py-4">
                    <i class="material-icons text-success mb-1" style="font-size:24px">check_circle</i>
                    <div>Every cluster has been reviewed. Tick <strong>Show resolved</strong> to see them.</div>
                </div>
            </div>
        </div>{{-- /tab-reconcile --}}

        @if(auth()->id() === 4)
        {{-- ─────────────────────── COMMISSIONS TAB ──────────────────────────── --}}
        {{-- Owner-only (Sturla, user_id 4). Other users never see this pane. --}}
        <div class="tab-pane fade" id="tab-commissions" role="tabpanel">

            {{-- Grand-total summary cards --}}
            <div class="row g-4 mb-4">
                <div class="col-xl col-md-6">
                    <div class="card h-100 shadow-sm border-0"><div class="card-body">
                        <p class="text-xs text-uppercase text-muted mb-1">Gross Revenue</p>
                        <h5 class="mb-0">{{ $formatIsk($billing['grand_total']) }}</h5>
                        <p class="text-xs text-muted mb-0 mt-1">All subscription billing</p>
                    </div></div>
                </div>
                <div class="col-xl col-md-6">
                    <div class="card h-100 shadow-sm border-0"><div class="card-body">
                        <p class="text-xs text-uppercase text-muted mb-1">Godo Commission</p>
                        <h5 class="mb-0 text-warning">{{ $formatIsk($billing['total_godo_commission']) }}</h5>
                        <p class="text-xs text-muted mb-0 mt-1">
                            100 ISK × {{ $billing['total_godo_lock_count'] }} Godo lock(s) × month
                        </p>
                    </div></div>
                </div>
                <div class="col-xl col-md-6">
                    <div class="card h-100 shadow-sm border-0"><div class="card-body">
                        <p class="text-xs text-uppercase text-muted mb-1">Sturla Bonus</p>
                        <h5 class="mb-0 text-info">{{ $formatIsk($billing['total_sturla_bonus']) }}</h5>
                        <p class="text-xs text-muted mb-0 mt-1">10% of gross revenue</p>
                    </div></div>
                </div>
                <div class="col-xl col-md-6">
                    <div class="card h-100 shadow-sm border-0"><div class="card-body">
                        <p class="text-xs text-uppercase text-muted mb-1">Brynjar Bonus</p>
                        <h5 class="mb-0 text-info">{{ $formatIsk($billing['total_brynjar_bonus']) }}</h5>
                        <p class="text-xs text-muted mb-0 mt-1">10% of gross revenue</p>
                    </div></div>
                </div>
                <div class="col-xl col-md-6">
                    <div class="card h-100 shadow-sm border border-success"><div class="card-body">
                        <p class="text-xs text-uppercase text-muted mb-1">Net to Company</p>
                        <h5 class="mb-0 text-success">{{ $formatIsk($billing['total_net_revenue']) }}</h5>
                        <p class="text-xs text-muted mb-0 mt-1">After commissions &amp; bonuses</p>
                    </div></div>
                </div>
            </div>

            {{-- Month-by-month breakdown --}}
            <div class="card shadow-sm border-0">
                <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">
                        <i class="material-icons text-sm me-1 align-middle">account_balance_wallet</i>
                        Monthly Commission Breakdown
                    </h6>
                    <span class="text-xs text-muted">
                        Godo: 100 ISK/lock &nbsp;|&nbsp; Sturla &amp; Brynjar: 10% each
                    </span>
                </div>
                <div class="card-body px-0 pb-2">
                    <div class="table-responsive">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-3">Month</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Gross Revenue</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-warning">Godo Commission</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-info">Sturla (10%)</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-info">Brynjar (10%)</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-success">Net to Company</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($billing['month_groups'] as $mg)
                                    <tr>
                                        <td class="ps-3 text-sm fw-semibold">{{ $mg['month'] }}</td>
                                        <td class="text-sm">{{ $formatIsk($mg['month_total']) }}</td>
                                        <td class="text-sm text-warning">
                                            {{ $formatIsk($mg['godo_commission']) }}
                                            @if($mg['godo_lock_count'] > 0)
                                                <span class="text-xs text-muted d-block">{{ $mg['godo_lock_count'] }} Godo lock(s)</span>
                                            @elseif($mg['godo_commission'] === 0)
                                                <span class="text-xs text-muted d-block">no Godo properties</span>
                                            @endif
                                        </td>
                                        <td class="text-sm text-info">{{ $formatIsk($mg['sturla_bonus']) }}</td>
                                        <td class="text-sm text-info">{{ $formatIsk($mg['brynjar_bonus']) }}</td>
                                        <td class="text-sm fw-bold text-success">{{ $formatIsk($mg['net_revenue']) }}</td>
                                    </tr>
                                @endforeach
                                <tr class="table-dark text-white">
                                    <td class="ps-3 fw-bold">Grand Total</td>
                                    <td class="fw-bold">{{ $formatIsk($billing['grand_total']) }}</td>
                                    <td class="fw-bold">
                                        {{ $formatIsk($billing['total_godo_commission']) }}
                                        @if($billing['total_godo_lock_count'] > 0)
                                            <span class="d-block fw-normal text-xs opacity-7">{{ $billing['total_godo_lock_count'] }} Godo lock(s)</span>
                                        @endif
                                    </td>
                                    <td class="fw-bold">{{ $formatIsk($billing['total_sturla_bonus']) }}</td>
                                    <td class="fw-bold">{{ $formatIsk($billing['total_brynjar_bonus']) }}</td>
                                    <td class="fw-bold">{{ $formatIsk($billing['total_net_revenue']) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>{{-- /tab-commissions --}}
        @endif


    </div>{{-- /tab-content --}}

    {{-- Flash data passed to SweetAlert (no Bootstrap toast HTML needed) --}}
    {{-- ══════════════════ PROPERTY SETTINGS DIALOG (shared) ═════════════════ --}}
    {{-- Opened from the gear button on every property card and every Customers-tab row.
         Internal notes + "inactive from". A change to inactive_from reloads the page
         so the month rows are regenerated; notes-only saves update inline. --}}
    <div class="modal fade" id="propertySettingsModal" tabindex="-1" aria-labelledby="propertySettingsModalTitle" aria-hidden="true"
         data-route-handover="{{ route('locks-by-month.customer-handover') }}"
         data-route-period-delete="{{ route('locks-by-month.customer-period.delete') }}"
         data-route-customer-fetch="{{ route('locks-by-month.dkplus.customer.fetch', ['customerId' => '__ID__']) }}">
        <div class="modal-dialog modal-dialog-centered">
            <form method="POST" action="{{ route('locks-by-month.property-settings') }}" class="modal-content property-settings-form" data-property-id="" data-original-inactive-from="" data-original-disabled="0">
                @csrf
                <input type="hidden" name="property_id" value="">
                <div class="modal-header py-3">
                    <div>
                        <h6 class="modal-title mb-0" id="propertySettingsModalTitle">Property settings</h6>
                        <div class="text-xs text-muted settings-modal-subtitle">Internal notes and billing status</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <label class="form-label text-xs mb-1" for="settings_notes">Internal notes <span class="text-muted">(never sent to dkPlus)</span></label>
                    <textarea name="notes" id="settings_notes" class="form-control" rows="4" maxlength="2000"
                              placeholder="e.g. moved to Godo 2026-03 — invoice old months, then leave inactive"></textarea>

                    <div class="form-check form-switch d-flex align-items-center mt-3 mb-0">
                        <input class="form-check-input" type="checkbox" name="billing_disabled" value="1" id="settings_billing_disabled">
                        <label class="form-check-label text-xs ms-2 mb-0" for="settings_billing_disabled">
                            <strong>Inactive</strong> <span class="text-muted">— never really active: no billing rows for any month, hidden from the billing tabs</span>
                        </label>
                    </div>
                    <input type="hidden" name="billing_disabled" value="0" class="settings-billing-disabled-fallback">
                    <div class="form-check d-flex align-items-center mt-2 mb-0 settings-automation-row d-none">
                        <input class="form-check-input" type="checkbox" name="disable_automation" value="1" id="settings_disable_automation" checked>
                        <label class="form-check-label text-xs ms-2 mb-0" for="settings_disable_automation">
                            <span class="badge bg-gradient-warning text-dark text-xs me-1"><i class="material-icons text-xs align-middle">bolt</i> automation active</span>
                            also switch off this property's scheduled task when it becomes inactive
                        </label>
                    </div>

                    <label class="form-label text-xs mb-1 mt-3" for="settings_inactive_from">Inactive from <span class="text-muted">(first month that is NOT billed)</span></label>
                    <div class="d-flex gap-2 align-items-center flex-wrap">
                        <input type="month" name="inactive_from" id="settings_inactive_from" class="form-control inactive-from-input" style="max-width:180px">
                        <button type="button" class="btn btn-outline-dark btn-sm mb-0 deactivate-now-btn" data-month="{{ $currentMonth }}"
                                title="Set inactive from {{ $currentMonth }}">
                            <i class="material-icons text-sm align-middle">power_settings_new</i> Deactivate from {{ $currentMonth }}
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm mb-0 clear-inactive-btn" title="Clear the inactive-from month">
                            <i class="material-icons text-sm align-middle">restart_alt</i> Clear
                        </button>
                    </div>
                    <div class="text-xs text-muted mt-2">
                        Months before this date keep billing until invoiced or skipped. Use it when a property moved to another API / property ID or stopped using the lock service.
                    </div>

                    <hr class="my-3">
                    <label class="form-label text-xs mb-1">dkPlus customer <span class="text-muted">(company moves)</span></label>
                    <div class="text-sm settings-customer-current">
                        <span class="text-muted text-xs">Current:</span>
                        <strong class="cur-name">—</strong>
                        <span class="text-xs text-muted font-monospace cur-id"></span>
                    </div>
                    <ul class="list-unstyled text-xs mb-2 mt-1 settings-customer-periods"></ul>
                    <details class="settings-handover">
                        <summary class="text-xs text-primary" style="cursor:pointer">Hand over to a new company…</summary>
                        <div class="row g-2 mt-1 align-items-end">
                            <div class="col-5">
                                <label class="form-label text-xs mb-1">New dkPlus customer id</label>
                                <div class="d-flex gap-1">
                                    <input type="text" class="form-control form-control-sm handover-customer-id" placeholder="kennitala / number">
                                    <button type="button" class="btn btn-outline-secondary btn-sm mb-0 handover-fetch-btn" title="Look up the name in dkPlus">
                                        <i class="material-icons text-sm" style="line-height:1">search</i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-4">
                                <label class="form-label text-xs mb-1">Name</label>
                                <input type="text" class="form-control form-control-sm handover-customer-name" placeholder="auto-fills">
                            </div>
                            <div class="col-3">
                                <label class="form-label text-xs mb-1">From month</label>
                                <input type="month" class="form-control form-control-sm handover-from-month" value="{{ $currentMonth }}">
                            </div>
                            <div class="col-12 text-xs text-muted">
                                Months from this month on are invoiced to the new company; earlier months stay with the current one.
                                A consolidated invoice that spans the change is split into one invoice per company.
                            </div>
                            <div class="col-12 text-end">
                                <button type="button" class="btn btn-outline-dark btn-sm mb-0 handover-submit-btn">
                                    <i class="material-icons text-sm align-middle me-1">swap_horiz</i>Hand over
                                </button>
                            </div>
                        </div>
                    </details>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-outline-secondary btn-sm mb-0" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn bg-gradient-primary btn-sm mb-0">Save</button>
                </div>
            </form>
        </div>
    </div>

    @if(session('status'))
        <script>window._braFaFlash = { type: 'success', msg: @json(session('status')) };</script>
    @elseif($errors->has('dkplus'))
        <script>window._braFaFlash = { type: 'error', msg: @json($errors->first('dkplus')) };</script>
    @endif

</div>
@endsection

@push('css')
<style>
    /* ── Filter card chevron ───────────────────────────────────────────────── */
    .lock-statistics-page .filter-toggle-btn .filter-chevron  { transition: transform .2s ease; }
    .lock-statistics-page .filter-toggle-btn[aria-expanded="true"] .filter-chevron { transform: rotate(180deg); }

    /* ── Main pills tab nav ────────────────────────────────────────────────── */
    #mainPageTabs .nav-link        { color: #344767; border-radius: .5rem; }
    #mainPageTabs .nav-link.active { background: linear-gradient(195deg, #42424a, #191919); color: #fff; }

    /* ── Billing accordion ────────────────────────────────────────────────── */
    .lock-statistics-page .billing-month-item {
        border: 1px solid #e9ecef;
        border-radius: .75rem;
        overflow: clip; /* clip (not hidden) so sticky children still work */
    }
    .lock-statistics-page .billing-month-header {
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        position: sticky;
        top: 66px;   /* clear the fixed Material Dashboard navbar */
        z-index: 4;
    }
    .lock-statistics-page .billing-toggle-btn .billing-chevron { transition: transform .2s ease; }
    .lock-statistics-page .billing-toggle-btn[aria-expanded="true"] .billing-chevron { transform: rotate(180deg); }
    .lock-statistics-page .billing-detail-table tbody tr:hover > td { background: rgba(94,114,228,.04); }
    .lock-statistics-page .billing-detail-table details summary { list-style: none; user-select: none; }
    .lock-statistics-page .billing-detail-table details summary::-webkit-details-marker { display: none; }
    .lock-statistics-page .lock-growth-table tbody tr:hover { background: rgba(94,114,228,.04); }

    /* ── Pending-only filter (hides invoiced AND skipped rows) ────────────── */
    #billingMonthAccordion.billing-pending-active tr[data-billing-row][data-invoiced="1"],
    #billingMonthAccordion.billing-pending-active tr[data-billing-row][data-skipped="1"],
    #billingMonthAccordion.billing-pending-active tr[data-summary-row] { display: none; }
    #billingMonthAccordion.billing-pending-active .billing-month-item:not(:has(tr[data-billing-row][data-invoiced="0"][data-skipped="0"])) { display: none; }

    /* ── Settled (invoiced / skipped) month rows hidden by default ────────── */
    .by-property-card .month-row[data-status="invoiced"],
    .by-property-card .month-row[data-status="skipped"]            { display: none; }
    #tab-by-property.show-settled .by-property-card .month-row,
    .by-property-card.show-settled .month-row,
    .by-property-card .month-row.keep-visible                       { display: table-row; }
    #tab-by-property.show-settled .settled-toggle-wrap             { display: none !important; }
    .by-property-card .settled-toggle-btn                           { text-decoration: none; }
    .by-property-card .settled-toggle-btn:hover                     { text-decoration: underline; }

    /* ── Inactive properties ──────────────────────────────────────────────── */
    .by-property-card.is-inactive .by-property-toggle               { background: #f8f9fa; }
    .by-property-card.is-inactive .property-name                    { color: #8392ab; }
    .by-property-card .notes-preview                                { color: #5e72e4; max-width: 640px; }
    .by-property-card .notes-preview-text                           { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 580px; vertical-align: bottom; }
    .by-property-card .property-settings > summary                  { list-style: none; }
    .by-property-card .property-settings > summary::-webkit-details-marker { display: none; }
    .by-property-card .property-settings > summary:hover            { text-decoration: underline; }
    .by-property-card .property-settings textarea                   { font-size: .8rem; }

    /* ── Invoice legend tooltip icon ──────────────────────────────────────── */
    .invoice-legend-icon { transition: opacity .15s; }
    .invoice-legend-icon:hover { opacity: 1 !important; }

    /* ── Loading spinner overlay on billing form buttons ─────────────────── */
    .billing-form button[data-loading] { pointer-events: none; opacity: .8; }

    /* ── BY PROPERTY tab ──────────────────────────────────────────────────── */
    .by-property-toolbar                     { position: sticky; top: 0; z-index: 30; }
    .by-property-toolbar .input-group-outline,
    .by-property-toolbar .form-check-label   { margin-bottom: 0 !important; }

    .by-property-card                        { transition: box-shadow .15s ease, border-left-color .15s ease; border-left: 3px solid transparent !important; overflow: hidden; }
    .by-property-card.has-unbilled           { border-left-color: #fb6340 !important; }
    .by-property-card:not(.has-unbilled)     { border-left-color: #2dce89 !important; }
    .by-property-card.is-hidden              { display: none !important; }

    /* Header is now a button — make it look like a card header */
    .by-property-toggle                      { background: #fff; border-radius: inherit; }
    .by-property-toggle:hover                { background: #fafbff; }
    .by-property-toggle:focus                { outline: none !important; box-shadow: 0 0 0 3px rgba(94,114,228,.15) inset; }
    .by-property-toggle .collapse-chevron    { transition: transform .2s ease, color .15s ease; }
    .by-property-toggle[aria-expanded="false"] .collapse-chevron { transform: rotate(-90deg); }

    .by-property-card .month-row             { transition: background-color .25s ease; }
    .by-property-card .month-row[data-status="invoiced"] td:not(.subtotal-cell) { color: #8392ab; }
    .by-property-card .month-row[data-status="skipped"]  td:not(.status-cell):not(.action-cell) { color: #8392ab; }
    .by-property-card .month-row.row-flash   { background-color: rgba(94,114,228,.10); }
    .by-property-card .selected-total        { font-variant-numeric: tabular-nums; }
    .by-property-card .unbilled-total        { font-variant-numeric: tabular-nums; }
    .by-property-card .bulk-skip-btn[disabled],
    .by-property-card .create-consolidated-btn[disabled] { opacity: .55; pointer-events: none; }
    .by-property-card .selection-chip        { transition: opacity .15s ease; }

    /* Make the table-cell checkbox align with the row content */
    .by-property-card .cb-cell .form-check-input { margin-top: 0 !important; }

    /* Empty state when search / view has no matches */
    #byPropEmptySearch                       { display: none; }
    #byPropEmptySearch.show                   { display: block; }

    /* dkPlus invoice status badge (card rows + header) */
    .invoice-status-badge                    { background: #8392ab; color: #fff; }
    .invoice-status-badge[data-status="submitted"] { background: linear-gradient(195deg, #fbcf33, #f53939); color: #fff; }
    .invoice-status-badge[data-status="ready"]     { background: linear-gradient(195deg, #49a3f1, #1a73e8); color: #fff; }
    .invoice-status-badge[data-status="sent"],
    .invoice-status-badge[data-status="finalized"] { background: linear-gradient(195deg, #66bb6a, #43a047); color: #fff; }
    .by-property-card .invoice-actions .btn  { line-height: 1; }
    .by-property-card .invoice-closed-btn    { white-space: nowrap; }
    .page-compact-header h5                  { line-height: 1.1; }

    /* Groups, bulk bar, selection, age badge */
    .by-property-group                        { margin-bottom: .75rem; }
    .by-property-group-header                 { padding: .5rem .75rem; margin-bottom: .5rem; border-radius: .5rem; background: #f8f9fa; border: 1px solid #e9ecef; cursor: pointer; user-select: none; }
    .by-property-group-header:hover           { background: #f1f3f9; }
    .by-property-group-header .group-chevron  { transition: transform .2s ease; }
    .by-property-group.is-collapsed .by-property-group-body { display: none; }
    .by-property-bulk-bar                     { position: sticky; top: 58px; z-index: 29; border-left: 3px solid #5e72e4 !important; }
    .by-property-card .card-select-cb         { flex-shrink: 0; cursor: pointer; }
    .by-property-card .age-badge              { white-space: nowrap; }
    .by-property-card .card-body-loading      { color: #8392ab; }
    kbd.text-xxs                              { font-size: .6rem; padding: 0 .3em; background: #e9ecef; color: #344767; border-radius: .2rem; }

    /* Reconcile tab */
    .reconcile-toolbar                        { position: sticky; top: 0; z-index: 30; }
    .reconcile-title                          { white-space: nowrap; }
    .reconcile-overlap                        { background: #fff5f6; border-left: 3px solid #f5365c; border-radius: .5rem; padding: .5rem .75rem; }
    .reconcile-table thead th                 { background: #f8faff; border-bottom: 1px solid #e2e5ee; white-space: nowrap; }
    .reconcile-table tbody td                 { vertical-align: top; padding: .65rem .5rem; }
    .reconcile-actions-col                    { width: 420px; min-width: 420px; }
    .reconcile-actions .form-select-sm,
    .reconcile-actions .form-control-sm       { font-size: .75rem; padding: .25rem .5rem; height: calc(1.5em + .5rem + 2px); }
    .reconcile-actions .reconcile-successor   { flex: 1 1 auto; min-width: 160px; max-width: 240px; }
    .reconcile-actions .reconcile-month       { flex: 0 0 140px; width: 140px; }
    .reconcile-actions .form-switch .form-check-input { cursor: pointer; }
    .by-property-card.is-superseded .property-name { color: #8392ab; text-decoration: line-through; }

    /* ── Shared toolbar pattern (By property, Customers) ──────────────── */
    .lb-toolbar-row                           { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
    .lb-switches                              { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .15rem .75rem; border: 1px solid #e9ecef; border-radius: .5rem; background: #fafbfc; }
    .lb-switches-label                        { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: #8392ab; font-weight: 600; }
    .lb-switches .form-check-input            { margin-top: 0; }
    .lb-summary                               { font-size: .8rem; color: #67748e; white-space: nowrap; }
    .lb-summary .lb-dot                       { margin: 0 .35rem; color: #adb5bd; }
    .lb-search                                { position: relative; flex: 1 1 260px; max-width: 420px; }
    .lb-search .material-icons                { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); font-size: 18px; color: #8392ab; pointer-events: none; }
    .lb-search .form-control                  { padding-left: 2.1rem !important; padding-right: 2.2rem !important; background: #fff; border: 1px solid #d2d6da; }
    .lb-search kbd                            { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); font-size: .6rem; padding: .1em .4em; background: #e9ecef; color: #344767; border-radius: .25rem; pointer-events: none; }
    .lb-field                                 { display: flex; flex-direction: column; gap: .15rem; margin: 0; min-width: 180px; }
    .lb-field-label                           { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: #8392ab; font-weight: 600; }
    .lb-field .form-select-sm                 { background-color: #fff; border: 1px solid #d2d6da; padding: .35rem 2rem .35rem .6rem; font-size: .8rem; }
    .lb-toolbar .btn-sm                       { white-space: nowrap; }

    /* ── Card header grid ─────────────────────────────────────────────────── */
    .by-property-toggle                       { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: .5rem 1rem; }
    .by-property-toggle .card-select-cb       { justify-self: start; }
    .by-property-toggle .card-actions         { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
    .by-property-toggle .card-totals          { min-width: 150px; }
    .by-property-toggle .property-title       { line-height: 1.6; }
    .by-property-toggle .property-title .badge { vertical-align: middle; }
    @media (max-width: 991px) {
        .by-property-toggle                   { grid-template-columns: auto auto minmax(0, 1fr); }
        .by-property-toggle .card-actions,
        .by-property-toggle .card-totals      { grid-column: 3; justify-self: start; text-align: left !important; }
    }

    /* ── Card month table ─────────────────────────────────────────────────── */
    .by-property-card .card-month-table thead th { font-size: .65rem; letter-spacing: .05em; color: #8392ab; background: #f8faff; border-bottom: 1px solid #e2e5ee; white-space: nowrap; }
    .by-property-card .card-month-table tbody td { vertical-align: middle; }
    .by-property-card .card-month-table .cb-cell { width: 40px; }
    .by-property-card .card-month-table .status-cell { min-width: 220px; }
    .by-property-card .card-month-table .action-cell { width: 220px; white-space: nowrap; }

    /* View switch + notes shortcut */
    .by-property-view-switch .btn            { font-size: .75rem; }
    .by-property-view-switch .btn-check:checked + .btn { background: linear-gradient(195deg, #42424a, #191919); border-color: #191919; color: #fff; }
    .settings-open-btn                        { line-height: 1; }
    .settings-open-btn.has-notes              { background: rgba(17,205,239,.08); }

    /* ── Mini month strip (one chip per month, status-coloured) ──────────── */
    .month-strip                             { display: flex; flex-wrap: wrap; gap: 3px; }
    .month-chip                              {
        width        : 11px;
        height       : 11px;
        border-radius: 2px;
        background   : #fb6340;        /* default = pending */
        transition   : background-color .25s ease, transform .15s ease;
        cursor       : help;
    }
    .month-chip:hover                        { transform: scale(1.4); }
    .month-chip[data-status="invoiced"]      { background: #2dce89; }
    .month-chip[data-status="skipped"]       { background: #11cdef; }
    .month-chip[data-status="pending"]       { background: #fb6340; }

    /* ── Inline customer editor inside the by-property card ──────────────── */
    .by-property-card .customer-cell         { font-size: .82rem; }
    .by-property-card .customer-cell details > summary { list-style: none; }
    .by-property-card .customer-cell details > summary::-webkit-details-marker { display: none; }
    .by-property-card .customer-cell details > summary:hover { text-decoration: underline; }

    /* ── Customers tab ───────────────────────────────────────────────────── */
    .customers-toolbar                       { position: sticky; top: 0; z-index: 30; }
    .customers-table thead th                { background: #f8faff; border-bottom: 1px solid #e2e5ee; }
    .customers-table tbody tr.is-hidden      { display: none; }
    .customers-table tbody tr                { transition: background-color .25s ease; }
    .customers-table tbody tr:hover          { background-color: #fafbff; }
    .customers-table tbody tr.row-flash      { background-color: rgba(45, 206, 137, .12) !important; }
    .customers-table tbody tr[data-status="linked"]  td:first-child { box-shadow: inset 3px 0 0 0 #2dce89; }
    .customers-table tbody tr[data-status="missing"] td:first-child { box-shadow: inset 3px 0 0 0 #fb6340; }
    .customers-table tbody tr td             { vertical-align: middle; padding: 0.6rem 0.5rem; }
    .customers-table tbody tr td:first-child { padding-left: 1rem; }
    .customers-table tbody tr td:last-child  { padding-right: 1rem; }
</style>
@endpush

@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
<script>
    // Material Dashboard ships Bootstrap 5, but layouts/app.blade.php loads
    // Bootstrap 4 AFTER this stack and overwrites window.bootstrap. Capture the
    // BS5 handle now so click-time code (modal, tooltips, collapse) still gets it.
    const brafaBS = window.bootstrap;
    window.brafaBS = brafaBS;

    // ── Shared AJAX helper: POSTs a form and returns parsed JSON.
    //    Detects the common Laravel failure modes (419 CSRF, HTML error page,
    //    validation errors) and turns them into actionable Error.message strings.
    //    Always uses the LATEST CSRF token from the <meta> tag so a stale form
    //    embedded token doesn't kill a save after the user has been on the page
    //    for a while.
    window.brafaPostForm = async function postFormAjax(form) {
        const fd = new FormData(form);
        // Refresh _token from <meta name="csrf-token"> so we don't post a stale one
        const freshToken = document.querySelector('meta[name="csrf-token"]')?.content;
        if (freshToken) fd.set('_token', freshToken);

        let res;
        try {
            // form.action is shadowed when the form has an <input name="action">
            // (reconcile / supersede forms) — read the attribute instead.
            res = await fetch(form.getAttribute('action') || form.action, {
                method:  'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept':           'application/json',
                    'X-CSRF-TOKEN':     freshToken ?? '',
                },
                body:    fd,
                credentials: 'same-origin',
                redirect:    'follow',
            });
        } catch (networkErr) {
            throw new Error('Network error: ' + (networkErr.message || 'request failed'));
        }

        const contentType = res.headers.get('content-type') || '';

        // Laravel sends back a JSON object even on validation/server errors when
        // the request has Accept: application/json. If the response is HTML, that
        // almost always means the session expired and we were redirected to /login.
        if (!contentType.includes('application/json')) {
            const text = await res.text().catch(() => '');
            if (res.status === 419) {
                throw new Error('Session expired (CSRF token mismatch). Please reload the page and try again.');
            }
            if (res.redirected || /<!doctype html|<html/i.test(text)) {
                throw new Error('Session likely expired — server redirected the request. Please reload and try again.');
            }
            throw new Error(`Server returned HTTP ${res.status}` + (text ? ` — ${text.slice(0, 200)}` : ''));
        }

        let data;
        try {
            data = await res.json();
        } catch (e) {
            throw new Error(`Could not parse server response (HTTP ${res.status}).`);
        }

        if (!res.ok) {
            // Laravel validation: { message, errors: { field: [messages] } }
            // Our jsonOrRedirect: { errors: { dkplus: 'message' } }
            const msg = data?.errors?.dkplus
                || data?.errors?.dkplus_customer_id?.[0]
                || (data?.errors && typeof data.errors === 'object'
                        ? Object.values(data.errors).flat().join(' · ')
                        : null)
                || data?.message
                || `HTTP ${res.status}`;
            const err = new Error(msg);
            err.status = res.status;
            err.data   = data;
            throw err;
        }

        return data;
    };

    // ── Scroll position restoration ───────────────────────────────────────
    //    Kept on window so the tab-restore step below can scroll again once the
    //    right tab is shown (page height differs per tab).
    (() => {
        const y = sessionStorage.getItem('brafa_scroll_y');
        if (y !== null) {
            window._brafaScrollY = parseInt(y, 10);
            window.scrollTo({ top: window._brafaScrollY, behavior: 'instant' });
            sessionStorage.removeItem('brafa_scroll_y');
        }
    })();

    // ── <details> state persistence ───────────────────────────────────────
    (() => {
        const SK = 'brafa_open_details';
        const openKeys = JSON.parse(sessionStorage.getItem(SK) || '[]');
        document.querySelectorAll('details[data-details-key]').forEach(el => {
            if (openKeys.includes(el.dataset.detailsKey)) el.open = true;
        });
        document.addEventListener('toggle', e => {
            const el = e.target.closest?.('details[data-details-key]');
            if (!el) return;
            const keys = JSON.parse(sessionStorage.getItem(SK) || '[]');
            const k    = el.dataset.detailsKey;
            if (el.open && !keys.includes(k))     keys.push(k);
            else if (!el.open) { const i = keys.indexOf(k); if (i > -1) keys.splice(i, 1); }
            sessionStorage.setItem(SK, JSON.stringify(keys));
        }, true);
    })();

    // ── Floating-label behaviour for .input-group-outline inputs ─────────
    (() => {
        function syncFilled(el) {
            const wrap = el.closest('.input-group-outline');
            if (!wrap) return;
            // Selects and date/month inputs are always considered "filled"
            const alwaysFilled = el.tagName === 'SELECT' || ['date','month','time','datetime-local','week'].includes(el.type);
            wrap.classList.toggle('is-filled', alwaysFilled || el.value.length > 0);
        }
        document.querySelectorAll('.input-group-outline .form-control, .input-group-outline .form-select').forEach(el => {
            syncFilled(el);
            el.addEventListener('focus',  () => el.closest('.input-group-outline')?.classList.add('is-focused'));
            el.addEventListener('blur',   () => el.closest('.input-group-outline')?.classList.remove('is-focused'));
            el.addEventListener('input',  () => syncFilled(el));
            el.addEventListener('change', () => syncFilled(el));
        });
    })();

    // ── Flash messages via SweetAlert ─────────────────────────────────────
    (() => {
        if (!window._braFaFlash || typeof Swal === 'undefined') return;
        const { type, msg } = window._braFaFlash;
        Swal.fire({
            toast: true, position: 'bottom-end', icon: type,
            title: msg, showConfirmButton: false,
            timer: type === 'error' ? 8000 : 4000,
            timerProgressBar: true,
        });
    })();

    // ── Tab state persistence ──────────────────────────────────────────────
    (() => {
        if (typeof brafaBS === 'undefined') return;
        const TAB_KEY = 'brafa_active_tab';
        // First visit lands on "By property" — that is where invoicing happens.
        const saved   = localStorage.getItem(TAB_KEY) || '#tab-by-property';
        const btn     = document.querySelector(`#mainPageTabs button[data-bs-target="${saved}"]`);
        const pane    = document.querySelector(saved);
        // The pre-paint script (above the tab content) may already have marked the
        // button active; Bootstrap still needs to activate the pane itself.
        if (btn && pane && !pane.classList.contains('active')) {
            btn.classList.remove('active');
            new brafaBS.Tab(btn).show();
        }
        // Drop the pre-paint override once Bootstrap owns the panes, then put the
        // scroll back where it was before the reload.
        setTimeout(() => {
            document.getElementById('brafa-initial-tab-style')?.remove();
            if (typeof window._brafaScrollY === 'number') {
                window.scrollTo({ top: window._brafaScrollY, behavior: 'instant' });
                delete window._brafaScrollY;
            }
        }, 250);

        document.querySelectorAll('#mainPageTabs button[data-bs-toggle="pill"]').forEach(b => {
            b.addEventListener('shown.bs.tab', e => localStorage.setItem(TAB_KEY, e.target.dataset.bsTarget));
        });
    })();

    // ── Billing accordion state persistence ────────────────────────────────
    (() => {
        const KEY       = 'brafa_billing_open_month';
        const accordion = document.getElementById('billingMonthAccordion');
        if (!accordion || typeof brafaBS === 'undefined') return;

        const savedId = localStorage.getItem(KEY);
        if (savedId) {
            const target = document.getElementById(savedId);
            if (target && !target.classList.contains('show')) {
                accordion.querySelectorAll('.collapse.show').forEach(el => el.classList.remove('show'));
                accordion.querySelectorAll('[aria-expanded="true"]').forEach(b => b.setAttribute('aria-expanded', 'false'));
                target.classList.add('show');
                const btn = accordion.querySelector(`[data-bs-target="#${savedId}"]`);
                if (btn) btn.setAttribute('aria-expanded', 'true');
            }
        }
        accordion.addEventListener('show.bs.collapse', e => localStorage.setItem(KEY, e.target.id));
    })();

    // ── Jump to month ──────────────────────────────────────────────────────
    (() => {
        document.getElementById('billing-month-jump')?.addEventListener('change', function () {
            const id   = this.value;
            if (!id) return;
            const target = document.getElementById(id);
            const item   = target?.closest('.billing-month-item');
            if (!target) return;
            if (!target.classList.contains('show') && typeof brafaBS !== 'undefined') {
                new brafaBS.Collapse(target).show();
            }
            setTimeout(() => item?.scrollIntoView({ behavior: 'smooth', block: 'start' }), 200);
            this.value = '';
        });
    })();

    // ── Pending-only filter — ON by default, remembered in localStorage ────
    (() => {
        const toggle    = document.getElementById('billing-pending-toggle');
        const accordion = document.getElementById('billingMonthAccordion');
        if (!toggle || !accordion) return;

        const KEY = 'brafa_billing_pending_only_v1';

        function apply(expandFirst) {
            const active = toggle.checked;
            accordion.classList.toggle('billing-pending-active', active);
            if (active && expandFirst && brafaBS) {
                const firstPending = accordion.querySelector('.billing-month-item:has(tr[data-billing-row][data-invoiced="0"][data-skipped="0"])');
                if (firstPending) {
                    const collapse = firstPending.querySelector('.collapse');
                    if (collapse && !collapse.classList.contains('show')) new brafaBS.Collapse(collapse).show();
                }
            }
            try { localStorage.setItem(KEY, active ? '1' : '0'); } catch {}
        }

        try { toggle.checked = (localStorage.getItem(KEY) ?? '1') === '1'; } catch {}
        apply(false);
        toggle.addEventListener('change', () => apply(true));
    })();

    // ── Billing forms: SweetAlert confirm + AJAX customer save (event-delegated)
    (() => {
        /* HTML-escape helper (used when building DOM strings) */
        const esc = s => String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&#34;');

        /* Rebuild the linked-customer cell HTML so we never need a page reload */
        const linkedCustomerHtml = (propertyId, customerId, customerName, action, csrf, fetchUrlTpl) => {
            const name = customerName || '—';
            return `
                <div class="text-sm fw-semibold">${esc(name)}</div>
                <div class="text-xs text-muted font-monospace">${esc(customerId)}</div>
                <details class="mt-1" data-details-key="cust_${esc(propertyId)}">
                    <summary class="text-xs text-primary" style="cursor:pointer">Edit</summary>
                    <form method="POST" action="${esc(action)}" class="billing-form mt-2" data-ajax="true">
                        <input type="hidden" name="_token" value="${esc(csrf)}">
                        <input type="hidden" name="property_id" value="${esc(propertyId)}">
                        <div class="d-flex gap-1 mb-1">
                            <input type="text" name="dkplus_customer_id" class="form-control form-control-sm" placeholder="ID" style="width:85px" value="${esc(customerId)}">
                            <button type="button" class="btn btn-outline-secondary btn-sm mb-0 fetch-customer-btn"
                                    data-fetch-url="${esc(fetchUrlTpl)}"
                                    data-bs-toggle="tooltip" title="Look up customer name in dkPlus">
                                <i class="material-icons text-sm" style="line-height:1">search</i>
                            </button>
                            <input type="text" name="dkplus_customer_name" class="form-control form-control-sm" placeholder="Name" value="${esc(customerName ?? '')}">
                        </div>
                        <button type="submit" class="btn btn-outline-dark btn-sm mb-0">Save</button>
                    </form>
                </details>`;
        };

        /* Customers tab layout: a single-row form that stays editable after save. */
        const customersCustomerHtml = (propertyId, customerId, customerName, action, csrf, fetchUrlTpl) => {
            return `
                <form method="POST" action="${esc(action)}" class="billing-form" data-ajax="true">
                    <input type="hidden" name="_token" value="${esc(csrf)}">
                    <input type="hidden" name="property_id" value="${esc(propertyId)}">
                    <div class="d-flex gap-1 flex-wrap align-items-center">
                        <input type="text" name="dkplus_customer_id" class="form-control form-control-sm" placeholder="Customer ID" style="width:130px" value="${esc(customerId)}">
                        <button type="button" class="btn btn-outline-secondary btn-sm mb-0 fetch-customer-btn"
                                data-fetch-url="${esc(fetchUrlTpl)}"
                                data-bs-toggle="tooltip" title="Look up customer name in dkPlus">
                            <i class="material-icons text-sm" style="line-height:1">search</i>
                        </button>
                        <input type="text" name="dkplus_customer_name" class="form-control form-control-sm flex-grow-1" placeholder="Name (auto-fills after Fetch)" value="${esc(customerName ?? '')}" style="min-width:180px">
                        <button type="submit" class="btn btn-outline-primary btn-sm mb-0">
                            <i class="material-icons text-sm align-middle me-1">link</i>Save
                        </button>
                    </div>
                </form>`;
        };

        /* Same idea but for the by-property card layout: header row with customer
           name + ID + a collapsed Edit form. Used when a .customer-cell with
           data-layout="byproperty" is updated inline after a successful save. */
        const byPropertyCustomerHtml = (propertyId, customerId, customerName, action, csrf, fetchUrlTpl) => {
            const name = customerName || '—';
            return `
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <span class="text-xs text-uppercase text-muted fw-semibold">Customer</span>
                    <span class="text-sm fw-semibold">${esc(name)}</span>
                    <span class="text-xs text-muted font-monospace">#${esc(customerId)}</span>
                    <details class="ms-auto" data-details-key="cust_byprop_${esc(propertyId)}">
                        <summary class="text-xs text-primary" style="cursor:pointer">Edit</summary>
                        <form method="POST" action="${esc(action)}" class="billing-form mt-2" data-ajax="true">
                            <input type="hidden" name="_token" value="${esc(csrf)}">
                            <input type="hidden" name="property_id" value="${esc(propertyId)}">
                            <div class="d-flex gap-1 mb-1 flex-wrap">
                                <input type="text" name="dkplus_customer_id" class="form-control form-control-sm" placeholder="ID" style="width:110px" value="${esc(customerId)}">
                                <button type="button" class="btn btn-outline-secondary btn-sm mb-0 fetch-customer-btn"
                                        data-fetch-url="${esc(fetchUrlTpl)}"
                                        data-bs-toggle="tooltip" title="Look up customer name in dkPlus">
                                    <i class="material-icons text-sm" style="line-height:1">search</i>
                                </button>
                                <input type="text" name="dkplus_customer_name" class="form-control form-control-sm flex-grow-1" placeholder="Name" value="${esc(customerName ?? '')}">
                                <button type="submit" class="btn btn-outline-dark btn-sm mb-0">Save</button>
                            </div>
                        </form>
                    </details>
                </div>`;
        };

        const swalConfirm = msg => Swal.fire({
            title: 'Confirm action', text: msg, icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#344767', cancelButtonColor: '#8392ab',
            confirmButtonText: 'Yes, proceed', cancelButtonText: 'Cancel',
            focusCancel: true,
        });

        const spinnerHtml = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';

        /* Use event delegation so forms injected by DOM updates are also handled */
        document.addEventListener('submit', async function (e) {
            const form = e.target.closest('.billing-form');
            if (!form) return;
            e.preventDefault();

            // ── Confirmation dialog ───────────────────────────────────────
            if (form.dataset.confirm) {
                const res = await swalConfirm(form.dataset.confirm);
                if (!res.isConfirmed) return;
            }

            const btn      = form.querySelector('button[type="submit"]:not([disabled])');
            const origHtml = btn ? btn.innerHTML : null;
            const setLoading = on => { if (btn) { btn.disabled = on; btn.innerHTML = on ? spinnerHtml : origHtml; } };

            // ── AJAX customer save — update DOM inline, no reload ─────────
            if (form.dataset.ajax === 'true') {
                setLoading(true);
                let data;
                try {
                    data = await window.brafaPostForm(form);
                } catch (err) {
                    console.error('[customer-save] POST failed:', err);
                    Swal.fire({ icon: 'error', title: 'Save failed', text: err.message || 'An error occurred' });
                    setLoading(false);
                    return;
                }

                // Server side OK. Toast the success then do best-effort UI updates
                // — even if a DOM render below throws, the server save already succeeded.
                Swal.fire({ toast: true, position: 'bottom-end', icon: 'success',
                            title: data.message || 'Saved!',
                            showConfirmButton: false, timer: 3000, timerProgressBar: true });

                try {
                    const cell = form.closest('.customer-cell') || form.closest('td');
                    if (cell) {
                        const propertyId   = form.querySelector('input[name="property_id"]')?.value ?? '';
                        const csrf         = document.querySelector('meta[name="csrf-token"]')?.content
                                            ?? form.querySelector('input[name="_token"]')?.value ?? '';
                        const fetchUrlTpl  = form.querySelector('.fetch-customer-btn')?.dataset.fetchUrl ?? '';
                        const layout       = cell.dataset.layout || 'billing';

                        cell.innerHTML =
                              layout === 'byproperty' ? byPropertyCustomerHtml(propertyId, data.customer_id ?? '', data.customer_name ?? '', form.action, csrf, fetchUrlTpl)
                            : layout === 'customers'  ? customersCustomerHtml( propertyId, data.customer_id ?? '', data.customer_name ?? '', form.action, csrf, fetchUrlTpl)
                                                      : linkedCustomerHtml(    propertyId, data.customer_id ?? '', data.customer_name ?? '', form.action, csrf, fetchUrlTpl);

                        // Re-init tooltips on injected elements
                        cell.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
                            if (typeof brafaBS !== 'undefined') new brafaBS.Tooltip(el, { boundary: 'window' });
                        });

                        // Layout-specific re-enable logic for the parent's primary button
                        if (layout === 'customers') {
                            const row = cell.closest('.customer-row');
                            if (row) {
                                row.dataset.status = 'linked';
                                const statusCell = row.querySelector('.status-cell');
                                if (statusCell) {
                                    statusCell.innerHTML = '<span class="badge bg-gradient-success text-xs">Linked</span>';
                                }
                                row.classList.add('row-flash');
                                setTimeout(() => row.classList.remove('row-flash'), 800);
                            }
                            if (typeof window.brafaCustomersRecount === 'function') window.brafaCustomersRecount();

                            // Propagate to the matching by-property card so its "No customer"
                            // badge / Create-invoice button update without a reload.
                            const matchingCard = document.querySelector(`.by-property-card[data-property-id="${propertyId}"]`);
                            if (matchingCard) {
                                matchingCard.dataset.hasCustomer = '1';
                                matchingCard.querySelector('.property-title .badge.bg-gradient-warning')?.remove();
                                const cBtn = matchingCard.querySelector('.create-consolidated-btn');
                                if (cBtn) delete cBtn.dataset.noCustomer;
                                if (typeof window.brafaRecomputeSelected === 'function') window.brafaRecomputeSelected(matchingCard);
                            }
                        } else if (layout === 'byproperty') {
                            const card = cell.closest('.by-property-card');
                            if (card) {
                                card.dataset.hasCustomer = '1';
                                const noCustBadge = card.querySelector('.property-title .badge.bg-gradient-warning');
                                if (noCustBadge && noCustBadge.textContent.trim().includes('No customer')) {
                                    noCustBadge.remove();
                                }
                                const createBtn = card.querySelector('.create-consolidated-btn');
                                if (createBtn) delete createBtn.dataset.noCustomer;
                                if (typeof window.brafaRecomputeSelected === 'function') window.brafaRecomputeSelected(card);
                            }
                        } else {
                            cell.closest('tr')?.querySelectorAll('button[type="submit"]:disabled').forEach(b => {
                                if (b.textContent.trim() === 'Create') {
                                    b.disabled = false;
                                    b.title    = 'Create invoice in dkPlus';
                                }
                            });
                        }
                    }
                } catch (renderErr) {
                    // Server save succeeded — only the UI render below failed.
                    // Don't show an error toast for this (save was real). Log only.
                    console.warn('[customer-save] inline DOM update threw after a successful save:', renderErr);
                }

                setLoading(false);
                return;
            }

            // ── Standard redirect-based forms — save scroll, then submit ──
            sessionStorage.setItem('brafa_scroll_y', window.scrollY);
            setLoading(true);
            form.submit();
        });
    })();

    // ── API checkbox select all / none ─────────────────────────────────────
    (() => {
        document.getElementById('api-select-all')?.addEventListener('click', () => {
            document.querySelectorAll('input[name="api[]"]').forEach(cb => { cb.checked = true; });
        });
        document.getElementById('api-deselect-all')?.addEventListener('click', () => {
            document.querySelectorAll('input[name="api[]"]').forEach(cb => { cb.checked = false; });
        });
    })();

    // ── Bootstrap tooltips (for invoice action icons + legend) ────────────
    (() => {
        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
            if (typeof brafaBS !== 'undefined') new brafaBS.Tooltip(el, { boundary: 'window' });
        });
    })();

    // ── BY PROPERTY TAB: inline (no-reload) state machine for skip / bulk-skip / consolidated invoice
    (() => {
        const fmtIsk = n => Math.round(Number(n || 0)).toLocaleString('is-IS').replaceAll(',', '.') + ' ISK';
        const esc    = s => String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&#34;');
        const csrfToken = () => document.querySelector('meta[name="csrf-token"]')?.content || '';
        const toast = (icon, title) => Swal.fire({
            toast: true, position: 'bottom-end', icon, title,
            showConfirmButton: false, timer: icon === 'error' ? 6000 : 3500, timerProgressBar: true,
        });

        // ── Per-row cell renderers ─────────────────────────────────────────
        function renderCheckboxCell(row, hasCustomer) {
            const status = row.dataset.status;
            const month  = row.dataset.month;
            if (status === 'pending') {
                return `<input type="checkbox" name="months[]" value="${esc(month)}" class="form-check-input month-cb"${hasCustomer ? '' : ' disabled'}>`;
            }
            return `<span class="text-xs text-muted">—</span>`;
        }

        function renderStatusCell(row, opts = {}) {
            const status = row.dataset.status;
            if (status === 'invoiced') {
                const id = opts.invoiceId ?? row.dataset.invoiceId ?? '';
                const st = (opts.invoiceStatus ?? row.dataset.invoiceStatus ?? '').toLowerCase();
                return `<span class="badge bg-gradient-success text-xs">Invoiced</span>`
                     + (id ? `<span class="text-xs text-muted ms-1 font-monospace">#${esc(id)}</span>` : '')
                     + (st ? `<span class="badge text-xs ms-1 invoice-status-badge" data-status="${esc(st)}">${esc(st.toUpperCase())}</span>` : '');
            }
            if (status === 'skipped') {
                const reason = opts.reason ?? row.dataset.skipReason ?? '';
                return `<span class="badge bg-gradient-info text-xs">Skipped</span>${reason ? `<span class="text-xs text-muted ms-1 skip-reason-text">— ${esc(reason)}</span>` : ''}`;
            }
            return `<span class="badge bg-gradient-warning text-dark text-xs">Pending</span>`;
        }

        function renderActionCell(row) {
            const status = row.dataset.status;
            const card = row.closest('.by-property-card');
            if (status === 'pending') {
                const hasCustomer = card?.dataset.hasCustomer === '1';
                return `<span class="d-inline-flex align-items-center gap-2">
                            <button type="button" class="btn btn-outline-primary btn-sm mb-0 px-2 invoice-month-btn" data-month="${esc(row.dataset.month)}"${hasCustomer ? '' : ' disabled'} title="${hasCustomer ? 'Create a dkPlus invoice for this month only' : 'Link a dkPlus customer first'}"><i class="material-icons text-xs align-middle me-1">receipt_long</i>Invoice</button>
                            <button type="button" class="btn btn-link btn-sm p-0 text-xs skip-toggle-btn" data-property-id="${esc(card?.dataset.propertyId || '')}" data-month="${esc(row.dataset.month)}" data-action="skip">Skip</button>
                        </span>`;
            }
            if (status === 'invoiced') {
                const id = row.dataset.invoiceId || '';
                if (!id) return '';
                const pdf = (document.getElementById('tab-by-property')?.dataset.routePdf || '').replace('__ID__', encodeURIComponent(id));
                return `<span class="d-inline-flex gap-1 invoice-actions">
                            <button type="button" class="btn btn-outline-secondary btn-sm mb-0 px-2 invoice-sync-btn" data-month="${esc(row.dataset.month)}" title="Sync status from dkPlus"><i class="material-icons" style="font-size:14px">sync</i></button>
                            <a href="${esc(pdf)}" target="_blank" rel="noopener" class="btn btn-outline-success btn-sm mb-0 px-2" title="Open PDF"><i class="material-icons" style="font-size:14px">picture_as_pdf</i></a>
                            <button type="button" class="btn btn-outline-info btn-sm mb-0 px-2 invoice-email-btn" data-invoice-id="${esc(id)}" title="Send invoice by email via dkPlus"><i class="material-icons" style="font-size:14px">email</i></button>
                        </span>`;
            }
            const action = status === 'skipped' ? 'unskip' : 'skip';
            const label  = status === 'skipped' ? 'Unskip' : 'Skip';
            return `<button type="button"
                            class="btn btn-link btn-sm p-0 text-xs skip-toggle-btn"
                            data-property-id="${esc(row.closest('.by-property-card')?.dataset.propertyId || '')}"
                            data-month="${esc(row.dataset.month)}"
                            data-action="${action}">${label}</button>`;
        }

        function renderSubtotalCell(row) {
            const status = row.dataset.status;
            const orig = Number(row.dataset.originalSubtotal || 0);
            return fmtIsk(status === 'skipped' ? 0 : orig);
        }

        function flash(row) {
            row.classList.remove('row-flash');
            // Force reflow so the class re-applies even on rapid repeats.
            void row.offsetWidth;
            row.classList.add('row-flash');
            setTimeout(() => row.classList.remove('row-flash'), 700);
        }

        // ── Set a row's status and rewrite its mutable cells ───────────────
        function setRowStatus(row, status, opts = {}) {
            row.dataset.status = status;
            // Settled rows are hidden by CSS by default; keep a row the user just
            // changed visible until the next reload so the change is not "lost".
            row.classList.toggle('keep-visible', status !== 'pending');
            row.hidden = false;

            if (status === 'invoiced' && opts.invoiceId) {
                row.dataset.invoiceId = opts.invoiceId;
            }
            if (status === 'invoiced' && opts.invoiceStatus !== undefined) {
                row.dataset.invoiceStatus = opts.invoiceStatus || '';
            }
            if (status === 'skipped') {
                row.dataset.skipReason = opts.reason ?? '';
            } else {
                delete row.dataset.skipReason;
            }

            const card = row.closest('.by-property-card');
            const hasCustomer = card?.dataset.hasCustomer === '1';

            const cb     = row.querySelector('.cb-cell');
            const sub    = row.querySelector('.subtotal-cell');
            const stat   = row.querySelector('.status-cell');
            const action = row.querySelector('.action-cell');

            if (cb)     cb.innerHTML     = renderCheckboxCell(row, hasCustomer);
            if (sub)    sub.textContent  = renderSubtotalCell(row);
            if (stat)   stat.innerHTML   = renderStatusCell(row, opts);
            if (action) action.innerHTML = renderActionCell(row);

            // Update the matching mini-strip chip if any.
            // Wrapped in try/catch because Bootstrap 5's Tooltip.setContent()
            // can throw when the popper is in an unexpected state — and an
            // uncaught error here halted the outer forEach in bulk-skip, so
            // only the first row would actually get marked.
            try {
                const chip = card?.querySelector(`.month-chip[data-month="${row.dataset.month}"]`);
                if (chip) {
                    chip.dataset.status = status;
                    const newTitle = `${row.dataset.month} · ${status.charAt(0).toUpperCase()}${status.slice(1)}`;
                    chip.setAttribute('title', newTitle);
                    // Dispose+recreate is safer across Bootstrap versions than setContent().
                    try {
                        const existing = brafaBS?.Tooltip?.getInstance(chip);
                        if (existing) existing.dispose();
                        if (typeof brafaBS !== 'undefined' && brafaBS.Tooltip) {
                            new brafaBS.Tooltip(chip, { boundary: 'window' });
                        }
                    } catch { /* tooltip update is cosmetic — ignore */ }
                }
            } catch { /* defensive */ }

            flash(row);
        }

        // ── Recompute the card header + selected-total widget from row state
        function recomputeCard(card) {
            const loaded = card.querySelector('.by-property-collapse')?.dataset.loaded === '1';
            // pendingCount includes the running month (drives the action bar);
            // unbilledCount/Total leave it out (billed in arrears).
            let unbilledCount = 0, unbilledTotal = 0, skippedCount = 0, pendingCount = 0, settledCount = 0;

            if (loaded) {
                // Body present → the month rows are the source of truth.
                const rows = [...card.querySelectorAll('.month-row')];
                const unbilledMonths = [];
                rows.forEach(row => {
                    const orig = Number(row.dataset.originalSubtotal || 0);
                    if (row.dataset.status === 'pending') {
                        pendingCount++;
                        if (row.dataset.current !== '1') { unbilledCount++; unbilledTotal += orig; unbilledMonths.push(row.dataset.month); }
                    } else {
                        settledCount++;
                        if (row.dataset.status === 'skipped') skippedCount++;
                    }
                });
                unbilledMonths.sort();
                card.dataset.unbilledMonths = unbilledMonths.join(',');
                card.dataset.oldestUnbilled = unbilledMonths[0] || '';
                card.dataset.pendingCount   = pendingCount;
            } else {
                // Collapsed, never expanded → header was rendered from the same numbers.
                unbilledCount = Number(card.dataset.unbilledCount || 0);
                unbilledTotal = Number(card.dataset.unbilledTotal || 0);
                settledCount  = Number(card.dataset.settledCount  || 0);
                pendingCount  = Number(card.dataset.pendingCount  || 0);
                skippedCount  = Number(card.querySelector('.skipped-count')?.textContent || 0);
            }

            // Keep the card's data attributes in sync so sort/filter stay correct after inline changes.
            card.dataset.unbilledCount = unbilledCount;
            card.dataset.unbilledTotal = unbilledTotal;
            card.dataset.settledCount  = settledCount;
            if (unbilledCount === 0) { card.dataset.oldestUnbilled = ''; card.dataset.unbilledAge = 0; card.dataset.unbilledMonths = ''; }
            card.querySelector('.age-badge')?.classList.toggle('d-none', unbilledCount === 0 || Number(card.dataset.unbilledAge || 0) < 2);
            const settledCountEl = card.querySelector('.settled-count');
            if (settledCountEl) settledCountEl.textContent = settledCount;
            card.querySelector('.settled-toggle-wrap')?.classList.toggle('d-none', settledCount === 0);

            // Header
            card.querySelector('.unbilled-count')?.replaceChildren(document.createTextNode(unbilledCount));
            const monthLabel = card.querySelector('.unbilled-month-label');
            if (monthLabel) monthLabel.textContent = unbilledCount === 1 ? 'month' : 'months';

            const totalEl = card.querySelector('.unbilled-total');
            if (totalEl) {
                totalEl.textContent = fmtIsk(unbilledTotal);
                totalEl.classList.toggle('text-warning', unbilledTotal > 0);
                totalEl.classList.toggle('text-muted',   unbilledTotal === 0);
            }

            const skippedLine  = card.querySelector('.skipped-line');
            const skippedCountEl = card.querySelector('.skipped-count');
            if (skippedCountEl) skippedCountEl.textContent = skippedCount;
            if (skippedLine)    skippedLine.classList.toggle('d-none', skippedCount === 0);

            card.classList.toggle('has-unbilled', unbilledCount > 0);

            // Header one-click invoice button
            const invBtn = card.querySelector('.invoice-closed-btn');
            if (invBtn) {
                invBtn.classList.toggle('d-none', unbilledCount === 0);
                const c = invBtn.querySelector('.invoice-closed-count');
                const l = invBtn.querySelector('.invoice-closed-label');
                if (c) c.textContent = unbilledCount;
                if (l) l.textContent = unbilledCount === 1 ? 'month' : 'months';
                if (card.dataset.hasCustomer === '1') invBtn.disabled = false;
            }

            // Action bar visibility — any pending row (even the running month) keeps it available.
            card.querySelector('.card-action-bar')?.classList.toggle('d-none', pendingCount === 0);
            card.querySelector('.all-done-msg')?.classList.toggle('d-none',    pendingCount > 0);

            // Selected-total widget
            recomputeSelected(card);
            window.brafaApplyByPropertyFilters?.();
        }

        function recomputeSelected(card) {
            const checked = card.querySelectorAll('.month-cb:checked');
            let total = 0;
            checked.forEach(cb => {
                const row = cb.closest('tr');
                total += Number(row?.dataset.originalSubtotal || 0);
            });

            const cap         = card.querySelectorAll('.month-cb').length;
            const totalEl     = card.querySelector('.selected-total');
            const countEl     = card.querySelector('.selected-count-line');
            const countNum    = card.querySelector('.selected-count');
            const capEl       = card.querySelector('.unbilled-cap');
            const submit      = card.querySelector('.create-consolidated-btn');
            const bulkSkipBtn = card.querySelector('.bulk-skip-btn');
            const chip        = card.querySelector('.selection-chip');
            const chipCount   = card.querySelector('.selection-chip-count');
            const chipTotal   = card.querySelector('.selection-chip-total');

            if (capEl)   capEl.textContent   = cap;
            if (countNum) countNum.textContent = checked.length;
            if (totalEl) totalEl.textContent = fmtIsk(total);
            if (countEl) {
                // The count line was: "<.selected-count>0</> of <.unbilled-cap>N</> unbilled selected"
                // Just refresh the children, leaving the surrounding text intact.
                // (Already done above via countNum / capEl.)
            }

            // Selection chip in header
            if (chip) {
                chip.classList.toggle('d-none', checked.length === 0);
                if (chipCount) chipCount.textContent = checked.length;
                if (chipTotal) chipTotal.textContent = fmtIsk(total);
            }

            if (submit) {
                const hasCustomer = !submit.dataset.noCustomer;
                submit.disabled = checked.length === 0 || !hasCustomer;
                submit.title = !hasCustomer
                    ? 'Link a dkPlus customer first'
                    : (checked.length === 0
                        ? 'Pick at least one month'
                        : `Send a consolidated invoice covering ${checked.length} months`);
            }
            if (bulkSkipBtn) {
                bulkSkipBtn.disabled = checked.length === 0;
                bulkSkipBtn.title = checked.length === 0
                    ? 'Pick months first'
                    : `Mark ${checked.length} ${checked.length === 1 ? 'month' : 'months'} as non-billable`;
            }
        }

        // ── Expose for cross-IIFE callers (e.g. the customer-save handler
        //    needs to re-evaluate Create-button state after linking a customer).
        window.brafaRecomputeSelected = recomputeSelected;
        window.brafaRecomputeCard     = recomputeCard;
        window.brafaSettleCardMonths  = (card, months, status) => {
            const loaded = card.querySelector('.by-property-collapse')?.dataset.loaded === '1';
            if (loaded) {
                months.forEach(m => {
                    const row = card.querySelector(`.month-row[data-month="${m}"]`);
                    if (row) { try { setRowStatus(row, status, {}); } catch {} }
                });
            } else {
                settleUnloaded(card, months, status);
            }
            recomputeCard(card);
        };

        // ── Initial render of every card ──────────────────────────────────
        document.querySelectorAll('.by-property-card').forEach(recomputeCard);

        // ── Live updates as the user clicks checkboxes ─────────────────────
        document.addEventListener('change', e => {
            if (!e.target.matches?.('.month-cb')) return;
            const card = e.target.closest('.by-property-card');
            if (card) recomputeSelected(card);
        });

        // ── Select-all / clear ─────────────────────────────────────────────
        document.addEventListener('click', e => {
            const card = e.target.closest('.by-property-card');
            if (!card) return;

            if (e.target.matches('.select-all-unbilled-btn')) {
                e.preventDefault();
                // Billing is done in arrears: the running month is never auto-selected.
                card.querySelectorAll('.month-cb:not(:disabled)').forEach(cb => {
                    cb.checked = cb.closest('tr')?.dataset.current !== '1';
                });
                recomputeSelected(card);
            } else if (e.target.matches('.select-none-btn')) {
                e.preventDefault();
                card.querySelectorAll('.month-cb').forEach(cb => cb.checked = false);
                recomputeSelected(card);
            }
        });

        // ── Bulk skip selected months ──────────────────────────────────────
        document.addEventListener('click', async e => {
            const btn = e.target.closest('.bulk-skip-btn');
            if (!btn || btn.disabled) return;

            const card = btn.closest('.by-property-card');
            const checkedRows = [...card.querySelectorAll('.month-cb:checked')].map(cb => cb.closest('tr'));
            if (checkedRows.length === 0) return;

            const months = checkedRows.map(r => r.dataset.month);
            const propertyId = card.dataset.propertyId;

            const r = await Swal.fire({
                title: `Mark ${months.length} ${months.length === 1 ? 'month' : 'months'} as non-billable?`,
                html: `<div class="text-start text-sm text-muted">${months.join(', ')}</div>`,
                input: 'text',
                inputLabel: 'Reason (optional, applied to all)',
                inputPlaceholder: 'e.g. free trial, dispute, demo',
                showCancelButton: true,
                confirmButtonColor: '#5e72e4',
                cancelButtonColor:  '#8392ab',
                confirmButtonText:  'Skip selected',
            });
            if (!r.isConfirmed) return;
            const reason = r.value || '';

            btn.disabled = true;
            const fd = new FormData();
            fd.append('_token',      csrfToken());
            fd.append('property_id', propertyId);
            fd.append('action',      'skip');
            if (reason) fd.append('reason', reason);
            months.forEach(m => fd.append('months[]', m));

            try {
                const res = await fetch('{{ route('locks-by-month.billing-skip-bulk') }}', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
                    body: fd,
                });
                const data = await res.json();
                if (!res.ok) throw new Error(data.message || data.errors?.[0] || 'Bulk skip failed');

                // Iterate inside try/catch per row so a single failed UI update
                // never blocks the remaining months from being marked.
                checkedRows.forEach(row => {
                    try { setRowStatus(row, 'skipped', { reason }); }
                    catch (e) { console.warn('setRowStatus failed for', row?.dataset?.month, e); }
                });
                recomputeCard(card);
                toast('success', data.message || `Skipped ${months.length} months.`);
            } catch (err) {
                toast('error', err.message);
                btn.disabled = false;
            }
        });

        // ── Per-row Skip / Unskip ──────────────────────────────────────────
        document.addEventListener('click', async e => {
            const btn = e.target.closest('.skip-toggle-btn');
            if (!btn) return;

            const action = btn.dataset.action;
            const month  = btn.dataset.month;
            const propertyId = btn.dataset.propertyId;
            const card = btn.closest('.by-property-card');
            const row  = btn.closest('tr');
            let reason = '';

            if (action === 'skip') {
                const r = await Swal.fire({
                    title: `Mark ${month} as non-billable?`,
                    input: 'text',
                    inputLabel: 'Reason (optional)',
                    inputPlaceholder: 'e.g. free trial, dispute, demo',
                    showCancelButton: true,
                    confirmButtonColor: '#5e72e4',
                });
                if (!r.isConfirmed) return;
                reason = r.value || '';
            } else {
                const r = await Swal.fire({
                    title: `Re-include ${month} in billing?`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#5e72e4',
                });
                if (!r.isConfirmed) return;
            }

            const fd = new FormData();
            fd.append('_token',      csrfToken());
            fd.append('property_id', propertyId);
            fd.append('month',       month);
            fd.append('action',      action);
            if (reason) fd.append('reason', reason);

            btn.disabled = true;
            try {
                const res = await fetch('{{ route('locks-by-month.billing-skip') }}', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
                    body: fd,
                });
                const data = await res.json();
                if (!res.ok) throw new Error(data.message || 'Skip toggle failed');

                if (row) {
                    setRowStatus(row, action === 'skip' ? 'skipped' : 'pending', { reason });
                    recomputeCard(card);
                }
                toast('success', data.message || 'Updated.');
            } catch (err) {
                toast('error', err.message);
                btn.disabled = false;
            }
        });

        // ── Shared helpers for the header / row invoice actions ───────────
        const tabEl   = document.getElementById('tab-by-property');
        const ROUTES  = {
            consolidated: tabEl?.dataset.routeConsolidated || '',
            single:       tabEl?.dataset.routeInvoice || '',
            sync:         tabEl?.dataset.routeSync || '',
            email:        tabEl?.dataset.routeEmail || '',
        };
        // Build a detached form so brafaPostForm's CSRF/error handling is reused.
        function postFields(url, fields) {
            const f = document.createElement('form');
            f.setAttribute('action', url);
            Object.entries(fields).forEach(([k, v]) => {
                (Array.isArray(v) ? v : [v]).forEach(val => {
                    const i = document.createElement('input');
                    i.type = 'hidden'; i.name = k; i.value = val;
                    f.appendChild(i);
                });
            });
            return window.brafaPostForm(f);
        }
        // Months of a collapsed (unloaded) card that "Invoice N months" would send.
        function closedUnbilledMonths(card) {
            const loaded = card.querySelector('.by-property-collapse')?.dataset.loaded === '1';
            if (loaded) {
                return [...card.querySelectorAll('.month-row[data-status="pending"][data-current="0"]')]
                    .map(r => ({ month: r.dataset.month, subtotal: Number(r.dataset.originalSubtotal || 0) }));
            }
            const months = (card.dataset.unbilledMonths || '').split(',').filter(Boolean);
            // Per-month subtotals are unknown without the body — only the total is.
            return months.map((m, i) => ({ month: m, subtotal: i === 0 ? Number(card.dataset.unbilledTotal || 0) : 0 }));
        }
        // Mark months as settled on a card whose body was never loaded: chips + counters only.
        function settleUnloaded(card, months, status) {
            months.forEach(m => {
                const chip = card.querySelector(`.month-chip[data-month="${m}"]`);
                if (chip) { chip.dataset.status = status; chip.setAttribute('title', `${m} · ${status.charAt(0).toUpperCase()}${status.slice(1)}`); }
            });
            const remaining = (card.dataset.unbilledMonths || '').split(',').filter(m => m && !months.includes(m));
            card.dataset.unbilledMonths = remaining.join(',');
            card.dataset.unbilledCount  = remaining.length;
            if (remaining.length === 0) card.dataset.unbilledTotal = 0;
            card.dataset.settledCount   = Number(card.dataset.settledCount || 0) + months.length;
            card.dataset.pendingCount   = Math.max(0, Number(card.dataset.pendingCount || 0) - months.length);
            if (status === 'skipped') {
                const sc = card.querySelector('.skipped-count');
                if (sc) sc.textContent = Number(sc.textContent || 0) + months.length;
            }
        }

        function applyInvoiceToRows(card, months, invoiceId, status) {
            const loaded = card.querySelector('.by-property-collapse')?.dataset.loaded === '1';
            if (loaded) {
                months.forEach(m => {
                    const row = card.querySelector(`.month-row[data-month="${m}"]`);
                    if (!row) return;
                    try { setRowStatus(row, 'invoiced', { invoiceId, invoiceStatus: status }); }
                    catch (e) { console.warn('setRowStatus failed for', m, e); }
                });
            } else {
                settleUnloaded(card, months, 'invoiced');
            }
            card.dataset.latestInvoiceMonth = months.slice(-1)[0] || card.dataset.latestInvoiceMonth || '';
            const meta = card.querySelector('.latest-invoice-info');
            if (meta && invoiceId) {
                const lastMonth = months.slice(-1)[0] || '';
                meta.innerHTML = `last invoice <span class="font-monospace">${esc(invoiceId)}</span> (${esc(lastMonth)})`
                    + (status ? ` <span class="badge text-xs invoice-status-badge" data-status="${esc(status)}">${esc(status.toUpperCase())}</span>` : '');
            }
            recomputeCard(card);
        }

        // ── Header "Invoice N months": one consolidated invoice for every closed,
        //    unbilled month — no expanding, no ticking.
        document.addEventListener('click', async e => {
            const btn = e.target.closest('.invoice-closed-btn');
            if (!btn || btn.disabled) return;
            e.preventDefault();
            e.stopPropagation();

            const card = btn.closest('.by-property-card');
            const rows = closedUnbilledMonths(card);
            if (rows.length === 0) return;
            const months = rows.map(r => r.month);
            const total  = rows.reduce((sum, r) => sum + r.subtotal, 0);
            const propertyName = card.querySelector('.property-name')?.textContent?.trim() ?? 'this property';

            const confirm = await Swal.fire({
                title: 'Create consolidated invoice?',
                html: `<div class="text-start">
                        <div class="mb-2"><strong>${esc(propertyName)}</strong></div>
                        <div class="text-sm text-muted">${months.length} month${months.length === 1 ? '' : 's'}: ${months.join(', ')}</div>
                        <div class="text-sm mt-2"><strong>Total:</strong> ${esc(fmtIsk(total))}</div>
                       </div>`,
                icon: 'question',
                input: 'checkbox',
                inputValue: 0,
                inputPlaceholder: 'Email the invoice from dkPlus after creating it',
                showCancelButton: true,
                confirmButtonColor: '#5e72e4',
                cancelButtonColor: '#8392ab',
                confirmButtonText: 'Create invoice',
                cancelButtonText:  'Cancel',
                focusCancel: true,
            });
            if (!confirm.isConfirmed) return;
            const autoEmail = confirm.value ? '1' : '0';

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

            let data;
            try {
                data = await postFields(ROUTES.consolidated, {
                    property_id: card.dataset.propertyId,
                    'months[]':  months,
                    auto_email:  autoEmail,
                });
            } catch (err) {
                Swal.fire({ icon: 'error', title: 'Invoice failed', text: err.message || 'Operation failed.' });
                btn.disabled = false;
                btn.innerHTML = orig;
                return;
            }

            btn.innerHTML = orig;
            try {
                // A company change splits the run into one invoice per customer.
                const invoices = Array.isArray(data.invoices) && data.invoices.length ? data.invoices : [{ invoice_id: data.invoice_id || '', months: data.months || months }];
                invoices.forEach(inv => applyInvoiceToRows(card, inv.months || [], inv.invoice_id || '', 'submitted'));
            } catch (renderErr) { console.warn('[invoice-closed] UI update threw after a successful create:', renderErr); }
            toast('success', data.message || 'Invoice created.');
        });

        // ── Lock breakdown: why N locks, last activity, exclude from billing ─
        function renderLockBreakdown(b) {
            const flag = (on, cls, label, title) => on ? `<span class="badge ${cls} text-xs me-1" title="${esc(title)}">${esc(label)}</span>` : '';
            const nowMonth = new Date().toISOString().slice(0, 7);
            const rows = (b.locks || []).map(l => {
                const flags = flag(l.dormant, 'bg-gradient-warning text-dark', l.last_activity ? 'dormant' : 'no activity', `No lock event for ${@json(\App\Services\LockBillingService::DORMANT_DAYS)}+ days`)
                    + flag(l.orphan_unit, 'bg-gradient-danger', 'unit gone', 'None of its units exist in the rooms table any more')
                    + flag(l.backdated, 'bg-gradient-secondary', 'backdated?', 'On a row edited after creation — may count from an earlier month than it was added')
                    + (l.shared_with.length ? flag(true, 'bg-gradient-info', `shared ×${l.shared_with.length}`, 'Also assigned under: ' + l.shared_with.map(s => s.name).join(', ')) : '');
                const action = l.counted_now
                    ? `<span class="d-inline-flex align-items-center gap-1">
                           <input type="month" class="form-control form-control-sm lock-excl-month" value="${esc(nowMonth)}" style="width:140px" title="First month NOT billed — clear it to never bill this lock">
                           <button type="button" class="btn btn-outline-danger btn-sm mb-0 px-2 lock-excl-btn" data-lock-id="${esc(l.lock_id)}">Exclude</button>
                       </span>`
                    : `<span class="text-muted me-2">excluded ${l.excluded_from === 'always' ? 'always' : 'from ' + esc(l.excluded_from)}</span>
                       <button type="button" class="btn btn-link btn-sm p-0 text-xs lock-incl-btn" data-lock-id="${esc(l.lock_id)}">Bill again</button>`;
                return `<tr class="${l.counted_now ? '' : 'text-muted'}">
                    <td class="text-start"><div class="fw-semibold">${esc(l.name)}</div><div class="font-monospace text-muted">${esc(l.lock_id)}</div></td>
                    <td class="text-start">${esc(l.units.join(', '))}</td>
                    <td>${esc(l.first_month)}</td>
                    <td>${esc(l.last_activity || 'never')}</td>
                    <td class="text-start">${flags}</td>
                    <td class="text-end">${action}</td>
                </tr>`;
            }).join('');
            return `<div class="text-start text-sm mb-2">
                        <strong>${b.counted_now}</strong> of ${b.assigned} assigned locks counted now${b.flagged ? ` · <span class="text-danger">${b.flagged} flagged</span>` : ''}.
                        <span class="text-muted">Excluding keeps every month before the chosen month as it is; already-invoiced months never change.</span>
                    </div>
                    <div class="table-responsive" style="max-height:60vh">
                        <table class="table table-sm align-middle mb-0 text-xs lock-breakdown-table">
                            <thead><tr class="text-uppercase text-muted">
                                <th class="text-start">Lock</th><th class="text-start">Units</th><th>From</th><th>Last activity</th><th class="text-start">Flags</th><th class="text-end">Billing</th>
                            </tr></thead>
                            <tbody>${rows || '<tr><td colspan="6" class="text-muted">No locks assigned.</td></tr>'}</tbody>
                        </table>
                    </div>`;
        }

        document.addEventListener('click', async e => {
            const btn = e.target.closest('.lock-breakdown-btn');
            if (!btn) return;
            e.preventDefault();
            const card = btn.closest('.by-property-card');
            const pid  = btn.dataset.propertyId;
            const url  = (tabEl?.dataset.routeLocks || '').replace('__ID__', encodeURIComponent(pid));
            let breakdown;
            try {
                const res = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }, credentials: 'same-origin' });
                breakdown = await res.json();
                if (!res.ok) throw new Error(breakdown.message || `HTTP ${res.status}`);
            } catch (err) {
                toast('error', err.message || 'Could not load locks.');
                return;
            }
            let changed = false;
            await Swal.fire({
                title: `Locks · ${esc(btn.dataset.propertyName || pid)}`,
                html: `<div class="lock-breakdown-body">${renderLockBreakdown(breakdown)}</div>`,
                width: 1100,
                showConfirmButton: true,
                confirmButtonText: 'Close',
                confirmButtonColor: '#344767',
                didOpen: popup => {
                    popup.addEventListener('click', async ev => {
                        const ex = ev.target.closest('.lock-excl-btn');
                        const inc = ev.target.closest('.lock-incl-btn');
                        if (!ex && !inc) return;
                        const tr = (ex || inc).closest('tr');
                        const fields = { property_id: pid, lock_id: (ex || inc).dataset.lockId, action: ex ? 'exclude' : 'include' };
                        if (ex) fields.excluded_from = tr.querySelector('.lock-excl-month')?.value || '';
                        (ex || inc).disabled = true;
                        try {
                            const data = await postFields(tabEl.dataset.routeLockExclusion, fields);
                            popup.querySelector('.lock-breakdown-body').innerHTML = renderLockBreakdown(data.breakdown);
                            changed = true;
                            toast('success', data.message || 'Saved.');
                        } catch (err) {
                            (ex || inc).disabled = false;
                            toast('error', err.message || 'Could not save.');
                        }
                    });
                },
            });
            // Month rows / totals depend on the lock count — re-fetch the card body.
            if (changed && card) window.brafaReloadCardBody?.(card);
        });

        // ── Per-row "Invoice": a single-month dkPlus invoice for that row ──
        document.addEventListener('click', async e => {
            const btn = e.target.closest('.invoice-month-btn');
            if (!btn || btn.disabled) return;
            e.preventDefault();
            const card  = btn.closest('.by-property-card');
            const row   = btn.closest('tr');
            const month = row.dataset.month;
            const total = Number(row.dataset.originalSubtotal || 0);
            const propertyName = card.querySelector('.property-name')?.textContent?.trim() ?? 'this property';
            const confirm = await Swal.fire({
                title: `Invoice ${month} only?`,
                html: `<div class="text-start">
                        <div class="mb-2"><strong>${esc(propertyName)}</strong></div>
                        <div class="text-sm text-muted">One dkPlus invoice for ${esc(month)}${row.dataset.current === '1' ? ' (the running month — normally billed once it is over)' : ''}.</div>
                        <div class="text-sm mt-2"><strong>Total:</strong> ${esc(fmtIsk(total))}</div>
                       </div>`,
                icon: 'question',
                input: 'checkbox', inputValue: 0, inputPlaceholder: 'Email the invoice from dkPlus after creating it',
                showCancelButton: true, confirmButtonColor: '#5e72e4', cancelButtonColor: '#8392ab',
                confirmButtonText: 'Create invoice', cancelButtonText: 'Cancel', focusCancel: true,
            });
            if (!confirm.isConfirmed) return;
            const orig = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span>';
            let data;
            try {
                data = await postFields(ROUTES.single, { property_id: card.dataset.propertyId, month, auto_email: confirm.value ? '1' : '0' });
            } catch (err) {
                Swal.fire({ icon: 'error', title: 'Invoice failed', text: err.message || 'Operation failed.' });
                btn.disabled = false;
                btn.innerHTML = orig;
                return;
            }
            try { applyInvoiceToRows(card, [month], data.invoice_id || '', 'submitted'); }
            catch (renderErr) { console.warn('[invoice-month] UI update threw after a successful create:', renderErr); }
            toast('success', data.message || 'Invoice created.');
        });

        // ── Per-row Sync: refresh status/PDF from dkPlus for that invoice ──
        document.addEventListener('click', async e => {
            const btn = e.target.closest('.invoice-sync-btn');
            if (!btn || btn.disabled) return;
            e.preventDefault();
            const card = btn.closest('.by-property-card');
            const row  = btn.closest('tr');
            btn.disabled = true;
            const icon = btn.querySelector('.material-icons');
            if (icon) icon.textContent = 'hourglass_empty';
            try {
                const data = await postFields(ROUTES.sync, { property_id: card.dataset.propertyId, month: row.dataset.month });
                const status = (data.status || '').toLowerCase();
                // A consolidated invoice covers several months — update all of them.
                const months = Array.isArray(data.months) && data.months.length ? data.months : [row.dataset.month];
                months.forEach(m => {
                    const r = card.querySelector(`.month-row[data-month="${m}"]`);
                    if (!r) return;
                    r.dataset.invoiceStatus = status;
                    const stat = r.querySelector('.status-cell');
                    if (stat) stat.innerHTML = renderStatusCell(r, { invoiceStatus: status });
                    flash(r);
                });
                const info = card.querySelector('.latest-invoice-info');
                const headerBadge = info?.querySelector('.invoice-status-badge');
                if (headerBadge && data.invoice_id && info.textContent.includes(data.invoice_id)) {
                    headerBadge.dataset.status = status;
                    headerBadge.textContent = status.toUpperCase();
                }
                toast('success', data.message || 'Synced.');
            } catch (err) {
                toast('error', err.message || 'Sync failed.');
            } finally {
                btn.disabled = false;
                if (icon) icon.textContent = 'sync';
            }
        });

        // ── Per-row Email: send the dkPlus invoice email (confirm first) ───
        document.addEventListener('click', async e => {
            const btn = e.target.closest('.invoice-email-btn');
            if (!btn || btn.disabled) return;
            e.preventDefault();
            const invoiceId = btn.dataset.invoiceId;
            const r = await Swal.fire({
                title: `Send invoice #${invoiceId} by email?`,
                text: 'dkPlus will email the invoice to the customer on file.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#5e72e4',
                cancelButtonColor: '#8392ab',
                confirmButtonText: 'Send email',
            });
            if (!r.isConfirmed) return;
            btn.disabled = true;
            try {
                const data = await postFields(ROUTES.email, { invoice_id: invoiceId });
                toast('success', data.message || 'Email sent.');
            } catch (err) {
                toast('error', err.message || 'Email failed.');
            } finally {
                btn.disabled = false;
            }
        });

        // ── Consolidated invoice — submit, then inline-update affected rows
        document.addEventListener('submit', async function (e) {
            const form = e.target.closest('.consolidated-invoice-form');
            if (!form) return;
            e.preventDefault();

            const months = [...form.querySelectorAll('.month-cb:checked')].map(cb => cb.value);
            if (months.length === 0) return;

            const card         = form.closest('.by-property-card');
            const totalText    = card?.querySelector('.selected-total')?.textContent ?? '';
            const propertyName = card?.querySelector('.property-name')?.textContent?.trim() ?? 'this property';
            const autoEmail    = form.querySelector('.auto-email-cb')?.checked ?? false;

            // Immediate visual feedback: dim the button as soon as the click is registered.
            // Without this the user has no signal between click and Swal dialog appearing,
            // which feels like the page is hanging.
            const submit = form.querySelector('button[type="submit"]');
            const orig   = submit.innerHTML;
            submit.disabled = true;
            submit.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span>';

            const confirm = await Swal.fire({
                title: 'Create consolidated invoice?',
                html: `<div class="text-start">
                        <div class="mb-2"><strong>${esc(propertyName)}</strong></div>
                        <div class="text-sm text-muted">${months.length} month${months.length === 1 ? '' : 's'}: ${months.join(', ')}</div>
                        <div class="text-sm mt-2"><strong>Total:</strong> ${esc(totalText)}</div>
                        ${autoEmail ? '<div class="text-sm text-info mt-2">📧 Email will be sent automatically.</div>' : ''}
                       </div>`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#5e72e4',
                cancelButtonColor: '#8392ab',
                confirmButtonText: 'Create invoice',
                cancelButtonText:  'Cancel',
                focusCancel: true,
            });
            if (!confirm.isConfirmed) {
                // User cancelled — restore the button state.
                submit.disabled = false;
                submit.innerHTML = orig;
                return;
            }

            let data;
            try {
                data = await window.brafaPostForm(form);
            } catch (err) {
                console.error('[consolidated-invoice] POST failed:', err);
                Swal.fire({ icon: 'error', title: 'Invoice failed', text: err.message || 'Operation failed.' });
                submit.disabled = false;
                submit.innerHTML = orig;
                recomputeSelected(card);
                return;
            }

            // Server side OK. Best-effort UI updates.
            try {
                // Flip each invoiced row to status=invoiced with its invoice ID
                // (a company change yields one invoice per customer).
                const newId = data.invoice_id || '';
                const invoices = Array.isArray(data.invoices) && data.invoices.length ? data.invoices : [{ invoice_id: newId, months: data.months || months }];
                invoices.forEach(inv => (inv.months || []).forEach(m => {
                    const row = card.querySelector(`.month-row[data-month="${m}"]`);
                    if (!row) return;
                    try { setRowStatus(row, 'invoiced', { invoiceId: inv.invoice_id || '', invoiceStatus: 'submitted' }); }
                    catch (e) { console.warn('setRowStatus failed for', m, e); }
                }));

                // Update card header "last invoice" line
                const meta = card.querySelector('.latest-invoice-info');
                if (meta && newId) {
                    const lastMonth = (data.months || months).slice(-1)[0] || '';
                    meta.innerHTML = `last invoice <span class="font-monospace">${esc(newId)}</span> (${esc(lastMonth)})`;
                }

                // Reset the form's note + auto-email
                const note = form.querySelector('input[name="user_note"]');
                if (note) {
                    note.value = '';
                    note.closest('.input-group-outline')?.classList.remove('is-filled');
                }
                if (form.querySelector('.auto-email-cb')) form.querySelector('.auto-email-cb').checked = false;

                recomputeCard(card);
            } catch (renderErr) {
                console.warn('[consolidated-invoice] UI update threw after a successful create:', renderErr);
            }

            toast('success', data.message || 'Invoice created.');
            submit.disabled = false;
            submit.innerHTML = orig;
            recomputeSelected(card);
        });
    })();

    // ── PROPERTY SETTINGS DIALOG: internal notes + inactive-from (AJAX) ────
    (() => {
        const esc = s => String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&#34;');
        const toast = (icon, title) => Swal.fire({
            toast: true, position: 'bottom-end', icon, title,
            showConfirmButton: false, timer: 3500, timerProgressBar: true,
        });

        const modalEl = document.getElementById('propertySettingsModal');
        const form    = modalEl?.querySelector('.property-settings-form');
        if (!modalEl || !form) return;

        let modalCache = null;
        function modalInstance() {
            const M = brafaBS?.Modal || window.bootstrap?.Modal;
            if (!M) {
                // No usable Bootstrap: minimal manual show/hide so the dialog still works.
                return {
                    show: () => { modalEl.classList.add('show'); modalEl.style.display = 'block'; modalEl.removeAttribute('aria-hidden'); document.body.classList.add('modal-open'); },
                    hide: () => { modalEl.classList.remove('show'); modalEl.style.display = 'none'; modalEl.setAttribute('aria-hidden', 'true'); document.body.classList.remove('modal-open'); },
                };
            }
            if (M.getOrCreateInstance) return M.getOrCreateInstance(modalEl);
            return modalCache ??= new M(modalEl);
        }
        modalEl.querySelectorAll('[data-bs-dismiss="modal"]').forEach(b => b.addEventListener('click', () => modalInstance().hide()));

        // Open from any .settings-open-btn (property card header, Customers row).
        document.addEventListener('click', e => {
            const btn = e.target.closest?.('.settings-open-btn');
            if (!btn) return;
            e.preventDefault();
            e.stopPropagation();

            form.dataset.propertyId           = btn.dataset.propertyId || '';
            form.dataset.originalInactiveFrom = btn.dataset.inactiveFrom || '';
            form.dataset.originalDisabled     = btn.dataset.billingDisabled === '1' ? '1' : '0';
            form.querySelector('#settings_billing_disabled').checked = btn.dataset.billingDisabled === '1';
            const autoRow = form.querySelector('.settings-automation-row');
            autoRow.classList.toggle('d-none', btn.dataset.automationActive !== '1');
            form.querySelector('#settings_disable_automation').checked = true;
            form.querySelector('input[name="property_id"]').value = btn.dataset.propertyId || '';
            form.querySelector('textarea[name="notes"]').value     = btn.dataset.notes || '';
            form.querySelector('.inactive-from-input').value       = btn.dataset.inactiveFrom || '';
            modalEl.querySelector('.modal-title').textContent      = btn.dataset.propertyName || 'Property settings';
            modalEl.querySelector('.settings-modal-subtitle').textContent =
                `ID ${btn.dataset.propertyId || ''} · internal notes and billing status`;

            // Customer + history
            const curName = modalEl.querySelector('.cur-name');
            const curId   = modalEl.querySelector('.cur-id');
            curName.textContent = btn.dataset.customerName || (btn.dataset.customerId ? '—' : 'no customer linked');
            curId.textContent   = btn.dataset.customerId ? `#${btn.dataset.customerId}` : '';
            let periods = [];
            try { periods = JSON.parse(btn.dataset.periods || '[]'); } catch {}
            const list = modalEl.querySelector('.settings-customer-periods');
            list.innerHTML = periods.map(p => `
                <li class="d-flex align-items-center gap-2 py-1 border-top">
                    <span class="text-muted">${esc(p.from_month || 'start')} – ${esc(p.to_month)}</span>
                    <span>${esc(p.customer_name || '—')}</span>
                    <span class="text-muted font-monospace">#${esc(p.customer_id)}</span>
                    <button type="button" class="btn btn-link btn-sm p-0 ms-auto text-danger period-delete-btn" data-period-id="${esc(p.id)}" title="Remove this period — its months go back to the current customer">remove</button>
                </li>`).join('');
            const hand = modalEl.querySelector('.settings-handover');
            hand.open = false;
            hand.querySelector('.handover-customer-id').value   = '';
            hand.querySelector('.handover-customer-name').value = '';

            modalInstance().show();
            setTimeout(() => form.querySelector('textarea[name="notes"]')?.focus(), 250);
        });

        // Handover: look up the new customer's name in dkPlus.
        modalEl.querySelector('.handover-fetch-btn')?.addEventListener('click', async () => {
            const id = modalEl.querySelector('.handover-customer-id').value.trim();
            if (!id) return;
            const url = (modalEl.dataset.routeCustomerFetch || '').replace('__ID__', encodeURIComponent(id));
            try {
                const res  = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } });
                const data = await res.json();
                if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
                if (data.customer_name) modalEl.querySelector('.handover-customer-name').value = data.customer_name;
            } catch (err) { toast('error', err.message || 'Customer not found'); }
        });

        // Handover: close the current customer, switch to the new one, reload.
        modalEl.querySelector('.handover-submit-btn')?.addEventListener('click', async e => {
            const btn = e.currentTarget;
            const id    = modalEl.querySelector('.handover-customer-id').value.trim();
            const name  = modalEl.querySelector('.handover-customer-name').value.trim();
            const month = modalEl.querySelector('.handover-from-month').value;
            if (!id || !month) { toast('warning', 'Customer id and from-month are required.'); return; }
            const cur = modalEl.querySelector('.cur-name')?.textContent || '';
            const r = await Swal.fire({
                title: 'Hand over to a new company?',
                html: `<div class="text-start text-sm">From <strong>${esc(month)}</strong> invoices go to <strong>${esc(name || '#' + id)}</strong>.` +
                      (modalEl.querySelector('.cur-id')?.textContent ? `<div class="mt-2">Months before that stay with <strong>${esc(cur)}</strong>.</div>` : '') + '</div>',
                icon: 'question', showCancelButton: true, confirmButtonColor: '#344767', cancelButtonColor: '#8392ab', confirmButtonText: 'Hand over',
            });
            if (!r.isConfirmed) return;
            btn.disabled = true;
            const f = document.createElement('form');
            f.setAttribute('action', modalEl.dataset.routeHandover);
            [['property_id', form.dataset.propertyId], ['new_customer_id', id], ['new_customer_name', name], ['from_month', month]].forEach(([k, v]) => {
                const i = document.createElement('input'); i.type = 'hidden'; i.name = k; i.value = v; f.appendChild(i);
            });
            try {
                const data = await window.brafaPostForm(f);
                modalInstance().hide();
                try { sessionStorage.setItem('brafa_scroll_y', window.scrollY); } catch {}
                toast('success', data.message || 'Handed over — reloading…');
                setTimeout(() => window.location.reload(), 800);
            } catch (err) {
                Swal.fire({ icon: 'error', title: 'Could not hand over', text: err.message || 'Operation failed.' });
                btn.disabled = false;
            }
        });

        // Remove a closed customer period.
        modalEl.addEventListener('click', async e => {
            const del = e.target.closest?.('.period-delete-btn');
            if (!del) return;
            const r = await Swal.fire({ title: 'Remove this customer period?', text: 'Its months are invoiced to the current customer again.', icon: 'warning', showCancelButton: true, confirmButtonColor: '#f5365c', cancelButtonColor: '#8392ab', confirmButtonText: 'Remove' });
            if (!r.isConfirmed) return;
            const f = document.createElement('form');
            f.setAttribute('action', modalEl.dataset.routePeriodDelete);
            const i = document.createElement('input'); i.type = 'hidden'; i.name = 'period_id'; i.value = del.dataset.periodId; f.appendChild(i);
            try {
                const data = await window.brafaPostForm(f);
                modalInstance().hide();
                try { sessionStorage.setItem('brafa_scroll_y', window.scrollY); } catch {}
                toast('success', data.message || 'Removed — reloading…');
                setTimeout(() => window.location.reload(), 600);
            } catch (err) { toast('error', err.message || 'Could not remove.'); }
        });

        // Quick buttons: set / clear the inactive-from month input.
        document.addEventListener('click', e => {
            const deactivate = e.target.closest('.deactivate-now-btn');
            const clear      = e.target.closest('.clear-inactive-btn');
            if (!deactivate && !clear) return;
            e.preventDefault();
            const input = (deactivate || clear).closest('.property-settings-form')?.querySelector('.inactive-from-input');
            if (!input) return;
            input.value = deactivate ? (deactivate.dataset.month || '') : '';
            input.classList.add('is-valid');
            setTimeout(() => input.classList.remove('is-valid'), 1200);
        });

        form.addEventListener('submit', async e => {
            e.preventDefault();

            const submit = form.querySelector('button[type="submit"]');
            const orig   = submit.innerHTML;
            submit.disabled = true;
            submit.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span>';

            const originalInactive = form.dataset.originalInactiveFrom || '';
            const newInactive      = form.querySelector('.inactive-from-input')?.value || '';
            const originalDisabled = form.dataset.originalDisabled || '0';
            const newDisabled      = form.querySelector('#settings_billing_disabled')?.checked ? '1' : '0';
            // Checkbox + hidden fallback share a name: drop the fallback when ticked so "1" wins.
            const fallback = form.querySelector('.settings-billing-disabled-fallback');
            if (fallback) fallback.disabled = newDisabled === '1';
            // The automation tick only applies when the property is leaving billing.
            const autoCb = form.querySelector('#settings_disable_automation');
            if (autoCb) autoCb.disabled = !(newDisabled === '1' || newInactive !== '');

            let data;
            try {
                data = await window.brafaPostForm(form);
            } catch (err) {
                Swal.fire({ icon: 'error', title: 'Save failed', text: err.message || 'Operation failed.' });
                submit.disabled = false;
                submit.innerHTML = orig;
                return;
            }

            submit.disabled = false;
            submit.innerHTML = orig;
            modalInstance().hide();

            // A changed inactive-from month alters which rows exist — reload so the
            // server regenerates the card. Notes-only saves are updated inline.
            if (data.automation_off) window.brafaMarkAutomationOff?.(String(data.property_id ?? form.dataset.propertyId));
            if (newDisabled !== originalDisabled && newInactive === originalInactive) {
                window.brafaApplyBillingDisabled?.(String(data.property_id ?? form.dataset.propertyId), newDisabled === '1');
                form.dataset.originalDisabled = newDisabled;
            }
            if (newInactive !== originalInactive) {
                try { sessionStorage.setItem('brafa_scroll_y', window.scrollY); } catch {}
                toast('success', data.message || 'Saved — reloading…');
                setTimeout(() => window.location.reload(), 600);
                return;
            }

            const pid   = String(data.property_id ?? form.dataset.propertyId);
            const notes = (data.notes ?? '').trim();
            const has   = notes !== '';

            // Every opener for this property (card header + Customers row) carries the
            // current values so the next open shows what was just saved.
            document.querySelectorAll(`.settings-open-btn[data-property-id="${esc(pid)}"]`).forEach(btn => {
                btn.dataset.notes = notes;
                btn.classList.toggle('has-notes', has);
                btn.classList.toggle('btn-outline-info', has);
                btn.classList.toggle('btn-outline-secondary', !has);
                btn.querySelector('.material-icons').textContent = has ? 'sticky_note_2' : 'settings';
            });

            const card = document.querySelector(`.by-property-card[data-property-id="${esc(pid)}"]`);
            const preview = card?.querySelector('.notes-preview');
            if (preview) {
                preview.querySelector('.notes-preview-text').textContent = notes;
                preview.classList.toggle('d-none', !has);
            }
            const custCell = document.querySelector(`#tab-customers .customer-row[data-property-id="${esc(pid)}"] .customer-notes-cell`);
            if (custCell) custCell.textContent = has ? notes : '—';

            toast('success', data.message || 'Saved.');
        });
    })();

    // ── RECONCILE TAB: supersede / keep / reopen / inactive — all in place ─
    (() => {
        const tab = document.getElementById('tab-reconcile');
        if (!tab) return;
        const route = tab.dataset.route;
        const esc = s => String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&#34;');
        const toast = (icon, title) => Swal.fire({ toast: true, position: 'bottom-end', icon, title, showConfirmButton: false, timer: 3500, timerProgressBar: true });
        const reload = () => { try { sessionStorage.setItem('brafa_scroll_y', window.scrollY); } catch {} setTimeout(() => window.location.reload(), 600); };
        const postForm = (url, fields) => {
            const f = document.createElement('form');
            f.setAttribute('action', url);
            Object.entries(fields).forEach(([k, v]) => (Array.isArray(v) ? v : [v]).forEach(val => {
                const i = document.createElement('input'); i.type = 'hidden'; i.name = k; i.value = val; f.appendChild(i);
            }));
            return window.brafaPostForm(f);
        };

        // ── Show resolved (localStorage) ──────────────────────────────────
        const KEY = 'brafa_reconcile_show_resolved_v1';
        const showResolved = document.getElementById('reconcileShowResolved');
        function applyResolved() {
            const show = !!showResolved?.checked;
            let visible = 0, open = 0, resolved = 0;
            tab.querySelectorAll('.reconcile-cluster').forEach(c => {
                const hide = !show && c.dataset.status === 'resolved';
                c.classList.toggle('d-none', hide);
                if (!hide) visible++;
                if (c.dataset.status === 'open') open++; else resolved++;
            });
            const total = open + resolved;
            document.getElementById('reconcileAllResolved')?.classList.toggle('d-none', !(total > 0 && visible === 0));
            const openEl = tab.querySelector('.reconcile-open-count');
            const resEl  = tab.querySelector('.reconcile-resolved-count');
            if (openEl) openEl.textContent = open;
            if (resEl)  resEl.textContent  = resolved;
            const tabBadge = document.querySelector('#tab-reconcile-btn .badge');
            if (tabBadge) { tabBadge.textContent = open; tabBadge.classList.toggle('d-none', open === 0); }
            try { localStorage.setItem(KEY, show ? '1' : '0'); } catch {}
        }
        try { if (showResolved) showResolved.checked = (localStorage.getItem(KEY) ?? '0') === '1'; } catch {}
        showResolved?.addEventListener('change', applyResolved);

        // ── Row + cluster rendering from data attributes ──────────────────
        function renderMember(tr) {
            const disabled = tr.dataset.disabled === '1';
            const superseded = tr.dataset.superseded === '1';
            const kept = tr.dataset.kept === '1';
            const inactiveFrom = tr.dataset.inactiveFrom || '';
            let badge;
            if (disabled)        badge = '<span class="badge bg-gradient-dark text-xs">Inactive</span>';
            else if (superseded) badge = `<span class="badge bg-gradient-dark text-xs">Superseded by ${esc(tr.dataset.supersededName || '')}</span>`;
            else if (kept)       badge = '<span class="badge bg-gradient-success text-xs">Kept</span>';
            else                 badge = '<span class="badge bg-gradient-info text-xs">Active</span>';
            const verdict = tr.querySelector('.member-verdict');
            const autoWarn = tr.dataset.automationActive === '1' && (disabled || superseded || inactiveFrom)
                ? '<div class="mt-1"><span class="badge bg-gradient-warning text-dark text-xs" title="Scheduled task still on — switch it off on the property page"><i class="material-icons text-xs align-middle">bolt</i> automation still active</span></div>'
                : '';
            if (verdict) verdict.innerHTML = badge + (inactiveFrom ? `<div class="text-muted mt-1">inactive from ${esc(inactiveFrom)}</div>` : '') + autoWarn;
            tr.classList.toggle('text-muted', disabled || superseded);
            tr.querySelector('.reconcile-supersede-form')?.classList.toggle('d-none', disabled || superseded);
            const cb = tr.querySelector('.reconcile-inactive-toggle');
            if (cb) { cb.checked = disabled; cb.dataset.inactiveFrom = inactiveFrom; }
            tr.querySelectorAll('.settings-open-btn').forEach(b => { b.dataset.billingDisabled = disabled ? '1' : '0'; b.dataset.inactiveFrom = inactiveFrom; });
        }
        function recomputeCluster(card) {
            const rows = [...card.querySelectorAll('.reconcile-member')];
            const undecided = rows.filter(tr => tr.dataset.superseded !== '1' && tr.dataset.kept !== '1' && tr.dataset.disabled !== '1').length;
            const status = undecided >= 2 ? 'open' : 'resolved';
            card.dataset.status = status;
            const badge = card.querySelector('.cluster-status');
            if (badge) {
                badge.textContent = status === 'open' ? 'Open' : 'Resolved';
                badge.classList.toggle('bg-gradient-warning', status === 'open');
                badge.classList.toggle('text-dark', status === 'open');
                badge.classList.toggle('bg-gradient-success', status !== 'open');
            }
            card.querySelector('.reconcile-keep-btn')?.classList.toggle('d-none', status !== 'open');
            card.querySelector('.reconcile-reopen-btn')?.classList.toggle('d-none', status === 'open');
            applyResolved();
        }
        // Keep the other tabs in step (card hides / customers row flagged).
        function syncOtherTabs(pid, { disabled, superseded }) {
            const card = document.querySelector(`.by-property-card[data-property-id="${CSS.escape(pid)}"]`);
            if (card) {
                if (disabled !== undefined)   card.dataset.inactive   = disabled ? '1' : (card.dataset.inactiveFrom ? card.dataset.inactive : '0');
                if (superseded !== undefined) card.dataset.superseded = superseded ? '1' : '0';
                window.brafaApplyByPropertyFilters?.();
            }
            const row = document.querySelector(`#tab-customers .customer-row[data-property-id="${CSS.escape(pid)}"]`);
            if (row && (disabled !== undefined || superseded !== undefined)) {
                const on = (disabled ?? row.dataset.inactive === '1') || (superseded ?? false);
                row.dataset.inactive = on ? '1' : row.dataset.inactive;
                if (disabled === false && superseded !== true) row.dataset.inactive = '0';
                window.brafaCustomersRecount?.();
            }
            if (disabled !== undefined) {
                document.querySelectorAll(`.settings-open-btn[data-property-id="${CSS.escape(pid)}"]`).forEach(b => b.dataset.billingDisabled = disabled ? '1' : '0');
            }
        }
        window.brafaMarkAutomationOff = pid => {
            document.querySelectorAll(`[data-property-id="${CSS.escape(pid)}"][data-automation-active]`).forEach(el => el.dataset.automationActive = '0');
            tab.querySelectorAll(`.reconcile-member[data-property-id="${CSS.escape(pid)}"]`).forEach(renderMember);
        };
        // Used by the gear dialog too (Inactive switch there).
        window.brafaApplyBillingDisabled = (pid, on) => {
            tab.querySelectorAll(`.reconcile-member[data-property-id="${CSS.escape(pid)}"]`).forEach(tr => {
                tr.dataset.disabled = on ? '1' : '0';
                renderMember(tr);
                recomputeCluster(tr.closest('.reconcile-cluster'));
            });
            syncOtherTabs(pid, { disabled: on });
        };

        tab.querySelectorAll('.reconcile-cluster').forEach(recomputeCluster);

        // ── Successor picked → default the handover month, enable Mark ────
        tab.addEventListener('change', e => {
            const sel = e.target.closest?.('select[name="superseded_by"]');
            if (!sel) return;
            const form  = sel.closest('.reconcile-supersede-form');
            const month = form.querySelector('input[name="inactive_from"]');
            const first = sel.selectedOptions[0]?.dataset.firstMonth || '';
            if (month && (!month.value || month.dataset.auto === '1')) { month.value = first; month.dataset.auto = '1'; }
            form.querySelector('button[type="submit"]').disabled = !sel.value;
        });
        tab.addEventListener('input', e => {
            const month = e.target.closest?.('input[name="inactive_from"]');
            if (month) month.dataset.auto = '0';
        });

        // ── Mark superseded (in place) ────────────────────────────────────
        tab.addEventListener('submit', async e => {
            const form = e.target.closest('.reconcile-supersede-form');
            if (!form) return;
            e.preventDefault();
            const tr        = form.closest('tr');
            const older     = tr?.dataset.propertyName || 'this property';
            const opt       = form.querySelector('select[name="superseded_by"]').selectedOptions[0];
            const successor = opt?.textContent?.trim() || '';
            const month     = form.querySelector('input[name="inactive_from"]').value;
            let invoiced = [];
            try { invoiced = JSON.parse(tr?.dataset.invoicedMonths || '[]'); } catch {}
            const late = month ? invoiced.filter(m => m >= month) : [];
            const r = await Swal.fire({
                title: 'Mark as superseded?',
                html: `<div class="text-start text-sm"><strong>${esc(older)}</strong> is the older duplicate of <strong>${esc(successor)}</strong>.` +
                      (month ? `<div class="mt-2">Billing for the older property stops from <strong>${esc(month)}</strong>. Unbilled months before that stay for you to invoice or skip.</div>`
                             : '<div class="mt-2 text-muted">No handover month set — billing for the older property continues until you set one.</div>') +
                      (late.length ? `<div class="mt-2 text-danger"><strong>${late.length} ${late.length === 1 ? 'month' : 'months'} on or after ${esc(month)} ${late.length === 1 ? 'was' : 'were'} already invoiced to the older property</strong> (${esc(late[0])}${late.length > 1 ? ' – ' + esc(late[late.length - 1]) : ''}). They stay listed on this tab as "invoiced after handover" so you can issue a credit note in dkPlus.</div>` : '') +
                      '</div>',
                icon: 'question', showCancelButton: true, confirmButtonColor: '#344767', cancelButtonColor: '#8392ab', confirmButtonText: 'Mark superseded',
                ...(tr?.dataset.automationActive === '1' ? { input: 'checkbox', inputValue: 1, inputPlaceholder: 'Also switch off this property\'s automation (scheduled task)' } : {}),
            });
            if (!r.isConfirmed) return;
            const disableAutomation = tr?.dataset.automationActive === '1' && !!r.value;
            let autoField = form.querySelector('input[name="disable_automation"]');
            if (!autoField) { autoField = document.createElement('input'); autoField.type = 'hidden'; autoField.name = 'disable_automation'; form.appendChild(autoField); }
            autoField.value = disableAutomation ? '1' : '0';
            const btn = form.querySelector('button[type="submit"]');
            btn.disabled = true;
            try {
                const data = await window.brafaPostForm(form);
                if (data.automation_off) window.brafaMarkAutomationOff(tr.dataset.propertyId);
                tr.dataset.superseded = '1';
                tr.dataset.supersededName = successor.replace(/\s*\([A-Z_ ]+\)\s*$/, '');
                tr.dataset.kept = '1';
                if (month) tr.dataset.inactiveFrom = month;
                renderMember(tr);
                if (late.length) {
                    const lateEl = tr.querySelector('.member-late');
                    if (lateEl) lateEl.innerHTML = `<div class="mt-1 text-danger"><i class="material-icons text-xs align-middle">error_outline</i> <strong>Invoiced after handover</strong> — credit note needed: ${late.length} ${late.length === 1 ? 'month' : 'months'} (${esc(late[0])}${late.length > 1 ? ' – ' + esc(late[late.length - 1]) : ''}) — invoice numbers appear after the next page load.</div>`;
                }
                recomputeCluster(tr.closest('.reconcile-cluster'));
                syncOtherTabs(tr.dataset.propertyId, { superseded: true });
                toast('success', data.message || 'Saved.');
            } catch (err) {
                Swal.fire({ icon: 'error', title: 'Could not save', text: err.message || 'Operation failed.' });
                btn.disabled = false;
            }
        });

        // ── Inactive switch (in place) ────────────────────────────────────
        tab.addEventListener('change', async e => {
            const cb = e.target.closest?.('.reconcile-inactive-toggle');
            if (!cb) return;
            const on = cb.checked;
            const r = await Swal.fire({
                title: on ? `Mark ${cb.dataset.propertyName} inactive?` : `Reactivate ${cb.dataset.propertyName}?`,
                text: on ? 'No billing rows for any month; hidden from the billing tabs unless "Show inactive" is ticked. Existing invoices are untouched.'
                         : 'Billing rows come back for every month with locks.',
                icon: 'question', showCancelButton: true, confirmButtonColor: '#344767', cancelButtonColor: '#8392ab',
                confirmButtonText: on ? 'Mark inactive' : 'Reactivate',
                ...(on && cb.dataset.automationActive === '1' ? { input: 'checkbox', inputValue: 1, inputPlaceholder: 'Also switch off this property\'s automation (scheduled task)' } : {}),
            });
            if (!r.isConfirmed) { cb.checked = !on; return; }
            cb.disabled = true;
            try {
                const data = await postForm(@json(route('locks-by-month.property-settings')), {
                    property_id: cb.dataset.propertyId, notes: cb.dataset.notes || '', inactive_from: cb.dataset.inactiveFrom || '', billing_disabled: on ? '1' : '0',
                    disable_automation: (on && cb.dataset.automationActive === '1' && !!r.value) ? '1' : '0',
                });
                if (data.automation_off) window.brafaMarkAutomationOff(cb.dataset.propertyId);
                window.brafaApplyBillingDisabled(cb.dataset.propertyId, on);
                toast('success', data.message || 'Saved.');
                // Reactivating brings rows back on By property — that needs the server.
                if (!on) reload();
            } catch (err) {
                Swal.fire({ icon: 'error', title: 'Could not save', text: err.message || 'Operation failed.' });
                cb.checked = !on;
            } finally {
                cb.disabled = false;
            }
        });

        // ── Keep all / Reopen (in place) ──────────────────────────────────
        tab.addEventListener('click', async e => {
            const keep   = e.target.closest?.('.reconcile-keep-btn');
            const reopen = e.target.closest?.('.reconcile-reopen-btn');
            const btn = keep || reopen;
            if (!btn) return;
            const card = btn.closest('.reconcile-cluster');
            const ids = (btn.dataset.ids || '').split(',').filter(Boolean);
            if (keep) {
                const r = await Swal.fire({ title: 'Keep all as separate properties?', text: 'The cluster is marked resolved and stops being flagged. You can reopen it later.', icon: 'question', showCancelButton: true, confirmButtonColor: '#5e72e4', cancelButtonColor: '#8392ab', confirmButtonText: 'Keep all' });
                if (!r.isConfirmed) return;
            }
            btn.disabled = true;
            try {
                const data = await postForm(route, { action: keep ? 'keep' : 'reopen', 'property_ids[]': ids });
                card.querySelectorAll('.reconcile-member').forEach(tr => {
                    if (keep) { tr.dataset.kept = '1'; }
                    else      { tr.dataset.kept = '0'; tr.dataset.superseded = '0'; tr.dataset.supersededName = ''; }
                    renderMember(tr);
                    if (reopen) syncOtherTabs(tr.dataset.propertyId, { superseded: false });
                });
                recomputeCluster(card);
                toast('success', data.message || 'Saved.');
            } catch (err) {
                Swal.fire({ icon: 'error', title: 'Could not save', text: err.message || 'Operation failed.' });
            } finally {
                btn.disabled = false;
            }
        });
    })();

    // ── CUSTOMERS TAB: fetch missing dkPlus names in one go ────────────────
    (() => {
        const btn = document.getElementById('customersBackfillNames');
        if (!btn) return;
        btn.addEventListener('click', async () => {
            const orig = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status"></span>Fetching…';
            const fd = new FormData();
            fd.append('_token', document.querySelector('meta[name="csrf-token"]')?.content || '');
            try {
                const res  = await fetch(btn.dataset.url, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }, body: fd, credentials: 'same-origin' });
                const data = await res.json().catch(() => ({}));
                if (!res.ok) throw new Error(data.message || `HTTP ${res.status}`);
                // Fill the name inputs inline; the property cards read names on reload.
                Object.entries(data.filled || {}).forEach(([pid, name]) => {
                    const input = document.querySelector(`#tab-customers .customer-row[data-property-id="${CSS.escape(pid)}"] input[name="dkplus_customer_name"]`);
                    if (input) { input.value = name; input.classList.add('is-valid'); }
                });
                Swal.fire({ toast: true, position: 'bottom-end', icon: (data.failed || []).length ? 'warning' : 'success', title: data.message || 'Done.', showConfirmButton: false, timer: 5000, timerProgressBar: true });
                if (Object.keys(data.filled || {}).length && !(data.failed || []).length) btn.classList.add('d-none');
                else btn.innerHTML = orig;
            } catch (err) {
                Swal.fire({ toast: true, position: 'bottom-end', icon: 'error', title: err.message || 'Lookup failed', showConfirmButton: false, timer: 6000 });
                btn.innerHTML = orig;
            } finally {
                btn.disabled = false;
            }
        });
    })();

    // ── CUSTOMERS TAB: search + missing-only filter + recount ──────────────
    (() => {
        const tab = document.getElementById('tab-customers');
        if (!tab) return;
        const rows = [...tab.querySelectorAll('.customer-row')];
        if (rows.length === 0) return;

        const searchInput      = document.getElementById('customersSearch');
        const missingOnly      = document.getElementById('customersMissingOnly');
        const showInactiveCb   = document.getElementById('customersShowInactive');
        const INACTIVE_KEY     = 'brafa_customers_show_inactive_v1';
        try { if (showInactiveCb) showInactiveCb.checked = (localStorage.getItem(INACTIVE_KEY) ?? '0') === '1'; } catch {}
        const visibleCountEl   = tab.querySelector('.customers-visible-count');
        const missingCountEl   = tab.querySelector('.customers-missing-count');
        const linkedCountEl    = tab.querySelector('.customers-linked-count');
        const emptyEl          = document.getElementById('customersEmptySearch');

        const SEARCH_KEY  = 'brafa_customers_search_v1';
        const FILTER_KEY  = 'brafa_customers_missing_v1';

        // Restore saved state
        try {
            const savedSearch = sessionStorage.getItem(SEARCH_KEY);
            if (savedSearch) searchInput.value = savedSearch;
            const savedFilter = sessionStorage.getItem(FILTER_KEY);
            if (savedFilter !== null) missingOnly.checked = savedFilter === '1';
        } catch {}

        function recount() {
            // Live counters in the toolbar — updated whenever a row's status changes.
            let missing = 0, linked = 0;
            rows.forEach(r => {
                if (r.dataset.status !== 'missing') linked++;
                else if (r.dataset.inactive !== '1') missing++;   // inactive + no customer is not actionable
            });
            if (missingCountEl) missingCountEl.textContent = missing;
            if (linkedCountEl)  linkedCountEl.textContent  = linked;
            applyFilter();
        }

        function applyFilter() {
            const q = (searchInput?.value || '').trim().toLowerCase();
            const onlyMissing = !!missingOnly?.checked;
            const showInactive = !!showInactiveCb?.checked;
            try { localStorage.setItem(INACTIVE_KEY, showInactive ? '1' : '0'); } catch {}
            let visible = 0;
            rows.forEach(row => {
                const nameOk     = q === '' || (row.dataset.propertyName || '').toLowerCase().includes(q);
                const statusOk   = !onlyMissing || row.dataset.status === 'missing';
                const inactiveOk = showInactive || row.dataset.inactive !== '1';
                const show     = nameOk && statusOk && inactiveOk;
                row.classList.toggle('is-hidden', !show);
                if (show) visible++;
            });
            if (visibleCountEl) visibleCountEl.textContent = visible;
            if (emptyEl) emptyEl.classList.toggle('d-none', visible !== 0);

            try {
                sessionStorage.setItem(SEARCH_KEY, searchInput?.value || '');
                sessionStorage.setItem(FILTER_KEY, onlyMissing ? '1' : '0');
            } catch {}
        }

        // Wire events
        if (searchInput) {
            let t;
            searchInput.addEventListener('input', () => {
                clearTimeout(t);
                t = setTimeout(applyFilter, 100);
            });
        }
        if (missingOnly) {
            missingOnly.addEventListener('change', applyFilter);
        }
        showInactiveCb?.addEventListener('change', applyFilter);

        // Expose for the customer-save handler so it can update counts after a save
        window.brafaCustomersRecount = recount;

        // Initial render
        applyFilter();
    })();

    // ── BY PROPERTY: search + sort + card-collapse (sessionStorage) ────────
    (() => {
        const tab = document.getElementById('tab-by-property');
        if (!tab) return;
        const cards = [...tab.querySelectorAll('.by-property-card')];
        if (cards.length === 0) return;

        const SORT_KEY     = 'brafa_byprop_sort_v1';
        const GROUP_KEY    = 'brafa_byprop_group_v1';
        const SEARCH_KEY   = 'brafa_byprop_search_v1';
        const FILTER_QUERY = '.by-property-card';
        const visibleCountEl = document.querySelector('.by-property-visible-count');
        const emptyEl        = document.getElementById('byPropEmptySearch');
        const searchInput    = document.getElementById('byPropSearch');
        const sortSelect     = document.getElementById('byPropSort');

        // ── Lazy body: fetched from the server on first expand ─────────────
        const CARD_ROUTE = tab.dataset.routeCard || '';
        const PAGE_QUERY = tab.dataset.query ? ('?' + tab.dataset.query) : '';

        // Re-fetch a card body (e.g. after a lock exclusion changed its counts).
        window.brafaReloadCardBody = card => {
            const wrap = card?.querySelector('.by-property-collapse');
            if (!wrap) return;
            wrap.dataset.loaded = '0';
            loadCardBody(card);
        };

        async function loadCardBody(card) {
            const wrap = card.querySelector('.by-property-collapse');
            if (!wrap || wrap.dataset.loaded === '1' || wrap.dataset.loading === '1') return;
            wrap.dataset.loading = '1';
            const url = CARD_ROUTE.replace('__ID__', encodeURIComponent(card.dataset.propertyId)) + PAGE_QUERY;
            try {
                const res  = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, credentials: 'same-origin' });
                const html = await res.text();
                if (!res.ok && res.status !== 404) throw new Error(`HTTP ${res.status}`);
                wrap.innerHTML = html;
                wrap.dataset.loaded = '1';
                if (brafaBS?.Tooltip) {
                    wrap.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => { try { new brafaBS.Tooltip(el, { boundary: 'window' }); } catch {} });
                }
                window.brafaRecomputeCard?.(card);
                window.brafaApplySettledRows?.();
            } catch (err) {
                wrap.innerHTML = `<div class="card-body py-3 px-3 text-center text-sm text-danger">
                    Could not load this property (${String(err.message || err).replace(/</g, '&lt;')}).
                    <button type="button" class="btn btn-link btn-sm p-0 ms-1 card-body-retry">Retry</button></div>`;
            } finally {
                delete wrap.dataset.loading;
            }
        }
        document.addEventListener('click', e => {
            const retry = e.target.closest?.('.card-body-retry');
            if (!retry) return;
            const card = retry.closest('.by-property-card');
            const wrap = card?.querySelector('.by-property-collapse');
            if (wrap) { wrap.dataset.loaded = '0'; wrap.innerHTML = '<div class="card-body py-3 px-3 text-center text-sm text-muted"><span class="spinner-border spinner-border-sm me-2"></span>Loading months…</div>'; }
            if (card) loadCardBody(card);
        });

        // ── Card collapse on header click ─────────────────────────────────
        function setCollapsed(card, collapsed) {
            const wrap   = card.querySelector('.by-property-collapse');
            const toggle = card.querySelector('.by-property-toggle');
            if (!wrap || !toggle) return;
            wrap.hidden = collapsed;
            toggle.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
            toggle.querySelector('.collapse-chevron').textContent = collapsed ? 'chevron_right' : 'expand_more';
            if (!collapsed) loadCardBody(card);
        }

        function toggleCard(toggle) {
            const card = toggle.closest('.by-property-card');
            if (!card) return;
            const wrap = card.querySelector('.by-property-collapse');
            setCollapsed(card, !wrap.hidden);
        }

        document.addEventListener('click', e => {
            // Buttons/links/checkboxes inside the header (invoice, settings, select) must not toggle the card.
            if (e.target.closest?.('.by-property-toggle button, .by-property-toggle a, .by-property-toggle input')) return;
            const toggle = e.target.closest?.('.by-property-toggle');
            if (!toggle) return;
            toggleCard(toggle);
        });

        // Keyboard activation for the div-button toggle
        document.addEventListener('keydown', e => {
            if (e.key !== ' ' && e.key !== 'Enter') return;
            const toggle = e.target.closest?.('.by-property-toggle');
            if (!toggle) return;
            // Don't intercept keys inside form fields within the header (none today, but be safe)
            if (e.target.matches('input, select, textarea, button')) return;
            e.preventDefault();
            toggleCard(toggle);
        });

        // ── Search ────────────────────────────────────────────────────────
        // ── View switch: "invoice" (default) | "all" — remembered in localStorage
        const VIEW_KEY   = 'brafa_byprop_view_v2';
        const viewRadios = [...tab.querySelectorAll('input[name="byPropView"]')];
        const lsGet = (k, d) => { try { return localStorage.getItem(k) ?? d; } catch { return d; } };
        const lsSet = (k, v) => { try { localStorage.setItem(k, v); } catch {} };
        const currentView = () => viewRadios.find(r => r.checked)?.value || 'invoice';

        {
            const saved = lsGet(VIEW_KEY, 'invoice');
            const radio = viewRadios.find(r => r.value === saved);
            if (radio) radio.checked = true;
        }

        // ── Settled (invoiced/skipped) month rows: hidden unless the global tick
        //    or the card's own "Show N settled months" link says otherwise. Applied
        //    with the hidden attribute so it does not depend on page CSS.
        const SETTLED_KEY   = 'brafa_byprop_show_settled_v2';
        const settledToggle = document.getElementById('byPropShowSettled');
        if (settledToggle) settledToggle.checked = lsGet(SETTLED_KEY, '0') === '1';

        function applySettledRows() {
            const globalShow = !!settledToggle?.checked;
            tab.classList.toggle('show-settled', globalShow);
            cards.forEach(card => {
                const cardShow = globalShow || card.classList.contains('show-settled');
                card.querySelectorAll('.month-row').forEach(row => {
                    const settled = row.dataset.status !== 'pending';
                    row.hidden = settled && !cardShow && !row.classList.contains('keep-visible');
                });
                const wrap = card.querySelector('.settled-toggle-wrap');
                if (wrap) wrap.classList.toggle('d-none', globalShow || Number(card.dataset.settledCount || 0) === 0);
            });
            lsSet(SETTLED_KEY, globalShow ? '1' : '0');
        }
        window.brafaApplySettledRows = applySettledRows;
        settledToggle?.addEventListener('change', applySettledRows);

        const SUPERSEDED_KEY   = 'brafa_byprop_show_superseded_v1';
        const supersededToggle = document.getElementById('byPropShowSuperseded');
        if (supersededToggle) supersededToggle.checked = lsGet(SUPERSEDED_KEY, '0') === '1';
        supersededToggle?.addEventListener('change', () => applySearch());
        const INACTIVE_KEY     = 'brafa_byprop_show_inactive_v2';
        const inactiveToggle   = document.getElementById('byPropShowInactive');
        if (inactiveToggle) inactiveToggle.checked = lsGet(INACTIVE_KEY, '0') === '1';
        inactiveToggle?.addEventListener('change', () => applySearch());

        function applySearch() {
            const q       = (searchInput?.value || '').trim().toLowerCase();
            const viewAll = currentView() === 'all';
            const showSuperseded = !!supersededToggle?.checked;
            lsSet(SUPERSEDED_KEY, showSuperseded ? '1' : '0');
            const showInactive = !!inactiveToggle?.checked;
            lsSet(INACTIVE_KEY, showInactive ? '1' : '0');
            applySettledRows();

            let visible = 0;
            cards.forEach(card => {
                const unbilled = Number(card.dataset.unbilledCount || 0);
                const nameOk   = q === '' || (card.dataset.propertyName || '').toLowerCase().includes(q);
                // "To invoice": only properties with a closed, unbilled month (inactive or not).
                const viewOk   = viewAll || unbilled > 0;
                // Older duplicates stay hidden unless asked for, even in "All".
                const supersededOk = showSuperseded || card.dataset.superseded !== '1';
                // Deactivated properties stay hidden in both views unless asked for —
                // even with unbilled months (those still show on the Reconcile tab).
                const inactiveOk   = showInactive || card.dataset.inactive !== '1';
                const match = nameOk && viewOk && supersededOk && inactiveOk;
                card.classList.toggle('is-hidden', !match);
                if (match) visible++;
            });
            if (visibleCountEl) visibleCountEl.textContent = visible;
            if (emptyEl) {
                emptyEl.classList.toggle('show', visible === 0);
                emptyEl.querySelector('.empty-search-msg')?.classList.toggle('d-none', q === '');
                emptyEl.querySelector('.empty-invoice-msg')?.classList.toggle('d-none', q !== '' || viewAll);
            }
            // Persist
            try { sessionStorage.setItem(SEARCH_KEY, searchInput?.value || ''); } catch {}
            lsSet(VIEW_KEY, currentView());
            layoutCards();
        }
        window.brafaApplyByPropertyFilters = applySearch;

        viewRadios.forEach(r => r.addEventListener('change', applySearch));

        // Per-card "Show N settled months" link
        tab.addEventListener('click', e => {
            const btn = e.target.closest('.settled-toggle-btn');
            if (!btn) return;
            e.preventDefault();
            const card = btn.closest('.by-property-card');
            const nowShown = card.classList.toggle('show-settled');
            btn.querySelector('.settled-toggle-label').textContent = nowShown ? 'Hide' : 'Show';
            btn.querySelector('.material-icons').textContent = nowShown ? 'visibility_off' : 'visibility';
            applySettledRows();
        });

        if (searchInput) {
            // Restore saved search
            try {
                const saved = sessionStorage.getItem(SEARCH_KEY);
                if (saved) searchInput.value = saved;
            } catch {}

            let t;
            searchInput.addEventListener('input', () => {
                clearTimeout(t);
                t = setTimeout(applySearch, 100);
            });
        }

        // ── Sort ──────────────────────────────────────────────────────────
        const SORT_FNS = {
            unbilled_total_desc: (a, b) => Number(b.dataset.unbilledTotal) - Number(a.dataset.unbilledTotal),
            // Cards with nothing unbilled sort last.
            oldest_unbilled_asc: (a, b) => (a.dataset.oldestUnbilled || '9999-99').localeCompare(b.dataset.oldestUnbilled || '9999-99')
                                        || Number(b.dataset.unbilledTotal) - Number(a.dataset.unbilledTotal),
            unbilled_count_desc: (a, b) => Number(b.dataset.unbilledCount) - Number(a.dataset.unbilledCount),
            property_name_asc:   (a, b) => (a.dataset.propertyName || '').localeCompare(b.dataset.propertyName || '', 'is'),
            property_name_desc:  (a, b) => (b.dataset.propertyName || '').localeCompare(a.dataset.propertyName || '', 'is'),
            api_asc:             (a, b) => (a.dataset.api || '').localeCompare(b.dataset.api || '', 'is') || (a.dataset.propertyName || '').localeCompare(b.dataset.propertyName || '', 'is'),
            lifetime_total_desc: (a, b) => Number(b.dataset.lifetimeTotal) - Number(a.dataset.lifetimeTotal),
        };

        // ── Group ─────────────────────────────────────────────────────────
        const groupSelect = document.getElementById('byPropGroup');
        const cardsRoot   = document.getElementById('byPropCards');
        // Ready first — that is the working list; unlinked customers come after.
        const READINESS_ORDER = ['ready', 'needs_customer', 'nothing'];
        const READINESS_LABEL = {
            needs_customer: { label: 'Needs a dkPlus customer', hint: 'Link the customer before these can be invoiced', cls: 'text-danger' },
            ready:          { label: 'Ready to invoice',        hint: 'Customer linked and at least one closed, unbilled month', cls: 'text-success' },
            nothing:        { label: 'Nothing to invoice',      hint: 'Fully invoiced / skipped, or only the running month is open', cls: 'text-muted' },
        };
        const GROUPERS = {
            readiness: card => {
                const unbilled = Number(card.dataset.unbilledCount || 0);
                if (unbilled === 0) return 'nothing';
                return card.dataset.hasCustomer === '1' ? 'ready' : 'needs_customer';
            },
            api:  card => (card.dataset.api || 'unknown').toLowerCase(),
            none: () => 'all',
        };
        function groupMeta(mode, key) {
            if (mode === 'readiness') return READINESS_LABEL[key] || { label: key, hint: '', cls: '' };
            if (mode === 'api')       return { label: key.toUpperCase(), hint: 'API / PMS', cls: '' };
            return { label: 'All properties', hint: '', cls: '' };
        }
        function ensureGroup(mode, key) {
            let g = cardsRoot.querySelector(`.by-property-group[data-group="${CSS.escape(key)}"]`);
            if (g) return g;
            const meta = groupMeta(mode, key);
            g = document.createElement('div');
            g.className = 'by-property-group';
            g.dataset.group = key;
            g.innerHTML = `
                <div class="by-property-group-header d-flex align-items-center gap-2 flex-wrap" role="button" tabindex="0" aria-expanded="true">
                    <i class="material-icons text-sm group-chevron">expand_more</i>
                    <span class="fw-semibold text-sm ${meta.cls}">${meta.label}</span>
                    <span class="badge bg-gradient-secondary text-xs group-count">0</span>
                    <span class="text-xs text-muted group-total"></span>
                    <span class="text-xs text-muted ms-auto">${meta.hint}</span>
                </div>
                <div class="by-property-group-body"></div>`;
            cardsRoot.appendChild(g);
            return g;
        }
        cardsRoot?.addEventListener('click', e => {
            const h = e.target.closest('.by-property-group-header');
            if (!h) return;
            const g = h.closest('.by-property-group');
            const collapsed = g.classList.toggle('is-collapsed');
            h.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
            h.querySelector('.group-chevron').textContent = collapsed ? 'chevron_right' : 'expand_more';
        });

        // Sort + group + move cards into place. Visibility (.is-hidden) is decided by applySearch.
        function layoutCards() {
            if (!cardsRoot) return;
            const mode   = (groupSelect?.value && GROUPERS[groupSelect.value]) ? groupSelect.value : 'none';
            const sortFn = SORT_FNS[sortSelect?.value] || SORT_FNS.unbilled_total_desc;
            const sorted = [...cards].sort(sortFn);

            // Drop groups from a previous mode.
            cardsRoot.querySelectorAll('.by-property-group').forEach(g => { if (g.dataset.mode !== mode) g.remove(); });

            const keys = new Set(sorted.map(GROUPERS[mode]));
            const orderedKeys = mode === 'readiness'
                ? READINESS_ORDER.filter(k => keys.has(k))
                : [...keys].sort((a, b) => a.localeCompare(b, 'is'));

            orderedKeys.forEach(key => {
                const g = ensureGroup(mode, key);
                g.dataset.mode = mode;
                cardsRoot.appendChild(g);                    // keeps group order
                const body = g.querySelector('.by-property-group-body');
                let visible = 0, total = 0;
                sorted.filter(c => GROUPERS[mode](c) === key).forEach(c => {
                    body.appendChild(c);
                    if (!c.classList.contains('is-hidden')) { visible++; total += Number(c.dataset.unbilledTotal || 0); }
                });
                g.classList.toggle('d-none', visible === 0);
                g.querySelector('.group-count').textContent = visible;
                g.querySelector('.group-total').textContent = total > 0 ? '· ' + fmtIskLocal(total) + ' to invoice' : '';
                g.querySelector('.by-property-group-header')?.classList.toggle('d-none', mode === 'none');
            });
            try { sessionStorage.setItem(SORT_KEY, sortSelect?.value || ''); localStorage.setItem(GROUP_KEY, mode); } catch {}
        }
        const fmtIskLocal = n => Math.round(Number(n || 0)).toLocaleString('is-IS').replaceAll(',', '.') + ' ISK';
        window.brafaLayoutByPropertyCards = layoutCards;

        function applySort() { layoutCards(); }

        if (sortSelect) {
            try {
                const saved = sessionStorage.getItem(SORT_KEY);
                if (saved && SORT_FNS[saved]) sortSelect.value = saved;
            } catch {}
            sortSelect.addEventListener('change', applySort);
        }
        if (groupSelect) {
            try {
                const saved = localStorage.getItem(GROUP_KEY);
                if (saved && GROUPERS[saved]) groupSelect.value = saved;
            } catch {}
            groupSelect.addEventListener('change', layoutCards);
        }

        // Apply search on initial render too (in case a saved query was restored)
        applySearch();

        // ── Keyboard: "/" focuses the active tab's search, Esc clears it ───
        document.addEventListener('keydown', e => {
            const inField = e.target.matches?.('input, textarea, select, [contenteditable="true"]');
            if (e.key === '/' && !inField && !e.ctrlKey && !e.metaKey && !e.altKey) {
                const activePane = document.querySelector('.tab-pane.active');
                const target = activePane?.querySelector('#byPropSearch, #customersSearch');
                if (target) { e.preventDefault(); target.focus(); target.select(); }
            } else if (e.key === 'Escape' && e.target.matches?.('#byPropSearch, #customersSearch')) {
                e.target.value = '';
                e.target.dispatchEvent(new Event('input', { bubbles: true }));
                e.target.closest('.input-group-outline')?.classList.remove('is-filled');
                e.target.blur();
            }
        });

        // ── Bulk close: only the ready properties that are currently shown ──
        function readyShownIds() {
            return cards
                .filter(c => !c.classList.contains('is-hidden') && c.dataset.hasCustomer === '1' && Number(c.dataset.unbilledCount || 0) > 0)
                .map(c => c.dataset.propertyId);
        }
        document.querySelector('.bulk-close-form')?.addEventListener('submit', e => {
            const form = e.target;
            const ids  = readyShownIds();
            const box  = form.querySelector('.bulk-close-ids');
            box.innerHTML = ids.map(id => `<input type="hidden" name="property_ids[]" value="${String(id).replace(/"/g, '&#34;')}">`).join('');
            form.dataset.confirm = `Create one consolidated invoice for each of the ${ids.length} ready ${ids.length === 1 ? 'property' : 'properties'} shown?`;
            if (ids.length === 0) { e.preventDefault(); Swal.fire({ icon: 'info', title: 'Nothing to close', text: 'No shown property is ready (customer linked + unbilled months).' }); }
        }, true);

        // ── Bulk action bar (card checkboxes) ──────────────────────────────
        const bulkBar = document.getElementById('byPropBulkBar');
        const selectedCards = () => cards.filter(c => c.querySelector('.card-select-cb')?.checked);
        function refreshBulkBar() {
            const n = selectedCards().length;
            bulkBar?.classList.toggle('d-none', n === 0);
            const el = bulkBar?.querySelector('.bulk-selected-count');
            if (el) el.textContent = n;
        }
        document.addEventListener('change', e => { if (e.target.matches?.('.card-select-cb')) refreshBulkBar(); });
        bulkBar?.querySelector('.bulk-select-visible-btn')?.addEventListener('click', () => {
            cards.forEach(c => { const cb = c.querySelector('.card-select-cb'); if (cb) cb.checked = !c.classList.contains('is-hidden'); });
            refreshBulkBar();
        });
        bulkBar?.querySelector('.bulk-clear-btn')?.addEventListener('click', () => {
            cards.forEach(c => { const cb = c.querySelector('.card-select-cb'); if (cb) cb.checked = false; });
            refreshBulkBar();
        });
        const toastB = (icon, title) => Swal.fire({ toast: true, position: 'bottom-end', icon, title, showConfirmButton: false, timer: 4000, timerProgressBar: true });
        const csrf = () => document.querySelector('meta[name="csrf-token"]')?.content || '';
        async function postJson(url, fields) {
            const fd = new FormData();
            fd.append('_token', csrf());
            Object.entries(fields).forEach(([k, v]) => (Array.isArray(v) ? v : [v]).forEach(val => fd.append(k, val)));
            const res  = await fetch(url, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf() }, body: fd, credentials: 'same-origin' });
            const data = await res.json().catch(() => ({}));
            if (!res.ok) throw new Error(data.message || data.errors?.dkplus || `HTTP ${res.status}`);
            return data;
        }

        // Skip every closed, unbilled month of the selected properties.
        bulkBar?.querySelector('.bulk-skip-cards-btn')?.addEventListener('click', async () => {
            const targets = selectedCards().filter(c => (c.dataset.unbilledMonths || '').length > 0);
            if (targets.length === 0) { toastB('info', 'Selected properties have no unbilled months.'); return; }
            const monthsTotal = targets.reduce((n, c) => n + c.dataset.unbilledMonths.split(',').length, 0);
            const r = await Swal.fire({
                title: `Skip ${monthsTotal} unbilled ${monthsTotal === 1 ? 'month' : 'months'} on ${targets.length} ${targets.length === 1 ? 'property' : 'properties'}?`,
                input: 'text', inputLabel: 'Reason (optional, applied to all)', inputPlaceholder: 'e.g. moved to Godo, free trial',
                showCancelButton: true, confirmButtonColor: '#5e72e4', cancelButtonColor: '#8392ab', confirmButtonText: 'Skip',
            });
            if (!r.isConfirmed) return;
            const reason = r.value || '';
            let ok = 0, failed = 0;
            for (const card of targets) {
                const months = card.dataset.unbilledMonths.split(',').filter(Boolean);
                try {
                    await postJson(@json(route('locks-by-month.billing-skip-bulk')), { property_id: card.dataset.propertyId, action: 'skip', reason, 'months[]': months });
                    window.brafaSettleCardMonths?.(card, months, 'skipped');
                    ok++;
                } catch (err) { failed++; console.warn('bulk skip failed for', card.dataset.propertyId, err); }
            }
            applySearch();
            toastB(failed ? 'warning' : 'success', `Skipped months on ${ok} ${ok === 1 ? 'property' : 'properties'}${failed ? `, ${failed} failed` : ''}.`);
        });

        // Same inactive-from month on every selected property, then reload.
        bulkBar?.querySelector('.bulk-deactivate-cards-btn')?.addEventListener('click', async () => {
            const targets = selectedCards();
            if (targets.length === 0) return;
            const r = await Swal.fire({
                title: `Deactivate ${targets.length} ${targets.length === 1 ? 'property' : 'properties'}?`,
                html: '<div class="text-sm text-muted text-start">First month that is <strong>not</strong> billed. Earlier unbilled months stay until invoiced or skipped.</div>',
                input: 'text', inputValue: @json($currentMonth), inputLabel: 'Inactive from (YYYY-MM)', inputPlaceholder: 'YYYY-MM',
                inputValidator: v => (/^\d{4}-(0[1-9]|1[0-2])$/.test(v || '') ? undefined : 'Use the format YYYY-MM'),
                showCancelButton: true, confirmButtonColor: '#344767', cancelButtonColor: '#8392ab', confirmButtonText: 'Deactivate',
            });
            if (!r.isConfirmed) return;
            const month = r.value;
            let ok = 0, failed = 0;
            for (const card of targets) {
                const opener = card.querySelector('.settings-open-btn');
                try {
                    await postJson(@json(route('locks-by-month.property-settings')), { property_id: card.dataset.propertyId, notes: opener?.dataset.notes || '', inactive_from: month });
                    ok++;
                } catch (err) { failed++; console.warn('bulk deactivate failed for', card.dataset.propertyId, err); }
            }
            try { sessionStorage.setItem('brafa_scroll_y', window.scrollY); } catch {}
            toastB(failed ? 'warning' : 'success', `Deactivated ${ok} from ${month}${failed ? `, ${failed} failed` : ''} — reloading…`);
            setTimeout(() => window.location.reload(), 800);
        });

        // One consolidated invoice per selected ready property (server-side bulk run).
        bulkBar?.querySelector('.bulk-invoice-cards-btn')?.addEventListener('click', async () => {
            const ready = selectedCards().filter(c => c.dataset.hasCustomer === '1' && Number(c.dataset.unbilledCount || 0) > 0);
            const skipped = selectedCards().length - ready.length;
            if (ready.length === 0) { toastB('info', 'None of the selected properties is ready (customer linked + unbilled months).'); return; }
            const total = ready.reduce((n, c) => n + Number(c.dataset.unbilledTotal || 0), 0);
            const r = await Swal.fire({
                title: `Invoice ${ready.length} ${ready.length === 1 ? 'property' : 'properties'}?`,
                html: `<div class="text-sm text-start">One consolidated dkPlus invoice per property, ${fmtIskLocal(total)} in total.${skipped ? `<div class="text-muted mt-1">${skipped} selected ${skipped === 1 ? 'property is' : 'properties are'} not ready and will be left out.</div>` : ''}</div>`,
                icon: 'warning', input: 'checkbox', inputValue: 0, inputPlaceholder: 'Email the invoices from dkPlus after creating them',
                showCancelButton: true, confirmButtonColor: '#5e72e4', cancelButtonColor: '#8392ab', confirmButtonText: 'Create invoices',
            });
            if (!r.isConfirmed) return;
            const form = bulkBar.querySelector('.bulk-invoice-selected-form');
            form.querySelector('input[name="auto_email"]').value = r.value ? '1' : '0';
            form.querySelector('.bulk-invoice-ids').innerHTML = ready.map(c => `<input type="hidden" name="property_ids[]" value="${String(c.dataset.propertyId).replace(/"/g, '&#34;')}">`).join('');
            try { sessionStorage.setItem('brafa_scroll_y', window.scrollY); } catch {}
            form.submit();
        });
    })();

    // ── Generic data-confirm for any form (bulk button, etc.) ──────────────
    (() => {
        document.addEventListener('submit', async e => {
            const form = e.target.closest('form[data-confirm]');
            if (!form) return;
            // Skip if already handled by .billing-form / .consolidated-invoice-form
            if (form.classList.contains('billing-form') || form.classList.contains('consolidated-invoice-form')) return;

            // Avoid re-confirming if this is the user's confirmed re-submit
            if (form.dataset.confirmed === '1') return;

            e.preventDefault();
            const r = await Swal.fire({
                title: 'Confirm action',
                text:  form.dataset.confirm,
                icon:  form.dataset.confirmEmphasis === 'warning' ? 'warning' : 'question',
                showCancelButton: true,
                confirmButtonColor: '#5e72e4',
                cancelButtonColor:  '#8392ab',
                confirmButtonText: 'Yes, proceed',
                cancelButtonText:  'Cancel',
                focusCancel: true,
            });
            if (!r.isConfirmed) return;
            form.dataset.confirmed = '1';
            form.submit();
        });
    })();

    // ── dkPlus customer name lookup ───────────────────────────────────────
    document.addEventListener('click', function (e) {
        const btn = e.target.closest('.fetch-customer-btn');
        if (!btn) return;

        const form      = btn.closest('form');
        const idInput   = form.querySelector('input[name="dkplus_customer_id"]');
        const nameInput = form.querySelector('input[name="dkplus_customer_name"]');
        const customerId = idInput ? idInput.value.trim() : '';

        if (!customerId) {
            idInput && idInput.classList.add('is-invalid');
            setTimeout(() => idInput && idInput.classList.remove('is-invalid'), 1500);
            return;
        }

        // Build the URL by replacing the __ID__ placeholder
        const urlTemplate = btn.dataset.fetchUrl;
        const url = urlTemplate.replace('__ID__', encodeURIComponent(customerId));

        // Loading state
        btn.disabled = true;
        const icon = btn.querySelector('i');
        const origText = icon ? icon.textContent : '';
        if (icon) icon.textContent = 'hourglass_empty';

        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } })
            .then(async r => {
                const data = await r.json();
                if (!r.ok) throw new Error(data.error || 'Error ' + r.status);
                return data;
            })
            .then(data => {
                // dkPlus files customers under a Number that can differ from the kennitala.
                // Invoices must reference the Number, so switch the field to it.
                if (data.customer_number && idInput && String(data.customer_number) !== customerId) {
                    idInput.value = data.customer_number;
                    idInput.classList.add('is-valid');
                    setTimeout(() => idInput.classList.remove('is-valid'), 2500);
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({ toast: true, position: 'bottom-end', icon: 'info', showConfirmButton: false, timer: 7000, timerProgressBar: true,
                                    title: `dkPlus files this customer as number ${data.customer_number} (you typed ${customerId}). Field updated — click Save.` });
                    }
                }
                if (data.customer_name && nameInput) {
                    nameInput.value = data.customer_name;
                    nameInput.classList.add('is-valid');
                    setTimeout(() => nameInput.classList.remove('is-valid'), 2500);
                } else if (nameInput) {
                    nameInput.placeholder = 'No name returned by dkPlus';
                }
            })
            .catch(err => {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({ toast: true, position: 'bottom-end', icon: 'error',
                                title: err.message || 'Customer not found', showConfirmButton: false,
                                timer: 5000, timerProgressBar: true });
                }
                if (idInput) { idInput.classList.add('is-invalid'); setTimeout(() => idInput.classList.remove('is-invalid'), 3000); }
            })
            .finally(() => {
                btn.disabled = false;
                if (icon) icon.textContent = origText;
            });
    });
</script>
@endpush