@extends('portal.layout')

@section('title', 'Payment')
@section('topbar', 'Payment')

@push('styles')
<style>
    .steps {
        display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem;
    }
    .steps span {
        padding: .35rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
        background: #F1F5F9; color: var(--muted);
    }
    .steps .on { background: var(--primary-soft); color: var(--mexco-primary-dark); }
    .pay-card { max-width: 640px; padding: 1.5rem; }
    .row-line { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: .9rem; }
</style>
@endpush

@section('content')
@php
    $fmt = fn ($cents) => ($summary['currency'] ?? 'MYR').' '.number_format(($cents ?? 0) / 100, 0);
@endphp

<div class="pg-head">
    <div>
        <h1>Complete payment</h1>
        <p>Your event license activates after payment is confirmed.</p>
    </div>
</div>

<div class="steps">
    <span>1. Event</span>
    <span>2. Add-ons</span>
    <span>3. Review</span>
    <span class="on">4. Payment</span>
</div>

<div class="card pay-card">
    <div class="alert-flash alert-info">
        Payment gateway integration is prepared for Phase 5. Your invoice has been issued and is awaiting payment.
        MeXCo Super can record a manual payment until online checkout is connected.
    </div>

    <div class="row-line"><span>Event</span><strong>{{ $summary['event'] }}</strong></div>
    <div class="row-line"><span>Plan</span><strong>{{ $summary['plan'] }}</strong></div>
    <div class="row-line"><span>Add-ons</span><strong>{{ count($summary['addons']) ? collect($summary['addons'])->pluck('name')->join(', ') : 'None' }}</strong></div>
    <div class="row-line"><span>Invoice</span><strong style="font-family:ui-monospace,monospace;font-size:.8rem">{{ $summary['invoice_number'] ?? '-' }}</strong></div>
    <div class="row-line"><span>Amount due</span><strong>{{ $fmt($summary['total_cents']) }}</strong></div>
    <div class="row-line"><span>Order status</span><strong>{{ $order->statusLabel() }}</strong></div>
    <div class="row-line"><span>License status</span><strong>{{ ucfirst($summary['license_status'] ?? 'pending') }}</strong></div>

    <div style="display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1.25rem">
        <a href="{{ route('mexco.portal.dashboard') }}" class="btn-purple">Go to My MeXCo</a>
        <a href="{{ route('mexco.checkout.review') }}" class="btn-outline">Back to review</a>
    </div>
</div>
@endsection
