<style>
    html{font-size: 15px;}
    #point-camera {
    display: inline-flex;
    padding-top: 26px;
    .tip-img-div {
    width: 50%;
    }
    .payment-code-text {
    color: #716d6d;
    padding-bottom: 8px;
    padding-top: 8px;
}
}
</style>
<link href="{{ TPL_PATH|safe }}/Assets/css/pagamento.css" rel="stylesheet">
<div style="display:{{ HidePagamento|safe }}">
    <div id="app-top" class="cf">
        <div class="ph3-ns w-80-ns">
            <div><h1 class="f2 black-70">Pedido {{ NumPedido|safe }} realizado com sucesso.</h1></div>
            <div class="cf br3 pa4 cconf-alert bg-washed-green ba b--green solid">
        		<div class="fl w-100 w-50-ns" style="overflow-wrap: break-word;">
        			<span class="db f4 fw6 mb4 dark-green">
                        <span>Pague com PicPay</span>
        			</span>
                    <div class="visible-xs">
                        <span class="f6 link dim br1 ph3 pv2 mb2 dib white bg-green"><a style="color: #fff;" href='{{ paymentUrl|safe }}'> Clique Aqui para pagar </a>
                        </span>
                    </div>

                    <div class="visible-lg">
        				<p class="dark-green"><!-- <span>Pague com PicPay</span>&nbsp; -->
        					<span>Abra o PicPay em seu telefone e escaneie o código abaixo:</span>
        				</p>
        				<div class="dark-green">
                            <center><p><span><img src="{{ qrcode|safe }}" style="width:184px;"></span></p></center>
                            <center>
                                <span class="db f4 fw6 mb4 dark-green">
                                    <a style="color: #137752;font-size: 14px;" href="#" data-toggle="modal" data-target="#duvida" ><span>Como faço para escanear ?</span></a>
                                    
                                </span>
                            </center>
                           <span>Não tem conta no PicPay? <span class="f6 link dim br1 ph3 pv2 mb2 dib white bg-green"><a style="color: #fff;" target="_blank" href='https://www.picpay.com/site/download'> Baixe o app gratuitamente</a></span></span>
                        </div>
                    </div>
    			</div>
    			<div class="fl w-100 w-50-ns" >
                    <article class="undefined w-100 fl tl bg-white br1 shadow-00  min-h-14rem">
                        <div class="pa3 black-80 f6 lh-copy">
                            <h3 class="mid-gray mt1 mb3 tracked-mega lh-solid ttu f6 tl"><span>Resumo</span></h3>
                            <div class="cf w-100">
                                <div class="dib f6 fw4 gray w-60"><span>Subtotal</span></div><div class="dib f6 fw4 gray w-40 tr"><span>R$&nbsp;{{ subtotal|safe }}</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>
                            <div class="cf w-100" style="display: {{ hideRegradesc|safe }}">
                                <div class="dib f6 fw4 gray w-60"><span>Descontos Extras</span></div><div class="dib f6 fw4 gray w-40 tr"><span>-R$&nbsp;{{ RegraD|safe }}</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>
                            <div class="cf w-100" style="display: {{ hideCredito|safe }}">
                                <div class="dib f6 fw4 gray w-60"><span>Crédito na loja</span></div><div class="dib f6 fw4 gray w-40 tr"><span>-R$&nbsp;{{ credito|safe }}</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>
                            <div class="cf w-100" style="display: {{ hideCupom|safe }}">
                                <div class="dib f6 fw4 gray w-60"><span>Cupom de desconto</span></div><div class="dib f6 fw4 gray w-40 tr"><span>-R$&nbsp;{{ cupom|safe }}</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>
                            <div class="cf w-100" style="display: {{ hideVale|safe }}">
                                <div class="dib f6 fw4 gray w-60"><span>Vale Presente</span></div><div class="dib f6 fw4 gray w-40 tr"><span>-R$&nbsp;{{ valepres|safe }}</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>
                            <div class="cf w-100" style="display: %%GLOBAL_hideEmbalagem%%">
                                <div class="dib f6 fw4 gray w-60"><span>Embalagem para presente</span></div><div class="dib f6 fw4 gray w-40 tr"><span>+R$&nbsp;%%GLOBAL_ValEmabalagem%%</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>
                            <div class="cf w-100">
                                <div class="dib f6 fw4 gray w-60"><span>Entrega</span></div><div class="dib f6 fw4 gray w-40 tr"><span>R$&nbsp;{{ entrega|safe }}</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>
                            <div class="cf w-100 mb4">
                                <div class="dib fl f6 fw5 mid-gray w-50"><span>Total</span></div><div class="dib fr f6 fw5 mid-gray w-50 tr"><span>R$&nbsp;{{ total|safe }}</span></div>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>
    <div id="app-container" class="cf">
        <div class="ph3-ns w-80-ns db">
        	<div class="pt4">
        		<!-- <div class="w-100 fl pa2 pl0">
                    <span class="db f4 mb4 dark-green">
                        <button type="button" class="btn btn-danger btn-lg btn-block" style="font-size: 14px;" id="new-board-btn">
                            <strong>IMPORTANTE:</strong> O prazo máximo de pagamento para esse boleto é até dia <b>{{ data_venc|safe }}</b><br>
                            Evite esperar até a data de vencimento para realizar o seu pagamento,Os pedidos só serão postados após a compensação de pagamento.<br>
                            Por tanto quanto mais cedo pagar,mais cedo seu pedido será postado<br><br><b>
                            Após o dia {{ data_venc|safe }} reservamos no direito de cancelar seu pedido e os produtos retornarem ao estoque.<br>
                            Faltam apenas ({{ prazo|safe }}) dias para que você realize o pagamento</b><center><br>{{ mgdes|safe }}</center>
                        </button>
                    </span>            		
                </div> -->
                 <a class="cconf-myorders-button hover-no-underline fr dib ml3 mb2 dib w-20-l w-100 ba link tc pv3 pv2-l ph3 br2 f6 fw4 mid-gray bg-near-white hover-bg-moon-gray b--light-silver" href="{{ ShopPath|safe }}/account.php?action=order_status"><span>Ir para meus pedidos</span></a>
                        <a class="cconf-continue-button hover-no-underline fr dib ml3 mb2 dib w-20-l w-100 ba link tc pv3 pv2-l ph3 br2 f6 fw4 mid-gray bg-near-white hover-bg-moon-gray b--light-silver" href="{{ ShopPath|safe }}"><span>Realizar nova compra</span></a>
            </div>
        </div>   
    </div>
</div>

<!-- erro ao gerar boleto -->
<div id="app-container" class="cf" style="display:{{ msghide|safe }}">
    <div class="ph3-ns w-90-ns db">
     <br>
            <div class="w-100 fl pa2 pl0">
                <span class="db f4 mb4 dark-green">
                    <center>
                        <button type="button" class="btn btn-danger btn-lg btn-block" style="font-size: 14px;" id="new-board-btn">
                            {{ mserro|safe }}<br><br>
                             <a  style="color: #FFF;" href="{{ ShopPath|safe }}/account.php?action=reorder&order_id={{ NumPedido|safe }}"><span>Clique Aqui realizar nova compra e assim corringir o erro informado acima</span></a>
                        </button>

                    </center>
                </span>                 
            </div>
       
    </div>   
</div>

<div class="modal fade" id="duvida" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title" id="myModalLabel"><strong>Como escanear um código no PicPay</strong></h4>
            </div>
            <div class="modal-body">
                <div id="point-camera" align="center">
                            <div class="tip-img-div" align="center">
                                <img class="tip-img" src="https://app.picpay.com/images/tips/img_qr_home.png">
                                <p class="payment-code-text">Abra o PicPay e <b>toque no ícone do código</b> na barra superior</p>
                            </div>
                            <div class="tip-img-div" align="center">
                                <img class="tip-img" src="https://app.picpay.com/images/tips/img_qr-scanner.png">
                                <p class="payment-code-text"><b>Aponte a câmera para o código</b> e continue seu pagamento</p>
                            </div>
                    </div>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" aria-label="Close" class="btn btn-primary">ENTENDI</button>
            </div>
        </div>
    </div>
</div>