{% extends "admin_base.html" %}

{% block page_title %}New Payment - Stripe{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-3xl space-y-4 px-4 py-5 text-foreground sm:px-6 sm:py-8">
    <a href="/plugins/stripe-payment" class="inline-flex min-h-11 items-center gap-2 rounded-lg border border-divider bg-surface px-4 py-2 text-sm font-semibold text-foreground transition hover:bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2">
            <i class="fas fa-arrow-left" aria-hidden="true"></i> Back to payments
        </a>

    <section class="rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-7">
        <div class="mb-6">
            <p class="text-sm font-medium text-muted">Stripe</p>
            <h1 class="mt-1 text-2xl font-bold tracking-tight sm:text-3xl">Create a payment</h1>
            <p class="mt-2 text-sm leading-6 text-muted">Enter the amount and a short description, then continue to Stripe’s secure payment form.</p>
        </div>

        <div class="space-y-5">
            <div>
                <label for="payment-amount" class="mb-1.5 block text-sm font-semibold text-foreground">Payment amount</label>
                <div class="flex min-h-12 overflow-hidden rounded-lg border border-divider bg-canvas shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20">
                    <span class="inline-flex items-center border-r border-divider px-3 text-sm text-muted">{{ settings.currency_code | default(value='USD') }}</span>
                    <input type="number" id="payment-amount" class="min-w-0 flex-1 bg-transparent px-3 py-2 text-base text-foreground outline-none placeholder:text-muted" placeholder="100.00" value="50" min="0.01" step="0.01" inputmode="decimal" required>
                </div>
            </div>
            <div>
                <label for="payment-desc" class="mb-1.5 block text-sm font-semibold text-foreground">Description <span class="font-normal text-muted">(optional)</span></label>
                <input type="text" id="payment-desc" class="min-h-12 w-full rounded-lg border border-divider bg-canvas px-3 py-2 text-base text-foreground shadow-sm outline-none placeholder:text-muted focus:border-primary focus:ring-2 focus:ring-primary/20" placeholder="What is this payment for?" value="One-time Payment" maxlength="250">
            </div>

            <div id="payment-message" class="hidden rounded-lg border border-danger/30 bg-danger/10 p-3 text-sm text-danger" role="alert" aria-live="polite" tabindex="-1"></div>
            <div id="payment-config" data-key-id="{{ key_id }}" data-currency="{{ settings.currency_code | default(value='USD') }}" hidden></div>
            <button id="btn-start-payment" type="button" class="inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-lg bg-primary px-5 py-3 font-semibold text-white shadow-sm transition  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-wait disabled:opacity-60 sm:w-auto">
                <i class="fas fa-credit-card" aria-hidden="true"></i> Continue to secure payment
            </button>
        </div>
    </section>
</main>

<script src="/plugins/stripe-payment/assets/js/admin_new_payment.js"></script>
{% endblock %}