@extends('layouts.app')

@section('title', 'Cadastre Sua Empresa - Cote Frete')

@section('content')
<div class="pg-heading-padrao bg-n-rep bs-cover pg-heading2" style="background-image: url(assets/img/empresas.webp); background-position-y: -65px">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="white txt-left">
          <h6 class='fs15 fw500 txt-upper'>Preencha os dados da sua empresa</h6>
          <h1>Cadastre sua transportadora!</h1>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container mt40">
    <div class="row">
      <div class="col-lg-12">
        <div class="ovf-hd br7 bg-white">
          <div class="row bg-white">
            <div class="col-lg-2"></div>
            <div class="col-lg-8 align-self-center">
              <form id="form_geral" action="javascript:void(0)" method="post" enctype="multipart/form-data" style="text-align:center" class="pj">
                <div class="row">
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Razão Social*</label>
                      <input type="text" style='margin-top: 0' id="nome" placeholder="Ex: Cote Frete" autocomplete="off" required>
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Nome Fantasia*</label>
                      <input type="text" style='margin-top: 0' id="nome_fantasia" placeholder="Ex: Cote Frete" autocomplete="off" required>
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>CNPJ*</label>
                      <input type="text" style='margin-top: 0' id="cnpj" placeholder="Ex: 12.345.678/0001-09" autocomplete="off" required>
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label for="ramo">Ramo de Atuação*</label>
                      <select class='w100' name="ramo" id="ramo" style='margin-top: 0;' required>
                        <option value="" hidden>Selecione</option>
                        @foreach($ramos as $ramo)
                          <option value='{{ $ramo->id }}'>{{ $ramo->ramo }}</option>
                        @endforeach
                      </select>
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>E-mail*</label>
                      <input type="email" style="margin-top: 0;" id="email" placeholder="Ex: seuemail@dominio.com.br" required>
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Telefone*</label>
                      <input type="text" style='margin-top: 0' id="tel" placeholder="Ex: (11) 11111-1111" required>
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>WhatsApp</label>
                      <input type="text" style='margin-top: 0' id="whats" placeholder="Ex: (33) 93333-3333">
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Facebook (Nome de Perfil)</label>
                      <input type="text" style='margin-top: 0' id="facebook" placeholder="Ex: cotefrete">
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Instagram (Nome de Perfil)</label>
                      <input type="text" style='margin-top: 0' id="instagram" placeholder="Ex: @cotefrete">
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Linkedin</label>
                      <input type="text" style='margin-top: 0' id="linkedin" placeholder="Ex: Linkedin">
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Reclame Aqui (Link)</label>
                      <input type="text" style='margin-top: 0' id="reclame_aqui" placeholder="Link do Reclame aqui">
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>CEP*</label>
                      <input type="text" style='margin-top: 0' id="cep" placeholder="Ex: 30110-008" required>
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Rua*</label>
                      <input type="text" style='margin-top: 0' id="rua" placeholder="Ex: Rua Perimetral" required>
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Número*</label>
                      <input type="text" style='margin-top: 0' id="numero" placeholder="Ex: 100" required>
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Complemento</label>
                      <input type="text" style='margin-top: 0' id="complemento" placeholder="Ex: Casa, Apt">
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Bairro*</label>
                      <input type="text" style='margin-top: 0' id="bairro" placeholder="Ex: Buritis" required>
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Cidade*</label>
                      <input type="text" style='margin-top: 0; margin-bottom: 0;' id="cidade" placeholder="Ex: Belo Horizonte">
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Estado*</label>
                      <input type="text" style='margin-top: 0' id="uf" placeholder="Ex: MG" required>
                    </fieldset>
                  </div>
                  <div class="col-lg-12">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Site (Link)</label>
                      <input type="text" style='margin-top: 0' id="site" placeholder="Ex: cotefrete.com.br">
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Senha*</label>
                      <input type="password" style='margin-top: 0' id="senha" placeholder="Ex: @Cf1234" required>
                    </fieldset>
                  </div>
                  <div class="col-lg-6">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Confirmar Senha*</label>
                      <input type="password" style='margin-top: 0' id="conf_senha" placeholder="Ex: @Cf1234" required>
                    </fieldset>
                  </div>
                  <div class="col-lg-12">
                    <fieldset class='coluna mt10' style='align-items: flex-start;'>
                      <label>Descrição</label>
                      <textarea type="text" style='margin-top: 0' class="form-control" cols="30" rows="5" id="descricao" placeholder="Descrição" required=""></textarea>
                    </fieldset>
                  </div>
                  <div class='col-lg-12'>
                    <span>Logo*</span><br>
                    <img class="img-fluid" id="previewImg" src="assets/img/sem_imagem.webp" alt="Cadastrar Foto" style="max-width: 30%;">
                    <input type="file" id="fileimg" accept="image/*" name="img1" onchange="previewFile(this)" class='p0' style='opacity: 0; height: 0; width: 0; margin: 0;' required>
                    <label for="fileimg" class="btn-foto br7 cpt fw600 fs15 mt10">Escolher</label>
                  </div>
                  <div class='col-lg-12 df-ac-jc' style="margin: 10px 0;">
                    <input class='cpt' type="checkbox" style='margin: 0 5px 0 0; position: relative; top: -1px;' required>
                    <p>Concordo com a <a href="politicas-de-privacidade" rel="nofollow" target="_blank">Política de Privacidade</a></p>
                  </div>
                  <div class="col-lg-12 mb20" style='display: flex; justify-content: center;'>
                    <fieldset>
                      <button type="submit" id="form-submit" class="main-button df-ac-jc fs15" style='display: flex'>
                        <div style='width: 30px; height: 30px; border-radius: 15px; margin-right: 8px' class='df-ac-jc bg-white'><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000" class="bi bi-send" viewBox="0 0 16 16">
                            <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z" />
                          </svg></div>Cadastrar
                      </button>
                    </fieldset>
                  </div>
                  <div class='col-lg-12' style='margin: 20px 0'>
                    <a class="btn-foto br7 cpt fw600 fs15" href="/cadastro-empresa">
                      Já tenho conta
                    </a>
                  </div>
                </div>
              </form>
            </div>
            <div class="col-lg-2"></div>
          </div>
        </div>
      </div>
    </div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Confirmar e-mail</h5>
                  <button id="close_modal1" type="button" class="close b-none" data-dismiss="modal" aria-label="Close" style='background: transparent;'>
                      <span aria-hidden="true" style='font-size: 30px'>&times;</span> 
                  </button>
              </div>
              <div class="modal-body">
                  <form action="javascript:void(0)" id="form_codigo" method="post">
                      <div class="col-md-12 mb-3">
                          <label for="codigo_confirmacao">Digite o código enviado para o e-mail informado.</label>
                          <input type="text" class="form-control" id="codigo_confirmacao" placeholder="Código" required>
                      </div>
                      <div class="modal-footer" style="justify-content: center!important">
                          <button type="button" id="confirma_email" class="bg-blue b-none btn btn-primary codigo_conf">Confirmar e-mail</button>
                      </div>
                  </form>
              </div>
          </div>
      </div>
</div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" integrity="sha512-0XDfGxFliYJPFrideYOoxdgNIvrwGTLnmK20xZbCAvPfLGQMzHUsaqZK8ZoH+luXGRxTrS46+Aq400nCnAT0/w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
  $(document).ready(function() {
    $("#cep").mask("00000-000");
    $("#checkbox_todos").click(function(e) {
      $(this).toggleClass("todos_selecionados");
      $(".checkbox_estado").each(function(index, element) {
        if ($(this).hasClass("selecionado")) {
          if ($("#checkbox_todos").hasClass("todos_selecionados")) {} else {
            $(this).click();
          }
        } else {
          $(this).click();
        }
      });
    });
    $("#cnpj").keyup(function() {
      x = $(this).val().replace(/\D/g, "").replace(/(\d{2})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1/$2").replace(/(\d{4})(\d)/, "$1-$2").substring(0, 18)
      $(this).val(x)
      return x
    });
    $("#tel, #whats").keyup(function() {
      var whats = $(this).val();
      if (whats.length <= 14) {
        x = $(this).val().replace(/\D/g, "").replace(/(\d{0})(\d)/, "$1($2").replace(/(\d{2})(\d)/, "$1) $2").replace(/(\d{4})(\d)/, "$1-$2").substring(0, 14)
        $(this).val(x)
        return x
      } else {
        x = $(this).val().replace(/\D/g, "").replace(/(\d{0})(\d)/, "$1($2").replace(/(\d{2})(\d)/, "$1) $2").replace(/(\d{5})(\d)/, "$1-$2").substring(0, 15)
        $(this).val(x)
        return x
      }
    });
    $(".checkbox_estado").click(function(e) {
      if ($(this).hasClass("selecionado")) {
        $("#checkbox_todos").removeClass("todos_selecionados");
        $("#checkbox_todos").prop("checked", false);
      }
      $(this).toggleClass("selecionado");
    });
    $("#close_modal1").click(function (e) { 
      $("#exampleModal").modal('hide');
    });
    $("#form_geral").submit(function(e) {
        senha = $("#senha").val();
        conf_senha = $("#conf_senha").val();
        if (senha !== conf_senha) {
          alert("As senhas não são iguais. Verifique, por favor, e tente novamente!")
        } else {

          $("#form-submit").attr("disabled", true);
        
          let nome = $("#nome").val();
          let nome_fantasia = $("#nome_fantasia").val();
          let cnpj = $("#cnpj").val();
          let ramo = $("#ramo").val();
          let email = $("#email").val();
          let tel = $("#tel").val();
          let whats = $("#whats").val();
          let facebook = $("#facebook").val();
          let instagram = $("#instagram").val();
          let linkedin = $("#linkedin").val();
          let reclame_aqui = $("#reclame_aqui").val();
          let cep = $("#cep").val();
          let rua = $("#rua").val();
          let numero = $("#numero").val();
          let complemento = $("#complemento").val();
          let bairro = $("#bairro").val();
          let cidade = $("#cidade").val();
          let uf = $("#uf").val();
          let site = $("#site").val();
          let descricao = $("#descricao").val();

          let dados = new FormData();
          dados.append("img", $("#fileimg")[0].files[0]);
          dados.append("nome", nome);
          dados.append("nome_fantasia", nome_fantasia);
          dados.append("cnpj", cnpj);
          dados.append("ramo", ramo);
          dados.append("email", email);
          dados.append("tel", tel);
          dados.append("whats", whats);
          dados.append("facebook", facebook);
          dados.append("instagram", instagram);
          dados.append("linkedin", linkedin);
          dados.append("reclame_aqui", reclame_aqui);
          dados.append("cep", cep);
          dados.append("rua", rua);
          dados.append("numero", numero);
          dados.append("complemento", complemento);
          dados.append("bairro", bairro);
          dados.append("cidade", cidade);
          dados.append("uf", uf);
          dados.append("site", site);
          dados.append("descricao", descricao);
          dados.append("senha", senha);
          $.ajax({
            type: "POST",
            url: "proc/cadastrar_parceiros.php",
            data: dados,
            processData: false,
            contentType: false,
            success: function(data) {
              switch (data) {
                case "existente":
                alert("Já existe um cadastro com esse CNPJ ou Email. Verifique e tente novamente!");
                $("#form-submit").attr("disabled", false);
                  break;

                case "erro":
                alert("Não foi possível cadastrar a empresa. Verifique e tente novamente!");
                $("#form-submit").attr("disabled", false);
                  break;
              
                default:
                let codigoMail = "";
                let lastId = data;
                $('#exampleModal').modal('show');
                let email = $("#email").val();
                let nome = $("#nome").val();
                let option = "send";
                $.ajax({
                        type: "POST",
                        url: "proc/confirmar-email-transportadora.php",
                        data: {
                          email,
                          nome,
                          option
                        },
                        
                        success: function (response) {

                          if (response !== "") {
                            codigoMail = response;
                            
                            $("#confirma_email").click(function (e) { 
                              e.preventDefault();
                              let codigo = $("#codigo_confirmacao").val();
                              if (codigo === codigoMail) {
                                let email_confirmado = "sim";
                                let tipo = "parceiras";
                                let option = "update";
                                
                                $.ajax({
                                  type: "POST",
                                  url: "proc/confirmar-email-transportadora.php",
                                  data: {
                                    email_confirmado,
                                    lastId,
                                    tipo,
                                    option
                                  },
                                  
                                  success: function (response) {
                                    if (response == "ok") {
                                      alert("Seu cadastro foi realizado com sucesso e passará por análise do Cote Frete para ser disponibilizado em nossa plataforma!");
                                      window.location.href = "login-empresa.php";
                                    } else {
                                      alert("O código enviado não confere por favor tente novamente.")
                                    }
                                  }
                                });
                              } else {
                                alert("Verifique o seu e-mail cadastrado e insira o código corretamente.");
                              }
                            });
                            
                          } else {
                            alert("Algo de errado aconteceu, o código não pode ser gerado. Tente novamente mais tarde.");
                            $('#exampleModal').modal('hide');
                          }
                        }
                      });
                  break;
              }
            }
          });
        }
    });

    // busca cep automática
    $("#cep").change(function (e) { 
      let cep = $(this).val();
      let url = "https://viacep.com.br/ws/" + cep + "/json/";

      $.ajax({
        url: url,
        type: "GET",
        dataType: "json",
        success: function (data) {
          if (!data.erro) {
            $("#rua").val(data.logradouro);
            $("#bairro").val(data.bairro);
            $("#cidade").val(data.localidade);
            $("#uf").val(data.uf);
            $("#numero").focus();
          } else {
            $("#rua").val("");
            $("#complemento").val("");
            $("#bairro").val("");
            $("#cidade").val("");
            $("#uf").val("");
            $("#numero").val("");
          }
        }
      })
    });
  });

  function previewFile(input) {
    var file = $("#fileimg").get(0).files[0];
    if (file) {
      var reader = new FileReader();
      reader.onload = function() {
        $("#previewImg").attr("src", reader.result);
      }
      reader.readAsDataURL(file);
    }
  }
</script>
@endpush