@extends('layouts.master')
@section('content')
    <link href="/assets/plugins/toastr/toastr.css" rel="stylesheet">
    <link href="/css/multi-select.css" media="screen" rel="stylesheet" type="text/css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <style>
        div.open > ul.multiselect-container {
            background-color: #fff;
        }

        div.open > ul.multiselect-container li {
            font-size: 16px;
        }

        .ms-container{
            width: 100%;
        }

        .ms-selectable {
            width: 400px;
        }
    </style>


    <div class="container oquefazemos">
        <div class="row">
            <div class="col-md-12">
                <h3> Cadastro de usuário</h3>
                <hr>
            </div>
            <div class="col-md-12" style="margin-bottom: 15px;">
                @include('flash::message')
                <form action="/registerUser" class="form-group" id="form_user" method="post">
                    {{csrf_field()}}

                    <div class="col-md-12">
                        <h4> Dados de login</h4>
                        <hr>
                    </div>
                    <div class="col-md-6">
                        <label for="">Nome</label> <span style="color: red;"> * </span>
                        <input type="text" name="name" id="name" class="form-control" required>
                    </div>

                    <div class="col-md-6">
                        <label for="">E-mail</label> <span style="color: red;"> * </span>
                        <input type="text" name="email" id="email" class="form-control" required>
                    </div>

                    <div class="col-md-6" style="margin-top: 10px;">
                        <label for="">Senha</label> <span style="color: red;"> * </span>
                        <input type="password" id="password" name="password" class="form-control">
                    </div>

                    <div class="col-md-6" style="margin-top: 10px;">
                        <label for="">Confirmar senha</label> <span style="color: red;"> * </span>
                        <input type="password" id="confirm_password" class="form-control">
                    </div>
                    <div class="col-md-12"><hr></div>
                    <div class="col-md-12">
                        <h4> Dados adicionais</h4>
                        <hr>
                    </div>
                    <!--- Shortname Field --->
                    <div class="form-group col-md-4 ">
                        {!! Form::label('shortName', 'Nome Fantasia:') !!} <span style="color: red;"> * </span>
                        {!! Form::text('shortName', null, ['class' => 'form-control', 'required']) !!}
                    </div>

                    <!--- Fullname Field --->
                    <div class="form-group col-md-4">
                        {!! Form::label('fullName', 'Rasão Social:') !!}
                        {!! Form::text('fullName', null, ['class' => 'form-control']) !!}
                    </div>

                    <!--- Phone1 Field --->
                    <div class="form-group col-md-2">
                        {!! Form::label('phone1', 'Telefone 1:') !!} <span style="color: red;"> * </span>
                        {!! Form::text('phone1', null, ['class' => 'form-control phone']) !!}
                    </div>

                    <!--- Phone2 Field --->
                    <div class="form-group col-md-2">
                        {!! Form::label('phone2', 'Telefone 2:') !!}
                        {!! Form::text('phone2', null, ['class' => 'form-control phone']) !!}
                    </div>

                    <!--- Mayor Field --->
                    <div class="form-group col-md-3">
                        {!! Form::label('mayor', 'Responsável:') !!}
                        {!! Form::text('mayor', null, ['class' => 'form-control']) !!}
                    </div>

                    <!--- Cnpjcpf Field --->
                    <div class="form-group col-md-3">
                        {!! Form::label('cnpjCpf', 'CPF/CNPJ:') !!} <span style="color: red;"> * </span>
                        {!! Form::text('cnpjCpf', null, ['class' => 'form-control cpfcnpj']) !!}
                    </div>

                    <!--- Ierg Field --->
                    <div class="form-group col-md-3">
                        {!! Form::label('ieRg', 'Insc. Estadual:') !!}
                        {!! Form::text('ieRg', null, ['class' => 'form-control']) !!}
                    </div>

                    <!--- Im Field --->
                    <div class="form-group col-md-3">
                        {!! Form::label('im', 'Insc. Municipal:') !!}
                        {!! Form::text('im', null, ['class' => 'form-control']) !!}
                    </div>

                    <div class="form-group col-md-6 ">
                        {!! Form::label('siteUrl', 'Site URL:') !!}
                        {!! Form::text('siteUrl', null, ['class' => 'form-control']) !!}
                    </div>

                    <div class="form-group col-md-6">
                        {!! Form::label('type_active_id', 'Ramo de atividade') !!}
                        {!! Form::select('type_active_id', $typeActive ,null, ['class' => 'form-control select2']) !!}
                    </div>

                    <div class="form-group col-md-12">
                        {!! Form::label('cnae_id', 'CNAE') !!}
                        {!! Form::select('cnae_id', $cnae , null, ['class' => 'form-control', 'multiple', 'name'=>'cnae_id[]']) !!}
                    </div>

                    <hr class="col-sm-12 hr">
                    <div class="form-group col-md-12"><h3>Endereço</h3></div>

                    <div class="form-group col-sm-2 col-lg-2">
                        {!! Form::label('zipcode', 'CEP:') !!}
                        {!! Form::text('zipcode', null, ['class' => 'form-control cep']) !!}
                    </div>

                    <!--- Street Field --->
                    <div class="form-group col-sm-8 col-lg-8">
                        {!! Form::label('street', 'Logradouro:') !!}
                        {!! Form::text('street', null, ['class' => 'form-control']) !!}
                    </div>

                    <!--- Number Field --->
                    <div class="form-group col-sm-2 col-lg-2">
                        {!! Form::label('number', 'Numero:') !!}
                        {!! Form::text('number', null, ['class' => 'form-control']) !!}
                    </div>

                    <!--- Complement Field --->
                    <div class="form-group col-sm-3">
                        {!! Form::label('complement', 'Complemento:') !!}
                        {!! Form::text('complement', null, ['class' => 'form-control']) !!}
                    </div>

                    <!--- District Field --->
                    <div class="form-group col-sm-3">
                        {!! Form::label('district', 'Bairro:') !!}
                        {!! Form::text('district', null, ['class' => 'form-control']) !!}
                    </div>
                    <!--- State Field --->
                    <div class="form-group col-sm-6 col-lg-4">
                        {!! Form::label('state', 'UF:') !!}
                        {!! Form::select('state', $states, null, ['class' => 'form-control states', 'onChange'=>'getCities(\'state\')']) !!}
                    </div>

                    <!--- City Field --->
                    <div class="form-group col-sm-6 col-lg-4">
                        {!! Form::label('city', 'Cidade:') !!}
                        {!! Form::select('city', $cities, null, ['class' => 'form-control cities', 'id'=>'cities']) !!}
                    </div>
                    <div class="clearfix"></div>
                    <hr>
                    <div class="col-md-12">
                        <a class="btn btn-default pull-right" style="margin-left: 10px;" href="javascript:history.go(-1);"> Voltar </a>
                        <button class="btn btn-success pull-right" id="btn_save" type="button"> Salvar </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js'></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script src="/assets/plugins/mask/jquery.mask.min.js"></script>
    <script src="/js/jquery.multi-select.js" type="text/javascript"></script>
    <script src="/js/jquery.quicksearch.js" type="text/javascript"></script>

    <script>
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "newestOnTop": true,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "preventDuplicates": true,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": 8000,
            "extendedTimeOut": 0,
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut",
            "tapToDismiss": true
        }


       $(document).ready(function () {
           $('.select2').select2();
           $('#cnae_id').multiSelect({
               selectableHeader: "<input type='text' id='busca1' class='search-input form-control' style='margin-bottom: 5px' autocomplete='off' placeholder='buscar'>",
               selectionHeader: "<input type='text' id='busca2' class='search-input form-control' style='margin-bottom: 5px' autocomplete='off' placeholder='buscar'>",
               afterInit: function(ms){
                   let that = this,
                       $selectableSearch = that.$selectableUl.prev(),
                       $selectionSearch = that.$selectionUl.prev(),
                       selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
                       selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';

                   that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                       .on('keydown', function(e){
                           if (e.which === 40){
                               that.$selectableUl.focus();
                               return false;
                           }
                       });

                   that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                       .on('keydown', function(e){
                           if (e.which == 40){
                               that.$selectionUl.focus();
                               return false;
                           }
                       });
               },
               afterSelect: function(){
                   this.qs1.cache();
                   this.qs2.cache();
               },
               afterDeselect: function(){
                   this.qs1.cache();
                   this.qs2.cache();
               }
           });

            $('#btn_save').on('click', function () {
                if($('#shortName').val() == '' || $('#phone1').val() == ''|| $('#cnpjCpf').val() == ''|| $('#name').val() == ''|| $('#email').val() == ''){
                    toastr.error('Verifique campos obrigatórios!')
                }else if($('#password').val() != $('#confirm_password').val() || $('#password').val()=='' || $('#confirm_password').val() == ''){
                    toastr.error('Verifique as senhas!')
               }else{
                   $('#form_user').submit();
               }
           })

           $('#email').on('blur', function () {

               data = {
                   email  : $('#email').val(),
                   _token : '{{csrf_token()}}'
               }
               $.ajax({
                   url : '/checkUser',
                   data : data,
                   method : 'POST',
               }).success(function (res) {
                   res = JSON.parse(res);

                   if(res == true){
                       toastr.error('E-mail já cadastrado!');
                       $('#btn_save').prop('disabled', true);
                       $('#email').focus();
                   }else{
                       $('#btn_save').prop('disabled', false);

                   }
               })

           })

       })
    </script>

    <script>

        var getCities = function(id){
            var state  = $("#"+id).val();

            var url = "/getcities/"+state;

            $.ajax({
                method: "POST",
                url: url,
                data: {
                    _token: "{!! csrf_token() !!}",
                    state: state
                },
                dataType: "json"
            }).success(function(result,textStatus,jqXHR) {
                //success data    = JSON.parse(result);
                var cities  = $('.cities');

                cities.empty();
                $.each(result, function(i, item) {
                    var tmp = '<option value="' + item.id + '">' + item.name + '</option>';
                    cities.append(tmp);
                });

            });
        }


        $(document).ready(function() {
            $('#state').val(27);
            getCities('state');
            setTimeout(function () {
                $('#cities').val(321);
            }, 1000);




            var SPMaskBehavior = function (val) {return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';},
                spOptions = {onKeyPress: function(val, e, field, options) {field.mask(SPMaskBehavior.apply({}, arguments), options);}};
            $('.phone').mask(SPMaskBehavior, spOptions);

            $('.cep').mask('99999-000');
            $('.cpf').mask('999.999.999-99');
            $('.cnpj').mask('99.999.999/9999-99');

            var SPMaskBehavior2 = function (val) {return val.replace(/\D/g, '').length <= 11 ? '000.000.000-009' : '00.000.000/0000-00';},
                spOptions2 = {onKeyPress: function(val, e, field, options) {field.mask(SPMaskBehavior2.apply({}, arguments), options);}};
            $('.cpfcnpj').mask(SPMaskBehavior2, spOptions2);

            function limpa_formulário_cep() {
                // Limpa valores do formulário de cep.
                $("#street").val("");
                $("#district").val("");

            }

            $('.cnpjcpf').mask("999.999.999-99?99999").on('keyup', function (e) {
                var query = $(this).val().replace(/[^a-zA-Z 0-9]+/g,'');
                if (query.length <= 11) {
                    $('.cnpjcpf').mask("999.999.999-99?99999").val(query);
                }else{
                    $('.cnpjcpf').mask("99.999.999/9999-99").val(query);;
                }
            }).focusout(function() {
                var query = $(this).val().replace(/[^a-zA-Z 0-9]+/g,'');
                if(query.length>0) {
                    if (query.length <= 11) {
                        if (!validaCpf(query)) {
                            alert("CPF Inválido!");
                            $(this).focus();
                        }
                    } else {
                        if (!validaCnpj(query)) {
                            alert("CNPJ Inválido!");
                            $(this).focus();
                        }
                    }
                }
            });



            $("#zipcode").blur(function () {

                //Nova variável "cep" somente com dígitos.
                var cep = $(this).val().replace(/\D/g, '');

                //Verifica se campo cep possui valor informado.
                if (cep != "") {

                    //Expressão regular para validar o CEP.
                    var validacep = /^[0-9]{8}$/;

                    //Valida o formato do CEP.
                    if (validacep.test(cep)) {

                        //Preenche os campos com "..." enquanto consulta webservice.
                        $("#street").val('').attr("placeholder",'buscando dados...');
                        $("#district").val('').attr("placeholder",'buscando dados...');

                        //Consulta o webservice viacep.com.br/
                        $.getJSON("//viacep.com.br/ws/" + cep + "/json/?callback=?", function (dados) {

                            if (!("erro" in dados)) {
                                //Atualiza os campos com os valores da consulta.
                                $("#street").val(dados.logradouro);
                                $("#district").val(dados.bairro);
                                $("#number").focus();
                            } //end if.
                            else {
                                //CEP pesquisado não foi encontrado.
                                limpa_formulário_cep();
                                alert("CEP não encontrado.");
                            }
                        });
                    } //end if.
                    else {
                        //cep é inválido.
                        limpa_formulário_cep();
                        alert("Formato de CEP inválido.");
                    }
                } //end if.
                else {
                    //cep sem valor, limpa formulário.
                    limpa_formulário_cep();
                }
            });
        });



        var validaCpf = function(strCPF){
            var Soma;
            var Resto;
            Soma = 0;
            //strCPF  = RetiraCaracteresInvalidos(strCPF,11);
            if (strCPF == "00000000000")
                return false;
            for (i=1; i<=9; i++)
                Soma = Soma + parseInt(strCPF.substring(i-1, i)) * (11 - i);
            Resto = (Soma * 10) % 11;
            if ((Resto == 10) || (Resto == 11))
                Resto = 0;
            if (Resto != parseInt(strCPF.substring(9, 10)) )
                return false;
            Soma = 0;
            for (i = 1; i <= 10; i++)
                Soma = Soma + parseInt(strCPF.substring(i-1, i)) * (12 - i);
            Resto = (Soma * 10) % 11;
            if ((Resto == 10) || (Resto == 11))
                Resto = 0;
            if (Resto != parseInt(strCPF.substring(10, 11) ) )
                return false;
            return true;
        }

        var validaCnpj = function(cnpj){
            if(cnpj == '') return false;

            if (cnpj.length != 14)
                return false;

            // Elimina CNPJs invalidos conhecidos
            if (cnpj == "00000000000000" ||
                cnpj == "11111111111111" ||
                cnpj == "22222222222222" ||
                cnpj == "33333333333333" ||
                cnpj == "44444444444444" ||
                cnpj == "55555555555555" ||
                cnpj == "66666666666666" ||
                cnpj == "77777777777777" ||
                cnpj == "88888888888888" ||
                cnpj == "99999999999999")
                return false;

            // Valida DVs
            tamanho = cnpj.length - 2
            numeros = cnpj.substring(0,tamanho);
            digitos = cnpj.substring(tamanho);
            soma = 0;
            pos = tamanho - 7;
            for (i = tamanho; i >= 1; i--) {
                soma += numeros.charAt(tamanho - i) * pos--;
                if (pos < 2)
                    pos = 9;
            }
            resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
            if (resultado != digitos.charAt(0))
                return false;

            tamanho = tamanho + 1;
            numeros = cnpj.substring(0,tamanho);
            soma = 0;
            pos = tamanho - 7;
            for (i = tamanho; i >= 1; i--) {
                soma += numeros.charAt(tamanho - i) * pos--;
                if (pos < 2)
                    pos = 9;
            }
            resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
            if (resultado != digitos.charAt(1))
                return false;

            return true;
        }

    </script>

@endsection