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

{%  block content %}

<ul class="breadcrumb breadcrumbStyle">
  <li class="breadcrumb-item"><i class="fas fa-tools"></i> Administración</li>
  <li class="breadcrumb-item active">Lista empleado</li>
</ul>

<br>

{% if request.user|has_group:"propietario_negocio" %}
<h1 class="mt-4 text-center titleIniBox"><i class="fas fa-list-ul"></i> Lista de Empleados</h1>

<br>

<div class="table-responsive tableResStyle">
 <table class="table table-striped table-bordered table-striped" id="ejemplo">
    <thead class="theadStyle">
      <tr>
        <!-- <th>Código</th> -->
        <th>Nombre Empleado</th>
        <th>Usuario</th>
        <th>Email</th>
        <th>Documento</th>
        <th>Teléfono</th>
      </tr>
    </thead>
    <tbody class="text-center">
    {% for row in usuarioss %}
      <tr>
        <td>{{ row.usuario_id.id.first_name }} {{ row.usuario_id.id.last_name }}</td>
        <td>{{ row.usuario_id.id.username }}</td>
        <td>{{ row.usuario_id.id.email }}</td>
        <td>{{ row.usuario_id.documento }}</td>

        {% if row.usuario_id.telefono == Null %}
        <td>-</td>
        {% else %}
        <td>{{ row.usuario_id.telefono }}</td>
        {% endif %}

        <!-- {% 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>
          <a class="btn btn-green btn-sm" href="#" > Detalles </a>
        </td> -->
      </tr>
      {% empty %}
      <tr>
        <td colspan="6" class="text-center bg-warning">No hay usuarios registrados</td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>


{% endif %}
{% if request.user|has_group:"empleado_negocio" %}
	<p>Lo siento, no tiene permisos para este contenido :(</p>
{% endif %}

{% 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:'Lista de empleados copiada',
                 titleAttr: 'Copiar',
                 className: 'btn btn-app export copia',
                 exportOptions: {
                     columns: [ 0, 1, 2, 3, 4 ]
                 }
             },
             {
                 extend:    'pdfHtml5',
                 text:      '<i class="fas fa-file-pdf"></i>PDF',
                 title:'Empleados del negocio '+ nombreDeNegocio,
                 titleAttr: 'PDF',
                 className: 'btn btn-app export pdf',
                 exportOptions: {
                     columns: [ 0, 1, 2, 3, 4 ]
                 },
                 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 Empleados del negocio '+ nombreDeNegocio,
                 titleAttr: 'Excel',
                 className: 'btn btn-app export excel',
                 exportOptions: {
                     columns: [ 0, 1, 2, 3, 4 ]
                 },
             },
             {
                 extend:    'csvHtml5',
                 text:      '<i class="fas fa-file-csv"></i>CSV',
                 title:'Tabla de Empleados del negocio '+ nombreDeNegocio,
                 titleAttr: 'CSV',
                 className: 'btn btn-app export csv',
                 exportOptions: {
                     columns: [ 0, 1, 2, 3, 4 ]
                 }
             },
             {
                 extend:    'print',
                 text:      '<i class="fas fa-print"></i>Imprimir',
                 title:'Empleados del negocio '+ nombreDeNegocio,
                 titleAttr: 'Imprimir',
                 className: 'btn btn-app export imprimir',
                 exportOptions: {
                     columns: [ 0, 1, 2, 3, 4 ]
                 }
             },
             {
                 extend:    'pageLength',
                 titleAttr: 'Registros a mostrar',
                 className: 'selectTable'
             }
         ]
       }
   });
} );

</script>
{% endblock %}