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

{%  block content %}

<ul class="breadcrumb breadcrumbStyle">
  <li class="breadcrumb-item"><i class="fas fa-carrot"></i> Productos</li>
  <li class="breadcrumb-item">Lista de productos</li>
  <li class="breadcrumb-item active">Nuevo producto</li>
</ul>

<br>
<h1 class="mt-4 text-center titleIniBox"><i class="fas fa-pencil-alt"></i> Nuevo producto</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_producto" enctype="multipart/form-data">
      {% csrf_token %}
      <!-- {{ form.as_p }} -->

      {% if form.errors %}
          {% for field in form %}
              {% for error in field.errors %}
                  <div class="alert alert-danger">
                      <strong>{{ error|escape }}</strong>
                  </div>
              {% endfor %}
          {% endfor %}
          {% for error in form.non_field_errors %}
              <div class="alert alert-danger">
                  <strong>{{ error|escape }}</strong>
              </div>
          {% endfor %}
      {% endif %}

      <div id="errortelefono">

      </div>

      <div class="col-md-12 col-lg-12 col-sm-12 row div-paddings-0px">
        <div class="col">
          <label>{{ form.nombre.label }}: *</label>
          {{ form.nombre }}
        </div>
        <div class="col">
          <label>{{ form.unidad_medida_id.label }}: *</label>
          {{ form.unidad_medida_id }}
        </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 row div-paddings-0px">
        <div class="col">
          <label>{{ form.stock.label }}: *</label>
          {{ form.stock }}
        </div>
        <div class="col">
          <label>{{ form.valor_costo.label }}: *</label>
          {{ form.valor_costo }}
        </div>
        <div class="col">
          <label>{{ form.valor_venta.label }}: *</label>
          {{ form.valor_venta }}
        </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 row">
          <label>{{ form.descripcion.label }}:</label>
          {{ form.descripcion }}
      </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 row">
         <div class="col">
          <label>imagen:</label>
          <input type="file" name="imagen" class="filestyle" data-buttonText="Select a File">
          <div id="errorimagen"></div>
        </div>

        <div class="col">
          <label>Proveerdor: *</label>
          <select class="form-control" name='negocio_proveedor' required="required">
            <option value="">Seleccionar</option>
            {% for row in negocio_proveedor %}
              <option value="{{ row.proveedor_id.id }}"> {{ row.proveedor_id.razon_social }} </option>
            {% endfor %}
          </select>
        </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" id="submit_button">Guardar</button>
        <br><br>
      </div>

    </form>
  </div>
</div>

 {% endblock %}

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

 var validacion_numeros = /^([0-9])+$/;

 $('.teli').keyup(function() {
   var costo = $("#costo_id").val();
   var venta = $("#venta_id").val();

   if (costo != "" && !validacion_numeros.test(costo)){
      $("#submit_button").attr( "disabled", "disabled" );
      $("#costo_id").focus();
      $('#errortelefono').html('<div class="alert alert-danger" role="alert"><ul class="messages"><li>Por favor utilice <b>números enteros</b> en el valor del costo, no agrege ningún punto (.)</li></ul></div>');
      return false;
   }
   else if (venta != "" && !validacion_numeros.test(venta)){
     $("#submit_button").attr( "disabled", "disabled" );
     $('#venta_id').focus();
     $('#errortelefono').html('<div class="alert alert-danger" role="alert"><ul class="messages"><li>Por favor utilice <b>números enteros</b> en el valor de la venta, no agrege ningún punto (.)</li></ul></div>');
   }
   else {
     $("#submit_button").removeAttr("disabled");
     $('#errortelefono').html('');
     return true;
   }

 });


 });

 </script>
 {% endblock %}