@extends('layouts.app')

@section('content')
<div class="container-fluid py-4 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++;
    @endphp

    @if(session('status'))
        <div class="alert alert-success text-white bg-gradient-success" role="alert">
            {{ session('status') }}
        </div>
    @endif
    @if($errors->has('dkplus'))
        <div class="alert alert-danger text-white bg-gradient-danger" role="alert">
            {{ $errors->first('dkplus') }}
        </div>
    @endif

    <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="Invoices are monthly. Standard APIs are billed at 500 ISK per active lock, while Golf simulator is billed at a fixed 4,900 ISK per property per month.">
                            <i class="material-icons text-sm align-middle">info</i>
                            Billing rules overview
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <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 selected 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 selected 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>

    <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)) }}%;" aria-valuenow="{{ $netGrowthRate }}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <p class="text-xs text-muted mt-2 mb-0">Based on 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)) }}%;" aria-valuenow="{{ $propertyCoverageRate }}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <p class="text-xs text-muted mt-2 mb-0">Shows monthly onboarding consistency in the 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">Average: {{ $formatIsk($averageMonthTotal) }}</span>
                    </div>
                    <p class="text-xs text-muted mt-3 mb-0">Use this card to quickly verify billing continuity across the selected range.</p>
                </div>
            </div>
        </div>
    </div>

    <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>
                    <h6 class="mb-0">Filters</h6>
                    <p class="text-sm text-muted mb-0">Refine monthly lock and billing data by time, property, and API source.</p>
                </div>
                <a href="{{ route('locks-by-month') }}" class="btn btn-outline-secondary btn-sm mb-0">Reset filters</a>
            </div>
        </div>
        <div class="card-body">
            <form method="GET" class="mb-3">
                <div class="row g-3 align-items-end">
                    <div class="col-lg-3 col-md-6">
                        <label class="form-label mb-1" for="from_month">From month</label>
                        <input type="month" id="from_month" name="from_month" class="form-control" value="{{ $filters['from_month'] ?? '' }}">
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <label class="form-label mb-1" for="to_month">To month</label>
                        <input type="month" id="to_month" name="to_month" class="form-control" value="{{ $filters['to_month'] ?? '' }}">
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <label class="form-label mb-1" for="PropertyID">Property selector (ID)</label>
                        <select id="PropertyID" name="PropertyID" class="form-select">
                            <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 class="col-lg-3 col-md-6">
                        <label class="form-label mb-1" for="PropertyName">Property search (name)</label>
                        <input type="text" id="PropertyName" name="PropertyName" class="form-control" placeholder="e.g. Blue Lagoon" value="{{ $filters['property_name'] ?? '' }}">
                    </div>
                </div>
                <div class="mt-3">
                    <label class="form-label d-block mb-2">API sources</label>
                    @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">
                    <button type="submit" class="btn bg-gradient-primary btn-sm mb-0">Apply filters</button>
                    <a href="{{ route('locks-by-month.export', request()->query()) }}" class="btn btn-outline-primary btn-sm mb-0">Export filtered CSV</a>
                    <a href="{{ route('locks-by-month.export-excel', request()->query()) }}" class="btn btn-outline-success btn-sm mb-0">Export filtered Excel</a>
                </div>
            </form>

            <div class="filter-tags">
                @if(!empty($filters['from_month']))
                    <span class="badge bg-gradient-info me-1 mb-1">From: {{ $filters['from_month'] }}</span>
                @endif
                @if(!empty($filters['to_month']))
                    <span class="badge bg-gradient-info me-1 mb-1">To: {{ $filters['to_month'] }}</span>
                @endif
                @if(!empty($filters['property_id']))
                    <span class="badge bg-gradient-info me-1 mb-1">Property ID: {{ $filters['property_id'] }}</span>
                @endif
                @if(!empty($filters['property_name']))
                    <span class="badge bg-gradient-info me-1 mb-1">Property name contains: {{ $filters['property_name'] }}</span>
                @endif
                @if(!empty($filters['only_billable']))
                    <span class="badge bg-gradient-info me-1 mb-1">Billable &gt; 0 only</span>
                @endif
                @if(count($selectedApis) !== count($apis))
                    <span class="badge bg-gradient-info me-1 mb-1">APIs: {{ implode(', ', $selectedApis) }}</span>
                @endif
                @if($activeFilterCount === 0)
                    <span class="text-xs text-muted">No active filters. Showing all data.</span>
                @endif
            </div>
        </div>
    </div>

    <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">Overview of 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 $row)
                            <tr>
                                <td class="ps-3 fw-semibold">{{ $row['month'] }}</td>
                                <td><span class="badge bg-gradient-dark">{{ $row['count'] }}</span></td>
                                <td><span class="badge bg-gradient-success">{{ $row['new_locks'] }}</span></td>
                                <td><span class="badge bg-gradient-info">{{ $row['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>

    <div class="card mb-4 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 shown as dedicated rows per month for better visibility.</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 class="card shadow-sm border">
        <div class="card-header pb-0">
            <h6 class="mb-0">Monthly Billing (Cumulative)</h6>
            <p class="text-sm text-muted mb-0">Expand a month to review property-level charge details and API subtotals.</p>
        </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';
                    @endphp
                    <div class="billing-month-item mb-3">
                        <div class="d-flex justify-content-between align-items-center p-3" id="{{ $headingId }}">
                            <button class="btn btn-link text-dark text-decoration-none fw-bold p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $collapseId }}" aria-expanded="{{ $loop->first ? 'true' : 'false' }}" aria-controls="{{ $collapseId }}">
                                {{ $monthGroup['month'] }}
                            </button>
                            <span class="badge bg-gradient-dark">Month Total: {{ $formatIsk($monthGroup['month_total']) }}</span>
                        </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">
                                    <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</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">API/Source</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">Total assigned locks</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Pricing rule</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Unit price</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">Calculation details</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Invoice</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($monthGroup['api_groups'] as $apiGroup)
                                            @foreach($apiGroup['rows'] as $row)
                                                @php
                                                    $property = $properties->first(fn($candidate) => (string) $candidate->PropertyID === (string) $row['property_id']);
                                                    $propertyEmail = $propertyEmailMap[(string) $row['property_id']] ?? null;
                                                    $invoiceRecord = $invoiceMap[(string) $row['property_id'] . '|' . $row['month']] ?? null;
                                                @endphp
                                                <tr>
                                                    <td class="ps-3">{{ $row['month'] }}</td>
                                                    <td class="fw-semibold">{{ $row['property_name'] }}</td>
                                                    <td><span class="badge bg-gradient-secondary">{{ $row['api'] }}</span></td>
                                                    <td style="min-width: 280px;">
                                                        <form method="POST" action="{{ route('locks-by-month.dkplus.customer', request()->query()) }}" class="d-flex flex-column gap-2">
                                                            @csrf
                                                            <input type="hidden" name="property_id" value="{{ $row['property_id'] }}">
                                                            <input type="text" name="dkplus_customer_id" class="form-control form-control-sm" placeholder="Customer ID" value="{{ old('dkplus_customer_id', $propertyEmail->dkplus_customer_id ?? '') }}">
                                                            <input type="text" name="dkplus_customer_name" class="form-control form-control-sm" placeholder="Customer name (optional)" value="{{ old('dkplus_customer_name', $propertyEmail->dkplus_customer_name ?? '') }}">
                                                            <button type="submit" class="btn btn-outline-dark btn-sm mb-0">Save customer</button>
                                                        </form>
                                                    </td>
                                                    <td>{{ $row['billable_unique_lock_count'] }}</td>
                                                    <td>
                                                        {{ $row['pricing_rule_label'] }}
                                                        <span class="badge bg-gradient-info ms-1">{{ $row['pricing_badge'] }}</span>
                                                    </td>
                                                    <td>{{ $formatIsk($row['unit_price']) }}</td>
                                                    <td class="fw-semibold">{{ $formatIsk($row['subtotal']) }}</td>
                                                    <td>
                                                        <details>
                                                            <summary class="text-xs text-dark">View formula</summary>
                                                            <div class="small text-muted mt-2">
                                                                <div><strong>Formula:</strong> {{ $row['calculation_formula'] }}</div>
                                                                <div><strong>Input quantity:</strong> {{ $row['input_quantity'] }} {{ $row['input_quantity_label'] }}</div>
                                                                <div><strong>Subtotal:</strong> {{ $formatIsk($row['subtotal']) }}</div>
                                                            </div>
                                                        </details>
                                                    </td>
                                                    <td style="min-width: 220px;">
                                                        <div class="mb-1 text-xs">
                                                            @if($invoiceRecord?->dkplus_invoice_id)
                                                                <span class="badge bg-gradient-success">Created: {{ $invoiceRecord->dkplus_invoice_id }}</span>
                                                            @else
                                                                <span class="badge bg-gradient-secondary">Not created</span>
                                                            @endif
                                                            @if($invoiceRecord?->status)
                                                                <span class="badge bg-light text-dark border">{{ strtoupper($invoiceRecord->status) }}</span>
                                                            @endif
                                                        </div>

                                                        <form method="POST" action="{{ route('locks-by-month.dkplus.invoice', request()->query()) }}" class="mb-1">
                                                            @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" {{ empty($propertyEmail?->dkplus_customer_id) || $invoiceRecord?->dkplus_invoice_id ? 'disabled' : '' }}>
                                                                Create invoice
                                                            </button>
                                                        </form>

                                                        @if($invoiceRecord?->dkplus_invoice_id)
                                                            <form method="POST" action="{{ route('locks-by-month.dkplus.invoice.sync', request()->query()) }}" class="mb-1">
                                                                @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-dark btn-sm mb-0">Sync from dkPlus</button>
                                                            </form>
                                                        @endif

                                                        @if(!empty($invoiceRecord?->pdf_url))
                                                            <a href="{{ $invoiceRecord->pdf_url }}" target="_blank" rel="noopener" class="btn btn-outline-success btn-sm mb-0">Open invoice</a>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                            <tr class="table-secondary">
                                                <td class="ps-3 fw-bold" colspan="8">API subtotal: {{ $apiGroup['api'] }}</td>
                                                <td class="fw-bold">{{ $formatIsk($apiGroup['api_total']) }}</td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                        @endforeach
                                        <tr class="table-dark text-white">
                                            <td class="ps-3 fw-bold" colspan="8">Month grand total</td>
                                            <td class="fw-bold">{{ $formatIsk($monthGroup['month_total']) }}</td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @empty
                    <p class="text-sm text-muted mb-0">No billing data for the selected API filters.</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection

@push('css')
<style>
    .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;
    }

    .lock-statistics-page .billing-month-item {
        border: 1px solid #e9ecef;
        border-radius: .75rem;
        overflow: hidden;
    }

    .lock-statistics-page .lock-growth-table tbody tr:hover {
        background: rgba(94, 114, 228, 0.04);
    }
</style>
@endpush

@push('js')
<script src="{{ asset('assets') }}/js/plugins/chartjs.min.js"></script>
<script>
    (() => {
        const stats = @json($stats->values());
        if (!Array.isArray(stats) || stats.length === 0 || typeof Chart === 'undefined') return;

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

        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, 0.15)',
                        fill: true,
                        tension: 0.35
                    }, {
                        label: 'New Locks',
                        data: newLocks,
                        borderColor: '#2dce89',
                        backgroundColor: 'rgba(45, 206, 137, 0.1)',
                        fill: true,
                        tension: 0.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 } }
                }
            });
        }
    })();
</script>
@endpush