<style>
    html{font-size: 15px;}
</style>
<link href="%%GLOBAL_TPL_PATH%%/Assets/css/pagamento.css" rel="stylesheet">
<div id="app-top" class="cf">
    <div class="ph3-ns w-80-ns">
        <div><h1 class="f2 black-70">Pedido Confirmado</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>Pedido {{ NumPedido|safe }} realizado com sucesso.</span>
        			</span>
    				<p class="dark-green"><span>Em breve você receberá um e-mail no endereço</span>&nbsp;
    					<strong class="cconf-client-email">%%GLOBAL_emailCli%%</strong>&nbsp;
    					<span>com todos os detalhes do pedido.</span>
    				</p>
    				<p class="dark-green"><span>Aguardamos a confirmação do pagamento.</span></p>
                    <a href="#" data-toggle="modal" data-target="#myModal%%GLOBAL_NumPedido%%" class="btn btn-success btn-lg" >Enviar Comprovante</a>
    			</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;%%GLOBAL_subtotal%%</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>

                            <div class="cf w-100" style="display: %%GLOBAL_hideRegradesc%%">
                                <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;%%GLOBAL_RegraD%%</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>

                            <div class="cf w-100" style="display: %%GLOBAL_hideCredito%%">
                                <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;%%GLOBAL_credito%%</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>

                            <div class="cf w-100" style="display: %%GLOBAL_hideCupom%%">
                                <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;%%GLOBAL_cupom%%</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>
                            
                            <div class="cf w-100" style="display: %%GLOBAL_hideVale%%">
                                <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;%%GLOBAL_valepres%%</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" style="display: %%GLOBAL_hidDes%%">
                                <div class="dib f6 fw4 gray w-60"><span>Desconto pagamento a vista</span></div><div class="dib f6 fw4 gray w-40 tr"><span>-R$&nbsp;%%GLOBAL_descDep%%</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;%%GLOBAL_entrega%%</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>

                            <div class="cf w-100" style="display: %%GLOBAL_hideTaxaManuseio%%">
                                <div class="dib f6 fw4 gray w-60"><span>Taxa de manuseio</span></div><div class="dib f6 fw4 gray w-40 tr"><span>R$&nbsp;%%GLOBAL_taxamanuseio%%</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;%%GLOBAL_total%%</span></div>
                            </div>
                        </div>
                    </article>
                </div>
        	</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">
                    <center>
                         <button type="button" class="btn btn-danger btn-lg btn-block" style="font-size: 14px;" id="new-board-btn">%%GLOBAL_aviso%%
                    </center>
                    <div class="dib cf w-100 pt4">
                        <div class="cconf-address w-100 fl w-third-l mb3 pr2-ns pr0-s pr0-m">
                            <article class="undefined w-100 fl tl bg-white br1 shadow-00  min-h-13rem">
                                <div class="pa3 black-80 f6 lh-copy">
                                    <h3 class="mid-gray mt1 mb3 tracked-mega lh-solid ttu f6 tl"><span>%%GLOBAL_nomebanco1%%</span></h3>
                                    <div class="address-summary address-summary-BRA">
                                        <span>Agência: %%GLOBAL_agencia1%%</span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_tipoconta1%%: %%GLOBAL_conta1%%</span></span>
                                        <br class="line1-delimiter"><span><span>Favorecido :%%GLOBAL_favorecido1%% </span></span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_obs1%% </span></span>
                                        <br class="line1-delimiter">
                                    </div>                                                                      
                                </div>
                            </article>
                        </div>
                        <div class="cconf-address w-100 fl w-third-l mb3 pr2-ns pr0-s pr0-m" style="display: %%GLOBAL_Hidebanco2%%">
                            <article class="undefined w-100 fl tl bg-white br1 shadow-00  min-h-13rem">
                                <div class="pa3 black-80 f6 lh-copy">
                                    <h3 class="mid-gray mt1 mb3 tracked-mega lh-solid ttu f6 tl"><span>%%GLOBAL_nomebanco2%%</span></h3>
                                    <div class="address-summary address-summary-BRA">
                                        <span>Agência: %%GLOBAL_agencia2%%</span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_tipoconta2%%: %%GLOBAL_conta2%%</span></span>
                                        <br class="line1-delimiter"><span><span>Favorecido :%%GLOBAL_favorecido2%% </span></span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_obs2%% </span></span>
                                        <br class="line1-delimiter">                                  
                                    </div>                                                                      
                                </div>
                            </article>
                        </div>
                        <div class="cconf-address w-100 fl w-third-l mb3 pr2-ns pr0-s pr0-m" style="display: %%GLOBAL_Hidebanco3%%">
                            <article class="undefined w-100 fl tl bg-white br1 shadow-00  min-h-13rem">
                                <div class="pa3 black-80 f6 lh-copy">
                                    <h3 class="mid-gray mt1 mb3 tracked-mega lh-solid ttu f6 tl"><span>%%GLOBAL_nomebanco3%%</span></h3>
                                    <div class="address-summary address-summary-BRA">
                                        <span>Agência: %%GLOBAL_agencia3%%</span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_tipoconta3%%: %%GLOBAL_conta3%%</span></span>
                                        <br class="line1-delimiter"><span><span>Favorecido :%%GLOBAL_favorecido3%% </span></span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_obs3%% </span></span>
                                        <br class="line1-delimiter">                                       
                                    </div>                                                                      
                                </div>
                            </article>
                        </div>
                        <div class="cconf-address w-100 fl w-third-l mb3 pr2-ns pr0-s pr0-m" style="display: %%GLOBAL_Hidebanco4%%">
                            <article class="undefined w-100 fl tl bg-white br1 shadow-00  min-h-13rem">
                                <div class="pa3 black-80 f6 lh-copy">
                                    <h3 class="mid-gray mt1 mb3 tracked-mega lh-solid ttu f6 tl"><span>%%GLOBAL_nomebanco4%%</span></h3>
                                    <div class="address-summary address-summary-BRA">
                                        <span>Agência: %%GLOBAL_agencia4%%</span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_tipoconta4%%: %%GLOBAL_conta4%%</span></span>
                                        <br class="line1-delimiter"><span><span>Favorecido :%%GLOBAL_favorecido4%% </span></span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_obs4%% </span></span>
                                        <br class="line1-delimiter">    
                                    </div>                                                                      
                                </div>
                            </article>
                        </div>
                        <div class="cconf-address w-100 fl w-third-l mb3 pr2-ns pr0-s pr0-m" style="display: %%GLOBAL_Hidebanco5%%">
                            <article class="undefined w-100 fl tl bg-white br1 shadow-00  min-h-13rem">
                                <div class="pa3 black-80 f6 lh-copy">
                                    <h3 class="mid-gray mt1 mb3 tracked-mega lh-solid ttu f6 tl"><span>%%GLOBAL_nomebanco5%%</span></h3>
                                    <div class="address-summary address-summary-BRA">
                                        <span>Agência: %%GLOBAL_agencia5%%</span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_tipoconta5%%: %%GLOBAL_conta5%%</span></span>
                                        <br class="line1-delimiter"><span><span>Favorecido :%%GLOBAL_favorecido5%% </span></span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_obs5%% </span></span>
                                        <br class="line1-delimiter"> 
                                    </div>                                                                      
                                </div>
                            </article>
                        </div>
                        <div class="cconf-address w-100 fl w-third-l mb3 pr2-ns pr0-s pr0-m" style="display: %%GLOBAL_Hidebanco6%%">
                            <article class="undefined w-100 fl tl bg-white br1 shadow-00  min-h-13rem">
                                <div class="pa3 black-80 f6 lh-copy">
                                    <h3 class="mid-gray mt1 mb3 tracked-mega lh-solid ttu f6 tl"><span>%%GLOBAL_nomebanco6%%</span></h3>
                                    <div class="address-summary address-summary-BRA">
                                        <span>Agência: %%GLOBAL_agencia6%%</span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_tipoconta6%%: %%GLOBAL_conta6%%</span></span>
                                        <br class="line1-delimiter"><span><span>Favorecido :%%GLOBAL_favorecido6%% </span></span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_obs6%% </span></span>
                                        <br class="line1-delimiter">
                                    </div>                                                                      
                                </div>
                            </article>
                        </div>
                        <div class="cconf-address w-100 fl w-third-l mb3 pr2-ns pr0-s pr0-m" style="display: %%GLOBAL_Hidebanco7%%">
                            <article class="undefined w-100 fl tl bg-white br1 shadow-00  min-h-13rem">
                                <div class="pa3 black-80 f6 lh-copy">
                                    <h3 class="mid-gray mt1 mb3 tracked-mega lh-solid ttu f6 tl"><span>%%GLOBAL_nomebanco7%%</span></h3>
                                    <div class="address-summary address-summary-BRA">
                                        <span>Agência: %%GLOBAL_agencia7%%</span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_tipoconta7%%: %%GLOBAL_conta7%%</span></span>
                                        <br class="line1-delimiter"><span><span>Favorecido :%%GLOBAL_favorecido7%% </span></span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_obs7%% </span></span>
                                        <br class="line1-delimiter">
                                    </div>                                                                      
                                </div>
                            </article>
                        </div>
                        <div class="cconf-address w-100 fl w-third-l mb3 pr2-ns pr0-s pr0-m" style="display: %%GLOBAL_Hidebanco8%%">
                            <article class="undefined w-100 fl tl bg-white br1 shadow-00  min-h-13rem">
                                <div class="pa3 black-80 f6 lh-copy">
                                    <h3 class="mid-gray mt1 mb3 tracked-mega lh-solid ttu f6 tl"><span>%%GLOBAL_nomebanco8%%</span></h3>
                                    <div class="address-summary address-summary-BRA">
                                        <span>Agência: %%GLOBAL_agencia8%%</span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_tipoconta8%%: %%GLOBAL_conta8%%</span></span>
                                        <br class="line1-delimiter"><span><span>Favorecido :%%GLOBAL_favorecido68%% </span></span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_obs8%% </span></span>
                                        <br class="line1-delimiter">
                                    </div>                                                                      
                                </div>
                            </article>
                        </div>
                        <div class="cconf-address w-100 fl w-third-l mb3 pr2-ns pr0-s pr0-m" style="display: %%GLOBAL_Hidebanco9%%">
                            <article class="undefined w-100 fl tl bg-white br1 shadow-00  min-h-13rem">
                                <div class="pa3 black-80 f6 lh-copy">
                                    <h3 class="mid-gray mt1 mb3 tracked-mega lh-solid ttu f6 tl"><span>%%GLOBAL_nomebanco9%%</span></h3>
                                    <div class="address-summary address-summary-BRA">
                                        <span>Agência: %%GLOBAL_agencia9%%</span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_tipoconta9%%: %%GLOBAL_conta9%%</span></span>
                                        <br class="line1-delimiter"><span><span>Favorecido :%%GLOBAL_favorecido9%% </span></span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_obs9%% </span></span>
                                        <br class="line1-delimiter">
                                    </div>                                                                      
                                </div>
                            </article>
                        </div>
                        <div class="cconf-address w-100 fl w-third-l mb3 pr2-ns pr0-s pr0-m" style="display: %%GLOBAL_Hidebanco10%%">
                            <article class="undefined w-100 fl tl bg-white br1 shadow-00  min-h-13rem">
                                <div class="pa3 black-80 f6 lh-copy">
                                    <h3 class="mid-gray mt1 mb3 tracked-mega lh-solid ttu f6 tl"><span>%%GLOBAL_nomebanco10%%</span></h3>
                                    <div class="address-summary address-summary-BRA">
                                        <span>Agência: %%GLOBAL_agencia10%%</span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_tipoconta10%%: %%GLOBAL_conta10%%</span></span>
                                        <br class="line1-delimiter"><span><span>Favorecido :%%GLOBAL_favorecido10%% </span></span>
                                        <br class="line1-delimiter"><span><span>%%GLOBAL_obs10%% </span></span>
                                        <br class="line1-delimiter">
                                    </div>                                                                      
                                </div>
                            </article>
                        </div>
                    </div>
                </span>            		
            </div>
        </div>
    </div>   
</div>
<div class="ph3-ns w-80-ns db" style="display: %%GLOBAL_hidDes%%">
    %%GLOBAL_mgdes%%
</div>


<div class="modal fade" id="myModal%%GLOBAL_NumPedido%%" 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">Enviar Comprovante de Depósito</h4>
            </div>

            <div class="modal-body">
                <div class="form-group">
                    <label>Escolha o Arquivo: ( Somente: .JPG .GIF .PNG ou .PDF )</label>
                    <form id="form%%GLOBAL_NumPedido%%" action="%%GLOBAL_ShopPath%%/lib/enviarComp.php" enctype="multipart/form-data" method="POST">
                        <input type="hidden" value="%%GLOBAL_NumPedido%%" name="id" />
                        <input type="file" id="%%GLOBAL_NumPedido%%" name="arquivo"  required/>

                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button id="send%%GLOBAL_NumPedido%%" type="submit" class="btn btn-primary">Enviar Comprovante</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $('#send%%GLOBAL_NumPedido%%').bind("click", function () {
            var imgVal = $('[type=file]').val();
            if (imgVal == '') {
                return false;
            }
        });
    });
</script>

<script>
    $(document).ready(function(){
        $('.comprovante%%GLOBAL_NumPedido%%').click(function(){
            $('#comprovante%%GLOBAL_NumPedido%%').modal('show')
        });
        $('#send%%GLOBAL_NumPedido%%').click(function(){
            $('.sendConteudo').addClass('loading');
            $('#form%%GLOBAL_NumPedido%%').submit();
        });
    });
</script>