<?php
/**
  * Ahead WebSoft Technologies Pvt Ltd.
  * @copyright  Copyright 2006-2026 Ahead WebSoft Technologies Pvt Ltd.
  * @license    https://www.socialengine.com/policies
*/
?>
<div class="generic_layout_container layout_main">
	<div class="generic_layout_container layout_middle">
  	<div class="generic_layout_container layout_core_content">

      <div class="authorizepmnt_payment_process">
        <div class="authorizepmnt_payment_process_top">
          <p class="m-0"><b><?php echo $this->translate("To Pay:"); ?></b> <span><?php echo $this->params["amountRecharge"]; ?></span>
        </div>
          <div class="authorizepmnt_payment_details">
            <div class="authorizepmnt_payment_details_head">
              <?php echo $this->translate("Credit or Debit card")?>
            </div>
            <div class="authorizepmnt_payment_details_main">
              <!-- Payment form -->
              <form id="authorize-pmt-fm" method="POST">

                  <div class="error error_msg" id="authorize-error" style="display:none;"></div>

                  <?php if(empty($this->params["email"])){ ?>
                    <div class="authorizepmnt_payment_details_field">
                        <label><?php echo $this->translate("Email"); ?></label>
                        <input type="text" name="card_email" id="card_email" placeholder="<?php echo $this->translate("Email"); ?>" autocomplete="off" required="">
                    </div>
                  <?php } ?>
                  <div class="authorizepmnt_payment_details_field">
                    <label><?php echo $this->translate("Card Number"); ?></label>
                    <input type="text" name="card_number" id="card_number" placeholder="<?php echo $this->translate("1234 1234 1234 1234"); ?>" autocomplete="off" required="">
                  </div>
                  <div class="authorizepmnt_payment_details_row">
                      
                    <div class="authorizepmnt_payment_details_field">
                        <label><?php echo $this->translate("Expiry Date"); ?></label>
                        <div>
                            <input type="number" class="form-control" onKeyPress="if(this.value.length==2) return false" name="card_exp_month" id="card_exp_month" min="1" placeholder="<?php echo $this->translate("MM"); ?>" required="">
                        </div>
                        <div>
                            <input type="number" class="form-control" onKeyPress="if(this.value.length==4) return false" name="card_exp_year" id="card_exp_year" min="4" placeholder="<?php echo $this->translate("YYYY"); ?>" required="">
                        </div>
                    </div>
                    <div class="authorizepmnt_payment_details_field">
                        <label><?php echo $this->translate("CVV Code"); ?></label>
                        <input type="number" name="card_cvc" id="card_cvc" class="form-control" onKeyPress="if(this.value.length==4) return false" placeholder="<?php echo $this->translate("CVV"); ?>" autocomplete="off" required="">
                    </div>
                      
                  </div>
                  <div class="authorizepmnt_payment_details_field">
                    <button type="submit" class="btn btn-success w-100" id="authorize-pmt-btn"><?php echo $this->translate("Pay Now"); ?></button>
                  </div>
              </form>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
<script type="text/javascript">
    AttachEventListerSE('submit', '#authorize-pmt-fm', function(event) {
        event.preventDefault();
        let fields = {}

        scriptJquery("#authorize-pmt-btn").attr("disabled");
        scriptJquery("#authorize-pmt-btn").html('<img src="'+en4.core.staticBaseUrl+'application/modules/Core/externals/images/loading.gif" />');
        fields.card_number = scriptJquery("#card_number").val();
        fields.email = scriptJquery("#card_email").val();
        fields.card_exp_month = scriptJquery("#card_exp_month").val();
        fields.card_exp_year = scriptJquery("#card_exp_year").val();
        fields.card_cvc = scriptJquery("#card_cvc").val();
        scriptJquery("#authorize-error").hide();
        scriptJquery.post('<?php echo $this->params["return_url"] ?>',{...fields,order_id:<?php echo $this->params["order_id"] ?>,amount:<?php echo $this->params["amount"] ?>},function(result) {
            scriptJquery("#authorize-pmt-btn").removeAttr("disabled");
            scriptJquery("#authorize-pmt-btn").html("<?php echo $this->translate("Pay Now"); ?>");
            let parseResponse = JSON.parse(result);
            if(parseResponse.status == 1){
                loadAjaxContentApp(parseResponse.url, true,"full");
            }else{
                // show error
                scriptJquery("#authorize-error").show();
                scriptJquery("#authorize-error").html(parseResponse.message);
            }
        })

    })
</script>