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

{%  block content %}

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

<h1 class="mt-4 text-center titleIniBox"><i class="fas fa-wallet"></i> Lista Ventas</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 venta</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: '/ventas/lista/'+id+'/',
      dataType: 'json',
      data: { "csrfmiddlewaretoken": csrftoken,
          "id": id }
    })

    .done(function(response){
      // console.log(response);
      var res = response;
      var html = '';
      var url = "{% url 'detalles_ventas' ";
      if (JSON.stringify(res)=='{}'){
        html += '<table class="table table-striped table-bordered" id="ejemplo">';
        html += '<thead class="theadStyle">';
        html += '<tr><th>Fecha de ventas realizadas</th>';
        html += '<th>Total</th>';
        html += '<th>Acciones</th></tr>';
        html += '</thead>';
        html += '<tbody class="text-center">';
        html += '<tr><td colspan="3" class="text-center bg-warning">No hay ventas 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 ventas realizadas</th>';
        html += '<th>Total</th>';
        html += '<th>Acciones</th></tr>';
        html += '</thead>';
        html += '<tbody class="text-center">';
        for(var item in res){
          // console.log(res[item]);
          html +='<tr>';
          html +='<td>'+res[item].fecha+'</td>';
          html +='<td>'+monedaChange(res[item].total)+'</td>';
          html +='<td><a class="btn btn-success btn-sm" href="/ventas/lista/detalle/'+res[item].id_venta+'/"> Detalles </a> ';
          html +=' <a class="btn btn-danger btn-sm"  data-toggle="modal" data-target="#eliminarmodal" onclick="datos2('+res[item].id_venta+')">Borrar </a></td>';
          html +='</tr>';
        }
        html += '</tbody>';
        html += '</table>';
      }

      $("#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 ventas registradas'){
                                    return 'No hay ventas 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 ventas copiada',
                       titleAttr: 'Copiar',
                       className: 'btn btn-app export copia',
                       exportOptions: {
                           columns: [ 0, 1 ]
                       }
                   },
                   {
                       extend:    'pdfHtml5',
                       text:      '<i class="fas fa-file-pdf"></i>PDF',
                       title:'Ventas del negocio '+ nombreDeNegocio,
                       titleAttr: 'PDF',
                       className: 'btn btn-app export pdf',
                       exportOptions: {
                           columns: [ 0, 1 ]
                       },
                       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 Ventas del negocio '+ nombreDeNegocio,
                       titleAttr: 'Excel',
                       className: 'btn btn-app export excel',
                       exportOptions: {
                           columns: [ 0, 1 ]
                       },
                   },
                   {
                       extend:    'csvHtml5',
                       text:      '<i class="fas fa-file-csv"></i>CSV',
                       title:'Tabla de Ventas del negocio '+ nombreDeNegocio,
                       titleAttr: 'CSV',
                       className: 'btn btn-app export csv',
                       exportOptions: {
                           columns: [ 0, 1 ]
                       }
                   },
                   {
                       extend:    'print',
                       text:      '<i class="fas fa-print"></i>Imprimir',
                       title:'Ventas del negocio '+ nombreDeNegocio,
                       titleAttr: 'Imprimir',
                       className: 'btn btn-app export imprimir',
                       exportOptions: {
                           columns: [ 0, 1 ]
                       }
                   },
                   {
                       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: '/ventas/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 venta de valor <b>$ ' + 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: '/ventas/eliminar/'+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');
      }
    })
 }
</script>
{% endblock %}