@if ($errors->any())
    <ul class="alert alert-danger">
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
@endif
<div class="row">
    <div class="col-md-12">                
        <div class="tabbable-line boxless tabbable-reversed">
            <div class="tab-pane" id="tab_1">
                <div class="portlet box blue-steel">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-file-text"></i>Edição da recorrencia: {{ $listar->rsocial_nome }} 
                        </div>
                        <div class="tools">
                            <div class="btn-group pull-right">
                                <a class="btn red-mint btn-xs" title="Fechar" onclick="DesativarEdit();"><span class="glyphicon glyphicon-remove" aria-hidden="true"/></a>
                            </div>
                        </div>
                    </div>
                    <div class="portlet-body form">
                        <!-- BEGIN FORM-->
                        {!! Form::model($listar, [
                            'method' => 'PUT',
                            'route' => ['vendas_recorrenciasEditargo', $listar->id],
                            'class' => 'horizontal-form'
                        ]) !!}
                        <div class="form-body">
                            <h3 class="form-section" ><label>Plano de Recorrência Mensal - Valor: </label> <label id="descricao_assinatura">{{number_format($config->valor_recorrencia,2,',','.')}} R$</label></h3>
                            <button type="button" class="btn green-meadow" onclick="assinarPlano();" id="editar_dados_financeiros"><i class="fa fa-edit"></i> Alterar Dados Financeiros</button>
                            <div class="clearboth" style="display: none;" id="div_dados_pagamento">
                                <input id="cliente_id" name="cliente_id" type="hidden" required placeholder="Id" value="{{$listar->id}}">
                                <input id="session_id" name="session_id" type="hidden" required placeholder="Id da Session">
                                <input id="indentificador_comprador" name="indentificador_comprador" type="hidden" required placeholder="Identificador do Comprador">
                                <input id="tokenPagamentoCartao" name="tokenPagamentoCartao" type="hidden" required placeholder="Token de Pagamento">
                                <h3 class="form-section">Dados do Titular do Cartão</h3>
                                <div class="col-md-5">
                                    <div class="form-group {{ $errors->has('nome') ? 'has-error' : ''}}">
                                        {!! Form::label('nome_titular', 'Nome do Titular (Obs: Conforme descrito no cartão)') !!}
                                        <input class="form-control" id="nome_titular" name="nome_cartao" required type="text" placeholder="Nome do Titular do Cartão">
                                        {!! $errors->first('nome_titular', '<p class="help-block">:message</p>') !!}
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    {!! Form::label('cpf_cartao', 'CPF do Titular', ['class' => 'control-label', 'id'=>'cpf_cartao']) !!}
                                    <div class="form-group {{ $errors->has('cpf_cartao') ? 'has-error' : ''}}">
                                        {!! Form::text('cpf_cartao', null, ['class' => 'form-control', 'placeholder'=>'CPF', 'required','maxlength' => '14', 'OnKeyPress' => 'formatar("###.###.###-##", this); return SomenteNumero(event);']) !!}
                                        {!! $errors->first('cpf_cartao', '<p class="help-block">:message</p>') !!}
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    {!! Form::label('nasc_cartao', 'Data Nasc. do Titular', ['class' => 'control-label']) !!}
                                    <div class="form-group {{ $errors->has('nasc_cartao') ? 'has-error' : ''}}">
                                        {!! Form::text('nasc_cartao', null, ['class' => 'form-control date-picker','id'=>'nasc_cartao','required','placeholder'=>'Nasc. do Titular', "maxlength"=>"10", "onkeypress"=>"formatar('##/##/####', this);return SomenteNumero(event)"]) !!}
                                        {!! $errors->first('nasc_cartao', '<p class="help-block">:message</p>') !!}
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    {!! Form::label('telefone_cartao', 'Telefone do Titular', ['class' => 'control-label']) !!}
                                    <div class="form-group {{ $errors->has('telefone_cartao') ? 'has-error' : ''}}">
                                        {!! Form::text('telefone_cartao', null, ['class' => 'form-control','id'=>'telefone_cartao','required','placeholder'=>'Telefone do Titular', "maxlength"=>"13", "onkeypress"=>"formatar('##-#####-####', this);return SomenteNumero(event)"]) !!}
                                        {!! $errors->first('telefone_cartao', '<p class="help-block">:message</p>') !!}
                                    </div>
                                </div>
                                <h3 class="form-section clearboth">Dados do Cartão</h3>
                                <div class="col-md-3 clearboth">
                                    <div class="form-group {{ $errors->has('numero_cartao') ? 'has-error' : ''}}">
                                        {!! Form::label('numero_cartao', 'Nº do Cartão (Sem Ponto)') !!}
                                        <input class="form-control" placeholder="Ex 4111111111111111" id="numero_cartao" name="numero_cartao" required style="background-position: right; background-image:url(''); background-repeat:no-repeat;" onkeyup="CarregarBandeiraCartao();" maxlength="16" type="text">
                                        {!! $errors->first('numero_cartao', '<p class="help-block">:message</p>') !!}
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <div class="form-group {{ $errors->has('mes') ? 'has-error' : ''}}">
                                        {!! Form::label('mes', 'Mês') !!}
                                        <input class="form-control" id="mes" name="mes_cartao" maxlength="2" type="text" required placeholder="Ex 12">
                                        {!! $errors->first('mes', '<p class="help-block">:message</p>') !!}
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <div class="form-group {{ $errors->has('ano') ? 'has-error' : ''}}">
                                        {!! Form::label('ano', 'Ano') !!}
                                        <input class="form-control" id="ano" name="ano_cartao" maxlength="2" type="text" required placeholder="Ex 30">
                                        {!! $errors->first('ano', '<p class="help-block">:message</p>') !!}
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group {{ $errors->has('cvv') ? 'has-error' : ''}}">
                                        {!! Form::label('cvv', 'Código de segurança') !!}
                                        <input class="form-control" id="cvv" name="cvv_cartao" onkeyup="gerarTokenCartao();" required maxlength="3" type="text" placeholder="Ex 123">
                                        {!! $errors->first('cvv', '<p class="help-block">:message</p>') !!}
                                    </div>
                                </div>
                                
                            </div>
                            
                            <h3 class="form-section clearboth" style="margin: 10px;">Endereço da Fatura do Cartão</h3>
                            <div class="col-md-6 clearboth">
                                {!! Form::label('rua_fatura', 'Rua', ['class' => 'control-label']) !!}
                                <div class="form-group {{ $errors->has('rua') ? 'has-error' : ''}}">
                                    {!! Form::text('rua_fatura', null, ['class' => 'form-control','required', 'placeholder' => 'Rua']) !!}
                                    {!! $errors->first('rua_fatura', '<p class="help-block">:message</p>') !!}
                                </div>
                            </div>
                            <div class="col-md-3">
                                {!! Form::label('numero_fatura', 'Número', ['class' => 'control-label']) !!}
                                <div class="form-group {{ $errors->has('numero') ? 'has-error' : ''}}">
                                    {!! Form::text('numero_fatura', null, ['class' => 'form-control','required', 'placeholder' => 'Numero']) !!}
                                    {!! $errors->first('numero_fatura', '<p class="help-block">:message</p>') !!}
                                </div>
                            </div>
                            <div class="col-md-3">
                                {!! Form::label('cep_fatura', 'Cep', ['class' => 'control-label']) !!}
                                <div class="form-group {{ $errors->has('cep') ? 'has-error' : ''}}">
                                    {!! Form::text('cep_fatura', null, ['class' => 'form-control','required', 'maxlength' => '10', 'OnKeyPress' => 'formatar("##.###-###", this); return SomenteNumero(event);', 'placeholder' => 'Ex: 65.900-000']) !!}
                                    {!! $errors->first('cep_fatura', '<p class="help-block">:message</p>') !!}
                                </div>
                            </div>
                            <div class="col-md-6">
                                {!! Form::label('bairro_fatura', 'Bairro', ['class' => 'control-label']) !!}
                                <div class="form-group {{ $errors->has('bairro') ? 'has-error' : ''}}">
                                    {!! Form::text('bairro_fatura', null, ['class' => 'form-control','required', 'placeholder' => 'Bairro']) !!}
                                    {!! $errors->first('bairro_fatura', '<p class="help-block">:message</p>') !!}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group {{ $errors->has('estado_id_fatura') ? 'has-error' : ''}}">                
                                    {!! Form::label('estado_id_fatura', 'Estado', ['class' => 'control-label']) !!}
                                    {!! Form::select('estado_fatura', $estados_fatura, null, ['class' => 'form-control select2','required','id' => 'estado_id_fatura', 'onchange' => 'getCidadesFatura();','placeholder'=>'Escolha']) !!}
                                    {!! $errors->first('estado_id_fatura', '<p class="help-block">:message</p>') !!}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group {{ $errors->has('cidade_id_fatura') ? 'has-error' : ''}}">
                                    {!! Form::label('cidade_id_fatura', 'Cidade', ['class' => 'control-label']) !!}
                                    {!! Form::select('cidade_fatura', $cidades, null, ['class' => 'form-control select2','required','id' => 'cidade_id_fatura','placeholder'=>'Escolha a Cidade']) !!}
                                    {!! $errors->first('cidade_id_fatura', '<p class="help-block">:message</p>') !!}
                                </div>
                            </div>
                            
                            @include ('vendas_recorrencias.form_dados_assinate', ['submitButtonText' => 'Update'])
                        </div>
                        <div class="form-actions clearboth right">
                            <button type="submit" class="btn blue-steel"><i class="fa fa-check"></i>{{trans('padrao.salvar')}}</button>
                        </div>                    
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>   
        <script type="text/javascript" src="https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js"></script>
        <script>
            function IniciarSessao(){
                $("#text_modal_aguarde").text('Iniciando Sessão de Pagamento...');
                $.get('iniciar-pagamento', function (data) {
                    $("#session_id").val(data);
                    PagSeguroDirectPayment.setSessionId(data);
                    IdentificadorComprador();
                });
            }

            function IdentificadorComprador(){
                $("#text_modal_aguarde").text('Gerando Token de Indentificação...');
                identificador = PagSeguroDirectPayment.getSenderHash();
                $("#indentificador_comprador").val(identificador);
                $("#fechar_modal_aguarde").trigger("click");
                 $("#text_modal_aguarde").text('');
                 $("#nome_titular").focus();
            }

            function CarregarMeiosPagamento(){
                PagSeguroDirectPayment.setSessionId($("#session_id").val());
                PagSeguroDirectPayment.getPaymentMethods({
                success: function(response){ console.log(response); },
                error: function(response){ console.log(response); }
                });
            }

            function CarregarBandeiraCartao(){
                var qtdnumcart = $("#numero_cartao").val().length;
                if(qtdnumcart >= 6){
                    PagSeguroDirectPayment.getBrand({
                        cardBin: $("#numero_cartao").val(),
                        success: function(response){ getImagemBandeira(response['brand']['name'].toUpperCase());},
                        error: function(){alert('Não foi possível reconhecer a bandeira desse cartão!');}
                    });
                }else{
                    $("#numero_cartao").css('background-image',"url('')");
                }
            }

            function getImagemBandeira(nome_bandeira){
                PagSeguroDirectPayment.setSessionId($("#session_id").val());
                PagSeguroDirectPayment.getPaymentMethods({
                success: function(response){ caminho = 'http://stc.pagseguro.uol.com.br'+response['paymentMethods']['CREDIT_CARD']['options'][''+nome_bandeira+'']['images']['SMALL']['path']; $("#numero_cartao").css('background-image',"url('"+caminho+"')"); },
                error: function(response){ console.log(response); }
                });
            }

            function gerarTokenCartao(){
                numCartao = $("#numero_cartao").val();
                cvvCartao = $("#cvv").val();
                expiracaoMes = $("#mes").val();
                expiracaoAno = '20'+$("#ano").val();     

                PagSeguroDirectPayment.createCardToken({
                    cardNumber: numCartao,
                    cvv: cvvCartao,
                    expirationMonth: expiracaoMes,
                    expirationYear: expiracaoAno,

                    success: function(response){  $("#tokenPagamentoCartao").val(response['card']['token']);},
                    error: function(response){ $("#tokenPagamentoCartao").val(""); console.log(response); }
               });
            }
            
            function assinarPlano(){
                var plano_id = $("#plano_id").val();
                if(plano_id != ""){
                    $("#btn_aguarde").trigger("click");
                    descricao = $("#plano_id").find(':selected').text();
                    periodo = $("#plano_id").find(':selected').attr('periodo');
                    descricao_periodo = periodo+' Meses';
                    valor = $("#plano_id").find(':selected').attr('valor');
                    parcela = $("#plano_id").find(':selected').attr('parcela');
                    code_plano_pagseguro = $("#plano_id").find(':selected').attr('code_plano_pagseguro');
                    //$("#descricao_assinatura").text(descricao+' - Valor: '+number_format(valor,2,',','.')+' em '+periodo+' de '+number_format(parcela,2,',','.'));
                    $("#div_dados_compra").css("display",'none');
                    $("#div_dados_pagamento").css("display",'block');
                    $("#editar_dados_financeiros").css("display",'none');
                    IniciarSessao();
                }else{
                    $("#msg-modal-aviso").text('Escolha um Plano!');
                    $("#btn_aviso").trigger("click");
                }
            }
        </script>
    </div>        
</div>