
<div id="opcao-pagamento" class="credito animated fadeIn">
    <div>
        <div class="panel panel-primary credit-card-box">
            <div class="panel-heading display-table" style="background-color: #FFA500; border-color:#FFA500; " >
                <div class="row display-tr" >
                    <h3 class="panel-title" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cartão de Crédito &nbsp;<i class="fa fa-credit-card" aria-hidden="true"></i></h3>
                </div>
            </div>
            <div class="panel-body">

                <ul class="list-inline">
                    <li><p style="font-size: 11pt;">A sua transação será processada por <a href="https://www.cielo.com.br/" target="_blank" style="color:#757575 !important;"> <li><img src="<?php echo base_url('assets/imagens/cielo-logo.png') ?>" width="40" style="margin-bottom:-5px;"></li></a></p></li>
                </ul>
                <form method="POST" class="form-pagamento" action="<?= base_url('processapagamento') ?>" target="_blank">
                    <div class="row">

                        <div class="col-sm-12">
                            <?php $this->load->view('commons/pagamento/cartao'); ?>
                        </div>

                        <div class="col-md-5 col-sm-12">
                            <div class="form-group">
                                <label for="cardNumber">Número do Cartão</label>
                               
                                    <input type="tel" class="form-control"name="numero_cartao" placeholder="Número do Cartão" autocomplete="cc-number" required autofocus OnKeyPress="formatar('####-####-####-####', this)" maxlength="20"/>
                                
                            </div>                            
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="parcelamento">Parcelas</label>
                                <select class="form-control" id="" name="parcelas">
                                    <?php if (($parcelas) != FALSE) { ?>    
                                        <?php foreach ($parcelas as $parcela => $valor) { ?>
                                            <option value="<?php echo $parcela + 1 ?>"><?php echo $parcela + 1 ?> x <?php echo number_format($valor, 2, ',', '.'); ?></option> 
                                        <?php } ?> 
                                    <?php } else { ?>
                                        <?php foreach ($valores as $valor) { ?>
                                            <option value="1"> 1 x <?php echo number_format($valor->valor, 2, ',', '.'); ?></option>
                                        <?php } ?>  
                                    <?php } ?> 
                                </select>

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-5 col-md-5">
                            <div class="form-group">
                                <label for="validade"><span class="hidden-xs"></span>Validade</label>
                                <input type="tel" class="form-control"name="exp_cartao" placeholder="MM / YY"  required  OnKeyPress="formatar('##/##', this)" maxlength="5" minlength="5"/>

                            </div>
                        </div>
                        <div class="col-xs-7 col-md-7 pull-right">
                            <div class="form-group">
                                <label for="cvc">Código</label>
                                <input type="tel" class="form-control" name="codigo_seguranca" placeholder="Código de Segurança (Geralmente impresso no verso do Cartão. Ex: 495)"  required maxlength="4" minlength="3" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label for="nome">Nome do Portador</label>
                                <input type="text" class="form-control" name="nome_portador" placeholder="Nome do Portador (Igual ao do Cartão)" />
                            </div>
                        </div>                        
                    </div>

                    <div class="row">
                        <div class="col-xs-12">
                            <button class="btn btn-success btn-lg btn-block finaliza" type="submit">Finalizar</button>
                        </div>
                    </div>
                    <div class="row" style="display:none;">
                        <div class="col-xs-12">
                            <p class="payment-errors"></p>
                        </div>
                    </div>
                    <input type="hidden" name="flagOpcaPagamento" value="CartaoCredito" />
                </form>
            </div>
        </div>
    </div>
</div>