{% extends 'app/base_app.html' %}
{% block title %} Agregar proveedor {% endblock %}

{%  block content %}

<ul class="breadcrumb breadcrumbStyle">
  <li class="breadcrumb-item"><i class="fas fa-users"></i> Proveedoress</li>
  <li class="breadcrumb-item active">Nuevo proveedor</li>
</ul>

<br>
<h1 class="mt-4 text-center titleIniBox"><i class="fas fa-pencil-alt"></i> Nuevo Proveedor</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" method="POST" id="formulario_registro_proveedor">
      {% csrf_token %}

      <div class="row">
        <div class="col">
          <label>Nombre de contácto: *</label>
          <input type="text" class="form-control" id="nombre_proveedor" required>
          <div id="errornombre"></div>
        </div>

        <div class="col">
          <label>Razon Social: *</label>
          <input type="text" class="form-control" id="razon_social_proveedor" required>
        </div>
      </div>

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

      <div class="row">
        <div class="col">
          <label>Dirección:</label>
          <input type="text" class="form-control" id="direccion_proveedor">
        </div>

        <div class="col">
          <label>Email:</label>
          <input type="text" class="form-control" id="email_proveedor">
          <div class="" id="erroremail"></div>
        </div>
      </div>

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

      <div class="row">
        <div class="col">
          <label>Teléfono:</label>
          <input type="text" class="form-control" id="telefono_proveedor">
          <div id="errortelefono"></div>
        </div>

        <div class="col">
          <label>Celular:</label>
          <input type="text" class="form-control" id="celular_proveedor">
          <div id="errorcelular"></div>
        </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" type="submit">Guardar</button>
        <br><br>
      </div>

    </form>

  </div>
</div>

 {% endblock %}

 {% block javascript %}
 <script>
  $('#formulario_registro_proveedor').submit(function(event){
    var negocio = $("#negocio_pk").text();
    var nombre = $("#nombre_proveedor").val();
    var razon = $("#razon_social_proveedor").val();
    var direccion = $("#direccion_proveedor").val();
    var telefono = $("#telefono_proveedor").val();
    var email = $("#email_proveedor").val();
    var celular = $("#celular_proveedor").val();
    var csrftoken = '{{ csrf_token }}';

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

    if (!validacion_nombre.test(nombre)){
      $('#nombre_proveedor').focus();
      $('#errornombre').html('<small class="form-text text-muted">Ingrese un nombre válido</small>');
      return false;
    } else if (email != "" && !validacion_email.test(email)){
      $('#errornombre').html('');
      $('#email_proveedor').focus();
      $('#erroremail').html('<small class="form-text text-muted">Ingrese una dirección de correo válida.</small>');
      return false;
    } else if (!validacion_numeros.test(telefono)){
      $('#errornombre').html('');
      $('#erroremail').html('');
      $('#telefono_proveedor').focus();
      $('#errortelefono').html('<small class="form-text text-muted">Ingrese un número de teléfono válido sin dejar espacios.</small>');
      return false;
    } else if (!validacion_numeros.test(celular)){
      $('#errornombre').html('');
      $('#erroremail').html('');
      $('#errortelefono').html('');
      $('#celular_proveedor').focus();
      $('#errorcelular').html('<small class="form-text text-muted">Ingrese un número de celular válido sin dejar espacios.</small>');
      return false;
    } else {
      $.ajax({
        headers: {'X-CSRF-TOKEN': csrftoken},
        method: 'POST',
        url: '/proveedores/nuevo/'+negocio+'/',
        dataType: 'text',
        data: { 'csrfmiddlewaretoken': csrftoken ,
            'nombre_proveedor': nombre,
            'razon_social_proveedor': razon,
            'direccion_proveedor': direccion,
            'celular_proveedor': celular,
            'telefono_proveedor': telefono,
            'email_proveedor':email },
        success:function(data){
          $('#alert-form').html('<div class="alert alert-success">Se han registrado los datos con <strong>éxito!</strong></div>');
        },
        error: function(xhr, e, x, status) {
            console.log(xhr.status + " -- " + status + " -- " + e + " -- " + x);
            $('#alert-form').html('<div class="alert alert-danger, ">Ha ocurrido un error <strong>' + xhr.status + ':' + e + '</strong></div>');
        }
      });
      return false;
    }

  });
</script>
 {% endblock %}