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

{%  block content %}

<ul class="breadcrumb breadcrumbStyle">
  <li class="breadcrumb-item"><i class="fas fa-users"></i> Proveedoress</li>
  <li class="breadcrumb-item active">Lista de proveedores</li>
</ul>

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

<br>

<div class="table-responsive tableResStyle">
 <table class="table table-striped table-bordered table-striped" id="ejemplo">
    <thead class="theadStyle">
      <tr>
        <th>Nombre</th>
        <th>Razón social</th>
        <th>Teléfono</th>
        <th>Dirección</th>
        <th>Celular</th>
        <th>Email</th>
        <th>Acciones</th>
      </tr>
    </thead>
    <tbody class="text-center">
      {% for row in negocio_proveedor %}
        <tr>
          <td>{{ row.proveedor_id.nombre }}</td>
          <td>{{ row.proveedor_id.razon_social }}</td>

          {% if row.proveedor_id.telefono == "" %}
          <td>-</td>
          {% else %}
          <td>{{ row.proveedor_id.telefono }}</td>
          {% endif %}

          {% if row.proveedor_id.direccion == "" %}
          <td>-</td>
          {% else %}
          <td>{{ row.proveedor_id.direccion }}</td>
          {% endif %}

          {% if row.proveedor_id.celular == "" %}
          <td>-</td>
          {% else %}
          <td>{{ row.proveedor_id.celular }}</td>
          {% endif %}

          {% if row.proveedor_id.email == "" %}
          <td>-</td>
          {% else %}
          <td>{{ row.proveedor_id.email }}</td>
          {% endif %}

          <td>
            <a id="{{row.proveedor_id.id}}" class="btn btn-green btn-sm" data-toggle="modal" data-target="#editarmodal" onclick="datos(this.id)"> Editar </a>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="6" class="text-center bg-warning">No hay proveedores registrados</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 Proveedor</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_proveedor">
                  {% csrf_token %}

                  <div class="row">
                    <div class="col">
                      <input id="id_p" hidden="false">
                      <label>Nombre de contácto:</label>
                      <input type="text" class="form-control" id="nombre_p">
                      <div id="errornombre"></div>
                    </div>

                    <div class="col">
                      <label>Razon Social:</label>
                      <input type="text" class="form-control" id="razon_social_p" required>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col">
                      <label>Direccion:</label>
                      <input type="text" class="form-control" id="direccion_p">
                    </div>

                    <div class="col">
                      <label>Email:</label>
                      <input type="text" class="form-control" id="email_p">
                      <div id="erroremail"></div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col">
                      <label>Teléfono:</label>
                      <input type="text" class="form-control" id="telefono_p">
                      <div id="errortelefono"></div>
                    </div>

                    <div class="col">
                      <label>Celular:</label>
                      <input type="text" class="form-control" id="celular_p">
                      <div id="errorcelular"></div>
                    </div>
                  </div>

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

            <!-- Modal footer -->
            <div class="modal-footer">
              <button type="button" class="btn btn-red" data-dismiss="modal">Close</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: [ 0, 1, 2, 3, 4, 5 ]
                  }
              },
              {
                  extend:    'pdfHtml5',
                  text:      '<i class="fas fa-file-pdf"></i>PDF',
                  title:'Proveedores del negocio '+ nombreDeNegocio,
                  titleAttr: 'PDF',
                  className: 'btn btn-app export pdf',
                  exportOptions: {
                      columns: [ 0, 1, 2, 3, 4, 5 ]
                  },
                  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 Proveedores del negocio '+ nombreDeNegocio,
                  titleAttr: 'Excel',
                  className: 'btn btn-app export excel',
                  exportOptions: {
                      columns: [ 0, 1, 2, 3, 4, 5 ]
                  },
              },
              {
                  extend:    'csvHtml5',
                  text:      '<i class="fas fa-file-csv"></i>CSV',
                  title:'Tabla de Proveedores del negocio '+ nombreDeNegocio,
                  titleAttr: 'CSV',
                  className: 'btn btn-app export csv',
                  exportOptions: {
                      columns: [ 0, 1, 2, 3, 4, 5 ]
                  }
              },
              {
                  extend:    'print',
                  text:      '<i class="fas fa-print"></i>Imprimir',
                  title:'Proveedores del negocio '+ nombreDeNegocio,
                  titleAttr: 'Imprimir',
                  className: 'btn btn-app export imprimir',
                  exportOptions: {
                      columns: [ 0, 1, 2, 3, 4, 5 ]
                  }
              },
              {
                  extend:    'pageLength',
                  titleAttr: 'Registros a mostrar',
                  className: 'selectTable'
              }
          ]
        }
    });
 } );

 function datos(id) {

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

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

          $('#id_p').val(res.id);
          $('#nombre_p').val(res.nombre);
          $('#razon_social_p').val(res.razon_social);
          $('#direccion_p').val(res.direccion);
          $('#email_p').val(res.email);
          $('#telefono_p').val(res.telefono);
          $('#celular_p').val(res.celular);

        });
      }

function Actualizar() {

    var id = $("#id_p").val();
    var nombre = $("#nombre_p").val();
    var razon = $("#razon_social_p").val();
    var direccion = $("#direccion_p").val();
    var telefono = $("#telefono_p").val();
    var email = $("#email_p").val();
    var celular = $("#celular_p").val();
    var csrftoken = '{{ csrf_token }}';

    validacion_nombre = /^([A-Za-zñÑáéíóúÁÉÍÓÚ\s])*$/;
    validacion_numeros = /^([0-9])*$/;
    validacion_email = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;

    if (!validacion_nombre.test(nombre)){
      $('#nombre_p').focus();
      $('#errornombre').html('<small class="form-text text-muted">Ingrese un nombre válido</small>');
      return false;
    } else if (email != "" && !validacion_email.test(email)){
      $('#errornombre').html('');
      $('#email_p').focus();
      $('#erroremail').html('<small class="form-text text-muted">Ingrese una dirección de correo válida.</small>');
      return false;
    } else if (!validacion_numeros.test(telefono)){
      $('#errornombre').html('');
      $('#erroremail').html('');
      $('#telefono_p').focus();
      $('#errortelefono').html('<small class="form-text text-muted">Ingrese un número de teléfono válido sin dejar espacios.</small>');
      return false;
    } else if (!validacion_numeros.test(celular)){
      $('#errornombre').html('');
      $('#erroremail').html('');
      $('#errortelefono').html('');
      $('#celular_p').focus();
      $('#errorcelular').html('<small class="form-text text-muted">Ingrese un número de celular válido sin dejar espacios.</small>');
      return false;
    } else {

      $.ajax({
        headers: {'X-CSRF-TOKEN': csrftoken},
        method: 'POST',
        url: '/proveedores/editar/'+id+'/',
        dataType: 'text',
        data: { 'csrfmiddlewaretoken': csrftoken ,
          'nombre_proveedor': nombre,
          'razon_social_proveedor': razon,
          'direccion_proveedor': direccion,
          'celular_proveedor': celular,
          'telefono_proveedor': telefono,
          'email_proveedor':email },
          success:function(data){
              // alert('Se ha actualizado con éxito');
          },
          error: function(xhr, e, x, status) {
            console.log(xhr.status + " -- " + status + " -- " + e + " -- " + x);
            swall('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: '/proveedores/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 al proveedor ' + res.razon_social + ' ?');
//
//     });
// }
//
// function Eliminar() {
//     var id2 = $("#id_p2").text();
//     console.log(id2);
//     var csrftoken = '{{ csrf_token }}';
//     $.ajax({
//       headers: {'X-CSRF-TOKEN': csrftoken},
//       method: "POST",
//       url: '/proveedores/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 %}