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

{%  block content %}

<ul class="breadcrumb breadcrumbStyle">
  <li class="breadcrumb-item"><i class="fas fa-shopping-cart"></i> Compras</li>
  <li class="breadcrumb-item active">Nueva compra</li>
</ul>

<h1 class="mt-4 text-center titleIniBox"><i class="fas fa-pencil-alt"></i> Nueva compra</h1>

<br>
<p>A continuación podrá registrar una nueva compra llenando todos los datos requeridos, si desea agregar más de un producto, clickee el botón <b style="color:#28a745;"> + </b> ubicado abajo de la tabla de ingreso de productos.</p>
<br>

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

<div class="col-md-12 mx-auto">
    <form class="form" method="POST"  id="formulario_registro_compra" enctype="multipart/form-data" onsubmit="return validate()">
      {% csrf_token %}

      <div id="errortelefono">

      </div>

      <div class="row">
        <div class="col-md-3 col-sm-3 col-lg-3">
          <h5><b> Fecha de la compra: </b></h5>
          {{ form.fecha }}
        </div>
        <div class="col-md-3 col-sm-3 col-lg-3">
          <h5><b> Proveedor: </b></h5>

          <select class="form-control" id="proveedor_lista" onclick='calcularMult()' required>
            <option>---</option>
            {% for row in proveedores|dictsort:"proveedor_id.razon_social" %}
            <option value='{{row.proveedor_id.id}}'>{{row.proveedor_id.razon_social}}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      {{ detalle_compra_formset.management_form }}

      <div id="form_set">

        {% for form in detalle_compra_formset %}
        <div class="table-responsive tableResStyle">
          <table class="table table-striped table-bordered" onkeyup='calcularMult()'>
            <thead class="theadStyle">
              <tr>
                <th>Producto</th>
                <!-- <th>Proveedor</th> -->
                <th>Cantidad</th>
                <th>Valor Unitario</th>
                <th>Total Producto</th>
              </tr>
            </thead>
            <tbody class="text-center formsetBody">
              <tr>
                <td>{{ form.producto_id }}</td>
                <td style="display:none">{{ form.proveedor_id }}</td>
                <td>{{ form.cantidad }}</td>
                <td>{{ form.valor_unitario }}</td>
                <td>{{ form.total_producto }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        {% endfor %}
      </div>

      <div id="empty_form" style="display:none">
        <div class="table-responsive tableResStyle">
          <table class="table table-striped table-bordered" onkeyup='calcularMult()'>
            <tbody class="text-center formsetBody">
              <tr>
                <td>{{ detalle_compra_formset.empty_form.producto_id }}</td>
                <td style="display:none">{{ detalle_compra_formset.empty_form.proveedor_id }}</td>
                <td>{{ detalle_compra_formset.empty_form.cantidad }}</td>
                <td>{{ detalle_compra_formset.empty_form.valor_unitario }}</td>
                <td>{{ detalle_compra_formset.empty_form.total_producto }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <br>
      <input type="hidden" value="1" name="additems" id="additems">
      <input type="button" id="additemsbutton" value="+" class="btn btn-green btn-lg">
      <br>

      <div id="alerta-c">

      </div>

      <div class="col-md-3 col-sm-3 col-lg-3 text-center mx-auto">
        <h5><b>Total de la compra:</b></h5>
        {{ form.total }}
      </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>

{% endblock %}

  {% block javascript %}
<script type='text/javascript'>
  var form_num = 0;
  $(document).ready(function() {
      $("#additemsbutton").on('click',function(event)
      {
        ++form_num;
        $('#form_set').append(
          $('#empty_form').html().replace(/__prefix__/g, form_num)
          );
        $('#id_detalle_compra_set-TOTAL_FORMS').val(form_num + 1);
        $("#additems").val(form_num + 1);
     });

  });

  function calcularMult(){
    var idx = $("#additems").val();
    // console.log(idx);
    var sum = 0;
    for (var i = 0; i <= idx; i++) {
        $("#id_detalle_compra_set-" + i + "-producto_id").attr("required", true);
        $("#id_detalle_compra_set-" + i + "-proveedor_id").attr("required",true);
        $("#id_detalle_compra_set-" + i + "-cantidad").attr("required", true);
        $("#id_detalle_compra_set-" + i + "-valor_unitario").attr("required", true);
        $("#id_detalle_compra_set-" + i + "-total_producto").attr("required", true);

        var prov = $("#proveedor_lista").val();
        $("#id_detalle_compra_set-" + i + "-proveedor_id").val(prov);

        $("#id_detalle_compra_set-" + i + "-total_producto").val($("#id_detalle_compra_set-" + i + "-cantidad").val() * $("#id_detalle_compra_set-" + i + "-valor_unitario").val());

        $("input[id^='id_detalle_compra_set-"+ i + "-total_producto']").each(function() {
          sum += Number($(this).val());
         });

    };
    $("#id_total").val(sum);

    // var bla = parseInt($("#id_subtotal_neto").val() / (1.19));
    // console.log(bla);
    // $("#id_IVA").val($("#id_subtotal_neto").val() - bla );
    // $("#id_total").val(parseInt($("#id_subtotal_neto").val()) + parseInt($("#id_IVA").val()) ).val();

  };

  function validate(){
    var idx = $("#additems").val();
    var ppp = $("#proveedor_lista").val();
    var validacion_numeros = /^([0-9])*$/;
    if(ppp=='---'){
      $("#alerta-c").html('<div class="alert alert-danger" role="alert">El campo <b>proveedor</b> no debe estar vacio.</div>');
      return false;
    }
    else{
      $("#alerta-c").html('');
      for (var i = 0; i <= idx-1; i++) {
        var can = $("#id_detalle_compra_set-" + i + "-cantidad").val();
        var valu = $("#id_detalle_compra_set-" + i + "-valor_unitario").val();
        var producto = $("#id_detalle_compra_set-" + i + "-total_producto").val();
        if (can < 1 || valu < 1){
          $("#alerta-c").html('<div class="alert alert-danger" role="alert">La <b>cantidad</b> y el <b>valor unitario</b> no pueden ser menor a 1 o negativos.</div>');
          return false;
        }
        else if (!validacion_numeros.test(valu)){
           $("#id_detalle_compra_set-" + i + "-valor_unitario").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 (!validacion_numeros.test(producto)){
          $("#id_detalle_compra_set-" + i + "-total_producto").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>');
          return false;
        }
        else {
          $('#errortelefono').html('');
        }
      }
    }
  }



</script>
 {% endblock %}