@extends('admin.layout.base')

@section('content')
  <div class="ui container">
    <h2>Cambiar Clave</h2>
    <form class="ui form" method="post" action="{{$urls->base}}/admin/clave" id="clave_form">
      <div class="field">
        <label>Clave</label>
        <input type="password" name="clave" />
      </div>
      <div class="field">
        <label>Repetir Clave</label>
        <input type="password" name="clave2" />
      </div>
      <button class="ui button">Cambiar</button>
      <div class="ui warning message" id="warnings">
        <ul class="ui list"></ul>
      </div>
      <div class="ui error message" id="errors">
        <ul class="ui list"></ul>
      </div>
    </form>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">
    function clearErrors() {
      $('#warnings').find('ul.list').html('')
      $('#warnings').hide()
      $('#errors').find('ul.list').html('')
      $('#errors').hide()
    }
    function addError(msg) {
      $('#errors').find('ul.list').append(
        $('<li></li>').html(msg)
      )
      $('#errors').show()
    }
    function addWarning(msg) {
      $('#warnings').find('ul.list').append(
        $('<li></li>').html(msg)
      )
      $('#warnings').show()
    }
    function checkClaves() {
      var c1 = $("input[name='clave']").val()
      if (!validateClave(c1)) {
        return false
      }
      var c2 = $("input[name='clave2']").val()
      if (c1 != c2) {
        addError('Las dos claves no coinciden.')
        return false
      }
      return true
    }
    function validateClave(clave) {//NotariaR4b¿?
      console.debug(clave)
      var strong = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})")
      var medium = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})")
      if (!medium.test(clave)) {
        addError('La clave no cumple con el mínimo de fuerza.')
        return false
      }
      if (!strong.test(clave)) {
        addWarning('Se recomienda una clave mas fuerte.')
      }
      return true
    }
    $(document).ready(function() {
      clearErrors()
      $("input[name='clave']").change(function() {
        clearErrors()
        validateClave($(this).val())
      })
      $('#clave_form').submit(function(e) {
        clearErrors()
        if (checkClaves()) {
          $(this).submit()
          return true
        }
        e.preventDefault()
        return false
      })
    })
  </script>
@endpush