@extends('layouts.app')

@section('title', 'Billing - ' . setting('system_name'))

@section('content')
@php
    $state = $tenant->billingState();
    $days = $tenant->daysLeft();
    $tone = match ($state) { 'expired', 'suspended', 'grace' => 'danger', 'due_soon' => 'warning', default => 'success' };
    $current = $tenant->plan && isset($plans[$tenant->plan]) ? $tenant->plan : null;
    $price = $tenant->monthlyPrice();
    $pending = $submissions->where('status', 'pending');
    $brand = [
        'mpamba' => ['#16a34a', '#f0fdf4', 'bi-phone-fill'],
        'airtel_money' => ['#dc2626', '#fef2f2', 'bi-phone'],
        'national_bank' => ['#1d4ed8', '#eff6ff', 'bi-bank2'],
        'standard_bank' => ['#0c4a6e', '#f0f9ff', 'bi-bank'],
    ];
    $smsPct = $usage['sms_limit'] > 0 ? min(100, round($usage['sms_used'] / $usage['sms_limit'] * 100)) : 0;
    $bar = fn ($pct) => $pct >= 90 ? 'danger' : ($pct >= 70 ? 'warning' : 'primary');
    $tabs = ['overview' => ['bi-speedometer2', 'Overview'], 'plans' => ['bi-layers', 'Plans'], 'pay' => ['bi-wallet2', 'Pay'], 'history' => ['bi-clock-history', 'History']];
@endphp
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3">
        <div>
            <h3 class="fw-bold mb-1">Billing</h3>
            <p class="text-muted small mb-0">Your plan, what you are using, and paying for the system.</p>
        </div>
        <a href="{{ route('billing.index', ['tab' => 'pay']) }}" class="btn btn-primary btn-sm" data-tab-link="pay"><i class="bi bi-wallet2 me-1"></i> Pay now</a>
    </div>

    @if(!$tenant->canBeUsed())
        <div class="alert alert-danger alert-persistent" role="alert">
            <i class="bi bi-lock me-2"></i><strong>The system is locked for your shop.</strong>
            Pay using one of the accounts in <strong>Pay</strong> and upload the proof. Access returns as soon as it is approved.
        </div>
    @elseif($state === 'grace' || $state === 'due_soon')
        <div class="alert alert-{{ $tone }} alert-persistent d-flex justify-content-between align-items-center flex-wrap gap-2" role="alert">
            <span><i class="bi bi-exclamation-triangle me-1"></i>
                {{ $state === 'grace' ? 'Your subscription ended ' . abs($days) . ' days ago. The system stops after ' . $tenant->blockedAfter()->format('d M Y') . '.' : 'Your subscription ends in ' . $days . ' ' . ($days === 1 ? 'day' : 'days') . '.' }}</span>
            <a href="{{ route('billing.index', ['tab' => 'pay']) }}" class="btn btn-sm btn-{{ $tone }}" data-tab-link="pay">Renew</a>
        </div>
    @endif

    <!-- Tabs -->
    <nav class="bl-tabs mb-4" role="tablist" aria-label="Billing">
        @foreach($tabs as $key => [$icon, $label])
            <a href="{{ route('billing.index', ['tab' => $key]) }}" class="bl-tab {{ $tab === $key ? 'active' : '' }}" role="tab"
               aria-selected="{{ $tab === $key ? 'true' : 'false' }}" data-tab="{{ $key }}">
                <i class="bi {{ $icon }}"></i><span>{{ $label }}</span>
                @if($key === 'history' && $pending->isNotEmpty())<span class="badge bg-warning text-dark ms-1">{{ $pending->count() }}</span>@endif
            </a>
        @endforeach
    </nav>

    <!-- OVERVIEW -->
    <section class="bl-pane {{ $tab === 'overview' ? '' : 'd-none' }}" data-pane="overview" role="tabpanel">
        <div class="row g-4">
            <div class="col-lg-5">
                <div class="bl-card h-100">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <div class="small text-muted text-uppercase fw-semibold">Your plan</div>
                            <div class="fs-3 fw-bold">{{ $tenant->planName() }}</div>
                            @if($current)<div class="small text-muted">{{ $plans[$current]['tagline'] ?? '' }}</div>@endif
                        </div>
                        @if($current && $current !== array_key_last($plans))
                            <a href="{{ route('billing.index', ['tab' => 'plans']) }}" class="btn btn-sm btn-outline-primary" data-tab-link="plans">Upgrade</a>
                        @endif
                    </div>
                    <div class="bl-cost my-4">
                        @if($price > 0)
                            <span class="display-6 fw-bold">{{ formatCurrency($price) }}</span><span class="text-muted"> / month</span>
                        @else
                            <span class="fs-5 fw-semibold text-muted">No price set. Ask your provider.</span>
                        @endif
                    </div>
                    <div class="bl-status bl-{{ $tone }}">
                        @if($tenant->isSuspended())
                            <strong>Suspended.</strong> {{ $tenant->suspended_reason ?: 'Contact your provider.' }}
                        @elseif($tenant->paid_until === null)
                            <i class="bi bi-infinity me-1"></i> No end date: your subscription does not expire.
                        @elseif($state === 'expired')
                            <strong>Ended</strong> on {{ $tenant->paid_until->format('d M Y') }}.
                        @elseif($state === 'grace')
                            <strong>Overdue</strong> by {{ abs($days) }} {{ abs($days) === 1 ? 'day' : 'days' }}. Stops after {{ $tenant->blockedAfter()->format('d M Y') }}.
                        @else
                            Next payment due <strong>{{ $tenant->paid_until->format('l, d M Y') }}</strong> ({{ $days === 0 ? 'today' : $days . ' ' . ($days === 1 ? 'day' : 'days') . ' left' }}).
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-lg-7">
                <div class="bl-card h-100">
                    <h6 class="fw-bold mb-3">Usage</h6>

                    <!-- SMS -->
                    <div class="bl-usage">
                        <div class="d-flex justify-content-between small">
                            <span class="fw-semibold"><i class="bi bi-chat-dots me-1"></i>SMS this month</span>
                            <span>
                                @if($usage['sms_unlimited'])
                                    {{ number_format($usage['sms_used']) }} sent · <strong>Unlimited</strong>
                                @else
                                    <strong>{{ number_format($usage['sms_used']) }}</strong> of {{ number_format($usage['sms_limit']) }} used
                                @endif
                            </span>
                        </div>
                        <div class="progress bl-progress" role="progressbar" aria-label="SMS used" aria-valuenow="{{ $usage['sms_unlimited'] ? 0 : $smsPct }}" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar bg-{{ $usage['sms_unlimited'] ? 'success' : $bar($smsPct) }}" style="width: {{ $usage['sms_unlimited'] ? 100 : $smsPct }}%"></div>
                        </div>
                        <div class="small text-muted">
                            {{ $usage['sms_unlimited'] ? 'Z report SMS to all your numbers, every day.' : number_format(max(0, $usage['sms_limit'] - $usage['sms_used'])) . ' left · resets on ' . $usage['sms_resets']->format('j M') }}
                            @if($usage['sms_credits'])<span class="text-success fw-semibold"> · + {{ number_format($usage['sms_credits']) }} extra SMS</span>@endif
                            @if($usage['sms_blocked'])<span class="text-danger"> · {{ $usage['sms_blocked'] }} not sent this month because the SMS ran out. Ask your provider for extra SMS.</span>@endif
                        </div>
                    </div>

                    <!-- Subscription period -->
                    @if($usage['period_used'] !== null)
                        <div class="bl-usage">
                            <div class="d-flex justify-content-between small">
                                <span class="fw-semibold"><i class="bi bi-calendar3 me-1"></i>Subscription period</span>
                                <span>{{ $usage['period_start']->format('d M') }} – {{ $usage['period_end']->format('d M Y') }}</span>
                            </div>
                            <div class="progress bl-progress" role="progressbar" aria-label="Subscription period used" aria-valuenow="{{ $usage['period_used'] }}" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg-{{ $bar($usage['period_used']) }}" style="width: {{ $usage['period_used'] }}%"></div>
                            </div>
                            <div class="small text-muted">{{ $usage['period_used'] }}% used{{ $days !== null && $days >= 0 ? ' · ' . $days . ' ' . ($days === 1 ? 'day' : 'days') . ' left' : '' }}</div>
                        </div>
                    @endif

                    <div class="row g-2 text-center mt-1">
                        @foreach([['Users', $usage['users']], ['Products', $usage['products']], ['Sales this month', $usage['sales_month']]] as [$label, $value])
                            <div class="col-4"><div class="bl-mini"><div class="fw-bold fs-5">{{ number_format($value) }}</div><div class="small text-muted">{{ $label }}</div></div></div>
                        @endforeach
                    </div>
                    <div class="small text-muted mt-2">Users and products are unlimited on every plan.</div>
                </div>
            </div>
        </div>

        <!-- What the plan includes -->
        <div class="bl-card mt-4">
            <h6 class="fw-bold mb-3">In your plan</h6>
            <div class="row g-2">
                @foreach($features as $key => [$label, $description])
                    @php $has = plan_allows($key); @endphp
                    <div class="col-md-4">
                        <div class="bl-feature {{ $has ? 'has' : 'locked' }}">
                            <i class="bi {{ $has ? 'bi-check-circle-fill text-success' : 'bi-lock-fill text-muted' }}"></i>
                            <div>
                                <div class="fw-semibold">{{ $label }} @unless($has)<span class="badge bl-pro-badge">Pro</span>@endunless</div>
                                <div class="small text-muted">{{ $description }}</div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- PLANS -->
    <section class="bl-pane {{ $tab === 'plans' ? '' : 'd-none' }}" data-pane="plans" role="tabpanel">
        <div class="row g-4 justify-content-center">
            @foreach($plans as $key => $plan)
                @php $isCurrent = $key === $current; $top = $key === array_key_last($plans); @endphp
                <div class="col-md-6 col-xl-5">
                    <div class="bl-plan {{ $top ? 'bl-plan-top' : '' }} {{ $isCurrent ? 'is-current' : '' }} h-100">
                        @if($top)<span class="bl-plan-ribbon">Recommended</span>@endif
                        <div class="fw-bold fs-4">{{ $plan['name'] }}</div>
                        <div class="text-muted small mb-3">{{ $plan['tagline'] ?? '' }}</div>
                        <div class="mb-3"><span class="display-6 fw-bold">{{ formatCurrency($plan['price']) }}</span><span class="text-muted"> / month</span></div>
                        @if($annualFree)
                            <div class="small text-success fw-semibold mb-3"><i class="bi bi-gift me-1"></i>Pay for a year: {{ formatCurrency(\App\Http\Controllers\BillingController::priceFor($key, 12)) }} ({{ $annualFree }} months free)</div>
                        @endif
                        <ul class="bl-list">
                            @if(!$loop->first)<li class="fw-semibold"><i class="bi bi-check2"></i> Everything in {{ $plans[array_key_first($plans)]['name'] }}, plus:</li>@endif
                            @if($loop->first)
                                @foreach($included as $item)<li><i class="bi bi-check2"></i> {{ $item }}</li>@endforeach
                            @endif
                            @foreach($plan['features'] as $f)<li><i class="bi bi-check2"></i> <strong>{{ $features[$f][0] }}</strong>: {{ $features[$f][1] }}</li>@endforeach
                            <li><i class="bi bi-check2"></i> {{ $plan['sms'] === null ? 'Unlimited SMS (Z report to your phone every day)' : $plan['sms'] . ' free SMS a month (Z report to your phone)' }}</li>
                        </ul>
                        <div class="mt-auto pt-3">
                            @if($isCurrent)
                                <button class="btn btn-outline-secondary w-100" disabled>Your current plan</button>
                            @else
                                <a href="{{ route('billing.index', ['tab' => 'pay', 'plan' => $key]) }}" class="btn {{ $top ? 'btn-primary' : 'btn-outline-primary' }} w-100" data-tab-link="pay" data-plan="{{ $key }}">
                                    {{ $current && $plan['price'] > ($plans[$current]['price'] ?? 0) ? 'Upgrade to ' . $plan['name'] : 'Choose ' . $plan['name'] }}
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <p class="text-center small text-muted mt-3">A change of plan starts when your payment for it is approved. Prices in Malawi Kwacha.</p>
    </section>

    <!-- PAY -->
    <section class="bl-pane {{ $tab === 'pay' ? '' : 'd-none' }}" data-pane="pay" role="tabpanel">
        <div class="row g-4">
            <div class="col-lg-5">
                <div class="bl-card mb-4">
                    <h6 class="fw-bold mb-1"><span class="bl-step">1</span> Send the money</h6>
                    <p class="small text-muted mb-3">To any of these. Use your shop code <strong>{{ $tenant->slug }}</strong> as the reference if you can.</p>
                    @foreach($accounts as $key => $account)
                        @php
                            [$color, $soft, $icon] = $brand[$key] ?? ['#475569', '#f8fafc', $account['icon'] ?? 'bi-cash'];
                            if (!empty($account['color'])) { [$color, $soft, $icon] = [$account['color'], '#f8fafc', $account['icon'] ?? $icon]; }
                        @endphp
                        <div class="bl-account" style="--c: {{ $color }}; --s: {{ $soft }};">
                            <span class="bl-account-icon"><i class="bi {{ $icon }}"></i></span>
                            <div class="flex-grow-1">
                                <div class="small fw-semibold" style="color: var(--c);">{{ $account['label'] }}</div>
                                <div class="fs-5 fw-bold text-nowrap">{{ $account['number'] }}</div>
                                @if($account['name'] ?? null)<div class="small text-muted">{{ $account['name'] }}</div>@endif
                                @if($account['note'] ?? null)<div class="small text-muted">{{ $account['note'] }}</div>@endif
                            </div>
                            <button type="button" class="btn btn-sm btn-light copy-number" data-number="{{ preg_replace('/\s+/', '', $account['number']) }}" aria-label="Copy {{ $account['label'] }} number">
                                <i class="bi bi-clipboard"></i>
                            </button>
                        </div>
                    @endforeach
                    @if($contact['phone'] || $contact['email'])
                        <p class="small text-muted mt-3 mb-0">Questions?
                            @if($contact['phone'])<a href="tel:{{ preg_replace('/[^0-9+]/', '', $contact['phone']) }}">{{ $contact['phone'] }}</a>@endif
                            @if($contact['email']) · <a href="mailto:{{ $contact['email'] }}">{{ $contact['email'] }}</a>@endif
                        </p>
                    @endif
                </div>
            </div>

            <div class="col-lg-7">
                <div class="bl-card" id="upload-proof">
                    <h6 class="fw-bold mb-1"><span class="bl-step">2</span> Send the proof</h6>
                    <p class="small text-muted mb-3">A screenshot of the confirmation SMS, or a photo or PDF of the bank slip.</p>
                    @if($pending->isNotEmpty())
                        <div class="alert alert-info alert-persistent small py-2">
                            <i class="bi bi-hourglass-split me-1"></i> You already sent proof on {{ $pending->first()->created_at->format('d M Y') }}; it is waiting for approval.
                        </div>
                    @endif
                    <form method="POST" action="{{ route('billing.submit') }}" enctype="multipart/form-data" id="proofForm">
                        @csrf
                        @php $chosenPlan = old('plan', $payPlan); $chosenMonths = (int) old('months', 1); @endphp
                        <div class="settings-label mb-1">Plan</div>
                        <div class="bl-choice mb-3" role="radiogroup" aria-label="Plan">
                            @foreach($plans as $key => $plan)
                                <input type="radio" class="btn-check" name="plan" id="plan_{{ $key }}" value="{{ $key }}" data-price="{{ $plan['price'] }}" @checked($chosenPlan === $key)>
                                <label class="btn btn-outline-primary" for="plan_{{ $key }}">
                                    {{ $plan['name'] }} <span class="small opacity-75">{{ formatCurrency($plan['price']) }}/mo</span>
                                    @if($key === $current)<span class="small opacity-75">· current</span>@endif
                                </label>
                            @endforeach
                        </div>
                        <div class="settings-label mb-1">Paying for</div>
                        <div class="bl-choice mb-2" role="radiogroup" aria-label="Months">
                            @foreach([1 => '1 month', 3 => '3 months', 6 => '6 months', 12 => '12 months'] as $m => $label)
                                <input type="radio" class="btn-check" name="months" id="months_{{ $m }}" value="{{ $m }}" @checked($chosenMonths === $m)>
                                <label class="btn btn-outline-secondary" for="months_{{ $m }}">{{ $label }}@if($m === 12 && $annualFree)<span class="badge bg-success ms-1">{{ $annualFree }} free</span>@endif</label>
                            @endforeach
                        </div>
                        <div class="bl-total mb-3">To pay: <strong id="payTotal">–</strong> <span class="small text-muted" id="payNote"></span></div>

                        <div class="row g-3">
                            <div class="col-sm-6">
                                <label for="amount" class="form-label small fw-semibold">Amount you paid (MWK)</label>
                                <input id="amount" name="amount" type="number" min="1" step="0.01" inputmode="decimal" required
                                       class="form-control @error('amount') is-invalid @enderror" value="{{ old('amount') }}">
                                @error('amount')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-sm-6">
                                <label for="account" class="form-label small fw-semibold">Paid to</label>
                                <select id="account" name="account" class="form-select @error('account') is-invalid @enderror" required>
                                    <option value="" disabled @selected(!old('account'))>Choose…</option>
                                    @foreach($accounts as $key => $account)
                                        <option value="{{ $key }}" @selected(old('account') === $key)>{{ $account['label'] }} – {{ $account['number'] }}</option>
                                    @endforeach
                                </select>
                                @error('account')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-sm-6">
                                <label for="paid_on" class="form-label small fw-semibold">Date paid</label>
                                <input id="paid_on" name="paid_on" type="date" max="{{ now()->toDateString() }}" required
                                       class="form-control @error('paid_on') is-invalid @enderror" value="{{ old('paid_on', now()->toDateString()) }}">
                                @error('paid_on')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-sm-6">
                                <label for="reference" class="form-label small fw-semibold">Transaction ID</label>
                                <input id="reference" name="reference" maxlength="100" class="form-control @error('reference') is-invalid @enderror" value="{{ old('reference') }}">
                                <div class="form-text">From the SMS or the slip.</div>
                            </div>
                            <div class="col-12">
                                <label for="proof" class="form-label small fw-semibold">Screenshot, photo or PDF</label>
                                <input id="proof" name="proof" type="file" accept="image/jpeg,image/png,image/webp,application/pdf" required
                                       class="form-control @error('proof') is-invalid @enderror">
                                <div class="form-text">JPG, PNG, WEBP or PDF, up to 5 MB.</div>
                                @error('proof')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-12">
                                <label for="note" class="form-label small fw-semibold">Note <span class="text-muted fw-normal">(optional)</span></label>
                                <input id="note" name="note" maxlength="500" class="form-control" value="{{ old('note') }}">
                            </div>
                        </div>
                        <button class="btn btn-success mt-3 px-4" id="sendProofBtn"><i class="bi bi-send me-1"></i> Send proof of payment</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- HISTORY -->
    <section class="bl-pane {{ $tab === 'history' ? '' : 'd-none' }}" data-pane="history" role="tabpanel">
        <div class="row g-4">
            <div class="col-lg-6">
                <div class="bl-card h-100">
                    <h6 class="fw-bold mb-3">Proofs you sent</h6>
                    @forelse($submissions as $submission)
                        @php
                            [$cls, $label] = match ($submission->status) {
                                'approved' => ['bg-success', 'Approved'],
                                'rejected' => ['bg-danger', 'Not approved'],
                                default => ['bg-warning text-dark', 'Waiting for approval'],
                            };
                        @endphp
                        <div class="d-flex justify-content-between align-items-start py-2 border-bottom small">
                            <div>
                                <strong>{{ formatCurrency($submission->amount) }}</strong> · {{ $submission->months }} {{ $submission->months == 1 ? 'month' : 'months' }}
                                @if($submission->plan) · {{ config("tenancy.plans.{$submission->plan}.name", $submission->plan) }}@endif
                                · {{ $submission->accountLabel() }}
                                <div class="text-muted">Sent {{ $submission->created_at->format('d M Y H:i') }} by {{ $submission->submitted_by_name }}
                                    · <a href="{{ route('billing.proof', $submission->id) }}" target="_blank" rel="noopener">view proof</a></div>
                                @if($submission->status === 'rejected' && $submission->review_note)
                                    <div class="text-danger mt-1"><i class="bi bi-chat-left-text me-1"></i>{{ $submission->review_note }}</div>
                                @endif
                            </div>
                            <span class="badge {{ $cls }} rounded-pill ms-2 text-nowrap">{{ $label }}</span>
                        </div>
                    @empty
                        <p class="small text-muted mb-0">None sent yet.</p>
                    @endforelse
                </div>
            </div>
            <div class="col-lg-6">
                <div class="bl-card h-100">
                    <h6 class="fw-bold mb-3">Payments received</h6>
                    <div class="table-responsive">
                        <table class="table table-sm align-middle mb-0 small">
                            <thead class="table-light text-muted">
                                <tr><th>Paid on</th><th>Period</th><th>Plan</th><th class="text-end">Amount</th></tr>
                            </thead>
                            <tbody>
                                @forelse($payments as $payment)
                                    <tr>
                                        <td class="text-nowrap">{{ $payment->paid_on->format('d M Y') }}<div class="text-muted">{{ $payment->method ?? '' }}{{ $payment->reference ? ' · ' . $payment->reference : '' }}</div></td>
                                        <td class="text-nowrap">{{ $payment->period_from->format('d M Y') }} – {{ $payment->period_to->format('d M Y') }}</td>
                                        <td>{{ config("tenancy.plans.{$payment->plan}.name", ucfirst((string) $payment->plan) ?: '—') }}</td>
                                        <td class="text-end fw-semibold text-nowrap">{{ formatCurrency($payment->amount) }}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="4" class="text-center text-muted py-3">No payments recorded yet.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<style>
    .bl-tabs { display: flex; gap: .25rem; padding: .3rem; overflow-x: auto; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); scrollbar-width: none; }
    .bl-tab { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; padding: .5rem 1rem; border-radius: 9px; font-size: .9rem; font-weight: 500; color: #475569; text-decoration: none; }
    .bl-tab:hover { background: #f1f5f9; color: #0f172a; }
    .bl-tab.active { background: var(--theme-primary); color: #fff; font-weight: 600; }
    .bl-card { background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); padding: 1.4rem; }
    .bl-status { padding: .8rem 1rem; border-radius: 12px; font-size: .92rem; }
    .bl-success { background: #ecfdf5; color: #065f46; } .bl-warning { background: #fffbeb; color: #92400e; } .bl-danger { background: #fef2f2; color: #991b1b; }
    .bl-usage { margin-bottom: 1.1rem; }
    .bl-progress { height: 8px; border-radius: 99px; margin: .35rem 0; background: #eef2f7; }
    .bl-progress .progress-bar { border-radius: 99px; }
    .bl-mini { background: #f8fafc; border-radius: 10px; padding: .6rem; }
    .bl-feature { display: flex; gap: .6rem; padding: .8rem; border-radius: 12px; border: 1px solid #e5e7eb; height: 100%; }
    .bl-feature.locked { background: #fafafa; }
    .bl-feature i { font-size: 1.1rem; margin-top: .1rem; }
    .bl-pro-badge { background: #ede9fe; color: #6d28d9; font-size: .65rem; vertical-align: middle; }
    .bl-plan { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 18px; padding: 1.6rem; border: 2px solid #e5e7eb; }
    .bl-plan-top { border-color: var(--theme-primary); box-shadow: 0 10px 30px rgba(15, 23, 42, .08); }
    .bl-plan.is-current { background: #f8fafc; }
    .bl-plan-ribbon { position: absolute; top: -12px; right: 1.2rem; background: var(--theme-primary); color: #fff; font-size: .72rem; font-weight: 700; padding: .25rem .7rem; border-radius: 99px; }
    .bl-list { list-style: none; padding: 0; margin: 0; }
    .bl-list li { display: flex; gap: .5rem; padding: .3rem 0; font-size: .9rem; }
    .bl-list li i { color: #16a34a; font-size: 1rem; }
    .bl-step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--theme-primary); color: #fff; font-size: .8rem; margin-right: .3rem; }
    .bl-account { display: flex; gap: .8rem; align-items: center; padding: .8rem 1rem; border-radius: 14px; background: var(--s); border: 1px solid color-mix(in srgb, var(--c) 25%, #fff); margin-bottom: .6rem; }
    .bl-account-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 1.2rem; flex-shrink: 0; }
    .bl-choice { display: flex; flex-wrap: wrap; gap: .4rem; }
    .bl-total { padding: .7rem 1rem; border-radius: 12px; background: #f0fdf4; color: #065f46; }
    @media (max-width: 576px) { .bl-tab span { display: none; } .bl-tab.active span { display: inline; } }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Tabs switch without reloading; the address keeps the tab so a refresh stays on it
    function show(tab, plan) {
        document.querySelectorAll('[data-pane]').forEach(function (p) { p.classList.toggle('d-none', p.dataset.pane !== tab); });
        document.querySelectorAll('[data-tab]').forEach(function (t) {
            t.classList.toggle('active', t.dataset.tab === tab);
            t.setAttribute('aria-selected', t.dataset.tab === tab ? 'true' : 'false');
        });
        if (plan) { var r = document.getElementById('plan_' + plan); if (r) { r.checked = true; updateTotal(true); } }
        var url = new URL(location.href); url.searchParams.set('tab', tab); if (plan) url.searchParams.set('plan', plan);
        history.replaceState(null, '', url);
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }
    document.querySelectorAll('[data-tab], [data-tab-link]').forEach(function (a) {
        a.addEventListener('click', function (e) { e.preventDefault(); show(a.dataset.tab || a.dataset.tabLink, a.dataset.plan); });
    });

    // To pay = plan price x months, with the free months for a year; fills the amount (still editable)
    var annualFree = {{ (int) $annualFree }};
    var amount = document.getElementById('amount');
    var fmt = function (v) { return 'MWK ' + Number(v).toLocaleString('en-US', { minimumFractionDigits: 2 }); };
    function updateTotal(fill) {
        var plan = document.querySelector('input[name="plan"]:checked');
        var months = document.querySelector('input[name="months"]:checked');
        if (!plan || !months) return;
        var m = Number(months.value), free = m >= 12 ? annualFree : 0;
        var total = Number(plan.dataset.price) * Math.max(1, m - free);
        document.getElementById('payTotal').textContent = fmt(total);
        document.getElementById('payNote').textContent = free ? '(' + free + ' months free)' : '';
        if (fill || !amount.value) amount.value = total;
    }
    document.querySelectorAll('input[name="plan"], input[name="months"]').forEach(function (r) { r.addEventListener('change', function () { updateTotal(true); }); });
    updateTotal(false);

    document.querySelectorAll('.copy-number').forEach(function (btn) {
        btn.addEventListener('click', function () {
            navigator.clipboard && navigator.clipboard.writeText(btn.dataset.number).then(function () {
                btn.innerHTML = '<i class="bi bi-check2"></i>';
                setTimeout(function () { btn.innerHTML = '<i class="bi bi-clipboard"></i>'; }, 1500);
            });
        });
    });

    // Avoid double sending on slow connections
    document.getElementById('proofForm').addEventListener('submit', function () {
        var btn = document.getElementById('sendProofBtn');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Sending…';
    });
});
</script>
@endsection