{{ template "base" . }}
{{ define "title" }}
Virtual Terminal
{{ end }}
{{ define "content" }}
<h2 class="mt-3 text-center">Virtual Terminal</h2>
<hr>
<div class="alert alert-danger text-center d-none" id="card-messages"></div>
<form action=""
      method="post"
      name="charge_form"
      id="charge_form"
      class="d-blick needs-validation charge-form"
      autocomplete="off"
      novalidate="">
    <div class="mb-3">
        <label for="amount" class="form-label">Amount</label>
        <input type="text"
               id="charge_amount"
               name="charge_amount"
               autocomplete="charge_amount-new"
               required=""
               class="form-control">
        <input type="hidden" id="amount" name="amount" value="value">
    </div>
    <div class="mb-3">
        <label for="cardholder-name" class="form-label">Cardholder Name</label>
        <input type="text"
               id="cardholder-name"
               name="cardholder_name"
               autocomplete="cardholder-name-new"
               required=""
               class="form-control">
    </div>
    <div class="mb-3">
        <label for="cardholder-email" class="form-label">Cardholder Email</label>
        <input type="text"
               id="cardholder-email"
               name="cardholder_email"
               autocomplete="cardholder-email-new"
               required=""
               class="form-control">
    </div>
    <!-- card number will be built by stripe -->
    <div class="mb-3">
        <label for="card-element" class="form-label">Credit Card</label>
        <div class="form-control" id="card-element"></div>
        <div class="alert-danger text-center" id="card-errors" role="alert"></div>
        <div class="alert-success text-center" id="card-success" role="alert"></div>
    </div>
    <hr>
    <a href="javascript:void(0)" id="pay-button" class="btn btn-primary">Charge Card</a>
    <div class="text-center d-none" id="processing-payment">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
    <input id="payment_intent"
           type="hidden"
           name="payment_intent"
           value="payment_intent">
    <input id="payment_method"
           type="hidden"
           name="payment_method"
           value="payment_method">
    <input id="payment_amount"
           type="hidden"
           name="payment_amount"
           value="payment_amount">
    <input id="payment_currency"
           type="hidden"
           name="payment_currency"
           value="payment_currency">
</form>
<div class="row">
    <div class="col-md-5 offset-md-3 d-none" id="receipt">
        <h3 class="mt-3 text-center">Receipt</h3>
        <hr>
        <p>
            <strong>Bank Return Code</strong>: <span id="bank-return-code"></span>
        </p>
        <p>
            <a href="/admin/virtual-terminal" class="btn btn-primary">
                Charge another card
            </a>
        </p>
    </div>
</div>
{{ end }}
{{ define "js" }}
<script src="https://js.stripe.com/v3/"></script>
<script type="module">
    import {stripeInit, checkAuth} from "/static/js/common.js";
    import {val} from "/static/js/terminal.js"

    checkAuth({{.API}});
    stripeInit('{{.StripePubKey}}');
    document.getElementById("charge_amount").addEventListener("change", (evt) => {
        if (evt.target.value !== "") {
            document.getElementById("amount").value = parseInt((evt.target.value * 100), 10);
        } else {
            document.getElementById("amount").value = 0;
        }
    });

    document.getElementById("pay-button").addEventListener("click", () => {
        val({{.API}});
    })

</script>
{{ end }}