@extends('../layouts.app')

@section('title', 'Participantes')
@section('content')
@include('../layouts.headers.cards_prod')

@include('../layouts.footers.auth')
<link rel="stylesheet" href="../css/checkbox-custom.css">
@can('visualizar-clientes')

<div class="container-fluid mt--7">
  <div class="row">
    <div class="col-xl-12 order-xl-1">
      <div class="card bg-secondary shadow">
        <div class="card-header bg-white border-0">
          <div class="row align-items-center">
            <div class="col-7">
              <h3 class="mb-0">{{ __('Participantes') }}</h3>
            </div>
            <div class="col-5 text-right">
              <a href="{{route('clientes_reman')}}" class="btn btn-sm btn-primary">{{ __('Voltar a Lista') }}</a>
            </div>
          </div>
        </div>
        <ul class="nav nav-pills nav-fill flex-column flex-md-row px-3" id="tabs-icons-text" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="tab-1" data-toggle="tab" href="#dados-pessoais" role="tab" aria-controls="simples" aria-selected="true"><strong>Dados Pessoais</strong></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="tab-2" data-toggle="tab" href="#comercial" role="tab" aria-controls="tecnica" aria-selected="false"><strong>Fiscal</strong></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="tab-3" data-toggle="tab" href="#endereco" role="tab" aria-controls="tecnica" aria-selected="false"><strong>Endereço</strong></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="tab-5" data-toggle="tab" href="#saldo" role="tab" aria-controls="tecnica" aria-selected="false"><strong>Saldo </strong></a>
          </li>
          <!-- <li class="nav-item">
            <a class="nav-link" id="tab-6" data-toggle="tab" href="#condicao" role="tab" aria-controls="tecnica" aria-selected="false"><strong>Condições de Pagamento</strong></a>
          </li> -->
          <li class="nav-item">
            <a class="nav-link" id="tab-7" data-toggle="tab" href="#historico" role="tab" aria-controls="tecnica" aria-selected="false"><strong>Histórico de Compra</strong></a>
          </li>
        </ul>
        <form method="post" enctype="multipart/form-data" action="{{route('clientes_reman.salvar')}}" id="formulario_cadastrar">
          <!-- Passando o Token -->
          {{csrf_field()}}
          <div class="tab-content border-top-0 " id="myTabContent">

            <div class="card-body tab-pane fade show active" id="dados-pessoais" role="tabpanel">
              <h6 class="heading-small text-muted mb-4">Dados Pessoais</h6>
              <div class="row">
                <div class="col-md-6 col-lg-6 col-sm-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">CNPJ/CPF</label>
                    <input type="text" clearifnotmatch="true" class="form-control form-control-alternative" id="cnpj" name="cnpj_cpf_cliente" placeholder="CNPJ ou CPF">
                  </div>
                </div>
                <div class="col-md-6 col-lg-6 col-sm-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Inscrição Estadual</label>
                    <input type="text" data-mask="000.000.000.000" class="form-control form-control-alternative" id="ie" name="ie_cliente" placeholder="IE">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-5 col-lg-5 col-sm-12">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Nome</label>
                    <input type="text" class="form-control form-control-alternative" id="nome" name="razao_cliente" placeholder="Nome do Cliente">
                  </div>
                </div>
                <div class="col-md-5 col-lg-5 col-sm-12">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Empresa</label>
                    <input type="text" class="form-control form-control-alternative" id="fantasia" name="fantasia_cliente" placeholder="Nome da Empresa">
                  </div>
                </div>

                <div class="col-md-1 col-lg-1 col-sm-12 mt-4">
                  <div class="custom-control custom-radio">
                    <input type="radio" id="Ativo1" name="status_cliente" value="1" class="custom-control-input" checked="on">
                    <label class="custom-control-label" for="Ativo1">Ativo</label>
                  </div>
                  <div class="custom-control custom-radio">
                    <input type="radio" id="Ativo2" name="status_cliente" value="0" class="custom-control-input">
                    <label class="custom-control-label" for="Ativo2">Inativo</label>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-5 col-lg-5 col-sm-12">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Email</label>
                    <input type="text" class="form-control form-control-alternative" id="email" name="email_cliente" placeholder="Nome do Cliente">
                  </div>
                </div>

                <div class="col-md-5 col-lg-5 col-sm-12">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Celular</label>
                    <input type="text" data-mask="(00) 00000-0000" class="form-control form-control-alternative" id="celular_cliente" name="celular_cliente" placeholder="Nome da Empresa">
                  </div>
                </div>

                <div class="col-md-2 col-lg-2 col-sm-12 mt-4">
                  <div class="custom-control custom-checkbox">
                    <input name="whatsapp_cliente" type="checkbox" class="custom-control-input" value="1" id="whatsapp_cliente">
                    <label class="custom-control-label" for="whatsapp_cliente">Whatsapp</label>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-6 col-lg-6 col-sm-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name"> RG</label>
                    <input data-mask="00.000.000-0" type="text" class="form-control form-control-alternative" name="rg_cliente" placeholder="Nº registro geral">
                  </div>
                </div>
                <div class="col-md-6 col-lg-6 col-sm-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name"> Data de Nascimento</label>
                    <input type="date" class="form-control form-control-alternative" name="nascimento_cliente">
                  </div>
                </div>
              </div>
            </div>
            <div class="card-body tab-pane fade" id="comercial" role="tabpanel">
              <div class="row">
                <div class="col-md-5 col-lg-5 col-sm-12">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Pessoa</label>
                    <select class="form-control form-control-alternative" name="pessoa_cliente" id="pessoa_cliente">
                      <option disabled selected>Pessoa</option>
                      <option>Física</option>
                      <option>Jurídica</option>
                      <option>Exterior</option>
                    </select>
                  </div>
                </div>

                <div class="col-md-5 col-lg-5 col-sm-12">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Tipo</label>
                    <select class="form-control form-control-alternative" name="tipo_cliente" id="tipo_cliente">
                      <option disabled selected>Tipo</option>
                      <option>Cliente</option>
                      <option>Fornecedor</option>
                      <option>Transportadora</option>
                    </select>
                  </div>
                </div>

                <div class="col-md-1 col-lg-1 col-sm-12 mt-4">
                  <div class="custom-control custom-radio">
                    <input type="radio" id="Consumidor1" name="consumidor_cliente" value="1" class="custom-control-input" checked="on">
                    <label class="custom-control-label" for="Consumidor1">Varejo</label>
                  </div>
                  @can('cadastrar-atacado')
                  <div class="custom-control custom-radio">
                    <input type="radio" id="Consumidor2" name="consumidor_cliente" value="2" class="custom-control-input">
                    <label class="custom-control-label" for="Consumidor2">Atacado</label>
                  </div>
                  @endcan
                </div>
              </div>

            </div>
            <div class="card-body tab-pane fade" id="endereco" role="tabpanel">
              <div class="row">
                <div class="col-md-6 col-lg-6 col-sm-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Cep</label>
                    <input type="text" data-mask="00000-000" class="form-control form-control-alternative" id="cep" name="cep_cliente" placeholder="CEP">
                  </div>
                </div>
                <div class="col-md-6 col-lg-6 col-sm-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Casa</label>
                    <input type="number" class="form-control form-control-alternative" id="numero" name="casa_cliente" placeholder="número da casa">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-lg-6 col-sm-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Rua</label>
                    <input type="text" class="form-control form-control-alternative" id="logadouro" name="rua_cliente" placeholder="Rua">
                  </div>
                </div>
                <div class="col-md-6 col-lg-6 col-sm-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Bairro</label>
                    <input type="text" class="form-control form-control-alternative" id="bairro" name="bairro_cliente" placeholder="Bairro">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-lg-6 col-sm-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Cidade</label>
                    <input type="text" class="form-control form-control-alternative" id="cidade" name="cidade_cliente" placeholder="Cidade">
                  </div>
                </div>
                <div class="col-md-6 col-lg-6 col-sm-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Estado</label>
                    <select class="form-control form-control-alternative" name="uf_cliente" id="uf_cliente">
                      <option value="SP">São Paulo</option>
                      <option value="AL">Alagoas</option>
                      <option value="AP">Amapá</option>
                      <option value="AM">Amazonas</option>
                      <option value="BA">Bahia</option>
                      <option value="CE">Ceará</option>
                      <option value="DF">Distrito Federal</option>
                      <option value="ES">Espírito Santo</option>
                      <option value="GO">Goiás</option>
                      <option value="MA">Maranhão</option>
                      <option value="MT">Mato Grosso</option>
                      <option value="MS">Mato Grosso do Sul</option>
                      <option value="MG">Minas Gerais</option>
                      <option value="PA">Pará</option>
                      <option value="PB">Paraíba</option>
                      <option value="PR">Paraná</option>
                      <option value="PE">Pernambuco</option>
                      <option value="PI">Piauí</option>
                      <option value="RJ">Rio de Janeiro</option>
                      <option value="RN">Rio Grande do Norte</option>
                      <option value="RS">Rio Grande do Sul</option>
                      <option value="RO">Rondônia</option>
                      <option value="RR">Roraima</option>
                      <option value="SC">Santa Catarina</option>
                      <option value="SE">Sergipe</option>
                      <option value="TO">Tocantins</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Ponto de Referência</label>
                    <input type="text" class="form-control form-control-alternative" id="ponto_referencia_cliente" name="ponto_referencia_cliente" placeholder="Locais proximos conhecidos">
                  </div>
                </div>
                <div class="col-md-6 col-lg-6 col-sm-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Código do munícipio</label>
                    <input type="number" class="form-control form-control-alternative" maxlength="10" min="0" id="codigo_cidade_cliente" name="codigo_cidade_cliente">
                    <small><a href="http://www.roseno.info/cidadesconsulta.aspx" target="_blank" class="text-warning h5 font-weight-bold">Pesquisar código do munícipio</a></small>
                  </div>
                </div>
              </div>
            </div>

            <div class="card-body tab-pane fade" id="saldo" role="tabpanel">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Saldo</label>
                    <input type="number" class="form-control form-control-alternative" id="saldo_cliente" name="saldo_cliente" placeholder="Saldo do cliente">
                  </div>
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Limite de Crédito</label>
                    <input type="number" class="form-control form-control-alternative" id="limite_cliente" name="limite_cliente" placeholder="Limite do cliente">
                  </div>
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Limite Utilizado</label>
                    <input type="number" class="form-control form-control-alternative" id="utilizado_cliente" name="utilizado_cliente" placeholder="Valor já usado pelo cliente">
                  </div>
                </div>
                <div class="col-md-6">
                  <label class="form-control-label" for="input-name">Extrato do Saldo</label>
                  <textarea class="form-control form-control-alternative" id="extrato_saldo" rows="11" disabled></textarea>
                </div>
              </div>
            </div>
            <div class="card-body tab-pane fade d-none" id="condicao" role="tabpanel">
              <div class="row">
                <div class="col-md-6">
                  <label class="form-control-label" for="input-name">Condição</label>
                  <div class="inputGroup">
                    <input type="checkbox" id="check-avista" value="A VISTA" name="check-condicao[0]" class="custom-control-input">
                    <label class="font-weight-bold" for="check-avista">A vista</label>
                  </div>
                  <div class="inputGroup">
                    <input type="checkbox" id="check-aprazo" value="A PRAZO" name="check-condicao[1]" class="custom-control-input">
                    <label class="font-weight-bold" for="check-aprazo">A prazo</label>
                  </div>
                </div>
                <div class="col-md-6">
                  <label class="form-control-label" for="input-name">Formas de Pagamento</label>
                  <div class="inputGroup">
                    <input type="checkbox" id="check-dinheiro" value="DINHEIRO" name="check-forma[0]" class="custom-control-input">
                    <label class="font-weight-bold" for="check-dinheiro">Dinheiro</label>
                  </div>
                  <div class="inputGroup">
                    <input type="checkbox" id="check-cheque-avista" value="CHEQUE AVISTA" name="check-forma[1]" class="custom-control-input">
                    <label class="font-weight-bold" for="check-cheque-avista">Cheque a vista</label>
                  </div>
                  <div class="inputGroup">
                    <input type="checkbox" id="check-cheque-predatado" value="CHEQUE PREDATADO" name="check-forma[2]" class="custom-control-input">
                    <label class="font-weight-bold" for="check-cheque-predatado">Cheque pre-datado</label>
                  </div>
                  <div class="inputGroup">
                    <input type="checkbox" id="check-pag-antecipado" value="PAGAMENTO ANTECIPADO" name="check-forma[3]" class="custom-control-input">
                    <label class="font-weight-bold" for="check-pag-antecipado">Pagamento Atecipado</label>
                  </div>
                  <div class="inputGroup">
                    <input type="checkbox" id="check-card-cred" value="CARTAO DE CREDITO" name="check-forma[4]" class="custom-control-input">
                    <label class="font-weight-bold" for="check-card-cred">Cartão de crédito</label>
                  </div>
                  <div class="inputGroup">
                    <input type="checkbox" id="check-card-debt" value="CARTAO DE DEBITO" name="check-forma[5]" class="custom-control-input">
                    <label class="font-weight-bold" for="check-card-debt">Cartão de débito</label>
                  </div>
                  <div class="inputGroup">
                    <input type="checkbox" id="check-boleto" value="BOLETO" name="check-forma[6]" class="custom-control-input">
                    <label class="font-weight-bold" for="check-boleto">Boleto</label>
                  </div>
                  <div class="inputGroup">
                    <input type="checkbox" id="check-saldo" value="SALDO ANTERIOR" name="check-forma[7]" class="custom-control-input">
                    <label class="font-weight-bold" for="check-saldo">Saldo Anterior</label>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-body tab-pane fade" id="historico" role="tabpanel">
              <div class="row">
                <img class="mx-auto" src="http://gedamambiental.com.br/wp-content/uploads/2015/09/manutencao3.jpg" alt="pagina em manutenção">
              </div>
            </div>

            @can('adicionar-clientes')
            <div class="text-center">
              <button type="submit" class="btn btn-success my-2">
                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;">Salvar</font>
                </font>
              </button>
            </div>
            @endcan
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endcan
<div class="modal fade" id="modal_cadastro_clientes" tabindex="-1" role="dialog" aria-labelledby="modal_cadastro_clientes" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="mx-auto text-info text-uppercase">Cadastro incompleto</h2>
      </div>
      <div class="modal-body">
        <div class="texto-alerta">

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default text-white font-weight-bold" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

@endsection

@push('js')
<!--Arquivo de JS criado por nós para editar as partes lógicas do sistema  -->
<script type="text/javascript" src="{{ asset('js/clientes_cadastrar.js') }}"></script>
<script>
  $("#cnpj").keydown(function() {
    try {
      $("#cnpj").unmask();
    } catch (e) {}

    var tamanho = $("#cnpj").val().length;

    if (tamanho < 11) {
      $("#cnpj").mask("999.999.999-99");
    } else if (tamanho >= 11) {
      $("#cnpj").mask("99.999.999/9999-99");
    }

    // ajustando foco
    var elem = this;
    setTimeout(function() {
      // mudo a posição do seletor
      elem.selectionStart = elem.selectionEnd = 10000;
    }, 0);
    // reaplico o valor para mudar o foco
    var currentValue = $(this).val();
    $(this).val('');
    $(this).val(currentValue);
  });
</script>

@endpush