<style>

    .panel-group .panel {

        border: 0 none;

        border-radius: 4px;

        margin-bottom: 0;

    }



    .panel-group {

        padding: 10px;   

    }

</style>

<div class="row">

    <div class="col-md-8">



        <h1>Pedido</h1>

        <div class="col-md-12">

            <div class="panel panel-default">

                <div class="panel-heading">Descri&ccedil;&atilde;o:</div>

                <div class="panel-body">

                    <ul class="list-group">

                        <li class="list-group-item">Tipo: Envio de certificado impresso</li>
                        <!-- 39,99 -->
                        <li class="list-group-item">Valor: R$<?=$total = '39,99';?> </li>

                    </ul>



                    <div class="form-group">

                        <label for="Valor">Escolha a Forma de pagamento</label>   



                        <div class="radio">

                            <span data-toggle="collapse" data-parent="#accordion" href="#boleto" aria-expanded="true" aria-controls="collapseOne" class="btn btn-default">

                                <i class="glyphicon glyphicon-barcode"></i>Boleto

                            </span>

                            <span class="collapsed btn btn-warning" role="button" data-toggle="collapse" data-parent="#accordion" href="#cartao" aria-expanded="false" aria-controls="collapseTwo">

                                <i class="glyphicon glyphicon-credit-card"></i>Cr&eacute;dito

                            </span>

                        </div>

                    </div>

                </div>

                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                    <div class="panel panel-default">

                        <div id="boleto" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

                            <div class="panel-body">

                                <form action="<?= base_url('PaymentApi/gerarPagamentoCertificado') ?>" method="post" id="formulario">



                                    <div class="form-group">

                                        <label for="Identidade">CPF:</label>

                                        <input name="identidade_cpf" id="identidade_cpf" onKeyPress="formataCampo(identidade_cpf, '000.000.000-00', event);" autocomplete="off" maxlength="14" type="text" class="form-control" required>

                                    </div>

                                    <input name="Valor" id="Valor" value="<?= $total ?>" type="hidden">

                                    <input type="hidden" name="Forma" value="BOLETO"/>

                                    <input type="submit" id="finalizar_cpf" class="btn btn-success" value="Finalizar">

                                </form>

                            </div>

                        </div>

                    </div>

                    <div class="panel panel-default">

                        <div id="cartao" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

                            <div class="panel-body">



                                <form action="<?= base_url('PaymentApi/gerarPagamentoCertificado') ?>" method="post" id="formulario">

                                    <div class="form-group">

                                        <label for="cartao">Cart&atilde;o de Cr&eacute;dito: </label>

                                        <hr>    

                                        <label class="radio-inline">

                                            <input name="Forma" id="Forma" value="VISA" required="" type="radio">

                                            <img src="<?= base_url("assets/img/card")?>/visa.jpg">

                                        </label>    

                                            <label class="radio-inline">

                                            <input name="Forma" id="Forma" value="MASTERCARD" required="" type="radio">

                                            <img src="<?= base_url("assets/img/card")?>/master.jpg">

                                        </label>

                                        <label class="radio-inline">    

                                            <input name="Forma" id="Forma" value="AMERICAN" required="" type="radio">

                                            <img src="<?= base_url("assets/img/card")?>/america.jpg">

                                        </label>    

                                        <label class="radio-inline">    

                                            <input name="Forma" id="Forma" value="DINERS" required="" type="radio">

                                            <img src="<?= base_url("assets/img/card")?>/diners.jpg">

                                        </label>    

                                        <label class="radio-inline">    

                                            <input name="Forma" id="Forma" value="HIPER" required="" type="radio">

                                            <img src="<?= base_url("assets/img/card")?>/hipercard.jpg" >

                                        </label>    

                                        <label class="radio-inline">

                                            <input name="Forma" id="Forma" value="ELO" required="" type="radio">

                                            <img src="<?= base_url("assets/img/card")?>/logo_elo.jpg">

                                        </label>    

                                        <label class="radio-inline">    

                                            <input name="Forma" id="Forma" value="AURA" required="" type="radio">

                                            <img src="<?= base_url("assets/img/card")?>/Aura.jpg">

                                        </label>    

                                    </div>    
                                    <!--
                                    <div class="form-group">

                                        <label for="cartao">Cart&atilde;o de Cr&eacute;dito: </label>

                                        <hr>    

                                        <label class="radio-inline">

                                            <input name="Forma" id="Forma" value="1" required="" type="radio">

                                            <img src="http://cidadeaprendizagem.com.br/interfaces/administracao/dev2/images/visa.jpg">

                                        </label>    

                                            <label class="radio-inline">

                                            <input name="Forma" id="Forma" value="2" required="" type="radio">

                                            <img src="http://cidadeaprendizagem.com.br/interfaces/administracao/dev2/images/master.jpg">

                                        </label>

                                        <label class="radio-inline">    

                                            <input name="Forma" id="Forma" value="37" required="" type="radio">

                                            <img src="http://cidadeaprendizagem.com.br/interfaces/administracao/dev2/images/america.jpg" height="30">

                                        </label>    

                                        <label class="radio-inline">    

                                            <input name="Forma" id="Forma" value="55" required="" type="radio">

                                            <img src="http://cidadeaprendizagem.com.br/interfaces/administracao/dev2/images/diners.jpg" height="40">

                                        </label>    

                                        <label class="radio-inline">    

                                            <input name="Forma" id="Forma" value="56" required="" type="radio">

                                            <img src="http://cidadeaprendizagem.com.br/interfaces/administracao/dev2/images/hipercard.jpg" height="30">

                                        </label>    

                                        <label class="radio-inline">

                                            <input name="Forma" id="Forma" value="63" required="" type="radio">

                                            <img src="http://cidadeaprendizagem.com.br/interfaces/administracao/dev2/images/logo_elo.png" height="30">

                                        </label>    

                                        <label class="radio-inline">    

                                            <input name="Forma" id="Forma" value="45" required="" type="radio">

                                            <img src="http://cidadeaprendizagem.com.br/interfaces/administracao/dev2/images/Aura.png" height="30">

                                        </label>    

                                    </div>-->



                            </div>



                            <label for="cartao">Tipo: </label>



                            <select name="TipoCartao" id="TipoCartao" class="form-control">

                                <option value="Parcelado">Cr&eacute;dito</option>

                            </select>



                            <br />



                            <label for="cartao">Parcelas:<a href='javascript://' onClick="window.open('https://www.bcash.com.br/site/calcula_parcelamento_cliente.php?valor=<?=$total?>&key=1604834&nmp=5','', 'top=110,left=180,width=430,height=340,maximize=no,toolbar=no, location=no,status=no,menubar=no,scrollbars=auto,scrolling=yes,resizable=no');"  style="margin-left:20px; color: #FF0000;">Simulador de Parcelas</a></label>



                            <select name="Parcelas" id="Parcelas" class="form-control">

                                <option value="1" selected="selected">1x</option>

                                <option value="2">2x</option>

                                <option value="3">3x</option>

                                <option value="4">4x</option>

                                <option value="5">5x</option>



                            </select>

                            <br />



                            <div class="form-group">

                                <label for="CartaoNumero">N&uacute;mero do Cart&atilde;o:</label>

                                <input name="CartaoNumero" autocomplete="off"  id="CartaoNumero" minlength="16" maxlength="22" type="text" class="form-control" required>

                            </div>  



                            <div class="form-group">

                                <label for="NomePortador">Nome do Portador (Igual ao do Cart&atilde;o):</label>

                                <input name="NomePortador" id="NomePortador" autocomplete="off" type="text" class="form-control" required> 

                            </div>



                            <div class="form-group">

                                <label for="Expiracao">Validade (Ex: 08/15):</label>

                                <input name="Expiracao" id="Expiracao"  data-mask="99/99" autocomplete="off" maxlength="7" type="text" class="form-control" required> 

                            </div>



                            <div class="form-group">

                                <label for="CodigoSeguranca">C&oacute;digo de Seguran&ccedil;a (Geralmente impresso no verso do Cart&atilde;o. Ex:495):</label>

                                <input name="CodigoSeguranca" id="CodigoSeguranca" autocomplete="off" maxlength="4" type="text" class="form-control" required>

                            </div>



                            <div class="form-group">

                                <label for="DataNascimento">Data de Nascimento:</label>

                                <input name="DataNascimento" id="DataNascimento"  data-mask="99/99/9999" autocomplete="off" maxlength="10" type="text" class="form-control" required>

                            </div>



                            <div class="form-group">

                                <label for="Identidade">CPF:</label>

                                <input name="identidade_credito" id="identidade_credito" onKeyPress="formataCampo(identidade_credito, '000.000.000-00', event);" autocomplete="off" maxlength="14" type="text" class="form-control" required>

                            </div>



                            <input name="Valor" id="Valor" value="<?= $total ?>" type="hidden">

                            <input type="submit" id="finalizar_credido" class="btn btn-success" value="Finalizar">

                            </form>



                        </div>

                    </div>

                </div>



            </div>



        </div>







    </div>



</div>
<script>
   $("#finalizar_cpf").click(function(){
      var cpf = $("#identidade_cpf").val().replace(/[.-]/g,'');
      
      $("input#identidade_cpf.form-control").val(cpf);
    });
    
    $("#finalizar_credido").click(function(){
      var cpf = $("#identidade_credito").val().replace(/[.-]/g,'');
      
      $("input#identidade_credito.form-control").val(cpf);
    });
</script>