@extends('ATCore::atcore_layout')



@section('atplus_main_content')
<!-- general form elements -->
<!-- form start -->
<form id="create_form" role="form" action="{{ route($routeName.'.store') }}" method="POST" autocomplete="off">
  @csrf
  
  
  <div class="card card-primary">
    <div class="card-header">
      <h3 class="card-title">Crear Nuevo Usuario</h3>
    </div>
    <!-- /.card-header -->
    
    <div class="card-body" id="create_user">
      <div class="row">
        <div class="col-sm-6">
          <div class="form-group">
            <label for="exampleInputEmail1">Nombre</label>
            <input type="text" class="form-control" id="_name" name="name"  placeholder="Ingresar nombre" value="{{ old('name') }}" required>
          </div>
          <div class="form-group">
            <label for="exampleInputEmail1">Email</label>
            <input type="email" class="form-control" id="_email" name="email"  placeholder="Ingresar email" value="{{ old('email') }}" required>
          </div>
          <div class="form-group">
            <label for="exampleInputEmail1">Contraseña</label>
            <input v-if="!auto_password" type="password" class="form-control" id="_password" name="password"  placeholder="Ingresa manualmente una contraseña" value="{{ old('password') }}" autocomplete="off" required>
          </div>
          
          <div class="icheck-primary">
            <input type="checkbox" name="terms" id="remember"  v-model="auto_password">
            <label for="remember">Generar contraseña automáticamente</label>
          </div>
          
        </div>
        <div class="col-sm-1">&nbsp;</div>
        <div class="col-sm-5">
          <div class="row">
            <div class="col-sm-12">
              <label>Roles</label>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              @foreach ($roles as $role)
              <div class="icheck-primary">
                <input v-model="rolesSelected" value="{{$role->id}}" type="checkbox"  id="_permission_check_{{$role->id}}">
                <label for="_permission_check_{{$role->id}}">{{$role->display_name}} <em>({{$role->description}})</em></label>
              </div>
              @endforeach
            </div>
          </div>
          <input type="hidden" :value="rolesSelected" name="roles">
        </div>
      </div>
    </div>
    
    <div class="card-footer">
      <button type="submit" class="btn btn-primary">Crear Nuevo Usuario</button>
      <a href="{{ route($routeName.'.index') }}" class="btn btn-secondary">Cancelar </a>
    </div>
  </div>
  
</form>
@stop

@section('atplus_main_css')

@stop

@section('plugins.ValidationJS',true)
@section('atplus_main_js')
<script>
  var appCreateUser = new Vue({
    el: '#create_user',
    data: {
      auto_password: true,
      rolesSelected: []
      
    }
  });



  $(document).ready(function () {
    bsCustomFileInput.init();
    
    
    $('#create_form').validate({
      submitHandler: function(form) {
        forcePace();
        form.submit();
      },
      errorElement: 'span',
      errorPlacement: function (error, element) {
        error.addClass('invalid-feedback');
        element.closest('.form-group').append(error);
      },
      highlight: function (element, errorClass, validClass) {
        $(element).addClass('is-invalid');
      },
      unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass('is-invalid');
      }
    });
    
    jQuery.extend(jQuery.validator.messages, {
      required: "Este campo es obligatorio.",
      remote: "Por favor, rellena este campo.",
      email: "Por favor, escribe una dirección de correo válida",
      url: "Por favor, escribe una URL válida.",
      date: "Por favor, escribe una fecha válida.",
      dateISO: "Por favor, escribe una fecha (ISO) válida.",
      number: "Por favor, escribe un número entero válido.",
      digits: "Por favor, escribe sólo dígitos.",
      creditcard: "Por favor, escribe un número de tarjeta válido.",
      equalTo: "Por favor, escribe el mismo valor de nuevo.",
      accept: "Por favor, escribe un valor con una extensión aceptada.",
      maxlength: jQuery.validator.format("Por favor, no escribas más de {0} caracteres."),
      minlength: jQuery.validator.format("Por favor, no escribas menos de {0} caracteres."),
      rangelength: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."),
      range: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1}."),
      max: jQuery.validator.format("Por favor, escribe un valor menor o igual a {0}."),
      min: jQuery.validator.format("Por favor, escribe un valor mayor o igual a {0}.")
    });
  });
</script>
@stop

@section('plugins.Vue',true)