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

<link rel="stylesheet" href="{{ asset('argon') }}/vendor/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/wizard/wizard.css">
@section('title', 'Cadastrar Produto')
@section('content')

@include('../layouts.headers.cards_prod')


<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-8">
              <h3 class="mb-0">Cadastro de Cliente</h3>
            </div>
            <div class="col-4 text-right">
              <a href="#" class="btn btn-sm btn-primary">{{ __('Voltar para lista') }}</a>
            </div>
          </div>
        </div>
        <div class="card-body">
          <form method="post" action="{{route('clientes_reman.salvar')}}" id="signup-form" class="signup-form" enctype="multipart/form-data">
            {{csrf_field()}}

            <h3>
              Dados Pessoais
            </h3>
            <fieldset>
              <div class="row">
                <div class="col-md-4">
                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title text-center mb-2">Basicos</h5>
                      <div class="form-group">
                        <input type="text" class="form-control" id="nome_cliente" name="razao_cliente" placeholder="Razão Social">
                      </div>
                      <div class="form-group">
                        <input type="text" class="form-control" id="fantasia_cliente" name="fantasia_cliente" placeholder="Nome Fantasia">
                      </div>
                      <div class="form-group">
                        <input type="date" class="form-control" name="nascimento_cliente" placeholder="data de nascimento">
                      </div>
                      <input type="hidden" name="status_cliente" value="1">
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title text-center mb-2">Documentos</h5>
                      <div class="form-group">
                        <input type="text" clearifnotmatch="true" class="form-control" id="cnpj" name="cnpj_cpf_cliente" placeholder="CNPJ ou CPF">
                      </div>
                      <div class="form-group">
                        <input type="text" data-mask="000.000.000.000" class="form-control" id="ie_cliente" name="ie_cliente" placeholder="IE">
                      </div>
                      <div class="form-group">
                        <input data-mask="00.000.000-0" type="text" class="form-control" name="rg_cliente" placeholder="RG">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title text-center mb-2">Contato</h5>
                      <div class="form-group">
                        <input type="text" data-mask="(00) 00000-0000" class="form-control" id="celular_cliente" name="celular_cliente" placeholder="Celular">
                      </div>
                      <div class="form-group">
                        <input type="text" data-mask="(00) 00000-0000" class="form-control" id="telefone_cliente" name="telefone_cliente" placeholder="Telefone">
                      </div>
                      <div class="form-group">
                        <input type="email" class="form-control" id="email" name="email_cliente" placeholder="Email do Cliente">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </fieldset>

            <h3>
              Endereço
            </h3>
            <fieldset>
              <div class="row">
                <div class="col-md-4">
                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title text-center mb-2">CEP</h5>
                      <div class="form-group">
                        <input type="text" data-mask="00000-000" class="form-control " id="cep_cliente" name="cep_cliente" placeholder="CEP">
                      </div>
                      <div class="form-group">
                        <input type="number" class="form-control" id="numero" name="casa_cliente" placeholder="número da casa">
                      </div>
                      <div class="form-group">
                        <input type="text" class="form-control" id="ponto_referencia_cliente" name="ponto_referencia_cliente" placeholder="Locais proximos conhecidos">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-8">
                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title text-center mb-2">Logradouro</h5>
                      <div class="row">
                        <div class="col-md-6 col-lg-6 col-sm-6">
                          <div class="form-group">
                            <input type="text" class="form-control" id="logradouro" name="rua_cliente" placeholder="Rua">
                          </div>
                        </div>
                        <div class="col-md-6 col-lg-6 col-sm-6">
                          <div class="form-group">
                            <input type="text" class="form-control " 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">
                            <input type="text" class="form-control " id="cidade" name="cidade_cliente" placeholder="Cidade">
                          </div>
                        </div>
                        <div class="col-md-6 col-lg-6 col-sm-6">
                          <div class="form-group">
                            <select class="form-control " name="uf_cliente" id="uf_cliente">
                              <option id="option_uf" value=""></option>
                              <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-md-12 col-lg-12 col-sm-6">
                          <div class="form-group">
                            <div class="input-group mb-3">
                              <input type="number" class="form-control " maxlength="10" min="0" id="codigo_cidade_cliente" name="codigo_cidade_cliente" placeholder="Codigo da cidade ">
                              <div class="input-group-append">
                                <a href="http://www.roseno.info/cidadesconsulta.aspx" target="_blank" class="btn btn-outline-primary py-2 px-3"><i class="fas fa-search-location fa-2x"></i></a>
                              </div>
                            </div>


                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </fieldset>

            <h3>
              Financeiro
            </h3>
            <fieldset>
              <div class="row">
                <div class="col-md-4">
                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title text-center mb-2">Fiscal</h5>
                      <div class="form-group">
                        <select class="form-control" 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 class="form-group">
                        <select class="form-control " name="tipo_cliente" id="tipo_cliente">
                          <option disabled selected>Tipo</option>
                          <option>Cliente</option>
                          <option>Fornecedor</option>
                          <option>Transportadora</option>
                        </select>
                      </div>
                      <div class="form-group">
                        <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>
                <div class="col-md-4">
                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title text-center mb-2">Financeiro</h5>
                      <div class="form-group">
                        <input type="number" class="form-control" readonly value="0.00" id="saldo_cliente" name="saldo_cliente" placeholder="Saldo do cliente"> </div>
                      <div class="form-group">
                        <input type="number" class="form-control" readonly value="0.00" id="limite_cliente" name="limite_cliente" placeholder="Limite do cliente">
                      </div>
                      <div class="form-group">
                        <input type="number" class="form-control" readonly value="0.00" id="utilizado_cliente" name="utilizado_cliente" placeholder="Valor já usado pelo cliente">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title text-center mb-2">Observação</h5>
                      <div class="form-group">
                        <textarea class="form-control" name='observao_participante' id="observao_participante" rows="7"></textarea>
                      </div>
                    </div>
                  </div>
                </div>
            </fieldset>

          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('js')
<script src="{{ asset('argon') }}/vendor/dropzone/dist/min/dropzone.min.js"></script>
<script src="{{ asset('argon') }}/vendor/select2/dist/js/select2.min.js"></script>
<script src="{{ asset('argon') }}/vendor/wizard/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="{{ asset('argon') }}/vendor/wizard/jquery-validation/dist/additional-methods.min.js"></script>
<script src="{{ asset('argon') }}/vendor/wizard/jquery-steps/jquery.steps.min.js"></script>
<script src="{{ asset('argon') }}/vendor/wizard/wizard.js"></script>
<!--Arquivo de JS criado por nós para editar as partes lógicas do sistema  -->
<script type="text/javascript" src="{{ asset('js/produtos_cadastrar.js') }}"></script>

<script>
  function adicionar() {
    var ing = document.getElementById("ingrediente").value;
    var lista = document.getElementById("lista").innerHTML;
    lista = lista + "<li>" + ing + "</li>";
    document.getElementById("lista").innerHTML = lista;
  }
</script>

<script>
  $("#custom-file-input").change(function() {
    var arquivo = $("#custom-file-input").val();
    $("#custom-file-label").html(arquivo);
  });
</script>

<script>
  var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
  $(document).ready(function() {
    $('.select_produto').select2({
      tags: true,
      placeholder: 'Selecione um produto',
      ajax: {
        url: "{{ route('os.select2_produto') }}",
        type: "get",
        dataType: 'json',
        delay: 250,
        data: function(params) {
          return {
            _token: CSRF_TOKEN,
            search: params.term // search term
          };
        },
        processResults: function(data) {
          // console.log(response);
          return {
            results: data
          };
        },
        cache: true
      }
    }).on('select2:select', function(e) {
      var data = e.params.data;
      $(this).children('[value="' + data['id'] + '"]').attr({
        'selected': 'selected'
      });
      // document.getElementById('nome_produto').setAttribute("value", data["text"]);
      // document.getElementById('id_marca').setAttribute("value", data["id_marca"]);
      // document.getElementById('id_marca').innerHTML = data["nome_marca"];
    }).val(0).trigger('change');
  });
</script>

<script>
  $("a[href='#finish']").click(function() {
    $("a[href='#finish']").replaceWith("<button type='submit' class='btn btn-success'>Cadastrar</button>");
  });
</script>

<script>
  $(document).on('change', '#cep_cliente', function() {
    let cep = $(this).val();
    let CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    $.ajax({
      url: "/clientes_reman/cep/" + cep,
      method: 'post',
      dataType: 'json',
      data: {
        _token: CSRF_TOKEN,
        id: cep
      },
      timeout: 5000,
      success: function(retorno) {

        $('#logradouro').val(retorno.logradouro);
        $('#bairro').val(retorno.bairro);
        $('#cidade').val(retorno.localidade);
        $('#option_uf').val(retorno.uf);
        $('#option_uf').text(retorno.uf);
        $('#option_uf').attr('selected','selected');
        $('#codigo_cidade_cliente').val(retorno.ibge);

      },
      error: function() {
        alert('Dados não enviados');
      }
    });
  });
</script>
@endpush