@extends('emails.layout')

@section('body')

<div class="alert-box alert-success">
    <strong style="color:#15803d;font-size:1rem;">🎉 Subscription Activated!</strong>
    <p style="margin:0.4rem 0 0;color:#166534;">
        Your <strong>{{ $subscription->plan_label }} Plan</strong> is now active.
    </p>
</div>

<h2>Welcome to {{ $subscription->plan_label }}!</h2>
<p>
    Thank you for subscribing to OlaInvoice {{ $subscription->plan_label }}.
    Your payment has been confirmed and your account has been upgraded.
</p>

{{-- Subscription details --}}
<div style="background:#f8fafc;border-radius:8px;padding:1.25rem;margin:1.25rem 0;border:1px solid #e2e8f0;">
    <div class="info-grid">
        <div class="info-item">
            <label>Plan</label>
            <div class="value" style="color:#00a651;">{{ $subscription->plan_label }}</div>
        </div>
        <div class="info-item">
            <label>Amount Paid</label>
            <div class="value">₦{{ number_format($subscription->amount, 2) }}</div>
        </div>
        <div class="info-item">
            <label>Started</label>
            <div class="value">{{ $subscription->starts_at->format('d/m/Y') }}</div>
        </div>
        <div class="info-item">
            <label>Expires</label>
            <div class="value">{{ $subscription->expires_at->format('d/m/Y') }}</div>
        </div>
        <div class="info-item">
            <label>Reference</label>
            <div class="value" style="font-family:monospace;font-size:0.8rem;">
                {{ $subscription->paystack_reference }}
            </div>
        </div>
        <div class="info-item">
            <label>Status</label>
            <div class="value" style="color:#16a34a;">Active ✓</div>
        </div>
    </div>
</div>

{{-- What's unlocked --}}
<div style="margin:1.25rem 0;">
    <strong style="color:#1e293b;">What's now unlocked for you:</strong>
    <ul style="margin-top:0.75rem;padding-left:1.25rem;line-height:2;">
        @if($subscription->plan === 'pro')
            <li style="color:#374151;">✅ Unlimited invoices every month</li>
            <li style="color:#374151;">✅ Expense tracking with receipt upload</li>
            <li style="color:#374151;">✅ Automated payment reminders</li>
            <li style="color:#374151;">✅ Email notifications for all events</li>
        @else
            <li style="color:#374151;">✅ Everything in Pro</li>
            <li style="color:#374151;">✅ Advanced revenue reports</li>
            <li style="color:#374151;">✅ Top clients report</li>
            <li style="color:#374151;">✅ VAT report for tax filing</li>
            <li style="color:#374151;">✅ CSV export for invoices and expenses</li>
        @endif
    </ul>
</div>

<div style="text-align:center;margin:1.5rem 0;">
    <a href="{{ route('dashboard') }}" class="btn-pay">
        Go to Dashboard →
    </a>
</div>

<p style="font-size:0.8rem;color:#94a3b8;">
    Your subscription renews on {{ $subscription->expires_at->format('d/m/Y') }}.
    To manage your subscription, visit Settings → Subscription in your dashboard.
</p>

@endsection