@extends('layouts.app')
@section('title', 'Menunggu Pembayaran - 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:#FEF3C7;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="#D97706" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
    </div>
    <h1 style="font-family:'Syne',sans-serif;font-size:1.875rem;font-weight:800;color:#1E293B;margin:0 0 .75rem">Menunggu Pembayaran</h1>
    <p style="color:#64748B;margin:0 0 2rem;line-height:1.6">Pembayaran Anda sedang diproses. Langganan akan aktif otomatis setelah pembayaran dikonfirmasi oleh bank/dompet Anda.</p>

    @if($subscription)
    <div style="background:#FEF3C7;border:1px solid #FCD34D;border-radius:14px;padding:1.25rem 1.5rem;margin-bottom:2rem;text-align:left">
        <div style="font-size:.75rem;font-weight:700;color:#92400E;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.875rem">Detail Pembayaran</div>
        <div style="display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #FDE68A">
            <span style="color:#92400E;font-size:.875rem">Order ID</span>
            <span style="font-family:monospace;font-weight:700;font-size:.8rem;color:#92400E">{{ $subscription->midtrans_order_id }}</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:.5rem 0">
            <span style="color:#92400E;font-size:.875rem">Jumlah</span>
            <span style="font-weight:700;color:#92400E">Rp {{ number_format($subscription->amount, 0, ',', '.') }}</span>
        </div>
    </div>

    <div style="background:#F8FAFF;border:1px solid #E2E8F0;border-radius:10px;padding:1rem;margin-bottom:2rem;font-size:.8125rem;color:#64748B;text-align:left">
        <strong style="color:#1E293B">Cara menyelesaikan pembayaran:</strong>
        <ol style="margin:.5rem 0 0;padding-left:1.25rem;display:flex;flex-direction:column;gap:3px">
            <li>Buka aplikasi bank/dompet digital Anda</li>
            <li>Lakukan transfer ke nomor Virtual Account atau scan QRIS</li>
            <li>Langganan akan aktif dalam beberapa menit</li>
        </ol>
    </div>
    @endif

    <div style="display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap">
        <a href="{{ route('subscription.history') }}" class="btn btn-primary">Cek Status Pembayaran</a>
        <a href="{{ route('subscription.index') }}" class="btn btn-secondary">Kembali ke Paket</a>
    </div>
</div>
@endsection