@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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.4.8/sweetalert2.min.css" integrity="sha512-y4S4cBeErz9ykN3iwUC4kmP/Ca+zd8n8FDzlVbq5Nr73gn1VBXZhpriQ7avR+8fQLpyq4izWm0b8s6q4Vedb9w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.4.8/sweetalert2.min.js" integrity="sha512-7x7HoEikRZhV0FAORWP+hrUzl75JW/uLHBbg2kHnPdFmScpIeHY0ieUVSacjusrKrlA/RsA2tDOBvisFmKc3xw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<!-- 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">Editar 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="/actualizar_organizacao/{{$organizacao->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">Nome*</label>
                <input type="text" class="form-control" id="nome" name="nome" value="{{$organizacao->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" id="razao_social" name="razao_social" value="{{$organizacao->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" value="{{$organizacao->autorizacao}}" placeholder="Autorização">
              </div>
              <div class="col-8">
                <label class="form-label" for="email">Email*</label>
                <input type="email" class="form-control" id="email" name="email" value="{{$organizacao->email}}" placeholder="Email">
              </div>
              <div class="col-2">
                <label class="form-label" for="cep">CEP*</label>
                <input type="text" class="form-control" id="cep" name="cep" value="{{$organizacao->cep}}" placeholder="CEP">
              </div>
              <div class="col-6">
                <label class="form-label" for="endereco">Endereço*</label>
                <input type="text" class="form-control" id="endereco" name="endereco" value="{{$organizacao->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="numero" name="numero" value="{{$organizacao->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" value="{{$organizacao->complemento}}" placeholder="Complemento">
              </div>
              <div class="col-4">
                <label class="form-label" for="bairro">Bairro*</label>
                <input type="text" class="form-control" id="bairro" name="bairro" value="{{$organizacao->bairro}}" placeholder="Bairro">
              </div>


              <div class="col-4">
                <label class="form-label" for="estado">Estado</label>
                <input type="text" class="form-control" id="estado" name="estado" value="{{$organizacao->estado}}">
              </div>
              <div class="col-4">
                <label class="form-label" for="cidade">Cidade*</label>
                <input type="text" class="form-control" id="cidade" name="cidade" value="{{$organizacao->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" value="{{$organizacao->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" value="{{$organizacao->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" value="{{$organizacao->inscricao_estadual}}" placeholder="Inscrição Estadual">
              </div>
              <div class="col-4">
                <label class="form-label" for="cnpj">CNPJ*</label>
                <input type="text" class="form-control" id="cnpj" name="cnpj" value="{{$organizacao->cnpj}}" placeholder="CNPJ">
              </div>
              <div class="col-4">
                <label class="form-label" for="assinatura">Assinatura</label>
                <input type="text" class="form-control" id="assinatura" name="assinatura" value="{{$organizacao->assinatura}}" placeholder="Assinatura">
              </div>
              <div class="col-4">
                <label class="form-label" for="representante_legal">Representante Legal</label>
                <input type="text" class="form-control" id="representante_legal" name="representante_legal" value="{{$organizacao->representante_legal}}" placeholder="Assinatura">
              </div>
              <hr>
              <div class="col-4">
                Logotipo
                <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto" href="javascript:void(0)">
                  @if($organizacao->logotipo == "")
                  <!-- <i class="fab fa-fw fa-cloudsmith"></i> -->
                  @else
                  <img style="max-width: 90%; max-height: 90%;" src="{{$organizacao->logotipo}}">
                  @endif
                </a>
              </div>
              <div class="col-4">
                <label class="form-label" for="logotipo">Alterar logotipo</label>
                <input type="file" class="form-control" id="logotipo" name="logotipo" value="{{$organizacao->logotipo}}" placeholder="Logotipo">
              </div>
              <div class="col-4">
              </div>
              <div class="col-4 ">
                Assinatura
                <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto" href="javascript:void(0)">
                  @if($organizacao->assinatura == "")
                  Sem Assinatura
                  @else
                  <img class="fa-fw" src="/images/download-pdf.jpg">
                  @endif
                </a>
              </div>
              <div class="col-4">
                <label class="form-label" for="file_assinatura">Alterar Assinatura</label>
                <input type="file" class="form-control" id="file_assinatura" name="file_assinatura" value="{{$organizacao->file_assinatura}}" placeholder="Assinatura">
              </div>





            </div>
            <hr>
            <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 Alterações
                </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
@endsection

<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>