@extends('layouts.app')

@section('content')
<div class="brafa-screen lock-statistics-page">
    @php
        $formatIsk = fn($amount) => number_format((float) $amount, 0, ',', '.') . ' ISK';
        $latestMonthTotal = $billing['month_groups'][0]['month_total'] ?? 0;
        $averageMonthTotal = count($billing['month_groups']) > 0 ? (int) round($billing['grand_total'] / count($billing['month_groups'])) : 0;
        $activeFilterCount = 0;
        $monthsTracked = $stats->count();
        $latestUniqueLocks = (int) ($stats->last()['count'] ?? 0);
        $totalNewLocksInRange = (int) $stats->sum('new_locks');
        $totalNewPropertiesInRange = (int) $stats->sum('new_properties');
        $netGrowthRate = $latestUniqueLocks > 0 && $totalNewLocksInRange > 0
            ? round(($totalNewLocksInRange / max($latestUniqueLocks, 1)) * 100, 1)
            : 0;
        $billableMonths = count($billing['month_groups']);
        $propertyGrowthRows = $stats
            ->flatMap(fn($row) => collect($row['properties'] ?? [])->map(fn($property) => [
                'month' => $row['month'],
                'name'  => $property['name'],
                'locks' => $property['locks'],
            ]))
            ->values();
        $propertyCoverageRate = $monthsTracked > 0
            ? round(($propertyGrowthRows->count() / max($monthsTracked, 1)), 1)
            : 0;

        if (!empty($filters['from_month']))                        $activeFilterCount++;
        if (!empty($filters['to_month']))                          $activeFilterCount++;
        if (!empty($filters['property_id']))                       $activeFilterCount++;
        if (!empty($filters['property_name']))                     $activeFilterCount++;
        if (!empty($filters['only_billable']))                     $activeFilterCount++;
        if (count($selectedApis) !== count($apis))                 $activeFilterCount++;

        $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);

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

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

    {{-- ══════════════════ HERO HEADER ═══════════════════════════════════════ --}}
    <div class="card border-0 shadow-lg mb-4 overflow-hidden">
        <div class="card-body p-0">
            <div class="bg-gradient-primary px-4 py-4 py-md-5 text-white position-relative">
                <div class="row align-items-center g-3">
                    <div class="col-lg-8">
                        <div class="d-flex align-items-center mb-2">
                            <span class="badge bg-white text-primary me-2 fw-semibold">Analytics</span>
                            <span class="opacity-8 text-sm">Superadmin</span>
                        </div>
                        <h4 class="text-white mb-1">Active Locks by Month</h4>
                        <p class="text-white-50 mb-0 text-sm">
                            Track lock growth, property onboarding, and monthly billing performance with API-level visibility.
                        </p>
                    </div>
                    <div class="col-lg-4 text-lg-end">
                        <a href="{{ route('locks-by-month.export-excel', request()->query()) }}" class="btn bg-white text-primary mb-2 mb-lg-0 me-lg-2">
                            <i class="material-icons text-sm me-1 align-middle">table_view</i>Export Excel
                        </a>
                        <a href="{{ route('locks-by-month.export', request()->query()) }}" class="btn btn-outline-light mb-2 mb-lg-0">
                            <i class="material-icons text-sm me-1 align-middle">download</i>Export CSV
                        </a>
                        <div class="text-white-50 text-xs mt-2"
                             data-bs-toggle="tooltip" data-bs-placement="left"
                             title="Standard APIs: 500 ISK per active lock/month. Golf Simulator: 4,900 ISK flat per property/month.">
                            <i class="material-icons text-sm align-middle">info</i> Billing rules
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ══════════════════ COLLAPSIBLE FILTER ════════════════════════════════ --}}
    <div class="card mb-4 shadow-sm border">
        <div class="card-header pb-0">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <button class="btn btn-link text-dark text-decoration-none fw-semibold p-0 filter-toggle-btn"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#filterCardBody"
                            aria-expanded="{{ $activeFilterCount > 0 ? 'true' : 'false' }}"
                            aria-controls="filterCardBody">
                        <i class="material-icons text-sm align-middle filter-chevron">expand_more</i>
                        Filters
                    </button>
                    @if($activeFilterCount > 0)
                        <span class="badge bg-gradient-primary">{{ $activeFilterCount }} active</span>
                        @if(!empty($filters['from_month']))
                            <span class="badge bg-gradient-info">From: {{ $filters['from_month'] }}</span>
                        @endif
                        @if(!empty($filters['to_month']))
                            <span class="badge bg-gradient-info">To: {{ $filters['to_month'] }}</span>
                        @endif
                        @if(!empty($filters['property_id']))
                            <span class="badge bg-gradient-info">ID: {{ $filters['property_id'] }}</span>
                        @endif
                        @if(!empty($filters['property_name']))
                            <span class="badge bg-gradient-info">Name: {{ $filters['property_name'] }}</span>
                        @endif
                        @if(!empty($filters['only_billable']))
                            <span class="badge bg-gradient-info">Billable &gt; 0</span>
                        @endif
                        @if(count($selectedApis) !== count($apis))
                            <span class="badge bg-gradient-info">APIs: {{ implode(', ', $selectedApis) }}</span>
                        @endif
                    @else
                        <span class="text-xs text-muted">No active filters — showing all data</span>
                    @endif
                </div>
                <a href="{{ route('locks-by-month') }}" class="btn btn-outline-secondary btn-sm mb-0">
                    <i class="material-icons text-sm align-middle me-1">clear</i>Reset
                </a>
            </div>
        </div>
        <div id="filterCardBody" class="collapse {{ $activeFilterCount > 0 ? 'show' : '' }}">
            <div class="card-body border-top">
                <form method="GET">
                    <div class="row g-3">
                        <div class="col-lg-3 col-md-6">
                            {{-- Month inputs always use is-filled: the browser renders a date widget regardless of value --}}
                            <div class="input-group input-group-outline is-filled">
                                <label class="form-label" for="from_month">From month</label>
                                <input type="month" id="from_month" name="from_month" class="form-control" value="{{ $filters['from_month'] ?? '' }}">
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="input-group input-group-outline is-filled">
                                <label class="form-label" for="to_month">To month</label>
                                <input type="month" id="to_month" name="to_month" class="form-control" value="{{ $filters['to_month'] ?? '' }}">
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            {{-- Selects always use is-filled: they always show a selected option --}}
                            <div class="input-group input-group-outline is-filled">
                                <label class="form-label" for="PropertyID">Property</label>
                                <select id="PropertyID" name="PropertyID" class="form-control">
                                    <option value="">All properties</option>
                                    @foreach($properties as $property)
                                        <option value="{{ $property->PropertyID }}" {{ (string) ($filters['property_id'] ?? '') === (string) $property->PropertyID ? 'selected' : '' }}>
                                            {{ $property->PropertyName }} ({{ $property->PropertyID }}) · {{ $property->API ?? 'unknown' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="input-group input-group-outline {{ !empty($filters['property_name']) ? 'is-filled' : '' }}" id="outline-property-name">
                                <label class="form-label" for="PropertyName">Property name search</label>
                                <input type="text" id="PropertyName" name="PropertyName" class="form-control" value="{{ $filters['property_name'] ?? '' }}">
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="d-flex align-items-center gap-2 mb-2">
                            <label class="form-label mb-0">API sources</label>
                            <button type="button" id="api-select-all" class="btn btn-link text-xs p-0 mb-0">all</button>
                            <span class="text-muted text-xs">/</span>
                            <button type="button" id="api-deselect-all" class="btn btn-link text-xs p-0 mb-0">none</button>
                        </div>
                        @foreach($apis as $api)
                            <div class="form-check form-check-inline me-3 mb-2">
                                <input class="form-check-input" type="checkbox" name="api[]" id="api_{{ $api }}" value="{{ $api }}" {{ in_array($api, $selectedApis) ? 'checked' : '' }}>
                                <label class="form-check-label" for="api_{{ $api }}">{{ $api }}</label>
                            </div>
                        @endforeach
                    </div>
                    <div class="mt-2 form-check">
                        <input class="form-check-input" type="checkbox" name="only_billable" id="only_billable" value="1" {{ !empty($filters['only_billable']) ? 'checked' : '' }}>
                        <label class="form-check-label" for="only_billable">Only rows with billable amount &gt; 0</label>
                    </div>
                    <div class="mt-3 d-flex gap-2 flex-wrap">
                        <button type="submit" class="btn bg-gradient-primary btn-sm mb-0">
                            <i class="material-icons text-sm align-middle me-1">search</i>Apply filters
                        </button>
                        <a href="{{ route('locks-by-month.export', request()->query()) }}" class="btn btn-outline-primary btn-sm mb-0">Export CSV</a>
                        <a href="{{ route('locks-by-month.export-excel', request()->query()) }}" class="btn btn-outline-success btn-sm mb-0">Export Excel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ══════════════════ 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-billing-btn"
                    data-bs-toggle="pill" data-bs-target="#tab-billing"
                    type="button" role="tab" aria-selected="true">
                <i class="material-icons text-sm align-middle me-1">receipt_long</i>
                Billing
                @if($totalPendingAcrossMonths > 0)
                    <span class="badge bg-gradient-warning text-dark ms-1">{{ $totalPendingAcrossMonths }}</span>
                @endif
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link fw-semibold" id="tab-by-property-btn"
                    data-bs-toggle="pill" data-bs-target="#tab-by-property"
                    type="button" role="tab" aria-selected="false">
                <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-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 $missingCustomerCount = $properties->reject(fn($p) => !empty($propertyEmailMap[(string) $p->PropertyID]?->dkplus_customer_id))->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-analytics-btn"
                    data-bs-toggle="pill" data-bs-target="#tab-analytics"
                    type="button" role="tab" aria-selected="false">
                <i class="material-icons text-sm align-middle me-1">bar_chart</i>
                Analytics
            </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>

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

        {{-- ─────────────────────── BILLING TAB ──────────────────────────────── --}}
        <div class="tab-pane fade show active" 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">Monthly Billing</h6>
                            <p class="text-sm text-muted mb-0">Expand a month to review charges. Bulk-create or sync invoices per month.</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
                            <button id="billing-pending-toggle" class="btn btn-outline-secondary btn-sm mb-0" data-active="0">
                                <i class="material-icons text-sm align-middle me-1">filter_list</i>
                                <span>Pending only</span>
                            </button>
                        </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)
                                            <form method="POST"
                                                  action="{{ route('locks-by-month.dkplus.invoice.bulk', request()->query()) }}"
                                                  class="billing-form bulk-create-form"
                                                  data-confirm="Create {{ $pendingInvoiceCount }} invoice(s) for {{ $monthGroup['month'] }}? This cannot be undone.">
                                                @csrf
                                                <input type="hidden" name="month" value="{{ $monthGroup['month'] }}">
                                                <button type="submit" class="btn bg-gradient-primary btn-sm mb-0">
                                                    <i class="material-icons text-sm align-middle me-1">receipt_long</i>
                                                    Create all ({{ $pendingInvoiceCount }})
                                                </button>
                                            </form>
                                        @endif
                                        @if($invoicedRows > 0)
                                            <form method="POST"
                                                  action="{{ route('locks-by-month.dkplus.invoice.sync-bulk', request()->query()) }}"
                                                  class="billing-form">
                                                @csrf
                                                <input type="hidden" name="month" value="{{ $monthGroup['month'] }}">
                                                <button type="submit" class="btn btn-outline-secondary btn-sm mb-0">
                                                    <i class="material-icons text-sm align-middle me-1">sync</i>
                                                    Sync all
                                                </button>
                                            </form>
                                        @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' }}">
                                                            {{-- Property + API --}}
                                                            <td class="ps-3" style="min-width:180px">
                                                                <div class="fw-semibold text-dark text-sm">{{ $row['property_name'] }}</div>
                                                                <span class="badge bg-gradient-secondary mt-1">{{ $row['api'] }}</span>
                                                            </td>

                                                            {{-- dkPlus customer --}}
                                                            <td style="min-width:220px" class="customer-cell" data-property-id="{{ $row['property_id'] }}">
                                                                @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>
                                                                    <details class="mt-1" data-details-key="cust_{{ $row['property_id'] }}">
                                                                        <summary class="text-xs text-primary" style="cursor:pointer">Edit</summary>
                                                                        <form method="POST" action="{{ route('locks-by-month.dkplus.customer', request()->query()) }}" class="billing-form mt-2" data-ajax="true">
                                                                            @csrf
                                                                            <input type="hidden" name="property_id" value="{{ $row['property_id'] }}">
                                                                            <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="{{ $propertyEmail->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" placeholder="Name" value="{{ $propertyEmail->dkplus_customer_name ?? '' }}">
                                                                            </div>
                                                                            <button type="submit" class="btn btn-outline-dark btn-sm mb-0">Save</button>
                                                                        </form>
                                                                    </details>
                                                                @else
                                                                    <span class="badge bg-gradient-warning text-dark d-block mb-1" style="font-size:.65rem">No customer linked</span>
                                                                    <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="{{ $row['property_id'] }}">
                                                                        <div class="d-flex gap-1 mb-1">
                                                                            <input type="text" name="dkplus_customer_id" class="form-control form-control-sm" placeholder="Customer ID" style="width:85px">
                                                                            <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" placeholder="Name">
                                                                        </div>
                                                                        <button type="submit" class="btn btn-outline-dark btn-sm mb-0">Save</button>
                                                                    </form>
                                                                @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)
                                                                        <form method="POST" action="{{ route('locks-by-month.dkplus.invoice', request()->query()) }}" class="billing-form">
                                                                            @csrf
                                                                            <input type="hidden" name="month" value="{{ $row['month'] }}">
                                                                            <input type="hidden" name="property_id" value="{{ $row['property_id'] }}">
                                                                            <button type="submit"
                                                                                    class="btn bg-gradient-primary btn-sm mb-0 w-100"
                                                                                    {{ empty($propertyEmail?->dkplus_customer_id) ? 'disabled' : '' }}
                                                                                    title="{{ empty($propertyEmail?->dkplus_customer_id) ? 'Link a dkPlus customer first' : 'Create invoice in dkPlus' }}">
                                                                                Create
                                                                            </button>
                                                                        </form>
                                                                    @else
                                                                        {{-- Compact icon-button row: Sync | PDF | Email --}}
                                                                        <div class="d-flex gap-1 mt-1">
                                                                            <form method="POST" action="{{ route('locks-by-month.dkplus.invoice.sync', request()->query()) }}" class="billing-form flex-fill">
                                                                                @csrf
                                                                                <input type="hidden" name="month" value="{{ $row['month'] }}">
                                                                                <input type="hidden" name="property_id" value="{{ $row['property_id'] }}">
                                                                                <button type="submit" class="btn btn-outline-secondary btn-sm mb-0 w-100"
                                                                                        data-bs-toggle="tooltip" title="Sync status from dkPlus">
                                                                                    <i class="material-icons" style="font-size:16px">sync</i>
                                                                                </button>
                                                                            </form>
                                                                            <a href="{{ route('locks-by-month.dkplus.invoice.pdf', $invoiceRecord->dkplus_invoice_id) }}"
                                                                               target="_blank" rel="noopener"
                                                                               class="btn btn-outline-success btn-sm mb-0 flex-fill"
                                                                               data-bs-toggle="tooltip" title="Open PDF">
                                                                                <i class="material-icons" style="font-size:16px">picture_as_pdf</i>
                                                                            </a>
                                                                            <form method="POST" action="{{ route('locks-by-month.dkplus.invoice.email', request()->query()) }}" class="billing-form flex-fill"
                                                                                  data-confirm="Send invoice email for #{{ $invoiceRecord->dkplus_invoice_id }}? This will trigger an email from dkPlus.">
                                                                                @csrf
                                                                                <input type="hidden" name="invoice_id" value="{{ $invoiceRecord->dkplus_invoice_id }}">
                                                                                <button type="submit" class="btn btn-outline-info btn-sm mb-0 w-100"
                                                                                        data-bs-toggle="tooltip" title="Send invoice by email via dkPlus">
                                                                                    <i class="material-icons" style="font-size:16px">email</i>
                                                                                </button>
                                                                            </form>
                                                                        </div>
                                                                    @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" id="tab-by-property" role="tabpanel">
            @php
                $unbilledOnly        = (bool) request()->boolean('by_property_unbilled');
                $byPropertyFiltered  = $unbilledOnly
                    ? $byProperty->where('unbilled_count', '>', 0)->values()
                    : $byProperty;
                $bulkCandidateCount  = $byProperty->where('unbilled_count', '>', 0)->count();
                $bulkCandidateAmount = (int) $byProperty->where('unbilled_count', '>', 0)->sum('unbilled_total');
            @endphp

            {{-- Sticky toolbar — search, sort, filter, bulk --}}
            <div class="card shadow-sm border-0 mb-3 by-property-toolbar">
                <div class="card-body py-2">
                    <div class="row g-2 align-items-center">

                        {{-- Live count + bulk-candidate summary --}}
                        <div class="col-12 col-lg-auto me-lg-auto">
                            <span class="text-sm fw-semibold by-property-visible-count">{{ $byPropertyFiltered->count() }}</span>
                            <span class="text-xs text-muted">{{ $byPropertyFiltered->count() === 1 ? 'property' : 'properties' }}</span>
                            @if($bulkCandidateCount > 0)
                                <span class="text-xs text-muted ms-2">·</span>
                                <span class="text-xs text-warning fw-semibold ms-2">{{ $bulkCandidateCount }} with unbilled</span>
                                <span class="text-xs text-muted">({{ $formatIsk($bulkCandidateAmount) }})</span>
                            @endif
                        </div>

                        {{-- Search --}}
                        <div class="col-12 col-md-5 col-lg-3">
                            <div class="input-group input-group-outline">
                                <label class="form-label">Search property name</label>
                                <input type="text" class="form-control" id="byPropSearch" autocomplete="off">
                            </div>
                        </div>

                        {{-- Sort --}}
                        <div class="col-12 col-md-4 col-lg-2">
                            <div class="input-group input-group-outline is-filled">
                                <label class="form-label">Sort by</label>
                                <select id="byPropSort" class="form-control">
                                    <option value="unbilled_total_desc" selected>Largest unbilled</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>
                            </div>
                        </div>

                        {{-- Unbilled-only toggle --}}
                        <div class="col-auto">
                            <form method="GET" class="d-inline">
                                @foreach(request()->except('by_property_unbilled', 'page') as $k => $v)
                                    @if(is_array($v))
                                        @foreach($v as $vv)<input type="hidden" name="{{ $k }}[]" value="{{ $vv }}">@endforeach
                                    @else
                                        <input type="hidden" name="{{ $k }}" value="{{ $v }}">
                                    @endif
                                @endforeach
                                <div class="form-check form-switch d-inline-flex align-items-center mb-0">
                                    <input class="form-check-input" type="checkbox" id="byPropUnbilledToggle"
                                           name="by_property_unbilled" value="1"
                                           onchange="this.form.submit()"
                                           {{ $unbilledOnly ? 'checked' : '' }}>
                                    <label class="form-check-label text-sm ms-2 mb-0" for="byPropUnbilledToggle">Unbilled only</label>
                                </div>
                            </form>
                        </div>

                        {{-- Bulk close --}}
                        @if($bulkCandidateCount > 0)
                            <div class="col-auto">
                                <form method="POST"
                                      action="{{ route('locks-by-month.dkplus.invoice.consolidated-bulk', request()->query()) }}"
                                      class="d-inline"
                                      data-confirm="Create one consolidated invoice for each of the {{ $bulkCandidateCount }} properties with unbilled months ({{ $formatIsk($bulkCandidateAmount) }} total)?"
                                      data-confirm-emphasis="warning">
                                    @csrf
                                    <input type="hidden" name="auto_email" value="0" class="bulk-auto-email-input">
                                    <button type="submit" class="btn btn-outline-warning btn-sm mb-0">
                                        <i class="material-icons text-sm align-middle me-1">stacked_bar_chart</i>
                                        Bulk close
                                    </button>
                                </form>
                            </div>
                        @endif

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

            {{-- Property cards --}}
            @forelse($byPropertyFiltered as $prop)
                @php
                    $propertyEmail = $propertyEmailMap[$prop['property_id']] ?? null;
                    $hasCustomer   = !empty($propertyEmail?->dkplus_customer_id);
                    $unbilledList  = collect($prop['months'])->filter(fn($m) => empty($m['is_invoiced']) && empty($m['is_skipped']))->values();
                @endphp
                <div class="card shadow-sm border-0 mb-3 by-property-card{{ $prop['unbilled_count'] > 0 ? ' has-unbilled' : '' }}"
                     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' }}">
                    <div role="button" tabindex="0"
                         class="card-header by-property-toggle py-3 px-3 border-0 border-bottom d-flex flex-wrap align-items-center gap-3 bg-white w-100"
                         aria-expanded="{{ $prop['unbilled_count'] > 0 ? 'true' : 'false' }}">
                        <i class="material-icons text-sm collapse-chevron text-muted">{{ $prop['unbilled_count'] > 0 ? 'expand_more' : '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 in the Billing tab first">
                                        <i class="material-icons text-xs align-middle">link_off</i> No customer
                                    </span>
                                @endif
                                {{-- 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'] }})
                                    @else
                                        no invoices yet
                                    @endif
                                </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="text-end" style="min-width:160px">
                            <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 --}}
                    <div class="by-property-collapse" {{ $prop['unbilled_count'] > 0 ? '' : 'hidden' }}>

                    <div class="card-body py-2 px-3">

                        {{-- Inline customer editor — link / edit a dkPlus customer without leaving the page. --}}
                        <div class="customer-cell pb-2 mb-2 border-bottom"
                             data-layout="byproperty"
                             data-property-id="{{ $prop['property_id'] }}">
                            @if($hasCustomer)
                                <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">{{ $propertyEmail->dkplus_customer_name ?: '—' }}</span>
                                    <span class="text-xs text-muted font-monospace">#{{ $propertyEmail->dkplus_customer_id }}</span>
                                    <details class="ms-auto" data-details-key="cust_byprop_{{ $prop['property_id'] }}">
                                        <summary class="text-xs text-primary" style="cursor:pointer">Edit</summary>
                                        <form method="POST" action="{{ route('locks-by-month.dkplus.customer', request()->query()) }}" class="billing-form mt-2" data-ajax="true">
                                            @csrf
                                            <input type="hidden" name="property_id" value="{{ $prop['property_id'] }}">
                                            <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="{{ $propertyEmail->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" value="{{ $propertyEmail->dkplus_customer_name ?? '' }}">
                                                <button type="submit" class="btn btn-outline-dark btn-sm mb-0">Save</button>
                                            </div>
                                        </form>
                                    </details>
                                </div>
                            @else
                                <div class="d-flex align-items-center gap-2 flex-wrap mb-2">
                                    <span class="text-xs text-uppercase text-warning fw-semibold">
                                        <i class="material-icons text-xs align-middle">link_off</i> No dkPlus customer linked
                                    </span>
                                    <span class="text-xs text-muted">— enter the customer ID and click Save.</span>
                                </div>
                                <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="{{ $prop['property_id'] }}">
                                    <div class="d-flex gap-1 flex-wrap">
                                        <input type="text" name="dkplus_customer_id" class="form-control form-control-sm" placeholder="Customer ID" style="width:140px">
                                        <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)">
                                        <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>
                            @endif
                        </div>

                        <form method="POST"
                              action="{{ route('locks-by-month.dkplus.invoice.consolidated', request()->query()) }}"
                              class="consolidated-invoice-form"
                              data-property-id="{{ $prop['property_id'] }}">
                            @csrf
                            <input type="hidden" name="property_id" value="{{ $prop['property_id'] }}">

                            <div class="table-responsive">
                                <table class="table table-sm align-middle mb-2">
                                    <thead>
                                        <tr class="text-xs text-uppercase text-muted">
                                            <th style="width:40px"></th>
                                            <th>Month</th>
                                            <th class="text-end">Locks</th>
                                            <th class="text-end">Subtotal</th>
                                            <th>Status</th>
                                            <th class="text-end">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($prop['months'] as $m)
                                            @php
                                                $rowStatus = !empty($m['is_invoiced']) ? 'invoiced' : (!empty($m['is_skipped']) ? 'skipped' : 'pending');
                                                $origSubtotal = (int) ($m['original_subtotal'] ?? $m['subtotal']);
                                                $displaySubtotal = $rowStatus === 'skipped' ? 0 : $origSubtotal;
                                            @endphp
                                            <tr class="month-row"
                                                data-month="{{ $m['month'] }}"
                                                data-status="{{ $rowStatus }}"
                                                data-original-subtotal="{{ $origSubtotal }}"
                                                data-locks="{{ $m['billable_unique_lock_count'] }}">
                                                <td class="cb-cell">
                                                    @if($rowStatus === 'pending')
                                                        <input type="checkbox" name="months[]" value="{{ $m['month'] }}" class="form-check-input month-cb" {{ $hasCustomer ? '' : 'disabled' }}>
                                                    @else
                                                        <span class="text-xs text-muted">—</span>
                                                    @endif
                                                </td>
                                                <td class="text-sm">{{ $m['month'] }}</td>
                                                <td class="text-sm text-end">{{ $m['billable_unique_lock_count'] }}</td>
                                                <td class="text-sm text-end fw-semibold subtotal-cell">{{ $formatIsk($displaySubtotal) }}</td>
                                                <td class="status-cell">
                                                    @if($rowStatus === 'invoiced')
                                                        <span class="badge bg-gradient-success text-xs">Invoiced</span>
                                                        @if(!empty($m['invoice_id']))
                                                            <span class="text-xs text-muted ms-1 font-monospace">#{{ $m['invoice_id'] }}</span>
                                                        @endif
                                                    @elseif($rowStatus === 'skipped')
                                                        <span class="badge bg-gradient-info text-xs">Skipped</span>
                                                        @if(!empty($m['skip_reason']))
                                                            <span class="text-xs text-muted ms-1 skip-reason-text">— {{ $m['skip_reason'] }}</span>
                                                        @endif
                                                    @else
                                                        <span class="badge bg-gradient-warning text-dark text-xs">Pending</span>
                                                    @endif
                                                </td>
                                                <td class="text-end action-cell">
                                                    @if($rowStatus !== 'invoiced')
                                                        <button type="button"
                                                                class="btn btn-link btn-sm p-0 text-xs skip-toggle-btn"
                                                                data-property-id="{{ $prop['property_id'] }}"
                                                                data-month="{{ $m['month'] }}"
                                                                data-action="{{ $rowStatus === 'skipped' ? 'unskip' : 'skip' }}">
                                                            {{ $rowStatus === 'skipped' ? 'Unskip' : 'Skip' }}
                                                        </button>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            {{-- Action bar — always rendered so JS can show/hide as state changes inline --}}
                            <div class="card-action-bar {{ $unbilledList->count() > 0 ? '' : 'd-none' }}">
                                <div class="d-flex flex-wrap align-items-center gap-2 border-top pt-3 mt-2">
                                    <div class="btn-group" role="group" aria-label="Selection">
                                        <button type="button" class="btn btn-outline-secondary btn-sm mb-0 select-all-unbilled-btn">
                                            <i class="material-icons text-sm align-middle me-1">done_all</i>Select all
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary btn-sm mb-0 select-none-btn">
                                            <i class="material-icons text-sm align-middle">close</i>
                                        </button>
                                    </div>

                                    <button type="button" class="btn btn-outline-info btn-sm mb-0 bulk-skip-btn" disabled title="Pick months first">
                                        <i class="material-icons text-sm align-middle me-1">block</i>Skip selected
                                    </button>

                                    <div class="ms-auto text-end" style="min-width:200px">
                                        <div class="fw-semibold selected-total">0 ISK</div>
                                        <div class="text-xs text-muted selected-count-line"><span class="selected-count">0</span> of <span class="unbilled-cap">{{ $unbilledList->count() }}</span> unbilled selected</div>
                                    </div>
                                </div>

                                <div class="row g-2 mt-2 align-items-center">
                                    <div class="col-md-7">
                                        <div class="input-group input-group-outline">
                                            <label class="form-label">Custom note (appended to invoice text)</label>
                                            <input type="text" name="user_note" class="form-control" maxlength="500">
                                        </div>
                                    </div>
                                    <div class="col-md-3 d-flex align-items-center">
                                        <div class="form-check form-switch mb-0">
                                            <input class="form-check-input auto-email-cb" type="checkbox" name="auto_email" value="1" id="auto_email_{{ $prop['property_id'] }}">
                                            <label class="form-check-label text-sm ms-2" for="auto_email_{{ $prop['property_id'] }}">Email after create</label>
                                        </div>
                                    </div>
                                    <div class="col-md-2 text-end">
                                        <button type="submit"
                                                class="btn bg-gradient-primary btn-sm mb-0 w-100 create-consolidated-btn"
                                                disabled
                                                @if(!$hasCustomer) data-no-customer="1" @endif
                                                title="{{ $hasCustomer ? 'Pick at least one month' : 'Link a dkPlus customer first' }}">
                                            <i class="material-icons text-sm align-middle me-1">receipt_long</i>Create invoice
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="all-done-msg text-center text-sm text-muted py-3 {{ $unbilledList->count() > 0 ? 'd-none' : '' }}">
                                <i class="material-icons text-sm align-middle me-1">check_circle</i>
                                All months for this property are either invoiced or marked as non-billable.
                            </div>
                        </form>
                    </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">
                        @if($unbilledOnly)
                            No properties with unbilled months for the current filters.
                        @else
                            No billing data for the current filters.
                        @endif
                    </div>
                </div>
            @endforelse

            {{-- Search empty-state — rendered ONCE outside the @forelse 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>No properties match your search.</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.
                $customersList = $properties
                    ->map(fn($p) => [
                        'property'      => $p,
                        'email'         => $propertyEmailMap[(string) $p->PropertyID] ?? null,
                        'has_customer'  => !empty($propertyEmailMap[(string) $p->PropertyID]?->dkplus_customer_id),
                    ])
                    ->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();
                $missingCount = $customersList->where('has_customer', false)->count();
            @endphp

            {{-- Sticky toolbar --}}
            <div class="card shadow-sm border-0 mb-3 customers-toolbar">
                <div class="card-body py-2">
                    <div class="row g-2 align-items-center">
                        <div class="col-12 col-lg-auto me-lg-auto">
                            <span class="text-sm fw-semibold customers-visible-count">{{ $missingCount }}</span>
                            <span class="text-xs text-muted">visible</span>
                            <span class="text-xs text-muted ms-2">·</span>
                            @if($missingCount > 0)
                                <span class="text-xs text-warning fw-semibold ms-2"><span class="customers-missing-count">{{ $missingCount }}</span> missing</span>
                            @endif
                            <span class="text-xs text-muted ms-2">·</span>
                            <span class="text-xs text-success ms-2"><span class="customers-linked-count">{{ $linkedCount }}</span> linked</span>
                        </div>

                        <div class="col-12 col-md-5 col-lg-4">
                            <div class="input-group input-group-outline">
                                <label class="form-label">Search property name</label>
                                <input type="text" class="form-control" id="customersSearch" autocomplete="off">
                            </div>
                        </div>

                        <div class="col-auto">
                            <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>
                    </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 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-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
                                        </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 --}}

        @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

        {{-- ─────────────────────── ANALYTICS TAB ────────────────────────────── --}}
        <div class="tab-pane fade" id="tab-analytics" role="tabpanel">

            {{-- 8 KPI cards --}}
            <div class="row g-4 mb-4">
                <div class="col-xl-3 col-md-6">
                    <div class="card h-100 shadow-sm border"><div class="card-body">
                        <p class="text-xs text-uppercase text-muted mb-1">Grand total billed</p>
                        <h5 class="mb-0">{{ $formatIsk($billing['grand_total']) }}</h5>
                    </div></div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card h-100 shadow-sm border"><div class="card-body">
                        <p class="text-xs text-uppercase text-muted mb-1">Latest month total</p>
                        <h5 class="mb-0">{{ $formatIsk($latestMonthTotal) }}</h5>
                    </div></div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card h-100 shadow-sm border"><div class="card-body">
                        <p class="text-xs text-uppercase text-muted mb-1">Average monthly total</p>
                        <h5 class="mb-0">{{ $formatIsk($averageMonthTotal) }}</h5>
                    </div></div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card h-100 shadow-sm border"><div class="card-body">
                        <p class="text-xs text-uppercase text-muted mb-1">Active filter groups</p>
                        <h5 class="mb-0">{{ $activeFilterCount }}</h5>
                    </div></div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card h-100 shadow-sm border"><div class="card-body">
                        <p class="text-xs text-uppercase text-muted mb-1">Latest unique locks</p>
                        <h5 class="mb-0">{{ $latestUniqueLocks }}</h5>
                    </div></div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card h-100 shadow-sm border"><div class="card-body">
                        <p class="text-xs text-uppercase text-muted mb-1">New locks in range</p>
                        <h5 class="mb-0">{{ $totalNewLocksInRange }}</h5>
                    </div></div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card h-100 shadow-sm border"><div class="card-body">
                        <p class="text-xs text-uppercase text-muted mb-1">New properties in range</p>
                        <h5 class="mb-0">{{ $totalNewPropertiesInRange }}</h5>
                    </div></div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card h-100 shadow-sm border"><div class="card-body">
                        <p class="text-xs text-uppercase text-muted mb-1">Months tracked</p>
                        <h5 class="mb-0">{{ $monthsTracked }}</h5>
                    </div></div>
                </div>
            </div>

            {{-- 3 insight cards --}}
            <div class="row g-4 mb-4">
                <div class="col-lg-4">
                    <div class="card h-100 border shadow-sm">
                        <div class="card-header p-3 pb-0 bg-transparent">
                            <h6 class="mb-0">Growth Health</h6>
                            <p class="text-sm text-muted mb-0">How fast the selected period expanded.</p>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-end mb-2">
                                <h3 class="mb-0 text-dark">{{ $netGrowthRate }}%</h3>
                                <span class="badge bg-gradient-success">Net lock velocity</span>
                            </div>
                            <div class="progress progress-md">
                                <div class="progress-bar bg-gradient-success" role="progressbar" style="width: {{ min(100, max(5, $netGrowthRate)) }}%;"></div>
                            </div>
                            <p class="text-xs text-muted mt-2 mb-0">New locks in range vs. latest unique lock base.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card h-100 border shadow-sm">
                        <div class="card-header p-3 pb-0 bg-transparent">
                            <h6 class="mb-0">Property Activity</h6>
                            <p class="text-sm text-muted mb-0">Average additions per tracked month.</p>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-end mb-2">
                                <h3 class="mb-0 text-dark">{{ $propertyCoverageRate }}</h3>
                                <span class="badge bg-gradient-info">Properties / month</span>
                            </div>
                            <div class="progress progress-md">
                                <div class="progress-bar bg-gradient-info" role="progressbar" style="width: {{ min(100, max(8, $propertyCoverageRate * 12)) }}%;"></div>
                            </div>
                            <p class="text-xs text-muted mt-2 mb-0">Monthly onboarding consistency in current filters.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card h-100 border shadow-sm">
                        <div class="card-header p-3 pb-0 bg-transparent">
                            <h6 class="mb-0">Billing Signal</h6>
                            <p class="text-sm text-muted mb-0">Snapshot of active invoice periods.</p>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-end mb-2">
                                <h3 class="mb-0 text-dark">{{ $billableMonths }}</h3>
                                <span class="badge bg-gradient-dark">Billable months</span>
                            </div>
                            <div class="d-flex flex-wrap gap-2 mt-2">
                                <span class="badge bg-light text-dark border">Grand: {{ $formatIsk($billing['grand_total']) }}</span>
                                <span class="badge bg-light text-dark border">Avg: {{ $formatIsk($averageMonthTotal) }}</span>
                            </div>
                            <p class="text-xs text-muted mt-3 mb-0">Verify billing continuity across the selected range.</p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Lock growth chart + table --}}
            <div class="card mb-4 shadow-sm border">
                <div class="card-header pb-0">
                    <h6 class="mb-0">Monthly Lock Growth</h6>
                    <p class="text-sm text-muted mb-0">Unique locks and property additions per month.</p>
                </div>
                <div class="card-body border-bottom">
                    <canvas id="lockGrowthTrendChart" height="90"></canvas>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table align-items-center mb-0 lock-growth-table">
                            <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">Unique Locks</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">New Locks</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">New Properties</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($stats as $statRow)
                                    <tr>
                                        <td class="ps-3 fw-semibold">{{ $statRow['month'] }}</td>
                                        <td><span class="badge bg-gradient-dark">{{ $statRow['count'] }}</span></td>
                                        <td><span class="badge bg-gradient-success">{{ $statRow['new_locks'] }}</span></td>
                                        <td><span class="badge bg-gradient-info">{{ $statRow['new_properties'] }}</span></td>
                                    </tr>
                                @empty
                                    <tr><td class="ps-3 text-muted" colspan="4">No rows for selected filters.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- Property growth chart + table --}}
            <div class="card shadow-sm border">
                <div class="card-header pb-0">
                    <h6 class="mb-0">Monthly Property Growth</h6>
                    <p class="text-sm text-muted mb-0">Property additions per month.</p>
                </div>
                <div class="card-body border-bottom">
                    <canvas id="newAdditionsChart" height="90"></canvas>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table align-items-center mb-0 monthly-property-growth-table">
                            <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">Property Added</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Locks Added</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($propertyGrowthRows as $propertyRow)
                                    <tr>
                                        <td class="ps-3">{{ $propertyRow['month'] }}</td>
                                        <td class="properties-added-cell fw-semibold text-dark">{{ strip_tags((string) $propertyRow['name']) }}</td>
                                        <td><span class="badge bg-gradient-dark">{{ $propertyRow['locks'] }}</span></td>
                                    </tr>
                                @empty
                                    <tr><td class="ps-3 text-muted" colspan="3">No new properties in the selected range.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

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

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

    {{-- Flash data passed to SweetAlert (no Bootstrap toast HTML needed) --}}
    @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>
    /* ── Property growth table ────────────────────────────────────────────── */
    .lock-statistics-page .properties-added-cell,
    .lock-statistics-page .properties-added-cell * {
        color: #344767 !important;
        text-decoration: none !important;
    }
    .lock-statistics-page .monthly-property-growth-table thead th,
    .lock-statistics-page .monthly-property-growth-table tbody td {
        font-family: "Roboto","Helvetica","Arial",sans-serif;
        font-size: .875rem;
        font-weight: 400;
        letter-spacing: normal;
    }
    .lock-statistics-page .monthly-property-growth-table thead th {
        font-size: .65rem;
        font-weight: 700;
        letter-spacing: .05rem;
        color: #7b809a !important;
    }
    .lock-statistics-page .monthly-property-growth-table tbody td { color: #344767 !important; }

    /* ── 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 ──────────────────────────────────────────────── */
    #billingMonthAccordion.billing-pending-active tr[data-billing-row][data-invoiced="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"])) { display: none; }
    #billing-pending-toggle.active { background-color: #fb6340; border-color: #fb6340; color: #fff; }

    /* ── 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 has no matches */
    #byPropEmptySearch                       { display: none; }
    #byPropEmptySearch.show                   { display: block; }

    /* ── 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 src="{{ asset('assets') }}/js/plugins/chartjs.min.js"></script>
<script>
    // ── 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 {
            res = await fetch(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 ───────────────────────────────────────
    (() => {
        const y = sessionStorage.getItem('brafa_scroll_y');
        if (y !== null) { window.scrollTo({ top: parseInt(y, 10), 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 bootstrap === 'undefined') return;
        const TAB_KEY = 'brafa_active_tab';
        const saved   = localStorage.getItem(TAB_KEY) || '#tab-billing';
        const btn     = document.querySelector(`#mainPageTabs button[data-bs-target="${saved}"]`);
        if (btn && !btn.classList.contains('active')) new bootstrap.Tab(btn).show();

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

    // ── Analytics charts (lazy — init on first tab show) ──────────────────
    (() => {
        const stats = @json($stats->values());
        if (!Array.isArray(stats) || stats.length === 0) return;

        const labels        = stats.map(i => i.month);
        const uniqueLocks   = stats.map(i => Number(i.count      || 0));
        const newLocks      = stats.map(i => Number(i.new_locks  || 0));
        const newProperties = stats.map(i => Number(i.new_properties || 0));

        let chartsBuilt = false;
        function buildCharts() {
            if (chartsBuilt || typeof Chart === 'undefined') return;
            chartsBuilt = true;

            const trend = document.getElementById('lockGrowthTrendChart');
            if (trend) new Chart(trend, {
                type: 'line',
                data: {
                    labels,
                    datasets: [
                        { label: 'Unique Locks', data: uniqueLocks,   borderColor: '#5e72e4', backgroundColor: 'rgba(94,114,228,.15)', fill: true, tension: .35 },
                        { label: 'New Locks',    data: newLocks,      borderColor: '#2dce89', backgroundColor: 'rgba(45,206,137,.10)', fill: true, tension: .35 },
                    ],
                },
                options: { plugins: { legend: { position: 'bottom' } } },
            });

            const additions = document.getElementById('newAdditionsChart');
            if (additions) new Chart(additions, {
                type: 'bar',
                data: { labels, datasets: [{ label: 'New Properties', data: newProperties, backgroundColor: '#11cdef', borderRadius: 6 }] },
                options: { plugins: { legend: { display: false } } },
            });
        }

        // If analytics tab is already visible on load, build immediately
        if (document.getElementById('tab-analytics')?.classList.contains('show')) buildCharts();

        document.getElementById('tab-analytics-btn')?.addEventListener('shown.bs.tab', buildCharts);
    })();

    // ── Billing accordion state persistence ────────────────────────────────
    (() => {
        const KEY       = 'brafa_billing_open_month';
        const accordion = document.getElementById('billingMonthAccordion');
        if (!accordion || typeof bootstrap === '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 bootstrap !== 'undefined') {
                new bootstrap.Collapse(target).show();
            }
            setTimeout(() => item?.scrollIntoView({ behavior: 'smooth', block: 'start' }), 200);
            this.value = '';
        });
    })();

    // ── Pending-only filter ────────────────────────────────────────────────
    (() => {
        const toggle    = document.getElementById('billing-pending-toggle');
        const accordion = document.getElementById('billingMonthAccordion');
        if (!toggle || !accordion) return;

        toggle.addEventListener('click', () => {
            const nowActive = toggle.dataset.active !== '1';
            toggle.dataset.active = nowActive ? '1' : '0';
            toggle.classList.toggle('active', nowActive);
            accordion.classList.toggle('billing-pending-active', nowActive);
            toggle.querySelector('.material-icons').textContent = nowActive ? 'filter_list_off' : 'filter_list';
            toggle.querySelector('span').textContent            = nowActive ? ' Show all' : ' Pending only';

            if (nowActive && typeof bootstrap !== 'undefined') {
                const firstPending = accordion.querySelector('.billing-month-item:has(tr[data-billing-row][data-invoiced="0"])');
                if (firstPending) {
                    const collapse = firstPending.querySelector('.collapse');
                    if (collapse && !collapse.classList.contains('show')) new bootstrap.Collapse(collapse).show();
                }
            }
        });
    })();

    // ── 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 bootstrap !== 'undefined') new bootstrap.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 bootstrap !== 'undefined') new bootstrap.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 ?? '';
                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>` : ''}`;
            }
            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;
            if (status === 'invoiced') return '';
            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;

            if (status === 'invoiced' && opts.invoiceId) {
                row.dataset.invoiceId = opts.invoiceId;
            }
            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 = bootstrap?.Tooltip?.getInstance(chip);
                        if (existing) existing.dispose();
                        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
                            new bootstrap.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 rows = [...card.querySelectorAll('.month-row')];
            let unbilledCount = 0, unbilledTotal = 0, skippedCount = 0;

            rows.forEach(row => {
                const orig = Number(row.dataset.originalSubtotal || 0);
                if (row.dataset.status === 'pending') { unbilledCount++; unbilledTotal += orig; }
                else if (row.dataset.status === 'skipped') { skippedCount++; }
            });

            // 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);

            // Action bar visibility
            card.querySelector('.card-action-bar')?.classList.toggle('d-none', unbilledCount === 0);
            card.querySelector('.all-done-msg')?.classList.toggle('d-none',    unbilledCount > 0);

            // Selected-total widget
            recomputeSelected(card);
        }

        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;

        // ── 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();
                card.querySelectorAll('.month-cb:not(:disabled)').forEach(cb => cb.checked = true);
                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;
            }
        });

        // ── 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 the new ID
                const newId = data.invoice_id || '';
                (data.months || months).forEach(m => {
                    const row = card.querySelector(`.month-row[data-month="${m}"]`);
                    if (!row) return;
                    try { setRowStatus(row, 'invoiced', { invoiceId: newId }); }
                    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);
        });
    })();

    // ── 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 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;
                searchInput.closest('.input-group-outline')?.classList.add('is-filled');
            }
            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 => r.dataset.status === 'missing' ? missing++ : linked++);
            if (missingCountEl) missingCountEl.textContent = missing;
            if (linkedCountEl)  linkedCountEl.textContent  = linked;
            applyFilter();
        }

        function applyFilter() {
            const q = (searchInput?.value || '').trim().toLowerCase();
            const onlyMissing = !!missingOnly?.checked;
            let visible = 0;
            rows.forEach(row => {
                const nameOk   = q === '' || (row.dataset.propertyName || '').toLowerCase().includes(q);
                const statusOk = !onlyMissing || row.dataset.status === 'missing';
                const show     = nameOk && statusOk;
                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);
        }

        // 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 COLLAPSE_KEY = 'brafa_byprop_collapse_v1';
        const SORT_KEY     = 'brafa_byprop_sort_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');

        function getCollapseState() {
            try { return JSON.parse(sessionStorage.getItem(COLLAPSE_KEY) || '{}'); }
            catch { return {}; }
        }
        function saveCollapseState(state) {
            try { sessionStorage.setItem(COLLAPSE_KEY, JSON.stringify(state)); } catch {}
        }

        // ── 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');
        }

        // Restore saved collapse state — overrides the default (expand-when-unbilled).
        const savedCollapse = getCollapseState();
        cards.forEach(card => {
            const id = card.dataset.propertyId;
            if (savedCollapse[id] !== undefined) {
                setCollapsed(card, !!savedCollapse[id]);
            }
        });

        function toggleCard(toggle) {
            const card = toggle.closest('.by-property-card');
            if (!card) return;
            const wrap = card.querySelector('.by-property-collapse');
            const collapsed = !wrap.hidden;
            setCollapsed(card, collapsed);
            const state = getCollapseState();
            state[card.dataset.propertyId] = collapsed;
            saveCollapseState(state);
        }

        document.addEventListener('click', e => {
            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 ────────────────────────────────────────────────────────
        function applySearch() {
            const q = (searchInput?.value || '').trim().toLowerCase();
            let visible = 0;
            cards.forEach(card => {
                const match = q === '' || (card.dataset.propertyName || '').toLowerCase().includes(q);
                card.classList.toggle('is-hidden', !match);
                if (match) visible++;
            });
            if (visibleCountEl) visibleCountEl.textContent = visible;
            if (emptyEl) emptyEl.classList.toggle('show', visible === 0 && q !== '');
            // Persist
            try { sessionStorage.setItem(SEARCH_KEY, searchInput?.value || ''); } catch {}
        }

        if (searchInput) {
            // Restore saved search
            try {
                const saved = sessionStorage.getItem(SEARCH_KEY);
                if (saved) {
                    searchInput.value = saved;
                    searchInput.closest('.input-group-outline')?.classList.add('is-filled');
                }
            } 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),
            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),
        };

        function applySort() {
            if (!sortSelect) return;
            const key = sortSelect.value;
            const fn = SORT_FNS[key];
            if (!fn) return;
            const parent = cards[0].parentNode;
            const sorted = [...cards].sort(fn);
            sorted.forEach(c => parent.appendChild(c));
            try { sessionStorage.setItem(SORT_KEY, key); } catch {}
        }

        if (sortSelect) {
            // Restore saved sort
            try {
                const saved = sessionStorage.getItem(SORT_KEY);
                if (saved && SORT_FNS[saved]) {
                    sortSelect.value = saved;
                }
            } catch {}
            sortSelect.addEventListener('change', applySort);
            applySort();
        }

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

    // ── 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 => {
                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