<div data-b2c-valores-checkout-mobile onclick="$(this).find('.box-resumo').toggleClass('open', 200)"></div>

{% block head %}
    <meta name="cs:page" content="checkout">


    {% if getJsScripts().GoogleReCaptcha.stAtivo == true %}
        <script>
            function onloadGRE() {
                B2C.scripts.GReCaptcha.onLoad();
            }
        </script>
        <script src="https://www.google.com/recaptcha/api.js?onload=onloadGRE&render=explicit"></script>
    {% endif %}
{% endblock %}

<style>
    .checkout-animation-1 {
        height: 22px;
        width: 100%;
        border-radius: 24px;
        margin-bottom: 10px;
    }

    .checkout-animation-2 {
        height: 34px;
        width: 100%;
        border-radius: 24px;
        margin-bottom: 10px;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-lg-8 p0">
            <a href="#" class="btn-resumo" onclick="$('.box-sidebar').slideToggle();return false;">
                {{ __('verResumo') }}
            </a>
        </div>
    </div>
    <div class="page-checkout">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-lg-8 p0">
                <p class="promo">
                    {{ __('osPrecosPodemSubirEmBreve') }}
                </p>
            </div>
            <div class="col-md-12 col-sm-12 col-lg-8 p0">

                <div data-b2c-form-checkout>
                    <div class="box">
                        <div data-b2c-checkout-nomes></div>

                        <div>
                            <hr>
                            <h1>{{ __('dadosParaEnvioDeSeuVoucher') }}</h1>
                            <form>
                                <div class="row">
                                    <div class="col-md-6 col-12">
                                        <label for="">{{ __('email') }} <span>*</span>
                                        </label>
                                        <input placeholder="" data-b2c-input="email">
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <label for="">{{ __('confirmarEmail') }} <span>*</span>
                                        </label>
                                        <input placeholder="" data-b2c-input="confirmar-email">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="box" data-b2c-form-cupom-checkout>
                        <div>
                            <form style="margin: 0;">
                                <div class="row align-items-center">
                                    <div class="col-md-6 col-12">
                                        <label for="">{{ __('possuiCupom') }}</label>
                                        <input placeholder="{{ __('codigo') }}" data-b2c-input="nrCupom">
                                    </div>
                                    <div class="col-md-3 col-12">
                                        <button class="button" data-b2c-btn-cupom
                                                style="margin-top: 25px;">{{ __('aplicar') }}
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="box">
                        <div data-b2c-checkout-pagamentos></div>
                    </div>

                    <div class="box">
                        <div data-b2c-form-dados-pagador>
                            <div data-b2c-primeiro-pagador data-b2c-pagador data-b2c-selected="true"
                                 style="position: relative;">
                                <h1>{{ __('dadosDoPagante') }}</h1>
                                <span class="filter-unic-pagto"
                                      style="position: absolute;top: 3px;right: 0;display:none"
                                      data-b2c-mesmo-pagador>
                                <span class="filter-tags">
                                    <input id="check-unic" type="checkbox" name="unicoPagador"
                                           data-b2c-input="mesmoPagador">
                                    <label for="check-unic">{{ __('unicoPagador') }}</label>
                                </span>
                            </span>
                                {% include 'checkout/includes/formPagador.twig' %}
                            </div>
                            <div data-b2c-segundo-pagador data-b2c-pagador data-b2c-selected="false"
                                 style="display: none">
                                <h1>{{ __('dadosDoSegundoPagante') }}</h1>
                                {% include 'checkout/includes/formPagador.twig' %}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12" style="display: flex;justify-content: space-between;flex-direction: row;width: 100%;align-items: center;vertical-align: middle;border-top: 1px solid #eee;border-bottom: 1px solid #eee;margin-top: 20px;">
                                <div data-b2c-checkout-termos></div>
                                <div>
                                    <div data-b2c-captcha></div>
                                    <span data-b2c-captcha-message style="margin-left:100px;color:red;display: none" />
                                </div>
                            </div>
                            <div class="col-md-8 msg-alert">
                                <p>
                                    {{ __('antesDeFinalizarACompraVerifiqueOsDadosInseridos') }}
                                </p>
                            </div>
                            <div class="col-md-4">
                                <button class="button" data-b2c-btn-submit>{{ __('comprar') }}</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div data-b2c-form-checkout-paypal style="display: none;">
                    <div class="box">
                        <h1 style="margin-bottom: 15px;">{{ __('preenchaOsDadosDoCartaoDeCredito') }}</h1>
                        <div class="iframePayPalDiv">
                            <div data-b2c-loading-iframe-template hidden>
                                <div class="row" style="padding: 0 15px 0 15px;">

                                    <div class="col-md-2 offset-md-10 animated-background checkout-animation-1"></div>
                                    <div class="col-md-12 animated-background checkout-animation-2"></div>
                                    <div class="col-md-12 animated-background checkout-animation-2"></div>
                                    <div class="col-md-12 animated-background checkout-animation-2"></div>
                                </div>
                            </div>

                            <div id="paypal-component-container"></div>

                        </div>
                        <div class="col-md-4 offset-md-8">
                            <button class="button" data-b2c-btn-continue=""
                                    onclick="B2C.paypal.confirmaPagto();return false;

                                    ">
                                {{ __('comprar') }}
                            </button>
                        </div>
                    </div>
                </div>

                <div data-b2c-form-checkout-adyen style="display: none;">
                    <div class="box">
                        <h1 style="margin-bottom: 15px;">{{ __('preenchaOsDadosDoCartaoDeCredito') }}</h1>
                        <div class="iframeAdyenDiv">
                            <div data-b2c-loading-iframe-template hidden>
                                <div class="row" style="padding: 0 15px 0 15px;">

                                    <div class="col-md-2 offset-md-10 animated-background checkout-animation-1"></div>
                                    <div class="col-md-12 animated-background checkout-animation-2"></div>
                                    <div class="col-md-12 animated-background checkout-animation-2"></div>
                                    <div class="col-md-12 animated-background checkout-animation-2"></div>
                                </div>
                            </div>
                            <div class="adyen-component-container"></div>
                        </div>
                    </div>
                </div>

                <div data-b2c-form-cielo-3ds>
                    <input type="hidden" name="authEnabled" class="bpmpi_auth" value="true"/>
                    <input type="hidden" name="accessToken" class="bpmpi_accesstoken"/>
                    <input type="hidden" name="bpmpi_totalamount" class="bpmpi_totalamount"/>
                    <input type="hidden" name="bpmpi_ordernumber" class="bpmpi_ordernumber"/>
                    <input type="hidden" name="bpmpi_currency" class="bpmpi_currency"/>

                    <input type="hidden" name="bpmpi_paymentmethod" class="bpmpi_paymentmethod" value="credit"/>

                    <input type="hidden" name="bpmpi_cart_1_name" class="bpmpi_cart_1_name"/>
                    <input type="hidden" name="bpmpi_cart_1_unitprice" class="bpmpi_cart_1_unitprice"/>

                    <input type="hidden" name="bpmpi_merchant_url" class="bpmpi_merchant_url"
                           value="{{ getSiteDominio() }}"/>
                    <input type="hidden" name="bpmpi_order_productcode" class="bpmpi_order_productcode" value="PHY"/>


                    {# Nr cartão #}
                    <input type="hidden" class="bpmpi_cardnumber">
                    {# Parcelas #}
                    <input type="hidden" class="bpmpi_installments">
                    {# Mes Cartao #}
                    <input type="hidden" class="bpmpi_cardexpirationmonth">
                    {# Ano Cartao #}
                    <input type="hidden" class="bpmpi_cardexpirationyear">
                    <input type="hidden" class="bpmpi_cardsecuritycode">
                    <input type="hidden" class="bpmpi_cardbrand">

                    {# Pagador Nome #}
                    <input type="hidden" class="bpmpi_billto_contactname">
                    {# Pagador Telefone #}
                    <input type="hidden" class="bpmpi_billto_phonenumber">
                    {# Pagador E-mail #}
                    <input type="hidden" class="bpmpi_billto_email">
                    {# Pagador Endereco 1 #}
                    <input type="hidden" class="bpmpi_billto_street1">
                    {# Pagador Endereco linha 2 #}
                    <input type="hidden" class="bpmpi_billto_street2">
                    {# Pagador Cidade #}
                    <input type="hidden" class="bpmpi_billto_city">
                    {# Pagador Cidade #}
                    <input type="hidden" class="bpmpi_billto_state">
                    {# Pagador sgPais #}
                    <input type="hidden" class="bpmpi_billto_country">
                    {# Pagador cep #}
                    <input type="hidden" class="bpmpi_billto_zipcode">

                    <input type="hidden" class="bpmpi_billto_street">
                    <input type="hidden" class="bpmpi_billto_street_number">
                    <input type="hidden" class="bpmpi_billto_documentnumber">
                    <input type="hidden" class="bpmpi_billto_birthdate">
                    <input type="hidden" class="bpmpi_billto_complement">

                </div>

            </div>

            <div class="col-md-12 col-sm-12 col-lg-4">
                {% include 'components/Sidebar/sidebar.twig' %}
            </div>
        </div>
    </div>

    {% include 'components/Checkout/Nomes.twig' %}
    {% include 'components/Checkout/Pagamentos.twig' %}
    {% include 'components/Checkout/Termos.twig' %}
</div>
