@extends('layouts.front.app')

@section('content')

@php
use Illuminate\Support\Str;
@endphp

<section>
  <div class="container my-3">
    <nav>
      <ol class="breadcrumb primary">
        <li>
          <a href="{{ route('home') }}"
          class="text-white font-weight-bold">
          <i class="fa fa-home"></i> Home
          <i class="mx-2 fas fa-angle-double-right"></i>
        </a>
      </li>
      <li class="text-white font-weight-bolder">Login</li>
    </ol>
  </nav>
</div>
</section>

<section>
  <div class="container mb-3">

    <div class="row row-login">

      <div class="mb-2 col-lg-6 border-right">

        <div class="card-body">

          <form action="{{ route('login-integrado') }}"
          method="post"
          id="formNewLogin">
          {{ csrf_field() }}
          <p class="py-4 text-center h4 outer-grey-text">J&aacute; sou cadastrado</p>

          @if (config('site.login.ativa_cpf') )
          <label for="cpf_cnpj"
          class="outer-grey-text font-weight-bolder fosco-text">CPF / CNPJ </label>
          <input type="text"
          name="cliente_cnpj"
          id="cpf_cnpj"
          class="form-control cliente_cnpj"
          required>

          <br>

          @elseif (config('site.login.ativa_email') )
          <label for="email"
          class="outer-grey-text font-weight-bolder fosco-text">Email </label>
          <input type="email"
          name="cliente_email"
          class="form-control"
          required>

          <br>
          @else
          <label for="cliente_cnpj"
          class="outer-grey-text font-weight-bolder fosco-text">CNPJ </label>
          <input type="text"
          id="cliente_cnpj_login"
          name="cliente_cnpj"
          class="form-control cliente_cnpj"
          required>

          <br>
          @endif

          <label for="cliente_senha"
          class="outer-grey-text font-weight-bolder fosco-text">Senha</label>
          <input type="password"
          name="cliente_senha"
          class="form-control"
          required>

          <div class="my-4 text-center">
            <button class="btn btn-outline-success btn-lg btn-envia"
            type="submit">
            Entrar<i class="ml-2 fas fa-sign-in-alt"></i>
          </button>

          @if (config('site.login.ativa_login_social') === "1")

          <div class="mt-1 text-center btn-group options text-md-right"
          role="group">
          <a class="btn btn-lg btn-red font-weight-bolder"
          href="{{ url('login/google') }}"
          role="button">
          <i class="pr-1 fab fa-google-plus-g"></i> Google +
        </a>
        {{-- <a class="btn btn-xs btn-indigo font-weight-bolder" href="{{ url('login/facebook') }}"
        role="button"><i class="pr-1 fab fa-facebook-f"></i> Facebook</a> --}}
      </div>

      @endif

    </div>

    <div class="text-center">
      <a href="{{route('password.solicita-senha')}}"
      class="text-white btn btn-md box-red font-weight-bold btn-envia">
      Esqueci ou não possuo a senha
    </a>
  </div>

</form>
<!-- Default form subscription -->

</div>

</div>

<div class="col-lg-6">

  <div class="card-body card-mobile">

    <!-- Default form subscription -->
    <p class="py-4 text-center h4 outer-grey-text">Sou um novo cliente</p>

    <p class="card-text outer-grey-text">Cadastre-se e tenha acesso a conte&uacute;do exclusivo da </p>
    <h5><strong>{!! Str::title(config('app.name')) !!}</strong></h5>
    <a class="btn btn-green btn-lg font-weight-bolder card-link cadastre-se">Cadastre-se</a>

    <!-- Default form subscription -->

  </div>

  @if(config('site.domain') === 'strobeletro')
  <div class="my-5 text-center">
    <img src="{{ asset("storage/img/bannerstrob.png")}}"
    width="208"
    alt="{{ config('app.name')}}">
  </div>
  @endif

</div>

</div>
<!-- ./LOGIN -->

<!-- Cadastro -->
<div class="row row-cadastro">
  <div class="col-lg">

    <div class="col-lg-12"
    id="errorCadastro">
    <div class="alert alert-warning errorCadastro"
    role="alert"> </div>
  </div>

  <form id="form-cadastro"
  role="form"
  method="POST"
  action="{{ route('cadastro-integrado') }}">
  {{ csrf_field() }}
  <input type="hidden"
  name="emp_cli_ls"
  value="{{ config('site.emp_cli_ls')}}">

  <div class="card-body">
    <div class="row">
      <div class="col-lg-6">
        <div class="my-1 md-form">
          @if (intval(config('site.login.ativa_cpf')) === 1)
          <label for="cliente_cpf_cnpj">CPF / CNPJ <span class="text-danger">*</span></label>
          <input type="text"
          name="cliente_cnpj"
          class="form-control cliente_cnpj input_cliente_cnpj"
          value="{!! old('cliente_cnpj') !!}"
          maxlength="20"
          required>
          @else
          <label for="cliente_cnpj">CNPJ <span class="text-danger">*</span></label>
          <input type="text"
          name="cliente_cnpj"
          class="form-control"
          value="{!! old('cliente_cnpj') !!}"
          maxlength="20"
          required>
          @endif
        </div>
      </div>

      <div class="col-lg">
        <div class="my-1 md-form">
          <label for="cliente_razao">@if (intval(config('site.login.ativa_cpf')) === 0)Raz&atilde;o Social @else
            Nome completo / Raz&atilde;o Social @endif<span class="text-danger">*</span></label>
            <input type="text"
            name="cliente_razao"
            class="form-control text-uppercase"
            value="{!! old('cliente_razao') !!}"
            maxlength="100"
            minlength="4"
            required>
          </div>
        </div>
      </div>

      @if (intval(config('site.login.ativa_cpf')) === 0)
      <div class="row">
        <div class="col-lg-6">
          <div class="my-1 md-form">
            <label for="cliente_fantasia">Nome fantasia <span class="text-danger">*</span></label>
            <input type="text"
            name="cliente_fantasia"
            class="form-control"
            value="{!! old('cliente_fantasia') !!}"
            maxlength="30"
            required>
          </div>
        </div>

        <div class="col-lg-6">
          <div class="my-1 md-form">
            <label for="cliente_fone1">Telefone <span class="text-danger">*</span></label>
            <input type="text"
            name="cliente_fone1"
            class="form-control mask_fone"
            value="{!! old('cliente_fone1') !!}"
            maxlength="20"
            required>
          </div>
        </div>
      </div>
      @endif

      <div class="row">
        <div class="col-lg-6">
          <div class="my-1 md-form">
            <label for="cliente_email">Email <span class="text-danger">*</span></label>
            <input type="email"
            name="cliente_email"
            class="form-control"
            value="{!! old('cliente_email', (auth()->check()) ? auth()->user()->email : null) !!}"
            maxlength="70"
            @if(auth()->check()) readonly @endif required>
          </div>
        </div>

        <div class="col-lg">
          <div class="my-1 md-form">
            <label for="cliente_celular">Celular <span class="text-danger">*</span></label>
            <input type="text"
            name="cliente_celular"
            class="form-control mask_celular"
            value="{!! old('cliente_celular') !!}"
            maxlength="20"
            required>
          </div>

        </div>
      </div>

      @if (intval(config('site.login.ativa_cpf')) === 0)
      <div class="row">
        <div class="col-lg-6">
          <div class="my-1 md-form">
            <label for="cliente_ie">Inscri&ccedil;&atilde;o Municipal</label>
            <input type="text"
            name="cliente_ie"
            class="form-control"
            value="{!! old('cliente_ie') !!}"
            maxlength="20">
          </div>
        </div>

        <div class="col-lg-6">
          <div class="my-1 md-form">
            <label for="cliente_ie">Inscri&ccedil;&atilde;o Estadual</label>
            <input type="text"
            name="cliente_ie"
            class="form-control"
            value="{!! old('cliente_ie') !!}"
            maxlength="20"
            disabled>
          </div>
        </div>
      </div>
      @endif

      <div class="row">
        <div class="col-lg-6">
          <div class="my-1 md-form">
            <label for="cliente_cep">CEP <span class="text-danger">*</span></label>
            <input type="text"
            name="cliente_cep"
            class="form-control"
            value="{!! old('cliente_cep') !!}"
            maxlength="10"
            required>
          </div>
        </div>

        <div class="col-lg-6">
          <div class="my-1 md-form">
            <label for="cliente_logradouro">Logradouro</label>
            <input type="text"
            name="cliente_logradouro"
            class="form-control"
            value="{!! old('cliente_logradouro') !!}"
            maxlength="50"
            readonly
            required>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-3">
          <div class="my-1 md-form">
            <label for="cliente_numero">N&uacute;mero <span class="text-danger">*</span></label>
            <input type="text"
            name="cliente_numero"
            class="form-control"
            value="{!! old('cliente_numero') !!}"
            maxlength="6"
            required>
          </div>
        </div>
        <div class="col-lg-3">
          <div class="my-1 md-form">
            <label for="cliente_complem">Complemento </label>
            <input type="text"
            name="cliente_complem"
            class="form-control"
            value="{!! old('cliente_complem') !!}"
            maxlength="20">
          </div>
        </div>

        <div class="col-lg-6">
          <div class="my-1 md-form">
            <label for="cliente_bairro">Bairro</label>
            <input type="text"
            name="cliente_bairro"
            class="form-control"
            value="{!! old('cliente_bairro') !!}"
            maxlength="20"
            readonly
            required>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-6">
          <div class="my-1 md-form">
            <label for="cliente_municipio">Cidade <span class="text-danger">*</span></label>
            <input type="text"
            name="cliente_municipio"
            class="form-control"
            value="{!! old('cliente_municipio') !!}"
            maxlength="2"
            readonly>
            <input type="hidden"
            name="cliente_id_municipio"
            value="">
          </div>
        </div>

        @if (config('site.obriga_insc_estadual'))

        <div class="col-lg-2 uf_insc_estadual">
          <div class="my-1 md-form">
            <label for="cliente_uf">UF <span class="text-danger">*</span></label>
            <input type="text"
            name="cliente_uf"
            class="form-control"
            value="{!! old('cliente_uf') !!}"
            maxlength="2"
            readonly>
          </div>
        </div>

        <div class="col-lg-3 insc_estadual">
          <div class="my-1 md-form">
            <label for="cliente_ie">Inscri&ccedil;&atilde;o Estadual <span class="text-danger">*</span></label>
            <input type="text"
            name="cliente_ie"
            class="form-control input_insc_estadual"
            value="{!! old('cliente_ie') !!}"
            maxlength="20"
            disabled>
          </div>
        </div>

        <div class="col-lg">
          <div class="my-1 md-form">
            <label></label>
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="isento">
              <label class="custom-control-label" for="isento">Isento</label>
            </div>
          </div>
        </div>

        @else

        <div class="col-lg-6">
          <div class="my-1 md-form">
            <label for="cliente_uf">UF <span class="text-danger">*</span></label>
            <input type="text"
            name="cliente_uf"
            class="form-control"
            value="{!! old('cliente_uf') !!}"
            maxlength="2"
            readonly>
          </div>
        </div>

        @endif
      </div>

      @if(intval(config('site.login.ativa_cpf')) === 1)
      <div class="row">
        <div class="col-lg-6">
          <div class="my-1 md-form">
            <label for="cliente_senha">Crie sua senha para o site: <span class="text-danger">*</span></label>
            <input type="password"
            name="cliente_senha"
            class="form-control"
            value="{!! old('cliente_senha') !!}"
            maxlength="100"
            required>
          </div>
        </div>

        <div class="col-lg-6">
          <div class="my-1 md-form">
            <label for="cliente_senha_confirma">Repita a senha para o site: <span
              class="text-danger">*</span></label>
              <input type="password"
              name="cliente_senha_confirma"
              class="form-control"
              value="{!! old('cliente_senha_confirma') !!}"
              maxlength="100"
              required>
            </div>
          </div>

        </div>

        @endif

        @if (intval(config('site.login.ativa_cpf')) === 0)
        <hr />
        <p class="mb-4 h5-responsive">Dados para o contato</p>

        <div class="row">
          <div class="col-lg-6">
            <div class="my-1 md-form">
              <label for="cliente_contato_nome">Nome do contato <span class="text-danger">*</span></label>
              <input type="text"
              name="cliente_contato_nome"
              class="form-control"
              value="{!! old('cliente_contato_nome') !!}"
              maxlength="100"
              required>
            </div>
          </div>

          <div class="col-lg-6">
            <div class="my-1 md-form">
              <label for="cliente_contato_cargo">Cargo / Fun&ccedil;&atilde;o <span
                class="text-danger">*</span></label>
                <input type="text"
                name="cliente_contato_cargo"
                class="form-control"
                value="{!! old('cliente_contato_cargo') !!}"
                maxlength="50"
                required>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-lg-6">
              <div class="my-1 md-form">
                <label for="cliente_contato_fone">Telefone </label>
                <input type="text"
                id="cliente_contato_fone"
                name="cliente_contato_fone"
                class="form-control mask_fone"
                value="{!! old('cliente_contato_fone') !!}"
                maxlength="20">
              </div>
            </div>

            <div class="col-lg-6">
              <div class="my-1 md-form">
                <label for="cliente_contato_celular">Celular <span class="text-danger">*</span></label>
                <input type="text"
                name="cliente_contato_celular"
                class="form-control mask_celular"
                value="{!! old('cliente_contato_celular') !!}"
                maxlength="20"
                required>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-lg-6">
              <div class="my-1 md-form">
                <label for="cliente_contato_email">Email <span class="text-danger">*</span></label>
                <input type="email"
                name="cliente_contato_email"
                class="form-control"
                value="{!! old('cliente_contato_email') !!}"
                maxlength="100">
              </div>
            </div>

          </div>

          @endif

          <div class="mx-auto">

            <div class="my-1 mt-2 text-center form-sm">
              <button class="my-3 btn btn-lg box-green btn-envia"
              id="btnCadEndModal">Cadastrar
              <i class="ml-2 fas fa-sign-in-alt"></i>
            </button>
            <div class="my-3">
              <a class="text-center text-info font-weight-bolder card-link logar-se pointer h6">
                Já sou cadastrado, quero efetuar o login.
              </a>
            </div>
          </div>

          @if(config('site.domain') === 'strobeletro')

          <div class="view">
            <img src="{{ asset("storage/img/bannerstrob.png")}}"
            class="mx-auto"
            height="208"
            alt="{{ config('app.name')}}">
          </div>

          @endif

        </div>

      </div>

    </form>

  </div>

</div>

</div>
</section>

@endsection

@section('js')
<script src="{{ mix('js/jquery.mask.js') }}"></script>
<script src="{{ mix('js/jquery-ui.min.js') }}"></script>
<script src="{{ mix('js/axios.js') }}"></script>
<script src="{{ mix('js/valida_cpf_cnpj.js') }}"></script>
<script src="{{ mix('js/tokdacasa_script.js') }}"></script>
<script type="text/javascript">
  function carregaEstados (uf = null, cep = false) {
    $.ajax({
      url: '/api/estado/',
      contentType: 'json',
      success: function (resultado) {
        let _htmlOptions
        $(resultado).each(function(i,estado){
          _htmlOptions += "<option value='"+estado.uf+"'"
          if (uf === estado.uf) {
            _htmlOptions += ' selected="selected" '
          }
          _htmlOptions += ">"+estado.nome_uf+"</option>"
        });
        $('#state_code').append(_htmlOptions)
        $('.select2').select2()
        if(!cep) {
          carregaCidades (uf)
        }
      }
    })
  }

  function carregaCidades (uf = null, cod_cidade = null) {
    $('#city').empty()
    $('#city').append('<option>Aguarde...</option>')
    $.ajax({
      url: '/api/cidade/' + uf,
      contentType: 'json',
      success: function (resultado) {
        let _htmlOptions
        _htmlOptions = 'Aguarde ... '
        $(resultado).each(function(i,cidade){
          _htmlOptions += "<option value='"+cidade.cod_municipio_completo+"'"
          if (cod_cidade === cidade.cod_municipio_completo) {
            _htmlOptions += ' selected="selected" '
            $('input[name=nome_municipio]').val(cidade.nome_municipio)
          }
          _htmlOptions += ">"+cidade.nome_municipio+"</option>"
        });
        $('#city').append(_htmlOptions)
      }
    })
  }

  var token = document.head.querySelector('meta[name="csrf-token"]')
  axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
  $(document).ready(function(){
    let base_url = "{!! url('/') !!}"
    let ativa_cpf = "{!! config('site.ativa_cpf') !!}"

    let options = {
      onKeyPress: function (cpf, ev, el, op) {
        var masks = ['000.000.000-000', '00.000.000/0000-00'];
        $('.cliente_cnpj').mask((cpf.length > 14) ? masks[1] : masks[0], op);
      }
    }
    $('.cliente_cnpj').length > 14 ? $('.cliente_cnpj').mask('00.000.000/0000-00', options) : $('.cliente_cnpj').mask('000.000.000-00', options)

    // Exibe ou não a inscrição estadual para os que solicitam obrigatoriedade
    $('.insc_estadual').hide()
    $('.uf_insc_estadual').removeClass('col-lg-2').addClass('col-lg-6')

    $('.input_cliente_cnpj').on('keyup', function(){
      if($(this).val().length <= 14)  {
        $('.insc_estadual').hide()
        $('.input_insc_estadual').removeAttr('required').attr('disabled', true)
        $('.uf_insc_estadual').removeClass('col-lg-2').addClass('col-lg-6')
      } else {
        $('.uf_insc_estadual').removeClass('col-lg-6').addClass('col-lg-2')
        $('.input_insc_estadual').removeAttr('disabled').attr('required', true)
        $('.insc_estadual').show()
      }
    })
    // ./ Exibe ou não a inscrição estadual para os que solicitam obrigatoriedade

    $("#isento").on('click', function(){
      if ($("#isento").is(':checked')) {
        $('.input_insc_estadual').unmask()
        $('.input_insc_estadual').attr('readonly', true)
        $('.input_insc_estadual').val("INSENTO")  // checked
      } else{
        $('.input_insc_estadual').mask('000000000');  // unchecked
        $('.input_insc_estadual').removeAttr('readonly')
      }
    })
    $('.input_insc_estadual').on('keydown', function () {
      let uf = $('input[name=cliente_uf]').val()
      if((uf === '') || (uf === null)) {
        $("#modalAviso").on('show.bs.modal', function() {
          $('.modal-title').empty()
          $('.modal-title').html('Informe o CEP')
          $('.modal-body').html('Informe o CEP para buscar a sua UF')
        })
        $("#modalAviso").modal('show')
        $('input[name=cliente_cep]').focus()
        return false
      }
      let masked = '000000000';
      if (uf === 'AC') masked = '00.000.000/000-00';
      if (uf === 'AL') masked = '000000000';
      if (uf === 'AP') masked = '000000000';
      if (uf === 'AM') masked = '00.000.000-0';
      if (uf === 'BA') masked = '000000-00';
      if (uf === 'CE') masked = '00000000-0';
      if (uf === 'DF') masked = '00000000000-00';
      if (uf === 'ES') masked = '000000000';
      if (uf === 'GO') masked = '00.000.000-0';
      if (uf === 'MA') masked = '000000000';
      if (uf === 'MT') masked = '0000000000-0';
      if (uf === 'MS') masked = '000000000';
      if (uf === 'MG') masked = '000.000.000/0000';
      if (uf === 'PA') masked = '00-000000-0';
      if (uf === 'PB') masked = '00000000-0';
      if (uf === 'PR') masked = '00000000-00';
      if (uf === 'PE') masked = '00.0.000.0000000-0';
      if (uf === 'PI') masked = '000000000';
      if (uf === 'RJ') masked = '00.000.00-0';
      if (uf === 'RN') masked = '00.000.000-0';
      if (uf === 'RS') masked = '000/0000000';
      if (uf === 'RO') masked = '000.00000-0';
      if (uf === 'RR') masked = '00000000-0';
      if (uf === 'SC') masked = '000.000.000';
      if (uf === 'SP') masked = '000.000.000.000';
      if (uf === 'SE') masked = '000000000-0';
      if (uf === 'TO') masked = '00000000000';

      $('.input_insc_estadual').mask(masked);
    })

    $('input[name=cliente_cnpj]').on('blur', function (){
      console.log($('input[name=cliente_cnpj]').length)
      if(ativa_cpf === 0) {
      }
    })

    $('input[name=cliente_cep]').on('blur', function(){
      $("#modalAviso").on('show.bs.modal', function() {
        $('.modal-title').empty()
        $('.modal-title').html('Buscando o endereço...')
        $('.modal-body').html('Aguarde enquanto buscamos o endereço...')
      })
      $("#modalAviso").modal('show')
      let cep = $(this).val()
      axios.get( base_url + '/api/cep/' + cep, {headers: {'Accept': 'application/json'}})
      .then((response)=>{
        let retorno = response.data
        console.log('Retorno Endereço', retorno)
        $('input[name=cliente_logradouro]').val(retorno.logradouro)
        $('input[name=cliente_bairro]').val(retorno.bairro)

        if(retorno.logradouro === '') {
          $('input[name=cliente_logradouro]').val('Não informado')
          $('input[name=cliente_logradouro]').removeAttr('readonly')
        } else {
          $('input[name=cliente_logradouro]').attr('readonly', true)
        }

        if(retorno.bairro === '') {
          $('input[name=cliente_bairro]').val('Não informado')
          $('input[name=cliente_bairro]').removeAttr('readonly')
        } else {
          $('input[name=cliente_bairro]').attr('readonly', true)
        }
        $('input[name=cliente_municipio]').val(retorno.localidade)
        $('input[name=cliente_id_municipio]').val(retorno.ibge)
        $('input[name=cliente_uf]').val(retorno.uf)

        $('input[name=cliente_numero]').focus()
        $('label[for=cliente_logradouro]').addClass('active')
        $('label[for=cliente_bairro]').addClass('active')
        $('label[for=cliente_municipio]').addClass('active')
        $('label[for=cliente_uf]').addClass('active')
        $('#modalAviso').modal( 'hide' )
      })
      .catch((error)=>{
        console.log('Error', error)
      })
    })

    $('.mask_fone').mask('(99) 9999-9999')
    $('.mask_celular').mask('(99) 99999-9999')

    $('#cliente_senha_confirma').on('blur', function() {
      let senha_digitada = $('#cliente_senha').val()
      let senha_confirma = $('#cliente_senha_confirma').val()
      if (senha_digitada !== senha_confirma) {
        $('#btnCadEndModal').addClass('disabled').attr('disabled', true)
      } else {
        $('#btnCadEndModal').removeClass('disabled').removeAttr('disabled', true)
      }
    })
    // $('.row-login').hide()
    // $('.row-cadastro').show()

    let completa = "{{ request()->segment(3)}}"
    if(completa !== "") {
      $('.row-login').hide()
      $('.row-cadastro').show()
    } else {
      $('.row-login').show()
      $('.row-cadastro').hide()
    }
    $('#modalAviso').modal( 'hide' )

    $('.cadastre-se').on('click', function() {
      $('.row-login').hide()
      $('.errorCadastro').alert('hide')
      $('.row-cadastro').show()
    })
    $('.logar-se').on('click', function() {
      $('.row-cadastro').hide()
      $('.row-login').show()
    })

    $('#btnCadEndModal').on('click', function() {
      let _alert = '<div class="alert alert-warning alert-dismissible fade show" role="alert">'
        _alert += 'Estamos processando a sua informação. Aguarde...'
        _alert += '<button type="button" class="close" data-dismiss="alert" aria-label="Close">'
          _alert += '<span aria-hidden="true">&times;</span>'
          _alert += '</button>'
          _alert += '</div>'
          $( _alert ).prependTo( "form#form-cadastro" );
          $("#adicionandoCarrinho").on('show.bs.modal', function() {
            $('#modalAviso').attr('data-backdrop', 'true')
            $('.modal-title').empty()
            $('.modal-title').html('Enviando solicitação...')
          })
          $("#adicionandoCarrinho").modal('show')
          $('button[type=submit]').addClass('disabled')
        })
      })
    </script>
    @endsection