@extends('layouts.app')

@section('conteudo')


<!-- Hero -->
<div class="bg-image" style="background-image: url(''); margin-top: 70px;">
  <div class="bg-black-50">
    <div class="content content-full">
      <div class="d-flex justify-content-between align-items-center">
        <h1 class="flex-grow-1 fs-2 text-white my-2">
          <i class="fa fa-boxes text-white-50 me-1"></i> Prestadores
        </h1>
        @can('pode_visualizar_funcionario')
        <a class="btn btn-primary my-2" href="/funcionarios">
          <i class="fa fa-fw fa-list"></i>
          <span class="d-none d-sm-inline ms-1">Listar Prestadores</span>
        </a>
        @endcan
      </div>
    </div>
  </div>
</div>
<!-- END Hero -->
{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_funcionario')
<div class="content">
  <!-- Elements -->
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">Registrar Novo Prestador</h3>
    </div>
    <div class="block-content">

      <div class="row">

        <div class="col-lg-12 space-y-6">

          <!-- Form Inline - Alternative Style -->
          <form action="/salvar_funcionario" method="POST" enctype="multipart/form-data">
            <!-- <div class="row row-cols-lg-auto g-4 align-items-center"> -->
            <div class="row  g-4 align-items-center">
              @csrf

              <div class="col-6">
                <label class="form-label" for="nome_completo">Nome Completo*</label>
                <input type="text" class="form-control" id="nome" name="nome_completo" placeholder="nome completo" required>
              </div>

              <!-- <div class="col-2">
                <label class="form-label" for="tipo">Tipo*</label>
                <select onchange="showInput(this.value)" class="form-select" name="tipo" id="tipo">
                  <option value="0">CPF</option>
                  <option value="1">CNPJ</option>
                </select>
              </div> -->

              <div class="col-3" >
                <label class="form-label" for="cpf">CPF*</label>
                <input type="text" class="form-control" id="cpf" name="cpf" maxLength="13" required>
              </div>

              <div class="col-3" >
                <label class="form-label" for="cnpj">CNPJ</label>
                <input type="text" class="form-control" id="cnpj" name="cnpj" maxLength="18" >
              </div>

              <div class="col-6" >
                <label class="form-label" for="cnpj">Razão Social</label>
                <input type="text" class="form-control" id="razao_social" name="razao_social" >
              </div>

              <div class="col-3">
                <label class="form-label" for="data_nascimento">Data de Nascimento*</label>
                <input type="date" class="form-control" id="data_nascimento" name="data_nascimento" placeholder="data_nascimento" required>
              </div>

              <div class="col-3">
                <label class="form-label" for="rg">RG*</label>
                <input type="text" class="form-control" id="rg" name="rg" placeholder="rg" required>
              </div>


              <div class="col-3">
                <label class="form-label" for="estado_emissor">Estado Emissor</label>
                <input type="text" class="form-control" id="estado_emissor" name="estado_emissor" placeholder="estado_emissor">
              </div>


              <div class="col-3">
                <label class="form-label" for="rg_orgao">Orgão Emissor</label>
                <input type="text" class="form-control" id="rg_orgao" name="rg_orgao" placeholder="Orgão Emissor">
              </div>


              <div class="col-3">
                <label class="form-label" for="sexo">Sexo</label>
                <select class="form-select" id="sexo" name="sexo">
                  <option value="0">Prefiro não dizer </option>
                  <option value="2">Feminino</option>
                  <option value="1">Masculino</option>
                </select>
              </div>
              <!-- campo novo -->
              <div class="col-3">
                <label class="form-label" for="ex_prestador">Ex-Prestador*</label>
                <select class="form-select" id="ex_prestador" name="ex_Prestador" required>
                  <option value="1">Sim</option>
                  <option value="0">Não</option>
                </select>
              </div>

              <div class="col-3">
                <label class="form-label" for="voluntario">Voluntário</label>
                <select class="form-select" id="voluntario" name="voluntario" required>
                  <option value="0" selected>Não</option>
                  <option value="1">Sim</option>
                </select>
              </div>


              <div class="col-3">
                <label class="form-label" for="tipo_contrato">Tipo de contrato</label>
                <select class="form-select" name="tipo_contrato" id="tipo_contrato">
                  <option value="0">Selecione</option>
                  <option value="1">CLT</option>
                  <option value="2">Prestador de Serviço</option>
                </select>

              </div>


              <div class="col-3">
                <label class="form-label" for="tipo_perfil">Tipo de perfil*</label>
                <select class="form-select" name="tipo_perfil" id="tipo_perfil" required>
                  <option value="0">Selecione</option>
                  <option value="1">Administrativo</option>
                  <option value="2">Professor(a)</option>
                  <option value="3">Instrutor(a)</option>
                  <option value="4">Instrutor + Coordenador(a)</option>
                  <option value="5">Administrativo e Coordenador</option>
                </select>
              </div>


              <!-- <div class="col-3">
                <label class="form-label" for="eleitor">Título de eleitor</label>
                <input type="text" class="form-control" id="eleitor" name="titulo_eleitor" placeholder="Título de eleitor">
              </div>

              <div class="col-3">
                <label class="form-label" for="titulo_zona">Zona</label>
                <input type="text" class="form-control" id="titulo_zona" name="zona" placeholder="Zona">
              </div>

              <div class="col-3">
                <label class="form-label" for="secao">Seção</label>
                <input type="text" class="form-control" id="secao" name="secao" placeholder="Seção">
              </div>

              <div class="col-3">
                <label class="form-label" for="orgao">Orgão Emissor</label>
                <input type="text" class="form-control" id="orgao" name="orgao" placeholder="Orgão Emissor">
              </div> -->


              <div class="col-4">
                <label class="form-label" for="nacionalidade">Nacionalidade</label>
                <input type="text" class="form-control" id="nacionalidade" name="nacionalidade" placeholder="Nacionalidade">
              </div>

              <div class="col-4">
                <label class="form-label" for="estado_nascimento">Estado de Nascimento</label>
                <select class="form-select estado" id="estado" name="estado_nascimento">
                  <option value="">Selecione o estado</option>
                </select>
              </div>
              <div class="col-4">
                <label class="form-label" for="cidade_nascimento">Cidade de Nascimento</label>
                <select class="form-select cidade" id="cidade" name="cidade_nascimento">
                  <option value="">Selecione a cidade</option>
                </select>
              </div>

              <div class="col-4">
                <label class="form-label" for="estado_civil">Estado civil</label>
                <select class="form-select" name="estado_civil" id="estado_civil">
                  <option value="0">Selecione</option>
                  <option value="1">Solteiro(a)</option>
                  <option value="2">Casado(a)</option>
                  <option value="3">Separado(a)</option>
                  <option value="4">Desquitado(a)</option>
                  <option value="5">Divorciado(a)</option>
                  <option value="6">Viuvo(a)</option>
                  <option value="7">União Estável</option>
                </select>
              </div>

               <div class="col-4">
                <label class="form-label" for="escolaridade">Escolaridade</label>
                <input type="text" class="form-control" id="escolaridade" name="escolaridade" placeholder="Escolaridade">
              </div>
              <div class="col-4">
                <label class="form-label" for="formacao">Formação</label>
                <input type="text" class="form-control" id="formacao" name="formacao" placeholder="Formação">
              </div>

              <!--<div class="col-3">
                <label class="form-label" for="registro_profissional">Registro profissional*</label>
                <input type="text" class="form-control" id="registro_profissional" name="registro_profissional"  placeholder="Registro profissional">
              </div>
               -->
              <!-- <div class="col-3">
                <label class="form-label" for="situacao">Situação</label>
                <select class="form-select" name="situacao" id="situacao">
                  <option value="0">Selecione</option>
                  <option value="1">Ativo</option>
                  <option value="2">Inativo</option>
                </select>
              </div> -->

              <hr>
              <h3>Endereço</h3>

              <div class="col-3">
                <label class="form-label" for="cep">CEP*</label>
                <input type="text" class="form-control" id="nome" name="endereco_cep" placeholder="CEP" required>
              </div>

              <div class="col-7">
                <label class="form-label" for="endereco">Endereço*</label>
                <input type="text" class="form-control" id="nome" name="endereco" placeholder="Endereço" required>
              </div>

              <div class="col-2">
                <label class="form-label" for="numero">Número*</label>
                <input type="text" class="form-control" id="nome" name="numero_endereco" placeholder="Número" required>
              </div>

              <div class="col-3">
                <label class="form-label" for="complemento">Complemento</label>
                <input type="text" class="form-control" id="nome" name="complemento_endereco" placeholder="Complemento">
              </div>

              <div class="col-3">
                <label class="form-label" for="bairro">Bairro*</label>
                <input type="text" class="form-control" id="nome" name="bairro_endereco" placeholder="Bairro" required>
              </div>

              <div class="col-3">
                <label class="form-label" for="estado">Estado*</label>
                <input type="text" class="form-control" id="nome" name="estado_endereco" placeholder="Estado" required>
              </div>

              <div class="col-3">
                <label class="form-label" for="cidade">Cidade*</label>
                <input type="text" class="form-control" id="nome" name="cidade_endereco" placeholder="Cidade" required>
              </div>
              <!-- <div class="col-12">
                <label class="form-label" for="">Endereco</label>
                <input type="text" class="form-control" id="nome" name="endereco" placeholder="endereco">
              </div> -->

              <hr>
              <h3>Informações Complementares</h3>
              <div class="col-3">
                <label class="form-label" for="telefone">Telefone</label>
                <input type="tel" class="form-control" id="telefone" name="telefone" placeholder="telefone" maxlength="14">
              </div>
              <div class="col-3">
                <label class="form-label" for="celular">Celular/Whatspapp*</label>
                <input type="tel" class="form-control" id="celular" name="celular" placeholder="celular" maxlength="15" required>
              </div>
              <div class="col-6">
                <label class="form-label" for="email_pessoal">E-mail Pessoal</label>
                <input type="email" class="form-control" id="email_pessoal" name="email_pessoal" placeholder="E-mail" >
              </div>
              <!-- <div class="col-8">
                <label class="form-label" for="conjuge">Cônjuge</label>
                <input type="text" class="form-control" id="conjuge" name="conjuge" placeholder="nome completo">
              </div>

              <div class="col-4">
                <label class="form-label" for="filhos">Nº de Filhos</label>
                <input type="text" class="form-control" id="numero_filhos" name="numero_filhos" placeholder="Nº de filhos">
              </div> -->



              <div class="col-6">
                <label class="form-label" for="email_profissional">E-mail profissional*</label>
                <input type="email" class="form-control" id="email_profissional" name="email_profissional" placeholder="E-mail" required>
              </div>

              <div class="col-3">
                <label class="form-label" for="senha">Senha*</label>
                <input type="password" class="form-control" id="senha" name="senha" placeholder="senha" required>
              </div>

              <div class="col-3">
                <label class="form-label" for="confirmar_senha">Confirmar Senha*</label>
                <input type="password" class="form-control" id="confirmar_senha" name="confirmar_senha" placeholder="Confirmar Senha" required>
              </div>

              <hr>

              <h3>Informações de Contrato</h3>

              <div class="col-4">
                <label class="form-label" for="cargo">Cargo*</label>
                <input type="text" class="form-control" id="cargo" name="cargo" placeholder="Cargo">
              </div>

              <div class="col-4">
                <label class="form-label" for="data_admissao">Data de Admissão*</label>
                <input type="date" class="form-control" id="data_admissao" name="data_admissao">
              </div>

              <div class="col-4">
                <label class="form-label" for="data_demissao">Data de Demissão</label>
                <input type="date" class="form-control" id="data_demissao" name="data_demissao">
              </div>

              <!-- <div class="col-4">
                <label class="form-label" for="data_vencto_exame_medico">Data de Vcto do Exame Médico</label>
                <input type="date" class="form-control" id="data_vencimento_exame" name="data_vencimento_exame">
              </div>

              <div class="col-4">
                <label class="form-label" for="tipo_salario">Tipo de Salário*</label>
                <select class="form-select" name="tipo_salario" id="tipo_salario" >
                  <option value="0">Selecione</option>
                  <option value="1">Mensalista</option>
                  <option value="2">Horista</option>
                  <option value="3">Aulista</option>
                </select>
              </div>

              <div class="col-2">
                <label class="form-label" for="salario">Salário (R$)*</label>
                <input type="text" class="form-control" id="salario" name="salario" >
              </div>

              <div class="col-2">
                <label class="form-label" for="ajuda_custo">Ajuda de Custo</label>
                <input type="text" class="form-control" id="ajuda_custo" name="ajuda_custo">
              </div> -->



              <!-- <div class="col-4">
                <label class="form-label" for="horario_entrada_sabado">Horário Entrada (Sábado)</label>
                <input type="time" class="form-control" id="horario_entrada_sabado" name="horario_entrada_sabado">
              </div>

              <div class="col-4">
                <label class="form-label" for="horario_saida_sabado">Horário Saída (Sábado)</label>
                <input type="time" class="form-control" id="horario_saida_sabado" name="horario_saida_sabado">
              </div> -->

              <div class="col-4">
                <label class="form-label" for="qtde_aulas_semanais">Qtde. Aulas Semanais</label>
                <input type="number" class="form-control" id="quantidade_aulas_semanais" name="quantidade_aulas_semanais">
              </div>

              <!-- <h4 style="margin-bottom: -20px;">Dados Bancário</h4>

              <div class="col-4">
                <label class="form-label" for="banco">Banco*</label>
                <select class="form-select" name="banco" id="banco" >
                  <option value="0">Selecione</option>
                  <option value="213">Banco Arbi S.A.</option>
                  <option value="318">Banco BMG S.A.</option>
                  <option value="394">Banco Bradesco Financiamentos S.A.</option>
                  <option value="237">Banco Bradesco S.A.</option>
                  <option value="263">Banco Cacique S.A.</option>
                  <option value="473">Banco Caixa Geral - Brasil S.A.</option>
                  <option value="85">Banco Cecred</option>
                  <option value="745">Banco Citibank S.A.</option>
                  <option value="756">Banco Cooperativo do Brasil S.A. - BANCOOB</option>
                  <option value="748">Banco Cooperativo Sicredi S.A.</option>
                  <option value="222">Banco Credit Agricole Brasil S.A.</option>
                  <option value="229">Banco Cruzeiro do Sul S.A.</option>
                  <option value="3">Banco da Amazônia S.A.</option>
                  <option value="1">Banco do Brasil S.A.</option>
                  <option value="77">Banco Inter SA Unit</option>
                  <option value="479">Banco ItaúBank S.A</option>
                  <option value="74">Banco J. Safra S.A.</option>
                  <option value="389">Banco Mercantil do Brasil S.A.</option>
                  <option value="623">Banco Panamericano S.A.</option>
                  <option value="611">Banco Paulista S.A.</option>
                  <option value="356">Banco Real S.A.</option>
                  <option value="422">Banco Safra S.A.</option>
                  <option value="33">Banco Santander (Brasil) S.A.</option>
                  <option value="655">Banco Votorantim S.A.</option>
                  <option value="104">Caixa Econômica Federal</option>
                  <option value="477">Citibank N.A.</option>
                  <option value="666100">GERENCIANET</option>
                  <option value="399">HSBC Bank Brasil S.A. - Banco Múltiplo</option>
                  <option value="168">HSBC Finance (Brasil) S.A. - Banco Múltiplo</option>
                  <option value="341">Itaú Unibanco S.A.</option>
                  <option value="666200">IUGU</option>
                  <option value="666401">Nubank</option>
                  <option value="666400">PADMONEY</option>
                  <option value="254">Paraná Banco S.A.</option>
                  <option value="409">UNIBANCO - União de Bancos Brasileiros S.A.</option>
                  <option value="230">Unicard Banco Múltiplo S.A.</option>
                  <option value="136">Unicred - MG</option>
                  <option value="84">Unicred Norte do Paraná</option>
                  <option value="666300">VINDI</option>
                </select>
              </div>

              <div class="col-4">
                <label class="form-label" for="agencia">Agência*</label>
                <input type="text" class="form-control" id="agencia" name="agencia" >
              </div>

              <div class="col-4">
                <label class="form-label" for="conta">Número da Conta*</label>
                <input type="text" class="form-control" id="conta" name="numero_conta" >
              </div> -->
              <hr>

              <div class="col-8">
                <label class="form-label" for="observacao">Observações</label>
                <input type="text" class="form-control" id="observacao" name="observacoes">
              </div>
              <div class="col-4">
                <label class="form-label" for="foto">Upload Fotos</label>
                <input type="file" class="form-control" id="foto" name="foto" placeholder="foto">
              </div>
            </div>

            <center> <a type="submit"> <button type="submit" class="btn btn-primary m-1">
                  <i class="fa fa-fw fa-user-plus opacity-50 me-1"></i> Salvar Prestador
                </button> </a> </center>

          </form>
          <!-- END Form Inline - Alternative Style -->
        </div>
      </div>
      <!-- END Inline Layout -->



    </div>
  </div>
  <!-- END Elements -->
</div>
{{-- Pra quem não tem permissão de visualizar essa página aparecerá a mensagem abaixo --}}
@else

<center>
  <br>
  <div class="alert alert-danger" role="alert">
    Você não tem permissão pra visualizar essa página!
  </div>
</center>

@endcan



<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/main.js"></script>
<script>

  // document.getElementById("cpf").style.display = "block";
  //     document.getElementById("cnpj").style.display = "none";

  //busca cep
  $(document).ready(function() {
    $("input[name=endereco_cep]").blur(function() {
      var cep = $(this).val().replace(/[^0-9]/, '');
      if (cep) {
        var url = 'https://viacep.com.br/ws/' + cep + '/json/';
        $.ajax({
          url: url,
          dataType: 'jsonp',
          crossDomain: true,
          contentType: "application/json",
          success: function(json) {
            if (json.logradouro) {
              $("input[name=endereco]").val(json.logradouro);
              $("input[name=bairro_endereco]").val(json.bairro);
              $("input[name=cidade_endereco]").val(json.localidade);
              $("input[name=estado_endereco]").val(json.uf);
            }
          }
        });
      }
    });
  });

//   Máscara CNPJ
  function mascaraCNPJ(cnpj) {
  cnpj.value = cnpj.value.replace(/\D/g, ''); // remove caracteres não numéricos
  cnpj.value = cnpj.value.replace(/^(\d{2})(\d)/, '$1.$2'); // insere ponto após os dois primeiros dígitos
  cnpj.value = cnpj.value.replace(/^(\d{2})\.(\d{3})(\d)/, '$1.$2.$3'); // insere ponto após os próximos três dígitos
  cnpj.value = cnpj.value.replace(/\.(\d{3})(\d)/, '.$1/$2'); // insere barra após os próximos três dígitos
  cnpj.value = cnpj.value.replace(/(\d{4})(\d)/, '$1-$2'); // insere hífen após os próximos quatro dígitos
}


  //telefone
  function mascara(o, f) {
    v_obj = o
    v_fun = f
    setTimeout("execmascara()", 1)
  }

  function execmascara() {
    v_obj.value = v_fun(v_obj.value)
  }

  function mtel(v) {
    v = v.replace(/\D/g, ""); //Remove tudo o que não é dígito
    v = v.replace(/^(\d{2})(\d)/g, "($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos
    v = v.replace(/(\d)(\d{4})$/, "$1-$2"); //Coloca hífen entre o quarto e o quinto dígitos
    return v;
  }

  function id(el) {
    return document.getElementById(el);
  }
  window.onload = function() {
    id('telefone').onkeyup = function() {
      mascara(this, mtel);
    }
    id('celular').onkeyup = function() {
      mascara(this, mtel);
    }
  }





  //cpf
  const cpfInput = document.querySelector("#cpf");

  cpfInput.addEventListener("input", function(event) {
    let x = event.target.value.replace(/\D/g, "");
    let y = x.slice(0, 3) + "." + x.slice(3, 6) + "." + x.slice(6, 9) + "-" + x.slice(10);

    if (x.length > 11) {
      event.target.value = y;
    }
  });

  // //cnpj
  const cnpjInput = document.querySelector("#cnpj");

  cpfInput.addEventListener("input", function(event) {
    let x = event.target.value.replace(/\D/g, "");
    let y = x.slice(0, 2) + "." + x.slice(2, 5) + "." + x.slice(5, 8) + "/" + x.slice(8, 12) + "-" + x.slice(13);

    if (x.length > 14) {
      event.target.value = y;
    }
  });

  //selecionar cpf ou cnpj
  function showInput(inputNumber) {
    if (inputNumber == 0) {
      document.getElementById("cpf").style.display = "block";
      document.getElementById("cnpj").style.display = "none";
    } else if (inputNumber == 1) {
      document.getElementById("cpf").style.display = "none";
      document.getElementById("cnpj").style.display = "block";
    }
  }

 //mascara RG
 function mascaraRG(valor) {
    valor = valor.replace(/[^\da-z]/g, ""); // remove todos os caracteres que não são números ou letras
    valor = valor.replace(/^(\d{2})(\d{3})(\d{3})(\w{1})$/, "$1.$2.$3-$4"); // adiciona a máscara, permitindo uma letra no final
    return valor;
 }
</script>


@endsection