<div class="telaLogin" ng-init="loadConfigs()">
    <div class="content card center" ng-if="config">
        <form name="formProspect" class="formProspect" novalidate
            ng-submit="formProspect.$valid ? onSubmit() : invalidCall()">
            <h1 ng-if="!config.ativo">
                Funcionalidade indisponível no momento. Por favor, verifique as
                configurações.
            </h1>
            <div ng-if="config.ativo">
                <!-- Cabeçalho -->
                <h1 ng-if="$ctrl.cadastrar">Seja Bem-Vindo</h1>
                <h1 ng-if="$ctrl.indicar">Cadastro de Indicação de Prospect</h1>
                <!-- Area de Interesse -->
                <div layout-gt-sm="row" ng-if="config.areaInteresse && config.descricao && config.descricao != ''">
                    <md-input-container class="inputProspect md-block" flex-gt-sm>
                        <label>{{config.descricao}}</label>
                        <md-select ng-model="prospect.config" ng-required="$ctrl.cadastrar">
                            <md-option ng-repeat="ain in config.areaInteresse" ng-value="ain">
                                {{ain.descricao}}
                            </md-option>
                        </md-select>
                        <div ng-if="$ctrl.cadastrar" ng-messages="formProspect.telefone.$error">
                            <div ng-message="required">
                                Este campo é obrigatório
                            </div>
                        </div>
                    </md-input-container>
                </div>
                <!-- Atividade -->
                <div layout-gt-sm="row" ng-if="config.atividades && $ctrl.indicar">
                    <md-input-container class="inputProspect md-block" flex-gt-sm>
                        <label>Atividade</label>
                        <md-select ng-model="prospect.atividade">
                            <md-option ng-repeat="atv in config.atividades" ng-value="atv">
                                {{atv.atividade.descreve}}
                            </md-option>
                        </md-select>
                    </md-input-container>
                </div>
                <!-- Nome -->
                <div layout-gt-sm="row">
                    <md-input-container class="inputProspect md-block" flex-gt-sm>
                        <label for="nome" ng-if="$ctrl.cadastrar">Qual seu nome?</label>
                        <label for="nome" ng-if="$ctrl.indicar">Nome do cliente</label>
                        <input name="nome" id="nome" type="text" maxlength="100" class="uppercase" required
                            ng-model="prospect.nome">
                        <div ng-messages="formProspect.nome.$error">
                            <div ng-message="required" ng-required="$ctrl.cadastrar">Gostaríamos de saber o seu nome
                            </div>
                            <div ng-message="required" ng-required="$ctrl.indicar">Informe o nome do cliente</div>
                        </div>
                    </md-input-container>
                </div>
                <!-- Telefone -->
                <div layout-gt-sm="row">
                    <md-input-container class="inputProspect md-block" flex-gt-sm>
                        <label for="telefone" ng-if="$ctrl.cadastrar">Qual seu melhor telefone?</label>
                        <label for="telefone" ng-if="$ctrl.indicar">Telefone do cliente</label>
                        <input name="telefone" id="telefone" type="tel" class="uppercase" ui-br-phone-number
                            onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                            ng-required="($ctrl.cadastrar) || ($ctrl.indicar && emailEmpty())"
                            ng-model="prospect.telefone">
                        <div ng-messages="formProspect.telefone.$error">
                            <div ng-message="required">
                                Precisamos de um número de telefone
                            </div>
                            <div ng-message-exp="['minlength', 'maxlength']">
                                Informe o DDD e o numero de telefone com no mínimo 10 caracteres.
                            </div>
                        </div>
                    </md-input-container>
                </div>
                <!-- Email -->
                <div layout-gt-sm="row">
                    <md-input-container class="inputProspect md-block" flex-gt-sm>
                        <label ng-if="$ctrl.cadastrar">Qual seu melhor e-mail?</label>
                        <label ng-if="$ctrl.indicar">E-mail do cliente</label>
                        <input type="email" name="email" maxlength="500" ng-model="prospect.email"
                            ng-required="($ctrl.cadastrar) || ($ctrl.indicar && telefoneEmpty())"
                            ng-pattern="/^.+@.+\..+$/" />
                        <div ng-messages="formProspect.email.$error" role="alert">
                            <div ng-message="required">
                                Precisamos de um endereço de e-mail
                            </div>
                            <div ng-message="pattern">
                                O e-mail informado não é válido
                            </div>
                        </div>
                    </md-input-container>
                </div>
                <!-- CPF -->
                <div ng-if="$ctrl.cadastrar" layout-gt-sm="row">
                    <md-input-container class="inputProspect md-block" flex-gt-sm>
                        <label for="cpf">Informe seu CPF/CNPJ</label>
                        <input name="cpf" id="cpf" type="tel" minlength="14" maxlength="18" class="uppercase"
                            ng-model="prospect.cpf" ui-br-cpfcnpj-mask>
                        <div ng-messages="formProspect.cpf.$error">
                            <div ng-message="required">Campo obrigatório.</div>
                        </div>
                    </md-input-container>
                </div>
                <!-- CEP -->
                <div layout-gt-sm="row">
                    <md-input-container class="inputProspect md-block" flex-gt-sm>
                        <label for="cep">CEP</label>
                        <input name="cep" id="cep" minlength="9" maxlength="9" ui-br-cep-mask type="text"
                            class="uppercase" ng-model="prospect.cep"
                            onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                        <div ng-messages="formProspect.cep.$error">
                            <div ng-message="required">CEP Inválido</div>
                        </div>
                    </md-input-container>
                </div>
                <!-- Endereço -->
                <div layout-gt-sm="row">
                    <md-input-container class="inputProspect md-block" flex-gt-sm>
                        <label for="endereco">Endereço</label>
                        <input name="endereco" id="endereco" type="text" maxlength="100" class="uppercase"
                            ng-model="prospect.endereco">
                    </md-input-container>
                </div>
                <div layout-gt-sm="row">
                    <!-- Número -->
                    <md-input-container class="inputProspect md-block" flex-gt-sm>
                        <label for="numeroEndereco">Número</label>
                        <input name="numeroEndereco" id="numeroEndereco" type="text" class="uppercase" maxlength="20"
                            ng-model="prospect.numeroEndereco">
                    </md-input-container>
                    <!-- Complemento -->
                    <md-input-container class="inputProspect md-block" flex-gt-sm>
                        <label for="complemento">Complemento</label>
                        <input name="complemento" maxlength="50" id="complemento" type="text" class="uppercase"
                            ng-model="prospect.complemento">
                    </md-input-container>

                </div>
                <div layout-gt-sm="row">
                    <!-- Cidade -->
                    <md-input-container class="inputProspect md-block" flex-gt-sm>
                        <label for="cidade">Cidade</label>
                        <input name="cidade" id="cidade" maxlength="50" type="text" class="uppercase"
                            ng-model="prospect.cidade">
                    </md-input-container>
                    <!-- Estado -->
                    <md-input-container class="inputProspect md-block" flex-gt-sm>
                        <label for="estado">Estado</label>
                        <md-select name="estado" minlength="2" maxlength="2" id="estado" type="text" 
                            ng-model="prospect.estado">
                            <md-option value="AC">Acre</md-option>
                            <md-option value="AL">Alagoas</md-option>
                            <md-option value="AP">Amapá</md-option>
                            <md-option value="AM">Amazonas</md-option>
                            <md-option value="BA">Bahia</md-option>
                            <md-option value="CE">Ceará</md-option>
                            <md-option value="DF">Distrito Federal</md-option>
                            <md-option value="ES">Espírito Santo</md-option>
                            <md-option value="GO">Goiás</md-option>
                            <md-option value="MA">Maranhão</md-option>
                            <md-option value="MT">Mato Grosso</md-option>
                            <md-option value="MS">Mato Grosso do Sul</md-option>
                            <md-option value="MG">Minas Gerais</md-option>
                            <md-option value="PA">Pará</md-option>
                            <md-option value="PB">Paraíba</md-option>
                            <md-option value="PR">Paraná</md-option>
                            <md-option value="PE">Pernambuco</md-option>
                            <md-option value="PI">Piauí</md-option>
                            <md-option value="RJ">Rio de Janeiro</md-option>
                            <md-option value="RN">Rio Grande do Norte</md-option>
                            <md-option value="RS">Rio Grande do Sul</md-option>
                            <md-option value="RO">Rondônia</md-option>
                            <md-option value="RR">Roraima</md-option>
                            <md-option value="SC">Santa Catarina</md-option>
                            <md-option value="SP">São Paulo</md-option>
                            <md-option value="SE">Sergipe</md-option>
                            <md-option value="TO">Tocantins</md-option>
                        </md-select>
                    </md-input-container>
                </div>
                <!-- Bairro -->
                <div layout-gt-sm="row">
                    <md-input-container class="inputProspect md-block" flex-gt-sm>
                        <label for="bairro">Bairro</label>
                        <input name="bairro" id="bairro" maxlength="50" type="text" class="uppercase"
                            ng-model="prospect.bairro">
                    </md-input-container>
                </div>
                <!-- Observação -->
                <div ng-if="$ctrl.indicar" layout-gt-sm="row">
                    <md-input-container class="inputProspect md-block" flex-gt-sm>
                        <label for="obs">Observação</label>
                        <input name="obs" id="obs" type="text" maxlength="100" class="uppercase"
                            ng-model="prospect.obs">
                    </md-input-container>
                </div>
                <div>
                    <md-button type="submit" class="md-primary md-raised btnGravar">Confirmar</md-button>
                </div>
            </div>
        </form>
    </div>
</div>