{% extends 'app/base_app.html' %}
{% load staticfiles %}
{% block title %} Lista de compras {% 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">Lista de compras</li>
</ul>

<h1 class="mt-4 text-center titleIniBox"><i class="fas fa-shopping-cart"></i> Lista Compras</h1>

<br>

<div class="table-responsive tableResStyle" id="tableee">

</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 compra</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>
            <br><br>
          </div>
        </div>

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


 {% endblock %}

{% block javascript %}
<script src="{% static 'js/fecha_v.js' %}"></script>
{% include "includes/script-datatables.html" %}
<script src="{% static 'js/moment.js' %}"></script>
<script src="{% static 'js/locate-es.js' %}"></script>
<script src="{% static 'js/datetime-moment.js' %}"></script>
<script src="{% static 'js/render-datetime-moment.js' %}"></script>
<script src="{% static 'js/moneda-formato.js' %}"></script>

<script>

$(document).ready(function() {

var nombreDeNegocio = $('#nameNegocio').text();

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

.done(function(response){

var res = response;
var html = '';
var url = "{% url 'detalles_compras' ";

if (JSON.stringify(res)=='{}'){
  html += '<table class="table table-striped table-bordered" id="ejemplo">';
  html += '<thead class="theadStyle">';
  html += '<tr><th>Fecha de la compra</th>';
  html += '<th>Proveedor</th>';
  html += '<th>Total</th>';
  html += '<th>Acciones</th></tr>';
  html += '</thead>';
  html += '<tbody class="text-center">';
  html = '<tr><td colspan="4" class="text-center bg-warning">No hay compras registradas</td></tr>';
  html += '</tbody>';
  html += '</table>';
}
else{
  html += '<table class="table table-striped table-bordered" id="ejemplo">';
  html += '<thead class="theadStyle">';
  html += '<tr><th>Fecha de la compra</th>';
  html += '<th>Proveedor</th>';
  html += '<th>Total</th>';
  html += '<th>Acciones</th></tr>';
  html += '</thead>';
  html += '<tbody class="text-center">';
  for(var item in res){
    html +='<tr>';
    html +='<td>'+res[item].fecha+'</td>';
    html +='<td>'+res[item].proveedor+'</td>';
    html +='<td><b>'+monedaChange(res[item].total)+'</b></td>';
    html +='<td><a class="btn btn-green btn-sm" href="/compras/lista/detalle/'+res[item].id_compra+'/"> Detalles </a> ';
    html +=' <a class="btn btn-red btn-sm"  data-toggle="modal" data-target="#eliminarmodal" onclick="datos2('+res[item].id_compra+')">Borrar </a></td>';
    html +='</tr>';
    console.log(res[item].fecha);
  }
    html += '</tbody>';
    html += '</table>';
}
// $("#respuesta_j").append(html);
$("#tableee").append(html);
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"]],
   "columnDefs":[{
                  "targets": [0],
                  "render": function(data) {
                            if(data=='No hay compras registradas'){
                              return 'No hay compras registradas';
                            }else {
                              return moment(data).format('YYYY / MM / DD');
                            }
                          },
              }],
   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: [ 0, 1, 2 ]
                 }
             },
             {
                 extend:    'pdfHtml5',
                 text:      '<i class="fas fa-file-pdf"></i>PDF',
                 title:'Compras del negocio '+ nombreDeNegocio,
                 titleAttr: 'PDF',
                 className: 'btn btn-app export pdf',
                 exportOptions: {
                     columns: [ 0, 1, 2 ]
                 },
                 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 Compras del negocio '+ nombreDeNegocio,
                 titleAttr: 'Excel',
                 className: 'btn btn-app export excel',
                 exportOptions: {
                     columns: [ 0, 1, 2 ]
                 },
             },
             {
                 extend:    'csvHtml5',
                 text:      '<i class="fas fa-file-csv"></i>CSV',
                 title:'Tabla de Compras del negocio '+ nombreDeNegocio,
                 titleAttr: 'CSV',
                 className: 'btn btn-app export csv',
                 exportOptions: {
                     columns: [ 0, 1, 2 ]
                 }
             },
             {
                 extend:    'print',
                 text:      '<i class="fas fa-print"></i>Imprimir',
                 title:'Compras del negocio '+ nombreDeNegocio,
                 titleAttr: 'Imprimir',
                 className: 'btn btn-app export imprimir',
                 exportOptions: {
                     columns: [ 0, 1, 2 ]
                 }
             },
             {
                 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: '/compras/eliminar/'+id+'/',
      dataType: 'json',
      data: { "csrfmiddlewaretoken": csrftoken,
          "id": id }
    })

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

      $('#id_p2').text(res.idd);
      $('#mensaje2').html('¿ Está seguro que desea eliminar la compra de valor <b>' + monedaChange(res.total) + '</b> con fecha del <b>'+ val_fecha(res.fecha) +'</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/eliminar/'+id2+'/',
      dataType: 'text',
      data: { "csrfmiddlewaretoken": csrftoken,
          "id": id2 },
      success:function(data){
          swal('La compra 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');
      }
    })
 }
</script>
{% endblock %}