@extends('template')
<link href="{{asset('/assets/pages/css/about.min.css')}}" rel="stylesheet" type="text/css" />
@section('content')
</div>
    <div class="page-content">
        <div class="container-fluid">
            <div class="page-content-inner"">
                @if (session('message_success'))
                    <div class="row margin-bottom-40 about-header">
                        <div class="col-md-12">
                            <h1>Obrigado por se cadastrar!</h1>
                            <h2>{!! session('message_success') !!}</h2>
                        </div>
                    </div>
                    <!-- END CONTENT HEADER -->
                    <!-- BEGIN CARDS -->
                    <div class="row margin-bottom-20">
                        <div class="col-lg-3 col-md-6">
                            <div class="portlet light">
                                <div class="card-icon">
                                    <i class="icon-user-follow font-red-sunglo theme-font"></i>
                                </div>
                                <div class="card-title">
                                    <span> Acompanhamento </span>
                                </div>
                                <div class="card-desc">
                                    <span> Tenha acompanhamento de um <br/> agente regional da sua cidade </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="portlet light">
                                <div class="card-icon">
                                    <i class="icon-trophy font-green-haze theme-font"></i>
                                </div>
                                <div class="card-title">
                                    <span> Comissão </span>
                                </div>
                                <div class="card-desc">
                                    <span> Comissão de até 150% <br/> sobre a venda efetuada </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="portlet light">
                                <div class="card-icon">
                                    <i class="icon-basket font-purple-wisteria theme-font"></i>
                                </div>
                                <div class="card-title">
                                    <span> Ganhos Recorrentes </span>
                                </div>
                                <div class="card-desc">
                                    <span> Comissões recorrentes até 10% <br/> sobre planos ou serviços</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="portlet light">
                                <div class="card-icon">
                                    <i class="icon-layers font-blue theme-font"></i>
                                </div>
                                <div class="card-title">
                                    <span> Vantagens </span>
                                </div>
                                <div class="card-desc">
                                    <span> Descontos na contratação dos<br/>serviços com a TW Solutions </span>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="about-header">
                        <div class="row">
                            <div class="col-md-12">
                                <h1 style="margin: 40px 0;">Seja um agente autorizado <img src="{{asset('/assets/layouts/layout3/img/logo-twsolutions-white.png')}}"></h1>
                            </div>
                        </div>

                        <div class="row" style="margin:0 0 70px 0;">
                            <div class="col-md-12">
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/2nJE829NHM4" frameborder="0" allowfullscreen></iframe>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="portlet light" id="alert">
                                    @if(empty($plan))
                                        <div class="portlet-title">
                                            <div class="caption">
                                                <i class=" icon-layers font-red"></i>                                    
                                                <span class="caption-subject font-red uppercase"> 
                                                    Junte-se à nossa equipe e comece a faturar alto hoje mesmo
                                                </span>
                                            </div>
                                        </div>
                                    @endif 
                                    <div class="portlet-body form" id="alert">
                                        
                                        @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

                                        {!! Form::open(['route' => 'create.representante', 'method' =>'post', 'id'=>'frm_agente_autorizado','data-email'=>'false']) !!}

                                            <div class="tab-content">
                                                <div id="tab-pre-cadastro" class="tab-pane cad-content-representante active">

                                                    <div class="row txt_left">
                                                        <div class="form-group col-md-12"> 
                                                            <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-user-plus"></i>
                                                                    </span>
                                                                    {!! Form::text('name', '', ['class' => 'form-control', 'autocomplete' => 'off', 'id'=>'name']) !!}
                                                                    {!! Form::label('name', 'Nome', ['class' => 'control-label']) !!}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row txt_left">
                                                        <div class="form-group col-md-12"> 
                                                            <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-list-alt"></i>
                                                                    </span>
                                                                    {!! Form::text('cpf', '', ['class' => 'form-control', 'autocomplete' => 'off', 'id'=>'cpf_cnpj']) !!}
                                                                    {!! Form::label('cpf', 'CPF', ['class' => 'control-label']) !!}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row txt_left">
                                                        <div class="form-group col-md-12"> 
                                                            <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-envelope"></i>
                                                                    </span>
                                                                    {!! Form::email('email', '',['class' => 'form-control', 'autocomplete' => 'off','id'=>'email' ,'onblur'=>'valida_dominio(this.value)']); !!}
                                                                    {!! Form::label('email', 'Endereço de Email') !!}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row txt_left">
                                                        <div class="form-group col-md-12"> 
                                                            <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-phone"></i>
                                                                    </span>
                                                                    {!! Form::text('phone', '', ['class' => 'form-control', 'id' => 'mask_phone', 'autocomplete' => 'off']) !!}
                                                                    {!! Form::label('phone', 'Telefone - Ex: (99)9999-9999', ['class' => 'control-label','id'=>'phone']) !!}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row txt_left">
                                                        <div class="form-group col-md-12"> 
                                                            <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-asterisk"></i>
                                                                    </span>
                                                                    {!! Form::password('password', ['class' => 'form-control', 'autocomplete' => 'off','id'=>'password']); !!}
                                                                    {!! Form::label('password', 'Senha') !!}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row txt_left">
                                                        <div class="form-group col-md-12"> 
                                                            <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-asterisk"></i>
                                                                    </span>
                                                                    {!! Form::password('password_confirmation', ['class' => 'form-control', 'autocomplete' => 'off','id'=>'password_confirmation']); !!}
                                                                    {!! Form::label('password_confirmation', 'Confirme a Senha') !!}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <h3 class="font-blue-madison">Área de Atuação</h3>
                                                            </div>
                                                        </div>
                                                    </div>   
                                                    <div class="form-group col-md-6"> 
                                                        <div class="form-group form-md-line-input form-md-floating-label has-personalizado">
                                                            <div class="input-group left-addon txt_left">
                                                                <span class="input-group-addon has-personalizado">
                                                                    <i class="fa fa-map"></i>
                                                                </span>
                                                                {!! Form::label('state', 'Estado', ['class' => 'control-label']) !!}
                                                                {!! Form::select('state', $states, '', ['class'=>'form-control', 'onchange'=>'carrega_cidades();','id'=>'state']) !!}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group col-md-6"> 
                                                        <div class="form-group form-md-line-input form-md-floating-label has-personalizado">
                                                            <div class="input-group left-addo txt_leftn">
                                                                <span class="input-group-addon has-personalizado">
                                                                    <i class="fa fa-map-pin"></i>
                                                                </span>
                                                                {!! Form::label('city', 'Cidade', ['class' => 'control-label']) !!}
                                                                {!! Form::select('city', [''=>'Selecione um Estado'], '', ['class'=>'form-control', 'id'=>'city', 'onchange'=>'carrega_zonas(this.value);']) !!}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group col-md-4" id='zone_label' style='display:none;'> 
                                                        <div class="form-group form-md-line-input form-md-floating-label has-personalizado">
                                                            <div class="input-group left-addon txt_left">
                                                                <span class="input-group-addon has-personalizado">
                                                                    <i class="fa fa-map-pin"></i>
                                                                </span>
                                                                {!! Form::label('zone', 'Região', ['class' => 'control-label']) !!}
                                                                {!! Form::select('zone', [''=>'::Selecione::'], '', ['class'=>'form-control', 'id'=>'zone']) !!}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <a class="btn blue-madison custom_tab" data-to-hide="#tab-pre-cadastro" data-to-show="#tab-questionario" data-validate="segundaParte">
                                                        Próximo Passo
                                                    </a>
                                                </div>
                                                <div id="tab-questionario" class="tab-pane">

                                                    <div class="caption title-representante">
                                                        <i class=" icon-layers font-blue-madison"></i>
                                                        <span class="caption-subject font-blue-madison bold uppercase">
                                                            Questionário 
                                                        </span>
                                                    </div>
                                                    <div class="quest-content-representante">
                                                      <div class="">
                                                            <br>
                                                            <div class="text-justify">
                                                                <p class="p-representante">
                                                                    O objetivo desse questionario é avaliar se a empresa se enquadra nos pre requisitos da TW e se encaixa no perfil de agentes que obtem sucesso na parceria.
                                                                </p>
                                                                <p class="p-representante">
                                                                    Nosso intuito é obter parceiros duradouros e comprometidos com as metas estabelecidas e dispostos a conhecer profundamente a tecnologia passando a segurança necessaria para os prospects durante as negociações de vendas.
                                                                </p>
                                                                <p class="p-representante">
                                                                    Responda o questionario com calma pois ele é essencial para avaliação e homologação da sua empresa.
                                                                </p>
                                                            </div>
                                                            <div class="tab-content">
                                                            @foreach ($questoes as $key => $questao)
                                                                <div id="questoe{{$key}}" class="tab-pane  {{($key==0)? 'active' : '' }}" style="min-height: 497px">
                                                                    <fieldset class="form-group form-md-line-input form-md-floating-label has-personalizado">
                                                                        @foreach ($questoes as $keyx => $questaox)
                                                                        <a  class="btn  {{($key<$keyx)? 'blue-madison' : 'red' }} btn-rep quest"> </a>
                                                                        @endforeach
                                                                    </fieldset>
                                                                    <fieldset class="form-group form-md-line-input form-md-floating-label has-personalizado">
                                                                            {!! Form::label('respostas'.$key,
                                                                            ($key+1).') '. $questao, ['class' => 'control-label text-left', 'style' => 'float: left; min-height: 45px;']) !!}
                                                                            <textarea class="form-control" name="respostas[]" class='form-control' id='respostas' placeholder='Resposta' required='required' rows="7">{{ old('respostas'.$key) ?: '' }}</textarea>
                                                                    </fieldset>

                                                                    <fieldset class="form-group">
                                                                        @if( ($key-1) >= 0)
                                                                            <a data-toggle="tab" href="#questoe{{$key-1}}" class="btn red quest" >
                                                                                <span class="glyphicon glyphicon-chevron-left"></span> 
                                                                                Anterior
                                                                            </a>
                                                                        @endif

                                                                        @if(count($questoes)!=$key+1)
                                                                            <a class="btn blue-madison quest custom_tab"  data-to-hide="#questoe{{$key}}" data-to-show="#questoe{{$key+1}}" data-validate="question">
                                                                                Próxima 
                                                                                <span class="glyphicon glyphicon-chevron-right"></span>
                                                                            </a>
                                                                        @endif
                                                                    </fieldset>

                                                                    @if(count($questoes)==$key+1)
                                                                        <div class="form-group"> 
                                                                            {!! app('captcha')->display(); !!}
                                                                        </div>

                                                                    <div class="form-group ">
                                                                        <a data-toggle="tab" href="#tab-pre-cadastro" class="btn red">
                                                                            Voltar
                                                                        </a>
                                                                        {!! Form::submit('Criar nova conta', ['class' => 'btn blue-madison']) !!}
                                                                    </div>  
                                                                    @endif

                                                                </div>
                                                            @endforeach
                                                            </div>


                                                        </div>
                                                    </div>

                                                </div>
                                            </div>


                                        {!! Form::close() !!}
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="col-lg-6 col-md-6">
                                    <div class="portlet light">
                                        <div class="card-icon">
                                            <i class="icon-user-follow font-red-sunglo theme-font"></i>
                                        </div>
                                        <div class="card-title">
                                            <span> Acompanhamento </span>
                                        </div>
                                        <div class="card-desc">
                                            <span> Tenha acompanhamento de um <br/> agente regional da sua cidade </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <div class="portlet light">
                                        <div class="card-icon">
                                            <i class="icon-trophy font-green-haze theme-font"></i>
                                        </div>
                                        <div class="card-title">
                                            <span> Comissão </span>
                                        </div>
                                        <div class="card-desc">
                                            <span> Comissão de até 150% <br/> sobre a venda efetuada </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <div class="portlet light">
                                        <div class="card-icon">
                                            <i class="icon-basket font-purple-wisteria theme-font"></i>
                                        </div>
                                        <div class="card-title">
                                            <span> Ganhos Recorrentes </span>
                                        </div>
                                        <div class="card-desc">
                                            <span> Comissões recorrentes até 10% <br/> sobre planos ou serviços</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <div class="portlet light">
                                        <div class="card-icon">
                                            <i class="icon-layers font-blue theme-font"></i>
                                        </div>
                                        <div class="card-title">
                                            <span> Vantagens </span>
                                        </div>
                                        <div class="card-desc">
                                            <span> Descontos na contratação dos<br/>serviços com a TW Solutions </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12">
                                    <div class="portlet light">
                                        Para saber mais sobre a TW Solutions, acesse nosso site <a href="http://www.twsolutions.com.br" target="_blank">www.twsolutions.com.br</a>
                                        <br/><br/>
                                        <img src="{{asset('/assets/layouts/layout3/img/logo-anatel.png')}}" width="130">
                                        <br/><br/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif   
            </div>
        </div>                 
    </div>
@stop()

@section('js-form')
    <script src="{{ asset('/assets/global/scripts/valida-cpf-cnpj.js') }}" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready( function() { 

            $('a.custom_tab').on('click', function (e) {
                var change = false;
                var frm_agente_autorizado = $("#frm_agente_autorizado");
                var toHide = $(this).data('toHide');
                var toShow = $(this).data('toShow');
                var validate = $(this).data('validate');

                 var is_mail = frm_agente_autorizado.data('email');
                if(false){

                }
                if(validate=='segundaParte' && !change){
                    frm_agente_autorizado.validate().form();
                   // change = true;
                   change = !frm_agente_autorizado.validate().numberOfInvalids();
                }

                if(validate=='question' && !change){
                    frm_agente_autorizado.validate().form();
                   // change = true;
                   change = !frm_agente_autorizado.validate().numberOfInvalids();
                }

                if(change && is_mail){
                  $(toHide).removeClass('active');
                  $(toShow).addClass('active');
                }
            });


            $('a[data-toggle="tab"].quest').on('hidden.bs.tab', function (e) {
              $(e.target).removeClass('red');
              $(e.target).addClass('blue-madison');
            });

/*        jQuery.validator.addMethod("cpfcnpj", function(value, element) {
          return valida_cpf_cnpj(value);}, "Por favor digite cpf/cnpj inválido!");*/
        
            $("#frm_agente_autorizado").validate({
                rules: {
                    name: "required",
                    email: {required:true,email:true},
                    phone: "required",
                    password: {
                        required: true,
                        minlength: 8
                    },
/*                    cpf_cnpj:'cpfcnpj',*/
                    password_confirmation: {
                        required: true,
                        equalTo: "#password"
                    },
                    state:"required",
                    city:"required",
                },
                messages: {
                    name: "Por favor digite um nome para o perfil!",
                    email: {
                        required: "Por favor digite um email válido!",
                        email: "Por favor digite um email válido",
                    },
                    phone: "Por favor informe seu telefone!",
                    password: {
                        required: "Por favor digite uma senha!",
                        minlength: "Sua senha deve conter ao menos 8 caracteres!"
                    },
                    password_confirmation: {
                        required: "Por favor redigite sua senha!",
                        equalTo: "As senhas não conferem!"
                    },
                    state:" ",
                    city:" ",
                }
            });
        });

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

                $.ajax({ 
                    type: "GET", 
                    url: "{{ route('register.dominio_email') }}", 
                    data: {email: email}, 
                    success: function(data) { 
                        if(data == 1){
                            $("#email_cadastro").val('');
                            swal({"title":"Ops!","text":"O domínio deste email não pode ser utilizado no cadastro!","showConfirmButton":true,"type":"error"});
                        }else{
                            $.ajax({ 
                                type: "GET", 
                                url: "{{ route('register.existe_email') }}", 
                                data: {email: email}, 
                                success: function(data) { 
                                    if(data == 1){
                                        $("#email_cadastro").val('');
                                        swal({"title":"Ops!","text":"Esse email não pode ser utilizado, pois já consta na nossa base de dados!","showConfirmButton":true,"type":"error"});
                                    }else{
                                        $("#frm_agente_autorizado").data('email',true);
                                    }
                                } 
                            });
                        }
                    } 
                });
            }
        } 

        function carrega_cidades(){

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

            var uf = $('#state').val();

            $.ajax({ 
                type: "GET", 
                url: "{{ route('register.city') }}", 
                data: {uf: uf}, 
                success: function(data) { 
                    if(data==''){
                        var html = "<option value=''>:: Selecione ::</option>";
                    }else{
                        var json = JSON.parse(data);
                        var html = "<option value=''>:: Selecione ::</option>";
                        for(i in json.cidades) {
                            var item = json.cidades[i];
                            html += "<option value='" + item.id + "'>" + item.cidade + "</option>";
                        }
                        $("#city").html(html);
                    }
                } 
            });

        }

        function carrega_zonas(){

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

            var city = $("#city").val();

            $.ajax({ 
                type: "GET", 
                url: "{{ route('register.city.zone') }}", 
                data: {city: city}, 
                success: function(data) { 
                    var html = "<option value=''>:: Selecione ::</option>";
                    if(data==''){
                        $("#zone_label").hide("slow");
                    }else{
                        var json = JSON.parse(data);
                        for(i in json.regioes) {
                            var item = json.regioes[i];
                            html += "<option value='" + item.id + "'>" + item.regiao + "</option>";
                        }
                        $("#zone").html(html);
                        $("#zone_label").show("slow");
                    }
                } 
            });

        }

        carrega_cidades();
        carrega_zonas();
    </script>
    <script src="{{ asset('/assets/global/plugins/jquery-inputmask/jquery.inputmask.bundle.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/pages/scripts/form-input-mask.min.js') }}" type="text/javascript"></script>    
@stop()