{% extends 'app/base_app.html' %}
{% load staticfiles %}
{% load humanize %}
{% block title %} Lista de productos {% endblock %}

{%  block content %}

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

<h1 class="mt-4 text-center titleIniBox"><i class="fas fa-carrot"></i> Lista de productos</h1>

<br>

<div class="table-responsive tableResStyle">
 <table class="table table-striped table-bordered table-striped" id="ejemplo">
    <thead class="theadStyle">
      <tr>
        <th>Imagen</th>
        <th>Nombre</th>
        <th>Stock</th>
        <th>Unidad</th>
        <th>Costo</th>
        <th>Venta</th>
        <th>Estado</th>
        <th>Descripción</th>
        <th>Acciones</th>
      </tr>
    </thead>
    <tbody class="text-center">
    {% for row in negocio_producto %}
      <tr>
        {% if row.producto_id.imagen %}
        <td class="align-middle"> <img src="/media/{{ row.producto_id.imagen }}" class="img-fluid" style="max-width: 150px; max-height: 120px;">  </td>
        {% else %}
        <td class="align-middle"> <img src="{% static 'img/nofoto.png' %}" class="img-fluid" style="max-width: 50px;"> </td>
        {% endif %}
        <td class="align-middle">{{ row.producto_id.nombre }}</td>
        <td class="align-middle">{{ row.producto_id.stock }}</td>
        <td class="align-middle">{{ row.producto_id.unidad_medida_id.abreviatura_unidad }}</td>
        <td class="align-middle">${{ row.producto_id.valor_costo|intcomma }}</td>
        <td class="align-middle">${{ row.producto_id.valor_venta|intcomma }}</td>
        {% if row.producto_id.estado == '1'  %}
        <td class="align-middle"><span class="badge badge-success badge-font-90">Activo</span></td>
        {% elif row.producto_id.estado == '2' %}
        <td class="align-middle"><span class="badge badge-danger badge-font-90">Finalizado</span></td>
        {% endif %}
        {% if row.producto_id.descripcion == "" %}
        <td class="align-middle">-</td>
        {% else %}
        <td class="align-middle">{{ row.producto_id.descripcion }}</td>
        {% endif %}
        <td class="align-middle">
          <a class="btn btn-green btn-sm" href="{% url 'detalle_producto' pk=row.producto_id.id %}" > Detalles </a>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="6" class="text-center bg-warning">No hay productos registrados</td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>

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

            <!-- Modal Header -->
            <div class="modal-header">
              <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 id="id_p2" hidden="false"></div>
              <p id="mensaje2"></p>
              <button class="save btn btn-danger" type="submit" onclick="Eliminar()">Eliminar</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>

            </div>

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

 {% endblock %}

 {% block javascript %}
{% include "includes/script-datatables.html" %}
<script>

$(document).ready(function() {

var nombreDeNegocio = $('#nameNegocio').text();
var table = $('#ejemplo').DataTable( {
   "paging": true,
   "lengthChange": true,
   "searching": true,
   "ordering": true,
   "info": true,
   "autoWidth": true,
   "language": idioma,
   "lengthMenu": [[15, 25, 50, -1],[15,25,50,"Mostrar Todo"]],
   dom: 'Bfrt<"col-md-6 inline"i> <"col-md-6 inline"p>',
   buttons: {
         dom: {
           container:{
             tag:'div',
             className:'flexcontent'
           },
           buttonLiner: {
             tag: null
           }
         },

         buttons: [
             {
                 extend:    'copyHtml5',
                 text:      '<i class="fa fa-clipboard"></i> Copiar',
                 title:'Tabla de productos copiada',
                 titleAttr: 'Copiar',
                 className: 'btn btn-app export copia',
                 exportOptions: {
                     columns: [ 1, 2, 3, 4, 5, 6, 7 ]
                 }
             },
             {
                 extend:    'pdfHtml5',
                 text:      '<i class="fas fa-file-pdf"></i>PDF',
                 title:'Productos del negocio '+ nombreDeNegocio,
                 titleAttr: 'PDF',
                 className: 'btn btn-app export pdf',
                 exportOptions: {
                     columns: [ 1, 2, 3, 4, 5, 6, 7 ]
                 },
                 customize:function(doc) {

                     doc.styles.title = {
                         color: '#4c8aa0',
                         fontSize: '30',
                         alignment: 'center'
                     }
                     doc.styles['td:nth-child(2)'] = {
                         width: '100px',
                         'max-width': '100px'
                     },
                     doc.styles.tableHeader = {
                         fillColor:'#4c8aa0',
                         color:'white',
                         alignment:'center'
                     },
                     doc.content[1].margin = [ 100, 0, 100, 0 ]

                 }
             },

             {
                 extend:    'excelHtml5',
                 text:      '<i class="fas fa-file-excel"></i>Excel',
                 title:'Tabla de Productos del negocio '+ nombreDeNegocio,
                 titleAttr: 'Excel',
                 className: 'btn btn-app export excel',
                 exportOptions: {
                     columns: [ 1, 2, 3, 4, 5, 6, 7 ]
                 },
             },
             {
                 extend:    'csvHtml5',
                 text:      '<i class="fas fa-file-csv"></i>CSV',
                 title:'Tabla de Productos del negocio '+ nombreDeNegocio,
                 titleAttr: 'CSV',
                 className: 'btn btn-app export csv',
                 exportOptions: {
                     columns: [ 1, 2, 3, 4, 5, 6, 7 ]
                 }
             },
             {
                 extend:    'print',
                 text:      '<i class="fas fa-print"></i>Imprimir',
                 title:'Productos del negocio '+ nombreDeNegocio,
                 titleAttr: 'Imprimir',
                 className: 'btn btn-app export imprimir',
                 exportOptions: {
                     columns: [ 1, 2, 3, 4, 5, 6, 7 ]
                 }
             },
             {
                 extend:    'pageLength',
                 titleAttr: 'Registros a mostrar',
                 className: 'selectTable'
             }
         ]
       }
   });
} );

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

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

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

    });
}

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

</script>
 {% endblock %}