@extends('layouts.app')
@section('title', 'Pembayaran Berhasil - FIN-ANALYSIS PRO')
@section('content')
<div style="max-width:480px;margin:4rem auto;text-align:center;padding:0 1rem">
    <div style="width:80px;height:80px;background:#D1FAE5;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem">
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
    </div>
    <h1 style="font-family:'Syne',sans-serif;font-size:1.875rem;font-weight:800;color:#1E293B;margin:0 0 .75rem">Pembayaran Berhasil!</h1>
    <p style="color:#64748B;margin:0 0 2rem;line-height:1.6">Langganan Pro Anda telah aktif. Selamat menikmati semua fitur premium FIN-ANALYSIS PRO.</p>

    @if($subscription)
    <div style="background:#F8FAFF;border:1px solid #E2E8F0;border-radius:14px;padding:1.25rem 1.5rem;margin-bottom:2rem;text-align:left">
        <div style="font-size:.75rem;font-weight:700;color:#64748B;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.875rem">Detail Langganan</div>
        <div style="display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #F1F5F9">
            <span style="color:#64748B;font-size:.875rem">Paket</span>
            <span style="font-weight:700;color:#1E293B">{{ \App\Models\Subscription::planLabel($subscription->plan) }}</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #F1F5F9">
            <span style="color:#64748B;font-size:.875rem">Berlaku hingga</span>
            <span style="font-weight:700;color:#1E293B">{{ $subscription->expired_at?->format('d F Y') ?? '-' }}</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #F1F5F9">
            <span style="color:#64748B;font-size:.875rem">Metode</span>
            <span style="font-weight:700;color:#1E293B">{{ strtoupper($subscription->payment_method ?? '-') }}</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:.5rem 0">
            <span style="color:#64748B;font-size:.875rem">Order ID</span>
            <span style="font-family:monospace;font-size:.8rem;color:#64748B">{{ $subscription->midtrans_order_id }}</span>
        </div>
    </div>
    @endif

    <div style="display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap">
        <a href="{{ route('dashboard') }}" class="btn btn-primary">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
            Ke Dashboard
        </a>
        <a href="{{ route('subscription.history') }}" class="btn btn-secondary">Riwayat Pembayaran</a>
    </div>
</div>
@endsection