{% extends 'app/base_app.html' %}
{% load staticfiles %}
{% load humanize %}
{% block title %} Detalle de la 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">Lista de compras</li>
  <li class="breadcrumb-item active">Detalles compra</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-shopping-cart"></i> Detalle de la compra</h1>

<br><br>
{% for row in compra %}
<div class="row">
    <div class="col-md-4 col-sm-4 col-lg-4 text-center">
		<h5>Fecha de la compra:</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 compra:</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>Proveedor</th>
        <th>Cantidad</th>
        <th>Unidad Medida</th>
        <th>Valor unitario</th>
        <th>Total producto</th>
        <th>Acciones</th>
      </tr>
    </thead>
    <tbody class="text-center">
       {% for row in detalles__compras %}
        <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.proveedor_id.razon_social }}</td>
          <td>{{ row.cantidad }}</td>
          <td>{{ row.producto_id.unidad_medida_id.abreviatura_unidad }}</td>
          <td>${{ row.valor_unitario|intcomma }}</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 Ítem</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_compra">
                  {% 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="number" class="form-control" id="valor_unitario_d" onkeyup='calcularMult()' min="1">
                    </div>
                  </div>

                  <div class="form-group">
                    <br>
                    <label>Total:</label>
                    <input type="number" class="form-control" id="total_d" disabled="true">
                  </div>

                  <div id="alerta-c">

                  </div>

                  <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: '/compras/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 = $("#valor_unitario_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 }}';

    if(cantidad < 1){
      $("#alerta-c").html('<div class="alert alert-danger" role="alert">La <b>cantidad</b> no puede ser menor a 1 o negativo.</div>');
    }else if(valor < 1){
      $("#alerta-c").html('<div class="alert alert-danger" role="alert">El <b>valor unitario</b> no puede ser menor a 1 o negativo.</div>');
    }else{
      $("#alerta-c").html('');

      $.ajax({
    		headers: {'X-CSRF-TOKEN': csrftoken},
    		method: 'POST',
    		url: '/compras/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: '/compras/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: '/compras/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 %}