{% extends 'app/base_app.html' %}
{% load user_tags %}
{% block title %} Registrar empleado{% endblock %}

{%  block content %}

<ul class="breadcrumb breadcrumbStyle">
  <li class="breadcrumb-item"><i class="fas fa-tools"></i> Administración</li>
  <li class="breadcrumb-item active">Nuevo empleado</li>
</ul>

<br>

{% if request.user|has_group:"propietario_negocio" %}
<h1 class="mt-4 text-center titleIniBox"><i class="fas fa-pencil-alt"></i> Registrar un Empleado</h1>

<br>

<div class="col-md-12">
  <div class="col-md-10 mx-auto">
    <br>
    <p>Los campos que aparecen con asteríscos <b>(*)</b> son <b>obligatorios</b>.</p>
    <br>
		<form class="form" method="POST" id="formulario_registro_empleado">
		{% csrf_token %}

    {% if messages %}
    <div class="alert alert-danger" role="alert">
        <ul class="messages">
            {% for message in messages %}
            <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    <div id="errortelefono">

    </div>

		<div class="row">
			<div class="col">
				<label class="">Usuario del empleado: *</label>
	    	<input type="text" name="username" placeholder="Usuario" class="form-control teli" id="form-usuario">
	    </div>
	    <div class="col">
				<label class="">Correo del empleado: *</label>
	      <input type="text" name="email" placeholder="Correo" class="form-control teli" id="form-email">
			</div>
		</div>

		<div class="col-md-12 col-lg-12 col-sm-12"><br></div>

		<div class="row">
			<div class="col">
					<label class="">Nombre del empleado: *</label>
	        <input type="text" name="nombre" placeholder="Nombres" class="form-control teli" id="form-nombre">
			</div>
	    <div class="col">
					<label class="">Apellido del empleado: *</label>
	        <input type="text" name="apellido" placeholder="Apellidos" class="form-control teli" id="form-apellido">
			</div>
		</div>

    <div class="col-md-12 col-lg-12 col-sm-12"><br></div>

    <div class="row">
      <div class="col">
					<label class="">Documento del empleado: *</label>
	        <input type="text" name="documento" placeholder="Documento" class="form-control teli" id="form-documento">
			</div>
      <div class="col">
					<label class="">Teléfono del empleado: </label>
	        <input type="text" name="telefono" placeholder="Telefono" class="form-control teli" id="form-telefono">
			</div>
    </div>

		<div class="col-md-12 col-lg-12 col-sm-12"><br></div>

		 <div class="row">
			 <div class="col">
					 <label class="">Contraseña para el usuario: *</label>
		    	<input type="password" name="password1" placeholder="Contraseña" class="form-control teli" id="form-contraseña">
		    </div>
		    <div class="col">
						<label class="">Confirmar contraseña: *</label>
		    	<input type="password" name="password2" placeholder="Confirmar contraseña" class="form-control teli" id="form-password2">
		    </div>
		 </div>

		 <div class="col-md-12 col-lg-12 col-sm-12"><br></div>

		 <div class="col-md-12 col-lg-12 col-sm-12 text-center">
			 <button class="save btn btn-green btn-lg" id="submit_button" type="submit">Registrar empleado</button>
			 <br><br>
		 </div>

		</form>
	</div>
</div>
{% endif %}
{% if request.user|has_group:"empleado_negocio" %}
	<p>Lo siento, no tiene permisos para este contenido :(</p>
{% endif %}

{% endblock %}

{% block javascript %}
<script>
$(document).ready(function() {

 var validacion_nombre = /^([A-Za-zñÑáéíóúÁÉÍÓÚ\s])*$/;
 var validacion_numeros = /^([0-9])*$/;
 var validacion_username = /^([a-zA-Z0-9_\.\-])*$/;
 var validacion_email = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;

$('.teli').keyup(function() {
  var userr = $("#form-usuario").val();
  var telefono = $("#form-telefono").val();
  var documento = $("#form-documento").val();
  var email = $("#form-email").val();

  if (telefono != "" && !validacion_numeros.test(telefono)){
     $("#submit_button").attr( "disabled", "disabled" );
     $("#form-telefono").focus();
     $('#errortelefono').html('<div class="alert alert-danger" role="alert"><ul class="messages"><li>Ingrese un número de teléfono válido sin dejar espacios.</li></ul></div>');
     return false;
  }
  else if (documento != "" && !validacion_numeros.test(documento)){
     $("#submit_button").attr( "disabled", "disabled" );
     $("#form-documento").focus();
     $('#errortelefono').html('<div class="alert alert-danger" role="alert"><ul class="messages"><li>Ingrese un número de cédula válido sin dejar espacios.</li></ul></div>');
     return false;
  }
  else if (userr != "" && !validacion_username.test(userr)){
     $("#submit_button").attr( "disabled", "disabled" );
     $("#form-usuario").focus();
     $('#errortelefono').html('<div class="alert alert-danger" role="alert"><ul class="messages"><li>Por favor <b>no</b> deje <b>espacios en blanco</b> en el nombre de usuario; utilice solo carácteres alfabéticos, números o .(punto) -(guión)</li></ul></div>');
     return false;
  }
  else if (email != "" && !validacion_email.test(email)){
    $("#submit_button").attr( "disabled", "disabled" );
    $('#form-email').focus();
    $('#errortelefono').html('<div class="alert alert-danger" role="alert"><ul class="messages"><li>Ingrese un correo válido.</li></ul></div>');
    return false;
  }
  else {
    $("#submit_button").removeAttr("disabled");
    $('#errortelefono').html('');
    return true;
  }

});


});

</script>
{% endblock %}