@extends('dashboard_app')

@section('title', '')

@section('title-dashboard')

@endsection

@section('pg-home')
@endsection

@section('content')
@parent
<style>
    *{margin: 0; box-sizing: border-box;}

    .CartaoCredito, .Debito , .Boleto{text-align: center; float:left; width: 30%; margin: 30px 1.5%; border-radius: 10px; border: 1px solid #999; font-size: 18px; font-weight: bold;}
    .Titulo{float:left; width: 100%; border-radius: 10px 10px 0 0; font-weight: bold; color: #fff; background: #000; text-align: center;}
</style>
<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-check"></i> Plano de Descontos!                                    
                        </div>
                    </div>
                    <div class="portlet-body form">
                        {!! Form::model($listar, [
                                'method' => 'POST',
                                'route' => ['vendas_recorrencias_cartaoCadastrargo'],
                                'class' => 'horizontal-form', 'onsubmit'=>'getModalAguarde();'
                            ]) !!}
                        <div class="form-body">
                            <div class="row" id="div_dados_compra" style="display: none;">
                                <div class="col-md-12" style="width: 50%; float: left; display: none;">
                                    <div class="form-group">
                                        {!! Form::label('plano_id', 'Plano') !!}
                                            <select name="plano_id" id="plano_id" required class="form-control select2">
                                                @foreach($planos as $list)
                                                    <option value="{{$list->id}}" code_plano_pagseguro="{{$list->code_plano_pagseguro}}">{{$list->nome}}</option>
                                                @endforeach
                                            </select>
                                    </div>
                                </div>
                                <div class="col-md-12" style="width: 50%; float: left; display: none;">
                                    <button type="button" class="btn green-meadow margin-top25px" onclick="assinarPlano();"><i class="fa fa-check"></i> Iniciar</button>
                                </div>
                                <label class="form-section" style="margin-top: 0px;"><strong> @if($primeira_parcela > 0) {{'1ª Mensalidade com Adesão R$ '.number_format($primeira_parcela,2,',','.').' - '.' Mensalidades seguintes: R$ '.number_format($config->valor_recorrencia,2,',','.')}} @else {{' Mensalidades: R$ '.number_format($config->valor_recorrencia,2,',','.')}} @endif </strong> </label>
                                <center><button type="button" class="btn green-meadow" onclick="assinarPlano();"><i class="fa fa-plus"></i> Cadastrar Cartão</button></center>
                            </div>
                            <div class="clearboth"  id="div_dados_pagamento">
                                
                                <div class="CartaoCredito"><div class="Titulo">Cartão de Crédito</div></div>
                                <div class="Boleto"><div class="Titulo">Boleto</div></div>
                                <div class="Debito"><div class="Titulo">Débito Online</div></div>
                                
                                
                                <input id="cliente_id" name="cliente_id" type="hidden" required placeholder="Id Cliente" value="{{$listar->id}}">
                                <input id="session_id" name="session_id" type="hidden" required placeholder="Id da Session" value="{{$session_id}}">
                                <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 clearboth">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>
                                <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>
                                
                                @include ('vendas_recorrencias.form_dados_assinate', ['submitButtonText' => 'Update'])
                            </div>
                        </div>
                        <div class="form-actions clearboth right" style="display: none;" id="div_btn_assinar">
                            <button type="submit" class="btn blue-steel"><i class="fa fa-check"></i> 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(){
                alert();
                $("#text_modal_aguarde").text('Iniciando Sessão de Pagamento...');
                $.get('iniciar-pagamento/1', function (data) {
                    $("#session_id").val(data);
                    PagSeguroDirectPayment.setSessionId(data);
                    listaMeiosPagamento();
                    IdentificadorComprador();
                });
            }
            
            function IniciarSessaoNew(){
                //getModalAguarde();
                $("#progresso_pagamento").text("Iniciando Sessão de Pagamento...");
                var session_id = $("#session_id").val();
                //$("#session_id").val(data);
                PagSeguroDirectPayment.setSessionId(session_id);
                listaMeiosPagamento();
                IdentificadorComprador();
            }
            
            function listaMeiosPagamento()
            {
                PagSeguroDirectPayment.getPaymentMethods({
                    amount: 500.00,
                    success: function(data) {
                        $.each(data.paymentMethods.CREDIT_CARD.options, function(i, obj){
                            //$('.CartaoCredito').append(""+obj.name+"");
                            $('.CartaoCredito').append("<img src='http://stc.pagseguro.uol.com.br"+obj.images.MEDIUM.path+"' />");
                            //alert(JSON.stringify(obj));
                        });
                        $.each(data.paymentMethods.BOLETO.options, function(i, obj){
                            $('.Boleto').append("<img src='http://stc.pagseguro.uol.com.br"+obj.images.MEDIUM.path+"' />");
                        });
                        
                        $.each(data.paymentMethods.ONLINE_DEBIT.options, function(i, obj){
                            //$('.Debito').append(""+obj.name+"");
                            $('.Debito').append("<img src='http://stc.pagseguro.uol.com.br"+obj.images.MEDIUM.path+"' />");
                        });
                    },
                    complete: function(data) {
                    }
                });
            }

            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');
                    $("#div_btn_assinar").css("display",'block');
                    IniciarSessao();
                }else{
                    $("#msg-modal-aviso").text('Escolha um Plano!');
                    $("#btn_aviso").trigger("click");
                }
            }
        </script>
    </div>
</div>

@endsection