@extends('layouts.app')

@section('conteudo')
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="js/cep.js"></script>

{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_perfil')

<div class="content">
  <!-- Elements -->
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">Editar Meu Perfil</h3>
    </div>
    <div class="block-content">

      <div class="row">

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

          <!-- Form Inline - Alternative Style -->
          <form action="/actualizar_funcionario/{{$funcionario->id}}" 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" value="{{$funcionario->nome_completo}}" placeholder="nome completo">
              </div>
              <div class="col-3">
                <label class="form-label" for="cpf">CPF/CNPJ*</label>
                <input type="text" class="form-control" id="cpf" name="cpf" value="{{$funcionario->cpf}}" placeholder="cpf">
              </div>

              <div class="col-3">
                <label class="form-label" for="estado_civil">Estado civil</label>
                <select class="form-select" name="estado_civil" value="{{$funcionario->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>


              <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" value="{{$funcionario->endereco_cep}}" placeholder="CEP">
              </div>

              <div class="col-7">
                <label class="form-label" for="endereco">Endereço*</label>
                <input type="text" class="form-control" id="nome" name="endereco" value="{{$funcionario->endereco}}" placeholder="Endereço">
              </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" value="{{$funcionario->numero_endereco}}" placeholder="Número">
              </div>

              <div class="col-3">
                <label class="form-label" for="complemento">Complemento</label>
                <input type="text" class="form-control" id="nome" name="complemento_endereco" value="{{$funcionario->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" value="{{$funcionario->bairro_endereco}}" placeholder="Bairro">
              </div>

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

              <div class="col-3">
                <label class="form-label" for="cidade">Cidade*</label>
                <input type="text" class="form-control" id="nome" name="cidade_endereco" value="{{$funcionario->cidade_endereco}}" placeholder="Cidade">
              </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" value="{{$funcionario->telefone}}" placeholder="telefone" maxlength="14">
              </div>
              <div class="col-3">
                <label class="form-label" for="celular">Celular*</label>
                <input type="tel" class="form-control" id="celular" name="celular" value="{{$funcionario->celular}}" placeholder="celular" maxlength="15">
              </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" value="{{$funcionario->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" value="{{$funcionario->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" value="{{$funcionario->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" value="{{$funcionario->email_profissional}}" disabled placeholder="E-mail">
              </div>

              <div class="col-3">
                <label class="form-label" for="senha">Senha*</label>
                <input type="password" class="form-control" id="senha" name="senha" value="{{$funcionario->senha}}" placeholder="senha">
              </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" value="{{$funcionario->confirmar_senha}}" placeholder="Confirmar Senha">
              </div>

              <div class="col-3">
                <label class="form-label" for="ex_prestador">Ex-Prestador*</label>
                <select class="form-select" id="ex_prestador" name="ex_prestador" value="{{$funcionario->ex_prestador}}">
                  <option value="1" {{$funcionario->ex_Prestador == 1 ? 'selected' : ''}}>Sim</option>
                  <option value="0" {{$funcionario->ex_Prestador == 0 ? 'selected' : ''}}>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" value="{{$funcionario->voluntario}}">
                  <option value="1" {{$funcionario->voluntario == 1 ? 'selected' : ''}}>Sim</option>
                  <option value="0" {{$funcionario->voluntario == 0 ? 'selected' : ''}}>Não</option>
                </select>
              </div>

              <hr>
              <div class="col-3">
                Foto do Prestador
                <a class="item item-rounded bg-body-dark text-dark ">
                  @if($funcionario->foto == null)
                  <p style="font-size: 12px;"> Sem Foto </p>
                  @else
                  <img style="max-width: 90%; max-height: 90%;" src="{{$funcionario->foto}}">
                  @endif
                </a>
              </div>
              <div class="col-4">
                <label class="form-label" for="foto">Alterar Foto*</label>
                <input type="file" class="form-control" id="foto" name="foto" value="{{$funcionario->foto}}" placeholder="foto">
              </div>
            </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
            </button> </a>
        </center>

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



  </div>
</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
<!-- END Elements -->
</div>

@endsection


<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/main.js"></script>
<script>
  //busca cep
  $(document).ready(function() {
    $("input[name=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]").val(json.bairro);
              $("input[name=cidade]").val(json.localidade);
              $("input[name=estado]").val(json.uf);
            }
          }
        });
      }
    });
  });

  //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);
    }
  }
</script>