{% extends "master.html" %}

{% block content %}
<div class="container d-flex justify-content-center align-items-center" style="margin: 150px !important;">
    <div class="col-lg-6">
        <div class="card justify-content-center shadow-lg border-0 rounded-4 p-5 text-center bg-light">
            <h2 class="fw-bold text-dark">Secure Payment</h2>
            <p class="text-secondary mb-3">Order ID: <strong class="text-dark">{{ order.id }}</strong></p>
            <h3 class="fw-bold text-success">Total: Rs. {{ total_price|floatformat:2 }}</h3>

            <button id="rzp-button1" class="btn btn-lg btn-primary mt-4 px-5 py-3 rounded-pill fw-bold shadow-sm">
                <i class="fas fa-lock me-2"></i> Pay Securely
            </button>

            <p class="mt-3 text-muted small">Your transaction is encrypted & secure.</p>
        </div>
    </div>
</div>

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
    var options = {
        "key": "{{ razorpay_key }}",
        "amount": {{ amount }},
        "currency": "INR",
        "name": "AdFusion",
        "description": "Order Payment",
        "order_id": "{{ razorpay_order_id }}",
        "handler": function (response){
            window.location.href = "/payment-success/?order_id={{ order.id }}&payment_id=" + response.razorpay_payment_id;
        },
        "prefill": {
            "name": "{{ request.user.get_full_name|default:'Customer' }}",
            "email": "{{ request.user.email }}",
            "contact": "9865252552"
        },
        "theme": {
            "color": "#0056b3"
        }
    };

    var rzp1 = new Razorpay(options);
    document.getElementById('rzp-button1').onclick = function(e){
        rzp1.open();
        e.preventDefault();
    }
</script>
{% endblock %}