{% extends 'pagina/base_corporativo.html' %}
{% load user_tags %}
{% block title %} Registrar Propietario{% endblock %}

{%  block content %}

{% if request.user|has_group:"administrativo" %}

<ul class="breadcrumb breadcrumbStyle">
  <li class="breadcrumb-item"><i class="fas fa-users"></i> Comerciantes </li>
  <li class="breadcrumb-item breadcrumb-itemAdmin active"> Nuevo Comerciante</li>
</ul>

<h1 class="mt-4 text-center titleIniBoxAdmin"><i class="fas fa-pencil-alt"></i> Registrar Comerciantes</h1>

<br>
<div id="alert-form"></div>

<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-signin" method="post" id="form-tendero-add">
			{% 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>Usuario del propietario: *</label>
		    		<input type="text" name="username" placeholder="Usuario" class="form-control teli" id="form-usuario">
					</div>
					<div class="col">
						<label>Correo del propietario: *</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>Nombre: *</label>
		        <input type="text" name="nombre" placeholder="Nombres" class="form-control teli" id="form-nombre">
					</div>
					<div class="col">
						<label>Apellido: *</label>
		        <input type="text" name="apellido" placeholder="Apellidos" class="form-control teli" id="form-apellido">
					</div>
					<div class="col">
						<label>Documento: *</label>
		        <input type="text" name="documento" placeholder="Documento" 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>Contraseña del usuario: *</label>
			    	<input type="password" name="password1" placeholder="Contraseña" class="form-control teli" id="form-contraseña">
					</div>
					<div class="col">
						<label>Confirmar contraseña: *</label>
			    	<input type="password" name="password2" placeholder="Confirmar contraseña" class="form-control teli" id="form-password2">
					</div>
				</div>

				<br><br>
		    <button type="submit" id="submit_button" class="btn btn-lg btn-orange btn-login font-weight-bold mb-2">Registrar usuario</button>

		  </form>
		</div>
</div>
	{% endif %}

	{% if request.user|has_group:"propietario_negocio" %}
		<p>Lo siento, no tiene permisos para este contenido :(</p>
	{% 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 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 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>');
  }
  else {
    $("#submit_button").removeAttr("disabled");
    $('#errortelefono').html('');
    return true;
  }

});


});

</script>
{% endblock %}