@extends('layouts.front.app')

@section('content')

<section>
  <div class="container my-3">    
    <nav>
      <ul class="breadcrumb grey lighten-3">
        <li>
          <a href="{{ route('home') }}" class="font-weight-bold fosco-text"> 
            <i class="fa fa-home"></i> Home
          </a>
          <i class="fas fa-angle-double-right mx-2"></i>
        </li>
        <li class="font-weight-bolder black-text">Redefenir Senha</li>
      </ul>
    </nav>
  </div>
</section>

<section>
  <div class="container mb-4">
    
    <div class="card">
      <h5 class="card-header {{config('site.cor_bootstrap1')}} white-text font-montserrat font-weight-bold text-center py-4">
        <strong>Redefina a sua senha</strong>
      </h5>
      
      <form class="text-center border border-light p-5" role="form" method="POST" action="{{ route('password.gravar-senha') }}" id="createNewPassword">
        {{ csrf_field() }}
        
        <div class="input-group mb-3">
          @if ( intval(config('site.login.ativa_cpf')) === 1 )
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">CPF</span>
          </div>
          <input id="cliente_cnpj" type="text" class="form-control cliente_cnpj" name="cliente_cnpj" placeholder="999.999.999-99" value="{{ old('cliente_cnpj', $cliente->cliente_cnpj) }}" readonly>
          @else
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">CNPJ</span>
          </div>
          <input id="cliente_cnpj" type="text" class="form-control cliente_cnpj" name="cliente_cnpj" placeholder="99.999.999/9999-99" value="{{ old('cliente_cnpj', $cliente->cliente_cnpj) }}" readonly>
          @endif
        </div>
        
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">E-mail</span>
          </div>
          <input id="cliente_email" type="email" class="form-control" name="cliente_email" placeholder="seu-email@dominio.com" value="{{ old('cliente_email', $cliente->cliente_email) }}" readonly>
        </div>
        
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">Celular</span>
          </div>
          <input id="cliente_celular" type="text" class="form-control" name="cliente_celular" placeholder="(99) 99999-9999" value="{{ old('cliente_celular', $cliente->cliente_celular) }}" required>
        </div>
        
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">Nova Senha</span>
          </div>
          <input id="cliente_senha" type="password" class="form-control" name="cliente_senha" placeholder="*****"  required>
        </div>
        
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">Repita a Senha</span>
          </div>
          <input id="password_confirmation_reset" type="password" class="form-control" name="password_confirmation" placeholder="*****"  required>
        </div>
        
        <!-- Sign up button -->
        <button class="btn btn-green my-4 font-weight-bold btn-block box-green" type="submit">Enviar</button>
        
      </form>
    </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 type="text/javascript">
  var token = document.head.querySelector('meta[name="csrf-token"]')
  axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
  $(document).ready(function () {
    let ativa_cpf = "{!! config('site.login.ativa_cpf') !!}"
    
    $("#adicionandoCarrinho").modal( 'hide' )
    $('button[type=submit]').removeClass('disabled')
    
    // 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)
        
        $('input[name=cliente_celular]').mask('(99) 99999-9999')
        
        $('button[type=submit]').on('click', function(e) {
          e.preventDefault()
          
          let senha1 = $('input[name=cliente_senha]').val();
          let senha2 = $('#password_confirmation_reset').val();
        
          
          if ( (senha1 !== senha2) || (senha1 === '') || (senha2 === '') ) {
            let _alert = '<div class="alert alert-danger alert-dismissible fade show" role="alert">'
              _alert += 'As senhas digitadas não conferem.'
              _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#createNewPassword" );
                $('input[name=cliente_senha]').focus()
                return false
              } else {
                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#createNewPassword" );
                    $("#adicionandoCarrinho").on('show.bs.modal', function() {
                      $('#modalAviso').attr('data-backdrop', 'true')
                      $('.modal-title').empty()
                      $('.modal-title').html('Enviando solicitação...')
                    })
                    
                    $("#adicionandoCarrinho").modal( 'show' )
                    // $('#adicionandoCarrinho').attr('data-backdrop', 'false').modal( 'show' )
                    $('button[type=submit]').addClass('disabled')
                    $('#createNewPassword').submit()
                  }
                })
              })
            </script>
            @endsection