{% extends 'app/base_app.html' %}
{% block title %} Nueva venta {% endblock %}

{%  block content %}

<ul class="breadcrumb breadcrumbStyle">
  <li class="breadcrumb-item"><i class="fas fa-wallet"></i> Ventas</li>
  <li class="breadcrumb-item active">Nueva venta</li>
</ul>

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

<br>
<p>A continuación podrá registrar una nueva venta 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_venta" enctype="multipart/form-data" onsubmit="return validate()">
      {% csrf_token %}

      <div id="errortelefono">

      </div>

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

      {{ detalle_venta_formset.management_form }}

      <div id="form_set">
        {% for form2 in detalle_venta_formset %}
        <div class="table-responsive tableResStyle">
          <table class="table table-striped table-bordered" onkeyup='calcularMult()'>
            <thead class="theadStyle">
              <tr>
                <th>Producto</th>
                <th>Cantidad</th>
                <th>Total Producto</th>
              </tr>
            </thead>
            <tbody class="text-center formsetBody">
              <tr>
                <td>{{ form2.producto_id }}</td>
                <td>{{ form2.cantidad }}</td>
                <td>{{ form2.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_venta_formset.empty_form.producto_id }}</td>
                <td>{{ detalle_venta_formset.empty_form.cantidad }}</td>
                <!-- <td>{{ detalle_venta_formset.empty_form.valor_unitario }}</td> -->
                <td>{{ detalle_venta_formset.empty_form.total_producto }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <br>

      <div id="alerta-c">

      </div>

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

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

      <div class="row">
        <div class="col"> </div>
        <div class="col-md-3 col-sm-3 col-lg-3 text-center">
          <h5><b>Total de la venta:</b></h5>
          {{ form.total }}
        </div>
        <div class="col-md-4 col-sm-4 col-lg-4 text-center">
          <h5><b>Comentarios:</b></h5>
          {{ form.observacion }}
        </div>
        <div class="col"> </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 id="guardar_submit" class="save btn btn-green btn-lg" type="submit">Guardar</button>
        <br><br>
      </div>
    </form>

  </div>

<div id="tabliita" style="display:none"></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_venta_set-TOTAL_FORMS').val(form_num + 1);
        $("#additems").val(form_num + 1);
     });

     iddd = $("#negocio_pk").text();
     var csrftoken = '{{ csrf_token }}';

     $.ajax({
       headers: {'X-CSRF-TOKEN': csrftoken},
       method: "GET",
       url: '/ventas/nuevo/datos/'+iddd+'/',
       dataType: 'json',
       data: { "csrfmiddlewaretoken": csrftoken,
           "id": iddd }
     })

     .done(function(response){
       var res = response;
       var html = '';

       for(var item in res){
           html += '<div><b id="nombrep_'+res[item][0]+'">'+res[item][1]+'</b><b id="stockp_'+res[item][0]+'">'+res[item][2]+'</b></div>';
       }
       $('#tabliita').html(html);
     });

  });

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

      var id_seleccinado =  $("#id_detalle_venta_set-" + i + "-producto_id").val(); // id producto
      var nombre_producto = $("#nombrep_"+id_seleccinado).text();
      var stock_actual = Number($("#stockp_"+id_seleccinado).text()); // stock actual producto
      var cantidad_ingresada = Number($("#id_detalle_venta_set-" + i + "-cantidad").val()); // cantidad ingresada
      if(stock_actual == 0){
        $("#additemsbutton").attr("disabled", true);
        $("#guardar_submit").attr("disabled", true);
        $("#alerta-c").html('<div class="alert alert-danger" role="alert">El stock del producto <b>'+nombre_producto+'</b> está agotado.</div>');
      }
      else if(stock_actual<cantidad_ingresada){
        $("#additemsbutton").attr("disabled", true);
        $("#guardar_submit").attr("disabled", true);
        $("#alerta-c").html('<div class="alert alert-danger" role="alert">El stock del producto <b>'+nombre_producto+'</b> actualmente es de <b>'+stock_actual+'</b>, por lo que no alcanza el pedido solicitado.</div>');
      }
      else{
        $("#additemsbutton").attr("disabled", false);
        $("#guardar_submit").attr("disabled", false);
        $("#alerta-c").html('');
      }
    };

    for (var i = 0; i <= idx; i++) {
        $("input[id^='id_detalle_venta_set-"+ i + "-total_producto']").each(function() {
          sum += Number($(this).val());
         });
    }
    $("#id_total").val(sum);

  }

  function validate(){
    var idx = $("#additems").val();
    var validacion_numeros = /^([0-9])*$/;
    for (var i = 0; i <= idx-1; i++) {
      var prod = $("#id_detalle_venta_set-" + i + "-producto_id").val();
      var can = $("#id_detalle_venta_set-" + i + "-cantidad").val();
      var valu = $("#id_detalle_venta_set-" + i + "-total_producto").val();
      if (prod==''){
        $("#alerta-c").html('<div class="alert alert-danger" role="alert">El producto no puede estar vacio.</div>');
        return false;
      }
      else 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 + "-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 del costo, no agrege ningún punto (.)</li></ul></div>');
         return false;
      }
      else {
        $('#errortelefono').html('');
      }
    }
  }

</script>
 {% endblock %}