<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ __('payment.checkout.title') }} #{{ $order->id }}</title>
    <style>
        :root {
            --bg: #f3f6f4;
            --card: #ffffff;
            --ink: #14201a;
            --muted: #5c6b63;
            --line: #d7e0db;
            --accent: #0f766e;
            --accent-ink: #ffffff;
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            min-height: 100vh;
            font-family: "IBM Plex Sans", "Noto Sans SC", sans-serif;
            color: var(--ink);
            background:
                radial-gradient(circle at top left, rgba(15, 118, 110, 0.12), transparent 40%),
                linear-gradient(180deg, #eef5f2 0%, var(--bg) 100%);
            display: grid;
            place-items: center;
            padding: 2rem 1rem;
        }
        .panel {
            width: min(32rem, 100%);
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 1rem;
            padding: 1.75rem;
            box-shadow: 0 18px 40px rgba(20, 32, 26, 0.08);
        }
        h1 {
            margin: 0 0 0.35rem;
            font-size: 1.4rem;
            font-family: "Fraunces", "Noto Serif SC", serif;
        }
        .muted { color: var(--muted); margin: 0 0 1.25rem; }
        .row {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.65rem 0;
            border-bottom: 1px solid var(--line);
            font-size: 0.95rem;
        }
        .row:last-of-type { border-bottom: 0; margin-bottom: 1.25rem; }
        .amount { font-weight: 700; font-size: 1.15rem; }
        .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
        button, .link {
            appearance: none;
            border: 0;
            border-radius: 0.65rem;
            padding: 0.75rem 1rem;
            font: inherit;
            cursor: pointer;
            text-decoration: none;
        }
        button {
            background: var(--accent);
            color: var(--accent-ink);
        }
        .link {
            background: transparent;
            color: var(--muted);
            border: 1px solid var(--line);
        }
        .badge {
            display: inline-block;
            padding: 0.15rem 0.55rem;
            border-radius: 999px;
            background: #ecfdf5;
            color: #0f766e;
            font-size: 0.8rem;
        }
        .error {
            margin-bottom: 1rem;
            padding: 0.75rem 0.9rem;
            border-radius: 0.65rem;
            background: #fef2f2;
            color: #991b1b;
        }
    </style>
</head>
<body>
    <main class="panel">
        <p class="badge">{{ __('payment.checkout.stub_badge') }}</p>
        <h1>{{ __('payment.checkout.title') }}</h1>
        <p class="muted">{{ __('payment.checkout.subtitle', ['id' => $order->id]) }}</p>

        @if ($errors->any())
            <div class="error">{{ $errors->first() }}</div>
        @endif

        @foreach ($order->items as $item)
            <div class="row">
                <span>{{ $item->title }}</span>
                <span>{{ $item->amount }} {{ $order->currency }}</span>
            </div>
        @endforeach

        <div class="row">
            <span>{{ __('payment.checkout.total') }}</span>
            <span class="amount">{{ $order->amount }} {{ $order->currency }}</span>
        </div>

        @if ($order->isPaid())
            <p class="muted">{{ __('payment.checkout.already_paid') }}</p>
            <div class="actions">
                <a class="link" href="{{ $returnUrl }}">{{ __('payment.checkout.back') }}</a>
            </div>
        @else
            <form method="post" action="{{ url('/plugins/payment/orders/'.$order->id.'/pay') }}">
                @csrf
                <input type="hidden" name="return_url" value="{{ $returnUrl }}">
                <div class="actions">
                    <button type="submit">{{ __('payment.checkout.pay_stub') }}</button>
                    <a class="link" href="{{ $returnUrl }}">{{ __('payment.checkout.cancel') }}</a>
                </div>
            </form>
        @endif
    </main>
</body>
</html>
