{% extends 'app/base_app.html' %}
{% load staticfiles %}
{% load humanize %}
{% block title %} Detalle de la venta {% endblock %}

{%  block content %}

<ul class="breadcrumb breadcrumbStyle">
  <li class="breadcrumb-item"><i class="fas fa-wallet"></i> Ventas</li>
  <li class="breadcrumb-item">Lista de ventas</li>
  <li class="breadcrumb-item active">Detalle de venta</li>
</ul>

<br>
<a class="btn btn-green btn-sm" href="javascript:history.back()"><i class="fas fa-arrow-left"></i></a>

<h1 class="mt-4 text-center titleIniBox"><i class="fas fa-wallet"></i> Lista Ventas</h1>

<br><br>
{% for row in venta %}
<div class="row">
    <div class="col-md-4 col-sm-4 col-lg-4 text-center">
		<h5>Fecha de la venta:</h5>
    <h4><b>{{ row.fecha|date:"SHORT_DATE_FORMAT" }}</b></h4>
	</div>
  <div class="col">  </div>
	<div class="col-md-4 col-sm-4 col-lg-4 text-center">
		<h5>Total de la venta:</h5>
    <h4><b>${{ row.total|intcomma }}</b></h4>
	</div>
</div>
{% endfor %}

<div class="table-responsive tableResStyle">
 <table class="table table-striped table-bordered table-striped">
    <thead class="theadStyle">
      <tr>
        <th>Imagen</th>
        <th>Producto</th>
        <th>Cantidad</th>
        <th>Unidad Medida</th>
        <th>Total producto</th>
        <th>Acciones</th>
      </tr>
    </thead>
    <tbody class="text-center">
      {% for row in detalles__ventas %}
        <tr>
          {% if row.producto_id.imagen %}
          <td> <img src="/media/{{ row.producto_id.imagen }}" class="img-fluid" style="max-width: 150px; max-height: 120px;">  </td>
          {% else %}
          <td> <img src="{% static 'img/nofoto.png' %}" class="img-fluid" style="max-width: 50px;"> </td>
          {% endif %}
          <td>{{ row.producto_id.nombre }}</td>
          <td>{{ row.cantidad }}</td>
          <td>{{ row.producto_id.unidad_medida_id.abreviatura_unidad }}</td>
          <td>${{ row.total_producto|intcomma }}</td>
          <td>
            <a id="{{row.id}}" class="btn btn-green btn-sm" data-toggle="modal" data-target="#editarmodal" onclick="datos(this.id)"> Editar </a>
            <a id="{{row.id}}" class="btn btn-red btn-sm" data-toggle="modal" data-target="#eliminarmodal" onclick="datos2(this.id)">Borrar</a>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<!-- Modal Editar -->
  <div class="modal fade" id="editarmodal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content modalContentStyle">

            <!-- Modal Header -->
            <div class="modal-header modalHeaderStyle">
              <h4 class="modal-title">Editar item</h4>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
              <div class="container">
                <form class="form" method="POST" id="formulario_editar_venta">
                  {% csrf_token %}

                  <div id="errortelefono">

                  </div>

                  <div class="form-group">
                    <input id="id_d" hidden="false">
                    <label>Producto:</label>
                    <h5 id="producto_d"></h5>
                  </div>

                  <div class="row">
                    <div class="col">
                      <label>Cantidad:</label>
                      <input type="number" class="form-control" id="cantidad_d" onkeyup='calcularMult()' min="1">
                    </div>

                    <!-- <div class="col">
                      <label>valor unitario:</label>
                      <input type="text" class="form-control" id="valor_unitario_d" onkeyup='calcularMult()'>
                    </div> -->

                    <div class="col">
                      <label>Total:</label>
                      <input type="number" class="form-control" id="total_d" onkeyup='calcularMult()' min="1">
                      <!-- disabled="true" -->
                    </div>
                  </div>

                  <br>
                  <button class="save btn btn-green btn-lg" type="submit" onclick="Actualizar()" id="submit_button">Guardar</button>
                  <br><br>
                </form>
              </div>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
              <button type="button" class="btn btn-red" data-dismiss="modal">Cerrar</button>
            </div>

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

  <!-- Modal Edliminar -->
  <div class="modal fade" id="eliminarmodal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content modalContentStyle">

            <!-- Modal Header -->
            <div class="modal-header modalHeaderStyleRed">
              <h4 class="modal-title">Eliminar Producto</h4>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
              <div class="container text-center">
                <br>
                <div id="id_p2" hidden="false"></div>
                <h5 id="mensaje2"></h5>
                <br>
                <button class="save btn btn-red btn-lg" type="submit" onclick="Eliminar()">Eliminar</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
              </div>
            </div>

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

{% endblock %}

{% block javascript %}
<script>
 function datos(id) {

    console.log(id);
    var csrftoken = '{{ csrf_token }}';
    $.ajax({
      headers: {'X-CSRF-TOKEN': csrftoken},
      method: "GET",
      url: '/ventas/lista/detalle/editar_item/'+id+'/',
      dataType: 'json',
      data: { "csrfmiddlewaretoken": csrftoken,
          "id": id }
    })

    .done(function(response){
      console.log(response);
      var res = response;

      $('#id_d').val(res.idd);
      $('#producto_d').text(res.producto);
      $('#cantidad_d').val(res.cantidad);
      // $('#valor_unitario_d').val(res.valor_unitario);
      $('#total_d').val(res.total);

    })
}

function calcularMult(){
	// var mul = 0;
  var validacion_numeros = /^([0-9])*$/;

	cantidad = $("#cantidad_d").val();
	valor = $("#total_d").val();
	// mul = cantidad * valor;
  //
	// $("#total_d").val(mul);

  if (!validacion_numeros.test(valor)){
    $("#submit_button").attr( "disabled", "disabled" );
     $("#valor_unitario_d").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>');
  }
  else {
    $("#submit_button").removeAttr("disabled");
    $('#errortelefono').html('');
  }

}

function Actualizar() {

    var id = $("#id_d").val();
    var cantidad = $("#cantidad_d").val();
    // var valor = $("#valor_unitario_d").val();
    var total = $("#total_d").val();
    var csrftoken = '{{ csrf_token }}';

	$.ajax({
		headers: {'X-CSRF-TOKEN': csrftoken},
		method: 'POST',
		url: '/ventas/lista/detalle/editar_item/'+id+'/',
		dataType: 'text',
		data: { 'csrfmiddlewaretoken': csrftoken ,
		  'cantidad_item': cantidad,
		  // 'valor_unitario_item': valor,
		  'total_item': total,
		},
		success:function(data){
     //  swal('Se han actualizado los campos con éxito','','success').then(function(){
     //   location.reload();
     // });

		},
		error: function(xhr, e, x, status) {
			console.log(xhr.status + " -- " + status + " -- " + e + " -- " + x);
      swal('Ha ocurrido un error, porfavor vuelva a intentar','','warning').then(function(){
       location.reload();
      });
		}
	})
}

function datos2(id) {
    console.log(id);
    var csrftoken = '{{ csrf_token }}';
    $.ajax({
      headers: {'X-CSRF-TOKEN': csrftoken},
      method: "GET",
      url: '/ventas/lista/detalle/eliminar_item/'+id+'/',
      dataType: 'json',
      data: { "csrfmiddlewaretoken": csrftoken,
          "id": id }
    })

    .done(function(response){
      console.log(response);
      var res = response;

      $('#id_p2').text(res.id);
      $('#mensaje2').html('¿Está seguro que desea eliminar el producto <b>' + res.nombre + '</b> ?');

    })
}

function Eliminar() {
    var id2 = $("#id_p2").text();
    console.log(id2);
    var csrftoken = '{{ csrf_token }}';
    $.ajax({
      headers: {'X-CSRF-TOKEN': csrftoken},
      method: "POST",
      url: '/ventas/lista/detalle/eliminar_item/'+id2+'/',
      dataType: 'text',
      data: { "csrfmiddlewaretoken": csrftoken,
          "id": id2 },
      success:function(data){
         swal('Se eliminó con éxito','','success').then(function(){
           location.reload();
         });
      },
      error: function(xhr, e, x, status) {
        console.log(xhr.status + " -- " + status + " -- " + e + " -- " + x);
        swal('Ha ocurrido un error, porfavor vuelva a intentar','','warning').then(function(){
         location.reload();
        });
      }
    })
 }

</script>
 {% endblock %}