{% extends "admin_base.html" %}

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

{% block extra_head %}
<link rel="stylesheet" href="/plugins/razorpay-payment/assets/css/razorpay.ui.css?v={{ asset_version | default(value='1') }}">
{% endblock %}

{% block admin_content %}
<main class="razorpay-admin mx-auto w-full max-w-3xl px-4 py-6 sm:px-6 lg:px-8">
    <div data-razorpay-feedback class="blocks-workspace-notice" role="status" aria-live="polite" tabindex="-1" hidden></div>
    <a data-payment-recovery-link href="/plugins/razorpay-payment" class="mt-3 inline-flex min-h-11 items-center font-medium text-brand underline underline-offset-4" hidden>Return to Payments and sync this payment</a>
    <div class="mb-6">
        <a href="/plugins/razorpay-payment" class="blocks-button blocks-button-secondary inline-flex min-h-11 items-center gap-2">
            <i class="fas fa-arrow-left"></i> Back to List
        </a>
    </div>

    <section class="rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-8" aria-labelledby="payment-form-title">
        <div class="mb-6">
            <h1 id="payment-form-title" class="text-xl font-semibold text-foreground">Create a payment</h1>
            <p class="mt-1 text-sm text-muted">Enter the amount and description before opening Razorpay Checkout.</p>
        </div>
        <div class="space-y-5">
            <div>
                <label class="mb-2 block text-sm font-medium text-foreground" for="payment-amount">Payment amount (INR)</label>
                <input type="number" id="payment-amount" min="1" step="0.01" inputmode="decimal" placeholder="100.00" value="500" required>
                <p class="mt-1 text-sm text-muted">Enter an amount greater than zero.</p>
            </div>
            <div>
                <label class="mb-2 block text-sm font-medium text-foreground" for="payment-desc">Description</label>
                <input type="text" id="payment-desc" maxlength="160" placeholder="Optional description" value="One-time Payment">
            </div>
        </div>
        <div id="payment-config" data-key-id="{{ key_id }}" hidden></div>
        <div class="mt-7 flex flex-col-reverse gap-3 border-t border-divider pt-5 sm:flex-row sm:justify-end">
            <a href="/plugins/razorpay-payment" class="blocks-button blocks-button-secondary inline-flex min-h-11 items-center justify-center">Cancel</a>
            <button id="btn-start-payment" type="button" class="blocks-button blocks-button-primary inline-flex min-h-11 items-center justify-center gap-2">
                <i class="fas fa-credit-card"></i> Start Payment
            </button>
        </div>
    </section>
</main>

<div id="processing-modal" class="razorpay-processing fixed inset-0 z-50 items-center justify-center bg-black/50 p-4" role="dialog" aria-modal="true" aria-labelledby="processing-title" aria-describedby="processing-text" hidden>
    <div class="w-full max-w-md rounded-2xl border border-divider bg-surface p-6 text-center shadow-xl sm:p-8">
        <div class="processing-spinner"></div>
        <h2 id="processing-title" class="mt-4 text-lg font-semibold text-foreground">Processing</h2>
        <p id="processing-text" class="mt-2 text-sm text-muted">Connecting to Razorpay...</p>
    </div>
</div>

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script src="/plugins/razorpay-payment/assets/js/admin_new_payment.js"></script>
{% endblock %}