{% extends "mnfapp/base.html" %} {% load static %} {% block content %}
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkout</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400&display=swap" rel="stylesheet" />

    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />

    <!-- font awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />

    <!-- MDB -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css" rel="stylesheet" />

    <style>
        body {}
        .checkout-container {
            grid-template-columns: 100%;
        }
        
        .m-div {
            font-family:  Helvetica, "sans-serif";
        }
        
        .checkout-content {
            padding: 10px;
            width: 70%;
            height: auto;
            border: solid black 1px;
            background-color: rgb(233, 234, 243);
            border-radius: 10px;
            justify-content: center;
        }
        
        .navs {
            background-color: rgb(67, 72, 158);
            color: #fff;
            width: 100%;
            text-align: center;
        }
        
        .s-btn {
            width: 200px;
            height: 45px;
            background-color: rgb(92, 95, 163);
            color: #fff;
            padding: 0.3em;
            border: solid rgb(92, 95, 163) 1px;
            border-radius: 20px;
        }
        
        .s-btn:hover {
            background-color: rgb(67, 72, 158);
            color: white;
        }
        
        .batn {
            width: 50%;
            height: 50px;
            background-color: rgb(92, 95, 163);
            color: #fff;
            border: solid rgb(92, 95, 163) 1px;
            border-radius: 20px;
            font-size: 28px;
            text-align: center;
        }
        
        .batn:hover {
            background-color: rgb(67, 72, 158);
            color: white;
        }
        
        .headerrr {
            color: blue;
            height: auto;
            background-color: transparent;
            border: 0;
            text-decoration: none;
        }
        
        .btnnn {
            color: #ee3c4d;
            cursor: pointer;
        }
        
        .headerrr {
            background-color: rgb(67, 72, 158);
            width: 100%;
            height: auto;
            border-radius: 5px;
            margin: 1px;
        }
        
        #codee {
            width: 215px;
            height: 45px;
            border-radius: 5px;
            padding-left: 5px;
            font-size: 16px;
        }
    </style>
    

<body>
    <div class="m-div">
        <div class="container-fluid">
            <div class="text-center">
                <h1 class="navs">
                    Pricing Calculator
                </h1>
            </div>

            <!-- <a class="btnnn" onclick="window.history.back();">
            Back To Payment
            </a> -->
            <br />
            <br>

            <div class="text-center">

                <div class="checkout-container" style="display: flex; justify-content: CENTER">
                    <div class="checkout-content">

                        <h2 class="font-weight-bold headerrr" style="color: white; text-align: center;">
                            Order Summary
                        </h2>



                        <div style="padding-left: 0.3em">
                            <div class="row">
                                <div class="col-sm-6">
                                    <h5 style="text-align: left; padding-top: 10px">
                                        Amount
                                    </h5> 
                                    {% if isDiscount %}
                                    <h5 style="text-align: left; padding-top: 10px">
                                        Discount Amount
                                    </h5> 
                                    <h5 style="text-align: left; padding-top: 10px">
                                        Final Amount
                                    </h5>
                                    {% endif %} 
                                    {% if service %}
                                    <h5 style="text-align: left; padding-top: 5px">
                                        {{service}}
                                    {%endif%}
                                                                          
                                </div>


                                <div class="col-sm-6">
                                    <h5 class="" style="padding-top: 10px">
                                        $ {{amount}} USD = ₹ {{amtINR}} INR
                                    </h5>
                                    {% if isDiscount %}
                                    <h5 class="" style="padding-top: 10px">
                                        $ {{totalDiscount}} USD = ₹ {{totalDiscountINR}} INR
                                    </h5>
                                    <h5 class="" style="padding-top: 10px">
                                        $ {{finalAmount}} USD = ₹ {{finalAmountINR}} INR
                                    </h5>
                                    {% endif %}
                                </div>
                                
                                <div class="col-sm-12">
                                    <hr>
                                </div>
                                {% if message %}
                                {% for msg in message %}
                                <h6 style="color:red;text-align: left; padding-top: 10px;">
                                    {{msg}}
                                </h6> 
                                {% endfor %}
                                
                                <div class="col-sm-12">
                                    <hr>
                                </div>
                                {% endif %}

                                <div class="col-sm-6" style="text-align: left; ">
                                    <h5 for="" style="padding-top: 10px; font-size:14px;">
                                        Have a promo code? Enter Here
                                    </h5>
                                    <form action="{% url 'promo'%}" onsubmit="return false;" method="post">
                                       
                                        {%csrf_token%}
                                        <input type="hidden" name="subPlan" value="{{subPlan}}" />
                                        <input type="hidden" name="pid" id="pid" value="{{pid}}" />
                                        <input type="hidden" name="amount" value="{{amount}}" />
                                        <input type="hidden" name="amtINR" id="pid" value="{{amtINR}}" />

                                        <input type="hidden" name="desc" id="pid" value="{{desc}}" /> {%if green%} {%else%}
                                        <input type="text" name="code" id="codee" style="" placeholder="Promo Code" required />
                                </div>

                                <div class="col-sm-6" style="padding-top:10px;">
                                    <span><br></span>
                                    <button class="s-btn font-weight-bold" style=" font-size: 15px; ">
                                    <!--<button onclick="alert('Promo code invalid');"  class="s-btn font-weight-bold" style=" font-size: 15px; "> -->
                                    Apply
                                    </button>
                                </div>

                                {%endif%}
                                </form>
                               
                              
                            </div>
                        </div>
                        <br />
                    </div>
                </div>
            </div>
            <form action="{% url 'card_razorpay'%}" method="post" id='payment-form'>
                {%csrf_token%}
                <input type="hidden" name="payment_intent_id" value='{{pid}}'> {% if desc %}
                <input type="hidden" name="type" value='subscription'>
                <input type="hidden" name="giftId" value=''> {%endif%} {% if giftId %}
                <input type="hidden" name="type" value='gift'>
                <input type="hidden" name="giftId" value='{{giftId}}'> {%endif%}
                <input type="hidden" name="subPlan" value='{{subPlan}}'>
                <div id="card-element" style="margin-top: 4vh; display: grid; grid-template-columns: auto;">

            </form>
            <div class="checkout-container text-center" style="justify-content: center">
                {% if checkurl %}
                <button class="batn " id="submit-button"><a href="{{serviceurl}}" style="color:white">{{serviceurl_name}}</a></button>
                {% else %}
                <button class="batn " id="submit-button"><a href="{% url serviceurl %}" style="color:white">{{serviceurl_name}}</a></button>
                {% endif %}
            </div>

            </div>
        </div>
    </div>

    <br><br><br><br><br>
</body>

</html>
{%endblock%}