<h2 class="font-family-header"><?php echo $text_instruction; ?></h2>
<div class="content">
  <p><?php echo $text_description; ?></p>
  <p><?php echo $bank; ?></p>
  <p><?php echo $text_payment; ?></p>
</div>

<div class="bank-transfer-container">
  <div class="right">

	<?php if ($captcha_tpl) { ?>
		<div class="flex middle-xs end-xs bottom-margin-large">
		<?php  echo $captcha_tpl; ?>
		</div>
	<?php } ?>

    <button type="button" id="button-confirm" class="btn-default btn-large btn-full">
      <span><?php echo $button_confirm; ?></span>
      <i class="fas fa-arrow-right" aria-hidden="true"></i>
    </button>
  </div>
</div>
<script type="text/javascript">
window.waitEvent('scripts_document', function() {
  $('#button-confirm').bind('click', function() {
    var data = $('.bank-transfer-container').find('select, textarea, input').serialize();
  	$.ajax({
  		type: 'post',
      data : data,
      dataType : 'json',
  		url: 'index.php?route=payment/bank_transfer/confirm',
			beforeSend: function() {
				$('#button-confirm').addClass('btn-loading');
			},
			success: function(json) {

				$('.form-error').remove();
				if (!json['error']){
					window.location = '<?php echo $continue; ?>';
				}else{
					$.each(json['error'], function (index, value) {
					  $('input[name=' + index + ']').after('<span class="text-small text-error visible-block text-margin-x-small form-error">' + value + '</span>');
            if (index == 'g-recaptcha'){
              $('#' + index).parent().after('<span class="text-small text-error visible-block text-margin-x-small form-error">' + value + '</span>');
            }
					});
					$('#button-confirm').removeClass('btn-loading');
				}
			},
			error: function() {
				console.log('erro no pagamento');
				$('#button-confirm').removeClass('btn-loading');
			}
  	});
  });
});
</script>
