@extends('template')

@section('content')

    <div class="page-content">
        <div class="container-fluid">
            <div class="page-content-inner">
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet light">
                            <div class="row">
                                <div class="col-md-12">
                                    <span class="font-blue-madison title"><i class="fa fa-user"></i> Cliente</span>
                                    <hr>
                                </div>
                            </div>
                            <div class="portlet-body">
                                @if (count($errors) > 0)
                                    <div class="alert alert-danger">
                                        <strong> O Formulário está com os erros abaixo:</strong><br><br>
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif

                                @if (session('message'))
                                    <div class="alert alert-success">
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                        {{ session('message') }}
                                    </div>
                                @endif

                                {!! Form::open(['route' => 'admin.customers.create.siptek', 'method' => 'POST']) !!}
                                    <input type="hidden" name="code" id="code">
                                    <input type="hidden" name="tipo_migracao" value="prepago_tw">
                                    <input type="hidden" name="type_account" value="prepago">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6"> 
                                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                    {!! Form::text('name', '', ['class' => 'form-control', 'autocomplete' => 'off', 'onblur' => 'search_siptek(this.value); return false;']) !!}  
                                                    {!! Form::label('name', 'Nome do Cliente no Siptek', ['class' => 'control-label']) !!}                                            
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                    {!! Form::text('id_siptek', '', ['class' => 'form-control', 'autocomplete' => 'off', 'id' => 'id_siptek']) !!}
                                                    {!! Form::label('id_siptek', 'ID Cliente Siptek', ['class' => 'control-label']) !!}   
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                    {!! Form::text('email', '', ['class' => 'form-control', 'autocomplete' => 'off', 'id' => 'email']) !!}
                                                    {!! Form::label('email', 'E-mail Principal', ['class' => 'control-label']) !!}   
                                                </div>
                                            </div>
                                            <div class="col-sm-2" style="text-align:right;">
                                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                    {!! Form::label('add_mail', '&nbsp;', ['class' => 'control-label']) !!}
                                                    <span class="btn green-jungle popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Clique aqui para adicionar um novo email" onclick="aditional_mail();"><i class="fa fa fa-plus-circle"></i> Adicionar Email</span>
                                                    <input type='hidden' name="marcador" id="marcador" value="0">
                                                    <input type='hidden' name="qtdEmails" id="qtdEmails" value="0">
                                                </div>
                                            </div>
                                        </div>                                                         
                                    </div>
                                    
                                    <div class="row" id="aditional_mail" style="display:none">
                                        <div class="col-md-12">
                                            <table id="tbl_email" class="table table-striped table-light">
                                                <tr class="uppercase bg-blue-madison">
                                                    <th class="col-sm-4 font-white">Email</th>
                                                    <th class="col-sm-1 font-white popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Emails que receberão os boletos"><i class="fa fa-dollar"></i> Financeiro</th>
                                                    <th class="col-sm-1 font-white popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Se um desses emails estiver marcdo, ele receberá a cópia da NF, caso contrário o email principal receberá a cópia da NF."><i class="fa fa-file"></i> Fiscal</th>
                                                    <th class="col-sm-1"></th>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="form-group col-sm-3">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::text('cpf_cnpj', '', ['class' => 'form-control cpf_cnpj', 'autocomplete' => 'off', 'id' => 'cpf_cnpj','onblur'=>'valida_cpf_cnpj(this.value)']) !!}
                                                {!! Form::label('cpf_cnpj', 'CPF / CNPJ', ['class' => 'control-label']) !!}
                                            </div>
                                        </div>
                                        <div class="form-group col-sm-3">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::text('rg_ie', '', ['class' => 'form-control', 'autocomplete' => 'off']) !!}
                                                {!! Form::label('rg_ie', 'RG/IE') !!}
                                            </div>
                                        </div>
                                        <div class="form-group col-sm-3">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::text('phone', '', ['class' => 'form-control', 'id' => 'mask_phone', 'autocomplete' => 'off', 'id'=>'mask_phone']) !!}
                                                {!! Form::label('phone', 'Telefone') !!}
                                            </div>
                                        </div>
                                        <div class="form-group col-sm-3">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::text('mobile', '', ['class' => 'form-control', 'autocomplete' => 'off', 'id'=>'mask_cellphone']) !!}
                                                {!! Form::label('mobile', 'Celular') !!}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-2">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::text('zip_code', '', ['id'=> 'zip_code', 'class' => 'form-control','autocomplete' => 'off']) !!}
                                                {!! Form::label('zip_code', 'CEP', ['class' => 'control-label']) !!}   
                                            </div>
                                        </div>
                                        <div class="col-sm-2" style="text-align:right;">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::label('address', '&nbsp;', ['class' => 'control-label']) !!}
                                                <button type="button" class="btn blue-madison" onclick="search_zipcode();">Buscar Cep</button>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::text('address', '', ['class' => 'form-control', 'autocomplete' => 'off','id'=>'endereco']) !!}
                                                {!! Form::label('address', 'Endereço', ['class' => 'control-label']) !!}    
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::text('number', '', ['class' => 'form-control', 'autocomplete' => 'off']) !!}
                                                {!! Form::label('number', 'Número', ['class' => 'control-label']) !!}    
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-sm-4">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::text('neighborhood', '', ['class' => 'form-control', 'autocomplete' => 'off', 'id'=>'bairro']) !!}
                                                {!! Form::label('neighborhood', 'Bairro', ['class' => 'control-label']) !!}
                                            </div>
                                        </div>
                                        <div class="form-group col-sm-4">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::text('city', '', ['class' => 'form-control', 'autocomplete' => 'off', 'id'=>'city']) !!}
                                                {!! Form::label('city', 'Cidade', ['class' => 'control-label']) !!}
                                            </div>
                                        </div>
                                        <div class="form-group col-sm-4">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::select('state', $options->states, '', ['id'=>'estado', 'class'=>'form-control select2']) !!}
                                                {!! Form::label('state', 'Estado', ['class' => 'control-label']) !!}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        @if(routeAcess('admin.plans.create'))
                                            <div class="form-group col-md-1">
                                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                    <a class="btn green-jungle popovers fancybox fancybox.iframe" data-container="body" data-trigger="hover" data-placement="top" data-content="Clicando aqui você pode adicionar um novo plano" href="{{route('admin.plans.create_sale',['prop'=>'prop'])}}"><i class="fa fa fa-plus-circle"></i> Add.</a>
                                                </div>
                                            </div>
                                        @endif
                                        <div class="form-group col-sm-4">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::select('plano', $options->plans, '', ['id'=>'plano_id', 'class'=>'form-control select2', 'data-rule-min'=>'1' , 'data-msg-min'=>'Selecione um plano!', 'onChange' => 'new_number(this.value); return false;']) !!}
                                                {!! Form::label('plano', 'Plano', ['class' => 'control-label']) !!}
                                            </div>
                                        </div>
                                        <div class="form-group col-md-2">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                <div class="input-group left-addon">
                                                    <span class="input-group-addon has-personalizado">
                                                        <i class="fa fa-calendar"></i>
                                                    </span>
                                                    {!! Form::text('data_vencimento', '', ['class' => 'form-control', 'autocomplete' => 'off','id'=>'data_vencimento']) !!}
                                                    {!! Form::label('data_vencimento', 'Data Vencimento') !!}
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group col-md-2">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::text('api_password', '', ['class' => 'form-control', 'autocomplete' => 'off', 'id'=>'api_password']) !!}
                                                {!! Form::label('api_password', 'Senha conta Voip', ['class' => 'control-label']) !!}
                                            </div>
                                        </div>
                                
                                        <div class="form-group col-sm-3"> 
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::label('nf_antecipada', 'Gerar NF antes do pagamento?', ['class' => 'control-label']) !!}
                                                {!! Form::select('nf_antecipada', ['0'=>'Não','1'=>'Sim'],'', ['id'=>'nf_antecipada', 'class'=>'form-control']) !!}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <span class="html"></span>
                                    </div>

                                    <div class="row">
                                        <div class="form-group col-md-6">
                                            <button type="submit" id="btnSalvar" name="Salvar" value='Salvar' class="btn green-jungle popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Finalizar e salvar o registro.">
                                                <i class="fa fa-save"></i> Salvar
                                            </button>
                                            <a href="{{route('admin.customers')}}" class="btn red popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Ao cancelar você perderá as informações não salvas."><i class="fa fa-close"></i> Cancelar</a>
                                        </div>                          
                                    </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END PAGE CONTENT INNER -->
        </div>
    </div>
@stop()

@section('js-admin-customer')
    
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>    
    <script src="{{ asset('/assets/global/scripts/app.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/scripts/valida-cpf-cnpj.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/plugins/jquery.blockui.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/pages/scripts/ui-blockui.min.js') }}" type="text/javascript"></script>
    <link href="{{ asset('/assets/global/plugins/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('/assets/global/plugins/select2/css/select2-bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ asset('/assets/global/plugins/select2/js/select2.full.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/pages/scripts/components-select2.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/apps/scripts/jquery.maskMoney.js') }}" type="text/javascript"></script>
    
    <script type="text/javascript"> 
        $.datepicker.regional['pt-BR'] = {
            closeText: 'Fechar',
            prevText: '&#x3c;Anterior',
            nextText: 'Pr&oacute;ximo&#x3e;',
            currentText: 'Hoje',
            monthNames: ['Janeiro','Fevereiro','Mar&ccedil;o','Abril','Maio','Junho',
            'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
            monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun',
            'Jul','Ago','Set','Out','Nov','Dez'],
            dayNames: ['Domingo','Segunda-feira','Ter&ccedil;a-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sabado'],
            dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
            dayNamesMin: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
            weekHeader: 'Sm',
            dateFormat: 'dd/mm/yy',
            firstDay: 0,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: ''
        };

        $.datepicker.setDefaults($.datepicker.regional['pt-BR']);

        $("#data_vencimento").datepicker();

        function search_siptek(name) {
            if (name != '') {  
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    }
                })

                $.ajax({ 
                    type: "GET", 
                    url: '{{ route('admin.customers.search.siptek') }}', 
                    data: {name: name}, 
                    success: function(data) { 
                        var json = JSON.parse(data);
                        
                        if (json.cpf == '') {
                            cpf_cnpj = json.cnpj;
                        } else {
                            cpf_cnpj = json.cpf;
                        }

                        if(json.email==''){
                            mail = json.login;
                        } else{
                            mail = json.email;
                        }

                        $("#name").val(json.nome);
                        $("#id_siptek").val(json.id).focus();                    
                        $("#cpf_cnpj").val(cpf_cnpj).focus();
                        $("#rg_ie").val(json.inscricao_estadual).focus();
						$("#email").val(mail).focus();
                        $("#mask_phone").val(json.telefone).focus();
                        $("#api_password").val(json.senha).focus();
                        $("#endereco").val(json.endereco).focus();
                        $("#estado").val(json.estado).change().focus();
                        $("#bairro").val(json.bairro).change().focus();

                    } 
                });
            }
        } 

        function search_zipcode() { 
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            })

            $.ajax({ 
                type: "GET", 
                url: '{{ route('register.zipcode') }}', 
                data: {zip_code: $('#zip_code').val()}, 
                success: function(data) { 
                    var json = JSON.parse(data);
                    $("#endereco").val(json.logradouro).focus();
                    $("#bairro").val(json.bairro).focus();
                    $("#city").val(json.localidade).focus();
                    $("#estado").val(json.uf).focus();
                    $("#code").val(json.ibge);
                } 
            });
        } 

        var x = 1; 
        function new_number(id) { 
            var html = '';
            
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            })

            $.ajax({ 
                type: "GET", 
                url: '{{ route('admin.customers.search.plans') }}',
                data: {id: id}, 
                success: function(data) { 
                    var json = JSON.parse(data);
                    console.log(json); 
                    var max = json.number_maximum;

                    if (max > 0) {
                        for (var i = 0; i < max; i++) {
                            var count = x + 1; 
                            html += '<div class="row">';
                                html += '<div class="form-group col-md-6">';
                                    html += '{!! Form::text("virtual_number[]", "", ["class" => "form-control", "placeholder" => "Número", "autocomplete" => "off"]) !!}';
                                html += '</div>';
                            html += '</div>';

                            $('.html').html(html);
                            x++;
                        } 
                    } else {
                        $('.html').html('');
                    }
            
                }
            });

        }

        function aditional_mail(){

            var marcador = $("#marcador").val()
            var qtdEmails = $("#qtdEmails").val();

            var append = '<tr id="line_mail'+qtdEmails+'"><td class="col-sm-4"><div class="form-group form-md-line-input has-personalizado form-md-floating-label"><input onkeyup="IsEmail(this.value);" type="text" name="email'+marcador+'" id="email" class="form-control" ><label class="control-label">Email adicional</label></div></td><td class="col-sm-1"><div class="md-checkbox"><input type="checkbox" id="recebe_boleto'+marcador+'" class="md-check"><label for="recebe_boleto'+marcador+'" class="has-personalizado"><span></span><span class="check has-personalizado"></span><span class="box"></span></label></div></td><td class="col-sm-1"><div class="md-radio-list"><div class="md-radio"><input type="radio" id="recebe_nf'+marcador+'" name="recebe_nf" class="md-radiobtn"><label for="recebe_nf'+marcador+'"><span class="inc"></span><span class="check"></span><span class="box"></span></label></div></div></td><td><a onclick="removerEmail('+qtdEmails+')" href="javascript:void(0);" class="btn btn-outline btn-sm red"><i class="fa fa-remove"></i> Remover </a></td></tr>';

            marcador++;
            qtdEmails++;

            $("#tbl_email").append(append);
            $("#aditional_mail").show('slow');
            $("#marcador").val(marcador);
            $("#qtdEmails").val(qtdEmails);

        }

        function removerEmail(id){
            var qtdEmails = $("#qtdEmails").val();
            qtdEmails--;
            $("#line_mail"+id).remove();
            $("#qtdEmails").val(qtdEmails);
            if(qtdEmails == '0'){
                $("#aditional_mail").hide('slow');
                $("#btnSalvar").removeAttr('disabled');
            }
        }

        function IsEmail(email){
            
            if(email==''){
                $("#btnSalvarEmail").removeAttr('disabled');
            }else{
                var exclude=/[^@\-\.\w]|^[_@\.\-]|[\._\-]{2}|[@\.]{2}|(@)[^@]*\1/;
                var check=/@[\w\-]+\./;
                var checkend=/\.[a-zA-Z]{2,3}$/;
                if(((email.search(exclude) != -1)||(email.search(check)) == -1)||(email.search(checkend) == -1)){
                    $("#btnSalvar").attr('disabled','disabled');
                }else {
                    $("#btnSalvar").removeAttr('disabled');
                }
            }
        }
    </script>
@stop()