@extends('ATCore::atcore_layout')


@section('atplus_main_content')
<!-- general form elements -->
<!-- form start -->
<form id="edit_form" role="form" action="{{ route($routeName.'.update',$result->id) }}" method="POST" autocomplete="off">
  @csrf
  {{method_field('PUT')}}

  <div class="card card-info">
    <div class="card-header">
      <h3 class="card-title">Editar Usuario</h3>
    </div>
    <!-- /.card-header -->

    <div class="card-body" id="edit_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="{{ $result->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="{{ $result->email }}" required>
          </div>

          <div class="form-group">
            <label for="exampleInputEmail1">Contraseña</label>
            <input v-if="password_option == 'manual'" type="password" class="form-control" id="_password" name="password"  placeholder="Ingresa manualmente una contraseña" value="{{ old('password') }}" autocomplete="off">
          </div>
          <div class="form-group">
            <div class="icheck-info">
              <input  type="radio" id="customRadio1" name="password_option" v-model="password_option" value="keep">
              <label for="customRadio1">No cambiar contraseña</label>
            </div>
            <div class="icheck-info">
              <input  type="radio" id="customRadio2" name="password_option" v-model="password_option" value="auto">
              <label for="customRadio2">Generar contraseña automáticamente</label>
            </div>
            <div class="icheck-info">
              <input type="radio" id="customRadio3" name="password_option" v-model="password_option"  value="manual">
              <label for="customRadio3">Generar contraseña manualmente</label>
            </div>
          </div>
          <hr>
          <div class="form-check form-check-inline">
            <input id="inlineCheckbox1" class="form-check-input" type="checkbox" name="send_credentials" data-toggle="toggle" data-size="sm" data-style="mr-2" data-on="Sí" data-off="No" data-onstyle="info" data-offstyle="secondary">
            <label for="inlineCheckbox1" class="form-check-label"><strong>Enviar Credenciales</strong></label>
          </div>
          <hr>
          @if (getenv('ENABLE_MOBILE_APP') == 'true')
          @if ($result->mobile_status == 1)
          <div class="form-check form-check-inline">
            <input id="enableMobile" class="form-check-input" type="checkbox" name="enable_mobile" data-toggle="toggle" data-size="sm" data-style="mr-2" data-on="Sí" data-off="No" data-onstyle="info" data-offstyle="secondary">
            <label for="enableMobile" class="form-check-label"><strong>Activar Aplicación Móvil</strong></label>
          </div>
          @elseif($result->mobile_status == 2)
          <div class="form-check form-check-inline">
            <input id="disableMobile" class="form-check-input" type="checkbox" name="disable_mobile" data-toggle="toggle" data-size="sm" data-style="mr-2" data-on="Sí" data-off="No" data-onstyle="info" data-offstyle="secondary">
            <label for="disableMobile" class="form-check-label"><strong>Deshabilitar Aplicación Móvil</strong></label>
          </div>
          <div class="form-check form-check-inline">
            <input id="renewToken" class="form-check-input" type="checkbox" name="renew_token" data-toggle="toggle" data-size="sm" data-style="mr-2" data-on="Sí" data-off="No" data-onstyle="info" data-offstyle="secondary">
            <label for="renewToken" class="form-check-label"><strong>Renovar Token Aplicación Móvil</strong></label>
          </div>
          @endif
          @endif
        </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-info">
                <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-info">Actualizar Datos</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 appEditUser = new Vue({
    el: '#edit_user',
    data: {
      password_option: 'keep',
      rolesSelected:  {!!$result->roles->pluck('id')!!},
    }
  });



  $(document).ready(function () {
    bsCustomFileInput.init();


    $('#edit_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)