<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

    <meta name="theme-color" content="#28699f">
    <meta name="apple-mobile-web-app-status-bar-style" content="#28699f">
    <meta name="msapplication-navbutton-color" content="#28699f">

    <base id="base-urls" href="{{ base }}" data-base-url-loja="{{ base }}">

    {% for script in scripts %}
    <script type="text/javascript" src="{{script}}"></script>
    {% endfor %}
    {% for style in styles %}
      <link rel="{{ style.rel }}" type="text/css" href="{{ style.href }}" media="{{ style.media }}">
    {% endfor %}

    <title>Pagamento</title>


    <style>
    * {
      padding: 0;
      margin: 0;
      border: none;
      outline: none;
      box-sizing: border-box;
    }
    html,
    body {
      height: 100vh;
    }
    body {
      font: 16px normal Arial, Helvetica, sans-serif;
      color: #171717;

      background: {{background_color1}}; /* Old browsers */
      background: -moz-linear-gradient(top,  {{background_color}} 0, {{background_color}} 420px, #ffffff 420px, #ffffff 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  {{background_color}} 0,{{background_color}} 420px,#ffffff 420px,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  {{background_color}} 0,{{background_color}} 420px,#ffffff 420px,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      background-repeat: no-repeat;
    }
    hr {
      border-top: 1px solid #DDD;
      margin: 1.875rem 0;
    }
    img {
      max-width: 100%;
    }
    input,
    select {
      border: 1px solid #DDD;
      width: 100%;
      padding: .75rem;
    }

    .payment, .paymentPG {
      text-transform: uppercase;
      padding: .93rem 1.87rem;
      position: relative;
      bottom: -2.45rem;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2);
      height: 45px;
      width: calc(100% - 2rem);
      max-width: 210px;
      margin-bottom: 1rem;
      cursor: pointer;
    }
    .payment:hover {
      opacity: 0.9;
    }

    .paymentPG {
      color: #FFF;
    }

    .payment img {
      display: block;
      margin: 0 auto .5rem;
    }
    .rounded {
      border-radius: .25rem;
    }
    .card {
      max-width: 560px;
      width: 100%;
      background-color: #FFF;
      border-radius: .8rem;
      border: 1px solid #DDD;
      margin: 12vh auto 0;
    }
    .card-container {
      padding: 1.87rem 3.12rem 3.12rem;
      position: relative;
    }
    .logo {
      height: 50px;
    }
    .card-info div {
      -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
      max-width: 50%;
    }

    .text-grey {
      color: #666666;
    }
    .text-title-color {
      color: {{title_textcolor}};
    }
    .text-red {
      color: #ff0000;
    }
    .text-right {
      text-align: right;
    }
    .text-small {
      font-size: .875rem;
    }
    .text-medium {
      font-size: 1.125rem;
    }
    .text-large {
      font-size: 1.25rem;
    }
    .btn-color {
      background: {{btn_background}};
      color: {{btn_textcolor}};
    }
    .padding-x-small {
      padding: .25rem;
    }
    .padding-small {
      padding: .5rem;
    }
    .padding-medium {
      padding: 1rem;
    }
    .padding-large {
      padding: 1.5rem;
    }
    .vertical-margin-x-small {
      margin-top: .25rem;
      margin-bottom: .25rem;
    }
    .vertical-margin-small {
      margin-top: .5rem;
      margin-bottom: .5rem;
    }
    .vertical-margin-medium {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
    .vertical-margin-large {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .vertical-margin-x-large {
      margin-top: 2rem;
      margin-bottom: 2rem;
    }
    .flex {
      display: -webkit-box;
      display:    -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display:         flex;
      display: flex;
      -ms-flex: 0 1 auto;
      -webkit-box-flex: 0;
      flex: 0 1 auto;
      -ms-flex-direction: row;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
      -ms-flex-wrap: wrap;
    }
    .flex > :first-child {
      padding-left: 0;
    }
    .flex > :last-child {
      padding-right: 0;
    }
    .bottom {
      -ms-flex-align: end;
      -webkit-box-align: end;
      align-items: flex-end;
    }
    .middle {
      -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
    }
    .nowrap {
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
      -ms-flex-wrap: nowrap;
    }
    .between {
      -ms-flex-pack: justify;
      -webkit-box-pack: justify;
      justify-content: space-between;
    }
    .auto {
      -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
      -webkit-box-flex: 1;
      flex-grow: 1;
      -ms-flex-preferred-size: 0;
      flex-basis: 0;
      max-width: 100%;
    }
    .success {
      font-size: 20px;
      text-transform: none;
      transition: .4s cubic-bezier(0, 0.97, 0.88, 1.23);
      bottom: 1rem;
      max-width: 100%;
      height: 188px;
    }

    .btnGreensuccess {
      background: #ceeace;
      border: 1px solid #5cb85c;
      color: #5cb85c;
    }

    .btnOrangesuccess {
        background: rgba(241, 126, 19, .3);
        border: 1px solid #F17E13;
        color: #F17E13;
    }
    .logo-loja {
      height: 50px;
      width: 160px;
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-image: url({{logo}});
    }

    @media screen and (max-width: 480px) {
      .card {
        transform: none;
        border-radius: 0;
        margin: 0;
        border-bottom: none;
      }
      .card-container {
        height: auto;
        padding: 1rem;
      }
      .payment {
        height: auto;
        bottom: -5rem;
      }
      .success {
        bottom: 0;
        height: 222px;
        max-width: calc(100% - 2rem);
      }
    }

    .radioimg-label .radioimg-img {
      width: 40px;
    }
    .radioimg-input {
      display: none;
    }
    .radioimg-input:checked + .radioimg-img {
      border: 2px solid #F00;

      -webkit-filter: grayscale(0);
    }
    .radioimg-input + .radioimg-img {
      padding: 2px;
      cursor: pointer;
      transition: .2s linear;
      border: 2px solid transparent;

      -webkit-filter: grayscale(1);
    }

    /* Load block */
    .load-block {
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      display: none;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.1);
    }
    .load-block-image {
      position: absolute;
      z-index: 1001;
      top: 0;
      left: 0;
      display: none;
      width: 100%;
      height: 100%;
    }
    .load-block-image img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%,-50%);
         -moz-transform: translate(-50%,-50%);
          -ms-transform: translate(-50%,-50%);
              transform: translate(-50%,-50%);
    }
    /* Load block */

    button img {
        max-width: 100%;
        display: block;
        margin: 0 auto;
        margin-bottom: 1rem;
    }
    </style>


  </head>
  <body>

    <div class="card">
          <div class="card-container" id="form-cielo-api-credito">
            <div class="flex between">
              <div class="logo-loja">
              </div>
              <div class="text-grey text-right text-small padding-x-small">
                <p>{{text_num_pedido}} {{pedido_id}}</p>
                <p>{{text_data_pedido}} {{pedido_data}}</p>
              </div>
            </div>
            <div class="nome text-large vertical-margin-x-large">
              <span>{{text_nome}} {{pedido_cliente}}</span>
            </div>
            <hr>

            {% for keyTipo, cartTipo in productlist %}
              {% for keyLista, lista in cartTipo %}
                {% if lista.isListaEscolar %}
                  {% if productlist|length > 1 %}
                    <hr class="bottom-border-gray top-padding-medium bottom-margin-medium">
                  {% endif %}
                  <span class="text-large text-dark visible-block top-padding-medium">{{lista.descricao}}</span>
                {% endif %}
                {% for keyProduto, produto in lista.products %}
                  <div class="flex nowrap between top vertical-margin-small">
                    <div class="quantidade padding-x-small">
                      {{ produto.quantidade }}x
                    </div>
                    <div class="description auto padding-x-small">
                      <span class="text-medium">{{ produto.descricao }}</span>
                      <p class="text-small text-grey">{{text_preco_unitario}} {{ produto.preco_unitario }}</p>
                      {% if produto.brinde %}
                          <div class="top-padding-x-small right-margin-small text-small">
                            <span class="text-gray">{{ text_gift }}</span>
                            <span class="text-dark text-bold">{{produto.brinde.product_name}}</span>
                          </div>
                      {% endif %}
                    </div>
                    <div class="preco padding-x-small">
                      {{ produto.total }}
                    </div>
                  </div>
                {% endfor %}
              {% endfor %}
            {% endfor %}

            <hr>
            {% for total in totals %}
              <div class="flex nowrap between top text-title-color text-medium vertical-margin-small">
              <div class="padding-x-small">
                  {{total.title}}
                </div>
                <div class="padding-x-small">
                  {{total.text}}
                </div>
              </div>
            {% endfor %}
            <hr>
            {% if tolken_valido and pagamento_aberto %}

              {% if cielo_api_payment_address  %}
              <div id="address_box">
              {{ payment_address }}
              <hr class="js-holder-content hidden">
              </div>
              {% endif %}
              <div class="cardbox">
                <label class="field field-medium top-margin-medium">
                  <span class="field-label">{{text_num_cartao}}</span>
                  <input type="text" class="field-entry" name="creditcard_ccno" id="cielo_api_creditcard_ccno" placeholder="{{text_num_cartao_place}}"
                    required>
                </label>

                <label class="field field-medium top-margin-medium">
                  <span class="field-label">{{text_nome_cartao}}</span>
                  <input type="text" class="field-entry bpmpi_cardalias" name="creditcard_name" id="cielo_api_creditcard_name" placeholder="{{text_nome_place}}"
                        required>
                </label>

                <div class="payments clearfix flex background-gray padding-small top-margin-medium" id="cielo_api_box-bandeiras">
                  {% for key, credit_card in credit_cards %}
                    <label>
                      <input type="radio" class="radioimg-input creditcard_cctype" name="creditcard_cctype" id="creditcard_cctype" value="{{ credit_card.descricao|lower }}" disabled="disabled">
                      <img class="radioimg-img radioimg_creditcard_cctype visible-block" src="image/cielo/{{ credit_card.descricao|lower|replace({' ' : '-'}) }}.jpg">
                    </label>
                  {% endfor %}
                </div>

                <div id="cielo_api_parcelas"></div>

                <div class="flex nowrap-xs top-margin-large">
                  <label class="field field-medium right-margin-x-small">
                    <span class="field-label">{{text_cod_seguranca}}</span>
                    <img class="field-icon field-icon-right vertical-padding-small right-margin-small"
                      src="catalog/view/theme/vista/image/cvd.png" alt="Código de Segurança">
                    <input type="text" class="field-entry" name="creditcard_cccvd" id="cielo_api_creditcard_cccvd" placeholder="{{text_cod_seguranca_place}}" required>
                  </label>
                  <label class="field field-medium right-margin-x-small">
                    <span class="field-label">{{text_vencimento}}</span>
                    <input type="text" class="field-entry mask-date-card" name="expire" id="cielo_api_expire" placeholder="__/____" required>
                  </label>
                </div>

              </div>
              <button id="button-confirm"  class="payment btn-color rounded text-center" data-loading-text="{{text_processando}}">
                <span>{{button_pagamento}}</span>
              </button>
            {% elseif not pagamento_aberto %}
              <button id="paymentPG" class="paymentPG rounded text-center success btnGreensuccess">
                <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQ0Mi41MzMgNDQyLjUzMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQyLjUzMyA0NDIuNTMzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTQzNC41MzksOTguNDk5bC0zOC44MjgtMzguODI4Yy01LjMyNC01LjMyOC0xMS43OTktNy45OTMtMTkuNDEtNy45OTNjLTcuNjE4LDAtMTQuMDkzLDIuNjY1LTE5LjQxNyw3Ljk5M0wxNjkuNTksMjQ3LjI0OCAgIGwtODMuOTM5LTg0LjIyNWMtNS4zMy01LjMzLTExLjgwMS03Ljk5Mi0xOS40MTItNy45OTJjLTcuNjE2LDAtMTQuMDg3LDIuNjYyLTE5LjQxNyw3Ljk5Mkw3Ljk5NCwyMDEuODUyICAgQzIuNjY0LDIwNy4xODEsMCwyMTMuNjU0LDAsMjIxLjI2OWMwLDcuNjA5LDIuNjY0LDE0LjA4OCw3Ljk5NCwxOS40MTZsMTAzLjM1MSwxMDMuMzQ5bDM4LjgzMSwzOC44MjggICBjNS4zMjcsNS4zMzIsMTEuOCw3Ljk5NCwxOS40MTQsNy45OTRjNy42MTEsMCwxNC4wODQtMi42NjksMTkuNDE0LTcuOTk0bDM4LjgzLTM4LjgyOEw0MzQuNTM5LDEzNy4zMyAgIGM1LjMyNS01LjMzLDcuOTk0LTExLjgwMiw3Ljk5NC0xOS40MTdDNDQyLjUzNywxMTAuMzAyLDQzOS44NjQsMTAzLjgyOSw0MzQuNTM5LDk4LjQ5OXoiIGZpbGw9IiM1Y2I4NWMiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K">
                <span>{{text_pedido_finalizado}}</span>
              </button>
            {% else %}
              <button id="paymentPG" class="paymentPG rounded text-center success btnOrangesuccess">
                <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQwMS45OTkgNDAxLjk5OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAxLjk5OSA0MDEuOTk4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTIzNy41NDMsMzAxLjQ5OWgtNzMuMDkxYy00Ljk1LDAtOS4yMzMsMS44MTEtMTIuODUxLDUuNDI1Yy0zLjYxNSwzLjYxNy01LjQyNCw3Ljg5Ny01LjQyNCwxMi44NDd2NjMuOTUzICAgIGMwLDQuOTQ4LDEuODA5LDkuMjMyLDUuNDI0LDEyLjg1NGMzLjYyMSwzLjYxLDcuOSw1LjQyMSwxMi44NTEsNS40MjFoNzMuMDk3YzQuOTQyLDAsOS4yMjctMS44MTEsMTIuODQ4LTUuNDIxICAgIGMzLjYxLTMuNjIxLDUuNDItNy45MDUsNS40Mi0xMi44NTR2LTYzLjk1M2MwLTQuOTQ5LTEuODEzLTkuMjI5LTUuNDI3LTEyLjg0N0MyNDYuNzczLDMwMy4zMDcsMjQyLjQ4OCwzMDEuNDk5LDIzNy41NDMsMzAxLjQ5OXoiIGZpbGw9IiNmMTdlMjkiLz4KCQk8cGF0aCBkPSJNMjU5LjM4Myw1LjQyNEMyNTUuODYyLDEuODEyLDI1MS42MjgsMCwyNDYuNjc2LDBoLTkxLjM1OWMtNC45NDgsMC05LjE4LDEuODEyLTEyLjcwMyw1LjQyNCAgICBjLTMuNTIxLDMuNjE3LTUuMTg2LDcuOTAyLTQuOTk2LDEyLjg1bDcuOTkyLDIxOS4yNjVjMC4xOSw0Ljk0OCwyLjEzOSw5LjIzNiw1Ljg1MiwxMi44NDdjMy43MTEsMy42MjEsOC4wNDEsNS40MzEsMTIuOTkxLDUuNDMxICAgIGg3My4wOTdjNC45NDIsMCw5LjI3MS0xLjgxLDEyLjk5MS01LjQzMWMzLjcxLTMuNjEsNS42NTMtNy44OTgsNS44NTItMTIuODQ3bDcuOTg3LTIxOS4yNjUgICAgQzI2NC41NzgsMTMuMzI2LDI2Mi45MDUsOS4wNDUsMjU5LjM4Myw1LjQyNHoiIGZpbGw9IiNmMTdlMjkiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
                <span>{{text_link_invalido}}</span>
              </button>
            {% endif %}

          </div>
        </div>

        <div class="text-small" style="border: none; max-width: 560px; margin: 80px auto 0; text-align: center;">
            <p>{{empresa_razao}}</p>
            <p>{{empresa_endereco}}</p>
            <b>CNPJ:</b> {{empresa_cnpj}}</p>
            <br>

            {% if config_telephone %}
              <div class="ftr-container ftr-in-space--n">
              {% for key, telephone in config_telephone %}
                  <div class="ftr-h--full ftr-in-space--v-xl ftr-grid ftr-grid--nowrap">

                      {% if (key == '2') %}
                        <i class="fas fa-phone"></i>
                      {% endif %}

                      {% if (key == '3') %}
                        <i class="fas fa-fax"></i>
                      {% endif %}

                      {% if (key == '1') or (key == '4') %}
                        <i class="fab fa-whatsapp"></i>
                      {% endif %}

                      <span class="ftr-text--s ftr-text--dark ftr-in-space--h-l">
                        {% for numero in telephone %}
                          <p>{{ numero }}</p>
                        {% endfor %}
                      </span>

                  </div>
              {% endfor %}
              </div>
            {% endif %}
            <br>
            <p><b>E-mail:</b> {{empresa_email}}</p>
            <br>
        </div>

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

<script>

$(document).ready(function(){

  $("#tooltip-button").click(function(){
    $(".tooltip-img").fadeToggle(100);
  });
  $("#tooltip-button").mouseout(function(){
    $(".tooltip-img").fadeOut(200);
  });

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


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

  $('#cielo_api_creditcard_ccno').payment('formatCardNumber');
  $('#cielo_api_creditcard_cccvd').payment('formatCardCVC');

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


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

              if(cardType){

                if (cardType == 'mastercard'){
                    cardType = 'master';
                }//Não pode mudar no retorno da função js, pois o cielo 1.5 utiliza mastercard e ainda há clientes utilizando o módulo.

                  var bandeira = cardType;
                  var parcelas = "{{cielo_api_parcela_qtdmax}}" ;

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

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

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


          });



  $('#button-confirm-posterior').on('click', function() {
    $.ajax({
      type: 'POST',
      url: 'index.php?route=payment/cielo_api_credito/pagarPosteriormente&order_id={{pedido_id}}',
      dataType : 'json',

      beforeSend: function() {
          $('#button-confirm-posterior').attr('disabled', true);
          $('.load').css("display","block");

      },
      complete: function() {
          $('#button-confirm-posterior').attr('disabled', false);
          $('.load').css("display","none");
      },
      success: function(json) {
        location = "{{continue}}";
      }
    });

  });

  $('#button-confirm').on('click', function() {
          
          var mesAno = $("#cielo_api_expire").val().split("/");
          var mes = mesAno[0];
          var ano = mesAno[1];

          var cardType = $.payment.cardType($('#cielo_api_creditcard_ccno').val());
          //var data = $('#form-cielo-api-credito').serializeObject();

          var data = $('#form-cielo-api-credito').find('select, textarea, input').serializeObject();

          if (($.payment.validateCardNumber($('#cielo_api_creditcard_ccno').val()))&&
              ($.payment.validateCardCVC($('#cielo_api_creditcard_cccvd').val(), cardType))&&
              ($.payment.validateCardExpiry(mes, ano))) {
              
              data['qtd_parcela'] = $('select[name=formaPagamento] option:selected').data('qtd-parcela');
              if (cardType == 'mastercard'){
                cardType = 'master';
              }  
              data['creditcard_cctype'] = cardType;

              $.ajax({
              type: 'POST',
              url: 'index.php?route=payment/cielo_api_credito/pay_credit_card&order_id={{pedido_id}}',
              data: data,
              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'] == {{ Type_StatusAutorizacao.Tp_Retentativa }} ){
                          notificationMsg('{{ text_erro_retentativa }}', 'warning');
                      } else {
                        $('.cardbox').remove();
                        var
                        button = document.getElementById('button-confirm'),
                        span = document.querySelector('#button-confirm span'),
                        img = document.createElement('img');
                        $("#address_box").remove();
                        if (json['autorizacao'] == {{ Type_StatusAutorizacao.Tp_Autorizada }} ){
                          button.setAttribute('class', button.getAttribute('class').replace(' success', '') + ' success btnGreensuccess');
                          var mensagem = 'Pagamento Aprovado <br><br>'+json['SUCCESS']['MENSAGEM']+'<br>TID - '+json['SUCCESS']['TID'];
                        } else {
                          button.setAttribute('class', button.getAttribute('class').replace(' success', '') + ' success btnOrangesuccess');
                          img.src='data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQwMS45OTkgNDAxLjk5OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAxLjk5OSA0MDEuOTk4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTIzNy41NDMsMzAxLjQ5OWgtNzMuMDkxYy00Ljk1LDAtOS4yMzMsMS44MTEtMTIuODUxLDUuNDI1Yy0zLjYxNSwzLjYxNy01LjQyNCw3Ljg5Ny01LjQyNCwxMi44NDd2NjMuOTUzICAgIGMwLDQuOTQ4LDEuODA5LDkuMjMyLDUuNDI0LDEyLjg1NGMzLjYyMSwzLjYxLDcuOSw1LjQyMSwxMi44NTEsNS40MjFoNzMuMDk3YzQuOTQyLDAsOS4yMjctMS44MTEsMTIuODQ4LTUuNDIxICAgIGMzLjYxLTMuNjIxLDUuNDItNy45MDUsNS40Mi0xMi44NTR2LTYzLjk1M2MwLTQuOTQ5LTEuODEzLTkuMjI5LTUuNDI3LTEyLjg0N0MyNDYuNzczLDMwMy4zMDcsMjQyLjQ4OCwzMDEuNDk5LDIzNy41NDMsMzAxLjQ5OXoiIGZpbGw9IiNmMTdlMjkiLz4KCQk8cGF0aCBkPSJNMjU5LjM4Myw1LjQyNEMyNTUuODYyLDEuODEyLDI1MS42MjgsMCwyNDYuNjc2LDBoLTkxLjM1OWMtNC45NDgsMC05LjE4LDEuODEyLTEyLjcwMyw1LjQyNCAgICBjLTMuNTIxLDMuNjE3LTUuMTg2LDcuOTAyLTQuOTk2LDEyLjg1bDcuOTkyLDIxOS4yNjVjMC4xOSw0Ljk0OCwyLjEzOSw5LjIzNiw1Ljg1MiwxMi44NDdjMy43MTEsMy42MjEsOC4wNDEsNS40MzEsMTIuOTkxLDUuNDMxICAgIGg3My4wOTdjNC45NDIsMCw5LjI3MS0xLjgxLDEyLjk5MS01LjQzMWMzLjcxLTMuNjEsNS42NTMtNy44OTgsNS44NTItMTIuODQ3bDcuOTg3LTIxOS4yNjUgICAgQzI2NC41NzgsMTMuMzI2LDI2Mi45MDUsOS4wNDUsMjU5LjM4Myw1LjQyNHoiIGZpbGw9IiNmMTdlMjkiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K';
                          var mensagem = 'Pagamento Negado <br><br>'+json['SUCCESS']['MENSAGEM']+'<br>TID - '+json['SUCCESS']['TID'];
                        }
                        var imgChild = document.querySelector('#button-confirm img');
                        if (document.querySelectorAll('#button-confirm img').length > 0) {
                          button.removeChild(imgChild);
                        }
                        button.prepend(img);
                        span.innerHTML = mensagem;

                        button.onclick = "";

                      }
                  }else{
                      $('.error').remove();
                      if(json['error']['retorno_api']){
                        notificationMsg('{{text_erro_retorno}}', 'warning');
                        console.log(json['error']['retorno_api']);
                      }
                      if (json['error']['bandeira']){
                          $('#cielo_api_box-bandeiras').after('<span class="text-small text-red error">' + json['error']['bandeira'] + '</span>');
                      }
                      if (json['error']['nomecartao']){
                          $('#cielo_api_creditcard_name').after('<span class="text-small text-red error">' + json['error']['nomecartao'] + '</span>');
                      }
                      if (json['error']['numerocartao']){
                          $('#cielo_api_creditcard_ccno').after('<span class="text-small text-red error">' + json['error']['numerocartao'] + '</span>');
                      }
                      if (json['error']['csv']){
                          $('#cielo_api_creditcard_cccvd').after('<span class="text-small text-red error">' + json['error']['csv'] + '</span>');
                      }
                      if (json['error']['validade']){
                          $('#cielo_api_expire').after('<span class="text-small text-red error">' + json['error']['validade'] + '</span>');
                      }
                  }

              }

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

</body>
</html>
