@php
    $stats = $usageStats ?? null;
    if (! $stats) {
        $monthlyLimit = (int) ($currentPlan['orders_badge'] ?? $storeSub['order_limit'] ?? 300);
        $durationMonths = max(1, (int) ($storeSub['billing_duration_months'] ?? 12));
        $totalLimit = $monthlyLimit * $durationMonths;
        $usedOrders = (int) ($usage['orders'] ?? 0);
        $remaining = max(0, $totalLimit - $usedOrders);
        $pct = $totalLimit > 0 ? min(100, round($usedOrders / $totalLimit * 100, 1)) : 0;
        $overageDue = (float) ($storeSub['overage_due'] ?? 0);
        $overageRate = (float) ($currentPlan['overage_rate'] ?? 0);
    } else {
        $monthlyLimit = (int) $stats['monthly_limit'];
        $durationMonths = (int) $stats['duration_months'];
        $totalLimit = (int) $stats['total_limit'];
        $usedOrders = (int) $stats['used_orders'];
        $remaining = (int) $stats['remaining'];
        $pct = (float) $stats['percent'];
        $overageDue = (float) $stats['overage_due'];
        $overageRate = (float) $stats['overage_rate'];
    }
    $overageAlertClass = $overageDue > 0 ? 'alert-danger' : 'alert-success';
    $progressClass = $pct >= 90 ? 'bg-danger' : ($pct >= 80 ? 'bg-warning' : 'bg-success');
@endphp
<div id="usageWidget" class="card shadow-sm border-0 mb-4 order-limit-widget">
    <div class="card-body p-3">
        <div id="usageContent">
            <div class="row">
                <div class="col-md-8">
                    <div class="alert alert-info mb-2 py-2">
                        <small>
                            <i class="fas fa-info-circle me-1"></i>
                            <strong>Orders Limit:</strong>
                            {{ number_format($monthlyLimit) }} orders/month × {{ $durationMonths }} months =
                            <strong>{{ number_format($totalLimit) }} orders</strong> (Total)
                        </small>
                    </div>
                    <div class="mb-2">
                        <div class="d-flex justify-content-between mb-1">
                            <span><strong>{{ number_format($usedOrders) }}</strong> / {{ number_format($totalLimit) }} orders</span>
                            <span class="text-muted">{{ number_format($remaining) }} remaining</span>
                        </div>
                        <div class="progress order-limit-progress">
                            <div class="progress-bar {{ $progressClass }}" role="progressbar" style="width: {{ $pct }}%">
                                {{ $pct }}%
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="alert {{ $overageAlertClass }} mb-0 h-100 d-flex flex-column justify-content-center">
                        <h4 class="mb-1">{{ number_format($overageDue, 2) }} ৳</h4>
                        <small>
                            @if($overageDue > 0)
                                Overage due @if($overageRate > 0)({{ number_format($overageRate, 2) }} ৳/order)@endif
                            @else
                                No Overage
                            @endif
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>