<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NFC Reader</title>
</head>

<img src="/static/img/arrow_corner_up.svg" class="arrow1"
    style="position: absolute;opacity: 0.1;width: 13%;z-index: -1;">

<header>
    <h1 style="text-align: center;margin-top: 3rem; font-family: Gotham;font-weight: 300; color: #01338D;">Payment
        Information</h1>
</header>

<div class="containers">
    <div class="row formRowContainer">
        <div class="col-md-6 col-sm-12">
            <section class="cards">
                <div class="card-wrapper"></div>
            </section>
        </div>

        <div class="col-md-6 col-sm-12">
            <section class="card-inputs">
                <form id="paymob_checkout">
                    <input type="hidden" value="CARD" paymob_field="card_number" id="card_number">
                    <input type="hidden" value="CARD" paymob_field="card_expiry_mm" id="mm">
                    <input type="hidden" value="CARD" paymob_field="card_expiry_yy" id="yy">
                    <input type="hidden" value="" name="tenure" paymob_field="tenure" id="tenureHiddenInput">
                    <input type="hidden" value="CARD" paymob_field="subtype">
                    <input type="hidden" value="{{ payment.slug }}" name="slug" />
                    <div class="card-num-input">
                        <input placeholder="Card Number" onchange="update_two_hidden_fields();" type="tel" name="number"
                            id="number" class="card-num">
                    </div>
                    <div class="checkInstallmentTextDiv">
                        <p>Your card is eligible for installments</p>
                        <span>Check Installment Plans</span>
                    </div>
                    <div class="card-num-input">
                        <input placeholder="Card Holder Name" type="text" name="name" paymob_field="card_holdername">
                    </div>
                    <div class="input-containers">
                        <input placeholder="MM/YY" onchange="update_two_hidden_fields();" type="tel" name="expiry"
                            id="mmyy">
                        <input placeholder="CVV" type="tel" name="cvc" paymob_field="card_cvn">
                    </div>
                    <div class="card-footer">
                        <div class="saveCardText">Save Card <input type="checkbox" value="tokenize" name="save card">
                        </div>
                        <div id="discountMessgae"></div>
                        <button id="submitButtonWaiting" class="submit" style="display: block;" disabled>
                            <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                        </button>
                        <input id="submitButton" type="submit" value="PAY" class="submit" style="display: none;">
                        <span><i class="fa fa-lock" aria-hidden="true"></i> Secured by Paymob</span>
                        <div id="checkInstallmentBtn" class="whiteBtn">Check Installment Plans</div>
                    </div>
                </form>
            </section>
        </div>
    </div>
    <div class="installmentsDiv">
        <div class="installmentsHead">
            <img src="/static/img/paymob_new.svg" />
            <p>Choose your plan</p>
        </div>
        <div id="installmentsBody"></div>
    </div>

    <footer>
        <div class="copyWrite">
            <img src="/static/img/paymob_new.svg" />
            <div class="logos">
                <img src="/static/img/misr.png" />
                <img src="/static/img/ma4rq.png" />
                <img src="/static/img/cib.png" />
                <img src="/static/img/ahly.png" />
            </div>
        </div>
    </footer>
</div>
</div>
<img src="/static/img/arrow_corner_down.svg" style="position: absolute; opacity: 0.1; z-index: -1;width: 13%;"
    class="arrow2">
