@extends('layouts.app')

@section('conteudo')


<br>
<center>
  @if (session('erro'))
  <div class="alert alert-danger">
    {{ session('erro') }}
  </div>
  @endif
</center>


<!-- 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> Organizações
        </h1>
        @can('pode_visualizar_organizacao')
        <a class="btn btn-primary my-2" href="/organizacoes">
          <i class="fa fa-fw fa-list"></i>
          <span class="d-none d-sm-inline ms-1">Listar Organizações</span>
        </a>
        @endcan
      </div>
    </div>
  </div>
</div>
<!-- END Hero -->
{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_organizacao')
<div class="content">
  <!-- Elements -->
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">Registrar Nova Organização</h3>
    </div>
    <div class="block-content">

      <div class="row">



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

          <!-- Form Inline - Alternative Style -->
          <form action="/salvar_organizacao" method="POST" enctype="multipart/form-data" id="addOrganizacaoForm">
            <!-- <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">Nome*</label>
                <input type="text" class="form-control" required id="nome" name="nome" placeholder="Nome">
              </div>
              <div class="col-6">
                <label class="form-label" for="razao_social">Razão Social*</label>
                <input type="text" class="form-control" required id="razao_social" name="razao_social" placeholder="Razão Social">
              </div>
              <!-- <div class="col-4">
                <label class="form-label" for="autorizacao">Autorização</label>
                <input type="text" class="form-control" id="autorizacao" name="autorizacao" placeholder="Autorização">
              </div> -->
              <div class="col-4">
                <label class="form-label" for="cnpj">CNPJ*</label>
                <input type="text" class="form-control cnpj" required id="cnpj" name="cnpj" placeholder="00.000.000/0000-00" maxlength="18">
              </div>
              <div class="col-8">
                <label class="form-label" for="email">Email</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="Email">
              </div>
              <div class="col-2">
                <label class="form-label" for="cep">CEP*</label>
                <input type="text" class="form-control" required id="cep" name="cep" placeholder="CEP">
              </div>
              <div class="col-6">
                <label class="form-label" for="endereco">Endereço*</label>
                <input type="text" class="form-control" required id="endereco" name="endereco" placeholder="Endereço">
              </div>
              <div class="col-2">
                <label class="form-label" for="numero">Número*</label>
                <input type="text" class="form-control" required id="numero" name="numero" placeholder="Número">
              </div>
              <div class="col-2">
                <label class="form-label" for="complemento">Complemento</label>
                <input type="text" class="form-control" id="complemento" name="complemento" placeholder="Complemento">
              </div>
              <div class="col-4">
                <label class="form-label" for="bairro">Bairro</label>
                <input type="text" class="form-control" required id="bairro" name="bairro" placeholder="Bairro">
              </div>
              <div class="col-4">
                <label class="form-label" for="estado">Estado</label>
                <input type="text" class="form-control" required id="estado" name="estado" placeholder="estado">
              </div>
              <div class="col-4">
                <label class="form-label" for="cidade">Cidade</label>
                <input type="text" class="form-control" required id="cidade" name="cidade" placeholder="cidade">
              </div>

              <div class="col-3">
                <label class="form-label" for="telefone1">Telefone 1</label>
                <input type="tel" class="form-control"  id="telefone1" name="telefone1" placeholder="(00)0000-0000" maxlength="14">
              </div>
              <div class="col-3">
                <label class="form-label" for="telefone2">Telefone 2</label>
                <input type="tel" class="form-control" id="telefone2" name="telefone2" placeholder="(00)0000-0000" maxlength="14">
              </div>
              <div class="col-6">
                <label class="form-label" for="inscricao_estadual">Inscrição Municipal</label>
                <input type="text" class="form-control" id="inscricao_estadual" name="inscricao_estadual" placeholder="Inscrição Estadual">
              </div>
              
              <!-- <div class="col-8">
                <label class="form-label" for="assinatura">Assinatura</label>
                <input type="text" class="form-control" id="assinatura" name="assinatura" placeholder="Assinatura">
              </div> -->
              <div class="col-4">
                <label class="form-label" for="logotipo">Upload logotipo</label>
                <input type="file" class="form-control" id="logotipo" name="logotipo" placeholder="Logotipo">
              </div>
              <!-- <div class="col-4">
                <label class="form-label" for="file_assinatura">Upload Assinatura</label>
                <input type="file" class="form-control" id="file_assinatura" name="file_assinatura" placeholder="Assinatura">
              </div> -->
            </div>
            <hr>
            <center> <a type="submit"> <button type="submit" class="btn btn-primary m-1 salvar_organizacao_form">
                  <i class="fa fa-fw fa-user-plus opacity-50 me-1"></i> Salvar Organização
                </button> </a> </center>

            <div class="errMsgContainer mb-3">

            </div>

          </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>
  //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('telefone1').onkeyup = function() {
      mascara(this, mtel);
    }
    id('telefone2').onkeyup = function() {
      mascara(this, mtel);
    }
  }

  //cnpj
  const cpfInput = 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;
    }
  });
</script>
@endsection