@extends('layouts.app')
@section('title', 'Konfirmasi Pembayaran')
@section('content')
<div style="max-width:480px;margin:4rem auto;padding:0 1rem">
    <h1 style="font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:800;color:#1E293B;margin-bottom:1rem">
        Konfirmasi Paket Pro
    </h1>

    <div style="background:#F8FAFF;border:1px solid #E2E8F0;border-radius:14px;padding:1.5rem;margin-bottom:1.5rem">
        <div style="display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #F1F5F9">
            <span style="color:#64748B">Paket</span>
            <span style="font-weight:700;color:#1E293B">Pro</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #F1F5F9">
            <span style="color:#64748B">Harga</span>
            <span style="font-weight:700;color:#1E293B">Rp 299.000 / bulan</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:.5rem 0">
            <span style="color:#64748B">Email</span>
            <span style="font-weight:700;color:#1E293B">{{ $user->email }}</span>
        </div>
    </div>

    <form action="{{ route('subscription.subscribe.pro') }}" method="POST">
        @csrf
        <button type="submit" style="width:100%;padding:.75rem;background:#2563EB;color:white;border:none;border-radius:10px;font-weight:700;font-size:1rem;cursor:pointer">
            Bayar Sekarang via Xendit
        </button>
    </form>

    <a href="{{ route('subscription.index') }}" style="display:block;text-align:center;margin-top:1rem;color:#64748B;font-size:.875rem">
        ← Kembali
    </a>
</div>
@endsection