
<div class="container-reset">
  <div class="form-horizontal well">


    <div class="line">
      <div class="column-6 column-rr-12">
        <div class="line">
          <div class="column-12">
            <label class="required-label" for="creditcard_name">Nome:</label>
            <input type="text" class="form-control" name="creditcard_name" id="creditcard_name" placeholder="O nome no cartão" required>
          </div>
        </div>
        <div class="line">
          <div class="column-4 column-r-12">
            <label class="required-label" for="creditcard_ccno">Número do Cartão:</label>
            <input type="text" class="form-control" name="creditcard_ccno" id="creditcard_ccno" placeholder="Somente números" required>
          </div>
          <div class="column-4 column-r-6 tooltip-container">
            <label class="required-label" for="creditcard_cccvd">Código de Segurança:</label>
            <div class="inputbutton-container">
              <button id="tooltip-button" class="inputbutton-button" type="button">
                <i class="fas fa-question-circle"></i>
              </button>
              <input type="text" class="inputbutton-input" name="creditcard_cccvd" id="creditcard_cccvd"  placeholder="Ex: 321" required>
            </div>
            <div class="tooltip-img">
              <img src="image/cielo/security-code.jpg" alt="Código de Segurança">
            </div>
          </div>
          <div class="column-4 column-r-6">
            <label class="required-label" for="expire">Vencimento:</label>
            <input type="text" class="form-control" name="expire" id="expire" placeholder="__/____" required>
          </div>
        </div>
        <div class="line">
          <div class="column-12" >

              <div class="payments clearfix" id="box-bandeiras">
              <?php if ($this->config->get('cielo_transparente_master')){ ?>
              <label class="radioimg-label">
                <input type="radio" class="radioimg-input creditcard_cctype" name="creditcard_cctype"  id="creditcard_cctype" value="mastercard"  disabled="disabled" >
                <img class="radioimg-img radioimg_creditcard_cctype" src="image/cielo/mastercard.jpg">
              </label>
              <?php } ?>
              <?php if ($this->config->get('cielo_transparente_visa')){ ?>
              <label class="radioimg-label">
                <input type="radio" class="radioimg-input creditcard_cctype" name="creditcard_cctype"  id="creditcard_cctype" value="visa"  disabled="disabled">
                <img class="radioimg-img radioimg_creditcard_cctype" src="image/cielo/visa.jpg">
              </label>
              <?php } ?>
              <?php if ($this->config->get('cielo_transparente_amex')){ ?>
              <label class="radioimg-label">
                <input type="radio" class="radioimg-input creditcard_cctype" name="creditcard_cctype"  id="creditcard_cctype" value="amex"  disabled="disabled">
                <img class="radioimg-img radioimg_creditcard_cctype" src="image/cielo/american-express.jpg">
              </label>
              <?php } ?>
              <?php if ($this->config->get('cielo_transparente_diners')){ ?>
              <label class="radioimg-label">
                <input type="radio" class="radioimg-input creditcard_cctype" name="creditcard_cctype"  id="creditcard_cctype" value="diners"  disabled="disabled">
                <img class="radioimg-img radioimg_creditcard_cctype" src="image/cielo/dinersclub.jpg">
              </label>
              <?php } ?>
              <?php if ($this->config->get('cielo_transparente_elo')){ ?>
              <label class="radioimg-label">
                <input type="radio" class="radioimg-input creditcard_cctype" name="creditcard_cctype"  id="creditcard_cctype" value="elo"  disabled="disabled">
                <img class="radioimg-img radioimg_creditcard_cctype" src="image/cielo/elo.jpg">
              </label>
              <?php } ?>
              <?php if ($this->config->get('cielo_transparente_discover')){ ?>
              <label class="radioimg-label">
                <input type="radio" class="radioimg-input creditcard_cctype" name="creditcard_cctype"  id="creditcard_cctype" value="discover"  disabled="disabled">
                <img class="radioimg-img radioimg_creditcard_cctype" src="image/cielo/discover.jpg">
              </label>
              <?php } ?>
            </div>
          </div>
        </div>

        <div class="line">
          <div class="column-12" id="parcelas">
          </div>
        </div>
      </div>
      <div class="column-6 column-rr-12">

      </div>
      <div class="column-12">
        <div class="buttons column-12">
          <button id="button-confirm"  class="btn-default btn-large" data-loading-text="Aguarde Processando...">
            <span>Efetuar Pagamento</span>
          </button>
        </div>
      </div>
    </div>
	</div>

  <div class="load load-block" />
  <div class="load load-block-image">
    <img src="assets/img/loading-black.svg" alt="loading">
  </div>

</div>



<script type="text/javascript" src="catalog/view/javascript/jquery.payment/jquery.payment.js"></script>
<script>
window.waitEvent('scripts_document', function(){
  $("#tooltip-button").click(function(){
    $(".tooltip-img").fadeToggle(100);
  });
  $("#tooltip-button").mouseout(function(){
    $(".tooltip-img").fadeOut(200);
  });

  $("#expire").mask("99/9999",{placeholder:"__/____"});


  $.fn.toggleInputError = function(erred) {
      $(this).closest('.form-group').toggleClass('has-error', erred);
          return this;
        };

  $('#creditcard_ccno').payment('formatCardNumber');
  $('#creditcard_cccvd').payment('formatCardCVC');




  jQuery(function () {



          $('#creditcard_ccno').keyup(function(e){


              var cardType = $.payment.cardType($(this).val());

              if(cardType){

                  var bandeira = cardType;
                  var parcelas = <?php echo $this->config->get('cielo_transparente_parcela_qtdmax'); ?>

                  var radioimgSelect = '".radioimg-input[value="'+cardType+'"]"';
                  $(radioimgSelect).prop( "checked", true );

                  if (bandeira == 'amex'){
                      $('#creditcard_cccvd').attr("maxlength",4);
                  }else{
                      if ($("#creditcard_cccvd").val().length == 4){
                          $("#creditcard_cccvd").val("");
                      }
                      $('#creditcard_cccvd').attr("maxlength",3);
                  }

                  jQuery.ajax({
                      url: 'index.php?route=payment/cielo_transparente/parcelamento&bandeira='+bandeira+'&parcelas='+parcelas,
                      type: 'GET',
                      cache: false,
                      dataType: 'html',
                      beforeSend: function() {
                          jQuery('#button-confirm').button('loading');
                      },
                      complete: function() {
                          jQuery('#button-confirm').button('reset');
                      },
                      success: function(data) {
                          jQuery('#parcelas').html(data);
                      }
                  });
              }else{
                  $(".radioimg-input:checked").prop( "checked", false );
              }


          });

  });

  $('#button-confirm').on('click', function() {

    var cartaotipo = $(".radioimg-label").find("input:checked").val();
    var cartaonome = $("#creditcard_name").val();
    var cartaonumero = $("#creditcard_ccno").val().replace(/ /g, "");
    var cartaocod = $("#creditcard_cccvd").val();
    var cartaoexp = $("#expire").val();
    var cartaopgto = $("#formaPagamento").val();

          var mesAno = $("#expire").val().split("/");
          var mes = mesAno[0];
          var ano = mesAno[1];
          var cardType = $.payment.cardType($('#creditcard_ccno').val());

          if (($.payment.validateCardNumber($('#creditcard_ccno').val()))&&
              ($.payment.validateCardCVC($('#creditcard_cccvd').val(), cardType))&&
              ($.payment.validateCardExpiry(mes, ano))) {




              $.ajax({
              type: 'POST',
              url: 'index.php?route=payment/cielo_transparente/callback&order_id=<?php echo $idboleto; ?>',
              data: {creditcard_cctype : cartaotipo, creditcard_name : cartaonome, creditcard_ccno : cartaonumero, creditcard_cccvd : cartaocod, expire : cartaoexp, formaPagamento : cartaopgto},
              dataType : 'json',
              beforeSend: function() {
                  $('#button-confirm').attr('disabled', true);
                  $('.load').css("display","block");

              },
              complete: function() {
                  $('#button-confirm').attr('disabled', false);
                  $('.load').css("display","none");
              },
              success: function(json) {
                  if (!json['error']){
                      //Comentado para que posteriormente seja estudado uma forma de retentativa
                      if (json['autorizacao'] == 'retentativa'){
                          $('#notification').html('<div class="warning" style="display: none;"><span><?php echo $text_erro_retentativa; ?><i class="btn-close fas fa-times" aria-hidden="true"></i></span></div>');
                          $('.warning').addClass("warning_flutuante");
                          $('.warning').fadeIn('slow');
                          $('.warning').animate({
                              top: $(document).scrollTop()
                          });

                          $('.warning').offset().top;

                          $(window).scroll(function () {
                              $('.warning').animate({
                                  top: $(document).scrollTop()
                              },
                              {duration:500,queue:false}
                              );
                          });
                      } else {
                        location = '<?php echo $continue; ?>';
                      }
                  }else{
                      $('.error').remove();
                      if (json['error']['bandeira']){
                          $('#box-bandeiras').after('<span class="error">' + json['error']['bandeira'] + '</span>');
                      }
                      if (json['error']['nomecartao']){
                          $('#creditcard_name').after('<span class="error">' + json['error']['nomecartao'] + '</span>');
                      }
                      if (json['error']['numerocartao']){
                          $('#creditcard_ccno').after('<span class="error">' + json['error']['numerocartao'] + '</span>');
                      }
                      if (json['error']['csv']){
                          $('#creditcard_cccvd').after('<span class="error">' + json['error']['csv'] + '</span>');
                      }
                      if (json['error']['validade']){
                          $('#expire').after('<span class="error">' + json['error']['validade'] + '</span>');
                      }
                  }

              }

              });
          } else {
              $('.error').remove();
              if (!$.payment.validateCardNumber($('#creditcard_ccno').val())){
                  $('#creditcard_ccno').after('<span class="error">Numero de Cartão Inválido</span>');
              }
              if (!$.payment.validateCardCVC($('#creditcard_cccvd').val(), cardType)){
                  $('#creditcard_cccvd').after('<span class="error">CSV Inválido</span>');
              }
              if (!$.payment.validateCardExpiry(mes, ano)){
                  $('#expire').after('<span class="error">Data de Vencimento Inválida</span>');
              }
          }
  });
});
</script>
